@charset "UTF-8";
/* なみのま v5 — buncomo 基盤（2026-09-05・okada 指示）
   原則: 線（1px の墨・副は破線）と余白だけで組む。影・面の色・太線は使わない。
   他誌から載せるエッセンス: 目次＝折兼ラボ／本文の実測数字・3行要約・ゲート＝なみのま固有／
   画像は大きく（co-coco）／動きは既定停止（Spark Journal）。 */

/* ---------- 書体（欧文のみ自前ホスト。外部リクエストなし） ---------- */
@font-face{ font-family:"Inter"; src:url(../fonts/inter.woff2) format("woff2"); font-weight:100 900; font-display:swap; }

/* ---------- トークン ---------- */
/* ★薄墨（--ink-2）は 2026-09-06 に濃くした。
   直す前の実測= 白 3.93 ／ グレー 3.60 ／ キナリ 3.30（いずれもティントの上では 3.0〜3.5）。
   ＝ **WCAG 2.2 AA の 4.5:1 に届いていなかった**。表題・図版キャプション・表のラベル・出典の注記など、
   **装飾ではなく意味を持つ小さな文字**が全部これで、okada の「グレーの太字が読みにくい」の正体。
   ★`26` 第11条で AA 準拠を**公開している**ので、これは好みではなく約束の不履行。
   新= 白 5.05／グレー 4.93／キナリ 4.96（ティントの上でも 4.51 以上）。色相は変えず明度だけ下げた。 */
:root{
  --paper:#FFFFFF; --tint:#F1F2F4; --mark:#DFE3E8; --ink:#1F2226; --ink-2:#6B6F75; --soft:#D9DCE0;
  /* ★小さい文字にだけ使う墨（2026-09-11・okada「小さくて薄い文字が読みづらい」）。
     ★本文（--ink）より一段だけ弱いが、--ink-2（4.9〜5.1:1）よりはっきり濃い（約 10:1）。
     ★決め＝ **小さくするなら色は濃く／薄くするなら大きさは本文と同じ。二重に弱くしない。** */
  --fg-sub:#3F4349;
  --bg:var(--paper); --fg:var(--ink); --fg-muted:var(--ink-2); --focus:#B5432A;
  --font-ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
  --font-en:"Inter",var(--font-ja);
  --fs-scale:1;
  font-size:calc(100% * var(--fs-scale));
  --fs-body:1.0625rem;
  --lh-body:1.85; --ls-body:.04em; --lh-content:2; --ls-content:.05em;
  /* 本文の字数を一定に保つため、--measure は本文サイズに追随する em のままにする。 */
  --measure:43em;
  /* 特大でも行長を伸ばし過ぎないよう、--wide は 80rem 相当の 1280px に固定する。 */
  --wide:1280px;
  /* 文字と余白を一緒に広げるため、--gutter は rem を含む clamp のままにする。 */
  /* ★上限 3.5rem → 3.25rem（2026-09-11）。★**容器は 1280px で止まるのに、余白だけ 4vw で
     伸び続けていた**ので、1280〜1400px の帯では**画面を広げるほど本文が狭くなっていた**
     （実測: 3行でいうとの列が 1300px で 720px → 1400px で 712px）。
     上限を 3.25rem にすると 1300px で余白が止まり、そこから先は本文の幅が動かない。 */
  --gutter:clamp(1.25rem,4vw,3.25rem);
  /* タップ領域の下限を変えないため、--tap は 44px のままにする。 */
  --tap:44px; --r:10px;
}
/* 配色= 明るい／暗い（data-theme。未設定なら OS に従う）
   背景= 白（既定）／グレー／キナリ（明るい配色）・ダーク（既定）／黒（暗い配色）。data-paper
   ダーク・黒を選ぶと JS が配色を暗いにする（逆も同様） */
:root[data-paper="cool"]:not([data-theme="dark"]){ --paper:#F4F5F7; --tint:#E9EBEE; --soft:#D3D6DA; --ink-2:#666B70; --fg-sub:#3C4045; }
:root[data-paper="kinari"]:not([data-theme="dark"]){ --paper:#F8F6F3; --tint:#EFEBE4; --ink:#231815; --ink-2:#6F6A64; --soft:#D9D4CC; --fg-sub:#443C36; }
:root[data-theme="dark"], :root[data-paper="dark"], :root[data-paper="black"]{ --paper:#17181A; --tint:#212326; --mark:#3A3F46; --ink:#E8E4DE; --ink-2:#A39E97; --soft:#34373B; --bg:var(--paper); --fg:var(--ink); --fg-muted:var(--ink-2); --fg-sub:#CFCBC5; }
:root[data-paper="black"]:not([data-theme="light"]){ --paper:#000; --tint:#111; --mark:#33373C; --ink:#D6D2CC; --ink-2:#8E8A85; --soft:#2A2A2A; --fg-sub:#BDB9B4; }
/* ★画像の減光はここにあったが（黒だけ .85）、下の --img-dim へ統合した（2026-09-07・`41` §3-5）。
   ここに残すと特異度（0,2,1）が下の `img:not(.fig__dark)`（0,1,1）に勝ってしまい、
   **黒のときだけ変数が効かない**（実測で踏んだ）。設定の「そのまま」も効かなくなる。 */
:root[data-size="large"]{--fs-scale:1.125}:root[data-size="xlarge"]{--fs-scale:1.25}
/* ★モバイルの本文サイズ（2026-09-06 実測で 17px→16px）。
   実測（390px・shot-scraper）= こここ 15.65px／soar 16px／buncomo 14px／lofir.net 13.8px に対し、
   なみのまは 17px と 1〜3px 大きかった。**字/行（19.6字）と行間（2.0）は各社と同じ**で、
   大きく見えていたのは文字サイズそのもの。
   ★下限は 16px に留める（`12` の読者要件＝ブレインフォグ・頚部の負担。小さくする方向の実験はしない）。
   文字サイズ切替（大＝1.125／特大＝1.25）は倍率なので、この上に乗る（16→18／20px）。 */
@media (max-width:47.99em){ :root{ --fs-body:1rem; } }
@media (prefers-color-scheme:dark){ :root:not([data-theme]):not([data-paper]){ --paper:#17181A; --tint:#212326; --mark:#3A3F46; --ink:#E8E4DE; --ink-2:#A39E97; --soft:#34373B; --bg:var(--paper); --fg:var(--ink); --fg-muted:var(--ink-2); --fg-sub:#CFCBC5; } }

/* ---------- 動き: 既定で停止 ---------- */
:root:not([data-motion="on"]) *, :root:not([data-motion="on"]) *::before, :root:not([data-motion="on"]) *::after{ transition:none!important; animation:none!important; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none!important; animation:none!important; } }
:root[data-motion="on"] a, :root[data-motion="on"] .card img{ transition:opacity .2s; }
:root[data-motion="on"] .card a:hover img{ opacity:.9; }

/* ---------- ベース ---------- */
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-ja); font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body); line-break:strict; overflow-wrap:break-word; }
img,video{max-width:100%;height:auto;display:block}
a{color:inherit; text-underline-offset:.2em; text-decoration-thickness:1px; text-decoration-skip-ink:auto}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.en{ font-family:var(--font-en); }
/* 本文へスキップ（WCAG 2.4.1 / 26 第8条「ページ先頭の本文へスキップ」）。
   ★フォーカスが当たっているあいだだけ見える。外れれば消える。
   position を absolute → **fixed** に変更（2026-09-05）:
     absolute だと画面を下へ送った状態でフォーカスが来たとき、
     ブラウザがページを先頭まで引き戻してしまう。fixed なら画面はそのまま。
   見た目は他の操作要素（ピル）と揃える＝1px の墨枠・角丸・44px の高さ。 */
.skip-link{ position:fixed; inset-block-start:.75rem; inset-inline-start:-999px; z-index:200;
  display:inline-flex; align-items:center; min-height:var(--tap); padding:0 1.2rem;
  background:var(--bg); color:var(--fg); border:1px solid var(--ink); border-radius:999px;
  font:700 .82rem/1 var(--font-ja); letter-spacing:.08em; text-decoration:none; }
.skip-link:focus{ inset-inline-start:.75rem; }
.skip-link:hover{ background:var(--tint); }
.wrap{ max-width:var(--measure); margin-inline:auto; padding:0 var(--gutter); }
.wrap-wide{ max-width:var(--wide); margin-inline:auto; padding:0 var(--gutter); }

/* 線の規則（24 §7-3）
   実線 1px = 領域の境界（ヘッダー/フッター・見出しの下・サイドバーの縦罫）と、行リストの「行と行の間」
   破線 1px = 同じ領域の中の小さな区切り（カードの段の間・柱書きの間・要点の帯）
   近接: 線と線の間は本文1行分（≈2rem）以上。リストの最上部・最下部に線を引かない（見出しの下罫・余白が境界を兼ねる）
   平行する線を2本続けない。縦罫と横罫を接触させない。太さは 1px 以外を使わない */
.rule{ border:0; border-top:1px solid var(--ink); margin:0; }
.rule--dash{ border-top-style:dashed; }

/* ピル（1px の枠・角丸） */
.pill{ display:inline-flex; align-items:center; justify-content:center; gap:.7rem; min-height:var(--tap); padding:0 1.5rem; border:1px solid var(--ink); border-radius:999px; background:var(--bg); color:var(--fg); text-decoration:none; font:700 .88rem/1 var(--font-ja); letter-spacing:.08em; cursor:pointer; }
.pill--fill{ background:var(--ink); color:var(--bg); }
.pill .ar{ font-family:var(--font-en); font-weight:700; }

/* ---------- お楽しみの帯（トップ・2026-09-06） ----------
   ★記事カードの並びに混ぜない。1px の枠を1つ置くだけで、面の色も影も使わない（26 第3・4条）。
   ★動かない。ホバーで変わらない。 */
.sec--play{ padding-block:1rem; }
.play{ border:1px solid var(--ink); border-radius:var(--r); padding:clamp(1.4rem,3vw,2.2rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,15rem); gap:clamp(1.2rem,3vw,2.5rem); align-items:center; }
.play__label{ display:flex; align-items:baseline; gap:.7rem; margin:0 0 .7rem; }
.play__label .en{ font:800 .72rem/1 var(--font-en); letter-spacing:.14em; color:var(--fg-muted); }
.play__label .ja{ font:700 .78rem/1 var(--font-ja); letter-spacing:.1em; }
.play__h{ font-size:1.35em; line-height:1.5; letter-spacing:.04em; margin:0 0 .8rem; font-weight:700; text-wrap:balance; }
.play__lede{ margin:0 0 .6rem; max-width:var(--measure); }
.play__note{ margin:0 0 1.2rem; font-size:.82rem; line-height:1.9; color:var(--fg-muted); }
.play__more{ margin:0; }
/* ★線の色（2026-09-07・okada 指摘「薄すぎて見えない」）。
   --soft は**表の中の細い罫**のための色で、実測コントラストは 1.34〜1.49（5配色とも）。
   ＝ 図として見えていなかった。非文字のコントラスト（WCAG 2.2 の 1.4.11）は 3:1 が要る。
   → --fg-muted（本文より弱いが読める墨）にする。★--soft を「絵の線」に使わない。 */
/* ---------- 暗い配色のときは、画像の明るさを落とす（2026-09-07・`41` §3-5・okada 案） ----------
   ★写真も挿絵も「紙の色ごと」明るく写っている。第5条で黒を選べるようにしているのに、
     画像だけがその選択に従わず、**発光を止めたくて黒にした人に光を返していた**。
   ★解き方: 画像を2枚用意するのではなく、**暗い配色のときだけ CSS で落とす**。
     `brightness()` は各チャンネルの掛け算なので、白地 98% は 0.75 倍で 73% になる
     ＝「グレー地の画像を作る」のと数学的に同じことを、**明るい配色の見え方を犠牲にせずに**できる。
     しかも**既存の画像を1枚も作り直さずに効く**（写真にも効く）。
   ★除外は1つだけ＝ `.fig__dark`（暗い配色用に撮ってある画像。さらに落とすと沈む）。
   ★これはアニメーションではない（`26` 第6条に触れない）。値は `--img-dim` で1か所。
   ★条件は下の配色切替の :root 群と同じ形。増やすときは定義側と必ず同時に直す。 */
:root{ --img-dim:1; }
/* 暗い配色。★条件は上の配色切替と**同じ形**にそろえてある（増やすときは必ず同時に直す） */
/* ★値の意味は「掛け算の係数」ではなく「**暗い配色で地が 68% 前後に見えること**」。
   2026-09-07 に元画像を 6% 明るくした（明るい配色でもう少し明るく＝okada）ので、
   暗い側の見えを変えないよう **.75 → .71 / .62 → .59** に引き直した。
   ★元画像の明るさを変えたら、ここも必ず引き直す（片方だけ動かすと暗い側がずれる）。 */
:root[data-theme="dark"], :root[data-paper="dark"], :root[data-paper="black"]{ --img-dim:.71; }
/* ★黒はいちばん強く落とす。発光そのものを止めたくて選ぶ紙なので、
   ダーク（#17181A）より一段暗くしないと画像だけが浮く。 */
:root[data-paper="black"]:not([data-theme="light"]){ --img-dim:.59; }
@media (prefers-color-scheme:dark){ :root:not([data-theme]):not([data-paper]){ --img-dim:.71; } }
/* 明るい3枚（白・グレー・キナリ）は等倍。★実測で紙と画像の差が 2〜3 ポイントしかなく、
   掛けても見て分からない＝「調整しない」が調整の結果である。 */
img:not(.fig__dark){ filter:brightness(var(--img-dim)); }
/* ★読者が「そのまま」を選んだら、元の色で出す（`41` §3-5・okada 案）。
   既定は「なじませる」。元の色を見たい人のための逃げ道を1つだけ置く。 */
:root[data-img="off"] img{ filter:none; }

/* ---------- 図版ごとの「元の色」トグル（2026-09-07・`41` §3-5c・okada 案） ----------
   ★なぜ設定パネルだけでは足りないか: 元の色を見たくなるのは**記事を読んでいて画像が出てきた瞬間**で、
     そのために画面の隅の設定まで視線と手を往復させるのは、この読者に最も避けさせたい動作（`12` B-4・B-5）。
   ★出るのは**暗い配色のときだけ**（明るい配色では画像に何もしていないので、外すものが無い）。
   ★ボタンは 44px（`26` 第8条の例外を作らない）。色は使わず、線と面だけ。動きも作らない。 */
:root{ --img-toggle:none; }
:root[data-theme="dark"], :root[data-paper="dark"], :root[data-paper="black"]{ --img-toggle:inline-flex; }
@media (prefers-color-scheme:dark){ :root:not([data-theme]):not([data-paper]){ --img-toggle:inline-flex; } }
.content figure.kg-image-card{ position:relative; }
/* ★アイコンだけにした（2026-09-07・okada「絵を隠しすぎている」）。
   文字のピル（67x44）→ 44px の丸。面積は 2,948 → 約 1,520px^2 で**半分以下**。
   ★押せる範囲は 44px のまま（`26` 第8条を割らない）＝ 見た目を小さくして当たり判定は縮めない。
   ★マークは表示設定と同じ「半分塗った丸」。同じ家族の道具だと分かるほうがよい（okada 案）。
     押すと塗る側が左右で入れ替わる＝**いまどちらの状態か**が形で分かる（色を使わない・`26` 第4条）。 */
.fig-raw{
  display:var(--img-toggle); align-items:center; justify-content:center;
  position:absolute; top:.15rem; right:.15rem; z-index:1;
  width:var(--tap); height:var(--tap); padding:0; border:0; background:none;
  color:var(--fg-muted); cursor:pointer;
}
/* ★見えるのは 32px の丸だが、押せる範囲は上の 44px（`26` 第8条）。
   ボタン自体を小さくせず、**余白で稼ぐ**＝見た目を軽くしても当たり判定は縮めない。 */
.fig-raw__c{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border:1px solid var(--soft); border-radius:50%; background:var(--bg);
}
.fig-raw:hover .fig-raw__c, .fig-raw:focus-visible .fig-raw__c{ border-color:var(--ink); color:var(--fg); }
.fig-raw svg{ display:block; }
/* ★この2つは :root[data-img="off"] img (0,2,1) と .fig--themed の規則に勝つ必要があるので
   :root を1つ足して (0,3,1) にしてある。!important は使わない。 */
:root figure[data-img-raw="1"] img{ filter:none; }
:root figure[data-img-raw="0"] img{ filter:brightness(var(--img-dim)); }

/* ---------- 明暗で差し替える図（2026-09-07・`36` §3-6） ----------
   ★画面のスクリーンショットは**紙の色ごと写っている**ので、暗い配色のまま出すと白い板が光る。
     線画（.play__fig の SVG）は currentColor で反転するが、写真は反転しない。
   ∴ 明るい版と暗い版を両方置き、配色に合わせて片方だけ出す。
   ★display:none のほう（lazy 付き）は、ふつうブラウザが読み込まない＝二重に落ちない。
   ★条件は main.css の配色切替（下の :root 群）と同じ形にそろえてある。
     ここを増やすときは、配色の定義側と**必ず同時に**直す（片方だけだと無音でずれる）。 */
.fig--themed .fig__dark{ display:none; }
:root[data-theme="dark"] .fig--themed .fig__light,
:root[data-paper="dark"] .fig--themed .fig__light,
:root[data-paper="black"] .fig--themed .fig__light{ display:none; }
:root[data-theme="dark"] .fig--themed .fig__dark,
:root[data-paper="dark"] .fig--themed .fig__dark,
:root[data-paper="black"] .fig--themed .fig__dark{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme]):not([data-paper]) .fig--themed .fig__light{ display:none; }
  :root:not([data-theme]):not([data-paper]) .fig--themed .fig__dark{ display:block; }
}

.play__fig{ color:var(--fg-muted); }
.play__fig svg{ display:block; width:100%; height:auto; }
@media (max-width:47.99em){
  .play{ grid-template-columns:1fr; }
  .play__fig{ order:-1; max-width:16rem; }
}

/* ---------- 広告表示と商品（2026-09-06・`37`） ----------
   ★ステマ規制（景表法の指定告示・2023年10月〜）＝広告であることを**冒頭に**出す。
   目立たせるために色を使わない（26 第4条）。上下の 1px 罫と太字だけで区別する。 */
/* ★★クラス名に "ad" を入れない（2026-09-10・okada 実機で発覚）。
   `.ad-notice` は **EasyList の `##.ad-notice`（全サイト対象の非表示ルール）に載っている**ため、
   広告ブロッカーを入れたブラウザ（Brave・Comet 等）で**ステマ規制の表示だけが消えていた**。
   Safari / Chrome では出ていたので、作った側からは見えない事故だった。
   ∴ **クラスをやめて属性で書く**（フィルタはクラスと id を狙う。data-* は当たりにくい）。
   ★直すときは、生成器3本（gen-preview-posts / gen-preview-pages / product_cards）と
     **本文（post_content）も一緒に**直すこと。HTML は DB の中にある。 */
[data-disclosure]{ margin:0 0 2rem; padding:.9rem 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font-size:.86em; line-height:1.9; }
[data-pr]{ display:inline-block; margin-inline-start:.4em; padding:.1em .5em; border:1px solid var(--ink); border-radius:3px; font:700 .68rem/1.6 var(--font-ja); letter-spacing:.06em; vertical-align:.08em; }

/* 手ならしの「型」の表＝1列目が2〜3字なので、折り返させない（24 §8-3 の1字折返しを防ぐ）*/
.content .tbl-mode tbody th{ white-space:nowrap; width:4.5em; }

/* ★広告カード（2026-09-07・okada 指摘「どれを押せばいいか分からない／広告が埋もれる」）。
   目立たせるのに色は使わない（26 第4条）。使うのは **枠・面積・余白** の3つだけ:
     ① 1px の枠で本文から切り離す（＝ここは編集部の文章ではない、と形で分かる）
     ② 「広告」の札を**カードの1行目**に置く（ステマ規制＝景表法の指定告示・2023年10月〜）
     ③ ボタンを幅いっぱい・高さ 3.2rem にする。押す所が1つしか無い状態を作る
   ★画像は自前のものだけ（外部の画像を読み込むと、押す前に読者の IP が相手に渡る＝
     policy-external「押したときだけ」の約束が崩れる）。画像が無ければ枠ごと出さない。 */
.content .buycard{ border:1px solid var(--ink); padding:1.2rem; margin-block:2.6rem; }
.content .buycard__mark{ margin:0 0 1rem; padding-bottom:.75rem; border-bottom:1px dashed var(--soft);
  font:700 .78rem/1.7 var(--font-ja); letter-spacing:.06em; }
.content .buycard__mark [data-pr]{ margin-inline:0 .6em; }
.content .buycard__main{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-start; }
.content .buycard__fig{ flex:0 0 8.5rem; margin:0; }
.content .buycard__fig img{ display:block; width:100%; height:auto; border:1px solid var(--soft); }
.content .buycard__fig figcaption{ margin:.4rem 0 0; font:600 .68rem/1.5 var(--font-ja); color:var(--fg-muted); }
.content .buycard__txt{ flex:1 1 14rem; }
.content .buycard__txt > p{ margin:0; }
.content .buycard__name{ font:700 1.1rem/1.55 var(--font-ja); letter-spacing:.02em; }
.content .buycard__sub{ margin-top:.3rem !important; font:600 .74rem/1.6 var(--font-ja);
  letter-spacing:.06em; color:var(--fg-muted); }
.content .buycard__what{ margin-top:.7rem !important; font-size:.9em; line-height:1.9; }
.content .buycard__price{ margin-top:.5rem !important; font-size:.8em; line-height:1.8; color:var(--fg-muted); }
.content .buycard__go{ margin:1.2rem 0 0; }
.content .buycard__go .pill{ width:100%; min-height:3.2rem; padding-inline:1rem;
  font-size:.95rem; text-decoration:none; }
.content .buycard__note{ margin:.85rem 0 0; font-size:.78em; line-height:1.95; color:var(--fg-muted); }
.content .buycard__note a{ color:inherit; }

/* 行き先の表＝「どこへ行くか」と「そこで何ができるか」を列にする。
   ★1列目のリンクは**セルいっぱいの押せる面**にする（44px 以上・12 B5）。
     素の文字が横に並んでいると、押せることも、買うためのものかも分からない。 */
.content .linktbl th[scope="row"]{ width:52%; }
/* ★リンクは block にして、セルの余白ごと押せる面にする（負の margin で外へ広げる）。
   flex にすると「↗」が**単独で次の行に落ちる**（実測 390px）。inline のままにする。 */
.content .linktbl th[scope="row"] a{ display:block; min-height:var(--tap);
  margin:-.75em -.9em; padding:.75em .9em; font-weight:700; }
.content .linktbl .ar{ margin-inline-start:.35em; font-family:var(--font-en); font-weight:700; }
.content .linktbl [data-pr]{ margin-inline-start:.35em; }
.content .linktbl td{ font-size:.94em; }
@media (max-width:47.99em){
  .content .linktbl th[scope="row"]{ width:auto; }
  .content .linktbl th[scope="row"] a{ margin:-.6em -.7em; padding:.6em .7em; }
}

/* 商品一覧の1件 */
.product{ border-top:1px dashed var(--soft); padding-top:1.4rem; margin-block:2.2rem; }
.product h3{ margin-bottom:.4rem; }
.product h3 small{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.06em; color:var(--fg-muted); margin-top:.35rem; }
.product__use{ font-size:.86em; color:var(--fg-muted); }
.product__price{ font-size:.82em; color:var(--fg-muted); }

/* 公式仕様の表（2列・値は等幅数字） */
.content .spec{ font-size:.86em; }
.content .spec caption{ text-align:start; font-size:.78rem; line-height:1.9; color:var(--fg-muted); padding-block:0 .5rem; }
.content .spec th[scope="row"]{ width:9em; font-weight:600; color:var(--fg-muted); }
.content .spec td{ font-variant-numeric:tabular-nums; }
.product__acq{ font-size:.86em; line-height:1.9; }
.product__specnote{ font-size:.82em; line-height:1.9; color:var(--fg-muted); }

/* 手ならしのページに置く道具の並び（ゲームの下） */
.tool-list{ list-style:none; margin:1.4rem 0; padding:0; }
.tool-list li{ border-top:1px dashed var(--soft); padding:1rem 0; margin:0; display:grid; gap:.3rem; }
.tool-list li:last-child{ border-bottom:1px dashed var(--soft); }
.tool-list b{ font-size:1.02em; }
.tool-list small{ font-size:.74rem; letter-spacing:.06em; color:var(--fg-muted); }
.tool-list span{ font-size:.88em; line-height:1.9; }
.tool-list__read{ font-size:.86em; display:block; margin-top:.9em; }
/* ★ボタンにする（2026-09-07）。素の文字を横に並べると、押せる所が見つからない */
.tool-list__links{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.tool-list__links .pill{ font-size:.78rem; padding:0 1.1rem; text-decoration:none; }
.tool-list__links .pill--fill [data-pr]{ border-color:currentColor; }

/* ---------- ヘッダー ---------- */
.site-header{ border-bottom:1px solid var(--ink); }
.site-header__inner{ max-width:var(--wide); margin-inline:auto; padding:1.4rem var(--gutter); display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:1rem; text-decoration:none; color:inherit; }
/* ワードマーク（AB-NeoStencil ＋「の」＝音量のツマミ）。高さで指定し、幅は比率に従う */
.brand__mark{ height:2rem; flex:none; display:block; } .brand__mark .wordmark{ height:100%; width:auto; display:block; }
.brand__desc{ display:block; font-size:.72rem; color:var(--fg-muted); letter-spacing:.08em; font-weight:600; padding-top:.15rem; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:48em){ .brand__desc{ display:none; } }
.site-nav{ margin-inline-start:auto; } .site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:1.3rem; flex-wrap:wrap; }
.site-nav a{ display:inline-flex; align-items:center; min-height:var(--tap); text-decoration:none; font-size:.9rem; font-weight:700; letter-spacing:.08em; border-bottom:1px solid transparent; }
.site-nav a[aria-current="page"], .site-nav a:hover{ border-bottom-color:var(--ink); }
/* 表示設定（ピル） */
/* ★表示設定は**画面の右下に浮かせる**（2026-09-06・okada 指摘）。
   直す前はヘッダーの中にあり、**少しスクロールすると見えなくなっていた**＝
   眩しい・文字が小さいと感じたその場で直せない。この読者にとっては本文と同じくらい大事な操作なので、
   いつでも手が届く位置に置く。
   ★右下にしたのは「トップへ」と同じ列に積むため（操作は1か所にまとめる）。
   ★DOM 上はヘッダーの中に置いたまま（読み上げの順番＝ページの操作として先に読まれる）。 */
/* ★2026-09-09 修正（監査 05）。計測案内（.notice-bar・画面下いっぱい）と
   「表示設定」「上へ」が**互いの存在を知らずに**画面の下に置かれていて重なっていた。
   実測（390×844）= 計測ボタン x170.03〜326.48 / y752.53〜796.53 に対し
   表示設定 x259.69〜374 / y784〜828 ＝ 約 66.8×12.5px 重複（360・430px でも同じ）。
   ★案内の高さは文言の折り返しで変わるので固定値では合わない。JS が実測して変数に入れる
     （main.js の initNotice が --nm-notice-h を書く。案内が無いときは 0px）。 */
.switch{ position:fixed; right:1rem; bottom:calc(1rem + var(--nm-notice-h, 0px)); z-index:61; }
.switch summary{ list-style:none; } .switch summary::-webkit-details-marker{ display:none; }
.dot-btn{ gap:.5rem; min-height:var(--tap); padding:0 1.1rem 0 .9rem; border-radius:999px; border:1px solid var(--ink); background:var(--ink); color:var(--bg); font:700 .8rem/1 var(--font-ja); letter-spacing:.1em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
/* ★下から上へ開く（ボタンが画面の下にあるため）。高さが足りないときは中でスクロールする */
.switch__panel{ position:absolute; right:0; top:auto; bottom:calc(100% + .6rem); z-index:50;
  max-height:calc(100vh - 6rem); overflow:auto; background:var(--bg); border:1px solid var(--ink); border-radius:var(--r); padding:.9rem 1rem; width:max-content; max-width:calc(100vw - 2rem); display:grid; gap:.55rem; }
.switch__group{ display:flex; flex-wrap:nowrap; gap:.3rem; align-items:center; }
.switch__label{ width:2.8em; flex:none; font-size:.74rem; color:var(--fg-muted); font-weight:600; letter-spacing:.04em; }
/* ★2026-09-07 修正（12 B5-1 不合格）: 高さ 2.1rem=34px・幅 37px だった。
   ★★表示設定パネルは「困っている人がいちばん使う場所」。ここが 44px を割っているのは方針と逆。
   実測 → 高さ34px が17件・幅37px が3件（「白」「黒」）。--tap（44px）に揃えた。 */
.switch button{ min-height:var(--tap); min-width:var(--tap); padding:0 .9rem; border:1px solid var(--soft); border-radius:999px; background:var(--bg); color:var(--fg); font:600 .76rem/1 var(--font-ja); letter-spacing:.02em; cursor:pointer; white-space:nowrap; }
.switch button[aria-pressed="true"]{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
/* 表示設定パネルの頭（題＋閉じる）。★閉じるは --tap=44px で取る＝上肢の負担への配慮（05 §4）*/
.switch__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:-.15rem 0 .15rem; }
.switch__title{ font:700 .72rem/1 var(--font-ja); letter-spacing:.12em; color:var(--fg-muted); }
.switch button.switch__close{ width:var(--tap); height:var(--tap); min-height:var(--tap); flex:none; padding:0; border-radius:50%; border:1px solid var(--ink); background:var(--bg); color:var(--fg); display:inline-flex; align-items:center; justify-content:center; margin-inline-start:auto; }
.switch button.switch__close:hover{ background:var(--tint); }

/* ★2026-09-09 修正（監査 06）。狭い画面でパネルの右端が切れ、「黒」と閉じるボタンが欠けていた。
   実測（360px・extra.json）= .switch__panel の見える幅 328px に対し
   内側の .switch__head が 348.27px ＝ **20.27px はみ出していた**。
   原因＝「背景」の行が flex-wrap:nowrap で、ラベル ＋ ボタン5個 ＝ 約341px あったこと。
   ★`width:max-content` は**折り返しを許しても1行ぶんの幅を返す**ので、
     wrap を足すだけでは効かない。モバイルでは幅を画面基準で決め打つ。
   ★44px のタップ領域は縮めない（12 B5-1「困っている人がいちばん使う場所」）。段にして逃がす。
   ★ラベルは絶対配置で左に吊るす＝**2行目のボタンの左端が1行目とそろう**
     （素の flex-wrap だと2行目だけ左端まで戻る）。
   ★max-height と overflow:auto は残す＝横向きなど背の低い画面での縦スクロールは失わない。 */
@media (max-width:47.99em){
  .switch__panel{ width:calc(100vw - 2rem); max-width:none; }
  .switch__group{ flex-wrap:wrap; row-gap:.3rem; position:relative; padding-inline-start:2.4rem; }
  .switch__label{ position:absolute; inset-inline-start:0; inset-block-start:.84rem; }
  /* ★2026-09-09（監査 10・okada 決裁）。常設の「表示設定」（幅 約114px）が
     本文の行末に重なり、読むのに追加スクロールが要っていた。
     ★「上へ」は既にモバイルで文字を隠して 44px の丸にしている（main.css:326）。
       **同じ規則を「表示設定」にも当てる**＝占有幅 114px → 44px（約6割減）。新しい概念は増やさない。
     ★文字は消さずに画面外へ置く＝読み上げ・キーボードのための名前は残る（12 B5・.to-top と同じ手）。 */
  .switch__summary.dot-btn span{ position:absolute; left:-9999px; }
  .switch__summary.dot-btn{ width:var(--tap); padding:0; justify-content:center; }
}

/* 丸いアイコンボタン（検索・X）*/
.icon-btn{ width:var(--tap); height:var(--tap); flex:none; border-radius:50%; border:1px solid var(--ink); background:var(--bg); color:var(--fg); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; padding:0; }
.icon-btn:hover{ background:var(--tint); }
/* 今日の日付（buncomo 型）*/
.site-header__utils{ margin-inline-start:auto; display:flex; align-items:center; gap:.6rem; }
.site-date{ display:flex; align-items:center; gap:.25rem; margin:0 .3rem 0 .5rem; font-family:var(--font-en); letter-spacing:-.01em; }
.site-date .m{ font:700 1.35rem/1 var(--font-en); color:var(--fg-muted); }
.site-date .d{ font:800 2rem/1 var(--font-en); }
.site-date .y{ font:700 .68rem/1.25 var(--font-en); letter-spacing:.06em; color:var(--fg-muted); margin-inline-start:.15rem; }
@media (max-width:87.49em){ .site-date{ display:none; } }
@media (max-width:74.99em){ .brand__desc{ display:none; } }
/* 上へ戻る（固定・動きなし）*/
/* ★「トップへ」は表示設定の**上**に積む（表示設定は常に出ている・こちらはスクロール後だけ） */
.to-top{ position:fixed; right:1rem; bottom:calc(1rem + var(--tap) + .6rem + var(--nm-notice-h, 0px)); z-index:60; width:auto; min-height:var(--tap); padding:0 1rem 0 .85rem; display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--ink); border-radius:999px; background:var(--bg); color:var(--fg); text-decoration:none; font:700 .78rem/1 var(--font-ja); letter-spacing:.08em; }
.to-top[hidden]{ display:none!important; }
.to-top:hover{ background:var(--ink); color:var(--bg); }
@media (max-width:40em){ .to-top span{ position:absolute; left:-9999px; } .to-top{ width:var(--tap); padding:0; justify-content:center; } }
@media print{ .to-top{ display:none!important; } }

/* タグのピル（gizmodo 型。色は付けずティント面） */
.tag-pill{ display:inline-flex; align-items:center; min-height:2.2rem; padding:0 .8rem; margin:0 .4rem .45rem 0; border:1px solid var(--soft); border-radius:999px; background:var(--tint); color:var(--fg); text-decoration:none; font:600 .78rem/1 var(--font-ja); letter-spacing:.04em; }
.tag-pill:hover{ border-color:var(--ink); }
/* MENU ピル */
.menu-btn{ gap:.8rem; padding:0 1.1rem 0 1.3rem; font-family:var(--font-en); text-transform:uppercase; letter-spacing:.12em; } .menu-btn .dots{ letter-spacing:.05em; }
/* メガメニュー（<dialog>。動きなし） */
.menu{ width:min(100vw - 2rem, 80rem); max-height:calc(100vh - 2rem); margin:auto; padding:0; border:1px solid var(--ink); border-radius:var(--r); background:var(--bg); color:var(--fg); overflow:auto; }
.menu::backdrop{ background:rgba(31,34,38,.45); }
.menu__inner{ padding:1.6rem var(--gutter) 2.4rem; }
.menu__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1.2rem; border-bottom:1px solid var(--ink); }
.menu__cols{ display:grid; grid-template-columns:1fr; gap:2rem 3rem; padding-top:1.6rem; }
@media (min-width:48em){ .menu__cols{ grid-template-columns:repeat(2,1fr); } }
/* ★4列のまま。分類は5つだが、子は「検索＋5列」の6個なので 4列だと [検索][読む][知る][使う]
   ／[関わる][編集部] の2行に落ちる。5列にすると幅が 249px→181px になり、
   ★9項目が2行に折り返した（2026-09-10 実測）。行数は4列でも変わらないので、読みやすさを採る。 */
@media (min-width:75em){
  .menu__cols{ grid-template-columns:1.1fr 1fr 1fr 1fr; }
  /* ★検索の列を2行ぶんにする（2026-09-11・okada 指示）。
     > 関わると編集部の2つが今下にあるやつを、この読むのラインに揃えてください。
     ★これが無いと、2行目が**検索の下から**始まるので
     「関わる」が検索の下・「編集部」が読むの下、と**1つずつ横にずれて**いた。
     ★検索の下に空きができるが、そこは**検索結果とタグが伸びる場所**（okada 判断）。 */
  .menu__col--find{ grid-row:1 / span 2; }
}
/* 検索（メニューの中で完結する。2026-09-05 にヘッダーから移設）*/
.menu__search{ margin:0 0 .9rem; }
.menu__search-label{ display:block; font:700 .72rem/1 var(--font-ja); letter-spacing:.12em; color:var(--fg-muted); margin-bottom:.5rem; }
.menu__search-field{ display:flex; align-items:center; gap:.55rem; border:1px solid var(--ink); border-radius:999px; padding:0 .6rem 0 .95rem; background:var(--bg); }
.menu__search-field:focus-within{ outline:2px solid var(--ink); outline-offset:2px; }
.menu__search-field svg{ flex:none; color:var(--fg-muted); }
.menu__search-input{ flex:1 1 auto; min-width:0; min-height:var(--tap); border:0; background:transparent; color:var(--fg); font:600 .95rem/1.4 var(--font-ja); letter-spacing:.02em; }
.menu__search-input:focus{ outline:none; }
.menu__search-input::placeholder{ color:var(--fg-muted); font-weight:600; }
.menu__search-input::-webkit-search-cancel-button{ display:none; }
.menu__search-clear{ flex:none; width:2rem; height:2rem; border:0; border-radius:50%; background:transparent; color:var(--fg-muted); font-size:1.1rem; line-height:1; cursor:pointer; }
.menu__search-clear:hover{ background:var(--tint); color:var(--fg); }
.menu__results{ margin:0 0 1.2rem; }
.menu__results-h{ margin:.9rem 0 .3rem; font:800 .7rem/1 var(--font-en); letter-spacing:.16em; color:var(--fg-muted); }
.menu__results ul{ list-style:none; margin:0; padding:0; }
.menu__results li{ border-top:1px solid var(--soft); }
.menu__results a{ display:block; padding:.7rem 0; text-decoration:none; color:var(--fg); }
.menu__results a:hover b{ text-decoration:underline; }
.menu__results b{ display:block; font-size:.92rem; line-height:1.6; letter-spacing:.03em; }
.menu__results small{ display:block; margin-top:.2rem; font-size:.78rem; line-height:1.7; color:var(--fg-muted); }
.menu__results .gate{ margin-inline-start:.5rem; font:700 .66rem/1 var(--font-ja); letter-spacing:.08em; color:var(--fg-muted); white-space:nowrap; }
.menu__results-empty{ margin:.9rem 0 0; font-size:.85rem; color:var(--fg-muted); }
.menu__results-more{ margin:.5rem 0 0; font-size:.78rem; color:var(--fg-muted); }

/* 用語集（1語1ページ・頭文字・キーワード検索）*/
.glossary-find{ margin:2rem 0 1.2rem; max-width:32em; }
/* 分類の絞り込み（2026-09-06・語が93になり頭文字だけでは辿れなくなった）。
   ★頭文字より**上**に置く＝「まず面で絞る／次に五十音で探す」の順。 */
.glossary-kinds{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.4rem 0 .6rem; }
.glossary-kinds .tag-pill{ font:inherit; cursor:pointer; }
.glossary-kinds .tag-pill[aria-current="true"]{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.glossary-kindnote{ margin:.2rem 0 1rem; font-size:.85rem; line-height:1.9; color:var(--fg-muted);
  border-inline-start:2px solid var(--rule); padding-inline-start:.9rem; }
.glossary-initials{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .4rem; }
.glossary-initials .tag-pill[aria-current="true"]{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.glossary-count{ margin:.2rem 0 0; font-size:.8rem; color:var(--fg-muted); }
.content .glossary-list{ list-style:none; margin:.6rem 0 0; padding:0; }
.content .glossary-list li{ border-top:1px dashed var(--ink); padding:.9rem 0; margin:0; }
.content .glossary-list a{ text-decoration:none; }
.content .glossary-list b{ font-size:1.02em; line-height:1.6; letter-spacing:.03em; text-decoration:underline; text-underline-offset:.28em; }
.content .glossary-list small{ display:block; margin-top:.35em; font-size:.85em; line-height:1.8; color:var(--fg-muted); }
/* 出典（1語1ページの下段）。★リンクと「存在確認 <日付>」の2段。
   .glossary-list と同じ破線区切りで、用語一覧と地続きに見せる。
   ★ここは自前の体裁を持つので、下の ul 共通ルールから除外する。 */
.content .glossary-cite{ list-style:none; margin:.6rem 0 0; padding:0; }
.content .glossary-cite li{ border-top:1px dashed var(--ink); padding:.8rem 0; margin:0; }
.content .glossary-cite li::before{ content:none; }
.content .glossary-cite a{ text-underline-offset:.24em; }
.content .glossary-cite small{ display:block; margin-top:.3em; font-size:.82em;
  line-height:1.8; color:var(--fg-muted); }
.glossary-yomi{ font:600 .8rem/1 var(--font-ja); letter-spacing:.16em; color:var(--fg-muted); }
/* ★2026-09-08（okada 指摘「前の用語・後ろの用語のバランスが悪い」）:
   3つとも左に寄っていた（flex ＋ gap だけだったため）。
   **前＝コンテンツ幅の左端／一覧＝中央／次＝右端** に置く。
   ★3列のグリッドで**列を明示**する。space-between だと、前や次が無いページ
     （用語集の先頭・末尾。実測で2枚ある）で中央がずれる。 */
.glossary-nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:.6rem 1.2rem; font-size:.85rem; }
.glossary-nav__prev { grid-column:1; justify-self:start;  text-align:start; }
.glossary-nav__index{ grid-column:2; justify-self:center; text-align:center; }
.glossary-nav__next { grid-column:3; justify-self:end;    text-align:end; }
/* 狭い画面では3列に押し込まない。前／次を左右に並べ、一覧はその下の中央 */
@media (max-width:47.99em){
  /* ★2026-09-09 修正（監査 03）。2列に変えたのに `__next{ grid-column:3 }` を**戻し忘れていた**。
     ブラウザが**暗黙の3列目**を作り、その列が「次の用語」の内容幅を取るので、
     `1fr 1fr` が潰れていた。実測（390px・コンテナ 350px）= 31.63 / 17.44 / 262.56px
     ＝ 前リンクが約2字ずつ7行に折れ、高さ 190.31px になっていた。
     ★minmax(0,1fr) にするのは、1fr の既定（min-width:auto）だと
       長い用語名で同じ不均衡が再発するため。 */
  .glossary-nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .glossary-nav__next { grid-column:2; }
  .glossary-nav__index{ grid-column:1 / -1; grid-row:2; }
}

/* 前編／後編（長い全編を分割したときの案内）。★壁に見せない＝上下1px の罫だけ */
.parts{ margin:2.6rem 0; padding:1.4rem 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.parts__h{ margin:0 0 .4rem; font:700 .95rem/1.6 var(--font-ja); letter-spacing:.04em; }
.parts__note{ margin:0 0 1rem; font-size:.85rem; line-height:1.9; color:var(--fg-muted); }
.parts__go{ margin:0; }
.menu__tags{ margin:0; } .menu__note{ margin:.6rem 0 0; font-size:.76rem; color:var(--fg-muted); letter-spacing:.04em; }
.menu__h{ display:flex; align-items:baseline; gap:.7rem; margin:0; padding-bottom:.7rem; border-bottom:1px solid var(--ink); }
.menu__h .ja{ font:800 1.15rem/1 var(--font-ja); letter-spacing:.12em; } .menu__h .en{ font:700 .68rem/1 var(--font-en); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-muted); }
.menu__list{ list-style:none; margin:0; padding:0; }
.menu__list li+li{ border-top:1px solid var(--soft); }
.menu__list a{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; min-height:var(--tap); padding:.8rem 0; text-decoration:none; }
.menu__list b{ font:700 .98rem/1.4 var(--font-ja); letter-spacing:.06em; } .menu__list small{ font:600 .62rem/1.4 var(--font-en); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-muted); }
.menu__list a:hover b{ text-decoration:underline; text-underline-offset:.25em; }

/* ---------- 見出しの語彙 ---------- */
.sec{ padding:5rem 0 0; }
.sec__h{ display:flex; align-items:baseline; gap:1rem; margin:0 0 2.6rem; padding-bottom:.9rem; position:relative; }
.sec__h::after{ content:""; position:absolute; left:calc(50% - 50vw); right:calc(50% - 50vw); bottom:0; border-top:1px solid var(--ink); }
/* 縦の線は横の線と交差する所で止める（サイドバーの縦罫は見出しの下罫より下から始まる） */
.sec__h .en{ font:800 1.4rem/1 var(--font-en); letter-spacing:.08em; text-transform:uppercase; }
.sec__h .ja{ font:600 .85rem/1 var(--font-ja); letter-spacing:.1em; color:var(--fg-muted); }
.sec__h .ja::before{ content:"──"; margin-inline-end:.8em; color:var(--ink); }
.sec__h .rt{ margin-inline-start:auto; font:600 .8rem/1 var(--font-ja); letter-spacing:.08em; text-decoration:none; }
.sec__lede{ margin:0 0 2rem; max-width:var(--measure); color:var(--fg-muted); font-size:.95rem; }
/* 大見出しの上の短いダッシュ（buncomo） */
.dash::before{ content:""; display:block; width:1.25rem; height:4px; background:var(--ink); margin-bottom:1rem; }
/* 縦のセクション札（左端・buncomo「WEB MAGAZINE」） */
.sec--label{ position:relative; }

/* ---------- トップ: ヒーロー（左 文／右 ピックアップ） ---------- */
.hero{ max-width:var(--wide); margin-inline:auto; padding:3rem var(--gutter) 0; display:grid; grid-template-columns:1fr; gap:3rem; align-items:start; }
@media (min-width:62em){ .hero{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:4rem; } }
.hero__series{ display:flex; align-items:center; gap:.6rem; margin:0 0 1.6rem; font:600 .8rem/1 var(--font-ja); letter-spacing:.1em; }
.hero__series::before{ content:""; width:.45em; height:.45em; border-radius:50%; background:var(--ink); }
/* ★clamp の真ん中は vw（画面幅由来）なので、:root の倍率に乗らない。
   広い画面では上限に張り付き、★見出しだけ拡大が効かなくなる（2026-09-10 実測）。
   → 真ん中に --fs-scale を掛けて、3つの値すべてが倍率に乗るようにした。 */
.hero h1{ margin:0; font-size:clamp(1.9rem,calc(3.4vw * var(--fs-scale)),2.6rem); line-height:1.55; letter-spacing:.06em; font-weight:700; text-wrap:balance; }
.hero__lede{ margin:1.8rem 0 0; max-width:var(--measure); color:var(--fg); }
/* 看板（統計の非存在）。リードより一段小さく、事実として置く。
   ★2026-09-06: FV 左カラムを再設計した。「特集｜…」と名乗っていたが、
   **特集という単位がサイトに無い**（タグは 記録／稼働設計／暮らし の3つだけ）。
   CTA も「編集部について」で、初めて来た人の次の一歩になっていなかった。
   右カラムのピック記事が「最初の1本」を担うので、左は
   【誰が】【何を書いている場所か】【なぜそれが要るのか】に絞り、
   行き先は **この病気について**（前提を知りたい人）と **企業・人事の方へ**（もう一方の読者）にした。 */
.hero__note{ margin:1.2rem 0 0; max-width:30em; color:var(--fg-muted); font-size:.92rem; line-height:1.95; }
.hero__more{ margin:2rem 0 0; display:flex; flex-wrap:wrap; gap:.7rem; }
/* ピックアップ（アイキャッチ＋大きな日付＋題） */
.pick{ display:block; text-decoration:none; }
/* ピックアップは画像→日付→題までが1つの塊。左の縦罫で括る（横罫とは接触しない） */
@media (min-width:62em){ .pick{ border-left:1px solid var(--ink); padding-left:2.5rem; } .hero{ gap:0 3rem; } }
.pick__thumb{ overflow:hidden; border-radius:var(--r); } .pick__thumb img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.pick__series{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; margin:1.4rem 0 0; padding-top:1.2rem; border-top:1px solid var(--ink); font:600 .82rem/1.5 var(--font-ja); letter-spacing:.08em; }
.pick__series .cat::before{ content:"●"; font-size:.6em; margin-inline-end:.6em; vertical-align:.15em; }
.pick__series .tags{ color:var(--fg-muted); font-style:italic; font-weight:500; }
.pick__title{ margin:.8rem 0 0; font-size:clamp(1.35rem,calc(2.2vw * var(--fs-scale)),1.7rem); line-height:1.6; letter-spacing:.05em; font-weight:700; text-wrap:balance; }
.pick__by{ display:flex; align-items:center; gap:.6rem; margin:1rem 0 0; font:600 .8rem/1 var(--font-ja); letter-spacing:.06em; }
.pick__by .credits__avatar{ width:2rem; height:2rem; }
.pick__by .name{ font-weight:700; }
.pick__by .date{ margin-inline-start:auto; font-family:var(--font-en); color:var(--fg-muted); letter-spacing:.06em; white-space:nowrap; } .pick__by .date b{ font-weight:700; color:var(--fg); margin-inline-start:.5em; text-transform:uppercase; }
.pick:hover .pick__title{ text-decoration:underline; text-underline-offset:.25em; }

/* ---------- カード（buncomo 型: 画像 → 1px の枠の本文箱が画像の下辺に重なる） ---------- */
.grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:3rem 2.5rem; }
@media (min-width:40em){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:62em){ .grid{ grid-template-columns:repeat(3,1fr); } .grid--2{ grid-template-columns:repeat(2,1fr); } }
.grid>li{ padding-bottom:3rem; border-bottom:1px dashed var(--ink); }
@media (min-width:62em){ .grid>li:nth-last-child(-n+3){ border-bottom:0; padding-bottom:0; } .grid--2>li:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; } .grid--2>li:nth-last-child(3){ border-bottom:1px dashed var(--ink); padding-bottom:3rem; } }
@media (max-width:61.99em){ .grid>li:last-child{ border-bottom:0; padding-bottom:0; } }
.card a{ display:block; text-decoration:none; color:inherit; }
.card__thumb{ overflow:hidden; border-radius:var(--r); background:var(--tint); }
.card__thumb img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.card__thumb--color{ aspect-ratio:16/10; }
.card__body{ position:relative; margin:-2.2rem 1.2rem 0 1.2rem; background:var(--bg); border:1px solid var(--ink); border-radius:var(--r); padding:1.1rem 1.2rem 1.2rem; }
/* ★2026-09-10 okada 指示「会員限定の表示は、ブロックの右上に配置して」。
   ★直す前は `.card__meta` の中（カテゴリの隣）に置いていたので、
     カテゴリ・バッジ・日付の3つが1行を取り合い、**カテゴリだけが2〜3行に割れて**いた。
   → バッジを箱（.card__body）の**右上に絶対配置**し、メタ行は「カテゴリ（左）／日付（右）」に戻す。
   ★上の余白 2.9rem の内訳＝ もとの padding-top 1.1rem(17.6px) ＋ バッジの高さ 20.7px ＋ 間隔 8px。
     ★バッジの文字サイズを変えるときは、この値も一緒に見直すこと。 */
.card__body--gated{ padding-top:2.9rem; }
.card__body--gated .gate-badge{ position:absolute; top:1.1rem; inset-inline-end:1.2rem; margin-inline-start:0; }
/* ★2026-09-09 修正（監査 09）。11.84px で、しかも「文字サイズ › 特大」でも 11.84px のままだった。
   ★以前は `rem` が html の 16px を見るため、本文にしか掛かっていない --fs-scale の外に居た。
     `em` に直すと本文と一緒に拡大した（特大＝1.25 で 15.6px）。2026-09-10 に :root の
     font-size 自体を --fs-scale に乗せたため、現在は rem でも全体の文字サイズ切替に追随する。
   ★★値は .82em（13.12px）から **.78em（12.48px）へ下げた**（okada 決裁 2026-09-09）。
     理由＝ .82em だと 360px 幅で、カテゴリ名の長いカード（会員限定バッジ無し）の
     **日付が2行目に落ちた**（カテゴリ 138.56 ＋ 間隔 9.6 ＋ 日付 100.31 = 248.5px >
     カード内の 243.2px）。.78em なら 236.8px で収まる。★390px では .82em でも収まっていた。
   ★上げ幅は +11% → +5% に減るが、**拡大設定に乗る**という本題（rem→em）は変わらない。 */
.card__meta{ display:flex; justify-content:space-between; gap:.6rem; margin:0 0 .6rem; font:600 .78em/1.4 var(--font-ja); letter-spacing:.06em; }
.card__meta .cat::before{ content:"●"; font-size:.6em; margin-inline-end:.6em; vertical-align:.15em; }
.card__meta .date{ font-family:var(--font-en); color:var(--fg-muted); white-space:nowrap; } .card__meta .date b{ font-weight:600; margin-inline-start:.6em; text-transform:uppercase; }
.card__title{ margin:0; font-size:1.02rem; line-height:1.7; letter-spacing:.06em; font-weight:700; }
.card a:hover .card__title{ text-decoration:underline; text-underline-offset:.25em; }
.card__by{ margin:.7rem 0 0; font:600 .78em/1.5 var(--font-ja); letter-spacing:.06em; color:var(--fg-muted); }
/* ★署名の肩書き。氏名のあとに、太字にせず少し控えめに置く（2026-09-09 okada 指示）。
   ★<b> や .name（700）の中に入るので、font-weight は自分で戻す。 */
.byline__role{ font-weight:400; font-size:.86em; color:var(--fg-muted);
  margin-inline-start:.7em; letter-spacing:.06em; }
/* ★記事上部（タイトル脇）は名前と肩書きが1行に並ぶと**同じ書体で繋がって読める**（okada 指摘 2026-09-09）。
   ここだけ肩書きを名前の下に落とし、字を小さくする。 */
.credits .byline__role{ display:block; margin:.45rem 0 0; font-size:.74rem; letter-spacing:.09em; }
.card__by .byline__role{ margin-inline-start:.5em; }
/* ★会員限定のカプセル（2026-09-08 okada 指示）。★一覧でも記事の題の横でも同じ形にする
   ＝ **同じ意味のものを、同じ見た目で出す**。★色を足さず、線で示す（26 の設計憲法）。 */
/* ★メガメニューの記事にも印を出す（2026-09-08）。data-gate="1" は前からあったが
   ★**CSS が無く、何も出ていなかった**（属性だけ付いていた）。 */
.mega a[data-gate="1"] b::after{ content:"会員限定"; display:inline-block; margin-inline-start:.6em;
  padding:.28em .6em; border:1px solid currentColor; border-radius:999px;
  font:700 .62rem/1 var(--font-ja); letter-spacing:.08em; vertical-align:.15em; }
.gate-badge{ display:inline-block; font:700 .68rem/1 var(--font-ja); letter-spacing:.08em;
  padding:.36em .7em; border:1px solid currentColor; border-radius:999px; white-space:nowrap; vertical-align:middle; }
.card__meta .gate-badge,
.pick__series .gate-badge{ margin-inline-start:.7em; }
/* ★2026-09-10 okada 指示「2つのカプセルの文字サイズも揃える」。
   ★`.gate-badge` は .68rem（10.88px）、`.article__read` は .9rem（14.4px）で**別々の大きさ**だった。
     並べて置く2つなので、記事の題の上だけ `.article__read` に合わせる。
   ★高さも揃える（padding を同じにする）＝ 大きさが違うと、並んだときに「揃っていない」と見える。
   ★カード・メガメニューのバッジは**変えない**（ここだけスコープする）。 */
/* ★2026-09-10 okada 指示「2つのカプセルの文字サイズも揃える」「もう少し小さくてよい」。
   ★`.article__read`（918行目）と**同じ値**にする。片方だけ変えると、また揃わなくなる。
   ★カード・メガメニューのバッジは変えない（ここだけスコープしている）。 */
.article__kicker .gate-badge{ margin-inline-start:0; font-size:.82rem; padding:.45em .9em; }
/* ★2026-09-09 修正（監査 08）。会員限定バッジが入ると、日付とバッジが nowrap のため
   **縮められるのがカテゴリ名だけ**になり、「上限を決めた／人たち」と割れていた。
   実測（390px）= カード内の文字領域 271.25px のうち、カテゴリの取り分 86.38px。
   → 情報の単位で折り返す＝ カテゴリ＋会員限定で1行、入らなければ日付が次の行へ。
   ★バッジの無いカードの見え方は変わらない（1行に収まる限り
     flex-start ＋ 日付の margin-inline-start:auto は space-between と同じ結果になる）。 */
@media (max-width:47.99em){
  .card__meta{ flex-wrap:wrap; justify-content:flex-start; row-gap:.4rem; }
  .card__meta .cat{ min-width:0; }
  .card__meta .date{ margin-inline-start:auto; }
}
.more-row{ margin-top:3rem; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:flex-end; }

/* ---------- 行リスト（buncomo イベント一覧型・1px 実線で区切る） ---------- */
.rows{ list-style:none; margin:0; padding:0; }
.rows li+li{ border-top:1px solid var(--ink); }
.rows a{ display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1.2rem; align-items:center; padding:1.1rem 0; text-decoration:none; min-height:var(--tap); }
.rows .th{ overflow:hidden; border-radius:6px; background:var(--tint); } .rows .th img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.rows .d{ font:700 .82rem/1 var(--font-en); letter-spacing:.06em; margin:0 0 .5rem; } .rows .d span{ color:var(--fg-muted); margin-inline-start:1em; font-weight:600; }
.rows .t{ margin:0; font-size:.98rem; line-height:1.6; letter-spacing:.05em; font-weight:700; }
.rows a:hover .t{ text-decoration:underline; text-underline-offset:.25em; }
.two{ display:grid; grid-template-columns:1fr; gap:2.5rem 4rem; align-items:start; }
@media (min-width:62em){ .two{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } }
.two__lede{ margin:0; color:var(--fg); } .two__lede p{ margin:0 0 1.6rem; } .two__lede .sub{ color:var(--fg-muted); font-size:.92rem; }
/* 左カラムのイメージ画像（2026-09-06）。FOR HR / HOW / 編集部から の3セクション。
   ★色は画像だけが持つ（26 第4条）。文字は白黒のまま、色はここに預ける。
   ★装飾なので alt は空にする（意味は本文が持っている＝第9条「情報を画像に頼らない」）。 */
.two__fig{ margin:0 0 1.8rem; }
.two__fig img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r); background:var(--tint); }

/* 編集長日記（2026-09-06）。記事の一覧とは**別の見え方**にする。
   アイキャッチも要約も無い。日付と一行だけ。読み物ではなく近況なので、密度を上げて短く並べる。 */
.diary{ list-style:none; margin:0; padding:0; max-width:var(--measure); }
.diary li + li{ border-top:1px dashed var(--ink); }
.diary a{ display:grid; grid-template-columns:7.5em 1fr; gap:1rem; align-items:baseline;
  padding:.95rem 0; text-decoration:none; color:var(--fg); }
.diary a:hover .diary__t{ text-decoration:underline; text-underline-offset:.28em; }
.diary__date{ font:700 .78rem/1.6 var(--font-en); letter-spacing:.06em; color:var(--fg-muted); white-space:nowrap; }
.diary__date b{ margin-inline-start:.4em; font-weight:700; font-size:.9em; }
.diary__t{ font-size:1rem; line-height:1.8; letter-spacing:.03em; }
@media (max-width:47.99em){
  .diary a{ grid-template-columns:1fr; gap:.2rem; }
}

/* 有識者。★写真は使わない（承諾前の実在の方＋肖像を作らない）。イニシャルの丸で代替する。 */
.experts{ list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:62em){ .experts{ grid-template-columns:1fr 1fr; column-gap:3rem; } }
.expert{ display:flex; gap:1.1rem; align-items:start; padding:1.3rem 0; border-top:1px dashed var(--ink); }
@media (min-width:62em){ .expert:nth-child(-n+2){ border-top:0; } }
.expert:first-child{ border-top:0; }
.expert .credits__avatar{ margin-top:.2rem; }
/* ★有識者の丸は姓2文字。1文字だと、同じ字で始まる姓が並んだときに見分けがつかない（実測）。
   ★このファイルは配信される＝**コメントに実在の方のお名前を書かない**（2026-09-06 に例示を消した） */
.expert .credits__avatar--txt{ font:700 .68rem/1.3 var(--font-ja); letter-spacing:0; }
.expert__name{ margin:0; font-size:1rem; line-height:1.6; letter-spacing:.04em; font-weight:700; }
.expert__role{ margin-inline-start:.8em; font:600 .76rem/1 var(--font-ja); letter-spacing:.06em; color:var(--fg-muted); }
.expert__org{ margin:.4em 0 0; font-size:.82rem; color:var(--fg-muted); letter-spacing:.02em; }
.expert__note{ margin:.5em 0 0; font-size:.88rem; line-height:1.9; color:var(--fg); }
/* ★これから声をかける枠（2026-09-06）。実在の方のお名前は、承諾をいただくまで載せない。
   「まだ入っていない」ことが見て分かる形にする＝丸は破線・お名前と肩書きは薄墨。
   ★空欄にしない（何も無いと「作りかけ」に見え、確認に回せない）。
   ★承諾が取れたら、この `--tbd` を外してお名前を入れるだけ。 */
.expert--tbd .credits__avatar{ border-style:dashed; }
.expert--tbd .expert__name{ color:var(--fg-muted); font-weight:600; }
.expert--tbd .expert__org{ font-style:normal; }
@media (max-width:61.99em){ .two__fig{ max-width:26rem; } }

/* ---------- 5つの段取り ---------- */
/* ★ひとつながりの解説の束（.typeset）。2026-09-06・okada 指摘。
   直す前は h3＋箇条書きが5つ**素のまま並んでいた**ので、
   「A〜E でひとまとまり」と「A と B の切れ目」が読み取れなかった。
   → 表と同じ語彙で組む: **外枠 1px 実線＝ここからここまでが一続き**／
     **内側 1px 破線＝並んだものの区切り**（26 第3条・線は1種類、意味で描き分ける）。
   ★見出しの上下の余白は枠の中で作り直す（.content h3 の 4rem が枠の内側に効くと、
     先頭項目の上だけ大きく空いて「箱の中に浮いている」ように見える）。 */
.content .typeset{ border:1px solid var(--ink); border-radius:var(--r);
  margin:2.4rem 0; padding:0; }
.content .typeset__item{ padding:1.9rem 1.6rem; }
.content .typeset__item + .typeset__item{ border-top:1px dashed var(--ink); }
/* 詳細度は (0,3,1) で `.content h3` (0,1,1) に勝つので `!important` は要らない
   （打ち消しは最小に・2026-09-06 の lofir 側の指摘と同じ考え） */
.content .typeset__item > h3:first-child{ margin-top:0; }
.content .typeset__item > :last-child{ margin-bottom:0; }
@media (max-width:47.99em){
  .content .typeset__item{ padding:1.5rem 1.1rem; }
}

/* 手順・フロー（.steps）。★2026-09-05 全面改定。
   直す前は 5 等分のグリッドに項目を流し込むだけだったので、見出しが1行の列と2行の列で
   **説明の開始位置がばらばら**に見えていた。列の数も 5 で固定していた（3項目のときに空きが出る）。
   直し:
     狭い画面 = 縦に積み、番号を左の溝へ（本文の ol と同じ読み方）。破線で1件ずつ区切る
     広い画面 = 項目数に合わせて列を作り（auto-fit）、**subgrid で番号・見出し・説明の行を揃える**
   ★subgrid が無い環境では横並びのまま（揃わないだけで壊れない）。 */
.steps{ list-style:none; margin:2.2rem 0; padding:0; counter-reset:step;
  display:grid; grid-template-columns:1fr; }
.steps > li{ counter-increment:step; margin:0; position:relative;
  display:grid; grid-template-columns:4.2em 1fr; column-gap:1rem; align-items:start;
  padding:.95rem 0; }
/* ★並んだものの最上部には線を引かない（26 第3条）。区切りは項目と項目の“間”だけ */
.steps > li + li{ border-top:1px dashed var(--ink); }
/* 番号は「STEP 01」。数字だけだと段取りに見えない、という指摘（2026-09-06）への対応。
   英字ラベル（HOW / FOR HR / SOURCES）と同じ語彙にして、順番があることを字で言う。 */
.steps > li::before{ content:"STEP " counter(step,decimal-leading-zero);
  grid-column:1; grid-row:1 / span 2; white-space:nowrap;
  font:800 .72rem/2.2 var(--font-en); letter-spacing:.1em; color:var(--fg-muted); }
.steps h3{ grid-column:2; grid-row:1; margin:0;
  font-size:1rem; line-height:1.6; letter-spacing:.04em; }
.steps p{ grid-column:2; grid-row:2; margin:.3em 0 0;
  color:var(--fg-muted); font-size:.9rem; line-height:1.8; }

/* ★横並びにするのは「広い枠」の中だけ（トップページの .wrap-wide）。
   記事の本文幅（約 41em ≒ 625px）に5列を詰めると、1列 120px 前後になって
   和文が2〜3文字で折り返す。**記事の中では縦のフローのままにする**。 */
/* ★2026-09-06: 5列の横並びをやめた。
   1列 194px に和文の見出しと説明を詰めると、「AIに引き継ぎを書かせる」が2行、
   説明が10字前後×3行になり、**読む前に密度で疲れる**。
   → トップでも**縦のフロー**にし、同じページの FOR HR と同じ「左に説明・右に一覧」（.two）に置く。
     こうすると1件あたり本文と同じくらいの幅が取れ、見出しは1行に収まる。
   ＝ 横並びの定義そのものを消した（使わないものを CSS に残さない）。 */

/* ---------- FAQ ---------- */
/* ================================================================
   ★第15条 — 余白の下限（2026-09-11・okada 指示で憲法入り）
   > 要素を追加したときに、余白が要素間であったり、ボックスの内部に
   > ないっていうことが、たびたび起きている。必ず余白を十分に取ること。
   > この目的は読みやすさのためです。
   決め（`scripts/check-spacing.py` が測る）:
     ・要素と要素のあいだ … 本文の中は 14px 以上／それ以外は 8px 以上
     ・題と副題、名前と肩書きのような「1つのまとまり」… 4px 以上
       ★まとまりであっても、**ぴったりくっつくのは無し**
     ・囲い（線か地色を持つ器）の内側 … 四方 12px 以上
   ★例外は、区切りそのものである線（hr・border-top だけの行）と、
     ボタン・ピル・タグのような部品（それ自体が高さで場所を作っている）。
   ================================================================ */
.faq{ list-style:none; margin:0; padding:0; } .sec__h+.faq{ margin-top:-1.2rem; }
/* ★2026-09-11: `.faq li+li` は**子孫**に効くので、答えの中に書いたリストの
   1つ1つのあいだにも区切りの線が入っていた（okada 指摘の「詰まって見える」の正体）。
   ★区切りの線は**質問と質問のあいだ**にしか要らない。> で子だけにする。 */
.faq > li + li{ border-top:1px solid var(--ink); }
.faq summary{ cursor:pointer; list-style:none; padding:1.2rem 0; font-weight:700; display:flex; gap:1.2rem; align-items:baseline; min-height:var(--tap); letter-spacing:.04em; }
.faq summary::-webkit-details-marker{display:none} .faq summary::before{ content:"Q"; font:800 .85rem/1 var(--font-en); flex:none; } .faq summary::after{ content:"＋"; margin-inline-start:auto; color:var(--fg-muted); } .faq details[open] summary::after{ content:"−"; }
.faq__a{ padding:0 0 1.4rem 2.2rem; color:var(--fg); max-width:40em; }
/* ★答えの中は、本文と同じ呼吸をさせる（第15条＝余白の下限）。
   ★答えは「短い1段落」を想定して作ったが、実際には段落・箇条書き・表が入る。
   入れ物の中に何が来ても、要素と要素のあいだが詰まらないようにここで保証する。 */
.faq__a > * + *{ margin-block-start:1.2em; }
.faq__a > :first-child{ margin-block-start:0; }
.faq__a ol, .faq__a ul{ margin-block:1.3em; }
.faq__a li + li{ margin-block-start:1.4em; }

/* ---------- From editor ---------- */
.pillars{ list-style:none; margin:0; padding:0; }
.pillars li{ padding:1.2rem 0; } .pillars li+li{ border-top:1px dashed var(--ink); } .pillars li:first-child{ padding-top:0; }
.pillars h3{ margin:0 0 .3rem; font-size:.98rem; letter-spacing:.04em; line-height:1.6; } .pillars p{ margin:0; color:var(--fg-muted); font-size:.88rem; }

/* 田の字の入口（.boxmenu）。★2026-09-11 okada 指示「TAKE PART のレイアウトが美しくなく冗長」。
   ★**前の形＝説明文のあとにピルが4本横並び**。4つは対等な入口なのに、
   `.more-row`（右寄せの「おまけの行」）に置いていたので、**節の付け足し**に見えていた。
   ∴ For HR / Diary と同じ `.two` に載せ、右を **2×2 の箱**にした＝ 一覧ではなく**メニュー**だと形で分かる。
   ★アイコンは画像にしない＝インライン SVG の currentColor（`41` §3-1）。5配色すべてに自動で従う。 */
/* ★2026-09-11: 1px の隙間で罫を描く作りをやめ、**箱ごとに枠と角丸**にした（`26` 第13条）。
   ★決め＝ **押せるものは角を丸く、押せない囲い（表・線）は角ばったまま。**
   隙間で描くやり方だと、角を丸めたときに**隙間の色が角に残る**ので、実の枠線に変えた。 */
/* ★箱どうしは**くっつけたまま**、外側の4つの角だけ丸める（2026-09-11 okada 指示）。
   ★中の罫は 1px の隙間で描く（親を墨色にして隙間を見せる）＝ 接する辺が 2px にならない。
   ★角丸は**外枠だけ**に付け、`overflow:hidden` で中の箱を切り抜く。
     （箱ごとに丸めて隙間を空けると、ばらけて見える＝ 一度やって戻した） */
.boxmenu{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--ink); border:1px solid var(--ink);
  border-radius:var(--r); overflow:hidden; }
.boxmenu > li{ margin:0; }
.boxmenu a{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
  height:100%; min-height:var(--tap); padding:clamp(1.1rem,2.4vw,1.6rem);
  background:var(--bg); color:var(--fg); text-decoration:none; }
/* ★外枠で切り抜くので、フォーカスの輪郭は**内側**に出す（切られて見えなくなるのを防ぐ）。 */
.boxmenu a:focus-visible, .ctabox a:focus-visible{ outline:2px solid var(--focus); outline-offset:-3px; }
.boxmenu__ic{ display:block; color:var(--fg-muted); }
.boxmenu__ic svg{ display:block; width:clamp(38px,7vw,52px); height:auto; }
.boxmenu__t{ font:700 1rem/1.5 var(--font-ja); letter-spacing:.04em; }
.boxmenu__d{ font-size:.84rem; line-height:1.7; color:var(--fg-muted); }
.boxmenu a:hover, .boxmenu a:focus-visible{ background:var(--tint); }
.boxmenu a:hover .boxmenu__ic, .boxmenu a:focus-visible .boxmenu__ic{ color:var(--fg); }
.boxmenu a:hover .boxmenu__t{ text-decoration:underline; text-underline-offset:.25em; }
@media (max-width:26em){ .boxmenu__d{ display:none; } }
/* ★狭い画面では説明を落として、田の字のまま保つ（1列に崩すと4画面ぶん縦に伸びる）。 */

/* ★就業タイプ（`shugyo-type`）— 記事の「この記事の人」に、本人が選んだ型を1つだけ添える。
   ★2026-09-08 新設（okada 提案）。正本= `47-rdworker-reference.md` / `glossary/terms.yaml`。
   ★色を使わない（`26` 第4条）。1px の枠だけ＝ タグのピルと同じ作法。
   ★役割（取材・構成／話し手）の**隣**に置く。名前と同じ大きさにしない＝ 属性のように見せない。 */
.worktype{ display:inline-block; margin-inline-start:.6em; padding:.2em .7em .15em;
  border:1px solid currentColor; border-radius:999px;
  font:600 .72rem/1.5 var(--font-ja); letter-spacing:.06em; color:var(--fg-muted);
  text-decoration:none; vertical-align:.05em; }
.worktype:hover{ color:var(--fg); }

/* ---------- 登録（1px の入力とピル） ---------- */
.subscribe{ margin-top:2.5rem; }
.subscribe__heading{ margin:0 0 .5rem; font-size:1.05rem; letter-spacing:.04em; } .subscribe__lede{ margin:0 0 1.2rem; max-width:var(--measure); color:var(--fg-muted); font-size:.92rem; }
.subscribe__form{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:stretch; }
.subscribe__label{ width:100%; font-size:.82rem; font-weight:600; color:var(--fg-muted); letter-spacing:.06em; }
/* 2026-09-10 実測：320px・特大で親208pxに対し入力277px（min-width:auto）→ flex 子を縮小可能にする。 */
.subscribe__input{ flex:1 1 14rem; min-width:0; min-height:var(--tap); padding:0 1.1rem; border:1px solid var(--ink); border-radius:999px; background:var(--bg); color:var(--fg); font:inherit; }
.subscribe__button{ min-height:var(--tap); padding:0 1.5rem; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:var(--bg); font:700 .88rem/1 var(--font-ja); letter-spacing:.08em; cursor:pointer; }
.subscribe__status{ width:100%; margin:.3rem 0 0; font-size:.85rem; } .subscribe__note{ margin:.9rem 0 0; font-size:.8rem; color:var(--fg-muted); }
.subscribe__notes{ margin:0; } .subscribe__notes .subscribe__note:first-child{ margin-top:.9rem; }
/* ★列の箱。帯以外では、ただの入れ物（縦に流れるだけ）。 */
.subscribe__col{ min-width:0; }
/* ★登録フォームの状態表示（2026-09-07・okada 決定 A）。Portal を開かせず、この場で日本語で返す。
   クラスは Ghost の members.js が form に付ける（loading / success / error）。JS は自前で書かない。 */
/* ★live region の <p> は常に DOM に置いたまま（中身だけ出し入れする）。
   状態が出たときに支援技術が読み上げられるのは、要素が最初からある場合。 */
.subscribe__msg{ display:none; }
/* ★蜂蜜の罠（48 §4c-1）。CSS だけで隠す＝ script を1行も足さない。
   ★display:none にしない——自動入力の一部が「見えない欄は埋めない」判断をするため、
   人の目からは外し、機械には普通の欄に見えるようにしておく。 */
.subscribe__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.subscribe__form.loading .subscribe__msg--loading{ display:inline; color:var(--fg-muted); }
.subscribe__form.success .subscribe__msg--success{ display:inline; }
.subscribe__form.error   .subscribe__msg--error{   display:inline; }
/* ★成功したら入力欄を消す。「送ったのに、まだ入力欄がある」状態にしない */
.subscribe__form.success .subscribe__label,
.subscribe__form.success .subscribe__input,
.subscribe__form.success .subscribe__button{ display:none; }
/* ★送信中は二重送信を止める。動きは付けない（26 第6条・既定でゼロ） */
.subscribe__form.loading .subscribe__button{ opacity:.55; pointer-events:none; }
.subscribe__form.loading .subscribe__input{ pointer-events:none; }
/* ★Ghost が英語を書き込む先。DOM には要るが、読者には出さない（12） */
.subscribe__ghost-error{ display:none; }

/* 登録の帯（2026-09-06）。★全ページのフッター前に1本だけ。
   **1カラム・スリム**にする＝ここは主役ではない。読み終えた人が、そのまま次を受け取るための線。
   - 幅は本文と同じ measure の中に収め、中央に置く（横に広げると「広告の枠」に見える）
   - 上に 1px の墨（領域が変わる）。下は footer の線に任せる＝平行に2本引かない（26 第3条）
   - 面の色は使わない。囲みも作らない */
/* ★帯は「スリムな1本」。2026-09-06 に**横並び**へ組み直して高さを半分にした
   （実測 PC 299px → 約140px ／ スマホ 334px → 約190px）。okada 指摘＝上下に空きすぎ。
   広い画面= 左に「題＋一文」、右に「入力欄＋注記」の2列。行そのものを減らすため文面も短くした。 */
/* ★本文の下端に余白を入れる（2026-09-07・okada 指摘＝狭すぎた。実測 0px＝0行分）。
   6rem ＝ 本文3〜3.5行分。フッター自身の margin-top:6rem と同じ値にして、
   帯が有る／無いのどちらでも、本文の下の空き方が変わらないようにしている。 */
.subscribe--band{ margin:6rem 0 0; border-top:1px solid var(--ink);
  padding:1.5rem var(--gutter) 1.6rem; }
.subscribe--band .subscribe__inner{ max-width:var(--wide); margin-inline:auto; }
.subscribe--band .subscribe__heading{ font-size:1rem; margin:0 0 .25rem; }
.subscribe--band .subscribe__lede{ margin:0; font-size:.84rem; }
.subscribe--band .subscribe__note{ margin:.5rem 0 0; font-size:.76rem; }
.subscribe--band .subscribe__notes .subscribe__note:first-child{ margin-top:0; }
@media (min-width:48em){
  /* ★★2026-09-08 修正（okada 指摘「左カラムと右カラムの高さが揃っていない」）。
     ★以前は 2行×2列（"h f" / "l n"）で、**題とフォームが同じ行、リードと注記が同じ行**だった。
       ∴ 左右で行の高さが違うと、上下がそろわない。
     ★**列ごとに1つの箱にまとめて、上下中央でそろえる**形に変えた（.subscribe__col）。 */
  .subscribe--band .subscribe__inner{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    column-gap:3rem; align-items:center; }
  .subscribe--band .subscribe__form{ margin:0; }
  /* ★★グリッドに置くのは「注記の箱」1つだけ（2026-09-08 修正）。
     ★注記そのものに grid-area を当てていたので、**2つ目を足した日に重なった**（okada 報告）。
     ★同じセルに複数を置くと、CSS Grid は**黙って積み上げる**——エラーは出ない。 */
  .subscribe--band .subscribe__notes{ margin:.5rem 0 0; }
}
/* ★帯の中のラベルは**見えない形にして、読み上げには残す**（帯だけ。/subscribe/ の
   フォームは見えるラベルのまま）。帯は題「記事の続きをメールで受け取る」が真上にあり、
   ラベルの行がもう1行ぶん高さを取っていた（実測 24px）。 */
.subscribe--band .subscribe__label{ position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* 入力欄とボタンは**1行に収める**（狭い画面で折り返さない）。
   ★2026-09-08 修正（okada 指摘「入力欄が非常に狭い」）: 実測で **149px**（メールアドレスが
     3〜4文字しか見えない）だった。原因＝ `.subscribe__status{width:100%}` が
     `flex-wrap:nowrap` のせいで**同じ行に居座り**、入力欄を押しつぶしていた。
   ∴ 状態表示（と隠しラベル）は**必ず行を分ける**＝ wrap に戻したうえで basis 100% を与える。
     入力欄とボタンは min-width で1行に保つ。 */
.subscribe--band .subscribe__form{ flex-wrap:wrap; gap:.5rem; }
.subscribe--band .subscribe__label,
.subscribe--band .subscribe__status{ flex:1 0 100%; }
.subscribe--band .subscribe__status{ margin:.35rem 0 0; }
.subscribe--band .subscribe__input{ flex:1 1 auto; min-width:12rem; }
.subscribe--band .subscribe__button{ flex:none; padding:0 1.1rem; }
@media (max-width:47.99em){ .subscribe--band{ padding:1.3rem var(--gutter) 1.4rem; } }
/* ★帯の下の余白は帯自身が持つ。フッターの margin-top（96px）が残ると、
   帯とフッターの間に空白が二重に出て「スリム」でなくなる（実測 138px 空いていた）。 */
.subscribe--band + .site-footer{ margin-top:0; }

/* ---------- 一覧・固定ページ ---------- */
.page-heading{ font-size:clamp(1.6rem,calc(3vw * var(--fs-scale)),2.2rem); line-height:1.5; margin:0 0 1rem; font-weight:700; letter-spacing:.04em; }
.search-trigger{ margin:0 0 2rem; } .empty{color:var(--fg-muted)}
.content .kg-width-wide{max-width:min(52em,100%);margin-inline:auto} .content .kg-width-full{max-width:100%}

/* ---------- 固定ページ（設計の憲法など）: 題の領域／本文の領域を画面幅の線で分ける ---------- */
/* ★2026-09-08 修正（okada 指摘「題の始まる位置が本文より内側」）:
   2026-09-07 に **`.page__body` だけ**「外側の箱が横 padding を持ち、内側の .wrap は 0」の形に直した。
   ★`.page__head` を直し忘れていたため、題・パンくず・リードだけが **--gutter ぶん（1280px 幅で 51px）
     本文より内側**に入っていた（実測: 題 326px / 本文 275px）。プレビューでも同じだった。
   ∴ head も同じ形に揃える＝題と本文の左端が合う。 */
/* ★左端をロゴの縦線にそろえる（2026-09-11 okada 指摘）。
   ★ヘッダーは `max-width:var(--wide)` の箱を中央に置いてから var(--gutter) を取る。
   こちらは**箱に max-width が無かった**ので、画面が広いほど**ロゴだけ右へ動いて**ずれていた
   （実測 1600px: ロゴ 205px ／ 題 52px）。∴ 同じ位置になる padding を計算して取る。 */
.page__head{ padding-block:2.5rem 3rem;
  padding-inline:max(var(--gutter), calc(50vw - var(--wide)/2 + var(--gutter))); }
/* ★題・パンくず・リードの左端を、ロゴの縦線にそろえる（2026-09-11 okada 指摘
   「ヒーローエリアの文字が真ん中の方に寄っている。ロゴの横位置（左）に合わせて」）。
   ★中央寄せをやめて**左寄せ**にすると、外側の箱の padding（＝ロゴの左端）と一致する。
   本文（.page__body .wrap）も同じ扱いにして、題と本文の左端をそろえる。 */
.page__head .wrap{ padding-left:0; padding-right:0; margin-inline:0 auto; }
.page__body :is(.wrap, .wrap-wide){ margin-inline:0 auto; }
/* ★2026-09-09 修正（監査 04）。折り返しの用意が無く、行送りも 1（＝12.16px）だった。
   ★和文は1字単位で折り返せるので、flex の既定（縮む・min-width:auto）だと
     「ホー／ム」「用語／集」のように**短いラベルまで1字幅まで潰される**（実測）。
   → 親階層のリンクは縮ませない。折り返すのは**現在ページ名だけ**。
   → 2段になったときのために行送りと行間を確保する（1 → 1.6 ／ row-gap .35rem）。
   ★現在ページの判別は `aria-current="page"`（page.php が既に出している）。 */
.breadcrumb ol{ list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .6rem; font:600 .76rem/1.6 var(--font-ja); letter-spacing:.08em; color:var(--fg-muted); }
.breadcrumb li{ flex:0 0 auto; }
.breadcrumb li[aria-current]{ flex:1 1 auto; min-width:0; }
.breadcrumb li+li::before{ content:"／"; margin-inline-end:.6rem; } .breadcrumb a{ text-decoration:none; }
/* ★2026-09-09（監査 12）。390px でリードの最終行に「気。」だけが残っていた。
   ★★`text-wrap:pretty` は**使わない**。405b1c3 で本文から撤去したばかりで、理由は
     「Safari が pretty を**段落まるごとの組み直し**として実装しており、
      隣り合う2つの段落のうち片方だけが右端に届かない」（実機の画で確認）。
   ★`balance` は目的が違う指定で、**短いブロックを行数そのままで均等割りする**。
     リードはページに1つしか無く、隣に比較対象の段落が無いので、上の症状の出方が違う。
   ★対応していないブラウザでは何も起きない（安全側に倒れる）。
   ★★実機 Safari で「段落の幅が不揃いに見える」なら**この行を消す**。 */
.page__lede{ margin:1.2rem 0 0; max-width:var(--measure); color:var(--fg-muted); text-wrap:balance; }
/* ★2026-09-07 修正（12 B1-3 / 24 §2）: 固定ページの行長が **37字** で、記事の 42字と違っていた。
   原因＝ .page__body に横の余白が無く、内側の .wrap が自前の padding（--gutter 約105px）を
   max-width:731px の**内側**で食っていた（731-105=626px＝37字）。
   記事側は .article__body が横 padding を持ち、.article__body .wrap で padding を外している。
   ★同じ形に揃える＝仕様（43em ≒ 41字）が実際の行長になる。 */
/* ★罫は画面いっぱいのまま（page.php の「画面幅の 1px 罫で分ける」）。
   ★中身だけ、ヘッダーと同じ左端にそろえる。 */
.page__body{ border-top:1px solid var(--ink); padding-block:3rem 0;
  /* ★内側の余白は1か所で持つ。★追従目次のレールも同じ値を使うため（下の .ftoc-rail）。 */
  --pad-inline:max(var(--gutter), calc(50vw - var(--wide)/2 + var(--gutter)));
  padding-inline:var(--pad-inline);
  position:relative; }   /* ★追従目次のレールの基準（.ftoc-rail） */
/* ★.wrap-wide も同じ（著者ページの本文は幅広の並び）。外側で余白を持っているので、
   内側でもう一度持つと **左右の余白が2倍**になる（実測 102px）。2026-09-08 */
.page__body :is(.wrap, .wrap-wide){ padding-left:0; padding-right:0; margin-inline:auto; }
.author-page__head{ display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:1.2rem; align-items:start; }
.author-page__head .page-heading{ margin:0; } .author-page__head .page__lede{ margin-top:.6rem; }
/* ★名前と肩書き（2026-09-12・okada 指摘「名前のあとの肩書文字サイズ・太さが適切でない」）。
   ★同じ h1 の中に置いたまま、肩書きだけ小さく・薄くする。
     読み上げでは1つの名乗りとして続けて読まれてほしいので、別要素に切り出さない。 */
.author-page__name{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em .7em; }
.author-page__role{ font-size:.46em; font-weight:600; letter-spacing:.1em; color:var(--fg-sub); }

/* ★関わりのある場所（2026-09-12・okada 指示「ボタンじゃないほうがいいのかも」）。
   ★書き手の**身元の手がかり**であって、読ませたい行き先ではない。
     ∴ ピル（ボタン）をやめ、小さな見出し＋控えめな一覧にする。
   ★行き先のホスト名を添える。何のサイトかが、開く前に分かるようにするため。 */
.author-page__links{ margin:1.7rem 0 0; }
.author-page__links-h{ margin:0 0 .7rem; font:600 .72rem/1 var(--font-ja);
  letter-spacing:.12em; color:var(--fg-muted); }
.author-page__links ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.9rem 2rem; }
.author-page__links li{ margin:0; display:flex; align-items:baseline; gap:.55em;
  min-height:var(--tap); }
.author-page__links a{ display:inline-flex; align-items:center; min-height:var(--tap);
  font-weight:700; font-size:.95rem; letter-spacing:.04em;
  text-decoration:underline; text-underline-offset:.28em;
  text-decoration-thickness:1px; text-decoration-color:var(--soft); }
.author-page__links a:hover{ text-decoration-color:currentColor; }
.author-page__host{ font:600 .74rem/1 var(--font-en); letter-spacing:.04em;
  color:var(--fg-muted); }
@media (max-width:47.99em){
  .author-page__links ul{ gap:.2rem 1.4rem; }
  .author-page__name{ gap:.15em .6em; }
}
.content.content--page h2{ font-size:1.25em; margin-top:4rem!important; } .content.content--page h2::before{ content:none; }
.content--page table{ font-size:.9em; }
/* ★2026-09-11 に **1列目の一律 nowrap を外した**（okada 指摘「左の列の文字が右の列にはみ出て重なる」）。
   ★元は「短いラベルの列を折り返さない」つもりの決めだったが、**固定ページの全部の表の1列目**に
   掛かっていた。長い文が入ると:
     ・`table-layout:auto` の表 … 1列目が伸びて**右の列が細くなる**（/review-request/ の「書けます」で実測）
     ・`table-layout:fixed` の表 … 幅が動かないので**隣の列へ文字が突き抜ける**（/for-experts/ で実測。
       セルの幅 365px に対し中身 492px）
   ∴ **折り返さないのは「行見出しが 10字以下の表」だけ**にする（下の `.nm-lbl`）。
   判定はテーマの JS が自動でやる（`24` §17 と同じ考え方＝人が毎回クラスを書かない）。 */
.page__log{ margin-top:4rem; padding-top:1.2rem; border-top:1px dashed var(--ink); font-size:.9em; color:var(--fg-muted); }

/* この記事を書いた人（記事下部）*/
.author-box{ margin-top:4rem; border-top:1px solid var(--ink); padding-top:1.2rem; }
.author-box__h{ display:flex; align-items:center; gap:.7rem; margin:0 0 1.2rem; } .author-box__h .ja{ font:600 .78rem/1 var(--font-ja); letter-spacing:.08em; color:var(--fg-muted); }
.author-box__body{ display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:1.2rem; align-items:start; }
.author-box__body+.author-box__body{ margin-top:1.4rem; padding-top:1.4rem; border-top:1px dashed var(--ink); }
.author-box__avatar{ width:4.5rem; height:4.5rem; border-radius:50%; border:1px solid var(--ink); overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:var(--bg); color:var(--fg); }
.author-box__avatar img{ width:100%; height:100%; object-fit:cover; } .author-box__avatar svg{ width:62%; height:auto; }
.author-box__name{ margin:0; } .author-box__name b{ font-size:1rem; letter-spacing:.06em; } .author-box__name b a{ text-decoration:none; }
.author-box__name small{ font:600 .74rem/1 var(--font-ja); letter-spacing:.08em; color:var(--fg-muted); margin-inline-start:.9em; }
.author-box__bio{ margin:.6rem 0 0; font-size:.92rem; line-height:1.9; letter-spacing:.04em; }
.author-box__links{ margin:1rem 0 0; display:flex; flex-wrap:wrap; gap:.6rem; } .author-box__links .pill{ font-size:.8rem; padding:0 1.1rem; }

/* ---------- フッター ---------- */
.site-footer{ margin-top:6rem; border-top:1px solid var(--ink); }
.site-footer__inner{ max-width:var(--wide); margin-inline:auto; padding:3rem var(--gutter) 5rem; } /* 下の余白は「上へ」ボタンの逃げ */
.site-footer__cols{ display:grid; grid-template-columns:1fr; gap:2.5rem 4rem; }
@media (min-width:62em){ .site-footer__cols{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); } }
.site-footer__brand .brand{ margin-bottom:1rem; flex-wrap:wrap; } .site-footer__brand .brand__mark{ height:2rem; }
.site-footer__about{ margin:0; max-width:26em; font-size:.88rem; line-height:1.9; color:var(--fg-muted); }
.site-footer__sns{ margin:1.2rem 0 0; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.site-footer__sns .pill{ font-size:.82rem; }
.site-footer__nav{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem 2rem; }
@media (min-width:48em){ .site-footer__nav{ grid-template-columns:repeat(3,1fr); } }
.site-footer__h{ margin:0 0 .6rem; padding-bottom:.5rem; border-bottom:1px dashed var(--ink); font:800 .74rem/1 var(--font-ja); letter-spacing:.14em; }
.site-footer nav ul{ list-style:none; margin:0; padding:0; display:block; }
/* ★2026-09-07 修正（12 B5-1 不合格）: min-height:2.4rem = 38.4px だった。
   ★.pill{min-height:var(--tap)} をこの規則が上書きしていた（詳細度で勝つ）＝
     フッターのリンクが**全部** 44px を割っていた。--tap に揃える。 */
.site-footer a{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap); min-width:var(--tap); text-decoration:none; font-size:.86rem; font-weight:600; letter-spacing:.06em; }
/* ★2026-09-10 okada 指摘「読む＞『記録』だけ少し右に寄ってる」。
   犯人は上の `.site-footer a` の **min-width:var(--tap)（44px）× justify-content:center**。
   「記録」は2文字＝約30px しかないので、44px の箱の中で中央に置かれ、**左端が数px 内側に入る**。
   他の項目は 44px より広いので箱いっぱいになり、そこだけずれて見えていた。
   ★当たり判定（44px）は落とさず、文字だけ左に寄せる。 */
.site-footer__nav a{ justify-content:flex-start; }
.site-footer__nav a:hover{ text-decoration:underline; text-underline-offset:.25em; }
/* ★最下部の線だけ、ほかの線と幅が揃っていなかった（2026-09-07・okada 指摘）。
   実測= 線 1104px ／ 画面 1200px（内側の余白のぶん両端が足りない）。
   `26` 第3条は「実線・画面の端から端まで＝領域が変わる」なので、端まで引く。
   ★html に overflow-x:clip が効いているので、100vw で横スクロールは出ない。 */
.site-footer__end{ position:relative; margin-top:3rem; padding-top:1.2rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem; align-items:baseline; }
.site-footer__end::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:50%;
  width:100vw; margin-inline-start:-50vw; border-top:1px solid var(--ink); }
.site-footer__note,.site-footer__copy{ margin:0; color:var(--fg-muted); font-size:.78rem; letter-spacing:.04em; }
.site-footer__note a{ font-size:.78rem; margin-inline-start:.6em; min-height:0; }
@media print{ .site-header,.site-footer,.switch,.subscribe,.toc,.skip-link{display:none!important} body{background:#fff;color:#000} .wrap{max-width:none} }

/* ============================================================
   記事ページ（buncomo 型ヒーロー＋折兼型の目次＋なみのま固有の部品）
   ============================================================ */
.article{ position:relative; }
.article__head{ max-width:var(--wide); margin-inline:auto; padding:2.5rem var(--gutter) 0; display:grid; grid-template-columns:1fr; gap:2rem 3.5rem; align-items:start; }
@media (min-width:62em){ .article__head{ grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); } }
/* 特集名は題の前に横書き（縦書きは分かりにくい・2026-09-05） */
.article__feature{ margin:0 0 1.4rem; font:600 .8rem/1 var(--font-ja); letter-spacing:.1em; color:var(--fg-muted); }
/* ★2026-09-10 okada 指示「サイズを揃えて右揃えにする」。
   ★直す前は「読了」だけに margin-inline-start:auto を掛けていたので、
     **会員限定はカテゴリの隣・読了は右端**と離れ、2つのカプセルが散らばって見えていた。
   → 右へ寄せる起点を **`.article__theme` の後ろ**にする（`margin-inline-end:auto`）。
     こうすると **カプセルは何個あっても右にまとまる**（会員限定が無い記事でも読了は右端のまま）。
   ★カプセル同士は近づける（1rem → .6rem）＝ 2つで1組に見せる。 */
.article__kicker{ display:flex; align-items:center; gap:.6rem; margin:0 0 1.2rem; }
.article__kicker .article__theme{ margin-inline-end:auto; }
/* ★2026-09-10 okada 指示（実機）「会員限定・読了10分のふたつのカプセルは次の行へ」。
   ★直す前はこの3つが1行を取り合い、バッジと読了が縮まないぶん
     **カテゴリだけが「上限を決／めた人た／ち」と3行に割れて**いた。
   → 1行目＝ INTERVIEW ＋ カテゴリ（全幅）／2行目＝ 会員限定と読了が**右にまとまる**。
   ★2026-09-10 追記: PC と同じ寄せ方にそろえた（okada「サイズを揃えて右揃えにする」）。
     1行目は全幅なので justify-content の影響を受けない＝**2行目だけが右へ寄る**。 */
@media (max-width:47.99em){
  .article__kicker{ flex-wrap:wrap; row-gap:.7rem; justify-content:flex-end; }
  .article__theme{ flex:1 1 100%; min-width:0; margin-inline-end:0; }
}
.article__theme{ display:flex; align-items:center; gap:.6rem; font:700 .82rem/1 var(--font-en); letter-spacing:.1em; text-transform:uppercase; }
.article__theme::before{ content:""; width:.45em; height:.45em; border-radius:50%; background:var(--ink); }
.article__cat{ font:600 .78rem/1 var(--font-ja); letter-spacing:.08em; color:var(--fg-muted); text-transform:none; }
.article__date{ font:600 .8rem/1 var(--font-en); letter-spacing:.06em; color:var(--fg-muted); white-space:nowrap; } .article__date b{ font-weight:700; color:var(--fg); margin-inline-start:.5em; text-transform:uppercase; }
.article__box::before{ content:""; display:block; width:1.25rem; height:4px; background:var(--ink); margin-bottom:1rem; }
.article__box h1{ margin:0; font-size:clamp(1.6rem,calc(2.6vw * var(--fs-scale)),2.15rem); line-height:1.6; letter-spacing:.04em; font-weight:700; text-wrap:balance; }
.article__tab{ display:flex; flex-wrap:wrap; gap:.4rem 2rem; margin:1.2rem 0 0; border-top:1px solid var(--ink); padding:.9rem 0 0; font-size:.9rem; font-weight:700; letter-spacing:.06em; }
/* ★カプセル（dt）は**絶対に段落ちさせない**（2026-09-11 okada 指摘）。
   flex の既定は縮むので、右の説明が長いと「読んだも／の」と2行に割れていた。
   ∴ flex:none ＋ nowrap。★説明（dd）だけが折り返す。 */
.article__tab div{ display:flex; align-items:baseline; gap:.7rem; }
.article__tab dt{ flex:none; white-space:nowrap; font:600 .72rem/1 var(--font-ja); letter-spacing:.12em; color:var(--fg-muted); padding:.2em .6em; border:1px solid var(--soft); border-radius:999px; }
.article__tab dd{ margin:0; }
.article__meta{ margin:.9rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center; color:var(--fg-muted); font:600 .8rem/1.6 var(--font-en); letter-spacing:.06em; }
/* ★2026-09-10 okada 指示「どちらももう少し文字が小さくて問題ない」。.9rem(14.4px) → .82rem(13.12px)。
   ★隣の「会員限定」も同じ値・同じ padding にしてある（563行目）＝ 2つで1組に見える。 */
.article__read{ display:inline-flex; align-items:center; gap:.4rem; color:var(--fg); font:700 .82rem/1 var(--font-ja); letter-spacing:.06em; padding:.45em .9em; border:1px solid var(--ink); border-radius:999px; }
/* ★2026-09-10 修正（okada「読了のカプセルのほうが大きく見える」）。
   ★実測 = 会員限定 26.91px / 読了 28.78px（差 1.88px）。文字も padding も同じなのに違ったのは、
     **中の SVG が 15px 固定**で、文字（13.12px）より大きく、行の高さを押し上げていたため。
   → アイコンを文字と同じ大きさ（1em）にする。**カプセルの高さが揃う**。
   ★`single.php` の `width="15"` は直さない（そのファイルは本番へ出さないと決まっている・CSS で合わせる）。 */
.article__read .ic{ flex:none; width:1em; height:1em; }
.article__meta .tags{ display:flex; gap:1.1rem; flex-wrap:wrap; } .article__meta .tag{ font-family:var(--font-ja); font-size:.9rem; font-weight:600; letter-spacing:.06em; color:var(--fg); } .article__meta .tag::before{ content:"#"; color:var(--fg-muted); margin-inline-end:.1em; }
/* クレジット（丸いアイコン＋名前＋役割。複数可）＋ 投稿日 */
/* ★2026-09-08: ファーストビューの著者欄から説明文を外したので、名前が1行になった。
   日付を下端でなく**中央で**揃える（okada「横並びで日付がしっかり見える形で、バランスよく」）。 */
.article__credits{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 2rem; margin:1.8rem 0 0; }
.credits{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.8rem 1.8rem; }
.credits li{ display:flex; align-items:center; gap:.7rem; }
.credits__avatar{ width:2.6rem; height:2.6rem; flex:none; border-radius:50%; border:1px solid var(--ink); overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:var(--bg); color:var(--fg); text-decoration:none; }
.credits__avatar img{ width:100%; height:100%; object-fit:cover; } .credits__avatar svg{ width:62%; height:auto; }
.credits__avatar--txt{ font:800 .95rem/1 var(--font-en); letter-spacing:0; background:var(--tint); }
.credits b{ display:block; font-weight:700; font-size:.9rem; letter-spacing:.06em; line-height:1.3; } .credits b a{ text-decoration:none; }
.credits small{ display:block; font:600 .72rem/1.4 var(--font-ja); letter-spacing:.06em; color:var(--fg-muted); margin-top:.35rem; }
.article__credits .article__date{ margin:0; }
.article__hero{ margin:0; } @media (max-width:61.99em){ .article__hero{ margin-top:.5rem; } }
.article__hero img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); }
.article__hero figcaption{ margin:.6rem 0 0; font:600 .74rem/1.5 var(--font-ja); color:var(--fg-muted); letter-spacing:.06em; }

/* 側注 | 本文 | サイドバー */
.article__body{ max-width:var(--wide); margin:3rem auto 0; padding:3rem var(--gutter) 0; display:grid; grid-template-columns:1fr; gap:2rem; position:relative; }
/* 題の領域と本文の領域を画面幅の実線で分ける（buncomo）。縦罫（側注・サイドバー）はこの線より下から始まる */
.article__body::before{ content:""; position:absolute; top:0; left:calc(50% - 50vw); right:calc(50% - 50vw); border-top:1px solid var(--ink); }
.article__body .wrap{ padding-left:0; padding-right:0; margin-inline:auto; }
.article__rail{ display:none; }
@media (min-width:75em){
  .article__body{ grid-template-columns:3.5rem minmax(0,1fr) 15rem; gap:2.5rem 5rem; align-items:start; }
  .article__rail{ display:flex; flex-direction:column; align-items:center; gap:.9rem; position:sticky; top:1.5rem; }
  .article__rail .lbl{ writing-mode:vertical-rl; font:600 .72rem/1 var(--font-ja); letter-spacing:.16em; color:var(--fg-muted); }
  .article__rail a{ width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--ink); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font:800 .75rem/1 var(--font-en); }
  .article__aside{ position:sticky; top:1.5rem; border-left:1px solid var(--ink); padding-left:2rem; }
}
/* サイドバー上部: 検索＋タグ（gizmodo 型） */
.aside__find{ margin:0 0 1.8rem; padding-bottom:1.4rem; border-bottom:1px solid var(--ink); }
.aside__find .pill{ width:100%; gap:.6rem; margin-bottom:.9rem; }
.aside__tags{ margin:0; }
.aside__links{ list-style:none; margin:0 0 1.6rem; padding:0; }
.aside__links li+li{ border-top:1px dashed var(--soft); }
.aside__links a{ display:flex; align-items:center; min-height:var(--tap); text-decoration:none; font:700 .86rem/1.4 var(--font-ja); letter-spacing:.04em; }
.aside__links a::after{ content:"→"; margin-inline-start:auto; font-family:var(--font-en); color:var(--fg-muted); }
/* 記事末尾: 新着（行リストを2列に） */
.latest{ margin-top:4rem; border-top:1px solid var(--ink); padding-top:1.2rem; }
.latest__h{ display:flex; align-items:center; gap:.7rem; margin:0 0 .6rem; } .latest__h .ja{ font:600 .78rem/1 var(--font-ja); letter-spacing:.08em; color:var(--fg-muted); } .latest__h .rt{ margin-inline-start:auto; font:600 .78rem/1 var(--font-ja); letter-spacing:.06em; text-decoration:none; }
@media (min-width:48em){ .rows--2{ display:grid; grid-template-columns:1fr 1fr; column-gap:2.5rem; } .rows--2 li:nth-child(2){ border-top:0; } }
.aside__h{ display:flex; align-items:center; gap:.6rem; margin:0 0 .9rem; padding-bottom:.7rem; border-bottom:1px dashed var(--ink); }
.aside__h .ja{ font:600 .76rem/1 var(--font-ja); letter-spacing:.06em; color:var(--fg-muted); text-transform:none; }
.aside__list{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.9rem; }
.aside__list a{ display:grid; grid-template-columns:4.6rem 1fr; gap:.8rem; align-items:center; text-decoration:none; }
.aside__list .th{ aspect-ratio:1; border-radius:6px; overflow:hidden; background:var(--tint); } .aside__list .th img{ width:100%; height:100%; object-fit:cover; }
.aside__list .t{ font-size:.85rem; font-weight:700; line-height:1.6; letter-spacing:.03em; }
.aside__list a:hover .t{ text-decoration:underline; text-underline-offset:.25em; }
.aside__more{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap); width:100%; border:1px solid var(--ink); border-radius:999px; text-decoration:none; font:700 .82rem/1 var(--font-ja); letter-spacing:.06em; margin-bottom:2rem; }

/* 3行でいうと（1px の縦罫） */
.tldr{ margin:.5rem 0 0; padding:0 0 0 1.2rem; border-left:1px solid var(--ink); }
/* ★スマホでは、縦罫のぶん「3行でいうと」だけ本文より 19px 狭かった（okada 指摘 2026-09-09）。
   ★罫を左の余白（gutter 20px）へ逃がし、**文字の左端を本文とそろえる**。
   ★罫は画面端から約 7px の位置に立つので切れない。 */
@media (max-width:47.99em){
  .tldr{ margin-left:-.8rem; padding-left:.8rem; }
}
/* ★2026-09-08 okada 指摘「3行でいうと と この記事の人 の間に余白が1pxもない」。
   ★原因＝ .tldr の下が 0 ／ .people の上も 0。**両方 0 なので隙間が生まれない**。
   ★引き上げたときだけ効かせる（本文の中に残る場合の見え方を変えない）。印は main.js が付ける。 */
.is-hoisted{ margin-bottom:3rem; }
/* 小さな英字の題（IN 3 LINES / ABOUT THIS ARTICLE / SAME SERIES / THIS SERIES）は塗りのラベル */
.lbl-fill,.tldr__h,.about-post h2,.related h2,.refs h2,.aside__h .en{ display:inline-block; background:var(--ink); color:var(--bg); font:800 .72rem/1 var(--font-en); letter-spacing:.14em; text-transform:uppercase; padding:.45em .8em .4em; border-radius:4px; }
.tldr__h{ margin:0 0 .8rem; }
.tldr ul{ margin:0; padding:0; list-style:none; }
/* ★字を少し落とした（2026-09-09・okada 指示）。合わせ先＝「この記事の人」の名前（.people b）と
   目次の項目（.toc__list a）。どちらも .95rem なので、PC/スマホとも同じ値でそろう。 */
/* ★3行でいうと は「3行」であることが意味なので、**1行が折り返したら壊れる**。
   ★実測（2026-09-11・okada 指摘）: 同じ記事で 1199px は1行、1200px で2行、1300px でまた1行、
   1350px でまた2行——**画面を広げると狭くなる区間があった**（下の --gutter の項）。
   ∴ 2つで留める:
     ①原稿側＝ **1行 40全角以内**（`24` §18・`check-article.py` が数える）
     ②表示側＝ **列の幅に文字サイズを追随させる**（container query）。
       列が 633px まで狭まる帯（1200〜1250px）でも、40全角が必ず入る。 */
.tldr{ container-type:inline-size; }
.tldr li{ font-size:clamp(.82rem, 2.38cqi, .95rem); font-weight:700; letter-spacing:.03em; line-height:1.8; } .tldr li+li{ margin-top:.3rem; }
/* 目次（折兼ラボ型: 常時表示・縦ラベル・番号・1px 罫・矢印） */
/* ★[hidden] は属性セレクタなので .toc{display:grid} に負ける。JS が動かない環境で
   空の目次が出ないよう、明示的に閉じておく（2026-09-08）。 */
.toc[hidden]{ display:none; }
.toc{ display:grid; grid-template-columns:3rem minmax(0,1fr); gap:0 1.2rem; margin:2.5rem 0 3rem; }
.toc__label{ margin:0; background:var(--tint); writing-mode:vertical-rl; text-orientation:upright; font:700 .85rem/1 var(--font-ja); letter-spacing:.3em; padding:1rem 0; display:flex; align-items:center; border-radius:6px; }
.toc__list{ margin:0; padding:0; list-style:none; counter-reset:toc; }
.toc__list li{ margin:0; counter-increment:toc; } .toc__list li+li{ border-top:1px solid var(--ink); }
.toc__list a,
.toc__list .toc__row{ display:grid; grid-template-columns:1.6rem minmax(0,1fr) auto; align-items:center; gap:.6rem; min-height:var(--tap); padding:.55rem 0; text-decoration:none; font-weight:700; font-size:.95rem; letter-spacing:.03em; line-height:1.5; }
.toc__list a::before,
.toc__list .toc__row::before{ content:counter(toc,decimal-leading-zero); font:700 .78rem/1 var(--font-en); letter-spacing:.06em; }
/* ★会員限定の続き（2026-09-08 okada 指示）＝ **目次だけは最後まで出す**。
   ★リンクにしない（飛ぶ先が本文に無い）。★薄くするのは「読めない」ことを見た目で言うため。 */
.toc__list li.is-locked .toc__row{ color:var(--fg-muted); cursor:default; }
.toc__lock{ font:700 .68rem/1 var(--font-ja); letter-spacing:.08em; padding:.3em .6em; border:1px solid currentColor; border-radius:999px; white-space:nowrap; }
.toc__list li.toc__gate{ counter-increment:none; padding:.7rem 0 .7rem 2.2rem; font:600 .82rem/1.6 var(--font-ja); letter-spacing:.04em; color:var(--fg-muted); }
.toc__list a::after{ content:"→"; font-family:var(--font-en); font-weight:700; color:var(--fg-muted); }
.toc__list a:hover{ text-decoration:underline; text-underline-offset:.25em; }

/* この記事の人（目次の後・本文の前）: アイコン＋名前＋役割＋2〜3行の紹介。人の間は破線 */
.people{ margin:0 0 3.5rem; }
.people__h{ display:flex; align-items:center; gap:.7rem; margin:0 0 .6rem; } .people__h .ja{ font:600 .78rem/1 var(--font-ja); letter-spacing:.08em; color:var(--fg-muted); }
.people ul{ list-style:none; margin:0; padding:0; }
.people li{ display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:1rem; padding:1.1rem 0; align-items:start; }
.people li+li{ border-top:1px dashed var(--ink); }
.people b{ font-size:.95rem; letter-spacing:.06em; } .people b a{ text-decoration:none; }
.people small{ font:600 .72rem/1 var(--font-ja); letter-spacing:.08em; color:var(--fg-muted); margin-inline-start:.8em; }
.people p{ margin:.45rem 0 0; font-size:.92rem; line-height:1.8; letter-spacing:.04em; }

/* ---------- 本文 ---------- */
.content{ line-height:var(--lh-content); letter-spacing:var(--ls-content); counter-reset:sec; }
/* ★★本文は**文節で折り返す**（2026-09-09・okada 指摘）。
   ★実害＝ 活用語尾の途中で切れて、最後の1〜2文字だけが次行に落ちていた（実機4箇所）:
     「…見てしまう生活になってしま／う。」「…やっぱり幸せだとは思っていま／す。」
     「…意味があると思うようにしてい／て、」「…妻とずっと言っていまし／た。」
   ★原因＝ 効いていたのは body の `line-break:strict` だけで、**本文の段落に折り返しの指定が無かった**。
     見出しには `text-wrap:balance` があるので、**本文だけ素のまま**だった。
   ★`word-break:auto-phrase` は日本語の文節で折る（Chrome 119+）。
     ★対応していないブラウザでは `normal` と同じに落ちるだけ＝ 今より悪くならない。
   ★★`24` §9-2 に「auto-phrase は差し戻した」とあるが、**あれは話者名の 3.6rem 幅の列**の話。
     「佐々木さん」が1つの文節になって列からはみ出す、という**狭い箱の問題**であって、
     全幅の本文段落には当てはまらない。∴ **`.speech .who__name` には掛けない**（下で normal のまま）。
   ★`text-wrap:pretty` は最終行に1〜2文字だけ残るのを減らす。 */
/* ★★`text-wrap:pretty` を外した（2026-09-09・実機の画で分かった）。
   ★入れた目的＝ 最終行に1〜2字だけ残る「孤立行」を消すこと。Chrome では狙いどおり効く。
   ★★しかし **Safari は `pretty` を「段落まるごとの組み直し」として実装している**。
     結果、**段落によっては全部の行が1.5字ぶん内側で終わる**。
     ★実機の画で、隣り合う2つの段落のうち片方だけが右端に届いていないのを確認した。
       ＝ 行ごとの凸凹ではなく**段落ごとの幅の差**。目につくのはこちら。
   ★引き換えに孤立行が記事あたり4つほど戻る（Chrome 実測）。
   ★戻すときは、下の中括弧に `text-wrap:pretty;` を足す。 */
.content p, .content li, .content dd, .content blockquote,
.article__tab, .tldr li, .people p, .speech .say{ }
/* ★★`word-break:auto-phrase` は**入れて、測って、外した**（同じ日・2026-09-09）。
   ★外した理由＝ **文節で折ると、右の余白がガタガタになる。**
     文節は長さがまちまちなので、行末に入りきらない文節が丸ごと次の行へ落ちる。
     ＝ okada が「右側の余白が広いところも狭いところもある」と言ったのは、まさにこれ。
   ★実測（`/issho-ni-ie-wo-mawasu/`・右余白の標準偏差 px。小さいほど端が揃う）:
       段幅      素    pretty  auto-phrase  両方
       375px    8.1     8.8      26.6      30.4
       414px    4.9     4.9      36.4      34.1
       560px    8.0     8.4      39.5      48.4
       700px    6.0     6.4      35.5      44.0
     ★孤立行（最終行が全角2字未満）は 素=0〜1／pretty=**全幅で 0**／auto-phrase=0。
   ∴ **`text-wrap:pretty` だけで、孤立行は消え、端は揃ったまま。** auto-phrase は害だけ残る。
   ★★教訓: 孤立行だけを見て入れてしまった。**同じ変更を、別の物差しでも測る。** */
/* ★手で入れた改行の出し分け（`[pcbr]` / `[spbr]`・inc/shortcodes.php）。
   ★§13 は**自動の折り返し**の話。ここは**編集長が自分で入れた改行**の話で、別物。
   ★実害＝ PC の段幅を前提に入れた改行がスマホでも効いてしまい、
     改行の位置が段幅と無関係なので**右の余白が行ごとにガタガタになる**
     （okada が iPhone 17 Pro の実機と 375px の検証モードで確認・2026-09-09）。
   ★境目は 48em ＝ テーマの他の指定と同じ。★`br` に display:none は全モダンブラウザで効く。 */
@media (max-width:47.99em){ .br-pc{ display:none; } }
@media (min-width:48em)   { .br-sp{ display:none; } }

/* ★★スマホは**両端揃え**にする（2026-09-09・okada 指摘2回目）。
   ★指摘＝「段落やセクションごとに、右側の余白がガタガタに見える」（iPhone 17 Pro 実機／375px）。
   ★これは §13・§14 を直したあとにも残っていた。**残っていたのは、和文の自然な右端の凸凹そのもの**。
     段幅が狭いほど、1文字ぶんの差が目立つ。★手で入れた改行でも、折り返しの指定でもない。
   ★★和文は**両端揃えが本来の組み方**（書籍・新聞は全部これ）。文字が等幅に近いので、
     欧文のような「白い川」ができない。∴ 和文の本文では素直に効く。
   ★実測（`/issho-ni-ie-wo-mawasu/`・375px・右余白の標準偏差 px）:
       左揃え（いままで） ばらつき 6.5 ／ 最大 21 ／ ぴったり揃った行 17/59
       ★**両端揃え**       ばらつき **0** ／ 最大 **0** ／ ぴったり揃った行 **59/59**
   ★**PC には掛けない**。段幅が広いところでは凸凹が 6px 程度で目に入らず、
     欧文が混ざったときの語間の伸びだけが残るため。
   ★注記（正直に書く）: WCAG 2.1 の 1.4.8 は「両端揃えにしない」と言っている。★ただしあれは
     **語間で伸びる欧文**の話で、和文の字間調整は別物。★戻すときは、この2行を消せばよい。 */
@media (max-width:47.99em){
  /* ★★掛ける先を絞った（2026-09-09・okada 指摘3回目「段落やセクションによって字間がまちまち。
     広すぎるほうが目につく」）。測って分かったこと:
     ★**両端揃えで広がるのは「短い行」**。行に入りきらなかった分（最大で1文字ぶん＝約17px）を
       その行の文字数で割って配るので、**文字数が少ない行ほど1文字あたりの伸びが大きくなる**。
         19字（本文の段落）→ +6% ／ 15字（箇条書き）→ +14% ／ 10字 → +20%
     ★**箇条書きは字下げ 32px のぶん本文より狭い**（300px 対 320px）＝ 構造的に短い行が出る。
       ∴ **箇条書き・引用・定義リストは揃えない。**（実測: +4%超の行が 29 → 21、+7%超が 3 → 1）
     ★試して**駄目だったもの**も残す（同じ道を2度通らないため）:
       ・字送りを詰める（.02em / 0）… **悪化**（幅 1.75 → 2.45 / 3.14）。
         詰めると「あらかじめ空けてある分」が減り、伸ばす余地がむしろ増える
       ・`font-feature-settings:"palt"`（約物を詰める）… 中央値が下がるだけで、
         **隣の行との差は開く**（伸び 6% → 10.5%）
       ・`text-spacing-trim` … このフォントでは**1px も変わらなかった**
       ・`line-break:normal` … ばらつきは 0.378 → 0.302 と少し良くなるが、最大値は同じ
     ★★**残る揺れは両端揃えそのものの性質で、CSS では消せない**（本文段落で最大 +6%）。
       それでも駄目なら、この節を消せば左揃え（右端がガタガタ）に戻る。 */
  /* ★★掛けるのは**全幅で流れるもの**だけ（2026-09-09 に3度絞り込んだ最終形）。
     ★除いたもの＝ 箇条書き（字下げ 32px）・引用・「3行でいうと」の箇条（枠の内側）・
       「この記事の人」（アバターの右・262px）・発話（`.speech .say` は左に丸があるぶん狭い）。
       ★どれも**構造的に本文より狭い＝短い行が出る＝1文字あたりの伸びが大きくなる**。
     ★★**子セレクタ（`>`）にしてある**のが肝。箱の中に入った段落（発話・引用・注記・買う欄…）は
       padding のぶん狭いので、`.content p` と書くと**全部巻き込む**。
       ★実際いちど巻き込んで、発話の行が +9% 伸びていた（実測して気づいた）。
       ＝ **「全幅で流れている段落」だけに掛かる形**にした。新しい箱を足しても、自動的に外れる。 */
  /* ★★両端揃えをやめた（2026-09-09・実測で決着）。
     ★経緯: 右端の凸凹を直すために両端揃えを入れた（§13-5・§14）。右端は揃ったが、
       okada から「1つの記事の中で字間がバラバラで読みづらい」と3回指摘が続いた。
     ★仕組み: 両端揃えは行を必ず幅いっぱいに伸ばす。伸ばす量は「入りきらなかった分 ÷ 行の字数」で
       決まるので、**行ごとに字間が変わる**。段幅を字送りの整数倍に丸めても（案C。一度入れた）、
       禁則で1字落ちた行は伸びたままだった。
     ★★実機（iPhone 17 Pro・Safari）のスクリーンショットを画素で測った値:
         揃えていない行（段落の最終行） 字間 3.5px ＝ 本来の値
         両端揃えの行                   4.5 / 5.0 / 5.8 / 7.0px ＝ **本来の 1.3〜2.0倍**
       案C を入れても 7.5→7.0 にしか下がらなかった。
     ★Chrome には句読点をぶら下げる手段が無く（`hanging-punctuation` 未対応＝実測）、
       追い込みも無い。∴ **両端揃えを残したまま字間をそろえることは解けない**（`54` §6）。
     ★∴ 右端が最大1字ぶん凸凹することを受け入れて、**字間をそろえる側を採る**。
       右端の凸凹は視線が戻る左端に影響しないが、字間は読んでいる最中の文字の切り分けに効く。
     ★`text-wrap:pretty` は残す（孤立行 0＝実測）。
     ★句読点のぶら下げは残す＝ Safari では右端の凸凹が句読点のぶんだけ減る。Chrome は無視する。
     ★戻すときは、下の1行に `text-align:justify;` を足す。 */
  .content > p, .article__tab{ hanging-punctuation:allow-end; }
}
.content>*+*{margin-top:2em} .content>figure,.content>.kg-card{margin-block:3em}

/* ★★本文の図版の幅（2026-09-11・okada 指示「コンテンツ幅100%より左右に1文字分小さい程度」）。
   ★原因＝ **`<figure>` のブラウザ既定 `margin:1em 40px` を打ち消していなかった**。
     実測（1218px の窓・本文 650px）: 本文の段落 650 に対し、図版だけ **570**（左右40pxずつ内側）。
     ★`.kg-width-wide` は `margin-inline:auto` を持っていたので 650 のまま＝ **並ぶと不揃いに見えていた**。
   ★決め（3段）:
       通常          左右に **1文字ぶん**（`calc(100% - 2em)`）＝ 本文よりわずかに内側
       kg-width-wide 本文の幅いっぱい（100%）
       kg-width-full 同上（将来、段幅を超えて出すならここを変える）
   ★`em` は本文の文字サイズに追随するので、文字を大きくしても「1文字ぶん」が保たれる。
   ★対象は **`.content` の直下の figure だけ**（広告カードの中の小さな写真は別物なので触らない）。 */
.content>figure{ width:calc(100% - 2em); margin-inline:auto; }
.content>figure>img{ display:block; width:100%; height:auto; }
.content>figure.kg-width-wide, .content>figure.kg-width-full{ width:100%; }
@media (max-width:40em){
  /* ★スマホは段幅が狭いので、1文字ぶんの内側にしない（画面いっぱいに使う） */
  .content>figure{ width:100%; }
}

/* ★★「3行でいうと」を**3行に見せる**（2026-09-11・okada 指示）。
   ★実害＝ 1つの項目が2行に折り返すと、3項目なのか4行なのかが**見た目で分からない**
     （実測: 1つ目だけ 55px＝2行、他は 27px＝1行）。
   ★ノートの罫線のように、**1つ目と2つ目の下にだけ**細い点線を引く（最後には引かない）。
   ★色は `--soft`（既存の細線と同じ）。線は増やすが、**濃さは上げない**（`26` 第4条）。 */
.tldr li:not(:last-child){ padding-bottom:.55rem; border-bottom:1px dotted var(--soft); }
.tldr li+li{ margin-top:.55rem; }
.content h2{ counter-increment:sec; font-size:1.55em; line-height:1.45; margin:4.5rem 0 1.2rem!important; letter-spacing:.06em; font-weight:700; text-wrap:balance; }
.content h2::before{ content:counter(sec,decimal-leading-zero); display:flex; align-items:center; font:800 .85rem/1 var(--font-en); letter-spacing:.1em; margin-bottom:.8rem; background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 50%/1.25rem 4px; padding-inline-start:1.9rem; }
.content h2.no-num{ counter-increment:none; } .content h2.no-num::before{ content:none; }
.content h3{ font-size:1.2em; line-height:1.5; margin-top:3em; margin-bottom:.8em; letter-spacing:.04em; }

/* ---------- 書式（素では2枚を縦に読む。JS が来たときだけタブを足す） ---------- */
.content .tmpl{ min-width:0; margin:2.4rem 0; border:1px solid var(--ink); border-radius:var(--r); }
.tmpl__panel{ min-width:0; padding:1.2rem; }
.tmpl__panel + .tmpl__panel{ border-top:1px dashed var(--ink); }
.content .tmpl__h{ margin:0; font-size:1.05em; line-height:1.5; letter-spacing:.04em; }
.tmpl pre{ max-width:100%; margin:1rem 0 0; padding:1rem; overflow-x:auto; border:1px solid var(--soft); border-radius:6px; background:var(--tint); color:var(--fg); font:400 .88rem/1.8 var(--font-ja); letter-spacing:.02em; }
/* 2026-09-10 実測：320px・特大で252px＋93px=345px（右端371px）→ 横スクロールせず2段に折り返す。 */
.tmpl__tabs{ display:flex; flex-wrap:wrap; border-bottom:1px solid var(--ink); }
.tmpl__tabs + .tmpl__panel{ border-top:0; }
.tmpl__tab{ flex:1 0 auto; min-height:var(--tap); padding:.6rem 1rem; border:0; border-inline-end:1px solid var(--soft); background:var(--bg); color:var(--fg); cursor:pointer; font:700 .84rem/1.4 var(--font-ja); letter-spacing:.05em; }
.tmpl__tab:last-child{ border-inline-end:0; }
.tmpl__tab[aria-selected="true"]{ background:var(--tint); box-shadow:inset 0 -3px 0 var(--ink); }
.tmpl__copy{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap); margin:0; padding:0 1.1rem; border:1px solid var(--ink); border-radius:999px; background:var(--bg); color:var(--fg); cursor:pointer; font:700 .84rem/1 var(--font-ja); letter-spacing:.06em; }
.tmpl__copy + pre{ margin-top:.8rem; }

/* ★.steps / .faq は本文の見出し・段落の余白を受けない（2026-09-05）。
   `.content h3{margin-top:3em}` と `.steps h3{margin:0}` は詳細度が同じで、
   ファイルの**後ろにある .content h3 が勝つ**。結果、番号と見出しが 3em 離れて
   「文字の位置がばらばら」に見えていた。ここで打ち消す（.steps 側の定義は上にある）。 */
.content .steps h3{ margin:0; }
.content .steps p{ margin:.3em 0 0; }
.content .steps > li + li{ margin-top:0; }
.content .faq h3{ margin:0; }
/* ★ここも子だけ（上と同じ理由。答えの中のリストまで margin-top:0 になっていた）。 */
.content .faq > li + li{ margin-top:0; }
/* 箇条書き（2026-09-05）。★ブラウザ既定の中黒・数字をやめ、線の語彙に合わせる。
   ul = 墨の短い横棒（第3条「実線・本文の幅＝並んだものの区切り」の最小単位）
   ol = Inter の番号（見出しの 01,02… と同じ系統）。どちらも**ぶら下げ**にして、
   折り返した2行目の頭が本文と揃うようにする（行頭がずれると読み位置を見失う）。
   ★.steps / .faq / .glossary-list / .glossary-cite は自前の体裁を持つので触らない。 */
.content ul:not(.faq):not(.glossary-list):not(.glossary-cite):not(.contacts),
.content ol:not(.steps):not(.toc__list){ list-style:none; padding-inline-start:0; margin-block:1.7em; }
.content ul:not(.faq):not(.glossary-list):not(.glossary-cite):not(.contacts) > li,
.content ol:not(.steps):not(.toc__list) > li{ position:relative; padding-inline-start:2em; line-height:1.9; }
/* ★2026-09-11: .7em（=11px）→ .9em（=14px）。第15条の下限（本文の中は 14px）に届いていなかった。
   ★箇条書きは「並んだものを見比べる」ための形なので、行間より**項目間**が広くないと
   どこで1項目が終わるのか分からない。 */
.content li + li{ margin-top:.9em; }
.content li > p:first-child{ margin-top:0; }
.content li > p:last-child{ margin-bottom:0; }

/* ul の印。★2026-09-05: 横棒 → **ドット**（ol の番号と同じ薄墨）。
   横棒は本文中の「—」と見分けがつきにくかった。 */
.content ul:not(.faq):not(.glossary-list):not(.glossary-cite):not(.contacts):not(.tool-list) > li::before{
  content:""; position:absolute; inset-inline-start:.35em; inset-block-start:.78em;
  inline-size:.42em; block-size:.42em; border-radius:50%; background:var(--fg-muted); }

.content ol:not(.steps):not(.toc__list){ counter-reset:nmli; }
.content ol:not(.steps):not(.toc__list) > li{ counter-increment:nmli; }
.content ol:not(.steps):not(.toc__list) > li::before{
  content:counter(nmli) "."; position:absolute; inset-inline-start:0; inset-block-start:0;
  font:700 .88em/1.9 var(--font-en); color:var(--fg-muted); letter-spacing:.02em;
  font-variant-numeric:tabular-nums; }

/* 入れ子。1段だけ想定（それ以上は本文の構造が壊れている合図）*/
.content li > ul, .content li > ol{ margin-block:.7em; }
.content li ul > li{ padding-inline-start:1.5em; }
/* 入れ子は中抜きの丸にして、1段目と見分ける */
.content li ul > li::before{ inline-size:.4em; block-size:.4em; background:transparent;
  border:1px solid var(--fg-muted); }
.content li ol > li{ padding-inline-start:1.7em; }
.content li ol > li::before{ font-size:.8em; }
.content blockquote{ margin-inline:0; padding:.2em 0 .2em 1.2em; border-inline-start:1px solid var(--ink); color:var(--fg-muted); }
/* 表（2026-09-05 改定）。★内側の罫は**すべて同じ薄墨**（--soft）に統一する。
   直す前は `th` の下だけ墨（--ink）だったので、行見出しのある表（1列目が th）で
   **濃い線と薄い線が混ざって**見えていた。見出し行の区別は「線を濃くする」のではなく
   面（--tint）で行う（26 第3条: 線は1種類・意味で描き分ける）。
   外枠だけ 1px の墨＝「領域が変わる」。中の罫＝「並んだものの区切り」。 */
.content table{ width:100%; border-collapse:collapse; font-size:.92em; line-height:1.7;
  border:1px solid var(--ink); }
.content th,.content td{ padding:.75em .9em; text-align:start; vertical-align:top;
  border-bottom:1px solid var(--soft); }
.content tr > * + *{ border-inline-start:1px solid var(--soft); }   /* 縦罫も同じ薄墨。th/td の別を問わない */
.content tbody tr:last-child > *{ border-bottom:0; }               /* 最終行の下は外枠に任せる。
   ★tbody を必ず書くこと。`tr:last-child` だけだと **thead の行にも当たり**、見出し行の下罫が消える */
.content th{ font-weight:700; background:var(--tint); }
.content caption{caption-side:top;text-align:start;font:600 .78rem/1.6 var(--font-ja);letter-spacing:.06em;color:var(--fg-muted);padding:0 0 .6em}
/* ★2列の対比表は、列幅を半分ずつにそろえる（2026-09-11・okada 指摘）。
   ★既定の `table-layout:auto` は**中身の文字数で列幅を配る**ので、左が長文だと
   左だけ広がって右が細くなる（レビュー依頼の「書けます／書けません」で実測）。
   ★対比の表は**左右が同じ重さに見えること**が意味なので、幅を固定する。
   ★`nm-eq` を付けた表だけ。ほかの表（仕様表など）は auto のままにする。 */
.content table.nm-eq{ table-layout:fixed; }

/* ★目次から飛んだとき、見出しが画面の上ぴったりに来ないようにする（2026-09-11・okada 指摘）。
   > 目次のリンク先の見出しが画面ギリギリ上ぴったりにジャンプして読みづらい。
   > その見出しの大きさで1文字分くらい上の位置に移動してほしい。
   ★`scroll-margin-top` は「飛び先の上に、これだけ空きがあるものとして止まる」指定。
   ★em にしているので、**見出しの大きさに追随する**（大きい見出しほど空きも大きい）。 */
.content h2, .content h3, .content--page h2, .content--page h3,
.article__body [id], .page__body [id]{ scroll-margin-top:1.6em; }
/* ★リンク先が段落や表のときは、本文の1文字分でよい。 */
.content p[id], .content table[id], .content ul[id], .content ol[id]{ scroll-margin-top:1.2em; }
/* ★「ラベル→説明」の表は、1列目に幅を与える（2026-09-11・okada 指摘）。
   ★既定の auto は**中身の文字数で配る**ので、左の見出しが2〜3字で折り返して読めない。
   ★判定は JS（列の平均字数の比が 1.5〜3.5、または3列以上で1列目が短い）。 */
.content table.nm-lead{ table-layout:fixed; }
.content table.nm-lead tr > *:first-child{ width:11em; }
@media (max-width:47.99em){ .content table.nm-lead{ table-layout:auto; }
  .content table.nm-lead tr > *:first-child{ width:auto; } }
/* ★行見出しが短いラベルの表だけ、1列目を折り返さない（画面幅に関係なく）。
   ★`.nm-lbl` は JS が付ける（tbody の1列目が th で、最長 10字以下のとき）。
   例＝ 記事末の「この記事について」（執筆にかかった稼働／反動／AIの使用）。
   ★入らない例＝ /policies/（21字）・/for-experts/「お引き受けいただけないこと」（20字）。 */
.content table.nm-lbl:not(.nm-stack) tbody th{ white-space:nowrap; width:1%; }

/* ---------- フッター前の帯「関わる」（2026-09-11・登録の帯と差し替え） ---------- */
/* ★4つは対等ではない。**いちばん起きてほしいのは体験談**なので、そこだけ1行を丸ごと使う。
   残り3つは同じ幅で並べる（okada 指示）。★枠線は 1px の隙間で描く（各箱に border を
   持たせると接する辺が 2px になって太る＝ .boxmenu と同じ作り）。 */
/* ★2026-09-11 okada「縦方向に高さを取りすぎ。上下の余白、とくに下が広い」
   → 帯の余白を詰め、**下を上より狭く**した（下はフッターの余白が続くため）。 */
.cta-band{ border-top:1px solid var(--ink);
  /* ★上の余白（2026-09-11 okada 指摘「FAQ のボタンと関わるの上の線がくっついている」）。
     ★帯は <main> の外にあるので、**本文側の余白が効かない**。ここで持つ。
     ★前の「登録の帯」は自前で大きな padding を持っていたので気づかなかった。 */
  margin-top:clamp(2.6rem,5.5vw,4.2rem);
  /* ★上下を「線から箱まで」でそろえる（2026-09-11 okada 指摘「下の余白がやたらと広い」）。
     上＝ padding-top ＋ 見出しの高さ（約 2.6rem）。∴ 下も同じだけ取る。
     ★実測（直す前）: 上 75px ／ 下 121px。下の内訳は 帯の padding 25px ＋
     **`.site-footer` の margin-top 6rem（96px）**だった。
     ＝ 広かったのは帯ではなく**フッター側の余白**。帯が前に来たときは、それを 0 にする。 */
  padding-block:clamp(1.4rem,2.8vw,2.1rem) calc(clamp(1.4rem,2.8vw,2.1rem) + 2.6rem); }
.cta-band + .site-footer{ margin-top:0; }
.cta-band__h{ display:flex; align-items:baseline; gap:.9rem; margin:0 0 .9rem; }
.cta-band__h .en{ font:800 .82rem/1 var(--font-en); letter-spacing:.16em; text-transform:uppercase; }
.cta-band__h .ja{ font-size:.86rem; letter-spacing:.08em; color:var(--fg-sub); }
.ctabox{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--ink); border:1px solid var(--ink);
  border-radius:var(--r); overflow:hidden; }
.ctabox > li{ margin:0; }
.ctabox__lead{ grid-column:1 / -1; }
/* ★アイコンと文字は**横並びが基本**（2026-09-11 okada 指示）。縦に積むと高さを取る。 */
.ctabox a{ display:flex; flex-direction:row; align-items:center; gap:.9rem;
  height:100%; min-height:var(--tap); padding:clamp(.9rem,1.9vw,1.2rem);
  background:var(--bg); color:var(--fg); text-decoration:none; }
.ctabox__body{ display:grid; gap:.15rem; min-width:0; }

/* サイト・SNS のリンク欄（＋で増やせる）。2026-09-11 */
.linkrows{ margin:0 0 1.1rem; display:grid; gap:.45rem; }
.linkrows__hint, .ctf__hint{ font-size:.8rem; line-height:1.7; color:var(--fg-sub); }
.linkrows__list{ display:grid; gap:.45rem; }
.linkrows__row{ margin:0; display:flex; align-items:center; gap:.5rem; }
.linkrows__row .ctf__in{ flex:1 1 auto; min-width:0; }
.linkrows__del{ flex:none; width:var(--tap); height:var(--tap); border:1px solid var(--soft);
  border-radius:50%; background:var(--bg); color:var(--fg-sub); font:700 1rem/1 var(--font-en);
  cursor:pointer; }
.linkrows__del:hover{ border-color:var(--ink); color:var(--fg); }
.linkrows__add{ justify-self:start; min-height:var(--tap); padding:0 1.1rem;
  border:1px dashed var(--ink); border-radius:999px; background:var(--bg); color:var(--fg);
  font:700 .82rem/1 var(--font-ja); letter-spacing:.06em; cursor:pointer; }
.linkrows__add:hover{ background:var(--tint); }
.ctabox__ic{ display:block; color:var(--fg-muted); }
.ctabox__ic{ flex:none; }
.ctabox__ic svg{ display:block; width:clamp(30px,3.2vw,38px); height:auto; }
.ctabox__t{ font:700 .96rem/1.45 var(--font-ja); letter-spacing:.04em; }
.ctabox__d{ font-size:.82rem; line-height:1.6; color:var(--fg-sub); }
.ctabox a:hover, .ctabox a:focus-visible{ background:var(--tint); }
.ctabox a:hover .ctabox__ic, .ctabox a:focus-visible .ctabox__ic{ color:var(--fg); }
.ctabox a:hover .ctabox__t{ text-decoration:underline; text-underline-offset:.25em; }
/* ★先頭の1枚（体験談）は、横に広い1行として組む */
@media (min-width:48em){
  .ctabox__lead a{ gap:clamp(1rem,2.4vw,1.8rem); padding:clamp(1.1rem,2.2vw,1.5rem); }
  .ctabox__lead .ctabox__ic svg{ width:clamp(38px,4vw,48px); }
  .ctabox__lead .ctabox__body{ flex:1 1 auto; }
  .ctabox__lead .ctabox__t{ font-size:clamp(1.02rem,1.9vw,1.18rem); }
  /* ★リードの説明は**1行に収める**（okada 指示）。溢れたら省略する。 */
  .ctabox__lead .ctabox__d{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ctabox__lead .ctabox__go{ flex:none; display:inline-flex; align-items:center; justify-content:center;
    gap:.7rem; min-height:var(--tap); padding:0 1.5rem; border-radius:999px;
    background:var(--ink); color:var(--bg); font:700 .88rem/1 var(--font-ja); letter-spacing:.08em; }
  .ctabox__lead .ctabox__go .ar{ font-family:var(--font-en); font-weight:700; }
}
@media (max-width:47.99em){
  .ctabox{ grid-template-columns:1fr 1fr; }
  .ctabox__lead a{ flex-wrap:wrap; }
  .ctabox__lead .ctabox__body{ flex:1 1 12rem; }
  .ctabox__lead .ctabox__go{ flex:1 0 100%; margin-top:.2rem; font:700 .84rem/1.6 var(--font-ja);
    text-decoration:underline; text-underline-offset:.25em; }
}
@media (max-width:26em){ .ctabox > li:not(.ctabox__lead) .ctabox__d{ display:none; } }

/* ---------- 固定ページの目次（2026-09-11） ---------- */
/* ★見た目は記事の目次（.toc）と同じ（okada 指示）。置き場所だけ違う＝ **本文の先頭**。 */
.toc--page{ margin:0 0 3rem; }
/* ★本文（.content）の中に置いたので、**本文の ol の体裁を受けてしまう**。
   ★実測（2026-09-11）: 番号が「8. 00」と二重に出た＝ 外側は `<ol>` の既定の印、
   内側は `.content ol` の counter（nmli）が `.toc__list` の counter（toc）に勝って 00 のまま。
   ＝ 記事の目次が `.content` の外にあるのは、この衝突を避けるためだった（initToc のコメント）。
   ∴ `.content ol:not(.steps)` の各規則から `.toc__list` を除いた。 */

/* ---------- 追いかけてくる目次（.ftoc）2026-09-11 ---------- */
/* ★本文の段（--measure＝43em）の**外側**に置く。中央から右へ。
   ★動く範囲は JS が本文の領域に閉じる（題の領域にも、フッターにも出さない）。
   ★入りきらない高さのときは JS が**出さない**＝ スクロールバーを出さない（okada 指示）。
   ★動きは付けない（`26` 第6条）。いま読んでいる節に印を付けるだけ。 */
.ftoc{ display:none; }
@media (min-width:77.5em){
  /* ★止まる場所を**箱で決める**（2026-09-11 全面書き直し）。
     ★JS で fixed の top を毎回計算していたのをやめた。速く動かすと行き過ぎ、
     境目で出す/隠すが交互に走って**点滅**した（okada 指摘）。
     ★レール（.ftoc-rail）＝ 動いてよい範囲。中の目次は sticky なので、
     **レールの下端で自然に止まる**＝ フッターの「関わる」より下へ行かない。
     ★レールの上端は JS が1回だけ測る（本文の目次より少し下・okada 指示）。 */
  /* ★位置は**パディングの箱**から測られる（2026-09-11 実測で踏んだ）。
     ★`position:absolute` の left は、親の**内側の余白を含めた**箱の左端が 0 になる。
     ここを「本文の左端が 0」と思い込んでいたため、**全ページで 152px 食い込んでいた**
     （実測 1600px: レール左 791 ／ 本文の右端 943）。∴ 余白のぶんを足す。 */
  /* ★右端に寄せる（2026-09-11・okada 指示）。
     > 右側のスペースにまだ余裕があるときは、それを有効活用して、本文と目次の間を十分に取る。
     > 本文を読むことに集中させるため。目次はあくまで**おまけのナビゲーション**。
     ★左からの距離で置くと、画面が広がっても**本文にくっついたまま**右が余る。
     ∴ **右端（サイトの枠の右辺）に貼り付けて**、余った分だけ本文から離れる形にする。
     ★幅も画面に応じて少しだけ広げる（220〜280px）。広げすぎると本文と競う。
     実測の間隔＝ 1280px:227 ／ 1440px:225 ／ 1600px:189 ／ 1920px:177px。 */
  .ftoc-rail{ position:absolute; inset-block-end:2.5rem;
    inset-inline-start:auto; inset-inline-end:var(--pad-inline);
    width:clamp(220px, 14vw, 280px);
    pointer-events:none; }
  .ftoc{ display:block; position:sticky; top:7rem; pointer-events:auto;
    padding-inline-start:.9rem; border-inline-start:1px solid var(--soft); }
  .ftoc ol{ list-style:none; margin:0; padding:0; counter-reset:ftoc; }
  .ftoc li{ counter-increment:ftoc; margin:0; }
  .ftoc a{ display:grid; grid-template-columns:1.5rem minmax(0,1fr); gap:.5rem;
    align-items:start; min-height:var(--tap); padding:.3rem 0;
    color:var(--fg-muted); text-decoration:none;
    font:600 .76rem/1.5 var(--font-ja); letter-spacing:.02em; }
  .ftoc a::before{ content:counter(ftoc,decimal-leading-zero);
    font:700 .64rem/1.75 var(--font-en); letter-spacing:.06em; }
  /* ★見出しが長いページ（/recruit-articles/）でも高さが読めるように、**2行で止める**。
     行数を決めておかないと、1項目が4行になって全体が画面を超える（実測）。 */
  .ftoc a > :only-child, .ftoc a{ overflow:hidden; }
  .ftoc a span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; }
  .ftoc a:hover{ color:var(--fg); text-decoration:underline; text-underline-offset:.25em; }
  /* ★いま読んでいる節。色だけでなく**線でも**示す（`26` 第4条＝色だけに頼らない）。 */
  .ftoc a[aria-current="true"]{ color:var(--fg); font-weight:700;
    box-shadow:inset 2px 0 0 0 var(--ink); padding-inline-start:.6rem; margin-inline-start:-.9rem; }
  /* ★本文を少し左へ寄せて、右の目次との間に余白を作る（okada 指摘「距離感が近すぎる」）。
     ★寄せすぎない（2026-09-11 okada 指摘「ロゴの縦のラインより左に来ているのはおかしい」）。
     実測（直す前・1600px）＝ 本文の左端 148px ／ ロゴの左端 205px＝ **はみ出していた**。
     ∴ 中央から **150px だけ**左へ寄せる。1600px で 本文 284〜1015 ／ 目次 1075〜1315
     （間 60px・ロゴより 79px 内側）。1240px でも 1920px でも同じ関係になる。 */
  .page__body .wrap, .page__head .wrap, .page__body > .refs, .page__body > .sources{
    margin-inline:0 auto; transform:none; }
}

/* ページ冒頭の飛び先（.jump）。★2026-09-11 okada 依頼「説明が長くて下までアクセスしづらい」。 */
/* ★小さい文字に薄い色を重ねない（2026-09-11・okada 指摘）。
   > このトップページにちらほらある小さくて薄い文字、読みづらいよね。
   ★実測のコントラストは AA を満たしていた（--ink-2 は 4.93〜5.05:1）。★**基準は満たすが読みづらい**
   ——**小さい**と**薄い**を同時にやっているため。∴ 小さい文字は `--fg-sub`（約 10:1）にする。
   ★`--fg-muted` は**日付・出典・図版のキャプションなど、読み飛ばしてよい情報**にだけ残す。 */
.sec__lede, .two__lede .sub, .pillars p, .play__note, .hero__note,
.steps p, .subscribe__lede, .fb__lede{ color:var(--fg-sub); }

/* ★上の余白（2026-09-11 okada 指摘「リード群にくっついている」）。
   リードの直後に挿し込むので、ここで持たないと文にぶつかる。 */
.jump{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:1.7rem 0 2rem; }
.jump__lbl{ font:700 .78rem/1 var(--font-ja); letter-spacing:.1em; color:var(--fg-muted); }
.jump .pill{ min-height:var(--tap); padding:0 1.2rem; font-size:.82rem; }
.jump .ar{ font-family:var(--font-en); }
/* ★飛び先の見出しが、上部の固定要素に隠れないようにする。 */
[data-contact],[data-review-form],[data-story-form],[data-experts-form],[data-tmpl]{ scroll-margin-top:1.5rem; }
/* ★1列目（行見出し）が長い表 `.tbl-lead`（2026-09-07・okada 指摘）。
   auto レイアウトは1列目の**折り返さない幅**を強く見るので、行見出しが長い表では
   1列目が半分以上を取り、残りの列が1〜2字で折り返す。実測（1200px・表の幅 635px）:
     手ならしの「道具」の表 326/175/133（1列目 51%）／policy-external 357/96/83/98（56%）
     policy-revenue 260/177/197（41%）／post-full 306/100/242（47%）
   → **1列目に幅を与え、残りは等分**にする（table-layout:fixed）。
   ★fixed では**1行目のセルだけ**が列幅を決めるので、幅は 1行目の1列目に書く。
   ★狭い画面では表を縦積みにするので（.nm-stack）、幅を戻す。 */
.content .tbl-lead{ table-layout:fixed; }
.content .tbl-lead tr:first-child > *:first-child{ width:11em; }
/* ★1列目を折り返せるようにする。固定ページの表は `.content--page th:first-child` で
   **nowrap** になっており（短い見出し向けの決め）、これが「1列目が長い表」で
   幅を食う真因だった。幅を与えても nowrap のままだと**隣の列へはみ出す**（実測）。 */
.content .tbl-lead th:first-child,
.content .tbl-lead td:first-child{ white-space:normal; }

/* ★モバイルの表（2026-09-06）。実測= 390px で3列の表は1列 90px 前後＝1〜2字で折り返す。
   ①まず全部の表を少し小さく・詰める（字間と行間も表の中だけ落とす）
   ②列が3つ以上／長文セルを含む表は **縦積み**にする（.nm-stack は JS が付ける。
     JS が動かなければ表のまま＝読めなくなることはない） */
@media (max-width:47.99em){
  .content table, .content--page table{ font-size:.86em; line-height:1.75; letter-spacing:.02em; }
  .content .tbl-lead{ table-layout:auto; }
  .content .tbl-lead tr:first-child > *:first-child{ width:auto; }
  .content th, .content td{ padding:.6em .7em; }
  /* ★2026-09-09（第2版）。★nowrap は「短いラベル列」の表**だけ**に限る（.nm-lbl）。
     ★初版（405b1c3・同日 17:44）は `tbody th` すべてに掛けていた。そのため
       **行見出しが長い文の表**で列が折り返せなくなり、表が画面幅を超えた。
       実測= /policies/（行見出し 21字）でページ幅 395px（360px 画面でも 395px）／
             /for-experts/「お引き受けいただけないこと」（20字）で 370px。
       ★さらに、この行は 749行目（.content--page はモバイルで折り返す）を
         詳細度 (0,2,3) > (0,1,2) で**黙って上書き**していた。
     ★判定は JS（initTables が行見出しの最長字数を見て .nm-lbl を付ける）。
       ★JS が動かなければ .nm-lbl が付かない＝素の折り返す表＝**はみ出さない**。
         初版は JS 停止時に nowrap だけが残り、横にはみ出していた（安全側が逆だった）。 */
  .content table.nm-lbl:not(.nm-stack) tbody th{ white-space:nowrap; width:1%; }

  /* ★② 目次を「縦のラベル＋横並び」から、**横書きのラベルを上に置いて、下に全幅**へ
     （2026-09-09・okada 指示）。★スマホでは 3rem の縦ラベルが本文の幅を削っていた。 */
  .toc{ display:block; }
  .toc__label{ writing-mode:horizontal-tb; text-orientation:mixed;
    display:inline-flex; width:auto; padding:.45em .8em .4em; margin:0 0 .7rem;
    letter-spacing:.16em; border-radius:4px; }

  /* ★③ 登録の帯は、ラベルを読み上げ専用にしている（見えない）ぶん、
     **入力欄の上に余白が1つも無かった**（okada 指摘）。帯のときだけ空ける。 */
  .subscribe--band .subscribe__form{ margin-top:1.1rem; }

  /* ★④ ヘッダのグローバルナビはスマホでは出さない（okada 指示）。
     ★同じ行き先は Menu ボタン（メガメニュー）から全部たどれるので、機能は失われない。 */
  .site-nav{ display:none; }
  .content caption{ font-size:.8em; }

  /* ★縦積みの体裁（2026-09-06・第2案）。
     直す前は「太字の題／薄墨のラベル／値」が全部 13.8px で並び、**強弱が出ていなかった**。
     → 憲法の語彙（面＝tint・実線1px＝構造・破線1px＝副）で3段の階層を作る:
       ① 題 = ティントの面・16px・700         （いちばん強い）
       ② ラベル = 破線の下に薄墨の小さな字     （副＝どの列の値か）
       ③ 値 = 14.4px の本文                    （読むところ）
     行の区切りは 1px 実線（構造）。太線は使わない。
     ★**単位は em だけ**（rem を使わない）。文字サイズ切替（大 1.125／特大 1.25）は
       `--fs-body` の倍率なので、rem で書くと**表の中だけ切替が効かなくなる**（2026-09-06 に自分で踏んだ）。 */
  /* ★枠は table ではなく tbody に持たせる（2026-09-06）。
     block にした表に border を付けると、caption が**枠の内側**に入ってしまう。
     横並びの表では caption は枠の外（上）に出るので、縦積みでも同じ見え方に揃える。 */
  .content table.nm-stack{ display:block; border:0; }
  /* ★caption は table-caption のままだと、block の表の中で**縦1文字**に潰れる（実測） */
  .content table.nm-stack caption{ display:block; padding-bottom:.5em; }
  .content table.nm-stack thead{ display:none; }        /* 見出しは data-label で各セルに出す */
  .content table.nm-stack tbody{ display:block; border:1px solid var(--ink); }
  .content table.nm-stack tr{ display:block; padding:0; }
  .content table.nm-stack tbody tr + tr{ border-top:1px solid var(--ink); }
  /* ★打ち消しは、打ち消したいものだけに絞る（2026-09-06・lofir 側の指摘）。
     ここで `background:transparent` まで書くと、**行の途中にある th の面まで消す**。
     消したいのは枠と表組みの余白だけなので、背景には触らない。 */
  .content table.nm-stack th, .content table.nm-stack td{
    display:block; border:0; padding:.55em .85em; }
  /* ① 題（行見出し）＝ ティントの面 */
  .content table.nm-stack tbody th:first-child{
    font-size:1.16em; font-weight:700; line-height:1.6; letter-spacing:.04em;
    background:var(--tint); padding:.6em .85em; }
  /* ② ラベル ＝ 破線で仕切り、その下に薄墨の小さな字 */
  .content table.nm-stack td[data-label]{ border-top:1px dashed var(--soft); }
  .content table.nm-stack tbody tr > td:first-child[data-label]{ border-top:0; }
  .content table.nm-stack td[data-label]::before{
    content:attr(data-label); display:block; margin:0 0 .15em;
    font:700 .85em/1.55 var(--font-ja); letter-spacing:.06em; color:var(--fg-muted); }
  /* ③ 値 ＝ 本文より少しだけ小さい。表の詰め（.86em）よりは大きくして読ませる */
  .content table.nm-stack td{ font-size:1.05em; line-height:1.8; }
  /* ★値が短い表（.nm-stack--tight）＝ ラベルと値を1行に並べる。
     数字の記録（日ごとの稼働など）は、縦に伸ばすと**並べて見られなくなる**ため。 */
  .content table.nm-stack--tight td[data-label]{
    display:grid; grid-template-columns:6.5em minmax(0,1fr); align-items:baseline;
    column-gap:.7em; padding-top:.42em; padding-bottom:.42em; }
  .content table.nm-stack--tight td[data-label]::before{ margin:0; }

  /* 行見出しの無い表（thead だけ）は、1つ目の値を題の代わりに立てる */
  .content table.nm-stack tbody tr > td:first-child:not([data-label]){
    font-weight:700; background:var(--tint); }

}
.content hr{border:0;border-top:1px dashed var(--ink);margin:3em 0}
.content mark{ background:linear-gradient(transparent 55%, var(--mark) 55%); color:inherit; padding:0 .1em; }
/* ★強調したい一言の箱（Ghost の Callout カード）。2026-09-06・okada 指摘で作り直した。
   直す前は**左に 1px の罫があるだけ**で、引用と見分けがつかず、
   「ここが強調したいところ」だと伝わっていなかった（本文の blockquote も左罫のため）。
   → **ティントの面＋1px の枠**にして、面で「囲われた一言」だと分かる形にする。
   ★注記の箱（.callout＝黒い札＋上下の罫）とは役目が違う:
     .callout        = ラベルのある注記（何についての注記かを札で言う）
     .kg-callout-card = ★**ラベルのいらない、強調したい一言**
   ★引用（.content blockquote）は左罫のまま＝ 3つが線の使い方で区別される。 */
.content .kg-callout-card{
  /* ★★2026-09-07（okada 指摘「強調ブロックのレイアウトが崩れている」）:
     Ghost の cards.min.css が `.kg-callout-card{display:flex}` を当てている。
     本物の Callout カードは中に .kg-callout-emoji と .kg-callout-text の2つを持つので flex で成立するが、
     こちらは**素のテキスト**を入れているため、**インラインの子が1つずつ flex アイテムになって列に割れていた**。
     ∴ display を自分で宣言して打ち消す。（こちらの規則は詳細度で勝つが、display を書いていなかった） */
  display:block;
  background:var(--tint)!important; border:1px solid var(--ink); border-radius:var(--r);
  padding:1.3rem 1.4rem; margin:2.4rem 0;
  /* ★色は本文色に戻す。`.content blockquote{color:var(--fg-muted)}` を受けて薄墨になり、
     **強調したい一言なのに引っ込んで見えていた**（2026-09-06 実測） */
  color:var(--fg);
  font-weight:700; letter-spacing:.03em; line-height:1.9; }
@media (max-width:47.99em){ .content .kg-callout-card{ padding:1.1rem 1.1rem; } }
.content figcaption,.kg-image-card figcaption{ font:600 .78rem/1.6 var(--font-ja); color:var(--fg-muted); letter-spacing:.06em; margin-top:.6rem; }
/* ★図版の作り手表示（2026-09-07・`26` 第9条「毎回キャプションに書く」）。
   説明文と同じ行に混ぜず、**別行で一段小さく**置く＝説明を読む邪魔をしない。
   ★opacity で薄めない。`opacity:.85` を掛けたら白地でのコントラストが **5.1:1 → 3.75:1** に落ち、
     第4条の「本文より小さい字も 4.5:1 以上」を割った（2026-09-07 に実測で気づいた）。
     ★薄く見せたいときは**色そのものを決める**。透明度で薄めると、下の紙の色で結果が変わる。 */
.content figcaption .fig-credit,.kg-image-card figcaption .fig-credit{
  display:block; margin-top:.35rem; font-weight:600; font-size:.68rem; letter-spacing:.04em;
}
.content img{ border-radius:var(--r); }
/* インタビュー: 話者レイアウト */
.q{ font-weight:700; margin:2.4em 0 .8em; letter-spacing:.04em; } .q::before{ content:"── "; color:var(--fg-muted); }
/* 話者と発話（.speech）。★2026-09-05 改定。
   直す前は「4em の欄に太字の1文字」だったので、**余白ばかりで誰の発言か結びつかなかった**。
   → 「この記事の人」で使っている丸アイコンと同じ形にして、発話と横に並べる。
     読者は People の一覧と同じ丸を目印に、K が誰かを辿れる。 */
.speech{ display:grid; grid-template-columns:3.6rem 1fr; column-gap:1rem;
  align-items:start; margin:1.6em 0; }
.speech .who{ grid-column:1; display:flex; flex-direction:column; align-items:center;
  gap:.35rem; text-align:center; }
/* 丸＝イニシャルか姓の1文字。★2026-09-05: その下に**名前**を小さく出す。
   イニシャルだけの人（Kさん）と、実名の人（山田さん・専門家・店舗）が混在するため、
   丸だけでは誰か分からない。丸は目印、名前が本体。 */
.speech .who__mark{ inline-size:2.4rem; block-size:2.4rem; flex:none;
  border-radius:50%; border:1px solid var(--ink); background:var(--tint);
  display:inline-flex; align-items:center; justify-content:center;
  font:800 .9rem/1 var(--font-en); letter-spacing:0; color:var(--fg); }
/* ★名前は折り返せるようにする。`word-break:auto-phrase` だと文節で切れず、
   5文字（佐々木さん）で列からはみ出した（実測）。既定の和文の折り返しに戻し、
   禁則（line-break:strict）だけ効かせる。 */
/* ★2026-09-09 修正（監査 09）。10.24px（モバイル）で、拡大設定も効いていなかった。
   ★rem → em にして本文の拡大に乗せる。★サイト内の話者名は最長4字（Kさん／Sさん／山田さん）
     なので、列を 3.2rem → 3.6rem に広げれば 12px でも1行に収まる（実測）。 */
.speech .who__name{ font:600 .75em/1.45 var(--font-ja); letter-spacing:.02em;
  color:var(--fg-muted); word-break:normal; line-break:strict; }
.speech .say{ grid-column:2; margin:0; padding-block-start:.2em; }
.speech + .speech{ margin-top:1.2em; }
@media (max-width:47.99em){
  .speech{ grid-template-columns:3.6rem 1fr; column-gap:.8rem; }
  .speech .who__mark{ inline-size:2rem; block-size:2rem; font-size:.8rem; }
}
/* 当事者の言葉（1px の箱・面はティント） */
/* ★.callout は2つの用途が同居していた（2026-09-06 に実測して分けた）。
   実測= 14個が **43〜65字（当事者の言葉・短い要点）** と **97〜149字（説明の注記）** の二山。
   同じ「1.12em の太字」で出していたので、長い注記が**本文より大きい太字の塊**になり読みづらかった
   （okada 指摘・スマホ実機）。
   → **既定は本文サイズ**。短いもの（80字以下）だけ JS が `--say` を付けて大きくする。
   ★JS が動かなければ全部が本文サイズ＝**大きすぎる側には倒れない**（安全側に倒す）。 */
.content .callout,.callout{ border:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); border-radius:0; background:transparent; padding:1.5rem 0 1.4rem; margin:3rem 0!important; color:inherit; font-size:1em; font-weight:500; letter-spacing:.04em; line-height:1.9; }
/* ★短い「言葉」だけ、大きく・太く。長い注記は本文と同じ太さにする（区別は線とラベルが担う）。 */
.content .callout--say,.callout--say{ font-size:1.12em; font-weight:700; }
/* ★注記の箱が2つ続くと、1つ目の下罫と2つ目の上罫が近くて**線が2本並ぶ**（2026-09-06・okada 指摘）。
   → 続いたときは**2本目を消して1本にし、その1本が上下の中間に来る**ように余白を揃える。
   （上の罫＝1つ目の border-bottom を残し、2つ目の border-top と間の余白を落とす） */
.content .callout + .callout,.callout + .callout{
  border-top:0; margin-top:0!important; padding-top:2.2rem; }
/* ★1つ目の margin-bottom（3rem）も落とす。2つ目の margin-top だけ 0 にしても、
   **相殺（margin collapsing）で 3rem がそのまま残る**（実測 48px）。 */
.content .callout:has(+ .callout),.callout:has(+ .callout){
  margin-bottom:0!important; padding-bottom:2.2rem; }
@media (max-width:47.99em){ .content .callout--say,.callout--say{ font-size:1.06em; } }
.callout .lbl{ display:block; width:max-content; margin:0 0 .9rem; background:var(--ink); color:var(--bg); font:800 .7rem/1 var(--font-ja); letter-spacing:.14em; padding:.45em .8em .4em; border-radius:4px; }
.callout .by{ display:block; margin-top:.6rem; font:600 .76rem/1 var(--font-ja); color:var(--fg-muted); letter-spacing:.08em; }
/* 要点の帯（破線で囲うだけ） */
.band{ margin:3.5rem 0; border-top:1px dashed var(--ink); border-bottom:1px dashed var(--ink); padding:1.4rem 0; }
.band__h{ margin:0; font:800 1rem/1.5 var(--font-ja); letter-spacing:.04em; display:flex; align-items:center; gap:.8rem; }
.band__h::before{ content:"✓"; width:1.7em; height:1.7em; border-radius:50%; border:1px solid var(--ink); display:inline-flex; align-items:center; justify-content:center; font:800 .8rem/1 var(--font-en); flex:none; }
.band p{ margin:.5rem 0 0 2.5em; color:var(--fg-muted); font-size:.92em; }
/* ゲート（1px の箱） */
.paywall{ border:1px solid var(--ink); border-radius:var(--r); padding:1.6rem 1.6rem 1.8rem; margin:3.5rem 0; }
.paywall__heading{ margin:0 0 .5rem; font-size:1.05rem; font-weight:700; letter-spacing:.04em; }
.paywall__what{ margin:0 0 1.2rem; color:var(--fg-muted); }
/* ★この先に何があるか（記事ごと）。★本文と同じ濃さで出す＝ ここがいちばん読まれる行。 */
.paywall__teaser{ margin:0 0 1rem; line-height:1.9; }
.paywall .subscribe{ margin-top:0; }
/* ★入力欄を枠で囲う（2026-09-08 okada 指示）。★.paywall と同じ枠にそろえる
   ＝ **同じ役目のものを、違う顔で出さない**。 */
.subscribe--boxed{ border:1px solid var(--ink); border-radius:var(--r); padding:1.5rem 1.5rem 1.6rem; margin:2rem 0 2.5rem; }
/* ★関所の中の箱は、外側の .paywall が既に枠なので二重にしない */
.paywall .subscribe--boxed{ border:0; border-radius:0; padding:0; margin:0; }
/* この記事について（透明性の表） */
.about-post{ margin:4rem 0 0; border-top:1px solid var(--ink); padding-top:1.2rem; }

/* 出典（2026-09-05 追加）。専門的な解説記事・制度の記事の末尾に、
   参照した一次情報を番号つきで並べる。本文の主張には上付きの番号を付けて、ここへ飛ばす。
   ★このメディアは「一次情報の引用と案内」しか書かない（01 第4条）ので、
     どの記述がどの資料に基づくかを**読者が確かめられる形**にしておく必要がある。
   ★**参照した日**を必ず併記する。制度と数字は動く。 */
.content .refs,.refs{ margin:3.5rem 0 0; border-top:1px solid var(--ink); padding-top:1.2rem; }
/* ★.lbl-fill の見出しは、`.content h2`（後ろにある・font-size:1.55em・margin !important）に
   サイズと余白を奪われる。meta 経路では `.refs` を本文の外へ出すので、両方に同じ書式を当てる。 */
.content .refs h2,.refs h2{ font:800 .72rem/1 var(--font-en); letter-spacing:.14em;
  margin:0 0 1rem!important; }
.content .refs__note,.refs__note{ margin:0 0 1.2em; font-size:.86em; line-height:1.9; color:var(--fg-muted); }
.content .refs__list,.refs__list{ margin:0; }
.content .refs__list > li,.refs__list > li{ line-height:1.9; }
.content .refs__list > li:target,.refs__list > li:target{ background:var(--tint); }
.content .refs__src,.refs__src{ display:block; font-size:.86em; color:var(--fg-muted); margin-top:.15em; }
.content .refs__src a,.refs__src a{ word-break:break-all; }
.content .refs__date,.refs__date{ display:inline-block; font:600 .74rem/1.6 var(--font-en);
  letter-spacing:.06em; color:var(--fg-muted); margin-inline-start:.6em; white-space:nowrap; }
.content .refs__todo,.refs__todo{ font-size:.86em; color:var(--fg-muted); }

/* 本文中の番号（上付き）。★リンクの下線は付けない（本文の中で目立ちすぎる） */
.content .ref-mark{ font:700 .68em/1 var(--font-en); letter-spacing:.02em;
  vertical-align:super; margin-inline-start:.15em; }
.content .ref-mark a{ text-decoration:none; color:var(--fg-muted);
  padding:0 .12em; border-bottom:1px solid var(--soft); }
.content .ref-mark a:hover{ color:var(--fg); border-bottom-color:var(--ink); }
.about-post h2,.related h2{ margin:0 0 1rem; }
.about-post table{ width:100%; border-collapse:collapse; font-size:.92em; } .about-post th{ text-align:start; font-weight:600; color:var(--fg-muted); width:11em; padding:.6em 0; border-bottom:1px dashed var(--soft); } .about-post td{ padding:.6em 0; border-bottom:1px dashed var(--soft); }
.share{ display:flex; gap:1rem; align-items:center; margin:1.2rem 0 0; font:600 .76rem/1 var(--font-ja); color:var(--fg-muted); letter-spacing:.08em; }
.share a{ text-decoration:none; font-family:var(--font-en); font-weight:800; }
.related{ margin-top:4rem; border-top:1px solid var(--ink); padding-top:1.2rem; }

/* ============================================================
   記事下の評価（3つ）と、匿名のひとこと — 2026-09-07
   正本= tasks/mf-cfs-media-site/40-feedback.md
   ★markup は main.js が組み立てる（器は <div data-feedback> だけ）。
   ★色を使わない（`26` 第4条）。押した所は塗りつぶしで残す。
   ★動きを付けない（`26` 第6条）＝ transition を書かない。
   ★押せる大きさは 44px（`12` B5-1）。
   ============================================================ */
.fb{ margin-top:4rem; border-top:1px solid var(--ink); padding-top:1.2rem; }
.fb__h{ display:flex; align-items:center; gap:.7rem; margin:0 0 .9rem; }
.fb__h .ja{ font:600 .78rem/1 var(--font-ja); letter-spacing:.08em; color:var(--fg-muted); }
.fb__lede{ margin:0 0 1.2rem; max-width:var(--measure); font-size:.84rem; line-height:1.95;
  letter-spacing:.04em; color:var(--fg-muted); }

.fb__btns{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.7rem; }
.fb__btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:var(--tap); padding:0 1.25rem; border:1px solid var(--ink); border-radius:999px;
  background:var(--bg); color:var(--fg); cursor:pointer;
  font:700 .86rem/1 var(--font-ja); letter-spacing:.06em; }
.fb__btn .fb__ico{ display:inline-flex; flex:none; }
/* 押したあと。★色ではなく、白黒の反転で示す（`26` 第4条） */
.fb__btn[aria-pressed="true"]{ background:var(--ink); color:var(--bg); cursor:default; }
/* ★礼は**ボタンの外**に出す。ボタンの中に足すと、押した瞬間に幅が伸びて行が組み直る。
   ★場所は最初から空で確保しておく（後から現れても、下が動かない）＝`26` 第6条。 */
.fb__thanks{ margin:.9rem 0 0; min-height:1.9em; font-size:.84rem; line-height:1.9;
  letter-spacing:.04em; color:var(--fg-muted); }
/* ★スマホでは礼の文が2行になる（375px で実測）。★1行ぶんしか場所を取っていないと、
   押した瞬間に**下が1行ぶん動く**＝ `26` 第6条「何も動かない」と `40` §3 の
   「押しても行が組み直らない（ずれ 0px）」に反する。∴ 狭いときは2行ぶん確保する。 */
@media (max-width:47.99em){ .fb__thanks{ min-height:3.8em; } }
@media (max-width:29.99em){
  .fb__btns{ display:grid; grid-template-columns:1fr; }   /* 390px で3つ並べると1つ 110px を割る */
  .fb__btn{ width:100%; justify-content:flex-start; }
}

.fb__msg{ margin-top:2rem; padding-top:1.2rem; border-top:1px dashed var(--soft); max-width:var(--measure); }
.fb__msg-label{ display:block; font:700 .88rem/1.6 var(--font-ja); letter-spacing:.06em; margin-bottom:.5rem; }
/* ★注意書きは、書く前に読める位置に置く（書いてから消させない） */
.fb__caution{ margin:0 0 .8rem; padding:.8rem 1rem; border:1px solid var(--soft);
  font-size:.8rem; line-height:1.95; letter-spacing:.04em; color:var(--fg-muted); }
.fb__caution strong{ color:var(--fg); }
.fb__ta{ display:block; width:100%; box-sizing:border-box; padding:.8rem 1rem;
  border:1px solid var(--ink); border-radius:var(--r); background:var(--bg); color:var(--fg);
  font:400 .95rem/1.95 var(--font-ja); letter-spacing:.04em; resize:vertical; }
.fb__count{ margin:.4rem 0 0; font:600 .74rem/1 var(--font-en); letter-spacing:.06em; color:var(--fg-muted); }
.fb__actions{ margin:1rem 0 0; }
.fb__send[disabled]{ opacity:.55; cursor:default; }
.fb__done:empty{ display:none; }
.fb__done{ margin:.8rem 0 0; font-size:.84rem; line-height:1.9; letter-spacing:.04em; color:var(--fg); }
/* 蜂蜜の罠。読み上げにも Tab にも出さない（表示だけ消すと読み上げが拾う） */
.fb__hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ★計測のお知らせバー（2026-09-07・okada 指示）。初回だけ画面下に出る。
   ★動きは付けない（26 第6条）。★光を足さない＝面の色でなく線で区切る（26 の設計憲法）。
   ★タップ領域は .pill が 44px を満たす（12 B5）。 */
.notice-bar{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--bg); border-top:1px solid var(--ink); }
/* ★2026-09-08 高さを詰めた（okada 指示）。文を削っただけでは、余白のぶんが残る。 */
.notice-bar__inner{ max-width:var(--wide); margin-inline:auto; padding:.75rem 1.2rem .85rem; }
.notice-bar__text{ margin:0 0 .55rem; font-size:.86rem; line-height:1.65; }
.notice-bar__actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:0; }
/* ★hidden より display:flex が勝つ（2026-09-07 実測）。クラスに display を書いたら、
   その要素の [hidden] も自分で書く。ブラウザ既定の [hidden]{display:none} は詳細度で負ける。 */
.notice-bar__actions[hidden]{ display:none; }
.notice-bar__link{ font-size:.82rem; color:var(--fg-muted); }
.notice-bar__done{ margin:0; font-size:.86rem; line-height:1.65; }
@media print{ .notice-bar{ display:none!important; } }

/* ★CTA（2026-09-07・okada 指摘「説明文＋→＋リンクの段落が見づらい」）。
   直す前は <p>説明。→ <a>リンク</a></p> の1行で、**押せる場所が文の途中の文字**だった＝
   タップ領域も 44px を満たさず、CTA として機能していなかった。
   ∴ 説明とボタンを分ける。ボタンは既存の .pill（44px・枠つき）を使う。 */
/* ★2026-09-09 修正。★`var(--line)` は**どこにも定義されていない変数**だった。
   shorthand の中で var() が解けないと、幅・線種・色の3つが全部 unset に戻り、
   `border-*-style` の初期値が `none` なので **線そのものが描かれない**（実測で確認）。
   ＝「色が薄すぎた」のではなく、**1本も出ていなかった**。
   ★値は `--ink`＝ 実線1px は「領域の境界」（26 第3条）。同じ役目の `.refs` に揃える。 */
.content .cta{ display:flex; flex-wrap:wrap; gap:.9rem 1.1rem; align-items:center;
  margin:2rem 0!important; padding:1.2rem 0 0; border-top:1px solid var(--ink); }
.content .cta__lead{ flex:1 1 16em; min-width:0; font-size:.94em; line-height:1.9; color:var(--fg); }
.content .cta .pill{ flex:0 0 auto; text-decoration:none; }
@media (max-width:34em){ .content .cta{ gap:.8rem; } .content .cta .pill{ width:100%; } }

/* ★★出典の共通書式（2026-09-07・okada 指摘「全ページで共通の書式に」「URL と日付が横並びで読みにくい」）。
   必ず3点を縦に積む —— タイトル（リンク）／発行元／URL／いつ確認したか。
   直す前は .glossary-cite（用語93枚）と .refs__src（記事2本）の2種類が混在していた。 */
.content .refs__list.refs__list--plain,.refs__list.refs__list--plain{ list-style:none; padding:0; margin:1.4rem 0!important; }
/* ★2026-09-10 修正（okada 実機確認「本文と同じくらい濃い」）。
   ★第2弾では `--ink` を入れたが、破線＝「同じ領域の中の小さな区切り」（26 第3条）なので
     **薄墨（--soft）**が正しい。外枠・領域の境界だけが `--ink`。 */
.content .ref,.refs .ref{ margin:0 0 1.1rem!important; padding:0 0 1.1rem; border-bottom:1px dashed var(--soft); line-height:1.9; }
.content .ref:last-child,.refs .ref:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0!important; }
.content .ref__title,.refs .ref__title{ display:block; font-weight:700; font-size:.98em; letter-spacing:.02em;
  text-decoration:underline; text-underline-offset:.28em; text-decoration-thickness:1px; }
.content .ref__title--nolink,.refs .ref__title--nolink{ text-decoration:none; color:var(--fg-muted); }
.content .ref__by,.refs .ref__by{ display:block; margin-top:.25em; font-size:.84em; color:var(--fg-muted); }
/* ★2026-09-09 修正（監査 09）。**9.95px** しかなかった。
   原因＝ 親の .ref__by が .84em、その中でさらに .74em を掛けていた。
   16 × 0.84 × 0.74 = 9.9456px ＝ 監査の実測と小数点まで一致する。
   ★「一次／二次」は**区分を示す札**であって、出版者名より小さくする理由が無い。
     ∴ 親と同じ大きさ（1em＝13.44px）にする。em の掛け算をやめる、が要点。 */
.content .ref__tier,.refs .ref__tier{ margin-inline-start:.7em; padding:.1em .55em; border:1px solid var(--soft);
  border-radius:999px; font:600 1em/1.6 var(--font-ja); letter-spacing:.04em; }
.content .ref__meta,.refs .ref__meta{ display:flex; flex-wrap:wrap; gap:.2em 1em; margin-top:.35em; align-items:baseline; }
.content .ref__url,.refs .ref__url{ font:500 .78em/1.7 var(--font-en); color:var(--fg-muted); word-break:break-all; letter-spacing:.01em; }
.content .ref__date,.refs .ref__date{ font:600 .74em/1.7 var(--font-en); color:var(--fg-muted); letter-spacing:.06em; white-space:nowrap; }
.content .ref:target,.refs .ref:target{ background:var(--tint); border-radius:var(--r); padding:.9rem 1rem; }
@media (max-width:34em){ .content .ref__meta,.refs .ref__meta{ gap:.15em; } .content .ref__url,.refs .ref__url{ width:100%; } }

/* ★★相談先（2026-09-07・okada 指摘「リンクがない／リンクなのかリストなのか区分できていない」）。
   出典（.ref）とは**役割が違う**ので、見た目でも分ける ——
   出典＝「読んだ資料」、相談先＝「人に相談する窓口」。
   ★リンクのある窓口とない窓口を**必ず見分けられる**ようにする。
     色だけに頼らない（配色は読者が切り替えられる）＝ 左の縦線の有無・下線・「リンクはありません」の文字で分ける。 */
/* ★★2026-09-08 修正（okada 指摘「ブロックのデザインがルールを守っていない」）。
   ★何が違反だったか＝ `26` 第3条「**線はすべて 1px。太い線・影・枠の装飾は使わない**」に対して
     ① `border-inline-start:3px` … ★**3px の太い線**
     ② `border-radius` ＋ 四辺の枠 … ★**枠の装飾**（角丸で「立体的なカーブ」に見えていた）
     ③ `--plain` は `border-style:dashed` で**四辺すべてが太い破線**になっていた
   ★元の狙い（リンクのある窓口／ない窓口を色に頼らず見分ける）は**別の手で既に満たしている**＝
     リンク側は**下線＋↗**、無い側は**「リンクはありません」の文字**。∴ 枠は要らなかった。
   ★出典（.ref）と同じ「1px 破線で区切るだけ」に揃える＝ 第3条の「同じ領域の中の小さな区切り」。 */
.content .contacts{ list-style:none; padding:0; margin:1.4rem 0!important; }
/* ★2026-09-09 修正。同じ `var(--line)` の穴。すぐ上のコメントが
   「出典（.ref）と同じ1px 破線で区切る」と書いているのに、**線が出ていなかった**。 */
.content .contact{ margin:0 0 1.1rem!important; padding:0 0 1.1rem;
  border-bottom:1px dashed var(--soft); line-height:1.9; }
.content .contact:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0!important; }
.content .contact__what{ display:block; font:600 .78em/1.7 var(--font-ja); letter-spacing:.06em; margin-block-end:.5em;
  color:var(--fg-muted); }
.content .contact__link{ display:block; margin-top:.15em; font-weight:700; font-size:1.02em;
  text-decoration:underline; text-underline-offset:.28em; text-decoration-thickness:1px;
  min-height:var(--tap); }
.content .contact__link::after{ content:" ↗"; font-size:.85em; }
.content .contact__name{ display:block; margin-top:.15em; font-weight:700; font-size:1.02em; }
.content .contact__meta{ display:flex; flex-wrap:wrap; gap:.2em 1em; margin-top:.35em; align-items:baseline; }
.content .contact__url{ font:500 .78em/1.7 var(--font-en); color:var(--fg-muted); word-break:break-all; }
.content .contact__date{ font:600 .74em/1.7 var(--font-en); color:var(--fg-muted); letter-spacing:.06em; white-space:nowrap; }
.content .contact__note{ display:block; margin-top:.4em; font-size:.9em; color:var(--fg-muted); }
/* ★枠をやめた（同上）。区別は**文字そのもの**で足りる。 */
.content .contact__nolink{ display:inline-block; margin-top:.4em;
  font:600 .74em/1.8 var(--font-ja); letter-spacing:.04em; color:var(--fg-muted); }
@media (max-width:34em){ .content .contact__meta{ gap:.15em; } .content .contact__url{ width:100%; } }

/* ★問い合わせ先のメールアドレス（2026-09-07）。**押せる形**にする＝ 探して選んでコピーさせない。
   アイコンも色も足さない（設計の憲法 第4条）。太さと下線だけで「押せる」を出す。 */
.content .mailto{ display:inline-block; min-height:var(--tap); padding:.45em 0;
  font:600 1.04em/1.9 var(--font-en); letter-spacing:.02em; word-break:break-all;
  text-decoration:underline; text-underline-offset:.28em; text-decoration-thickness:1px; }
.mail-svg{ height:1.15em; width:auto; vertical-align:-.18em; display:inline-block; }
.mail-img{ display:inline-block; }

/* ── リンクカード（ブログカード）— 枠＋アイキャッチ＋タイトル ──────────────
   ★okada 指示（2026-09-09）。前後編のリンクがテキストだけだと目立たない、が理由。
   ★外部リンクは画像を出さない（読者の IP を他社へ渡さないため。inc/linkcard.php の注記）。 */
.content .linkcard{ margin:2.2rem 0; }
.content .linkcard a{ display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1.1rem;
  align-items:center; border:1px solid var(--ink); border-radius:var(--r);
  padding:.9rem 1.2rem .9rem .9rem; text-decoration:none; color:var(--fg);
  min-height:var(--tap); }
.content .linkcard a:hover{ background:var(--tint); }
.content .linkcard--noimg a{ grid-template-columns:minmax(0,1fr); padding:1rem 1.2rem; }
.linkcard__th{ overflow:hidden; border-radius:6px; background:var(--tint); }
.linkcard__th img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.linkcard__label{ display:block; font:700 .7rem/1 var(--font-ja); letter-spacing:.12em;
  color:var(--fg-muted); margin:0 0 .5rem; }
.linkcard__t{ display:block; margin:0; font-weight:700; font-size:1rem; line-height:1.55; letter-spacing:.04em; }
.content .linkcard a:hover .linkcard__t{ text-decoration:underline; text-underline-offset:.25em; }
.linkcard__meta{ display:block; margin:.55rem 0 0; font:600 .74rem/1 var(--font-en);
  letter-spacing:.06em; color:var(--fg-muted); }
@media (max-width:47.99em){
  .content .linkcard{ margin:1.8rem 0; }
  .content .linkcard a{ grid-template-columns:5.6rem minmax(0,1fr); gap:.9rem; padding:.8rem; }
  /* ★★2026-09-11 修正（okada「スマホ表示のブログカードがレイアウト崩れ」）。
     ★**上の行が、画像なしカードの1列指定を打ち消していた。**
       `.content .linkcard--noimg a` と `.content .linkcard a` は**詳細度が同じ**（0,2,1）で、
       ファイルの後ろにあるこの中の行が勝つ。∴ 画像が無いのに 5.6rem の列ができ、
       **題がその 5.6rem（＝89px）の中で折り返していた**（「RDワーカー／事例パネル／（PDF・／33ページ)」）。
     ★画面が広いときは正しく出るので、PC で見ている限り気づけない。 */
  .content .linkcard--noimg a{ grid-template-columns:minmax(0,1fr); padding:.9rem 1rem; }
  .linkcard__t{ font-size:.95rem; }
}

/* ── 問い合わせフォーム（55-contact-form.md・案C）─────────────────
   ★感想フォーム（.fb）と同じ作りに揃える。新しい見た目を1つ増やさない。 */
.ctf{ margin:2.5rem 0 0; border:1px solid var(--ink); border-radius:var(--r);
  padding:1.4rem 1.5rem 1.6rem; max-width:var(--measure); }
.ctf__h{ display:flex; align-items:center; gap:.7rem; margin:0 0 .9rem; }
.ctf__lede{ margin:0 0 1.4rem; max-width:var(--measure); font-size:.84rem; line-height:1.95; letter-spacing:.04em;
  color:var(--fg-muted); }
.ctf__row{ margin:0 0 1.1rem; }
.ctf__lbl{ display:block; font:700 .84rem/1.6 var(--font-ja); letter-spacing:.06em; margin-bottom:.45rem; }
.ctf__lbl span{ font-weight:400; font-size:.78rem; color:var(--fg-muted); margin-inline-start:.6em; }
.ctf__in{ display:block; width:100%; box-sizing:border-box; padding:.7rem 1rem;
  min-height:var(--tap); border:1px solid var(--ink); border-radius:var(--r);
  background:var(--bg); color:var(--fg);
  font:400 .95rem/1.8 var(--font-ja); letter-spacing:.04em; }
.ctf__ta{ line-height:1.95; resize:vertical; }
.ctf__caution{ margin:0 0 1rem; padding:.8rem 1rem; border:1px solid var(--soft);
  font-size:.8rem; line-height:1.95; letter-spacing:.04em; color:var(--fg-muted); }
.ctf__caution strong{ color:var(--fg); }
.ctf__attachments{ margin:0 0 1rem; padding:.9rem 1rem; border:1px solid var(--soft); }
.ctf__attachment-help,.ctf__attachment-draft-note{ margin:.3rem 0 0; font-size:.78rem; line-height:1.8; letter-spacing:.04em; color:var(--fg-muted); }
.ctf__file-input{ display:block; width:100%; box-sizing:border-box; min-height:var(--tap); margin:.7rem 0 0; padding:.35rem;
  border:1px solid var(--ink); border-radius:var(--r); background:var(--bg); color:var(--fg); font:400 .85rem/1.5 var(--font-ja); }
.ctf__file-input::file-selector-button{ min-height:var(--tap); margin:-.35rem .7rem -.35rem -.35rem; padding:0 .9rem;
  border:0; border-inline-end:1px solid var(--ink); border-radius:var(--r) 0 0 var(--r); background:var(--tint); color:var(--fg);
  font:700 .82rem/1 var(--font-ja); letter-spacing:.04em; cursor:pointer; }
.ctf__file-list{ display:grid; gap:.5rem; margin:.7rem 0 0; padding:0; list-style:none; }
.ctf__file-list li{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.45rem 0; border-top:1px solid var(--soft); }
.ctf__file-name{ min-width:0; overflow-wrap:anywhere; font-size:.84rem; line-height:1.7; letter-spacing:.04em; }
.ctf__file-remove{ min-width:var(--tap); min-height:var(--tap); padding:0 .8rem; border:1px solid var(--ink); border-radius:999px;
  background:var(--bg); color:var(--fg); font:700 .78rem/1 var(--font-ja); letter-spacing:.04em; cursor:pointer; }
.ctf__file-remove:hover,.ctf__file-input::file-selector-button:hover{ background:var(--tint); }
.ctf__file-remove:focus-visible,.ctf__file-input:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.ctf__attachment-status:empty{ display:none; }
.ctf__attachment-status{ margin:.7rem 0 0; font-size:.84rem; line-height:1.8; letter-spacing:.04em; }
.ctf__actions{ margin:0; }
.ctf__send[disabled]{ opacity:.55; cursor:default; }
.ctf__done:empty{ display:none; }
.ctf__done{ margin:.9rem 0 0; font-size:.84rem; line-height:1.9; letter-spacing:.04em; color:var(--fg); }
@media (max-width:47.99em){ .ctf{ padding:1.1rem 1.1rem 1.3rem; } }