@charset "utf-8";
/* ==========================================================================
   案3『美容医療のかかり方』
   --------------------------------------------------------------------------
   申告（組み立てのたびに機械が数え直して埋めています。A-09）
     無彩色の階段    … 9段（純黒・純白は色として1つも使っていない）
     透明度          … 5段（生の rgba は書かない）
     彩度のある色    … 1色相のみ（琥珀 H≈37）
     イージング      … 3本（うち1本はスクロール進捗の等倍写像。P-11の例外運用）
     動きの語彙      … 3種（①道が引かれる ②節が灯る ③枝が開く）
     @keyframes      … 1本（読書プログレスのみ。自動で走る装飾はゼロ）
     影              … 4層。先頭に 0 0 0 1px の輪郭。押せるものにだけ付ける（A-06）
   地の質感          … 点の格子。方眼（案1）でも横罫（案2）でもない
   地の明るさ        … 中間調（明るい紙でも暗い夜でもない）
   外部から読むもの  … Google Fonts のみ
   ========================================================================== */

@font-face{
  font-family:'Michi Num';
  font-style:normal; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/chivomono/v11/mFT0WbgRxKvF_Z5eQMO9gx8D1WB4m9w.woff2) format('woff2');
  unicode-range:U+0030-0039, U+0025, U+002B-002F, U+003A;
}

:root{
  color-scheme:light dark;

  /* 無彩色の階段。中間調を地にするので、明部を細かく刻む */
  --n-02:#EFF1F2; --n-05:#E6E9EA; --n-10:#DDE0E2; --n-20:#C7CBCD; --n-30:#ADB2B5;
  --n-40:#828789; --n-60:#54595B; --n-80:#2B3032; --n-95:#14181A;

  /* 彩度のある色は琥珀ひとつ（R-03）。H≈37 の帯から出ない */
  --k-70:#7A4E08; --k-55:#A06A10; --k-25:#E3DED2;

  --ink-rgb:20 24 26;
  --acc-rgb:122 78 8;

  --o-1:.06; --o-2:.12; --o-3:.25; --o-4:.45; --o-5:.72;
  --line-1:rgb(var(--ink-rgb) / var(--o-1));
  --line-2:rgb(var(--ink-rgb) / var(--o-2));
  --line-3:rgb(var(--ink-rgb) / var(--o-3));
  --acc-1:rgb(var(--acc-rgb) / var(--o-1));
  --acc-2:rgb(var(--acc-rgb) / var(--o-2));
  --acc-3:rgb(var(--acc-rgb) / var(--o-3));

  --face-1:var(--n-02); --face-2:var(--n-10); --face-3:var(--n-05);
  --ink:var(--n-95); --ink-2:var(--n-80); --ink-3:var(--n-60); --ink-4:var(--n-40);
  --acc:var(--k-70); --acc-deep:var(--k-55); --acc-pale:var(--k-25);

  --form-face:#E6E9EA; --form-face-hi:#DDE0E2;
  --form-ink:#1B1F21; --form-edge:rgb(var(--ink-rgb) / var(--o-3));
  --form-mark:#5C3A05; --form-ring:rgb(var(--acc-rgb) / var(--o-4));

  /* 欧文 → 和文 → 総称（P-04）。見出しと本文で和文を替える（3役） */
  --f-disp:'Michi Num','Syne','Klee One','Hiragino Mincho ProN',sans-serif;
  --f-text:'Michi Num','Syne','Zen Kaku Gothic Antique','Hiragino Sans',sans-serif;
  --f-num:'Chivo Mono','Zen Kaku Gothic Antique',ui-monospace,monospace;

  /* 級数6段。隣り合う段の比 1.125、どの見出しも 最小:最大＝1:1.5（P-09） */
  --fs-display:clamp(1.75rem, 1.442rem + 1.315vw, 2.625rem);   /* 28 → 42 */
  --fs-h1:clamp(1.556rem, 1.282rem + 1.168vw, 2.333rem);       /* 24.9 → 37.3 */
  --fs-h2:clamp(1.383rem, 1.139rem + 1.039vw, 2.074rem);       /* 22.1 → 33.2 */
  --fs-h3:clamp(1.229rem, 1.013rem + 0.923vw, 1.844rem);       /* 19.7 → 29.5 */
  --fs-lede:clamp(1.094rem, 0.901rem + 0.822vw, 1.641rem);     /* 17.5 → 26.3 */
  --fs-body:clamp(1rem, 0.978rem + 0.094vw, 1.0625rem);        /* 16 → 17 */
  --fs-note:clamp(0.8125rem, 0.779rem + 0.141vw, 0.906rem);    /* 13 → 14.5 */
  --fs-card:clamp(1.188rem, 0.979rem + 0.891vw, 1.781rem);   /* 19 → 28.5｜目次カードの見出し。狭い欄で語の途中が折れないよう、章見出しより小さく */
  --fs-label:0.8125rem;                                          /* 12 */

  /* 行間（P-07 / R-05）。見出し側 1.10〜1.24、本文側 1.66〜1.88 で二極化 */
  --lh-display:1.10; --lh-head:1.24; --lh-ui:1.46; --lh-list:1.66; --lh-read:1.88;

  /* 字間はサイズ連動（P-08 / R-06） */
  --ls-display:-0.030em; --ls-h1:-0.024em; --ls-h2:-0.016em; --ls-h3:-0.006em;
  --ls-body:0.016em; --ls-note:0.026em; --ls-label:0.12em;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --lift:
    0 0 0 1px rgb(var(--ink-rgb) / var(--o-2)),
    0 1px 1px rgb(var(--ink-rgb) / var(--o-1)),
    0 4px 9px -4px rgb(var(--ink-rgb) / var(--o-2)),
    0 14px 26px -12px rgb(var(--ink-rgb) / var(--o-3));
  --lift-hi:
    0 0 0 1px rgb(var(--acc-rgb) / var(--o-4)),
    0 2px 2px rgb(var(--ink-rgb) / var(--o-1)),
    0 8px 16px -6px rgb(var(--ink-rgb) / var(--o-2)),
    0 22px 38px -16px rgb(var(--ink-rgb) / var(--o-4));

  /* イージング2本＋進捗用の等倍写像1本。ブラウザまかせの既定カーブは使わない（R-04） */
  --e-1:cubic-bezier(.24,.72,.16,1);
  --e-2:cubic-bezier(.5,.02,.32,1);
  --e-lin:cubic-bezier(0,0,1,1);
  --t-color:.17s; --t-move:.32s; --t-face:.64s; --t-fade:.28s;

  --col:660px;         /* 本文カラムの上限（P-10） */
  --road:44px;         /* 左のレール（縦組みの章名だけを置く） */
  --stops:280px;       /* 右の立ち寄り先の幅 */
  --stable-lvh:1vh;
}

@media (prefers-color-scheme: dark){
  :root{
    --face-1:#1E2225; --face-2:#191D1F; --face-3:#242A2D;
    --ink:#E9EDEE; --ink-2:#CBD1D3; --ink-3:#99A0A3; --ink-4:#6C7376;
    --acc:#D8A03A; --acc-deep:#EFBC5D; --acc-pale:#33291A;
    --ink-rgb:233 237 238;
    --acc-rgb:216 160 58;
    --form-face:#242A2D; --form-face-hi:#2C3336;
    --form-ink:#E9EDEE; --form-edge:rgb(var(--ink-rgb) / var(--o-3));
    --form-mark:#EFBC5D; --form-ring:rgb(var(--acc-rgb) / var(--o-4));
  }
}

*,*::before,*::after{box-sizing:border-box}
/* scroll-behavior:smooth は入れない。
   入れると、機械がページを送って測るときに描画が追いつかず、
   「出る仕掛けが動いていない」のと同じ見え方になる（落とし穴 1）。 */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--face-2);color:var(--ink);
  font-family:var(--f-text);font-size:var(--fs-body);
  line-height:var(--lh-read);letter-spacing:var(--ls-body);
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--acc-2)}

.ph{white-space:nowrap}
.num{font-family:var(--f-num);font-weight:500;font-size:.94em;
  letter-spacing:.005em;font-variant-numeric:tabular-nums}

.t-display{font-family:var(--f-disp);font-size:var(--fs-display);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);font-weight:600;margin:0}
.t-h1{font-family:var(--f-disp);font-size:var(--fs-h1);line-height:var(--lh-head);
  letter-spacing:var(--ls-h1);font-weight:600;margin:0}
.t-h2{font-family:var(--f-disp);font-size:var(--fs-h2);line-height:var(--lh-head);
  letter-spacing:var(--ls-h2);font-weight:600;margin:0}
.t-h3{font-family:var(--f-disp);font-size:var(--fs-h3);line-height:var(--lh-head);
  letter-spacing:var(--ls-h3);font-weight:600;margin:0}
.t-lede{font-size:var(--fs-lede);line-height:var(--lh-list);letter-spacing:var(--ls-body);
  margin:0;color:var(--ink-2)}
.t-body{font-size:var(--fs-body);line-height:var(--lh-read);letter-spacing:var(--ls-body);margin:0}
.t-lab{font-size:var(--fs-label);line-height:var(--lh-ui);letter-spacing:var(--ls-label);
  color:var(--ink-3);margin:0}

/* ── 面（P-16 / A-07）。地の質感は点の格子 ─────────────────── */
.band{position:relative;isolation:isolate}
.band>*:not(.band__art){position:relative;z-index:1}
.band__art{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--line-2);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1180" height="720" viewBox="0 0 1180 720"><g fill="none" stroke="black" stroke-width="2.5"><path d="M-40 620 C 180 620 240 470 420 470 S 640 300 860 300 S 1080 150 1240 150"/><path d="M420 470 C 560 470 620 600 800 600 S 1020 560 1240 560"/><path d="M860 300 C 940 300 980 190 1080 190"/><circle cx="420" cy="470" r="16"/><circle cx="420" cy="470" r="7"/><circle cx="860" cy="300" r="16"/><circle cx="860" cy="300" r="7"/><circle cx="800" cy="600" r="16"/><circle cx="800" cy="600" r="7"/><circle cx="1080" cy="190" r="16"/><circle cx="1080" cy="190" r="7"/></g></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1180" height="720" viewBox="0 0 1180 720"><g fill="none" stroke="black" stroke-width="2.5"><path d="M-40 620 C 180 620 240 470 420 470 S 640 300 860 300 S 1080 150 1240 150"/><path d="M420 470 C 560 470 620 600 800 600 S 1020 560 1240 560"/><path d="M860 300 C 940 300 980 190 1080 190"/><circle cx="420" cy="470" r="16"/><circle cx="420" cy="470" r="7"/><circle cx="860" cy="300" r="16"/><circle cx="860" cy="300" r="7"/><circle cx="800" cy="600" r="16"/><circle cx="800" cy="600" r="7"/><circle cx="1080" cy="190" r="16"/><circle cx="1080" cy="190" r="7"/></g></svg>");
  -webkit-mask-size:1180px 720px; mask-size:1180px 720px;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:right -80px top -40px; mask-position:right -80px top -40px;}
.band--r1{
  background-color:var(--face-1);
  background-image:radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 1.6px);
  background-size:16px 16px;
}
.band--r2{
  background-color:var(--face-2);
  background-image:
    radial-gradient(85% 60% at 6% 0%, var(--acc-1), transparent 58%),
    radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 1.6px);
  background-size:auto, 22px 22px;
  box-shadow:inset 0 1px 0 var(--line-3), inset 0 -1px 0 var(--line-3);
}
.band--r3{
  background-color:var(--face-3);
  background-image:
    radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 1.6px),
    linear-gradient(112deg, var(--acc-1), transparent 46%);
  background-size:16px 16px, auto;
  box-shadow:inset 0 1px 0 var(--line-3);
}
.band__in{width:min(100% - var(--s-5)*2, 1300px);margin-inline:auto;padding-block:var(--s-8)}

/* ── ヘッダー ─────────────────────────────────── */
.hd{position:sticky;top:0;z-index:20;background:rgb(var(--ink-rgb) / var(--o-1));
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  border-bottom:1px solid var(--line-2)}
.hd__in{width:min(100% - var(--s-5)*2, 1300px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;
  gap:var(--s-5);padding-block:var(--s-3)}
.hd__mark{display:flex;align-items:center;gap:var(--s-2);text-decoration:none}
.hd__glyph{width:28px;height:28px;flex:none}
.hd__name{font-family:var(--f-disp);font-weight:600;font-size:1.0625rem;
  letter-spacing:-0.006em;line-height:var(--lh-ui)}
.hd__nav{display:flex;gap:var(--s-4);justify-content:flex-end;overflow-x:auto;
  white-space:nowrap;scrollbar-width:none}
.hd__nav::-webkit-scrollbar{display:none}
.hd__nav a{font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--ink-3);
  text-decoration:none;padding:var(--s-1) 0 var(--s-2);position:relative;
  transition:color var(--t-color) var(--e-1)}
.hd__nav a::after{content:"";position:absolute;left:50%;bottom:0;width:7px;height:7px;
  margin-left:-3.5px;border-radius:50%;background:var(--acc);
  transform:scale(0);transition:transform var(--t-move) var(--e-1)}
.hd__nav a:hover,.hd__nav a:focus-visible{color:var(--ink)}
.hd__nav a:hover::after,.hd__nav a:focus-visible::after{transform:scale(1)}
@media (max-width:719px){
  .hd__in{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .hd__nav{justify-content:flex-start;gap:var(--s-5);
    -webkit-mask-image:linear-gradient(90deg,#111 0,#111 calc(100% - 24px),transparent 100%);
    mask-image:linear-gradient(90deg,#111 0,#111 calc(100% - 24px),transparent 100%);
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;}
}
.hd__bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--acc);
  transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: scroll()){
  .hd__bar{animation:rd-progress auto both;animation-timeline:scroll(root);
    animation-timing-function:var(--e-lin)}
}
@keyframes rd-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 骨格：左の道／本文／右の立ち寄り先（R-02：非対称3列）────── */
.route{width:min(100% - var(--s-5)*2, 1300px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);padding-block:var(--s-7)}
@media (min-width:1100px){
  .route{grid-template-columns:var(--road) minmax(0,var(--col)) minmax(0,var(--stops));
    column-gap:var(--s-7);align-items:start;justify-content:start}
}
.route__road{display:none}
@media (min-width:1100px){
  .route__road{display:block;position:sticky;top:92px}
}
.route__stops{position:relative}
@media (min-width:1100px){.route__stops{position:sticky;top:92px}}

.road__v{writing-mode:vertical-rl;text-orientation:mixed;   /* 縦組み（B-02） */
  font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--ink-3);
  margin:0 0 var(--s-4);height:200px}
.road__v .num{text-combine-upright:all}

.stack>*{margin-top:var(--s-4)}
.stack>*:first-child{margin-top:0}
.stack>.t-h2{margin-top:var(--s-9)}
.stack>.t-h3{margin-top:var(--s-7)}
.stack>.cl{margin-top:var(--s-5)}
.stack>.fig{margin-top:var(--s-7)}
.stack>.note{margin-top:var(--s-6)}
.stack>.src{margin-top:var(--s-5)}
.stack>.disc{margin-top:var(--s-6)}
.stack>.tbl{margin-top:var(--s-6)}
.stack>.t-h2:first-child{margin-top:0}
@media (min-width:1100px){
  /* ★本文の左の罫が「道」そのもの。見出しの節はこの罫の上に載る */
  .stack{border-left:2px solid var(--acc-3);padding-left:var(--s-7)}
  .stack>.fig{margin-left:calc(var(--s-7) * -1 - var(--road) - var(--s-7));
    width:calc(100% + var(--s-7) + var(--road) + var(--s-7))}
}

/* ── 見出しに節を付ける（道の上の立ち寄り先）───────────────── */
.t-h2{position:relative}
@media (min-width:1100px){
  .t-h2::before{content:"";position:absolute;left:calc((var(--s-7) + 2px + 4.5px) * -1);top:.46em;
    width:11px;height:11px;border-radius:50%;background:var(--face-1);
    outline:2px solid var(--acc);outline-offset:0}
}

/* ── 箇条書き ───────────────────────────────── */
.cl{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.cl__item{position:relative;padding-left:var(--s-6);font-size:var(--fs-body);
  line-height:var(--lh-list);letter-spacing:var(--ls-body)}
.cl__item::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--acc-3);outline:1.5px solid var(--acc)}
.cl--num{counter-reset:cl}
.cl--num .cl__item{padding-left:var(--s-7)}
.cl--num .cl__item::before{counter-increment:cl;content:counter(cl);font-family:var(--f-num);
  font-size:.7rem;color:var(--acc);background:none;outline:none;border-radius:0;
  width:auto;height:auto;top:.34em;left:0;letter-spacing:.04em}

/* ── 注記・出典 ─────────────────────────────── */
.note{background:var(--face-3);padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  position:relative;border-radius:2px;
  font-size:var(--fs-note);line-height:var(--lh-list);letter-spacing:var(--ls-note);
  color:var(--ink-2)}
.note::before{content:"";position:absolute;left:var(--s-3);top:var(--s-5);
  width:9px;height:9px;border-radius:50%;background:var(--acc)}
.note__lab{display:block;font-size:var(--fs-label);letter-spacing:var(--ls-label);
  color:var(--acc);margin-bottom:var(--s-2)}
.src{font-size:var(--fs-note);line-height:var(--lh-list);letter-spacing:var(--ls-note);
  color:var(--ink-3);padding-left:var(--s-5);position:relative;margin:0}
.src::before{content:"";position:absolute;left:0;top:.7em;width:14px;height:2px;
  background:var(--acc-3)}


/* 広告の開示（S-12 / ステマ規制）。出典より1段はっきり見せる */
.disc{font-size:var(--fs-note);line-height:var(--lh-list);letter-spacing:var(--ls-note);
  color:var(--ink-2);padding:var(--s-3) var(--s-4) var(--s-3) var(--s-6);margin:0;
  position:relative;background:var(--acc-1);border-radius:2px}
.disc::before{content:"";position:absolute;left:var(--s-3);top:calc(var(--s-3) + .34em);
  width:9px;height:9px;border-radius:50%;background:var(--acc)}

/* ── 図 ────────────────────────────────── */
.fig{margin:0}
.fig__box{background:var(--face-1);padding:var(--s-5) var(--s-4);overflow-x:auto;
  border-radius:3px;border:1px solid var(--line-2);border-left:3px solid var(--acc)}
@media (max-width:1099px){
  .fig__box{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#111 16px,#111 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#111 16px,#111 calc(100% - 16px),transparent 100%);
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;}
}
.zu{width:100%;min-width:680px;height:auto}  /* 図は 1:1 で描く（縮めない） */
.zu__s,.zu__lab,.zu__ax{fill:var(--ink-3);font-family:var(--f-text);letter-spacing:.02em}
.zu__lab{fill:var(--ink);font-weight:700}
.zu__num{fill:var(--acc);font-family:var(--f-num);font-weight:500}
.zu__non{fill:var(--face-1);font-family:var(--f-num);font-weight:500}
.zu__ax{fill:var(--ink-4);font-family:var(--f-num)}
.zu__big{fill:var(--acc);font-family:var(--f-num);font-weight:500;letter-spacing:-.02em}
.fig__cap{font-size:var(--fs-note);line-height:var(--lh-ui);letter-spacing:var(--ls-note);
  color:var(--ink);font-weight:700;margin:var(--s-3) 0 0}
.fig__note{font-size:var(--fs-label);line-height:var(--lh-list);letter-spacing:var(--ls-note);
  color:var(--ink-3);margin:var(--s-2) 0 0}

/* ── 表 ────────────────────────────────── */
.tbl{overflow-x:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#111 12px,#111 calc(100% - 12px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#111 12px,#111 calc(100% - 12px),transparent 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;}
.tbl table{border-collapse:collapse;width:100%;min-width:440px;font-size:var(--fs-note);
  line-height:var(--lh-ui)}
.tbl th,.tbl td{text-align:left;padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl th{font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--ink-3);
  font-weight:400;background:var(--face-3)}
.tbl td:first-child{white-space:nowrap;color:var(--ink-2)}

/* ── 広告の枠（S-11）と開示（S-12）──────────────────── */
.ad{margin:0}
.ad__disc{font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--acc);
  margin:0 0 var(--s-2);display:flex;align-items:center;gap:var(--s-2)}
.ad__disc::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none}
.ad__box{background:var(--face-3);padding:var(--s-6) var(--s-5);border-radius:3px;
  outline:1px solid var(--line-2);outline-offset:-1px}   /* 影は押せるものだけ（A-06） */
.ad__t{font-size:var(--fs-note);line-height:var(--lh-list);color:var(--ink-2);margin:0}
.ad__t+.ad__t{margin-top:var(--s-2)}

/* ── 立ち寄り先（右の列）─────────────────────────── */
.stops{background:var(--face-3);padding:var(--s-5);border-radius:3px;
  outline:1px solid var(--line-2);outline-offset:-1px}   /* 影は押せるものだけ（A-06） */
.stops__t{font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--acc);margin:0}
.stops__l{list-style:none;margin:var(--s-4) 0 0;padding:0 0 0 var(--s-4);position:relative}
.stops__l::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;
  background:var(--acc-3)}
.stops__l li{font-size:var(--fs-label);line-height:var(--lh-list);color:var(--ink-2);
  position:relative;padding:0 0 var(--s-3) var(--s-3)}
.stops__l li:last-child{padding-bottom:0}
.stops__l li::before{content:"";position:absolute;left:-4px;top:.5em;width:9px;height:9px;
  border-radius:50%;background:var(--face-3);outline:2px solid var(--acc)}
.stops__src{list-style:none;margin:var(--s-5) 0 0;padding:var(--s-4) 0 0;
  border-top:1px solid var(--line-2);display:grid;gap:var(--s-3)}
.stops__src li{font-size:var(--fs-label);line-height:var(--lh-list);color:var(--ink-3)}

/* ── 見出し図・カード ───────────────────────────── */
.hero{width:min(100% - var(--s-5)*2, 1300px);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--s-6);padding-block:var(--s-8);align-items:center}
@media (min-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:var(--s-8)}
}
.hero__t{max-width:660px}
.hero__art svg{width:100%;height:auto}
.hero__t .t-lede{margin-top:var(--s-5)}
.kicker{font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--acc);
  margin:0 0 var(--s-4);display:flex;align-items:center;gap:var(--s-3)}
.kicker::before{content:"";width:11px;height:11px;border-radius:50%;
  background:var(--face-1);outline:2px solid var(--acc);flex:none}

.idx{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
@media (min-width:760px){.idx{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}}
@media (min-width:1180px){
  .idx{grid-template-columns:minmax(0,1.24fr) minmax(0,1fr) minmax(0,1fr)}
}
.card{display:block;text-decoration:none;background:var(--face-1);padding:var(--s-5);
  border-radius:4px;box-shadow:var(--lift);
  transition:transform var(--t-move) var(--e-1), box-shadow var(--t-move) var(--e-1)}
.card:hover,.card:focus-visible{transform:translateY(-3px);box-shadow:var(--lift-hi)}
.card__no{font-family:var(--f-num);font-size:var(--fs-label);color:var(--acc);
  letter-spacing:.06em;margin:0}
.card__t{font-family:var(--f-disp);font-size:var(--fs-card);line-height:var(--lh-head);
  letter-spacing:var(--ls-h3);font-weight:600;margin:var(--s-3) 0 0}
.card__zu{margin:var(--s-4) 0 0}
.card__zu svg{width:100%;height:auto}
.card__d{font-size:var(--fs-note);line-height:var(--lh-list);color:var(--ink-3);margin:var(--s-3) 0 0}
.card__src{font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--ink-4);
  margin:var(--s-4) 0 0}

.pager{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
@media (min-width:760px){.pager{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pager__n{font-family:var(--f-num);font-size:var(--fs-label);color:var(--ink-3);
  letter-spacing:.06em;margin:0 0 var(--s-3)}

.ft{background:var(--face-3);border-top:1px solid var(--line-2)}
.ft__in{width:min(100% - var(--s-5)*2, 1300px);margin-inline:auto;padding-block:var(--s-7);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
@media (min-width:860px){.ft__in{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}}
.ft__t{font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--ink-3);margin:0}
.ft__l{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-2)}
.ft__l a{font-size:var(--fs-note);color:var(--ink-2);text-decoration:none;
  transition:color var(--t-color) var(--e-1)}
.ft__l a:hover,.ft__l a:focus-visible{color:var(--acc)}
.ft__note{font-size:var(--fs-label);line-height:var(--lh-list);color:var(--ink-3);margin:0}

/* ── 動きの語彙は3つだけ（P-12）。全部「道を進む」の変奏 ─────────
   ① 道が引かれる  .road__line   stroke-dashoffset
   ② 節が灯る      .node         scale ＋ 不透明度
   ③ 枝が開く      [data-rv]     道の側から横へ 16px 送る
                                  （回転にすると、背の高い箱ほど横に張り出してしまう）
   隠すのは JavaScript が動いたときだけ（html.rv）。素の状態では何も隠さない。 */
html.rv [data-rv]{opacity:.001;transform:translateX(-16px);transform-origin:0 0;
  transition:opacity var(--t-fade) var(--e-1), transform var(--t-face) var(--e-1)}
html.rv [data-rv="in"]{opacity:1;transform:none}
html.rv [data-rv] .road__line{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset var(--t-face) var(--e-2)}
html.rv [data-rv="in"] .road__line{stroke-dashoffset:0}
html.rv [data-rv] .node{opacity:.001;transform:scale(.3);transform-origin:center;
  transform-box:fill-box;
  transition:opacity var(--t-fade) var(--e-1), transform var(--t-face) var(--e-1)}
html.rv [data-rv="in"] .node{opacity:1;transform:none}

/* 1つずつ、10〜20msの刻みでずらす（B-07の考え方） */
html.rv .stg>*:nth-child(2){transition-delay:.016s}
html.rv .stg>*:nth-child(3){transition-delay:.034s}
html.rv .stg>*:nth-child(4){transition-delay:.05s}
html.rv .stg>*:nth-child(5){transition-delay:.072s}
html.rv .stg>*:nth-child(6){transition-delay:.088s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001s !important;animation-duration:.001s !important;
    animation-iteration-count:1 !important}
  html.rv [data-rv]{opacity:1 !important;transform:none !important}
  html.rv [data-rv] .road__line{stroke-dashoffset:0 !important}
  html.rv [data-rv] .node{opacity:1 !important;transform:none !important}
  .hd__bar{transform:scaleX(1)}
}

@media print{
  .hd,.ft,.ad,.route__road,.route__stops{display:none}
  body{background:none;color:var(--n-95)}
  .band,.band--r1,.band--r2,.band--r3{background:none}
  .route{display:block}
  .fig,.note,.card{break-inside:avoid;page-break-inside:avoid}
  .card{box-shadow:none;border:1px solid var(--n-40)}
}