@charset "UTF-8";
/* CSS Document */
/*後に削除*/
.comming_soon {
  border: 3px solid #ff0000;
  width: 90%;
  margin: 15px auto;
  text-align: center;
  padding: 30px 15px;
}
.comming_soon .title {
  font-size: 2.4rem;
}
#starbucks .button.end {
  background-color: #999999;
  background-image: none;
}
/*
全体
*/
#starbucks {
  letter-spacing: .045em;
}
#starbucks section:nth-of-type(n + 2) {
  padding-top: 45px
}

@media screen and (min-width:768px) {
  #starbucks section:nth-of-type(n + 2)  {
    padding-top: 90px
  }
}


#starbucks section > section {
  padding-top: 30px
}
#starbucks .title_block {
  padding-bottom: 30px
}
#starbucks .pc_only {
  display: none;
}
#starbucks .inner {
  padding: 0 3%;
}
#starbucks .txt {
  font-size: 1.2rem;
}
#starbucks .button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  border-radius: 5px;
  width: 200px;
  height: 40px;
  font-weight: bold;
  transition: 0.3s;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
  background-image: linear-gradient(180deg, rgba(0, 98, 65, 1) 68%, rgba(0, 98, 47, 0.75) 90%);
}
#starbucks .button a {
  color: #fff;
  font-weight: bold;
  letter-spacing: .045em;
}
#starbucks .button:hover {
  opacity: .7;
}

.isiPad  #starbucks .pc_only {
    display: none;
  }

@media screen and (min-width:768px) {
  #starbucks .pc_only {
    display: block;
  }
  #starbucks .inner {
    max-width: 1200px;
    width: 100%;
    margin: auto;
  }
  #starbucks .txt {
    font-size: 1.5rem;
  }
}
/*
main_visual_area
*/
#starbucks .main_visual_area {
  background: url(/iphone/ayl/starbucks/images/main.jpg) no-repeat center center / cover;
  height: 600px;
  width: 100%;
  position: relative;
}
#starbucks .main_visual_area h1 {
  position: absolute;
  top: 3%;
  width: 80%;
  margin: auto;
  right: 0;
  left: 0;
}
#starbucks .main_visual_area .lead {
  position: absolute;
  bottom: 8%;
  color: #fff;
  line-height: 2;
  width: 80%;
  left: 0;
  right: 0;
  margin: auto;
  font-weight: bold;
}
@media screen and (min-width:768px) {
#starbucks .main_visual_area {
  background: url(/ayl/starbucks/images/main.jpg) no-repeat center center / cover;
  height: 600px;
  width:130vw;
}	
#starbucks .main_visual_area h1 {
    position: absolute;
    top: 20%;
    width: 35vw;
    margin: auto;
    right: 43vw;
    left: auto;
}	
#starbucks .main_visual_area .lead {
    bottom: 15%;
    color: #fff;
    width: 55vw;
    right: 31vw;
    left: auto;
    font-size: 1.8rem;
}
}
@media screen and (min-width:969px) {

#starbucks .main_visual_area {
  background: url(/ayl/starbucks/images/main.jpg) no-repeat center center / cover;
  width: 100%;
}	
#starbucks .main_visual_area h1 {
    position: absolute;
    top: 23%;
    width: 35vw;
    margin: auto;
    right: 15%;
    left: auto;
}	
#starbucks .main_visual_area .lead {
    bottom: 16%;
    color: #fff;
    width: 58vw;
    right: 0%;
    left: auto;
    font-size: 1.8rem;
}
}

@media screen and (min-width:1280px) {
#starbucks .main_visual_area {
  height: 600px;
  width: 100%;
}	
#starbucks .main_visual_area h1 {
    position: absolute;
    top: 20%;
    width: 35vw;
    margin: auto;
    right: 16%;
    left: auto;
}	
#starbucks .main_visual_area .lead {
    bottom: 20%;
    color: #fff;
    right: 2%;
    left: auto;
}
}

@media screen and (min-width:1368px) {
#starbucks .main_visual_area {
  height: 700px;
  width: 100%;
}	
#starbucks .main_visual_area h1 {
    position: absolute;
    top: 20%;
    width: 35vw;
    margin: auto;
    right: 15%;
    left: auto;
}	
#starbucks .main_visual_area .lead {
    bottom: 15%;
    color: #fff;
    width: 48vw;
    right: 2%;
    left: auto;
}
}

/*
about_area
*/
#starbucks .point .title_block {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 5px;
}
#starbucks .point .title_block .circle {
  grid-area: 1 / 1 / 2 / 3;
  background: url(/ayl/starbucks/images/circle.svg) no-repeat center center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
}
#starbucks .point .title_block .circle span {
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 1.2rem;
}
#starbucks .point .title_block .title {
  grid-area: 1 / 3 / 2 / 7;
  font-weight: bold;
  border-bottom: 2px solid #006241;
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  color: #006241;
  padding: 3%;
  margin-bottom: 15px;
}
#starbucks .point .title_block .txt {
  grid-area: 2 / 1 / 3 / 7;
  width: 90%;
  margin: auto;
  font-weight: bold;
}
@media screen and (min-width:768px) {
  #starbucks .point .title_block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 0px;
    max-width: 1000px;
    width: 100%;
    margin: auto;
  }
  #starbucks .point .title_block .circle {
    grid-area: 1 / 1 / 3 / 2;
    background: url(/ayl/starbucks/images/circle.svg) no-repeat center center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 250px;
  }
  #starbucks .point .title_block .title {
    grid-area: 1 / 2 / 2 / 5;
    font-weight: bold;
    border-bottom: 2px solid #006241;
    display: flex;
    align-items: center;
    font-size: 3.6rem;
    color: #006241;
    padding: 0%;
    margin-bottom: 15px;
  }
	#starbucks .point .title_block .circle span{
		font-weight: bold;
		font-size: 2.4rem;
	}	
	
  #starbucks .point .title_block .txt {
    grid-area: 2 / 2 / 3 / 5;
    width: 100%;
    margin: auto;
	font-size: 1.8rem;
  }
}
#starbucks .about_area ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#starbucks .about_area ul li {
  width: 48%;
  margin-bottom: 30px;
  background-color: #1a3932;
  position: relative;
  color: #fff;
  padding: 6% 3%;
}
@media screen and (min-width:768px) {
  #starbucks .about_area ul li {
    width: 23%;
    margin-bottom: 0;
    padding: 2%;
  }
}
#starbucks .about_area ul li:nth-of-type(n + 3) {
  margin-bottom: 0;
}
#starbucks .about_area ul li:after {
  content: " ";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  background-color: #006241;
  z-index: -1;
}
#starbucks .about_area ul li h3 {
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  font-size: 1.6rem;
}

@media screen and (min-width:768px) {
#starbucks .about_area ul li h3  {
  font-size: 2.0rem;
	}}

#starbucks .about_area ul li .sub_title {
  margin-bottom: 15px;
  text-align: center;
  font-size: 1.2rem;
}
#starbucks .about_area ul li .sub_title:before, #starbucks .about_area ul li .sub_title:after {
  content: "-";
}
#starbucks .about_area ul li .txt {
  font-size: 1.2rem;
}
/*
note_area
*/
#starbucks .note_area {}
#starbucks .note_area .detail {
  border: 3px solid #006241;
  padding: 3%;
}
#starbucks .note_area .detail ul li {
  border-bottom: 1px solid #006241;
  padding: 15px 3%;
}
#starbucks .note_area .detail ul li:nth-last-of-type(1) {
  border-bottom: none;
}
#starbucks .note_area .detail h3 {
  color: #006241;
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 2rem;
}
#starbucks .note_area .detail .pic {
  margin-bottom: 15px;
}
@media screen and (min-width:768px) {
  #starbucks .note_area .detail ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
	
	  #starbucks .note_area .detail ul li{
padding:3% 3% 0;
  }
	
  #starbucks .note_area .detail ul li:nth-of-type(1) {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
	padding: 0 3% 3% 3%;
  }
  #starbucks .note_area .detail ul li:nth-of-type(1) .block {
    width: 45%;
  }
  #starbucks .note_area .detail ul li:nth-of-type(2) {
    width: 56%;
    border-bottom: none;
    border-right: 1px solid #006241;
  }
  #starbucks .note_area .detail ul li:nth-of-type(3) {
    width: 40%;
  }
  #starbucks .note_area .detail .block h3 + .pic {
    margin-bottom: 0;
  }
	
	#starbucks .note_area .detail h3 {
  font-weight: bold;
  font-size: 2.4rem;
}
	
}
/*
course_area
*/
#starbucks .course_area .title_block .title {
  font-weight: bold;
  color: #006241;
  font-size: 2.4rem;
  text-align: center;
}

#starbucks .course_area .title_block .title span{
    display: block;
    font-size: 2rem;
    font-weight: bold;
}

#starbucks .course_area .title_block .souryou_free{
    width: 90%;
    max-width: 120px;
    margin: 0 auto;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    background-color: #A78C58;
}

#starbucks .course_area .title_block .txt {
    text-align: center;
    font-weight: bold;
    margin: 10px 0 30px;
}
#starbucks .course_area .title_block .pic {
  margin-bottom: 15px;
}
#starbucks .course_area .inside_slider {
  margin: 0 -3% 15px -3%;
}
#starbucks .course_area .inside_slider .swiper-wrapper .swiper-slide {
  padding: 3%;
}
#starbucks .course_area .inside_slider .swiper-wrapper .swiper-slide .detail_top {
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #006241;
}
#starbucks .course_area .inside_slider .swiper-wrapper .swiper-slide .detail_top .pic {
  width: 75%;
  margin: auto;
}
#starbucks .course_area .inside_slider .swiper-wrapper .swiper-slide .detail_top .name {
  font-weight: bold;
}
#starbucks .course_area .inside_slider .swiper-wrapper .swiper-slide .detail_top .name span {
  font-size: 2rem;
  display: block;
  font-weight: bold;
}
#starbucks .course_area .inside_slider .swiper-wrapper .swiper-slide .detail_top .price span {
  font-size: 2rem;
}
#starbucks .course_area .inside_slider .swiper-wrapper .swiper-slide .detail_bottom {
  padding: 3%;
  text-align: center;
}
#starbucks .course_area .inside_slider .swiper-wrapper .swiper-slide .detail_bottom .txt {
  text-align: left;
  display: inline-block;
}
#starbucks .course_area .inside_slider .swiper-wrapper .swiper-slide .button {
  margin: 15px auto 0;
}
#starbucks .course_area .inside_slider .swiper-button-prev, .swiper-button-next {
  width: 32px;
  height: 32px;
  margin-top: -16px;
}
#starbucks .course_area .inside_slider .swiper-button-prev {
  background: url(/ayl/starbucks/images/arrow_left.png) no-repeat center center / contain;
}
#starbucks .course_area .inside_slider .swiper-button-prev::after {
  content: "";
}
#starbucks .course_area .inside_slider .swiper-button-next {
  background: url(/ayl/starbucks/images/arrow_right.png) no-repeat center center / contain;
}
#starbucks .course_area .inside_slider .swiper-button-next::after {
  content: "";
}
@media screen and (min-width:768px) {
	#starbucks .course_area .title_block .title {
        font-weight: bold;
        font-size: 3.6rem;
    }
    
    #starbucks .course_area .title_block .souryou_free{
        font-size: 1.4rem;
    }
	
  #starbucks .course_area .inside_slider .swiper-wrapper {
    display: flex;
	justify-content: space-between;
  }
  #starbucks .course_area .inside_slider .swiper-wrapper .swiper-slide {
    width: 30%;
    padding: 0;
  }
  #starbucks .course_area .inside_slider .swiper-button-prev, .swiper-button-next {
    display: none;
  }
	
	#starbucks .course_area .inside_slider {
  margin: 0 0 45px 0;
}
	
}