/* 和文の禁則と折り返し（JP7）。URL や長い英数字でのはみ出しを防ぐ */
html{word-break:normal;line-break:strict;overflow-wrap:anywhere;}
body{word-break:normal;line-break:strict;overflow-wrap:anywhere;}

/* 幅と余白は **この 2 つだけ** で決める（2026-08-14 社長指摘：幅が 3 種類あり左端が揃わなかった） */
:root{--col-w:880px;--col-pad:20px;--surface:#fff;--ink:#1f2733;--sub:#5b6573;--line:#e2e6ec;--bg:#f6f8fa;--accent:#234a73;--accentbg:#eaf0f6;--pos:#0a7d52;--neg:#b03a3a;--warn:#8a6d1a;--warnbg:#fbf5e3;}
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;font-feature-settings:"palt";line-height:1.85;}
  header{background:var(--surface);border-bottom:1px solid var(--line);padding:13px 20px;}
  .hin{max-width:var(--col-w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .hin .site{font-size:14px;font-weight:700;color:var(--accent);}
  .hin a.back{font-size:12.5px;color:var(--accent);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 13px;white-space:nowrap;}
  .hin a.back:hover{border-color:var(--accent);}
  main{margin:0 auto;}
  h1{font-size:23px;line-height:1.5;margin:6px 0 4px;}
  .lead{color:var(--sub);font-size:13px;margin:0 0 22px;}
  h2{font-size:18px;margin:30px 0 8px;padding-top:14px;border-top:1px solid var(--line);}
  h3{font-size:15px;margin:18px 0 4px;color:var(--accent);}
  p{margin:8px 0;font-size:14.5px;}
  ul{margin:8px 0;padding-left:1.25em;}
  li{margin:6px 0;font-size:14.5px;}
  .tool{color:var(--accent);font-size:12.5px;}
  .callout{background:var(--accentbg);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:16px 0;}
  .callout .ttl{font-weight:700;color:var(--accent);margin-bottom:3px;}
  .ours{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 15px;margin:14px 0;}
  .ours div{margin:5px 0;font-size:14px;}
  .cta{display:inline-block;margin-top:6px;background:var(--accent);color:#fff;text-decoration:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;}
  .cta:hover{opacity:.92;}
  .disc{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--sub);line-height:1.7;}
  footer{max-width:var(--col-w);margin:0 auto;padding:0 var(--col-pad) 50px;}
  footer a{color:var(--accent);}

/* ---- 連載用の追加（2026-08-07・工程3で新設） ---- */
.crumb{font-size:12.5px;color:var(--sub);margin:0 0 10px}
.crumb a{color:var(--sub)}
.crumb span{margin:0 4px}
.lede{font-size:16px;line-height:1.9;margin:0 0 16px}
.premise{background:var(--accentbg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:13px;line-height:1.75;color:var(--sub);margin:0 0 18px}
.toc{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0 0 22px;background:var(--surface)}
.toc b{font-size:13px;color:var(--sub);display:block;margin:0 0 6px}
.toc ol{margin:0;padding-left:1.3em;font-size:14px}
.toc li{margin:0 0 4px}
.cta-tool{display:block;background:var(--accent);color:#fff;text-decoration:none;border-radius:10px;
  padding:16px 18px;margin:26px 0;font-weight:700;font-size:15.5px;line-height:1.6}
.cta-tool small{display:block;font-weight:400;font-size:13px;opacity:.9;margin-top:4px}
/* 新しいタブの印（↗）が説明文の後ろで 1 字だけ次の行に落ちないよう、右端の中央に固定する（2026-10-07） */
.cta-tool{position:relative;padding-right:46px}
.cta-tool[target="_blank"]::after{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:18px;margin:0}
.related{border-top:1px solid var(--line);margin-top:30px;padding-top:16px}
.related b{font-size:13px;color:var(--sub);display:block;margin:0 0 8px}
.related ul{margin:0;padding-left:1.2em;font-size:14.5px}
.related li{margin:0 0 6px}
.meta{font-size:12.5px;color:var(--sub);margin:18px 0 0}
h2{font-size:18px;margin:32px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--accent)}
h3{font-size:15.5px;margin:22px 0 8px}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
th,td{border:1px solid var(--line);padding:6px 9px;text-align:left}
th{background:var(--accentbg)}
.tblwrap{overflow-x:auto;position:relative}
/* position:relative＝表の中のリンクの読み上げ用の文字（.nt・absolute）が横スクロールの外へ出て、ページを横にはみ出させていた（2026-10-07 sector-dividend-cuts 390px で 55px） */
/* 表の見出し・セルで語のまとまりを折らない（.nw）／スマホだけ改行（br.sp）＝2026-10-07 孤立行の是正 */
.nw{white-space:nowrap}
.nw wbr{display:none}
br.sp{display:none}
@media (max-width:699px){br.sp{display:inline}}
/* 表の中では数字・語の途中で折り返さない（html の overflow-wrap:anywhere が効くと「2019」が「201/9」に割れる）。
   入りきらない表は .tblwrap の横スクロールに任せる（2026-10-06 スマホ幅で確認） */
.tblwrap th,.tblwrap td{overflow-wrap:normal}
/* 囲み（.tblwrap）を忘れた表でも、main の overflow-wrap:anywhere で列が 1 字幅まで縮まないようにする
   （2026-10-07 デザイン点検＝スマホで「比／べ／る／点」と 1 字ずつ縦に割れた） */
main th,main td{overflow-wrap:normal;word-break:keep-all}
td{font-variant-numeric:tabular-nums}
p.cap-t{font-size:14px;font-weight:700;margin:20px 0 4px}
@media (max-width:560px){.tblwrap th,.tblwrap td{padding:5px 6px}}
/* PC では表の 1 列目（項目名）を折り返さない（2026-10-07 社長指摘「借入（レバレッジ）」が 3 行に割れた）。スマホは横スクロールを増やさないため対象外 */
@media (min-width:700px){table th:first-child,table td:first-child{white-space:nowrap}
  table th:first-child wbr,table td:first-child wbr{display:none}}
/* スマホでは 1 列目に最低幅を持たせ、短い項目名（「比べる点」「必要なお金」）が 1〜2 字ずつに割れないようにする。
   長い項目名は文節（BudouX の境目）で折り返す（2026-10-07 デザイン点検・390px で実測） */
@media (max-width:699px){table th:first-child,table td:first-child{min-width:7.5em}
  /* 列の多い表・説明の長い表は縮めず、横スクロール（.tblwrap）で読ませる。p.swipe の案内と組で使う */
  .tblwrap.wide table{min-width:760px}}
.tblwrap.wide th{white-space:nowrap}
.tblwrap.wide th wbr{display:none}
/* 組み合わせの表（.pf）：月の列は詰め、選んだ理由の列を広げる */
.tblwrap.pf th:last-child,.tblwrap.pf td:last-child{min-width:17em}
/* ---- 図（本文のアクセント・単一系列の横棒＋直接ラベル）2026-08-07 ---- */
.fig{margin:24px 0 28px;border:1px solid var(--line);border-radius:10px;padding:15px 16px 13px;background:var(--surface)}
.fig .cap{font-size:14px;font-weight:700;margin:0 0 3px;line-height:1.5}
.fig .sub{font-size:12.5px;color:var(--sub);margin:0 0 13px;line-height:1.7}
.fig .row{display:grid;grid-template-columns:96px 1fr 62px;gap:8px;align-items:center;margin:0 0 6px}
.fig .lab{font-size:12.5px;color:var(--sub);text-align:right;line-height:1.4;white-space:nowrap}
.fig .bar{background:var(--bartrack,#e8eef5);height:20px;border-radius:0 4px 4px 0;overflow:hidden}
.fig .bar span{display:block;height:100%;background:#1f5c96;border-radius:0 4px 4px 0}
.fig .val{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.4}
.fig .row.hi .bar span{background:#164a7a}
.fig .row.hi .lab,.fig .row.hi .val{color:var(--ink)}
.fig .row.lt .bar span{background:#9dbddb}
.fig .row.lt + .row.hi{margin-bottom:12px}
/* 全体と内訳を同じ図に並べるとき、全体を囲って区別する（2026-10-07 社長指摘「全体が個別のグラフに埋まってしまう」） */
.fig .grp{font-size:12.5px;font-weight:700;color:var(--ink);margin:4px 0 8px}
.fig .total{border:2px solid #1f5c96;border-radius:8px;padding:10px 10px 0;margin:0 -12px 18px;background:var(--bartrack,#eef3f8)}
/* 枠の左右（枠線 2px＋余白 10px）を外へ逃がし、枠の中の棒の溝を枠の外の行と同じ幅にする
   （2026-10-07 シケン実測＝溝が 618px 対 642px で、全体 151 の棒が総合 151 より短く描かれていた） */
.fig .total .bar{height:26px}
.fig .total .val{font-size:15px}
.fig .note{font-size:12.5px;color:var(--ink);margin:12px 0 0;line-height:1.7;padding-top:10px;border-top:1px solid var(--line)}
.fig .src{font-size:13px;color:var(--sub);margin:8px 0 0;line-height:1.6}
/* 指数の図（基準＝100）は 100 の位置に点線を引く（物差しは 0〜200＝50% の位置） */
.fig.idx .bar{position:relative}
.fig.idx .bar::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed #5b6573;opacity:.75}
/* 表の下などに単独で置く出所・※注記（2026-10-07 社長指摘「本文と同じ大きさでごちゃごちゃして見づらい」） */
/* 大きさは注釈の下限 13px（docs/japanese-typography-guide.md）。図の中の出所（.fig .src）と同じ大きさにそろえる */
.prose p.src,article p.src,p.src{font-size:13px;color:var(--sub);line-height:1.6;margin:6px 0 22px}

/* 記事一覧のカード（2026-08-07）。説明文のべた書きは読まれないため、
   「読者が抱く問い」を見出しにして選びやすくする。 */
.list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.list li{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.list a{display:block;padding:15px 16px;text-decoration:none}
.list a:hover{background:var(--accentbg)}
.list .q{display:block;font-size:16.5px;font-weight:700;color:var(--accent);line-height:1.55}
.list .t{display:block;font-size:12.5px;color:var(--sub);margin-top:6px;line-height:1.6}

/* 冒頭の「この記事でわかること」（2026-08-07）。本文が長いので着地点を先に示す */
.tldr{border:1px solid var(--accent);border-radius:10px;padding:14px 16px;margin:0 0 18px;background:var(--accentbg)}
.tldr b{display:block;font-size:13px;color:var(--accent);margin:0 0 8px}
.tldr ul{margin:0;padding-left:1.2em;font-size:14.5px;line-height:1.85}
.tldr li{margin:0 0 5px}
.tldr li:last-child{margin:0}
/* 読者役の質問（つまずきが実証された箇所にだけ置く。会話の連投はしない） */
.ask{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:13px 15px;margin:20px 0 14px}
.ask .ico{flex:0 0 auto;line-height:0}
.ask p{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink)}

/* ============================================================
   レイアウト調整（2026-08-07・社長指摘）
   1) 記事だけ 760px でツール（1120px）より狭く、窮屈に見えていた
   2) 縦に詰まって見える（行間・段落間・セクション間）
   方針＝外枠はツールと同じ 1120px に合わせ、本文だけ読みやすい幅に保つ。
   図・表は本文より広く使い、画面幅を活かす。和文は 1 行 40〜50 字が読みやすい上限
   のため、本文まで 1120px に伸ばすと逆に読みにくくなる。
   ============================================================ */
/* 読み物のページはヘッダー・本文・図表をすべて同じ幅にそろえる。
   これまで ヘッダー 1180px／本文 880px／図表 1060px と 3 種類あり、左端が揃わず
   ガタガタして見えていた（実測：ヘッダー left=50・本文 left=200）。
   ツール本体（web/index.html）は表が主役で横幅が要るため 1120px のままで、そこだけ意図的に別。 */
main{max-width:var(--col-w);padding:26px var(--col-pad) 84px;}
/* 文節で折り返す。build_columns.py が文節の境目に <wbr> を入れている（BudouX・D-20261006-09）。
   keep-all は <wbr> と空白でだけ折る指定なので、<wbr> の無い長い語は anywhere ではみ出しを防ぐ。
   見出しは行の長さをそろえ、末尾の 1〜2 字だけが次の行に落ちないようにする（未対応のブラウザでは無害） */
main{word-break:keep-all;overflow-wrap:anywhere;}
main h1,main h2,main h3{text-wrap:balance;}
main p,main li{text-wrap:pretty;}
.tblwrap th,.tblwrap td{line-height:1.5}

/* 本文ブロックは読みやすい幅で中央に置く。
   **セレクタを列挙する方式はやめた**（2026-08-14 社長指摘）。列挙から漏れた要素
   （.lede・.callout・.ours・.warnbox・p.tool 等）だけが中央に寄らず左へずれていた。
   全子要素を中央寄せにし、広く使いたいものだけ例外にする。 */
/* 子要素は main と同じ幅にそろえる。**個別に max-width を持たせない**
   （持たせると本文と図表で左端がずれる）。左右マージンはクラス指定に負けないよう
   最後に強制する（.lead{margin:0 0 22px} のようなクラス > 型セレクタで左寄せに戻るため）。 */
main > *{max-width:100%;margin-left:auto !important;margin-right:auto !important;}
main > ul.list{margin-top:20px;}

/* 縦の圧を抜く：行間・段落間・セクション間 */
body{line-height:2.0;}
main > p{font-size:15.5px;margin:18px auto;}
main > ul, main > ol{font-size:15.5px;margin:18px auto;line-height:2.0;}
main > ul li, main > ol li{margin:0 0 10px;}
h2{font-size:19.5px;margin:64px auto 18px;padding-top:26px;}
h3{font-size:16.5px;margin:40px auto 12px;}
.fig{margin:40px auto;padding:18px 20px 16px;}
.tblwrap{margin:26px auto;}
.toc{margin:0 auto 34px;padding:16px 18px;}
.toc ol{line-height:2.0;}
.tldr{margin:0 auto 26px;padding:16px 18px;}
.ask{margin:30px auto 18px;}
.cta-tool{margin:34px auto;}
.related{margin-top:56px;padding-top:22px;}

/* スマホでは余白を詰めすぎず、かつ横に溢れないように */
@media(max-width:600px){
  main{padding:20px 16px 72px;}
  main > p{font-size:15px;margin:16px auto;}
  h2{font-size:18px;margin:48px auto 14px;padding-top:20px;}
  h3{margin:32px auto 10px;}
  .fig{margin:32px auto;padding:15px 14px 13px;}
}

/* 図の横軸（2026-08-07・社長指摘）。棒を最大値基準で伸ばすと軸が引けないため、
   図1は 0〜50%、図2は 0〜100% の固定目盛りに張り直したうえで軸を出す。 */
.fig .axis{margin-top:2px}
.fig .axis .ax{display:flex;justify-content:space-between;border-top:1px solid var(--line);
  padding-top:5px;font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
.fig .axis .ax i{font-style:normal}
.fig .axis .val{font-size:11px;font-weight:400;color:var(--sub);align-self:flex-end}

/* 記事・一覧の共通ナビ（2026-08-14）。記事を読んだあとツールの各タブへ直接戻れるようにする。
   ヘッダーは横に伸びるので、狭い画面ではナビだけ折り返す（横スクロールを出さない）。 */
header.site{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;}
.sitenav{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;}
.sitenav a{font-size:12px;color:var(--sub);text-decoration:none;border:1px solid var(--line);
  border-radius:999px;padding:5px 10px;white-space:nowrap;min-height:30px;display:inline-flex;align-items:center;}
.sitenav a:hover{border-color:var(--accent);color:var(--accent);}
.sitenav a.cur{color:var(--accent);border-color:var(--accent);font-weight:600;}
@media(max-width:560px){
  .sitenav a{font-size:11.5px;padding:4px 8px;}
}

/* ============================================================
   ヘッダーをツール本体と共通の見た目に（2026-08-14 社長要望）
   本体（web/index.html）の .hbar / .htitle / .logo / .tag / タブ帯に合わせる。
   記事は静的ページなので JS は持たず、リンクだけで同じ形を作る。
   ============================================================ */
header.site{display:block;background:var(--surface,#fff);border-bottom:1px solid var(--line);padding:9px var(--col-pad);}
header.site .hbar{max-width:calc(var(--col-w) - var(--col-pad) * 2);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;}
header.site .htitle{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;}
header.site .logo{width:26px;height:26px;flex:0 0 auto;fill:var(--accent);}
header.site .htext{display:flex;flex-direction:column;}
header.site .htext b{font-size:17px;line-height:1.25;color:var(--ink);}
header.site .tag{font-size:11.5px;color:var(--sub);line-height:1.3;}
header.site .sitenav{max-width:calc(var(--col-w) - var(--col-pad) * 2);margin:6px auto 0;display:flex;gap:6px;
  border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:none;}
header.site .sitenav::-webkit-scrollbar{display:none;}
header.site .sitenav a{border:none;border-radius:0;background:none;padding:10px 12px;font-size:14px;
  color:var(--sub);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px;
  white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;min-height:auto;}
header.site .sitenav a:hover{color:var(--accent);}
header.site .sitenav a.cur{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}
header.site .sitenav .ticon{width:17px;height:17px;flex:0 0 auto;}
@media(max-width:820px){
  header.site .sitenav a{padding:10px 8px;font-size:12.5px;gap:4px;}
  header.site .sitenav .ticon{width:15px;height:15px;}
}
@media(max-width:560px){
  header.site{padding:8px 12px;}
  header.site .htext b{font-size:15.5px;}
  header.site .tag{display:none;}
  header.site .sitenav a{padding:9px 7px;font-size:12px;}
}


/* ---- ツール本体と表示設定をそろえる（2026-08-14 社長指摘「ヘッダーメニューが統一されていない」）----
   ツール側で選んだ「ダークモード」「大きい文字」は localStorage に入る（pref_dark / pref_big）。
   記事側がこれを見ていなかったため、暗くして読んでいた人がコラムを開くと白い画面が出ていた。
   色の値はツール本体（web/index.html の body.dark）と同一。ずれると同じサイトに見えなくなる。 */
body.dark{color-scheme:dark;--ink:#e7ebf1;--sub:#9aa6b4;--line:#303a48;--bg:#10141b;--surface:#1a2029;
  --accent:#6cb0ef;--accentbg:#1e2c3e;--pos:#46c08f;--neg:#e3756d;--warn:#d8b75c;--warnbg:#2c2615;}
body.dark .cta,body.dark .cta-tool{color:#0f1319;}
/* グラフの棒の下地・棒そのものもダークで見える色にする（下地が白いと図だけ浮く） */
body.dark{--bartrack:#2a3442;}
body.dark .fig .bar span{background:#4e8ec9;}
body.dark .fig .row.hi .bar span{background:#6cb0ef;}
body.big{zoom:1.18;}
/* zoom はメディアクエリの幅に効かないので、狭い端末では拡大しない（横スクロールの元になる） */
@media(max-width:359px){
  body.big{zoom:1!important;}
  /* 拡大が効かない幅では項目自体を出さない。押しても何も起きないのにラベルだけ
     「文字の大きさを戻す」に変わるのは、動いたと誤解させる（2026-08-15 セイゴウ検出）。
     ツール本体も同じ幅で #t_big を隠している（web/index.html の @media(max-width:359px)）。 */
  #m_big{display:none!important;}
}

/* 表示設定の歯車。見た目はツール本体（web/index.html の .hmenubtn / .hmenu）に合わせる。
   本体は hidden ではなく .show で開閉するが、こちらは項目が 2 つだけなので hidden 属性で足りる
   （hidden は display に負けるので、.hmenu 側で display を指定しないこと＝過去の事故） */
header.site{position:relative;}
header.site .hctl{flex-shrink:0;display:flex;gap:8px;}
header.site .hmenubtn{border:1px solid var(--line);background:var(--surface);color:var(--sub);
  border-radius:8px;padding:0;width:38px;height:38px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;}
header.site .hmenubtn:hover{border-color:var(--accent);color:var(--accent);}
header.site .gicon{width:20px;height:20px;}
header.site .hmenu{position:absolute;right:var(--col-pad);top:100%;margin-top:2px;z-index:120;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);min-width:230px;padding:6px;}
header.site .hmenu button{display:block;width:100%;text-align:left;border:none;background:none;
  color:var(--ink);font-size:13px;line-height:1.4;padding:11px;border-radius:8px;cursor:pointer;}
header.site .hmenu button:hover{background:var(--accentbg);}

/* ページ上部へ戻る。ツール本体（web/index.html の #pagetop）と同じ見た目・同じ挙動にする。
   記事は縦に長いので、スクロールが 300px を超えたら右下に出す。 */
#pagetop{position:fixed;right:16px;bottom:16px;z-index:90;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--accent);
  box-shadow:0 4px 14px rgba(0,0,0,.16);cursor:pointer;font-size:19px;line-height:1;
  display:none;align-items:center;justify-content:center;padding:0;}
#pagetop:hover{background:var(--accentbg);}
#pagetop.show{display:flex;}

/* ===== 記事 TOP（/columns/）2026-10-05 再設計 v2 ===== 
   6 役レビュー：同じ形の箱を 3 段続けない（はじめて＝番号の行／今月の数字＝2 列の帯／条件＝小さな札／記事＝カード）。
   見出しの大きさに差をつける。色は既存の accent・pos・neg・warn だけ。 */
.hub .hero{padding:4px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.hub .kicker{font-size:13px;font-weight:700;color:var(--accent);margin:0;letter-spacing:.04em}
.hub h1{font-size:30px;line-height:1.4;margin:4px 0 8px}
.hub .promise{font-size:15.5px;color:var(--ink);margin:0 0 14px;line-height:1.8}
.hub .hsearch{position:relative;max-width:620px}
.hub .hsearch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--sub);stroke-width:2}
.hub .hsearch input{width:100%;font-size:16px;padding:12px 12px 12px 38px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.hub .hsearch input:focus{outline:2px solid var(--accent);outline-offset:1px}
.hres{max-width:620px;border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;background:var(--surface);padding:4px 0}
.hres a{display:block;padding:9px 12px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.hres a b{display:block;font-size:14.5px;color:var(--accent)}
.hres a span{font-size:12.5px;color:var(--sub)}
.hres .none{margin:8px 12px;font-size:13px;color:var(--sub)}
.hres a.totool{color:var(--accent);font-weight:700;font-size:14px;border-bottom:none}
.hub .hbtn{margin:14px 0 8px}
.btn-tool{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;border-radius:8px;padding:12px 22px;min-height:44px}
.btn-tool:hover{opacity:.92}
body.dark .btn-tool{color:#0f1319}
.hub .asof{font-size:12.5px;color:var(--sub);margin:4px 0 0;line-height:1.7}

.writer{display:flex;gap:12px;align-items:flex-start;margin:0 0 26px;font-size:14px;line-height:1.75}
.writer p{margin:0}
.writer .wav{width:46px;height:46px;flex:0 0 auto}
.writer.big .wav{width:72px;height:72px}
.writer a{color:var(--accent);margin-left:4px}
.writer.big{margin:10px 0 18px}

.hub .sec{margin:0 0 34px}
.hub .sec h2{font-size:19px;margin:0 0 10px;padding:0;border:none}
.hub .sec h2.lh{font-size:22px;padding-bottom:6px;border-bottom:2px solid var(--accent)}

.first{list-style:none;margin:0;padding:0;counter-reset:f}
.first li{border-bottom:1px solid var(--line)}
.first a{display:flex;gap:14px;align-items:baseline;padding:12px 2px;text-decoration:none;color:var(--ink)}
.first .fn{font-size:26px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;min-width:22px}
.first .ft{display:block;font-size:16px;font-weight:700;color:var(--accent);line-height:1.5}
.first .fq{display:block;font-size:13px;color:var(--sub)}

.now .nowgrid{display:grid;grid-template-columns:1fr 1.4fr;gap:0;border-top:3px solid var(--accent);background:var(--surface);border-bottom:1px solid var(--line)}
.now .nowgrid>div{min-width:0}
.now .watch{padding:14px 16px;border-right:1px solid var(--line)}
.now .wl,.now .rl{font-size:13px;color:var(--sub);margin:0 0 4px;font-weight:600}
.now .wn{margin:0;font-size:40px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.now .wn small{font-size:15px;margin-left:2px}
.now .wd{display:block;font-size:13px;font-weight:600;color:var(--sub)}
.now .wd.pos{color:var(--pos)} .now .wd.neg{color:var(--neg)}
.now .wsub{font-size:12px;color:var(--sub);margin:6px 0 8px}
.now .recent{padding:14px 16px}
.now .rcols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.now .rh{font-size:13px;font-weight:700;margin:0 0 4px}
.now .rh.neg{color:var(--neg)} .now .rh.pos{color:var(--pos)}
.now ul{list-style:none;margin:0;padding:0;font-size:13px}
.now li{display:flex;justify-content:space-between;gap:6px;padding:3px 0;border-bottom:1px dotted var(--line)}
.now li a{color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now li a:hover{color:var(--accent);text-decoration:underline}
.now li span{color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.now .rnote{font-size:11.5px;color:var(--sub);margin:8px 0 0}
.tt{color:var(--accent);font-weight:700;font-size:13.5px;text-decoration:none}
.tt:hover{text-decoration:underline}

.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tile .tn2{font-size:12px;font-weight:700;color:var(--sub)}
.tile .tq{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.45}
.tile .td{font-size:12.5px;color:var(--sub)}
.tile .tx{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:13px}
.tile .tr{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line)}
.tile .tc{font-weight:400;color:var(--sub);margin-left:2px}

.lbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:0 0 12px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 13px;font-size:13.5px;white-space:nowrap;cursor:pointer;min-height:36px}
.chip small{margin-left:4px;color:var(--sub)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.on small{color:#fff;opacity:.85}
body.dark .chip.on,body.dark .chip.on small{color:#0f1319}
.lmeta{margin:0;font-size:13px;color:var(--sub);display:flex;align-items:center;gap:10px}
.lmeta select{font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.lmeta .rss{color:var(--warn);font-weight:700;text-decoration:none;font-size:12px}

.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card a{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;height:100%}
.card a:hover{border-color:var(--accent)}
.card .cb{display:block;padding:10px 12px 12px}
.card .cat{font-size:12px;font-weight:700}
.c-accent{color:var(--accent)} .c-neg{color:var(--neg)} .c-pos{color:var(--pos)} .c-warn{color:var(--warn)}
.card .ct{display:block;font-size:15.5px;font-weight:700;line-height:1.5;margin:2px 0 4px;color:var(--ink)}
.card .cq{display:block;font-size:12.5px;color:var(--sub);line-height:1.6}
.card .cd{display:block;font-size:12px;color:var(--sub);margin-top:6px}
.card .nb{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--neg);border-radius:3px;padding:0 6px;margin-right:6px}
/* サムネ（SVG）。色は var() で、ダークモードにも追従する */
.th{display:block;width:100%;height:auto;aspect-ratio:16/9}
.th .tbg{fill:var(--accentbg)}
.th .tn{font-weight:800;font-family:inherit}
.th .tl{font-size:17px;font-weight:700;fill:var(--ink)}
.th .tb{opacity:.45}
.th-accent .tn,.th-accent .tb{fill:var(--accent)}
.th-neg .tn,.th-neg .tb{fill:var(--neg)}
.th-pos .tn,.th-pos .tb{fill:var(--pos)}
.th-warn .tbg{fill:var(--warnbg)} .th-warn .tn,.th-warn .tb{fill:var(--warn)}
.th-neg .tbg{fill:#f8eded} body.dark .th-neg .tbg{fill:#2c1c1c}
.th-pos .tbg{fill:#e8f4ee} body.dark .th-pos .tbg{fill:#17291f}

.about .dtab{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 12px}
.about .dtab th,.about .dtab td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.about .dtab th{background:var(--accentbg)}

@media(max-width:820px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .hub h1{font-size:23px}
  .hub .promise{font-size:14.5px}
  .btn-tool{display:block;text-align:center}
  .now .nowgrid{grid-template-columns:1fr}
  .now .rcols{grid-template-columns:1fr}
  /* スマホは記事一覧を「ツールの条件から探す」より上へ（初心者・保有者役：記事一覧が遠い） */
  main.hub{display:flex;flex-direction:column}
  main.hub>*{width:100%}  /* main>*{margin:auto!important} があるので、幅を指定しないと中身の幅に縮む */
  main.hub>.crumb{order:0} main.hub>.hero{order:1} main.hub>.writer{order:2} main.hub>.sec-first{order:3}
  main.hub>.now{order:4} main.hub>.sec-list{order:5} main.hub>.sec-tiles{order:6} main.hub>.disc{order:7}
  .now .watch{border-right:none;border-bottom:1px solid var(--line)}
  .tiles{grid-template-columns:1fr}
  /* スマホは記事一覧を 1 列・サムネを上に全幅で（2026-10-06 社長指摘「サムネが中途半端に小さい」）。
     以前は左 120px に置いていたが、16:9 のサムネがカードの高さの中で帯になり、説明の文字が約 5px で読めなかった。
     全幅なら数字は約 72px・説明は約 19px で読める。問いの一文も出す */
  .cards{grid-template-columns:1fr;gap:16px}
  .card a{display:block}
  .card .th{aspect-ratio:16/9;height:auto}
  .card .cb{padding:10px 14px 14px}
  .card .ct{font-size:16.5px}
  .about .dtab{font-size:13px}
}
/* スマホではツールと同じく、主なメニューを画面の下に固定する（UI/UX レビュー：右上だと親指が届かない） */
@media(max-width:560px){
  header.site .sitenav{position:fixed;left:0;right:0;bottom:0;z-index:100;margin:0;max-width:none;
    background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(6,1fr);gap:0;
    padding:0 0 env(safe-area-inset-bottom);overflow:visible}
  header.site .sitenav a{flex-direction:column;justify-content:center;gap:2px;padding:7px 0 6px;font-size:10.5px;min-height:52px;border-bottom:none;border-top:2px solid transparent;text-align:center;white-space:nowrap}
  header.site .sitenav a.cur{border-top-color:var(--accent);border-bottom:none}
  header.site .sitenav .ticon{width:19px;height:19px}
  body{padding-bottom:64px}
  #pagetop{bottom:72px}
}
.fig .row.gap{margin-bottom:14px}  /* 業種の 2 本棒の組の区切り（インライン style を共通 CSS へ・S1） */
.hub .kicker .ksub{font-weight:400;color:var(--sub);margin-left:8px;letter-spacing:0}
/* 業種の 2 軸の散布図（sector-dividend-cuts）。色は既存の値だけ */
.scat{display:block;width:100%;height:auto;max-width:640px;margin:8px 0 4px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.scat .grid{stroke:var(--line);stroke-width:1}
.scat .avg{stroke:var(--sub);stroke-width:1;stroke-dasharray:4 3}
.scat .qgood{fill:var(--accentbg)}
.scat .qlab{font-size:12px;font-weight:700;fill:var(--accent)}
.scat .ax{font-size:11px;fill:var(--sub)}
.scat .pt{fill:var(--sub);opacity:.55}
.scat .pt.hi{fill:var(--accent);opacity:1}
.scat .pl{font-size:12px;font-weight:700;fill:var(--ink)}
.scat.sm{max-width:420px}  /* スマホ幅で描いた版（viewBox 360）。文字を実寸 11px 以上に保つ */

/* ===== 業種の記事（sector-dividend-cuts）の部品・2026-10-06 スマホ優先で設計 ===== */
/* 減配率のヒートマップ。段階 h0〜h4 は analysis/20261006/shock/heatmap.py が値から付ける */
:root{--h0:#ffffff;--h1:#f9e6e4;--h2:#f1c4bf;--h3:#de8f87;--h4:#b03a3a;--h4ink:#fff;--h3ink:var(--ink)}
body.dark{--h0:#1a2029;--h1:#3b2526;--h2:#5c302e;--h3:#8e3f39;--h4:#e3756d;--h4ink:#0f1319;--h3ink:#fff}
.hm{margin:22px auto 10px}
.hmleg{display:flex;gap:3px;margin:0 0 6px;font-size:11.5px;line-height:1.4}
.hmleg span{flex:1;text-align:center;padding:3px 0;border-radius:3px;color:var(--ink)}
.hmt{width:100%;max-width:560px;border-collapse:separate;border-spacing:2px;margin:0;font-size:13.5px;table-layout:fixed}
.hmt caption{text-align:left;font-size:13px;font-weight:700;color:var(--sub);padding:0 0 4px}
.hmt th,.hmt td{border:0;padding:6px 2px;line-height:1.3;text-align:center;overflow-wrap:normal}
.hmt thead th{background:transparent;font-size:13px;vertical-align:bottom}
.hmt thead th small{display:block;font-size:10.5px;font-weight:400;color:var(--sub);line-height:1.25}
.hmt thead th:first-child,.hmt tbody th{width:27%;text-align:left;font-size:12.5px;padding-left:4px}
.hmt tbody th{background:transparent;font-weight:600}
.hmt tbody th sup{font-size:9px;color:var(--sub)}
.hmt tr.grp th{font-size:11.5px;font-weight:700;color:var(--accent);padding:10px 4px 2px}
.hmt td{font-variant-numeric:tabular-nums;font-weight:600;border-radius:3px}
.hmt tr.all th,.hmt tr.all td{border-top:2px solid var(--ink);font-weight:800}
.h0{background:var(--h0);box-shadow:inset 0 0 0 1px var(--line)}
.h1{background:var(--h1)}.h2{background:var(--h2)}.h3{background:var(--h3);color:var(--h3ink)}
.h4{background:var(--h4);color:var(--h4ink)}
.hmleg .h4{color:var(--h4ink)}
.hm .src{margin-top:8px}
p.bridge{font-size:14.5px;border-left:3px solid var(--accent);padding:4px 0 4px 12px;color:var(--ink)}
p.tool1{font-size:14px;background:var(--accentbg);border-radius:8px;padding:10px 14px;line-height:1.8}

/* 6 つの原因の名前（見出し下のラベル列）。2026-10-06 に「風」の比喩をやめた（前提知識が要り唐突との指摘） */
p.winds{display:flex;flex-wrap:wrap;gap:6px;margin:14px auto 6px}
p.winds span{font-size:13px;font-weight:700;color:var(--accent);background:var(--accentbg);border-radius:999px;padding:4px 11px;line-height:1.5}

/* 出来事が起きてから配当に届くまでの流れのカード（縦に積む） */
.wind{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 14px 10px;margin:14px auto 22px}
.wind p{margin:8px 0;font-size:14.5px;line-height:1.8}
.wind .wtag{display:flex;gap:6px;margin:0 0 10px}
.wind .wtag span{font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:4px;padding:1px 8px;color:var(--sub)}
ol.flow{list-style:none;counter-reset:fl;margin:0;padding:0}
ol.flow li{counter-increment:fl;position:relative;margin:0 0 18px;padding:9px 12px 9px 40px;background:var(--bg);border-radius:8px;font-size:14px;line-height:1.7}
ol.flow li::before{content:counter(fl);position:absolute;left:11px;top:10px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--surface);font-size:12px;font-weight:700;line-height:20px;text-align:center}
ol.flow li:not(:last-child)::after{content:"";position:absolute;left:19px;bottom:-15px;border:6px solid transparent;border-top:8px solid var(--sub);opacity:.6}
ol.flow li b{display:block;font-size:15px;color:var(--ink)}
ol.flow li.end{padding-top:11px;padding-bottom:11px}
ol.flow li.end.neg{background:color-mix(in srgb,var(--neg) 10%,var(--surface))}
ol.flow li.end.pos{background:color-mix(in srgb,var(--pos) 10%,var(--surface))}
ol.flow li.end .big{display:block;font-size:22px;font-weight:800;line-height:1.4;font-variant-numeric:tabular-nums}
ol.flow li.end.neg .big{color:var(--neg)}
ol.flow li.end.pos .big{color:var(--pos)}
.wind .wsum{font-weight:700}
.wind .wwin,.wind .wthen{border-top:1px dashed var(--line);padding-top:8px;font-size:14px}
.wind .wwin b,.wind .wthen b{display:inline-block;font-size:12px;border-radius:4px;padding:0 7px;margin-right:6px;color:var(--surface)}
.wind .wwin b{background:var(--pos)}
.wind .wthen b{background:var(--sub)}
.wind .src{font-size:13px}
p.tchips{display:flex;flex-wrap:wrap;gap:8px;margin:10px auto}
p.tchips a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-size:13.5px;font-weight:700;text-decoration:none;background:var(--surface)}
p.tchips a::before{content:"ツールで開く ";font-weight:400;font-size:11.5px;margin-right:3px}

/* 業種ごとの弱い風・追い風（表ではなく行ごとのカード） */
ul.windmap{list-style:none;padding:0;margin:14px auto}
ul.windmap li{border-bottom:1px solid var(--line);padding:10px 2px;margin:0;display:flex;flex-wrap:wrap;gap:5px 6px;align-items:center;line-height:1.5}
ul.windmap li b{flex:0 0 100%;font-size:14.5px}
ul.windmap span{font-size:12.5px;border-radius:4px;padding:2px 8px}
ul.windmap span.neg{background:color-mix(in srgb,var(--neg) 12%,var(--surface));color:var(--neg)}
ul.windmap span.pos{background:color-mix(in srgb,var(--pos) 12%,var(--surface));color:var(--pos)}
ul.windmap span.neg::before{content:"崩れた：";font-size:11px}
ul.windmap span.pos::before{content:"追い風：";font-size:11px}
ul.windmap small{flex:0 0 100%;font-size:12px;color:var(--sub)}

/* 折りたたみ（細かい集計・数え方・付録） */
details.more{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:12px auto;padding:0 14px}
details.more summary{cursor:pointer;font-weight:700;font-size:14.5px;padding:12px 0;list-style-position:inside}
details.more[open]{padding-bottom:10px}
details.more p{font-size:14px}
details.more p.src{font-size:13px;color:var(--sub);margin:6px 0 10px}
p.q1{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 14px;font-size:15px;line-height:1.9}
p.swipe{font-size:13px;color:var(--sub);margin:4px 0 0}
p.swipe::after{content:" →";font-weight:700}
details.more .tblwrap{margin-top:6px}
details.more > .tblwrap:first-of-type, details.more p.swipe + .tblwrap{margin-top:4px}
.hmt tr.grp th{font-size:12.5px;color:var(--ink);border-left:3px solid var(--accent);padding-left:7px}
/* 記事本文のツールへのリンクは別タブで開く（build_columns.py の tool_links_new_tab）。開くと分かる印を付ける */
main a[target="_blank"]::after{content:"\2197";font-size:.85em;margin-left:2px;font-weight:400}
.nt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}