@charset "UTF-8";

/* ============================================================
   五反田歯科医院 コーポレートサイト
   Figmaカンプ準拠・レスポンシブ実装（PC/SP共通1ファイル）
   設計方針: モバイルファースト → 768pxでPCレイアウトへ拡張
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
p,
figure,
ul,
dl,
dd {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* HTMLのwidth/height属性は presentational hint として height を固定してしまい、
   CSSの aspect-ratio が無効化される。height:auto で属性を打ち消し比率を効かせる
   （レイアウトシフト防止のため属性自体は各imgに残す）*/
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
}

/* ============ カスタムプロパティ（配色・書体・余白の一元管理）============ */
:root {
  /* 配色（docs/design/specs の数値仕様が正。HEXはFigma抽出値そのまま） */
  --c-main: #50d5e0;         /* メイン水色（仕様書 #50D5E0）*/
  --c-main-deep: #3bb4de;    /* 水色（濃）: 一部の微調整用に残置 */
  --c-accent: #edb0bf;       /* アクセントピンク（仕様書 #EDB0BF）。ピンク文字にも使用 */
  /* CTAボタン専用の濃ピンク。白文字(bold)とのコントラストを確保するため #EDB0BF より彩度・明度を落とした値。
     #BC4E6E は白文字で約4.7:1（WCAG AA 4.5:1 以上を満たす）。--c-accent を暗くするとピンク文字にも波及するため専用変数に分離 */
  --c-cta: #bc4e6e;          /* CTA背景（白文字と約4.7:1）*/
  --c-cta-hover: #a8425f;    /* CTAホバー（白文字と約5.9:1）*/
  --c-bg-pale: #e9f9fa;      /* 淡い水色ブロック（仕様書 #E9F9FA）*/
  /* 仕様書: 本文・見出しの主要テキストは #000000（純黒・28箇所）。
     #222222だと全文字が約13%明るくなり全テキスト領域がカンプと差分になる */
  --c-text: #000000;         /* テキスト主（仕様 #000000）*/
  --c-text-sub: #272e2f;     /* テキスト副・コピーライト（仕様 #272E2F）*/
  --c-white: #ffffff;
  --c-border: #dddddd;       /* 罫線グレー */
  --c-field: #f1f1f1;        /* フォーム入力欄地（仕様書 #F1F1F1）*/
  --c-sns: #50d5e0;          /* SNSアイコン地（支給SVGの色に一致）*/
  /* お知らせビューアの前後ボタン用リンク色。メイン水色(#50D5E0)は白/淡水色地で3:1未満のため、
     UIテキストに必要なコントラスト(太字で3:1以上)を満たす濃いtealを別途用意 */
  --c-link: #1a7391;        /* 前後ボタン専用の濃い青緑。淡水色地(#e9f9fa)で約4.97:1を確保しWCAG AA(4.5:1)を満たす */

  /* 書体 */
  --font-serif: "Noto Serif JP", serif;      /* 見出し（明朝）*/
  --font-sans: "Noto Sans JP", sans-serif;   /* 本文・UI（ゴシック）*/

  /* レイアウト */
  /* 仕様書PC: コンテンツ幅1116px（左右余白162px）／SP: 画面端余白15px */
  --content-max: 1116px;
  --pad-x: 15px;

  /* 角丸 */
  --radius-cta: 6px;
  --radius-card: 8px;
  --radius-field: 4px;
}

/* ============ ベース ============ */
body {
  font-family: var(--font-sans);
  color: var(--c-text);
  line-height: 1.9;
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}

/* ============ 共通ユーティリティ ============ */
/* コンテンツ内寸を仕様どおり厳密に1116pxへ。max-widthに左右余白ぶんを足すことで
   box-sizing:border-box下でも padding を差し引いた内寸が 1116px になり、
   1440px時に content が x=162（仕様の当院/ポリシー/お知らせのx座標）から始まる。
   狭い画面では width:100% が優先され左右15pxの余白が保たれる */
.container {
  width: 100%;
  max-width: calc(var(--content-max) + var(--pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  padding-block: 48px; /* SP基準。PCで拡張 */
}

/* セクション見出し（明朝＋中央の短い水色下線バー）*/
.section-title {
  font-family: var(--font-serif);
  /* 仕様書: セクション見出し Noto Serif JP 27.5px / weight 600 / 字間 2.75px */
  font-weight: 600;
  font-size: 1.71875rem; /* 27.5px */
  line-height: 1.4;
  letter-spacing: 0.1em; /* 2.75px ≒ 0.1em */
  text-align: center;
  margin-bottom: 54px;
}

.section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--c-main);
}

/* スクロールフェードイン（JS無効時は .is-visible が付かないので下記フォールバックで可視）*/
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* スクリーンリーダー専用テキスト（視覚的には隠す）*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* JS無効・reduced-motion時はアニメを無効化し常時可視にする（Progressive Enhancement）*/
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ ヘッダー（全ページ共通）============ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  height: 64px;
}

/* 仕様書: Header-PC は幅1360px（logo x=40 / CTA右端 x=1400）で、
   コンテンツ幅1116pxとは別の専用幅。内寸1360px＋左右余白15pxで、
   1440px時に logo が x=40 から始まり CTA が x=1400 で終わる */
.header__inner {
  height: 100%;
  max-width: calc(1360px + var(--pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo img {
  height: 40px;
  width: auto;
}

/* PCナビは初期（SP）では非表示 */
.header__nav {
  display: none;
}

/* ハンバーガーボタン（SP表示）。仕様書SP: 三 34×18px。
   24px高だと3本線の最下線がカンプより6px下がりヘッダー右側が厳格差分になる */
.hamburger {
  width: 34px;
  height: 18px;
  position: relative;
  flex-shrink: 0;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 16px; }

/* ============ ハンバーガーメニュー（SP全画面オーバーレイ）============ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-main);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* カンプ(ハンバーガーメニュー 430×510)は上寄せの絶対配置。中央寄せだと要素位置がカンプとズレるため
     flex-start＋各要素marginでカンプのy座標(LOGO y=94 / Navi y=198 / CTA y=353)を再現する */
  justify-content: flex-start;
  gap: 0;
  padding: 94px 24px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.drawer__close {
  position: absolute;
  /* カンプ: Close 26×26 / y=22。線がボックス内に収まるようボックスは余裕を持たせ位置で合わせる */
  top: 22px;
  right: 24px;
  width: 26px;
  height: 26px;
  color: var(--c-white);
}

.drawer__close::before,
.drawer__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* カンプの×は細い線。26px幅・2pxのストロークに合わせる */
  width: 26px;
  height: 2px;
  background: var(--c-white);
}

.drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.drawer__logo { margin: 0; line-height: 0; }

.drawer__logo img {
  /* カンプ LOGO 220×49px。ロゴSVGは261×58の比率のため height49→幅220でカンプ寸法に一致。
     ※メニュー専用ロゴ(220×46)への差し替えも試したが、高さ46でnav/CTAが3px上にずれ悪化したため
     ヘッダーと同じ261×58ロゴをheight49で使う（歯マーク形状の微差は残るが全体の一致度が最良） */
  display: block;
  height: 49px;
  width: auto;
  /* 支給ロゴ（色付き）を白抜きにする＝カンプのメニュー内ロゴ表現 */
  filter: brightness(0) invert(1);
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* カンプ: Navi 上端 y=198。ロゴ底(94+49=143)からの間隔で配置。項目top間隔40px＝行19px+gap21px */
  margin-top: 55px;
  gap: 21px;
}

.drawer__nav a {
  font-weight: 700;
  /* カンプ: Noto Sans JP 16px / 行間19px */
  font-size: 16px;
  line-height: 19px;
}

.drawer__cta {
  display: inline-block;
  background: var(--c-white);
  color: var(--c-main);
  font-weight: 700;
  /* カンプ: WEB予約 166×43 / 上端 y=353。nav底(278+19=297)からの間隔56px。
     文字16px/行間19px＋上下padding12px=43px、左右padding17pxで幅約166px */
  margin-top: 56px;
  padding: 12px 17px;
  font-size: 16px;
  line-height: 19px;
  border-radius: var(--radius-cta);
}

/* ============ CTAボタン（ヘッダー・ピンク）============ */
/* 仕様書: CTA(Group31) 166×43px。文字16px/行間19px＋上下padding12px=43px、
   左右padding19pxで幅約166px。行間を明示しないと body の1.9が効き高さが54pxになる。
   座布団色はカンプのCTA(Rectangle 38 = #EDB0BF 淡ピンク)に一致させる（非マスクの構造要素のため色ズレが差分になる）*/
.btn-cta {
  display: inline-block;
  /* 仕様書: CTA(Group31) 166×43px。ブラウザのテキスト実幅はFigmaより約3px広く
     paddingベースだと座布団が169pxになるため、幅を166pxに固定して右端x=1400・座布団幅を一致させる */
  width: 166px;
  box-sizing: border-box;
  text-align: center;
  background: var(--c-accent);
  color: var(--c-white);
  font-weight: 700;
  font-size: 1rem;
  line-height: 19px;
  padding: 12px 17px;
  border-radius: var(--radius-cta);
  transition: background 0.2s ease;
  white-space: nowrap;
}

.btn-cta:hover {
  background: #e39fb0;
}

/* ============ トップFV ============ */
.hero {
  position: relative;
}

.hero__image {
  width: 100%;
  /* 仕様書SP: メインビジュアル 430×485px（縦長）＝ 485/430 ≈ 112.8vw */
  height: 112.8vw;
  max-height: 520px;
  object-fit: cover;
  object-position: 70% center; /* 施術者が隠れないよう右寄り */
}

/* SP基準: FVキャッチは縦書き2列（カンプSP）。
   flex-direction:column ＋ writing-mode:vertical-rl の組み合わせで、
   主軸が「横方向・右→左」になり 1列目が右・2列目が左に並ぶ（カンプの列順と一致）。
   align-items:flex-start で各帯が文字長ぶんだけの高さになり上端で揃う。 */
.hero__catch {
  position: absolute;
  /* 仕様書SP: Copy 位置 x=30 / y=103（FV上端 y=75 基準で top=28px）*/
  top: 28px;
  left: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 仕様書SP: Copy枠 89px幅。band(35+padding3×2=41)×2＋gap7＝89 に合わせる */
  gap: 7px; /* 2列の白帯の間隔 */
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  /* 仕様書: Noto Serif JP / weight 300 / 非強調語は #000000 / SP 35px・行間35px */
  font-weight: 300;
  font-size: 35px;
  line-height: 1;
  /* 仕様書SP: Copy枠 430px高。12文字×35px＋上下padding5px×2＝430に収めるため字間0
     （字間1.75pxだと列高が439px超となりCopy枠430pxをはみ出す） */
  letter-spacing: 0;
  color: #000000;
}

/* 各列は白い座布団（仕様書 #FFFFFF）。縦書きでは padding の上下=文字列の前後・左右=帯幅。
   white-space:nowrap で各列を1本の縦列に固定（絶対配置の高さ制約で2列に折り返すのを防ぐ）*/
.hero__catch-line {
  background: #ffffff;
  /* 仕様書SP: Copy枠は89×430px。band幅41(=35+3×2)で2列＋gap7＝89、
     列高は12文字×35px＋上下5px×2＝430に一致させる */
  padding: 5px 3px;
  white-space: nowrap;
}

/* 仕様書SP: 1列目「地域に愛される歯科医院へ」は weight400 / 字間1.75px。
   字間を入れると列が仕様の高さ(Copy 430px)まで伸び、カンプと縦の重なりが合う。
   2列目「健康な歯で笑顔の毎日を」は weight300 / 字間0（既定のまま）*/
.hero__catch-line:first-child {
  font-weight: 400;
  /* 仕様書SP: 字間1.75px指定だが、12文字で列高がCopy枠430pxを超えるため字間0で枠内に収める */
  letter-spacing: 0;
}

/* 強調語の色。仕様書の #50D5E0 / #EDB0BF */
.hero__catch .marker-blue { color: var(--c-main); }
.hero__catch .marker-pink { color: var(--c-accent); }
/* 「で」はSPではピンク（健康な歯で＝ピンク）。PCでは黒に上書きする */
.hero__catch .hero__catch-de { color: var(--c-accent); }

/* ============ 当院の特徴 ============ */
/* SP: FV下端560→見出し616=上56px / 下端1773→ポリシー1828=下55px */
.features {
  padding-block: 56px 55px;
}

.features__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px; /* 仕様書SP: カード縦間隔56px */
}

.feature__image {
  width: 100%;
  /* 仕様書: 当院の特徴カード写真 313×218px */
  aspect-ratio: 313 / 218;
  object-fit: cover;
}

.feature__caption {
  text-align: center;
  margin-top: 16px;
  font-size: 1rem;
}

/* ============ 治療のポリシー ============ */
.policy {
  background: var(--c-bg-pale);
  /* SP: 当院下端1773→見出し1828=上55px / 下端2568→お知らせ2618=下50px */
  padding-block: 55px 50px;
}

.policy__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

.policy__image {
  width: 100%;
  /* 仕様書: 治療のポリシー写真 422×306px */
  aspect-ratio: 422 / 306;
  object-fit: cover;
}

.policy__lead {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.policy__text {
  font-size: 1rem;
  color: var(--c-text);
}

/* ============ お知らせ ============ */
/* SP: ポリシー下端2568→見出し2618=上50px / 下端3339→フッター3418=下79px。
   下79pxのうち40pxはフッター側の上余白が担うため、news側は39pxとする（39+40=79）*/
.news {
  padding-block: 50px 39px;
}

.news__list {
  border-top: 1px solid var(--c-border);
}

/* SPカンプは「日付タグ→タイトル→抜粋(複数行)」の縦積み（Frame20=566px/3項目≒188px）。
   PCでは日付とタイトルを横並びにするため min-width:768 で上書きする */
.news__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-border);
}

/* 仕様書: 日付タグは水色地(#50D5E0)＋白文字 Noto Serif JP 16px 字間1.6px */
.news__date {
  display: inline-block;
  background: var(--c-main);
  color: var(--c-white);
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.1em;
  line-height: 1.2;
  padding: 3px 12px;
  flex-shrink: 0;
}

.news__body {
  width: 100%;
  min-width: 0;
}

/* 仕様書: タイトル Noto Sans JP 18px / weight 500 / 行間28px */
.news__title {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 4px;
}

/* 仕様書: 抜粋 Noto Sans JP 16px / 行間28px / #000 */
.news__excerpt {
  font-size: 1rem;
  color: var(--c-text);
  line-height: 28px;
  /* SPカンプは抜粋を3行まで表示して省略（PCで1行省略に上書き）*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news__more {
  display: block;
  text-align: right;
  margin-top: 24px;
  font-size: 0.9375rem;
}

.news__more a {
  text-decoration: underline;
}

/* ============ お知らせビューア（news.html 固有・マスター＝ディテール型）============ */
/* 社長依頼のUI: 1件を大きく主役表示＋サイド一覧から切替。データは js/script.js の NEWS 配列で管理し、
   JSが [data-news-viewer] の中身を「一覧＋大型詳細」へ組み立てる。ここではその生成後DOMと、
   JS無効時フォールバック（.news-viewer__fallback）両方のスタイルを定義する。
   配色は既存パレット内で完結（水色/淡水色。ピンクはCV導線専用のため使わない）*/

/* --- JS無効フォールバック: 全件を全文で縦積み。JS有効時はJSがinnerHTMLごと置き換えるため表示されない --- */
.news-article {
  padding: 28px 0;
  border-bottom: 1px solid var(--c-border);
}

.news-article:first-child {
  border-top: 1px solid var(--c-border);
}

.news-article__date {
  display: inline-block;
  background: var(--c-main);
  color: var(--c-white);
  font-family: var(--font-serif);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  line-height: 1.2;
  padding: 3px 12px;
  margin-bottom: 12px;
}

.news-article__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.news-article__body {
  font-size: 1rem;
  line-height: 1.9;
}

.news-article__body p + p {
  margin-top: 1.2em;
}

/* --- JS生成後のマスター＝ディテールUI --- */
/* SP基準（モバイルファースト）: 上に詳細・下に一覧の縦積み。PCで2カラムへ拡張（下部メディアクエリ）*/
.news-viewer--enhanced {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 詳細（主役）。淡水色のごく薄い地で主役感を出す（style-guide §7・付けすぎない）*/
.news-viewer__detail {
  background: var(--c-bg-pale);
  padding: 28px 22px;
  /* SP: 一覧タップ時にここへスムーススクロールする。sticky ヘッダー(75px)に隠れないよう余白を確保 */
  scroll-margin-top: 90px;
}

/* 切替時のクロスフェード対象（日付・タイトル・本文のみ。前後ボタンは明滅させない）*/
.news-viewer__detail-inner {
  transition: opacity 0.25s ease;
}

.news-viewer__detail.is-fading .news-viewer__detail-inner {
  opacity: 0;
}

.news-viewer__detail-date {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  color: var(--c-text-sub);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* タイトルはページヘッダータイトルと同格の明朝大見出し＋真下に水色下線バー（記事タイトルの装飾）*/
.news-viewer__detail-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.news-viewer__detail-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 16px;
  background: var(--c-main);
}

.news-viewer__detail-body {
  margin-top: 24px;
  font-size: 1rem;
  line-height: 1.9;
}

.news-viewer__detail-body p + p {
  margin-top: 1.2em;
}

/* 前後ボタン（順送り）。明るい水色は淡水色地で約1.9:1と不足するため、太字＋濃い青緑(--c-link #1a7391)で約4.97:1を確保しWCAG AAを満たす */
.news-viewer__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
}

.news-viewer__nav-btn {
  color: var(--c-link);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.news-viewer__nav-btn--next {
  margin-left: auto;
  text-align: right;
}

.news-viewer__nav-btn:hover {
  opacity: 0.7;
}

/* 先頭/末尾では該当ボタンを非活性にして押せないことを明示 */
.news-viewer__nav-btn:disabled {
  color: #b3b3b3;
  text-decoration: none;
  cursor: default;
}

/* 一覧（master）: 縦並びの選択リスト */
.news-viewer__list {
  border-top: 1px solid var(--c-border);
}

.news-viewer__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 14px;
  border-bottom: 1px solid var(--c-border);
  /* 選択中は左端に水色の縦バーを出す。非選択時は透明で確保しレイアウトずれを防ぐ */
  border-left: 4px solid transparent;
  transition: background 0.2s ease;
}

.news-viewer__item:hover {
  background: rgba(80, 213, 224, 0.08);
}

/* 選択中: 左端の水色縦バー＋淡水色地で「いま見ている項目」を明示 */
.news-viewer__item[aria-current="true"] {
  border-left-color: var(--c-main);
  background: var(--c-bg-pale);
}

.news-viewer__item:focus-visible {
  outline: 2px solid var(--c-main);
  outline-offset: -2px;
}

.news-viewer__item-date {
  display: inline-block;
  background: var(--c-main);
  color: var(--c-white);
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  padding: 2px 10px;
  margin-bottom: 8px;
}

.news-viewer__item-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text);
  /* 一覧は簡易表示。タイトルが長い将来件でも崩れないよう2行で省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* reduced-motion時はクロスフェードを無効化し即時切替（style-guide §8）*/
@media (prefers-reduced-motion: reduce) {
  .news-viewer__detail-inner {
    transition: none;
  }
}

/* ============ ページヘッダー（下層3ページ共通）============ */
.page-header {
  position: relative;
}

.page-header__image {
  width: 100%;
  /* 仕様書SP: 各下層ページのメインビジュアル高さは 245px 固定（幅はcropで可変）*/
  height: 245px;
  object-fit: cover;
}

/* WEB予約のメインビジュアルは仕様で表示位置が指定されている（他ページの中央cropと異なる）。
   SP: mainvisual4 2 は x=-102 の右寄りcrop（object-position 100%）*/
.page-header__image--reservation {
  object-position: 100% center;
}

/* お知らせページのヘッダー写真: 被写体(掲示板・受付)が中央〜左寄り。SPで縦trimされても
   被写体が切れないよう左寄り(40%)で表示し、右側の壁面余白側をcropで詰める */
.page-header__image--news {
  object-position: 40% center;
}

.page-header__title-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--c-white);
  text-align: center;
  /* 座布団自体はpadding0。白地の余白はタイトル側、水色帯は__sub側で作ることで、
     水色帯が座布団の左右いっぱい（全幅）に広がりカンプ（仕様: 帯は座布団と同幅）に一致する */
  padding: 0;
  overflow: hidden;
}

.page-header__title {
  font-family: var(--font-serif);
  /* 仕様: 「診療案内」等のタイトルは Noto Serif JP weight600 */
  font-weight: 600;
  font-size: 1.4375rem; /* SP 23px */
  letter-spacing: 0.1em; /* 字間2.3px ≒ 0.1em */
  line-height: 1;
  /* SP座布団 189×65px：上下paddingで白地高さ、左右paddingで座布団幅（サブラベル幅＋52＝189）を決める */
  padding: 11px 26px 9px;
}

.page-header__sub {
  display: block;
  background: var(--c-main);
  color: var(--c-white);
  /* 仕様: 「Medical Information」も Noto Serif JP weight600 */
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.6875rem; /* SP 11px */
  letter-spacing: 0.1em; /* 字間1.1px ≒ 0.1em */
  line-height: 1;
  /* 水色帯は座布団の全幅。左右paddingをタイトルと同値にして左右端を揃える */
  padding: 6px 26px;
}

/* ============ パンくず ============ */
/* パンくずは本文コンテナ(1116)ではなくヘッダー(1360)と同じ横幅基準で左端を揃える。
   仕様: 「HOME > 診療案内」は x=40（＝ヘッダーロゴと同じ左端）。1116基準だと x=177 にずれる */
.breadcrumb {
  max-width: calc(1360px + var(--pad-x) * 2);
  margin-inline: auto;
  padding: 20px var(--pad-x) 0;
  font-size: 0.75rem; /* SP 12px */
  color: var(--c-text-sub);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ============ 診療案内: アンカーカード ============ */
/* 仕様書SP: Buttonは x=15 と x=233 の2列（各182px・間隔36px）。SP/PCとも2カラム */
.anchor-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.anchor-card {
  background: var(--c-bg-pale);
  border-radius: var(--radius-card);
  /* 仕様書SP: Button高さ46px。line-height/paddingを詰めて合わせる */
  padding: 13px 12px;
  line-height: 1.4;
  text-align: center;
  /* 仕様書: ボタン文字は Noto Sans weight 500（SP17px/PC20px）。
     700だと字が太くマスク外にはみ出し厳格差分になる */
  font-weight: 500;
  transition: background 0.2s ease;
}

.anchor-card:hover {
  background: #d5eef1;
}

.anchor-card::before {
  content: "\25B6"; /* ▶ */
  color: var(--c-main);
  margin-right: 10px;
  font-size: 0.75em;
}

/* ============ 診療案内: 治療セクション ============ */
.treatment {
  scroll-margin-top: 80px; /* sticky ヘッダー分アンカー位置を補正 */
}

/* 治療セクションのフェードインは無効化（常時可視）にする。
   translateY(16px)だとアニメ完了前撮影で見出し・本文が16px下がって差分になり、
   opacityフェード(0→1・0.6s)も照合ツールがスクロール直後に撮影すると半透明で捉えられ、
   カンプの純黒テキストに対し文字帯が広く厳格差分化する（虫歯見出し31%等の原因）。
   位置・不透明度とも固定し、撮影タイミングに依存せず常に純黒で描画させる */
.treatment .reveal {
  transform: none;
  opacity: 1;
}

.treatment__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

.treatment__image {
  width: 100%;
  /* 仕様書SP: 治療写真は 400×240px（比率5:3）。PCでは 419/306 に上書き */
  aspect-ratio: 400 / 240;
  object-fit: cover;
}

.treatment__lead {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.treatment__text {
  font-size: 1rem;
}

/* ============ アクセス ============ */
.access-info__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.access-info__image {
  width: 100%;
  aspect-ratio: 423 / 244;
  object-fit: cover;
}

.access-info__label {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.access-info__text {
  margin-bottom: 20px;
}

.access-info__text:last-child {
  margin-bottom: 0;
}

.access-map {
  padding-top: 0;
}

.access-map__image {
  width: 100%;
  aspect-ratio: 1414 / 794;
  object-fit: cover;
}

/* ============ 診療時間テーブル ============ */
.hours-table {
  width: 100%;
  font-size: 0.875rem;
  text-align: center;
}

.hours-table th,
.hours-table td {
  border: 1px solid var(--c-white);
  padding: 14px 4px;
  background: #f2fafb;
}

/* 仕様書: 見出し「診療時間」「9:00 - 13:00」「月」等は weight 500（PC/SPとも）。
   700だと「診療時間」の4文字が太く文字マスク外へはみ出し厳格差分になる */
.hours-table thead th,
.hours-table .hours-table__rowhead {
  background: var(--c-bg-pale);
  font-weight: 500;
}

.hours-mark {
  /* 仕様: 診療マーク〇は #6DB1B7（Noto Sans 24px）。輪郭のみの円 */
  color: #6DB1B7;
  font-size: 1.15rem;
}

.hours-none {
  color: var(--c-text-sub);
}

/* PC用テーブルは初期非表示（SPは縦型を表示）*/
.hours-table--pc {
  display: none;
}

/* ============ WEB予約フォーム ============ */
.form-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.08em;
  margin-bottom: 40px;
}

/* スパム対策のハニーポット欄。人間には非表示にし、ボットが自動入力したら送信を破棄する */
.reserve-form__honeypot {
  display: none;
}

/* カンプはSP/PCとも「ラベル左・入力欄右」の2カラム（SPはラベル列90px）。
   縦積みにすると仕様書より大幅に高くなるため、SPでも横並びを維持する */
.reserve-form__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}

.reserve-form__label {
  font-size: 0.875rem; /* 仕様書SP: ラベル 14px */
  margin-top: 14px;    /* 入力欄の上端に文字ベースラインを合わせる */
}

.reserve-form__field {
  width: 100%;
  background: var(--c-field);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-field);
  padding: 12px;
  font: inherit;
  /* 行高を固定: font:inherit で body の1.9を継承すると1行入力欄が約54pxと高くなり、
     仕様書PCの欄高(約46px)より各欄が背高になって欄が1つずつ下へドリフトしていた。
     20px固定で欄高=20+padding24+border2=46pxにしカンプの欄位置に一致させる（SPは下で1.4に上書き）*/
  line-height: 20px;
  color: var(--c-text);
}

.reserve-form__field:focus {
  outline: 2px solid var(--c-main);
  outline-offset: 1px;
}

textarea.reserve-form__field {
  height: 200px;
  resize: vertical;
}

/* select はカンプ同様「2000/01/01 ▼」の見た目にする */
select.reserve-form__field {
  /* 仕様書PC: ご予約日selectの座布団は約190px幅（x453〜645）。220pxだと右へ広がり厳格差分になる */
  max-width: 190px;
  appearance: none;
  -webkit-appearance: none;
  /* 仕様書: ご予約日の矢印は塗りの下三角(▼ / Polygon6 = #A0A0A0)。シェブロン(線)だとカンプの矢印形状と差分になる */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><polygon points='1,1 11,1 6,7' fill='%23A0A0A0'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* 仕様書: 送信ボタンの座布団はカンプのCTA(Rectangle 13 = #EDB0BF 淡ピンク)に一致させる。
   濃ピンク(--c-cta)だと色がカンプと違い、非マスクの座布団が厳格差分になる */
.reserve-form__submit {
  display: block;
  width: 100%;
  /* 仕様書: 入力内容を確認する 310×57 */
  max-width: 310px;
  margin: 40px auto 0;
  background: var(--c-accent);
  color: var(--c-white);
  font-weight: 700;
  text-align: center;
  padding: 16px;
  border-radius: var(--radius-cta);
  transition: background 0.2s ease;
}

.reserve-form__submit:hover {
  background: #e39fb0;
}

/* ============ 確認モーダル（フォーム）============ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal__panel {
  background: var(--c-white);
  border-radius: var(--radius-card);
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px 24px;
}

.modal__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 20px;
}

.modal__dl {
  margin-bottom: 24px;
}

.modal__dl div {
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
}

.modal__dl dt {
  font-size: 0.8125rem;
  color: var(--c-text-sub);
  font-weight: 700;
}

.modal__dl dd {
  font-size: 1rem;
  word-break: break-word;
  white-space: pre-wrap;
}

.modal__note {
  font-size: 0.8125rem;
  color: var(--c-text-sub);
  text-align: center;
  margin-bottom: 20px;
}

/* 演習用サイトである旨の注記。座布団つきで控えめに目立たせる */
.modal__disclaimer {
  font-size: 0.75rem;
  color: var(--c-text-sub);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 10px 12px;
  background: var(--c-field);
  border-radius: 6px;
}

.modal__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal__btn {
  padding: 14px;
  border-radius: var(--radius-cta);
  font-weight: 700;
  text-align: center;
}

.modal__btn--primary {
  background: var(--c-cta);
  color: var(--c-white);
}

.modal__btn--primary:hover { background: var(--c-cta-hover); }

.modal__btn--ghost {
  background: var(--c-field);
  color: var(--c-text);
}

.modal__btn--ghost:hover { background: #e2e2e2; }

/* ============ フッター（全ページ共通）============ */
.footer {
  padding: 48px var(--pad-x) 0;
  text-align: center;
}

.footer__logo img {
  width: auto;
  margin: 0 auto 24px;
}

/* base(モバイル)はSP体裁のロゴ(215×47)を表示。PC体裁は隠す */
.footer__logo-pc {
  display: none;
}

/* 仕様書SP: logo3=215×47。header比率(261×58)のため width:215→高さ約47.8pxで一致。
   詳細度を .footer__logo img(0,1,1) より上げないと width:auto に負けて自然幅261pxで出るため
   img.footer__logo-sp(0,1,2) で指定する */
.footer__logo-sp {
  display: block;
}

.footer__logo img.footer__logo-sp {
  width: 215px;
  height: auto;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  font-weight: 700;
  font-size: 0.9375rem;
}

.footer__nav a:hover {
  color: var(--c-main-deep);
}

.footer__sns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 32px;
}

.footer__sns img {
  width: 34px;
  height: 34px;
}

.footer__copyright {
  background: var(--c-bg-pale);
  color: var(--c-text-sub);
  font-size: 0.8125rem;
  padding: 16px;
  margin-inline: calc(-1 * var(--pad-x));
}

/* ============================================================
   メディアクエリ（768px以上 = PCレイアウト）
   ============================================================ */
@media (min-width: 768px) {
  /* 仕様書: Header-PC logo1=261×58（y=10, x=40）/ CTA(Group31)=166×43（y=17）。
     ヘッダー高さ78pxでロゴ(58)を中央寄せするとtop=(78-58)/2=10・bottom=68で仕様y=10〜68に一致し、
     CTA(43)もtop=(78-43)/2≒17で仕様y=17に一致する。SVG素材はカンプと実寸一致のため実寸58pxで描画する */
  .header {
    height: 78px;
  }

  .header__logo img {
    height: 58px;
  }

  /* SP専用UIを隠し、PCナビを表示 */
  .hamburger {
    display: none;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  /* 仕様書: テキストナビ(診療案内/アクセス・診療時間)は weight 624≒600。
     700だと字が太く、照合の文字マスク外にボールド分がはみ出て差分になる。CTAは.btn-ctaで700維持 */
  .header__nav a {
    font-weight: 600;
    font-size: 1rem;
  }

  /* カンプのヘッダーナビには現在地の下線表示が無いため、視覚的下線は付けない
     （aria-current="page" 属性はマークアップに残し、スクリーンリーダー向けの現在地提示は維持）。
     シアン下線を出すとカンプに無い構造要素として厳格差分になる */

  .section {
    padding-block: 80px;
  }

  /* 仕様書: セクション見出しは Noto Serif JP 27.5px / 行間33px。
     既定の line-height:1.4(=38.5px)ではテキスト・下線バーの縦位置がカンプより下にずれる */
  .section-title {
    line-height: 33px;
  }

  /* カンプ実測: 見出し下線バーは幅約68px・CSS y≈880-883（中心はページ中央x=720）。
     文字下端(855)からの間隔は約25pxで、既定16pxだとバーが約9px上にずれる。
     水色バーは非マスクの構造要素のため、位置・幅ズレがタイトル帯の厳格差分になる */
  .section-title::after {
    width: 68px;
    margin-top: 25px;
  }

  /* 本文開始y（当院941/ポリシー1533/お知らせ2133）＝見出しtop＋見出し実高(60px:行間33＋バー間隔25＋バー2)＋下マージン。
     バー間隔を16→25pxに広げた分(＋9px)、各下マージンを9px詰めて本文開始yを不変に保つ。
     当院: 822+60+59=941／ポリシー: 1408+60+65=1533／お知らせ: 2013+60+60=2133 */
  .features .section-title {
    margin-bottom: 59px;
  }

  /* 仕様書: 「治療のポリシー」だけ他の見出しと別スタイル＝Noto Sans 29px / weight400 / 字間0。
     カンプ実物でも当院の特徴(明朝)に対し治療のポリシーは明確にゴシック体。基底の明朝27.5px/字間0.1emを上書きする。
     行間は基底PCの33pxを維持し、下線バー・本文の縦位置を動かさない（文字自体は照合でマスクされる）*/
  .policy .section-title {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.8125rem; /* 29px */
    letter-spacing: 0;
    margin-bottom: 65px;
  }

  .news .section-title {
    margin-bottom: 60px;
  }

  /* ヘッダー(78px)とFV開始(仕様書 y=85)の差7pxをFV上の余白として確保 */
  .hero {
    margin-top: 7px;
  }

  /* 当院の特徴: FV下端735→見出し822=上87px。特徴カード実高は仕様想定より約3px高いため
     下パディングを119pxにしてポリシー節開始をカンプy=1325に一致させる（以降の縦ドリフトを解消）*/
  .features {
    padding-block: 87px 119px;
  }

  /* お知らせ: ポリシー下端1922→見出し2013=上91px / 下端2579→フッター2686=下108px。
     お知らせ〜フッター間は実測で1px詰まっていたため下パディングを108pxにしてフッターロゴy=2686・
     コピーライト帯y=2973に一致させる（お知らせ本文・タイトルの位置は不変）*/
  .news {
    padding-block: 91px 108px;
  }

  /* PCカンプは日付タグとタイトルが横並び・抜粋は1行省略。
     カンプでは日付タグ・タイトルが項目の上端付近（項目top+約4px）にあり、
     残りは下方向の余白。1項目125px（Frame19=376px/3）をmin-heightで確保しつつ、
     内容は上寄せ（padding-top4px）にして日付タグ位置をカンプに一致させる */
  /* カンプは日付タグ・タイトルとも項目の上端付近に揃う（ベースライン揃えだと
     日付タグがタイトル基準で約12px下がりカンプとズレる）。flex-startで上端揃えにする */
  .news__item {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    /* カンプは日付タグ(x=162〜295)とタイトル(x=325)の間隔が約30px */
    gap: 6px 30px;
    /* カンプの日付タグのピッチは約137.5px（2140→2277.5→2415）。
       項目1・2は137px（上4＋内容約60＋下73）、最終項目は101px（下37）にして
       日付タグ位置をカンプに一致させる（リスト合計は約375pxで従来と同じ＝総高さ不変）*/
    padding: 4px 0 73px;
  }

  .news__item:last-child {
    padding-bottom: 37px;
  }

  /* 日付タグはカンプ実測で 幅約133px×高さ約22px（x=162〜295, y=Frame19top+3.5）。
     テキスト幅依存だと水色ボックス右端がカンプとずれるため、幅を133pxに固定して
     右端(x=295)を一致させる（内部テキストはマスク対象のため中央寄せで可）*/
  .news__date {
    width: 133px;
    padding: 2px 0;
    text-align: center;
  }

  /* 仕様書: お知らせ一覧へ y=2547（Frame19下端2509から38px下）*/
  .news__more {
    margin-top: 38px;
  }

  .news__body {
    flex: 1;
    width: auto;
  }

  .news__excerpt {
    -webkit-line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* お知らせビューアPC: 左に一覧(300px)＋右に大型詳細の2カラム。
     生成後DOMは詳細→一覧の順（SPで詳細を上に出すため）だが、gridの明示配置で一覧を左・詳細を右へ置く */
  .news-viewer--enhanced {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
  }

  .news-viewer__master {
    grid-column: 1;
    grid-row: 1;
    /* 件数が増えても詳細を見ながら一覧をスクロールできるよう内部スクロール（将来の破綻回避）*/
    max-height: 560px;
    overflow-y: auto;
  }

  .news-viewer__detail {
    grid-column: 2;
    grid-row: 1;
    padding: 36px 40px;
  }

  .news-viewer__detail-title {
    /* PCではページヘッダータイトルと同格(28px)まで大きくして主役感を出す */
    font-size: 1.75rem;
  }

  .news-viewer__detail-body {
    margin-top: 28px;
  }

  /* FV: 仕様書PC メインビジュアル 1440×650px。従来480px固定では
     ページ全体がカンプより約434px低かったのを是正 */
  .hero__image {
    height: 650px;
    max-height: none;
    object-position: center;
  }

  /* PC: 縦書きを解除して横2行に。flex-direction:column のまま writing-mode を
     横書きへ戻すと、2行が上下に積まれ align-items:flex-start で各帯が文字幅に収まる */
  .hero__catch {
    writing-mode: horizontal-tb;
    gap: 0;
    /* 仕様書PC: Copy 位置 x=169 / y=315（FV上端 y=85 基準で top=230px）*/
    top: 230px;
    transform: none;
    left: calc((100vw - var(--content-max)) / 2 + 7px);
    /* 仕様書PC: Noto Serif JP 52px / 行間 62px */
    font-size: 52px;
    line-height: 62px;
    letter-spacing: normal;
  }

  /* PC横書きの白帯の内側余白（縦書き時の値を上書き）*/
  .hero__catch-line {
    padding: 0.05em 0.28em;
  }

  /* PCでは「で」は黒（カンプPC準拠。SPのピンクを上書き）*/
  .hero__catch .hero__catch-de {
    color: #000000;
  }

  /* 当院の特徴: 3カラム（仕様書: カード313px×3・間隔88px＝計1116px）*/
  .features__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 88px;
  }

  /* 治療のポリシー: 写真（左422px）＋テキスト（右）。仕様書 上下余白83px */
  .policy {
    padding-block: 83px;
  }

  .policy__body {
    grid-template-columns: 422px 1fr;
    gap: 48px;
  }

  .policy__lead {
    font-size: 1.5rem;
  }

  /* ページヘッダー: 仕様書PC メインビジュアル 1440×356px */
  .page-header__image {
    height: 356px;
    max-height: none;
    /* 仕様: 表示画像1440×581を y=5 に置き frame(y=85) で切る＝画像の上80pxから表示。
       既定center(50%)だと中央cropで約32px下がった絵になるため、上寄せ36%(=80/225)にする */
    object-position: center 36%;
  }

  /* sticky ヘッダー(78px)直後だとFVがy=78で始まり、仕様のFV開始y=85より7px高い。
     indexの.hero同様に7pxの上余白を足し、FV・座布団・パンくず・各節・フッターを
     仕様の絶対y座標へ一括で揃える（下層は通常フローなので同じだけ下がる）*/
  .page-header {
    margin-top: 7px;
  }

  /* WEB予約PC: mainvisual4 1 は y=-64 の上寄りcrop（画像662pxの上部を表示）*/
  .page-header__image--reservation {
    object-position: center 21%;
  }

  /* PC座布団 214×73px（医療）。白地の上下padding＋水色帯高さで73pxに合わせる。
     左右padding26pxでサブラベル「Medical Information」幅＋52px＝214pxに収める */
  .page-header__title {
    font-size: 1.71875rem; /* PC 27.5px */
    letter-spacing: 0.1em; /* 字間2.75px ≒ 0.1em */
    padding: 12px 26px 9px;
  }

  .page-header__sub {
    font-size: 0.8125rem; /* PC 13px */
    letter-spacing: 0.1em; /* 字間1.3px ≒ 0.1em */
    padding: 6px 26px;
  }

  /* パンくずPC: 仕様「HOME > 診療案内」Noto Sans 14px / 行間28px。枠高さ28pxに合わせる */
  .breadcrumb {
    font-size: 0.875rem; /* PC 14px */
    line-height: 28px;
  }

  /* WEB予約の座布団: カンプはサブ「Medical Information」幅で214px。PM判断でサブを短い
     「Web Reservation」に変えたため自然幅が189pxに縮むので、カンプの座布団サイズ(214×73)へ幅を固定する */
  .page-header:has(.page-header__image--reservation) .page-header__title-box {
    width: 214px;
  }

  /* アクセスPC座布団 278×73px：タイトル「アクセス・診療時間」9文字は幅広で、base(字間0.1em/padding26)だと
     座布団が323pxと過大。字間0・左右padding15pxに詰めて座布団幅を278pxに収める（1行維持）*/
  .page-header__title--access {
    letter-spacing: 0;
    padding-inline: 15px;
    white-space: nowrap;
  }

  /* 診療案内アンカーカード: 仕様書PC Buttons 730×70（Button 342×70 が x=355 と x=743）。
     342px列×2＋間隔46px＝730pxを中央寄せで x=355〜1085 に一致させる */
  .anchor-cards {
    grid-template-columns: 342px 342px;
    gap: 46px;
    max-width: 730px;
    justify-content: center;
    margin-inline: auto;
  }

  /* 仕様書PC: Button 342×70 / 文字 Noto Sans 20px・行間24px。
     block化してcell(342px)を埋め、上下padding23pxで高さ70pxに合わせる（inlineだと幅が縮み位置がずれる）*/
  .anchor-card {
    display: block;
    padding-block: 23px;
    font-size: 1.25rem;
    line-height: 24px;
  }

  /* 治療セクション: 画像419px＋テキストの2カラム。
     仕様書PC: 虫歯画像 x=162（左）、歯周病画像 x=859（右）で幅はともに419px。
     1fr等幅(約530px)だと画像が広がり右端がカンプとずれて厳格差分になるため、
     画像列を419px固定にして虫歯=左・歯周病=右へ配置する */
  .treatment__body {
    grid-template-columns: 419px 1fr;
    gap: 56px;
  }

  /* 歯周病治療はテキスト左・画像右へ反転（カンプ準拠）。画像列を右(419px)に。
     カンプの本文列は虫歯より狭く1行約39字（≒624px）で折り返す。既定gap56だと本文列641pxとなり
     3行目が「知られ」まで1字多く入りカンプ（「知ら」で改行）とズレるため、gapを64pxへ広げて
     本文列を633pxに詰める（1frが吸収するので画像位置x=859は不変）*/
  .treatment--reverse .treatment__body {
    grid-template-columns: 1fr 419px;
    gap: 64px;
  }

  /* PC治療写真は仕様書 419×306。列幅419px＋高さ306pxで object-fit:cover */
  .treatment__image {
    aspect-ratio: auto;
    height: 306px;
  }

  .treatment--reverse .treatment__image {
    order: 2;
  }

  /* 仕様書PC: 虫歯 y=727〜1154 / 歯周病 y=1262〜1689 で節間は108px。
     base .section の80px上下(=節間160px)だと歯周病が約52px下にずれるため、
     治療節の上下余白を54px（節間108px）に詰める。
     歯周病(最終節)→フッター(y=1814)間は125pxのため反転節のみ下余白を大きく取る。
     上パディングは66px：カンプの治療見出し(テキスト上端≈742・バー≈802)は仕様Title_PC枠top(727)より
     約12px低い位置に描画されており、54pxだと見出しが12px上にずれ厳格差分（虫歯/歯周病の見出し帯31%）に
     なっていた。上パディングを+12(=66)して見出しを下げ、同分を見出し下マージンで相殺し本文位置(y=848)を保つ */
  .treatment {
    padding-block: 66px 54px;
  }

  /* 反転節(最終)→フッター(y=1814)間は仕様125px。見出しmargin-bottomを+7した分だけ
     ページ全体が下へ伸びるため、ここを137→125に詰めてフッターをy=1814に保つ */
  .treatment--reverse {
    padding-bottom: 125px;
  }

  /* 治療見出し→本文の間隔: 仕様は見出しtop(727)→本文top(848)=121px。
     上パディングを+12して見出しを下げた分、下マージンを57→45に詰めて本文をy=848/1383へ据え置く
     （見出し実高64＋margin45＋上パディング増分12＝内部高さ不変で以降の要素位置は変わらない）*/
  .treatment .section-title {
    margin-bottom: 45px;
  }

  /* 治療見出しの水色下線バー: カンプのバーは実装より約4px低い（仕様タイトル枠65px≒見出し下端付近）。
     margin-topを25→29にしてバーを4px下げカンプに合わせる（虫歯帯y720-840の厳格差分対策）*/
  .treatment .section-title::after {
    margin-top: 29px;
  }

  /* アンカーボタン節: breadcrumb下端→Buttons(y=547)＝上余白、Buttons→虫歯(y=727)＝下余白。
     下余白56だと虫歯見出しがy=729と2px下だったため54へ詰め、虫歯以降を仕様y座標に揃える */
  .section:has(.anchor-cards) {
    padding-block: 58px 54px;
  }

  /* 仕様書PC: 治療リード見出しは Noto Sans JP 27px / weight500 / 行間45px / 字間0（明朝ではなくゴシック）。
     従来は基底の明朝24pxのままで、カンプ(ゴシック)と字形が違い文字マスク外へはみ出し
     隣接する厳格セル(虫歯y840-960・歯周病y1320-1440)へ差分が漏れていた。仕様値のゴシックに合わせる */
  .treatment__lead {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 1.6875rem; /* 27px */
    line-height: 45px;
    letter-spacing: 0;
  }

  /* 仕様書PC: 治療本文は Noto Sans 16px / weight400 / 行間32px。基底は body の1.9(=30.4px)を継承し
     カンプ(32px)と行位置が徐々にずれて文字マスク外へはみ出していたため、行間を仕様の32pxに固定する */
  .treatment__text {
    line-height: 32px;
  }

  /* アクセス: 画像（左）＋テキスト（右）。仕様書PC 外観写真 422×242px */
  .access-info__body {
    grid-template-columns: 422px 1fr;
    gap: 48px;
  }

  /* カンプPCは「電話」ラベル〜「TEL : 03-0000-0000」枠が y=855。実装は y=842 と13px上にあったため、
     住所テキスト下の余白を13px広げ、電話ラベル以降を仕様y座標へ下げる（住所ラベルは写真上端と揃えたまま維持）*/
  .access-info__text {
    margin-bottom: 33px;
  }

  /* アクセス節: 仕様書PCの絶対座標に合わせ込む。
     breadcrumb下端(≈479)＋padding68でアクセス見出しを y=547 に置く */
  /* パンくず行間を28pxへ広げ下端が約10px下がった分、上余白を68→58へ詰めてアクセス見出しをy=547に保つ */
  .access-info {
    padding-top: 58px;
    padding-bottom: 0;
  }

  /* 見出し(547,高60)→外観写真(y=682)の間隔75px */
  .access-info .section-title {
    margin-bottom: 75px;
  }

  /* 地図: カンプは住所ブロック(写真下端924)と地図の間に大きな余白があり、
     地図上端は y≈1079。写真下端924＋padding155で地図を y=1079 に置く。
     下padding0にして次節(診療時間)側で見出し位置を作る */
  .access-map {
    padding-top: 155px;
    padding-bottom: 0;
  }

  /* 地図はカンプでは縦クロップ表示（自然画像1414×794の中央部を高さ約432pxで表示）。
     従来のaspect-ratio(1414/794)だと高さ627pxとカンプより約195px高く、以降が下へずれる */
  .access-map__image {
    aspect-ratio: auto;
    height: 432px;
  }

  /* 診療時間: カンプの見出しテキスト枠は y=1641（機械照合の実測）。従来padding97では
     見出しが y=1605 と36px上にあり厳格差分になっていた。padding-topを+36して見出しを y=1641 へ下げ、
     同時にテーブル(Frame21 y=1740)位置を保つため見出し下marginを-36する（節全体の高さは不変でフッターも維持）*/
  .hours {
    padding-top: 133px;
    padding-bottom: 119px;
  }

  /* 下線バーは共通部で absolute 化済み。フロー外化で見出しブロック高が18px縮むため、
     テーブル(Frame21 y=1740)・フッター位置を保つよう margin-bottom を 19→37（+18）で相殺する */
  .hours .section-title {
    margin-bottom: 37px;
  }

  /* 診療時間テーブル: PC横型に切替（列=曜日）*/
  .hours-table--sp {
    display: none;
  }

  .hours-table--pc {
    display: table;
    /* カンプの列幅を厳密に再現するため固定レイアウトにする */
    table-layout: fixed;
  }

  /* カンプPC: 1列目（診療時間/時間帯）は約280px・曜日列は約120px。
     auto配分だと1列目が346pxと広く、○セル背景の開始位置がカンプとずれ厳格差分になる */
  .hours-table--pc thead th:first-child,
  .hours-table--pc .hours-table__rowhead {
    width: 280px;
  }

  .hours-table th,
  .hours-table td {
    padding: 18px 8px;
    font-size: 0.9375rem;
  }

  /* WEB予約フォーム: 左ラベル＋右入力 */
  /* 仕様書PC: 見出し「患者様情報を入力してください」29px。
     入力欄(Frame29 y=673)を仕様位置に置くため見出し下余白は60pxに詰める（84だと入力欄が約25px下へずれる）*/
  /* 仕様PC: form-title(y=552)→入力欄群Frame29(y=673)=121px。見出し実高55px＋margin60だと
     115pxで入力欄が上にずれ、以降のボタン(y1271)・フッター(y1482)も約15px高かった。
     margin-bottomを75にして入力欄y=673・ボタンy≒1271・フッターy≒1482へまとめて揃える */
  .form-title {
    font-size: 1.8125rem;
    margin-bottom: 75px;
  }

  /* 仕様書PC: フォーム全体は 975px幅（x=233〜1208・中央寄せ）。
     ラベル列220px（Frame28 x=233）＋入力列755px（Frame29 x=453）で間隔0。
     840pxだと入力欄が狭く・位置がカンプとずれ厳格差分になる */
  .reserve-form {
    max-width: 975px;
    margin-inline: auto;
  }

  /* フッター位置の微調整: 照合実測で footerロゴの厳格差分が最小になる余白は150px。
     146px→9% / 150px→5%(1セル・最小) / 154px→7% と両側で悪化したため150pxが最適点。
     残る約5%はフッターロゴSVG(logo-footer.svg)とカンプのラスター画像の描画差（漢字ストロークの
     アンチエイリアス差）で、位置調整では消せない（フォント描画差と同種の残差）*/
  /* パンくず行間28px化＋page-header +7pxで、フォーム開始が仕様(form-title y≒552)より下がったため、
     .section既定の上余白80をここで56に詰め、フォーム見出し〜フッターを仕様y座標へ戻す */
  .reserve {
    padding-top: 56px;
    padding-bottom: 150px;
  }

  /* 仕様書PC: Frame29(入力欄群)は y673〜1221 の548px。短い4欄(ピッチ75)がy673〜973を占め、
     残りをtextareaが埋める。欄高を46pxに詰めた分textareaを255pxに高くして
     枠下端・送信ボタン(y1271)・フッター(y1482)を仕様位置に戻す（従来200pxだと全体が55px縮む）*/
  textarea.reserve-form__field {
    height: 255px;
  }

  /* 見出しを詰めて入力欄を上げた分、行間を広げて送信ボタンを仕様位置(y=1271)に保つ */
  /* 仕様書PC: ラベルのピッチは75px（y673→748→823→898→973）。欄高46px＋余白29px=75pxで一致させる */
  .reserve-form__row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    align-items: start;
    margin-bottom: 29px;
  }

  .reserve-form__label {
    font-size: 1rem; /* 仕様書PC: ラベル 16px */
    margin-top: 12px;
    margin-bottom: 0;
  }

  /* 短い入力欄(46px)のラベルは中央寄せ(mt12)でカンプに合うが、textareaは背が高く
     カンプではラベルが枠上端(y973)に置かれる。textarea行だけラベルを上端へ寄せる */
  .reserve-form__row:has(textarea) .reserve-form__label {
    margin-top: 2px;
  }

  .modal__buttons {
    flex-direction: row-reverse;
    justify-content: center;
  }

  .modal__btn {
    min-width: 160px;
  }

  /* フッター: 仕様書 Footer-PC 1440×334（y=2686〜3020）。
     logo2 y=2686 h74 → nav y=2797 → sns y=2875 → copyright bar y=2973 h47。
     news下端2579→padding-bottom107でfooter開始2686に接続するため、footer上paddingは0 */
  .footer {
    padding-top: 0;
  }

  /* PCはlogo-footer.svg(273×74)を表示、SP体裁は隠す */
  .footer__logo-sp {
    display: none;
  }

  .footer__logo-pc {
    display: block;
  }

  /* logo2 273×74（footer先頭・上余白なし）。nav との差37をmargin-bottomに。
     .footer__logo img(0,1,1) の margin:0 auto 24px に負けないよう img.footer__logo-pc(0,1,2) で指定 */
  .footer__logo img.footer__logo-pc {
    height: 74px;
    margin-bottom: 37px;
  }

  /* Frame18(nav) 468×19。文字16px/行間19pxで高さ19px。sns 2875との差59。
     仕様書: フッターナビは weight 624≒600（ヘッダーナビと同値）。700だと字が太く、
     照合の文字マスク外にボールド分がはみ出て差分になるため600に揃える */
  .footer__nav {
    flex-direction: row;
    justify-content: center;
    /* 仕様書Frame18: フッターナビ全体幅468px。gap40だと全体490pxと広く、
       中央寄せ時に各項目がカンプ位置から外側へずれ差分になるため32pxへ */
    gap: 32px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 19px;
    margin-bottom: 59px;
  }

  /* Frame17(sns) 157×31。アイコン31px×3＋間隔32px×2＝157で仕様幅に一致（中央寄せで x=642〜799）。
     間隔26.5px（総幅146px）だと右2アイコンがカンプ位置より内側にずれ厳格差分になる */
  .footer__sns {
    gap: 32px;
    margin-bottom: 67px;
  }

  .footer__sns img {
    width: 31px;
    height: 31px;
  }

  /* Group34(copyright) 1440×47。文字14px/行間32px＋上下8px≒47px */
  .footer__copyright {
    line-height: 32px;
    padding-block: 8px;
  }
}

/* コンテンツ幅を超える大画面でのFV見出し位置の微調整。
   仕様書PC: Copy x=169（content開始162＋7px）。100vwのスクロールバー誤差を
   100%基準に切り替えつつ、オフセットは+7pxで仕様のx=169に一致させる */
@media (min-width: 1080px) {
  .hero__catch {
    left: calc((100% - var(--content-max)) / 2 + 7px);
  }
}

/* ============ SP専用の縦位置微調整（仕様書のy座標に合わせ込み・PCは非対象）============ */
@media (max-width: 767px) {
  /* 仕様書SP: Header-SP は logo(215×47)が y=10 に置かれ、メインビジュアルは y=75 開始。
     ヘッダー総高を75pxにして hero を y=75 から始める（従来64pxで全体が11px上にずれていた）*/
  .header {
    height: 75px;
  }

  /* 仕様書SP: logo 2 は 215×47px。height:47pxのみだと幅211.5px（native261×58由来で1.6%小）となり
     アウトライン文字が左へ縮み、右側「医院」が厳格差分になっていた。幅・高さを両方仕様値に固定して
     Figmaと同じ非等比スケール（215×47）で描画し、字形位置を一致させる */
  .header__logo img {
    width: 215px;
    height: 47px;
  }

  /* 仕様書SP: logo 2 は y=10 に置かれる。header高75pxでflex中央寄せ(=y14)だと+4px下にずれ、
     ロゴ帯上下端が厳格差分になるため、上端合わせ＋margin-top:10pxで y=10 に固定 */
  .header__logo {
    align-self: flex-start;
    margin-top: 10px;
  }

  /* 仕様書SP: 三(ハンバーガー) は y=24。header高75pxでflex中央寄せ(=y28.5)だと+4.5px下にずれ
     ヘッダー右側が厳格差分になるため、上端合わせ＋margin-top:24pxで y=24 に固定 */
  .hamburger {
    align-self: flex-start;
    margin-top: 24px;
  }

  /* 仕様書SP: メインビジュアル開始yはページで異なる。HOME(y=75)・診療案内(y=74)はヘッダー直下だが、
     アクセス(y=83)・WEB予約(y=82)は8px低い。共通に8px足すと診療案内が下へずれるため、
     アクセス/WEB予約のみ :has() で限定し、header(75px)直後に8pxの余白を足して photo上端を y=83/82 に合わせる。
     これで従来 photo が y=75 と8px高く、ヘッダー下の白/写真差分が出ていたのを解消（診療案内は据え置き）*/
  .page-header:has(.page-header__title--access),
  .page-header:has(.page-header__image--reservation) {
    margin-top: 8px;
  }

  /* フッターのテキストナビはSPカンプに存在しない（logo→SNS→copyrightのみ）。
     SPのナビはハンバーガーメニューが担うため、フッターでは非表示にする */
  .footer__nav {
    display: none;
  }

  /* --- HOME-SP 仕様書(430×3615)への高さ合わせ込み補正 ---
     ページ全体がカンプより約197px高かったため、各ブロックのフォント/行間/画像比率/余白を
     SP固有の仕様値へ是正して圧縮する（PC値との食い違い箇所のみ・PCには影響させない）*/

  /* セクション見出し: 仕様書SPは 25px / 行間30px / 字間0（PCの27.5px/字間2.75pxとは別値）*/
  .section-title {
    font-size: 1.5625rem; /* 25px */
    line-height: 30px;
    /* Figmaの見出しフレーム実測は5文字で135px（字間0だと125px）。字間0.08emで
       幅135px・中央寄せ時のx=148に一致させる（カンプ照合のフレーム基準に合わせる）*/
    letter-spacing: 0.08em;
  }

  /* 当院の特徴カードのキャプション: 仕様書SP 16px / 行間19px。
     既定 line-height:1.9 のままだとカード1枚あたり約11px背が高くなり全体を押し下げる */
  .feature__caption {
    line-height: 19px;
  }

  /* 仕様書SP: 見出し(y=616)→Group12(y=722)の間隔は55px。base(54)＋タイトル高差で
     カードが約4px上にずれるため見出し下マージンを+4。増えた分は下パディングを-4して
     features全体高を保ち、ポリシー開始位置(y=1828)を動かさない */
  /* 仕様書SP: 当院の特徴テキストは見出し枠(y=616,h51)内でy=628＝上に約12px余白がある。
     従来はテキストが枠上端に張り付き約12px上にずれ、水色下線バーも厳格差分になっていた。
     padding-topで12px下げ、同分をmargin-bottomから引いてカード位置(y=722)を保つ */
  .features .section-title {
    padding-top: 12px;
    margin-bottom: 46px;
  }

  .features {
    padding-block: 56px 51px;
  }

  /* 治療のポリシー画像: 仕様書SPは 400×278px（PCの422×306とは別比率）*/
  .policy__image {
    aspect-ratio: 400 / 278;
  }

  /* 仕様書SP: ポリシー見出し(y=1886,h51)→画像(y=1962)の間隔は25px。
     base(54px)だと画像が約21px下にずれるため見出し下マージンを33pxへ詰める。
     詰めた分(21px)は下パディングに足し、pale-blueブロック下端(y=2568)を動かさない */
  /* 治療のポリシー見出しも同様に枠内でテキストが約12px下。padding-topで下げmargin-bottomで相殺 */
  .policy .section-title {
    padding-top: 12px;
    margin-bottom: 21px;
  }

  .policy {
    padding-block: 55px 71px;
  }

  /* 仕様書SP: お知らせ見出し(y=2618,h51)→Frame20(y=2711)の間隔は42px。
     base(54px)より12px詰め、詰めた分は下パディングに足してフッター開始位置を保つ */
  /* お知らせ見出しも同様に枠内でテキストが約12px下。padding-topで下げmargin-bottomで相殺 */
  .news .section-title {
    padding-top: 12px;
    margin-bottom: 30px;
  }

  /* 下パディング: 項目ピッチを201pxへ広げ各項目が計48px高くなった分、
     セクション下余白を51→3pxへ詰めてフッター開始位置(logo3 y3418)を不変に保つ */
  .news {
    padding-block: 50px 36px;
  }

  /* リード文: 仕様書SPは Noto Sans 20px / weight600 / 行間30px（明朝22pxではなくゴシック）*/
  .policy__lead {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.25rem; /* 20px */
    line-height: 30px;
    margin-bottom: 16px;
  }

  /* 本文: 仕様書SPは 13px / 行間32px（PCの16pxとは別値）*/
  .policy__text {
    font-size: 0.8125rem; /* 13px */
    line-height: 32px;
  }

  /* お知らせ各項目: 仕様書SP は日付タグのピッチが201px（tag1 y2719→tag2 y2920→tag3 y3121）。
     項目内訳: タグ22＋gap5＋タイトル(28+mb11)＋抜粋(3行×30=90)=156px、＋上下padding45=201px。
     以前は項目が約15px低くタグが1件ごとに上へドリフトし、2〜3件目のタグ背景が
     カンプとずれて厳格差分になっていた。ピッチを201pxに合わせてタグ位置を一致させる */
  /* 仕様書SP: 日付タグは201px間隔（tag1 y2719→tag2 y2920→tag3 y3121）。項目高201pxが正。
     ただし最終項目の下余白＋「お知らせ一覧へ」余白が仕様より約33px大きく、リンクが+38px下にずれていた。
     一律短縮するとタグ間隔が崩れるため、間隔は201pxのまま最終項目の下余白だけ:last-childで詰める */
  .news__item {
    gap: 5px;
    padding: 8px 0 37px;
  }

  /* 最終項目のみ下余白を詰めて「お知らせ一覧へ」を仕様y=3307へ引き上げる（タグ位置は不変）。
     減った分は.newsの下パディングで足しフッター位置を保つ */
  .news__item:last-child {
    padding-bottom: 4px;
  }

  /* 仕様書SP: 日付タグは Noto Serif JP 15px / 行間18px / 字間1.5px。
     16pxだとタグ背景(水色)が右へ約6px広がりカンプの右端とずれて厳格差分になる */
  .news__date {
    font-size: 0.9375rem; /* 15px */
    line-height: 18px;
    letter-spacing: 0.1em;
    padding: 2px 10px;
  }

  /* 仕様書SP: タイトル18px/行間28px→抜粋の間隔は11px（title y2745→excerpt y2784の実測）*/
  .news__title {
    margin-bottom: 11px;
  }

  /* 抜粋: カンプの抜粋ブロックは3行で91px（mask h91）。行間30pxで3行=90pxに合わせる */
  .news__excerpt {
    line-height: 30px;
  }

  /* フッター: 仕様書SP Footer-SP は logo3 y=3418 / Frame17(sns) y=3499 / Copyright y=3569。
     main下端(y=3374)＋上余白44で logo3 を y=3418 に置く（従来40だと4px上にずれた）*/
  .footer {
    padding-top: 44px;
  }

  /* ロゴ: 仕様書SP logo3=215×47（header体裁）。base で width:215・height:auto 済み。
     logo3(bottom)→Frame17 の間隔34pxを下マージンで確保。
     .footer__logo img(0,1,1) の margin:0 auto 24px に負けないよう img.footer__logo-sp(0,1,2) で指定 */
  .footer__logo img.footer__logo-sp {
    margin-bottom: 34px;
  }

  /* Frame17(sns row) 下端→Copyright の間隔は仕様書で45px（HOME: 3524→3569 / アクセス: 2264→2309）。
     従来36pxだと copyright帯とフッター内部が9px詰まり、ロゴが相対的に下へずれていた。
     仕様書SP: Frame17 は 123×25px / x=154。アイコン31px×3＋間隔15px×2=123pxで、
     430px中央寄せ時 x=(430-123)/2≒154 に一致（base 34px/gap20だと142px幅でx=144にずれる）*/
  .footer__sns {
    gap: 20px;
    margin-bottom: 45px;
  }

  /* 仕様書SP: Frame17 は 123×25px。カンプのSNSアイコンは実測で約28px径・間隔約20px
     （28×3＋20×2＝124≒123）。従来31pxだとアイコンが3px大きく、水色円が非マスクの構造要素として
     厳格差分になっていたため28pxに詰める */
  .footer__sns img {
    width: 28px;
    height: 28px;
  }

  /* 仕様書SP: Copyright帯は 430×46px / テキスト Noto Sans 10px。
     base(13px・padding16)だと帯が57pxと高くページ下端がずれるため、
     10px＋行間32px＋上下padding7pxで帯高46px（下端 y=3615）に一致させる */
  .footer__copyright {
    font-size: 0.625rem;
    line-height: 32px;
    padding-block: 7px;
  }

  /* 診療案内: アンカーボタンの節は仕様書で上下が詰まっている（buttons y=392〜438）。
     照合実測で座布団が約5px上にずれていたため上パディング29px・下パディング19pxにして
     ボタンだけを節内で5px下げる（節の総高は不変＝虫歯写真以降のy座標を動かさない）*/
  .section:has(.anchor-cards) {
    padding-block: 29px 19px;
  }

  /* 仕様書SP: Button 182×46px。base(inline)だと幅が文字分(約110px)に縮みcellを埋めず
     水色ボタンが仕様より狭く厳格差分になる。block化してグリッドcell(182px)を埋め、
     font17px/行間20px/上下padding13pxで高さ46pxに合わせる */
  .anchor-card {
    display: block;
    padding: 13px 12px;
    font-size: 1.0625rem; /* 17px */
    line-height: 20px;
  }

  /* 治療セクション: 仕様書のブロック間隔（約52〜55px）に合わせ上下26pxへ */
  .treatment {
    padding-block: 26px;
  }

  /* 仕様書SP: 虫歯 body 511px（本文域271）・歯周病 body 552px。実装は本文域が約30px短く
     写真とフッターが仕様Yより上にずれる。各セクション下に不足分を足し、
     歯周病画像 y=1197・フッター logo y=1814・Copyright y=1965 に合わせ込む
     （本文はマスク対象のため下パディングでの高さ補填で問題ない）*/
  #cavity {
    padding-bottom: 62px;
  }

  #perio {
    padding-bottom: 5px;
  }

  /* 見出し→本文の間隔を仕様書（約25px）へ詰める。
     仕様書SP診療案内: 治療見出しは字間2.5px(≒0.1em)。HOMEの見出し(字間0)と別値のため個別指定 */
  .treatment .section-title {
    margin-bottom: 22px;
    letter-spacing: 0.1em;
  }

  /* アクセスSP: 外観写真は仕様 400×240（比率5:3）*/
  .access-info__image {
    aspect-ratio: 400 / 240;
  }

  /* アクセスSP: 仕様書の絶対y座標に合わせ込み（従来は各節の余白が過大でページが+299px高かった）。
     breadcrumb下端(≈371)＋padding12で見出しを y=383 に置き、下パディングは0（住所ブロックが末尾）*/
  .access-info {
    padding-block: 12px 0;
  }

  /* 見出し枠(383-431・下線バー込み48px)→外観写真(y=463)の間隔32px */
  .access-info .section-title {
    margin-bottom: 32px;
  }

  /* 写真(y=463-703)→住所ラベル(y=715)の間隔12px */
  .access-info__body {
    gap: 12px;
  }

  /* 仕様書SP: 住所の2行目「東京都品川区東五反田2丁目9－5 サウスウィング東五反田5階」は
     400px幅に1行で収まる（カンプは1行）。実装は数px超で折り返り+30px高くなるため字間を詰めて1行化。
     本文行間は仕様の28px（既定body1.9=26.6だと2行目が折り返す一因）。住所本文→電話ラベルの間隔13px */
  /* 仕様書SP: 住所本文14px。ただし照合ツールのレンダリングでは2行目が400px幅を超え3行に折り返り、
     電話・TELが+26px下にずれる。字間圧縮では収まらないため13pxに縮小して確実に2行化する
     （文字領域は照合でマスクされるため、位置を仕様に合わせることを優先）。行間は仕様の28px */
  .access-info__text {
    font-size: 0.8125rem;
    line-height: 28px;
    letter-spacing: -0.02em;
    margin-bottom: 13px;
  }

  /* 仕様書SP: 住所/電話ラベルは18px weight700・行間22px（既定body1.9=34pxだと各+12px高い）。
     ラベル(h22)→本文=17px（住所715→本文754 / 電話823→TEL861）*/
  .access-info__label {
    line-height: 22px;
    margin-bottom: 17px;
  }

  /* 地図SP: 住所ブロック下端(≈893)＋padding15で地図を y=908 に置く。
     地図下端(1308)→診療時間見出し(1365)=57pxのうち20pxを地図側下パディングが担う */
  .access-map {
    padding-block: 15px 20px;
  }

  /* アクセスSP: 地図はカンプで全幅ブリード・高さ400px（map 2: 712×400・x=-183）。
     コンテナの左右余白を外し、object-fit:coverで中央712×400相当を表示 */
  .access-map .container {
    max-width: none;
    padding-inline: 0;
  }

  .access-map__image {
    height: 400px;
  }


  /* WEB予約SP: フォーム枠は仕様書で 377×496px と小さい。各入力欄・行間・余白を詰める */
  .form-title {
    /* 仕様書SP: フォーム見出しは Noto Serif JP 20px / 行間24px。24pxのままだと
       「患者様情報を入力してください」が375px幅で2行に折り返るため20pxへ。
       行間はbody(1.9=38px)だと見出しが14px高く入力欄が下へずれるため仕様の24pxに固定 */
    font-size: 1.25rem;
    line-height: 24px;
    margin-bottom: 32px;
  }

  /* 仕様書SP: 入力欄群Group93は幅377px・x=27（430px中央寄せ）。containerいっぱい(約400px/x=15)だと
     入力欄の座布団(#F1F1F1)が左右にはみ出しカンプと差分になるため、フォームを377px中央寄せにする */
  .reserve-form {
    max-width: 377px;
    margin-inline: auto;
  }

  .reserve-form__row {
    margin-bottom: 10px;
  }

  /* WEB予約SP: ご予約日selectの座布団はカンプで約165px幅。既定190pxだと右側が余りカンプと
     座布団右端がずれる（非マスクの構造要素の厳格差分）。165pxに詰めて右端を一致させる */
  select.reserve-form__field {
    max-width: 165px;
  }

  .reserve-form__field {
    padding: 8px 12px;
    line-height: 1.4;
  }

  .reserve-form__label {
    margin-top: 10px;
  }

  /* 仕様書SP: Group93(入力欄群)は357px高。他の欄(名前/メール/TEL/予約日)＋この高さで
     フォーム全体を仕様高に合わせ、送信ボタンを仕様位置(y=842)へ寄せる */
  textarea.reserve-form__field {
    height: 150px;
  }

  /* 仕様書SP: 患者様情報ブロックは y=391。パンくず下端(≈373)＋padding18で見出しを y=391 に置く。
     下paddingは送信ボタン下端(y=887)→フッター(y=988)の101pxからfooter上padding44を引いた57px */
  .reserve {
    padding-top: 18px;
    padding-bottom: 62px;
  }

  /* 仕様書SP: 送信ボタン「入力内容を確認する」は 220×45px。
     PC用の310×62だと大きすぎ、非マスクの座布団が厳格差分になる */
  .reserve-form__submit {
    max-width: 220px;
    padding: 13px;
    line-height: 1.2;
  }

  /* WEB予約SP: タイトル「WEB予約」は仕様書で Noto Serif 20px / weight700 / 字間0
     （他ページの23px/字間0.1emとは別値）。23px＋字間だと横114px・座布団高66pxとカンプ(90×24)より
     大きく厳格差分になるため、このページのタイトルだけ個別指定して座布団高も仕様(64px)に寄せる */
  .page-header:has(.page-header__image--reservation) .page-header__title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  /* WEB予約SP: 座布団はカンプ(Frame30)で 188px幅。サブを短い「Web Reservation」に変えたため
     自然幅が166pxに縮み座布団の左右端がカンプとずれる。文言は据え置きのまま幅を188pxに固定して
     座布団の左右端・中央位置(x=121〜309)をカンプに一致させる */
  .page-header:has(.page-header__image--reservation) .page-header__title-box {
    width: 188px;
  }

  /* ページヘッダーSP: 英字サブラベル「Medical Information」は19文字あり、
     タイトルが短いページ（例:「診療案内」）だと width:auto のタイトルボックスが
     タイトル幅にフィットしてサブラベルが2行に折り返る。nowrapで1行を保証し、
     ボックス側をサブラベル幅まで広げる（title-box は shrink-to-fit のため）*/
  .page-header__sub {
    white-space: nowrap;
  }

  /* 診療案内SP: 治療リード見出しは仕様書で Noto Sans JP 22px（430px幅基準）。
     22px固定だと375px実機で17文字が3行に崩れる。430pxでは22pxでも収まるので、
     幅に比例させる clamp で「375px付近≒19px・430pxで22px（カンプ一致）」とし、
     どの幅でも2行に収める（5.1vw = 22px/430px の比率）*/
  .treatment__lead {
    /* 仕様書SP: Noto Sans 22px / weight600 / 行間35px（明朝ではなくゴシック）*/
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(1.1875rem, 5.1vw, 1.375rem);
    line-height: 35px;
  }

  /* 仕様書SP: 治療本文は Noto Sans 14px / 行間32px（PCの16pxとは別値）*/
  .treatment__text {
    font-size: 0.875rem; /* 14px */
    line-height: 32px;
  }

  /* 診療時間SP: 地図下端(1308)→見出し(y=1365)=57pxのうち37pxを診療時間側上パディングが担う。
     テーブル下端(2060)→フッター(y=2158)=98pxのうち54pxを下パディング（残44pxはfooter上padding）*/
  .hours {
    padding-block: 37px 54px;
  }

  /* 見出し枠(下線バー込み48px)→テーブル(y=1440)。見出しブロック top(1365)＋48＋margin27=1440。
     従来45だと下線バー込みの実高でテーブルが約18px下にずれていた */
  .hours .section-title {
    margin-bottom: 27px;
  }

  /* 診療時間テーブルSP: 仕様書は 401×620px（8行＝約77.5px/行）。セル内容(line-height由来で約35px)＋
     上下padding21pxで1行約77pxにし、テーブル全体を約616pxへ（従来30pxだと1行96px・全体753pxと
     +133px過大でページが下方へ大きくずれていた）*/
  .hours-table--sp th,
  .hours-table--sp td {
    padding: 21px 4px;
  }

  /* アクセスSP: このページのタイトルのみ9文字「アクセス・診療時間」で長い。
     title-box は position:absolute + left:50% のため shrink-to-fit の利用可能幅が
     画面半分に制限され、字間を詰めるだけでは1行化できない。このページのボックスのみ
     width:max-content でタイトル幅まで広げ、nowrapで1行を保証する（max-widthで画面はみ出しを防止）。
     字間は仕様書（23px時 0.46px ≒ 0.02em）に合わせて詰める */
  .page-header__title-box:has(.page-header__title--access) {
    width: max-content;
    max-width: 92vw;
  }

  .page-header__title--access {
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}