@charset "utf-8";

/* 汎用部分 */

body {
   font-family: "Roboto", "Noto Sans JP", sans-serif;
   font-size: clamp(.813rem, .744rem + .34vw, 1rem);
   font-weight: 400;
   font-style: normal;
   line-height: 1.8;
   /* overflow-y: scroll; */
   letter-spacing: .1em;
   color: #3d483f;
}

html {
   overflow-y: scroll;
   height: 100%;
}

body {
   overflow-x: hidden;
   min-height: 100%;
}

body.scroll-disabled {
   position: fixed;
   overflow-y: scroll;
   width: 100%;
}

.scrollable {
   overflow-y: auto;

   -webkit-overflow-scrolling: touch;
}

img {
   max-width: 100%;
   height: auto;
}


.decoration-font {
   font-family: "Satisfy", cursive;
   font-weight: 400;
   font-style: normal;
   line-height: 1;
   letter-spacing: .06em;
}

.accent-font {
   font-family: "Zen Old Mincho", serif;
   font-weight: 400;
   font-style: normal;
   line-height: 1.8;
   letter-spacing: .06em;
}

.wrapper {
   width: 95%;
   max-width: 1360px;
   margin: 0 auto;
}

.pc_none {
   display: none;
}

.sp_none {
   display: block;
}

/* スクロールトリガー（アニメーション） */
.visible,
.invisible {
   transition: opacity .8s ease;
   opacity: 0;
}

.visible {
   opacity: 1;
}

/* 上にアニメーション */
.visible.animeTop,
.invisible.animeTop {
   transition: all .5s;
   transform: translateY(100px);
}

.visible.animeTop {
   transform: translateY(0);
}

/* 左からアニメーション */
.visible.animeLeft,
.invisible.animeLeft {
   transition: all .8s;
   transform: translateX(-40px);
}

.visible.animeLeft {
   transform: translateX(0);
}

/* ボタン */

.btn {
   display: inline-block;
   padding: .7rem .8rem;
   background-color: #ffd089;
}

.btnlist {
   display: flex;
   justify-content: space-between;
   margin-top: clamp(2.375rem, 1.518rem + 1.79vw, 3.125rem);
}

.btn_inner {
   display: flex;
   align-items: center;
}

.btn_text {
   font-size: clamp(13px, 1.1vw, 16px);
   margin-left: 10px;
}

.btn_icon {
   width: 25px;
}

.detail_btnarea {
   margin-top: 50px;
   text-align: center;
}

.detail_btn {
   position: relative;
   z-index: 1;
   transition: .3s;
   border: 3px solid #ffd089;
   background-color: #fff;
}

.detail_btn::before {
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   content: "";
   transition: transform ease .5s;
   transform: scaleX(0);
   transform-origin: 100% 50%;
   background-color: #ffd089;
}

.detail_btn:hover::before {
   transform: scaleX(1);
   transform-origin: 0 50%;
}

.detail_btn_text {
   margin-right: 10px;
   margin-left: 0;
}

.detail_btn_icon {
   width: 40px;
}

.reserve_btn {
   transition: .5s;
}

.reserve_btn:hover {
   background-color: #ffe3b1;
}

/* header*/
.header {
   margin-top: 40px;
}

.header .gnav,
.header .gnav_inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.header .gnav_logo {
   max-width: 155px;
}

.header .gnav_wrap {
   display: flex;
   align-items: center;

   gap: clamp(1rem, -2.568rem + 7.42vw, 3rem);
}

.header .gnav_text {
   font-weight: bold;
}

.header .gnav_text a {
   transition: color .4s ease-in-out;
}

.header .gnav_text a:hover {
   color: #ffbc57;
}

.header .gnav_text {
   position: relative;
}

.header .dropdown_lists {
   position: absolute;
   z-index: 1;
   top: 30px;
   left: 0;
   visibility: hidden;
   width: 170%;
   padding: 15px;
   transition: all .4s;
   opacity: 0;
   border: 2px solid #ffd089;
   border-radius: 10px;
   background-color: #fff;
}

.header .dropdown_lists.lists_menu {
   width: 300%;
}

.header .gnav_text:hover .dropdown_lists {
   display: block;
   visibility: visible;
   opacity: 1;
}

.header .dropdown_text {
   margin-bottom: 10px;
}

.header .dropdown_text:last-of-type {
   margin-bottom: 0;
}

.header .gnav_btn {
   transition: .5s;
   background-color: #ffd089;
}

.header .gnav_btn:hover {
   transform: scale(1.1);
}

.header .gnav_btn .btn_text {
   font-weight: bold;
   margin-left: 0;
}

/* mv-detail */
.mv-detail {
   position: relative;
   margin-top: 50px;
}

.mv-detail .detail_image {
   width: 100%;
   height: 370px;
   border-radius: 30px;

   object-fit: cover;
}

.mv-detail .detail_title {
   font-size: clamp(1.5rem, .955rem + 2.73vw, 3rem);
   line-height: 1.8;
   position: absolute;
   right: 5%;
   bottom: 5%;
   padding: 0 clamp(.938rem, .597rem + 1.7vw, 1.875rem);
   color: #468902;
   background-color: #fdfdf1;
}

/* instagram icon*/
.instagram_btn a {
   position: fixed;
   z-index: 2;
   right: 1%;
   bottom: 5%;
   display: inline-block;
   width: 100px;
   padding: 30px 15px;
   transition: .5s;
   text-align: center;
   border-radius: 20px;
   background-color: #ffd089;
}

.instagram_btn a:hover {
   background-color: #ffe3b1;
}

.instagram_btn .btn_icon {
   width: 35px;
}

.instagram_btn p {
   font-size: 12px;
   font-weight: bold;
   line-height: 1.6;
   margin-top: 20px;
}

/* breadcrumb */
.breadcrumb {
   max-width: 1280px;
   margin-top: 30px;
}

.breadcrumb ul {
   display: flex;
}

.breadcrumb li {
   display: flex;
   align-items: center;
   margin-left: clamp(.375rem, .284rem + .45vw, .625rem);
}

.breadcrumb li:not(:last-child)::after {
   display: block;
   width: .5em;
   height: .5em;
   margin-left: clamp(.188rem, .142rem + .23vw, .313rem);
   content: "";
   transform: rotate(-45deg);
   border-right: 1px solid;
   border-bottom: 1px solid;
}

/* section_title */

.section_titlearea {
   text-align: center;
}

.section_subtitle {
   font-size: clamp(1.875rem, 1.193rem + 3.41vw, 3.75rem);
   color: #f6f0ab;
}

.section_title {
   font-size: clamp(1.5rem, .955rem + 2.73vw, 3rem);
   margin-top: 10px;
   color: #468902;
}

.section_titletext {
   margin-top: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem);
}

/* 下層中見出し */

.medium-title {
   text-align: center;
}

.marker-content {
   font-size: clamp(1.25rem, 1.068rem + .91vw, 1.75rem);
   font-weight: bold;
   padding-bottom: 10px;
   border-bottom: 2px dashed #c8e88a;
}

/* サブタイトル */
.card_subtitle {
   font-size: clamp(13px, 1.1vw, 16px);
   display: flex;
   align-items: center;
   margin-top: 15px;
   word-break: auto-phrase;
   color: #468902;
}

.card_subtitle::before {
   display: inline-block;
   width: 5px;
   height: 30px;
   margin-right: 15px;
   content: "";
   background-color: #468902;
}

/* 横並びカード */
.card_container {
   display: flex;
   justify-content: space-between;
   margin-top: 50px;
}

.card_list {
   width: 32%;
   padding: 30px 25px;
   border: 1px solid #fff;
   background-color: #fff;
   box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

.card_title {
   font-size: clamp(18px, 1.94vw, 28px);
   font-weight: bold;
   line-height: 1.1;
   margin-top: 10px;
}

.card_text {
   margin-top: 15px;
}

/* 下層lesson-licenseまでの共通パーツ */

.menu-intro .intro_title {
   font-size: clamp(1.125rem, .643rem + 1.81vw, 2rem);
   font-weight: bold;
   text-align: center;
   word-break: auto-phrase;
   color: #468902;
}

.menu-intro .intro_title .br-sp {
   display: none;
}

.menu-intro .intro_lists {
   margin-top: 20px;
}

.menu-intro li {
   font-weight: bold;
   display: flex;
   align-items: center;
   margin-top: 10px;
}

.menu-intro li:first-child {
   margin-top: 0;
}

.menu-intro li::before {
   display: inline-block;
   min-width: 20px;
   min-height: 20px;
   margin-right: 10px;
   content: "";
   background-image: url(../image/checkbox_icon.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}

.menu-bg {
   width: 100%;
   height: 100%;
   margin-top: 100px;
   padding: clamp(3.125rem, 1.989rem + 5.68vw, 6.25rem) 20px;
   border-top: 2px solid #468902;
   border-bottom: 2px solid #468902;
   background-image: url(../image/section_bg.png);
   background-repeat: repeat;
   background-size: contain;
}

.menu-content {
   color: #468902;
}

.menu_wrapper {
   margin-top: 50px;
}

.menu {
   position: relative;
   max-width: 1200px;
   margin: clamp(3.125rem, 1.989rem + 5.68vw, 6.25rem) auto 0;
   padding: clamp(1.25rem, .509rem + 3.7vw, 3.75rem) clamp(.938rem, -.266rem + 6.02vw, 5rem) clamp(1.25rem, .694rem + 2.78vw, 3.125rem);
   border: 2px solid #468902;
   background-color: #fff;
}

.menu::before,
.menu::after {
   position: absolute;
   width: clamp(.625rem, .511rem + .57vw, .938rem);
   height: clamp(.625rem, .511rem + .57vw, .938rem);
   content: "";
   border-radius: 50%;
   background-color: #c8e88a;
}

.menu::before {
   top: clamp(.625rem, .511rem + .57vw, .938rem);
   left: clamp(.625rem, .511rem + .57vw, .938rem);
}

.menu::after {
   top: clamp(.625rem, .511rem + .57vw, .938rem);
   right: clamp(.625rem, .511rem + .57vw, .938rem);
}

.menu:first-child {
   margin-top: 0;
}

.menu .menu-titlearea {
   text-align: center;
}

.menu .menu-titlearea .menu-subtitle {
   font-size: clamp(.813rem, .683rem + .65vw, 1.25rem);
}

.menu .menu-titlearea .menu-title {
   font-size: clamp(1.25rem, 1.028rem + 1.11vw, 2rem);
   font-weight: bold;
   margin-top: 10px;
   word-break: auto-phrase;
}

.menu .menu_container {
   display: flex;
   justify-content: space-between;
   margin-top: 50px;
}

.menu .menu_container .menu-imagearea {
   width: 40%;
}

.menu .menu_container .menu-imagearea .card_subtitle {
   margin-top: 30px;
}

.menu .menu_point {
   margin-top: 20px;
}

.menu .point_title {
   font-size: clamp(1.563rem, 1.174rem + 1.94vw, 2.875rem);
   text-transform: capitalize;
   color: #e7df84;
}

.menu .menu_point .point_text {
   padding: 20px;
   border-radius: 30px;
   background-color: #fffac3;
}

.menu .textarea {
   width: 50%;
}

.menu .textarea .head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 10px;
   border-bottom: 2px solid rgba(231, 223, 132, .7);
}

.menu .textarea .head .head_title {
   font-weight: bold;
}

.menu .textarea .head .btn_text {
   margin-left: 0;
}

.menu .textarea .body .body_list {
   display: flex;
   justify-content: space-between;
   padding-top: 30px;
}

.menu .textarea .body .body_title {
   width: 17%;
}

.menu .textarea .body .body_list_inner {
   display: flex;
   flex-direction: column;
   width: 80%;

   gap: 5px;
}

.menu .textarea .body .body_list_inner .body_text {
   width: 100%;
}

.menu .textarea .body .body_text {
   width: 80%;
}

.menu .textarea .body .body_annotation {
   font-size: clamp(.688rem, .632rem + .28vw, .875rem);
}

.menu .textarea .body .body_text li {
   margin-top: 5px;
   padding-left: 1em;
   list-style: inside;
   text-indent: -1em;
}

.menu .textarea .body .body_text li:first-child {
   margin-top: 0;
}

.menu .menu_btnlist {
   justify-content: center;

   gap: 50px;
}

/* voice-detail */
.voice-detail {
   margin-top: 50px;
}

.voice-detail_container {
   max-width: 1040px;
   padding: clamp(1.875rem, 1.319rem + 2.78vw, 3.75rem) clamp(1.25rem, .795rem + 2.27vw, 2.5rem);
   border-radius: 30px;
   background-color: #f8f7f6;
}

.voice-detail_title {
   font-size: clamp(1.25rem, 1.102rem + .74vw, 1.75rem);
   font-weight: bold;
   text-align: center;
   color: #468902;
}

.voice-detail_lists {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 30px;
   padding-bottom: 10px;
   border-bottom: 1px dashed #468902;
}

.voice-detail_imagearea {
   display: flex;
   align-items: center;
   flex-direction: column;
   width: 15%;

   gap: 16px;
}

.voice-detail_imagearea .voice-detail_image {
   width: 100px;
}

.voice-detail_imagearea .voice-detail_name {
   font-size: clamp(.813rem, .794rem + .09vw, .875rem);
   text-align: center;
}

.voice-detail_textarea {
   width: 83%;
}

.voice-detail_textarea dt {
   font-size: clamp(1rem, .926rem + .37vw, 1.25rem);
   margin-bottom: 10px;
}

/* cta*/
.cta {
   max-width: 1040px;
   margin-top: clamp(11.25rem, 9.659rem + 7.95vw, 15.625rem);
   background-color: #f3fde0;
}

.cta .cta_container {
   padding: clamp(2.5rem, 1.786rem + 3.57vw, 5rem) clamp(1.5rem, -.036rem + 7.68vw, 6.875rem);
}

.cta .cta_titletext {
   margin-top: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
}

.cta .cta_btnlist{
   justify-content: center;
   gap: 30px;
}

.cta .cta_btn {
   transition: .5s;
}

.cta .cta_btn:hover {
   background-color: #ffe3b1;
}

/* footer */
.footer {
   margin-top: clamp(11.25rem, 9.659rem + 7.95vw, 15.625rem);
   padding: clamp(2.5rem, -1.961rem + 9.28vw, 5rem) 0 clamp(.938rem, -.735rem + 3.48vw, 1.875rem);
   background-color: #fffbcc;
}

.footer .footer_wrapper {
   max-width: 990px;
}

.footer .footer_head {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.footer .footer_logo {
   max-width: 140px;
}

.footer .footer_shopname {
   font-size: clamp(1.125rem, .989rem + .68vw, 1.5rem);
   font-weight: bold;
   color: #468902;
}

.footer .footer_shopaddresss {
   line-height: 1.6;
   margin-top: 20px;
}

.footer .footer_btn .btn_inner {
   text-align: center;
}

.footer .footer_btn {
   max-width: 230px;
   transition: .5s;
   background-color: #ffbc57;
}

.footer .footer_btn:hover {
   transform: scale(1.1);
}

.footer .footer_btn .btn_text {
   font-weight: bold;
   line-height: 1.6;
   margin-left: 0;
   color: #fff;
}

.footer .footer_body {
   display: flex;
   justify-content: space-between;
   max-width: 830px;
   margin: clamp(1.25rem, .568rem + 3.41vw, 3.125rem) auto 0;
}

.footer .footer_lists.pc-none {
   display: none;
}

.footer .footer_lists li {
   font-weight: bold;
   margin-top: 20px;
}

.footer .footer_lists li:first-of-type {
   margin-top: 0;
}

.footer .footer_lists a {
   transition: .5s;
}

.footer .footer_lists a:hover {
   opacity: .5;
}

.footer .copywrite_box {
   display: flex;
   justify-content: center;
   margin-top: clamp(3.125rem, 1.534rem + 7.95vw, 7.5rem);
}

/* レスポンシブ1250px */

@media (max-width: 1250px) {

   /* 下層lesson-licenseまでの共通パーツ */
   .menu .menu_container {
      align-items: center;
      flex-direction: column;
   }

   .menu .menu_container .menu-imagearea,
   .menu .textarea,
   .voice-detail_imagearea,
   .voice-detail_textarea {
      width: 100%;
   }

   .menu .textarea .head {
      margin-top: 30px;
   }

   .voice-detail_textarea {
      margin-top: 15px;
   }

   .voice-detail_lists {
      align-items: center;
      flex-direction: column;
   }
}

/* レスポンシブ（890px） */
@media (max-width: 890px) {

   /* 下層lesson-licenseまでの共通パーツ */
   .menu .menu_btnlist {
      align-items: center;
      flex-direction: column;
   }
}

/* レスポンシブ（768px） */

@media (max-width: 768px) {

   /* 共通*/
   .sp_none {
      display: none;
   }

   .pc_none {
      display: block;
   }

   /* ハンバーガー */

   #gnav {
      /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
      position: fixed;
      z-index: 999;
      /*ナビのスタート位置と形状*/
      top: -120%;
      left: 0;
      width: 100%;
      height: 100vh;
      /*動き*/
      transition: all 1s;
      /*ナビの高さ*/
      background: #fff;
   }

   /*アクティブクラスがついたら位置を0に*/
   #gnav.panelactive {
      top: 0;
   }

   /*ナビゲーションの縦スクロール*/
   #gnav.panelactive #gnav-list {
      /*ナビの数が増えた場合縦スクロール*/
      position: fixed;
      z-index: 999;
      /*表示する高さ*/
      overflow: auto;
      width: 100%;
      height: 100vh;

      -webkit-overflow-scrolling: touch;
   }

   /*ナビゲーション*/
   #gnav ul {
      /*ナビゲーション天地中央揃え*/
      gap: 12px;
      position: absolute;
      z-index: 999;
      top: 50%;
      left: 50%;
      align-items: center;
      flex-direction: column;
      width: 80%;
      transform: translate(-50%, -50%);
   }

   /*リストのレイアウト設定*/
   #gnav li {
      list-style: none;
      text-align: center;
   }

   #gnav li a {
      font-weight: bold;
      display: block;
      padding: 10px;
      text-decoration: none;
      letter-spacing: .1em;
   }

   .instagram_btn_inner {
      gap: 10px;
   }

   /*========= ボタンのためのCSS ===============*/
   .openbtn {
      position: fixed;
      z-index: 9999;
      /*ボタンを最前面に*/
      top: 40px;
      right: 20px;
      width: 50px;
      height: 50px;
      cursor: pointer;
      background-color: #ffbc57;
   }

   /*×に変化*/
   .openbtn span {
      position: absolute;
      left: 14px;
      display: inline-block;
      width: 45%;
      height: 3px;
      transition: all .4s;
      border-radius: 2px;
      background-color: #fff;
   }

   .openbtn span:nth-of-type(1) {
      top: 15px;
   }

   .openbtn span:nth-of-type(2) {
      top: 23px;
   }

   .openbtn span:nth-of-type(3) {
      top: 31px;
   }

   .openbtn.active span:nth-of-type(1) {
      top: 18px;
      left: 18px;
      width: 30%;
      transform: translateY(6px) rotate(-45deg);
   }

   .openbtn.active span:nth-of-type(2) {
      opacity: 0;
   }

   .openbtn.active span:nth-of-type(3) {
      top: 30px;
      left: 18px;
      width: 30%;
      transform: translateY(-6px) rotate(45deg);
   }

   /* 予約ボタン（768px以下のみ表示） */

   .sp_stickbtn .btn {
      width: 100%;
   }

   .sp_stickbtn .btnlist {
      position: fixed;
      z-index: 99;
      bottom: 0;
      left: 0;
      width: 100%;
      margin-top: 0;
      background-color: rgba(244, 244, 227, .7);
   }

   .sp_stickbtn .btn_inner {
      justify-content: center;
      width: 100%;
   }

   /* 横並びカード */

   .card_list {
      width: 100%;
   }

   /* slider */

   .slick-dotted.slick-slider {
      margin-bottom: 0;
   }

   .slick-track {
      top: -10px;
      display: flex;
   }

   .slick-slide {
      height: auto !important;
   }

   .slick-dots li.slick-active button:before {
      opacity: .75;
      color: #ffbc57;
   }

   .slick-dots li button:before {
      color: #ffbc57;
   }

   .slick-prev:before,
   .slick-next:before {
      font-size: 25px;
      color: #ffbc57;
   }

   .slick-prev,
   .slick-next {
      z-index: 1;
      width: 25px;
      height: 25px;
   }

   .slick-prev {
      left: 0;
   }

   .slick-next {
      right: 0;
   }

   /* 下層lesson-licenseまでの共通パーツ */
   .lesson-btnlist {
      align-items: center;
      flex-direction: column;

      gap: 30px;
   }

   /* cta */

   .cta .btnlist {
      align-items: center;
      flex-direction: column;
      justify-content: space-between;

      gap: 30px;
   }

   /* footer */

   .footer .footer_head {
      flex-direction: column;

      gap: 20px;
   }

   .footer .footer_body {
      justify-content: center;
   }

   .footer .footer_lists {
      display: none;
   }

   .footer .footer_lists.pc-none {
      display: block;
   }
}

/* レスポンシブ（425px） */
@media (max-width: 425px) {
   .menu .textarea .body .body_list {
      flex-direction: column;
   }

   .menu .textarea .body .body_list_inner,
   .menu .textarea .body .body_text {
      width: 100%;
   }

   .menu-intro .intro_title .br-sp {
      display: block;
   }

   .menu .textarea .body .body_title {
      width: 100%;
   }
}

/* レスポンシブ（375px） */

@media (max-width: 375px) {

   /* 下層lesson-licenseまでの共通パーツ */
   .menu .textarea .head {
      align-items: flex-start;
      flex-direction: column;

      gap: 10px;
   }

   .menu .menu-textarea .detail_btn {
      margin-left: auto;
   }

   /* cta */
   .cta .btnlist {
      align-items: center;
      flex-direction: column;
      justify-content: space-between;

      gap: 30px;
   }
}