/* =========================================================
   ミラドライLP / フォンタナクリニック天神
   設計幅 375px。1rem = 10px（375px時）
   - 768px未満 : 画面幅に等比拡大/縮小（font-size:2.66667vw）
   - 768px以上 : 375px列を中央固定・地色#FAFAFA・左右にシャドウ
   ========================================================= */

/* ---------- ⓪ 自己ホストフォント ----------
   Google Fonts の Noto Serif JP サブセットは GPOS の palt が削除されており、
   Figmaが palt 前提で組んだカタカナ見出しが約20%横に広がる。
   palt を保持したサブセット（SIL OFL / tools/build_fonts.py で生成）を先に当て、
   収録外の文字は Google Fonts 版へフォールバックさせる。 */
@font-face{
  font-family:"NotoSerifJP Subset";
  src:url(../fonts/NotoSerifJP-subset.woff2) format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- ① 変数 ---------- */
:root{
  --green:#426975;          /* 緑メイン2 */
  --text:#3C4044;           /* font */
  --accent:#AE9564;
  --gold:#C29238;
  --page-bg:#FAFAFA;        /* PC表示の地色 */

  --serif:"NotoSerifJP Subset","Noto Serif JP",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

/* ---------- ② ベース ---------- */
html{
  font-size:2.66667vw;      /* 375px幅で10px */
}
@media (min-width:768px){
  html{ font-size:10px }    /* PCは375px固定 */
}
html{ overflow-x:clip }

body{
  background:var(--page-bg);
  color:var(--text);
  font-family:var(--serif);
  word-break:auto-phrase;
  line-break:strict;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- ③ 共通 ---------- */
.page{
  position:relative;
  width:37.5rem;
  margin-inline:auto;
  background:#fff;
  overflow:hidden;
}
@media (min-width:768px){
  .page{ box-shadow:0 0 6rem rgba(176,180,192,.65) }
}

.nowrap{ white-space:nowrap }
.pc-only{ display:block }
.sp-only{ display:none }
@media (max-width:767px){
  .pc-only{ display:none }
  .sp-only{ display:block }
}

/* 縦組みテキスト（句読点の縦位置をブラウザに任せる） */
.vtext{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-feature-settings:"vrt2" 1;
  line-height:1;
}

/* =========================================================
   FV  （Figma node 140:3030 / 375 × 661）
   ========================================================= */
.fv{
  position:relative;
  width:37.5rem;
  height:66.1rem;
  background:url(../images/fv/fv-bg.webp) center / 37.5rem 66.1rem no-repeat;
  overflow:hidden;
}
.fv > *{ position:absolute }

/* ロゴ */
.fv__logo{ left:1rem; top:2rem; width:13rem; height:4.3rem }

/* 右肩リード（縦組み） */
.fv__lead{
  left:33.7rem; top:4.2rem;
  font-size:1.6rem; font-weight:700; color:var(--text);
  letter-spacing:.2rem;                  /* 行送り18px（実測） */
}

/* 「麻酔科専門医」＋白グラデ帯 */
.fv__specbar{
  left:28.5rem; top:4rem;
  width:4.3rem; height:19.4rem;
  background:linear-gradient(90.742deg,rgba(255,255,255,.6) 14.907%,rgba(255,255,255,.9) 87.766%);
}
.fv__spec{
  left:30.65rem; top:4.8rem;
  transform:translateX(-50%);
  font-size:2.8rem; font-weight:700; color:var(--green);
  letter-spacing:.28rem;                 /* 行送り30.8px相当 */
}
.fv__spec-sub{
  left:29.9rem; top:23.9rem;
  font-size:1.6rem; font-weight:700; color:var(--text);
  letter-spacing:.21rem;
}

/* 「ミラドライ」縦組み */
.fv__title{
  left:24.7rem; top:7.6rem;
  transform:translateX(-50%);
  font-size:6.4rem; font-weight:700; color:var(--green);
  letter-spacing:.4rem;                  /* 字送り68px相当 */
}

/* 認証バッジ2つ */
.fv__badge{ width:9.9429rem; height:9.6667rem; top:31.3rem }
.fv__badge--1{ left:2rem }
.fv__badge--2{ left:10.7rem }
.fv__badge img{ width:100%; height:100% }
.fv__badge::before{                       /* 白い円 */
  content:"";
  position:absolute; left:1rem; top:.8rem;
  width:8rem; height:8rem;
  background:#fff; border-radius:50%;
}
.fv__badge-icon{ position:absolute }
.fv__badge-icon--check{ left:5.8rem; top:32.6rem; width:2.3rem; height:2.3rem }
.fv__badge-icon--doctor{ left:14.7rem; top:32.57rem; width:2.00014rem; height:2.13333rem }
.fv__badge-txt{
  transform:translateX(-50%);
  font-weight:500; color:var(--text);
  text-align:center; line-height:1.2; white-space:nowrap;
}
.fv__badge-txt--1{ left:7.033rem; top:34.833rem; font-size:1.8rem }
.fv__badge-txt--2{ left:15.883rem; top:35rem;    font-size:1.5rem }
.fv__badge-txt--3{ left:15.7rem;  top:38.567rem; font-size:1rem }

/* 価格 */
.fv__rule{ width:33.5rem; height:1px; background:var(--gold); opacity:.6 }
.fv__rule--1{ left:2.4rem; top:43.1rem }
.fv__rule--2{ left:2rem;   top:46.7rem }
.fv__price-label{
  left:4.9rem; top:44.1rem;
  font-size:1.8rem; font-weight:700; color:var(--gold);
  line-height:1; white-space:nowrap;
}
.fv__price-num{ left:3.26422rem; top:48.2503rem; width:26.5rem; height:7rem }
.fv__price-tax{ left:30.7rem; top:49.9rem; font-size:1.5rem; font-weight:700; line-height:1; white-space:nowrap }
.fv__price-yen{ left:30.8rem; top:51.9rem; font-size:2rem;   font-weight:700; line-height:1; white-space:nowrap }

/* CTAボタン */
.fv__cta{
  left:18.8rem; top:57.3rem;
  transform:translateX(-50%);
  display:flex; gap:.8rem;
}

/* 共通CTAボタン（フッター等でも使う） */
.btn-cta{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  width:16.4rem; height:5.6rem;
  border-radius:.7rem;
  font-family:var(--sans); font-weight:600; color:#fff;
  line-height:1; white-space:nowrap;
}
.btn-cta img{ width:2.4rem; height:2.4rem }
.btn-cta--tel{
  background:linear-gradient(110.920775deg,#FD9F01 1.9594%,#DF6301 124.05%);
  font-size:1.5rem;
}
.btn-cta--line{
  background:linear-gradient(180deg,#71E875 -18.5%,#06C755 100.6%);
  font-size:1.6rem;
}

/* =========================================================
   追従CTAバー（カンプ無し＝独自実装）
   FV内のCTAを通り過ぎたら画面下に固定して追従する
   ========================================================= */
.cta-bar{
  position:fixed; left:50%; bottom:0; z-index:100;
  width:37.5rem;
  display:flex; justify-content:center; gap:.8rem;
  padding:.8rem 0 calc(.8rem + env(safe-area-inset-bottom,0px));
  background:transparent;              /* バーの地は出さずボタンだけ浮かせる */

  transform:translate(-50%,100%);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .3s ease, opacity .3s ease, visibility .3s;
}
.cta-bar.is-show{
  transform:translate(-50%,0);
  opacity:1; visibility:visible; pointer-events:auto;
}

/* =========================================================
   選ばれる理由  （Figma node 140:2926 / 375 × 733）
   背景は #E4CDB6 ＋ テクスチャの overlay 合成を焼き込んだ1枚
   ========================================================= */
.rsn{
  position:relative;
  width:37.5rem;
  height:73.3rem;
  background:url(../images/reason/reason-bg.webp) center / 37.5rem 73.3rem no-repeat;
  overflow:hidden;
}
.rsn > *{ position:absolute }

/* 見出し */
.rsn__title{
  left:18.8rem; top:5.6rem;
  transform:translateX(-50%);
  width:19rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  line-height:1; white-space:nowrap;
}
.rsn__title-en{
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.5rem; color:#004F3C; letter-spacing:.06rem;
  font-feature-settings:"palt" 1;
}
.rsn__title-ja{
  font-weight:500; font-size:3.2rem; color:var(--text);
  letter-spacing:.128rem; font-feature-settings:"palt" 1;
}

/* 3つのポイントカード */
.rsn-card{
  top:14.3rem; width:10.8rem; height:13.5rem;
  border:1px solid #fff; border-radius:.5rem;
  background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.9) 100%);
}
.rsn-card--1{ left:2rem }
.rsn-card--2{ left:13.4rem }
.rsn-card--3{ left:24.8rem }

.rsn-num{
  top:15.3rem;
  font-family:"Cormorant Infant",serif; font-weight:500;
  font-size:2.4rem; color:#F6BA53; line-height:1;
  font-feature-settings:"palt" 1; white-space:nowrap;
}
.rsn-num--1{ left:3rem }
.rsn-num--2{ left:14.4rem }
.rsn-num--3{ left:25.8rem }

.rsn-icon--1{ left:5.2rem;      top:16.9rem;     width:4.50021rem; height:4.78131rem }
.rsn-icon--2{ left:16.4rem;     top:18.10001rem; width:4.8rem;     height:3.00544rem }
.rsn-icon--3{ left:28.12422rem; top:17.48555rem; width:4.15135rem; height:3.72893rem }

.rsn-label{
  top:22.8rem;
  transform:translateX(-50%);
  font-weight:500; font-size:1.2rem; color:var(--text);
  line-height:1.4; text-align:center; white-space:nowrap;
}
.rsn-label--1{ left:7.4rem }
.rsn-label--2{ left:18.8rem }
.rsn-label--3{ left:30.25rem }

/* 「ミラドライは こんな方にオススメです！」 */
.rsn-grad1,.rsn-grad2{
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rsn-grad1{ background-image:linear-gradient(109.98332446deg,#F6BA53 .62759%,#FF7301 168.05%) }
.rsn-grad2{ background-image:linear-gradient(110.65152294deg,#F6BA53 .93472%,#FF7301 166.21%) }

.rsn-lead1,.rsn-lead2{
  font-weight:500; font-size:3.6rem; line-height:1;
  font-feature-settings:"palt" 1; white-space:nowrap;
}
.rsn-lead1{ left:10rem; top:33.2rem; font-weight:400 }
.rsn-lead2{ left:14.4rem; top:38.8rem }

.rsn-lead1-suf,.rsn-lead2-pre,.rsn-lead2-suf{
  font-weight:500; font-size:1.8rem; color:var(--text); line-height:1;
  font-feature-settings:"palt" 1; white-space:nowrap;
}
.rsn-lead1-suf{ left:24.1rem; top:34.8rem }
.rsn-lead2-pre{ left:5.5rem;  top:40.4rem }
.rsn-lead2-suf{ left:27.7rem; top:40.4rem }

.rsn-underline{ left:16.2rem; top:38.2rem; width:9.8rem; height:.4rem }

/* 下向き三角（Figmaは上向きポリゴンを上下反転して使用） */
.rsn-arrow{ left:16rem; top:43.5rem; width:5.6rem; height:3.8rem; transform:scaleY(-1) }
.rsn-arrow img{ position:absolute; left:10.85%; right:10.85%; top:2.86%; bottom:25%; width:78.3%; height:72.14% }

/* チェックリスト */
.rsn-box{
  left:2rem; top:48.6rem;
  width:33.5rem; height:19.3rem;
  background:#fff; border-radius:.5rem;
}
.rsn-check{ left:3rem; width:1.99972rem; height:1.79582rem }
.rsn-check--1{ top:50.7024rem }
.rsn-check--2{ top:56.5024rem }
.rsn-check--3{ top:60.2024rem }
.rsn-check--4{ top:64.0024rem }

.rsn-item{
  left:5.8rem;
  font-family:var(--sans); font-weight:400;
  font-size:1.4rem; color:var(--text); line-height:1.4;
}
.rsn-item--1{ top:50.6rem; width:28.4rem }
.rsn-item--2{ top:56.42rem; width:28.7rem }
.rsn-item--3{ top:60.12rem; width:28.7rem }
.rsn-item--4{ top:63.8rem; width:28.7rem; letter-spacing:.056rem }

/* =========================================================
   他社との比較  （Figma node 140:2869 / 375 × 350）
   ========================================================= */
.cmp{
  position:relative;
  width:37.5rem; height:35rem;
  background:#fff;
  overflow:hidden;
}
.cmp > *{ position:absolute }

.cmp__title{
  left:9.3rem; top:5.4rem; width:19rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  line-height:1;
}
.cmp__title-en{
  width:100%; text-align:center;
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.5rem; color:#004F3C; letter-spacing:.06rem;
  font-feature-settings:"palt" 1;
}
.cmp__title-ja{
  font-weight:500; font-size:3.2rem; color:var(--text);
  font-feature-settings:"palt" 1; white-space:nowrap;
}

/* 見出しセル */
.cmp-head{
  display:flex; align-items:center; justify-content:center;
  padding:.8rem 1rem;
  border-radius:.5rem .5rem 0 0;
  color:#fff; line-height:1; white-space:nowrap;
}
.cmp-head--own{
  left:13.6rem; top:14.9rem; width:10.6rem;
  flex-direction:column; gap:.2rem;
  background:linear-gradient(-70.83710715deg,#A87B32 .85708%,#E5BA66 71.854%,#FFF3CB 122.33%);
}
.cmp-head__en{
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:.9rem; letter-spacing:.036rem; text-align:center;
  font-feature-settings:"palt" 1;
}
.cmp-head__ja{ font-weight:500; font-size:1.8rem }
.cmp-head--a,.cmp-head--b{
  top:16.2rem; width:5.5rem;
  background:var(--green);
  font-family:var(--sans); font-weight:400; font-size:1.5rem;
  letter-spacing:.06rem; font-feature-settings:"palt" 1;
}
.cmp-head--a{ left:24.3rem }
.cmp-head--b{ left:29.9rem }

/* 左の項目名列 */
.cmp-labels{
  left:2rem; top:19.4rem; width:11.6rem;
  display:flex; flex-direction:column;
}
.cmp-labels__cell{
  width:11.5rem; height:3.4rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(66,105,117,.06);
  border-bottom:1px solid #fff;
  font-family:var(--sans); font-weight:400; font-size:1.5rem;
  color:var(--text); letter-spacing:.06rem; line-height:1;
  font-feature-settings:"palt" 1; white-space:nowrap;
}

/* 当院の列 */
.cmp-own{
  left:13.6rem; top:19.45rem; width:10.7rem; height:10.1rem;
  display:flex; flex-direction:column;
}
.cmp-own__cell{
  width:100%; height:3.4rem;
  background:#fff;
  border-right:1px solid rgba(66,105,117,.06);
  border-bottom:1px solid rgba(66,105,117,.06);
}
.cmp-own__cell--last{ height:3.3rem; border-bottom:0 }

.cmp-mark--1{ left:17.88rem;  top:20.05rem;  width:2.14rem; height:2.2rem }
.cmp-mark--2{ left:18.075rem; top:23.65rem;  width:1.8rem;  height:1.8rem }
.cmp-mark--3{ left:17.88rem;  top:26.784rem; width:2.14rem; height:2.13529rem }

/* A院・B院の列 */
.cmp-other{
  top:19.45rem; width:5.6rem;
  display:flex; flex-direction:column;
}
.cmp-other--a{ left:24.3rem }
.cmp-other--b{ left:29.9rem }
.cmp-other__dash{ width:5.6rem; height:3.4rem }
.cmp-other__dash--last{ height:3.3rem }
.cmp-other__cell{
  position:relative;
  width:5.6rem; height:3.4rem;
  background:rgba(66,105,117,.06);
  border-bottom:1px solid #fff;
  border-right:1px solid #fff;
}
.cmp-other__cell img{ position:absolute; left:2.1rem; top:1.1rem; width:1.5rem; height:1.3rem }

/* =========================================================
   ドクター紹介  （Figma node 140:2851 / 375 × 689）
   背景は #426975 ＋ テクスチャの soft-light 合成を焼き込んだ1枚
   ========================================================= */
.doc{
  position:relative;
  width:37.5rem; height:68.9rem;
  background:url(../images/doctor/doctor-bg.webp) center / 37.5rem 68.9rem no-repeat;
  color:#fff;
  overflow:hidden;
}
.doc > *{ position:absolute }

/* 背面の大きな透かし文字 */
.doc__watermark{
  left:18.1rem; top:14.9rem;
  transform:translateX(-50%);
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:8.8rem; line-height:1; letter-spacing:.352rem;
  color:#fff; opacity:.1; text-align:center; white-space:nowrap;
  font-feature-settings:"palt" 1;
}

/* 見出し */
.doc__title{
  left:18.8rem; top:5.4rem;
  transform:translateX(-50%);
  width:19rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  line-height:1;
}
.doc__title-en{
  width:100%; text-align:center;
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.5rem; letter-spacing:.06rem;
  font-feature-settings:"palt" 1;
}
.doc__title-ja{
  font-weight:500; font-size:3.2rem;
  font-feature-settings:"palt" 1; white-space:nowrap;
}

/* 医師写真（上部だけアーチ型） */
.doc__photo{
  left:2rem; top:14.9rem;
  width:18rem; height:21rem;
  border-radius:9rem 9rem 0 0;
  object-fit:cover; object-position:bottom;
}

/* 氏名 */
.doc__role{
  left:22.4rem; top:23.3rem;
  font-weight:500; font-size:1.2rem; line-height:1; white-space:nowrap;
}
.doc__name{
  left:22.4rem; top:25.3rem;
  font-weight:500; font-size:2.2rem; line-height:1; white-space:nowrap;
}
.doc__name-gap{ letter-spacing:.64rem }

/* 本文 */
.doc__lead{
  left:2rem; top:37.9rem;
  font-weight:500; font-size:2.4rem; line-height:1.6; white-space:nowrap;
}
.doc__body{
  left:2rem; top:46.5rem; width:33.5rem;
  font-family:var(--sans); font-weight:400;
  font-size:1.4rem; line-height:1.4; letter-spacing:.056rem;
  font-feature-settings:"palt" 1;
}

/* 資格 */
.doc__license{
  left:2rem; top:53.7rem;
  width:33.5rem; height:9.8rem;
  border:1px solid rgba(255,255,255,.8);
  border-radius:.5rem;
}
.doc__license-title{
  left:3.6rem; top:55.7rem;
  font-family:var(--sans); font-weight:500;
  font-size:1.6rem; line-height:1; letter-spacing:.064rem;
  font-feature-settings:"palt" 1; white-space:nowrap;
}
.doc__license-body{
  left:3.6rem; top:58.1rem; width:30.3rem;
  font-family:var(--sans); font-weight:400;
  font-size:1.2rem; line-height:1.4; letter-spacing:.048rem;
  font-feature-settings:"palt" 1;
}

/* =========================================================
   ミラドライとは  （Figma node 140:2841 / 375 × 437）
   ========================================================= */
.wht{
  position:relative;
  width:37.5rem; height:43.7rem;
  background:#fff;
  overflow:hidden;
}
.wht > *{ position:absolute }

.wht__title{
  left:18.8rem; top:5.4rem;
  transform:translateX(-50%);
  width:19rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  line-height:1; white-space:nowrap;
}
.wht__title-en{
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.5rem; color:#004F3C; letter-spacing:.06rem; text-align:center;
  font-feature-settings:"palt" 1;
}
.wht__title-ja{
  font-weight:500; font-size:3.2rem; color:var(--text);
  letter-spacing:.128rem; font-feature-settings:"palt" 1;
}

.wht__machine{ left:1.8rem; top:15.5rem; width:8.7rem; height:14.8rem }

.wht__body{
  left:12.7rem; top:14.1rem; width:22.8rem;
  font-family:var(--sans); font-weight:400;
  font-size:1.4rem; line-height:1.6; color:var(--text);
  white-space:pre-wrap;
  word-break:normal;          /* カンプは文節ではなく文字単位で折り返している */
  line-break:auto;
}

/* 詳しくはこちら（アコーディオン / 開くと Figma 135:859 の状態） */
.wht{ transition:height .35s ease }
.wht.is-open{ height:68.3rem }

.wht__panel{
  left:2rem; top:34.9rem;
  width:33.5rem; height:5.6rem;
  background:var(--green); border-radius:.5rem;
  overflow:hidden;
  transition:height .35s ease;
}
.wht.is-open .wht__panel{ height:30rem }

.wht__toggle{
  position:absolute; left:0; top:0;
  display:flex; align-items:flex-start; justify-content:flex-start;  /* buttonは既定で内容を上下中央に置くため解除 */
  width:100%; height:5.6rem;
  padding:2rem 0 0 2rem;
  text-align:left;
  font-family:var(--sans); font-weight:500;
  font-size:1.6rem; color:#fff; line-height:1; white-space:nowrap;
}
.wht__toggle-icon{
  position:absolute; left:29.7rem; top:2.3rem;
  width:1.5rem; height:.9rem;
  transition:transform .35s ease;
}
.wht.is-open .wht__toggle-icon{ transform:scaleY(-1) }

.wht__detail{ visibility:hidden }
.wht.is-open .wht__detail{ visibility:visible }
.wht__detail > *{ position:absolute; color:#fff }

.wht__know-title{
  left:2rem; top:6.8rem;
  font-family:var(--sans); font-weight:500;
  font-size:1.5rem; line-height:1; white-space:nowrap;
}
.wht__know-body{
  left:2rem; top:9.1rem; width:29.5rem;
  font-family:var(--sans); font-weight:400;
  font-size:1.2rem; line-height:1.4;
  word-break:normal; line-break:auto;
}

.wht__pic{ top:13.5rem; width:14.6rem }
.wht__pic--after { left:2rem }
.wht__pic--before{ left:17rem }
.wht__pic figcaption{
  display:flex; align-items:center; justify-content:center;
  width:14.6rem; height:2.6rem;
  background:#fff; border-radius:.5rem .5rem 0 0;
  font-family:var(--sans); font-weight:500;
  font-size:1.4rem; color:var(--green); line-height:1; white-space:nowrap;
}
.wht__pic img{ width:14.6rem; height:10.7rem }

/* =========================================================
   術後の経過  （Figma node 140:2824 / 375 × 557）
   カード3枚のスライダー（スライド2=135:3083 / スライド3=135:3099）
   ========================================================= */
.prg{
  position:relative;
  width:37.5rem; height:55.7rem;
  background:#fff;
  overflow:hidden;
}
.prg > *{ position:absolute }

.prg__title{
  left:18.8rem; top:3.2rem;
  transform:translateX(-50%);
  width:19rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  line-height:1; white-space:nowrap;
}
.prg__title-en{
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.5rem; color:#004F3C; letter-spacing:.06rem; text-align:center;
  font-feature-settings:"palt" 1;
}
.prg__title-ja{
  font-weight:500; font-size:3.2rem; color:var(--text);
  letter-spacing:.128rem; font-feature-settings:"palt" 1;
}

/* スライダー */
.prg__viewport{
  left:2rem; top:12.7rem;
  width:33.5rem; height:34.6rem;
  overflow:hidden;
  touch-action:pan-y;
}
.prg__track{
  display:flex; width:100%; height:100%;
  transition:transform .4s ease;
}
.prg__card{
  position:relative;
  flex:0 0 100%;
  height:100%;
  background:var(--green);
  border-radius:16.7rem 16.7rem 0 0;
}
.prg__frame{                                   /* 内側の白いふち */
  position:absolute; left:.5rem; top:.6rem;
  width:32.5rem; height:33.4rem;
  border:1px solid #fff;
  border-radius:16.7rem 16.7rem 0 0;
}
.prg__num{
  position:absolute; left:16.8rem; top:4.9rem;
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  width:4rem; height:4rem;
  background:#fff; border-radius:50%;
  font-family:"Cormorant Infant",serif; font-weight:500;
  font-size:2.4rem; color:var(--green); line-height:1;
  font-feature-settings:"palt" 1;
}
.prg__label{
  position:absolute; left:16.8rem; top:9.7rem;
  transform:translateX(-50%);
  font-weight:500; font-size:2.8rem; color:#fff;
  letter-spacing:.112rem; line-height:1; white-space:nowrap;
}
.prg__photo{
  position:absolute; left:3.2rem; top:14.1rem;
  width:27.1rem; height:18.1rem;
  border-radius:1rem;
}

/* ドット */
.prg__dots{
  left:15.7rem; top:49.3rem;
  display:flex; gap:1.6rem;
}
.prg__dot{
  width:1rem; height:1rem; border-radius:50%;
  background:var(--text); opacity:.6;
}
.prg__dot.is-active{ background:var(--green); opacity:1 }

/* =========================================================
   お客様の声  （Figma node 2059:3 / 375 × 717・スライド）
   ========================================================= */
.voc{
  position:relative;
  width:37.5rem; height:71.7rem;
  background:#FEFAF6;
  overflow:hidden;
}
.voc > *{ position:absolute }

.voc__title{
  left:18.8rem; top:5.4rem;
  transform:translateX(-50%);
  width:19rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  line-height:1; white-space:nowrap;
}
.voc__title-en{
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.5rem; color:#004F3C; letter-spacing:.06rem; text-align:center;
  font-feature-settings:"palt" 1;
}
.voc__title-ja{
  font-weight:500; font-size:3.2rem; color:var(--text);
  letter-spacing:.128rem; font-feature-settings:"palt" 1;
}

.voc__viewport{
  left:2rem; top:13.9rem;
  width:33.5rem; height:48.4rem;
  overflow:hidden;
  touch-action:pan-y;
}
.voc__track{
  display:flex; height:100%;
  transition:transform .4s ease;
}
.voc-card{
  flex:0 0 100%;
  display:flex; flex-direction:column; gap:1.2rem;
  padding:1.6rem 2rem;
  background:#fff; border-radius:.5rem;
  font-family:var(--sans); color:var(--text);
}
.voc-card__head{ display:flex; align-items:center; gap:1.6rem }
.voc-card__icon{ flex:0 0 8rem; width:8rem; height:8rem }
.voc-card__meta{
  position:relative;
  width:19.9rem; padding-top:3.2rem;
}
.voc-card__age{
  position:absolute; left:0; top:.2rem;
  font-weight:700; font-size:1.5rem; line-height:1; white-space:nowrap;
}
.voc-card__stars{
  position:absolute; left:7.1rem; top:0;
  display:flex; align-items:flex-start;
}
.voc-card__stars img{ width:2rem; height:2rem }
.voc-card__lead{
  font-weight:700; font-size:1.2rem; line-height:1.4;
  word-break:normal; line-break:auto;
}
.voc-card__body{
  width:29.5rem;
  font-weight:400; font-size:1.2rem; line-height:1.5;
  word-break:normal; line-break:auto;
}

/* ドット */
.voc__dots{
  left:14.4rem; top:65.3rem;
  display:flex; gap:1.6rem;
}
.voc__dot{
  width:1rem; height:1rem; border-radius:50%;
  background:#9BBBC5; opacity:.6;
}
.voc__dot.is-active{ background:var(--green); opacity:1 }

/* =========================================================
   料金  （Figma node 140:2634 / 375 × 1131）
   背景は #426975 ＋ テクスチャの soft-light 合成を焼き込んだ1枚
   ========================================================= */
.prc{
  position:relative;
  width:37.5rem; height:113.1rem;
  background:url(../images/price/price-bg.webp) center / 37.5rem 113.1rem no-repeat;
  color:#fff;
  overflow:hidden;
}
.prc > *{ position:absolute }

.prc__title{
  left:18.8rem; top:5.4rem;
  transform:translateX(-50%);
  width:19rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  line-height:1; white-space:nowrap;
}
.prc__title-en{
  width:100%; text-align:center;
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.5rem; letter-spacing:.06rem;
  font-feature-settings:"palt" 1;
}
.prc__title-ja{
  font-weight:500; font-size:3.2rem;
  letter-spacing:.128rem; font-feature-settings:"palt" 1;
}

/* モニター価格 */
.prc__rule{ width:33.5rem; height:1px; background:#fff; opacity:.6 }
.prc__rule--1{ left:2.2rem; top:14.9rem }
.prc__rule--2{ left:1.8rem; top:18.473rem }
.prc__label{
  left:4.7rem; top:15.793rem;
  font-weight:700; font-size:1.8rem; line-height:1; white-space:nowrap;
}
.prc__num{ left:2.96429rem; top:19.9177rem; width:26.5rem; height:7rem }
.prc__tax{ left:30.4rem; top:21.549rem; font-weight:700; font-size:1.5rem; line-height:1; white-space:nowrap }
.prc__yen{ left:30.5rem; top:23.534rem; font-weight:700; font-size:2rem;   line-height:1; white-space:nowrap }

/* 料金表 */
.prc-table{
  left:2rem; top:29.5rem;
  width:33.5rem; height:24.6rem;
  background:#fff; border-radius:1rem;
  color:var(--text);
}
.prc-table > *{ position:absolute }
.prc-table__head{                                   /* .prc-table 基準（左20/上295を引く） */
  top:1.9rem; height:2.6rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--green); border-radius:.5rem;
  font-family:var(--sans); font-weight:400;
  font-size:1.4rem; color:#fff; line-height:1; white-space:nowrap;
}
.prc-table__head--1{ left:1rem;  width:15.6rem }
.prc-table__head--2{ left:17rem; width:15.5rem }

.prc-row__name,.prc-row__note,.prc-row__unit{
  font-family:var(--sans); font-weight:400;
  color:var(--text); line-height:1; white-space:nowrap;
}
.prc-row__name{ left:2.6rem; font-size:1.4rem }
.prc-row__note{ font-size:1rem }
.prc-row__unit{ font-size:1rem }
.prc-row__yen{
  transform:translateX(-50%);
  font-family:"Roboto",sans-serif; font-weight:400;
  font-size:1.6rem; color:var(--text); line-height:1;
  text-align:center; white-space:nowrap;
  font-variation-settings:"wdth" 100;
}
.prc-row__line{ width:31.5rem; height:1px; background:rgba(8,77,134,.06) }

.prc-row__name--1{ top:6.5rem }  .prc-row__note--1{ left:11.4rem; top:6.9rem }
.prc-row__yen--1{ left:22.6rem; top:6.6rem } .prc-row__unit--1{ left:25.7rem; top:6.9rem }
.prc-row__line--1{ left:1rem; top:8.9rem }

.prc-row__name--2{ top:9.9rem }
.prc-row__yen--2{ left:22.8rem; top:9.9rem } .prc-row__unit--2{ left:25.9rem; top:10.3rem }
.prc-row__line--2{ left:.7rem; top:12.3rem }

.prc-row__name--3{ top:13.3rem }
.prc-row__yen--3{ left:22.8rem; top:13.3rem } .prc-row__unit--3{ left:25.9rem; top:13.7rem }
.prc-row__line--3{ left:.7rem; top:15.7rem }

.prc-row__name--4{ top:16.7rem }  .prc-row__note--4{ left:7.1rem; top:17.1rem }
.prc-row__yen--4{ left:22.8rem; top:16.8rem } .prc-row__unit--4{ left:25.9rem; top:17.2rem }
.prc-row__line--4{ left:1rem; top:19.1rem }

.prc-row__name--5{ top:20.1rem }
.prc-row__yen--5{ left:22.8rem; top:20.1rem } .prc-row__unit--5{ left:25.9rem; top:20.5rem }
.prc-row__line--5{ left:1rem; top:22.5rem }

/* さらに割引 */
.prc-more__sub { left:10.4rem; top:61rem;   font-weight:500; font-size:2.4rem; line-height:1; white-space:nowrap }
.prc-more__main{ left:18rem;   top:59.5rem; font-weight:500; font-size:4rem;   line-height:1; white-space:nowrap }
.prc-more__slash{
  top:60.3rem; width:1.6901rem; height:3.1786rem;
  display:flex; align-items:center; justify-content:center;
}
.prc-more__slash::before{
  content:""; width:3.6rem; height:1px; background:#fff; flex:none;
}
.prc-more__slash--l{ left:7.5rem }
.prc-more__slash--l::before{ transform:rotate(62deg) }
.prc-more__slash--r{ left:27.401rem }
.prc-more__slash--r::before{ transform:rotate(118deg) }

/* 遠方割・家族割 */
.prc-disc__photo{
  width:16.8rem; height:18rem;
  border-radius:9rem 9rem 0 0;
  object-fit:cover;
}
.prc-disc__photo--far   { left:2rem;   top:67.5rem }
.prc-disc__photo--family{ left:18.7rem; top:87.1rem }

.prc-disc__label{
  display:flex; align-items:center; justify-content:center;
  padding:.8rem 1.2rem;
  background:#fff;
  font-weight:500; font-size:2.2rem; color:#004F3C;
  line-height:1; white-space:nowrap;
}
.prc-disc__label--far   { left:16.5rem; top:71.9rem }
.prc-disc__label--family{ left:2rem;    top:90.9rem }

.prc-disc__body{
  font-family:var(--sans); font-weight:400;
  font-size:1.4rem; line-height:1.4;
  word-break:normal; line-break:auto;
}
.prc-disc__body--far   { left:19.8rem; top:76.5rem; width:15.7rem }
.prc-disc__body--family{ left:2rem;    top:95.7rem; width:16.5rem }

.prc__note{
  left:2.1rem; top:106.7rem; width:31rem;
  font-family:var(--sans); font-weight:400;
  font-size:1rem; line-height:1; white-space:nowrap;
}
/* =========================================================
   施術の流れ  （Figma node 140:2580 / 375 × 2180）
   ========================================================= */
.flw{
  position:relative;
  width:37.5rem; height:218rem;
  background:#fff;
  overflow:hidden;
}
.flw > *{ position:absolute }

.flw__title{
  left:18.8rem; top:5.4rem;
  transform:translateX(-50%);
  width:19rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  line-height:1; white-space:nowrap;
}
.flw__title-en{
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.5rem; color:var(--green); letter-spacing:.06rem; text-align:center;   /* ここだけ #426975（他セクションは #004F3C） */
  font-feature-settings:"palt" 1;
}
.flw__title-ja{
  font-weight:500; font-size:3.2rem; color:var(--text);
  letter-spacing:.128rem; font-feature-settings:"palt" 1;
}

/* 各ステップ共通 */
.flw-step__photo{
  left:5.8rem; width:26rem; height:26rem;
  border-radius:16rem 16rem 0 0;
}
.flw-step__en,.flw-step__no{
  transform:translateX(-50%);
  font-family:"Cormorant Infant",serif; font-weight:500;
  color:var(--green); text-align:center; line-height:1;
  font-feature-settings:"palt" 1; white-space:nowrap;
}
.flw-step__en{ font-size:1.8rem; width:4.3rem }
.flw-step__no{ font-size:4.8rem }
.flw-step__chip{
  left:2rem;
  display:flex; align-items:center; justify-content:center;
  width:18.3rem; height:3.6rem;
  background:var(--green);
  font-weight:500; font-size:2rem; color:#fff;
  letter-spacing:.08rem; line-height:1; white-space:nowrap;
}
.flw-step__body{
  left:2rem; width:33.5rem;
  font-family:var(--sans); font-weight:400;
  font-size:1.4rem; color:var(--text); line-height:1.4;
  word-break:normal; line-break:auto;
}
.flw-step__body b{ font-weight:700; color:var(--green) }

.flw-step__photo--1{ top:16.3rem }
.flw-step__en--1{ left:5.35rem; top:14.9rem }
.flw-step__no--1{ left:5.35rem; top:16.3rem }
.flw-step__chip--1{ top:40.3rem }
.flw-step__body--1{ top:44.9rem }
.flw-step__photo--2{ top:60.3rem }
.flw-step__en--2{ left:32.15rem; top:59.0rem }
.flw-step__no--2{ left:32.3rem; top:60.4rem }
.flw-step__chip--2{ top:84.3rem }
.flw-step__body--2{ top:88.9rem }
.flw-step__photo--3{ top:102.3rem }
.flw-step__en--3{ left:5.35rem; top:100.9rem }
.flw-step__no--3{ left:5.35rem; top:102.3rem }
.flw-step__chip--3{ top:126.3rem }
.flw-step__body--3{ top:130.9rem }
.flw-step__photo--4{ top:140.2rem }
.flw-step__en--4{ left:32.15rem; top:138.9rem }
.flw-step__no--4{ left:32.35rem; top:140.3rem }
.flw-step__chip--4{ top:164.2rem }
.flw-step__body--4{ top:168.8rem }
.flw-step__photo--5{ top:180.2rem }
.flw-step__en--5{ left:5.35rem; top:178.8rem }
.flw-step__no--5{ left:5.3rem; top:180.2rem }
.flw-step__chip--5{ top:204.2rem }
.flw-step__body--5{ top:208.8rem }

/* =========================================================
   よくある質問  （Figma node 140:2503 / 展開状態は 135:882）
   アコーディオン7件。1件目のみ初期表示で開く（カンプ準拠）
   ※高さが可変なのでこのセクションだけフロー配置
   ========================================================= */
.faq{
  position:relative;
  width:37.5rem;
  padding:12.7rem 0 5.4rem;
  background:#fff;
}
.faq__title{
  position:absolute; left:calc(50% - .45rem); top:3.2rem;
  transform:translateX(-50%);
  width:19rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  line-height:1; white-space:nowrap;
}
.faq__title-en{
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.5rem; color:#004F3C; letter-spacing:.06rem; text-align:center;
  font-feature-settings:"palt" 1;
}
.faq__title-ja{
  font-weight:500; font-size:3.2rem; color:var(--text);
  letter-spacing:.128rem; font-feature-settings:"palt" 1;
}

.faq__list{
  width:34rem; margin-left:1.5rem;
  display:flex; flex-direction:column; gap:1rem;
}

.faq-item{
  border:1px solid rgba(66,105,117,.5);
  border-radius:1rem;
  padding:1rem 1.6rem;
}
.faq-item__q{
  display:flex; align-items:center; gap:.8rem;
  width:30.7rem; text-align:left;
}
.faq-item__mark{
  flex:none;
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:2.4rem; color:var(--green); letter-spacing:.024rem; line-height:1;
  font-feature-settings:"palt" 1;
}
.faq-item__text{
  /* letter-spacing は行末にも付くため、その分だけ折り返し幅を広げて
     レイアウト上は元の240pxに戻す（カンプは1行16文字） */
  flex:none; width:24.15rem; margin-right:-.15rem;
  font-family:var(--sans); font-weight:500;
  font-size:1.5rem; color:var(--text); line-height:1.4; letter-spacing:.15rem;
  font-feature-settings:"palt" 1;
  word-break:normal; line-break:auto;
}
/* ＋／− アイコン（ic:round-plus / ic:round-minus をCSSで再現） */
.faq-item__icon{
  position:relative; flex:none;
  width:3.2rem; height:3.2rem;
}
.faq-item__icon::before,
.faq-item__icon::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:1.867rem; height:.267rem; border-radius:.134rem;
  background:var(--green);
  transform:translate(-50%,-50%);
}
.faq-item__icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
  transition:transform .3s ease;
}
.faq-item.is-open .faq-item__icon::after{ transform:translate(-50%,-50%) rotate(0deg) }

.faq-item__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
}
.faq-item.is-open .faq-item__panel{ grid-template-rows:1fr }
.faq-item__inner{ overflow:hidden; min-height:0 }

.faq-item__line{
  margin-top:1rem;
  width:31.1rem; height:1px;
  background:#426975; opacity:.2;
}
.faq-item__a{
  margin:1rem 0 0 auto; width:28.8rem;
  font-family:var(--sans); font-weight:400;
  font-size:1.4rem; color:var(--text); line-height:1.4; letter-spacing:.014rem;
  white-space:pre-wrap;
  word-break:normal; line-break:auto;
}

/* =========================================================
   クリニック紹介  （Figma node 140:2433 / 375 × 999）
   ========================================================= */
.cli{
  position:relative;
  width:37.5rem; height:95.4rem;   /* 受付時間・住所を1行にした分（-4.5rem）詰める */
  background:url(../images/clinic/bg.webp) center top / 37.5rem 99.9rem no-repeat;
  overflow:hidden;
}
.cli > *{ position:absolute }

.cli__title{
  left:18.8rem; top:5.4rem;
  transform:translateX(-50%);
  width:19rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  line-height:1; white-space:nowrap; color:var(--text);
}
.cli__title-en{
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.5rem; letter-spacing:.06rem; text-align:center;
  font-feature-settings:"palt" 1;            /* このセクションの英字見出しは #3C4044 */
}
.cli__title-ja{
  font-weight:500; font-size:3.2rem;
  letter-spacing:.128rem; font-feature-settings:"palt" 1;
}

.cli__photo{ left:2rem; top:14.9rem; width:33.5rem; height:18.6rem }

.cli__info{
  left:2rem; top:36.8rem; width:33.5rem;
  display:flex; flex-direction:column; gap:4rem;
}
.cli-blk{ position:relative; width:33.5rem; color:var(--text) }
.cli-blk--hours { height:5.6rem }
.cli-blk--access{ height:8.2rem }
.cli-blk--train { height:11rem }
.cli-blk--bus   { height:5.4rem }

.cli-blk__ja{
  position:absolute; left:1rem; top:0;
  font-weight:500; font-size:2rem; line-height:1; white-space:nowrap;
}
.cli-blk__en{
  position:absolute; top:.5rem;
  font-family:"Cormorant Garamond",serif; font-weight:400;
  font-size:1.4rem; letter-spacing:.056rem; line-height:1;
  text-align:center; white-space:nowrap;
  font-feature-settings:"palt" 1;
}
.cli-blk__line{
  position:absolute; left:0; top:2.8rem;
  width:33.5rem; height:1px;
  background:#004F3C; opacity:.1;
}
/* 診療受付時間 */
.cli-hours__d1{
  position:absolute; left:1rem;
  font-family:var(--sans); font-weight:400;
  font-size:1.5rem; line-height:1; white-space:nowrap;
}
.cli-hours__d1{ top:4rem }
.cli-hours__t1{
  position:absolute; left:11.3rem;
  font-family:"Roboto",sans-serif; font-size:1.5rem; line-height:1; white-space:nowrap;
  font-variation-settings:"wdth" 100;
}
.cli-hours__t1{ top:4.1rem }

/* アクセス */
.cli-access__zip,
.cli-access__addr{ position:absolute; left:1rem; font-family:var(--sans); font-weight:400; font-size:1.4rem; white-space:nowrap }
.cli-access__zip { top:4rem;   line-height:1 }
.cli-access__addr{ top:6.2rem; line-height:1.4 }

/* 電車のアクセス */
.cli-train__list{
  position:absolute; left:1rem; top:4rem; width:26.3rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.8rem;
}
.cli-train__list p{ width:100%; font-family:var(--sans); font-weight:400; font-size:1.4rem; line-height:1.4 }
.cli-train__l1{ line-height:1 !important }

/* バスのアクセス */
.cli-bus__txt{ position:absolute; left:1rem; top:4rem; width:26.3rem; font-family:var(--sans); font-weight:400; font-size:1.4rem; line-height:1 }

/* =========================================================
   フッター  （Figma node 140:2479 / 375 × 158）
   ティールの楕円は上に81px はみ出して前セクションに重なる
   ========================================================= */
.ftr{
  position:relative;
  width:37.5rem; height:15.8rem;
}
.ftr > *{ position:absolute }
.ftr__shape{
  left:-3.4rem; top:-8.1rem;
  width:45.2rem; height:41.3rem;
  background:var(--green);
  border-radius:50%;
}
.ftr__cta{
  left:18.8rem; top:3.2rem;
  transform:translateX(-50%);
  display:flex; gap:.8rem;
}
.ftr__privacy,.ftr__copy{
  font-weight:500; font-size:.8rem; color:#fff;
  line-height:1; white-space:nowrap;
}
.ftr__privacy{ left:13.9rem; top:11.9rem }
.ftr__copy   { left:7.4rem;  top:13.4rem }
.ftr__privacy a{ text-decoration:none }