/* =========================================================================
   career-archive.css — 阪神キャリアアーカイブ（2026-09-30 新設）
   /career-archive/（一覧）と /career-archive/<選手>/（記事）で使う。
   色は assets/css/tokens.css と同値。ダークは html[data-theme="dark"] で変数だけ上書き。
   文字は docs/typography-spec.md: 見出し・名前・大きな数字は Zen Old Mincho 700 + tnum、
   本文は Noto Sans JP 16px / 1.9（ブログ規定）。最小10px。
   ========================================================================= */

.ca-page {
  --ca-bg: #f7f3ea;
  --ca-surface: #fffdf7;
  --ca-surface2: #efe9da;
  --ca-text: #262115;
  --ca-sub: #5d5645;
  --ca-gold: #8f6a12;
  --ca-gold-hover: #6d500c;
  --ca-line: #ded5c0;
  --ca-line-strong: #b9ad8e;
  --ca-relief: #2f5670;
  --ca-bad: #9c4634;
  --ca-otherbar: #d3c9b0;
  --ca-btn-bg: #262115;
  --ca-btn-text: #f7f3ea;
  /* 両テーマ共通 */
  --ca-ink: #171310;
  --ca-ink-2: #1f1b14;
  --ca-ink-line: #3a3223;
  --ca-yellow: #f5c000;
  --ca-yellow-lit: #ffd24a;
  --ca-gold-on-ink: #f1b81d;
  --ca-start: #c9960f;
  --ca-mix: #9a8a5c;
  --ca-mute: #9a9282;
  --ca-on-ink: #faf6ec;
  --ca-on-ink-2: #e9e2d2;
  --ca-on-ink-sub: #b3ab97;
  --ca-f-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ca-f-min: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
html[data-theme="dark"] .ca-page {
  --ca-bg: #0f0e0b;
  --ca-surface: #17150f;
  --ca-surface2: #1f1c13;
  --ca-text: #e9e2d2;
  --ca-sub: #b3ab97;
  --ca-gold: #d9a62e;
  --ca-gold-hover: #f1b81d;
  --ca-line: #35301f;
  --ca-line-strong: #4a4230;
  --ca-relief: #7fa8c6;
  --ca-bad: #d9826b;
  --ca-otherbar: #4a4230;
  --ca-btn-bg: #e9e2d2;
  --ca-btn-text: #0f0e0b;
}

html, body.ca-page { margin: 0; padding: 0; }
body.ca-page {
  background: var(--ca-bg);
  color: var(--ca-text);
  font-family: var(--ca-f-sans);
  font-size: 16px;
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
}
.ca-page *, .ca-page *::before, .ca-page *::after { box-sizing: border-box; }
/* 本文側のリンクだけ金色にする（上部タブ・フッターは site-tabs.css の色） */
.ca-page main a { color: var(--ca-gold); }
.ca-page main a:hover { color: var(--ca-gold-hover); }
.ca-page img { max-width: 100%; height: auto; }
.ca-page h1, .ca-page h2, .ca-page h3, .ca-page p, .ca-page blockquote, .ca-page figure, .ca-page ul, .ca-page ol { margin: 0; }
.ca-page button { font-family: inherit; }
.m {
  font-family: var(--ca-f-min);
  font-weight: 700;
  font-feature-settings: "tnum";
}
.ca-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--ca-gold);
  line-height: 1.5;
}
.ca-note { font-size: 11.5px; color: var(--ca-sub); line-height: 1.7; }
.ca-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.ca-wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 767px) { .ca-wrap { padding: 0 16px; } }

.ca-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.3;
}
.ca-page .ca-btn--yellow { background: var(--ca-yellow); color: var(--ca-ink); }
.ca-page .ca-btn--yellow:hover { background: var(--ca-yellow-lit); color: var(--ca-ink); }
.ca-page .ca-btn--outline-yellow { border: 1px solid var(--ca-yellow); color: var(--ca-yellow); }
.ca-page .ca-btn--outline-yellow:hover { color: var(--ca-yellow-lit); border-color: var(--ca-yellow-lit); }
.ca-btn svg { flex-shrink: 0; }

/* =========================================================================
   記事ページ
   ========================================================================= */
.ca-crumb {
  background: var(--ca-ink);
  font-size: 12px;
  color: var(--ca-mute);
  padding-top: 14px;
}
.ca-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.ca-crumb li { display: flex; gap: 8px; }
.ca-crumb li + li::before { content: "›"; }
.ca-page .ca-crumb a { color: var(--ca-mute); text-decoration: none; }
.ca-page .ca-crumb a:hover { color: var(--ca-on-ink-2); text-decoration: underline; }
.ca-crumb [aria-current] { color: var(--ca-on-ink-sub); }

.ca-hero { background: var(--ca-ink); color: var(--ca-on-ink-2); }
.ca-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 56px;
  align-items: end;
  padding-top: 48px;
  padding-bottom: 80px;
}
.ca-hero-main { display: flex; flex-direction: column; gap: 20px; }
.ca-hero .ca-kicker { color: var(--ca-gold-on-ink); }
.ca-hero-name { font-size: 88px; line-height: 1.05; color: var(--ca-on-ink); letter-spacing: .02em; }
.ca-hero-catch { font-size: 30px; color: var(--ca-yellow); line-height: 1.4; }
.ca-hero-lead { max-width: 520px; font-size: 16px; color: var(--ca-on-ink-sub); margin-top: 8px; }
.ca-hero-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 12px; }
.ca-hero-date { font-size: 12px; color: var(--ca-mute); }

.ca-game {
  border: 1px solid var(--ca-ink-line);
  border-radius: 16px;
  background: var(--ca-ink-2);
  padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
}
.ca-game-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ca-game-head .ca-kicker { color: var(--ca-gold-on-ink); }
.ca-pill-gold {
  font-size: 11px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid #5a4a22; color: var(--ca-yellow-lit); white-space: nowrap; line-height: 1.6;
}
.ca-game-score { display: flex; align-items: center; justify-content: center; gap: 28px; }
.ca-game-team { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; color: var(--ca-on-ink-sub); line-height: 1.4; }
.ca-game-team .m { font-size: 72px; line-height: 1; }
.ca-game-dash { font-size: 32px; color: #5d5645; }
.ca-game-pitchers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ca-game-p { background: #2a2418; border-radius: 10px; padding: 14px 16px; line-height: 1.5; }
.ca-game-p--opp { background: #221e16; }
.ca-game-p .who { font-size: 12px; font-weight: 700; color: var(--ca-gold-on-ink); }
.ca-game-p--opp .who { color: var(--ca-on-ink-sub); }
.ca-game-p .line { font-size: 22px; color: var(--ca-on-ink); }
.ca-game-p--opp .line { color: var(--ca-on-ink-2); }
.ca-game-p .sub { font-size: 12px; color: var(--ca-on-ink-sub); }
.ca-game-p--opp .sub { color: var(--ca-mute); }
.ca-game-quote {
  font-size: 15px; font-weight: 700; color: var(--ca-on-ink-2);
  border-top: 1px solid var(--ca-ink-line); padding-top: 14px; line-height: 1.7;
}

.ca-strip { background: var(--ca-surface); border-bottom: 1px solid var(--ca-line); }
.ca-strip-inner { padding-top: 32px; padding-bottom: 32px; }
.ca-strip .ca-kicker { margin-bottom: 14px; }
.ca-strip-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); list-style: none; padding: 0; }
.ca-strip-grid li { padding: 4px 20px; border-left: 1px solid var(--ca-line); }
.ca-strip-v { font-size: 38px; line-height: 1.15; color: var(--ca-text); display: block; }
.ca-strip-v small { font-size: 16px; color: var(--ca-gold); margin-left: 2px; }
.ca-strip-l { font-size: 12px; color: var(--ca-sub); display: block; line-height: 1.6; }

.ca-body {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 0 0;
  display: flex; flex-direction: column; gap: 72px;
}
.ca-lead { display: flex; flex-direction: column; gap: 16px; }
.ca-lead p { font-size: 17px; line-height: 1.9; }
.ca-lead p.is-sub { color: var(--ca-sub); }

.ca-panel {
  background: var(--ca-surface);
  border: 1px solid var(--ca-line);
  border-radius: 16px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.ca-panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; }
.ca-panel-title { font-size: 22px; margin-top: 4px; line-height: 1.5; }
.ca-panel-title--s { font-size: 18px; }
.ca-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ca-sub); list-style: none; padding: 0; }
.ca-legend li { display: flex; align-items: center; gap: 6px; line-height: 1.5; }
.ca-sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.ca-sw--start { background: var(--ca-start); }
.ca-sw--mix { background: var(--ca-mix); }
.ca-sw--relief { background: var(--ca-relief); }
.ca-sw--other { background: var(--ca-line-strong); }

/* 13年間の登板数 */
.ca-map-bars {
  display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 8px;
  align-items: end; height: 240px; border-bottom: 1px solid var(--ca-line-strong);
}
.ca-map-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.ca-map-col .g { font-size: 15px; line-height: 1.2; }
.ca-map-col .bar { width: 100%; border-radius: 4px 4px 0 0; height: calc(var(--h) * 190px / 53); min-height: 3px; }
.ca-map-col .bar.is-start { background: var(--ca-start); }
.ca-map-col .bar.is-mix { background: var(--ca-mix); }
.ca-map-col .bar.is-relief { background: var(--ca-relief); }
.ca-map-labels { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ca-map-labels > div { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.3; }
.ca-map-labels .y { font-size: 13px; color: var(--ca-sub); }
.ca-map-labels .y-short { display: none; }
.ca-map-labels .era { font-size: 11px; color: var(--ca-sub); font-feature-settings: "tnum"; }
.ca-map-labels .tag { font-size: 10px; color: var(--ca-gold); font-weight: 700; text-align: center; min-height: 26px; }

/* 章 */
.ca-ch { display: flex; flex-direction: column; gap: 20px; }
.ca-ch-title { font-size: 32px; line-height: 1.35; }
.ca-ch h3 { font-size: 18px; line-height: 1.5; }

.ca-stat4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; }
.ca-stat4 li { background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 12px; padding: 16px; line-height: 1.5; }
.ca-stat4 .v { font-size: 30px; color: var(--ca-gold); display: block; line-height: 1.2; }
.ca-stat4 .v small { font-size: 14px; }
.ca-stat4 .l { font-size: 12px; color: var(--ca-sub); display: block; }

.ca-hbars { display: flex; flex-direction: column; gap: 14px; }
.ca-hbar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 72px; gap: 14px; align-items: center; }
.ca-hbar .k { font-size: 13px; color: var(--ca-sub); line-height: 1.4; }
.ca-hbar .track { height: 22px; background: var(--ca-surface2); border-radius: 4px; }
.ca-hbar .fill { height: 22px; border-radius: 4px; width: var(--w); min-width: 3px; background: var(--ca-start); }
.ca-hbar .fill.is-bad { background: var(--ca-bad); }
.ca-hbar .v { font-size: 20px; text-align: right; line-height: 1.3; }
.ca-hbar .v.is-bad { color: var(--ca-bad); }
.ca-flowline {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  font-size: 13px; color: var(--ca-sub); padding-top: 12px; border-top: 1px solid var(--ca-line); line-height: 1.6;
}
.ca-flowline b { color: var(--ca-text); }
.ca-flowline b.is-bad { color: var(--ca-bad); }

.ca-table-wrap { background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 16px; overflow: hidden; }
.ca-table { width: 100%; border-collapse: collapse; font-feature-settings: "tnum"; }
.ca-table caption { text-align: left; padding: 16px 24px 0; font-size: 12px; color: var(--ca-sub); }
.ca-table th, .ca-table td { padding: 10px 24px; border-top: 1px solid var(--ca-line); text-align: right; line-height: 1.5; }
.ca-table thead th { background: var(--ca-surface2); font-size: 12px; font-weight: 700; color: var(--ca-sub); border-top: 0; }
.ca-table th[scope="row"] { text-align: left; font-size: 14px; font-weight: 400; color: var(--ca-sub); }
.ca-table thead th:first-child { text-align: left; }
.ca-table td.m { font-size: 20px; }
.ca-table td.d { font-size: 13px; font-weight: 700; color: var(--ca-sub); }
.ca-table td.d.is-bad { color: var(--ca-bad); }

.ca-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ca-card {
  background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.ca-card--relief { border: 2px solid var(--ca-relief); padding: 23px; }
.ca-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; line-height: 1.5; }
.ca-card-head .m { font-size: 18px; }
.ca-card-head span:last-child { font-size: 12px; color: var(--ca-sub); }
.ca-card--relief .ca-card-head .m, .ca-card--relief .v3 .v { color: var(--ca-relief); }
.v3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; }
.v3 .v { font-size: 28px; display: block; line-height: 1.2; }
.v3 .l { font-size: 11.5px; color: var(--ca-sub); display: block; line-height: 1.5; }
.ca-quote {
  padding: 4px 0 4px 24px; font-size: 22px; line-height: 1.5; color: var(--ca-text);
  border-left: 3px solid var(--ca-yellow);
}

.ca-dark {
  background: var(--ca-ink); border-radius: 20px; padding: 48px;
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: center;
}
.ca-dark .ca-kicker { color: var(--ca-gold-on-ink); }
.ca-dark-num { font-size: 112px; line-height: 1; color: var(--ca-yellow); display: block; }
.ca-dark-unit { font-size: 15px; color: var(--ca-on-ink-sub); }
.ca-dark-body { display: flex; flex-direction: column; gap: 16px; }
.ca-dark-body h2 { font-size: 28px; line-height: 1.4; color: var(--ca-on-ink); }
.ca-dark-body p { color: var(--ca-on-ink-sub); }

.ca-jersey { display: flex; align-items: center; gap: 24px; background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 16px; padding: 28px 32px; }
.ca-jersey-nums { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.ca-jersey-num {
  width: 96px; height: 96px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 52px; line-height: 1;
}
.ca-jersey-num--old { border: 1px solid var(--ca-line-strong); color: var(--ca-mute); }
.ca-jersey-num--new { background: var(--ca-ink); color: var(--ca-yellow); }
.ca-jersey-text { display: flex; flex-direction: column; gap: 6px; }
.ca-jersey-text .s { font-size: 13px; color: var(--ca-sub); line-height: 1.7; }
.ca-jersey-text .q { font-size: 22px; line-height: 1.5; }

.ca-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; line-height: 1.3; }
.ca-big .m { font-size: 56px; line-height: 1; color: var(--ca-gold); }
.ca-chip { font-size: 11px; padding: 2px 10px; border-radius: 999px; background: var(--ca-surface2); color: var(--ca-sub); line-height: 1.6; }
.ca-k3 { display: flex; gap: 10px; list-style: none; padding: 0; }
.ca-k3 li {
  width: 64px; height: 64px; border-radius: 50%; background: var(--ca-ink); color: var(--ca-yellow);
  display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1;
}
.ca-card .s { font-size: 13px; color: var(--ca-sub); line-height: 1.8; }

.ca-soft { background: var(--ca-surface2); border-radius: 20px; padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.ca-soft-title { font-size: 28px; line-height: 1.4; }
.ca-soft .ca-two > div { background: var(--ca-surface); border-radius: 14px; padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.ca-soft .t { font-size: 16px; }
.ca-soft .s { font-size: 13px; color: var(--ca-sub); line-height: 1.7; }
.ca-soft ul { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 6px 0 0; list-style: none; }
.ca-soft li .v { font-size: 24px; color: var(--ca-gold); display: block; line-height: 1.3; }
.ca-soft li .v.is-relief { color: var(--ca-relief); }
.ca-soft li .v small { font-size: 13px; }
.ca-soft li .l { font-size: 11.5px; color: var(--ca-sub); display: block; }

.ca-mix { display: flex; flex-direction: column; gap: 16px; }
.ca-mix-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 150px; gap: 16px; align-items: center; }
.ca-mix-row .y { font-size: 18px; }
.ca-mix-bar { display: flex; height: 36px; border-radius: 6px; overflow: hidden; }
.ca-mix-bar span {
  display: flex; align-items: center; padding-left: 8px; font-size: 12px; font-weight: 700; line-height: 1;
  white-space: nowrap; overflow: hidden;
}
.ca-mix-bar .fb { background: var(--ca-start); color: var(--ca-ink); }
.ca-mix-bar .sl { background: #2f5670; color: #fffdf7; }
.ca-mix-bar .ot { background: var(--ca-line-strong); padding-left: 0; }
.ca-mix-row .spd { font-size: 13px; color: var(--ca-sub); line-height: 1.4; }
.ca-mix-row .spd .m { font-size: 18px; color: var(--ca-text); }

.ca-war { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.ca-war li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 48px; gap: 10px; align-items: center; line-height: 1.4; }
.ca-war .n { font-size: 13px; color: var(--ca-sub); }
.ca-war .track { height: 16px; }
.ca-war .fill { height: 16px; border-radius: 3px; width: var(--w); background: var(--ca-otherbar); }
.ca-war .v { font-size: 16px; text-align: right; color: var(--ca-sub); }
.ca-war li.is-me .n, .ca-war li.is-me .v { color: var(--ca-gold); font-weight: 700; }
.ca-war li.is-me .fill { background: var(--ca-start); }
.ca-callout {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px;
  border: 1px solid var(--ca-line-strong); border-radius: 10px; font-size: 13px; color: var(--ca-sub); line-height: 1.7;
}
.ca-callout svg { flex-shrink: 0; margin-top: 2px; }
.ca-callout b { color: var(--ca-text); }

.ca-class6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; }
.ca-class6 li {
  border-radius: 12px; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; align-items: center;
  background: var(--ca-surface); border: 1px solid var(--ca-line); line-height: 1.4; text-align: center;
}
.ca-class6 .r { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ca-gold); }
.ca-class6 .n { font-size: 17px; }
.ca-class6 li.is-me { background: var(--ca-ink); border-color: var(--ca-ink); }
.ca-class6 li.is-me .r { color: var(--ca-gold-on-ink); }
.ca-class6 li.is-me .n { color: var(--ca-yellow); }

.ca-closing {
  margin-top: 88px; background: var(--ca-ink); padding: 80px 48px;
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center;
}
.ca-closing .ca-kicker { color: var(--ca-gold-on-ink); }
.ca-closing-title { font-size: 44px; line-height: 1.4; color: var(--ca-on-ink); }
.ca-closing p { max-width: 620px; color: var(--ca-on-ink-sub); }
.ca-closing .ca-closing-thanks { font-size: 22px; color: var(--ca-yellow); line-height: 1.5; }
.ca-page .ca-closing-back { font-size: 13px; color: var(--ca-on-ink-sub); }

.ca-sources { background: var(--ca-surface); border-top: 1px solid var(--ca-line); }
.ca-sources-inner { max-width: 880px; margin: 0 auto; padding: 48px 0; display: flex; flex-direction: column; gap: 16px; }
.ca-sources h2 { font-size: 20px; line-height: 1.5; }
.ca-sources ul { padding-left: 1.2em; font-size: 14px; line-height: 1.9; }
.ca-sources li { margin: 2px 0; }
.ca-sources .ca-disclaimer { font-size: 13px; color: var(--ca-sub); line-height: 1.8; border-top: 1px solid var(--ca-line); padding-top: 16px; }

/* =========================================================================
   一覧ページ
   ========================================================================= */
.ca-hub-hero { border-bottom: 1px solid var(--ca-line-strong); }
.ca-hub-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: end;
  padding-top: 56px; padding-bottom: 40px;
}
.ca-hub-eyebrow { display: flex; gap: 16px; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--ca-gold); line-height: 1.5; }
.ca-hub-eyebrow i { width: 32px; height: 1px; background: var(--ca-line-strong); display: inline-block; }
.ca-hub-title { font-size: 76px; line-height: 1.1; letter-spacing: .02em; margin-top: 20px; }
.ca-hub-side { display: flex; flex-direction: column; gap: 20px; padding-bottom: 8px; }
.ca-hub-tagline { font-size: 22px; line-height: 1.6; }
.ca-hub-side > p:not(.ca-hub-tagline) { color: var(--ca-sub); }
.ca-hub-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ca-line-strong); padding: 14px 0 0; list-style: none; }
.ca-hub-stats .v { font-size: 30px; display: block; line-height: 1.3; }
.ca-hub-stats .v.is-gold { color: var(--ca-gold); }
.ca-hub-stats .v small { font-size: 14px; }
.ca-hub-stats .l { font-size: 11.5px; color: var(--ca-sub); display: block; line-height: 1.5; }

.ca-tabbar { border-bottom: 1px solid var(--ca-line); background: var(--ca-bg); }
.ca-tabbar .st-tablist { display: flex; gap: 36px; overflow-x: auto; scrollbar-width: none; }
.ca-tabbar [role="tab"] {
  min-height: 56px; padding: 0; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--ca-sub); white-space: nowrap; flex-shrink: 0;
}
.ca-tabbar [role="tab"][aria-selected="true"] { color: var(--ca-text); font-weight: 700; border-bottom-color: var(--ca-gold); }
.ca-tabbar [role="tab"]:focus-visible { outline: 2px solid var(--ca-gold); outline-offset: 2px; }
.ca-panels { padding-top: 40px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 48px; }
.ca-panels .st-panel-heading { font-size: 22px; margin-bottom: 16px; }

.ca-rec {
  background: var(--ca-surface); border: 1px solid var(--ca-line-strong); border-radius: 4px;
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px;
}
.ca-rec-num { padding: 32px; border-right: 1px solid var(--ca-line); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.ca-rec-num-text { display: contents; }
.ca-rec-no { order: -1; font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--ca-gold); line-height: 1.5; }
.ca-rec-hist { order: 1; }
.ca-rec-jersey { font-size: 180px; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--ca-gold); }
.ca-rec-hist { font-size: 12px; color: var(--ca-sub); line-height: 1.6; }
.ca-rec-main { padding: 32px 36px; display: flex; flex-direction: column; gap: 18px; }
.ca-rec-kana { font-size: 12px; color: var(--ca-sub); letter-spacing: .1em; line-height: 1.5; }
.ca-rec-name { font-size: 44px; line-height: 1.2; margin-top: 2px; }
.ca-page .ca-rec-name a { color: var(--ca-text); text-decoration: none; }
.ca-page .ca-rec-name a:hover { color: var(--ca-gold); }
.ca-rec-catch { font-size: 20px; color: var(--ca-gold); line-height: 1.5; }
.ca-rec-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ca-line); }
.ca-rec-facts div { padding: 10px 0; border-bottom: 1px solid var(--ca-line); line-height: 1.5; }
.ca-rec-facts div:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--ca-line); }
.ca-rec-facts dt { font-size: 11px; color: var(--ca-sub); }
.ca-rec-facts dd { margin: 0; font-size: 17px; }
.ca-tags { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; }
.ca-tags li { font-size: 11px; padding: 3px 10px; border-radius: 999px; background: var(--ca-surface2); color: var(--ca-sub); line-height: 1.6; }
.ca-rec-side { padding: 32px; border-left: 1px solid var(--ca-line); background: var(--ca-surface2); display: flex; flex-direction: column; gap: 18px; }
.ca-rec-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; list-style: none; padding: 0; }
.ca-rec-stats .v { font-size: 30px; line-height: 1.1; display: block; }
.ca-rec-stats .v small { font-size: 14px; }
.ca-rec-stats .l { font-size: 11.5px; color: var(--ca-sub); display: block; line-height: 1.5; }
.ca-spark { display: flex; gap: 3px; align-items: flex-end; height: 44px; border-bottom: 1px solid var(--ca-line-strong); }
.ca-spark span { flex-grow: 1; flex-basis: 0; border-radius: 1px 1px 0 0; height: calc(var(--h) * 44px / var(--max)); min-height: 2px; }
.ca-spark .is-start { background: var(--ca-start); }
.ca-spark .is-mix { background: var(--ca-mix); }
.ca-spark .is-relief { background: var(--ca-relief); }
.ca-spark-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--ca-sub); line-height: 1.6; margin-top: 4px; }
.ca-rec-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ca-page .ca-rec-actions a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 4px;
  font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.3;
}
.ca-page .ca-rec-actions .is-primary { background: var(--ca-btn-bg); color: var(--ca-btn-text); }
.ca-page .ca-rec-actions .is-primary:hover { opacity: .88; }
.ca-page .ca-rec-actions .is-secondary { border: 1px solid var(--ca-text); color: var(--ca-text); }
.ca-page .ca-rec-actions .is-secondary:hover { background: var(--ca-surface); }

.ca-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; list-style: none; padding: 0; }
.ca-slot { border: 1px dashed var(--ca-line-strong); border-radius: 4px; padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 150px; color: var(--ca-mute); line-height: 1.5; }
.ca-slot .no { font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.ca-slot .n { font-size: 22px; }
.ca-slot .s { font-size: 12px; }

.ca-years { background: var(--ca-surface); border: 1px solid var(--ca-line-strong); border-radius: 4px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.ca-years-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.ca-years-axis { position: relative; height: 24px; border-bottom: 1px solid var(--ca-line-strong); }
.ca-years-axis span { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); font-size: 11px; color: var(--ca-sub); line-height: 1.6; }
.ca-years-axis span.is-edge-start { transform: none; }
.ca-years-axis span.is-edge-end { transform: translateX(-100%); }
.ca-page .ca-years-name {
  display: flex; flex-direction: column; justify-content: center; min-height: 88px; text-decoration: none;
  color: var(--ca-text); border-bottom: 1px solid var(--ca-line); line-height: 1.5;
}
.ca-years-name .m { font-size: 18px; }
.ca-years-name .s { font-size: 11.5px; color: var(--ca-sub); }
.ca-years-track { position: relative; min-height: 88px; border-bottom: 1px solid var(--ca-line); }
.ca-years-seg { position: absolute; top: 44px; height: 14px; left: var(--x); width: var(--w); }
.ca-years-seg.is-start { background: var(--ca-start); }
.ca-years-seg.is-mix { background: var(--ca-mix); }
.ca-years-seg.is-relief { background: var(--ca-relief); }
.ca-years-pin { position: absolute; top: 14px; left: var(--x); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ca-years-pin b { font-size: 10px; font-weight: 700; color: var(--ca-gold); white-space: nowrap; line-height: 1.4; }
.ca-years-pin i { width: 1px; height: 12px; background: var(--ca-gold); display: block; }
.ca-years-pins-text { display: none; font-size: 11px; color: var(--ca-gold); line-height: 1.6; }
.ca-years-empty { display: flex; align-items: center; min-height: 64px; color: var(--ca-mute); font-size: 14px; border-bottom: 1px dashed var(--ca-line); }

.ca-about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; }
.ca-about li { background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 4px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.ca-about .no { font-size: 36px; color: var(--ca-gold); line-height: 1.2; }
.ca-about h3 { font-size: 20px; line-height: 1.5; }
.ca-about p { color: var(--ca-sub); }

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media (max-width: 1100px) {
  .ca-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 56px; }
  .ca-game { max-width: 560px; }
  .ca-strip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; }
  .ca-strip-grid li:nth-child(5) { border-left: 0; }
  .ca-rec { grid-template-columns: 240px minmax(0, 1fr); }
  .ca-rec-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ca-line); }
  .ca-rec-jersey { font-size: 140px; }
  .ca-hub-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 960px) {
  .ca-body { padding-left: 48px; padding-right: 48px; }
  .ca-sources-inner { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 767px) {
  body.ca-page { font-size: 16px; }
  .ca-body { padding: 40px 16px 0; gap: 48px; }
  .ca-sources-inner { padding: 36px 16px; }
  .ca-hero-inner { padding-top: 20px; padding-bottom: 32px; gap: 20px; }
  .ca-hero-main { gap: 14px; }
  .ca-hero-name { font-size: 52px; }
  .ca-hero-catch { font-size: 22px; line-height: 1.45; }
  .ca-hero-lead { font-size: 14px; margin-top: 0; }
  .ca-game { padding: 18px; gap: 12px; border-radius: 14px; }
  .ca-game-score { gap: 22px; }
  .ca-game-team .m { font-size: 56px; }
  .ca-game-dash { font-size: 26px; }
  .ca-game-pitchers { gap: 8px; }
  .ca-game-p { padding: 12px; }
  .ca-game-p .line { font-size: 18px; }
  .ca-game-p .sub { font-size: 11px; }
  .ca-game-quote { font-size: 14px; }
  .ca-strip-inner { padding-top: 20px; padding-bottom: 20px; }
  .ca-strip-grid li { padding: 2px 10px; }
  .ca-strip-v { font-size: 24px; }
  .ca-strip-v small { font-size: 12px; }
  .ca-strip-l { font-size: 11px; }
  .ca-lead p { font-size: 16px; }
  .ca-panel { padding: 18px 14px; border-radius: 14px; gap: 14px; }
  .ca-panel-title { font-size: 18px; }
  .ca-legend { font-size: 11px; gap: 4px 10px; }
  .ca-map-bars { gap: 3px; height: 150px; }
  .ca-map-col .g { font-size: 10px; }
  .ca-map-col .bar { height: calc(var(--h) * 120px / 53); border-radius: 2px 2px 0 0; }
  .ca-map-labels { gap: 3px; margin-top: 6px; }
  .ca-map-labels .y-full, .ca-map-labels .era, .ca-map-labels .tag { display: none; }
  .ca-map-labels .y-short { display: block; font-size: 10px; }
  .ca-ch { gap: 14px; }
  .ca-ch-title { font-size: 23px; line-height: 1.4; }
  .ca-stat4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ca-stat4 li { padding: 12px 14px; }
  .ca-stat4 .v { font-size: 24px; }
  .ca-hbar { grid-template-columns: 44px minmax(0, 1fr) 54px; gap: 10px; }
  .ca-hbar .k { font-size: 12px; }
  .ca-hbar .track, .ca-hbar .fill { height: 18px; }
  .ca-hbar .v { font-size: 16px; }
  .ca-table th, .ca-table td { padding: 8px 12px; }
  .ca-table td.m { font-size: 16px; }
  .ca-table td.d { font-size: 12px; }
  .ca-table th[scope="row"] { font-size: 12px; }
  .ca-table caption { padding: 12px 12px 0; }
  .ca-two { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ca-card { padding: 18px; }
  .ca-card--relief { padding: 17px; }
  .v3 .v { font-size: 24px; }
  .ca-quote { font-size: 19px; padding-left: 16px; }
  .ca-dark { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; gap: 16px; border-radius: 16px; }
  .ca-dark-num { font-size: 80px; }
  .ca-dark-body h2 { font-size: 20px; }
  .ca-jersey { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
  .ca-jersey-num { width: 72px; height: 72px; font-size: 38px; border-radius: 12px; }
  .ca-jersey-text .q { font-size: 18px; }
  .ca-big .m { font-size: 48px; }
  .ca-k3 li { width: 56px; height: 56px; font-size: 22px; }
  .ca-soft { padding: 24px 18px; border-radius: 16px; }
  .ca-soft-title { font-size: 20px; }
  .ca-mix-row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 12px; }
  .ca-mix-row .spd { grid-column: 2; }
  .ca-mix-row .y { font-size: 16px; }
  .ca-mix-bar { height: 30px; }
  .ca-war li { grid-template-columns: 96px minmax(0, 1fr) 36px; gap: 8px; }
  .ca-war .n { font-size: 12px; }
  .ca-war .v { font-size: 14px; }
  .ca-class6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ca-class6 li { padding: 12px 6px; }
  .ca-class6 .n { font-size: 14px; }
  .ca-closing { margin-top: 56px; padding: 48px 20px; gap: 20px; }
  .ca-closing-title { font-size: 28px; }
  .ca-closing .ca-closing-thanks { font-size: 18px; }

  .ca-hub-hero-inner { padding-top: 32px; padding-bottom: 24px; gap: 14px; }
  .ca-hub-eyebrow { font-size: 10px; gap: 10px; }
  .ca-hub-eyebrow i { width: 20px; }
  .ca-hub-title { font-size: 44px; margin-top: 14px; line-height: 1.15; }
  .ca-hub-side { gap: 14px; padding-bottom: 0; }
  .ca-hub-tagline { font-size: 17px; }
  .ca-hub-side > p:not(.ca-hub-tagline) { font-size: 14px; }
  .ca-hub-stats .v { font-size: 24px; }
  .ca-hub-stats .l { font-size: 11px; }
  .ca-tabbar .st-tablist { gap: 24px; }
  .ca-tabbar [role="tab"] { min-height: 48px; font-size: 14px; }
  .ca-panels { padding-top: 24px; padding-bottom: 48px; }
  .ca-rec { grid-template-columns: minmax(0, 1fr); }
  .ca-rec-num { flex-direction: row; align-items: flex-end; gap: 16px; padding: 20px; border-right: 0; border-bottom: 1px solid var(--ca-line); }
  .ca-rec-num-text { min-width: 0; }
  .ca-rec-jersey { font-size: 96px; line-height: .85; -webkit-text-stroke-width: 1.2px; order: -1; }
  .ca-rec-num-text { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
  .ca-rec-no, .ca-rec-hist { order: 0; }
  .ca-rec-main { padding: 16px 20px; gap: 12px; }
  .ca-rec-name { font-size: 30px; }
  .ca-rec-catch { font-size: 17px; }
  .ca-rec-facts dd { font-size: 15px; }
  .ca-rec-side { padding: 16px 20px 20px; gap: 12px; }
  .ca-rec-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .ca-rec-stats .v { font-size: 22px; }
  .ca-rec-stats .v small { font-size: 11px; }
  .ca-rec-stats .l { font-size: 10px; }
  .ca-spark { height: 36px; gap: 2px; }
  .ca-spark span { height: calc(var(--h) * 36px / var(--max)); }
  .ca-rec-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-slots { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
  .ca-slot { min-height: 0; padding: 16px 20px; flex-direction: row; justify-content: space-between; align-items: center; }
  .ca-years { padding: 18px 16px; gap: 14px; }
  .ca-years-grid { grid-template-columns: minmax(0, 1fr); }
  .ca-years-grid > .ca-years-spacer { display: none; }
  .ca-years-axis span.is-minor { display: none; }
  .ca-years-axis { font-size: 10px; }
  .ca-page .ca-years-name { min-height: 0; border-bottom: 0; padding-top: 12px; }
  .ca-years-track { min-height: 20px; }
  .ca-years-seg { top: 4px; height: 12px; }
  .ca-years-pin { display: none; }
  .ca-years-pins-text { display: block; padding-bottom: 12px; border-bottom: 1px solid var(--ca-line); }
  .ca-years-empty { min-height: 48px; font-size: 13px; }
  .ca-about { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ca-about li { padding: 18px; }
  .ca-about .no { font-size: 22px; }
  .ca-about h3 { font-size: 17px; }
  .ca-about p { font-size: 14px; }
}
@media (max-width: 430px) {
  .ca-hero-name { font-size: 48px; }
  .ca-strip-grid li { padding: 2px 8px; }
  .ca-strip-v { font-size: 22px; }
}
.ca-card h3 { font-size: 18px; line-height: 1.5; margin-bottom: 6px; }