@charset "UTF-8";
/* ==================================================================
   三ツ境駅前スマイル歯科 矯正LP
   ------------------------------------------------------------------
   デザイン: Figma「三ツ境駅前スマイル歯科LP」
     PC  … 260728PCdesign修正FV別 (node 89-2)   calc(1280 * var(--u))
     SP  … 260807SPdesignFV別      (node 164-3049) calc(375 * var(--u))
   トークンは docs/figma/tokens.md の抽出値に基づく。
   ================================================================== */

/* ------------------------------------------------------------ トークン */
/* ============================================================
   デザイン単位 --u
   Figmaのボードは PC 1280 と SP 375 の2枚だけ。その間を補間すると
   デザインに存在しない見た目になるため、ボードごと比例縮小する。

     〜767px      --u = 100vw / 375   SPボードを画面幅に合わせる
     768〜1279px  --u = 100vw / 1280  PCボードを画面幅に合わせて縮小
     1280px〜     --u = 1px           原寸（中央寄せ）

   CSS内の長さはすべて calc(N * var(--u)) で、N がFigmaの実寸px。
   ============================================================ */
:root { --u: 0.26666667vw; }                      /* 100 / 375 */
@media (min-width: 768px)  { :root { --u: 0.078125vw; } }   /* 100 / 1280 */
@media (min-width: 1280px) { :root { --u: 1px; } }

:root {
  /* Figma抽出色 */
  --c-ink:        #40332D;  /* 本文・見出し */
  --c-ink-soft:   #666666;
  --c-ivory:      #FDF8ED;  /* ページ背景 */
  --c-gray:       #EAE4DA;  /* お悩みセクション（Figma: #40332D 10% over ivory） */
  --c-peach:      #FDF1EB;  /* 選ばれる理由 */
  --c-blue-bg:    #F2F8FB;  /* 大人の矯正 導入 */
  --c-cream:      #FFFCF4;  /* 子どもの矯正 導入 */
  --c-white:      #FFFFFF;

  --c-blue:       #78BCD7;  /* 大人 */
  --c-blue-dark:  #4291B0;
  --c-blue-pale:  #C9E4EF;

  --c-gold:       #D7BD78;  /* 子ども */
  --c-gold-dark:  #A07D1D;
  --c-gold-pale:  #EFE5C9;
  --c-gold-light: #FFE6A0;

  --c-pink:       #E18F8F;
  --c-pink-pale:  #FDE7E7;

  --c-line:       #06C755;  /* LINEブランド色 */
  --c-line-pale:  #9BE9BB;
  --c-orange:     #E3590F;
  --c-border:     #D9D9D9;

  /* タイポ（Figma: Zen Maru Gothic / Noto Sans JP。いずれもGoogle Fonts） */
  --f-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --f-body: "Noto Sans JP", "Hiragino Sans", sans-serif;

  /* レイアウト */
  --w-container: calc(1100 * var(--u));
  --w-narrow: calc(860 * var(--u));
  --h-header: calc(50 * var(--u));
  --pad-x: calc(13 * var(--u));
  --r-md: calc(12 * var(--u));
  --r-lg: calc(24 * var(--u));
  --shadow: 0 calc(4 * var(--u)) calc(20 * var(--u)) rgba(64, 51, 45, .08);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 768px) {
  :root {
    --h-header: calc(100 * var(--u));
    --pad-x: calc(31 * var(--u));
  }
}

/* ------------------------------------------------------------ リセット */
*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }   /* フルブリード要素の右はみ出しで横スクロールさせない */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + calc(16 * var(--u)));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-ivory);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: calc(16 * var(--u));
  line-height: 1.9;
  letter-spacing: .03em;
  font-feature-settings: "palt";
  overflow-wrap: anywhere;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: calc(3 * var(--u)) solid var(--c-blue-dark); outline-offset: calc(2 * var(--u)); }

/* PC版とSP版で文言が異なる箇所の出し分け（Figma実測に基づく） */
.sp-only { display: inline; }
.pc-only { display: none; }
@media (min-width: 768px) {
  .sp-only { display: none; }
  .pc-only { display: inline; }
}

/* SP版のみ、見出しに副題が付く（Figma SP node 361-2 / 361-4）
   .sp-only より後ろに書くと打ち消してしまうので、SP幅のときだけ表示する */
@media (max-width: 767px) {
  .heading__sub { display: block; }
}

.ref { font-size: .7em; vertical-align: super; }

.note {
  margin-top: calc(12 * var(--u));
  color: #AEAEAD;
  font-size: calc(12 * var(--u));
  line-height: 1.8;
}

/* ------------------------------------------------------------ 共通レイアウト */
.container {
  width: min(100% - var(--pad-x) * 2, var(--w-container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - var(--pad-x) * 2, var(--w-narrow)); }
.container--faq { width: min(100% - var(--pad-x) * 2, calc(1097 * var(--u))); }

/* コンテナの中から全幅に広がる帯 */
/* リードの帯（見出し＋右端ボタンの基準）。背景は白のまま */
.lead-wrap { position: relative; }

/* Figma Rectangle 117/118: 特徴ブロックの背後だけのティント帯。フルブリード */
.tint {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--pad-x), calc(50vw - 550 * var(--u)));
}
.tint--blue { background: rgba(120, 188, 215, .1); padding-block: calc(33 * var(--u)) calc(36 * var(--u)); }
.tint--gold { background: rgba(255, 225, 146, .1); padding-block: calc(50 * var(--u)) calc(14 * var(--u)); }
.tint .sub-heading { margin: 0; }

.section {
  position: relative;
  padding-block: calc(56 * var(--u));
}
/* お悩み: Figma 89:84 のベクター（上下とも波形の #40332D 10% の塊）を背景にそのまま使う */
.section--gray {
  background: url("../img/deco/worry-blob.svg") center top / calc(1316 * var(--u)) calc(666 * var(--u)) no-repeat;
}
.section--white   { background: var(--c-white); }
.section--reasons { background: var(--c-peach); }

@media (min-width: 768px) {
  .section { padding-block: calc(96 * var(--u)); }
}


/* 見出し */
.heading {
  margin-bottom: calc(32 * var(--u));
  font-family: var(--f-display);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 2.222;   /* Figma: calc(80 * var(--u)) / calc(36 * var(--u)) */
  text-align: center;
  letter-spacing: .02em;
}
/* ピンクの帯に白抜き。背後に細い線が全幅で走る（Figma実測） */
.heading--band {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, calc(790 * var(--u)));
  min-height: calc(80 * var(--u));
  margin-inline: auto;
  padding-inline: calc(24 * var(--u));
  background: var(--c-pink);
  border-radius: calc(999 * var(--u));
  color: var(--c-white);
  line-height: 1.4;
}
.heading--band::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(calc(1190 * var(--u)), calc(100vw - calc(90 * var(--u))));
  height: calc(1 * var(--u));
  background: var(--c-pink);
  transform: translateX(-50%);
}

/* 見出しの左右にひし形4つ（Figma） */
.heading--diamond::before,
.heading--diamond::after {
  content: "◆◆◆◆";
  display: inline-block;
  font-size: .4em;
  letter-spacing: .35em;
  vertical-align: .3em;
}
.heading--diamond::before { margin-right: .6em; }
.heading--diamond::after  { margin-left: .6em; }
.heading--adult.heading--diamond::before,
.heading--adult.heading--diamond::after { color: var(--c-blue); }
.heading--child.heading--diamond::before,
.heading--child.heading--diamond::after { color: var(--c-gold); }

.heading--adult,
.heading--child { color: var(--c-ink); }

/* 中見出しの左右に縞模様（Figma） */
/* Figma 164:3456 / 164:3756: 細い横線5本のベクター（25x20） */
.sub-heading--stripe::before,
.sub-heading--stripe::after {
  content: "";
  display: inline-block;
  width: calc(25 * var(--u));
  height: calc(20 * var(--u));
  vertical-align: calc(2 * var(--u));
  background: url("../img/deco/stripe-blue.svg") center / contain no-repeat;
}
#child .sub-heading--stripe::before,
#child .sub-heading--stripe::after {
  background-image: url("../img/deco/stripe-gold.svg");
}
.sub-heading--stripe::before { margin-right: calc(20 * var(--u)); }
.sub-heading--stripe::after  { margin-left: calc(20 * var(--u)); }

.sub-heading {
  margin: calc(56 * var(--u)) 0 calc(24 * var(--u));
  font-family: var(--f-display);
  /* Figma 89:463 / 89:743: 2行目が36px、1行目だけ24px */
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.389;              /* Figma: 50px / 36px */
  text-align: center;
}
.sub-heading__sm { font-size: .667em; line-height: 1.875; }   /* 45px / 24px */   /* 24 / 36 */

@media (min-width: 768px) {
  .heading { margin-bottom: calc(48 * var(--u)); }
}

/* ------------------------------------------------------------ CTAボタン（共通パーツ） */
/* Figma実測: 帯 1100×calc(120 * var(--u)) / 3分割（367+366+367）/ 外側の角のみ15px
   アイコン70px / サブ20px 行間21 / メイン24px 行間30 / 注記20px / 字間1.6px */
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(27 * var(--u));
  min-height: calc(120 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-ink);
  transition: filter .25s var(--ease);
}
.cta-btn:hover { filter: brightness(1.04); }
.cta-btn__icon { flex: none; width: calc(70 * var(--u)); height: auto; }
.cta-btn__text { display: block; }
.cta-btn__sub  { display: block; font-size: calc(20 * var(--u)); line-height: 1.05; }
.cta-btn__main { display: block; font-size: calc(24 * var(--u)); line-height: 1.25; }
.cta-btn__note { display: block; font-size: calc(20 * var(--u)); line-height: 1.25; }

.cta-btn--line  { background: var(--c-line-pale); }
.cta-btn--adult { background: var(--c-blue-pale); }
.cta-btn--child { background: var(--c-gold-pale); }

/* ------------------------------------------------------------ ヘッダー */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--h-header);
  background: rgba(253, 248, 237, .6);
  backdrop-filter: blur(calc(10 * var(--u)));
}
.header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--pad-x);
}
.header__logo img { width: auto; height: calc(35 * var(--u)); }
.header__cta { display: none; }

@media (min-width: 768px) {
  .header__logo img { height: calc(60 * var(--u)); }
  .header__cta {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-left: auto;
  }
  .header__cta .cta-btn {
    gap: calc(15 * var(--u));
    min-height: 0;
    background: none;
    border-radius: 0;
    padding: 0 calc(33 * var(--u));
    border-left: calc(1 * var(--u)) solid var(--c-border);
  }
  .header__cta .cta-btn__icon { width: calc(42 * var(--u)); }
  .header__cta .cta-btn__sub,
  .header__cta .cta-btn__note { font-size: calc(14 * var(--u)); line-height: 1.4; }
  .header__cta .cta-btn__main { font-size: calc(17 * var(--u)); line-height: 1.29; }
  .header__cta .cta-btn:last-child { border-right: calc(1 * var(--u)) solid var(--c-border); }
  .header__cta .cta-btn:hover { transform: none; background: rgba(255, 255, 255, .6); }
}

/* ハンバーガー */
.menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--u));
  margin-left: auto;
  padding: calc(6 * var(--u)) calc(2 * var(--u));
}


.menu-btn__bars { display: grid; gap: calc(8 * var(--u)); width: calc(29 * var(--u)); }
@media (min-width: 768px) { .menu-btn__bars { gap: calc(13 * var(--u)); width: calc(45 * var(--u)); } }
.menu-btn__bars span {
  display: block;
  height: calc(2 * var(--u));
  background: var(--c-ink);
  transition: transform .3s var(--ease), opacity .2s linear;
}
.menu-btn__text {
  font-family: var(--f-display);
  font-size: calc(11 * var(--u));   /* PCは1024px以上で14px */
  font-weight: 700;
  letter-spacing: .1em;
}
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(calc(15 * var(--u))) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(calc(-15 * var(--u))) rotate(-45deg); }

@media (min-width: 768px) {
  .menu-btn { margin-left: calc(20 * var(--u)); }
  .menu-btn__text { font-size: calc(14 * var(--u)); }
}

/* ------------------------------------------------------------ ドロワー */
/* Figma実測（PC 361-1203）: 313×679 / 地 rgba(210,201,186,.95) / 項目18px 60px間隔 / 11pxの丸 */
.drawer {
  position: fixed;
  inset: var(--h-header) 0 0;
  z-index: 99;
  overflow-y: auto;
  background: rgba(210, 201, 186, .95);
  opacity: 0;
  transform: translateY(calc(-8 * var(--u)));
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.drawer[hidden] { display: none; }
.drawer.is-open { opacity: 1; transform: none; }

.drawer__list { display: grid; padding: calc(43 * var(--u)) calc(58 * var(--u)); }
.drawer__list li {
  opacity: 0;
  transform: translateY(calc(10 * var(--u)));
}
.drawer.is-open .drawer__list li { animation: drawer-in .45s var(--ease) forwards; }
.drawer__list a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(52 * var(--u));
  padding-left: calc(29 * var(--u));
  font-family: var(--f-display);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.667;
  color: var(--c-ink);
}
.drawer__list a::before {
  content: "";
  position: absolute;
  left: 0;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  background: url("../img/deco/menu-dot.svg") center / contain no-repeat;
}
@keyframes drawer-in { to { opacity: 1; transform: none; } }

/* PCでは右上に313px幅のパネルとして出る */
@media (min-width: 768px) {
  .drawer {
    inset: var(--h-header) 0 auto auto;
    width: calc(313 * var(--u));
    height: calc(679 * var(--u));
    overflow: hidden;
  }
  .drawer__list { padding: calc(44 * var(--u)) calc(18 * var(--u)); }
  .drawer__list a { min-height: calc(60 * var(--u)); padding-left: calc(32 * var(--u)); }
}

/* ------------------------------------------------------------ FV */
.fv {
  position: relative;
  padding-top: var(--h-header);
  overflow: hidden;
}
.fv__inner {
  position: relative;
  width: min(100%, calc(1280 * var(--u)));
  margin-inline: auto;
}
.fv__body {
  position: relative;
  z-index: 1;   /* バッジが写真の上に乗る（Figma） */
  padding: calc(32 * var(--u)) var(--pad-x) 0;
}

.fv__title {
  font-family: var(--f-display);
  font-size: calc(64 * var(--u));
  font-weight: 700;
  line-height: 1.25;   /* Figma: calc(64 * var(--u)) / calc(80 * var(--u)) */
  letter-spacing: .02em;
}
.fv__title-line1,
.fv__title-line2 { display: block; }
.fv__title-line2 em { font-style: normal; color: var(--c-pink); }

/* 見出しの上に付く装飾ドット（Zen Maru Gothic Light / #E18F8F） */
.fv__dots {
  position: absolute;
  top: calc(34 * var(--u));
  /* 「・」は字面が右寄りなため、見出しの各文字の実インク中心の真上に来るよう調整。
     送りは見出しと同じにする（Figma原本は3点目が右にずれているが意図は文字の真上） */
  left: calc(92 * var(--u));
  margin: 0;
  font-family: var(--f-display);
  font-size: calc(64 * var(--u));
  font-weight: 300;   /* Figma 89:48 */
  line-height: .55;
  letter-spacing: -.038em;   /* 送り61.5px = 文字インク間隔 */
  color: var(--c-pink);
}

.fv__lead {
  margin-top: calc(14 * var(--u));
  letter-spacing: .1em;
  font-family: var(--f-display);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.6;
}

.fv__target {
  margin-top: calc(10 * var(--u));
  font-family: var(--f-display);
  font-size: calc(39 * var(--u));
  font-weight: 700;
  letter-spacing: .1em;
  color: #666666;          /* 囲みの外の「と」「の矯正治療」 */
}
/* Figma 89:50: 文字は等間隔の1本のテキストで、楕円の帯が背後に敷かれている。
   padding で背景を広げつつ、同量の負 margin で行内の占有幅を変えない
   （文字間隔・行の右端がFigmaのまま）。擬似要素や z-index に頼らない枯れた方式 */
.fv__target-adult,
.fv__target-child {
  display: inline-block;
  /* Figma実測: 楕円は文字の左右に13/9、上下に計12の余白（65px高） */
  /* 負marginをpaddingより4小さく → 隣の文字との隙間がFigma実測の6pxになる */
  padding: calc(4 * var(--u)) calc(14 * var(--u));
  margin: calc(-4 * var(--u)) 0 calc(-4 * var(--u)) calc(-7 * var(--u));   /* 右は食い込ませない（実測合わせ） */
  border-radius: calc(999 * var(--u));
  line-height: 1.45;
  color: var(--c-white);   /* Figma実測: 囲みの中は白文字 */
}
.fv__target-adult { background: var(--c-blue); margin-right: calc(-4 * var(--u)); }   /* 「と」は左ベアリングが大きいため4食い込ませる */

.fv__target-child { background: var(--c-gold); }

/* ひし形バッジ（Figma実測: 対角175px / 中心ピッチ162px / 地色 #E2DEC1）
   rotate だけだと見た目がレイアウト幅より大きくなり隣と被るため、
   外側の箱を「対角」サイズにして、中の四角を回転させている。 */
.fv__badges {
  --badge: calc(119.5 * var(--u));
  display: flex;
  margin-top: calc(24 * var(--u));
}
.fv-badge {
  position: relative;
  flex: none;              /* 縮ませない。縮むと文字がひし形からはみ出す */
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
}
/* 中心間のピッチを対角の92.6%（162/175）にする＝設計どおりわずかに重ねる */
.fv-badge + .fv-badge { margin-left: calc(var(--badge) * -0.1865); }  /* ピッチ162 / 外接199.14 */
.fv-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(var(--badge) * 0.7030);   /* 140 / 199.14 */
  height: calc(var(--badge) * 0.7030);
  background: #E2DEC1;
  border: calc(2 * var(--u)) solid rgba(64, 51, 45, .1);
  border-radius: calc(var(--badge) * 0.1256);  /* 25 / 199.14 */
  transform: rotate(45deg);
}
.fv-badge__inner {
  position: relative;
  font-family: var(--f-display);
  font-size: calc(var(--badge) * 0.1004);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
/* Figmaでオレンジになっている行 */
.fv-badge__inner em { font-style: normal; color: var(--c-orange); }
.fv-badge__label { display: block; }
.fv-badge__value {
  display: block;
  font-size: calc(var(--badge) * 0.1004);
  color: var(--c-orange);
}
.fv-badge__value strong { font-size: calc(var(--badge) * 0.1808); font-weight: 700; }  /* 36 / 199.14 */
.fv-badge:nth-child(2) .fv-badge__inner { font-size: calc(var(--badge) * 0.0904); }
.fv-badge:nth-child(3) .fv-badge__inner { font-size: calc(var(--badge) * 0.0854); }
.fv-badge__note {
  display: block;
  font-family: var(--f-body);
  font-size: calc(var(--badge) * 0.0603);
  font-weight: 400;
  color: #695E52;
}

.fv__visual { position: relative; margin-top: calc(24 * var(--u)); }
.fv__visual img {
  width: 100%;
  aspect-ratio: 6 / 5;
  /* Figma 89:42 マスク: 左の角だけ半径100px、右は画面端まで角なし */
  border-radius: calc(100 * var(--u)) 0 0 calc(100 * var(--u));
  object-fit: cover;
}
/* 徒歩1分バッジ（Figma実測: 円190px / ピン44×55 / calc(28 * var(--u))・「1」calc(44 * var(--u))・「より」calc(24 * var(--u))） */
.fv__access {
  position: absolute;
  right: calc(16 * var(--u));
  bottom: calc(16 * var(--u));
  display: grid;
  place-content: center;
  width: calc(118 * var(--u));
  height: calc(118 * var(--u));
  padding-top: calc(30 * var(--u));
  background:
    url("../img/deco/pin.svg") center calc(16 * var(--u)) / calc(27 * var(--u)) auto no-repeat,
    url("../img/deco/fv-circle.svg") center / contain no-repeat;
  font-family: var(--f-display);
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .11em;
  text-align: center;
  white-space: nowrap;
  color: var(--c-ink);
}
.fv__access-inner { display: block; }
.fv__access strong { font-size: 1.571em; }   /* 44 / 28 */
.fv__access-sm { font-size: .857em; }        /* 24 / 28 */

@media (min-width: 768px) {
  /* Figma 89:41: 1280固定の組み。写真は右に絶対配置し、バッジは写真の上に重なる */
  .fv__inner { position: relative; min-height: calc(635 * var(--u)); }
  .fv__body {
    position: relative;
    z-index: 1;
    padding: calc(57 * var(--u)) 0 0 calc(86 * var(--u));   /* Figma: 見出しの上端157 − ヘッダー100 */
  }
  .fv__visual {
    position: absolute;
    inset: 0 0 auto auto;
    width: calc(675 * var(--u));             /* Figma マスク 605〜1280 */
    height: calc(635 * var(--u));            /* Figma 100〜735 */
    margin: 0;
  }
  .fv__visual img { width: 100%; height: 100%; aspect-ratio: auto; }
  .fv__badges {
    --badge: calc(199.14 * var(--u));
    position: relative;
    z-index: 1;
    margin: calc(18 * var(--u)) 0 0 calc(80 * var(--u));   /* Figma: target下端502 → バッジ520 / x=80 */
  }
  .fv__access {
    width: calc(190 * var(--u));
    height: calc(190 * var(--u));
    padding-top: calc(48 * var(--u));
    font-size: calc(28 * var(--u));
    right: calc(32 * var(--u));
    bottom: calc(30 * var(--u));
    background-position: center calc(22 * var(--u)), center;
    background-size: calc(44 * var(--u)) auto, contain;
  }
}

/* ------------------------------------------------------------ 1 お悩み */
/* Figma実測: カード 525×250 / 角丸20px / 見出し32px / 項目20px #666 行間41px */
.worries { display: grid; gap: calc(15 * var(--u)); }
.worry-card {
  position: relative;
  padding: calc(17 * var(--u)) 0 0;
  background: var(--c-white);
  border-radius: calc(20 * var(--u));
  min-height: calc(250 * var(--u));
}
.worry-card__title {
  font-family: var(--f-display);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 2.5;
  text-align: center;
}
.worry-card--adult .worry-card__title { color: var(--c-blue-dark); }
.worry-card--child .worry-card__title { color: var(--c-gold-dark); }

/* カードの外にはみ出す手描き風の装飾（Figma: adult=青い線 / kids=金のなぐり書き） */
.worry-card::before {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}
.worry-card--adult::before {
  left: calc(22 * var(--u));
  top: calc(-12 * var(--u));
  width: calc(78 * var(--u));
  height: calc(80 * var(--u));
  background-image: url("../img/deco/deco-lines.svg");
}
.worry-card--child::before {
  right: calc(20 * var(--u));
  top: calc(-18 * var(--u));
  width: calc(96 * var(--u));
  height: calc(71 * var(--u));
  background-image: url("../img/deco/deco-scribble.svg");
}

.worry-card__list {
  display: grid;
  padding: 0 calc(20 * var(--u)) calc(24 * var(--u));
  font-family: var(--f-display);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 2.05;   /* Figma: calc(41 * var(--u)) / calc(20 * var(--u)) */
  color: var(--c-ink-soft);
}
.worry-card__list li {
  position: relative;
  padding-left: calc(31 * var(--u));
}
.worry-card__list li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 0;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  background: url("../img/deco/check-blue.svg") center / contain no-repeat;
}
.worry-card--child .worry-card__list li::before {
  background-image: url("../img/deco/check-gold.svg");
}

.worries__lead {
  margin-top: calc(8 * var(--u));
  font-family: var(--f-display);
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 2.857;   /* Figma: calc(80 * var(--u)) / calc(28 * var(--u)) */
  text-align: center;
}
.worries__text {
  font-size: calc(18 * var(--u));
  line-height: 1.889;   /* Figma: calc(34 * var(--u)) / calc(18 * var(--u)) */
  color: var(--c-ink-soft);
  text-align: center;
}
.worries__text strong { font-weight: 700; color: var(--c-ink); }

@media (min-width: 768px) {
  .worries { grid-template-columns: 1fr 1fr; }
  .worry-card__list { padding-inline: calc(61 * var(--u)) calc(20 * var(--u)); }
}

/* ------------------------------------------------------------ 2 LINE相談 */
/* Figma実測: 見出し36px（LINEのみ40px #06C755）／キャッチ28px 行間43px／本文18px #666 行間34px */
.section--line { overflow: hidden; }

.heading__line { font-size: 1.111em; color: var(--c-line); }

/* 見出しの左右に付く三角マーク */
.heading--tri { position: relative; display: inline-block; }
.heading--tri::before,
.heading--tri::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(25 * var(--u));
  height: calc(42 * var(--u));
  margin-top: calc(-21 * var(--u));
  background-repeat: no-repeat;
  background-size: contain;
}
.heading--tri::before { right: 100%; margin-right: calc(7 * var(--u)); background-image: url("../img/deco/tri-right.svg"); }
.heading--tri::after  { left: 100%;  margin-left: calc(7 * var(--u));  background-image: url("../img/deco/tri-left.svg"); }

/* 背景の装飾（Figma: 回転したベージュの四角 / ピンクのひし形9個 / 青い渦）。PCのみ */
.line-deco { display: none; }
@media (min-width: 768px) {
  .line-deco {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
  }
  .line-deco--block {
    left: calc(-95 * var(--u));
    top: calc(117 * var(--u));     /* Figma 89:128: y=1538 − セクション1421 */
    width: calc(273 * var(--u));
    height: calc(294 * var(--u));
    background-image: url("../img/deco/line-blob-left.png");
  }
  .line-deco--diamonds {
    left: calc(100 * var(--u));
    top: calc(143 * var(--u));
    width: calc(93 * var(--u));
    height: calc(127 * var(--u));
    background-image: url("../img/deco/line-diamonds.svg");
  }
  .line-deco--swirl {
    left: calc(825 * var(--u));    /* Figma 89:161 */
    top: 0;
    width: calc(622 * var(--u));
    height: calc(426 * var(--u));
    background-image: url("../img/deco/line-blob-right.png");
  }
}

/* 見出しは中央ではなく本文カラムに揃う（Figma） */
.heading--left { left: 0; transform: none; margin-left: 0; }
@media (min-width: 768px) {
  .heading--left { margin-left: calc(62 * var(--u)); }
}

/* Figma 89:124: セクション全体で426px。本文カラム536 + 33 + 端末220 */
.line-block {
  display: grid;
  gap: 0;
  justify-content: center;
}
.line-block__body { padding-left: calc(41 * var(--u)); }   /* Figma: 本文x=295 */
.line-block__body .heading { margin-left: calc(-41 * var(--u)); margin-bottom: calc(10 * var(--u)); text-align: left; }
.line-block__catch {
  font-family: var(--f-display);
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.536;   /* Figma: calc(43 * var(--u)) / calc(28 * var(--u)) */
  letter-spacing: .05em;
}
.line-block__text {
  margin-top: calc(11 * var(--u));   /* Figma: catch下端1684 → 本文上端1695 */
  font-size: calc(18 * var(--u));
  line-height: 1.889;   /* Figma: calc(34 * var(--u)) / calc(18 * var(--u)) */
  color: var(--c-ink-soft);
}
.line-block__visual { justify-self: center; }
.line-block__visual img { width: calc(220 * var(--u)); height: auto; }

@media (min-width: 768px) {
  .line-block {
    grid-template-columns: minmax(0, calc(535 * var(--u))) calc(220 * var(--u));
    align-items: start;
    column-gap: 0;
  }
}

/* ------------------------------------------------------------ 3 選ばれる理由 */
.container--wide { width: min(100% - var(--pad-x) * 2, calc(1190 * var(--u))); }

.reason {
  display: grid;
  gap: calc(24 * var(--u));
  margin-top: calc(56 * var(--u));
  align-items: center;
}
.reason:first-of-type { margin-top: calc(48 * var(--u)); }

.reason__head {
  display: grid;
  grid-template-columns: calc(70 * var(--u)) minmax(0, 1fr);
  align-items: start;
  padding-bottom: calc(12 * var(--u));
  border-bottom: calc(3 * var(--u)) solid var(--c-pink);
}
.reason__num {
  font-family: var(--f-display);
  font-size: calc(100 * var(--u));
  font-weight: 700;
  line-height: .72;
  letter-spacing: .1em;
  color: var(--c-pink);
}
.reason__title {
  font-family: var(--f-display);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.344;   /* Figma: calc(43 * var(--u)) / calc(32 * var(--u)) */
  letter-spacing: .05em;
  color: var(--c-ink);
}
.reason__title { overflow-wrap: normal; }
/* PCではFigmaどおりの明示改行だけを使い、自動折り返しさせない */
@media (min-width: 768px) {
  .reason__title { white-space: nowrap; letter-spacing: .02em; }
}
.reason__title em { font-style: normal; color: var(--c-orange); }
@media (max-width: 767px) {
  .reason__head { grid-template-columns: calc(52 * var(--u)) minmax(0, 1fr); }
}

.reason__text {
  margin-top: calc(14 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.889;   /* Figma: calc(34 * var(--u)) / calc(18 * var(--u)) */
  color: var(--c-ink-soft);
}
.reason__text strong { font-weight: 700; color: var(--c-ink); }

/* Figma: 理由ごとに角丸と裁ち落としが違う
   1 写真なし（Figmaで非表示） / 2 角丸なし / 3 左上だけ164px・右は画面端 / 4 calc(20 * var(--u)) */
.reason__img,
.reason__badge { width: 100%; height: auto; border-radius: calc(20 * var(--u)); }
.reason:nth-of-type(2) .reason__img { border-radius: 0; }
.reason:nth-of-type(3) .reason__img { border-radius: calc(164 * var(--u)) 0 0 0; }
.reason__badge { width: calc(472 * var(--u)); margin: 0 auto calc(16 * var(--u)); border-radius: 0; }   /* Figma 89:290 認定ブロック全体 */

/* 番号付きプラン（Figma: calc(20 * var(--u)) Bold #E3590F） */
.plan-list {
  display: grid;
  gap: calc(2 * var(--u));
  margin: calc(10 * var(--u)) 0;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 2;
  color: var(--c-orange);
}


@media (min-width: 768px) {
  .reason { gap: calc(16 * var(--u)); margin-top: calc(100 * var(--u)); }
  .reason--media-left .reason__media { order: -1; }
  /* Figma実測のカラム幅（理由ごとに異なる） */
  .reason:nth-of-type(1) { grid-template-columns: minmax(0, calc(584 * var(--u))) minmax(0, calc(500 * var(--u))); }
  .reason:nth-of-type(1) .reason__title { font-size: calc(28 * var(--u)); }
  .reason:nth-of-type(2) { grid-template-columns: minmax(0, calc(482 * var(--u))) minmax(0, calc(692 * var(--u))); }
  .reason:nth-of-type(3) { grid-template-columns: minmax(0, calc(632 * var(--u))) minmax(0, calc(542 * var(--u))); }
  .reason:nth-of-type(4) { grid-template-columns: minmax(0, calc(570 * var(--u))) minmax(0, calc(590 * var(--u))); }
}

/* 実績テーブル（Figma実測: 500×508 / 白地 / 罫線1px #666666 /
   年度列の地 #F5F5F5 / 「矯正数（総数）」列の数値だけ #E3590F /
   ヘッダー行29px・計行47px・以降27px / 文字14px、計行は36・calc(30 * var(--u))） */
.record {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.record__table {
  min-width: calc(440 * var(--u));
  max-width: calc(500 * var(--u));
  background: var(--c-white);
  border-collapse: collapse;
  font-family: var(--f-display);
  font-size: calc(14 * var(--u));
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  color: var(--c-ink);
}
.record__table th,
.record__table td {
  padding: calc(3 * var(--u)) calc(4 * var(--u));
  border: calc(1 * var(--u)) solid #666666;
  line-height: 1.43;
}
.record__table thead th { height: calc(29 * var(--u)); }
/* 1列目（年度）だけ薄いグレー地 */
.record__table th:first-child,
.record__table tbody th { background: #F5F5F5; }
/* 2列目（矯正数・総数）の数値はオレンジ */
.record__table tbody td:first-of-type { color: var(--c-orange); }
.record__table tbody tr { height: calc(27 * var(--u)); }
/* 計の行だけ数字が大きい */
.record__total { height: calc(47 * var(--u)); }
.record__total td:nth-child(2) { font-size: calc(36 * var(--u)); letter-spacing: .1em; }
.record__total td:nth-child(3),
.record__total td:nth-child(4) { font-size: calc(30 * var(--u)); letter-spacing: .1em; }
.record__unit { font-size: calc(11 * var(--u)); }

/* ------------------------------------------------------------ CTA帯 */
/* Figma 89:301: 前セクション終わり→見出し 79 / 見出し20 / +34 / ボタン120 */
.cta { position: relative; padding-block: calc(79 * var(--u)) 0; }
/* 背景は場所ごと（Figma: Rect116ピンク / Rect85白 / Rect111ピンク） */
.cta--peach { background: var(--c-peach); padding-bottom: calc(70 * var(--u)); }  /* 白背景は4557から */
.cta--white { background: var(--c-white); }
.cta--rose  { background: var(--c-pink-pale); padding-bottom: calc(60 * var(--u)); }
.cta__title {
  position: relative;
  width: fit-content;
  margin: 0 auto calc(34 * var(--u));
  line-height: .625;    /* Figma 89:332: calc(20 * var(--u)) / calc(32 * var(--u)) */
  font-family: var(--f-display);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
}
.cta__title em { font-style: normal; font-size: 1.125em; }  /* OK だけ36px */

/* 見出しの左右の装飾マーク */
.cta__title::before,
.cta__title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(31 * var(--u));
  height: calc(43 * var(--u));
  margin-top: calc(-22 * var(--u));
  background-repeat: no-repeat;
  background-size: contain;
}
.cta__title::before { right: 100%; margin-right: calc(30 * var(--u)); background-image: url("../img/deco/cta-mark-left.svg"); }
.cta__title::after  { left: 100%;  margin-left: calc(30 * var(--u));  background-image: url("../img/deco/cta-mark-right.svg"); }

.cta__buttons { display: grid; }
.cta-btn__sub  { font-size: calc(14 * var(--u)); }
.cta-btn__main { font-size: calc(17 * var(--u)); }
.cta-btn__note { font-size: calc(14 * var(--u)); }
.cta__buttons .cta-btn:first-child { border-radius: calc(15 * var(--u)) calc(15 * var(--u)) 0 0; }
.cta__buttons .cta-btn:last-child  { border-radius: 0 0 calc(15 * var(--u)) calc(15 * var(--u)); }

@media (min-width: 768px) {
  .cta__buttons { grid-template-columns: 367fr 366fr 367fr; }
  .cta__buttons .cta-btn:first-child { border-radius: calc(15 * var(--u)) 0 0 calc(15 * var(--u)); }
  .cta__buttons .cta-btn:last-child  { border-radius: 0 calc(15 * var(--u)) calc(15 * var(--u)) 0; }
}

/* ------------------------------------------------------------ 4 対応可能な矯正治療 */
/* Figma実測: 写真は290×290のマスク形（角を落とした四角）／名称24px 行間34px */
.treatments {
  display: grid;
  gap: calc(30 * var(--u));
  justify-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .treatments { grid-template-columns: repeat(3, calc(290 * var(--u))); }   /* Figma: 290px 間隔30 */
  /* ラベルが円より広くても列を押し広げない（Figma: ラベルは円中心に対して左右へはみ出す） */
  .treatment { width: calc(290 * var(--u)); }
  .treatment__name {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: none;
  }
}
.treatment__media {
  display: block;
  width: min(calc(290 * var(--u)), 80vw);
  aspect-ratio: 1;
  border-radius: 50%;    /* Figma Ellipse 13〜15: 正円マスク */
  overflow: hidden;
}
.treatment__media img { width: 100%; height: 100%; object-fit: cover; }
.treatment__name {
  margin-top: calc(11 * var(--u));
  font-family: var(--f-display);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.417;   /* Figma: calc(34 * var(--u)) / calc(24 * var(--u)) */
  letter-spacing: .1em;
  text-align: center;
}
.treatment__name small { font-size: .833em; }   /* calc(20 * var(--u)) / calc(24 * var(--u)) */

/* 費用・症例の中見出しは36px（Figma実測）。.sub-heading より後ろに置く */
.sub-heading--stripe { margin: calc(40 * var(--u)) 0 calc(28 * var(--u)); font-size: calc(22 * var(--u)); }

.section__lead {
  margin-bottom: calc(40 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 2.222;   /* Figma: calc(40 * var(--u)) / calc(18 * var(--u)) */
  color: var(--c-ink-soft);
  text-align: center;
}

@media (min-width: 768px) {
}

/* ------------------------------------------------------------ 5 大人／子どもの矯正 */
/* Figma 89:425 / 89:738: 白カードは無く、セクション背景に直置き */
.lead-block { text-align: center; }
.lead-block__catch {
  font-family: var(--f-display);
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.6;
}
.lead-block__catch--gold { color: var(--c-gold); }
.lead-block__text {
  margin-top: calc(45 * var(--u));                     /* Figma: catch下端5554 → 本文上端5599 */
  font-size: calc(18 * var(--u));
  line-height: 2.222;                   /* Figma: calc(40 * var(--u)) / calc(18 * var(--u)) */
  color: var(--c-ink-soft);
  text-align: center;                   /* Figma 89:454 textAlignHorizontal=CENTER */
}
/* Figma 89:455: 260x90、見出しの帯の右端。右側は角丸なし（画面端に接する） */
.lead-block__link {
  position: absolute;
  top: calc(11 * var(--u));
  right: max(calc(50% - 50vw), calc(-90 * var(--u)));
  z-index: 2;
}
.lead-block__link a {
  display: grid;
  place-content: center;
  width: calc(260 * var(--u));
  height: calc(90 * var(--u));
  padding-right: calc(46 * var(--u));          /* 右の丸アイコンぶん */
  color: var(--c-white);
  background: var(--c-gold);
  border-radius: calc(1000 * var(--u)) 0 0 calc(1000 * var(--u));
  font-family: var(--f-display);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  transition: transform .25s var(--ease);
}
.lead-block__link a:hover { transform: translateY(calc(-2 * var(--u))); }

.feature__catch {
  font-family: var(--f-display);
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.feature__text {
  margin-top: calc(17 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 2;        /* Figma 89:757: 36px / 18px */
  color: var(--c-ink-soft);
  text-align: center;    /* Figma 89:465 / 89:757: CENTER */
}
.feature__text--tight { margin-top: calc(17 * var(--u)); line-height: 1.667; }

/* Figma 89:742: カードは無く、番号の円・見出し・本文・写真がすべて中央揃えで並ぶ */
.feature {
  margin-top: calc(28 * var(--u));   /* Figma: 前ブロック終 → 円 */
  text-align: center;
}
.feature__num {
  display: grid;
  place-content: center;
  width: calc(71 * var(--u));
  height: calc(73 * var(--u));
  margin: 0 auto;
  background: url("../img/deco/feature-num.svg") center / contain no-repeat;
  font-family: var(--f-display);
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--c-gold);
}
.feature__title {
  margin-top: calc(11 * var(--u));
  font-family: var(--f-display);
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.536;    /* Figma: 43px / 28px */
  color: var(--c-ink);
}

.therapy { display: grid; gap: calc(16 * var(--u)); margin-top: calc(20 * var(--u)); }
.therapy__item {
  padding: calc(20 * var(--u));
  background: var(--c-gold-pale);
  border-radius: var(--r-md);
}
.therapy__name {
  font-family: var(--f-display);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  color: var(--c-gold-dark);
  text-align: center;
}
.therapy__desc { margin-top: calc(8 * var(--u)); font-family: var(--f-body); font-size: calc(14 * var(--u)); font-weight: 400; color: var(--c-ink-soft); }
.therapy__list { margin-top: calc(8 * var(--u)); display: grid; gap: calc(6 * var(--u)); font-family: var(--f-body); font-size: calc(14 * var(--u)); font-weight: 400; color: var(--c-ink-soft); }
.therapy__list li { position: relative; padding-left: calc(18 * var(--u)); }
.therapy__list li::before {
  content: "";
  position: absolute;
  top: .75em;
  left: calc(2 * var(--u));
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--c-gold-dark);
}

@media (min-width: 768px) {
  .lead-block__text { font-size: calc(18 * var(--u)); text-align: center; }
  .feature__num { font-size: calc(48 * var(--u)); top: calc(-18 * var(--u)); left: calc(40 * var(--u)); }
  .feature__text { font-size: calc(18 * var(--u)); }
  .therapy { grid-template-columns: 1fr 1fr; }
}

/* データ（40% / 64%） */
.stats {
  /* Figma 89:466: 白カードは無く、セクション背景に直置き */
  margin-top: calc(27 * var(--u));   /* 見出し下端6177 → 帯上端6204 */
}
/* 「当院で矯正治療を受けた方のデータ」は水色の帯（Figma） */
.stats__caption {
  width: fit-content;
  margin-inline: auto;
  width: min(100%, calc(400 * var(--u)));   /* Figma 89:477: 400x38 */
  padding: calc(2 * var(--u)) 0;
  line-height: 1.65;         /* Figma: calc(33 * var(--u)) / calc(20 * var(--u)) */
  background: rgba(120, 188, 215, .3);
  border-radius: 0;
  color: var(--c-blue-dark);
  font-family: var(--f-display);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  text-align: center;
}
.stats__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(16 * var(--u));
  margin-top: calc(16 * var(--u));
}
.stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(21 * var(--u));   /* Figma: ラベル右端410 → 円431 */
}
/* Figma 89:470: 右の組は 円→ラベル の順（DOM順のまま） */
.stat--reverse { flex-direction: row; }

/* ドーナツグラフ：--rate に割合を入れる */
.stat__chart {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(190 * var(--u));
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  /* Figma 89:468/469: 青 #78BCD7 / 灰 #D9D9D9、内径は半径の60% */
  background: conic-gradient(var(--c-blue) var(--rate), #D9D9D9 0);
}
.stat__chart::before {
  content: "";
  position: absolute;
  inset: 20%;
  background: var(--c-white);
  border-radius: 50%;
}
.stat__chart span {
  position: relative;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-blue-dark);
}
.stat__chart small { font-size: .6em; }
.stat__chart span { font-size: calc(28 * var(--u)); line-height: 1; }
.stat__label {
  white-space: nowrap;   /* Figma 89:475: 2行固定 */
  color: var(--c-blue-dark);
  font-family: var(--f-display);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.4;
}
.stat:not(.stat--reverse) .stat__label { text-align: right; }

@media (min-width: 768px) {
  .stats__list { max-width: calc(711 * var(--u)); margin-inline: auto; gap: calc(39 * var(--u)); }   /* Figma: 280..991 */
}

/* 横並び2枚の写真（大人・子どもの矯正リード） */
/* Figma 89:460/461: 515x300 を calc(2 * var(--u)) 間隔で2枚、全体1032幅 */
.photo-pair {
  display: grid;
  gap: calc(2 * var(--u));
  margin-top: calc(25 * var(--u));
}
.photo-pair img {
  width: 100%;
  aspect-ratio: 515 / 300;
  object-fit: cover;
}
@media (min-width: 768px) {
  .photo-pair {
    grid-template-columns: 1fr 1fr;
    width: min(100%, calc(1032 * var(--u)));
    margin-inline: auto;
  }
}

.feature__img {
  display: block;
  width: calc(606 * var(--u));    /* Figma 89:778 */
  max-width: 100%;
  margin: calc(24 * var(--u)) auto 0;
  aspect-ratio: 606 / 300;
  object-fit: cover;
}
.therapy__img {
  width: 100%;
  margin-top: calc(12 * var(--u));
  border-radius: calc(8 * var(--u));
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--c-white);
}

/* ------------------------------------------------------------ 症例（SPのみスライダー） */
/* PCでは overflow を切らない（CASEバッジがカード外に-19/-10はみ出すため）。
   SPのスライダー時のみ横スクロールにする */
.cases__viewport { overflow: visible; }
.cases__track { display: grid; gap: calc(20 * var(--u)); }

/* ------------------------------------------------------------
   症例カード
   Figma 89:495（case1）の実測に合わせている。カード540x520 を基準に、
   カード内座標をそのまま px で置いている。数値を変えるときは
   docs/figma/raw/pc-89-2.json を確認すること。
   ------------------------------------------------------------ */
.case {
  position: relative;
  /* 上30 / 左右39 / 下19（カード540 → 内側462） */
  padding: calc(30 * var(--u)) calc(39 * var(--u)) calc(19 * var(--u));
  background: rgba(120, 188, 215, .2);   /* Figma 89:496 */
  border-radius: calc(10 * var(--u));
}

/* CASEバッジ：151pxのベクターがカード左上から -35 / -41 はみ出す */
.case__num {
  position: absolute;
  /* Figma 89:498 の absoluteRenderBounds: 102.5x109.3、カード左上から -10 / -19 */
  top: calc(-19 * var(--u));
  left: calc(-10 * var(--u));
  width: calc(102.5 * var(--u));
  height: calc(109.3 * var(--u));
  background: url("../img/deco/case-badge.svg") left top / 100% 100% no-repeat;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-white);
  line-height: 1;
  pointer-events: none;
}
/* 文字はバッジの左上寄り（Figma実測: 中心x=41 / CASEの上端y=50） */
.case__label,
.case__no { display: block; text-align: center; line-height: 1; }
.case__label { padding-top: calc(24 * var(--u)); font-size: calc(15 * var(--u)); letter-spacing: .1em; }
.case__no    { margin-top: calc(6 * var(--u)); font-size: calc(48 * var(--u)); letter-spacing: 0; }

/* 見出しはバッジの右（カード内 x=114 → 内側基準 calc(75 * var(--u))） */
/* Figma 89:501/89:529: カード中央・高さ50pxの帯。2行のときは上下にはみ出して中心を保つ */
.case__title {
  margin: 0;
  height: calc(50 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #4291B0;
  font-family: var(--f-display);
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.25;    /* Figma 89:529: 2行タイトルは 70px / 2行 = 35px */
}

/* 写真は 200x130 が28px間隔。内側462の中央に428幅で置く */
.case__images {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(28 * var(--u));
  width: min(100%, calc(428 * var(--u)));
  margin: calc(14 * var(--u)) auto 0;   /* Figma: 見出し下端80 → 写真上端94 */
}
.case__images img {
  width: 100%;
  aspect-ratio: 200 / 130;   /* Figma 89:503 */
  border-radius: calc(8 * var(--u));
  object-fit: cover;
}
.case__images figcaption {
  margin-top: calc(1 * var(--u));
  line-height: 1.3;
  font-family: var(--f-display);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  color: #85ABBA;
  text-align: center;
}
/* 写真のあいだの三角（Figma 89:518: 20x50 / #78BCD7 70%） */
.case__images::after {
  content: "";
  position: absolute;
  top: calc(40 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: calc(20 * var(--u));
  height: calc(50 * var(--u));
  background: rgba(120, 188, 215, .7);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 項目：ラベルの丸ピルと値は同じ行。区切りは値の側だけ白い1px */
.case__data { margin: calc(24 * var(--u)) 0 0; }   /* Figma: 写真下端242 → 項目上端266 */
.case__data > div {
  display: grid;
  grid-template-columns: calc(140 * var(--u)) minmax(0, 1fr);
  column-gap: calc(21 * var(--u));
}
.case__data > div + div { margin-top: calc(15 * var(--u)); }   /* Figma: 7178→7193 */
.case__data dt {
  align-self: start;
  padding: calc(4 * var(--u)) 0;
  background: var(--c-white);
  border-radius: calc(54 * var(--u));        /* Figma 89:504 */
  color: #85ABBA;
  font-family: var(--f-display);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.067;
  text-align: center;
}
.case__data dd {
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.2;              /* Figma: lineHeightPx 18 */
  color: var(--c-ink-soft);
  border-bottom: calc(1 * var(--u)) solid var(--c-white);   /* Figma 89:519: 白い罫は値の側だけ */
}
/* リスク・副作用の本文だけ14px（Figma 89:514） */
.case__data > div:last-child dd { font-size: calc(14 * var(--u)); }
.case__data dd .t-13 { font-size: calc(13 * var(--u)); }

/* 子どもの症例はベージュ系（Figma実測） */
#child .case { background: rgba(255, 230, 160, .3); }   /* Figma 89:796 */
#child .case__title { color: var(--c-gold-dark); }
#child .case__images figcaption,
#child .case__data dt { color: #AA9E86; }
#child .case__images::after { background: rgba(215, 189, 120, .7); }
#child .case__num { background-image: url("../img/deco/case-badge-blue.svg"); }   /* Figma 89:798 */

.cases__controls { display: none; }

@media (max-width: 767px) {
  .cases__viewport {
    overflow-x: auto;
    padding-top: calc(14 * var(--u));   /* バッジのはみ出し分（SPは-12） */
    margin-top: calc(-14 * var(--u));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
  }
  .cases__viewport::-webkit-scrollbar { display: none; }
  .cases__track {
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    justify-content: start;
  }
  .case { scroll-snap-align: center; }

  /* Figma 164:3446: 矢印34pxはカード左右端に重なる（x=5/x=337・y=8391） */
  .cases { position: relative; }
  .cases__controls {
    display: contents;
  }
  .cases__arrow {
    position: absolute;
    top: calc(189 * var(--u));   /* カード上端8202 → 矢印8391 */
    z-index: 3;
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: var(--shadow);
  }
  .cases__arrow--prev { left: calc(-10 * var(--u)); }
  .cases__arrow--next { right: calc(-10 * var(--u)); }
  .cases__dots { position: absolute; left: 0; right: 0; bottom: calc(-26 * var(--u)); display: flex; justify-content: center; gap: calc(6 * var(--u)); }
  .cases__arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    border-top: calc(2 * var(--u)) solid var(--c-blue-dark);
    border-right: calc(2 * var(--u)) solid var(--c-blue-dark);
    transform: translateX(calc(2 * var(--u))) rotate(-135deg);
  }
  .cases__arrow--next::before { transform: translateX(calc(-2 * var(--u))) rotate(45deg); }
  .cases__arrow[disabled] { opacity: .3; }

  .cases__dots { display: flex; gap: calc(8 * var(--u)); }
  .cases__dot {
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    padding: 0;
    border-radius: 50%;
    background: var(--c-border);
    transition: width .3s var(--ease), background-color .3s var(--ease);
  }
  .cases__dot[aria-selected="true"] {
    width: calc(24 * var(--u));
    border-radius: calc(999 * var(--u));
    background: var(--c-blue);
  }
}

@media (min-width: 768px) {
  .cases__track { grid-template-columns: repeat(2, 1fr); gap: calc(20 * var(--u)); }   /* Figma: 540+20+540 */
}

/* ------------------------------------------------------------ 費用 */
/* Figma 89:607: 白カードは無い。幅785でセンター、表→17→黄帯 */
.price {
  display: grid;
  gap: calc(17 * var(--u));
  width: min(100%, calc(785 * var(--u)));
  margin-inline: auto;
}
/* 左列＝グレー地に白文字、右列＝アイボリー地（Figma実測） */
.price__table {
  border-collapse: separate;
  border-spacing: 0 calc(5 * var(--u));   /* Figma: 行間5px */
  margin-block: calc(-5 * var(--u));
}
.price__table th,
.price__table td {
  height: calc(80 * var(--u));            /* Figma: 大人 80/200/80、子ども 66/72/86 */
  padding: calc(8 * var(--u)) calc(36 * var(--u));
  text-align: left;
  vertical-align: middle;
}
#adult .price__table tr:nth-child(2) th,
#adult .price__table tr:nth-child(2) td { height: calc(200 * var(--u)); }
#child .price__table th, #child .price__table td { height: calc(66 * var(--u)); }
#child .price__table tr:nth-child(2) th, #child .price__table tr:nth-child(2) td { height: calc(72 * var(--u)); }
#child .price__table tr:nth-child(3) th, #child .price__table tr:nth-child(3) td { height: calc(86 * var(--u)); }
.price__table th {
  width: calc(280 * var(--u));
  background: #C0C0C0;
  color: var(--c-ivory);
  font-family: var(--f-display);
  font-size: calc(20 * var(--u));
  font-weight: 700;
}
.price__table td { background: #FCF8ED; }
.price__value {
  font-family: var(--f-display);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  color: var(--c-ink-soft);
}
.price__value--multi { font-size: calc(15 * var(--u)); line-height: 1.8; }
.price__note {
  margin-top: calc(6 * var(--u));
  color: #AEADAC;
  font-size: calc(12 * var(--u));
  line-height: 1.7;
}

/* 「総額提示制」の黄色帯。左に見出し、区切り線、右にチェック付きの内訳（Figma） */
.price__included {
  display: grid;
  gap: calc(14 * var(--u));
  min-height: calc(110 * var(--u));      /* Figma Rectangle 99: 785x110 */
  align-content: center;
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  background: #FFE192;
  border-radius: 0;
}
.price__included-title {
  font-family: var(--f-display);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
.price__included-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8 * var(--u)) calc(18 * var(--u));
}
.price__included-list li {
  position: relative;
  padding-left: calc(31 * var(--u));   /* チェック23 + 8 */
  font-family: var(--f-display);
  font-size: calc(18 * var(--u));
  font-weight: 700;
}
.price__included-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  margin-top: calc(-12 * var(--u));
  /* Figma 89:643: 白地に青 #4291B0 のチェック（ベクター書き出し） */
  background: url("../img/deco/price-check.svg") center / contain no-repeat;
}

@media (min-width: 768px) {
  .price__included {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: calc(24 * var(--u));
    padding: calc(24 * var(--u)) calc(28 * var(--u));
  }
  .price__included-title {
    padding-right: calc(24 * var(--u));
    border-right: calc(1 * var(--u)) solid var(--c-gold-dark);
    text-align: left;
  }
  .price__included-list { justify-content: flex-start; }
}

/* Figma 89:663: 塗りなし・#C0C0C0の1px枠・角丸5px・785幅。見出しは中央、本文18px */
.info-card {
  width: min(100%, calc(785 * var(--u)));
  margin: calc(17 * var(--u)) auto 0;
  padding: calc(19 * var(--u)) calc(30 * var(--u)) calc(10 * var(--u));
  background: none;
  border: calc(1 * var(--u)) solid #C0C0C0;
  border-radius: calc(5 * var(--u));
}
.info-card__title {
  font-family: var(--f-display);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #85ABBA;
}
.info-card__text {
  margin-top: calc(11 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.556;   /* Figma: calc(28 * var(--u)) / calc(18 * var(--u)) */
  color: var(--c-ink-soft);
}
.info-card__text + .info-card__text { margin-top: 0; }
.info-card__note {
  margin-top: 0;
  font-size: calc(14 * var(--u));
  line-height: 1.556;
  color: var(--c-ink-soft);
}

/* Figmaでは帯ではなく、ゴールドの文字のみ */
.child-loan {
  margin-top: calc(25 * var(--u));   /* Figma: 黄帯終14356 → 14381 */
  color: var(--c-gold-dark);
  font-family: var(--f-display);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 2;
  text-align: center;
}

@media (min-width: 768px) {
  .price__table th { width: calc(280 * var(--u)); }
  .info-card { padding: calc(32 * var(--u)) calc(40 * var(--u)); }
  .info-card__text { font-size: calc(18 * var(--u)); }
}

/* ------------------------------------------------------------ 6 治療の流れ */
/* Figma実測: 4列 幅257 / 写真257×231（マスク形）/ 円110px / STEP15px・番号48px #E18F8F
   タイトル28px 行間50 / 本文14px #666 行間22 字間0.7 */
.flow { display: grid; gap: calc(40 * var(--u)); }
.flow__item { position: relative; }
.flow__media {
  display: block;
  width: 100%;
  aspect-ratio: 257 / 231;
  border-radius: calc(10 * var(--u));   /* Figma Rectangle 103: r=10 */
  overflow: hidden;
}
.flow__media img { width: 100%; height: 100%; object-fit: cover; }

/* 写真の左下に重なる円と STEP番号 */
.flow__step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: calc(12 * var(--u));      /* Figma: STEPは円上端+12 */
  width: calc(110 * var(--u));
  height: calc(110 * var(--u));
  margin: calc(-55 * var(--u)) auto 0;   /* Figma: 円上端15065 = 写真下端15120 - 55。中央寄せ */
  background: url("../img/deco/flow-circle.svg") center / contain no-repeat;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-pink);
  text-align: center;
}
.flow__step-label { display: block; font-size: calc(15 * var(--u)); line-height: 1; letter-spacing: .1em; }
.flow__step-no    { display: block; font-size: calc(48 * var(--u)); line-height: .9; letter-spacing: .1em; }

.flow__title {
  position: relative;
  z-index: 1;
  margin-top: calc(-35 * var(--u));   /* Figma: タイトル15140は円下端15175に重なる */
  font-family: var(--f-display);
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.786;
  letter-spacing: .1em;
  text-align: center;
}
.flow__text {
  margin-top: 0;
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: 1.571;
  letter-spacing: .05em;
  color: var(--c-ink-soft);
}
.flow__text + .flow__text { margin-top: calc(12 * var(--u)); }

@media (min-width: 768px) {
  .flow { grid-template-columns: repeat(4, minmax(0, calc(257 * var(--u)))); gap: calc(23 * var(--u)); justify-content: center; }
}

/* ------------------------------------------------------------ 7 FAQ */
/* Figma実測: Q行=白90px / A行=#FEF3D6 calc(163 * var(--u)) / Q・Aの頭文字50px / 質問24px / 回答20px #666
   開閉ボタン=45pxのピンク丸に白い三角 */
.faq { display: grid; gap: calc(32 * var(--u)); }   /* Figma: q1下端15829 → q2上端15861 */
.faq__item {
  overflow: hidden;
  border-radius: calc(10 * var(--u));
}
.faq__q {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(90 * var(--u));
  padding: calc(16 * var(--u)) calc(76 * var(--u)) calc(16 * var(--u)) calc(108 * var(--u));
  background: var(--c-white);
  font-family: var(--f-display);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "Q";
  position: absolute;
  left: calc(41 * var(--u));
  font-size: calc(48 * var(--u));      /* Figma 89:1049 */
  line-height: 1;
  color: var(--c-pink);
}
/* 開閉ボタン：ピンクの丸＋白い三角 */
.faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(37 * var(--u));
  width: calc(45 * var(--u));
  height: calc(45 * var(--u));
  margin-top: calc(-22 * var(--u));
  border-radius: 50%;
  background: var(--c-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 26'%3E%3Cpath d='M14.5 4 27 22H2z' fill='white'/%3E%3C/svg%3E") center / calc(20 * var(--u)) no-repeat;
  transform: rotate(180deg);
  transition: transform .3s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(0deg); }

.faq__a {
  position: relative;
  padding: calc(26 * var(--u)) calc(60 * var(--u)) calc(26 * var(--u)) calc(108 * var(--u));
  background: #FFE6A0;   /* Figma 89:1046 Rectangle 108 */
  font-size: calc(20 * var(--u));
  line-height: 1.8;
  color: var(--c-ink-soft);
}
.faq__a::before {
  content: "A";
  position: absolute;
  top: calc(22 * var(--u));
  left: calc(41 * var(--u));
  font-family: var(--f-display);
  font-size: calc(48 * var(--u));      /* Figma 89:1050 */
  font-weight: 700;
  line-height: 1;
  color: var(--c-blue);
}

@media (max-width: 767px) {
  .faq__q { padding: calc(14 * var(--u)) calc(56 * var(--u)) calc(14 * var(--u)) calc(52 * var(--u)); }
  .faq__q::before { left: calc(16 * var(--u)); font-size: calc(26 * var(--u)); }
  .faq__q::after { right: calc(12 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-top: calc(-16 * var(--u)); background-size: calc(14 * var(--u)); }
  .faq__a { padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)) calc(52 * var(--u)); }
  .faq__a::before { left: calc(16 * var(--u)); font-size: calc(26 * var(--u)); }
}

/* ------------------------------------------------------------ 8 院長メッセージ */
/* Figma実測: 地#FDE7E7 / 白カード1050×1022 角丸132px / 見出しは雲形に白文字36px
   写真292px円 / 氏名32px / 本文20px #666 行間35px / 注記12px #A3A3A3 */
.section--message {
  position: relative;
  background: var(--c-pink-pale);
  padding-block: 0 calc(40 * var(--u));
  overflow: hidden;
}
.heading--cloud {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(384 * var(--u));
  max-width: 90%;
  height: calc(103 * var(--u));
  margin: 0 auto calc(-34 * var(--u));
  padding-bottom: calc(8 * var(--u));
  background: url("../img/deco/msg-cloud.svg") center / contain no-repeat;
  color: var(--c-white);
  letter-spacing: .1em;
  line-height: 1.4;
}
.message {
  position: relative;
  padding: calc(72 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u));
  background: var(--c-white);
  border-radius: calc(60 * var(--u));
}
.message__head { display: grid; justify-items: center; gap: calc(16 * var(--u)); }
.message__photo img {
  width: min(calc(292 * var(--u)), 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
.message__name {
  font-family: var(--f-display);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 2.083;
  text-align: center;
}
.message__name strong { font-size: 1.333em; }
.message__title { font-size: .833em; line-height: 1.85; }
.message__body { margin-top: calc(32 * var(--u)); }
.message__text {
  font-size: calc(20 * var(--u));
  line-height: 1.75;
  color: var(--c-ink-soft);
}
.message__note {
  margin-top: calc(24 * var(--u));
  color: #A9A9A9;
  font-size: calc(12 * var(--u));
  line-height: 1.667;
  letter-spacing: .05em;
}

/* 背景の装飾（PCのみ） */
.msg-deco { display: none; }
@media (min-width: 768px) {
  .msg-deco {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
  }
  /* Figma 89:1093: 青い+マーク（カードの上に重なる） */
  .msg-deco--right {
    right: calc(164 * var(--u));
    top: calc(167 * var(--u));
    z-index: 2;
    width: calc(71 * var(--u));
    height: calc(133 * var(--u));
    background-image: url("../img/deco/msg-plus.svg");
  }
  /* Figma 89:1100: 左下の金の弧（カードの上に重なる） */
  .msg-deco--left {
    left: calc(-25 * var(--u));
    top: calc(824 * var(--u));
    z-index: 2;
    width: calc(212 * var(--u));
    height: calc(359 * var(--u));
    background-image: url("../img/deco/msg-arc.svg");
  }
  .message { padding: calc(96 * var(--u)) calc(115 * var(--u)) calc(56 * var(--u)); border-radius: calc(132 * var(--u)); }
  .heading--cloud { margin-bottom: calc(-33 * var(--u)); }
  #message .heading { line-height: 1.389; }
}

@media (min-width: 768px) {
  .message__head {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: calc(48 * var(--u));
  }
  .message__name { text-align: left; }
}

/* ------------------------------------------------------------ 9 医院情報 */
/* Figma実測: 左に情報・右に地図(560×425) / 表ヘッダ #E2DEC1 / 医院名は大きく */
.clinic { display: grid; gap: calc(32 * var(--u)); align-items: start; }
@media (min-width: 768px) {
  .clinic {
    grid-template-columns: calc(477 * var(--u)) calc(560 * var(--u));
    justify-content: space-between;
    gap: 0;
  }
  .clinic__map { margin-top: calc(60 * var(--u)); }   /* Figma: 地図はロゴより60下から */
}
.clinic__logo { width: min(calc(477 * var(--u)), 100%); height: auto; }
.clinic__name { margin: 0; }
.clinic__address {
  margin-top: calc(22 * var(--u));   /* Figma: 名前下端18764 → 18786 */
  color: #000000;
  font-family: var(--f-display);
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 2;
  letter-spacing: .06em;
}

.hours {
  width: min(calc(477 * var(--u)), 100%);
  color: #000000;
  margin-top: calc(14 * var(--u));   /* Figma: 住所下端18908 → 18922 */
  font-family: var(--f-display);
  font-size: calc(13 * var(--u));
  font-weight: 500;
  text-align: center;
}
.hours thead th { background: #E2DEC1; }
.hours th,
.hours td { padding: calc(9 * var(--u)) calc(4 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--c-border); }
.hours thead th { border-bottom: 0; }
.hours th { font-weight: 500; }
.hours tbody th { white-space: nowrap; }

#clinic .note { color: #9E9B94; }

.clinic__map img,
.clinic__map iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 425;
  border: 0;
  object-fit: cover;
}

@media (min-width: 768px) {
  .clinic { grid-template-columns: minmax(0, calc(538 * var(--u))) minmax(0, calc(560 * var(--u))); gap: calc(62 * var(--u)); }
}

/* ------------------------------------------------------------ ページ末尾
   Figmaにフッターは無い。SP追従CTAに被らない余白だけ確保する。 */
main { padding-bottom: calc(40 * var(--u)); }
@media (max-width: 767px) { main { padding-bottom: calc(calc(84 * var(--u)) + env(safe-area-inset-bottom)); } }

/* ------------------------------------------------------------ SP追従CTA */
/* 追従CTA（Figma 167:4183: 375x80・3等分・アイコンは透かし背景・文言前面） */
.sp-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(calc(80 * var(--u)) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.sp-cta.is-visible { transform: none; }
.sp-cta__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--c-ink);
  background-repeat: no-repeat;
  background-position: center;
}
.sp-cta__sub  { font-size: calc(11 * var(--u)); }
.sp-cta__main { font-size: calc(15 * var(--u)); }
.sp-cta__note { font-size: calc(10 * var(--u)); }
.sp-cta__btn--line {
  background-color: var(--c-line-pale);
  background-image: url("../img/icon-line.png");
  background-size: calc(50 * var(--u)) calc(50 * var(--u));
}
.sp-cta__btn--line::before {   /* アイコンを透かしに（Figmaの見え方） */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(155, 233, 187, .55);
}
.sp-cta__btn--line span { position: relative; }
.sp-cta__btn--adult {
  background-color: var(--c-blue-pale);
  background-image: url("assets/img/icon-calendar-blue.svg");
}
.sp-cta__btn--child {
  background-color: var(--c-gold-pale);
  background-image: url("assets/img/icon-calendar-gold.svg");
}
.sp-cta__btn--adult, .sp-cta__btn--child {
  background-image: none;   /* カレンダー透かしは::beforeで40% */
}
.sp-cta__btn--adult::before, .sp-cta__btn--child::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(48 * var(--u));
  height: calc(51 * var(--u));
  background: center / contain no-repeat;
  opacity: .4;
}
.sp-cta__btn--adult::before { background-image: url("../img/icon-calendar-blue.svg"); }
.sp-cta__btn--child::before { background-image: url("../img/icon-calendar-gold.svg"); }
.sp-cta__btn--adult span, .sp-cta__btn--child span { position: relative; }

@media (min-width: 768px) { .sp-cta { display: none; } }

/* ------------------------------------------------------------ スクロール演出 */
[data-reveal] {
  opacity: 0;
  transform: translateY(calc(24 * var(--u)));
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .drawer__list li { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 印刷 */
@media print {
  .header, .drawer, .sp-cta { display: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}


/* ============================================================
   文字ラン用ユーティリティ
   Figma の characterStyleOverrides から機械抽出した強調指定。
   docs/figma/spec-pc.json が根拠。目視で足さないこと。
   ============================================================ */
.t-orange     { color: var(--c-orange); }
.t-blue       { color: var(--c-blue); }
.t-blue-dark  { color: var(--c-blue-dark); }
.t-gold       { color: var(--c-gold); }
.t-gold-dark  { color: #B49453; }   /* Figma 89:743「特徴」*/
.t-11 { font-size: calc(11 * var(--u)); }
.t-14 { font-size: calc(14 * var(--u)); }
.t-32 { font-size: calc(32 * var(--u)); }
.t-48 { font-size: calc(48 * var(--u)); }

/* FV「大人と子どもの矯正治療」: 大人／子どもは白、つなぎは #666666（89:62） */
.fv__target-conn { color: #666666; }

/* 症例数見出し（89:175）: 基準32px、1,288 は48px、件も32px。いずれもオレンジ */
.reason__title--record { font-size: calc(22 * var(--u)); }
.reason__title--record .t-48 {
  font-size: calc(48 * var(--u));
}

/* リードの帯（見出し＋右端ボタン）の位置決め用 */

/* 「子どもの矯正はこちら」の丸い矢印（Figma 89:458/459） */
.lead-block__link a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(21 * var(--u));
  translate: 0 -50%;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  background: var(--c-white);
  border-radius: 50%;
}
.lead-block__link a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(31 * var(--u));
  translate: 0 -50%;
  z-index: 1;
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
  background: var(--c-gold);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.lead-block__link a { position: relative; }

/* LINEセクションの高さと配置（Figma 89:124: 1421〜1847 = calc(426 * var(--u))） */
.section--line { padding-block: calc(87 * var(--u)) calc(16 * var(--u)); }
.line-block__visual { margin-top: calc(-31 * var(--u)); }   /* Figma: 端末は見出しより31px上から */

/* ------------------------------------------------------------
   選ばれる理由：Figma 89:170 の実座標

     理由1  本文  90〜 674(584) │ 表   690〜1190(500)   下線    0〜 676
     理由2  写真  63〜 562(499) │ 本文 588〜1172(584)   下線  588〜1280
     理由3  本文  90〜 674(584) │ 写真 690〜1280(590)   下線    0〜 676
     理由4  写真  90〜 660(570) │ 本文 690〜1274(584)   下線  690〜1280

   コンテナは1100(90〜1190)だが、理由3・4は右へ、理由2の写真は左へ出る。
   1280px以上でFigmaの実寸、1024〜1279pxは比率で縮めて溢れさせない。
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  .reason { align-items: start; }
  .reason:nth-of-type(1) { width: calc(1100 * var(--u)); grid-template-columns: calc(584 * var(--u)) calc(500 * var(--u)); gap: calc(16 * var(--u)); }
  .reason:nth-of-type(2) { width: calc(1083 * var(--u)); grid-template-columns: calc(499 * var(--u)) calc(584 * var(--u)); gap: 0; }
  .reason:nth-of-type(3) { width: calc(1190 * var(--u)); grid-template-columns: calc(584 * var(--u)) calc(590 * var(--u)); gap: calc(16 * var(--u)); }
  .reason:nth-of-type(4) { width: calc(1184 * var(--u)); grid-template-columns: calc(570 * var(--u)) calc(584 * var(--u)); gap: calc(30 * var(--u)); }
  /* 理由2の写真だけコンテナより27px左へ出る（幅は変えない） */
  .reason:nth-of-type(2) .reason__media { margin-left: calc(-27 * var(--u)); margin-right: calc(27 * var(--u)); }

  /* 下線は本文のある側の画面端まで伸ばす（コンテナ端〜画面端 = 50vw-calc(550 * var(--u))） */
  .reason__head { position: relative; border-bottom: 0; }
  .reason__head::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: calc(3 * var(--u));
    background: var(--c-pink);
  }
  .reason:nth-of-type(odd)  .reason__head::after { left:  min(calc(0 * var(--u)), calc(calc(550 * var(--u)) - 50vw)); }
  .reason:nth-of-type(even) .reason__head::after { right: min(calc(0 * var(--u)), calc(calc(550 * var(--u)) - 50vw)); }
}



/* ============================================================
   clamp() から取り出したPC側の値（Figma 1280 の実寸）
   もとは SP→PC を補間していたが、ボードは2枚しかないので分けた。
   ============================================================ */
@media (min-width: 768px) {
  .heading { font-size: calc(36 * var(--u)); }
  .sub-heading { font-size: calc(36 * var(--u)); }
}

/* 一行ルールから取り出したPC側の値（Figma 1280 実寸） */
@media (min-width: 768px) {
  .cta-btn__sub { font-size: calc(20 * var(--u)); }
  .cta-btn__main { font-size: calc(24 * var(--u)); }
  .cta-btn__note { font-size: calc(20 * var(--u)); }
  .sub-heading--stripe { font-size: calc(36 * var(--u)); }
  .therapy__desc { font-size: calc(18 * var(--u)); }
  .therapy__list { font-size: calc(18 * var(--u)); }
  .price__value--multi { font-size: calc(20 * var(--u)); }
  .reason__title--record { font-size: calc(32 * var(--u)); }
}

/* ------------------------------------------------------------
   子ども特徴3の写真列（Figma 89:760〜）
   帯400x38 → 説明 → 写真308x154が2枚（間17px） → 帯 → 写真197〜199x154が3列
   ------------------------------------------------------------ */
.therapy-band {
  width: min(100%, calc(400 * var(--u)));
  margin: calc(28 * var(--u)) auto 0;
  padding: calc(2 * var(--u)) 0;
  background: rgba(215, 189, 120, .3);   /* #D7BD78 30% */
  font-family: var(--f-display);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.65;
  color: var(--c-gold-dark);
  text-align: center;
}
.tcols {
  display: grid;
  justify-content: center;
  align-items: start;
  margin-top: calc(17 * var(--u));
}
.tcols--2 {
  grid-template-columns: calc(308 * var(--u)) calc(308 * var(--u));
  gap: calc(17 * var(--u));
  margin-top: calc(25 * var(--u));   /* 説明の下端12137 → 写真12143 */
}
.tcols--3 {
  grid-template-columns: repeat(3, calc(236 * var(--u)));
  gap: calc(2 * var(--u));
  margin-top: calc(30 * var(--u));
}
.tcols img { width: 100%; height: calc(154 * var(--u)); object-fit: cover; display: block; }
.tcols--3 img { object-fit: contain; background: none; }
.tcols__white {
  display: grid;
  place-content: center;
  height: calc(154 * var(--u));
  background: var(--c-white);
}
.tcols__white img { width: calc(264 * var(--u)); height: calc(154 * var(--u)); object-fit: contain; }
.tcols figcaption {
  margin-top: calc(17 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.667;
  color: var(--c-ink-soft);
}
.tcols .t-14 { font-size: calc(14 * var(--u)); }


/* ============================================================
   セクション間の余白（Figma 89:2 の実測 y 座標から）
   共通 padding 96px をやめ、区間ごとの実寸で指定する。
   ============================================================ */
@media (min-width: 768px) {
  .section--gray {                       /* blob 775〜1441 */
    margin-top: calc(40 * var(--u));     /* FV下端735 → blob 775 */
    padding-block: calc(81 * var(--u)) calc(92 * var(--u));
  }
  .section--line { padding-block: calc(67 * var(--u)) calc(16 * var(--u)); }
  .section--reasons { padding-block: calc(97 * var(--u)) calc(79 * var(--u)); }
  #treatments { padding-block: calc(143 * var(--u)) calc(35 * var(--u)); }
  #adult { padding-block: calc(62 * var(--u)) 0; }
  #child { padding-block: calc(72 * var(--u)) 0; }
  #flow  { padding-block: calc(107 * var(--u)) calc(76 * var(--u)); }
  #faq   { padding-block: 0 calc(96 * var(--u)); }
  .section--message { padding-block: calc(111 * var(--u)) 0; }   /* ピンク上端17119 → 見出し17230 */  /* ピンク上端17119 → 白カード17247 */
  #clinic { padding-block: calc(19 * var(--u)) calc(87 * var(--u)); }
}

/* 見出し下の余白はセクションごとにFigmaの実測へ（共通48pxをやめる） */
@media (min-width: 768px) {
  #worries .heading { margin-bottom: 0; }        /* 見出し終936 → カード934 */
  .heading--diamond { margin-bottom: calc(31 * var(--u)); }
  #treatments .heading { margin-bottom: calc(20 * var(--u)); }
  #flow .heading { margin-bottom: calc(46 * var(--u)); }
  #faq .heading { margin-bottom: calc(51 * var(--u)); }
}

/* 見出しの行送り（Figma: 50px / 36px。共通の80pxは LINE 見出しなど専用） */
@media (min-width: 768px) {
  #flow .heading, #faq .heading, #treatments .heading { line-height: 1.389; }
}

/* 症例・費用見出しの上余白（Figma実測。症例カードが規定より短い分をここで吸収） */
@media (min-width: 768px) {
  #adult-cases { margin-top: calc(83 * var(--u)); }
  .price-heading { margin-top: calc(111 * var(--u)) !important; }
  .cta__buttons { margin-bottom: 0; }
}

/* CTA直前の余白はユニットごとに違う（Figma: 79 / 75 / 51 / 66） */
@media (min-width: 768px) {
  #cta-2 { padding-top: calc(75 * var(--u)); }
  #cta-3 { padding-top: calc(51 * var(--u)); }
  #cta-4 { padding-top: calc(66 * var(--u)); }
}
/* 表のセルは高さ指定が最小値扱いになるため、注記の行送りを詰めて実寸に收める */
.price__note { line-height: 1.4; }
#child .price__table th, #child .price__table td { padding-block: calc(4 * var(--u)); }

/* 治療方法セクション: 白背景の上端は巨大な楕円の弧（Figma exportの実測: Rx≈900 / Ry≈1104、
   頂点は白開始位置=セクション上端-143。左右の角にはピンクが残る） */
@media (min-width: 768px) {
  #treatments {
    position: relative;
    background: var(--c-peach);
    overflow: hidden;
  }
  #treatments::before {
    content: "";
    position: absolute;
    top: calc(22 * var(--u));      /* Figma: 白の頂点4557 = セクション上端+22 */
    left: 50%;
    translate: -50% 0;
    width: calc(1800 * var(--u));
    height: calc(2208 * var(--u));
    background: var(--c-white);
    border-radius: 50%;
  }
  #treatments .container { position: relative; }
  /* マウスピース矯正のラベル注記が3行にならないように（Figma 89:344: 391px） */
  .treatment__name small { white-space: nowrap; }
}

/* ============================================================
   SPボード（Figma 164:3049 / 375px）の実寸上書き
   ベースのCSSはPC 1280 の実寸で書かれているため、SP幅では
   ここでSPボードの値に差し替える。数値は docs/figma/spec-sp.json。
   ============================================================ */
@media (max-width: 767px) {
  /* --- FV --- */
  .fv__title { font-size: calc(40 * var(--u)); line-height: 1.2; }
  .fv__lead  { font-size: calc(18 * var(--u)); line-height: 1.444; }
  .fv__target { font-size: calc(24 * var(--u)); line-height: 1.458; }
  /* Figma SP 164:3067: ドットは見出しの真上（描画 x62..139 / y74..78） */
  /* Figma: 見出しは40px送り。点も同じ送りにして各文字の真上に置く
     （Figmaの点はls-4で3点目が8pxずれているが、意図は文字の真上） */
  .fv__dots {
    top: calc(21 * var(--u));
    /* 「・」は字面が右寄りなため、見出しの左端43から10px戻して
       各文字の実インク中心（53.0/91.5/132.0）の真上に合わせる */
    left: calc(33 * var(--u));
    font-size: calc(40 * var(--u));
    letter-spacing: 0;
  }
  /* 見出しは x52 起点（実装は本文左端21のため31px inset） */
  .fv__body { padding-left: calc(31 * var(--u)); }
  .fv__visual img { border-radius: calc(20 * var(--u)); }
  .fv__access {
    width: calc(96 * var(--u));
    height: calc(96 * var(--u));
    padding-top: calc(22 * var(--u));
    font-size: calc(14 * var(--u));
    top: 0;
    right: calc(5 * var(--u));
    bottom: auto;
    background-position: center calc(10 * var(--u)), center;
    background-size: calc(22 * var(--u)) auto, contain;
  }
  /* バッジは写真の下端に51重なり、両端は見切れる（Figma: x=-18〜390.5 / y=518） */
  .fv__badges {
    position: relative;
    z-index: 1;
    justify-content: center;
    margin: calc(-51 * var(--u)) calc(-26 * var(--u)) 0;
  }

  /* --- 見出し共通（lh はFigmaの絶対値） --- */
  .heading { font-size: calc(24 * var(--u)); line-height: calc(80 * var(--u)); }
  .heading--band { line-height: calc(30 * var(--u)); }
  .sub-heading { font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }
  .sub-heading__sm { font-size: calc(15 * var(--u)); line-height: 2; }
  .sub-heading--stripe { font-size: calc(20 * var(--u)); line-height: calc(50 * var(--u)); }

  /* --- お悩み --- */
  .worry-card__title { font-size: calc(20 * var(--u)); line-height: 1.7; }
  .worry-card__list { font-size: calc(15 * var(--u)); line-height: 1.733; }
  .worries__lead { font-size: calc(18 * var(--u)); line-height: 2.222; }
  .worries__text { font-size: calc(14 * var(--u)); line-height: 1.571; }

  /* --- LINE --- */
  .line-block__body .heading { font-size: calc(36 * var(--u)); }
  .line-block__catch { font-size: calc(20 * var(--u)); line-height: 1.55; }
  .line-block__text  { font-size: calc(14 * var(--u)); line-height: 1.786; }
  .line-block__visual img { width: calc(189 * var(--u)); }
  .line-block__body { padding-left: 0; }
  .line-block__body .heading { margin-left: 0; }

  /* --- 選ばれる理由 --- */
  .reason__title { font-size: calc(20 * var(--u)); line-height: 1.4; white-space: normal; }
  .reason__title--record { font-size: calc(28 * var(--u)); }
  .reason__title--record .t-48 { font-size: calc(40 * var(--u)); }
  .reason__text { font-size: calc(14 * var(--u)); line-height: 1.714; }
  .reason__num { font-size: calc(64 * var(--u)); }
  .plan-list { font-size: calc(15 * var(--u)); }

  /* --- CTA --- */
  .cta__title { font-size: calc(18 * var(--u)); }
  .cta-btn__sub, .cta-btn__note { font-size: calc(14 * var(--u)); }
  .cta-btn__main { font-size: calc(16 * var(--u)); }

  /* --- 治療方法 --- */
  .treatment__name { font-size: calc(24 * var(--u)); }
  .treatment__name small { font-size: calc(13 * var(--u)); white-space: normal; }
  .section__lead { font-size: calc(14 * var(--u)); }

  /* --- 大人・子どもの矯正 --- */
  .lead-block__catch { font-size: calc(20 * var(--u)); line-height: 1.4; }
  .lead-block__text { font-size: calc(14 * var(--u)); line-height: 1.714; text-align: left; }
  .lead-block__link { position: static; margin-top: calc(16 * var(--u)); text-align: center; }
  .lead-block__link a { width: calc(240 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(1000 * var(--u)); margin-inline: auto; }
  .feature__catch { font-size: calc(18 * var(--u)); line-height: 1.556; }
  .feature__text { font-size: calc(14 * var(--u)); line-height: 1.786; }
  .feature__title { font-size: calc(20 * var(--u)); line-height: 1.5; }
  .stats__caption { font-size: calc(15 * var(--u)); }
  .stat__label { font-size: calc(18 * var(--u)); }
  .stat__chart span { font-size: calc(28 * var(--u)); }
  .therapy-band { font-size: calc(16 * var(--u)); }
  .tcols figcaption { font-size: calc(13 * var(--u)); }
  .tcols .t-14 { font-size: calc(11 * var(--u)); }

  /* --- 症例カード --- */
  .case { padding: calc(24 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
  .case__num { width: calc(68 * var(--u)); height: calc(73 * var(--u)); top: calc(-12 * var(--u)); left: calc(-6 * var(--u)); }
  .case__label { padding-top: calc(16 * var(--u)); font-size: calc(10 * var(--u)); }
  .case__no { font-size: calc(32 * var(--u)); margin-top: calc(4 * var(--u)); }
  .case__title { font-size: calc(18 * var(--u)); }
  .case__images { gap: calc(16 * var(--u)); margin-top: calc(20 * var(--u)); }
  .case__images figcaption { font-size: calc(11 * var(--u)); }
  .case__data > div { grid-template-columns: calc(112 * var(--u)) minmax(0, 1fr); column-gap: calc(12 * var(--u)); }
  .case__data dt { font-size: calc(10 * var(--u)); }
  .case__data dd { font-size: calc(13 * var(--u)); line-height: 1.3; }
  .case__data dd .t-13 { font-size: calc(11 * var(--u)); }
  .case__data > div:last-child dd { font-size: calc(11 * var(--u)); }

  /* --- 費用 --- */
  .price-heading { margin-top: calc(56 * var(--u)) !important; }
  /* Figma SP 164:3574 も PC と同じ 80/200/80。列幅は111/235 */
  .price__table th, .price__table td { height: calc(80 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); }
  #adult .price__table tr:nth-child(2) th, #adult .price__table tr:nth-child(2) td { height: calc(200 * var(--u)); }
  .price__table th { width: calc(111 * var(--u)); }
  .price__table th { font-size: calc(14 * var(--u)); }
  .price__value { font-size: calc(15 * var(--u)); }
  .price__value--multi { font-size: calc(16 * var(--u)); }
  .price__note { font-size: calc(10 * var(--u)); }
  .price__included-title { font-size: calc(14 * var(--u)); }
  .price__included-list { font-size: calc(14 * var(--u)); }
  .info-card__title { font-size: calc(18 * var(--u)); }
  .info-card__text { font-size: calc(14 * var(--u)); line-height: 1.429; }
  .info-card__note { font-size: calc(12 * var(--u)); }
  .child-loan { font-size: calc(14 * var(--u)); line-height: 1.714; }

  /* --- 流れ・FAQ --- */
  #flow .heading, #faq .heading { line-height: calc(50 * var(--u)); }
  .flow__title { font-size: calc(20 * var(--u)); }
  .flow__text { font-size: calc(14 * var(--u)); line-height: 1.571; }
  .flow__step { width: calc(90 * var(--u)); height: calc(90 * var(--u)); margin-top: calc(-45 * var(--u)); padding-top: calc(10 * var(--u)); }
  .flow__step-label { font-size: calc(12 * var(--u)); }
  .flow__step-no { font-size: calc(38 * var(--u)); }
  .faq__q { font-size: calc(16 * var(--u)); }
  .faq__a { font-size: calc(14 * var(--u)); line-height: 1.429; }

  /* --- 院長・医院 --- */
  .heading--cloud { font-size: calc(24 * var(--u)); }
  .message__text { font-size: calc(14 * var(--u)); line-height: 1.571; }
  .message__note { font-size: calc(10 * var(--u)); }
  .clinic__address { font-size: calc(14 * var(--u)); line-height: 1.857; }
  .hours { font-size: calc(12 * var(--u)); }
  #clinic .note { font-size: calc(10 * var(--u)); }
}

/* ============================================================
   SPボードのセクション余白と構造（Figma 164:3049 の実測）
   ============================================================ */
@media (max-width: 767px) {
  /* FVの写真: 353x268・左右11余白・角丸20（Figma 164:3062） */
  .fv__visual { margin: calc(14 * var(--u)) calc(11 * var(--u)) 0; }
  .fv__visual img { aspect-ratio: 353 / 268; border-radius: calc(20 * var(--u)); }

  /* お悩み: SP専用のブロブ（393x700 / x=-9） */
  .section--gray {
    margin-top: 0;
    padding: calc(40 * var(--u)) 0 calc(150 * var(--u));
    background: url("../img/deco/worry-blob-sp.svg") calc(-9 * var(--u)) top / calc(393 * var(--u)) calc(700 * var(--u)) no-repeat;
  }
  .worry-card { min-height: 0; }
  .worries { gap: 0; }
  .worries__lead { margin-top: calc(16 * var(--u)); }

  /* LINE: SPは 見出し → 端末 → キャッチ → 本文 の順（Figma 164:3137） */
  .section--line { padding: 0 0 calc(40 * var(--u)); }
  .line-block { display: flex; flex-direction: column; align-items: center; }
  .line-block__body { display: contents; }
  .line-block__body .heading { order: 1; margin: 0 auto calc(20 * var(--u)); }
  .line-block__visual { order: 2; margin: 0; }
  .line-block__catch { order: 3; margin-top: calc(18 * var(--u)); text-align: center; }
  .line-block__text { order: 4; text-align: center; }

  /* 理由: 縦積み（タイトル→本文→図版）。余白はFigmaのSP実測 */
  .section--reasons { padding: 0 0 calc(46 * var(--u)); }
  .reason { margin-top: calc(30 * var(--u)); }
  .reason:first-of-type { margin-top: calc(25 * var(--u)); }

  /* CTA */
  .cta { padding-top: calc(46 * var(--u)); }
  #cta-1 { padding-bottom: calc(60 * var(--u)); }

  /* 治療方法: 円は220px縦積み（Figma 164:3361） */
  #treatments { padding: calc(93 * var(--u)) 0 calc(53 * var(--u)); }
  #treatments::before { width: calc(760 * var(--u)); height: calc(900 * var(--u)); top: calc(60 * var(--u)); }
  .treatment__media { width: calc(220 * var(--u)); max-width: none; }

  /* 大人・子ども */
  #adult { padding-top: calc(53 * var(--u)); }
  #child { padding-top: calc(60 * var(--u)); }
  .tint--blue { padding-block: calc(30 * var(--u)) calc(30 * var(--u)); }
  .tint--gold { padding-block: calc(36 * var(--u)) calc(14 * var(--u)); }
  .photo-pair { gap: calc(2 * var(--u)); margin-top: calc(20 * var(--u)); }
  .feature__img { width: 100%; }

  /* 流れ・FAQ */
  #flow { padding: calc(60 * var(--u)) 0 calc(70 * var(--u)); }
  #faq { padding: 0 0 calc(80 * var(--u)); }
  .faq { gap: calc(15 * var(--u)); }
  .faq__q { min-height: calc(70 * var(--u)); }

  /* 院長: カード317幅・写真202px（Figma 164:4058） */
  .section--message { padding-top: calc(48 * var(--u)); }
  .message__photo img { width: calc(202 * var(--u)); }
  .message { padding: calc(56 * var(--u)) calc(15 * var(--u)) calc(40 * var(--u)); border-radius: calc(60 * var(--u)); }
  #cta-4 { padding-bottom: calc(40 * var(--u)); }

  /* 医院: SPは ロゴ → 住所 → 地図 → 診療時間 → 注記（Figma 164:4120） */
  #clinic { padding: calc(43 * var(--u)) 0 calc(80 * var(--u)); }
  .clinic { display: flex; flex-direction: column; gap: 0; }
  .clinic__info { display: contents; }
  .clinic__name { order: 1; }
  .clinic__address { order: 2; margin-top: calc(14 * var(--u)); }
  .clinic__map { order: 3; margin: calc(14 * var(--u)) calc(5 * var(--u)) 0; }
  .hours { order: 4; margin-top: calc(14 * var(--u)); }
  #clinic .note { order: 5; margin-top: calc(14 * var(--u)); }
}

/* SPボード実測の追加調整（ラウンド2） */
@media (max-width: 767px) {
  /* 流れ: 写真は300x175センター・円は110（Figma 164:4000/4003） */
  .flow { gap: calc(16 * var(--u)); }
  .flow__media { width: calc(300 * var(--u)); margin-inline: auto; aspect-ratio: 300 / 175; }
  .flow__step {
    width: calc(110 * var(--u));
    height: calc(110 * var(--u));
    margin-top: calc(-55 * var(--u));
    padding-top: calc(12 * var(--u));
  }
  .flow__step-label { font-size: calc(15 * var(--u)); }
  .flow__step-no { font-size: calc(48 * var(--u)); }
  .flow__title { font-size: calc(20 * var(--u)); margin-top: calc(-40 * var(--u)); }

  /* 症例: 見出し余白（Figma: 見出し終8194 → カード8200） */
  .sub-heading--stripe { margin: calc(46 * var(--u)) 0 calc(12 * var(--u)); }

  /* CTAボタンは高さ80の縦積み（Figma 164:3315） */
  .cta-btn { min-height: calc(80 * var(--u)); padding-block: calc(10 * var(--u)); }
  .cta__title { margin-bottom: calc(24 * var(--u)); line-height: 1.4; }
}

/* SPボード実測の追加調整（ラウンド3） */
@media (max-width: 767px) {
  /* お悩み: 見出しとカードは8px重なる。カードは169/173でぴったり */
  #worries .heading { margin-bottom: calc(-8 * var(--u)); }
  .worry-card { padding: calc(10 * var(--u)) 0 calc(6 * var(--u)); }
  .section--gray { padding-bottom: calc(76 * var(--u)); }

  /* LINE: 帯直下に端末 */
  .line-block__body .heading { margin-bottom: 0; }

  /* 見出し（大人・子ども・特徴）はSPでは帯ではなく39px行 */
  .heading--diamond { line-height: 1.625; margin-bottom: calc(30 * var(--u)); }

  /* 治療 */
  .section__lead { line-height: 1.714; }

  /* 特徴（子ども）: 写真は345x171・番号円は50 */
  .feature__num { width: calc(50 * var(--u)); height: calc(51 * var(--u)); font-size: calc(26 * var(--u)); }
  .feature__img { aspect-ratio: 345 / 171; margin-top: calc(14 * var(--u)); }
  .feature__title { line-height: 1.5; margin-top: calc(10 * var(--u)); }
  .feature__text { margin-top: calc(20 * var(--u)); line-height: 1.7; }
  .therapy-band { width: min(100%, calc(315 * var(--u))); font-size: calc(16 * var(--u)); line-height: 1.85; margin-top: calc(16 * var(--u)); }
  .tcols--2 { grid-template-columns: calc(170 * var(--u)) calc(170 * var(--u)); gap: calc(4 * var(--u)); margin-top: calc(17 * var(--u)); }
  .tcols--3 { grid-template-columns: repeat(3, calc(115 * var(--u))); gap: calc(5 * var(--u)); margin-top: calc(19 * var(--u)); }
  .tcols img { height: calc(85 * var(--u)); }
  .tcols--3 img { height: calc(90 * var(--u)); }
  .tcols__white { height: calc(85 * var(--u)); }
  .tcols__white img { width: calc(146 * var(--u)); height: calc(85 * var(--u)); }
  .tcols figcaption { margin-top: calc(6 * var(--u)); line-height: 1.4; }

  /* 症例カード: 締める */
  .case__images { margin-top: calc(12 * var(--u)); }
  .case__data { margin-top: calc(16 * var(--u)); }
  .case__data > div + div { margin-top: calc(10 * var(--u)); }

  /* 費用: 複数プラン行の行送り */
  .price__value--multi { font-size: calc(16 * var(--u)); line-height: 1.25; }
  .price__note { line-height: 1.3; }

  /* CTA: アイコンを小さく（ボタン高80に収める） */
  .cta-btn__icon { width: calc(45 * var(--u)); }
}

/* SPボード実測の追加調整（ラウンド4） */
@media (max-width: 767px) {
  /* 治療: 円の間隔はラベル込みで15（Figma: 円5929→name5935→円6001） */
  .treatments { gap: calc(15 * var(--u)); }
  .treatment__name { margin-top: calc(6 * var(--u)); line-height: 1.4; }

  /* 費用: 見出し前44、表のセル詰め、info間 86/33 */
  .price-heading { margin-top: calc(44 * var(--u)) !important; }
  .price + .info-card { margin-top: calc(86 * var(--u)); }
  .info-card + .info-card { margin-top: calc(33 * var(--u)); }
  .info-card { padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); }

  /* リードまわり */
  .lead-block__text { margin-top: calc(24 * var(--u)); }
  .photo-pair li + li img { aspect-ratio: 353/205; }
}

/* SP: LINE見出しの三角は幅に含めない（36pxが1行で収まるように） */
@media (max-width: 767px) {
  .heading--tri::before, .heading--tri::after { position: absolute; top: 50%; margin-top: calc(-14 * var(--u)); width: calc(17 * var(--u)); height: calc(28 * var(--u)); }
  .heading--tri::before { right: 100%; margin-right: calc(4 * var(--u)); }
  .heading--tri::after { left: 100%; margin-left: calc(4 * var(--u)); }
  .line-block__body .heading { white-space: nowrap; letter-spacing: 0; }
  /* 治療方法のリード（SPの手動改行に合わせ、折返し中央） */
  .section__lead { text-align: center; }
}

/* SPボード実測の追加調整（ラウンド5: 忠実性の最終詰め） */
@media (max-width: 767px) {
  /* 治療方法: 見出し直下にリード（gap 0）、リード→円 21 */
  #treatments .heading { margin-bottom: 0; }
  .treatments { margin-top: calc(21 * var(--u)); }

  /* 大人・子どもリード: 「こちら」ボタンは本文の後（Figma SP 164:3392） */
  .lead-wrap { display: flex; flex-direction: column; }
  .lead-block__link { order: 9; }

  /* リード写真: SPは 353x176 ×2枚（Figma 164:3392内） */
  .photo-pair img, .photo-pair li + li img { aspect-ratio: 353 / 176; }

  /* ドーナツはSPも170px（Figma SP実測） */
  .stat__chart { width: calc(170 * var(--u)); }

  /* 症例カード内（Figma SP: 写真132x86・データ行間8） */
  .case__images img { aspect-ratio: 132 / 86; }
  .case__images figcaption { margin-top: calc(2 * var(--u)); }
  .case__data > div + div { margin-top: calc(8 * var(--u)); }

  /* 黄帯はSPでは高さ成り行き（Figma 95px） */
  .price__included { min-height: 0; padding: calc(10 * var(--u)) calc(14 * var(--u)); }
  .price__included-list { gap: calc(2 * var(--u)) calc(12 * var(--u)); }
  .price__included-title { line-height: 1.36; }

  /* 特徴タイトル（Figma: 56px / 2行 = 28px） */
  .feature__title { line-height: 1.4; }
}

/* SP: 本文の改行はPC用の<br>を使わず自動折返しにする
   （Figma SPボードの改行位置はPC版と異なり、345px幅の自然な折返しに一致するため） */
@media (max-width: 767px) {
  /* 手動改行はFigma通りに表示する。PC/SPで位置が違う箇所は
     br.pc-only / br.sp-only で個別管理（一括無効化はしない） */
}

/* SPボード実測の追加調整（ラウンド6） */
@media (max-width: 767px) {
  /* 子ども費用表: 行高はSPでは成り行き（PCの66/72/86はPC専用） */
  #child .price__table th, #child .price__table td,
  #child .price__table tr:nth-child(2) th, #child .price__table tr:nth-child(2) td,
  #child .price__table tr:nth-child(3) th, #child .price__table tr:nth-child(3) td { height: auto; }
  .price__value { font-size: calc(14 * var(--u)); }
  .price__value--multi { font-size: calc(14 * var(--u)); }

  /* 黄帯: タイトル2行+リスト3行で95px（Figma 164:3637相当） */
  .price__included { gap: calc(4 * var(--u)); }
  .price__included-list { font-size: calc(12 * var(--u)); }
  .price__included-list li { display: flex; align-items: center; gap: calc(4 * var(--u)); }
  .price__included-list img, .price__included-list li::before { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

  /* infoカードの注記 */
  .info-card__note { font-size: calc(10 * var(--u)); line-height: 1.4; }

  /* 医院: 地図は 335x254（Figma 164:4125） */
  .clinic__map { margin: calc(14 * var(--u)) calc(5 * var(--u)) 0; }
  .clinic__map img { aspect-ratio: 335 / 254; object-fit: cover; width: 100%; height: auto; }
}

/* SPボード実測の追加調整（ラウンド7・最終） */
@media (max-width: 767px) {
  /* 大人の症例見出し: tint終わり→見出し（Figma: 8109→8144だが実装tintが短い分を補正） */
  #adult-cases { margin-top: calc(144 * var(--u)); }
  /* 院長カードの下・CTA4の余白 */
  .message { padding-bottom: calc(24 * var(--u)); }
  #cta-4 { padding-bottom: calc(20 * var(--u)); }
  #clinic { padding-top: calc(24 * var(--u)); }
}

/* SP: 黄帯リストはFigma SP実測 14px（liの直書き18pxを上書き） */
@media (max-width: 767px) {
  .price__included-list li { font-size: calc(14 * var(--u)); padding-left: calc(22 * var(--u)); }
  .price__included-list li::before { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(-8 * var(--u)); }
}

/* ============================================================
   SP: 選ばれる理由の構造（Figma 164:3188〜: 番号→タイトル→図版→本文の縦積み）
   ============================================================ */
@media (max-width: 767px) {
  .reason { display: flex; flex-direction: column; }
  .reason__body { display: contents; }
  .reason__head {
    order: 1;
    position: relative;
    display: block;
    padding-bottom: calc(12 * var(--u));
    border-bottom: 0;
    text-align: center;
  }
  /* Figma SP: 各理由のタイトル下にピンクの下線（345px幅・3px）
     ※ PC側の ::after は min-width:768px 内にあり SP では content が無いので、ここで定義する */
  .reason__head::after {
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    right: auto;
    bottom: 0;
    translate: -50% 0;
    width: calc(345 * var(--u));   /* Figma Line7: x15 w345。headが縮んでもクランプしない */
    height: calc(3 * var(--u));
    background: var(--c-pink);
  }
  .reason__num {
    font-size: calc(42 * var(--u));   /* Figma: 31x58 */
    line-height: 1.4;
    text-align: center;
  }
  .reason__title { margin-top: calc(4 * var(--u)); text-align: center; white-space: normal; }
  .reason__media { order: 2; margin-top: calc(26 * var(--u)); }
  .reason__text { order: 3; text-align: left; }
  .reason__text + .reason__text { order: 4; }
  .plan-list { order: 4; }
  .plan-list + .reason__text { order: 5; }

  /* 実績表はSPボード内に収まる縮小表（Figma 164:3190: 345x351） */
  .record { overflow-x: visible; width: calc(345 * var(--u)); max-width: 100%; margin-inline: auto; }
  .reason__media { width: 100%; }
  .record__table {
    min-width: 0;
    width: 100%;
    max-width: none;
    font-size: calc(12 * var(--u));
    letter-spacing: 0;
  }
  .record__table th, .record__table td { padding: calc(3 * var(--u)) calc(2 * var(--u)); }
  .record__unit { font-size: calc(9 * var(--u)); }
}

/* ============================================================
   SP: お悩みカード・LINE見出し（Figma 164:3100 / 164:3179 実測）
   ============================================================ */
@media (max-width: 767px) {
  /* カード339px・チェック12.9px・項目テキストはカード左42から幅281 */
  .worry-card { width: min(100%, calc(339 * var(--u))); margin-inline: auto; padding: calc(8 * var(--u)) 0 calc(10 * var(--u)); }
  .worry-card__title { font-size: calc(20 * var(--u)); }
  .worry-card__list { padding-inline: calc(23 * var(--u)) calc(12 * var(--u)); }
  .worry-card__list li { padding-left: calc(19 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.733; }
  .worry-card__list li::before { width: calc(13 * var(--u)); height: calc(13 * var(--u)); top: calc(6 * var(--u)); }

  /* LINE見出し: 1行で375内に収める（Figma: インク幅304） */
  .line-block__body .heading { font-size: calc(28 * var(--u)); letter-spacing: 0; }   /* Figma実測: 文字インク286px/10字 */
  .line-block__body .heading .heading__line { font-size: 1em; }
}

/* SP: お悩みカードの装飾位置・項目の折返し禁止・LINE見出し幅（Figma実測ラウンド2） */
@media (max-width: 767px) {
  .worry-card__list li { white-space: nowrap; }
  /* 青い線: カード左上 (14,-8)・50x52 ／ 金のなぐり書き: 右上 (264,-12)・62x46 */
  .worry-card--adult::before { left: calc(14 * var(--u)); top: calc(-8 * var(--u)); width: calc(50 * var(--u)); height: calc(52 * var(--u)); }
  .worry-card--child::before { right: calc(-7 * var(--u)); top: calc(-12 * var(--u)); width: calc(62 * var(--u)); height: calc(46 * var(--u)); }
  /* LINE見出し: 半角のLINEだけ幅を絞って375内に収める（Figmaのインク幅304） */
  .line-block__body .heading .heading__line { font-size: .85em; }
}

/* SP: CTAボタン1行化・プランリスト（Figma実測ラウンド3） */
@media (max-width: 767px) {
  .cta-btn__note { display: inline; }   /* Figma: 「成人精密検査(13歳以上)」は1行 */
  .cta-btn__main { display: inline; }
  .cta-btn__sub { margin-bottom: calc(2 * var(--u)); }
  .plan-list { font-size: calc(13 * var(--u)); line-height: 1.9; gap: 0; }
}

/* SP: データのドーナツは円141px・ラベルは円の下（Figma 164 実測: 円(33,7603)/(202,7603)） */
@media (max-width: 767px) {
  .stats__list { grid-template-columns: calc(141 * var(--u)) calc(141 * var(--u)); gap: calc(28 * var(--u)); justify-content: center; }
  .stat, .stat--reverse { flex-direction: column; gap: calc(8 * var(--u)); }
  .stat { display: flex; }
  .stat .stat__label { order: 2; }   /* SPは両組とも 円の下にラベル */
  .stat .stat__chart { order: 1; }
  .stat__chart { width: calc(141 * var(--u)); }
  .stat__label { white-space: nowrap; font-size: calc(18 * var(--u)); text-align: center !important; }
  .stat:not(.stat--reverse) .stat__label { text-align: center; }

  /* 「子どもの矯正はこちら」ボタン（Figma SP: 215x50・15px） */
  .lead-block__link a {
    width: calc(215 * var(--u));
    height: calc(50 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: 1.2;
    padding-right: calc(36 * var(--u));
  }
  .lead-block__link a::after { width: calc(30 * var(--u)); height: calc(30 * var(--u)); right: calc(12 * var(--u)); }
  .lead-block__link a::before { width: calc(14 * var(--u)); height: calc(14 * var(--u)); right: calc(20 * var(--u)); }

  /* 大人リードキャッチのSP改行（3行）は下のHTML側br.sp-onlyで */
}

/* ============================================================
   SP 実機指摘の修正（2026-08-22 / Figma SP実測）
   ============================================================ */
@media (max-width: 767px) {
  /* #55 セラピー写真のキャプションは列幅をはみ出して中央（Figma: 列115に対して幅145） */
  /* キャプションは列幅をはみ出して中央（gridの列を広げないようtransformで配置） */
  .tcols figure { display: block; }
  .tcols figcaption {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: none;
  }
  /* Figma 164:3732: マウスピース矯正の注記は 13px/lh30・幅145で3行 */
  .tcols--3 figcaption { line-height: 2.3; }
  .tcols--3 .t-14 { font-size: calc(13 * var(--u)); line-height: 2.3; }

  /* #57 黄帯のチェックリストは左揃え2列（Figma: x45/x194 の2列×3行） */
  .price__included-list {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    column-gap: calc(45 * var(--u));
    row-gap: calc(4 * var(--u));
  }

  /* #58 症例タイトルはバッジ図形より前面 */
  .case__title { position: relative; z-index: 1; }

  /* #59 「子どもの矯正はこちら」は右端・写真に13px重なる（Figma: (195,6997) 180x45） */
  /* Figma 164 SP: anker(195,6997) 180x45。写真(17,7029)に13px重なる。
     .photo-pair は .lead-wrap の外側にあるため、負marginは lead-wrap 自身に掛ける */
  .lead-block__link {
    order: 9;
    align-self: flex-end;
    margin: calc(28 * var(--u)) 0 0 0;   /* Figma: 本文下端6969 → ボタン6997 */
    position: relative;
    z-index: 2;
  }
  #adult .lead-wrap, #child .lead-wrap { margin-bottom: 0; }
  /* ボタンは lead-wrap から11pxはみ出す（flex-end + 高さ47）。
     写真は「ボタン下端の13px上」に来るよう、はみ出し分を足して相殺する */
  #adult .photo-pair, #child .photo-pair { margin-top: calc(-2 * var(--u)); position: relative; }
  .lead-block__link a {
    width: calc(180 * var(--u));
    height: calc(45 * var(--u));
    font-size: calc(13 * var(--u));
    border-radius: calc(1000 * var(--u)) 0 0 calc(1000 * var(--u));
    margin: 0;
  }

  /* #60 LINE端末はどの環境でも中央（Safariのdisplay:contents+order対策で明示センタリング） */
  .line-block__visual { width: 100%; display: flex; justify-content: center; }

  /* #61 #62 お悩みカードの間隔12px（Figma: adultカード下端919 → kidsカード931） */
  .worries { gap: calc(12 * var(--u)); }
}

/* ============================================================
   SP 理由セクションの寸法（Figma 164:3188〜 実測 / 2026-08-22）
     番号64px lh43 → タイトル20px lh26〜30 → 図版 → 本文14px lh24
     理由1の表は 345x351（17行なので1行あたり約19px）
   ============================================================ */
@media (max-width: 767px) {
  .reason__num { font-size: calc(64 * var(--u)); line-height: .67; }   /* Figma: 64px / h58 */
  .reason__title { font-size: calc(20 * var(--u)); line-height: 1.4; margin-top: calc(10 * var(--u)); }
  /* 理由タイトルはFigma SPの行数に合わせる（PC用<br>を無効化し自動折返し）
     Figma: 理由1=1行43 / 理由2=2行56 / 理由3=2行60 / 理由4=2行67 */
  /* 理由タイトルの改行はPC/SP共通（Figma実測） */
  /* 理由1「矯正治療症例1,288件の実績」はFigma SPでは1行（幅305px / 28px） */
  .reason:nth-of-type(1) .reason__title { line-height: 1.54; white-space: nowrap; font-size: calc(25 * var(--u)); }
  .reason:nth-of-type(1) .reason__title .t-48 { font-size: calc(25 * var(--u)); }
  .reason:nth-of-type(2) .reason__title,
  .reason:nth-of-type(3) .reason__title,
  .reason:nth-of-type(4) .reason__title { line-height: 1.5; }
  .reason:nth-of-type(1) .reason__title { font-size: calc(28 * var(--u)); line-height: 1.54; }
  .reason__title--record .t-48 { font-size: calc(28 * var(--u)); }
  .reason__text { font-size: calc(14 * var(--u)); line-height: 1.714; }   /* Figma lh24 */
  .reason__text + .reason__text { margin-top: 0; }   /* Figmaは1テキストノード */
  .reason__media { margin-top: calc(26 * var(--u)); }   /* Figma: タイトル下端2189 → 表2215 */
  /* Figma: 図版下端 → 本文 = 17px、理由ブロック間 = 30px */
  .reason__media + .reason__text, .reason__body .reason__text:first-of-type { margin-top: calc(17 * var(--u)); }
  .reason { margin-top: calc(30 * var(--u)); }
  .reason:first-of-type { margin-top: calc(25 * var(--u)); }

  /* 実績表: 全体351px（17行）に収める */
  .record__table { font-size: calc(11 * var(--u)); }
  .record__table th, .record__table td { padding: calc(1 * var(--u)) calc(2 * var(--u)); line-height: 1.5; }
  .record__table thead th { padding-block: calc(3 * var(--u)); }
  .record__total th, .record__total td { padding-block: calc(4 * var(--u)); }
  /* PCの固定行高・特大フォントを解除（Figma SP: 表全体351px / 17行） */
  .record__table thead th { height: auto; }
  .record__table tbody tr { height: auto; }
  .record__total { height: auto; }
  .record__total td:nth-child(2) { font-size: calc(18 * var(--u)); }
  .record__total td:nth-child(3),
  .record__total td:nth-child(4) { font-size: calc(15 * var(--u)); }
  .record__unit { font-size: calc(8 * var(--u)); }
}

/* ============================================================
   SP 症例カード（Figma 164:3446 実測 / 2026-08-22）
     カード332x345（x22起点）・バッジ93 (-21,-25)
     タイトル8244(30) 写真123x80@8285 Before/After8365(11)
     項目: ピル86x15（x46）/ 値x145 幅164〜184 / 行間25
   ============================================================ */
@media (max-width: 767px) {
  .cases__track { grid-auto-columns: calc(332 * var(--u)); }
  .case {
    padding: calc(17 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u));
    border-radius: calc(10 * var(--u));
  }
  .case__num { width: calc(93 * var(--u)); height: calc(93 * var(--u)); top: calc(-25 * var(--u)); left: calc(-21 * var(--u)); }
  .case__label { padding-top: calc(28 * var(--u)); font-size: calc(10 * var(--u)); }
  .case__no { font-size: calc(24 * var(--u)); margin-top: calc(6 * var(--u)); }
  .case__title { height: calc(30 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.4; }
  .case__images {
    width: min(100%, calc(263 * var(--u)));
    gap: calc(17 * var(--u));
    margin-top: calc(28 * var(--u));
  }
  .case__images img { aspect-ratio: 123 / 80; }
  .case__images::after { width: calc(12 * var(--u)); height: calc(31 * var(--u)); top: calc(24 * var(--u)); }
  .case__images figcaption { margin-top: calc(0 * var(--u)); font-size: calc(11 * var(--u)); }
  .case__data { margin-top: calc(14 * var(--u)); }
  .case__data > div { grid-template-columns: calc(86 * var(--u)) minmax(0, 1fr); column-gap: calc(13 * var(--u)); }
  .case__data > div + div { margin-top: calc(10 * var(--u)); }
  .case__data dt { padding: calc(2 * var(--u)) 0; font-size: calc(10 * var(--u)); line-height: 1.1; }
  .case__data dd { font-size: calc(11 * var(--u)); line-height: 1.45; }
  .case__data dd .t-13 { font-size: calc(10 * var(--u)); }
  .case__data > div:last-child dd { font-size: calc(10 * var(--u)); }
}

/* SP 院長メッセージ（Figma 164:4058: カード317x1240 / 写真202 / 本文289幅） */
@media (max-width: 767px) {
  .message { padding: calc(49 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u)); }
  .message__photo img { width: calc(202 * var(--u)); }
  .message__name { margin-top: calc(5 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.6; }
  .message__text { font-size: calc(14 * var(--u)); line-height: 1.571; }
  .message__text + .message__text { margin-top: calc(14 * var(--u)); }
  .message__note { margin-top: calc(20 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.7; }
  /* Figma: カード下端18719 → CTA 18737 */
  #cta-4 { padding-top: calc(18 * var(--u)); }
}

/* SP 院長メッセージの寸法（Figma 164:4056 実測） */
@media (max-width: 767px) {
  .heading--cloud {
    width: calc(284 * var(--u));
    height: calc(76 * var(--u));
    font-size: calc(20 * var(--u));
    margin-bottom: calc(-28 * var(--u));   /* 雲下端17507 → カード上端17479 */
    padding-bottom: calc(4 * var(--u));
  }
  .message {
    width: calc(317 * var(--u));
    max-width: 100%;
    margin-inline: auto;
    border-radius: calc(50 * var(--u));
  }
  /* 本文は289px幅（カード317 - 左右14） */
  .message__body, .message__note { width: calc(289 * var(--u)); max-width: 100%; margin-inline: auto; }
}

/* SP FV の pill（Figma 164:3069 実測: 円39px・隣接文字と5px空く）
   ※ .fv__target-child などの後続ルールに負けないよう、ファイル末尾に置く */
@media (max-width: 767px) {
  .fv__target-adult,
  .fv__target-child {
    padding: calc(4 * var(--u)) calc(6 * var(--u));
    margin: calc(-4 * var(--u)) 0;
    line-height: 1.3;
  }
}

/* ============================================================
   SP LINEセクションの装飾（Figma 164:3137 実測）
     164:3140 ベージュの四角  (-52.9,1474) 128x138  #D7BD78 31% / 回転 -0.383rad
     164:3142 ピンクのひし形  ( 43.9,1486)  44x59   / 回転 +1.5708rad(90°)
     164:3173 青い渦         (230.2,1625) 222x152  #78BCD7 / 回転 -2.931rad
   ※ 回転はFigmaの rotation（ラジアン）。SVGは回転前の形で書き出されるため
     transform: rotate() を掛ける。座標はセクション上端1352からの相対。
   ============================================================ */
@media (max-width: 767px) {
  .line-deco {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
  }
  .line-deco--block {
    left: calc(-53 * var(--u));
    top: calc(122 * var(--u));      /* 1474 − 1352 */
    width: calc(128 * var(--u));
    height: calc(138 * var(--u));
    background-image: url("../img/deco/line-sq-sp.svg");
  }
  .line-deco--diamonds {
    left: calc(44 * var(--u));
    top: calc(134 * var(--u));      /* 1486 − 1352 */
    width: calc(44 * var(--u));
    height: calc(59 * var(--u));
    background-image: url("../img/deco/line-diamonds-sp.svg");
  }
  .line-deco--swirl {
    left: calc(230 * var(--u));
    top: calc(273 * var(--u));      /* 1625 − 1352 */
    width: calc(222 * var(--u));
    height: calc(152 * var(--u));
    background-image: url("../img/deco/line-swirl-sp.svg");
  }
  /* 端末とテキストは装飾より前面に */
  .section--line .container { position: relative; z-index: 1; }
}

/* SP FVバッジの文字サイズ（Figma 164:3081〜 実測）
   症例数12 / 1,288=24 / 件13 / ※下部参照10 / バッジ2=13 / 3=11 / 4=15 */
@media (max-width: 767px) {
  .fv-badge__label { font-size: calc(12 * var(--u)); }
  .fv-badge__value { font-size: calc(13 * var(--u)); }
  .fv-badge__value strong { font-size: calc(24 * var(--u)); }
  .fv-badge__note { font-size: calc(10 * var(--u)); }
  .fv-badge:nth-child(2) .fv-badge__inner { font-size: calc(13 * var(--u)); }
  .fv-badge:nth-child(3) .fv-badge__inner { font-size: calc(11 * var(--u)); }
  .fv-badge:nth-child(4) .fv-badge__inner { font-size: calc(15 * var(--u)); }
}

/* ============================================================
   SP 本文CTAボタン（Figma 164:3315 実測）
     ボタン315x80 / アイコン: LINE 50px(左19) カレンダー48x51(左21)
     文字: サブ18px / メイン22px / 注記16px（メインと同じ行）
     テキストはアイコン右側の領域中央
   ============================================================ */
@media (max-width: 767px) {
  .cta__buttons .cta-btn {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    min-height: calc(80 * var(--u));
    padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(82 * var(--u));
  }
  .cta__buttons .cta-btn__icon {
    position: absolute;
    left: calc(19 * var(--u));
    top: 50%;
    translate: 0 -50%;
    width: calc(50 * var(--u));
  }
  .cta__buttons .cta-btn__text { text-align: left; }   /* Figma: 左揃え */
  .cta__buttons .cta-btn__sub  { font-size: calc(18 * var(--u)); line-height: 1.2; }
  .cta__buttons .cta-btn__main { font-size: calc(22 * var(--u)); line-height: 1.4; }
  .cta__buttons .cta-btn__note { font-size: calc(16 * var(--u)); }
}

/* ============================================================
   点線・白い弧・治療円の中央寄せ・（Figma実測 2026-08-22）
   ============================================================ */
/* 大人セクション先頭の点線（PC 89:360: 1265幅 5px間隔20 / SP 164:3374: 340幅 4px間隔21） */
.dotline {
  display: block;
  height: calc(5 * var(--u));
  margin: 0 auto;
  width: min(100%, calc(1265 * var(--u)));
  background-image: radial-gradient(circle, #D9D9D9 calc(2.5 * var(--u)), transparent calc(2.6 * var(--u)));
  background-size: calc(20 * var(--u)) calc(5 * var(--u));
  background-repeat: repeat-x;
}
@media (max-width: 767px) {
  .dotline {
    width: calc(340 * var(--u));
    height: calc(4 * var(--u));
    background-image: radial-gradient(circle, #D9D9D9 calc(2 * var(--u)), transparent calc(2.1 * var(--u)));
    background-size: calc(21 * var(--u)) calc(4 * var(--u));
  }

  /* 白い弧: PCの::before定義は@min-768内でSPには存在しないため、ここで完結定義する
     （Figma SP Rect85: 幅750・角丸∞のスタジアム形、頂点はCTA1終わり+65） */
  #treatments { position: relative; background: var(--c-peach); overflow: hidden; }
  #treatments::before {
    content: "";
    position: absolute;
    top: calc(65 * var(--u));
    left: 50%;
    translate: -50% 0;
    width: calc(750 * var(--u));
    height: calc(1200 * var(--u));
    background: var(--c-white);
    border-radius: calc(375 * var(--u));
  }
  #treatments .container { position: relative; }

  /* 治療円はブロック中央（左寄せになっていた） */
  .treatment__media { margin-inline: auto; }
  .treatment { text-align: center; }
}

/* ============================================================
   SP 実機指摘の修正ラウンド（2026-08-22 #77〜#82）
   ============================================================ */
@media (max-width: 767px) {
  /* #77 「子どもの矯正はこちら」: フロー配置をやめ、写真上端-13px固定の絶対配置
     （フォント差で重なり量が変わらないように） */
  #adult .lead-wrap, #child .lead-wrap { position: relative; padding-bottom: calc(44 * var(--u)); }  /* Figma: 本文下端6990→写真7034 */
  .lead-block__link {
    position: absolute;
    top: auto;                     /* PC用ベースの top:11px を打ち消す（bottomを有効に） */
    right: calc(-15 * var(--u));   /* containerのpadding分を打ち消して画面右端へ */
    bottom: calc(-13 * var(--u));  /* 写真に13pxだけ重なる（Figma実測） */
    order: unset;
    align-self: unset;
    margin: 0;
  }
  #adult .photo-pair, #child .photo-pair { margin-top: 0; }

  /* #78 症例見出しの上余白（Figma: tint終8109 → 見出し8144 = 35 / 子側 19） */
  #adult-cases { margin-top: calc(35 * var(--u)); }
  #child-cases { margin-top: calc(19 * var(--u)); }

  /* #79 #82 CASEバッジの上部switch切れ（バッジはカード上に-25pxはみ出す） */
  .cases__viewport {
    padding-top: calc(27 * var(--u));
    margin-top: calc(-27 * var(--u));
  }
}

/* SP 改行まわりの補足（Figma実測 2026-08-22） */
@media (max-width: 767px) {
  .fv__access-inner { white-space: nowrap; }                 /* 「徒歩1分」を割らない */
  #child .price__table th { white-space: nowrap; }           /* 「トレーナー矯正」を割らない */
}

/* #84 理由1タイトル（SP）: 20px基準・1,288は36px（Figma 164:3189 のラン実測） */
@media (max-width: 767px) {
  .reason:nth-of-type(1) .reason__title { font-size: calc(20 * var(--u)); }
  .reason:nth-of-type(1) .reason__title .t-48,
  .reason__title--record .t-48 { font-size: calc(36 * var(--u)); }
}

/* #87 メカニカルセラピーの3枚: 各115x90に固定（img2がはみ出していた） */
@media (max-width: 767px) {
  .tcols--3 img { width: calc(115 * var(--u)); height: calc(90 * var(--u)); object-fit: cover; }
}

/* 理由本文は Figma ではPC/SPとも1ブロック（段落間の空きなし・行間のみ） */
.reason__text + .reason__text { margin-top: 0; }
.reason__text + .plan-list, .plan-list + .reason__text { margin-block: 0; }

/* === SP全数監査 2026-08-22: フォントサイズをFigmaのラン値へ完全一致 ==== */
@media (max-width: 767px) {
  .menu-btn__text { font-size: calc(11 * var(--u)); }
  .worries__lead { font-size: calc(20 * var(--u)); line-height: calc(32 * var(--u)); }
  /* まずは(20)LINE(30)で(20)簡単無料相談(24) */
  .heading--tri { font-size: calc(20 * var(--u)); }
  .heading--tri .heading__line { font-size: calc(30 * var(--u)); }
  .heading--tri .heading__consult { font-size: calc(24 * var(--u)); }
  /* 実績表: 見出し12(単位10)・計行の数値は3つとも24 */
  .record__table th, .record__table td { font-size: calc(12 * var(--u)); }
  .record__unit { font-size: calc(10 * var(--u)); }
  .record__total td { font-size: calc(24 * var(--u)); }
  /* CTA帯タイトル: 相談だけでも(20)OK！(24)ご予約はこちらから(22) */
  .cta__title { font-size: calc(20 * var(--u)); }
  .cta__title em, .cta__title .cta__ex { font-size: calc(24 * var(--u)); }
  .cta__title .cta__title-b { font-size: calc(22 * var(--u)); }
  .cta__buttons .cta-btn__note { font-size: calc(15 * var(--u)); }
  /* 対応可能な矯正治療: 名称は3つとも16(注記12) */
  .treatment__name { font-size: calc(16 * var(--u)); }
  .treatment__name small { font-size: calc(12 * var(--u)); }
  /* 特徴サブ見出し: 1行目16 / 2行目24 */
  h3.sub-heading:not(.sub-heading--stripe) { font-size: calc(24 * var(--u)); line-height: calc(34 * var(--u)); }
  .sub-heading__sm { font-size: calc(16 * var(--u)); line-height: 1.4; }
  /* 「1年以内に終わる人」の 1 だけ24 */
  .stat__label .stat__big { font-size: calc(24 * var(--u)); }
  /* 症例カード */
  .case__title { font-size: calc(18 * var(--u)); height: auto; min-height: calc(30 * var(--u)); }
  .case__data dd { font-size: calc(13 * var(--u)); }
  .case__data > div:nth-child(3) dd { font-size: calc(14 * var(--u)); }
  .case__data dd .t-13 { font-size: calc(10 * var(--u)); }
  .case__data > div:last-child dd { font-size: calc(11 * var(--u)); }
  /* 費用表 */
  .price__value, .price__value--multi { font-size: calc(16 * var(--u)); }
  /* 指導医の注記は10 */
  #child .note { font-size: calc(10 * var(--u)); text-align: left; }  /* Figma: 左揃え x17 */
  .heading--cloud { font-size: calc(24 * var(--u)); }
  /* 追従CTA: LINE=14/15・予約=13/14/10 */
  .sp-cta__btn--line .sp-cta__sub { font-size: calc(14 * var(--u)); }
  .sp-cta__btn--adult .sp-cta__sub, .sp-cta__btn--child .sp-cta__sub { font-size: calc(13 * var(--u)); }
  .sp-cta__btn--adult .sp-cta__main, .sp-cta__btn--child .sp-cta__main { font-size: calc(14 * var(--u)); }
}

/* LINE見出し: 旧「インク実測28px均一」をFigmaのラン値(20/30/20/24)へ置換 */
@media (max-width: 767px) {
  .line-block__body .heading { font-size: calc(20 * var(--u)); }
  .line-block__body .heading .heading__line { font-size: calc(30 * var(--u)); }
  .line-block__body .heading .heading__consult { font-size: calc(24 * var(--u)); }
}

/* FVアクセス・実績表計行: Figmaラン値(14/11/16/25/16, 計行24) */
@media (max-width: 767px) {
  .fv__access-sm { font-size: calc(11 * var(--u)); }
  .fv__access-walk { font-size: calc(16 * var(--u)); }
  .fv__access-walk strong { font-size: calc(25 * var(--u)); }
  .record__total td:nth-child(2),
  .record__total td:nth-child(3),
  .record__total td:nth-child(4) { font-size: calc(24 * var(--u)); }
}

/* 理由2・3タイトル: 2行目17字がFigmaでは1行(箱341px)。字間を詰めて1行に収める */
@media (max-width: 767px) {
  .reason:nth-of-type(2) .reason__title,
  .reason:nth-of-type(3) .reason__title { letter-spacing: 0; }
}

/* === デザイン指摘対応 2026-08-24 (#92〜#98) ============================ */
@media (max-width: 767px) {
  /* #92/#93: 理由2・3タイトルは手動brの2行のみ。折返し禁止でFigmaの字間を復元 */
  .reason:nth-of-type(2) .reason__title,
  .reason:nth-of-type(3) .reason__title { white-space: nowrap; }
  .reason:nth-of-type(2) .reason__title { letter-spacing: calc(1 * var(--u)); }
  .reason:nth-of-type(3) .reason__title { letter-spacing: calc(2 * var(--u)); }
  /* #94: プランリストはFigmaでは左揃え(x20, 幅336) */
  .plan-list { width: calc(336 * var(--u)); margin-inline: auto; justify-items: start; text-align: left; }
  /* #95: 点線はクリアワイヤー矯正と大人の矯正見出しの中間(Figma y6594) */
  #adult .dotline { position: relative; top: calc(-48 * var(--u)); }
  /* #97: 統計ラベルと「治療費をできるだけ〜」の間はFigmaで25px */
  .stats + .feature__catch, .feature__catch { margin-top: calc(24 * var(--u)); }
  /* #98: 本文はFigmaでは左揃え(x17, 幅345)。自動折返し位置も揃う */
  .feature__text, #child .feature__text { text-align: left; width: calc(345 * var(--u)); margin-inline: auto; }
  .feature__text--tight { text-align: center; }  /* Figma 164:3726: マイオブレース…は中央 */
  /* ※注はFigmaと同じぶら下げ(2行目が全角1字下げ) */
  #child .note { padding-left: calc(10 * var(--u)); text-indent: calc(-10 * var(--u)); }
}

/* === スマホ実機指摘 2026-08-24 (#99〜#102) ============================ */
@media (max-width: 767px) {
  /* #99: ドロワー開時の✕。SPはバー間隔10(高さ2+gap8)なので移動量10、
     Figmaの✕は29.4x17の対角線 = 約30度 */
  .menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(calc(10 * var(--u))) rotate(30deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(calc(-10 * var(--u))) rotate(-30deg); }
  /* #102: 症例見出し→カードの間隔はFigmaで35(8197→8232)。
     4pxしかなくバッジ(カード上-25)が見出しに食い込んでいた */
  #adult-cases, #child-cases { margin-bottom: calc(35 * var(--u)); }
}

/* #102: SPのCASEバッジはSP専用書き出しの六角形(63x68)に置換。
   Figma: 六角形はカード左上から -5.5/-11.5、CASEは六角形上端+14.5 */
@media (max-width: 767px) {
  .case__num {
    width: calc(63 * var(--u));
    height: calc(68 * var(--u));
    top: calc(-11 * var(--u));
    left: calc(-5 * var(--u));
    background-image: url("../img/deco/case-badge-sp.svg");
  }
  #child .case__num { background-image: url("../img/deco/case-badge-blue-sp.svg"); }
  .case__label { padding-top: calc(14 * var(--u)); font-size: calc(10 * var(--u)); }
  .case__no { font-size: calc(24 * var(--u)); margin-top: calc(7 * var(--u)); }
}

/* === スマホ実機指摘2 2026-08-24 (#103〜#106) =========================== */
@media (max-width: 767px) {
  /* #103: バッジ3「インビザライン」: Figma ls -0.22px。bodyの.03em継承ではみ出す */
  .fv-badge:nth-child(3) .fv-badge__inner { letter-spacing: -0.02em; }
  /* #104: 選ばれる理由バンドの背後の赤線: Figma Line(x8 w360 太さ3 #E18F8F)。
     PC版の幅(100vw-90u)ではバンドに隠れて見えなかった */
  .heading--band { width: calc(320 * var(--u)); min-height: calc(75 * var(--u)); }  /* Figma Rect77: x28 w320 h75 */
  /* 赤線はバンドの外に出る両端20pxだけを直接描く
     （z-index:-1 は後続要素の背景に塗り潰されて見えない） */
  .heading--band::before,
  .heading--band::after {
    content: "";
    position: absolute;
    top: 50%;
    left: auto;
    z-index: 0;
    width: calc(20 * var(--u));
    height: calc(3 * var(--u));
    background: #E18F8F;
    transform: translateY(-50%);
  }
  .heading--band::before { left: calc(-20 * var(--u)); }
  .heading--band::after { right: calc(-20 * var(--u)); }
  /* #105: 理由3画像はSPでは左上・右上とも角丸80 (Figma [80,80,0,0]) */
  .reason:nth-of-type(3) .reason__img { border-radius: calc(80 * var(--u)) calc(80 * var(--u)) 0 0; }
  /* #106→#108: ボタンはFigma通り写真に13pxだけ重ねる（ベースの bottom:-13 を使用） */
}

/* バンド見出し: Figmaラン 1行目20 / 2行目24。改行位置も固定 */
@media (max-width: 767px) {
  .heading--band .band-l1 { font-size: calc(20 * var(--u)); }
}

/* === デザイナー指摘 2026-08-25 (①〜⑥) ================================ */
@media (max-width: 767px) {
  /* ① FVバッジ「インビザライン〜」: 行間を詰めて1行目とひし形枠の被りを解消 */
  .fv-badge:nth-child(3) .fv-badge__inner { line-height: 1.2; }
  /* ② 「ご相談ください！」と「当院は〜」の間にマージン */
  .worries__text { margin-top: calc(18 * var(--u)); }
  /* ③ 「子どもの矯正はこちら」は写真(先生)に重ねない */
  .lead-block__link { bottom: calc(-4 * var(--u)); }  /* 写真(先生)に5px程度だけ軽く重ねる */
  /* ⑤ セラピー写真のキャプション: ラベルと（）注記の行間を詰めてひとまとまりに */
  .tcols--3 figcaption { line-height: 1.45; }
  .tcols--3 .t-14 { line-height: 1.45; }
}
/* ④ 「マイオブレース〜」中央揃え: #child .feature__text(左揃え)より強い詳細度で */
@media (max-width: 767px) {
  #child .feature__text--tight { text-align: center; }
}