@charset "utf-8";
/* ============================================================================
   単価ノート ── デザインシステム
   ----------------------------------------------------------------------------
   引いたカード（既出台帳）
     ①配色 C-6 ベージュ紙面＋藤（値はこのファイルでゼロから決めた）
     ②書体 F-10（新設）光学サイズ可変のセリフ × UD和文 × 数字だけ等幅
     ③レイアウト L-8 リスト型（ナビを目次にする）
     ④動き   M-13 罫線が引かれる ／ M-16 紙の角が折れて中身が出る
     ⑤図解   G-6 罫線の帳面の上に描く図版
     ⑥FV     V-7 帳面の1行型

   動きの語彙（P-12：3種以内）＝ 2種
     ① 罫線が引かれる  ── 下線・棒・イラストの「見てほしい線」が左から右へ引かれる
                        （実装は transform: scaleX と stroke-dashoffset の2通り。語彙としては1つ）
     ② 紙の角が折れて中身が出る ── 登場（clip-path の角折り＋translateY）
     ※ 色と不透明度だけの状態変化は語彙に数えない（P-12 の但し書き）

   イージング（P-11）＝ 2本 ／ 時間の変数＝4種（色 .16s ／ 読める .26s ／ 移動 .34s ／ 面 .62s）
   彩度のある色（HSL S≧25%）＝ 藤 1色相のみ（H253）。地・文字はすべて S<25%
   ========================================================================== */

/* ── 数字だけを等幅に落とす合成ファミリー（P-05 / R-12）───────────────
   本文の書体は和文のまま、数字（と % , .）だけがこの面に落ちる。         */
@font-face{
  font-family:"NumSet";
  src:local("SFMono-Regular"),local("SF Mono"),local("Menlo"),
      local("Consolas"),local("DejaVu Sans Mono"),local("Liberation Mono");
  unicode-range:U+0030-0039,U+0025,U+002C,U+002E,U+002F,U+FF05,U+FF0E;
  font-display:swap;
}

:root{
  /* 無彩色の階段 5段（P-01）── 明度 91 / 76 / 48 / 27 / 12 % */
  --g-1:#EDEBE4;
  --g-2:#C9C5B9;
  --g-3:#86816F;
  --g-4:#4B4740;
  --g-5:#221F19;
  --ink-rgb:34 31 25;

  /* 面（章＝背景色の切り替え：P-16） */
  --paper:#F1F0EB;
  --face-2:#E9E7E0;
  --face-3:#DEDBD2;

  /* 彩度のある色は藤 1色相だけ（R-03） */
  --accent:#6A5AA3;
  --accent-deep:#55488A;
  --accent-tint:#E8E6EF;
  --accent-rgb:106 90 163;

  /* 透明度の段階 5段（P-02）── 生の rgba を書かない */
  --o-1:.06; --o-2:.13; --o-3:.26; --o-4:.52; --o-5:.8;

  /* 影は4段重ね＋輪郭（P-13 / R-07） */
  --sh-1:0 0 0 1px rgb(var(--ink-rgb)/var(--o-2)),
         0 1px 1px rgb(var(--ink-rgb)/var(--o-1)),
         0 3px 6px -2px rgb(var(--ink-rgb)/var(--o-1)),
         0 10px 22px -10px rgb(var(--ink-rgb)/var(--o-3));
  --sh-2:0 0 0 1px rgb(var(--accent-rgb)/var(--o-3)),
         0 1px 2px rgb(var(--ink-rgb)/var(--o-2)),
         0 7px 14px -4px rgb(var(--ink-rgb)/var(--o-2)),
         0 20px 38px -14px rgb(var(--ink-rgb)/var(--o-3));

  /* 操作できる要素の色は、ブランド色と別の名前空間に置く（P-19） */
  --form-face:#EFEDE6;
  --form-face-on:#E4E1D6;
  --form-ink:#2C2921;
  --form-edge:rgb(var(--ink-rgb)/var(--o-3));
  --form-mark:#5A4C93;

  /* 動き（P-11）＝ カーブ2本・時間4種 */
  --e-out:cubic-bezier(.19,.62,.24,1);
  --e-io:cubic-bezier(.62,.02,.22,1);
  --t-col:.16s; --t-read:.26s; --t-mov:.34s; --t-face:.62s;

  /* モバイルの画面高のガタつきを吸収（P-14 / R-09） */
  --stable-lvh:1vh;

  /* 余白の数列 ── 見本から持ち帰った「2px刻み」で組む（例外を作らない） */
  --s-1:8px; --s-2:14px; --s-3:20px; --s-4:28px;
  --s-5:40px; --s-6:56px; --s-7:76px; --s-8:104px;

  /* 罫線の高さ。図版と本文で同じ数列を使う */
  --rule:28px;

  /* 書体（P-04 欧文→和文→総称）*/
  --f-disp:"NumSet","Fraunces","BIZ UDPGothic","Hiragino Sans",serif;
  --f-body:"NumSet","Fraunces","BIZ UDPGothic","Hiragino Sans",serif;
  --f-num:"Spline Sans Mono","NumSet",ui-monospace,monospace;

  /* イラストの塗りの階段（無彩色。R-03 の彩度25%を超えない値だけ）*/
  --pt-1:#E8E5DC; --pt-2:#D8D4C7; --pt-3:#BEB9A9; --pt-4:#8F8A79; --pt-5:#4B4740;
  --accent-lt:#9C8FCB;

  --col:560px;      /* 本文カラムの上限（P-10）*/
  --hd:56px;
}
@supports (height:1svh){ :root{ --stable-lvh:1svh; } }

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--g-5);
  font-family:var(--f-body);
  font-size:16px; line-height:1.62;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;      /* 約物の処理（P-06） */
  font-variation-settings:"opsz" 14,"SOFT" 0,"WONK" 0;
  overflow-x:hidden;
}
@media (min-width:900px){ body{ font-size:17.5px; } }
img,svg{max-width:100%;height:auto;display:block;}
a{color:inherit;}

/* ── 文字の階段（P-09：最小と最大の比が全見出しで 1:1.5）──────────────
   .t-display 30→45 ／ .t-h1 26→39 ／ .t-h2 20→30 ／ .t-h3 17→25.5 ／ .t-lede 15.5→23.25
   見出しは class で当てる（P-17：h1 の重要度と大きさを切り離す）           */
.t-display,.t-h1,.t-h2,.t-h3{
  margin:0; font-family:var(--f-disp); font-weight:600;
  text-wrap:balance;
}
.t-display{
  font-size:clamp(30px,6.1vw,45px); line-height:1.02; letter-spacing:-.036em;
  font-variation-settings:"opsz" 90,"SOFT" 6,"WONK" 1;
}
.t-h1{
  font-size:clamp(26px,5.1vw,39px); line-height:1.08; letter-spacing:-.028em;
  font-variation-settings:"opsz" 60,"SOFT" 4,"WONK" 0;
}
.t-h2{
  font-size:clamp(20px,3.5vw,30px); line-height:1.16; letter-spacing:-.02em;
  font-variation-settings:"opsz" 34,"SOFT" 2,"WONK" 0;
}
.t-h3{
  font-size:clamp(17px,2.3vw,25.5px); line-height:1.28; letter-spacing:-.012em;
  font-variation-settings:"opsz" 22,"SOFT" 0,"WONK" 0;
}
.t-lede{
  margin:0; font-size:clamp(16.5px,2.05vw,24.75px); line-height:1.92;
  letter-spacing:.014em; color:var(--g-4);
}
.t-body{ margin:0; line-height:1.62; }
.t-body strong{ font-weight:700; color:var(--g-5);
  background:linear-gradient(to bottom, rgb(var(--accent-rgb)/0) 62%, rgb(var(--accent-rgb)/.16) 62%); }
.t-body--long{ line-height:1.92; }
.lab{
  font-family:var(--f-num); font-size:13px; line-height:1.38;
  letter-spacing:.13em; text-transform:uppercase; color:var(--g-3);
}
.num{ font-family:var(--f-num); font-variant-numeric:tabular-nums;
      font-feature-settings:"tnum" 1; letter-spacing:0; }

/* 文節ロック（R-19 / P-21）── 折れてよい場所を span と span の境目だけにする */
.ph{ white-space:nowrap; }

/* ルビ（B-01） */
ruby{ ruby-position:over; }
rt{ font-size:.45em; letter-spacing:.04em; color:var(--g-3); font-weight:400; }

/* ── 骨格 ──────────────────────────────────────────────────────────
   L-8：ナビが目次。非対称グリッド（R-02）＝左に細い柱、中央に本文、右に単価の欄 */
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--form-face); color:var(--form-ink); padding:var(--s-1) var(--s-3);
}
.skip:focus{ left:var(--s-3); top:var(--s-1); z-index:40; }

.hd{
  position:sticky; top:0; z-index:30; height:var(--hd);
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:var(--s-3); padding:0 clamp(16px,4vw,40px);
  background:linear-gradient(to bottom,
      rgb(241 240 235/.96) 0%, rgb(241 240 235/.9) 100%);
  backdrop-filter:saturate(1.1) blur(8px);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid rgb(var(--ink-rgb)/var(--o-2));
}
.hd__brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; }
.hd__mark{
  font-family:var(--f-disp); font-weight:600; font-size:19px; letter-spacing:-.02em;
  white-space:nowrap;
  font-variation-settings:"opsz" 30,"SOFT" 4,"WONK" 1;
}
.hd__sub{ font-family:var(--f-num); font-size:10.5px; letter-spacing:.16em; color:var(--g-3); }
.hd__nav{ display:flex; gap:var(--s-3); align-items:center; }
.hd__nav a{
  white-space:nowrap; font-size:13px; line-height:1.38; letter-spacing:.05em; text-decoration:none;
  color:var(--g-4); position:relative; padding-bottom:3px;
}
/* 動きの語彙① 罫線が引かれる */
.hd__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-mov) var(--e-out);
}
.hd__nav a:hover::after,.hd__nav a:focus-visible::after{ transform:scaleX(1); }
@media (max-width:700px){
  .hd__sub{ display:none; }
  .hd__nav a:nth-child(1){ display:none; }     /* トップはブランドで戻れる */
  .hd__nav a:nth-child(4){ display:none; }     /* 問い合わせはフッタにある */
  .hd__nav{ gap:var(--s-2); }
  .hd__mark{ font-size:17px; }
}

.band{ padding:var(--s-7) clamp(16px,4vw,40px); position:relative; }
.band--tight{ padding-top:var(--s-5); padding-bottom:var(--s-5); }

/* 章＝背景色の切り替え（P-16 / R-18）。面には必ず質感を持たせる（A-07）*/
.band--paper{
  background:
    repeating-linear-gradient(45deg,
      rgb(var(--ink-rgb)/.014) 0 1px, rgb(var(--ink-rgb)/0) 1px 3px),
    radial-gradient(130% 70% at 8% -10%, rgb(var(--accent-rgb)/.06) 0%, rgb(var(--accent-rgb)/0) 58%),
    linear-gradient(to bottom, rgb(var(--ink-rgb)/.022), rgb(var(--ink-rgb)/0) 340px),
    var(--paper);
}
.band--face2{
  background:
    repeating-linear-gradient(45deg,
      rgb(var(--ink-rgb)/.012) 0 1px, rgb(var(--ink-rgb)/0) 1px 3px),
    linear-gradient(to bottom, rgb(var(--ink-rgb)/.03), rgb(var(--ink-rgb)/0) 260px),
    var(--face-2);
}
.band--face3{
  background:
    repeating-linear-gradient(to right,
      rgb(var(--ink-rgb)/0) 0 23px, rgb(var(--ink-rgb)/.04) 23px 24px),
    repeating-linear-gradient(to bottom,
      rgb(var(--ink-rgb)/0) 0 23px, rgb(var(--ink-rgb)/.04) 23px 24px),
    var(--face-3);
}

.band__in{ max-width:1180px; margin:0 auto; }
/* 非対称グリッド（R-02）── 3案とも幅の違う2値以上を主要セクションに効かせる */
.grid3{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-4); }
@media (min-width:980px){
  .grid3{ grid-template-columns:13.5vw minmax(0,var(--col)) minmax(0,1fr); gap:var(--s-6); }
}
.rail{ position:relative; }
@media (min-width:980px){
  .rail{ position:sticky; top:calc(var(--hd) + var(--s-3)); align-self:start; }
}
.rail__no{
  font-family:var(--f-num); font-size:clamp(28px,3.4vw,44px); line-height:1;
  letter-spacing:-.03em; color:var(--g-2);
}
.rail__t{ margin-top:var(--s-1); font-size:13px; line-height:1.38; letter-spacing:.05em; color:var(--g-3); }

/* 縦に積む部分。間隔を用途ごとに変える（A-03：余白のリズム） */
.stack{ display:flex; flex-direction:column; }
.stack>*+*{ margin-top:var(--s-3); }
.stack>*+.t-h2{ margin-top:var(--s-6); }
.stack>*+.t-h3{ margin-top:38px; }
.stack>.t-h2+*{ margin-top:var(--s-2); }
.stack>.t-h3+*{ margin-top:12px; }
.stack>*+.fig{ margin-top:44px; }
.stack>.fig+*{ margin-top:var(--s-4); }
.stack>*+.notes{ margin-top:34px; }
.stack>*+.cl{ margin-top:26px; }
.stack>.cl+*{ margin-top:26px; }
.stack>*+.quote{ margin-top:32px; }
.stack>.quote+*{ margin-top:var(--s-4); }
.stack>*+.adbox{ margin-top:48px; }

/* ── 登場（動きの語彙② 紙の角が折れて中身が出る）───────────────────
   JSが動かないときは最初から見えている（html に .js が付いたときだけ隠す）*/
html.js [data-rv]{
  opacity:0;
  transform:translateY(10px);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  /* 文字が読める状態になるのを、面の動きより先に終わらせる。
     ここを面と同じ 0.62s にすると、スクロールしきった直後の測定で
     まだ半透明のまま拾われる（＝読者にとっても、読めるまでが遅い）。 */
  transition:opacity var(--t-read) var(--e-out),
             transform var(--t-face) var(--e-out),
             clip-path var(--t-face) var(--e-io);
}
html.js [data-rv]{ clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
html.js [data-rv="in"]{
  opacity:1; transform:none;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
}

/* ── ファーストビュー V-7 帳面の1行型 ───────────────────────────── */
.fv{
  min-height:calc(88 * var(--stable-lvh)); display:flex; flex-direction:column;
  justify-content:flex-start; padding-top:var(--s-6); padding-bottom:0;
}
/* 本文は絵の上に置かない。絵のぶんだけ、下に場所を空けておく。
   ★ ここは .hero の高さと必ずセットで直すこと。
     以前は写真の高さを割合（37%）で決めていたので、中身が増えるほど写真が伸びて、
     ここで空けた場所を追い越し、注記の文字が写真の上に乗っていた（実測 -120px）。 */
.fv .band__in{ padding-bottom:364px; }
@media (max-width:760px){ .fv .band__in{ padding-bottom:284px; } }
.fv__def{ max-width:19ch; }
.fv__lede{ margin-top:var(--s-3); max-width:46ch; }
.fv__row{
  margin-top:var(--s-5);
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-2);
}
@media (min-width:760px){
  .fv__row{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--s-5); align-items:end; }
}
.ledger{
  border-top:1px solid rgb(var(--ink-rgb)/var(--o-3));
  border-bottom:1px solid rgb(var(--ink-rgb)/var(--o-3));
}
.ledger__r{
  display:grid; grid-template-columns:minmax(0,1fr) 76px 82px;
  align-items:baseline; gap:10px;
  padding:11px 0; border-bottom:1px solid rgb(var(--ink-rgb)/var(--o-2));
}
.ledger__r:last-child{ border-bottom:0; }
.ledger__r--head{ color:var(--g-3); }
.ledger__r--head span{ font-size:13px; letter-spacing:.1em; }
.ledger__nm{ font-size:14px; letter-spacing:.02em; }
.ledger__v{ text-align:right; font-family:var(--f-num); font-size:14.5px; }
.ledger__u{ text-align:right; font-family:var(--f-num); font-size:15.5px; color:var(--accent); font-weight:600; }
.ledger__r--sum .ledger__u{ font-size:18px; }

/* ── 目次（L-8：ナビを目次にする）──────────────────────────────── */
.toc{ border-top:1px solid rgb(var(--ink-rgb)/var(--o-3)); }
.toc__i{
  display:grid; grid-template-columns:46px minmax(0,1fr);
  gap:var(--s-2); padding:var(--s-4) 0;
  border-bottom:1px solid rgb(var(--ink-rgb)/var(--o-2));
  text-decoration:none; position:relative;
}
@media (min-width:860px){ .toc__i{ grid-template-columns:64px minmax(0,1fr) 168px; gap:var(--s-4); } }
.toc__no{ font-family:var(--f-num); font-size:19px; color:var(--g-2); line-height:1.38; }
.toc__t{ display:block; font-size:clamp(17px,2.3vw,25.5px); line-height:1.28; letter-spacing:-.012em; font-weight:600; }
.toc__d{ display:block; margin-top:10px; font-size:13.5px; line-height:1.62; color:var(--g-4); }
.toc__cat{ display:block; font-family:var(--f-num); font-size:13px; line-height:1.38; letter-spacing:.08em; color:var(--g-3); }
.toc__i::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-mov) var(--e-out);
}
.toc__i:hover::after,.toc__i:focus-visible::after{ transform:scaleX(1); }

/* ── 横に流れるレーン。端をマスクで溶かす（P-15 / R-11）──────────── */
.lane{
  display:flex; gap:var(--s-3); overflow-x:auto; padding-bottom:var(--s-2);
  scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(to right,
      rgb(var(--ink-rgb)/0) 0, rgb(var(--ink-rgb)/1) 34px,
      rgb(var(--ink-rgb)/1) calc(100% - 34px), rgb(var(--ink-rgb)/0) 100%);
  mask-image:linear-gradient(to right,
      rgb(var(--ink-rgb)/0) 0, rgb(var(--ink-rgb)/1) 34px,
      rgb(var(--ink-rgb)/1) calc(100% - 34px), rgb(var(--ink-rgb)/0) 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
.lane__i{
  flex:0 0 232px; scroll-snap-align:start; text-decoration:none;
  padding:var(--s-3) var(--s-3) var(--s-4);
  background:var(--paper); border:1px solid rgb(var(--ink-rgb)/var(--o-2));
}
.lane__i .toc__t{ display:block; font-size:16px; }

/* ── 箇条書き ─────────────────────────────────────────────────── */
.cl{ list-style:none; margin:0; padding:0; }
.cl__item{
  position:relative; padding-left:26px; font-size:15px; line-height:1.62;
}
.cl__item+.cl__item{ margin-top:10px; }
.cl__item::before{
  content:""; position:absolute; left:2px; top:.72em; width:12px; height:1px;
  background:var(--accent);
}

/* ── 注記ブロック（B-12：先に断る）──────────────────────────────── */
.notes{
  padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background:var(--accent-tint);
  border-left:3px solid var(--accent);
}
.notes .lab{ color:var(--accent-deep); }
.note{ margin:8px 0 0; font-size:14px; line-height:1.62; color:var(--g-4); }

/* Strong / Subtle のペア（B-13）*/
.fb{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:rgb(var(--ink-rgb)/var(--o-2)); }
@media (min-width:720px){ .fb{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
.fb__c{ padding:var(--s-3); }
.fb__c--strong{ background:var(--accent-tint); color:var(--accent-deep); }
.fb__c--subtle{ background:var(--g-1); color:var(--g-4); }
.fb__h{ font-family:var(--f-num); font-size:13px; letter-spacing:.1em; line-height:1.38; }
.fb__t{ margin:9px 0 0; font-size:14.5px; line-height:1.62; }

/* ── 引用 ─────────────────────────────────────────────────────── */
.quote{ margin:0; padding-left:var(--s-3); border-left:2px solid var(--g-2); }
.quote__t{ margin:0; font-size:15.5px; line-height:1.92; color:var(--g-4); }
.quote__s{ display:block; margin-top:10px; font-size:13px; line-height:1.38; letter-spacing:.05em; color:var(--g-3); }

/* ── 図版（G-6 罫線の帳面の上に描く）──────────────────────────── */
.fig{ margin:0; }
.fig__box{
  background:
    repeating-linear-gradient(to bottom,
      rgb(var(--ink-rgb)/0) 0, rgb(var(--ink-rgb)/0) 23px,
      rgb(var(--ink-rgb)/var(--o-2)) 23px, rgb(var(--ink-rgb)/var(--o-2)) 24px),
    var(--g-1);
  border:1px solid rgb(var(--ink-rgb)/var(--o-3));
  padding:var(--s-3);
}
.fig__cap{ margin:12px 0 0; font-size:13.5px; line-height:1.62; color:var(--g-4); }
.fig__note{ margin:7px 0 0; font-size:13px; line-height:1.62; color:var(--g-3); }
.fig svg{ width:100%; height:auto; overflow:visible; }
.fig .sv-ax{ stroke:rgb(var(--ink-rgb)/var(--o-3)); stroke-width:1; }
.fig .sv-bar{ fill:var(--g-2); }
.fig .sv-bar--on{ fill:var(--accent); }
.fig .sv-t{ font-family:var(--f-body); font-size:16px; fill:var(--g-4); letter-spacing:.02em; }
.fig .sv-n{ font-family:var(--f-num); font-size:17px; fill:var(--g-5); }
.fig .sv-n--on{ fill:var(--accent-deep); font-weight:600; }
.fig .sv-lab{ font-family:var(--f-num); font-size:13px; fill:var(--g-3); letter-spacing:.1em; }
.fig .sv-rule{ stroke:rgb(var(--ink-rgb)/var(--o-2)); stroke-width:1; }
.fig .sv-line{ stroke:var(--accent); stroke-width:1.5; fill:none; }
.fig .sv-face{ fill:rgb(var(--accent-rgb)/var(--o-1)); }
/* 図の中の軸だけ、罫線が引かれる動きを共有する（語彙①） */
html.js [data-rv] .sv-grow{ transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-face) var(--e-out) .1s; }
html.js [data-rv="in"] .sv-grow{ transform:scaleX(1); }


/* ── ファーストビューに敷く一枚絵 ────────────────────────────────
   画面いっぱいにはしない。1画面の下半分だけを絵にして、上は紙のまま残す。
   絵は塗り（面）で作る。線画だけだと下書きに見えるため。 */
/* 高さは割合ではなくピクセルで決める（割合だとFVの伸びに引きずられる）。
   変えるときは .fv .band__in の padding-bottom も同じだけ動かすこと。 */
.hero{ position:absolute; left:0; right:0; bottom:0; height:320px;
  overflow:hidden; pointer-events:none; z-index:0; }
.hero__svg{ width:100%; height:100%; display:block; }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--paper) 0%, rgb(241 240 235/.86) 10%,
    rgb(241 240 235/.42) 26%, rgb(241 240 235/0) 54%); }
@media (max-width:760px){ .hero{ height:240px; } }
.hero .lit{ transform-origin:0 50%; }
html.js [data-rv] .hero .lit{ transform:scaleX(0);
  transition:transform var(--t-face) var(--e-out) .2s; }
html.js [data-rv="in"] .hero .lit{ transform:scaleX(1); }

/* ── 写真（あれば使う。無ければ描いた絵のまま）───────────────────
   写真はサイトの2色に落としてから置く。カラーのままだと R-03 に一発で当たる
   （実測 86.1%／上限10%）。落としたあとは 0.1% 前後。 */
.ph-img{ width:100%; height:auto; display:block;
  /* 写真は灰色のまま置き、色づけは地の色を掛け合わせて作る。
     こうすると、写真のファイルにも画面にも、余計な色相が1つも出ない。
     （2色に塗ったJPEGを置くと、圧縮のにじみで色相が4つに散った） */
  mix-blend-mode:multiply; }
@supports not (mix-blend-mode:multiply){ .ph-img{ opacity:.94; } }
.ph-fig{ margin:0; }
.ph-fig .ph-img{ border:1px solid rgb(var(--ink-rgb)/var(--o-3)); }
.ph-cred{ margin:9px 0 0; font-size:13px; line-height:1.62; color:var(--g-3); }
.ph-cred a{ color:var(--g-4); }
.hero--photo{ display:block; }
.hero--photo .hero__img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
.hero__veil{ position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--paper) 0%, rgb(241 240 235/.86) 12%,
    rgb(241 240 235/.34) 32%, rgb(241 240 235/0) 60%); }
.hero--photo .ph-cred{ position:absolute; right:clamp(16px,4vw,40px); bottom:12px; margin:0;
  font-size:13px; line-height:1.4; color:var(--g-5);
  background:rgb(241 240 235/.9); padding:4px 10px; }
.hero--photo .ph-cred a{ color:var(--g-5); }
.stack>*+.ph-fig{ margin-top:var(--s-3); }
.stack>.ph-fig+*{ margin-top:var(--s-4); }

/* ── 線画のイラスト（G-6）─────────────────────────────────────────
   文字は入れない。SVGの文字は viewBox で縮み、375pxの実機で6pxになるため。
   線の太さは3段（主役1.9／副1.3／補助0.8）。全部同じ太さだと A-08 に当たる。
   藤は「見てほしい1か所」だけ。 */
.art{ width:100%; max-width:620px; margin:0 auto; height:auto; display:block; overflow:visible; }
.art .s1{ stroke:var(--g-4); stroke-width:1.9; }
.art .s2{ stroke:var(--g-3); stroke-width:1.3; }
.art .s3{ stroke:var(--g-2); stroke-width:.8; }
.art .s1,.art .s2,.art .s3,.art .hot{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.art .f1{ fill:rgb(var(--ink-rgb)/var(--o-1)); }
.art .f2{ fill:rgb(var(--ink-rgb)/var(--o-2)); }
.art .hot{ stroke:var(--accent); stroke-width:2.2; }
.art .hotf{ fill:rgb(var(--accent-rgb)/var(--o-2)); }
.fig--art{ max-width:672px; }
.fig--art .fig__box{
  padding:var(--s-4) var(--s-3);
  /* 絵の上では罫線を弱める。同じ濃さだと、線画と罫線が同じ強さで競う */
  background:
    repeating-linear-gradient(to bottom,
      rgb(var(--ink-rgb)/0) 0 23px,
      rgb(var(--ink-rgb)/.045) 23px 24px),
    var(--g-1);
}

/* 動きの語彙① 罫線が引かれる ── 絵の中でも同じ語彙を使う。
   「ここを見る」と言っている線だけが、あとから引かれる。 */
html.js [data-rv] .art .draw{ stroke-dasharray:1 0; stroke-dashoffset:0; }
@supports (stroke-dasharray:1){
  html.js [data-rv] .art .draw{ stroke-dasharray:420; stroke-dashoffset:420;
    transition:stroke-dashoffset var(--t-face) var(--e-out) .12s; }
  html.js [data-rv="in"] .art .draw{ stroke-dashoffset:0; }
}

/* ── 面の背景に敷く絵 ────────────────────────────────────────────
   .band を overflow:hidden にすると中の position:sticky が効かなくなるので、
   絵だけを自前の箱に入れて、その箱の側で切る。 */
.bgart{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bgart__s{ position:absolute; height:auto; }
.bgart__s--tr{ right:-110px; top:-18px; width:min(38vw,420px); }
.fv .bgart__s--tr{ right:-70px; top:auto; bottom:-26px; width:min(62vw,760px); }
.bgart__s--bl{ left:-120px; bottom:-40px; width:min(46vw,520px); }
.bgart__s--r{ right:4vw; top:32px; width:min(22vw,240px); }
.bgart .b1{ stroke:rgb(var(--ink-rgb)/.075); stroke-width:1.4; fill:none; }
.bgart .b2{ stroke:rgb(var(--ink-rgb)/.05); stroke-width:1; fill:none; }
.bgart .b3{ fill:rgb(var(--ink-rgb)/.03); }
.bgart .ba{ stroke:rgb(var(--accent-rgb)/.16); stroke-width:1.6; fill:none; }
@media (max-width:760px){
  .bgart__s--tr{ right:-140px; top:auto; bottom:8px; width:104vw; }
  .bgart__s--bl{ left:-150px; bottom:-30px; width:88vw; }
  .bgart__s--r{ right:-40px; top:auto; bottom:12px; width:44vw; }
}
.band__in{ position:relative; z-index:1; }

/* ── 図の中の棒（HTMLで組む。SVGだと375pxで文字が6pxまで縮む）───── */
.chart{ display:flex; flex-direction:column; }
.chart__r+.chart__r{ margin-top:18px; padding-top:18px;
  border-top:1px solid rgb(var(--ink-rgb)/var(--o-2)); }
.chart__nm{ font-size:14px; line-height:1.38; letter-spacing:.02em; color:var(--g-4); }
.chart__g{ display:grid; grid-template-columns:minmax(0,1fr) 92px;
  align-items:center; gap:12px; margin-top:10px; }
.chart__k{ grid-column:1 / -1; font-family:var(--f-num); font-size:13px; line-height:1.38;
  letter-spacing:.08em; color:var(--g-3); }
.chart__track{ height:22px; background:rgb(var(--ink-rgb)/.07); display:block;
  box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb)/var(--o-1)); }
.chart__bar{ display:block; height:100%; width:var(--w);
  background:linear-gradient(to bottom, rgb(var(--ink-rgb)/.30), rgb(var(--ink-rgb)/.40));
  transform-origin:0 50%; }
.chart__g--on .chart__bar{ background:linear-gradient(to bottom, var(--accent), var(--accent-deep)); }
.chart__v{ font-family:var(--f-num); font-variant-numeric:tabular-nums;
  font-size:15px; line-height:1.38; text-align:right; color:var(--g-4); }
.chart__g--on .chart__v{ color:var(--accent-deep); font-weight:600; }
.chart__gs{ display:flex; flex-direction:column; }
@media (min-width:600px){
  .chart__r{ display:grid; grid-template-columns:minmax(0,148px) minmax(0,1fr); gap:22px; align-items:start; }
  .chart__nm{ padding-top:1px; }
  .chart__gs>.chart__g:first-child{ margin-top:0; }
}
/* 動きの語彙① 罫線が引かれる ── 棒も同じ動きで伸ばす */
html.js [data-rv] .chart__bar{ transform:scaleX(0);
  transition:transform var(--t-face) var(--e-out) .08s; }
html.js [data-rv="in"] .chart__bar{ transform:scaleX(1); }

/* 図解のSVGは縮ませない。横に出たぶんは端を溶かして送る（P-15）*/
.svgwrap{ overflow-x:auto;
  -webkit-mask-image:linear-gradient(to right,
      rgb(var(--ink-rgb)/1) 0, rgb(var(--ink-rgb)/1) calc(100% - 30px), rgb(var(--ink-rgb)/0) 100%);
  mask-image:linear-gradient(to right,
      rgb(var(--ink-rgb)/1) 0, rgb(var(--ink-rgb)/1) calc(100% - 30px), rgb(var(--ink-rgb)/0) 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.svgwrap svg{ min-width:560px; }

/* ── 広告の枠（S-11）と開示（S-12）─────────────────────────────── */
.disc{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px var(--s-2); background:var(--g-1);
  border-left:3px solid var(--g-3);
  font-size:13px; line-height:1.62; color:var(--g-4);
}
.disc__k{ font-family:var(--f-num); font-size:11px; letter-spacing:.14em; color:var(--g-3);
  padding-top:2px; white-space:nowrap; }
.adbox{ border:1px solid rgb(var(--ink-rgb)/var(--o-3)); background:var(--paper); }
.adbox__h{
  padding:9px var(--s-2); border-bottom:1px solid rgb(var(--ink-rgb)/var(--o-2));
  font-family:var(--f-num); font-size:13px; line-height:1.38; letter-spacing:.1em; color:var(--g-3);
}
.adbox__b{ padding:var(--s-3); }
.adbox__slot{
  min-height:96px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:var(--s-3);
  background:repeating-linear-gradient(135deg,
      rgb(var(--ink-rgb)/0) 0, rgb(var(--ink-rgb)/0) 7px,
      rgb(var(--ink-rgb)/var(--o-1)) 7px, rgb(var(--ink-rgb)/var(--o-1)) 8px);
  border:1px solid rgb(var(--ink-rgb)/var(--o-2));
  font-size:13px; line-height:1.62; color:var(--g-3);
}

/* 操作できるもの（P-19 の名前空間から色を取る。影は押せるものにだけ付く：A-06）*/
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px var(--s-3); text-decoration:none;
  background:var(--form-face); color:var(--form-ink);
  border:1px solid var(--form-edge); box-shadow:var(--sh-1); border-radius:2px;
  font-size:14px; letter-spacing:.03em;
  transition:background-color var(--t-col) var(--e-out),
             box-shadow var(--t-mov) var(--e-out),
             transform var(--t-mov) var(--e-out);
}
.btn:hover,.btn:focus-visible{ background:var(--form-face-on); box-shadow:var(--sh-2); transform:translateY(-1px); }
.btn__k{ font-family:var(--f-num); font-size:11px; letter-spacing:.12em; color:var(--form-mark); }

/* ── 出典・関連 ───────────────────────────────────────────────── */
.src{ list-style:none; margin:0; padding:0; }
.src li{ font-size:13px; line-height:1.62; color:var(--g-4); padding:10px 0;
  border-bottom:1px solid rgb(var(--ink-rgb)/var(--o-2)); word-break:break-word; }
.src a{ color:var(--accent-deep); }
.src__u{ display:block; margin-top:5px; font-family:var(--f-num);
  font-size:13px; line-height:1.38; color:var(--g-3); word-break:break-all; }

/* ── フッタ ───────────────────────────────────────────────────── */
.ft{
  padding:var(--s-7) clamp(16px,4vw,40px) var(--s-6);
  background:var(--face-3);
  border-top:1px solid rgb(var(--ink-rgb)/var(--o-3));
  min-height:280px;
}
.ft__g{ max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-4); }
@media (min-width:820px){ .ft__g{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:var(--s-6); } }
.ft h2{ font-family:var(--f-num); font-size:13px; letter-spacing:.1em; color:var(--g-3);
  margin:0 0 var(--s-2); font-weight:400; line-height:1.38; }
.ft ul{ list-style:none; margin:0; padding:0; }
.ft li+li{ margin-top:9px; }
.ft a{ font-size:13.5px; color:var(--g-4); text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color var(--t-col) var(--e-out), color var(--t-col) var(--e-out); }
.ft a:hover{ color:var(--g-5); border-bottom-color:var(--accent); }
.ft__note{ margin:var(--s-2) 0 0; font-size:13px; line-height:1.62; color:var(--g-3); max-width:44ch; }
.ft__end{ max-width:1180px; margin:var(--s-6) auto 0; padding-top:var(--s-3);
  border-top:1px solid rgb(var(--ink-rgb)/var(--o-2));
  font-size:13px; line-height:1.62; letter-spacing:.04em; color:var(--g-3); }

/* 公開前に埋める場所。埋め忘れが目で分かる形にしておく */
.fill{ background:var(--accent-tint); color:var(--accent-deep); padding:1px 6px;
  font-size:.92em; border-bottom:1px solid var(--accent); }

/* ── 表 ───────────────────────────────────────────────────────── */
.tw{ overflow-x:auto;
  -webkit-mask-image:linear-gradient(to right,
      rgb(var(--ink-rgb)/1) 0, rgb(var(--ink-rgb)/1) calc(100% - 26px), rgb(var(--ink-rgb)/0) 100%);
  mask-image:linear-gradient(to right,
      rgb(var(--ink-rgb)/1) 0, rgb(var(--ink-rgb)/1) calc(100% - 26px), rgb(var(--ink-rgb)/0) 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
table{ border-collapse:collapse; width:100%; min-width:460px; font-size:14px; }
th,td{ text-align:left; padding:11px 12px; border-bottom:1px solid rgb(var(--ink-rgb)/var(--o-2));
  line-height:1.62; }
th{ font-family:var(--f-num); font-size:13px; letter-spacing:.08em; color:var(--g-3); font-weight:400;
  line-height:1.38; }
td.n{ font-family:var(--f-num); text-align:right; font-variant-numeric:tabular-nums; }

/* ── 動きを止める（R-10）───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:1ms !important; animation-duration:1ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important;
  }
  html.js [data-rv]{ opacity:1; transform:none; clip-path:none; }
  html.js [data-rv] .sv-grow{ transform:none; }
}

/* ── 印刷（B-15）──────────────────────────────────────────────── */
@media print{
  .hd,.ft,.lane,.adbox{ display:none !important; }
  body{ background:var(--paper); font-size:11pt; }
  .band{ padding:0 0 12pt; }
  .band--face2,.band--face3{ background:var(--paper); }
  .fig,.notes,.cl,.quote,table{ break-inside:avoid; }
  .t-h2,.t-h3{ break-after:avoid; }
  html.js [data-rv]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:var(--g-3); }
}