:root{
  --red:#E60012;
  --ink:#0E0E10;
  --cream:#FFFFFF;
  --disp:'Archivo Black','Helvetica Neue',sans-serif;
  --jp:'Noto Sans JP',sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --pad-x:20px;
  --measure:680px;
}
@media (min-width:640px){ :root{ --pad-x:32px; } }
*{margin:0;padding:0;box-sizing:border-box}
/* ---------- 読み物ページは白背景・黒字（長文の可読性優先。ナビ全画面オーバーレイとCTA帯だけ赤/黒の差し色を残す） ---------- */
body{background:var(--cream);color:var(--ink);font-family:var(--jp);line-height:1.9;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--red);color:var(--cream)}

/* ---------- ヘッダー / ハンバーガー ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad-x);
  background:rgba(255,255,255,.88);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,0,0,.1);
}
.site-header .wm{height:20px}
.hb{
  width:34px;height:34px;display:flex;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:0;
}
.hb span{display:block;height:2px;width:100%;background:var(--red);transition:transform .25s var(--ease),opacity .25s var(--ease)}
.hb.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hb.open span:nth-child(2){opacity:0}
.hb.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ナビのフルスクリーンオーバーレイは意図的にダーク維持(通常の読み物面と切り替わる瞬間を作る) */
.nav-panel{
  position:fixed;inset:0;z-index:39;background:var(--ink);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;
  padding:0 var(--pad-x);
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.nav-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-panel a{
  font-family:var(--disp);text-transform:uppercase;font-size:34px;letter-spacing:.02em;
  color:var(--cream);
}
.nav-panel a:hover{color:var(--red)}
.nav-panel .sub{font-size:11px;letter-spacing:.35em;opacity:.5;font-family:var(--jp)}

/* ---------- 一覧ページ ---------- */
.list-wrap{max-width:840px;margin:0 auto;padding:60px var(--pad-x) 100px}
.list-wrap h1{font-family:var(--disp);text-transform:uppercase;font-size:40px;line-height:.95;margin-bottom:8px}
@media (min-width:640px){ .list-wrap h1{font-size:56px} }
.list-wrap .lead{opacity:.6;font-size:13px;letter-spacing:.05em;margin-bottom:48px}

.tag-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.tag-filter button{
  font-size:11px;letter-spacing:.15em;padding:6px 14px;border-radius:999px;
  border:1px solid rgba(0,0,0,.25);background:none;color:var(--ink);cursor:pointer;
}
.tag-filter button.active{background:var(--red);border-color:var(--red);color:var(--cream)}

/* 一覧カード: スマホは画像上→テキスト下、PCは画像左→テキスト右。
   記事が1本でも20本でも成立するよう、グリッドではなく縦積みリストを維持する
   (グリッドは記事数が少ないと空きマスが目立つため)。 */
.card{
  display:grid;gap:14px;padding:28px 0;border-top:1px solid rgba(0,0,0,.12);
}
.card:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
.card-thumb{
  overflow:hidden;background:rgba(0,0,0,.05);aspect-ratio:1200/630;
}
.card-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:scale .4s var(--ease);
}
.card:hover .card-thumb img{scale:1.03}
@media (min-width:768px){
  .card{grid-template-columns:280px 1fr;gap:24px;align-items:start}
}
.card .tags{font-size:10px;letter-spacing:.2em;opacity:.5;margin-bottom:10px}
.card h2{font-size:22px;line-height:1.4;margin-bottom:8px;font-weight:700}
@media (min-width:640px){ .card h2{font-size:24px} }
.card:hover h2{color:var(--red)}
.card .excerpt{font-size:13px;opacity:.75;line-height:1.7}
.card .points{margin:12px 0 0 1.1em;font-size:12px;opacity:.55;line-height:1.9}
.card .points li{margin-bottom:2px}
.card .date{font-size:10px;letter-spacing:.15em;opacity:.4;margin-top:14px}

/* ---------- 一覧末尾: 過去記事アーカイブへの導線 ----------
   記事を読み終えた位置に置く。トップに置くと、まだ何も読んでいない人を
   外部へ逃がすことになるため、意図的に最下部に限定する。 */
.archive-links{margin-top:72px;padding-top:44px;border-top:2px solid var(--ink)}
.archive-label{
  font-family:var(--disp);font-size:10px;letter-spacing:.34em;
  color:var(--red);margin-bottom:14px;
}
.archive-title{
  font-size:22px;font-weight:800;line-height:1.5;letter-spacing:-.01em;
  margin-bottom:26px;text-wrap:balance;
}
@media (min-width:640px){ .archive-title{font-size:26px} }
.archive-grid{display:grid;gap:10px}
@media (min-width:640px){ .archive-grid{grid-template-columns:1fr 1fr;gap:14px} }

/* カードはロゴを主役に。枠線ではなく地の面で区切り、ホバーで赤へ反転させる
   (BONKALINKOLOの黒/白/赤の切り替えをそのまま小さく使う) */
.archive-card{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:16px;
  padding:20px 20px;background:rgba(0,0,0,.04);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.archive-card:hover{background:var(--ink);color:var(--cream)}
.archive-logo{
  width:34px;height:34px;object-fit:contain;
  opacity:.85;transition:filter .25s var(--ease),opacity .25s var(--ease);
}
/* ロゴは単色化済み(インク色)。黒地に反転した時だけ白へ転ばせる */
.archive-card:hover .archive-logo{filter:invert(1);opacity:1}
.archive-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.archive-name{
  font-family:var(--disp);font-size:17px;letter-spacing:.02em;line-height:1.2;
}
.archive-desc{font-size:11.5px;opacity:.6;line-height:1.6}
.archive-card:hover .archive-desc{opacity:.75}
.archive-arrow{
  font-size:15px;opacity:.35;transition:opacity .25s var(--ease),translate .25s var(--ease);
}
.archive-card:hover .archive-arrow{opacity:1;translate:2px -2px;color:var(--red)}

/* ---------- 記事ページ ---------- */
.article-wrap{max-width:var(--measure);margin:0 auto;padding:52px var(--pad-x) 120px}
.article-tags{font-size:10px;letter-spacing:.2em;opacity:.55;margin-bottom:18px}
.article-tags span{color:var(--red);margin-right:.8em}
.article-wrap h1{
  font-size:28px;line-height:1.35;font-weight:800;margin-bottom:18px;
}
@media (min-width:640px){ .article-wrap h1{font-size:36px} }
.byline{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:11px;letter-spacing:.1em;opacity:.6;
  padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid rgba(0,0,0,.12);
}
.copy-link-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid rgba(0,0,0,.3);color:var(--ink);
  font-family:var(--jp);font-size:11px;letter-spacing:.08em;padding:6px 12px;border-radius:999px;
  cursor:pointer;opacity:1;
}
.copy-link-btn:hover{border-color:var(--red);color:var(--red)}
.copy-link-btn svg{opacity:.85}
.player-tag{
  display:inline-block;font-size:12px;letter-spacing:.05em;opacity:.75;
  padding:10px 0 22px;
}

.article-body p{margin-bottom:1.5em;font-size:15.5px;letter-spacing:.01em}
/* リード文(冒頭の問いかけ): 本文より大きく、赤の縦線で導入を区切る */
.article-body p.lede{
  font-size:18px;font-weight:700;line-height:1.75;margin-bottom:1em;
  padding-left:16px;border-left:3px solid var(--red);
}
.article-body p.lede + p.lede{margin-bottom:2.4em}
@media (min-width:640px){ .article-body p.lede{font-size:21px} }
.article-body h2{
  font-family:var(--disp);text-transform:uppercase;font-size:21px;line-height:1.3;
  margin:2.6em 0 1em;padding-left:14px;border-left:4px solid var(--red);
  letter-spacing:.01em;
}
@media (min-width:640px){ .article-body h2{font-size:25px} }
.article-body ul{margin:0 0 1.6em 1.3em}
.article-body li{margin-bottom:.6em;font-size:15.5px}
.article-body strong{color:var(--red);font-weight:700}
.article-body hr{border:none;border-top:1px solid rgba(0,0,0,.15);margin:3em 0}

.article-body table{
  width:100%;border-collapse:collapse;margin:1.6em 0 2em;font-size:13.5px;
}
.article-body th,.article-body td{
  padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.15);text-align:left;
}
.article-body th{font-size:11px;letter-spacing:.1em;opacity:.6;font-weight:500}
.article-body td:last-child,.article-body th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.article-body tr:last-child td{color:var(--red);font-weight:700}

.embed-wrap{margin:2em 0;display:flex;justify-content:center}
.embed-wrap .twitter-tweet{margin:0 auto !important}

.footnote{font-size:11.5px;opacity:.55;line-height:1.8;margin-top:3em}
.sources{margin-top:1.4em;font-size:12.5px}
.sources h3{font-size:11px;letter-spacing:.2em;opacity:.55;margin-bottom:.8em;text-transform:uppercase}
.sources li{margin-bottom:.5em;opacity:.8}
.sources a{text-decoration:underline}

.more-journal{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  margin-top:3em;padding:16px 0;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);
}
.more-journal .label{font-size:10px;letter-spacing:.2em;opacity:.5}
.more-journal .txt{font-size:14px;font-weight:700}
.more-journal:hover .txt{color:var(--red)}

/* CTA帯は赤地に白文字のまま維持(ブランドの差し色。ホームのFOLLOWセクションと同じ配色ルール) */
.article-cta{
  margin-top:4em;padding:32px var(--pad-x);background:var(--red);
  display:flex;flex-direction:column;gap:18px;align-items:flex-start;
}
.article-cta .cta-label{
  font-family:var(--disp);text-transform:uppercase;font-size:16px;letter-spacing:.05em;color:var(--cream);
}
.cta-icons{display:flex;flex-direction:row;gap:1.3em;align-items:center}
.cta-icons a{display:inline-flex;color:var(--cream);transition:translate .2s ease-in-out,opacity .2s ease-in-out}
.cta-icons a:hover{translate:0 -3px;opacity:.8}
.cta-icons svg{width:26px;height:26px;fill:var(--cream)}
@media (min-width:640px){ .cta-icons svg{width:30px;height:30px} }

/* ---------- 段落番号(プレビュー限定・確認用) ---------- */
.pn{
  display:inline-block;min-width:2em;font-family:var(--disp);font-size:10px;
  color:var(--red);opacity:.7;vertical-align:top;user-select:none;
}

/* ========================================================================
   図解カード共通 (viz-*)
   記事内で1図1メッセージを示すためのブロック。5種の図解形式(ドーナツ比較・
   ≠比較カード・横棒2本・判定カード)が同じ器(.viz-card)を共有し、中身だけ
   差し替える。数値グラフにしない判定カードもここに含む。
   本文は白背景/黒字だが、この帯だけ意図的に黒背景/クリーム文字で反転させ、
   「ここは図として読む場所」だと視覚的に区切る。
   ======================================================================== */
:root{
  --viz-ink:#0b0c0d;
  --viz-cream:#f2efe8;
  --viz-red:#e31e2f;
  --viz-teal:#007e88;
  --viz-dim:#818585;
  --viz-line:rgba(242,239,232,.16);
  --viz-track:rgba(242,239,232,.12);
}
.viz-card{
  margin:32px 0;padding:clamp(24px,5vw,52px);
  background:var(--viz-ink);color:var(--viz-cream);
  border-left:5px solid var(--viz-red);
}
.viz-kicker{
  display:block;margin-bottom:8px;color:var(--viz-dim);
  font-size:12px;letter-spacing:.12em;
}
.viz-title{
  display:block;font-size:clamp(24px,4vw,42px);line-height:1.3;letter-spacing:-.03em;
  font-weight:700;
}
.viz-card figcaption{margin:0 0 30px}
.viz-conclusion{
  margin:34px 0 0;padding-top:22px;border-top:1px solid var(--viz-line);
  font-size:clamp(20px,3vw,30px);font-weight:700;line-height:1.45;letter-spacing:-.02em;
}
.viz-note{margin:12px 0 0;color:var(--viz-dim);font-size:11px;line-height:1.6}

/* 1. ドーナツ比較(構成比%): 同じ大きさを左右配置。スマホでも縦積みにしない */
.viz-donut-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,4vw,48px);align-items:start;
}
.viz-donut-item{text-align:center}
.viz-donut-item .viz-label{margin:0 0 14px;color:#a4a6a4;font-size:14px;letter-spacing:.12em}
.viz-donut-item svg{display:block;width:min(100%,260px);height:auto;margin:auto}
.viz-donut-item .viz-value{margin:12px 0 2px;font-size:clamp(14px,2.3vw,22px);font-weight:700;white-space:nowrap}
.viz-donut-item .viz-base{margin:0;color:var(--viz-dim);font-size:clamp(10px,1.4vw,12px)}

/* 2. 単体ドーナツ + 凡例: 1つの分母の内訳を示す形式。
   極端に細いスライスがあること自体がメッセージになる場合に使う。
   値は必ず凡例テキストでも読めるようにする(SVGを読めないクローラー対策)。 */
.viz-single-chart{display:flex;justify-content:center}
.viz-single-chart svg{display:block;width:min(100%,300px);height:auto}
.viz-legend{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.viz-legend li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;
  padding-bottom:10px;border-bottom:1px solid var(--viz-line);
}
.viz-legend li:last-child{border-bottom:none;padding-bottom:0}
.viz-swatch{
  width:10px;height:10px;border-radius:2px;display:inline-block;transform:translateY(1px);
}
.viz-swatch.is-red{background:var(--viz-red)}
.viz-swatch.is-teal{background:var(--viz-teal)}
.viz-swatch.is-gray{background:#5c6360}
.viz-legend-name{font-size:clamp(12.5px,2.2vw,14px);line-height:1.5}
.viz-legend-num{
  text-align:right;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(13px,2.3vw,15px);white-space:nowrap;
}
.viz-legend-num small{
  display:block;font-weight:500;color:var(--viz-dim);font-size:11px;margin-top:2px;
}

/* 3. 横棒: 同じ0起点・同じ尺度でしか比較しない。円グラフの流用禁止。
   長さの差が読者に意味を持つ時だけ使う(差が僅少なら棒にしない)。
   スマホでは名前と金額を横並びにすると両方が折り返して読めなくなるため、
   金額を上に大きく、名前を下に小さく置く縦積みにする。 */
.viz-bar-group{display:flex;flex-direction:column;gap:26px}
.viz-bar-row .viz-bar-head{margin-bottom:10px}
.viz-bar-row .viz-bar-num{
  display:block;font-variant-numeric:tabular-nums;color:var(--viz-cream);font-weight:700;
  font-size:clamp(22px,5vw,30px);letter-spacing:-.02em;line-height:1.15;
}
.viz-bar-row .viz-bar-name{
  display:block;margin-top:5px;font-weight:500;color:#a4a6a4;
  font-size:clamp(12px,2.1vw,13.5px);line-height:1.55;letter-spacing:.01em;
}
.viz-bar-track{
  position:relative;height:14px;border-radius:2px;background:var(--viz-track);overflow:hidden;
}
.viz-bar-fill{
  position:absolute;inset:0 auto 0 0;height:100%;background:var(--viz-red);border-radius:2px;
}
.viz-bar-row.is-teal .viz-bar-fill{background:var(--viz-teal)}
.viz-bar-row .viz-bar-note{margin:6px 0 0;color:var(--viz-dim);font-size:11px;line-height:1.6}

/* 図解タイトルは figcaption 内の strong だが、本文の強調(赤)とは役割が違うため
   .article-body strong の赤継承を打ち消してクリーム色に戻す */
.article-body .viz-card .viz-title{color:var(--viz-cream)}