/* 2026-09-01 P1：70代以上の利用者に向けた文字サイズの引き上げ。
   もとの値は「JIS の下限を割らない」基準で決めていたが、主な読み手が
   70代以上であることを踏まえ、読みやすさ側に寄せる。 */
/* HAMILLE Visit — Premium layer (home + subpages) */

/* Web フォント読み込み時のガタつき（FOUT）対策 — 2026-08-19
   ロゴは Gabarito、代替は system-ui。字幅が異なるため、読み込み完了の瞬間に
   ロゴ幅が約 20px 跳ね、左上が「揺れた」ように見えていた。
   size-adjust で代替フォントの字幅を実測比に寄せ、切り替え時の差をなくす。
   （147.5px → 127.6px だったので比率 ≒ 86.5%） */
@font-face {
  font-family: "Gabarito Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 93.7%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 18px 48px rgba(9, 17, 60, 0.08);
  --shadow-lift: 0 24px 56px rgba(9, 17, 60, 0.12);
  --radius-sm: 4px;
  --radius-btn: 2px; /* 按钮沿用店招式直角观感，刻意小于 --radius-sm */
  --radius-card: 14px; /* カード・写真枠。3〜22px の 10 種類をこの三つに集約 */
  --leading-body: 1.9; /* 本文の行間。日本語は 1.8 以上が読みやすい */
  --hero-min: min(100svh, 920px);
  --wrap-max: 1180px;
  --gutter-inline: clamp(20px, 4vw, 48px);
  /* Brand tokens — canonical in premium layer.
     此层在所有页面加载，是品牌 token 的唯一定义处；
     subpage.css / site-home.css 不再重复定义，改动只需在这里进行。 */
  --navy: #01499A;
  --navy-deep: #09113C;
  --navy-hover: #033d80;
  /* 2026-09-06 #D43D3F(4.55:1) → #B8323A(5.8:1)。白文字の最重要ボタンに余裕を持たせる。
     AAA の 7:1 には #9E2A30 が要るが、そこまで落とすと暗く沈むので採らない。 */
  --red: #B8323A;
  --red-hover: #9E2A30;
  --paper: #F7F8FA;
  /* 2026-08-21 地色を増やす。
     対標 3 社をスクリーンショットの実ピクセルで測ったところ、色相の内訳は
       さくら歯科  ベージュ 26.9% / 赤 13.4% / 青 8.3% / 緑 6.2%
       メディプラン 赤 26.9% / ベージュ 10.6% / 緑 4.7% / 青 4.3%
       徳真会      ベージュ 26.8% / 青 15.3% / 緑 14.2%
     3 社とも「大きなベージュ面」を持ち、色相を 3〜5 つ併用している。
     一方こちらは 白 58.2% + 青 25.9% で、赤 2.1%・緑 0%。
     つまり足りないのは彩度ではなく《色相の数》。ベージュと緑を足す。
     色は水彩アイコン 8 枚の背景色（#FEF4E9 橙・#E6F8F0 緑）から取っている。 */
  --paper-warm: #FBF4E9;
  --paper-warm-deep: #F7EDDC;
  --paper-mint: #EDF6F1;
  --paper-mint-deep: #E4F0E9;
  --white: #fdfdfd;
  --surface: #ffffff;
  /* 2026-08-21 文字色に品位を持たせる。
     旧: #303030 / #555555 は完全な無彩色で、藍（#01499A / #09113C）とも
     アイコンの主線（#2A3142）とも無関係な、どこにでもある灰だった。
     わずかに青へ寄せて、面・線・文字を同じ系列に揃える。
     2026-09-02 --ink-soft を #5A6472 → #474F5A に。
     本文エリアの文字を実測したところ、59% が AAA(7:1) に届いておらず、
     その大半がこの1色だった（18px 本文 5.90:1 / 15px 注記 5.35:1）。
     AA の 4.5:1 は正常視力を前提とした値で、対象が 70 歳以上のこのサイトでは
     加齢によるコントラスト感度の低下に足りない。7:1 に余裕を持たせる。
     色みは変えず（同じ青寄りの灰）、明度だけ下げているので系列は保たれる。
     コントラストは #2A3142 on #FDFDFD = 12.8、
     #474F5A on #FDFDFD = 8.14 / on #F7F8FA = 7.80。いずれも AAA(7:1)。 */
  --ink: #2A3142;
  --ink-soft: #474F5A;
  --line: #d3d7e3;
  --font-logo: "Gabarito", "Gabarito Fallback", sans-serif;
  /* 2026-08-18 見出し書体を変更：Zen Maru Gothic（丸ゴシック）→ Zen Kaku Gothic New。
     丸ゴシックは「やさしい・かわいい」を伝えるが、訪問歯科の判断は
     「知らない人を家に上げてよいか」であり、専門性が要る。
     視力低下を模したぼかし試験でも、明朝系は細い横画が消えて不利、
     丸ゴシックは画がつながる。角ゴシックが最も崩れなかった。
     本文は Noto Sans JP のまま（判読性が高く長文で崩れない）。 */
  /* 2026-10-04 見出しも Noto Sans JP（700）に統一（書体案 C）。見出しと本文で別の和文書体を
     混ぜていたため、かなの形が段ごとに変わり「どこかおかしい」と見えていた。同業 4 社も 1 書体。
     Noto Sans JP も角ゴシックなので、上の「専門性のため角ゴシック」という判断は変わらない。 */
  --font-display: "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
  --logo-color: var(--navy);
  /* 72% だと地 #FDFDFD に対して 4.05 で WCAG AA（4.5）に届かない。
     78% で 4.7。ロゴの副題は小さい文字なので、ここは基準を満たす。 */
  --logo-sub-color: color-mix(in srgb, var(--navy) 78%, #ffffff);
  --logo-on-dark: #fdfdfd;
  --logo-sub-on-dark: rgba(253, 253, 253, 0.82);
  /* Layout breakpoints — 仅作文档记录。CSS 不支持在 @media 中使用 var()，
     媒体查询必须写字面量；新增规则时请对照这里的数值。 */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-nav: 860px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
  --section-pad-y: clamp(40px, 4.5vw, 60px);
  /* Spacing scale — healthcare LP rhythm (tight groups / generous sections) */
  --space-section-y: clamp(40px, 4.5vw, 60px);
  --space-section-y-md: clamp(36px, 4vw, 52px);
  --space-section-y-compact: clamp(32px, 3.5vw, 44px);
  --space-block: clamp(28px, 3.5vw, 40px);
  --space-stack: clamp(20px, 2.8vw, 28px);
  --space-stack-sm: clamp(14px, 2vw, 20px);
  --space-inline: clamp(16px, 2.5vw, 24px);
  /* Typography scale — healthcare LP (body fixed, leads fluid, hints caption) */
  /* 文字サイズ 7 段階（2026-08-18）
     旧構成は 11/13/14/15/16/17/19/22/26/28/32px の 15 段階。13〜16px を
     4 段階も併用していたため、読み手には「層」ではなく「詰まり」として届いていた。
     対標サイト（訪問歯科.com）は本文 16px の一段階のみ・全体 7 段階。
     下限は 11→12px（JIS X 8341 の補助文字下限）、上限は 32→34px へ。
     新規のスタイルは必ずこのトークンを使い、px の直書きをしないこと。 */
  /* 2026-09-02 15→16px。読み手が 70 代以上なので、注記でも 15px は下限に近い。
     全站で計測したところ、この 1px の引き上げでは折り返しが 1 行も増えず、
     ページ全高の増加も +0.5% に収まった。 */
  /* 2026-09-20 理事長より 2 度目の「字が小さいです」。スマートフォンで実測すると
     15px の箇所が 20 種類（首屏のラベル・フッター・郵便番号の判定バッジ・面包屑 等）
     残っていた。まず 15px と 14px を 16px へ引き上げ（40 か所）、そのうえで
     本文 18→19px・注記 16→17px・リード 17〜19→18〜20px に一段上げた。
     見出し（--text-sub 以上）は据え置き。本文との比が詰まるが、
     14ページ×10画面幅で横スクロール 0・はみ出し 0 を確認している。 */
  /* 2026-10-04 院方「まだ字が小さい」（3 回目）を受けて一段上げる（書体案 C）。
     本文 19→20px、注記・ラベル 17→18px。見出しは据え置き。比較図は _materials/compare-*.png。 */
  --text-note: 1.125rem;                                    /* 注記・出典・地図クレジット 16→17→18px */
  --text-body: 1.25rem;                                    /* 本文（読み手は 70 代以上。16px は下限であって目標ではない）18→19→20px */
  --text-lead: clamp(1.125rem, 1.05vw + 0.9375rem, 1.25rem);          /* リード文 */
  /* 2026-08-21 20 → 22px。実測すると h3 は font-size の指定が無く、
     ブラウザ既定の 19.2px のままだった（このトークンは定義されていたが使われていなかった）。
     本文 16px との比が 1.20 で、対標 3 社（1.36〜1.57）より明らかに低く、
     「小見出しなのに本文と同じ大きさに見える」状態だった。 */
  --text-sub: 1.5rem;        /* 区画の中の小節見出し（独立して立つもの） */
  --text-sub-sm: 1.3125rem;   /* カードの中の見出し（本文とセットで読ませるもの）20→21px */
  --text-head: clamp(1.625rem, 2.7vw, 2.125rem);               /* 区切り見出し h2（同業実測 32〜36px に合わせる） */
  --text-hero: clamp(1.75rem, 3.2vw, 2.625rem);               /* ページ見出し h1 */
  --text-label: 1.125rem;                              /* セクションラベル（旧 11px）16→17→18px */
  --text-caption: 1.0625rem;                           /* 段階的移行のため残置。新規使用は不可 */
  --nav-font-size: 0.8125rem;
  --nav-font-weight: 600;
  --nav-link-color: color-mix(in srgb, var(--navy-deep) 90%, var(--ink-soft));
  --mobile-bar-offset: calc(132px + env(safe-area-inset-bottom, 0px));
  --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* UA default figure margin (1em 40px) shrinks photos on mobile — reset globally */
figure {
  margin: 0;
  max-width: 100%;
}

/* ── Section atmosphere (subtle texture, on-brand) ── */
.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-section-y);
}
.section--white {
  padding-block: var(--space-section-y-md);
  background:
    radial-gradient(ellipse 72% 42% at 88% -5%, color-mix(in srgb, var(--navy) 4%, transparent), transparent 58%),
    var(--white);
}
.section--paper {
  padding-block: var(--space-section-y);
  /* 2026-08-20 地色を一段深く。
     旧: #f8f9fc → var(--paper) のグラデーション。白 (#FDFDFD) との輝度差が
     4.4 ポイントしかなく、しかも上端が --paper より明るいため、
     区画が切り替わったことが見て取れなかった。
     白／地色を交互に置いても「ずっと同じ色」に見えていた原因。
     上端を --paper、下端をさらに一段深くして境目を作る。 */
  background:
    radial-gradient(ellipse 65% 48% at 8% -8%, color-mix(in srgb, var(--navy) 6%, transparent), transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, #EFF3F8 100%);
}
.section--warm {
  padding-block: var(--space-section-y);
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper-warm-deep) 100%);
}
.section--mint {
  padding-block: var(--space-section-y);
  background: linear-gradient(180deg, var(--paper-mint) 0%, var(--paper-mint-deep) 100%);
}
/* 地色のある区画ではカードを白にして浮かせる（白地の上では逆に淡く沈める） */
.section--warm .card,
.section--warm .voice-card,
.section--warm .flow-journey__step,
.section--warm .flow-subpage-teaser {
  background: color-mix(in srgb, var(--paper-warm) 55%, #ffffff);
  border-color: color-mix(in srgb, #B08B5A 22%, var(--line));
}
.section--mint .card,
.section--mint .faq-list > .faq-item {
  background: color-mix(in srgb, var(--paper-mint) 55%, #ffffff);
  border-color: color-mix(in srgb, #5E9A78 20%, var(--line));
}
.section--white::before,
.section--paper::before,
.section--warm::before,
.section--mint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.28;
  background-image: var(--texture-noise);
  background-size: 160px 160px;
  pointer-events: none;
}

/* ── Scroll progress ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 3px;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--navy) 0%, var(--red) 100%);
  transition: width 0.08s linear;
}

/* ── Header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 46;
  background: rgba(253, 253, 253, 0.97);
  border-bottom: 1px solid var(--line);
  transition:
    background-color 0.4s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out);
}
.site-header.is-scrolled {
  box-shadow: 0 8px 32px rgba(9, 17, 60, 0.07);
  border-bottom-color: color-mix(in srgb, var(--navy) 12%, var(--line));
}
/* ★ スクロール時にヘッダを 64px → 56px と縮めていたが、これを外した。
   .site-header は position: sticky ＝ 文書の流れに場所を占めるため、
   高さが 8px 変わると下の内容がまるごと 8px ずれる。
   Chrome の scroll anchoring（高さが変わったとき、見ている位置を保つよう
   スクロール量を自動補正する既定機能）がそのずれを補正し、補正で
   しきい値をまたぐと再び高さが変わる —— という往復に入りうる。
   「触っていないのにヘッダ全体が震え続ける」という報告の筋がこれ。
   縮小は見た目の演出にすぎない。背景・影・境界線の変化だけで
   「スクロールした」ことは十分伝わるので、高さは動かさない。
   （updateHeader 側のヒステリシスと合わせて二重に塞いでいる） */

/* Brand logo — all pages, all breakpoints (loads after page CSS) */
.logo {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  letter-spacing: 0.26em;
  color: var(--logo-color);
  line-height: 1.1;
  text-decoration: none;
}
.logo small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: var(--text-note);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--logo-sub-color);
}

/* Desktop nav — unified across home + subpages (loads after page CSS) */
@media (min-width: 861px) {
  .site-header .nav:not(.nav--panel) {
    gap: 4px 12px;
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
    color: var(--nav-link-color);
    letter-spacing: 0;
  }
  .site-header .nav:not(.nav--panel) a {
    color: var(--nav-link-color);
    font-weight: var(--nav-font-weight);
    line-height: 1.35;
    padding: 4px 2px;
  }
  .site-header .nav:not(.nav--panel) a:hover,
  .site-header .nav:not(.nav--panel) a[aria-current="page"] {
    color: var(--navy);
    font-weight: 700;
  }
}

/* Section heading hierarchy — page H1 > section H2 */
.page-hero--cinema h1.section-title,
.page-hero h1.section-title {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.38;
  letter-spacing: 0.02em;
}
main > .section .section-title,
.section .section-title:not(.section-title--sm) {
  font-size: var(--text-head);
  line-height: 1.42;
  letter-spacing: 0.02em;
  max-width: 26em;
}

/* Card / block subheads — clear step below section H2 */
.section h3:not(.section-title):not(.section-title--sm),
.visit-narrative__title,
.flow-journey__label,
.clinic-row__name,
.facility-points h3,
.visit-day-flow h3 {
  font-family: var(--font-display);
  font-size: var(--text-sub);
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy-deep);
}

.section-lead {
  font-size: var(--text-lead);
  line-height: 1.9;
  max-width: 38em;
}

.section-label {
  /* 全ページ共通の区切りラベル。11px→12px（JIS X 8341 補助文字下限） */
  font-size: var(--text-label);
  letter-spacing: 0.18em;
}

/* Mobile-only line break — desktop keeps one line */
.br-sm-only {
  display: none;
}

/* Body copy in cards — slightly smaller than lead */
.voice-card p,
.clinic-row__lead,
.flow-detail-body p:not(.flow-time),
.facility-points li,
.about-split__text p {
  font-size: var(--text-body);
  line-height: 1.9;
}

/* ══ Japanese typography (2025–26: auto-phrase + pretty, not balance) ══
   See: MDN word-break:auto-phrase, yuheiy text-wrap in JA, ryelle.codes JA/KR
   — balance は日本語見出しで文節途中の空白が出るため見出しは pretty
   — 本文は pretty + auto-phrase（Chrome 119+）で文節寄りの改行
*/
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3,
:lang(ja) h4,
:lang(ja) summary,
:lang(ja) .section-label,
:lang(ja) .section-title,
:lang(ja) .btn,
:lang(ja) .logo,
:lang(ja) .visit-editorial__quote {
  /* 2026-10-04 palt（かなの字詰め）は見出し・ラベル・ボタンだけにする（書体案 C）。
     以前は :lang(ja) 全体に掛けていて、本文のかなと「、。？」まで詰まり、
     小さく窮屈に見えていた（院方「字が小さい／どこかおかしい」）。本文はベタ組み。
     ご相談例の引用（.visit-editorial__quote）は見出しに近い扱いなので詰める
     （ベタ組みだと末尾の「」」が全角になり、320〜430px で 5〜7px はみ出した）。 */
  font-feature-settings: 'palt' 1;
}
/* 2026-10-04 禁則の既定値。これまで line-break: strict は要素を名指しで足しており、
   漏れた要素（トップ「お口が整うと」の説明など）は Safari で「っ」が行頭に来た。
   :where() で詳細度 0 にしてあるので、個別に指定した要素はそのまま。 */
:where(:lang(ja)) {
  line-break: strict;
}
/* フォーム部品はブラウザ既定の書体（Arial・system-ui）になるため、サイトの書体を継承させる */
button,
input,
select,
textarea {
  font-family: inherit;
}

:lang(ja) .section-label,
:lang(ja) .section-title,
:lang(ja) .section-lead,
:lang(ja) .section p,
:lang(ja) .section li,
:lang(ja) .note,
:lang(ja) .hero-split__lead,
:lang(ja) .visit-narrative__title,
:lang(ja) .visit-narrative__lead,
:lang(ja) .trouble-mobile-hint,
:lang(ja) .trust-ribbon__item,
:lang(ja) .quick-check-card__title,
:lang(ja) .quick-check-card__text,
:lang(ja) .flow-journey__step p,
:lang(ja) .director-card__name,
:lang(ja) .page-hero h1.section-title,
:lang(ja) .visit-limits,
:lang(ja) .visit-limits__list,
:lang(ja) .visit-limits__note,
:lang(ja) .visit-about-list li,
:lang(ja) .about-trust-note,
:lang(ja) .about-photo-note,
:lang(ja) .visit-editorial__eyebrow,
:lang(ja) .visit-editorial__quote,
:lang(ja) .visit-editorial__note,
:lang(ja) .director-card__greeting {
  /* 2026-09-06 word-break: keep-all と overflow-wrap: anywhere を外した。
     Chromium は下の @supports で auto-phrase に上書きされるため、
     keep-all が実際に効いていたのは Safari だけだった。Safari では
     keep-all で文全体が 1 語になり、収まらないと anywhere が禁則を無視して
     任意の位置で折る → 行頭の「。」「、」「〜」「）」、「ま／す」が
     院方の iPhone で多発した。通常の改行に戻し、禁則は line-break: strict に
     任せる。固有名詞は .jp-keep で個別に束ねる。 */
  overflow-wrap: break-word;
  line-break: strict;
}

/* 担当医の談話 — 2026-08-19
   「どんな人が来るのか」を一人称で示す。写真と肩書だけでは伝わらない部分。
   ★ 挿入時にセレクタリストの途中へ入り込み、:lang(ja) の 26 要素すべてに
     border-left が付いていた（お問い合わせ欄に縦線が並ぶ原因）。独立させる。 */
.director-card__voice {
  margin: 14px 0 0;
  padding: 0 0 0 14px;
  border-left: 2px solid color-mix(in srgb, var(--navy) 35%, transparent);
}
/* 未確定の記載であることを本番でも視認できるようにする（差し替え漏れ防止） */
.ph-todo {
  color: var(--red);
  font-weight: 700;
  background: color-mix(in srgb, var(--red) 8%, transparent);
  padding: 1px 6px;
}

:lang(ja) .director-card__lead,
:lang(ja) .director-card__points li,
:lang(ja) .director-card__note,
:lang(ja) .clinic-row strong,
:lang(ja) .clinic-row-body > span:not(.clinic-row-badge),
:lang(ja) .clinic-address,
:lang(ja) .clinic-access,
:lang(ja) .facility-points li,
:lang(ja) .facility-flow li,
:lang(ja) .voice-card p,
:lang(ja) .faq-item summary,
:lang(ja) .faq-item p,
:lang(ja) .about-split__callout-note,
:lang(ja) .area-rule-note,
:lang(ja) .area-disclaimer,
:lang(ja) .area-rule-lead,
:lang(ja) .visit-places,
:lang(ja) .sign-checklist__text span,
:lang(ja) .flow-meta dd,
:lang(ja) .flow-subpage-teaser p,
:lang(ja) .visit-schedule-note,
:lang(ja) .facility-kasan__lead,
:lang(ja) .facility-kasan__note,
:lang(ja) .price-summary-note,
:lang(ja) .price-cta-bar__text,
:lang(ja) .limit-note,
:lang(ja) .clinics-note,
:lang(ja) .trust-clinics-line,
:lang(ja) .service-note,
:lang(ja) .service-name-list li,
:lang(ja) .clinic-name-list a,
:lang(ja) .clinic-name-list span,
:lang(ja) .clinic-features-note {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
  hanging-punctuation: allow-end;
}

/* 注釈・複数の独立した文は句点ごとに積み上げ */
.jp-sentences span {
  display: block;
}

.jp-sentences span + span {
  margin-top: 0.2em;
}

/* ※ で始まる注記 — ぶら下げインデント（2026-09-05）
   もとは 1 行目だけに ※ があり、2 文目以降は行頭が ※ と同じ位置に
   並んでいた。読む側から見ると、その行が ※ の続きなのか別の話なのか
   区別がつかない。
   ※ を左に出し、中身をすべて同じ列に揃えることで、
   どこまでが 1 つの注記なのかが見た目で分かるようにする。
   ※ を各行に付ける案もあるが、記号が増えて読みにくくなるため採らない。 */
.jp-sentences--kome {
  padding-left: 1.35em;
}
.jp-sentences--kome span {
  text-indent: 0;
}
.jp-sentences--kome span:first-child {
  text-indent: -1.35em;
}

.limit-note.jp-sentences span + span,
.area-disclaimer.jp-sentences span + span,
.price-summary-note.jp-sentences span + span,
.visit-schedule-note.jp-sentences span + span,
.visit-inquiry-form__note.jp-sentences span + span,
.note.jp-sentences span + span,
.sim-disclaimer.jp-sentences span + span {
  margin-top: 0.15em;
}

@supports (word-break: auto-phrase) {
  :lang(ja) .section-label,
  :lang(ja) .section-title,
  :lang(ja) .section-lead,
  :lang(ja) .section p,
  :lang(ja) .section li,
  :lang(ja) .note,
  :lang(ja) .hero-split__lead,
  :lang(ja) .visit-narrative__title,
  :lang(ja) .visit-narrative__lead,
  :lang(ja) .trouble-mobile-hint,
  :lang(ja) .quick-check-card__text,
  :lang(ja) .visit-editorial__quote,
  :lang(ja) .director-card__lead,
  :lang(ja) .voice-card p,
  :lang(ja) .faq-item p,
  :lang(ja) .area-disclaimer,
  :lang(ja) .area-rule-lead,
  :lang(ja) .facility-flow li,
  :lang(ja) .visit-limits__list li,
  :lang(ja) .flow-meta dd,
  :lang(ja) .sign-checklist__text span,
  /* 2026-08-20 に追加した区画。ここに書き漏らすと、その区画だけ
     語の途中で行が割れる（「お聞か／せください」のように読みにくくなる）。
     新しい本文ブロックを足したら、必ずこの一覧にも足すこと。 */
  :lang(ja) .visit-system__body > span,
  :lang(ja) .benefit__body span,
  :lang(ja) .trouble-head .section-lead,
  :lang(ja) .draft-flag,
  :lang(ja) .hero-o1__cta-note {
    word-break: auto-phrase;
    /* 最終行が 1〜2 文字だけ残るのを避ける。auto-phrase で文節ごとに
       折り返すと、末尾に短い文節がぶら下がりやすくなるため対で入れる。 */
    text-wrap: pretty;
  }

  /* auto-phrase が使えるブラウザでは .jp-nowrap を解除する。
     両方かけると二重になり、スマホ（390px）で
     「算定することがあります」が行幅の 58%、「該当しないこと。」が 45% を
     占めてしまい、その前の行が 30% まで詰まっていた。
     auto-phrase は文節で折り返すので「お聞か／せください」のような
     割れ方は起きない。nowrap は auto-phrase 非対応（Safari 等）の保険として残す。 */
  :lang(ja) .jp-nowrap {
    white-space: normal;
    /* keep-all も併せて解除する。日本語では CJK 間で折り返せなくなるため、
       nowrap を外しただけでは結局ひとかたまりのままだった。 */
    word-break: auto-phrase;
  }
}

/* Transparent overlay header (home cinematic hero) */
.has-cinema-hero .site-header:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(9, 17, 60, 0.72) 0%, rgba(9, 17, 60, 0) 100%);
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.has-cinema-hero .site-header:not(.is-scrolled) .logo,
.has-cinema-hero .site-header:not(.is-scrolled) .logo small {
  color: var(--logo-on-dark);
}
.has-cinema-hero .site-header:not(.is-scrolled) .nav a {
  color: rgba(253, 253, 253, 0.88);
}
.has-cinema-hero .site-header:not(.is-scrolled) .nav a:hover,
.has-cinema-hero .site-header:not(.is-scrolled) .nav a[aria-current="page"] {
  color: var(--white);
}

/* ── Full-screen cinematic hero (home) ── */
.hero-cinema {
  position: relative;
  min-height: var(--hero-min);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--navy-deep);
}
.hero-cinema__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-cinema__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
}
.hero-cinema__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(9, 17, 60, 0.88) 0%, rgba(9, 17, 60, 0.52) 42%, rgba(9, 17, 60, 0.18) 68%, rgba(9, 17, 60, 0.35) 100%),
    linear-gradient(0deg, rgba(9, 17, 60, 0.82) 0%, transparent 38%);
  pointer-events: none;
}
.hero-cinema__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding: clamp(100px, 14vh, 140px) var(--gutter-inline) clamp(48px, 8vh, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
}
.hero-cinema__brand .eyebrow {
  margin: 0;
  font-size: var(--text-note);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(253, 253, 253, 0.62);
}
.hero-cinema__brand .wordmark {
  margin: 10px 0 0;
  font-family: var(--font-logo);
  font-weight: 800;
  font-size: clamp(2.625rem, 7.5vw, 5.5rem);
  letter-spacing: 0.18em;
  line-height: 0.92;
  color: var(--white);
}
.hero-cinema__brand .brand-sub {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 1.4vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(253, 253, 253, 0.88);
}
.hero-cinema__brand .smile-arc {
  display: block;
  width: min(200px, 60%);
  height: 14px;
  margin-top: 12px;
  color: rgba(253, 253, 253, 0.6);
}
.hero-cinema__copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.625rem);
  line-height: 1.42;
  color: var(--white);
  text-shadow: 0 2px 24px rgba(9, 17, 60, 0.35);
}
.hero-cinema__copy .lead {
  margin: 14px 0 0;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  color: rgba(253, 253, 253, 0.88);
  max-width: 34em;
}
.hero-cinema__copy .hero-trust {
  margin-top: 12px;
  font-size: var(--text-body);
  color: rgba(253, 253, 253, 0.72);
}
.hero-cinema__copy .hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.hero-cinema__copy .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--white);
  background: rgba(253, 253, 253, 0.12);
  border: 1px solid rgba(253, 253, 253, 0.22);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
}
.hero-cinema__copy .hero-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}
.hero-cinema__copy .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hero-cinema__copy .area-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px solid rgba(253, 253, 253, 0.45);
  padding-bottom: 2px;
}
.hero-cinema__copy .area-link::after {
  content: "→";
}
.hero-cinema__caption {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 4vw, 48px);
  bottom: clamp(18px, 3vh, 28px);
  margin: 0;
  padding: 8px 14px 8px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--white);
  border-left: 3px solid var(--red);
  background: rgba(9, 17, 60, 0.55);
  backdrop-filter: blur(8px);
}
.hero-cinema__scroll {
  display: none;
}
.hero-map-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
  pointer-events: none;
}
.hero-map-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.hero-map-slide__photo {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center center;
}
.hero-map-slide.is-active .hero-map-slide__photo {
  animation: hero-photo-dim var(--hero-cycle, 4.5s) ease forwards;
}
.hero-visit-slide.is-active .hero-map-slide__photo {
  animation: none;
  filter: brightness(1);
}
.hero-visit-slide__badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 6px 11px;
  font-size: var(--text-note);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--navy);
  border: 1px solid rgba(253, 253, 253, 0.2);
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(9, 17, 60, 0.22);
}
.hero-pos--visit-treatment { object-position: center 38%; }
.hero-pos--visit-home { object-position: center 42%; }
.hero-pos--visit-departure { object-position: center 45%; }
@keyframes hero-photo-dim {
  0%, 44% { filter: brightness(1); }
  54%, 100% { filter: brightness(0.9); }
}
.hero-map-schematic--flyin {
  position: absolute;
  z-index: 2;
  right: clamp(10px, 2vw, 16px);
  bottom: clamp(46px, 8vw, 56px);
  width: clamp(168px, 28vw, 220px);
  padding: 8px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid color-mix(in srgb, var(--navy) 22%, var(--line));
  box-shadow: 0 10px 28px rgba(9, 17, 60, 0.16);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translate(48%, 38%) scale(0.58);
  pointer-events: none;
}
.hero-map-slide.is-active .hero-map-schematic--flyin {
  animation: hero-map-flyin var(--hero-cycle, 4.5s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hero-map-flyin {
  0%, 44% {
    opacity: 0;
    transform: translate(48%, 38%) scale(0.58);
  }
  54%, 100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes hero-map-flyin-mobile {
  0%, 44% {
    opacity: 0;
    transform: translate(36%, calc(-50% + 16px)) scale(0.58);
  }
  54%, 100% {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
  }
}
.hero-map-schematic--flyin .hero-map-schematic__legend {
  font-size: var(--text-note);
}
.hero-map-schematic__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.hero-map-schematic__dim {
  fill: rgba(238, 242, 247, 0.78);
  fill-rule: evenodd;
}
.hero-map-schematic__radius-fill {
  fill: rgba(1, 73, 154, 0.1);
  stroke: none;
}
.hero-map-schematic__radius {
  fill: none;
  stroke: #01499A;
  stroke-opacity: 0.5;
  stroke-width: 1.4;
  stroke-dasharray: 6 4;
}
.hero-map-schematic__scale {
  font-family: var(--font-body, "Noto Sans JP", sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: #01499A;
  opacity: 0.75;
}
.hero-map-schematic__route {
  fill: none;
  stroke: #01499A;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-linecap: round;
  pathLength: 100;
}
.hero-map-schematic__route--facility {
  stroke-opacity: 0.62;
  stroke-width: 1.6;
}
.hero-map-slide.is-active .hero-map-schematic__route--home,
.hero-map-slide.is-active .hero-map-schematic__route--facility {
  animation: hero-map-route 1.6s ease-in-out 2.4s infinite;
}
.hero-map-slide.is-active .hero-map-schematic__route--facility {
  animation-delay: 2.65s;
}
.hero-map-slide.is-active .hero-map-schematic__traveler {
  animation: hero-map-traveler-show var(--hero-cycle, 4.5s) ease forwards;
}
.hero-map-schematic__legend--dual {
  display: grid;
  grid-template-columns: auto auto 1fr 1fr;
  gap: 3px 6px;
  font-size: 0.75rem;
}
.hero-map-schematic__legend--dual span:nth-child(3)::before,
.hero-map-schematic__legend--dual span:nth-child(4)::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 3px;
  vertical-align: middle;
  background: var(--red);
}
.hero-map-schematic__legend--dual span:nth-child(3)::before {
  border-radius: 50%;
}
.hero-map-schematic__legend--dual span:nth-child(4)::before {
  border-radius: var(--radius-btn);
}
@keyframes hero-map-traveler-show {
  0%, 52% { opacity: 0; }
  58%, 100% { opacity: 1; }
}
@keyframes hero-map-route {
  0% { stroke-dashoffset: 100; opacity: 0.35; }
  42% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
.hero-map-schematic__traveler {
  opacity: 0;
  fill: var(--red);
}
.hero-map-schematic__legend {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy-deep);
}
.hero-map-schematic__legend span:nth-child(2) {
  color: var(--navy);
  opacity: 0.72;
}
.hero-split__dot.is-active {
  background: var(--white);
  border-color: var(--white);
  transform: scale(1.08);
}
.hero-split__copy .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hero-split__copy .text-link {
  margin-top: 18px;
}

/* ── Visit contact slots (CTA always visible; number lines need visit-config.js) ── */
html:not(.has-visit-phone) .cta-example,
html:not(.has-visit-phone) .clinic-tel,
html:not(.has-visit-phone) .facility-phone-note,
html:not(.has-visit-phone) [data-visit-phone-display] {
  display: none !important;
}
.hero-actions--web-only .btn-web,
.final-cta__actions.hero-actions--web-only .btn-web {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.mobile-bar--web-only .btn-web {
  flex: 1 1 auto;
  min-width: 0;
}
.nav-panel__foot:has(.nav-panel__cta-phone[hidden]) .nav-panel__cta-web {
  width: 100%;
}

/* Mobile bottom bar — menu + CTAs always reachable while scrolling */
.mobile-bar__menu {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  padding: 0 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
@media (max-width: 860px) {
  :root {
    --mobile-bar-offset: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .mobile-bar .btn-phone,
  .mobile-bar .btn-web,
  .mobile-bar .mobile-bar__menu {
    flex: 1 1 0;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    padding: 0 6px;
    letter-spacing: 0.02em;
  }
  /* 固定バーがページ末尾の内容に被る。従来この余白は site-home.css に
     しかなく、トップページ以外（お問い合わせ・診療の流れ・料金・各院）
     では最下部が隠れていた。バーは全ページ共通なので余白も共有層に置く。 */
  .site-footer {
    padding-bottom: var(--mobile-bar-offset);
  }
}

/* ── Subpage cinematic page-hero ── */
.page-hero--cinema {
  position: relative;
  min-height: clamp(280px, 42vh, 420px);
  display: flex;
  align-items: flex-end;
  padding: 0;
  border-bottom: none;
  overflow: hidden;
  background: var(--navy-deep);
}
.page-hero--cinema .page-hero__media {
  position: absolute;
  inset: 0;
}
.page-hero--cinema .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 40%;
  filter: saturate(0.92) contrast(1.02);
}
.page-hero--cinema .page-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(9, 17, 60, 0.9) 0%, rgba(9, 17, 60, 0.55) 50%, rgba(9, 17, 60, 0.35) 100%),
    linear-gradient(0deg, rgba(9, 17, 60, 0.75) 0%, transparent 45%);
}
.page-hero--cinema .page-hero__content {
  position: relative;
  z-index: 1;
  padding-block: clamp(88px, 12vh, 120px) clamp(40px, 6vw, 56px);
}
.page-hero--cinema .section-label {
  color: rgba(253, 253, 253, 0.75);
}
.page-hero--cinema .section-title {
  color: var(--white);
  max-width: 22em;
  text-shadow: 0 2px 20px rgba(9, 17, 60, 0.3);
  line-break: auto;
  text-wrap: wrap;
}
.page-hero--cinema .section-lead,
.page-hero--cinema .area-rule-note,
.page-hero--cinema .area-intro {
  color: rgba(253, 253, 253, 0.85);
}

/* Subpages with cinematic hero — light header over dark photo */
.has-sub-cinema .site-header:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(9, 17, 60, 0.72) 0%, rgba(9, 17, 60, 0) 100%);
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.has-sub-cinema .site-header:not(.is-scrolled) .logo,
.has-sub-cinema .site-header:not(.is-scrolled) .logo small {
  color: var(--logo-on-dark);
}
.has-sub-cinema .site-header:not(.is-scrolled) .nav:not(.nav--panel) a {
  color: rgba(253, 253, 253, 0.88);
}
.has-sub-cinema .site-header:not(.is-scrolled) .nav:not(.nav--panel) a:hover,
.has-sub-cinema .site-header:not(.is-scrolled) .nav:not(.nav--panel) a[aria-current="page"] {
  color: var(--white);
}
/* ★ background を必ず一緒に指定すること。
   基本の .nav-toggle は background: var(--white)（不透明の白）。
   ここで color だけ白にすると、白地に白線＝ただの白い四角に見える。
   下層ページ 8 枚（エリア・流れ・費用・各院）で実際にそうなっていた。
   .has-cinema-hero 側と同じ値に揃える。 */
.has-sub-cinema .site-header:not(.is-scrolled) .nav-toggle {
  border-color: rgba(253, 253, 253, 0.35);
  background: rgba(253, 253, 253, 0.12);
  color: var(--white);
}
.has-sub-cinema .site-header:not(.is-scrolled) .nav-toggle__bars span {
  background: var(--white);
}

/* Subsection / legal headings */
.section-title--sm {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.45;
  max-width: none;
  margin-top: clamp(28px, 4vw, 36px);
}
.container--legal {
  max-width: min(720px, 100%);
}
.legal-prose p {
  margin: 0 0 1em;
  font-size: var(--text-note);
  line-height: 1.9;
  color: var(--ink-soft);
}
.legal-prose p:last-child {
  margin-bottom: 0;
}
@keyframes trust-ribbon-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Section head ── */
/* 2026-08-19 装飾的な連番（01/02/03…）を撤去。
   トップページの各区画は「当院について／お悩み別／エリア／流れ／費用…」という
   並列の話題であって、順序を持つ手順ではない。順序の無いものへの番号は
   意味を伝えず、生成物らしさだけが残る。
   番号の分の padding-left も同時に外すこと（残すと全見出しが理由なく字下げされる）。
   本当に順序を持つ「ご依頼の流れ」の手順番号は別規則なので影響しない。 */
.section-head {
  position: relative;
  margin-bottom: var(--space-stack-sm);
}
.section-head .section-title { max-width: 22em; }

/* ── Reveal ──
   2026-09-06 html.js が付いている時だけ隠す。
   もとは .reveal が無条件で opacity:0 だったため、JS が動かない環境では
   内容が永久に表示されなかった（reduced-motion は JS 側で is-visible を
   付けて対処していたが、JS そのものが止まると効かない）。
   html.js は各ページ <head> の 1 行スクリプトで付ける。
   移動量 28→12px、時間 0.75→0.45s。高齢の方は動く物に注意を奪われやすい。 */
html.js .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(12px);
}
.reveal {
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
html.js .reveal-stagger:not(.is-visible) > * {
  opacity: 0;
  transform: translateY(10px);
}
.reveal-stagger > * {
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
/* 兜底规则：任意数量的子元素都会显现。
   下面 nth-child 只负责前 6 个的递进延迟（特异性更高，优先生效），
   第 7 个及以后统一用 0.3s，不会再停在 opacity:0。 */
.reveal-stagger.is-visible > * { transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.13s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.23s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.28s; }

/* 東京5院リスト — 首页 #clinics 与 area/ の両方で使用（共享层に置く理由）。
   移动前は subpage.css にあり、site-home.css を読む首页では無スタイルだった。 */
.clinic-compact {
  margin-top: 28px;
  border: 1px solid var(--line);
  background: var(--white);
}
.clinic-compact li {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-body);
  line-height: 1.65;
}
.clinic-compact li:last-child { border-bottom: none; }
/* 2026-08-24 拠点に住所と最寄駅を出す。
   対標を実測すると、トップページに載っている住所は さくら歯科 8 / メディプラン 13 に対し、
   こちらは 0 だった（下層の各院ページには元からあった）。
   「実在する場所」を示す情報がトップに一つも無いことが、
   全体をつくりものに見せていた要因のひとつ。 */
.clinic-compact__addr,
.clinic-compact__access {
  display: block;
  font-size: var(--text-note);
  line-height: 1.6;
  color: var(--ink-soft);
}
.clinic-compact__addr { margin-top: 2px; }
.clinic-compact__access {
  margin-top: 1px;
  color: color-mix(in srgb, var(--navy) 74%, var(--ink-soft));
}
.clinic-compact strong {
  display: block;
  font-size: 1rem;
  color: var(--navy-deep);
  margin-bottom: 4px;
}
.clinic-compact--linked a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 30%, transparent);
}
.clinic-compact--linked a:hover { color: var(--navy-deep); }

.area-premium { border-radius: var(--radius-card); transition: box-shadow 0.4s var(--ease-out); }
.area-premium:hover { box-shadow: var(--shadow-lift); }
.area-map-figure { border-radius: var(--radius-sm); }

.flow-list::after {
  content: "";
  position: absolute;
  left: 40px; top: 28px;
  width: 2px; height: 0;
  background: var(--navy);
  transition: height 1.2s var(--ease-out);
  z-index: 0;
}
.flow-list.is-visible::after { height: calc(100% - 56px); }
.flow-list .flow-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--navy) 20%, var(--line));
  background: var(--paper);
  font-size: 1.125rem;
  font-family: var(--font-logo);
  font-weight: 800;
  color: var(--navy);
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.flow-list .flow-step.is-active .flow-num { background: var(--navy); border-color: var(--navy); color: var(--white); }

.service-item { transition: background-color 0.25s ease, padding-left 0.35s var(--ease-out); }
.service-item:hover { background: color-mix(in srgb, var(--navy) 3%, var(--white)); padding-left: 28px; }
.service-photo { border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); }

/* Service cards — visit dentistry grid (home #service) */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(24px, 3.5vw, 32px);
}
.service-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(9, 17, 60, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.service-card:hover {
  border-color: color-mix(in srgb, var(--navy) 22%, var(--line));
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.service-card__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--navy) 6%, var(--line));
}
.service-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease-out);
}
.service-card:hover .service-card__figure img {
  transform: scale(1.03);
}
.service-card__num {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  font-family: var(--font-logo);
  font-size: var(--text-note);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--white);
  background: rgba(9, 17, 60, 0.72);
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 20px) clamp(16px, 2.2vw, 20px);
}
.service-card__tag {
  margin: 0;
  font-size: var(--text-note);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--navy);
}
.service-card__body h3 {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-sub-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy-deep);
}
.service-card__body > p {
  margin: 8px 0 0;
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--ink-soft);
}
.service-card__worries {
  margin: 12px 0 0;
  padding: 10px 12px;
  list-style: none;
  background: color-mix(in srgb, var(--navy) 4%, var(--paper));
  border-left: 3px solid color-mix(in srgb, var(--navy) 35%, var(--line));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.service-card__worries li {
  position: relative;
  padding-left: 14px;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink);
}
.service-card__worries li + li {
  margin-top: 4px;
}
.service-card__worries li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
  opacity: 0.55;
}
.service-note {
  margin: 20px 0 0;
  font-size: var(--text-note);
  line-height: 1.65;
  color: var(--ink-soft);
}
@media (max-width: 1100px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
  .service-card:hover {
    transform: none;
  }
}

/* Service catalog — compact accordion list (home #service) */
.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  margin-top: clamp(24px, 3.5vw, 32px);
}
.service-layout__visual {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: color-mix(in srgb, var(--navy) 6%, var(--line));
}
.service-layout__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.service-layout__visual figcaption {
  padding: 10px 14px;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
  .service-layout {
    grid-template-columns: 1fr;
  }
}

/* Trust photo strip — features section */
.trust-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 14px);
  margin: clamp(20px, 3vw, 28px) 0 clamp(24px, 3.5vw, 32px);
}
.trust-photo-strip__item {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 6px 20px rgba(9, 17, 60, 0.04);
}
.trust-photo-strip__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.trust-photo-strip__item figcaption {
  padding: 8px 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  background: var(--paper);
}
@media (max-width: 768px) {
  .trust-photo-strip {
    grid-template-columns: 1fr;
  }
}
.service-layout--catalog {
  display: block;
  margin-top: clamp(18px, 2.5vw, 24px);
}

.facility-stats li { transition: background-color 0.3s ease; }
.facility-stats li:hover { background: color-mix(in srgb, var(--navy) 4%, var(--white)); }
.stat-value { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }

/* ── Clinic network (recruit-style photos) ── */
.clinic-list {
  margin-top: 40px;
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}
.clinic-row {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.clinic-row:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
  background: var(--white);
}
.clinic-row__main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  background: var(--white);
}
.clinic-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px clamp(20px, 3vw, 28px) clamp(16px, 2vw, 20px);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 70%, white);
}
.clinic-row-actions .clinic-link-btn {
  padding: 8px 14px;
  font-size: 0.8125rem;
}
.clinic-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: var(--text-body);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy-deep);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.clinic-link-btn:hover {
  border-color: color-mix(in srgb, var(--navy) 35%, var(--line));
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}
.clinic-link-btn--map {
  background: color-mix(in srgb, var(--navy) 6%, white);
}
.clinic-link-btn--site {
  border-color: color-mix(in srgb, var(--navy) 25%, var(--line));
}
.clinic-thumb {
  display: block;
  flex: 0 0 clamp(200px, 34%, 280px);
  width: clamp(200px, 34%, 280px);
  max-width: 280px;
  min-width: 0;
  overflow: hidden;
  background: #e8eef4;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
}
.clinic-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 168px;
  object-fit: cover;
}
.clinic-row-body {
  flex: 1 1 0;
  padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  background: var(--white);
  position: relative;
  z-index: 1;
}
.clinic-row-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  background: var(--navy);
  border-radius: 999px;
  width: fit-content;
}
.clinic-row__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy-deep);
}
.clinic-row__name a {
  color: inherit;
  text-decoration: none;
}
.clinic-row__name a:hover {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.clinic-row__lead {
  margin: 6px 0 0;
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.6;
}
.clinic-row strong {
  display: block;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.45;
}
.clinic-row-body > span:not(.clinic-row-badge) {
  display: block;
  margin-top: 6px;
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.6;
}
.clinic-address {
  margin-top: 10px;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink);
  font-style: normal;
}
.clinic-access {
  margin-top: 4px;
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.6;
}
.clinics-note {
  margin-top: 20px;
  font-size: var(--text-body);
  color: var(--ink-soft);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.clinic-hub-photo {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--white);
}
.clinic-hub-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.clinic-hub-photo figcaption {
  padding: 12px 14px;
  font-size: var(--text-note);
  font-weight: 600;
  color: var(--navy-deep);
  border-top: 1px solid var(--line);
  background: var(--white);
}

@media (max-width: 720px) {
  .clinic-row__main {
    flex-direction: column;
  }
  .clinic-thumb {
    flex: none;
    width: 100%;
    max-width: none;
  }
  .clinic-thumb img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 721px) and (max-width: 960px) {
  .clinic-thumb {
    flex-basis: 36%;
    width: 36%;
    max-width: 260px;
  }
}

@media (min-width: 961px) {
  .clinic-thumb {
    flex-basis: 300px;
    width: 300px;
    max-width: 300px;
  }
}

.voice-item { position: relative; padding-left: 20px; transition: transform 0.35s var(--ease-out); }
.voice-item::before {
  content: "";
  position: absolute;
  left: 0; top: 28px;
  width: 3px;
  height: calc(100% - 48px);
  background: color-mix(in srgb, var(--navy) 18%, var(--line));
}
.voice-item:hover { transform: translateX(4px); }

.faq-item summary { transition: color 0.25s ease, padding-left 0.35s var(--ease-out); }
.faq-item summary:hover { color: var(--navy); padding-left: 6px; }
.faq-item[open] summary { color: var(--navy); }

.final-cta { position: relative; overflow: hidden; }
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(1, 73, 154, 0.35), transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(224, 64, 66, 0.12), transparent 50%);
  pointer-events: none;
}
.final-cta .container { position: relative; z-index: 1; }
.contact-visual figure { border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25); }
.contact-visual img { transition: transform 0.6s var(--ease-out); }
.contact-visual figure:hover img { transform: scale(1.04); }
.contact-visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-inline: auto;
  margin-bottom: 28px;
  max-width: 520px;
}
.contact-visual figure {
  margin: 0;
  border: 1px solid rgba(253, 253, 253, 0.2);
}
.contact-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}

/* ── Phase 1 visual density components ── */
.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--navy) 10%, #fff) 0%, color-mix(in srgb, var(--navy) 4%, #f7f9fc) 100%);
  border: 1px solid color-mix(in srgb, var(--navy) 14%, var(--line));
  box-shadow: 0 4px 14px rgba(1, 73, 154, 0.08);
}
.icon-badge--warm {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--red) 8%, #fff) 0%, color-mix(in srgb, var(--navy) 5%, #f9fafc) 100%);
  border-color: color-mix(in srgb, var(--red) 18%, var(--line));
}
.icon-badge .ui-icon {
  width: 20px;
  height: 20px;
}

/* Soft line icons — pastel offset circle (harenohi-inspired) */
.icon-soft {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(60px, 8.5vw, 76px);
  height: clamp(60px, 8.5vw, 76px);
  flex-shrink: 0;
  isolation: isolate;
  background: none;
  border: none;
  box-shadow: none;
}
.icon-soft::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  top: -4%;
  right: -10%;
  background: var(--icon-soft-bg, #b8e8d4);
  opacity: 0.46;
}
.icon-soft .ui-icon,
.icon-soft > svg {
  position: relative;
  z-index: 1;
  width: clamp(34px, 4.8vw, 42px);
  height: clamp(34px, 4.8vw, 42px);
  stroke: #2a3142;
  stroke-width: 1.75;
  fill: none;
}
.icon-soft--mint { --icon-soft-bg: #b8e8d4; }
.icon-soft--sky { --icon-soft-bg: #a8d4f5; }
.icon-soft--rose { --icon-soft-bg: #e8c4d8; }
.icon-soft--lavender { --icon-soft-bg: #d4c8f0; }
.icon-soft--peach { --icon-soft-bg: #f5d4b8; }
.icon-soft--coral { --icon-soft-bg: #f0d0d8; }
.icon-soft--lg {
  width: clamp(68px, 10vw, 84px);
  height: clamp(68px, 10vw, 84px);
}
.icon-soft--lg .ui-icon,
.icon-soft--lg > svg {
  width: clamp(38px, 5.2vw, 46px);
  height: clamp(38px, 5.2vw, 46px);
}
.icon-soft--sm {
  width: 44px;
  height: 44px;
}
.icon-soft--sm .ui-icon,
.icon-soft--sm > svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
}
.icon-soft--sm::before {
  width: 78%;
  height: 78%;
  top: -4%;
  right: -9%;
  opacity: 0.4;
}
.clinic-feature-card:nth-child(1) .clinic-feature-card__icon { --icon-soft-bg: #b8e8d4; }
.clinic-feature-card:nth-child(2) .clinic-feature-card__icon { --icon-soft-bg: #e8c4d8; }
.clinic-feature-card:nth-child(3) .clinic-feature-card__icon { --icon-soft-bg: #a8d4f5; }
.clinic-feature-card:nth-child(4) .clinic-feature-card__icon { --icon-soft-bg: #d4c8f0; }
.flow-step:nth-child(1) .flow-step-icon { --icon-soft-bg: #a8d4f5; }
.flow-step:nth-child(2) .flow-step-icon { --icon-soft-bg: #d4c8f0; }
.flow-step:nth-child(3) .flow-step-icon { --icon-soft-bg: #f5d4b8; }
.flow-step:nth-child(4) .flow-step-icon { --icon-soft-bg: #b8e8d4; }
.flow-step:nth-child(5) .flow-step-icon { --icon-soft-bg: #e8c4d8; }

/* 小見出しの既定。個別のコンポーネントが上書きする場合はそちらが優先される。 */
h3 {
  font-size: var(--text-sub);
  line-height: 1.45;
}
.ui-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: var(--navy);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
  margin-top: 28px;
}
.about-split--rich {
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
}
.about-split__media {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-split__photo {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--white);
}
.about-split__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.about-split__photo figcaption {
  padding: 10px 14px;
  font-size: var(--text-note);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  background: var(--white);
}
.about-split__callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid color-mix(in srgb, var(--navy) 22%, var(--line));
  background: color-mix(in srgb, var(--navy) 5%, var(--white));
  border-radius: var(--radius-sm);
}
.about-split__callout-icon {
  flex-shrink: 0;
}
.about-split__callout-text {
  flex: 1;
  min-width: 0;
}
.about-split__callout-title {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.45;
}
.about-split__callout-note {
  margin: 6px 0 0;
  font-size: var(--text-note);
  line-height: 1.7;
  color: var(--ink-soft);
}
.about-split__callout-link {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.about-split__callout-link:hover {
  text-decoration: underline;
}
@media (max-width: 520px) {
  .about-split__callout {
    flex-direction: column;
    align-items: stretch;
  }
  .about-split__callout-link {
    align-self: flex-start;
    margin-top: 4px;
  }
}
.about-edu {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.about-edu__heading {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 700;
  color: var(--navy-deep);
}
.about-edu__heading:not(:first-child) { margin-top: 28px; }
.about-edu__lead {
  margin: -8px 0 16px;
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--ink-soft);
}
.sign-checklist__mark .ui-icon {
  stroke: #2a3142;
}
.benefit-icon-card__icon:not(.icon-badge) {
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--navy) 8%, white);
}

.clinic-features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.clinic-feature-card {
  padding: 22px 20px;
  border: 1px solid var(--line);
  background: var(--white);
}
.clinic-feature-card__icon {
  margin-bottom: 14px;
}
.clinic-feature-card__icon .ui-icon {
  stroke: #2a3142;
}
.clinic-feature-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--text-sub-sm);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.45;
  text-wrap: balance;
}
.clinic-feature-card p {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.clinic-features-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.clinic-features-stats li {
  padding: 18px 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--navy) 3%, var(--white));
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.clinic-features-stats strong {
  display: block;
  font-family: var(--font-logo);
  font-size: clamp(1.25rem, 2.8vw, 1.625rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1.2;
}
.clinic-features-note {
  margin: 12px 0 0;
  font-size: var(--text-note);
  color: var(--ink-soft);
  line-height: 1.6;
}
#features .facility-phone-note {
  margin-top: 14px;
}
.trouble-facility-link .text-link {
  margin-top: 0;
}

.trust-subhead {
  margin: 28px 0 12px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy-deep);
}
#trust .clinic-features-stats {
  margin-top: 8px;
}
.trust-clinics-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 16px 0 0;
  font-size: var(--text-body);
  line-height: 1.85;
}
.trust-clinics-line a {
  font-weight: 700;
  color: var(--navy-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 28%, transparent);
}
.trust-clinics-line a:hover {
  color: var(--navy);
  border-bottom-color: color-mix(in srgb, var(--navy) 55%, transparent);
}
.trust-clinics-line span {
  font-size: var(--text-body);
  color: var(--ink-soft);
}
.trust-facility {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--white);
}
.trust-facility .trust-subhead {
  margin-top: 0;
}
.trust-facility > p {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
}
.trust-facility .facility-flow {
  margin-top: 14px;
}
.trust-facility .facility-flow li {
  padding: 10px 14px;
  font-size: var(--text-body);
  line-height: 1.85;
}
.trust-facility .facility-phone-note {
  margin-top: 12px;
}
.trust-facility .facility-kasan {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.trust-facility .facility-kasan__lead {
  margin-bottom: 10px;
  font-size: var(--text-body);
}
.trust-facility .facility-kasan__note {
  margin-top: 10px;
  font-size: var(--text-note);
}
.trust-facility .facility-kasan__details summary {
  padding: 12px 40px 12px 14px;
  font-size: var(--text-body);
}

#voices.section--white {
  border-top: 1px solid var(--line);
}
.service-name-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.service-name-list li {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.7;
  color: var(--navy-deep);
}

.clinic-name-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--white);
}
.clinic-name-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-body);
  line-height: 1.65;
}
.clinic-name-list li:last-child {
  border-bottom: 0;
}
.clinic-name-list a {
  font-weight: 700;
  color: var(--navy-deep);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 28%, transparent);
}
.clinic-name-list a:hover {
  color: var(--navy);
  border-bottom-color: color-mix(in srgb, var(--navy) 55%, transparent);
}
.clinic-name-list span {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.flow-faq-teaser {
  padding-block: clamp(40px, 6vw, 56px);
  border-top: 1px solid var(--line);
}
.flow-faq-teaser__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--navy-deep);
}
.flow-faq-teaser__lead {
  margin: 10px 0 20px;
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 40em;
}
.faq-list--teaser {
  max-width: 720px;
}
.flow-faq-teaser__more {
  margin: 16px 0 0;
}
.faq-list--teaser .faq-item {
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.faq-list--teaser .faq-item[open] {
  border-color: color-mix(in srgb, var(--navy) 22%, var(--line));
  background: color-mix(in srgb, var(--navy) 3%, var(--white));
}
.faq-list--teaser .faq-item summary {
  transition: color 0.25s ease;
}
.faq-list--teaser .faq-item[open] summary {
  color: var(--navy-deep);
}
.about-edu__more {
  margin: 14px 0 0;
}
.flow-subpage-teaser {
  margin-top: clamp(20px, 3vw, 28px);
  padding: clamp(16px, 2.5vw, 20px) clamp(18px, 2.5vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--navy) 4%, white);
}
.flow-subpage-teaser h3 {
  margin: 0 0 8px;
  font-size: var(--text-sub-sm);
  font-weight: 700;
  color: var(--ink);
}
.flow-subpage-teaser p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.65;
}
.price-block--compact {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 22px);
}
.faq-topic-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: clamp(18px, 2.5vw, 24px);
}
.faq-topic-links__item {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  background: white;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.faq-topic-links__item:hover {
  border-color: color-mix(in srgb, var(--navy) 35%, var(--line));
  background: color-mix(in srgb, var(--navy) 4%, white);
}

.subpage-link-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.subpage-link-list a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  background: white;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.subpage-link-list a:hover {
  border-color: color-mix(in srgb, var(--navy) 35%, var(--line));
  background: color-mix(in srgb, var(--navy) 4%, white);
}

.faq-category-label {
  margin: 28px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--navy);
}
.faq-list--category {
  margin-top: 12px;
}
.faq-list--category + .faq-category-label {
  margin-top: 36px;
}
.sign-alert-card__icon .ui-icon { stroke: var(--red); }
.sign-alert-card__icon.icon-badge .ui-icon { stroke: color-mix(in srgb, var(--red) 75%, var(--navy)); }

.price-summary-box {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  background: var(--white);
}
.price-summary-box__label {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
}
.price-summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-summary-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--ink-soft);
}
.price-summary-list li:last-child { border-bottom: none; }
.price-summary-list strong { color: var(--navy-deep); font-weight: 700; }
.price-summary-note {
  margin: 12px 0 0;
  font-size: var(--text-note);
  color: var(--ink-soft);
  line-height: 1.65;
}

/* Price breakdown — 診療費 + 指導費 + 治療費（業界標準の目安表） */
.price-breakdown {
  margin-top: clamp(20px, 3vw, 28px);
}
.price-breakdown__intro {
  margin: 0 0 14px;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
}
.price-breakdown-cards {
  display: grid;
  gap: 10px;
}
.price-breakdown-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--white);
  border-top: 2px solid color-mix(in srgb, var(--navy) 35%, var(--line));
}
.price-breakdown-card__label {
  margin: 0;
  font-size: var(--text-note);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
}
.price-breakdown-card__amount {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy-deep);
}
.price-breakdown-card__note {
  margin: 8px 0 0;
  font-size: var(--text-note);
  line-height: 1.65;
  color: var(--ink-soft);
}
.price-breakdown-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  background: var(--white);
}
@media (max-width: 767px) {
  .price-breakdown-table-wrap--desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .price-breakdown-cards {
    display: none;
  }
}
.price-breakdown-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--text-body);
  line-height: 1.6;
}
.price-breakdown-table caption {
  padding: 12px 16px;
  text-align: left;
  font-size: var(--text-note);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--navy) 4%, var(--paper));
}
.price-breakdown-table th,
.price-breakdown-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  /* 3列目は 100字前後の説明文が入る。表の中でも本文として読ませる。 */
  line-height: 1.75;
}
.price-breakdown-table th {
  width: 22%;
  font-weight: 700;
  color: var(--navy-deep);
  background: var(--paper);
}
.price-breakdown-table td:nth-child(2) {
  width: 28%;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.price-breakdown-table tr:last-child th,
.price-breakdown-table tr:last-child td {
  border-bottom: none;
}
.price-breakdown-total {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--navy) 18%, var(--line));
  background: color-mix(in srgb, var(--navy) 5%, var(--white));
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink);
}
.price-breakdown-total strong {
  color: var(--navy-deep);
}
.price-breakdown-external {
  margin: 12px 0 0;
  font-size: var(--text-note);
  line-height: 1.65;
  color: var(--ink-soft);
}
.price-breakdown-external a {
  color: var(--navy);
  font-weight: 600;
}

.about-trust-note {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-left: 3px solid var(--navy);
  background: color-mix(in srgb, var(--navy) 4%, var(--white));
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
}

.facility-points {
  margin: 16px 0 0;
  padding-left: 1.1em;
}
.facility-points li {
  margin-bottom: 8px;
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--ink-soft);
}

.visit-day-flow {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--white);
}
.visit-day-flow h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: var(--text-sub-sm);
  font-weight: 700;
  color: var(--navy-deep);
}
.visit-day-flow ol {
  margin: 0;
  padding-left: 1.25em;
}
.visit-day-flow li {
  margin-bottom: 8px;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
}

.flow-step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  min-width: 48px;
}
.flow-step-icon {
  display: inline-flex;
}
.flow-step-icon.icon-soft {
  width: 44px;
  height: 44px;
}
.flow-step-icon.icon-soft .ui-icon {
  width: 22px;
  height: 22px;
}
.flow-step--has-media {
  grid-template-columns: 56px minmax(0, 1fr) minmax(120px, 180px);
  align-items: center;
}
.flow-step-media {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--white);
}
.flow-step-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.flow-detail {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-detail-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.flow-detail-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.flow-detail-head .flow-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--navy) 20%, var(--line));
  background: var(--paper);
  font-family: var(--font-logo);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.flow-detail-head h2 {
  margin: 0;
  min-width: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy-deep);
  text-wrap: balance;
}
.flow-detail-media,
.flow-detail-body {
  grid-column: 1;
  grid-row: auto;
}
.flow-detail-media {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--white);
  min-width: 0;
}
.flow-detail-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.flow-detail-media__cap {
  padding: 8px 10px;
  font-size: var(--text-note);
  line-height: 1.45;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.flow-meta {
  display: grid;
  gap: 10px;
}
.flow-meta dl {
  margin: 0;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.flow-meta dt {
  margin-bottom: 4px;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
}
.flow-meta dd {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.85;
}
.flow-time {
  margin-top: 10px;
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.6;
  color: color-mix(in srgb, var(--navy) 42%, var(--ink-soft));
}
.flow-detail-body .flow-time {
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.6;
}
.flow-detail-body { min-width: 0; }

@media (min-width: 861px) {
  .flow-detail-item {
    grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
    gap: 20px 24px;
  }
  .flow-detail-item .flow-detail-media { grid-column: 1; grid-row: 2; }
  .flow-detail-item .flow-detail-body { grid-column: 2; grid-row: 2; }
  .flow-detail-item.flow-detail-item--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 240px);
  }
  .flow-detail-item--reverse .flow-detail-media { grid-column: 2; grid-row: 2; }
  .flow-detail-item--reverse .flow-detail-body { grid-column: 1; grid-row: 2; }
  .flow-detail-item--reverse .flow-detail-media img {
    aspect-ratio: 3 / 4;
  }
}

/* Japanese flow copy — natural breaks on mobile */
.flow-step h3,
.flow-step p,
.flow-detail-body h2,
.flow-meta dt,
.flow-meta dd,
.flow-time,
.clinic-feature-card h3,
.clinic-feature-card p {
  overflow-wrap: break-word;
  line-break: auto;
  text-wrap: wrap;
}
.flow-step h3,
.flow-detail-body h2 {
  text-wrap: wrap;
}
.jp-nowrap,
.jp-keep {
  word-break: keep-all;
  white-space: nowrap;
}
/* 2026-10-03 Safari（WebKit）では、nowrap の span が隙間なく並ぶと
   span と span の境目でも改行しない（Chromium は改行する）。
   そのため iPhone では見出し・FAQ の問い・院名が 1 行のまま枠からはみ出し、
   文字が切れたり矢印に重なったりしていた（WebKit 実測で 14 ページ×4 幅に 65 件）。
   inline-block にすると、束ねた文節が 1 つの箱になり、箱と箱の間で必ず折れる。
   束ねる長さは最長 9 字の決まりなので、箱が 1 行に収まらないことは無い。 */
.jp-keep {
  display: inline-block;
}

.flow-detail-strip {
  list-style: none;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.flow-detail-strip .visit-strip { margin-top: 0; }

/* 訪問日の流れ — day-of-visit timeline */
.visit-day-flow {
  margin-top: 36px;
  padding: clamp(22px, 3vw, 28px);
  background: linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--navy) 4%, var(--white)) 100%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius-sm);
}
.visit-day-flow h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sub);
  font-weight: 700;
  color: var(--navy-deep);
}
.visit-day-flow__lead {
  margin: 10px 0 0;
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 44rem;
}
.visit-day-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 16px);
  margin: 24px 0 0;
  position: relative;
}
.visit-day-photo-grid::before {
  content: "";
  position: absolute;
  top: 28%;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(
    90deg,
  color-mix(in srgb, var(--navy) 8%, var(--line)) 0%,
  color-mix(in srgb, var(--navy) 35%, var(--line)) 50%,
  color-mix(in srgb, var(--navy) 8%, var(--line)) 100%
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out) 0.15s;
  pointer-events: none;
  z-index: 0;
}
.visit-day-photo-grid.is-visible::before {
  transform: scaleX(1);
}
.visit-day-photo-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.28s ease, box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.visit-day-photo-card:hover {
  border-color: color-mix(in srgb, var(--navy) 24%, var(--line));
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}
.visit-day-photo-card__media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: color-mix(in srgb, var(--navy) 6%, var(--line));
}
.visit-day-photo-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.02);
  transition: transform 0.55s var(--ease-out), filter 0.4s ease;
}
.visit-day-photo-card:hover .visit-day-photo-card__media img {
  transform: scale(1.05);
  filter: saturate(1) contrast(1.05);
}
.visit-day-photo-card__body {
  padding: clamp(12px, 2vw, 16px) clamp(12px, 2vw, 14px) clamp(14px, 2vw, 18px);
}
.visit-day-photo-card__step {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--text-note);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
  background: color-mix(in srgb, var(--navy) 8%, white);
  border: 1px solid color-mix(in srgb, var(--navy) 14%, var(--line));
  border-radius: 999px;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.visit-day-photo-card:hover .visit-day-photo-card__step {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.visit-day-photo-card h4 {
  margin: 6px 0 4px;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy-deep);
}
.visit-day-photo-card p {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-soft);
}
.visit-day-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.visit-day-timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 28%, var(--line)) 100%);
  pointer-events: none;
}
.visit-day-step {
  position: relative;
  z-index: 1;
  padding: 12px 10px 14px;
  text-align: center;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--navy) 10%, var(--line));
  box-shadow: 0 4px 16px rgba(9, 17, 60, 0.04);
}
.visit-day-step__node {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.visit-day-step__dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--navy);
  font-family: var(--font-logo);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 4px 12px rgba(1, 73, 154, 0.12);
}
.visit-day-step__body h4 {
  margin: 0 0 6px;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.4;
}
.visit-day-step__body p {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-soft);
}
.visit-day-flow__note {
  margin: 20px 0 0;
}
.visit-day-flow__note .text-link {
  margin-top: 0;
  font-size: var(--text-note);
}

.price-cta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 22px);
  border: 1px solid color-mix(in srgb, var(--navy) 18%, var(--line));
  background: color-mix(in srgb, var(--navy) 4%, white);
}
.price-cta-bar__content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 240px;
  min-width: 0;
}
.price-cta-bar__text {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-soft);
}
.price-cta-bar .btn {
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .price-cta-bar {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    min-width: 0;
  }
  .price-cta-bar__content {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
  }
  .price-cta-bar__text {
    max-width: 100%;
    min-width: 0;
  }
  .price-cta-bar .btn {
    width: 100%;
    justify-content: center;
    min-width: 0;
  }
}
.cost-factor-card__icon .ui-icon {
  stroke: #2a3142;
}
.price-preview-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.price-preview-row figure {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}
.price-preview-row img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.price-preview-row p {
  margin: 0 0 12px;
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.85;
}

.insurance-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.insurance-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  background: var(--white);
}
.insurance-card__icon {
  display: inline-flex;
}
.insurance-card:nth-child(1) .insurance-card__icon { --icon-soft-bg: #a8d4f5; }
.insurance-card:nth-child(2) .insurance-card__icon { --icon-soft-bg: #f5d4b8; }
.insurance-card:nth-child(3) .insurance-card__icon { --icon-soft-bg: #e8c4d8; }
.insurance-card:nth-child(4) .insurance-card__icon { --icon-soft-bg: #b8e8d4; }
.insurance-card__icon .ui-icon {
  stroke: #2a3142;
}
.insurance-card strong {
  font-size: 1.0625rem;
  color: var(--navy-deep);
}
.insurance-card p {
  margin: 0;
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.85;
}

.sim-result-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 767px) {
  .sim-result-cards {
    grid-template-columns: 1fr;
  }
  .sim-result-card p {
    font-size: var(--text-body);
    line-height: 1.65;
  }
}
.sim-result-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--white);
}
.sim-result-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--navy) 8%, white);
}
.sim-result-card p {
  margin: 0;
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.65;
}
.sim-result-note {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 14px 16px;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--navy-deep);
  background: color-mix(in srgb, var(--navy) 6%, white);
  border: 1px solid var(--line);
}
.voice-avatar {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--navy);
}
.voice-card .voice-tag { margin-bottom: 10px; }
.voice-card__scene-meta .voice-tag {
  margin: 0;
}

@media (max-width: 860px) {
  .about-split { grid-template-columns: 1fr; }
  .benefit-photo-grid,
  .visit-day-photo-grid,
  .benefit-icon-grid,
  .clinic-features-grid,
  .clinic-features-stats,
  .sign-alert-cards,
  .cost-factor-cards,
  .insurance-card-grid,
  .sim-result-cards,
  .voices-grid {
    grid-template-columns: 1fr;
  }
  .clinic-features-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-name-list {
    grid-template-columns: 1fr;
  }
  .clinic-name-list li {
    padding: 14px 16px;
  }
  .flow-list {
    padding-left: 0;
    counter-reset: flow;
  }
  .flow-list::before,
  .flow-list::after {
    display: none;
  }
  .flow-step,
  .flow-step--has-media {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    counter-increment: flow;
  }
  .flow-step-marker {
    display: none;
  }
  .flow-step > div {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
  }
  .flow-step h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    text-wrap: balance;
  }
  .flow-step h3::before {
    content: counter(flow);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--navy) 20%, var(--line));
    background: var(--paper);
    font-family: var(--font-logo);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
  }
  .flow-step-media {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    max-width: 100%;
  }
  .price-preview-row { grid-template-columns: 1fr; }
  .contact-visual { max-width: none; }
}

.btn {
  touch-action: manipulation;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(9, 17, 60, 0.12);
}
.btn:active { transform: translateY(0); box-shadow: none; }

/* ── Skip link ── */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  padding: 12px 20px;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--white);
  background: var(--navy);
  border-radius: 0 0 var(--radius-sm) 0;
  transform: translateY(-120%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ── Focus visible (keyboard users) ── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.has-cinema-hero .site-header:not(.is-scrolled) .nav-toggle:focus-visible,
.has-cinema-hero .site-header:not(.is-scrolled) .logo:focus-visible {
  outline-color: var(--white);
}
.btn:focus-visible {
  outline-color: var(--red);
  outline-offset: 3px;
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Anchor scroll offset (sticky header) ── */
main,
section[id],
.page-hero {
  scroll-margin-top: 72px;
}

/* ── Text link pattern ── */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--navy);
  /* タップ領域を 44px（Apple HIG 最小）に。以前は 28〜29px しかなかった。
     ::after は矢印「→」に使っているため、下線は background で描く。
     こうすると padding を足しても下線が文字から離れない。 */
  padding: 12px 0;
  border-bottom: none;
  background-image: linear-gradient(color-mix(in srgb, var(--navy) 40%, transparent),
                                    color-mix(in srgb, var(--navy) 40%, transparent));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 10px);
  transition: background-image 0.2s ease-out, color 0.2s ease-out, gap 0.25s var(--ease-out);
}
.text-link::after {
  content: "→";
  transition: transform 0.25s var(--ease-out);
}
/* 2026-10-04 本文 20px にしたら、320〜360px で「郵便番号でお伺いできるか調べ／る」と
   折れ、矢印だけが右端へ離れた（inline-flex のため、折れた文字列が 1 つの箱になり、
   矢印はその横に並ぶ）。inline-block にして矢印を最後の字のすぐ後ろへ流し込み、
   折れるときは balance で 2 行の長さをそろえる。矢印の前は改行させない（\00a0）。 */
.text-link {
  display: inline-block;
  max-width: 100%;
  text-wrap: balance;
}
.text-link::after {
  content: "\00a0→";
  display: inline-block;
}
.text-link:hover {
  color: var(--navy-deep);
  background-image: linear-gradient(var(--navy), var(--navy));
}
.text-link:hover::after {
  transform: translateX(3px);
}
.text-link--spaced { margin-top: 24px; }

/* ── Clinic photo crop helpers ── */
.clinic-thumb--otemachi img { object-position: center 16%; }
.clinic-thumb--ogawamachi img { object-position: center 40%; }
.clinic-thumb--toranomon img { object-position: center 48%; }
.clinic-thumb--takada88 img { object-position: center 46%; }
.clinic-thumb--takadanobaba img { object-position: center 52%; }
.hero-pos--otemachi { object-position: center 16%; }
.hero-pos--ogawamachi { object-position: center 40%; }
.hero-pos--toranomon { object-position: center 48%; }
.hero-pos--reception { object-position: center 35%; }
.hero-pos--takada88 { object-position: center 46%; }
.hero-pos--takadanobaba { object-position: center 52%; }
.feature-pos--otemachi { object-position: center 20%; }
.feature-pos--ogawamachi { object-position: center 35%; }
.feature-pos--toranomon { object-position: center 40%; }
.feature-pos--takada88 { object-position: center 45%; }
.feature-pos--takadanobaba { object-position: center 50%; }

.clinic-hub-title {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}
.clinic-hub-lead {
  margin-top: 20px;
}
.area-map-figure--compact {
  max-width: 520px;
}
.area-map-figure {
  border: none;
  box-shadow: 0 8px 32px rgba(9, 17, 60, 0.08);
}
.area-map-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  background: #eef2f7;
}
.area-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: center;
  padding: 12px 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  background: var(--white);
}
@media (max-width: 640px) {
  .area-map-legend {
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.75rem;
  }
}
.area-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.area-map-legend__zone,
.area-map-legend__dot {
  display: inline-block;
  flex-shrink: 0;
}
.area-map-legend__zone {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--navy) 14%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--navy) 45%, transparent);
}
.area-map-legend__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.area-map-legend__swatch--center {
  background: #B8D4EA;
  border: 1px solid color-mix(in srgb, var(--navy) 45%, transparent);
}
.area-map-legend__swatch--consult {
  background: #E8EDF4;
  border: 1px solid #9AA8BC;
}
.area-map-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--navy);
}
.area-map-figure--pulse {
  animation: area-map-pulse 0.9s var(--ease-out);
}
@keyframes area-map-pulse {
  0%, 100% { box-shadow: none; }
  40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }
}
.area-disclaimer {
  margin: 16px 0 0;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
}
.area-clinic-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
  margin-bottom: 20px;
}
.area-clinic-pick label {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--navy-deep);
}
.area-clinic-pick select {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.area-live-map-block {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.area-live-map-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.area-live-map-shell--area,
.area-live-map-shell--premium {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(12px, 1.8vw, 16px);
  background: var(--white);
}
.area-premium > .area-live-map-shell {
  margin: 0;
  border: none;
  padding: 0;
  background: transparent;
}
.area-premium .area-live-map--premium {
  height: min(440px, 58vh);
  min-height: 300px;
  margin-top: 0;
  border: none;
  box-shadow: 0 8px 32px rgba(9, 17, 60, 0.08);
}
.area-live-map-shell .area-live-map {
  margin-top: 0;
}
.area-live-map__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.area-live-map__btn {
  /* 拠点を選ぶボタン。押す対象なので 13px では 70代には狙えない。
     文字 16px＋上下 12px で、タップ判定を 44px 以上にする。 */
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-deep);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.area-live-map__btn:hover {
  border-color: color-mix(in srgb, var(--navy) 28%, var(--line));
  background: color-mix(in srgb, var(--navy) 5%, var(--white));
}
.area-live-map__btn.is-active {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}
.area-live-map__btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.area-live-map__theme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.area-live-map__theme-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-right: 2px;
}
.area-live-map__theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-family: var(--font-body);
  font-size: var(--text-note);
  font-weight: 600;
  color: var(--navy-deep);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.area-live-map__theme-btn:hover {
  border-color: color-mix(in srgb, var(--navy) 24%, var(--line));
  background: color-mix(in srgb, var(--navy) 4%, var(--white));
}
.area-live-map__theme-btn.is-active {
  color: var(--navy);
  border-color: color-mix(in srgb, var(--navy) 42%, var(--line));
  background: color-mix(in srgb, var(--navy) 8%, var(--white));
}
.area-live-map__theme-btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.area-live-map__theme-swatch {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(9, 17, 60, 0.14);
  flex-shrink: 0;
}
.area-live-map__status {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.area-live-map__note {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.area-live-map-shell--pulse {
  animation: area-map-pulse 0.55s ease-out;
}
@keyframes area-map-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--navy) 35%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
.area-live-map {
  height: min(420px, 62vh);
  min-height: 280px;
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--navy) 14%, var(--line));
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--map-bg-tint, #eef2f7);
  touch-action: pan-x pan-y;
  contain: layout style;
}
/* 地図カラー — 下のボタンで切り替え */
.area-live-map--theme-natural {
  --map-bg-tint: #eef2f7;
  --map-tile-filter: none;
}
.area-live-map--theme-soft-blue {
  --map-bg-tint: #d4e8f4;
  --map-tile-filter: saturate(0.92) brightness(1.03) hue-rotate(172deg) sepia(0.08);
}
.area-live-map--theme-paper {
  --map-bg-tint: #f5f0ea;
  --map-tile-filter: saturate(0.62) brightness(1.04) sepia(0.14);
}
.area-live-map--theme-cool-gray {
  --map-bg-tint: #eceef2;
  --map-tile-filter: saturate(0.28) brightness(1.07);
}
.area-live-map--theme-ocean {
  --map-bg-tint: #dbeaf4;
  --map-tile-filter: saturate(0.55) brightness(1.08) hue-rotate(195deg);
}
.area-live-map--clinic {
  max-width: 520px;
  margin-top: 20px;
}
.area-live-map__attrib {
  margin: 8px 0 0;
  font-size: var(--text-note);
  color: var(--ink-soft);
}
.area-live-map__fallback {
  margin: 0;
  padding: 24px 16px;
  font-size: var(--text-body);
  color: var(--ink-soft);
  text-align: center;
}
.area-live-map .leaflet-control-attribution {
  font-size: var(--text-note);
  background: color-mix(in srgb, var(--map-bg-tint, #c5dde9) 88%, transparent);
}
.area-live-map .leaflet-tile-pane {
  filter: var(--map-tile-filter, none);
}
.area-live-map .leaflet-control-zoom a {
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy-deep);
  border-color: color-mix(in srgb, var(--navy) 18%, var(--line));
}
.area-live-map .leaflet-control-zoom a:hover {
  background: #fff;
  color: var(--navy);
}
.area-live-map .leaflet-overlay-pane svg path.hamille-radius-circle {
  stroke: #4a8fc4;
  stroke-width: 2.5;
  stroke-opacity: 0.85;
  fill: #a8d4ea;
  fill-opacity: 0.55;
}
/* Leaflet 既定の .leaflet-div-icon は白背景＋灰枠。
   divIcon で作る院ピンに白い四角が出るため打ち消す。
   （セレクタが欠落した宣言ブロックになっていたのを復元） */
.area-live-map .leaflet-div-icon,
.hamille-map-pin-wrap {
  background: transparent;
  border: none;
}
.hamille-map-pin {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}
.hamille-map-pin__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--navy);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(9, 17, 60, 0.28);
}
.hamille-map-pin--focus {
  position: relative;
  width: 56px;
  height: 56px;
}
.hamille-map-pin__halo {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(158, 202, 232, 0.42);
  box-shadow: 0 0 0 6px rgba(180, 214, 238, 0.28);
}
.hamille-map-pin__ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid #fff;
  box-shadow: 0 4px 18px rgba(9, 17, 60, 0.34);
}
.hamille-map-pin__logo {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 38%, #fff 0 34%, transparent 36%),
    radial-gradient(circle at 38% 62%, transparent 0 38%, #fff 40% 100%);
}
.hamille-map-pin--focus .hamille-map-pin__logo {
  width: 19px;
  height: 19px;
}
/* Interactive schematic map — one circle at a time */
.area-interactive-map {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: 0 10px 36px rgba(9, 17, 60, 0.07);
  overflow: hidden;
}
.area-interactive-map--premium {
  margin: 0;
  border: none;
  box-shadow: 0 8px 32px rgba(9, 17, 60, 0.08);
}
.area-interactive-map--pulse {
  animation: area-map-pulse 0.55s ease-out;
}
.area-premium > .area-interactive-map {
  align-self: stretch;
}
.area-interactive-map__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fafbfc 0%, #f4f7fa 100%);
}
.area-interactive-map__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-deep);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--navy) 18%, var(--line));
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.area-interactive-map__btn:hover {
  border-color: color-mix(in srgb, var(--navy) 40%, var(--line));
  box-shadow: 0 2px 8px rgba(1, 73, 154, 0.08);
}
.area-interactive-map__btn.is-active {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(1, 73, 154, 0.28);
}
.area-interactive-map__btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.area-interactive-map__stage {
  background: #eef3f8;
  line-height: 0;
  overflow: hidden;
}
.area-interactive-map--has-active .area-interactive-map__stage {
  min-height: 220px;
}
.area-interactive-map__svg {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  transition: opacity 0.3s ease;
}
.area-interactive-map__radius {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.area-interactive-map__radius.is-on {
  opacity: 1;
}
.area-interactive-map__region text {
  pointer-events: none;
  user-select: none;
}
.area-interactive-map__regions--dimmed .area-interactive-map__region {
  opacity: 0.72;
  transition: opacity 0.35s ease;
}
.area-interactive-map--has-active .area-interactive-map__regions--dimmed .area-interactive-map__region--center {
  opacity: 0.88;
}
.area-interactive-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.area-interactive-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.area-interactive-map__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.area-interactive-map__swatch--center {
  background: #B8D4EA;
  border: 1px solid rgba(1, 73, 154, 0.35);
}
.area-interactive-map__swatch--consult {
  background: #E8EDF4;
  border: 1px solid #9AA8BC;
}
.area-interactive-map__swatch--radius {
  background: rgba(1, 73, 154, 0.12);
  border: 1.5px dashed rgba(1, 73, 154, 0.45);
  border-radius: 50%;
}
.area-interactive-map__swatch--pin {
  background: #01499A;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(1, 73, 154, 0.25);
}
.area-interactive-map__pin {
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.area-interactive-map__pin.is-on {
  opacity: 1;
}
.area-interactive-map__status {
  margin: 0;
  padding: 12px 16px 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.5;
  border-top: 1px solid var(--line);
}
.area-interactive-map__note {
  margin: 6px 0 0;
  padding: 0 16px 14px;
  font-size: var(--text-note);
  line-height: 1.6;
  color: var(--ink-soft);
}
.area-premium .area-interactive-map {
  margin: 0;
  border: none;
  box-shadow: none;
}
.area-map-figure--interactive .area-interactive-map {
  border: none;
}
.area-interactive-map--clinic {
  max-width: 560px;
}

/* ── Mobile nav ── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-deep);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}
.nav-toggle:hover {
  background: color-mix(in srgb, var(--navy) 5%, var(--white));
  border-color: color-mix(in srgb, var(--navy) 25%, var(--line));
}
.nav-toggle__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
}
.nav-toggle__bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-btn);
  transition: transform 0.25s var(--ease-out), opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.has-cinema-hero .site-header:not(.is-scrolled) .nav-toggle {
  border-color: rgba(253, 253, 253, 0.35);
  background: rgba(253, 253, 253, 0.12);
  color: var(--white);
}
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 44;
  background:
    linear-gradient(135deg, rgba(9, 17, 60, 0.62) 0%, rgba(1, 73, 154, 0.28) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s ease;
}
.nav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}
body.nav-open {
  overflow: hidden;
}

/* Desktop: mobile panel chrome off, horizontal nav only */
@media (min-width: 861px) {
  .nav.nav--panel {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px clamp(10px, 1.2vw, 18px);
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
    left: auto;
    top: auto;
  }
  .nav-panel__head,
  .nav-panel__foot {
    display: none !important;
  }
  .nav-panel__links {
    display: flex;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px clamp(10px, 1.2vw, 18px);
    min-height: 0;
    overflow: visible;
    padding: 0;
    counter-reset: none;
  }
  .nav-panel__links a {
    position: static;
    display: inline;
    min-height: 0;
    padding: 4px 0;
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1rem);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-soft);
    border-bottom: none;
    background: transparent;
    transition: color 0.2s ease;
  }
  .nav-panel__links a::before,
  .nav-panel__links a::after {
    content: none !important;
    display: none !important;
  }
  .nav-panel__links a:hover,
  .nav-panel__links a:focus-visible {
    padding-left: 0;
    color: var(--navy);
    background: transparent;
  }
  .nav-panel__links a[aria-current="page"] {
    color: var(--navy);
    font-weight: 700;
    background: transparent;
  }
  .has-cinema-hero .site-header:not(.is-scrolled) .nav-panel__links a {
    color: rgba(253, 253, 253, 0.88);
  }
  .has-cinema-hero .site-header:not(.is-scrolled) .nav-panel__links a:hover,
  .has-cinema-hero .site-header:not(.is-scrolled) .nav-panel__links a:focus-visible,
  .has-cinema-hero .site-header:not(.is-scrolled) .nav-panel__links a[aria-current="page"] {
    color: var(--white);
  }
}

@media (max-width: 860px) {
  .site-header {
    backdrop-filter: none;
  }
  .nav-toggle {
    display: flex;
  }
  .nav.nav--panel {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    z-index: 47;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: min(360px, 92vw);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    background: var(--paper);
    border-left: none;
    box-shadow: -20px 0 56px rgba(9, 17, 60, 0.22);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.42s var(--ease-out), visibility 0s 0.42s, pointer-events 0s 0.42s;
    /* overflow:hidden だと横向き（100dvh≈375px）でパネル下部の
       電話・Web予約 CTA が切れたまま操作できなくなる。
       内容が収まるときはスクロールバーも出ないので見た目は変わらない。 */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav.nav--panel[hidden] {
    display: none !important;
  }
  .nav.nav--panel.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.42s var(--ease-out), visibility 0s, pointer-events 0s;
  }
  .nav-panel__head {
    position: relative;
    flex-shrink: 0;
    padding: calc(20px + env(safe-area-inset-top)) 24px 22px;
    background:
      linear-gradient(165deg, var(--navy-deep) 0%, color-mix(in srgb, var(--navy) 88%, var(--navy-deep)) 100%);
    color: var(--white);
    border-bottom: 1px solid rgba(253, 253, 253, 0.12);
  }
  .nav-panel__head::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--navy) 0%, rgba(253, 253, 253, 0.35) 50%, var(--navy) 100%);
    opacity: 0.65;
  }
  .nav-panel__brand {
    padding-right: 44px;
  }
  .nav-panel__wordmark {
    margin: 0;
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: clamp(1.625rem, 7vw, 2rem);
    letter-spacing: 0.22em;
    line-height: 1;
    color: var(--logo-on-dark);
  }
  .nav-panel__sub {
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--logo-sub-on-dark);
  }
  .nav-panel__arc {
    display: block;
    width: min(160px, 52%);
    height: 12px;
    margin-top: 12px;
    color: rgba(253, 253, 253, 0.45);
  }
  .nav-panel__close {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(253, 253, 253, 0.28);
    border-radius: var(--radius-sm);
    background: rgba(253, 253, 253, 0.08);
    color: var(--white);
    cursor: pointer;
    touch-action: manipulation;
  }
  .nav-panel__close span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: var(--radius-btn);
  }
  .nav-panel__close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .nav-panel__close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .nav-panel__links {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
    counter-reset: nav-link;
  }
  .nav-panel__links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 10px 24px 10px 20px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--navy-deep);
    border-bottom: 1px solid color-mix(in srgb, var(--navy) 8%, var(--line));
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s var(--ease-out);
  }
  .nav-panel__links a::before {
    counter-increment: nav-link;
    content: counter(nav-link, decimal-leading-zero);
    flex-shrink: 0;
    width: 28px;
    font-family: var(--font-logo);
    font-size: var(--text-note);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--navy) 55%, var(--ink-soft));
  }
  .nav-panel__links a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--navy);
    transform: translateY(-50%);
    transition: height 0.22s var(--ease-out);
  }
  .nav-panel__links a:hover,
  .nav-panel__links a:focus-visible {
    padding-left: 24px;
    color: var(--navy);
    background: color-mix(in srgb, var(--navy) 6%, var(--white));
  }
  .nav-panel__links a:hover::after,
  .nav-panel__links a:focus-visible::after {
    height: 24px;
  }
  .nav-panel__links a[aria-current="page"] {
    color: var(--navy);
    background: color-mix(in srgb, var(--navy) 9%, var(--white));
  }
  .nav-panel__links a[aria-current="page"]::after {
    height: 32px;
  }
  .nav-panel__foot {
    flex-shrink: 0;
    padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(9, 17, 60, 0.06);
  }
  .nav-panel__foot-label {
    margin: 0 0 12px;
    font-size: var(--text-note);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--navy);
  }
  .nav-panel__foot .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
  .nav-panel__cta-phone {
    margin-bottom: 8px;
  }
  .nav-panel__cta-web {
    font-size: var(--text-body);
  }
  /* Legacy flat nav fallback (before JS enhance) */
  .nav:not(.nav--panel) {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    z-index: 47;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: min(320px, 88vw);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: calc(64px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom));
    background: var(--white);
    border-left: 1px solid var(--line);
    box-shadow: -12px 0 40px rgba(9, 17, 60, 0.14);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s var(--ease-out), visibility 0s 0.35s, pointer-events 0s 0.35s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav:not(.nav--panel)[hidden] {
    display: none !important;
  }
  .nav:not(.nav--panel).is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.35s var(--ease-out), visibility 0s, pointer-events 0s;
  }
  .nav:not(.nav--panel) a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .nav:not(.nav--panel) a:hover,
  .nav:not(.nav--panel) a[aria-current="page"] {
    color: var(--navy);
    background: color-mix(in srgb, var(--navy) 4%, var(--white));
  }
  .has-cinema-hero .nav a {
    color: var(--ink);
  }
}

/* ── Large screens ── */
@media (min-width: 1280px) {
  :root {
    --wrap-max: 1280px;
    --gutter-inline: clamp(32px, 3vw, 56px);
  }
  .hero-cinema__inner {
    gap: clamp(40px, 5vw, 80px);
  }
}

@media (min-width: 1536px) {
  :root {
    --wrap-max: 1360px;
    --gutter-inline: clamp(40px, 3vw, 64px);
  }
}

/* ── Small phones (iPhone 15/16 ≈ 393px) ── */
@media (max-width: 480px) {
  :root {
    --gutter-inline: 14px;
  }
  .section--white { padding-block: clamp(34px, 5.5vw, 46px); }
  .section--paper { padding-block: clamp(36px, 6vw, 52px); }
  .section { padding-block: clamp(36px, 6vw, 52px); }
  .trust-ribbon__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .trust-ribbon__item {
    justify-content: center;
    padding: 12px 8px;
    font-size: var(--text-note);
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
  .trust-ribbon__item:not(:last-child)::after {
    display: none;
  }
  .hero-cinema__copy .hero-actions .btn {
    width: 100%;
    min-width: 0;
  }
  .clinic-row-body {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-split__slide,
  .hero-map-slide,
  .hero-split__dot {
    transition: none !important;
  }
  .hero-map-schematic__route {
    animation: none !important;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .hero-map-schematic--flyin {
    opacity: 1 !important;
    animation: none !important;
  }
  .hero-map-slide.is-active .hero-map-slide__photo {
    animation: none !important;
    filter: brightness(0.9);
  }
  .hero-map-slide.is-active .hero-map-schematic__traveler {
    animation: none !important;
    opacity: 1;
  }
  .hero-map-schematic__traveler {
    display: none;
  }
  .visit-photo-stack__card:not(.is-visible) {
    display: none;
  }
  .visit-photo-stack__card.is-visible:not([data-depth="0"]) {
    display: none;
  }
  .visit-photo-stack__card.is-visible[data-depth="0"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-cinema__media img,
  .hero-cinema__inner,
  .hero-cinema__scroll,
  .reveal, .reveal-stagger > *,
  .visit-day-photo-grid::before,
  .btn:hover,
  .nav {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .nav-backdrop {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .nav.nav--panel:not(.is-open) {
    transform: translateX(100%) !important;
    pointer-events: none !important;
  }
  .nav.nav--panel.is-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  .nav:not(.nav--panel):not(.is-open) {
    transform: translateX(100%) !important;
    pointer-events: none !important;
  }
  .nav:not(.nav--panel).is-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  .nav-backdrop:not(.is-visible) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .nav-backdrop.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .flow-list::after { display: none; }
}

@media (max-width: 860px) {
  .hero-map-schematic--flyin {
    top: 54%;
    bottom: auto;
    right: clamp(8px, 2.5vw, 12px);
    width: clamp(148px, 42vw, 176px);
    padding: 6px;
    transform: translate(36%, calc(-50% + 16px)) scale(0.58);
  }
  .hero-map-slide.is-active .hero-map-schematic--flyin {
    animation: hero-map-flyin-mobile var(--hero-cycle, 4.5s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero-map-schematic--flyin .hero-map-schematic__legend--dual {
    font-size: 0.75rem;
    grid-template-columns: auto auto 1fr 1fr;
  }
  .hero-split__copy .hero-actions {
    flex-direction: column;
  }
  .hero-split__copy .hero-actions .btn-web {
    display: none;
  }
  .hero-split__copy .hero-actions .btn {
    width: 100%;
    min-width: 0;
  }
  .br-sm-only {
    display: inline;
  }
  .visit-day-photo-grid {
    grid-template-columns: 1fr 1fr;
  }
  .visit-day-photo-grid::before {
    display: none;
  }
  .visit-day-timeline {
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
  }
  .visit-day-timeline::before {
    display: none;
  }
  .visit-day-step {
    border-radius: var(--radius-card);
  }
  .area-interactive-map__stage {
    min-height: 210px;
  }
  .area-interactive-map--has-active .area-interactive-map__stage {
    min-height: 250px;
  }
  .hero-cinema__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 96px;
  }
  .hero-cinema__brand .wordmark { letter-spacing: 0.12em; font-size: clamp(2.25rem, 10vw, 3.25rem); }
  .hero-cinema__copy .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
  }
  .hero-cinema__copy .hero-actions .btn-web {
    display: none;
  }
  .hero-cinema__copy .hero-trust-badges { display: none; }
  .hero-cinema__scroll { display: none; }
}

@media (max-width: 860px) {
  .section-head {
    padding-left: 0;
  }
  .section-head::before {
    position: static;
    display: block;
    margin-bottom: 8px;
    font-size: 1.75rem;
  }
  .section-head .section-title {
    max-width: none;
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .hero-map-schematic--flyin {
    top: 54%;
    bottom: auto;
    transform: translate(0, -50%) !important;
  }
}

/* Visual finish — type rhythm, figures, de-template cards */
.section-head { margin-bottom: clamp(16px, 2.2vw, 24px); }

.about-split__photo img,
.visit-strip img,
.flow-step-media img,
.flow-detail-media img,
.contact-visual img,
.figure-premium img,
.service-visual img {
  filter: saturate(0.94) contrast(1.02);
}

.about-split__photo figcaption,
.visit-strip figcaption,
.figure-premium figcaption {
  font-size: 0.75rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

/* AI / イメージ写真 — 纪实感降级（颗粒、略降饱和、避免「塑料皮肤」） */
.photo-editorial {
  position: relative;
  isolation: isolate;
}
.photo-editorial img {
  filter: saturate(0.88) contrast(1.06) brightness(1.02);
}
.photo-editorial::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.service-showcase__hero.photo-editorial img {
  filter: saturate(0.88) contrast(1.06) brightness(1.02);
}
.benefit-icon-card__icon .ui-icon { width: 18px; height: 18px; }

.visit-strip figure:hover,
.contact-visual figure:hover {
  transform: none;
  box-shadow: none;
}
.visit-strip figure:hover img,
.contact-visual figure:hover img {
  transform: none;
}

.contact-visual figure {
  box-shadow: none;
  border: 1px solid color-mix(in srgb, white 15%, var(--line));
}

.cost-factor-card,
.insurance-card,
.sim-result-card {
  border-radius: 2px;
  box-shadow: none;
}

/* ── Plan E: visit-diff / trouble hub (MO-B) / matcher ── */
.visit-only-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 10px 16px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--navy-deep);
  background: color-mix(in srgb, var(--navy) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--navy) 22%, var(--line));
  border-radius: var(--radius-card);
}
.visit-only-badge strong { color: var(--navy); font-weight: 700; }

.diff-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.diff-col {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--white);
}
.diff-col--visit {
  border-color: color-mix(in srgb, var(--navy) 35%, var(--line));
  box-shadow: var(--shadow-soft);
}
.diff-col__head {
  padding: 11px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.diff-col--visit .diff-col__head {
  background: color-mix(in srgb, var(--navy) 10%, var(--white));
  color: var(--navy);
}
.diff-col ul {
  margin: 0;
  padding: 14px 16px 16px;
  list-style: none;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-soft);
}
.diff-col ul li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.diff-col ul li:last-child { border-bottom: none; }
.diff-foot {
  margin: 0;
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.65;
}

.visit-strength-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.visit-strength-card {
  padding: 14px 12px;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.45;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.visit-strength-card span {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.trouble-tile:hover,
.trouble-tile.is-active:hover {
  box-shadow: 0 8px 22px rgba(1, 73, 154, 0.1);
  transform: translateY(-2px);
}
/* 選択中であることが 1px の枠色差では伝わらなかった。
   紺の枠 2px ＋ 下辺の帯で「いまこれを見ている」を明示する。 */
.trouble-tile.is-active {
  border-color: var(--navy);
  border-width: 2px;
  padding: calc(var(--trouble-tile-pad, 8px) - 1px);
  background: color-mix(in srgb, var(--ill-bg) 22%, var(--white));
  box-shadow: 0 10px 26px rgba(1, 73, 154, 0.16);
  transform: translateY(-1px);
}
.trouble-tile.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 34px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 2px 2px 0 0;
  background: var(--navy);
}
.trouble-tile { position: relative; }

/* 補助ヒント — セクションリードより一段小さく（視覚の主役にしない） */
.ui-callout-hint {
  margin: 0 0 14px;
  padding: 8px 12px;
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.6;
  color: color-mix(in srgb, var(--navy) 38%, var(--ink-soft));
  background: color-mix(in srgb, var(--navy) 4%, var(--white));
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--navy) 10%, var(--line));
}

/* お悩み帯 — 西村寄せの淡ブルー面 */
.section--trouble {
  background: linear-gradient(180deg, #eef4fb 0%, #f7f9fc 48%, var(--white) 100%);
  padding-top: var(--space-section-y-compact);
  padding-bottom: var(--space-section-y-compact);
}
.section--trouble::before { opacity: 0.12; }

.section-head--compact { margin-bottom: var(--space-stack-sm); }
.section-head--compact .section-title {
  font-size: clamp(1.2rem, 2.8vw, 1.55rem);
  max-width: 28em;
}
.section-lead--compact {
  margin-top: var(--space-stack-sm);
  margin-bottom: var(--space-stack);
  max-width: 36em;
  font-size: var(--text-lead);
  line-height: 1.9;
  color: var(--ink-soft);
  font-weight: 400;
}
.trouble-detail.is-updating {
  animation: trouble-detail-in 0.4s var(--ease-out);
}
@keyframes trouble-detail-in {
  from { opacity: 0.6; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.consult-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.quick-check-card__go .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}
.quick-check-card:hover .quick-check-card__go .arrow {
  transform: translateX(4px);
}

/* ご依頼の流れ — 横ジャーニー（5ステップ） */
.flow-journey {
  counter-reset: fj;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 12px);
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  align-items: stretch;
}
.flow-journey::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--navy) 12%, var(--line)) 0%,
    color-mix(in srgb, var(--navy) 45%, var(--line)) 50%,
    color-mix(in srgb, var(--navy) 12%, var(--line)) 100%
  );
  pointer-events: none;
}
.flow-journey__step {
  counter-increment: fj;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 10px 16px;
  text-align: center;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--navy) 10%, var(--line));
  box-shadow: 0 6px 20px rgba(9, 17, 60, 0.04);
}
.flow-journey__node {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
/* 番号を節点そのものにする（2026-08-21）。
   もとは 44px のアイコンの脇に 22px の小さな番号を添えていたが、
   線画アイコンは 26px では細部がつぶれ、赤い差し色だけが目立って
   主役を奪っていた。対標のさくら歯科も、流れは ①②③④ と写真で見せていて
   アイコンは使っていない。番号は「5 つが順に進む」という情報そのものなので、
   これを節点として立てるほうが素直。 */
.flow-journey__node::before {
  content: counter(fj);
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 4px 14px rgba(1, 73, 154, 0.22);
}
.flow-journey__step h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: var(--text-sub-sm);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.35;
  text-wrap: balance;
}
.flow-journey__step p {
  margin: 0;
  flex: 1;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.visit-limits {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--navy) 4%, var(--white));
  border: 1px solid color-mix(in srgb, var(--navy) 14%, var(--line));
}
.visit-limits__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--navy-deep);
}
.visit-limits__list {
  margin: 0 0 10px;
  padding-left: 1.2em;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-soft);
}
.visit-limits__list li { margin-bottom: 4px; }
.visit-limits__note {
  margin: 0;
  font-size: var(--text-note);
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 767px) {
  .consult-entry-grid { grid-template-columns: 1fr; }
  .flow-journey {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 20px;
  }
  .flow-journey::before {
    display: none;
  }
  .flow-journey__step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 12px;
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    border: none;
  }
  .flow-journey__step:first-child {
    border-top: 1px solid var(--line);
  }
  .flow-journey__node {
    margin-bottom: 0;
    align-items: center;
  }
  .flow-journey__step h3,
  .flow-journey__step p {
    grid-column: 2;
  }
  .flow-journey__step h3 {
    margin-bottom: 4px;
  }
  .visit-day-timeline {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 16px;
  }
  .visit-day-timeline::before {
    display: none;
  }
  .visit-day-step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 12px;
    padding: 14px 12px;
    text-align: left;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
  }
  .visit-day-step:first-child {
    border-top: 1px solid var(--line);
  }
  .visit-day-step__node {
    margin-bottom: 0;
    align-items: center;
  }
  .visit-day-step__body {
    grid-column: 2;
  }
  .area-live-map__theme {
    gap: 5px;
  }
  .area-live-map__theme-label {
    width: 100%;
    margin-bottom: 2px;
  }
  .area-live-map__theme-btn {
    padding: 4px 7px;
    font-size: var(--text-note);
  }
  .area-live-map__theme-swatch {
    width: 11px;
    height: 11px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .consult-entry-grid { grid-template-columns: 1fr 1fr; }
  .flow-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flow-journey::before {
    display: none;
  }
}
.matcher-opt.is-selected {
  border-color: var(--navy);
  box-shadow: 0 10px 28px rgba(1, 73, 154, 0.1);
  background: color-mix(in srgb, var(--navy) 4%, var(--white));
}
.matcher-result.is-updating {
  animation: trouble-detail-in 0.4s var(--ease-out);
}

@media (max-width: 767px) {
  .diff-dual { grid-template-columns: 1fr; }
  .visit-strength-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .visit-strength-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Layout shell — all pages / all viewports ── */
@media (max-width: 860px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  .site-header,
  .site-footer,
  .section,
  main,
  .hero-bridge,
  .visit-narrative,
  .visit-narrative__inner,
  .area-premium,
  .area-live-map-shell,
  .area-live-map,
  .clinic-row,
  .clinic-row__main {
    max-width: 100%;
  }

  .area-live-map-shell,
  .area-live-map {
    overflow: hidden;
  }

  .about-split,
  .about-split__media,
  .about-split__body,
  .facility-block,
  .visit-narrative__inner,
  .visit-narrative__copy,
  .visit-editorial__inner,
  .visit-editorial__body,
  .service-showcase__layout,
  .service-grid {
    min-width: 0;
  }

  .illus-frame,
  .about-split__photo,
  .service-photo,
  .service-showcase__hero,
  .visit-editorial__media,
  .photo-editorial,
  .service-card__figure,
  .clinic-thumb {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .illus-frame img,
  .about-split__photo img,
  .service-photo img,
  .service-showcase__hero img,
  .visit-editorial__media img,
  .service-card__figure img,
  .clinic-thumb img {
    width: 100%;
    max-width: 100%;
  }

  .trust-ribbon__item {
    white-space: normal;
    text-align: center;
    line-height: 1.45;
  }

  .visit-narrative__frame {
    width: 100%;
    max-width: 100%;
  }

  .clinic-features-grid,
  .clinic-feature-card,
  .clinic-features-stats,
  .price-cta-bar,
  .price-cta-bar__content,
  .flow-meta,
  .flow-meta dl,
  .visit-schedule,
  .visit-schedule dl,
  .flow-detail-body {
    min-width: 0;
    max-width: 100%;
  }

  .clinic-feature-card h3,
  .clinic-feature-card p,
  .flow-meta dt,
  .flow-meta dd,
  .visit-schedule dt,
  .visit-schedule dd,
  .price-cta-bar__text,
  .section-title,
  .section-lead,
  .visit-editorial__quote,
  .visit-editorial__note,
  .visit-editorial__eyebrow,
  .faq-item p,
  .voice-card p,
  .clinic-row-body,
  .director-card__greeting,
  .director-card__lead,
  .director-card__points li,
  .director-card__note,
  .director-card__body p {
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
    text-wrap: wrap;
  }

  .visit-inquiry-form,
  #visit-web-inline,
  .visit-inquiry-form__grid {
    min-width: 0;
    max-width: 100%;
  }

  .container,
  .header-inner,
  .footer-inner {
    max-width: 100%;
  }

  /* Subpages + home — use full content width on phones (avoid stubby CJK lines) */
  .section-lead,
  .section-title,
  main > .section .section-title,
  .section .section-title:not(.section-title--sm),
  .page-hero--cinema .section-title,
  .page-hero--cinema .section-lead,
  .page-hero--cinema .area-intro,
  .page-hero--cinema .area-rule-note,
  .clinic-hub-title,
  .clinic-hub-lead,
  .area-intro,
  .area-rule-lead,
  .section-head .section-title,
  .section-lead--compact {
    max-width: none;
  }

  .flow-detail-head h2 {
    text-wrap: pretty;
  }

  /* モバイルでも pretty + auto-phrase を維持（旧 wrap 上書きを廃止） */

  .area-premium {
    padding: 14px 12px;
  }

  .price-simulator {
    padding: 16px 14px;
  }
}

.container,
.header-inner,
.footer-inner,
.sign-body {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter-inline);
}

/* 平板 · 笔记本（768–1279px） */
@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --gutter-inline: clamp(28px, 4.5vw, 56px);
  }
  .visit-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-visual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: min(560px, 100%);
    margin-inline: auto;
  }
  .about-split {
    gap: clamp(28px, 4vw, 40px);
  }
  .benefit-photo-grid,
  .visit-day-photo-grid,
  .benefit-icon-grid,
  .sign-alert-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════
   HERO O1 PREVIEW — Anne recommendation (B1 bridge)
   Revert: _backups/hero-before-o1-20260806/RESTORE.md
   ═══════════════════════════════════════════════════════════ */
:root {
  --ill-bg: #EAF3FC;
  --illus-radius: 22px;
}

/* O1 hero — header sits on pale blue plate (西村寄せ：品牌只在顶栏) */
.has-o1-hero .site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.has-o1-hero .site-header:not(.is-scrolled) .logo,
.has-o1-hero .site-header:not(.is-scrolled) .logo small {
  color: var(--navy);
}
.has-o1-hero .site-header:not(.is-scrolled) .nav:not(.nav--panel) a {
  color: color-mix(in srgb, var(--navy-deep) 72%, var(--ink-soft));
}
.has-o1-hero .site-header:not(.is-scrolled) .nav:not(.nav--panel) a:hover,
.has-o1-hero .site-header:not(.is-scrolled) .nav:not(.nav--panel) a[aria-current="page"] {
  color: var(--navy);
}
.has-o1-hero .site-header:not(.is-scrolled) .nav-toggle {
  border-color: color-mix(in srgb, var(--navy) 18%, var(--line));
}
@keyframes hero-o1-accent-hop {
  0% {
    opacity: 0;
    transform: translate(-55vw, 36vh) scale(0.38) rotate(-16deg);
  }
  42% {
    opacity: 1;
    transform: translate(-18px, -10px) scale(1.08) rotate(7deg);
  }
  68% {
    transform: translate(4px, 3px) scale(0.96) rotate(-4deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(-5deg);
  }
}
/* ファーストビュー右の「訪問エリア確認」入口 — 2026-08-19
   3D ステッカー撤去後、大画面で右側が 360px 空いていた。
   飾りで埋めるのではなく、DESIGN.md 硬予算 6 の欠落項目をここに置く。
   狭い画面では本文の下に回り込む（縦積み）。 */
.hero-o1__area {
  display: none;
}
.hero-o1__actions .btn {
  min-height: 44px;
  padding-inline: 16px;
  font-size: 1.1875rem; /* 本文トークンではなくボタンの寸法に合わせる（WCAG 大文字 3.0 判定） */
}

.service-name-list a {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}
.service-name-list a:hover {
  color: inherit;
  background: color-mix(in srgb, var(--navy) 4%, white);
}
.service-name-list__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-top: 1px;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--navy) 8%, var(--line));
  box-shadow: 0 2px 10px rgba(9, 17, 60, 0.05);
}
.service-name-list__icon::before {
  width: 68%;
  height: 68%;
  top: -8%;
  right: -16%;
  opacity: 0.72;
}
.service-name-list__icon .service-icon {
  width: 22px;
  height: 22px;
  stroke: #01499A;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-name-list li:nth-child(1) .service-name-list__icon { --icon-soft-bg: #a8d4f5; }
.service-name-list li:nth-child(2) .service-name-list__icon { --icon-soft-bg: #f5d4b8; }
.service-name-list li:nth-child(3) .service-name-list__icon { --icon-soft-bg: #d4c8f0; }
.service-name-list li:nth-child(4) .service-name-list__icon { --icon-soft-bg: #b8e8d4; }
.service-name-list li:nth-child(5) .service-name-list__icon { --icon-soft-bg: #e8c4d8; }
.service-name-list li:nth-child(6) .service-name-list__icon { --icon-soft-bg: #a8d4f5; }
.service-name-list__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.service-name-list__title {
  font-weight: 700;
  color: var(--navy-deep);
}
.service-name-list a:hover .service-name-list__title {
  color: var(--navy);
}
.service-name-list__desc {
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink-soft);
}

.flow-prepare {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--white);
}
.flow-prepare h2,
.flow-prepare h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy-deep);
}
.flow-prepare ul {
  margin: 0;
  padding-left: 1.2em;
}
.flow-prepare li {
  margin: 0 0 6px;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink);
}
.flow-prepare p {
  margin: 10px 0 0;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-soft);
}
.hero-bridge__scene-copy .text-link {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--text-body);
}
@keyframes bridge-cloud-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(28px, 4px); }
}
@keyframes bridge-cloud-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-22px, 6px); }
}
@keyframes bridge-cloud-drift-c {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(16px, -4px); }
}
@keyframes bridge-cloud-drift-d {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(32px, 5px); }
}
@keyframes bridge-cloud-drift-e {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-18px, 3px); }
}
@keyframes bridge-cloud-drift-f {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(14px, -5px); }
}
.hero-bridge__cta .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-stack-sm);
}
.hero-fused {
  position: relative;
  min-height: clamp(340px, 52vh, 520px);
  overflow: hidden;
  background: var(--ill-bg);
}
.hero-fused__picture {
  display: block;
  width: 100%;
  min-height: inherit;
}
.hero-fused__img {
  width: 100%;
  min-height: clamp(340px, 52vh, 520px);
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
.hero-fused__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--ill-bg) 78%, white) 0%,
    color-mix(in srgb, var(--ill-bg) 36%, transparent) 40%,
    transparent 58%
  );
}
.hero-fused__plate {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: clamp(8px, 1.4vw, 14px) clamp(20px, 4vw, 40px);
  box-sizing: border-box;
  pointer-events: none;
}
.hero-fused__narrative {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: min(1200px, 100%);
  margin-inline: auto;
  left: 0;
  right: 0;
  padding: clamp(14px, 2.5vw, 24px) clamp(20px, 4vw, 40px);
  box-sizing: border-box;
  pointer-events: none;
}

.visit-day-flow {
  position: relative;
}
.visit-narrative__copy .text-link {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--text-body);
}
.visit-photo-stack__card.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.visit-photo-stack__card.is-visible[data-depth="0"] {
  z-index: 4;
  transform: translate(0, 0) rotate(-1.5deg) scale(1);
  filter: none;
  box-shadow:
    0 14px 36px rgba(1, 73, 154, 0.14),
    0 0 0 1px color-mix(in srgb, var(--navy) 12%, transparent);
}
.visit-photo-stack__card.is-visible[data-depth="1"] {
  z-index: 3;
  transform: translate(-12px, 10px) rotate(2.8deg) scale(0.962);
  opacity: 0.94;
  filter: brightness(0.97);
  box-shadow: 0 10px 26px rgba(1, 73, 154, 0.1);
}
.visit-photo-stack__card.is-visible[data-depth="2"] {
  z-index: 2;
  transform: translate(14px, 20px) rotate(-3.2deg) scale(0.925);
  opacity: 0.86;
  filter: brightness(0.94);
  box-shadow: 0 6px 18px rgba(1, 73, 154, 0.08);
}
.visit-photo-stack__card.is-entering[data-depth="0"] {
  animation: visit-photo-stack-enter 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes visit-photo-stack-enter {
  0% {
    opacity: 0;
    transform: translate(18px, 24px) rotate(5deg) scale(0.88);
    filter: brightness(1);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(-1.5deg) scale(1);
    filter: none;
  }
}

.illus-frame {
  position: relative;
  border-radius: var(--illus-radius);
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--navy) 12%, var(--white));
  background: color-mix(in srgb, var(--navy) 4%, var(--ill-bg));
  box-shadow: 0 12px 32px rgba(1, 73, 154, 0.1);
}
.illus-frame img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 42%;
}
.illus-frame__badge {
  position: absolute;
  bottom: 10px;
  right: 12px;
  padding: 4px 10px;
  font-size: var(--text-note);
  font-weight: 600;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
}

@media (max-width: 860px) {
  .hero-o1__actions .btn {
    width: 100%;
    min-width: 0;
  }
  .section-head--compact .section-title {
    max-width: none;
  }
  .hero-bridge__cta .hero-actions {
    flex-direction: column;
  }
  .hero-bridge__cta .hero-actions .btn-web {
    display: none;
  }
  .hero-bridge__cta .hero-actions .btn {
    width: 100%;
    min-width: 0;
  }
  /* Flow detail — モバイルは単列・左右対称（左アイコン列は廃止して本文全幅） */
  .flow-detail,
  .flow-detail-item,
  .flow-detail-body,
  .flow-meta,
  .visit-schedule {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .flow-detail-item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 0;
  }
  .flow-detail-head {
    grid-column: 1;
    width: 100%;
  }
  /* --svg の絵は廃止したので、隣接セレクタの 2 本は不要。
     先頭の .flow-detail-body だけで同じ範囲を指す。 */
  .flow-detail-body {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
  }
  .flow-meta dl {
    padding: 12px 14px;
  }
  .visit-schedule {
    padding: 16px 14px;
  }
  .visit-schedule dl > div {
    display: grid;
    gap: 2px;
  }
  .visit-schedule h3 {
    font-size: var(--text-body);
  }
  .visit-schedule-note,
  .flow-detail .note {
    font-size: var(--text-caption);
    line-height: 1.65;
  }
}

/* --- Contact form (input / confirm / thanks) --- */
.page-contact .section--contact {
  padding-block: clamp(36px, 6vw, 64px);
}

.contact-progress .is-current {
  color: var(--navy-deep);
  font-weight: 700;
}

.contact-confirm {
  margin-top: 8px;
  background: var(--white);
  border: 1px solid var(--line);
}

.contact-confirm__list {
  margin: 0;
}

.contact-confirm__row {
  display: grid;
  grid-template-columns: minmax(9.5rem, 11.5rem) minmax(0, 1fr);
  gap: 8px 28px;
  padding: 16px 22px;
  border-bottom: 1px dotted var(--line);
}

.contact-confirm__row:last-child {
  border-bottom: 0;
}

.contact-confirm__row dt {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--navy-deep);
}

.contact-confirm__row dd {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.contact-confirm__value--empty {
  color: var(--ink-soft);
}

.contact-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 22px 24px;
}

@media (max-width: 720px) {
  .contact-form__row,
  .contact-confirm__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 16px;
  }

  .contact-form__footer,
  .contact-confirm__actions {
    padding-inline: 16px;
  }

  .contact-form__actions .btn,
  .contact-confirm__actions .btn,
  .contact-thanks__actions .btn {
    width: 100%;
    min-width: 0;
  }
}


/* ══════════════════════════════════════════════════════════════
   印刷（2026-08-20 追加）

   費用ページ・診療の流れは、ご家族が紙に出して本人や他の家族に
   見せる使い方が想定される。画面用の装飾をそのまま刷ると、
   ナビゲーション・固定バー・地図・影がインクを食い、本文が読みにくい。

   方針:
   ・操作するためのものは全部消す（ナビ、ボタン、固定バー、進捗バー）
   ・背景の塗りと影は落とし、文字は黒に寄せる
   ・リンクは URL を併記しない（紙で追えないアドレスは邪魔なだけ）
     ただし電話番号だけは残す
   ・見出しとその直後が別ページに割れないようにする
   ══════════════════════════════════════════════════════════════ */
@media print {
  .site-header,
  .mobile-bar,
  .scroll-progress,
  .nav,
  .nav-toggle,
  .nav-backdrop,
  .skip-link,
  .btn,
  .trouble-cta-band,
  .area-live-map-block,
  .area-premium-cta,
  .flow-subpage-teaser,
  .contact-thanks__actions,
  .visit-photo-stack,
  .hero-o1__actions {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;   /* 印刷の本文下限 12pt を Web の 11pt≒14.7px で満たす */
  }

  .section {
    padding-block: 12pt !important;
    background: #fff !important;
  }

  /* 画面用の影・角丸・地色は紙では意味がなく、インクを食う */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
  }

  .section-title,
  .flow-detail-head h2,
  .price-summary-box__label {
    color: #000 !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  .flow-detail-item,
  .price-breakdown-card,
  .faq-item,
  .insurance-card {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #999 !important;
    background: #fff !important;
  }

  /* 紙では追えないので URL は出さない。電話番号だけ残す */
  a[href^="tel:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* 折りたたみは開いた状態で刷る（閉じたまま刷ると中身が消える） */
  details {
    display: block !important;
  }

  details > summary {
    list-style: none;
  }

  details:not([open]) > *:not(summary) {
    display: revert !important;
  }
}


/* 確認用プレビューで「まだ確定していない箇所」を明示する帯。
   2026-08-20 追加。クライアントに見せる URL では、どこを確認すべきかが
   分かる必要がある。とくに担当医の談話は AI が仮に書いた文章で、
   注記が無いと本人の言葉として読まれてしまう。
   ★ 本番公開の前に、この class を付けた要素ごと削除すること。 */
.draft-flag {
  margin: 0 0 12px;
  padding: 8px 12px;
  font-size: var(--text-note);
  font-weight: 700;
  line-height: 1.6;
  /* 赤字を淡赤の地に置くと 4.13 で AA に届かない。
     文字側を一段暗くして基準を満たす（帯そのものの見え方は変えない）。 */
  color: color-mix(in srgb, var(--red) 82%, #000);
  background: color-mix(in srgb, var(--red) 7%, var(--white));
  border: 1px dashed color-mix(in srgb, var(--red) 45%, transparent);
  border-radius: var(--radius-sm);
}
.draft-flag::before {
  content: "確認待ち — ";
  font-weight: 700;
}


/* ══════════════════════════════════════════════════════
   アイコンの描き方（2026-08-20 制定）

   調査したところ、サイト内の SVG の線幅が 1.2 / 1.4 / 1.5 / 1.7 /
   1.8 / 2.1 / 2.2 と 7 種類に散っていた。同じ画面に並ぶと
   「別々の場所から集めてきたもの」に見える。

   ── 決めごと ──
   ・意味を伝える機能アイコン … viewBox 0 0 24 24、線幅 1.5、
     端と角は丸、塗りなし（面を敷く場合は親要素の背景で）
   ・街並み・地図などの「絵」 … この規則の対象外。
     絵は線幅を変えて奥行きを出すのが正しい

   新しくアイコンを足すときは .ui-icon を付けること。
   ══════════════════════════════════════════════════════ */
.ui-icon {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ───────── 診療内容の絵（2026-08-21）─────────
   線画アイコンをやめ、お悩みアイコン 8 枚と同じ水彩画に統一した。
   26px では水彩の細部がつぶれて読めないため 56px。実測で 26/40px は不可、
   56px から輪郭と中身が判別できる。
   6 件のうち 4 件は既存の絵をそのまま使い、残り 2 件（抜歯・総合歯科）は
   絵ができるまで線画のまま、大きさだけ揃えて待たせている。 */
.service-name-list__illus {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-card);
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--navy) 9%, var(--line));
}
.service-name-list__icon--pending {
  /* 親の .service-name-list__icon が flex: 0 0 44px を持っているので、
     width だけ書いても flex-basis に負ける。flex ごと上書きする。 */
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-card);
  background: #ffffff;
  border: 1px dashed color-mix(in srgb, var(--navy) 22%, var(--line));
}
.service-name-list__icon--pending::before { display: none; }


/* 訪問日の流れ 4 ステップ（2026-08-21）
   トップページの「ご依頼の流れ」と同じく、番号を節点にする。
   線画アイコンは水彩画と質感が合わず、26px では細部もつぶれていた。
   4 つが順に進むという情報は番号そのものが持っている。 */
.visit-day-timeline { counter-reset: vd; }
.visit-day-step { counter-increment: vd; }
.visit-day-step__node {
  position: relative;
  display: flex;
  justify-content: center;
}
.visit-day-step__node::before {
  content: counter(vd);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(1, 73, 154, 0.22);
}


/* ───────── 区画のつなぎ目（2026-08-21）─────────
   対標 3 社を調べたところ、地紋も勾配も疑似要素の飾りも使っていなかった
   （背景画像はすべて写真かイラストという「中身」）。
   なので模様は足さない。代わりに、区画の境目そのものに厚みを持たせる。

   地色のある区画の上端を丸くし、上の区画に少し重ねる。
   まっすぐな境界線が続くより、区画が「重なっている」ほうが
   12,000px を超える長いページで切れ目が読み取りやすい。 */
.section--warm,
.section--mint,
.section--paper {
  position: relative;
  z-index: 1;
  border-top-left-radius: clamp(20px, 3.2vw, 36px);
  border-top-right-radius: clamp(20px, 3.2vw, 36px);
  margin-top: calc(-1 * clamp(20px, 3.2vw, 36px));
}
/* 丸めた角から下の区画が透けないよう、白い区画は下に敷く */
.section--white { position: relative; z-index: 0; }

/* ─────────────────────────────────────────────────────────────
   2026-09-01 本文中のリンクに下線を戻す

   site-home.css の a { text-decoration: none } が全リンクの下線を
   消しており、本文リンクは紺色だけで区別されていた。
   ところが紺 #01499A と本文 #2A3142 のコントラスト比は 1.50:1 しかない。
   白内障では「青と濃いグレーが似て見える」ことが知られているため、
   主な読み手（70代以上）には、色だけではリンクだと分からない。

   色に頼らず「形」でも区別できるようにする。
   ナビ・カード・ボタンは配置と形で判断できるので対象外にしている。
   ───────────────────────────────────────────────────────────── */
.section p > a:not(.btn):not([class*="btn-"]),
.section dd > a:not(.btn),
.section-lead a:not(.btn),
.text-link,
.about-split__callout-link,
.contact-form__consent a,
.voices-cta-hint a,
.trust-clinics-line a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: auto;
}
.section p > a:not(.btn):hover,
.text-link:hover,
.about-split__callout-link:hover {
  text-decoration-thickness: 2.5px;
}

/* ─────────────────────────────────────────────────────────────
   2026-09-01 PC で「余白が大きすぎる」への対応（第2弾）

   前回はコンテンツ幅を広げたが、それは間違いだった。
   このサイトの空きは「短い項目を全幅に縦積みしている」ことが原因で、
   幅を広げると右側の空きがむしろ増える。実測（1440px）:

     .facility-flow        項目幅 1150px / 文字 103px →  9%
     .price-summary-list   項目幅 1148px / 文字 258px → 22%
     .clinic-compact       項目幅 1192px / 文字 286px → 24%
     .benefit__list        項目幅 1194px / 文字 499px → 42%

   逆に、長い文章の段落は幅を広げたぶん 1 行が伸びすぎていた。
   日本語は 1 行 35〜45 字を超えると読み飛ばしが増え、加齢で悪化する。

   そこで、短い項目は段組みにして幅を使い、長い文章には行長の上限を置く。
   スマホ（〜880px）は縦 1 列のまま変えない。
   ───────────────────────────────────────────────────────────── */

/* 長い文章の行長を抑える。18px で 42em ≒ 42 字。 */
/* 行長の上限。
   1) li は対象にしない。flow-detail-item のように「li が段組みの器」に
      なっている箇所があり、42em で器ごと 714px に潰れて版面が崩れた。
   2) 単位を em から rem に変える。em だと要素ごとの字送りに追従して
      672 / 714 / 756px とばらつき、右端が揃わず「幅がまちまち」に見えた。
      rem なら字号が違っても右端が揃う。44rem = 704px（本文 18px で約 39 字）。 */
.section p:not([class*="hero"]),
/* li は「中身が文章だけのもの」に限る。div や図を抱えている li は
   段組みの器なので、幅を絞ると版面が崩れる（flow-detail-item で発生した）。 */
.section li:not(:has(div, ul, ol, figure, img, picture, table, dl)),
.section dd,
.section > .container > p,
.section-lead,
.voices-note,
.service-note,
.clinic-features-note,
.area-disclaimer,
.faq-item p {
  max-width: 44rem;
}

/* 2026-09-01 5院リストはカード型（--linked）で、各項目が枠を持っている。
   外側の .clinic-compact にも枠と地色があり二重になっていた。
   1列のときはカードが外枠いっぱいに詰まって目立たなかったが、
   多段にして隙間ができたことで枠が二重に見えるようになった。外枠を外す。 */
.clinic-compact--linked {
  border: 0;
  background: transparent;
}

/* 施設向けの 3 段階。タブレット（768〜834px）でも 1 列のままだと
   1 行に数語しか入らず間延びするため、700px から段組みにする。 */
@media (min-width: 700px) {
  .price-summary-box .price-summary-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
  }
  .facility-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
  }
}

@media (min-width: 880px) {
  /* 訪問で変わること：3 項目 */
  .benefit__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
  }
  /* site-sections.css が後に読まれるため、親クラスを足して詰み合わせに勝たせる */
  .benefit .benefit__item {
    flex-direction: column;
    border-bottom: 0;
    padding: 0;
  }

  /* 費用の目安：3 項目を横に並べる。
     外側の .price-summary-box に既に枠があるので、中は枠を持たせず
     薄い面で分ける（枠の二重取りを避ける）。 */
  .price-summary-box .price-summary-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
  }
  .price-summary-box .price-summary-list .price-row {
    grid-template-columns: 1fr;          /* 720px の 190px 固定列を解除 */
    align-content: start;
    gap: 4px;
    border-bottom: 0;
    padding: clamp(14px, 1.8vw, 18px);
    background: color-mix(in srgb, var(--navy) 3.5%, var(--white));
    border: 0;
    border-radius: var(--radius-card);
  }
  /* 720px のルールで子が 2 列目に置かれたままだったので、1 列に戻す。
     ラベル → 金額 → 補足 の縦積みにする。 */
  .price-summary-box .price-summary-list .price-row__label,
  .price-summary-box .price-summary-list .price-row__figure,
  .price-summary-box .price-summary-list .price-row__note {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
  }
  .price-summary-box .price-summary-list .price-row__figure {
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  }
  .price-summary-box .price-summary-list .price-row__figure--word {
    font-size: clamp(1.1875rem, 2vw, 1.375rem);
  }



  /* 東京5院の一覧 */
  .clinic-compact--linked {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 14px);
  }
  /* 矢印は見出しの中央（top:50%）に置かれていたため、院名が 1 行の
     カードと 2 行のカードで高さがずれていた。上端からの距離で揃える。 */
  .clinic-compact--linked li > a::after {
    top: calc(clamp(14px, 2vw, 18px) + 0.75em);
    margin-top: 0;
  }
}

@media (min-width: 1180px) {
  /* 5 院は 3 列。2 列だと最後の 1 件が半分空くが、3 列なら 1/3 で済む。 */
  .clinic-compact--linked { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 施設向けの 3 段階。枠を持たせず、薄い面と番号で区切る
   （外側の .trust-facility が既に枠を持っているため）。 */
@media (min-width: 880px) {
  .trust-facility .facility-flow > li {
    padding: clamp(12px, 1.6vw, 16px);
    background: color-mix(in srgb, var(--navy) 3.5%, var(--white));
    border-radius: var(--radius-card);
    border-bottom: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   2026-09-01 流れページ：空いていた画像列に段階の数字を置く

   .flow-detail-item は minmax(160px,240px) + 1fr の 2 列で組まれており、
   左（または右）の列には写真が入る設計だった。しかし医療広告への配慮で
   AI 生成のシーン写真を本番から外したため、列だけが空で残り、
   各段の横に 240px の空白ができていた。

   写真を戻すには実際の診療風景の撮影が要る。当面は、すでに持っている
   情報＝段階の番号を大きく置いて列を埋める。
   数字は事実の表示であって効果や内容の主張ではないため、
   医療広告ガイドライン上の懸念がない。
   なお装飾的な連番は避けるべきだが、診療の流れは本当に順序を持つので
   ここでの番号は内容に根拠がある。
   ───────────────────────────────────────────────────────────── */
@media (min-width: 880px) {
  .flow-detail { counter-reset: flowdetail; }

  .flow-detail-item { counter-increment: flowdetail; }

  .flow-detail-item::before {
    content: counter(flowdetail);
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: center;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 5.5vw, 5rem);
    font-weight: 700;
    line-height: 0.9;
    color: color-mix(in srgb, var(--navy) 20%, transparent);
    font-variant-numeric: tabular-nums;
    padding-top: 0.1em;
  }
  /* 左右交互のとき、数字は本文の反対側へ */
  .flow-detail-item--reverse::before { grid-column: 2; }

  /* 見出し脇の小さい丸番号は、大きい数字と重複するので隠す */
  .flow-detail-head .flow-num { display: none; }

  /* 見出しは全幅（1 / -1）に置かれていたため、本文が右にあるとき
     見出しだけ左端に残り、数字と離れて見えた。本文と同じ側に寄せる。 */
  .flow-detail-head {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
  }
  .flow-detail-item--reverse .flow-detail-head { grid-column: 1; }

  /* 数字は見出しの高さも含めて縦に通すので、1 行目から始める */
  .flow-detail-item::before { grid-row: 1 / span 2; align-self: start; }
}

/* ─────────────────────────────────────────────────────────────
   2026-09-01 縦積み時代の「最後の 1 つだけ枠線なし」を、横並びで解除する

   :last-child { border-bottom: none } は 1 列に積むことが前提のルール。
   段組みにすると、最後の 1 つだけ線が無い＝他の項目に線が浮いて残る、
   という不揃いになる。費用ページで最初に見つかり、全ページを機械的に
   走査したところ 5 院リストと訪問体制の一覧でも同じことが起きていた。
   横に並ぶときは線をやめ、間隔と枠で区切る。
   ───────────────────────────────────────────────────────────── */
/* 5院リストはカード型。各カードが自前の四辺の枠と角丸を持つので、
   縦積み用の .clinic-compact li:last-child { border-bottom: none } が
   当たると最後の1枚だけ下辺が欠ける。
   2026-09-02 修正: 最初この打ち消しを @media (min-width: 880px) の中に
   入れていたため、1列になる 860px 以下では欠けたままだった
   （最初の走査を 1440px でしか回していなかったので気付けなかった）。
   カード型なのは幅に関係ないので、幅の条件を外す。
   .clinic-compact は全站 17 か所すべて --linked 付きで、
   罫線区切りの素の縦リストとしては使われていない。 */
.clinic-compact--linked > li,
.clinic-compact--linked > li:last-child {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: color-mix(in srgb, var(--navy) 12%, var(--line));
}

/* 訪問体制の罫線は列数ごとに変わるので、component 側（site-sections.css）で
   列数と一緒に定義する。ここで一律に打ち消すと区切りが全部消える。 */

/* 訪問体制の帯は「見出しに見えるが p だった」ため h2 に直した。
   これは短い事実の帯で、章見出しほどの重さは要らない。見た目は据え置く。 */
h2.visit-system__label {
  margin: 0 0 clamp(12px, 1.6vw, 16px);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* ── 費用ページの版面（2026-09-02）────────────────────────────
   行長の上限（CJK 40字＝WCAG 2.0／W3C 日本語組版処理要件）は「読ませる文」に
   かけるもの。最初これを .price-breakdown（容器）に付けたところ、
   中の表・カードまで 704px に痩せ、右側が大きく空いてしまった。
   容器は元の幅に戻し、上限は走り文の段落だけに付け直す。 */
.price-breakdown__intro,
.price-breakdown-external {
  max-width: 44rem;
}

/* 合計目安は表のまとめなので、表と同じ幅に置く。
   1行に流すと 66字になり上限を超えるため、金額と但し書きの2カラムにして
   それぞれの行長を抑える。狭い画面では縦に積む。 */
.price-breakdown-total {
  display: grid;
  gap: 6px 28px;
  align-items: baseline;
}

.price-breakdown-total__note {
  font-size: var(--text-note);
  color: var(--ink-soft);
  line-height: 1.75;
}

@media (min-width: 900px) {
  .price-breakdown-total {
    grid-template-columns: auto minmax(0, 30rem);
    justify-content: start;
  }
}

/* 3行のうち末行が 144px しかなく（457/576/144）、ぶら下がって見えていた。
   短い段落なので balance で行長を均す。
   セレクタは :lang(ja) p まで書く。上の @supports 内に
   :lang(ja) .section p { text-wrap: pretty } があり (0,2,1)、
   .price-breakdown-total 単体 (0,1,0) では負けるため。
   同じ詳細度にしたうえで、この規則をファイル末尾に置いて勝たせる。 */
:lang(ja) p.price-breakdown-total {
  text-wrap: balance;
  /* 行長の全站規則 .section p:not([class*="hero"]) が (0,2,1) で
     max-width:44rem を掛けてくる。ここは表と同じ幅に置きたいので、
     同じ (0,2,1) のセレクタをファイル末尾に置いて上書きする。
     行長は下の2カラム化（金額｜但し書き）で抑えている。 */
  max-width: none;
}

/* 外部リンクが本文の途中で折り返し、行幅が 448/212/144/212/144/256 と
   不揃いになって 144px の欠片行が出ていた。独立したブロックにする。 */
.price-breakdown-extlink {
  /* 2026-10-04 flex-wrap と max-width を追加。中の語を .jp-nowrap で束ねたとき
     文字列が別々の flex アイテムになり、折り返さずに 440px まで伸びて画面の外へ
     はみ出していた（文全体は .jp-line で包んだ）。字は本文の注記と同じ大きさに。 */
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 10px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--text-note);
  line-height: 1.6;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.price-breakdown-extlink:hover {
  border-color: var(--navy);
}

.price-breakdown-extlink__meta {
  font-size: var(--text-note);
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

/* 費用の目安の注記。※ が5文あり、目安の3行より注記のほうが長かった。
   前提（1割負担・変動あり）は上のリストに出したまま折りたたむ。 */
.price-summary-more {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.price-summary-more > summary {
  padding: 12px 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.price-summary-more > summary::-webkit-details-marker { display: none; }

.price-summary-more > summary::before {
  content: "＋ ";
  font-weight: 700;
}

.price-summary-more[open] > summary::before { content: "− "; }

.price-summary-more > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--navy) 45%, transparent);
  outline-offset: 2px;
}

.price-summary-more .price-summary-note:first-of-type { margin-top: 0; }

/* ── 2行ブロックの行長を均す（2026-09-02）──────────────────────
   見出し・リード文の 19 か所中 9 か所で、末行が最長行の 4 割前後しかなく
   ぶら下がって見えていた（例 638/247px）。
   text-wrap: pretty は末尾の孤立語は防ぐが行長は均さない。balance は均す。

   広い画面だけに掛ける理由: balance はブラウザ側に行数の上限があり
   （Chrome は 6 行程度）、それを超えると無視されて pretty の保護まで
   失われる。狭い画面ではリード文が 5〜6 行になるため pretty のままにする。

   詳細度: @supports 内の :lang(ja) .section-lead 等が (0,2,0) なので
   同じ (0,2,0) で書き、ファイル末尾に置いて後勝ちさせる。 */
/* 見出しは幅を問わず balance にする。短い（2〜3行）ので balance の
   行数上限には掛からず、狭い画面で「…進めま / す。」のように
   1文字だけが最終行に残るのを防げる。 */
/* 詳細度の内訳（この一帯は既存規則が厚いので明記する）
     :lang(ja) .page-hero h1.section-title  = 擬似1 + クラス2 + 要素1 = (0,3,1)
   L378 に同じ形の pretty 指定があるため、こちらも (0,3,1) で書き、
   ファイル末尾に置いて後勝ちさせる。クラスだけ (0,2,0) では負ける。 */
:lang(ja) .section-title,
:lang(ja) .page-hero h1.section-title,
:lang(ja) .page-hero--cinema h1.section-title,
:lang(ja) .hero-o1__title-row h1 {
  text-wrap: balance;
  /* 見出しでは auto-phrase を外す。文節でしか折れないため balance が
     働けず、「東京5院を起点に、車で約30分の範囲が目安で / す。」のように
     1文字だけが最終行に残っていた（220/340/26px）。
     normal に戻すと 298/288px の2行になる。禁則は line-break: strict が担う。
     本文では auto-phrase のほうが読みやすいので、そちらは触らない。 */
  word-break: normal;
  line-break: strict;
}

/* リード文は 1024px 以上だけ。狭い画面では 5〜6 行になることがあり、
   balance はブラウザ側の行数上限を超えると無視されて
   pretty の孤立語防止まで失われる。
   .section-lead は .section の中の p でもあるため、同じ @supports 内の
   :lang(ja) .section p (0,2,1) にも当たる。クラスだけ (0,2,0) では負けるので
   要素名まで書いて (0,2,1) に揃える。 */
@media (min-width: 1024px) {
  :lang(ja) p.section-lead {
    text-wrap: balance;
  }
}

/* ── 短い注記の孤立行（2026-09-03）────────────────────────────
   1〜2行に収まる短い注記で、最終行に 1〜5 文字しか残らない箇所があった。
   文案を削って詰める案も測ったが、削った分だけ折返し位置が動くだけで、
   ある幅で直ると別の幅で悪化する（390pxで直り 360px で 1文字になる等）。
   text-wrap: balance は全幅で行長を均すため、文案を変えずに解消できる。
   対象はいずれも 1〜2 行の短い要素で、balance の行数上限には掛からない。
   pretty は英単語の孤立を防ぐもので、日本語のこの症状には効かない（実測で不変）。

   実測（現状 → balance、最終行の文字数）
     .area-check__note      1440:1字 1100:3字 1024:4字 → いずれも 7字
     #service-equipment-title 390:2字 360:3字 320:5字 → いずれも 7字
     .hero-o1__hours-note   390:3字 360:5字 320:7字 → いずれも 12字 */
:lang(ja) .area-check__note,
:lang(ja) #service-equipment-title,
/* summary は :lang(ja) .faq-item summary (0,2,1) が L421 で pretty を
   掛けているので、こちらも同じ (0,2,1) で書く。要素だけの
   :lang(ja) summary (0,1,1) では負ける。 */
:lang(ja) .faq-item summary,
:lang(ja) .price-summary-more > summary,
:lang(ja) .price-breakdown-table td {
  text-wrap: balance;
}

/* 追加分の実測（現状 → balance、最終行の文字数）
     summary「算定要件」      390:2字 360:3字 → いずれも 8字
     費用表 治療費のセル      1440:2字 880:5字 → 12字 / 9字
     費用表 診療費のセル      1440:5字 768:2字 → 14字 / 8字
   これにより「算定要件」を「要件」に削る案は不要になった。
   算定要件は介護保険の定型語で、削ると意味が変わる。 */

/* 診療時間の注記だけは auto-phrase も併せる。
   balance 単体だと 320px で「ご相談はこ / の時間以外でも」と
   「この」が割れていた。文節で折れば割れず、最終行も 12→13字 と伸びる。 */
:lang(ja) .hero-o1__hours-note {
  text-wrap: balance;
  word-break: auto-phrase;
}

/* ── 改行の方針：役割で 2 層に分ける（2026-09-03 改訂）──────────────
   前回は本文要素へ一律に balance を当てたが、balance は行長を均す代わりに
   塊そのものを枠より狭くする。3 行以上の段落では右側が常に空き、
   「文字の塊が四角く見えない」状態になっていた（実測 83 件）。

   受控実験（同一文・同一列幅 300px、Chromium 141）
     wrap     270/270/72  末行 4字   前2行は枠いっぱい
     pretty   270/270/72  末行 4字   wrap と 1px も違わない（日本語には効かない）
     balance  216/198/198 末行11字   全行が枠より 84px 狭い

   そこで役割で分ける。
     読ませる塊（段落・表のセル・引用）… wrap ＋ text-align: justify
       両端が揃い、塊が四角くなる。最終行が短いのは組版として正常。
     短い要素（見出し・ラベル・注記・カード内の見出し）… balance
       1〜2 行なので塊の狭さは目立たず、逆に 1〜3 字の孤立が悪目立ちする。

   分類は推測ではなく実測（全7ページ×4幅で各セレクタの行数を集計）。
     3 行以上になる割合 … 見出し/ラベル/注記 0%、dd 17%、section-lead 18%、
     li 20%、p 29%、td 53%、引用 100%
   0〜20% を balance、それ以上を justify に置いた。

   結果（3 行以上の塊が枠を使い切らない件数 / 孤立 3 字以下）
     全面 balance  83 件 / 10 件
     この 2 層構成 31 件 / 23 件   ← 採用
   孤立は 13 件増えるが、増えた分はいずれも長い段落の最終行で、
   組版として普通に生じる位置。塊の見え方のほうを優先する。 */

/* 1) 読ませる塊 — 両端揃えで四角く

   ただし両端揃えは「狭い欄」では字間を開いて行を伸ばすため、
   カードや表のセルに掛けると「紹 介 ・ ご 相 談」のように字が散る。
   実測で確認したので、対象を幅のある本文だけに絞る。
     ・.container の直下にある p（本文の段落。幅 704px 前後）
     ・長い引用と注記
   li と td は外す（カード・セル＝狭い欄。分類上も 2 行前後が主で
   balance のほうが向く）。 */
:lang(ja) .section > .container > p,
:lang(ja) .visit-editorial__quote,
:lang(ja) .voices-note {
  text-wrap: wrap;
  text-align: justify;
}
/* 2026-10-04 スマホ幅（1 行 16 字前後）では両端揃えの字間の開きが目立つので、左揃えにする */
@media (max-width: 640px) {
  :lang(ja) .section > .container > p,
  :lang(ja) .visit-editorial__quote,
  :lang(ja) .voices-note {
    text-align: start;
  }
}

/* 2) 短い要素 — 行長を均して孤立を消す */
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3,
:lang(ja) h4,
:lang(ja) .section-title,
:lang(ja) .section-label,
:lang(ja) .section-lead,
:lang(ja) summary,
:lang(ja) strong,
:lang(ja) dd,
:lang(ja) dt,
:lang(ja) .hero-o1__eyebrow,
:lang(ja) .hero-o1__title-line2,
:lang(ja) .hero-split__hours-label,
:lang(ja) .area-check__main,
:lang(ja) .area-check__note,
:lang(ja) .area-zone-note,
:lang(ja) .area-live-map__attrib,
:lang(ja) .visit-system__label,
:lang(ja) .visit-narrative__title,
:lang(ja) .trouble-tile__label,
:lang(ja) .trouble-head__mark-line,
:lang(ja) .price-summary-box__label,
:lang(ja) .price-row__label,
:lang(ja) .price-row__note,
:lang(ja) .price-cta-bar__text,
:lang(ja) .price-breakdown-total__note,
:lang(ja) .service-name-list__title,
:lang(ja) .clinic-compact__addr,
:lang(ja) .clinic-compact__access,
:lang(ja) .clinic-other-grid__name,
:lang(ja) .clinic-address,
:lang(ja) .clinic-access,
:lang(ja) .clinic-hub-desc,
:lang(ja) .contact-form__hint,
:lang(ja) .facility-phone-note,
:lang(ja) .cta-example,
:lang(ja) .flow-time,
:lang(ja) .trust-subhead,
:lang(ja) .voices-bridge,
:lang(ja) .btn-phone__num,
:lang(ja) .section li,
:lang(ja) td,
:lang(ja) .service-name-list__desc {
  /* !important は 2) だけに付ける。
     .section-lead などは .section の中の p でもあるため、
     1) の :lang(ja) .section p (0,2,1) が 2) の :lang(ja) .section-lead (0,2,0)
     より詳細度が高く、そのままでは短い要素まで justify になってしまう
     （実測で 9 セレクタが意図と逆になっていた）。
     40 個のセレクタを個別に (0,3,1) へ書き直すより、
     「2) が最終判断」と明示するほうが後から追える。
     1) は同詳細度の既存 pretty より後に置いてあるので !important は要らない。 */
  text-wrap: balance !important;
  text-align: start !important;
}

/* ════════════════════════════════════════════════════════════
   高齢の方向けの読みやすさ（2026-09-06 点検で直した分）
   全ページで読まれる site-premium.css の末尾に置く。
   トップは site-sections.css がこの後に読まれ、そちらに
   .visit-editorial--featured .visit-editorial__quote のような
   (0,2,0) の指定があるため、ここは html:lang(ja) を頭に付けて
   (0,2,1) 以上にしている。読み込み順に負けないための最低ライン。
   ════════════════════════════════════════════════════════════ */

/* A. 押せる範囲を広げる（見た目の文字は変えない）
   フッターのリンクは高さ 29px、パンくずは 17〜21px しかなかった。
   WCAG 2.2 AAA の 44px、高齢者向け推奨の 48px に合わせる。
   padding で広げ、同じ量の負の margin で戻すので、並びは動かない。
   左右は 9px：隣との間隔 20px を超えて重ならない範囲で最大。 */
html:lang(ja) .footer-links a {
  display: inline-block;
  padding: 10px 9px;
  margin: -10px -9px;
}
html:lang(ja) .section .contact-crumb > a {
  display: inline-block;
  padding: 14px 6px;
  margin: -14px -6px;
}
html:lang(ja) .logo {
  padding-block: 4px;
}
/* 本文中のリンク・同意文のリンク：inline 要素の上下 padding は行送りに
   影響しないので、押せる範囲だけが広がる（19〜32px → 44px 以上）。
   パンくずは上で別扱い。 */
html:lang(ja) .section p:not(.contact-crumb) > a:not(.btn):not([class*="btn-"]):not(.text-link),
html:lang(ja) .page-hero p > a,
html:lang(ja) .flow-meta dd > a,
html:lang(ja) .contact-form__consent a {
  padding-block: 0.75em;
}
/* PC のヘッダーナビ（inline 表示・高さ 37px）。inline の上下 padding は
   ヘッダーの高さを変えない。 */
@media (min-width: 1024px) {
  html:lang(ja) .nav-panel__links a {
    padding-block: 0.55em;
  }
}
/* 東京5院リスト（トップ・エリア）：院名リンクが 26px だった。 */
/* inline のまま上下 padding だけ。inline-block にすると nowrap の院名が
   1 つの箱になり、幅を超えて文字が重なった（iPhone で確認）。 */
html:lang(ja) .clinic-compact--linked a {
  padding-block: 9px;
}
/* 地図の ＋／－ ボタン（Leaflet 既定 30px）を 44px に。地図の拡大は
   エリア確認で必ず触る操作なので、外部部品でも合わせる。 */
html:lang(ja) .leaflet-touch .leaflet-bar a,
html:lang(ja) .leaflet-bar a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 22px;
}

/* B. 段落と段落の間
   行間 1.9 に対して段落間が 0.6〜0.9em と狭く、話の切れ目が見えなかった。
   margin は相殺されるので「少なくとも 1.25em」の意味になる。 */
html:lang(ja) .section p + p {
  margin-top: 1.25em;
}

/* C. 行間が 1.6〜1.65 に留まっていたものを 1.8 へ。
   住所・アクセス・料金の注記・フォームの補足など、
   高齢の方がまさに確かめたい情報が、いちばん詰まっていた。 */
html:lang(ja) .clinic-address,
html:lang(ja) .clinic-access,
html:lang(ja) .contact-form__hint,
html:lang(ja) .flow-time,
html:lang(ja) .area-rule-note,
html:lang(ja) .area-live-map__status,
html:lang(ja) .visit-narrative__lead,
html:lang(ja) .price-cta-bar__text,
html:lang(ja) .price-breakdown-external,
html:lang(ja) .price-breakdown-card__note,
html:lang(ja) .visit-editorial__quote,
html:lang(ja) .flow-subpage-teaser p,
html:lang(ja) .flow-prepare p,
html:lang(ja) .visit-day-step__body p,
html:lang(ja) .visit-schedule dd {
  line-height: 1.8;
}

/* D. 「読ませる文」で 15px に留まっていたものを 16px へ。
   ラベル・バッジ・院のチップ・フッターの法人名は 15px のまま（短い要素）。
   2026-10-03：9/20 に本文 19px・注記 17px へ上げたとき、ここだけ 16px のまま
   取り残されていた（院方「まだ字が小さい」）。注記と同じ --text-note にそろえる。
   流れの 5 段の説明は注記ではなく本文なので、ここから外して本文の大きさにした。 */
html:lang(ja) .cta-example,
html:lang(ja) .contact-form__hint,
html:lang(ja) .hero-split__hours-label,
html:lang(ja) .voices-cta-hint,
html:lang(ja) .voices-note,
html:lang(ja) .hero-o1__cta-note,
html:lang(ja) .area-live-map__note,
html:lang(ja) .area-live-map__status,
html:lang(ja) .sim-disclaimer,
html:lang(ja) .visit-schedule-note {
  font-size: var(--text-note);
}
html:lang(ja) .flow-journey__step p {
  font-size: var(--text-body);
}

/* F. 1 行が 40 字を超えていた段落に上限（W3C 日本語組版：40 字）。
   768px 以上で 41〜48 字になっていた 7 段落。スマホは影響なし。
   38em ＝ 16〜18px なら約 38 字。 */
html:lang(ja) .section p.voices-note,
html:lang(ja) p.area-intro,
html:lang(ja) .section p.facility-kasan__note,
html:lang(ja) p.visit-narrative__lead,
html:lang(ja) .faq-item--boxed p,
html:lang(ja) .legal-prose p {
  max-width: 38em;
}

/* H. 電話ボタンの 2 行表示（ラベル／番号）
   visit-contact.js が .btn-phone に .btn-phone--stacked と
   .btn-phone__label / .btn-phone__num を付ける。もとの定義は
   site-home.css（トップ専用）にしかなく、下層ページとメニューでは
   「電話で相談する03-6233-7288」と 1 行に連なっていた。全ページ共通の
   ここへ移す。ラベルは 15px 以上を守る（対象は 70 代以上）。 */
html:lang(ja) .btn-phone--stacked {
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: auto;
  padding-block: 10px;
  line-height: 1.25;
}
html:lang(ja) .btn-phone__label {
  font-size: 1rem;
  font-weight: 600;
}
html:lang(ja) .btn-phone__num {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* I. 院方の iPhone 指摘 3 件（2026-09-06）
   ① ヒーローの時間注記：balance だと「ご相談は／この時間以外で」と文の途中で
      折れる。2 文の短い注記は「。」で分けるのが自然。スマホでは <br class="br-sp">
      で文ごとに、PC では 1 行のまま。balance の対象から外す。 */
html:lang(ja) .hero-o1__hours-note {
  text-wrap: wrap;
  text-align: start;
}
/* ② 費用カード：subpage.css の h3 が「診療費」を 24px にし、金額（16.8px）より
      大きくなっていた。高齢の方が見たいのは金額。金額を最大に、ラベルは設計値へ。 */
/* .section h3:not(.section-title):not(.section-title--sm) が (0,3,1) なので、それより上に */
html:lang(ja) .section h3.price-breakdown-card__label {
  font-size: var(--text-note);
}
html:lang(ja) .price-breakdown-card__amount {
  font-size: 1.375rem;
  line-height: 1.35;
}
/* ③ ご相談例の引用：見出し用の Zen Kaku 700 で、しかもスマホでは 16.1px と
      本文（18px）より小さかった。強調のつもりが「別の字体」に見える。
      本文と同じ Noto Sans JP・18px・太字にして、統一したまま強調する。 */
html:lang(ja) .visit-editorial__quote,
html:lang(ja) .visit-editorial--featured .visit-editorial__quote {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.8;
  /* 狭いカードで両端揃えにすると「入 れ 歯 の 調 整」と字間が開く。左揃えに。 */
  text-align: start;
  text-wrap: pretty;
}

/* ── 見出しの文節束ね（2026-09-06 iPhone 2 回目の指摘）────────────────
   見出しは word-break: normal（auto-phrase だと balance が効かない）で、
   Safari には auto-phrase 自体が無い。そのため「暮ら／し」「車で約／30分」
   「急患対／応」のように語の途中で折れていた（Chromium でも同じ）。
   見出し・summary・院名の文節を .jp-keep で束ね、折れる位置を文節の間に限る。
   束ねた文節は最長 9 字。320px でも 26px × 9 = 234px で収まる。

   .jp-line：親が flex の見出し（.flow-prepare の h2/h3、FAQ の summary、
   費用シミュレーターの label）で、文節の span がそれぞれ flex アイテムに
   なって横に散らばるのを防ぐ。文全体を 1 つの span で包み、その中で束ねる。 */
.jp-line {
  display: inline;
  min-width: 0;
}

/* 日本語の改行位置指定。PC では折らない（幅が足りるため）。
   もとは site-sections.css（トップだけ）にあったが、404 や下層でも使うので共通側へ。 */
.br-sp { display: none; }
@media (max-width: 640px) { .br-sp { display: inline; } }

/* ── トップ・訪問エリア：右の列の 5 院一覧（2026-09-06）──────────────
   861px 以上の 2 列レイアウトでだけ出す（site-home.css の .area-premium が
   860px 以下で 1 列になるのに合わせる）。押すと地図がその院に切り替わる。
   行の高さは 52px 以上（44px の押しやすさ基準）。 */
.area-clinic-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
@media (min-width: 861px) {
  .area-clinic-list { display: block; }
}
.area-clinic-list li + li { border-top: 1px solid var(--line); }
.area-clinic-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name go" "access go";
  align-items: center;
  column-gap: 12px;
  min-height: 52px;
  padding: 10px 14px 10px 16px;
  border-left: 4px solid transparent;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* 行全体をひとつの押せる面として見せる（Baymard: unified hit-area） */
.area-clinic-list__row:hover,
.area-clinic-list__row:focus-visible {
  background: color-mix(in srgb, var(--navy) 5%, var(--white));
  border-left-color: color-mix(in srgb, var(--navy) 45%, var(--white));
}
.area-clinic-list__row:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}
.area-clinic-list__row:hover .area-clinic-list__name { text-decoration: underline; text-underline-offset: 0.18em; }
/* 拠点ボタンで選ばれている院 */
.area-clinic-list__row.is-active {
  border-left-color: var(--navy);
  background: color-mix(in srgb, var(--navy) 7%, var(--white));
}
.area-clinic-list__name {
  grid-area: name;
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-deep);
}
.area-clinic-list__access {
  grid-area: access;
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.area-clinic-list__go {
  grid-area: go;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--navy) 22%, var(--line));
  color: var(--navy);
  font-size: 1.125rem;
  line-height: 1;
  transition: background 0.2s ease, transform 0.25s var(--ease-out);
}
.area-clinic-list__row:hover .area-clinic-list__go {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateX(2px);
}

/* ── 中央揃えの設計を戻す（2026-09-06）────────────────────────────
   9/3 の「改行の 2 層ルール」で h3・p・li 等に text-align: start !important を
   当てたとき、もともと中央揃えで設計していたカードまで左揃えになっていた
   （番号だけ中央に残り、見出しと文が左に寄る）。院方の指摘で判明。
   該当：トップの流れ 5 枚（PC）、流れページの当日の流れ（PC）、
   実績カード、院ページの「他の訪問拠点」見出し。
   スマホの流れは 767px 以下で番号を左に置く設計なので、そちらは左のまま。 */
@media (min-width: 768px) {
  html:lang(ja) .flow-journey__step,
  html:lang(ja) .flow-journey__step h3,
  html:lang(ja) .flow-journey__step p,
  html:lang(ja) .visit-day-step,
  html:lang(ja) .visit-day-step h4,
  html:lang(ja) .visit-day-step p {
    text-align: center !important;
  }
}
html:lang(ja) .clinic-features-stats li,
html:lang(ja) .clinic-features-stats strong,
html:lang(ja) .clinic-other h2,
html:lang(ja) .clinic-other .section-label {
  text-align: center !important;
}
/* 地図の吹き出しの「院の案内」リンク（地図から入った人の出口） */
.hamille-map-popup__link {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 0;
  font-weight: 700;
  color: var(--navy);
}

/* 施設・ケアマネの方向けの FAX（2026-09-14 院方資料）。
   電話の行（.facility-phone-note）は visit-config.js が読めたときだけ出るが、
   FAX は番号を直接書いているので常に出す。 */
html:lang(ja) .facility-fax-note {
  margin-top: 8px;
  font-size: var(--text-note);
  line-height: 1.8;
  color: var(--ink-soft);
}