/* なかむらクリニック — 本町サイン (Urban Precision) design system */
:root{
  /* ORANGE GOVERNANCE — three non-overlapping roles:
     --vermilion MARK ONLY: wordmark, badges, kicker bar, corner keylines, why-ticks,
       pull-line rule, is-today rail/glyph, focus ring, theme-color, lane rail
       (.care-switch [aria-selected=true]::before). NEVER behind white
       text under 19px bold. NEVER as a digit color.
     --vermilion-action: THE one resting fill for every button and chip (white text 4.6:1 AA).
     --vermilion-press: hover/active of -action only — never at rest.
     --vermilion-text: the only orange rendered AS text/glyph on light bg (tel links,
       本日 tags, table sup, lane-more arrows).
     PHONE-DIGIT INVARIANT: a phone number renders in exactly two states — #FFF inside a
       --vermilion-action fill, or --vermilion-text on light ground; footer digits #FAFAF8
       on ink. #F0533A never renders a digit.
     LANE-PLATE INVARIANT: a tab never takes --vermilion-action; a tab is a sign, not a call. */
  --vermilion:#F0533A;
  --vermilion-action:#D63C24;
  --vermilion-press:#B92F1A;
  --vermilion-text:#C4351F;
  --ink:#17171C;
  --ink-2:#4B4B55;
  --paper:#F6F5F1;
  --card:#FFFFFF;
  --line:#E3E2DD;
  --steel:#8E939B;
  --steel-text:#6B7077;
  --wood:#A97C52;
  /* GREEN GOVERNANCE — plant green = 予防 and reassurance surfaces ONLY. Two sanctioned
     sites: (1) .safety-line callout; (2) .doc-panel background. (The 防 badge / 予防接種 strip was retired 2026-09-09.)
     FORBIDDEN on: CTAs, links, phone numbers, hours chips, nav, headlines, anything
     pressable. Flat green <=5% of any viewport. Vermilion remains the sole action color. */
  --plant:#2F6B4F;
  --plant-tint:#EEF3EC;
  --plant-line:#D8E2D5;
  --tint-today:rgba(240,83,58,0.08);
  --tint-closed:rgba(142,147,155,0.12);
  --font-display:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;
  --font-body:'IBM Plex Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
  --font-accent:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --radius:2px;
  --radius-cta:6px;
  /* SPACING & TYPE — unify channel pages to the HOME rhythm; do NOT re-token .wrap. */
  --band:48px;
  --sec:32px;
  --head:24px;
  --t-hero:clamp(32px,4.2vw,54px);
  --t-h2:clamp(24px,3vw,32px);
  --t-h3:20px;
  --t-h4:15px;
  --t-body:16px;
  --t-sub:14px;
  --t-note:13px;
  --t-cap:12px;
  --measure:38em;
  --measure-wide:46em;
}
@media (min-width:768px){:root{--band:80px;--sec:40px;--head:32px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:16px;line-height:1.9;letter-spacing:.03em;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-break:strict}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.5}
h1,h2{font-feature-settings:'palt'}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
svg{display:block}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:0;top:0;z-index:200;padding:12px 16px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:700}
main:focus{outline:none}
.num{font-family:var(--font-body);font-feature-settings:'tnum';font-weight:700}
.vh{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
section[id],#hatsunetsu{scroll-margin-top:80px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:24px}
:focus-visible{outline:2px solid var(--vermilion);outline-offset:2px}
@media (min-width:768px){.wrap{padding-inline:48px}}

/* ---------- buttons ---------- */
.btn-call{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--vermilion-action);color:#fff;text-decoration:none;border-radius:var(--radius-cta);min-height:56px;padding:12px 24px;transition:background .12s}
.btn-call:hover,.btn-call:active{background:var(--vermilion-press)}
.btn-call .row{display:inline-flex;align-items:center;gap:10px}
.btn-call .tel{font-family:var(--font-body);font-feature-settings:'tnum';font-weight:700;font-size:20px;letter-spacing:.02em;white-space:nowrap}
.btn-call .cap{font-size:12px;font-weight:400;letter-spacing:.04em}
.btn-call svg{width:20px;height:20px;stroke:#fff}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;border-radius:var(--radius-cta);min-height:48px;padding:12px 24px;font-family:var(--font-body);font-weight:600;font-size:15px;transition:background .12s,color .12s}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-ghost svg{width:14px;height:14px;stroke:currentColor}

/* ---------- state chips ---------- */
.chip{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:var(--radius);white-space:nowrap}
.chip-open{background:var(--vermilion-action);color:#fff}
.chip-appt{background:var(--card);border:1.5px solid var(--ink);color:var(--ink)}
.off-dash{color:var(--steel-text);font-weight:600}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:100;background:var(--card);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding-block:6px}
.brand{text-decoration:none;line-height:1.25;display:flex;flex-direction:column;justify-content:center;min-height:44px}
.brand .name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--vermilion);display:block}
.brand .sub{display:none;font-size:10px;color:var(--steel-text);letter-spacing:.06em}
/* ONE BAR（2026-09-24）。第2段 .hdr-util を削除した——4つの行き先は7ページ全ての
   footer 3グループに既にあり、二重化は ADD-OR-DON'T TEST が唯一禁じているもの。
   1024px の予算：.wrap 928 ＝ brand 約201 ＋ nav 約426 ＋ .hdr-call 約228 ＋ gap 32。
   5つ目のナビ項目を足さないこと。 */
nav.main{display:none;align-items:center;gap:22px;white-space:nowrap}
nav.main a{position:relative;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);padding-block:4px;border-bottom:2px solid transparent}
/* 44px の当たり判定を、2px の朱の下線を文字から引き離さずに作る：padding ではなく透明の pad。 */
nav.main a::after{content:"";position:absolute;inset:-9px 0}
nav.main a:hover{border-color:var(--vermilion)}
nav.main a[aria-current="page"]{border-color:var(--vermilion)}
.hdr-call{display:inline-flex;align-items:center;gap:8px;background:var(--vermilion-action);color:#fff;text-decoration:none;border-radius:var(--radius-cta);min-height:44px;padding:8px 16px;font-weight:700;font-size:14px;transition:background .12s}
.hdr-call:hover{background:var(--vermilion-press)}
.hdr-call svg{width:18px;height:18px;stroke:#fff}
.hdr-call .tel{font-feature-settings:'tnum';font-size:15px;letter-spacing:.02em}
@media (min-width:768px){nav.main{display:flex}}
@media (min-width:1024px){
  .brand .name{font-size:20px}
  .brand .sub{display:block}
}
/* 1024-1149 が最も狭い窓。フォントのフォールバックが太くてもバーを溢れさせない18pxの余裕。 */
@media (min-width:1024px) and (max-width:1149px){nav.main{gap:16px}}
@media (max-width:1023px){.hdr-call .tel{display:none}}

/* ---------- .notice — 臨時休診 band (ships commented out in every page's shell) ---------- */
.notice{background:var(--paper);border-block:1px solid var(--line);border-left:4px solid var(--vermilion)}
.notice .wrap{padding-block:10px;font-size:var(--t-note);line-height:1.8;color:var(--ink)}
.notice b{font-family:var(--font-display);font-weight:700;margin-right:8px}

/* ---------- section header pattern ---------- */
section{padding-block:64px}
@media (min-width:768px){section{padding-block:80px}}
.kicker{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.kicker::before{content:"";width:24px;height:4px;background:var(--vermilion)}
.kicker span{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-text)}
.sec-title{font-size:clamp(24px,3vw,32px);color:var(--ink);letter-spacing:.01em}
/* JP TYPOGRAPHY — palt kerning + balanced wraps on JP display copy; pretty wraps on flowing body copy. */
.sec-title,.pg-plate h1,.close-line,.lane-promise,.pg-lead,.doc-panel-quote,.pull-line{font-feature-settings:'palt';text-wrap:balance}
.sec-title.wood::after{content:"";display:block;width:48px;height:2px;background:var(--wood);margin-top:8px}
.sec-head{margin-bottom:32px}

/* ---------- hero ---------- */
.hero{padding-top:48px;padding-bottom:56px}
.hero-grid{display:grid;gap:32px}
/* 本町バッジ: 1. LINE HUES — 体=vermilion(内科), 心=ink(精神科), 熱=ink (filled — walk-in triage lane), 駅=vermilion, 院=ink;
   no other hue enters a badge. 2. FILLED = walk-in (departments and the 発熱 lane). The outlined
   double-ring (call-first) grammar was retired with 予防接種 on 2026-09-09. 3. Vermilion in a circle = line
   color, vermilion in a rounded rect = action; circles are never clickable, buttons are
   never circular. 4. One notch max: solo 12 o'clock, pairs face each other; none under
   32px except the footer pair. 5. Ring is always the disc's own hue; gap always
   transparent; no shadows; no gradients except 50/50 hard-split connectors.
   6. LANE SWITCH (診療案内 only): tabs are text-only rectangles; the 体/心 roundel in the lane head is
      never the hit target. 体 and 心 are both walk-in departments = both stay FILLED in every state.
      (Double-ring grammar retired 2026-09-09.)
   7. LANE HUE: --lane (vermilion|ink) colours exactly three surfaces — tab rail, #care kicker bar,
      card spine (route-strip discs are coloured by the card's own .c-nai/.c-shin, never by --lane). REJECTED for 診療案内: 3D/room tours, parallax, scroll-driven reveals, auto-cycling
      tabs, hover-only content, symptom checkers/chat, animated illustrations, blue/dark 心 mode, sound. */
.roundels{display:flex;align-items:center}
.roundel{width:44px;height:44px;border-radius:50%;border-style:solid;border-width:1.5px;padding:3.5px;background-clip:content-box;position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff}
.roundel.r-nai{background-color:var(--vermilion);border-color:var(--vermilion)}
.roundel.r-shin{background-color:var(--ink);border-color:var(--ink)}
.roundel.r-nai::after{content:"";position:absolute;right:-1.5px;top:50%;transform:translateY(-50%);width:4.5px;height:2px;background:var(--vermilion)}
.roundel.r-shin::after{content:"";position:absolute;left:-1.5px;top:50%;transform:translateY(-50%);width:4.5px;height:2px;background:var(--ink)}
.roundel-link{width:28px;height:2px;background:linear-gradient(90deg,var(--vermilion) 0 50%,var(--ink) 50% 100%);margin-inline:6px}
.hero h1{font-size:clamp(32px,4.2vw,54px);line-height:1.35;letter-spacing:.01em;color:var(--ink);margin-top:12px;text-wrap:balance}
.hero h1 .num{font-size:1em}   /* numbers sit on the same size as the words around them (Keeyo 2026-09-23: no 凸凹) */
.hero .tagline{font-family:var(--font-display);font-weight:500;font-size:clamp(16px,2vw,22px);color:var(--ink);margin-top:14px}
/* ---------- hero fact strip — 三つの事実、ひとつの行 ----------
   SHAPE: どのセルも同じ形。1行目＝事実 15px/600、2行目＝但し書き 12px/400。
   ROW LOCK: .cell は親の2行を subgrid で共有する。事実行が将来折り返しても、
     三つの但し書きは必ず同じベースラインから始まる。これが「凸凹」への答えで、
     号数の選び直しではない。
   SIZE: 以前ここは .slot-note（診療時間表のクラス・11px）を借りていた。型スケールに
     11px は無い。ヒーローと表を切り離した。.slot-note は表のまま触らない。
   SPINE: 先頭セル padding-left:0 / 末尾セル padding-right:0。帯の文字が H1・tagline と
     同じ左端に乗る（ALIGNMENT SPINE, global.md）。 */
.fact-strip{margin-top:32px;border-block:1px solid var(--line)}
.fact-strip .cell{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}
.fact-strip .cell:last-child{border-bottom:none}
.fx-fact{font-weight:600;font-size:var(--t-h4);line-height:1.7;color:var(--ink)}
.fx-note{font-weight:400;font-size:var(--t-cap);line-height:1.6;letter-spacing:.02em;color:var(--ink-2)}
/* 数字だけ太くしない。.num は既定で 700（styles.css:70）。H1 と同じ判断
   （styles.css:166、Keeyo 2026-09-23「no 凸凹」）をここにも通す。 */
.fact-strip .num{font-size:1em;font-weight:inherit}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-cta .btn-call{width:100%}
.hero-photo{position:relative;margin-top:8px}
.hero-photo .ph{border:1px solid var(--line);border-radius:var(--radius)}
@media (min-width:768px){.hero-photo .ph{aspect-ratio:3/4;object-fit:cover;width:100%}}
.hero-photo::before{content:"";position:absolute;top:-12px;left:-12px;width:60px;height:60px;border-top:2px solid var(--vermilion);border-left:2px solid var(--vermilion);pointer-events:none}
.caption{background:var(--card);border-top:1px solid var(--line);padding:8px 12px;font-size:12px;color:var(--ink-2);letter-spacing:.04em}
@media (min-width:768px){
  .hero{padding-top:80px}
  .hero-grid{grid-template-columns:2fr 1fr;gap:48px;align-items:start}
  .roundel{width:56px;height:56px;border-width:2px;padding:3.5px;font-size:24px}
  .roundel.r-nai::after{right:-2px;width:5.5px;height:3px}
  .roundel.r-shin::after{left:-2px;width:5.5px;height:3px}
  .hero-cta .btn-call{width:auto}
}
/* 行になるのは 1024px から。768-1023 ではヒーロー左段が 416px しかなく、
   3列にすると各セル約91px＝375px 端末より狭い文字幅になる。ここでは積む。 */
@media (min-width:1024px){
  .fact-strip{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,10fr) minmax(0,9fr);grid-template-rows:auto auto}
  .fact-strip .cell{grid-row:span 2;grid-template-rows:subgrid;row-gap:4px;padding:16px 20px;border-bottom:none;border-right:1px solid var(--line)}
  .fact-strip .cell:first-child{padding-left:0}
  .fact-strip .cell:last-child{padding-right:0;border-right:none}
}
/* 1024-1149 が最も狭い。内側の余白だけ詰めて約16px を稼ぐ（外側の 0 は :first/:last が勝つ）。 */
@media (min-width:1024px) and (max-width:1149px){.fact-strip .cell{padding-inline:14px}}

/* レーザーのただ1つの置き場 */
/* ---------- 選ばれる理由 ---------- */
.why{background:var(--card);border-block:1px solid var(--line)}
.why-grid{display:grid;gap:24px}
.why-tile .tick{display:block;width:40px;height:3px;background:linear-gradient(90deg,var(--vermilion) 0 50%,var(--ink) 50% 100%);transform:none;margin-bottom:12px}
.why-tile h3{font-size:20px;margin-bottom:6px}
.why-tile p{font-size:14px;color:var(--ink);line-height:1.9}
@media (min-width:768px){.why-grid{grid-template-columns:repeat(3,1fr);gap:32px}}

/* ---------- 診療案内 route-line cards ---------- */
.care-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 28px 28px 32px}
.care-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.care-card.c-nai::before{background:var(--vermilion)}
.care-card.c-shin::before{background:var(--ink)}
.care-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.care-glyph{width:40px;height:40px;border-radius:50%;border-style:solid;border-width:1.5px;padding:3px;background-clip:content-box;position:relative;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff}
.care-glyph::after{content:"";position:absolute;top:-1.5px;left:50%;transform:translateX(-50%);width:2px;height:4px}
.c-nai .care-glyph{background-color:var(--vermilion);border-color:var(--vermilion)}
.c-shin .care-glyph{background-color:var(--ink);border-color:var(--ink)}
.c-netsu .care-glyph{background-color:var(--ink);border-color:var(--ink)}
.c-nai .care-glyph::after{background:var(--vermilion)}
.c-shin .care-glyph::after{background:var(--ink)}
.c-netsu .care-glyph::after{background:var(--ink)}
.care-card h3{font-size:20px}
.care-card ul{list-style:none;margin-bottom:14px}
.care-card li{font-size:14px;line-height:1.9;padding-left:16px;position:relative;color:var(--ink)}
.care-card li::before{content:"";position:absolute;left:2px;top:.85em;width:8px;height:1.5px;background:var(--ink-2)}
.safety-line{font-size:14px;font-weight:600;color:var(--ink);margin:12px 0 14px;border-left:3px solid var(--plant);background:var(--plant-tint);padding:10px 12px;border-radius:var(--radius)}

/* ---------- waiting-room band ---------- */
.band{padding:0;border-block:1px solid var(--line);position:relative}
.band::before{content:"";position:absolute;top:-12px;left:24px;width:60px;height:60px;border-top:2px solid var(--vermilion);border-left:2px solid var(--vermilion);z-index:1;pointer-events:none}
.band img{width:100%;max-height:480px;object-fit:cover}
@media (min-width:1024px){.band img{max-height:560px}}
.band .caption{border-top:1px solid var(--line);padding:12px 24px}

/* ---------- hours ---------- */
.hours-sec{background:var(--card);border-top:1px solid var(--line)}
.hours-flex{display:grid;gap:32px}
.legend{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:12px;color:var(--ink-2);margin-bottom:12px;align-items:center}
.legend .off-dash{font-size:14px}
.hours-table{display:none}
.hours-table table{width:100%;max-width:900px;border-collapse:collapse;background:var(--paper)}
.hours-table th,.hours-table td{border:1px solid var(--line);background:var(--card);text-align:center;padding:12px 6px;font-size:14px}
.hours-table thead th{font-family:var(--font-display);font-weight:700;font-size:15px}
.hours-table thead th sup{display:block;font-size:10px;color:var(--vermilion-text);font-weight:700;letter-spacing:.02em}
.hours-table td.slot{font-feature-settings:'tnum';font-weight:600;font-size:13px;color:var(--ink-2);white-space:nowrap;padding-inline:12px}
.hours-table td.slot b{display:block;font-size:15px;color:var(--ink)}
.hours-table .col-closed{background:var(--tint-closed)}
.hours-table .col-today{background:var(--tint-today)}
.hours-list{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.day-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line)}
.day-row:last-child{border-bottom:none}
.day-glyph{width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px}
.day-row.is-today{border-left:3px solid var(--vermilion);background:var(--tint-today)}
.day-row.is-today .day-glyph{border-color:var(--vermilion);color:var(--vermilion)}
.day-row .today-tag{font-size:var(--t-cap);font-weight:700;color:var(--vermilion-text)}
.day-row .states{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
.day-row .sub{font-size:12px;color:var(--steel-text);width:100%}
.hours-notes{margin-top:16px;display:grid;gap:6px}
.hours-notes li{list-style:none;font-size:14px;color:var(--ink-2);padding-left:1.2em;text-indent:-1.2em}
.hours-notes li::before{content:"・";color:var(--ink-2)}
.call-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;align-self:start}
.call-card h3{font-size:15px;margin-bottom:14px}
.call-card .btn-call{width:100%}
.call-card .sub{font-size:12px;color:var(--ink-2);margin-top:10px;text-align:center}
@media (min-width:768px){
  .hours-table{display:block}
  .hours-list{display:none}
}
/* the table's min-content (~495px) + 280px card + 48px gap only fits from 1024px;
   768–1023 stacks the card under the table instead of overflowing the viewport */
@media (min-width:1024px){
  .hours-flex{grid-template-columns:minmax(0,1fr) 280px;gap:48px}
}

/* ---------- 医師紹介 ---------- */
.doc-name{font-family:var(--font-display);font-weight:700;font-size:28px}
.doc-name-h{margin:0 0 14px;font-weight:inherit;line-height:2}
.doc-ruby{font-size:12px;color:var(--ink-2);letter-spacing:.1em;margin-bottom:2px}
.doc-chip{display:inline-block;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--radius);font-size:12px;font-weight:700;padding:3px 10px;margin-left:12px;vertical-align:middle}
.pull-line{font-family:var(--font-accent);font-weight:500;font-size:20px;line-height:1.8;color:var(--ink);border-left:4px solid var(--vermilion);padding-left:12px;margin:24px 0}
.doc-body{max-width:38em}
.doc-body p{font-size:16px;line-height:2;margin-bottom:14px;color:var(--ink)}
.doc-sub{display:flex;align-items:baseline;gap:14px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.doc-sub .n{font-family:var(--font-display);font-weight:700;font-size:18px}

/* ---------- アクセス ---------- */
.access-sec{background:var(--card);border-top:1px solid var(--line)}
.access-grid{display:grid;gap:40px}
.access-side{align-self:start}
/* ---------- アクセス｜2駅の案内図 (.access-map) ----------
   これは .rt ではない。路線図＝1起点から分岐、の文法に対し、これは2起点が1つの行き先に合流する「案内板」。
   index.html の .rt は 0件のままであること（QA）。幾何は凍結（座標は index.html のコメント参照）。
   viewBox 0 0 272 128（2026-09-24：120→128。下の駅名ラベルを自分のレールの下へ出すため）。
   max-width も 272px ＝ viewBox の幅（2026-09-24、320px から変更）。これで 1ユーザー単位＝1CSSpx となり、
   駅・院 はちょうど 19px、.am-label はちょうど 14px で刷られる。
   以前は 272 の図を 320px で描画していたため ×1.176 で 22.4px／16.5px に膨らみ、
   図の中の文字だけが本文のどの号数とも一致していなかった（「文字の大きさが揃っていない」の正体）。
   272 ＝ 320px 端末の本文幅（styles.css:73 .wrap padding 24px×2）。
   .wrap の max-width か padding を変えたら、この数字を検算し直すこと。 */
.access-map{display:block;width:100%;max-width:272px;height:auto;aspect-ratio:272/128;margin-top:20px}
.access-map .am-stop text{font-weight:700;font-size:19px;letter-spacing:0}   /* CHARACTER FLOOR; the face comes from the GLYPH PIN below */
.access-map .am-label{font-family:var(--font-display);font-weight:700;font-size:var(--t-sub);letter-spacing:.02em}   /* one label per line: 駅名＋徒歩分数, one size, one face */
/* 図の説明文は図より広くしない（2026-09-24：320px→272px＝図の幅と一致）。 */
.access-note{max-width:272px;margin-top:10px;font-size:var(--t-cap);line-height:1.8;color:var(--ink-2)}
/* 描き込み — 順序＝到着の向き：①2本の脚が駅から合流点へ → ②幹が上下から分岐点へ（上半分は下向き・下半分は上向き）
   → ③最後の脚が院へ入る。丸いものは何も動かない。site.js は無変更（IIFE 4 が [data-reveal-mark] を総称で観測）。
   6本の線すべてが class="leg" を持つので、描き込み・.rv-now・print の既存規則をそのまま受け取る。 */
.access-map .leg{transform-box:fill-box}
.js .access-map[data-reveal-mark] .am-leg{transition-duration:.26s}
.js .access-map[data-reveal-mark] .am-sp{transform:scaleY(var(--rv-s));transform-origin:center top;transition:transform .12s var(--rv-e) 320ms;animation:var(--rv-fail-m) 1ms linear 2.4s forwards}
.js .access-map[data-reveal-mark] .am-sp-b{transform-origin:center bottom}
.js .access-map[data-reveal-mark].rv-in .am-sp{transform:scaleY(1)}
.js .access-map[data-reveal-mark] .am-spur{transition-duration:.14s;transition-delay:420ms}
.js .rv-now.access-map .am-sp{transition:none!important}
.map-btn{margin-top:20px;width:100%}
.spec-list{border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec-row dt{font-weight:700;color:var(--ink)}
.spec-row dd{color:var(--ink)}
.spec-row .tel-big{font-family:var(--font-body);font-feature-settings:'tnum';font-weight:700;font-size:20px;color:var(--vermilion-text);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.spec-row small{display:block;font-size:12px;color:var(--ink-2)}
@media (min-width:768px){.access-grid{grid-template-columns:7fr 5fr;gap:48px}}
@media (min-width:1024px){.access-side{position:sticky;top:96px}}

/* ---------- 施設基準 ---------- */
.kijun{padding-block:32px 48px}
.kijun-block{max-width:720px;border-top:1px solid var(--ink);padding-top:18px}
.kijun-title{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);margin-bottom:10px}
.kijun-body{font-size:14px;line-height:1.9;color:var(--ink-2)}
.kijun-body ul{list-style:none;margin:6px 0}
.kijun-body li{padding-left:1.2em;text-indent:-1.2em}
.kijun-body li::before{content:"◇ "}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:48px 0 48px}
.foot-name{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--vermilion)}
.foot-corp{font-size:12px;color:var(--steel);margin-bottom:16px}
.foot-roundels{display:flex;align-items:center;margin-bottom:16px}
.foot-roundels .roundel{width:32px;height:32px;border-width:1.5px;padding:2px;font-size:13px}
.foot-roundels .r-shin{background:transparent;border-color:var(--paper);color:var(--paper)}
.foot-roundels .r-shin::before{content:"";position:absolute;inset:2px;border:1px solid var(--paper);border-radius:50%}
.foot-roundels .r-nai::after{right:-1.5px;width:3.5px;height:2px}
.foot-roundels .r-shin::after{content:"";position:absolute;left:-1.5px;top:50%;transform:translateY(-50%);width:3.5px;height:2px;background:var(--paper)}
.foot-roundels .roundel-link{background:linear-gradient(90deg,var(--vermilion) 0 50%,var(--paper) 50% 100%)}
.foot-tel{font-family:var(--font-body);font-feature-settings:'tnum';font-weight:700;font-size:24px;color:var(--paper);text-decoration:none;display:inline-block;margin-bottom:8px}
.foot-meta{font-size:13px;color:rgba(250,250,248,.7);line-height:2}
.foot-groups{display:grid;gap:22px;margin:22px 0}
.fg{display:grid;gap:2px}
.fg-t{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--steel);margin-bottom:6px}
.fg a{color:var(--paper);text-decoration:none;font-size:var(--t-note);padding:10px 4px;margin:-10px -4px}
.fg a:hover{text-decoration:underline}
@media (min-width:768px){.foot-groups{grid-template-columns:repeat(3,1fr);gap:32px}}
.foot-copy{font-size:12px;color:var(--steel);border-top:1px solid rgba(250,250,248,.15);padding-top:14px}
@media (max-width:767px){footer{padding-bottom:110px}}

/* ---------- sticky mobile bar ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(23,23,28,.10);padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));display:none;grid-template-columns:1fr 1.7fr;gap:8px;transition:transform .2s}
.js .mbar{transform:translateY(110%)}   /* hidden state exists only when JS runs: with JS off the bar is always up */
.js .mbar.show{transform:translateY(0)}
.mbar .m-map{display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);border-radius:var(--radius-cta);text-decoration:none;color:var(--ink);min-height:48px;font-family:var(--font-display);font-weight:700;font-size:15px}
.mbar .m-map .mrow{display:flex;align-items:center;gap:6px}
.mbar .m-map svg{width:16px;height:16px;stroke:currentColor}
.mbar .m-call{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--vermilion-action);border-radius:var(--radius-cta);text-decoration:none;color:#fff;min-height:48px;font-weight:700;font-size:15px}
.mbar .m-call:active{background:var(--vermilion-press)}
.mbar .m-call svg{width:18px;height:18px;stroke:#fff}
.mbar .m-call .tel{font-feature-settings:'tnum';font-size:15px}
@media (max-width:767px){.mbar{display:grid}}
@media (max-width:359px){.mbar .m-call>span:not(.tel){display:none}}   /* <360: icon + 06-6245-0378 on one 48px row; the bar never grows */

/* ---------- MOTION — what may move, and what must never ----------
   TABOO, do not animate:
   1. 図のディスクは動かない。図の <text> も単独では動かない——図はブロックと一緒に落ち着く。自分で描いてよいのは 2px の rect だけ、1回、その意味が走る向きに。
   2. .roundel / .care-glyph / .foot-roundels / .nk-mark / .why-tile .tick — the mark family.
      No pulse, spin, hover-grow, staggered entrance. These are a logo; logos do not move.
   3. .hero-photo .ph and .band img — no Ken Burns, no parallax, no zoom-on-hover.
   4. .close-cta .btn-call and .mbar .m-call — no attention pulse, shimmer or arrow nudge.
   5. No scroll-reveal anywhere (opacity:0 + IntersectionObserver on section, .why-tile,
      .pg-sec, .pg-steps li). A failed observer leaves a blank page, which breaks the rule
      that every page must be fully readable with JS off.
   6. CAVEAT: the guard below is *{transition:none!important}, and * does NOT match
      pseudo-elements. Any transition on ::before / ::after / ::details-content must carry its
      own @media (prefers-reduced-motion:no-preference) wrapper or an explicit reduce override.
   PERMITTED, in full: .btn-call / .btn-ghost / .hdr-call background .12s; .care-switch
   [role=tab] colour+background .12s; #care .kicker::before background-color .16s; .care-lane
   opacity .25s plus the lane View Transitions; .lane-more text-decoration-color .12s; .nk-text
   border-color .12s; .mbar transform .2s — already correct, do not lengthen, do not bounce.
   Nothing else. A <details> open animation was considered and rejected: it needs JS or
   interpolate-size/::details-content, which iOS Safari does not support, so it would ease on
   some phones and snap on others — and the +/− swap already reports the state. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- review-pass additions ---------- */
.pg-updated{padding-block:16px 32px;text-align:center;font-size:var(--t-cap);color:var(--ink-2)}
.hours-times{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:10px}
.hours-times .num{font-size:1em}
.slot-note{display:block;font-size:11px;font-weight:400;color:var(--steel-text)}
.th-tag{display:block;font-size:var(--t-cap);color:var(--vermilion-text);font-weight:700;letter-spacing:.04em}
.first-visit{margin-top:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;max-width:900px}
.first-visit h3{font-size:15px;margin-bottom:10px}
.first-visit ul{list-style:none;display:grid;gap:6px}
.first-visit li{font-size:var(--t-note);color:var(--ink-2);padding-left:1.2em;text-indent:-1.2em}
.first-visit li::before{content:"・";color:var(--ink-2)}
.doc-sub-line{font-size:var(--t-sub);color:var(--ink);line-height:1.9;margin-top:10px;max-width:38em}

/* ---------- doc panel (item 5) ---------- */
/* レスポンシブ入替（重複ではない）。片方を消すときはもう片方の display をかならず戻す。 */
.doc-grid{display:grid;gap:40px}
.doc-panel{display:none}
@media (min-width:768px){
  .doc-grid{grid-template-columns:minmax(0,38em) 1fr;gap:64px;align-items:stretch}
  .doc-body .pull-line{display:none}
  .doc-panel{position:relative;background:var(--plant-tint);border:1px solid var(--plant-line);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:48px 32px}
  .doc-panel::before{content:"";position:absolute;top:-12px;left:-12px;width:60px;height:60px;border-top:2px solid var(--vermilion);border-left:2px solid var(--vermilion);pointer-events:none}
  .doc-panel .roundel{width:96px;height:96px;border-width:2.5px;padding:5px;font-size:44px}
  .doc-panel .roundel-link{width:40px}
  .doc-panel-quote{font-family:var(--font-accent);font-weight:500;font-size:19px;line-height:2;color:var(--ink);text-align:center}
}

/* ---------- conversion microcopy (item 6) ---------- */
.cap-d{display:none}
@media (min-width:768px){.cap-m{display:none}.cap-d{display:inline}}

/* ---------- phones (<768px) — mobile pass 2026-09-25 (docs-internal/mobile-review/spec.md) ----------
   CHROME: header = brand + 「メニュー」 (.hdr-call is >=768px only); the .mbar is the only chrome phone.
   .mnav is DELETED (2026-09-25) — its anchors live in the menu sheet, channel pages keep .pg-acts.
   TARGET SCALE: 44 control / text link · 48 bar button / list row · 56 content button / disclosure row.
   The menu sheet has no transition: it is there or not (MOTION — only [data-reveal] moves). */
.hdr-menu{display:none}
nav.main .gnav-u{display:none}   /* sheet-only rows; the >=768px bar keeps exactly four items */
@media (max-width:767px){
  /* header + phone menu. 57 = header height below 768px (.bar 56 + 1px border). */
  .brand .name{white-space:nowrap}
  .hdr-call{display:none}
  .hdr-menu{display:inline-flex;align-items:center;justify-content:center;min-width:88px;min-height:44px;padding:0 12px;border:1.5px solid var(--ink);border-radius:var(--radius-cta);background:var(--card);color:var(--ink);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1;letter-spacing:0}
  .hdr-menu .mn-c{display:none}
  html.menu-open .hdr-menu{background:var(--ink);color:var(--paper)}
  html.menu-open .hdr-menu .mn-o{display:none}
  html.menu-open .hdr-menu .mn-c{display:inline}
  html.menu-open,html.menu-open body{overflow:hidden}
  html.menu-open nav.main{display:block;position:fixed;top:57px;left:0;right:0;bottom:0;z-index:1;background:var(--card);padding:8px 24px calc(88px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;white-space:normal}   /* no border-top: the header's 1px bottom rule is the sheet's top edge */
  html.menu-open nav.main a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:var(--t-body);font-weight:700;line-height:1.4;color:var(--ink)}
  html.menu-open nav.main a:hover,html.menu-open nav.main a[aria-current="page"]{border-bottom-color:var(--line)}
  html.menu-open nav.main a::after{content:"→";content:"→" / "";position:static;color:var(--vermilion-text)}   /* replaces the 44px pad; the alt-text form keeps the arrow out of the link name */
  html.menu-open nav.main a[aria-current="page"]::before{content:"";position:absolute;left:-24px;top:0;bottom:0;width:4px;background:var(--vermilion)}   /* you-are-here rail on the screen edge, the .notice grammar */
  html.menu-open nav.main a:not(.gnav-u)+.gnav-u{margin-top:24px;border-top:1px solid var(--ink)}
  html.menu-open .mbar{transform:none}   /* the call stays in the thumb zone while the sheet is open */
  /* hero (order and spacing unchanged) */
  .hero-grid > div:first-child{display:flex;flex-direction:column}
  .roundels{order:1}
  .hero h1{order:2}
  .hero .tagline{order:3}
  .hero-cta{order:4;margin-top:20px;gap:10px}
  .fact-strip{order:5;margin-top:24px}
  section{padding-block:48px}
  .hero{padding-top:40px;padding-bottom:48px}
  .care-card{padding:20px 20px 20px 24px}
  .sec-head{margin-bottom:24px}
  section[id],#hatsunetsu{scroll-margin-top:64px}
  .hours-list .chip{font-size:13px;padding:4px 11px}
  /* buttons — one shape per role (56) */
  .btn-call{width:100%;min-height:56px;padding:6px 20px;line-height:1.2}
  .btn-ghost{min-height:56px;padding:0 20px;font-family:var(--font-display);font-weight:700;font-size:15px}
  /* a record, not a call: digits the size of the words around them */
  .spec-row .tel-big{font-size:var(--t-sub)}
  .spec-row{grid-template-columns:80px 1fr;align-items:baseline}   /* 「診療科目」 is 58px; the value column gains 16px; the 「電話」 label sits on the number's line */
  /* marks: corner keylines one size on phones; list dashes on whole pixels */
  .hero-photo::before,.band::before{width:40px;height:40px}
  .care-card li::before{height:2px}
  /* footer: two columns of real 44px rows (was 25px boxes padded to 45 on a 27px pitch) */
  .foot-groups{grid-template-columns:1fr 1fr;gap:24px 16px}
  .fg{gap:0;align-content:start}
  .fg-t{margin-bottom:4px}
  .fg a{display:flex;align-items:center;min-height:44px;padding:0;margin:0;line-height:1.5}
  .notice .wrap{text-wrap:balance}   /* two even lines instead of 「…ご確認く / ださい。」 */
}
@media (max-width:400px){
  .hero h1{font-size:30px;letter-spacing:0}
  .hero .tagline{letter-spacing:0}   /* 21 chars x 16px = 336 <= 342: one line at 390 */
}

/* ---------- closing conversion band (item 10) ---------- */
.close-cta{background:var(--ink);padding-block:56px;text-align:center}
.close-cta .close-line{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,26px);line-height:1.8;color:var(--paper);margin-bottom:24px}
.close-cta::before{content:"";display:block;width:32px;height:4px;background:linear-gradient(90deg,var(--vermilion) 0 50%,var(--paper) 50% 100%);margin:0 auto 20px}   /* the PAIR on ink (decision D, 2026-09-21) */
.close-next{margin-top:20px;font-size:var(--t-note);color:rgba(250,250,248,.75)}
.close-next a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){
  .close-next a{display:inline-flex;align-items:center;min-height:44px}
  .close-cta{padding-block:48px}
  footer{border-top:1px solid rgba(250,250,248,.15)}   /* same rule as .foot-copy; ends the ~120px ink void */
}
.hours-sec .call-card .btn-call .cap{display:none}

/* ---------- .pre-call — 「お電話の前に」, inside the home .call-card only ---------- */
.pre-call{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pre-call h3{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.pre-call ul{list-style:none;display:grid;gap:4px;margin-bottom:10px}
.pre-call li{font-size:12px;line-height:1.7;color:var(--ink-2);padding-left:1.2em;text-indent:-1.2em}
.pre-call li::before{content:"・";color:var(--ink-2)}
.pre-call-more{display:flex;align-items:center;min-height:44px;font-size:12px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--steel);padding-bottom:1px}
.pre-call-more span{color:var(--vermilion-text);font-weight:700;margin-left:6px}

/* ---------- 診療案内 体×心 lanes ----------
   LANE GOVERNANCE — the active lane is ONE token, --lane (vermilion|ink). It colours exactly three
   surfaces: the selected tab's 3px top rail, #care .kicker::before, and the card spine (already
   per-card). Never a new hue, tint, photo swap, blue/dark mode, or a roundel fill change.
   Tabs are rectangles (2px radius), text-only; the plate is hairline/paper; a tab NEVER takes
   --vermilion-action (a tab is a sign, not a call). The 40px 体/心 roundel stays in the lane head
   and is never the control. Both lanes always in the DOM; no-JS = switch hidden, lanes stack. */
#care{--lane:var(--vermilion)}
#care[data-lane="shin"]{--lane:var(--ink)}
#care .kicker::before{background:var(--lane);transition:background-color .16s}

/* switch (enhanced only) */
.care-switch{display:none}
.js .care-switch{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;background:var(--paper)}
.care-switch [role="tab"]{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;padding:8px 12px;text-decoration:none;color:var(--ink-2);font-family:var(--font-display);line-height:1.4;transition:color .12s,background .12s}
.care-switch [role="tab"]+[role="tab"]{border-left:1px solid var(--line)}
.care-switch [role="tab"] b{font-size:16px;font-weight:700;letter-spacing:.04em}
.care-switch [role="tab"] small{font-size:11px;letter-spacing:.06em}
.care-switch [role="tab"]::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:transparent}   /* lane-hue rail */
.care-switch [role="tab"]:hover{color:var(--ink)}
.care-switch [role="tab"]:focus-visible{outline-offset:-3px}
.care-switch [aria-selected="true"]{color:var(--ink);background:var(--card);cursor:default}
.care-switch [aria-selected="true"]::before{background:var(--lane);view-transition-name:lane-rail}
.care-switch [aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--card)}   /* fuses tab into the card */
/* 「心療内科・精神科」(8字) must stay on one line inside a half-width tab at 320–400px.
   Must sit AFTER the base tab rules above (same specificity — source order decides). */
@media (max-width:400px){
  .care-switch [role="tab"]{padding:8px 6px}
  .care-switch [role="tab"] b{font-size:15px;letter-spacing:0;white-space:nowrap}
}
@media (max-width:767px){
  .care-switch [role="tab"] small{font-size:var(--t-cap)}   /* 11px is kicker-only on the ladder */
}

/* stage: both lanes stacked in ONE grid cell → stage height never changes on switch */
.care-stage{display:grid;gap:16px;container:care-stage / inline-size}
.js .care-stage{gap:0;view-transition-name:care-stage}
.js .care-lane{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s linear .25s;border-top-left-radius:0;border-top-right-radius:0}
.js .care-lane.is-on{visibility:visible;opacity:1;transition:opacity .25s ease,visibility 0s}

/* View Transitions (progressive). VT owns the fade while active; CSS crossfade runs alone elsewhere. */
::view-transition-old(care-stage),::view-transition-new(care-stage){animation-duration:.25s}
::view-transition-group(lane-rail){animation-duration:.25s;animation-timing-function:cubic-bezier(.2,0,0,1)}
html:active-view-transition .care-lane{transition:none}

/* lane internals */
.care-glyph{font-size:19px}   /* ORANGE floor: white glyph on #F0533A must be >=19px (pre-existing 18px breach) */
.lane-promise{font-family:var(--font-display);font-weight:500;font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:16px}
.lane-body{display:grid;gap:14px}
.care-lane ul{margin-bottom:0}
.lane-h{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--steel-text);margin-bottom:6px}
.lane-book{font-size:14px;color:var(--ink);margin-top:12px}
.lane-book a{text-decoration:underline;text-underline-offset:3px}
.care-sub{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.care-sub h4{font-size:15px;line-height:1.5}
.care-sub p{font-size:14px;line-height:1.8;color:var(--ink)}
.care-sub .care-glyph{width:32px;height:32px;font-size:14px;padding:2px;margin-top:2px}

/* オンライン診療 — small framed block under the lanes (ink spine: information; the one link points to /hajimete.html#online) */
.care-online{margin-top:20px;padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:var(--radius)}
.care-online h4{font-size:var(--t-h4);line-height:1.5;margin-bottom:4px}
.care-online p{font-size:var(--t-sub);line-height:1.9;color:var(--ink);max-width:46em}
.care-online a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.care-online a span{color:var(--vermilion-text);font-weight:700;margin-left:4px}
@media (max-width:767px){
  .care-online a{display:inline-flex;align-items:center;min-height:44px}   /* was a 21px-tall target */
}

/* ---------- 診療案内 v2 — レーン＝私のこと、サイン＝私たちのこと (spec: docs-internal/care-review/spec.md) ----------
   左列は読者自身の言葉（--measure で右端を定義）。右列は枠のある「行動」パネル：短いのは意図であって欠落ではない——
   枠のある物の余りは余白に読め、枠のない短い列は穴に読める。全幅を使うのは .care-dest だけ（いちばん広い物＝いちばん重要な主張）。 */
.lane-main{max-width:var(--measure)}
.lane-main .lane-promise{margin-bottom:14px}
.lane-main .safety-line{margin:0 0 16px}
.lane-main>ul>li+li{margin-top:6px}
.lane-act{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;align-self:start}
.lane-act .lane-book{margin:0;font-size:var(--t-sub);line-height:1.9}
.lane-act .lane-book a{min-height:44px;display:inline-flex;align-items:center}
.lane-act .care-sub{margin-top:14px;padding-top:14px}
/* 720px: at a 768px viewport the container is ~672px; two columns would give the body ~352px (25 chars). One column until it is worth splitting. */
@container care-stage (min-width:720px){
  .lane-body{grid-template-columns:minmax(0,1fr) minmax(280px,320px);gap:32px;align-items:start}
}
@media (max-width:519px){
  .care-lane{padding:22px 20px 22px 24px}   /* card interior 267 → 307px on 375; lanes only (channel note panels share .care-card) */
  .lane-act{padding:16px 0 0;background:none;border:0;border-top:1px solid var(--line);border-radius:0}   /* stacked, the frame no longer balances a column; box-in-box-in-box left 152px of text at 320 */
}

/* ZONE B (.care-dest 行き先サイン) — built 2026-09-21, REMOVED 2026-09-24: destinations 1–2 are table stakes
   (Keeyo: 「当然のこと」); the razor keeps its single home in .why-tile 2 「診察のあとに、どう進むか。」 */
@media (min-width:768px){
  .js .care-switch{width:min(100%,480px)}          /* folder-tab: strip fuses into the card's top-left */
  .js .care-lane{border-top-right-radius:var(--radius)}
}

/* =========================================================================
   MOTION — 「落ち着く」/ SETTLE.  APPEND TO styles.css AS THE LAST BLOCK.
   The page is a printed spread that happens to scroll: it is already set when
   you arrive, and motion only lets a block come to rest and lets a mark draw
   itself. Three primitives, one easing, one distance.
     SETTLE  fade + 8px rise (6px on phones)      420ms
     RULE    a mark draws itself, scaleX(0→1)     520ms, +80ms after its block
     FEEDBACK hover / focus-visible               200ms
   WHAT MOVES IS AN ATTRIBUTE, NOT A SELECTOR LIST. Only [data-reveal] and
   [data-reveal-mark], authored in the HTML, are ever hidden — one list, in one
   place, so the CSS and the JS can never drift apart (they did in the review
   drafts). The attributes exist at parse time, so nothing is ever visible-then-
   hidden; and nothing inside #care, no .rt route strip, no .hero/.pg-plate, no
   .hours-table/.hours-list/.spec-list/.hours-mini, no .btn-call and no element
   containing a tel: link ever carries one. INVARIANT, greppable: a reveal
   target never contains a phone number and never sits inside 診療案内
   (styles.css:156 lists scroll-driven reveals among the things REJECTED there).
   FOUR FAILURE MODES, ONE OUTCOME — the finished page:
     JS off        → html.js never set, every rule below is inert.
     site.js dead  → --rv-fail keyframes reveal everything at 2.4s; site.js
                     cancels them by setting html.rv-go once it is wired.
     reduced motion→ the three --rv-* start values ARE the end values, so the
                     existing *{transition:none!important} cannot strand a
                     block at opacity:0; plus a hard animation/transition kill
                     that also reaches ::before (styles.css:337 uses bare `*`,
                     which does not match pseudo-elements — pre-existing hole).
     no custom props → var() invalidates the declaration, element renders as-is.
   NOT TOUCHED, DELIBERATELY: the .care-lane crossfade and its View Transitions
   (styles.css:446-452), the .mbar slide (styles.css:325), every :focus-visible
   ring and every .btn-call/.hdr-call press timing. Re-timing a shipped, tested
   interaction buys the reader nothing.
   NOTE for a future editor — #care .kicker::before (styles.css:421) is ID-
   weighted (1,1,0) and would silently drop a class-level transform transition.
   #care carries no reveal today; if that ever changes, restate the shorthand at
   `.js #care .kicker::before` with BOTH transform and background-color in it.
   NOTE — .access-side is position:sticky ≥1024px (styles.css:291). A transform
   on the sticky element itself does NOT break stickiness (only an ancestor
   transform would), but it does change the containing block for any absolutely
   positioned descendant. We reveal the .leg inside it, never .access-side.
   ========================================================================= */
:root{
  --rv-o:0;                          /* start opacity */
  --rv-y:8px;                        /* settle distance */
  --rv-s:0;                          /* start scale of a drawn mark */
  --rv-e:cubic-bezier(.2,.6,.2,1);   /* decelerating, no overshoot, no bounce */
  --rv-t:.42s;                       /* SETTLE */
  --rv-r:.52s;                       /* RULE */
}
@media (max-width:767px){:root{--rv-y:6px}}
html.js{--rv-fail:rv-show;--rv-fail-m:rv-draw}      /* armed while /site.js is unproven */
html.js.rv-go{--rv-fail:none;--rv-fail-m:none}      /* site.js is alive → disarm */
@keyframes rv-show{to{opacity:1;transform:none}}
@keyframes rv-draw{to{transform:scaleX(1)}}

/* ---------- SETTLE — a block comes to rest ---------- */
.js [data-reveal]{opacity:var(--rv-o);transform:translateY(var(--rv-y));transition:opacity var(--rv-t) var(--rv-e),transform var(--rv-t) var(--rv-e);animation:var(--rv-fail) 1ms linear 2.4s forwards}
.js [data-reveal].rv-in{opacity:1;transform:none}

/* ---------- RULE — the mark family draws itself, left to right ----------
   Only marks: the 24×4 .kicker::before, the 40×3 .why-tile .tick, the 24×2
   .nk-mark, the access diagram's legs, trunk and spur (all class="leg"), and the closing band's centred ::before.
   Nothing round ever moves (.roundel / .care-glyph / すべての図のディスク). */
.js [data-reveal] .tick,.js [data-reveal] .nk-mark,.js [data-reveal] .kicker::before,.js .kicker[data-reveal]::before,.js [data-reveal-mark] .leg{transform:scaleX(var(--rv-s));transform-origin:left center;transition:transform var(--rv-r) var(--rv-e) 80ms;animation:var(--rv-fail-m) 1ms linear 2.4s forwards}
.js [data-reveal-mark]::before{transform:scaleX(var(--rv-s));transition:transform var(--rv-r) var(--rv-e) 80ms;animation:var(--rv-fail-m) 1ms linear 2.4s forwards}   /* .close-cta::before is margin:0 auto → draws from its centre */
.js [data-reveal].rv-in .tick,.js [data-reveal].rv-in .nk-mark,.js [data-reveal].rv-in .kicker::before,.js .kicker[data-reveal].rv-in::before,.js [data-reveal-mark].rv-in .leg,.js [data-reveal-mark].rv-in::before{transform:scaleX(1)}

/* ---------- NO FADE ON LOAD (QA「no fade on load」) ----------
   site.js marks whatever is already on screen at first measurement .rv-now, so
   that first batch lands with its transition suppressed. Scoped to the reveal
   targets and their own marks — never a global *{transition:none}, which would
   reach the .mbar and the lane tabs and (using bare `*`) would miss ::before. */
.js .rv-now,.js .rv-now .tick,.js .rv-now .nk-mark,.js .rv-now .kicker::before,.js .kicker.rv-now::before,.js .rv-now .leg,.js .rv-now::before{transition:none!important}

/* ---------- STAGGER — group-scoped, ≥768px only, two steps, 210ms ceiling ----------
   Stacked on a phone every block already has its own trigger, so no delay is
   added there. The group attribute keeps a delay from leaking to an unrelated
   sibling — the reason the adjacent-sibling chains were rejected. */
@media (min-width:768px){
  .js [data-reveal-group]>[data-reveal]:nth-child(2){transition-delay:70ms}
  .js [data-reveal-group]>[data-reveal]:nth-child(3){transition-delay:140ms}
}

/* ---------- FAQ — the answer that just opened says so ----------
   <details> owns the height change, exactly as today; we fade only the <p>, so
   no layout shift is added. summary+p: the answer is always summary's direct
   next sibling, and the tighter selector cannot catch a future 2nd paragraph. */
.js .pg-faq[open] summary+p{animation:rv-open .3s var(--rv-e)}
@keyframes rv-open{from{opacity:0;transform:translateY(4px)}}

/* ---------- FEEDBACK — the page answers the hand; it never performs ----------
   One gesture: the orange → leans 2px in the direction of travel, on hover AND
   on :focus-visible so the keyboard gets the identical state. Limited to the
   three arrows that are flex items (.nk-row, .hm-links a and .pre-call-more are
   all display:flex), so no display:inline-block is added anywhere and no
   baseline moves on any device. Every existing hover/press timing on the
   buttons, tabs and hairlines is left exactly as shipped — and every property
   this system animates, here and above, is opacity or transform. */
.nk-arrow,.hm-links a span,.pre-call-more span{transition:transform .2s var(--rv-e)}
.nk-row:hover .nk-arrow,.nk-row:focus-visible .nk-arrow,.hm-links a:hover span,.hm-links a:focus-visible span,.pre-call-more:hover span,.pre-call-more:focus-visible span{transform:translateX(2px)}

/* ---------- PRINT — never print an un-arrived page ----------
   Without this, printing /hataraku.html from the top omits the steps, the
   tables, the FAQ block and the のりかえ card. */
@media print{
  .js [data-reveal],.js [data-reveal-mark]{opacity:1!important;transform:none!important}
  .js [data-reveal] .tick,.js [data-reveal] .nk-mark,.js [data-reveal] .kicker::before,.js .kicker[data-reveal]::before,.js [data-reveal-mark] .leg,.js [data-reveal-mark]::before{transform:none!important}
}

/* ---------- REDUCED MOTION — everything visible, nothing moving ----------
   (1) start state === end state, so no transition is needed to reveal;
   (2) a total animation/transition kill that, unlike styles.css:337, also
       matches ::before/::after — that is where the kicker and closing marks
       live, and the FAQ fade is a keyframe. Fixes a hole that exists today,
       independent of this system.
   site.js belts it a third time: it reveals everything and never observes. */
@media (prefers-reduced-motion:reduce){
  :root{--rv-o:1;--rv-y:0px;--rv-s:1}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ================= 本町サイン｜乗換標識 — APPEND-ONLY, end of styles.css =================
   index.html loads ONLY styles.css, so every home rule lives here. ONE geometry, FOUR steps:
   LINE 2–4px split hairline (.roundel-link .nk-mark .why-tile .tick .close-cta::before .dest-mark--norikae)
   MARK 20–24px solid disc, no character / ring-gap / notch (.mk-dot, favicon.svg, the OG emblem)
   SINGLE 32px one ring + 19px character (.pg-mini-glyph .foot-roundels .roundel .access-map .am-stop text)
   EMBLEM 44/56/96px the pair (.roundels .doc-panel .roundel). CHARACTER FLOOR: 体心熱駅院 never below 19px
   (white on #F0533A = 3.50:1, large-text AA only) → any mark under 32px goes solid. REFERENCE CUT = 56px:
   ring .0357 · gap .0625 · disc Ø.804 · character .4286 governs the 32 and 96 cuts; the shipped 44px mobile cut stays. */

/* 1. GLYPH PIN — the typeset 体/心 renders in a system fallback on every cold load. The box is fixed and flex-centred,
   so nothing moves; this pins the em box to ZKGN's metrics (880/120 — verify with fontTools before commit) and picks
   the nearest local Bold, so the swap is a shape flicker only, never a position shift. Marks only, never headings. */
@font-face{font-family:"NK Mark Fallback";font-weight:700;src:local("Hiragino Sans W7"),local("HiraginoSans-W7"),local("Hiragino Sans W6"),local("HiraginoSans-W6"),local("Yu Gothic Bold"),local("YuGothic-Bold"),local("Meiryo Bold");ascent-override:88%;descent-override:12%;line-gap-override:0%}
.roundel,.care-glyph,.access-map .am-stop text{font-family:'Zen Kaku Gothic New',"NK Mark Fallback",var(--font-display);line-height:1;font-synthesis:none}

/* 2. CHARACTER FLOOR REPAIR — footer 体 was 13px and the access 駅 10px, white on #F0533A inside aria-hidden wrappers
   (axe-blind). 32/19 = the .pg-mini-glyph cut already signed off. CSS only: the shared shell stays byte-identical. */
.foot-roundels .roundel{font-size:19px}

/* 3. EMBLEM SCALE — the 96px pair was drawn with 56px hairlines (2.5/96=.026 vs 2/56=.036). Ratios applied.
   Same specificity as styles.css:360-361; appending at the end of the file wins by source order. */
@media (min-width:768px){
  .doc-panel .roundel{border-width:3.5px;padding:6px;font-size:41px}
  .doc-panel .roundel.r-nai::after{right:-3.5px;width:9.5px;height:5px}
  .doc-panel .roundel.r-shin::after{left:-3.5px;width:9.5px;height:5px}
  .doc-panel .roundel-link{width:48px;height:3px;margin-inline:10px}
}

/* 4. THE TRANSFER BRANCH — retired from the home legends 2026-09-21 together with the two home route strips
   (the legend-binding failed the patient comprehension test). The のりかえ split bar now lives ONCE per page as
   .dest-mark--norikae on the third card of .care-dest. */

/* 5. lane door links — index.html only. MOVED 2026-09-24 from between the retired .rt (541-570) and
   .route-legend (577-588), which the seikatsu 4-branch retirement would otherwise have swept away.
   index.html:218 and :251 use .lane-more, and index.html loads ONLY styles.css — this is its one home. */
.lane-more{color:inherit;text-decoration:underline;text-decoration-color:var(--steel);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .12s}
.lane-more span{color:var(--vermilion-text);font-weight:700;margin-left:6px}
.lane-more:hover{text-decoration-color:var(--ink)}

/* 6. .nk-line — MOVED from pages.css (deleted there in the same commit). BUG: used only on index.html, which
   never loads pages.css → both home lane doors rendered with no underline and a black arrow. .mk-dot is a SINGLE
   line mark (the reader continues to the line's terminus, not a transfer); inline-block keeps the <a> inline so its
   underline stays per-line. Hue binds to the card's own .c-nai/.c-shin like the route discs; ink is the default.
   .nk-line a keeps the text-decoration underline already shipped here (LINK AFFORDANCE, global.md) rather than
   the border-bottom this block used before that fix — carried forward unchanged, not reverted. */
.nk-line{margin-top:10px;font-size:var(--t-note)}
.nk-line a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--steel);text-decoration-thickness:1px;text-underline-offset:4px}
.nk-line a span{color:var(--vermilion-text);font-weight:700;margin-left:6px}
.mk-dot{display:inline-block;width:20px;height:12px;vertical-align:-1px;margin-right:8px;color:var(--ink)}
.c-nai .mk-dot{color:var(--vermilion)}

/* 8. 404 = 乗換案内板 — the intact pair under the ink hairline, then rows marked by line (体/心) or by the pair
   (.nk-mark = whole clinic). .nk-mark keeps its true 24px 50/50 bar inside a 32px footprint via MARGIN (padding
   would repaint the gradient across 32px) so every row's text starts on one line — also fixes the 32/24
   misalignment already shipped on hataraku and seikatsu. */
.pg-404 .pg-doc-head .roundels{margin-bottom:16px}
.norikae .nk-mark{margin-inline:4px}

/* 9. MOTION — one gesture, at the transfer points only: the line extends toward its destination, the arrow advances.
   transition (never animation): the global guard at styles.css:337 kills the easing, and the end-state is cancelled
   below so it never lands as an instant jump. hover:hover keeps it off touch. scaleX(1.15) on 24px = +3.6px into the
   4px margin — it cannot reach the label. Emblem, footer pair, favicon, route strip, OG: no motion, ever. */
@media (hover:hover){
  .nk-mark,.nk-arrow{transition:transform .22s cubic-bezier(.2,0,0,1)}
  .nk-row:hover .nk-mark,.nk-row:focus-visible .nk-mark{transform:scaleX(1.15);transform-origin:left center}
  .nk-row:hover .nk-arrow,.nk-row:focus-visible .nk-arrow{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){.nk-row:hover .nk-mark,.nk-row:focus-visible .nk-mark,.nk-row:hover .nk-arrow,.nk-row:focus-visible .nk-arrow{transform:none}}

/* 10. PRINT — the letterhead sheet: footer hoisted to the top (mark, name, address, 06-6245-0378 first), one ink,
   体 solid / 心 hollow = the die-line for 診察券・封筒・名刺 (photos/brand/mark-pair-mono.svg). Hours table forced,
   both 診療案内 lanes unstacked, chrome dropped. Closed <details> print collapsed — no author CSS can open them. */
@media print{
  @page{margin:14mm}
  body{display:flex;flex-direction:column;background:#fff;color:#000}
  footer{order:-1;background:#fff;color:#000;border-bottom:1px solid #000;padding:12px 0 16px}
  header,.notice,.mbar,.close-cta,.skip,.foot-groups,.foot-copy,.pg-acts,.care-switch,.map-btn,.hm-links,.care-note{display:none!important}
  .wrap{max-width:none;padding-inline:0}
  section,.pg-sec{padding-block:14px}
  a{color:#000;text-decoration:none}
  .js .care-stage{gap:16px!important}
  .js .care-lane{grid-area:auto!important;visibility:visible!important;opacity:1!important}
  .hours-table{display:block!important}.hours-list{display:none!important}
  .band,.hero-photo,.doc-panel,.care-card,.pg-doc-table-wrap,.hours-table{break-inside:avoid}
  .roundel,.care-glyph,.roundel-link,.nk-mark,.kicker::before,.why-tile .tick,.access-map{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .foot-name,.foot-corp,.foot-tel,.foot-meta{color:#000}
  .foot-roundels .roundel{border-color:#000!important}
  .foot-roundels .r-nai{background:#000!important;color:#fff!important}
  .foot-roundels .r-shin{background:#fff!important;color:#000!important}
  .foot-roundels .r-shin::before{border-color:#000!important}
  .foot-roundels .r-nai::after,.foot-roundels .r-shin::after,.foot-roundels .roundel-link{background:#000!important}
}