:root{
  --bg:#0e1116; --panel:#161b22; --line:#232b36; --fg:#e6edf3; --muted:#8b949e;
  --waiting:#7c8899; --party:#3b82f6; --twoshot:#ec4899; --gap:#1c2029;
  --accent:#f59e0b; --fg2:#c9d3dd;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fa; --panel:#fff; --line:#d8dee4; --fg:#1f2328; --muted:#636c76; --gap:#e6e9ee;
         --fg2:#3d444d; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.6;font-size:15px}
a{color:inherit}
.wrap{max-width:960px;margin:0 auto;padding:0 16px 64px}
header{border-bottom:1px solid var(--line);margin-bottom:24px;background:var(--panel)}
header .wrap{padding-top:16px;padding-bottom:12px}
.brand{display:inline-block;text-decoration:none;color:var(--fg)}
/* ヘッダーの広告帯は廃止（デザイン刷新）。広告表示はリンク横の「広告」バッジと
   フッターの .pr で担保する。第4条が求める「客観的に視認される範囲」を、
   リンク近傍の表示で満たす形 */
.brand svg{display:block;height:26px;width:auto}
.pr{color:var(--fg2, #c9d3dd);font-size:12px;margin:0 0 10px}
nav{margin-top:10px}
.navrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
nav a{font-size:13px;text-decoration:none;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:4px 12px}
nav a.on{color:var(--fg);border-color:var(--fg);font-weight:600}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.badge{font-size:13px;text-decoration:none;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:5px 11px}
.badge b{color:var(--accent);font-size:15px;margin-left:3px}
td.lead{font-weight:700}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:17px;margin:32px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.meta{color:var(--muted);font-size:13px;margin:0 0 20px}
.warn{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:10px 14px;border-radius:6px;color:var(--muted);font-size:13px;margin:0 0 20px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th{color:var(--muted);font-weight:500;font-size:12px}
/* サムネ列の有無で出演者名の列位置が変わるため、専用クラスで指定する */
td.who,th.who{text-align:left;white-space:normal}
td.rank{color:var(--muted);width:44px}
td.rank.top{color:var(--accent);font-weight:700}
/* 規約で許されるのは拡大・縮小のみ。object-fit:cover は切り抜き、border-radius は
   角の切り落としに相当するため使わない。提供画像は4:3なのでそのまま等比で出す */
.thumb{display:block;width:100%;height:auto;aspect-ratio:4/3;background:var(--line)}
.phsvg{display:block;width:100%;height:100%}
td.tb{width:64px;padding-right:0}
td.tb .thumb{width:64px}
.hero{display:flex;gap:16px;align-items:flex-start;margin:0 0 4px}
.hero .thumb{width:160px;flex:none}
.hero .heroText{min-width:0}
.heroCta{margin:12px 0 0}
.hero .cta-note{margin-top:6px}
@media (max-width:520px){ .hero{flex-direction:column} .hero .thumb{width:200px} }
.name{text-decoration:none;font-weight:600}
.name:hover{text-decoration:underline}
/* いまオンラインかの表示。状態ごとに色を変える（タイムラインの凡例と揃える） */
.live{font-size:11px;font-weight:700;border-radius:4px;padding:1px 7px;margin-left:6px;
  white-space:nowrap;color:#fff}
.live.waiting{background:var(--waiting)}
.live.party{background:var(--party)}
.live.twoshot{background:var(--twoshot)}
.liveNow{display:inline-block;font-size:14px;font-weight:700;border-radius:6px;
  padding:5px 12px;color:#fff;margin:12px 0 0}
.liveNow.waiting{background:var(--waiting)}
.liveNow.party{background:var(--party)}
.liveNow.twoshot{background:var(--twoshot)}
.liveNow small{font-weight:400;opacity:.85;margin-left:6px}
.tag{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:4px;
  padding:1px 6px;margin-left:6px;white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:20px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.card .k{color:var(--muted);font-size:12px}
.card .v{font-size:22px;font-weight:700;margin-top:2px}
.card .v small{font-size:13px;font-weight:400;color:var(--muted)}
.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:8px 0 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;
  vertical-align:middle}
.cta{display:inline-block;background:var(--accent);color:#000;font-weight:700;
  text-decoration:none;border-radius:8px;padding:11px 20px;margin-top:6px}
.cta-note{color:var(--muted);font-size:12px;margin-top:8px}
figure{margin:0}
svg{display:block;width:100%;height:auto;overflow:visible}
footer{border-top:1px solid var(--line);margin-top:48px;padding-top:16px;
  color:var(--muted);font-size:12px}
.scroll{overflow-x:auto}
form label{display:block;margin:14px 0;color:var(--muted);font-size:13px}
form input[type=text],form textarea,form select{display:block;width:100%;margin-top:5px;
  padding:9px 11px;font:inherit;color:var(--fg);background:var(--panel);
  border:1px solid var(--line);border-radius:6px}
form textarea{resize:vertical}
form button[disabled]{opacity:.5}