:root{--bg:#fcfcfb;--fg:#1b1b1a;--sub:#5f5e5a;--line:#e3e2dd;--accent:#2a78d6;--card:#fff;--pr:#f4f3ef}
@media (prefers-color-scheme:dark){:root{--bg:#1a1a19;--fg:#f2f1ec;--sub:#b5b4ab;--line:#3a3a37;--accent:#5598e7;--card:#232322;--pr:#2a2a28}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif;line-height:1.85;font-size:16px}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
header.site{border-bottom:1px solid var(--line);padding:14px 0}
header.site .name{margin:0;font-size:1.1rem;line-height:1.5}
header.site .name a{color:var(--fg);text-decoration:none;font-weight:700}
header.site .tagline{margin:2px 0 0;color:var(--sub);font-size:.85rem}
.cat::before{content:" ・ "}
.list-title{border:0;margin:.4em 0 0;font-size:1rem;color:var(--sub)}
main{padding:24px 0 48px}
h1{font-size:1.6rem;line-height:1.4;margin:.2em 0 .4em}
h2{font-size:1.3rem;margin:2em 0 .6em;padding-bottom:.3em;border-bottom:2px solid var(--line)}
h3,h4{font-size:1.1rem;margin:1.6em 0 .5em}
.meta{color:var(--sub);font-size:.88rem}
.pr{background:var(--pr);color:var(--sub);font-size:.85rem;padding:8px 12px;border-radius:6px;margin:12px 0 20px}
img{max-width:100%;height:auto}
blockquote{margin:1.2em 0;padding:4px 16px;border-left:4px solid var(--line);color:var(--sub)}
pre{background:var(--pr);padding:12px;border-radius:6px;overflow-x:auto}
code{font-size:.9em}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.95rem}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left}
th{background:var(--pr)}
.aff-card{display:flex;gap:16px;align-items:center;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:16px;margin:1.4em 0}
.aff-img{flex:0 0 120px}.aff-img img{display:block;border-radius:6px}
.aff-body{flex:1;min-width:0}
.aff-name{font-weight:700;margin:0 0 4px}
.aff-note{color:var(--sub);font-size:.88rem;margin:0 0 8px}
.aff-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:10px 22px;border-radius:999px}
.aff-btn:hover{opacity:.88}
.aff-asp{color:var(--sub);font-size:.75rem;margin:8px 0 0}
.aff-ended{color:var(--sub);font-size:.9rem;margin:0}
.aff-ended-text{color:var(--sub)}
@media (max-width:520px){.aff-card{flex-direction:column;align-items:stretch;text-align:center}.aff-img{flex:none;max-width:200px;margin:0 auto}}
ul.posts{list-style:none;padding:0}
ul.posts li{border-bottom:1px solid var(--line);padding:16px 0}
ul.posts a{font-weight:700;font-size:1.1rem;text-decoration:none}
ul.posts p{margin:4px 0 0;color:var(--sub);font-size:.92rem}
footer.site{border-top:1px solid var(--line);padding:20px 0 32px;color:var(--sub);font-size:.82rem}
footer.site p{margin:4px 0}
footer.site nav a{color:var(--sub);margin-right:1em}
/* 2スト500cc:70〜80年代のグランプリ。古い紙の地色 × 黒 × レーシングレッド × 500ccクラスの黄色いゼッケン */
/* 共通CSSのダークモード指定より後ろにあるので、こちらの値が常に勝つ(明るい配色に固定) */
:root{
  --bg:#f3eee4;--fg:#1d1b18;--sub:#6b655b;--line:#ddd5c6;--accent:#b3122a;--card:#fffdf8;--pr:#efe8da;
  --ink:#141312;--red:#c8102e;--plate:#f5c400;
  color-scheme:light;
}
body{min-height:100vh;display:flex;flex-direction:column}  /* 記事が少なくてもフッターを下端に */
main{flex:1}
/* 背景:古いプログラム冊子のような紙の地色に、ごく薄い斜めのスピード線 */
body{
  background-color:var(--bg);
  background-image:repeating-linear-gradient(-28deg,rgba(29,27,24,.022) 0 2px,transparent 2px 22px);
  font-family:"Hiragino Sans","BIZ UDPGothic","Yu Gothic UI","Meiryo",system-ui,sans-serif;letter-spacing:.02em;
}
a{text-underline-offset:3px}
a:hover{color:var(--red)}

/* ヘッダー:黒地 + 赤い線 + チェッカーフラッグの帯 */
header.site{
  border:0;padding:24px 0 22px;color:#fff;background:var(--ink);position:relative;
  box-shadow:inset 0 -3px 0 var(--red);
  margin-bottom:12px;
}
header.site::after{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;
  background:repeating-conic-gradient(var(--ink) 0 25%,#fff 0 50%) 0 0/12px 12px;
}
header.site .name{font-size:1.3rem;font-weight:800;font-style:italic;letter-spacing:.04em;line-height:1.45}
header.site .name a{color:#fff}
header.site .name a:hover{color:#fff;opacity:.85}
header.site .tagline{color:#bdb6aa;font-size:.85rem;margin-top:6px}

main{padding:30px 0 56px}

/* 記事は白い紙に載せる */
main article{
  background:var(--card);border:1px solid var(--line);border-top:4px solid var(--ink);border-radius:2px;
  padding:32px 36px 40px;box-shadow:0 1px 3px rgba(29,27,24,.08);
}
@media (max-width:600px){
  main{padding:20px 0 40px}
  main article{padding:22px 16px 28px;margin:0 -4px}
}

h1{font-size:1.65rem;font-weight:800;line-height:1.45;color:var(--ink);margin:0 0 .5em}
h2{
  font-size:1.25rem;color:var(--ink);margin:2.4em 0 .8em;padding:.2em 0 .45em .8em;
  border-bottom:1px solid var(--line);border-left:6px solid var(--red);
}
h3{font-size:1.1rem;color:var(--ink);margin:1.8em 0 .5em}
strong{background:linear-gradient(transparent 64%,rgba(245,196,0,.42) 64%)}
hr{border:0;height:6px;margin:2.4em 0;background:repeating-conic-gradient(#cfc6b5 0 25%,transparent 0 50%) 0 0/6px 6px;opacity:.7}

/* 日付と特集名(特集名は黄色いゼッケン) */
.meta{font-size:.85rem}
.cat::before{content:none}
.cat{
  display:inline-block;margin-left:.8em;padding:0 10px;border:2px solid var(--ink);border-radius:8px;
  background:var(--plate);color:var(--ink);font-size:.75rem;font-weight:800;letter-spacing:.06em;line-height:1.6;vertical-align:1px;
}

/* 目次(「この記事の内容」の箇条書き) */
article p > strong:only-child{background:none;color:var(--red);letter-spacing:.08em}

.pr{background:var(--pr);border-left:4px solid var(--plate);border-radius:0 4px 4px 0;color:var(--sub)}
th,td{border-color:var(--line)}
th{background:#ece5d6;color:var(--ink);font-weight:700}
blockquote{border-left-color:var(--red);background:#faf6ee;padding:10px 16px}

.aff-card{border-radius:4px;border-color:var(--line);box-shadow:0 1px 3px rgba(29,27,24,.08)}
.aff-btn{background:var(--red);color:#fff;border-radius:4px;box-shadow:0 2px 0 #8a0c20}
.aff-btn:hover{opacity:1;filter:brightness(1.08);color:#fff}

/* トップ:新着 + 特集の一覧 */
.list-title{color:var(--ink);font-weight:800;letter-spacing:.12em;margin:0 0 12px;padding:0;font-size:1rem}
.list-title::before{content:"";display:inline-block;width:12px;height:12px;background:var(--red);margin-right:8px;vertical-align:0}
* + .list-title{margin-top:40px}
ul.posts{margin:0}
ul.posts li{
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--red);border-radius:2px;
  padding:18px 20px;margin:0 0 14px;transition:box-shadow .15s,transform .15s;
}
ul.posts li:hover{box-shadow:0 4px 14px rgba(29,27,24,.12);transform:translateY(-1px)}
ul.posts a{color:var(--ink);font-size:1.1rem;line-height:1.5}
ul.posts a:hover{color:var(--red)}
ul.posts .meta{margin-top:6px}
ul.posts p{margin-top:8px}

/* 特集ごとのまとまり:黒い帯に特集名、中は第1回からの順 */
.group{background:var(--card);border:1px solid var(--line);border-radius:2px;margin:0 0 18px;overflow:hidden}
.group-title{
  margin:0;padding:10px 16px;border:0;background:var(--ink);color:#fff;font-size:1.05rem;letter-spacing:.06em;
  display:flex;align-items:center;gap:10px;
}
.group-title .count{
  margin-left:auto;background:var(--plate);color:var(--ink);border-radius:6px;padding:0 8px;font-size:.75rem;font-weight:800;
}
ul.posts.compact{counter-reset:ep;padding:4px 0}
ul.posts.compact li{
  background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:12px 16px 12px 52px;position:relative;
}
ul.posts.compact li:last-child{border-bottom:0}
ul.posts.compact li:hover{box-shadow:none;transform:none;background:#faf6ee}
ul.posts.compact li::before{
  counter-increment:ep;content:counter(ep);position:absolute;left:16px;top:14px;width:24px;height:24px;
  border:2px solid var(--ink);border-radius:50%;font-size:.75rem;font-weight:800;line-height:20px;text-align:center;
}
ul.posts.compact a{font-size:1rem}
ul.posts.compact .meta{margin-top:2px}
ul.posts.compact .cat{display:none}

/* フッター */
footer.site{background:var(--ink);border-top:3px solid var(--red);color:#bdb6aa;padding:26px 0 36px}
footer.site nav{margin-bottom:8px}
footer.site nav a{color:#fff;text-decoration:none}
footer.site nav a:hover{text-decoration:underline;color:#fff}