/*
 * TOP ページ（front-page.php）— Design v2 R6 Refinement。
 *
 * 正本: docs/design-v2/REQUIREMENTS.md / DESIGN.md / TOP-R6-REFINEMENT-SPEC.md。
 * R6 の主眼:
 *   1. FIRST VISIT〜ACCESS を約 1200px の安定した Reading Field で共有（DIRECTOR は例外＝full-width Deep Navy）
 *   2. 主要 H2（初めての方へ / 診療案内 / 設備と治療環境 / 治療事例 / 医院・アクセス）を共通 .fp-h2 へ統一
 *   3. TREATMENT 上段は「左＝精密治療写真(Evidence) / 右＝3診療の同格縦3段」。虫歯・根管治療にもアイコン
 *   4. .fp-break（独立した区切り写真）を撤去。section rhythm は padding で成立させる
 *   5. .fp-field-d の背景（PC=院内 IMG_4683 / SP=顕微鏡 IMG_4789、opacity 0.06）。木目は ACCESS へ集約
 *   6. ACCESS の Editorial Wood は opacity で薄めず素材として見せる
 *   7. ACCESS〜CTA を wood full-width 内の「明るい Editorial Information Panel 1枚」へ。Site-wide Ending 化
 * 木目は既存承認素材（assets/images/wood-poc/wood-style-c-editorial-wood.png）を実素材として使用し、
 * CSS 生成の gradient で代替しない。tokens.css の値は変更しない。
 * ブレークポイントは 1024px / 900px / 767px。
 */

/* ============ 共通プリミティブ ============ */
.fp-hero,#concept,#menu,#equipment,#case,#doctor,#access,.fp-ending{--font-num:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif}
.fp-wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--container-gutter)}
.fp-wrap--wide{max-width:var(--content-wide);margin:0 auto;padding-inline:var(--container-gutter)}

/* Field 背景トークン */
:root{
	--field-b:#FBFBFA;      /* CONCEPT — White 基調 */
	--field-c:#F7F7F5;      /* OUR APPROACH — White〜Very Light Gray */
	--field-e:#F2F4F6;      /* EQUIPMENT + CASE — cool neutral very light gray */
	--wood-url:url(../images/wood-poc/wood-style-c-editorial-wood.png);
	--interior-url:url(../images/field/interior-pc.jpg);   /* R6 Final §4.1: PC fixed background = 院内風景（IMG_4683） */
	--microscope-url:url(../images/field/micro-sp.jpg);    /* R6 Final §4.2: SP background = 顕微鏡写真（IMG_4789） */
}

/* .fp-eyebrow* は全ページ共通 Ending でも使うため assets/css/site-ending.css へ移動した（値は不変）。 */

/* ============ 主要 H2（R6 §4） ============
 * FIRST VISIT 以降の主要 section heading を同格の Typography Level に揃える共通クラス。
 * CONCEPT / OUR APPROACH / DIRECTOR は特殊 Composition のため対象外（別クラスのまま）。
 * eyebrow(English label) の直下に置かれ、margin-top で English label との関係を、
 * 各 section の lead 側 margin で heading 下の白を作る。
 */
.fp-h2{font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(27px,3vw,40px);line-height:1.4;letter-spacing:.03em;color:var(--navy-800);margin:12px 0 0}

/* ============ Field A — Header + FV ============
 * R7（Client Feedback R1 §4）: 左copy面を Deep Navy の「入口」へ。PC視覚印象は
 * Navy:Photo ≒ 47:53 を第一候補にする。右写真は明るさを維持し、暗転目的の強い
 * scrimは使わない（薄いNavy overlayのみ、色温度を馴染ませる用途）。 */
.fp-hero{position:relative;display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);min-height:clamp(540px,78vh,780px);background:var(--navy-800)}
.fp-hero__media{position:relative;overflow:hidden;background:var(--navy-900)}
.fp-hero__slides{position:absolute;inset:0}
.fp-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease-standard)}
.fp-hero__slide.is-active{opacity:1}
.fp-hero__slide picture{position:absolute;inset:0}
.fp-hero__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.fp-hero__slide .md-media-frame__placeholder{position:absolute;inset:0}
/* 薄いNavy overlay（第一試行 7%）。暗転ではなく左Navyとの色温度を馴染ませる用途に限定し、
 * 階調を潰す強いscrimにはしない。 */
.fp-hero__media::after{content:"";position:absolute;inset:0;z-index:1;background:var(--navy-900);opacity:.07;pointer-events:none}
/* 左右を明確な二面構成として認識させるため、広いgradientは使わない。境界付近のみ
 * 非常に弱いsoft fadeを許容する（fadeはNavy地色→透明）。 */
.fp-hero__fade{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,var(--navy-800) 0%,rgba(11,37,69,0) 10%)}
/* Client Feedback R2 §10: play/pause button・dots等のvisible slider control UIは撤去した
 * （.fp-hero__controls / .fp-hero__toggle / .fp-hero__dots は不要になったため削除）。 */

/* Navy copy surface。白系テキストで統一し、階層は色差ではなく size/weight/spacing/rule で作る。 */
.fp-hero__copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.6vh,30px);padding:clamp(36px,5vh,72px) clamp(24px,4.4vw,72px);max-width:640px;background:var(--navy-800);position:relative;z-index:1}
.fp-hero__brand{font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(40px,5vw,72px);line-height:1.3;letter-spacing:.03em;color:#fff;margin:0}
.fp-hero__brand span{display:block}
.fp-hero__h1{font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:13px;line-height:1.9;letter-spacing:.04em;color:var(--text-on-navy-muted);margin:0;max-width:34em}
.fp-hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.fp-hero__facts{margin:clamp(4px,1vh,12px) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vh,24px) clamp(24px,2.4vw,34px)}
.fp-hero__fact{padding-left:18px;border-left:2px solid var(--border-on-navy)}
.fp-hero__fact dt{font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:18px;line-height:1.4;color:#fff}
.fp-hero__fact dd{margin:6px 0 0;font-size:13px;line-height:1.7;color:var(--text-on-navy-muted)}

/* ============ Field B — CONCEPT（Attention Cue 1・左右非対称） ============
 * 非対称は「狭いテキスト列(0.62fr)＋右端へブリードする写真」で担保。
 * R6 Final §2/§3: CONCEPT / OUR APPROACH は FIRST VISIT 以降の ≒1200px Reading Field へ機械的に
 * 統一しない Brand / Composition 領域。外側 axis は Reading Field より広い --content-wide に置き、
 * 「読む領域」と役割を分ける（R5 の独自 Composition へ戻す）。非対称の作り方自体は変えない。
 */
/* R2 §2: CONCEPT+OUR APPROACHを1 sectionへ統合。上半分(.fp-concept__top)はField B地、
 * 下半分(.fp-approach)以降はField C地（各ブロック側でpaddingを持つため、section自体の
 * padding-blockは上部のみに絞る）。
 * Client Feedback R3 §2: OUR APPROACHをCONCEPTと別surfaceに見せないため背景切替をやめ、
 * section全体をField B背景1色に統合する（.fp-approach / .fp-concept__cta の個別背景を撤去）。 */
#concept{position:relative;overflow:hidden;background:var(--field-b);padding-block:clamp(48px,6vw,80px) 0}
.fp-concept__bg{position:absolute;left:-4%;top:8%;width:min(46%,620px);aspect-ratio:4/3;background:url(../images/hero/transparency-presentation.jpg) 40% 42%/cover no-repeat;opacity:.07;filter:grayscale(1) contrast(1.03) brightness(1.06);pointer-events:none}
.fp-concept__grid{position:relative;z-index:1;max-width:var(--content-wide);margin:0 auto;padding-left:var(--container-gutter);display:grid;grid-template-columns:minmax(0,0.58fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.fp-concept__text{max-width:22em;padding-block:clamp(8px,2vw,32px)}
.fp-concept__heading{font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(28px,3.4vw,44px);line-height:1.5;letter-spacing:.03em;color:var(--navy-800);margin:16px 0 20px;word-break:auto-phrase}
/* Client Feedback R2 §1: 通常本文は16px/lh1.9・text-body（muted禁止）へ統一する。 */
.fp-concept__body{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text-body);margin:0 0 22px}
.fp-concept__photo{margin:0;overflow:hidden;width:100%;aspect-ratio:16/11;background:var(--gray-100);position:relative}
.fp-concept__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.fp-concept__photo .md-media-frame__placeholder{position:absolute;inset:0}
@media (min-width:1025px){
	.fp-concept__grid{padding-right:0}
	.fp-concept__photo{border-radius:var(--radius-md) 0 0 var(--radius-md)}
}

/* ============ OUR APPROACH（Client Feedback R2 §2-§4） ============
 * CONCEPT（Purpose）の下半分として同一 #concept section内に置く Editorial element。
 * TREATMENTの診療科目一覧のように見せない: rounded card / strong shadow / pills /
 * 個別CTAは禁止。PCは3項目を1つのrowで見せ、SPは縦積み。01/02/03 numberは補助要素。
 * section末尾の2 CTA（.fp-concept__cta）まで含めて Concept → Approach → 2 CTA の順を守る。
 */
.fp-approach{position:relative;padding-block:clamp(64px,8vw,104px) 0}
.fp-approach__inner{max-width:var(--container);margin:0 auto;padding-inline:var(--container-gutter)}
.fp-approach__title{text-align:center;font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(23px,2.4vw,30px);line-height:1.5;letter-spacing:.03em;color:var(--navy-800);margin-top:14px}
.fp-approach__inner>.fp-eyebrow{display:flex;justify-content:center}
.fp-approach__list{list-style:none;margin:clamp(36px,4.4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,56px)}
.fp-approach__item{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 clamp(8px,1.4vw,20px)}
.fp-approach__num{font-family:var(--font-num);font-size:clamp(26px,2.8vw,34px);letter-spacing:.06em;color:var(--color-secondary);line-height:1}
.fp-approach__body-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.fp-approach__name{font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(17px,1.5vw,20px);letter-spacing:.02em;color:var(--navy-800)}
.fp-approach__body{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text-body);text-align:left;max-width:26em}

/* Concept末尾2 CTA（R2 §4）: 小さなtext linkではなく明確なOutlined Button。
 * variant=secondary（White surface + Navy text/border、Filled CTAより一段弱い）を再利用する。 */
.fp-concept__cta{max-width:400px;margin:0 auto;padding:clamp(32px,4vw,48px) var(--container-gutter) clamp(48px,6vw,84px);display:flex;gap:16px;flex-wrap:wrap;flex-direction:column}

/* ============ Field D — FIRST VISIT + TREATMENT（連続 information field） ============
 * R6 §7 / R6 Final §4: .fp-break の代わりに、この Field の背景へ写真の固定レイヤーを敷く。
 *   - PC=院内 IMG_4683 は background-attachment: fixed。SP=顕微鏡 IMG_4789 は scroll。
 *   - opacity は 0.06（正本初期値 0.13 は Visual Review で撤回）。foreground は 100%。
 *   - 強い parallax / dark overlay / blur は使わない。可読性最優先。
 * FIRST VISIT は非対称禁止・thin rule グリッド。TREATMENT は §5 の composition。
 */
.fp-field-d{position:relative;background:var(--warm-050);isolation:isolate}
/* R6 §7: 院内写真は「奥に空間が存在する感覚」を作るためのもので、被写体を読ませない。
 * 脱彩度＋低コントラストで什器・顔のディテールを溶かす。
 * opacity は正本初期値 0.13 から視覚検証で 0.06 へ調整（この写真は高キーで、0.13 では背景が本文より先に目に入るため）。 */
.fp-field-d::before{content:"";position:absolute;inset:0;z-index:0;background:var(--interior-url) center center/cover no-repeat fixed;opacity:.06;filter:grayscale(.85) brightness(1.18) saturate(.35) contrast(.92);pointer-events:none}
/* タッチ端末（iPad 含む）では fixed background の crop 拡大・位置ずれ・paint 負荷を避けるため通常 background にする。 */
@media (hover:none) and (pointer:coarse){.fp-field-d::before{background-attachment:scroll;background-position:center top}}
.fp-field-d>*{position:relative;z-index:1}
/* R2 §5: TOP First Visit 6-step flowを削除。旧 #first の余白・背景・グリッドは撤去し、
 * #menu が fp-field-d 内の唯一の section として上下の呼吸を持つ。 */
#menu{position:relative;background:transparent;padding-block:clamp(48px,6vw,80px) clamp(48px,6vw,84px)}

.fp-treat__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(22px,2.8vw,34px)}
/* Codexレビュー指摘（Medium）: section leadは16px本文gramarへ統一する（Caption/UI以外）。 */
.fp-treat__lead{margin-top:10px;max-width:34em;color:var(--text-body);font-size:var(--fs-body);line-height:var(--lh-body)}
.fp-treat__card-en{font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:11px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.fp-treat__card-desc{font-size:13.5px;line-height:1.8;color:var(--text-muted)}
.fp-treat__card-more{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:var(--fw-medium);color:var(--text-link)}
.fp-treat__card-more svg{transition:transform var(--dur-base) var(--ease-out)}
.fp-treat__row a:hover .fp-treat__card-more svg,.fp-treat__secondary a:hover .fp-treat__sec-arrow svg{transform:translateX(3px)}

/* §5 Primary — PC 2col 約55:45。左＝写真(Evidence) / 右＝3診療の同格縦3段。 */
/* Client Feedback R1 §7: 右3項目は自然な改行で総高が伸びる。PC/中間幅で写真と右カラムの
 * 終端が大きくズレないよう、align-items:stretch にして写真側の高さを右カラムへ追従させる
 * （固定 aspect-ratio 一辺倒をやめ、min/max-height でガードしつつ object-fit:cover で
 * 縦方向へ不自然に引き伸ばさない）。無意味な空白の追加や overflow:hidden での帳尻合わせはしない。 */
.fp-treat__primary{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(28px,4vw,60px);align-items:stretch}
.fp-treat__evidence{margin:0;position:relative;display:flex;flex-direction:column;gap:10px;height:100%}
.fp-treat__evidence>img,.fp-treat__evidence>.md-media-frame__placeholder{flex:1 1 auto;width:100%;min-height:280px;max-height:520px;object-fit:cover;filter:var(--img-filter);border-radius:var(--radius-md);background:var(--gray-100)}
.fp-treat__evidence>.md-media-frame__placeholder{position:relative;display:flex;align-items:center;justify-content:center}
.fp-treat__evidence-cap{font-size:12px;line-height:1.7;color:var(--text-muted)}

/* 右3段 — icon | title | English label | desc | link を同一 grammar・thin rule で分節（card 化しない）。 */
.fp-treat__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fp-treat__row+.fp-treat__row{border-top:1px solid var(--border-default)}
.fp-treat__row a{display:grid;grid-template-columns:56px 1fr;column-gap:18px;align-items:start;padding:clamp(20px,2.6vw,30px) 0;text-decoration:none;color:inherit}
.fp-treat__row:first-child a{padding-top:0}
.fp-treat__row-icon{width:56px;height:56px;object-fit:contain;grid-row:1/span 4}
.fp-treat__row-text{display:flex;flex-direction:column;gap:7px;min-width:0}
.fp-treat__row-title{font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(18px,1.5vw,21px);letter-spacing:.02em;color:var(--navy-800)}

/* §5 Secondary — PC 3 equal columns。上3診療と同じ Icon Family / Typography grammar。
 * 不必要な重要度差を作らないため、scale は primary rows に近づける。 */
/* Client Feedback R2 §6: section-level detail CTAはheading横のtext linkではなくcontent末尾へ。
 * Outlined Button grammar（variant=secondary）に揃える。 */
.fp-treat__cta,.fp-equip__cta{margin-top:clamp(28px,3.4vw,40px)}
.fp-treat__secondary{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:clamp(22px,2.6vw,30px) 0 0;border-top:1px solid var(--border-default);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.fp-treat__secondary li{display:flex}
.fp-treat__secondary a{display:grid;grid-template-columns:48px 1fr;column-gap:16px;row-gap:6px;align-items:start;text-decoration:none;color:inherit;width:100%}
.fp-treat__sec-icon{grid-row:1/span 4;width:48px;height:48px;object-fit:contain}
.fp-treat__secondary .fp-treat__card-en{grid-column:2}
.fp-treat__sec-title{grid-column:2;font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(17px,1.4vw,20px);letter-spacing:.02em;color:var(--navy-800)}
.fp-treat__sec-desc{grid-column:2;font-size:13.5px;line-height:1.8;color:var(--text-muted)}
.fp-treat__sec-arrow{grid-column:2;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:var(--fw-medium);color:var(--text-link)}
.fp-treat__sec-arrow svg{transition:transform var(--dur-base) var(--ease-out)}

/* ============ Field E — EQUIPMENT + CASE（Ordered Evidence・cool neutral） ============ */
#equipment{background:var(--field-e);padding-block:clamp(48px,6vw,80px) clamp(48px,6vw,84px)}
/* Client Feedback R1 §10: TREATMENTの「診療案内をすべて見る」と近いnavigation grammar
 * （見出し領域右側のtext link）。PCのみ横並び、SPは見出し→lead→本文の自然な読み順に戻す。 */
.fp-equip__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,30px)}
.fp-equip__title{letter-spacing:.04em}
.fp-equip__lead{margin-top:10px;max-width:40em;color:var(--text-body);font-size:var(--fs-body);line-height:var(--lh-body)}
.fp-equip__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,56px);align-items:start}
.fp-equip__item{display:flex;flex-direction:column}
.fp-equip__photo{margin:0 0 16px;overflow:hidden;background:var(--gray-100);position:relative;aspect-ratio:16/9}
.fp-equip__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.fp-equip__photo .md-media-frame__placeholder{position:absolute;inset:0}
.fp-equip__intent{font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:11px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-secondary)}
.fp-equip__name,.fp-equip__name--sm{font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(20px,2vw,26px);letter-spacing:.03em;color:var(--navy-800);margin:8px 0 10px}
.fp-equip__body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.fp-equip__points{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.fp-equip__points li{display:flex;gap:9px;font-size:14px;color:var(--text-body)}
.fp-equip__points svg{color:var(--color-secondary);flex:0 0 auto;margin-top:3px}
.fp-equip__points--sub{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-default);gap:6px}
.fp-equip__points--sub li{font-size:12.5px;color:var(--text-muted)}
.fp-equip__note{margin-top:12px;font-size:12px;color:var(--text-muted)}

#case{background:var(--field-e);padding-block:clamp(48px,6vw,80px) clamp(48px,6vw,84px)}
.fp-case__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,30px)}
.fp-case__head>.md-text-link{flex:0 0 auto;margin-bottom:4px}
.fp-case__title{letter-spacing:.04em}
.fp-case__lead{margin-top:8px;color:var(--text-muted);font-size:13.5px}
.fp-case__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.fp-case__item a{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.fp-case__idx{font-family:var(--font-num);font-size:11px;line-height:1;letter-spacing:.12em;color:var(--color-secondary);margin-bottom:8px}
.fp-case__photo{margin:0 0 12px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-md);background:var(--gray-100);position:relative}
.fp-case__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.fp-case__photo .md-media-frame__placeholder{position:absolute;inset:0}
.fp-case__item-title{font-size:15px;line-height:1.7;color:var(--navy-800);font-weight:var(--fw-medium);transition:color var(--dur-base) var(--ease-standard)}
.fp-case__item a:hover .fp-case__item-title{color:var(--color-secondary)}
.fp-case__item-more{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:var(--fw-medium);color:var(--text-link)}
.fp-case__note{margin-top:16px;font-size:12px;color:var(--text-muted)}

/* ============ Field F — DIRECTOR（Deep Navy turn） ============
 * R6 §3 の Reading Field 例外。full-width Deep Navy turning point を維持する。
 * Client Feedback R2 §7: TOPはMessage中心へ簡潔化。略歴/得意診療科目/Professional Evidence
 * はTOPから削除（データ・下層院長ページは保持）。PC写真はmax-width:400pxに抑え、
 * column幅いっぱいにstretchしない。textを主、photoを従（Human Evidence）とする。
 */
#doctor{background:var(--navy-800);color:var(--text-on-navy);overflow:hidden}
/* Client Feedback R3 §3 / Field幅修正: 前後sectionと同じTOP共通field（--container:1200px）へ
 * inner自体を揃える。50:50のequal columnsを前提にせず、text左端＝1200px field左端／photo右端＝
 * 1200px field右端をinner内側のgridで担保する（--content-wideの1440px基準は使わない）。 */
.fp-doctor__inner{max-width:var(--container);margin:0 auto;padding-inline:var(--container-gutter);display:grid;grid-template-columns:1.4fr 1fr;align-items:center}
.fp-doctor__text{display:flex;flex-direction:column;gap:14px;max-width:34em;justify-content:center;padding-block:clamp(48px,6vw,88px)}
.fp-doctor__section-title{font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(21px,2.2vw,27px);letter-spacing:.05em;color:#fff}
.fp-doctor__name{font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(25px,2.8vw,36px);letter-spacing:.06em;color:#fff;margin-top:4px}
.fp-doctor__role{font-size:13px;color:var(--navy-200);margin-top:-8px}
.fp-doctor__message{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);color:var(--text-on-navy);margin:0}
.fp-doctor__message+.fp-doctor__message{margin-top:.2em}
.fp-doctor__cta{margin-top:10px}
/* PC写真: max-width 400px。column幅いっぱいにstretchせず、aspect ratioを維持する。 */
.fp-doctor__photo{margin:0;justify-self:end;position:relative;width:100%;max-width:400px;aspect-ratio:4/5;background:var(--navy-700)}
.fp-doctor__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}

/* ============ Site-wide Ending — ACCESS + CTA（R6 Final §5-§16） ============
 * 全ページ共通 Ending。R2 で TOP / 下層が同じ component を共有するため、
 * .fp-eyebrow* / .fp-ending* の style は assets/css/site-ending.css へ移動した。
 * front-page.css は site-ending.css を依存として読み込む（レンダリング結果は不変）。
 * ここには TOP（body.home）固有の Ending 調整だけを残す。
 */

/* Footer — TOP のみコンパクト化。components.css は他ページ共有のため触らない。 */
body.home .md-footer-grid{padding:clamp(40px,5vw,56px) var(--container-gutter) clamp(22px,2.6vw,30px);gap:clamp(28px,4.5vw,48px)}
body.home .md-footer-clinic{gap:12px}
body.home .md-footer-columns{gap:clamp(20px,2.6vw,32px)}
body.home .md-footer-col{gap:2px}
body.home .md-site-footer__bottom-inner{padding-block:14px}

/* ============ レスポンシブ ============ */
@media (max-width:1024px){
	.fp-concept__grid{grid-template-columns:minmax(0,0.72fr) minmax(0,1fr);gap:clamp(24px,4vw,44px);padding-left:var(--container-gutter)}
	.fp-concept__photo{border-radius:var(--radius-md);aspect-ratio:3/2}
	.fp-treat__primary{grid-template-columns:minmax(0,48fr) minmax(0,52fr);gap:clamp(24px,4vw,40px)}
	.fp-equip__grid{gap:clamp(20px,3vw,36px)}
	.fp-doctor__inner{grid-template-columns:1fr}
	/* Client Feedback R1 §8: min-height:0 + aspect-ratio 単独指定は、aspect-ratio 未対応の
	 * 古いSafari/WebView（iOS 14以前等）で box が高さ0に潰れ、写真が非表示になる再現可能な
	 * 不具合だったため、aspect-ratio非対応環境向けの min-height フォールバックを残す。 */
	/* Codexレビュー指摘: 旧16:9タブレット向けfallbackはPC max-width:400px/aspect-ratio:4/5と
	 * 組み合わさるとvw基準のmin-heightが400px幅の箱に過大な高さを強制していた。
	 * 400px幅にmax-widthを保ったまま4:5のfallback（500px固定）へ変更する。 */
	.fp-doctor__photo{order:-1;justify-self:center;margin:0 auto;max-width:280px;min-height:350px;aspect-ratio:4/5}
	.fp-doctor__text{margin-left:0;max-width:none;padding-block:clamp(32px,6vw,48px)}
}
@media (max-width:900px){
	.fp-hero{grid-template-columns:1fr;min-height:0}
	.fp-hero__media{order:-1;min-height:60vw}
	.fp-hero__fade{background:linear-gradient(0deg,var(--navy-800) 0%,rgba(11,37,69,0) 20%)}
	.fp-hero__copy{padding:clamp(24px,5vw,36px) 24px 4px;max-width:none;gap:20px}
	/* R6 Polish §5: FV の2つの CTA を横2列・同幅にする（幅差で priority を作らない）。
	 * Primary/Secondary の hierarchy は fill / border / typography で表現。 */
	.fp-hero__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
	.fp-hero__actions .md-btn{width:100%;padding:0 12px;font-size:14px;gap:8px}
	.fp-hero__actions .md-btn__icon{width:15px;height:15px;flex:0 0 15px}
	.fp-concept__grid{grid-template-columns:1fr;gap:24px;padding-inline:var(--container-gutter)}
	.fp-concept__text{max-width:none;padding-block:0}
	.fp-concept__bg{display:none}
	.fp-concept__photo{margin-inline:calc(-1 * var(--container-gutter));border-radius:0;aspect-ratio:3/2}
	.fp-approach__list{grid-template-columns:1fr;gap:clamp(28px,7vw,40px)}
	.fp-concept__cta{flex-direction:column;align-items:stretch}
	.fp-concept__cta .md-btn{width:100%}
	.fp-equip__grid{grid-template-columns:1fr;gap:32px}
	.fp-treat__primary{grid-template-columns:1fr;gap:clamp(24px,4vw,32px);align-items:start}
	.fp-treat__evidence{height:auto}
	.fp-treat__evidence>img,.fp-treat__evidence>.md-media-frame__placeholder{flex:none;min-height:0;max-height:none;aspect-ratio:16/10}
	.fp-treat__rows{border-top:1px solid var(--border-default)}
	.fp-treat__row:first-child a{padding-top:clamp(20px,2.6vw,30px)}
	.fp-treat__secondary{grid-template-columns:1fr;gap:0}
	.fp-treat__secondary li+li{border-top:1px solid var(--border-default)}
	.fp-treat__secondary a{padding:16px 0}
	.fp-treat__secondary li:first-child a{padding-top:0}
	.fp-case__list{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media (max-width:767px){
	/* Client Feedback R3 §6: 主content sectionは概ね88〜112px程度を目安にsection上下paddingを
	 * 大胆に増やす。全section同一paddingにはせず、役割で差をつける
	 * （CONCEPT/brandは大きめ、TREATMENT/EQUIPMENTは情報量に対して明確な呼吸、
	 * DIRECTORはNavy面切替自体が章区切りのため他より少し抑える）。 */
	#concept{padding-block:clamp(88px,22vw,104px) 0}
	.fp-approach{padding-block:clamp(48px,12vw,72px) 0}
	.fp-concept__cta{padding-bottom:clamp(88px,22vw,108px)}
	#menu{padding-block:clamp(88px,22vw,104px) clamp(88px,22vw,108px)}
	#equipment{padding-block:clamp(88px,22vw,104px) clamp(88px,22vw,108px)}
	#case{padding-block:clamp(88px,22vw,104px) clamp(88px,22vw,108px)}
	/* R6 Final §4.2 Mobile: 背景は顕微鏡写真（IMG_4789）へ差し替え。fixed 挙動は再現せず scroll。
	 * opacity は PC と同じ .06 に統一（foreground の可読性優先・0.13 へは戻さない）。 */
	.fp-field-d::before{background-image:var(--microscope-url);background-attachment:scroll;background-position:center center;opacity:.06}
	.fp-hero__brand{font-size:clamp(34px,9.6vw,48px);line-height:1.34}
	.fp-hero__facts{gap:14px 18px}
	.fp-hero__fact dt{font-size:16px}
	/* R6 Polish §6: Facts 直後から CONCEPT への遷移が詰まりすぎているため、FV情報クラスタを
	 * 終える chapter spacing を Facts 下に確保する（#concept 側の top padding と合わせて
	 * 見た目 50px 強の呼吸になるよう、追加分は約24〜32pxに留める）。#concept の rhythm は変えない。 */
	.fp-hero__copy{padding-bottom:clamp(22px,7vw,32px)}
	.fp-h2{font-size:clamp(24px,7vw,32px)}
	.fp-concept__heading{font-size:clamp(25px,7vw,32px)}
	.fp-approach__title{margin-top:10px}
	.fp-treat__row a{grid-template-columns:44px 1fr;column-gap:14px}
	.fp-treat__row-icon{width:44px;height:44px}
	.fp-case__list{grid-template-columns:1fr;gap:18px}
	.fp-case__item a{flex-direction:row;gap:14px;align-items:flex-start}
	.fp-case__photo{flex:0 0 42%;margin-bottom:0;aspect-ratio:4/3}
	.fp-case__idx,.fp-case__item-more{display:none}
	.fp-case__item-title{font-size:14px}
	.fp-treat__head,.fp-case__head{align-items:flex-start}
	.fp-doctor__photo{min-height:82vw;aspect-ratio:1}
	.fp-equip__item{padding:30px 0 0}
}