@charset "utf-8";
/* ============================================================================
   医療脱毛カウンセリング手帖 ／ 案1
   ----------------------------------------------------------------------------
   既出台帳のカード（2026-08-28 引き当て）
     ①配色      C-6  ベージュ紙面＋藤   地 #F3F2EF ／ 文字 #1D1B19 ／ 藤 #6C5FA0（H252 S25.4% L50.0%）
     ②書体      Zen Old Mincho（和文オールド明朝）× Outfit（ジオメトリックサンセリフ）× Roboto Mono（等幅）
     ③レイアウト L-2  28カラムグリッド（外殻は 1fr / 1104px / 1fr の非対称3値）
     ④動きの語彙 M-13 焦点が合う（blur→0）／ M-17 余白が開く（padding の遷移）／ M-19 view() の区間進捗
     ⑤図解      G-7  座標線図（線の太さで主役を決める。塗らない）
     ⑥FVの型    V-7  経過の線型（当日の流れを1本の線で示し、理念1文を添える）

   イージングは実測から取った2本（2026-08-28 計測）
     --ease-1 cubic-bezier(.18,.06,.23,1)  … SHIFTBRAIN で294箇所に効いていた主カーブ
     --ease-2 cubic-bezier(.16,1,.3,1)     … Cuberto の抜けカーブ（50箇所）
   時間帯も実測に合わせる（色 .16s ／ 移動 .34s ／ 面 .72s）

   外部読み込みは Google Fonts の1本だけ（宮本さんの指示による R-21 の緩和）。
   ========================================================================== */

/* ── 数字だけを欧文へ（P-05／R-12）。和文書体に数字を描かせない ───────────── */
@font-face{
  font-family:'TechoNum';
  src:local('Outfit'),local('Outfit-Regular'),local('Helvetica Neue'),local('Arial');
  unicode-range:U+0030-0039,U+002C,U+002E,U+0025,U+00A5,U+FF05;
  font-display:swap;
}

:root{
  /* 無彩色5段（P-01／R-20）。暗部を細かく、明部を粗く */
  --n-1:#1D1B19;  /* 本文 */
  --n-2:#35322E;  /* 見出しの補助 */
  --n-3:#5C5751;  /* 説明 */
  --n-4:#8A847C;  /* 注記 */
  --n-5:#B6B0A7;  /* 罫のかわりの面 */

  /* 面（章＝背景色の切り替え／P-16） */
  --face-1:#F3F2EF;
  --face-2:#EAE8E3;
  --face-3:#E3E0D9;
  --face-ink:#221F1C;   /* 反転の面。純黒ではない */

  /* 彩度色は藤 1色相だけ（R-03）。H252±6 の帯から出ない */
  --accent:#6C5FA0;
  --accent-deep:#4A3F73;
  --accent-tint:#F0EEF4;   /* 同一色相の弱ペア。S=21.4%＝R-03の彩度色に数えない */

  /* 操作できるものの色は別名前空間（P-19） */
  --on-ink-1:#F3F2EF; --on-ink-3:#B6B0A7;   /* 反転した面の上で使う色 */
  --form-face:#4A3F73;
  --form-ink:#F6F5F2;
  --form-edge:#6C5FA0;
  --form-face-hover:#3B3260;

  /* 透明度は6段だけ（P-02）。生の rgba を書かない */
  --a-04:.04; --a-07:.07; --a-12:.12; --a-20:.20; --a-34:.34; --a-56:.56;
  --ink-04:rgb(29 27 25 / var(--a-04));
  --ink-07:rgb(29 27 25 / var(--a-07));
  --ink-12:rgb(29 27 25 / var(--a-12));
  --ink-20:rgb(29 27 25 / var(--a-20));
  --ink-34:rgb(29 27 25 / var(--a-34));
  --acc-12:rgb(108 95 160 / var(--a-12));
  --acc-20:rgb(108 95 160 / var(--a-20));
  --acc-34:rgb(108 95 160 / var(--a-34));

  /* 影は4段＋輪郭（P-13）。押せるものにしか当てない（A-06） */
  --lift:
    0 0 0 1px var(--ink-12),
    0 1px 1px var(--ink-07),
    0 4px 10px var(--ink-07),
    0 14px 28px var(--ink-04);
  --lift-up:
    0 0 0 1px var(--acc-34),
    0 2px 3px var(--ink-07),
    0 8px 18px var(--ink-12),
    0 22px 44px var(--ink-07);

  /* 時間とカーブ（P-11）。カーブは2本だけ */
  --ease-1:cubic-bezier(.18,.06,.23,1);
  --ease-2:cubic-bezier(.16,1,.3,1);
  --t-color:.16s;
  --t-move:.34s;
  --t-face:.72s;

  /* 画面高さの吸収（P-14／R-09） */
  --stable-lvh:1vh;

  /* 余白の刻みは 4px を基本に、8の段で鳴らす */
  --sp-1:8px;  --sp-2:12px; --sp-3:16px; --sp-4:20px;
  --sp-5:28px; --sp-6:40px; --sp-7:64px; --sp-8:96px; --sp-9:136px;

  /* 本文カラム（P-10）。624px は見本の実測値をそのまま出発点にした */
  --col:min(100%,624px);

  --font-ja:'Zen Old Mincho';
  --font-la:'Outfit';
  --font-num:'Roboto Mono';
}
@supports (height:1lvh){ :root{ --stable-lvh:1lvh; } }

@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --n-1:#EDEAE4; --n-2:#D6D1C8; --n-3:#ABA49A; --n-4:#7E786F; --n-5:#4B4741;
    --face-1:#191715; --face-2:#211E1B; --face-3:#2A2622; --face-ink:#F3F2EF;
    --accent:#B3A6E4; --accent-deep:#CFC6F2; --accent-tint:#2E2842;
    --form-face:#B3A6E4; --form-ink:#1C1926; --form-edge:#CFC6F2; --form-face-hover:#CFC6F2;
    --on-ink-1:#1D1B19; --on-ink-3:#5C5751;
    --ink-04:rgb(237 234 228 / var(--a-04));
    --ink-07:rgb(237 234 228 / var(--a-07));
    --ink-12:rgb(237 234 228 / var(--a-12));
    --ink-20:rgb(237 234 228 / var(--a-20));
    --ink-34:rgb(237 234 228 / var(--a-34));
    --acc-12:rgb(179 166 228 / var(--a-12));
    --acc-20:rgb(179 166 228 / var(--a-20));
    --acc-34:rgb(179 166 228 / var(--a-34));
  }
}
:root[data-theme=dark]{
  --n-1:#EDEAE4; --n-2:#D6D1C8; --n-3:#ABA49A; --n-4:#7E786F; --n-5:#4B4741;
  --face-1:#191715; --face-2:#211E1B; --face-3:#2A2622; --face-ink:#F3F2EF;
  --accent:#B3A6E4; --accent-deep:#CFC6F2; --accent-tint:#2E2842;
  --form-face:#B3A6E4; --form-ink:#1C1926; --form-edge:#CFC6F2; --form-face-hover:#CFC6F2;
  --on-ink-1:#1D1B19; --on-ink-3:#5C5751;
  --ink-04:rgb(237 234 228 / var(--a-04));
  --ink-07:rgb(237 234 228 / var(--a-07));
  --ink-12:rgb(237 234 228 / var(--a-12));
  --ink-20:rgb(237 234 228 / var(--a-20));
  --ink-34:rgb(237 234 228 / var(--a-34));
  --acc-12:rgb(179 166 228 / var(--a-12));
  --acc-20:rgb(179 166 228 / var(--a-20));
  --acc-34:rgb(179 166 228 / var(--a-34));
}

/* ── 土台 ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
/* scroll-behavior:smooth は使わない。
   すべてのプログラム側のスクロールを横取りしてしまい、
   目次のリンクや「ページ内検索」の飛び先が追いつかなくなる。
   実測でも、1回のスクロール指示に対して 272px しか進まなかった。 */
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--face-1);
  color:var(--n-1);
  font-family:'TechoNum',var(--font-la),var(--font-ja),serif;  /* 欧文→和文→総称（P-04） */
  font-feature-settings:'palt' 1;                              /* 約物（P-06） */
  font-size:clamp(15.5px,2.7vw,17px);
  line-height:1.88;                                            /* 読み物の行間（P-07 第3段） */
  letter-spacing:.022em;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  padding:var(--sp-2) var(--sp-4);background:var(--form-face);color:var(--form-ink);
  border-radius:4px;box-shadow:var(--lift);
}
.skip:focus{left:var(--sp-3);top:var(--sp-3);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* ── 外殻。1fr / 1104px / 1fr の非対称3値（R-02） ───────────────── */
.shell{
  display:grid;
  grid-template-columns:minmax(16px,1fr) minmax(0,1104px) minmax(16px,1fr);
}
.shell > *{grid-column:2;}
.gx{
  display:grid;
  grid-template-columns:repeat(28,minmax(0,1fr));
  column-gap:clamp(8px,1.1vw,16px);
}

/* ── 文字の階段。clamp の最小:最大 は全見出し 1:1.5（P-09） ────────── */
.t-display{
  font-size:clamp(38px,8.4vw,57px); line-height:1.06;
  letter-spacing:-.036em; font-weight:900; margin:0;
  font-family:'TechoNum',var(--font-la),var(--font-ja),var(--font-la),serif;
}
.t-h1{
  font-size:clamp(30px,6.4vw,45px); line-height:1.14;
  letter-spacing:-.026em; font-weight:700; margin:0;
  font-family:'TechoNum',var(--font-la),var(--font-ja),var(--font-la),serif;
}
.t-h2{
  font-size:clamp(23px,4.7vw,34.5px); line-height:1.26;
  letter-spacing:-.012em; font-weight:700; margin:0;
  font-family:'TechoNum',var(--font-la),var(--font-ja),var(--font-la),serif;
}
.t-h3{
  font-size:clamp(17px,3.4vw,25.5px); line-height:1.42;
  letter-spacing:.004em; font-weight:700; margin:0;
  font-family:'TechoNum',var(--font-la),var(--font-ja),var(--font-la),serif;
}
.t-lede{
  font-size:clamp(16px,3.3vw,24px); line-height:1.72;
  letter-spacing:.014em; font-weight:400; margin:0; color:var(--n-2);
  font-family:'TechoNum',var(--font-la),var(--font-ja),var(--font-la),serif;
}
.t-body{margin:0;line-height:1.88;}
.t-lab{
  font-size:13px; line-height:1.42; letter-spacing:.18em;
  font-family:var(--font-la),var(--font-ja),sans-serif;
  font-weight:600; text-transform:uppercase; color:var(--n-3); margin:0;
}
.t-lab-ja{
  font-size:13px; line-height:1.46; letter-spacing:.12em;
  font-weight:700; color:var(--n-3); margin:0;
}
.num{
  font-family:var(--font-num),var(--font-la),monospace;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.012em; font-weight:500;
}
.wr{white-space:nowrap;}          /* 文節ロック（P-21／R-19） */
.mk{
  font-style:normal; font-weight:700;
  background:linear-gradient(to top,var(--acc-20) 0 .42em,transparent .42em);
  background-size:100% 100%;
}

/* ── 章＝面の切り替え（P-16）。地には必ず質感を1枚置く（A-07） ───────── */
.band{padding-block:var(--sp-8);position:relative;}
.band--f1{
  background-color:var(--face-1);
  background-image:
    repeating-linear-gradient(to bottom,var(--ink-04) 0 1px,transparent 1px 40px),
    radial-gradient(120% 90% at 88% 0%,var(--acc-12) 0%,transparent 58%);
}
.band--f2{
  background-color:var(--face-2);
  background-image:
    repeating-linear-gradient(to right,var(--ink-04) 0 1px,transparent 1px 32px),
    linear-gradient(to bottom,var(--ink-04),transparent 24%);
}
.band--f3{
  background-color:var(--face-3);
  background-image:
    repeating-linear-gradient(115deg,var(--ink-04) 0 1px,transparent 1px 9px),
    radial-gradient(90% 70% at 10% 100%,var(--acc-12) 0%,transparent 62%);
}
.band--ink{
  background-color:var(--face-ink);
  background-image:
    repeating-linear-gradient(to bottom,rgb(243 242 239 / var(--a-04)) 0 1px,transparent 1px 44px),
    radial-gradient(100% 80% at 78% 12%,rgb(108 95 160 / var(--a-34)) 0%,transparent 60%);
  color:var(--face-1);
}
.band--ink .t-body,.band--ink .t-lede,.band--ink .t-h2{color:var(--on-ink-1);}
.band--ink .t-lab,.band--ink .note{color:var(--on-ink-3);}

/* ── 縦のリズム。実際に鳴る間隔を6種類にする（A-03） ───────────────── */
.band > * + *{margin-top:var(--sp-4);}
.band > * + .t-h2{margin-top:var(--sp-7);}
.band > .t-h2 + *{margin-top:var(--sp-3);}
.band > * + .fig{margin-top:var(--sp-6);}
.band > * + .cl{margin-top:var(--sp-5);}
.band > * + .note{margin-top:var(--sp-1);}
.band > * + .callout{margin-top:var(--sp-6);}
.stack > * + *{margin-top:var(--sp-4);}
.stack > * + .t-h3{margin-top:var(--sp-5);}
.stack > .t-h3 + *{margin-top:var(--sp-2);}
.stack > * + .note{margin-top:var(--sp-1);}
.stack > * + .cl{margin-top:var(--sp-5);}
.stack > * + .fig{margin-top:var(--sp-6);}
.stack > * + .t-h2{margin-top:var(--sp-7);}
.stack > .t-h2 + *{margin-top:var(--sp-3);}
.stack > * + .callout{margin-top:var(--sp-6);}
.stack > * + .ad{margin-top:var(--sp-7);}
.stack > .pr + *{margin-top:var(--sp-2);}
.stack > * + .cards{margin-top:var(--sp-5);}
.prose{position:relative;}
.wide{grid-column:1 / -1;}
@media (min-width:900px){ .wide{grid-column:2 / 28;} }
.fill{
  display:inline-block;padding:1px 8px;
  background:var(--accent-tint);color:var(--accent-deep);
  font-size:13px;font-weight:700;letter-spacing:.06em;
  border-bottom:2px solid var(--accent);
}
.arthd{padding-bottom:var(--sp-6);}
.arthd + .band{padding-top:var(--sp-6);}

/* ── 本文の幅（P-10） ───────────────────────────────────── */
.col{max-width:var(--col);}
.prose{grid-column:1 / -1;max-width:var(--col);}
.rail{grid-column:1 / -1;}
@media (min-width:900px){
  .prose{grid-column:2 / 21;}
  .rail{grid-column:22 / 29;position:sticky;top:var(--sp-7);align-self:start;}
}

/* ── 箇条書き。丸ポチを使わず、目盛りで示す ───────────────────── */
.cl{list-style:none;margin:0;padding:0;display:grid;row-gap:var(--sp-2);}
.cl__item{position:relative;padding-left:26px;}
.cl__item::before{
  content:'';position:absolute;left:0;top:.72em;width:14px;height:2px;
  background:var(--accent);
}
.cl--num{counter-reset:cl;}
.cl--num > .cl__item{padding-left:38px;}
.cl--num > .cl__item::before{
  counter-increment:cl;content:counter(cl,decimal-leading-zero);
  top:0;width:auto;height:auto;background:none;color:var(--accent);
  font-family:var(--font-num),monospace;font-size:13px;font-weight:500;letter-spacing:0;
  line-height:1.9;
}
.cl__item .t-body{line-height:1.78;}

/* ── 注記・出典（B-12。小さくして薄くしない） ─────────────────── */
.note{
  margin:0;font-size:13px;line-height:1.72;color:var(--n-3);letter-spacing:.03em;
}
.note .num{font-size:12.5px;}
.callout{
  padding:var(--sp-5);
  background-color:var(--accent-tint);
  background-image:repeating-linear-gradient(90deg,var(--ink-07) 0 1px,transparent 1px 7px);
  border-left:3px solid var(--accent);
}
.callout .t-body{color:var(--n-1);}
.callout > * + *{margin-top:var(--sp-2);}

/* ── 表 ─────────────────────────────────────────────── */
.tblwrap{
  overflow-x:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#161412 22px,#161412 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#161412 22px,#161412 calc(100% - 22px),transparent 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.tbl{border-collapse:collapse;width:100%;min-width:460px;font-size:14.5px;line-height:1.62;}
.tbl th,.tbl td{padding:var(--sp-2) var(--sp-3);text-align:left;vertical-align:top;}
.tbl thead th{
  font-size:13px;letter-spacing:.1em;color:var(--n-3);font-weight:700;
  background:var(--face-3);
}
.tbl tbody tr + tr th,.tbl tbody tr + tr td{border-top:1px solid var(--ink-12);}
.tbl tbody th{font-weight:700;color:var(--n-2);white-space:nowrap;}
.tbl .num{font-size:14.5px;}

/* ── 図（G-7 座標線図。線の太さで主役を決める。塗りで面積を作らない） ── */
.fig{margin:0;}
.fig__box{
  padding:var(--sp-5) var(--sp-4);
  background-color:var(--face-1);
  background-image:
    repeating-linear-gradient(to right,var(--ink-04) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(to bottom,var(--ink-04) 0 1px,transparent 1px 24px);
  border-top:2px solid var(--n-1);
}
.band--f1 .fig__box{background-color:var(--face-2);}
.fig__cap{
  margin:var(--sp-2) 0 0;font-size:14px;line-height:1.62;font-weight:700;color:var(--n-2);
  letter-spacing:.02em;
}
.fig__note{margin:var(--sp-1) 0 0;font-size:13px;line-height:1.7;color:var(--n-3);letter-spacing:.03em;}
/* 図は viewBox 340 で描いてある。1440px では 390px で止めて倍率 1.15 に、
   375px では箱の余白を詰めて描画幅 327px＝倍率 0.96 にする。
   こうしないと、viewBox の中の 15px が実機で 9px まで縮む（実際に縮んでいた）。 */
.fig svg{width:100%;max-width:390px;margin-inline:auto;height:auto;overflow:visible;}
.fig .ln-thin{stroke:var(--n-5);stroke-width:1;fill:none;}
.fig .ln-mid{stroke:var(--n-3);stroke-width:1.75;fill:none;}
.fig .ln-lead{stroke:var(--accent);stroke-width:3.5;fill:none;stroke-linecap:round;}
.fig .dot{fill:var(--face-1);stroke:var(--accent);stroke-width:2.5;}
.fig .dot-mute{fill:var(--face-1);stroke:var(--n-4);stroke-width:1.75;}
.fig .fill-acc{fill:var(--accent);}
.fig .fill-mute{fill:var(--n-4);}
.fig .tx{fill:var(--n-2);font-size:15px;font-family:'TechoNum',var(--font-la),var(--font-ja),sans-serif;letter-spacing:.02em;}
.fig .tx-s{fill:var(--n-3);font-size:15px;font-family:'TechoNum',var(--font-la),var(--font-ja),sans-serif;letter-spacing:.04em;}
.fig .tx-n{fill:var(--n-1);font-size:16px;font-family:var(--font-num),monospace;font-weight:500;}
.fig .tx-lead{fill:var(--accent-deep);font-size:15px;font-weight:700;font-family:'TechoNum',var(--font-la),var(--font-ja),sans-serif;}

/* ── ヘッダ ────────────────────────────────────────────── */
.hd{
  position:sticky;top:0;z-index:20;
  background-color:var(--face-1);
  background-image:linear-gradient(to bottom,var(--face-1),var(--face-1));
  border-bottom:1px solid var(--ink-12);
  backdrop-filter:saturate(1.2);
}
.hd__in{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:center;gap:var(--sp-3);padding-block:var(--sp-2);
}
.hd__brand{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--n-1);
}
.hd__mark{width:26px;height:26px;flex:none;}
.hd__name{font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1.3;}
.hd__nav{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);justify-content:flex-end;}
.hd__nav a{
  font-size:13px;color:var(--n-3);text-decoration:none;letter-spacing:.05em;line-height:1.42;white-space:nowrap;
  padding:2px 0;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size var(--t-move) var(--ease-2),color var(--t-color) var(--ease-1);
}
.hd__nav a:hover,.hd__nav a:focus-visible{color:var(--n-1);background-size:100% 1px;}

/* ── 狭い画面のヘッダー ────────────────────────────────
   375px では、ナビが4〜5行に折り返して貼り付いたまま画面の3分の1を占めていた。
   「ブランドの行」＋「1行の横に流れるナビ」に畳む。
   端はマスクで溶かして「まだ右に続く」を示す（P-15）。 */
@media (max-width:699px){
  .hd__in{grid-template-columns:minmax(0,1fr);row-gap:6px;padding-block:8px;}
  .hd__nav{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    gap:0 var(--sp-4);
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right,#1D1B19 0,#1D1B19 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to right,#1D1B19 0,#1D1B19 calc(100% - 28px),transparent 100%);
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  }
  .hd__nav::-webkit-scrollbar{display:none;}
  .hd__nav a{flex:none;}
  .hd__name{font-size:14px;}
}

/* ── FV（V-7 経過の線型。CTAも煽りも置かない／R-13・P-18） ──────────── */
.fv{
  padding-top:clamp(40px,10vw,88px);
  padding-bottom:clamp(40px,9vw,80px);
  min-height:calc(74 * var(--stable-lvh));
}
.fv__grid{align-items:start;row-gap:var(--sp-6);}
.fv__lead{grid-column:1 / -1;}
.fv__art{grid-column:1 / -1;}
@media (min-width:900px){
  .fv__lead{grid-column:1 / 19;}
  .fv__art{grid-column:20 / 29;}
}
.fv__lab{margin:0 0 var(--sp-3);}
.fv__h{margin:0;}
.fv__sub{margin:var(--sp-4) 0 0;max-width:34em;}
.fv__meta{
  margin:var(--sp-5) 0 0;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
}
.fv__meta div{font-size:13px;line-height:1.5;color:var(--n-3);letter-spacing:.05em;}
.fv__meta b{display:block;font-weight:700;color:var(--n-1);font-size:14px;}

/* ── リンクのカード（押せるものにだけ影／A-06） ────────────────── */
.cards{display:grid;gap:var(--sp-3);grid-template-columns:1fr;}
@media (min-width:680px){ .cards{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .cards--3{grid-template-columns:1.24fr 1fr 1fr;} }
.card{
  display:grid;gap:var(--sp-2);align-content:start;
  padding:var(--sp-5) var(--sp-4);
  text-decoration:none;color:inherit;border-radius:3px;
  background-color:var(--face-1);
  background-image:linear-gradient(to bottom,var(--acc-12),transparent 34%);
  box-shadow:var(--lift);
  /* [data-rv] の transition と詳細度が同じになるように .js [data-rv].card でも書く。
   同じでないと出現側の宣言が丸ごと勝ち、余白と影の遷移が 0s に飛ぶ（実測で飛んでいた）。 */
  transition:box-shadow var(--t-move) var(--ease-1),
             transform var(--t-move) var(--ease-1),
             padding var(--t-move) var(--ease-1);   /* M-17 余白が開く */
}
.card:hover,.card:focus-visible{
  box-shadow:var(--lift-up);transform:translateY(-2px);
  padding-top:calc(var(--sp-5) + 4px);padding-bottom:calc(var(--sp-5) - 4px);
}
.card__no{
  font-family:var(--font-num),monospace;font-size:13px;letter-spacing:.06em;
  color:var(--accent);font-weight:500;
}
.card__t{font-size:clamp(16.5px,2.2vw,19px);line-height:1.5;font-weight:700;letter-spacing:.01em;}
.card__d{font-size:13.5px;line-height:1.74;color:var(--n-3);}
.card__go{
  font-size:13px;letter-spacing:.1em;color:var(--accent-deep);font-weight:700;
  font-family:var(--font-la),sans-serif;
}


/* カードは出現もホバーも、この1宣言でまとめて受ける（P-11） */
.js [data-rv].card{transition:opacity var(--t-color) var(--ease-1),filter var(--t-face) var(--ease-1),
             box-shadow var(--t-move) var(--ease-1),
             transform var(--t-move) var(--ease-1),
             padding var(--t-move) var(--ease-1);}

/* ── 広告枠（S-11）と開示（S-12） ──────────────────────────── */
.pr{
  display:block;font-size:13px;line-height:1.6;letter-spacing:.09em;
  color:var(--n-2);font-weight:700;
  padding:6px 10px;background:var(--accent-tint);
  border-left:3px solid var(--accent);
}
.ad{
  padding:var(--sp-5) var(--sp-4);
  background-color:var(--face-2);
  background-image:repeating-linear-gradient(135deg,var(--ink-04) 0 1px,transparent 1px 8px);
  border-top:2px solid var(--n-5);border-bottom:2px solid var(--n-5);
}
.ad > * + *{margin-top:var(--sp-2);}
.ad__t{font-size:14px;font-weight:700;line-height:1.5;margin:0;letter-spacing:.02em;}
.ad__b{margin:0;font-size:13.5px;line-height:1.74;color:var(--n-3);}

/* ── 目次（記事ページの右柱） ─────────────────────────────── */
.toc{
  padding:var(--sp-4);
  background-color:var(--face-2);
  background-image:linear-gradient(to bottom,var(--acc-12),transparent 40%);
}
.toc__h{margin:0 0 var(--sp-2);}
.toc__l{list-style:none;margin:0;padding:0;display:grid;row-gap:var(--sp-1);}
.toc__l a{
  font-size:13px;line-height:1.6;color:var(--n-3);text-decoration:none;
  display:block;padding-left:14px;position:relative;
  transition:color var(--t-color) var(--ease-1);
}
.toc__l a::before{
  content:'';position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--n-5);
  transition:width var(--t-move) var(--ease-2),background-color var(--t-color) var(--ease-1);
}
.toc__l a:hover,.toc__l a:focus-visible{color:var(--n-1);}
.toc__l a:hover::before,.toc__l a:focus-visible::before{width:11px;background-color:var(--accent);}

/* ── M-19 view() の区間で、図の主役の線が引かれる ──────────────
   その図が画面を通り過ぎるあいだだけ進む。ページ全体の進捗ではない。
   未対応の環境では、最初から引かれた状態で出る（壊れ方を安全にする）。 */
.fig .ln-lead{stroke-dasharray:1400;stroke-dashoffset:0;}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fig .ln-lead{
      /* 進捗の等倍写像。R-04 はキーワードの linear を許さないので、
         P-11 の例外どおり cubic-bezier(0,0,1,1) で書く（見え方は同じ）。 */
      animation:draw-lead cubic-bezier(0,0,1,1) both;
      animation-timeline:view();
      animation-range:entry 24% cover 58%;
    }
  }
}
@keyframes draw-lead{ from{stroke-dashoffset:1400;} to{stroke-dashoffset:0;} }

/* ── 出てくる仕掛け（M-13 焦点が合う）。opacity だけにしない（A-05） ── */
.js [data-rv]{
  opacity:0;
  filter:blur(9px);
  transform:translateY(14px);
  /* 変化量で時間を出し分ける（P-11）。
     不透明度はいちばん小さい変化なので短く、ぼけと移動は面の変化なので長く。 */
  transition:
    opacity var(--t-color) var(--ease-1),
    filter var(--t-face) var(--ease-1),
    transform var(--t-face) var(--ease-2);
}
.js [data-rv][data-rv=in]{opacity:1;filter:blur(0);transform:none;}

/* ── フッタ ────────────────────────────────────────────── */
.ft{
  padding-block:var(--sp-7);
  background-color:var(--face-3);
  background-image:repeating-linear-gradient(to bottom,var(--ink-04) 0 1px,transparent 1px 36px);
  border-top:1px solid var(--ink-12);
}
.ft__grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr;}
@media (min-width:760px){ .ft__grid{grid-template-columns:1.45fr 1fr 1fr;} }
.ft a{color:var(--n-2);text-decoration:none;font-size:13.5px;line-height:1.9;}
.ft a:hover,.ft a:focus-visible{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;}
.ft__l{list-style:none;margin:0;padding:0;}
.ft__c{margin:var(--sp-5) 0 0;font-size:13px;line-height:1.7;color:var(--n-3);letter-spacing:.04em;}

/* ── 押せるもの ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:3px;text-decoration:none;
  background:var(--form-face);color:var(--form-ink);
  font-size:14px;font-weight:700;letter-spacing:.05em;line-height:1.42;
  box-shadow:var(--lift);
  transition:background-color var(--t-color) var(--ease-1),
             box-shadow var(--t-move) var(--ease-1),
             transform var(--t-move) var(--ease-1);
}
.btn:hover,.btn:focus-visible{background-color:var(--form-face-hover);box-shadow:var(--lift-up);transform:translateY(-1px);}
.lnk{
  color:var(--accent-deep);text-decoration:none;font-weight:700;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  transition:background-size var(--t-move) var(--ease-2);
}
.lnk:hover,.lnk:focus-visible{background-size:100% 2px;}

/* ── 動きを止める（R-10） ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
  [data-rv]{opacity:1 !important;filter:none !important;transform:none !important;}
  .fig .ln-lead{stroke-dashoffset:0;}
}

/* ── 印刷（B-15） ─────────────────────────────────────── */
@media print{
  .hd,.ft__l,.ad{display:none;}
  .band{padding-block:12mm;background:none;}
  .fig,.callout,.card{break-inside:avoid;}
  body{font-size:10.5pt;line-height:1.7;color:#1D1B19;background:none;}
  [data-rv]{opacity:1;filter:none;transform:none;}
}