@charset "UTF-8";
/* ============================= 全体共通レイアウト ============================= */
@media screen {
   :root {
      --color-dark: #002F51;
      --color-light: #BFCBD4;
      --color-beige: #D4C8BF;
      --color-beige-light: #E3E3E3;
      --gradient-btn: linear-gradient(to right,
            var(--color-light) 7%,
            var(--color-dark) 100%);

      /* フォントサイズ変数 */
      --fs-10: 1.0rem;
      --fs-12: 1.2rem;
      --fs-14: 1.4rem;
      --fs-16: 1.6rem;
      --fs-18: 1.8rem;
      --fs-22: 2.2rem;
      --fs-24: 2.4rem;
      --fs-28: 2.8rem;
      --fs-30: 3.0rem;
      --fs-36: 3.6rem;
      --fs-40: 4.0rem;
      --fs-48: 4.8rem;
      --fs-56: 5.6rem;
      --fs-80: 8.0rem;
   }

   html {
      scroll-behavior: smooth;
      font-size: 62.5%;
      /* 1rem = 10px */
   }

   body {
      font-family: 'Noto Sans', sans-serif;
      font-weight: 400;
      color: #000;
      font-size: var(--fs-18);
      line-height: 1.5;
      background-color: #fff;
   }

   a,
   button[type="submit"] {
      transition: opacity .3s;
   }

   a:hover,
   button[type="submit"]:hover {
      opacity: 0.7;
   }

   img {
      width: 100%;
   }
   
   figure {
    display: inline-block;
    margin: 0;
    padding: 0;
    }
    
    figure img {
        width: 100%;
        height: auto;
        display: block;
    }

   .sp {
      display: none !important;
   }

   .innerWrap {
      margin: 0 auto;
   }

   .btnBookNow {
      width: 17.4rem;
      height: 3.8rem;
      border: .2rem solid rgba(255, 255, 255, 0.25);
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--gradient-btn);
      background-clip: padding-box;
      color: #fff;
   }

   header {
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      height: 11.2rem;
      z-index: 100;
   }

   header .innerWrap,
   main .innerWrap {
      max-width: 120rem;
      width: 100%;
   }

   header>section {
      background-color: var(--color-dark);
      color: #fff;
   }

   header>nav {
      background-color: var(--color-light);
   }

   header>section .innerWrap {
      height: 6.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   header>section .innerWrap>div:not(.logo_container) {
      display: flex;
   }

   header>section .innerWrap>div:not(.logo_container) ul {
      display: flex;
      gap: 3.2rem;
      align-items: center;
   }

   header>section .innerWrap>div.logo_container a {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      font-size: var(--fs-16);
   }

   header>section .innerWrap>div.logo_container a::before {
      content: "";
      width: 5rem;
      height: 5rem;
      background-image: url(../img/logo.png);
      background-size: contain;
      background-repeat: no-repeat;
   }

   header>section .innerWrap>div:not(.logo_container) ul li:first-child a {
      display: flex;
      align-items: center;
      gap: 1rem;
   }

   header>section .innerWrap>div:not(.logo_container) ul li:first-child a::before {
      content: "";
      width: 3.2rem;
      height: 3.2rem;
      background-image: url(../img/icon_tel.svg);
      background-size: contain;
   }

   header>section .innerWrap>div:not(.logo_container) ul li:nth-child(2) {
      display: flex;
      align-items: center;
      gap: 1rem;
   }

   header>section .innerWrap>div:not(.logo_container) ul li:nth-child(2)::before {
      content: "";
      width: 3.2rem;
      height: 3.2rem;
      background-image: url(../img/icon_time.svg);
      background-size: contain;
   }

   /* ナビ本体 */
   header>nav .innerWrap>ul {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 5rem;
   }

   /* 各項目：位置基準のみ（高さ/行高は子要素で管理） */
   header>nav .innerWrap>ul>li {
      position: relative;
   }

   /* トップ階層リンク/トグルの共通化：高さ5remで中央揃え */
   header>nav .innerWrap>ul>li>a,
   header>nav .innerWrap>ul>li>details>summary {
      display: block;
      height: 5rem;
      line-height: 5rem;
      padding: 0 3rem;
   }

   /* summaryの矢印を消す＋カーソル */
   header>nav .innerWrap>ul>li>details>summary {
      list-style: none;
      cursor: pointer;
   }

   header>nav .innerWrap>ul>li>details>summary::-webkit-details-marker {
      display: none;
   }

   /* 下層メニュー（details配下） */
   .has-sub details {
      position: relative;
   }

   .has-sub details>ul {
      position: absolute;
      left: 0;
      top: 100%;
      min-width: 220px;
      margin: 0;
      padding: .6rem 0;
      list-style: none;
      background: #fff;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
      border-radius: .4rem;
      z-index: 1000;

      /* アニメーション（閉じ時は触れない） */
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity .25s ease, transform .25s ease;
   }

   /* open時にだけ表示 */
   .has-sub details[open]>ul {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
   }

   /* 下層リンク */
   header>nav .innerWrap>ul li ul li a {
      display: block;
      padding: .6rem 1rem;
   }

   header>nav .innerWrap>ul li ul li a:hover {
      background: #BFCBD4;
   }

   header>nav .innerWrap>ul li ul>li:not(:last-child) {
      border-bottom: 1px solid var(--color-light);
   }


   /* topのmainVisualにてyoutube再生 */
   .top .mainVisual {
      position: relative;
      overflow: hidden;
      min-height: 72rem;
      background: #000;
   }

   .mainVisual {
      padding: 0;
   }

   .top .mainVisual .mv-video-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
   }

   .mv-yt-wrap {
      position: relative;
      width: 100%;
      height: 100%;
   }

   .mv-yt-wrap iframe {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
   }

   .top .mainCatch {
      position: relative;
      z-index: 1;
      color: #fff;
      text-align: center;
      font-size: var(--fs-24);
   }

   main {
      margin-top: 11.2rem;
   }

   main>* {
      padding: 8rem 0;
   }

   main h2 {
      font-size: var(--fs-36);
      font-weight: 700;
      margin-bottom: 4rem;
   }

   main h2 span {
      display: block;
      font-size: var(--fs-22);
      font-weight: 400;
      margin-bottom: 0.4em;
      line-height: 1;
   }

   footer .cta2 {
      background-color: var(--color-beige);
   }

   footer .cta2 .innerWrap {
      height: 31rem;
      display: flex;
      gap: 5rem;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   footer .cta2 .innerWrap>p {
      font-size: var(--fs-36);
      text-align: center;
      line-height: 1.2;
   }

   footer .cta2 .btnBookNow {
      width: 41rem;
      height: 5.6rem;
   }

   footer .ftContent {
      background-color: var(--color-light);
   }

   footer .ftContent .innerWrap {
      width: 120rem;
   }

   footer .ftContent .innerWrap>div {
      display: flex;
      justify-content: space-between;
      padding-top: 2.8rem;
      padding-bottom: 2.8rem;
      border-bottom: 1px solid #000;
   }

   footer .ftContent .innerWrap>p {
      text-align: center;
      padding-top: 1rem;
      font-size: var(--fs-10);
      padding-bottom: 4.4rem;
   }

   footer .ftContent .innerWrap>div>div:first-of-type,
   footer .ftContent .innerWrap>div>div:nth-of-type(2),
   footer .ftContent .innerWrap>div>div:nth-of-type(3),
   footer .ftContent .innerWrap>div>div:nth-of-type(4) {
      display: flex;
      flex-direction: column;
   }

   footer .ftContent .innerWrap>div>div:first-of-type {
      gap: 1.5rem;
      font-size: var(--fs-22);
      font-weight: 700;
   }

   footer .ftContent .innerWrap>div>div:first-of-type p.logo {
      width: 7.8rem;
      height: 7.8rem;
   }

   footer .ftContent .innerWrap>div>div:nth-of-type(2)>p,
   footer .ftContent .innerWrap>div>div:nth-of-type(3)>p,
   footer .ftContent .innerWrap>div>div:nth-of-type(4)>p {
      font-weight: 700;
      margin-bottom: 2rem;
      padding-top: 1.6rem;
   }

   footer .ftContent .innerWrap>div>div:nth-of-type(2)>ul,
   footer .ftContent .innerWrap>div>div:nth-of-type(3)>ul {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      font-size: var(--fs-14);
   }

   footer .ftContent .innerWrap>div>div:nth-of-type(2)>ul li,
   footer .ftContent .innerWrap>div>div:nth-of-type(3)>ul li {
      display: flex;
      align-items: center;
      gap: .6rem;
   }

   footer .ftContent .innerWrap>div>div:nth-of-type(2)>ul li::before,
   footer .ftContent .innerWrap>div>div:nth-of-type(3)>ul li::before {
      content: "";
      display: inline-block;
      width: .8rem;
      height: .8rem;
      border-right: 0.2rem solid currentColor;
      border-bottom: 0.2rem solid currentColor;
      transform: rotate(-45deg);
   }

   footer .ftContent .innerWrap>div>div:nth-of-type(4)>ul {
      display: flex;
      gap: 2rem;
      margin-bottom: 3rem;
   }

   footer .ftContent .innerWrap>div>div:nth-of-type(4)>ul li {
      width: 4.6rem;
      height: 4.6rem;
   }

   footer a.accLogo {
      display: inline-block;
      background-color: #fff;
      width: 19rem;
   }
}

/* ============================= トップページレイアウト ============================= */
@media screen {
   .cta {
      background-color: var(--color-beige);
   }

   .cta .innerWrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6.4rem;
      text-align: center;
   }

   .cta .innerWrap>p {
      font-size: var(--fs-22);
   }

   .cta .btnBookNow {
      width: 41rem;
      height: 5.6rem;
   }

   .top .mainVisual .innerWrap {
      display: flex;
      align-items: center;
      height: 72rem;
   }

   .top .mainCatch {
      font-size: var(--fs-56);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
   }

   .top .mainCatch>span:last-of-type {
      padding-left: 2.3em;
   }

   .top .about {
      background-color: var(--color-beige);
      background-image: url(../img/bg_top-about01.png);
      background-position: bottom center;
      background-size: auto 30%;
      background-repeat: repeat-x;
      margin-top: -10rem;
      padding-bottom: 13rem;
   }

   .top .about .innerWrap {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-top: 20rem;
   }

   .top .about .innerWrap>div {
      width: 72rem;
   }

   .top .about .innerWrap>p:first-of-type {
      width: 44rem;
   }

   .top .about .innerWrap>p:last-of-type {
      position: absolute;
      top: 0;
      right: 0;
      width: 24rem;
   }

   .top .message .innerWrap {
      display: flex;
      justify-content: space-between;
   }

   .top .message .innerWrap>div {
      width: 66rem;
   }

   .top .message .innerWrap>div>div {
      display: flex;
      flex-direction: column;
      gap: 1.8em;
   }

   .top .message .innerWrap>p {
      width: 48rem;
   }

   .top .service .innerWrap {
      width: 96rem;
      position: relative;
   }

   .top .service .innerWrap::after {
      position: absolute;
      right: 12rem;
      bottom: 0;
      width: 29rem;
      height: 29rem;
      content: "";
      background-image: url(../img/img_top05@2x.png);
      background-size: contain;
   }

   .top .service h2 {
      text-align: center;
   }

   .top .service ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      row-gap: 3.6rem;
   }

   .top .service ul li {
      width: 41rem;
      background-image: url(../img/bg_top-service.svg);
      background-repeat: no-repeat;
      background-position: top right;
      background-size: auto .6rem;
      font-size: var(--fs-30);
      padding-top: 1rem;
      position: relative;
   }

   .top .service ul li::after {
      content: "";
      background-image: url(../img/icon_circle-arrow.svg);
      width: 3.8rem;
      height: 3.8rem;
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: 1.8rem;
      right: 1.2rem;
   }

   .top .service ul li h3 {
      width: calc(100% - 6rem);
      margin-bottom: 2.5rem;
      height: 6.8rem;
      line-height: 1.2;
   }

   .top .service ul li p {
      width: 28rem;
   }

   .top .voice .innerWrap {
      width: 100%;
      max-width: 144rem;
   }

   .top .voice h2 {
      text-align: center;
   }

   .top .access .innerWrap {
      width: 100vw;
      padding-right: calc((100vw - 120rem) / 2);
      max-width: unset;
      display: flex;
      justify-content: space-between;
   }

   .top .access .innerWrap>iframe {
      width: calc(80rem + ((100vw - 120rem) / 2));
      height: 46rem;
   }

   ul.contact-list {
      width: 33rem;
      display: flex;
      flex-direction: column;
      gap: 3.6rem;
      padding-top: 0.6rem;
   }

   ul.contact-list li {
      display: flex;
      gap: 1.8rem;
   }

   ul.contact-list li::before {
      content: "";
      width: 3.6rem;
      height: 3.6rem;
      content: "";
      background-image: url(../img/icon_circle-tel.svg);
      background-size: contain;
      flex-shrink: 0;
      margin-top: -0.6rem;
   }

   ul.contact-list li:nth-of-type(2):before {
      background-image: url(../img/icon_circle-mail.svg);
   }

   ul.contact-list li:nth-of-type(3):before {
      background-image: url(../img/icon_circle-map.svg);
   }

   ul.contact-list li:nth-of-type(4):before {
      background-image: url(../img/icon_circle-time.svg);
   }

   .top .faq .innerWrap {
      width: 100%;
      max-width: 60rem;
   }

   .top .faq h2 {
      text-align: center;
   }
}

/* ============================= 個別ページ ============================= */
@media screen {
   .page .mainVisual {
      width: 100%;
      aspect-ratio: 14.4 / 5.6;
      background-color: var(--color-beige);
      background-image: url(../img/bg_about_MV.png);
      background-size: cover;
      background-position: bottom center;
      display: flex;
      align-items: center;
      justify-content: center;
      background-repeat: no-repeat;
   }
   
   
   .home .mainVisual {
      background-color: #000;
      background-image: none;
       
   }

   .page.page-pricing .mainVisual {
      background-image: url(../img/bg_pricing_MV.png);
   }

   .page.page-first-visit .mainVisual {
      background-image: url(../img/bg_first-visit_MV.png);
      background-color: transparent;
   }

   .page.page-contact .mainVisual {
      background-image: url(../img/bg_contact_MV.png);
   }

   .page.page-legal .mainVisual {
      background-image: url(../img/bg_legal_MV.png);
   }

   .page.page-acupuncture .mainVisual {
      background-image: url(../img/bg_acupuncture_MV.png);
   }

   .page.page-pregnancy .mainVisual {
      background-image: url(../img/bg_pregnancy_MV.png);
   }

   .page.page-brainnap .mainVisual {
      background-image: url(../img/bg_brainnap_MV.png);
   }

   .page.page-okyu .mainVisual {
      background-image: url(../img/bg_okyu_MV.png);
   }

   .page.page-japanese-massage .mainVisual {
      background-image: url(../img/bg_japanese-massage_MV.png);
   }

   .page.page-appointment .mainVisual {
      background-image: url(../img/bg_appointment_MV.png);
   }

   .page .mainVisual h1 {
      color: #fff;
      font-size: var(--fs-80);
      text-align: center;
   }

   .page-legal .mainVisual h1,
   .page-pregnancy .mainVisual h1,
   .page-japanese-massage .mainVisual h1,
   .page-brainnap .mainVisual h1,
   .page-okyu .mainVisual h1 {
      font-size: var(--fs-56);
   }

   .page-about .about-staff .innerWrap,
   .page-about .about-clinic .innerWrap {
      width: 100%;
      max-width: 100rem;
   }

   .page-about .about-staff .innerWrap>section {
      display: flex;
      gap: 10rem;
   }

   .page-about .about-staff .innerWrap>section:first-child {
      margin-bottom: 8rem;
   }

   .page-about .about-staff .innerWrap>section:last-child {
      flex-direction: row-reverse;
   }

   .page-about .about-staff .innerWrap>section>figure {
      width: 48rem;
      flex-shrink: 0;
   }

   .page-about .about-staff .innerWrap>section ul {
      list-style-type: disc;
      padding-left: 1em;
   }

   .page-about .about-clinic h2 {
      width: 100vw;
      aspect-ratio: 14.4 / 4.6;
      background-image: url(../img/bg_about-clinic.png);
      background-size: contain;
      background-repeat: no-repeat;
      font-size: var(--fs-56);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
   }

   .page-about .about-clinic .innerWrap>div {
      display: flex;
      gap: 10rem;
   }

   .page-about .about-clinic .innerWrap>div:first-of-type>p {
      width: 43rem;
      flex-shrink: 0;
   }

   .page-about .about-clinic h3,
   .page-about .about-message h3 {
      font-size: var(--fs-36);
      font-weight: 400;
      margin-bottom: 4rem;
   }

   .page-about .about-clinic h3 span {
      display: block;
      font-size: var(--fs-22);
      font-weight: 400;
      margin-bottom: 0.4em;
      line-height: 1;
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(2) {
      padding-left: 24rem;
      margin-top: -4.5rem;
      gap: 2rem;
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(2)>p {
      width: 35.5rem;
      flex-shrink: 0;
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(3) {
      flex-direction: row-reverse;
      padding-left: 13.5rem;
      gap: 2rem;
      margin-top: -7.5rem;
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(3)>p {
      width: 38.5rem;
      flex-shrink: 0;
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(3)>div {
      padding-top: 10rem;
   }

   .page-about .about-message {
      width: 100%;
      aspect-ratio: 14.4 / 9.5;
      background-image: url(../img/bg_about-message.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: bottom center;
   }

   .page-about .about-message .innerWrap {
      width: 100%;
      max-width: 80rem;
      padding-top: 16rem;
   }

   .page-about main details {
      margin-top: 1em;
   }
   .page-about main details summary {
      cursor: pointer;
      font-weight: bold;
   }
   .page-about main details summary::before {
      content:"Read More";
   }

   .page-about main details[open] summary::before {
      content:"Close";
   }

   .page-pricing main .innerWrap {
      width: 100%;
      max-width: 100rem;
      font-size: var(--fs-36);
   }

   .page-pricing main .innerWrap h2 {
      display: flex;
      justify-content: center;
      gap: 1.4rem;
      align-items: center;
   }

   .page-pricing main .innerWrap .pricing-table {
      border-radius: 2rem;
      background-color: var(--color-beige-light);
      padding: 5rem 7.8rem;
   }

   .page-pricing main .innerWrap h2::before {
      content: "";
      width: 7.8rem;
      height: 7.8rem;
      background-image: url(../img/logo.png);
      background-size: contain;
      background-repeat: no-repeat;
   }

   .page-pricing main .pricing-massage .innerWrap h2::before {
      background-image: url(../img/icon_massage.png);
   }

   .page-pricing main .innerWrap h3 {
      color: #fff;
      background-color: var(--color-dark);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: .5rem 2rem;
   }

   .page-pricing main .pricing-massage .innerWrap h3 {
      background-color: #014A00;
   }

   .page-pricing main .innerWrap .price-block:not(:last-child) {
      margin-bottom: 6rem;
   }

   .page-pricing main .innerWrap .price-list {
      line-height: 1.2;
   }

   .page-pricing main .innerWrap .price-list li {
      display: flex;
      align-items: center;
   }

   .page-pricing main .innerWrap .price-list li:not(:last-child) {
      border-bottom: 1px dashed #000;
   }

   .page-pricing main .innerWrap .price-list span {
      text-align: center;
      padding: 2.4rem 0;
   }

   .page-pricing main .innerWrap .price-list span.item {
      width: 77rem;
      flex-grow: 0;
   }

   .page-pricing main .innerWrap .price-list span.price {
      width: 23rem;
      flex-grow: 0;
   }

   .page-pricing main .innerWrap .note {
      text-align: center;
      font-size: var(--fs-18);
   }

   .page-pricing main .innerWrap .note a {
      text-decoration: underline;
   }

   .page-pricing main .innerWrap .btnBookNow {
      font-size: var(--fs-24);
      margin: 6rem auto 0;
      width: 33rem;
      height: 5.6rem;
   }

   .page-first-visit .firstVisit-flow {
      position: relative;
   }

   .page-first-visit .firstVisit-flow::before {
      content: "";
      width: calc(100vw - 24rem);
      height: 135rem;
      background-color: #C2C2B8;
      display: block;
      position: absolute;
      top: -12rem;
      left: 0;
      z-index: -1;
   }

   .page-first-visit main .innerWrap {
      margin-left: 22rem;
      width: calc(100vw - 22rem);
      max-width: unset;
      background-color: var(--color-beige);
      padding: 8rem 0 8rem 5rem;
      position: relative;
   }

   .page-first-visit main .firstVisit-flow h2 {
      text-align: center;
   }

   .page-first-visit main .innerWrap h3,
   .page-first-visit main .firstVisit-cancel h2 {
      font-size: var(--fs-22);
      font-weight: 700;
      margin-bottom: 2rem;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .checklist {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4rem;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .checklist ul {
      width: 58rem;
      list-style-type: disc;
      margin-left: 8rem;
      margin-bottom: 6rem;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .checklist>p {
      max-width: 72rem;
      width: calc(100vw * (48 / 144));
   }

   .page-first-visit main .firstVisit-flow .innerWrap .checklist>div ul {
      max-width: 80rem;
      width: calc(100vw * (58 / 144));
   }

   .page-first-visit main .firstVisit-flow .innerWrap .flow dt {
      display: flex;
      gap: 10rem;
      margin-top: .8em;
      margin-bottom: .8em;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .flow dt span {

      font-weight: 400;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .flow dd {
      width: 90rem;
      padding-top: 1rem;
      padding-left: 19rem;
      position: relative;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .flow dl>div:not(:last-child) dd {
      padding-bottom: 9rem;
   }
   .page-first-visit main .firstVisit-flow .innerWrap .flow dl>div:not(:last-child) dd p:not(:last-child) {
      margin-bottom: 1.6em;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .flow dl>div:not(:last-child) dd::after {
      content: "";
      width: .1rem;
      height: 100%;
      background-color: #000;
      position: absolute;
      top: 0;
      left: 3rem;
      display: block;
   }

   .page-first-visit main .firstVisit-flow {
      padding-bottom: 0;
   }

   .page-first-visit main .firstVisit-cancel {
      padding-top: 0;
      padding-bottom: 0;
      position: relative;
   }

   .page-first-visit main .firstVisit-cancel::before {
      content: "";
      width: 30rem;
      aspect-ratio: 30 / 33;
      background-image: url(../img/img_first-visit02@2x.png);
      background-size: cover;
      position: absolute;
      top: -16rem;
      left: 0;
      z-index: 10;
   }

   .page-first-visit main .firstVisit-cancel .innerWrap {
      background: linear-gradient(to bottom, #D4C8BF 0%, #C2C2B8 21%);
      padding-left: 19rem;
      padding-right: 24rem;
   }

   .page-contact h2 {
      font-weight: 400;
      text-align: center;
   }

   .page-contact .contact-inquiry .innerWrap {
      max-width: 100rem;
      display: flex;
      gap: 4rem;
      justify-content: space-between;
   }

   .page-contact .contact-inquiry .innerWrap>div:first-child {
      padding: 3rem 0;
      width: 33rem;
   }

   .page-contact .contact-inquiry .innerWrap>div:last-child {
      background-color: var(--color-beige);
      padding: 3rem 2.4rem;
      width: 63rem;
   }

   .contact-form .form-row p{
      display: flex;
      justify-content: space-between;
      column-gap: 1.2rem;
      margin-bottom: 2.8rem;
   }
    .wpcf7-form-control {
        width: 100%;
        max-width: none;
    }
    .wpcf7-form-control-wrap {
        width: 100%;
        max-width: none;
    }
    .wpcf7-submit {
  text-align: center;
}
   .contact-form .form-row input,
   .contact-form .form-row textarea {
      flex: 1;
      padding: 1.5rem 2rem;
      border: none;
      background-color: #fff;
      color: var(--color-dark);
      font-size: 1.6rem;
      line-height: 1.5;
      width:100%;
   }

   .contact-form .form-row input::placeholder,
   .contact-form .form-row textarea::placeholder {
      color: var(--color-beige);
      opacity: 0.7;
   }

   .contact-form .form-row textarea {
      height: 15rem;
      min-height: 15rem;
      resize: none;
   }

   .contact-form .form-note {
      font-size: var(--fs-12);
      margin-bottom: .4rem;
   }

   .contact-form .form-note a {
      text-decoration: underline;
   }

   .btn-submit {
      width: 100%;
      height: 4.5rem;
      cursor: pointer;
   }

   .page-contact .contact-map {
      padding-top: 0;
      padding-bottom: 0;
   }

   .page-contact .contact-map iframe {
      width: 100vw;
      height: 46rem;
   }

   .page-legal main .innerWrap {
      width: 100%;
      max-width: 80rem;
   }

   .page-legal main .innerWrap ol {
      list-style-type: decimal;
      padding-left: 1.5em
   }

   .page-legal main h2 {
      margin-bottom: 0;
   }

   .page-legal main .innerWrap p,
   .page-legal main .innerWrap ol>li {
      margin-bottom: 1.5em;
   }

   .page-legal main .innerWrap ul {
      list-style-type: disc;
      padding-left: 1.5em
   }

   /* サービスページ共通設定 */
   .page-service .service-intro {
      height: 64rem;
      width: 100%;
      background-size: cover;
      background-position: center center;
      display: flex;
      padding-top: 8rem;
      padding-bottom: 5rem;
   }

   .page-service .service-intro p {
      width: 60rem;
      background-color: rgba(255, 255, 255, 0.7);
      padding: 4rem;
   }

   .page-service main .service-detail .innerWrap {
      display: flex;
      justify-content: space-between;
   }

   .page-service main .service-detail .innerWrap h2 {
      font-size: var(--fs-22);
      margin-bottom: .4em;
   }

   .page-service main .service-detail-reverse .innerWrap {
      flex-direction: row-reverse;
   }

   .page-service main .service-detail-top .innerWrap>p {
      margin-top: -12rem;
   }

   .page-service main .service-detail .innerWrap>p {
      flex-shrink: 0;
   }

   .page-service main .service-detail-top .innerWrap>p {
      width: 38rem;
   }

   .page-service main .service-detail-top .innerWrap>div {
      width: 67rem;
   }

   .page-service main .service-detail .innerWrap ul {
      list-style-type: disc;
      padding-left: 1.5em;
   }

   .page-service main .service-detail .innerWrap ol {
      list-style-type: decimal;
      padding-left: 1.5em;
   }

   .page-service main .service-detail .innerWrap>div>div {
      margin-bottom: 4rem;
   }

   /* サービスページ個別設定 */
   .page-acupuncture .service-intro {
      justify-content: flex-end;
      align-items: flex-end;
   }

   .page-japanese-massage .service-intro,
   .page-okyu .service-intro {
      justify-content: flex-start;
      align-items: flex-end;
   }

   .page-pregnancy .service-intro,
   .page-brainnap .service-intro {
      justify-content: flex-start;
      align-items: flex-start;
   }

   .page-acupuncture .service-intro {
      background-image: url(../img/bg_acupuncture01.png);
   }

   .page-pregnancy .service-intro {
      background-image: url(../img/bg_pregnancy01.png);
   }

   .page-japanese-massage .service-intro {
      background-image: url(../img/bg_japanese-massage01.png);
   }

   .page-brainnap .service-intro {
      background-image: url(../img/bg_brainnap01.png);
   }

   .page-okyu .service-intro {
      background-image: url(../img/bg_okyu01.png);
   }

   .page-acupuncture main .service-detail-2nd .innerWrap>p {
      width: 60rem;
   }

   .page-acupuncture main .service-detail-2nd .innerWrap>div {
      width: 60rem;
   }

   .page-okyu main .service-detail-2nd .innerWrap>p {
      width: 60rem;
   }

   .page-okyu main .service-detail-2nd .innerWrap>div {
      width: 56rem;
   }
}

/* ============================= レスポンシブ1001px〜============================= */
@media screen and (min-width:1001px) {

   header nav .innerWrap>ul>li.current:not(.has-sub),
   header nav .innerWrap>ul>li.current summary {
      border-bottom: 2px solid var(--color-dark);
   }
}

/* ============================= レスポンシブ〜1440px ============================= */
@media screen and (max-width:1440px) {
   .page-first-visit main .firstVisit-cancel .innerWrap {
      padding-right: 12rem;
   }
}

/* ============================= レスポンシブ〜1200px ============================= */
@media screen and (max-width:1200px) {

   .page-pregnancy .mainVisual h1,
   .page-japanese-massage .mainVisual h1,
   .page-brainnap .mainVisual h1,
   .page-okyu .mainVisual h1 {
      font-size: var(--fs-48);
   }

   header .innerWrap,
   main .innerWrap,
   footer .innerWrap {
      width: 100%;
      padding: 0 2rem;
   }

   header>section .innerWrap>div:not(.logo_container) ul li:nth-child(2) {
      display: none;
   }

   footer .ftContent .innerWrap {
      width: calc(100% - 4rem);
   }

   footer .ftContent .innerWrap>div {
      flex-wrap: wrap;
      row-gap: 2.4rem;
   }

   footer .ftContent .innerWrap>div>div:first-of-type {
      width: 100%;
   }

   .top .about .innerWrap>div {
      width: calc((72 / 120) * (100vw - 4rem));
   }

   .top .about .innerWrap>p:first-of-type {
      width: calc((44 / 120) * (100vw - 4rem));
      z-index: 10;
   }

   .top .about .innerWrap>p:last-of-type {
      right: 2rem;
      width: calc((24 / 120) * (100vw - 4rem));
   }

   .top .message .innerWrap>p {
      width: calc((48 / 120) * (100vw - 4rem));
   }

   .top .message .innerWrap>div {
      width: calc((66 / 120) * (100vw - 4rem));
   }

   .top .access .innerWrap {
      width: 100%;
      padding-right: 2rem;
      padding-left: 0;
   }

   .top .access .innerWrap>iframe {
      width: calc(100vw - 37rem);
   }

   .page-first-visit main .firstVisit-flow .innerWrap .flow dd {
      width: calc(100vw * (86 / 120));
   }

   .page-first-visit .firstVisit-flow::before {
      width: calc(100vw - 12rem);
   }

   .page-first-visit main .innerWrap {
      margin-left: 12rem;
      width: calc(100vw - 12rem);
   }

   .page-first-visit main .firstVisit-cancel::before {
      width: calc(100vw * (28 / 120));
   }

   .page-first-visit main .firstVisit-cancel .innerWrap {
      padding-right: 6rem;
   }

   /* サービスページ共通設定 */
   .page-service main .service-detail-top .innerWrap>p {
      width: calc((100vw - 4rem) * (38 / 120));
   }

   .page-service main .service-detail-top .innerWrap>div {
      width: calc((100vw - 4rem) * (67 / 120));
   }

   /* サービスページ個別設定 */
   .page-acupuncture main .service-detail-2nd .innerWrap>p,
   .page-okyu main .service-detail-2nd .innerWrap>p {
      width: calc((100vw - 4rem) * (60 / 120));
   }

   .page-acupuncture main .service-detail-2nd .innerWrap>div {
      width: calc((100vw - 4rem) * (60 / 120));
   }

   .page-okyu main .service-detail-2nd .innerWrap>div {
      width: calc((100vw - 4rem) * (56 / 120));
   }
}

/* ============================= レスポンシブ〜1000px ============================= */
@media screen and (max-width:1000px) {
   header>section .innerWrap>div:not(.logo_container) ul {
      display: none;
   }

   header {
      height: 6.2rem;
   }

   main {
      margin-top: 6.2rem;
   }

   header>nav .innerWrap {
      width: 100%;
      height: 100%;
      padding: 0 2rem;
   }

   header>nav .innerWrap>ul {
      flex-direction: column;
      justify-content: flex-start;
      gap: 0;
      align-items: flex-start;
      height: 100%;
      padding-top: calc(6.2rem + 1.2rem);
   }

   header>nav .innerWrap>ul>li {
      border-bottom: 1px solid #A2A2A2;
      width: 100%;
      height: auto;
   }

   header>nav .innerWrap>ul>li a {
      display: block;
      position: relative;
   }

   header>nav .innerWrap>ul>li a::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 2.5rem;
      height: 2.5rem;
      background-image: url(../img/icon_circle-arrow.svg);
      background-size: contain;
   }

   header>nav .innerWrap>ul>li>a,
   header>nav .innerWrap>ul>li>details>summary {
      padding: 0;
      height: 2.2em;
      line-height: 2.2em;
   }

   header>nav .innerWrap>ul>li>details[open]>ul,
   header>nav .innerWrap>ul>li>details[open]>ul * {
      all: revert;
   }

   header>nav .innerWrap>ul>li>details[open]>ul {
      list-style-type: none;
      font-size: var(--fs-12);
      margin: 0;
      padding: 0;
   }

   header>nav .innerWrap>ul>li>details[open]>ul li>a {
      padding: .6rem 0;
      text-decoration: none;
      color: #000;
      display: block;
      height: 2.2em;
      line-height: 2.2em;
      position: relative;
   }

   header>nav .innerWrap>ul>li.sp>a::after {
      all: revert;
   }

   header>nav .innerWrap>ul>li.sp {
      border-bottom: none;
      display: flex !important;
      justify-content: center;
      margin-top: 2.4rem;
   }

   header>nav .innerWrap>ul>li.sp a {
      display: flex;
   }
   header>nav .innerWrap>ul>li.sp a.btnBookNow {
      width: 100%;
      max-width: 41rem;
      height: 5.6rem;
   }

   .top .mainCatch>span:last-of-type {
      padding-left: 0;
   }

   .top .mainVisual .innerWrap {
      justify-content: center;
   }

   .top .mainCatch {
      align-items: center;
   }

   .top .service .innerWrap {
      width: 100%;
   }

   .top .service ul li {
      flex: 0 0 calc(0.5 * (100vw - 8rem));
   }

   .top .service ul li p {
      width: calc(100% * (28 / 41));
   }

   .page-about .about-staff .innerWrap>section {
      gap: 4rem;
   }

   .page-about .about-staff .innerWrap>section>figure {
      width: calc((48 / 100) * (100vw - 4rem));
      flex-shrink: 0;
   }

   .page-about .about-clinic .innerWrap>div {
      gap: 2rem;
   }

   .page-about .about-clinic .innerWrap>div:first-of-type>p {
      width: calc((43 / 100) * (100vw - 4rem));
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(2)>p {
      width: calc((35.5 / 100) * (100vw - 4rem));
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(3)>p {
      width: calc((38.5 / 100) * (100vw - 4rem));
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(2) {
      padding-left: calc((24 / 100) * (100vw - 4rem));
      margin-top: calc(((4.5 / 100) * (100vw - 4rem)) * -1);
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(3) {
      padding-left: calc((13.5 / 100) * (100vw - 4rem));
      margin-top: calc(((7.5 / 100) * (100vw - 4rem)) * -1);
   }

   .page-about .about-message .innerWrap {
      padding-top: 0;
   }


   .page-pricing main .innerWrap .price-list span.item {
      width: calc((77 / 100) * (100vw - 8rem));
   }

   .page-pricing main .innerWrap .price-list span.price {
      width: calc((23 / 100) * (100vw - 8rem));
   }

   .page-pricing main .innerWrap .pricing-table {
      padding: 4rem 2rem;
   }

   .page-pricing .innerWrap {
      --fs-36: 2.8rem;
   }

   .page-first-visit .firstVisit-flow::before {
      width: calc(100vw - 4rem);
   }

   .page-first-visit main .innerWrap {
      margin-left: 4rem;
      width: calc(100vw - 4rem);
   }

   .page-first-visit main .firstVisit-flow .innerWrap .flow dd {
      width: calc(100vw * (100 / 120));
   }

   .page-first-visit main .firstVisit-cancel::before {
      width: calc(100vw * (25 / 120));
   }

   .page-first-visit main .firstVisit-cancel .innerWrap {
      padding-right: 4rem;
   }


   .page-contact .contact-inquiry .innerWrap>div:last-child {
      width: calc((100vw - 8rem) * (63 / 100));
   }

   .contact-form .form-row input {
      width: calc((100% - 7.2rem) / 2);
   }

   .page-contact .contact-inquiry .innerWrap {
      gap: 2rem;
   }
}

/* ============================= レスポンシブ〜768px ============================= */
@media screen and (max-width:768px) {
   :root {
      /* フォントサイズ変数 */
      --fs-10: 1.0rem;
      --fs-12: 1.0rem;
      --fs-14: 1.0rem;
      --fs-16: 1.1rem;
      --fs-18: 1.4rem;
      --fs-22: 1.8rem;
      --fs-24: 2.0rem;
      --fs-28: 2.2rem;
      --fs-30: 2.4rem;
      --fs-36: 2.8rem;
      --fs-40: 4.0rem;
      /* 変更なし */
      --fs-48: 4.8rem;
      /* 変更なし */
      --fs-56: 3.8rem;
      --fs-80: 5.6rem;
   }

   .page-pricing .innerWrap {
      --fs-36: 2.0rem;
   }

   .page-legal .mainVisual h1,
   .page-pregnancy .mainVisual h1,
   .page-japanese-massage .mainVisual h1,
   .page-brainnap .mainVisual h1,
   .page-okyu .mainVisual h1 {
      font-size: var(--fs-40);
   }

   .pc {
      display: none;
   }

   .sp {
      display: revert !important;
   }

   header>section .innerWrap>div.logo_container a::before {
      width: 3rem;
      height: 3rem;
   }

   header>section .innerWrap>div.logo_container a {
      gap: .8rem;
   }


   header>nav .innerWrap>ul>li>a,
   header>nav .innerWrap>ul>li>details>summary {
      height: 2.4em;
      line-height: 2.4em;
   }

   header>nav .innerWrap>ul>li>details[open]>ul li>a {
      height: 2.4em;
      line-height: 2.4em;
   }

   footer .ftContent .innerWrap>div>div:nth-of-type(4) {
      width: 100%;
   }

   .top .mainVisual {
      height: calc(100svh - 6.2rem);
      min-height: unset;
   }

   .top .mainVisual .innerWrap {
      height: calc(100svh - 6.2rem);
   }

   .top .about .innerWrap {
      flex-direction: column;
      gap: 2.4rem;
      padding-top: 12rem;
   }

   .top .about .innerWrap>div {
      width: 100%;
   }

   .top .about .innerWrap>p:first-of-type {
      width: 100%;
   }

   .top .about .innerWrap>p:last-of-type {
      min-width: 8.6rem;
   }

   .top .about h2 {
      width: 60vw;
   }

   .top .message .innerWrap>div {
      width: 100%;
   }

   .top .message .innerWrap>div>p {
      margin-bottom: 2.4rem;
   }


   .top .service ul {
      row-gap: 6rem;
   }

   .top .service ul li {
      flex: 0 0 100%;
   }

   .top .service ul li p {
      width: 100%;
   }

   .top .service ul li h3 {
      width: calc(100% - 6rem);
      height: auto;
      margin-bottom: 1.2em;
   }

   .top .service .innerWrap::after {
      all: revert;
   }

   .top .access .innerWrap {
      flex-direction: column;
      row-gap: 2.4rem;
      padding: 0;
   }

   .top .access .innerWrap>iframe {
      width: 100%;
      height: 40rem;
   }

   ul.contact-list {
      width: 100%;
      padding: 0 2rem;
   }

   .page .mainVisual {
      aspect-ratio: 39 / 22.8;
   }

   .page-about .about-staff .innerWrap>section>figure {
      width: 100%;
   }

   .page-about .about-staff .innerWrap>section,
   .page-about .about-staff .innerWrap>section:last-child {
      flex-direction: column;
   }

   .page-about .about-clinic .innerWrap>div {
      flex-direction: column-reverse;
   }

   .page-about .about-clinic .innerWrap>div:first-of-type>p {
      width: 80%;
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(2) {
      flex-direction: column;
      padding: 0;
      align-items: flex-end;
      margin-bottom: 4rem;
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(2)>p {
      width: 55%;
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(3) {
      padding-left: 0;
      margin-top: 0;
      flex-direction: column;
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(3)>p {
      width: 70%;
   }

   .page-about .about-clinic .innerWrap>div:nth-of-type(3)>div {
      padding-top: 4rem;
   }

   .page-about .about-message {
      aspect-ratio: 1 / 1;
   }

   .page-pricing main .innerWrap .price-list span.item {
      width: calc((70 / 100) * (100vw - 8rem));
   }

   .page-pricing main .innerWrap .price-list span.price {
      width: calc((30 / 100) * (100vw - 8rem));
   }

   .page-first-visit .firstVisit-flow::before {
      width: 100vw;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .checklist {
      flex-direction: column;
   }

   .page-first-visit main .innerWrap {
      padding: 8rem 2rem 8rem 2rem;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .checklist>div ul {
      max-width: unset;
      width: calc(100% - 1.5em);
      margin-left: 1.5em;
      margin-bottom: 2.4rem;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .checklist>p {
      max-width: unset;
      width: 100%;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .flow dt {
      gap: 2rem;
   }

   .page-first-visit main .firstVisit-flow .innerWrap .flow dd {
      padding-left: 6.6rem;
      width: calc(100vw - 8rem);

   }

   .page-first-visit main .firstVisit-cancel .innerWrap {
      padding: calc((100vw * ((2 / 3) * (33 / 30)) + 2.4rem)) 2rem 8rem 2rem;
   }

   .page-first-visit main .firstVisit-cancel::before {
      width: calc(100vw * (2 / 3));
      top: 0;
   }

   .page-contact .contact-inquiry .innerWrap {
      flex-direction: column;
   }

   .page-contact .contact-inquiry .innerWrap>div:first-child,
   .page-contact .contact-inquiry .innerWrap>div:last-child {
      width: 100%;

   }

   .page-contact .contact-map iframe {
      height: 40rem;
   }

   /* サービスページ共通設定 */
   .page-service main .service-detail .innerWrap {
      flex-direction: column;
      gap: 2rem;
   }

   .page-service .service-intro {
      height: 40rem;
      padding-top: 4rem;
      padding-bottom: 2.5rem;
   }

   .page-service main .service-detail-top .innerWrap>p {
      margin-top: -10rem;
   }

   .page-service .service-intro p {
      width: 40rem;
      padding: 2.5rem;
   }

   /* サービスページ共通設定 */
   .page-service main .service-detail-top .innerWrap>p {
      width: calc((100vw) * (25 / 39));
      max-width: 40rem;
   }

   .page-service main .service-detail-top .innerWrap>div {
      width: 100%;
   }

   /* サービスページ個別設定 */
   .page-acupuncture .service-intro {
      background-image: url(../img/bg_acupuncture01_sp.png);
   }


   .page-acupuncture main .service-detail-2nd .innerWrap,
   .page-okyu main .service-detail-2nd .innerWrap {
      align-items: flex-end;
   }

   .page-acupuncture main .service-detail-2nd .innerWrap>p,
   .page-okyu main .service-detail-2nd .innerWrap>p {
      width: calc((100vw) * (25 / 39));
      max-width: 40rem;
   }

   .page-acupuncture main .service-detail-2nd .innerWrap>div,
   .page-okyu main .service-detail-2nd .innerWrap>div {
      width: 100%;
   }
}

/* ============================= レスポンシブ〜540px ============================= */
@media screen and (max-width:540px) {
   :root {
      /* フォントサイズ変数 */
      --fs-80: 4.8rem;
   }

   .page-legal .mainVisual h1,
   .page-pregnancy .mainVisual h1,
   .page-japanese-massage .mainVisual h1,
   .page-brainnap .mainVisual h1,
   .page-okyu .mainVisual h1 {
      font-size: var(--fs-30);
   }

   footer .ftContent .innerWrap>div>div:nth-of-type(2),
   footer .ftContent .innerWrap>div>div:nth-of-type(3) {
      width: 100%;
   }

   footer .cta2 .btnBookNow {
      width: 100%;
   }

   .cta .btnBookNow {
      width: 100%;
   }

   .top .about .innerWrap {
      padding-top: 4rem;
   }

   .top .access .innerWrap>iframe {
      height: 30rem;
   }

   .page-about .about-message {
      aspect-ratio: 1 / 1.3;
   }

   .page-pricing .innerWrap {
      --fs-36: 1.6rem;
   }

   .page-pricing main .innerWrap .btnBookNow {
      width: 33rem;
      width: 100%;
   }

   .page-contact .contact-map iframe {
      height: 30rem;
   }

   /* サービスページ共通設定 */
   .page-service .service-intro {
      height: 30rem;
      padding-top: 2.5rem;
      padding-bottom: 1.5rem;
   }

   .page-service main .service-detail-top .innerWrap>p {
      margin-top: -9rem;
   }

   .page-service .service-intro p {
      width: 30rem;
      padding: 1.5rem;
   }

   .contact-form .form-row {
      flex-direction: column;
      gap: 2.8rem;
   }

   .contact-form .form-row input {
      width: 100%;
   }
}






/* ============================= ハンバーガー ============================= */
@media screen and (max-width:1000px) {

   /* ハンバーガーボタン */
   .menu-toggle {
      position: absolute;
      top: 2.4rem;
      right: 2rem;
      width: 3rem;
      height: 1.6rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      background: none;
      border: none;
      z-index: 1001;
   }

   .menu-toggle span {
      display: block;
      height: 0.2rem;
      width: 100%;
      background: #fff;
      border-radius: .2rem;
      transition: all 0.3s ease;
   }

   /* ✗に変形 */
   .menu-toggle.active span:nth-child(1) {
      transform: translateY(0.7rem) rotate(45deg);
   }

   .menu-toggle.active span:nth-child(2) {
      opacity: 0;
   }

   .menu-toggle.active span:nth-child(3) {
      transform: translateY(-0.7rem) rotate(-45deg);
   }

   /* ナビゲーションメニュー */
   header nav {
      position: fixed;
      top: 0;
      right: -39rem;
      /* 初期状態: 画面外 */
      width: 39rem;
      height: 100svh;
      background: var(--color-light);
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
      transition: right 0.35s ease;
      z-index: 1000;
   }

   header nav.open {
      right: 0;
   }

   /* オーバーレイ */
   #menu-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease;
      z-index: 999;
   }

   #menu-overlay.active {
      opacity: 1;
      visibility: visible;
   }
}

@media screen and (max-width:768px) {
   header nav {
      right: -100vw;
      width: 100vw;
   }
}

/* ============================= カルーセル ============================= */
@media screen {
   .carousel {
      position: relative;
      --ctrl-gap: 12rem;
      /* ← ビューポート確保用（変更でviewport幅が変わる） */
      --ctrl-size: 6.6rem;
      /* ← ボタン実サイズ（独立） */
      --gap: 2.4rem;
      --perView: 2;
      padding-inline: var(--ctrl-gap);
   }

   /* コントローラー（画像ボタン） */
   .carousel__ctrl {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: var(--ctrl-size);
      height: var(--ctrl-size);
      border: none;
      background: none;
      cursor: pointer;
      padding: 0;
      display: grid;
      place-items: center;
   }

   .carousel__ctrl::before {
      content: "";
      width: 100%;
      height: 100%;
      background: url("../img/icon_circle-arrow2.svg") no-repeat center / contain;
   }

   /* prev は水平反転 */
   .carousel__ctrl--prev::before {
      transform: scaleX(-1);
   }

   .carousel__ctrl--prev {
      left: .6rem;
   }

   .carousel__ctrl--next {
      right: .6rem;
   }

   .carousel__ctrl[disabled] {
      opacity: .35;
      cursor: default;
      pointer-events: none;
   }

   /* 以下はそのまま */
   .carousel__track-viewport {
      overflow: hidden;
   }

   .carousel__track {
      display: flex;
      gap: var(--gap);
      will-change: transform;
      transition: transform .35s ease;
   }

   .carousel__track>li {
      flex: 0 0 calc((100% - (var(--perView) - 1) * var(--gap)) / var(--perView));
      background-color: var(--color-beige);
      padding: 3.6rem;
   }

   .carousel__track>li p:first-of-type {
      margin-bottom: var(--fs-24);
      position: relative;
   }

   .carousel__track>li p:first-of-type::before {
      content: "★★★★★";
      position: absolute;
      top: 0;
      left: 8.5rem;
   }

   .carousel__track>li p:first-of-type::after {
      content: '';
      position: absolute;
      top: 3rem;
      left: 8.5rem;
      width: 4.1rem;
      height: 4.1rem;
      background-image: url(../img/icon_quote.png);
      background-size: contain;
   }

   .carousel__track>li p span {
      display: block;
      width: 7rem;
   }
}

@media screen and (max-width:1200px) {
   .carousel {
      --ctrl-gap: 6rem;
      /* ← ビューポート確保用（変更でviewport幅が変わる） */
      --ctrl-size: 4rem;
      /* ← ボタン実サイズ（独立） */
   }

}

@media screen and (max-width:1000px) {
   .carousel {
      --perView: 1;
   }

   .top .voice .innerWrap {
      padding: 0;
   }
}

@media (max-width: 540px) {
   .carousel {
      --ctrl-gap: 3rem;
      /* ← ビューポート確保用（変更でviewport幅が変わる） */
      --ctrl-size: 2rem;
      /* ← ボタン実サイズ（独立） */
   }
}


/* ============================= アコーディオン ============================= */
@media screen {
   .accordion-faq {
      width: 100%;
      margin: 0 auto;
   }

   .accordion-faq dt {
      position: relative;
      background-color: var(--color-light);
      color: var(--color-dark);
      font-weight: 400;
      padding: 2.4rem 7rem 2.4rem 4rem;
      cursor: pointer;
   }

   .accordion-faq dt::after {
      content: '';
      position: absolute;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
      transition: transform 0.3s;
      width: 3.6rem;
      height: 3.6rem;
      background-image: url('../img/icon_circle-arrow.svg');
      background-size: contain;
      background-repeat: no-repeat;
   }

   .accordion-faq dt.active::after {
      transform: translateY(-50%) rotate(270deg);
   }

   .accordion-faq dd {
      background-color: var(--color-beige-light);
      padding: 0 2.4rem 0 4rem;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s, padding 0.4s;
      border-radius: 0 0 0 2rem;
      margin-bottom: 2rem;
   }

   .accordion-faq dd.open {
      max-height: 50rem;
      padding: 2rem 2.4rem 2rem 4rem;
   }

}

@media (max-width: 540px) {
   .accordion-faq dt {
      padding: 2.4rem 5rem 2.4rem 2.4rem;
   }

   .accordion-faq dd {
      padding: 0 2.4rem 0 2.4rem;
   }

   .accordion-faq dd.open {
      padding: 2rem 2.4rem 2rem 2.4rem;
   }

   .accordion-faq dt::after {
      width: 1.8rem;
      height: 1.8rem;
   }
}



/* ============================= モーダル ============================= */
@media screen {

   .acc_backdrop[hidden],
   .acc_modal[hidden] {
      display: none;
   }

   .acc_backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      z-index: 999;
   }

   .acc_modal {
      position: fixed;
      inset: 50% auto auto 50%;
      transform: translate(-50%, -50%);
      width: calc(100vw - 4rem);
      height: calc(100svh - 4rem);
      max-width: 90rem;
      max-height: 90rem;

      /* ▼ 元の overflow:auto を無効化して内部だけスクロールに変更 */
      overflow: hidden;

      /* ▼ 縦フレックスにして見出しを固定、本文を可変 */
      display: flex;
      flex-direction: column;

      background: #fff;
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
      padding: 24px;
      z-index: 1000;
      font-size: var(--fs-18);
   }

   /* 閉じるボタン（疑似要素で✗表示） */
   .acc_close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 40px;
      height: 40px;
      border: none;
      background: transparent;
      cursor: pointer;
   }

   .acc_close::before {
      content: '✕';
      display: block;
      line-height: 40px;
      text-align: center;
      font-size: 20px;
   }

   /* 見やすさ微調整 */
   .acc_modal h4 {
      font-size: var(--fs-22);
      text-align: center;
      font-weight: 700;

      /* 下マージンだけにして本文と区切る */
      margin: 0 0 1.5rem;

      /* ✕ボタンとの重なり防止 */
      padding-right: 48px;
   }

   /* ▼ 追加：本文スクロール領域 */
   .acc_modal_body {
      flex: 1 1 auto;
      min-height: 0;
      /* これがないとflex内でスクロールしない */
      overflow: auto;
   }

   /* 本文内の余白調整 */
   .acc_modal_body>ul,
   .acc_modal_body>div:not(:last-of-type) {
      margin-bottom: 3rem;
   }

   .acc_modal ul {
      padding-left: 1.5em;
      list-style-type: disc;
   }

   .acc_modal li+li {
      margin-top: .35rem;
   }

   .acc_modal span {
      color: #141eac;
   }

   /* モーダル開時はスクロール不可 */
   body.is-modal-open {
      overflow: hidden;
   }
}


/* ============================= フェードイン ============================= */
@media screen {
   .fade-in {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
   }

   .fade-in.is-visible {
      opacity: 1;
      transform: translateY(0);
   }
}