@charset "UTF-8";
/* CSS Document */
/*ブレイクポイント　600px,1024px*/
/*ページビジュアル*/
.page_visual_wrap h1 {
  width: 192px;
}
.page_visual_bg {
  background-image: url("../images/page_visual_lesson.jpg");
}
@media(max-width:1024px) {
  .page_visual_wrap h1 {
    width: 138px;
  }
}
@media(max-width:599px) {
  .firstview_wrap h1 {
    width: 144px;
  }
}
.lesson {
  position: relative;
  z-index: 8000;
  margin: 0 220px 0 180px;
}
.lesson_content {
  display: flex;
  margin-bottom: 16px;
}
.lesson_content span,.lesson_others span{
	display: inline-block;
}
.lesson_content p {
  position: relative;
}
.lesson_content p::before {
  content: ":";
  position: absolute;
  left: -14px;
  top: -2px;
}
.lesson h3 {
  color: #BA835F;
  font-size: 1.8rem;
  min-width: 110px;
  margin-right: 20px;
  line-height: 2;
}
.lesson_others {
  margin-left: 18px;
}
.lesson_others p {
  position: relative;
}
.lesson_others p::before {
  content: "※";
  position: absolute;
  left: -18px;
  top: -2px;
}
.lesson_others br {
  display: none;
}
@media(min-width:1441px) {
  .lesson {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
}
@media(max-width:1024px) {
  .lesson {
    margin: 0 40px
  }
}
@media(max-width:599px) {
  .lesson_content {
    flex-direction: column;
  }
  .lesson h3::before {
    content: "・";
  }
  .lesson_content p::before {
    content: none;
  }
  .lesson_others {
    margin-left: 0;
  }
}
.menu_container {
  margin-top: 96px;
  padding: 96px 8%;
  background-color: #FCEEC4;
}
.basic_course_container {
  padding: 96px 12%;
  border-radius: 60px;
  background-color: #fff;
  margin-bottom: 96px;
}
.menu_wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.thumb {
  width: 100%;
  max-width: 360px;
  min-width: 295px;
}
.thumb img {
  border-radius: 60px;
}
.menu_detail {
  width: 100%;
  margin-left: 40px;
}
.menu_ttl {
  display: flex;
  align-items: center;
}
.menu_img img {
  margin-bottom: 4px;
}
.basic_ttl_jp {
  width: 252px;
  margin-right: 24px;
}
.basic_ttl_en {
  width: 160px;
}
.menu_detail h3 {
  margin: 16px 0 20px 0;
  font-size: 2.4rem;
  color: #BA835F;
}
.ribbon {
  display: inline-block;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 48px;
  line-height: 48px;
  text-align: center;
  padding: 7px 0;
  margin-top: 40px;
  font-size: 18px; /*フォントサイズ*/
  background: #BA835F; /*背景色*/
  color: #FFF; /*文字色*/
  box-sizing: border-box;
}
.ribbon h3 {
  margin: 0;
  padding: 0 40px;
  border-top: dashed 1px #FFF; /*上の破線*/
  border-bottom: dashed 1px #FFF; /*下の破線*/
  line-height: 32px;
  font-size: 2.4rem;
}
.ribbon:before, .ribbon:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}
.ribbon:before {
  /*左端の山形*/
  top: 0;
  left: 0;
  border-width: 24px 0px 24px 18px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}
.ribbon:after {
  /*右端の山形*/
  top: 0;
  right: 0;
  border-width: 24px 18px 24px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}
.basic_course_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 4%;
  row-gap: 40px;
  margin: 40px auto 0;
}
.basic_course_menu li {
  display: inline;
  line-height: 1.4;
  font-size: 1.6rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color: #9C7E80;
}
.menu_img {
  width: 22%;
  min-width: 84px;
  text-align: center;
}
.menu_img img {
  border-radius: 50%;
}
.accordion_area {
  margin: 0 auto;
  text-align: center;
}
.box {
  display: none; /*はじめは非表示*/
  margin-top: 40px;
}
/*アコーディオンで現れるエリア*/
.box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 4%;
  row-gap: 40px;
  margin: 0 auto;
}
.box ul li {
  display: inline;
  line-height: 1.4;
  font-size: 1.6rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color: #9C7E80;
}
.accordion_ttl {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 10px 20px 6px 8px;
  cursor: pointer;
  border-bottom: 2px solid #9C7E80;
  font-size: 2.4rem;
  color: #9C7E80;
  transition: all 0.3s;
}
/*矢印の設定*/
.accordion_ttl::after {
  content: '';
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 1.1em;
  right: 8px;
  /*矢印の形状*/
  width: 5px;
  height: 5px;
  border-top: 2px solid #9C7E80;
  border-right: 2px solid #9C7E80;
  transform: rotate(135deg);
}
.accordion_ttl:hover {
  opacity: 0.5;
}
.IG_btn_basic {
  margin-top: 80px;
  text-align: center;
}
.IG_btn_basic a {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.IG_btn_basic a:hover {
  top: 3px;
  opacity: 0.7;
}
.balloon2 {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5em;
  padding: 10px 14px;
  min-width: 120px;
  max-width: 100%;
  color: #9C7E80;
  font-size: 16px;
  background: #FFF;
  border: solid 2px #9C7E80;
  border-radius: 20px;
  box-sizing: border-box;
}
.balloon2:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}
.balloon2:after {
  content: "";
  position: absolute;
  bottom: -29px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #9C7E80;
  z-index: 1;
}
.balloon2 p {
  margin: 0;
  padding: 0;
}
.icon {
  width: 40px;
  height: 40px;
  transform: translateX(-6%);
  background-image: url("../images/Instagram@2x.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.family_course_container {
  padding: 96px 12% 56px 12%;
  margin-bottom: 96px;
  border-radius: 60px;
  background-color: #fff;
}
.family_ttl_jp {
  width: 158px;
  margin-right: 24px;
}
.family_ttl_en {
  width: 173px;
}
.family_course_menu {
  display: flex;
  column-gap: 4%;
  justify-content: center;
  margin: 40px 0;
}
.family_course_menu li {
  display: inline;
  line-height: 1.4;
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color: #9C7E80;
}
.beginner_course_container {
  padding: 96px 12% 56px 12%;
  margin-bottom: 96px;
  border-radius: 60px;
  background-color: #fff;
}
.beginner_ttl_jp {
  width: 222px;
  margin-right: 24px;
}
.beginner_ttl_en {
  width: 202px;
}
.whitebread_course_container {
  padding: 96px 12% 56px 12%;
  border-radius: 60px;
  background-color: #fff;
}
.whitebread_ttl_jp {
  width: 190px;
  margin-right: 24px;
}
.whitebread_ttl_en {
  width: 240px;
}
.btn {
  cursor: pointer;
  color: #7B4045;
  border-bottom: solid #7B4045 1px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  transition: all 0.3s;
}
.btn:hover {
  opacity: 0.7;
}
@media(min-width:1441px) {
  .basic_course_container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 96px;
  }
  .family_course_container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 96px;
  }
  .beginner_course_container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 96px;
  }
  .whitebread_course_container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 96px;
  }
}
@media(max-width:1024px) {
  .menu_wrapper {
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
  }
  .menu_ttl {
    margin-top: 16px;
  }
  .menu_detail {
    width: 100%;
    margin-left: 0;
  }
	.IG_btn_basic span{
		display: inline-block;
	}
}
@media(max-width:599px) {
  .menu_container {
    padding: 40px 12%;
  }
	.menu_container span{
		display: inline-block;
	}
  .menu_wrapper {
    width: 88%;
    margin: 0 auto;
  }
  .thumb {
    width: 100%;
    min-width: 162px;
  }
  .thumb img {
    border-radius: 40px;
  }
  .menu_detail h3 {
    font-size: 1.6rem;
  }
  .ribbon h3 {
    font-size: 1.8rem;
  }
  .menu_img {
    width: 43%;
    justify-content: space-between;
  }
  .txt {
    font-size: 1.4rem;
  }
  .basic_course_container a::before {
    width: 36px;
    height: 36px;
    top: 0;
    left: -40px;
  }
  .basic_course_menu {
    column-gap: 14%;
    row-gap: 24px;
  }
  .basic_course_menu li {
    font-size: 1.4rem;
  }
  .box ul {
    column-gap: 14%;
    row-gap: 24px;
  }
  .box ul li {
    font-size: 1.4rem;
  }
  .accordion_ttl {
    font-size: 1.6rem;
  }
  .basic_course_container, .family_course_container, .beginner_course_container, .whitebread_course_container {
    padding: 40px 6%;
  }

  .family_course_menu {
    flex-wrap: wrap;
    column-gap: 14%;
    grid-row-gap: 24px;
    justify-content: flex-start;
  }
  .btn {
    font-size: 1.4rem;
  }
}
@media(max-width:339px) {
  .basic_course_menu {
    column-gap: 13%;
  }
  .box ul {
    column-gap: 13%;
  }
}
/*レッスンの流れ*/
.step_container {
  position: relative;
}
.step_bg {
  width: 60%;
  margin: -40px auto 80px auto;
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  background-color: #FCEEC4;
}
.step_ttl {
  width: 38%;
  min-width: 182px;
  max-width: 323px;
  padding: 104px 0 144px 0;
  margin: 0 auto;
}
.step_wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  z-index: 8000;
  margin: 0 12% 160px 12%;
}
.step_wrap li {
  display: flex;
  width: 100%;
  margin: -40px auto 0 auto;
}
.step_wrap li:nth-child(even) {
  flex-direction: row-reverse;
}
.step {
  position: relative;
  width: 36%;
  min-width: 295px;
}
.step img {
  position: relative;
  border-radius: 178px;
  margin-bottom: 8px;
}
.step p {
  text-align: center;
}
.step1::after, .step3::after, .step5::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateX(125%);
  width: 50%;
  height: 178px;
  background-image: url("../images/arrow@2x.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.step2::after, .step4::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 0;
  transform: translateX(-125%);
  width: 50%;
  height: 178px;
  background-image: url("../images/arrow2@2x.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#step1_heading, #step3_heading, #step5_heading {
  position: absolute;
  top: 18px;
  left: 0;
  transform: rotate(-38deg);
  transform-origin: bottom left;
  color: rgba(186, 131, 95, 0.6);
  font-size: 3.6rem;
  font-family: 'Kiwi Maru', serif;
}
#step2_heading, #step4_heading, #step6_heading {
  position: absolute;
  top: 18px;
  right: 0;
  transform: rotate(38deg);
  transform-origin: bottom right;
  color: rgba(186, 131, 95, 0.6);
  font-size: 3.6rem;
  font-family: 'Kiwi Maru', serif;
}
.fluid3 {
  position: absolute;
  top: 326px;
  right: -4vw;
  width: 25vw; /*横幅*/
  height: 25vw; /*縦幅*/
  background: #FCEEC4; /*背景色*/
  animation: fluidrotate3 10s ease 0s infinite; /*アニメーションの設定*/
}
@keyframes fluidrotate3 {
  0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}
.fluid4 {
  position: absolute;
  top: 1350px;
  left: -4vw;
  width: 25vw; /*横幅*/
  height: 25vw; /*縦幅*/
  background: #FCEEC4; /*背景色*/
  animation: fluidrotate3 10s ease 0s infinite; /*アニメーションの設定*/
}
@keyframes fluidrotate3 {
  0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}
@media(min-width:1441px) {
  .step_wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 160px auto;
  }
}
@media(max-width:1024px) {
  .step_wrap {
    gap: 96px;
  }
  .step_wrap li {
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  .step {
    margin: 0 auto;
  }
  .step1::after, .step3::after, .step5::after, .step2::after, .step4::after {
    content: "";
    position: absolute;
    bottom: -64px;
    ;
    left: 50%;
    width: 9px;
    height: 48px;
    transform: initial;
    background-image: url("../images/arrow_sp@2x.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media(max-width:599px) {
  .step_bg {
    width: 80%;
    margin: -40px auto 40px auto;
  }
  .step_wrap {
	  display: inline-flex;
	  flex-direction: initial;
    margin: 0 auto 80px auto;
  }
  .step_ttl {
    padding: 80px 0 46px 0;
  }
  .step img {
    width: 240px;
  }
  #step1_heading, #step2_heading, #step3_heading, #step4_heading, #step5_heading, #step6_heading {
    font-size: 2.4rem;
  }
  #step2_heading, #step4_heading, #step6_heading {
    top: 17px;
    right: 30px;
    transform: rotate(41deg);
  }
  #step1_heading, #step3_heading, #step5_heading {
    transform: rotate(-41deg);
    top: 18px;
    left: 29px;
  }
}