/*
 * Site-wide Ending — ACCESS + CTA（Design v2 R6 Final §5-§16 / Subpages R2 §2）。
 *
 * R6 は ACCESS〜CTA〜Footer を「TOP 固有」ではなく全ページ共通の Site-wide Ending として
 * 設計している。R1 で下層に別の Navy CTA バナーを新設したのは逸脱であり、R2 で撤回した。
 *
 * この file は front-page.css から Ending 部分を抜き出したもの（レンダリング結果は不変）。
 * TOP（front-page.css）と下層（subpages.css）の両方が依存し、同じ component / 同じ style を
 * 共有する。値・構造は R6 実装から変更していない。ブレークポイントは front-page.css と同じ
 * 1024px / 900px / 767px。
 */

/* Editorial Wood（承認済み実素材）。front-page.css の :root にも同値があるが、下層では
 * front-page.css を読まないためここで定義する。パスはこの CSS ファイル基準の相対。 */
:root{--wood-url:url(../images/wood-poc/wood-style-c-editorial-wood.png)}

/* Ending 内の数字表記フォント（tokens.css の :root 定義に、TOP と同じ和文フォールバックを足す） */
.fp-ending{--font-num:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif}

/* ============ English label（CONTACT 等・section-cta.php / TOP 各 section 共通） ============ */
.fp-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:12px;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--color-secondary)}
.fp-eyebrow__rule{width:32px;height:1px;background:currentColor;display:inline-block;flex:0 0 32px}
.fp-eyebrow--center{justify-content:center}
.fp-eyebrow--on-navy{color:var(--navy-200)}

/* ============ Site-wide Ending — ACCESS + CTA（R6 Final §5-§16） ============
 * 全ページ共通 Ending。wood full-width の中に、約 1200px の明るい Editorial Panel を1枚置く。
 * Panel は section heading を持たず、上部中央の clinic logo で共通 Ending へ入ったことを示す。
 * 情報順序: logo → 診療時間 table → decorative photo strip → Map → 所在地等 → CTA。
 * SaaS 的 floating card にしない（shadow なし）。wood は opacity で薄めず素材として見せる。
 * 可読性は白い Panel 面と、その内側にたっぷり取った white space で確保する。
 */
.fp-ending{position:relative}
/* §11/§13: 1200px 未満では card を中央に寄せ、左右に wood を必ず見せる（SP ≒30px）。 */
.fp-ending__section{position:relative;padding-block:clamp(48px,6vw,88px);padding-inline:max(var(--container-gutter),4vw);isolation:isolate}
.fp-ending__wood{position:absolute;inset:0;z-index:0;background:var(--wood-url) center center/cover no-repeat;pointer-events:none}
.fp-ending__card{position:relative;z-index:1;max-width:var(--container);margin:0 auto;background:var(--white);border:1px solid var(--warm-300);border-radius:var(--radius-md);overflow:hidden}

/* §12: outer wood / large white panel / generous internal whitespace の3層を作る。
 * 実 content 幅は約 900px（1200 − 左右 150 前後）まで絞ってよい。--pad-x は Panel 内側の左右余白を定義する。 */
.fp-ending__body{--pad-x:clamp(20px,10vw,150px);padding:clamp(40px,6vw,76px) var(--pad-x)}

/* §5: Ending Top Identity — clinic logo 中央。Footer より存在感（医院情報の入口）だが hero 化しない。 */
.fp-ending__identity{text-align:center}
.fp-ending__logo{height:clamp(62px,7vw,84px);width:auto;display:inline-block}

/* §15 Vertical Rhythm: block ごとに余白強度を変える（等間隔の縦積みにしない）。
 * identity→schedule = 大 / schedule→photo = 中 / photo→map = 大 / map→location = 小 / location→CTA = 章転換。 */
.fp-ending__schedule{margin-top:clamp(32px,5vw,52px)}
/* schedule table は Panel の実 content 幅（PC で約900px）まで広げず、読みやすい幅で中央に置く。 */
.fp-ending__hours{max-width:600px;margin-inline:auto}
.fp-ending__hours table{width:100%}
.fp-ending__hours th,.fp-ending__hours td{padding:10px 8px}

/* R6 Polish §8: PC の Ending 情報領域は 2-column。
 * 左 = Clinic / Schedule（診療時間 table ＋ 写真2枚）、右 = Location / Map（Map ＋ 所在地等）。
 * 上から1列に積まず、大きな Editorial Panel を活かして意味で左右に分ける。
 * 50:50 に固定せず、Map の視認性を優先して右をやや広く取る。 */
.fp-ending__grid{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(32px,4.4vw,64px);align-items:start}
.fp-ending__grid>.fp-ending__col{display:flex;flex-direction:column;min-width:0}
.fp-ending__grid .fp-ending__schedule{margin-top:0}
.fp-ending__grid .fp-ending__hours{max-width:none;margin-inline:0}
.fp-ending__grid .fp-ending__place{margin-top:0}
/* 2-column では左列幅が狭まるため table を fixed-layout＋やや小さめの字送りにして overflow を防ぐ。 */
.fp-ending__grid .fp-ending__hours table{table-layout:fixed}
.fp-ending__grid .fp-ending__hours thead th:first-child{min-width:0;width:5em}
.fp-ending__grid .fp-ending__hours th,.fp-ending__grid .fp-ending__hours td{padding:10px 4px;font-size:12px}

.fp-ending__photostrip{margin-top:clamp(20px,2.6vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.4vw,14px)}
.fp-ending__photostrip-item{margin:0;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--gray-100);border-radius:var(--radius-sm)}
.fp-ending__photostrip-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.fp-ending__photostrip-item .md-media-frame__placeholder{position:absolute;inset:0}

.fp-ending__place{margin-top:clamp(36px,5vw,60px)}
.fp-ending__map{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-md);background:var(--gray-100)}
.fp-ending__map .md-media-frame,.fp-ending__map-box{position:absolute;inset:0;overflow:hidden}
.fp-ending__map .md-media-frame__caption{display:none}
.fp-ending__map-box .md-media-frame__placeholder{position:absolute;inset:0}
/* §10: 所在地等は Map の下。左右分割をやめ、Map ↓ text の順序にする。 */
.fp-ending__dl{margin-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--warm-300)}
.fp-ending__dl div{display:grid;grid-template-columns:6em 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--warm-300)}
.fp-ending__dl dt{font-size:12.5px;color:var(--text-muted)}
.fp-ending__dl dd{margin:0;font-size:14px;line-height:1.7}

/* R6 Polish §10/§11 + R4 Ending Polish §2-§4: CTA は Warm fill 面をやめ、白背景＋細い border の
 * 「シンプルな囲み」。派手にせず、医院情報 ↓ 章転換の余白 ↓ outline で囲まれた Action Area、という
 * section transition を作る。shadow なし / radius ごく小 / gradient なし / pill 多用なし。
 *
 * R4 Ending Polish（再調整）: R4 で入れた横方向 bleed（--cta-bleed / margin-inline 負値）は撤回。
 * CTA の外幅は Panel 内側コンテンツ幅に flush で揃え、下層共通フィールドと同じ 1080px を上限に置く
 * （Panel 内側幅は実測で約 900–960px のため通常はこの cap には当たらない）。
 * 医院情報エリア ↕ CTA の間には約 80px の余白を取り、明確な章転換にする。SP では強制しない。 */
.fp-ending__cta{margin-top:clamp(44px,7vw,80px);max-width:1080px;margin-inline:auto;padding:clamp(38px,4.2vw,52px) clamp(32px,3.6vw,52px);background:var(--white);border:1px solid var(--warm-300);border-radius:2px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(28px,3.4vw,44px);align-items:center}
/* Copy 側は行長を確保しつつ広がりすぎないよう 38em で抑える（Lead が不自然な短行に折れない）。 */
.fp-ending__cta-lead{min-width:0;max-width:38em}
.fp-ending__cta-heading{font-family:var(--font-serif);font-weight:var(--fw-serif-medium);font-size:clamp(20px,2.1vw,27px);line-height:1.5;letter-spacing:.04em;color:var(--navy-800);margin:10px 0 0;word-break:auto-phrase}
/* Contact 側: 電話番号のまとまりと予約ボタンは役割が違うので間を明確に空ける（§4）。 */
.fp-ending__cta-contact{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.fp-ending__cta-tel{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:4px}
.fp-ending__cta-tel-num{display:flex;align-items:center;gap:10px;font-family:var(--font-num);font-size:clamp(25px,2.6vw,32px);font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--navy-800)}
.fp-ending__cta-tel-note{font-size:12px;color:var(--text-muted)}
.fp-ending__cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ============ レスポンシブ ============ */
@media (max-width:1024px){
	/* §4 Responsive: PC の 2-column を無理に縮小せず縦へ recompose。 */
	.fp-ending__cta{grid-template-columns:1fr;gap:24px;align-items:start;padding:clamp(32px,5vw,44px)}
	.fp-ending__cta-lead{max-width:none}
	.fp-ending__cta-contact{gap:16px}
	/* R6 Polish §9: PC の 2-column をそのまま縮小せず、縦へ recompose。
	 * 意味構造（Clinic/Schedule → Location/Map → Contact）は順序で維持する。 */
	.fp-ending__grid{grid-template-columns:1fr;gap:0;margin-top:clamp(30px,5vw,44px)}
	.fp-ending__grid .fp-ending__place{margin-top:clamp(32px,5vw,48px)}
	.fp-ending__grid .fp-ending__photostrip{margin-top:clamp(22px,3vw,32px)}
	.fp-ending__grid .fp-ending__hours{max-width:600px;margin-inline:auto}
	.fp-ending__grid .fp-ending__hours table{table-layout:auto}
	.fp-ending__grid .fp-ending__hours thead th:first-child{width:auto}
	.fp-ending__grid .fp-ending__hours th,.fp-ending__grid .fp-ending__hours td{padding:10px 8px;font-size:inherit}
}
@media (max-width:900px){
	.fp-ending__photostrip-item{aspect-ratio:4/3}
}
@media (max-width:767px){
	/* §13: SP でも左右の wood framing が明確に見えるよう card 外に余白を確保。 */
	.fp-ending__section{padding-block:clamp(36px,9vw,56px);padding-inline:26px}
	.fp-ending__body{--pad-x:14px;padding-top:clamp(26px,7vw,34px);padding-bottom:clamp(26px,7vw,34px)}
	.fp-ending__logo{height:clamp(52px,13vw,60px)}
	/* §14: SP schedule table は wood margin 確保後の Panel 内幅（≒300px）に収める。横スクロール禁止。
	 * .md-hours の base（thead th:first-child{min-width:9em} 等）を Ending 内では上書きする。 */
	.fp-ending__hours.md-hours table{table-layout:fixed}
	.fp-ending__hours.md-hours thead th:first-child{min-width:0;width:4.6em;font-size:10px;letter-spacing:0}
	.fp-ending__hours.md-hours th,.fp-ending__hours.md-hours td{padding:8px 0;font-size:11px;line-height:1.3}
	/* 時間表記は nowrap で潰さず、狭い先頭列内で「9:00 –／13:00」の2行折返しを許容（明確に読める・overflow なし）。 */
	.fp-ending__hours.md-hours tbody th{font-size:10.5px;white-space:normal;letter-spacing:-.01em;word-break:keep-all}
	.fp-ending__hours.md-hours thead th.is-holiday{font-size:9.5px;width:3.4em;line-height:1.2;white-space:nowrap}
	/* R6 Polish §12: SP は outline CTA を縦積みに。巨大な縦長 box にならないよう padding を抑える。 */
	.fp-ending__cta{gap:20px;padding:clamp(24px,7vw,32px);margin-top:clamp(40px,10vw,56px)}
	.fp-ending__schedule{margin-top:clamp(30px,8vw,44px)}
}