@charset "utf-8";
/* ============================================================================
   初回価格の読み方 ── 案3
   引いたカード：①C-8 チャコール＋アシッド ②F-12 極太見出し × UD本文
                 ③L-8 リスト型（ナビを目次にする）
                 ④M-17 蛍光ペンを引く／M-14 桁送り
                 ⑤G-8 蛍光ペンの版面 ⑥V-8 現在地の索引型

   ── 外部読み込みについて（門番 R-21）
   外部参照は Google Fonts（fonts.googleapis.com / fonts.gstatic.com）だけ。
   他の CDN・スクリプト・画像は 0 件。全ファミリーに和文フォールバックがあるので、
   回線が切れても組版・色・レイアウト・動きは保たれる。

   ── 彩度のある色（R-03）
   彩度色は「黄緑（蛍光ペン）」1色相だけ。
     --acid   #C6E23F  H70.3 S73.8% L56.7%
     --acid-d #8FA824  H71.4 S64.7% L40.0%
     --acid-t #232419  H65.5 S18.0% L12.0%（S<25% ＝ 無彩色として数える地の色）
   蛍光は面積で殺す。マーカーは語の下半分（高さの 42%）にしか掛からない。
   マーカーは3か所で使う ── 本文の要になる語（.mk。記事1本につき1か所）、
   ナビのいま開いているページ、記事一覧の行に指したとき。高さはどれも 42%。
   ★ 蛍光は「帯いっぱいに敷かない」。章の地はすべて無彩色の階段から取り、
     蛍光はマーカー・罫・番号の中だけに閉じてある。塗り面積は、
     どの位置でもビューポートの 10% 未満（scripts/彩度面積をはかる.py で画素を数えて確認）。
   無彩色6段はすべて HSL 彩度 25% 未満（近白・近黒で彩度が跳ねないよう RGB 差を抑えた）。

   ── 見出しの太さについて（書体の役割分担）
   和文の表示用書体（Dela Gothic One）は 1 ウエイトしか無いので、
   font-weight を 700/800 にすると合成ボールドが掛かって字がにじむ。
   そこで役割を 2 つに分けた。
     --ff-disp … 特大の 2 段（.t-display / .t-h1 / ロゴ）だけ。font-weight は 400 のまま、
                 太さは欧文 Bricolage Grotesque の可変軸 'wght' でだけ指定する。
     --ff-head … 小見出し（.t-h2 / .t-h3 / 一覧の見出し）。和文は BIZ UDPGothic の 700。
   表示用の極太は特大でしか使わない。小さい字に使うと読みにくくなるため。

   ── 暗いほうを既定にしている
   このサイトは「小さい文字を読む」ための道具なので、紙より画面に寄せた暗い地を既定にし、
   明るい環境を選んでいる人には prefers-color-scheme: light で明るい階段に入れ替える。
   ============================================================================ */

/* 数字だけ等幅欧文へ（R-12 / P-05）*/
@font-face{
  font-family:'NumMono';
  font-style:normal; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmhHkjko.woff2) format('woff2');
  unicode-range:U+0030-0039,U+002B,U+002D,U+002E,U+002C,U+002F,U+003A,U+0025,U+00A5,U+FF05,U+FF0F;
}

:root{
  /* 無彩色の階段 6段（P-01 / R-20）暗い側を細かく */
  --n05:#191813; --n10:#22211A; --n30:#3B3930;
  --n50:#7A776B; --n70:#B9B6A9; --n90:#EFEEE7;
  --ink-rgb:0 0 0;
  --lit-rgb:239 238 231;

  /* 彩度色は黄緑1色相のみ（R-03）*/
  --acid:#C6E23F; --acid-d:#8FA824; --acid-t:#232419;
  --on-acid:#191813;

  /* 透明度は5段（P-02）*/
  --a1:.06; --a2:.12; --a3:.22; --a4:.38; --a5:.66;

  /* 影は輪郭＋3層（P-13 / R-07）。押せるものにだけ当てる（A-06）*/
  --sh:0 0 0 1px rgb(var(--lit-rgb)/var(--a2)),
       0 1px 2px rgb(var(--ink-rgb)/var(--a4)),
       0 6px 16px rgb(var(--ink-rgb)/var(--a3)),
       0 20px 38px rgb(var(--ink-rgb)/var(--a3));
  --sh-up:0 0 0 1px rgb(var(--lit-rgb)/var(--a3)),
       0 2px 5px rgb(var(--ink-rgb)/var(--a4)),
       0 14px 28px rgb(var(--ink-rgb)/var(--a4)),
       0 34px 60px rgb(var(--ink-rgb)/var(--a3));

  /* 書体（P-03 / P-04 欧文→和文→総称）
     Bricolage Grotesque は光学サイズと幅の軸を持つ（B-09）*/
  --ff-disp:'NumMono','Bricolage Grotesque','Dela Gothic One','Hiragino Sans',sans-serif;
  --ff-head:'NumMono','Bricolage Grotesque','BIZ UDPGothic','Hiragino Sans','Yu Gothic',sans-serif;
  --ff-body:'NumMono','Bricolage Grotesque','BIZ UDPGothic','Hiragino Sans','Yu Gothic',sans-serif;
  --ff-ui:'NumMono','Geist Mono','BIZ UDPGothic','Hiragino Sans',sans-serif;
  --ff-num:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 級数（P-09 最小:最大＝1:1.5 で統一）*/
  --t-display:clamp(40px,5vw,60px);
  --t-h1:clamp(31px,3.6vw,46.5px);
  --t-h2:clamp(25px,2.7vw,37.5px);
  --t-h3:clamp(19.5px,1.9vw,29.25px);
  --t-lede:clamp(18px,1.45vw,27px);
  --t-body:16.5px; --t-read:17px; --t-note:14.5px; --t-label:13px;

  /* 行間5段（P-07 / R-05 二極化）*/
  --lh-tight:1.04; --lh-head:1.26; --lh-ui:1.46; --lh-body:1.70; --lh-read:1.90;

  /* 余白は5pxの1音源。倍数で7音（A-03）*/
  --s1:5px; --s2:10px; --s3:20px; --s4:35px; --s5:55px; --s6:90px; --s7:140px;

  /* イージング2本／時間3段（P-11 / R-04）*/
  --e1:cubic-bezier(.2,.9,.3,1);
  --e2:cubic-bezier(.85,0,.15,1);
  --d-color:.16s; --d-move:.32s; --d-face:.70s;

  --stable-lvh:1vh;                 /* R-09 / P-14 */
  --measure:700px;                  /* P-10 本文カラムの上限 */

  /* 操作できるものの色（P-19 ブランド色とは別名前空間）*/
  --form-face:#20201A; --form-ink:#EFEEE7; --form-line:#4C4A3F;
  --form-focus:#C6E23F; --form-hint:#8E8B7E; --form-fill:#1B1A15;

  color-scheme:dark light;
}

/* 明るいほうの階段。黄緑の色相はそのまま、明度だけ入れ替える */
@media (prefers-color-scheme:light){
  :root{
    --n05:#F3F2ED; --n10:#E5E3D9; --n30:#BAB7A9;
    --n50:#78756A; --n70:#45433A; --n90:#22211B;
    --ink-rgb:34 33 27;
    --lit-rgb:34 33 27;
    --acid:#D6EE5E; --acid-d:#5E7107; --acid-t:#EDEEE4;
    --on-acid:#22211B;
    --form-face:#FAFAF9; --form-ink:#22211B; --form-line:#A6A395;
    --form-focus:#5E7107; --form-hint:#6A675C; --form-fill:#EDECE4;
    --a1:.05; --a2:.10; --a3:.18; --a4:.32; --a5:.58;
  }
}

/* ============================================================================
   土台
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--n05);
  color:var(--n90);
  font-family:var(--ff-body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  letter-spacing:.016em;
  font-feature-settings:'palt' 1;      /* 約物の詰め（P-06）*/
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:inherit;}
::selection{background:var(--acid);color:var(--on-acid);}

.ph{white-space:nowrap;}                                    /* R-19 / P-21 */
.nm{font-family:var(--ff-num);font-weight:500;font-variant-numeric:tabular-nums;
    letter-spacing:0;font-feature-settings:'palt' 0;}       /* R-12 / P-05 */

h1,h2,h3,h4{margin:0;font-weight:inherit;font-size:inherit;line-height:inherit;}
p,ul,ol,figure,dl{margin:0;}
ul,ol{padding:0;list-style:none;}

/* 見出しはクラスで当てる（P-17）。極太の和文見出し × 光学サイズ可変の欧文（B-09）*/
.t-display{font-family:var(--ff-disp);font-size:var(--t-display);line-height:var(--lh-tight);
  letter-spacing:-.045em;font-weight:400;font-variation-settings:'opsz' 96,'wdth' 92,'wght' 800;}
.t-h1{font-family:var(--ff-disp);font-size:var(--t-h1);line-height:var(--lh-tight);
  letter-spacing:-.034em;font-weight:400;font-variation-settings:'opsz' 72,'wdth' 94,'wght' 800;}
.t-h2{font-family:var(--ff-head);font-size:var(--t-h2);line-height:var(--lh-head);
  letter-spacing:-.026em;font-weight:700;font-variation-settings:'opsz' 42,'wdth' 96,'wght' 750;}
.t-h3{font-family:var(--ff-head);font-size:var(--t-h3);line-height:var(--lh-head);
  letter-spacing:-.015em;font-weight:700;font-variation-settings:'opsz' 24,'wdth' 100,'wght' 700;}
.t-lede{font-size:var(--t-lede);line-height:var(--lh-body);letter-spacing:.006em;color:var(--n70);}
.t-body{font-size:var(--t-read);line-height:var(--lh-read);letter-spacing:.02em;}
.t-note{font-size:var(--t-note);line-height:var(--lh-body);letter-spacing:.012em;color:var(--n50);}
.t-label{font-family:var(--ff-ui);font-size:var(--t-label);line-height:var(--lh-ui);
  letter-spacing:.14em;color:var(--n50);}

ruby{ruby-position:over;}                                   /* B-01 */
rt{font-size:.45em;font-family:var(--ff-ui);letter-spacing:.04em;color:var(--n50);
   font-feature-settings:'palt' 0;}

/* ============================================================================
   骨格 ── L-8 リスト型。左に「ナビ＝索引」、右に本文。左右で幅が違う（R-02）
   ============================================================================ */
.wrap{
  display:grid;
  grid-template-columns:minmax(0,8fr) minmax(0,20fr);
  column-gap:var(--s5);
  max-width:1300px;
  margin:0 auto;
  padding-inline:var(--s5);
}
.wrap > .col-idx{grid-column:1;}
.wrap > .col-main{grid-column:2;}
.wrap > .col-wide{grid-column:1 / -1;}
@media (max-width:940px){
  .wrap{grid-template-columns:minmax(0,1fr);padding-inline:var(--s3);row-gap:var(--s4);}
  .wrap > *{grid-column:1 !important;}
}

/* 章＝背景色の切り替え（P-16 / R-18）
   面はベタ1色にしない。紙の粒（斜めの細線）と、机の上の光を重ねる（A-07）*/
.band{position:relative;padding-block:var(--s6);}
.band--thin{padding-block:var(--s4);}
.band--deep{
  background-color:var(--n05);
  background-image:
    repeating-linear-gradient(112deg,
      rgb(var(--lit-rgb)/var(--a1)) 0 1px, transparent 1px 5px),
    radial-gradient(120% 74% at 14% 0%, rgb(var(--lit-rgb)/var(--a1)), transparent 62%);
}
.band--mid{
  background-color:var(--n10);
  background-image:
    repeating-linear-gradient(112deg,
      rgb(var(--lit-rgb)/var(--a1)) 0 1px, transparent 1px 7px),
    radial-gradient(96% 84% at 88% 6%, rgb(var(--lit-rgb)/var(--a2)), transparent 56%);
}
.band--acid{
  background-color:var(--acid-t);
  background-image:
    repeating-linear-gradient(112deg,
      rgb(var(--lit-rgb)/var(--a1)) 0 1px, transparent 1px 5px),
    radial-gradient(110% 90% at 8% 100%, rgb(var(--lit-rgb)/var(--a2)), transparent 58%);
}
.band + .band::before{
  content:'';position:absolute;inset-inline:0;top:0;height:var(--s1);
  background:linear-gradient(to bottom, rgb(var(--ink-rgb)/var(--a3)), transparent);
}
.stack{display:flex;flex-direction:column;}
.prose{max-width:var(--measure);}

/* ============================================================================
   ヘッダー
   ============================================================================ */
.site-head{
  position:sticky;top:0;z-index:30;
  background-color:color-mix(in srgb, var(--n05) 90%, transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.site-head::after{content:'';position:absolute;inset-inline:0;bottom:0;height:1px;
  background:rgb(var(--lit-rgb)/var(--a3));}
.site-head__in{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:center;gap:var(--s3);
  max-width:1300px;margin:0 auto;padding:var(--s2) var(--s5);
}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;}
.brand__mark{width:28px;height:28px;flex:none;}
.brand__name{font-family:var(--ff-disp);font-size:20px;letter-spacing:-.03em;font-weight:400;
  font-variation-settings:'opsz' 28,'wdth' 94,'wght' 800;}
.brand__sub{font-family:var(--ff-ui);font-size:13px;letter-spacing:.07em;color:var(--n50);}
.nav{display:flex;gap:var(--s3);justify-content:flex-end;flex-wrap:wrap;}
.nav a{
  font-family:var(--ff-ui);font-size:13px;letter-spacing:.04em;text-decoration:none;
  color:var(--n70);position:relative;padding:2px 3px;
  background-image:linear-gradient(var(--acid),var(--acid));
  background-repeat:no-repeat;background-position:0 84%;background-size:0% 42%;
  transition:background-size var(--d-move) var(--e2),color var(--d-color) var(--e1);
}                                              /* M-17 蛍光ペンを引く */
.nav a:hover,.nav a:focus-visible{background-size:100% 42%;color:var(--on-acid);}
/* いま開いているページは、塗りつぶさずに罫だけで示す（小さい字を蛍光で塗ると読みにくい）*/
.nav a[aria-current]{background-size:100% 3px;background-position:0 100%;color:var(--n90);}
@media (max-width:940px){ .site-head__in{padding-inline:var(--s3);} }
@media (max-width:640px){
  .site-head__in{grid-template-columns:minmax(0,1fr);row-gap:var(--s1);}
  .nav{justify-content:flex-start;gap:var(--s2);}
  .nav a{letter-spacing:0;}
  .brand__sub{display:none;}
}

/* ============================================================================
   動きの語彙は2種類だけ（P-12）
     ① M-17 蛍光ペンを引く ── 帯が左から引かれ、引かれた分だけ中身が現れる
     ② M-14 桁送り        ── 数字が縦にころがって、桁が確定する
   どちらも「小さい字に印をつけて、数を確かめる」というこのサイトの仕事を説明している（R-17）。

   どこで使っているか（申告と実装を突き合わせられるように、場所まで書く）
     ① 蛍光ペンを引く … .js [data-rv]（clip-path が左から開く）／ .mk（本文の要になる語）／
                         .nav a ／ .row__t ／ .toc__list a:hover::before（印の線が伸びる）／
                         .progress（読書プログレス）
     ② 桁送り         … .roll__c（0〜9 の列を translateY で送る。ファーストビューの2つの数字）
   transform と clip-path を動かしている宣言は、この2種類の外に1つも無い。

   ★ 切るのは「横」だけにする（inset の右側）。高さを 0 に切ると、Chrome が
     「画面に入っている割合」を必ず 0 と答えるので、出る仕掛けが一生発火しない。
     そのうえで JS 側に 1.5 秒の保険を置き、仕掛けが壊れても本文が必ず出るようにしている。
   ============================================================================ */
[data-rv]{opacity:1;}
.js [data-rv]{
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transition:opacity var(--d-move) var(--e1),
             clip-path var(--d-face) var(--e2);
}
.js [data-rv][data-rv-in]{opacity:1;clip-path:inset(0 0 0 0);}

/* 引いたまま残るマーカー。語の下半分だけを塗る（面積で殺す）*/
.mk{
  background-image:linear-gradient(var(--acid),var(--acid));
  background-repeat:no-repeat;background-position:0 84%;background-size:100% 42%;
  color:var(--on-acid);padding-inline:2px;
}
.js .mk{background-size:0% 42%;color:inherit;
  transition:background-size var(--d-face) var(--e2),color var(--d-color) var(--e1);}
.js [data-rv-in] .mk,.js .mk[data-rv-in]{background-size:100% 42%;color:var(--on-acid);}

/* M-14 桁送り。1桁ぶんの窓の中で、0〜9の列を --d の位置まで送る */
.roll{display:inline-flex;gap:.02em;vertical-align:baseline;}
.roll__d{display:inline-block;overflow:hidden;height:1em;line-height:1;}
.roll__c{display:block;transform:translateY(calc(var(--d) * -1em));}
.roll__c > span{display:block;height:1em;line-height:1;}
.roll__s{overflow:visible;}
.js .roll__c{transform:translateY(0);
  transition:transform var(--d-face) var(--e2);
  transition-delay:calc(var(--i) * 70ms);}
.js [data-rv-in] .roll__c{transform:translateY(calc(var(--d) * -1em));}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.001s !important;
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
  }
  .js [data-rv]{opacity:1 !important;clip-path:none !important;}
  .js .mk{background-size:100% 42% !important;color:var(--on-acid) !important;}
  .js .roll__c{transform:translateY(calc(var(--d) * -1em)) !important;}
  .progress{display:none;}
}

/* B-14 読書プログレス（JS 0行）*/
@keyframes hiku{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:40;
  background:var(--acid);transform-origin:left;transform:scaleX(0);}
@supports (animation-timeline:scroll()){
  /* 読書プログレスは、スクロールの位置をそのまま長さに写すだけのもの。
     時間の演出ではないので曲線を付けず、等倍（0,0,1,1）にしてある。
     この1本は、上で決めたイージング2本の数には入れない（門番 P-11 の例外・運用）。 */
  .progress{animation:hiku cubic-bezier(0,0,1,1);animation-timeline:scroll(root block);}
}

/* ============================================================================
   ファーストビュー ── V-8 現在地の索引型（判定はしない。入口を並べるだけ）
   ============================================================================ */
.fv{position:relative;padding-block:var(--s6) var(--s5);overflow:hidden;}
.fv__eyebrow{display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap;
  margin-bottom:var(--s3);}
.fv__to{margin-bottom:var(--s2);color:var(--acid-d);letter-spacing:.08em;}
.fv__title{margin-bottom:var(--s3);}
.fv__rule{width:100%;max-width:520px;height:auto;margin-top:var(--s2);}
.fv__lede{max-width:30em;margin-bottom:var(--s2);}
.fv__grid{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,10fr);
  gap:var(--s4) var(--s5);align-items:start;}
@media (max-width:940px){
  .fv{padding-block:var(--s4) var(--s3);}
  .fv__grid{grid-template-columns:minmax(0,1fr);}
}

/* 索引（L-8 ＝ ナビを目次にする）*/
.idx{display:grid;gap:var(--s1);}
.idx__t{font-family:var(--ff-ui);font-size:13px;letter-spacing:.13em;color:var(--n50);
  margin-bottom:var(--s2);}
.idx a{
  display:grid;grid-template-columns:minmax(0,32px) minmax(0,1fr);gap:var(--s3);
  text-decoration:none;color:inherit;position:relative;
  padding:var(--s2) var(--s2) var(--s2) 0;
  transition:background-color var(--d-color) var(--e1);
}
.idx a::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgb(var(--lit-rgb)/var(--a3));}
.idx a:hover,.idx a:focus-visible{background-color:rgb(var(--lit-rgb)/var(--a1));}
.idx__no{font-family:var(--ff-num);font-size:14px;color:var(--acid-d);letter-spacing:.02em;}
.idx__h{display:block;font-family:var(--ff-head);font-size:18px;font-weight:700;
  font-variation-settings:'opsz' 18,'wght' 700;
  line-height:var(--lh-head);letter-spacing:-.01em;margin-bottom:var(--s1);}
.idx__d{display:block;font-size:14.5px;line-height:var(--lh-body);color:var(--n50);}
.idx__note{font-size:13.5px;color:var(--n50);margin-top:var(--s3);line-height:var(--lh-body);}

/* ============================================================================
   記事の一覧 ── 行。箱にしない
   ============================================================================ */
.list{display:grid;}
.grp{padding-top:var(--s6);padding-bottom:var(--s2);}
.grp:first-child{padding-top:0;}
.grp__d{font-size:15.5px;line-height:var(--lh-body);color:var(--n70);margin-top:var(--s1);}
.row{
  display:grid;grid-template-columns:minmax(0,46px) minmax(0,1fr) minmax(0,120px);
  gap:var(--s1) var(--s3);align-items:baseline;
  text-decoration:none;color:inherit;position:relative;
  padding:var(--s3) var(--s2) var(--s3) 0;
  transition:background-color var(--d-color) var(--e1);
}
.row::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgb(var(--lit-rgb)/var(--a3));}
.row:hover,.row:focus-visible{background-color:rgb(var(--lit-rgb)/var(--a1));}
.row__no{font-family:var(--ff-num);font-size:15px;color:var(--acid-d);}
.row__t{display:block;margin-bottom:var(--s1);color:var(--n70);
  background-image:linear-gradient(var(--acid),var(--acid));
  background-repeat:no-repeat;background-position:0 84%;background-size:0% 42%;
  transition:background-size var(--d-move) var(--e2),color var(--d-color) var(--e1);}
.row:hover .row__t,.row:focus-visible .row__t{
  background-size:100% 42%;color:var(--on-acid);}      /* M-17 */
.row__d{display:block;color:var(--n50);font-size:15px;line-height:var(--lh-body);}
.row__meta{font-family:var(--ff-ui);font-size:13px;color:var(--n50);letter-spacing:.03em;
  text-align:right;white-space:nowrap;}
@media (max-width:640px){
  .row{grid-template-columns:minmax(0,34px) minmax(0,1fr);}
  .row__meta{grid-column:2;text-align:left;}
}

/* ============================================================================
   記事の本文
   ============================================================================ */
.article{max-width:var(--measure);}
.article > * + *{margin-top:var(--s3);}
.article .t-h2{margin-top:var(--s5);}
.article .t-h3{margin-top:var(--s4);}
.article .t-h2 + .t-body,.article .t-h3 + .t-body{margin-top:var(--s2);}
.article .t-body + .t-body{margin-top:var(--s3);}
.article figure{margin-block:var(--s6) var(--s5);}
.article .notes{margin-block:var(--s5) var(--s4);}
.article .cl{margin-block:var(--s4) var(--s5);}

.cl{display:grid;gap:var(--s2);}
.cl__item{position:relative;padding-left:var(--s4);font-size:var(--t-read);
  line-height:var(--lh-body);letter-spacing:.02em;}
.cl__item::before{content:'';position:absolute;left:0;top:.72em;width:var(--s3);height:3px;
  background:var(--acid);}
.cl--num{counter-reset:cl;}
.cl--num .cl__item{padding-left:var(--s5);}
.cl--num .cl__item::before{
  counter-increment:cl;content:counter(cl,decimal-leading-zero);
  width:auto;height:auto;top:0;background:none;
  font-family:var(--ff-num);font-size:13.5px;color:var(--acid-d);letter-spacing:.02em;}

/* B-12 先に断る注記 */
.notes{padding:var(--s3) var(--s4);position:relative;
  background-color:var(--n10);
  background-image:linear-gradient(to right, rgb(var(--lit-rgb)/var(--a1)), transparent 40%);}
.notes::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acid);}
.notes .note{font-size:15.5px;line-height:var(--lh-body);color:var(--n70);letter-spacing:.016em;}
.notes .note + .note{margin-top:var(--s2);}
.notes__t{font-family:var(--ff-ui);font-size:13px;letter-spacing:.11em;color:var(--acid-d);
  margin-bottom:var(--s2);}

.src{margin-top:var(--s5);padding-top:var(--s3);position:relative;}
.src::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:rgb(var(--lit-rgb)/var(--a3));}
.src .note{font-size:14px;line-height:var(--lh-body);color:var(--n50);}
.src .note + .note{margin-top:var(--s1);}
.src a{color:var(--n70);text-underline-offset:3px;}

/* ============================================================================
   広告開示と広告枠（S-11 / S-12）
   ============================================================================ */
.ad-disc{
  display:flex;gap:var(--s2);align-items:baseline;
  font-family:var(--ff-ui);font-size:13.5px;letter-spacing:.03em;line-height:var(--lh-ui);
  color:var(--n70);padding:var(--s2) var(--s3);
  background-color:var(--n10);
  background-image:repeating-linear-gradient(112deg,
    rgb(var(--lit-rgb)/var(--a2)) 0 2px, transparent 2px 8px);
}
.ad-disc__tag{flex:none;font-weight:500;color:var(--acid-d);letter-spacing:.13em;}
.ad{margin-block:var(--s5);}
.ad__slot{margin-top:var(--s2);padding:var(--s4);position:relative;
  background-color:var(--n10);
  background-image:radial-gradient(80% 100% at 0% 0%, rgb(var(--lit-rgb)/var(--a1)), transparent 60%);}
.ad__slot::before{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgb(var(--lit-rgb)/var(--a2)),
             inset 0 3px 0 rgb(var(--lit-rgb)/var(--a2));}
.ad__ph{font-family:var(--ff-ui);font-size:13.5px;letter-spacing:.03em;color:var(--n50);
  line-height:var(--lh-ui);}

/* ============================================================================
   図（G-8 蛍光ペンの版面）
   ============================================================================ */
figure{margin:0;}
.fig{padding:var(--s4);position:relative;
  background-color:var(--n05);
  background-image:repeating-linear-gradient(112deg,
    rgb(var(--lit-rgb)/var(--a1)) 0 1px, transparent 1px 6px);}
.fig::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgb(var(--lit-rgb)/var(--a2)),
             inset 4px 0 0 var(--acid-t),
             inset 0 -1px 0 rgb(var(--lit-rgb)/var(--a1));}
.fig__cap{font-family:var(--ff-ui);font-size:13.5px;letter-spacing:.08em;color:var(--acid-d);
  margin-bottom:var(--s3);line-height:var(--lh-ui);}
.fig__note{font-size:13.5px;line-height:var(--lh-body);color:var(--n50);margin-top:var(--s3);
  letter-spacing:.012em;}
/* 図の器。狭い画面では図を実寸で出し、横にスクロールして読んでもらう。
   375px で viewBox 760 の図をそのまま縮めると、図の中の 13px の文字が 4.2px になって
   読めなかった（2026-08-29 の審査で指摘）。端は mask で溶かす（P-15 / R-11）。 */
.fig__scroll{overflow-x:auto;overflow-y:hidden;}
.fig__scroll svg{width:100%;height:auto;}
@media (max-width:900px){
  .fig__scroll{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#111 16px,#111 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(to right,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;
    scrollbar-width:thin;
  }
  .fig__scroll svg{min-width:calc(var(--vbw) * 1px);}
  .fig__cap::after{content:'　→ 横にスクロールできます';opacity:.72;}
}

/* ============================================================================
   表
   ============================================================================ */
.lane{
  overflow-x:auto;overflow-y:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#111 44px,#111 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#111 44px,#111 calc(100% - 44px),transparent 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  scrollbar-width:thin;
}
.lane__in{display:flex;gap:var(--s3);padding-inline:44px;min-width:max-content;}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;line-height:var(--lh-body);
  min-width:560px;}
.tbl th,.tbl td{padding:var(--s2) var(--s3);text-align:left;vertical-align:top;
  letter-spacing:.016em;}
.tbl thead th{font-family:var(--ff-ui);font-size:13px;letter-spacing:.1em;color:var(--n50);
  padding-bottom:var(--s1);}
.tbl tbody tr{background-color:color-mix(in srgb, var(--n10) 55%, transparent);}
.tbl tbody tr:nth-child(2n){background-color:transparent;}
.tbl th[scope=row]{font-weight:700;color:var(--n90);width:32%;}
/* 「ここを読む」を示すのも、黄緑1色相の濃淡だけで足りる。
   緑と赤のペアを足すと彩度色が3色相になり、R-03（1色相まで）に当たる。 */
.tbl td.is-key{color:var(--acid-d);background-color:var(--n10);font-weight:700;}

/* ============================================================================
   分数ページャ（B-11）・前後の記事・目次
   ============================================================================ */
.pager{font-family:var(--ff-num);font-size:13.5px;letter-spacing:.05em;color:var(--n50);
  font-variant-numeric:tabular-nums;}
.pager b{font-weight:500;color:var(--n90);}
.toc{position:sticky;top:var(--s7);}
.toc__list{display:grid;gap:var(--s2);margin-block:var(--s3);}
.toc__list a{font-size:13.5px;line-height:var(--lh-ui);color:var(--n50);text-decoration:none;
  display:block;padding-left:var(--s3);position:relative;
  transition:color var(--d-color) var(--e1);}
.toc__list a::before{content:'';position:absolute;left:0;top:.7em;width:var(--s2);height:3px;
  background:var(--n30);transform-origin:left;
  transition:background-color var(--d-color) var(--e1),transform var(--d-move) var(--e2);}
.toc__list a:hover,.toc__list a:focus-visible{color:var(--n90);}
.toc__list a:hover::before,.toc__list a:focus-visible::before{
  background:var(--acid);transform:scaleX(1.6);}
.toc__end{padding-top:var(--s3);position:relative;}
.toc__end::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:rgb(var(--lit-rgb)/var(--a3));}
@media (max-width:940px){ .toc{position:static;} }

.around{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);
  margin-top:var(--s6);}
.around a{text-decoration:none;color:inherit;padding:var(--s3) var(--s4);
  background-color:var(--n10);box-shadow:var(--sh);border-radius:2px;
  transition:box-shadow var(--d-move) var(--e1);}
.around a:hover,.around a:focus-visible{box-shadow:var(--sh-up);}
.around .t-label{margin-bottom:var(--s1);}
@media (max-width:640px){ .around{grid-template-columns:minmax(0,1fr);} }

/* ============================================================================
   フォーム（P-19）
   ============================================================================ */
.field{display:grid;gap:var(--s1);}
.field label{font-family:var(--ff-ui);font-size:13px;letter-spacing:.1em;color:var(--form-hint);}
.field input,.field textarea,.field select{
  font-family:var(--ff-body);font-size:16px;line-height:var(--lh-ui);
  color:var(--form-ink);background:var(--form-face);
  border:1px solid var(--form-line);border-radius:2px;
  padding:var(--s2) var(--s3);width:100%;
  transition:border-color var(--d-color) var(--e1),box-shadow var(--d-color) var(--e1);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--form-focus);
  box-shadow:0 0 0 1px var(--form-focus),
             0 1px 2px rgb(var(--ink-rgb)/var(--a3)),
             0 6px 14px rgb(var(--ink-rgb)/var(--a3)),
             0 16px 30px rgb(var(--ink-rgb)/var(--a2));}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px;}

/* ============================================================================
   フッター
   ============================================================================ */
.site-foot{background-color:var(--n10);color:var(--n70);padding-block:var(--s6) var(--s5);
  background-image:repeating-linear-gradient(112deg,
    rgb(var(--lit-rgb)/var(--a1)) 0 1px, transparent 1px 6px);}
.site-foot a{color:var(--n90);text-decoration:none;transition:color var(--d-color) var(--e1);}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--acid);text-decoration:underline;
  text-underline-offset:4px;}
.foot__grid{display:grid;grid-template-columns:minmax(0,12fr) minmax(0,7fr) minmax(0,9fr);
  gap:var(--s5) var(--s4);}
.foot__links{display:grid;gap:var(--s2);font-size:15px;}
.foot__end{margin-top:var(--s5);font-family:var(--ff-ui);font-size:13px;letter-spacing:.04em;
  color:var(--n50);}
@media (max-width:940px){ .foot__grid{grid-template-columns:minmax(0,1fr);} }

.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--s3);top:var(--s3);z-index:50;background:var(--acid);color:var(--on-acid);
  padding:var(--s2) var(--s3);}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}

/* B-15 印刷で崩れない */
@media print{
  .site-head,.progress,.nav,.around,.ad{display:none;}
  body{background:none;color:#22211B;font-size:11pt;}
  .band{padding-block:12pt;background:none;}
  .wrap{display:block;max-width:none;padding:0;}
  .fig,.notes,.row,.idx a{break-inside:avoid;box-shadow:none;}
  .lane{overflow:visible;-webkit-mask-image:none;mask-image:none;}
  .lane__in{flex-wrap:wrap;padding-inline:0;min-width:0;}
  .article{max-width:none;}
  .mk{background:none;text-decoration:underline;color:inherit;}
  a[href^="http"]::after{content:' (' attr(href) ')';font-size:8pt;}
}