@charset "UTF-8";
/* CSS Document */
/*ブレイクポイント　600px,1024px
タブレット：1024px [max-width : 1024px]
スマートフォン：599px [max-width : 599px]
スマホ最小は320px
PC最大は1920px*/




body ol, ul {
  list-style: none;
}
#container {
  position: relative;
  overflow-x: hidden;
}
.firstview_wrap {
  display: flex;
}
/*==================================================
ファーストビュー　スライダーのためのcss
===================================*/
.slider1 {
  position: relative;
  width: 53vw;
  max-width: 720px;
  height: calc(680px - 80px);
}
/*　背景画像設定　*/
.slider1-item01 {
  background: url("../images/FV2@2x.jpg");
}
.slider1-item02 {
  background: url("../images/FV1@2x.jpg");
}
.slider1-item03 {
  background: url("../images/FV3@2x.jpg");
}
.slider1-item04 {
  background: url("../images/FV4@2x.jpg");
}
.slider1-item {
  width: 53vw;
  height: calc(680px - 80px);
  margin: 0 0 0 120px;
  border-radius: 4px 4px 60px 4px;
  background-repeat: no-repeat; /*背景画像をリピートしない*/
  background-position: center;
  background-size: cover;
}
.slick-arrow:before {
  content: "" !important;
}
/*ドットナビゲーションの設定*/
.slider1 .slick-dots {
  position: relative;
  z-index: 3;
  text-align: left;
  margin: -16px 0 0 136px; /*ドットの位置*/
}
.slider1 .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
.slider1 .slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #E6CFB4; /*ドットボタンの色*/
}
.slider1 .slick-dots .slick-active button {
  background: #7E6668; /*ドットボタンの現在地表示の色*/
}
/*ファーストビュー　コピー*/
.firstview_copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 8000;
  margin-right: 120px;
  gap: 40px;
}
.copy_pc {
  width: 90%;
}
.copy_sp {
  display: none;
}
.logo_circle {
  width: 40%;
}
.fluid1 {
  position: absolute;
  top: -7vw;
  left: -14vw;
  width: 54vw; /*横幅*/
  height: 40vw; /*縦幅*/
  background: #FCEEC4; /*背景色*/
  animation: fluidrotate1 20s ease 0s infinite; /*アニメーションの設定*/
}
@keyframes fluidrotate1 {
  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%;
  }
}
.fluid2 {
  position: absolute;
  top: 500px;
  right: -9.7vw;
  width: 49vw;
  height: 42vw; /*縦幅*/
  background: #FCEEC4; /*背景色*/
  animation: fluidrotate2 20s ease 0s infinite; /*アニメーションの設定*/
}
@keyframes fluidrotate2 {
  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) {
  .firstview_wrap {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }
}
@media(max-width:1024px) {
  .slider1 {
    width: 66.6vw;
    height: calc(600px - 56px);
  }
  .slider1-item {
    width: 66.6vw;
    height: calc(600px - 56px);
    margin: 0;
    border-radius: 0 4px 60px 0px;
    background-repeat: no-repeat; /*背景画像をリピートしない*/
    background-position: center;
    background-size: cover;
  }
  .slider1 .slick-dots {
    margin: -16px 0 0 16px; /*ドットの位置*/
  }
  .firstview_wrap {
    margin-top: 40px;
  }
  .firstview_copy {
    margin-right: 40px;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 5%;
  }
  .copy_pc {
    display: none
  }
  .copy_sp {
    display: block;
    width: 80%;
  }
  .logo_circle {
    display: none;
  }
  .fluid1 {
    top: -10vw;
    left: -14vw;
    width: 80vw; /*横幅*/
    height: 46vw; /*縦幅*/
  }
  .fluid2 {
    top: 500px;
    right: -15vw;
    width: 80vw;
    height: 50vw;
  }
}
@media(max-width:599px) {
  .firstview_copy {
    align-items: flex-start;
    gap: 0;
  }
  .copy_sp {
    width: 78%;
  }
}
/*アバウト*/
.about_wrapper {
  margin: 160px 0 0 120px;
}
.about_txt_wrappter {
  position: relative;
}
.bread_bg1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 17.4vw;
  max-width: 250px;
  height: 18.3vw;
  max-height: 263px;
  background-image: url("../images/bread_img1_index@2x.png");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}
.bread_bg2 {
  position: absolute;
  top: 50%;
  right: 12%;
  width: 17.4vw;
  max-width: 250px;
  height: 17.1vw;
  max-height: 246px;
  background-image: url("../images/bread_img2_index@2x.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bread_bg3 {
  position: absolute;
  top: 100%;
  right: 0;
  width: 17.4vw;
  max-width: 250px;
  height: 15.7vw;
  max-height: 225px;
  background-image: url("../images/bread_img3_index@2x.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.lead_txt_pc {
  position: relative;
  z-index: 8000;
  width: 70%;
  min-width: 720px;
}
.lead_txt_sp {
  display: none;
}
.about_txt_pc {
  position: relative;
  z-index: 8000;
  width: 65%;
  min-width: 700px;
  padding: 10px;
  margin: 160px auto 40px 0;
  border-radius: 60px;
  background-color: rgb(255, 255, 255, 0.5);
}
.about_txt_sp {
  display: none;
}
/* ボタン共通設定 */
.btn03 {
  /*影の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
  text-align: center;
  background: transparent;
  border-radius: 25px;
  border: solid 1px #9C7E80;
  outline: none;
  /*アニメーションの指定*/
  transition: all 0.2s ease;
}
/*hoverをした後のボタンの形状*/
.btn03:hover {
  border-color: transparent;
}
/*ボタンの中のテキスト*/
.btn03 span {
  position: relative;
  z-index: 2; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
  /*テキストの形状*/
  display: block;
  padding: 16px 72px;
  background: #fff;
  border-radius: 25px;
  color: #9C7E80;
  /*アニメーションの指定*/
  transition: all 0.3s ease;
}
/*== 右下に押し込まれる（立体が平面に） */
/*影の設定*/
.pushright:before {
  content: "";
  /*絶対配置で影の位置を決める*/
  position: absolute;
  z-index: -1;
  top: 4px;
  left: 4px;
  /*影の形状*/
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background-color: #9C7E80;
}
/*hoverの際にX・Y軸に4pxずらす*/
.pushright:hover span {
  background-color: #9C7E80;
  color: #fff;
  transform: translate(4px, 4px);
}
@media(min-width:1441px) {
  .about_wrapper {
    position: relative;
    margin: 160px auto 0 auto;
    width: 100%;
    max-width: 1320px;
  }
}
@media(max-width:1024px) {
  .lead_txt_pc {
    min-width: 560px
  }
  .about_txt_pc {
    min-width: 560px;
  }
  .about_wrapper {
    margin: 160px 20px 0 20px;
  }
}
@media(max-width:599px) {
  .lead_txt_pc {
    display: none;
  }
  .lead_txt_sp {
    position: relative;
    display: block;
    z-index: 8000;
    width: 74%; /*文字最大87%;*/
    min-width: 256px;
    margin-bottom: 96px;
  }
  .about_txt_pc {
    display: none;
  }
  .about_txt_sp {
    position: relative;
    display: block;
    z-index: 8000;
    width: 66%; /*文字最大91%;*/
    min-width: 248px;
    padding: 10px;
    margin-bottom: 56px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .about_wrapper {
    position: relative;
    margin: 64px 0 0 10%;
  }
  .bread_bg1 {
    right: -24px;
    width: 146px;
    height: 153px;
  }
  .bread_bg2 {
    top: 35%;
    right: 0;
    width: 112px;
    height: 109px;
  }
  .bread_bg3 {
    top: 64%;
    right: -30px;
    width: 135px;
    height: 118px;
  }
  .btn03 span {
    padding: 12px 40px;
  }
}
/*出張レッスン*/
.ttl_lesson_bg {
  width: 39%;
  min-width: 464px;
  margin: 120px 0 0 80px;
  padding: 194px 56px 150px 40px;
  background-image: url("../images/ttl_bg@2x.png");
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
}
.ttl_lesson_fllow {
  width: 100%;
  min-width: 220px;
  max-width: 464px;
}
.lesson_fllow_wrapper ol {
  display: flex;
  justify-content: center;
  margin: 96px auto 96px;
  gap: 6%;
}
.lesson_fllow {
  width: 15%;
  max-width: 210px;
}
.lesson_fllow br{
	display: none;
}
.lesson_fllow span{
	display: inline-block;
}
.lesson_fllow_wrapper ol li p {
  line-height: 1.5;
}
.lesson_fllow_img {
  position: relative;
  max-width: 210px;
  min-width: 100px;
  margin-bottom: 8px;
}
.lesson_fllow_img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(200%);
  width: 50%;
  height: 2px;
  background-color: #BA835F;
}
.lesson_fllow_wrapper ol li:last-child .lesson_fllow_img::after {
  display: none;
}
@media(min-width:1441px) {
  .lesson_fllow_wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }
}
@media(max-width:1024px) {
  .ttl_lesson_bg {
    margin: 120px 0 0 0;
  }
}
@media(max-width:599px) {
  .ttl_lesson_bg {
    width: 79%;
    min-width: 297px;
    padding: 100px 20px 80px 24px;
    margin: 60px 0 0 0;
  }
  .lesson_fllow_wrapper ol {
    display: block;
    margin: 40px auto 40px;
  }
  .lesson_fllow {
    position: relative;
    width: 100%;
    margin: 0 auto 80px;
  }
  .lesson_fllow p {
    text-align: center;
  }
.lesson_fllow br{
	display: inline;
}
  .lesson_fllow_wrapper ol li p {
    line-height: 1.5;
  }
  .ttl_lesson_fllow {
    width: 254px;
  }
  .lesson_fllow_img {
    position: static;
    width: 50%;
    min-width: 187px;
    margin: 0 auto 8px auto;
  }
  .lesson_fllow_img::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(200%);
    width: 2px;
    height: 40px;
    margin: 20px 0;
    background-color: #BA835F;
  }
}
/*ポイント*/
.point1_bg {
  position: relative;
  width: 100%;
  height: 18vw;
  background-color: #fff;
}
.point1_bg::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 102%;
  height: 12vw;
  background-color: #FFF7E0;
  border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}
.point_wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  width: 100%;
  padding: 64px 180px 64px;
  margin: 0 auto;
  gap: 6%;
}
.point_wrapper2 {
  flex-direction: row
}
.point_txt img {
  width: 100%;
}
.point_img {
  display: flex;
  align-items: center;
  width: 44%;
  min-width: 280px;
  max-width: 480px;
}
.point_img img {
  object-fit: contain;
}
.point_wrapper1 {
  background-color: #FFF7E0;
}
.point_txt1 h3::before {
  content: "";
  display: block;
  width: 194px;
  height: 56px;
  background-image: url("../images/point1_stamp@2x.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto 24px;
  ;
}
.point2_bg {
  position: relative;
  width: 100%;
  height: 18vw;
  background-color: #FFF7E0;
}
.point2_bg::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 102%;
  height: 9vw;
  background-color: #FCEEC4;
  border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}
.point_wrapper2 {
  background-color: #FCEEC4;
}
.point_txt2 h3 {
  width: 80%;
  min-width: 251px;
  max-width: 447px;
}
.point_txt2 h3::before {
  content: "";
  display: block;
  width: 162px;
  height: 56px;
  background-image: url("../images/point2_stamp@2x.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto 24px;
  ;
}
.point_wrapper3 {
  background-color: #FCE7A6;
}
.point3_bg {
  position: relative;
  width: 100%;
  height: 18vw;
  background-color: #FCEEC4;
}
.point3_bg::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 102%;
  height: 9vw;
  background-color: #FCE7A6;
  border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}
.point_txt3 h3 {
  width: 68%;
  min-width: 214px;
  max-width: 380px;
}
.point_txt3 h3::before {
  content: "";
  display: block;
  width: 168px;
  height: 56px;
  background-image: url("../images/point3_stamp@2x.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto 24px;
  ;
}
.point_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 52%;
  min-width: 280px;
  max-width: 560px;
  gap: 40px;
}
@media(max-width:599px) {
  .point_wrapper {
    display: block;
    padding: 0 20px;
  }
  .point_txt {
    display: block;
    margin: 0 auto;
  }
  .point_txt h3 {
    margin: 0 auto 24px auto;
  }
  .point_img {
    display: block;
    margin: 0 auto;
  }
  .point_img img {
    object-fit: contain;
  }
  .point_txt1 h3::before {
    content: "";
    width: 104px;
    height: 30px;
    margin: 16px auto 4px;
  }
  .point_txt1 h3 {
    width: 98%;
  }
  .point_txt2 h3::before {
    content: "";
    width: 94px;
    height: 32px;
    margin: 16px auto 4px;
  }
  .point_txt3 h3::before {
    content: "";
    width: 89px;
    height: 30px;
    margin: 16px auto 4px;
  }
}
/*お客さまの声*/
.voice_bg1 {
  position: relative;
  width: 100%;
  height: 18vw;
  background-color: #FCE7A6;
}
.voice_bg1::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 102%;
  height: 9vw;
  background-color: #F8E097;
  border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}
.voice_container {
  background-color: #F8E097;
}
.voice_container h3 {
  width: 192px;
  margin: 0 auto 40px;
}
.voice_container h3 img {
  width: 100%;
}
.child_voice {
  margin-top: 24px;
}
.voice_bg2 {
  position: relative;
  width: 100%;
  height: 18vw;
  background-color: #F8E097;
}
.voice_bg2::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 102%;
  height: 9vw;
  background-color: #fff;
  border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}
/*==================================================
スライダーのためのcss
===================================*/
.slider2 {
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}
/*　背景画像設定　*/
.slider2-item {
  position: relative;
  display: table;
  width: 75%;
  max-width: 1080px;
  height: 328px;
  margin: 0 auto;
  border-radius: 60px;
  background-repeat: no-repeat; /*背景画像をリピートしない*/
  background-position: center; /*背景画像の位置を中央に*/
  background-size: cover; /*背景画像が.slider-item全体を覆い表示*/
  background-color: #fff;
}
.voice_wrapper {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  justify-content: center;
  width: 75%;
  min-width: 255px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 80px;
}
.voice_wrapper h4 {
  margin-bottom: 8px;
}
/*矢印の設定*/
.slider2 .slick-prev, .slider2 .slick-next {
  position: absolute;
  z-index: 3;
  top: 50%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #BA835F; /*矢印の色*/
  border-right: 2px solid #BA835F; /*矢印の色*/
  height: 25px;
  width: 25px;
}
.slider2 .slick-prev::after, .slider2 .slick-next::after {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background-color: #fff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.slider2 .slick-prev { /*戻る矢印の位置と形状*/
  left: 10%;
  transform: translateY(-50%) rotate(-135deg);
}
.slider2 .slick-next { /*次へ矢印の位置と形状*/
  right: 10%;
  transform: translateY(-50%) rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slider2 .slick-dots {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: -16px 0 0 0; /*ドットの位置*/
}
.slider2 .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
.slider2 .slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #E6CFB4; /*ドットボタンの色*/
}
.slider2 .slick-dots .slick-active button {
  background: #7E6668; /*ドットボタンの現在地表示の色*/
}
@media(min-width:1600px) {
  .slider2 .slick-prev { /*戻る矢印の位置と形状*/
    left: 14%;
  }
  .slider2 .slick-next { /*次へ矢印の位置と形状*/
    right: 14%;
  }
}
@media(max-width:1024px) {
  .voice_container h3 {
    width: 153px;
  }
  .slider2 .slick-prev { /*戻る矢印の位置と形状*/
    left: 8%;
  }
  .slider2 .slick-next { /*次へ矢印の位置と形状*/
    right: 8%;
  }
}
@media(max-width:599px) {
  .voice_wrapper {
    vertical-align: top;
    height: 524px;
    margin: 0 auto;
    padding: 24px 20px;
  }
  .slider2-item {
    border-radius: 20px;
  }
  .slider2 .slick-prev { /*戻る矢印の位置と形状*/
    left: 5%;
  }
  .slider2 .slick-next { /*次へ矢印の位置と形状*/
    right: 5%;
  }
  .voice_container h3 {
    width: 115px;
  }
  .voice_wrapper h4 {
    margin-bottom: 8px;
  }
  .slider2 .slick-dots {
    margin: 8px 0 0 0; /*ドットの位置*/
  }
}
/*レッスンメニュー*/
.lesson_menu_wrapper {
  position: relative;
}
.lesson_menu_ttl_bg {
  width: 39%;
  min-width: 464px;
  margin: 120px 100px 0 auto;
  padding: 173px 112px 171px 80px;
  background-image: url("../images/ttl_bg@2x.png");
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(-1, 1);
}
.lesson_menu_wrapper h2 {
  width: 100%;
  max-width: 349px;
  transform: scale(-1, 1);
}
.lesson_menu_list_wrapper {
  width: 43%;
  min-width: 210px;
  max-width: 620px;
  margin: 80px 180px 160px auto;
}
.lesson_menu_icon {
  display: flex;
  align-content: center;
  width: 160px;
}
.lesson_menu_icon img {
  object-fit: contain;
}
.lesson_menu_list {
  position: relative;
  z-index: 8000;
}
.lesson_menu_list li {
  padding-bottom: 80px;
}
.lesson_menu_list li:last-child {
  padding-bottom: 40px
}
.lesson_menu_list a {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  transition: all 0.3s;
}
.lesson_menu_list a:hover {
  opacity: 0.7;
  top: 3px;
}
.lesson_menu_list h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 3.2rem;
  color: #BA835F;
  margin-bottom: 8px;
}
.lesson_menu_list h3 span {
  display: inline-block;
  bottom: 16px;
  width: 10px;
  height: 10px;
  border: 3px solid;
  border-radius: 5%;
  border-color: #865D42 #865D42 transparent transparent;
  transform: rotate(45deg) translateY(2px);
}
.lesson_menu_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 72%;
  max-width: 446px;
  padding: 10px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
}
.detail_btn {
  text-align: right;
}
.bread_bg4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 320px;
  /*top: 12%;
  left: 0;
  width: 250px;
  height: 320px;
*/
  background-image: url("../images/bread_img4_index@2x.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bread_bg5 {
  position: absolute;
  top: 25%;
  left: 6%;
  width: 250px;
  height: 320px;
  /*
  top: 34%;
  left: 6%;
  width: 250px;
  height: 320px;
	*/
  background-image: url("../images/bread_img5_index@2x.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bread_bg6 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 300px;
  height: 482px;
  /*top: 54%;
  left: 0;
  width: 300px;
  height: 482px;
	*/
  background-image: url("../images/bread_img6_index@2x.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bread_bg7 {
  position: absolute;
  top: 86%;
  left: 2%;
  width: 250px;
  height: 271px;
  /*
  top: 90%;
  left: 2%;
  width: 250px;
  height: 271px;
*/
  background-image: url("../images/bread_img7_index@2x.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media(min-width:1441px) {
  .lesson_menu_wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }
}
@media(max-width:1024px) {
  .lesson_menu_ttl_bg {
    margin: 120px 40px 0 auto;
  }
  .lesson_menu_list li {
    flex-direction: column;
    gap: 0
  }
  .lesson_menu_list_wrapper {
    margin: 80px 10.6% 160px auto;
  }
  .lesson_menu_icon {
    margin: 0 auto;
  }
  .lesson_menu_txt {
    width: 100%;
  }
  .lesson_menu_list a {
    flex-direction: column;
  }
  .bread_bg4 {
    top: 18%;
    left: 0;
    width: 150px;
    height: 220px;
  }
  .bread_bg5 {
    top: 30%;
    width: 150px;
    height: 220px;
  }
  .bread_bg6 {
    top: 40%;
    width: 200px;
    height: 382px;
  }
  .bread_bg7 {
    top: 60%;
    width: 150px;
    height: 180px;
  }
}
@media(max-width:599px) {
  .lesson_menu_list_wrapper {
    margin: 40px 10.6% 80px auto;
  }
  .lesson_menu_ttl_bg {
    width: 79%;
    min-width: 297px;
    margin: 40px 0 0 auto;
    padding: 98px 0 89px 40px;
  }
  .lesson_menu_wrapper h2 {
    width: 197px;
  }
  .lesson_menu_list h3 {
    gap: 8px;
    font-size: 1.8rem;
  }
  .lesson_menu_list h3 span {
    display: inline-block;
    bottom: 16px;
    width: 8px;
    height: 8px;
    border: 2px solid;
    border-radius: 5%;
    border-color: #865D42 #865D42 transparent transparent;
    transform: rotate(45deg) translateY(1px);
  }
  .lesson_menu_list li {
    padding-bottom: 40px;
  }
  .bread_bg4 {
    position: absolute;
    top: 18%;
    left: 0;
    width: 120px;
    height: 176px;
    background-image: url("../images/bread_img4_index@2x.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .bread_bg5 {
    top: 34%;
    width: 120px;
    height: 176px;
  }
  .bread_bg6 {
    top: 53%;
    left: -24px;
    width: 144px;
    height: 276px;
  }
  .bread_bg7 {
    top: 75%;
    width: 120px;
    height: 144px;
  }
}
/*コロナ対策*/
.corona {
  position: relative;
}
.corona h2 {
  width: 277px;
  margin: 0 auto 40px;
}
.corona h2 img {
  width: 100%;
}
.corona ul {
  display: flex;
  justify-content: center;
  gap: 7%;
  margin-bottom: 160px;
}
.corona ul li {
  width: 14%;
  min-width: 135px;
  max-width: 192px;
}
.corona ul li img {
  width: 100%;
  margin-bottom: 8px;
}
.fluid3 {
  position: absolute;
  top: -20%;
  right: -50px;
  width: 300px;
  height: 300px;
  background-color: #FCEEC4;
  border-radius: 57% 43% 0% 100% / 51% 8% 92% 49%;
  animation: fluidrotate3 15s 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: 90%;
  left: -40px;
  width: 340px;
  height: 340px;
  background-color: #FCEEC4;
  border-radius: 35% 65% 100% 0% / 12% 61% 39% 88%;
  animation: fluidrotate4 15s ease 0s infinite; /*アニメーションの設定*/
}
@keyframes fluidrotate4 {
  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(max-width:1024px) {
  .corona h2 {
    width: 229px
  }
  .fluid3 {
    width: 200px;
    height: 200px;
  }
  .fluid4 {
    position: absolute;
    top: 90%;
    width: 240px;
    height: 240px;
    background-color: #FCEEC4;
    border-radius: 35% 65% 100% 0% / 12% 61% 39% 88%;
  }
}
@media(max-width:599px) {
  .corona h2 {
    width: 172px;
  }
  .corona ul {
    margin-bottom: 80px;
  }
  .fluid3 {
    display: none;
  }
  .fluid4 {
    top: 108%
  }
}
/*よくある質問・予約お問い合わせ*/
.link_wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7%;
  margin-bottom: 160px;
}
.btn_2 {
  padding: 8px 16px;
  line-height: 10;
  font-size: 3.0rem;
  color: #BA835F;
  background-color: #fff;
  border-radius: 20px;
  transition: all 0.3s
}
.btn_2:hover {
  color: #fff;
  background-color: #BA835F;
}
.btn_FAQ_bg {
  width: 400px;
  height: 296px;
  text-align: center;
  background-image: url("../images/FAQ_img@2x.png");
  background-position: center;
  background-size: cover;
}
.btn_inquiry_bg {
  width: 400px;
  height: 296px;
  text-align: center;
  background-image: url("../images/inquiry_img@2x.png");
  background-position: center;
  background-size: cover;
}
@media(max-width:599px) {
  .link_wrapper {
    gap: 80px;
    margin-bottom: 80px;
  }
  .btn_FAQ_bg {
    width: 295px;
    height: 219px;
  }
  .btn_inquiry_bg {
    width: 295px;
    height: 219px;
  }
  .btn_2 {
    line-height: 13;
    font-size: 1.8rem;
    color: #BA835F;
  }
}
.IG_area_bg {
  width: 100vw;
  height: 15.7vw;
  background-color: #FCEEC4;
  border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}
.Instagram {
  text-align: center;
  background-color: #FCEEC4;
  padding-bottom: 160px;
}
.Instagram h2 {
  width: 10%;
  min-width: 81px;
  max-width: 143px;
  margin: 0 auto 24px auto;
  ;
}
.Instagram ul {
  display: flex;
  gap: 2%;
  justify-content: center;
  margin-bottom: 24px;
}
.Instagram ul li {
  width: 15%;
  min-width: 100px;
}
/*
.view_btn {
  text-align: center;
	padding-bottom: 160px;
}*/
.view_btn {
  position: relative;
  text-align: center;
  font-size: 2.4rem;
  color: #BA835F;
  padding: 10px 20px 6px 8px;
  display: inline-block;
  text-decoration: none;
  outline: none;
}
/*線の設定*/
.view_btn::before, .view_btn::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  /*線の形状*/
  background: #BA835F;
  width: 100%;
  height: 2px;
  /*アニメーションの指定*/
  transition: all 0.3s ease-in-out;
}
/*hover時に伸びる線の形状*/
.view_btn::after {
  width: 0;
  background: #765E60;
}
/*hover時に100%に伸びる*/
.view_btn:hover::after {
  width: 100%;
}
/*矢印の設定*/
.view_btn span::after {
  content: '';
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 1.1em;
  right: 8px;
  /*矢印の形状*/
  width: 5px;
  height: 5px;
  border-top: 2px solid #BA835F;
  border-right: 2px solid #BA835F;
  transform: rotate(45deg);
  /*アニメーションの指定*/
  transition: all .3s;
}
/*hover時に矢印が移動*/
.view_btn:hover span::after {
  right: 6px;
}
@media(max-width:599px) {
  .Instagram {
    padding-bottom: 80px;
  }
  .Instagram ul li:last-child {
    display: none;
  }
  .view_btn {
    padding-bottom: 4px;
    font-size: 1.8rem;
  }
}