: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)}

.card{
  display:block;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 .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:28px} }
.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}

/* ---------- 記事ページ ---------- */
.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;
}