@charset "UTF-8";
/*
 * 球団単体アプリ（TEAM_APP）のスタイル
 *
 * 本サイト（pt.css）とは前提が違う:
 *   pt.css  12球団どれが来ても破綻しないよう、球団色はチップ・タグ・下線だけ
 *   ta.css  1球団専用なので **球団色をブランドにしてよい**
 *           （--brand / --accent は layout.php が <html> の style で注入する）
 *
 * **文字サイズは6段しか使わない**（2026-09-16・ユーザー「のっぺりしてメリハリがない」）:
 *   特大 clamp(48px,15vw,72px)＝スコアだけ / 22 h1・試合中の1行目 / 20 セクション見出し /
 *   18 準見出し（場面の見出し・何が起きたか・チーム名）/ 16 本文・押す要素・入力欄 /
 *   13 補助（メタ・時刻・出典・表）/ 11 極小ラベル（バッジ・タブ・印）
 *   - **1〜2px の差は階層に見えない**。以前は 10〜40px を17段階使い、指定の 88%（98/111）が
 *     10〜17px に固まっていた＝どこを見ればいいか分からない「のっぺり」の主因だった
 *   - **段を減らすほど、大きくした所が効く**。スコアを特大にできるのは他が2段しかないから
 *   - 入力欄（.ta-uform-*）は 16px を下回らない（iOS が入力時にページを自動で拡大する）
 *   - 横スクロールのチップ（.ta-chip）だけは 13px。16px にすると1画面に4つしか入らない
 *
 * 引き継ぐ作法（本サイトの教訓。CLAUDE.md 参照）:
 *   - 見出しは3階層が見て分かること（h1 22px > h2 20px＋2px下線 > 準見出し18px）
 *   - セクション間はセクション内の4倍以上あける（68px 対 14〜20px）
 *   - 白＋枠線の「箱」を本文に使わない。枠線を残すのは本文でないものだけ（広告枠）
 *   - 絵文字UI / 左だけ太いボーダー / 無意味な影 / 過剰な角丸は禁止
 *   - 高年齢層向けにサイズは大きめ（本文16px）
 */

:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #16181D;
  --ink2: #565D66;
  --ink3: #8A9099;
  --line: #E1E4E8;
  --panel: #F5F6F8;   /* 先頭の試合カードの地。白地の本文から浮かせるためだけの面 */
  --line-strong: #16181D;
  --link: #0B5CB8;

  --up: #1B7F3B;      /* 勝ち */
  --down: #B4232A;    /* 負け */
  --heat: #E2620C;    /* 話題の熱量 */
  --cta: #F10303;     /* 広告の入口。サイト内の一般ボタンには使わない */
  --cta-ink: #FFFFFF;

  /* --brand / --accent / --accent-ink は <html> に注入される。
     単体で開いたときのための保険だけ置く */
  --brand: #1B2735;
  --accent: #1B2735;
  --accent-ink: #FFFFFF;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  padding-bottom: calc(58px + env(safe-area-inset-bottom));
}

a { color: inherit; text-decoration: none; }
.ta-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   ヘッダー（球団色。ここがブランドの主張）
   ============================================================ */
.ta-head {
  background: var(--brand);
  color: #FFFFFF;
  border-bottom: 3px solid var(--accent);
}
.ta-head-in {
  max-width: 820px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ta-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ta-brand-logo { display: block; width: 30px; height: 30px; object-fit: contain; }
.ta-brand-name { font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.ta-brand-sub { font-size: 13px; color: rgba(255,255,255,.72); }
.ta-nav { margin-left: auto; display: flex; gap: 18px; font-size: 16px; }
.ta-nav a { color: rgba(255,255,255,.8); padding: 4px 0; border-bottom: 2px solid transparent; }
.ta-nav a.on { color: #FFFFFF; border-bottom-color: var(--accent); font-weight: 700; }

/* ============================================================
   本文の器
   ============================================================ */
.ta-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px 0;
}

/* アプリの案内の帯（ヘッダーと球団色の帯の間・2026-09-16）。本サイトの .dlbar と同じ作り。
   アプリ内（.pt-in-app）と、× で閉じた人（.ta-dlbar-off・localStorage）には出さない */
.pt-in-app .ta-dlbar, .ta-dlbar-off .ta-dlbar { display: none; }
.ta-dlbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.ta-dlbar-in { max-width: 820px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 11px; }
.ta-dlbar-ico { flex: none; width: 34px; height: 34px; border-radius: 2px; display: block; }
.ta-dlbar-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ta-dlbar-title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.ta-dlbar-sub { font-size: 11px; color: var(--ink2); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-dlbar-badges { flex: none; display: flex; gap: 8px; align-items: center; }
.ta-dlbar-badges a { display: inline-flex; }
.ta-dlbar-badges img { height: 30px; width: auto; display: block; }
.ta-dlbar-cta { display: none; flex: none; padding: 7px 13px; border-radius: 2px; background: var(--ink); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.ta-dlbar-x { flex: none; background: none; border: 0; color: var(--ink2); font-size: 18px; line-height: 1; padding: 5px 2px; cursor: pointer; }
.ta-dlbar-x:hover { color: var(--ink); }
@media (max-width: 720px) {
  .ta-dlbar-badges { display: none; }
  .ta-dlbar-cta { display: inline-flex; align-items: center; }
  .ta-dlbar-sub { white-space: normal; }
}

/* 各ページの見出しは**ヘッダー直下・画面幅 100%** の球団色の帯（2026-09-16 ユーザー「ヘッダー下に100%横幅の帯」）。
   layout.php の taHead() が </header> の直後に出す（本文の中で左右に伸ばす作りだと、ヘッダーとの間に白い隙間が残り
   PC ではコンテンツ幅までしか伸びなかった）。**12球団ぶん作る前提**なので、文字色は球団色の明るさから自動で決める
   （--band-ink・`taOnColor()`）。team_meta の onMain をそのまま使うと、巨人のオレンジに白でコントラスト 2.74 になり読めない */
/* 帯の下辺に線は入れない（2026-09-16 に --brand の 3px を試したが、ユーザー「何か違う」で戻した） */
/* 地は全球団共通の薄いグレー（2026-09-16 ユーザー指定 #F5F6F8＝先頭の試合カードと同じ --panel）。球団色の帯から変更。
   文字は本文と同じ --ink。球団色の帯に戻すなら background: var(--accent); color: var(--band-ink);（--band-ink は layout.php が今も注入している） */
.ta-band { background: var(--panel); color: var(--ink); }
.ta-band-in { max-width: 820px; margin: 0 auto; padding: 12px 16px; }
.ta-h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
}

/* セクション。間隔はセクション内の4倍以上 */
.ta-sec { margin-top: 68px; }
.ta-sec-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 2px solid var(--line-strong);
  padding-bottom: 6px;
  margin-bottom: 18px;
}
.ta-sec-h h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
.ta-sec-note { font-size: 13px; color: var(--ink2); }
.ta-sec-more { margin-left: auto; font-size: 13px; color: var(--link); white-space: nowrap; }

.ta-sub-h {
  margin: 22px 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.ta-empty { color: var(--ink2); font-size: 13px; }
.ta-lead { margin: 18px 0 0; font-size: 16px; line-height: 1.9; }

/* ============================================================
   スコア（自軍が先）
   ============================================================ */
/* ------------------------------------------------------------
   先頭の試合はカードにする（2026-09-16 ユーザー「カード式がいいんじゃない？」）
   白地の本文から浮かせて、そのページの主役をはっきりさせる。地は薄いグレーだけで、
   **球団色は増やさない**（色の強さは「線と印だけ」というユーザー判断のまま）。
   ホームの先頭（.ta-gh）と試合ページの3つの顔（終了 .ta-hero / 試合中 .ta-now / 試合前 .ta-pre）で共通
   ------------------------------------------------------------ */
.ta-card, .ta-gh, .ta-hero, .ta-now, .ta-pre {
  padding: 18px 16px 16px;
  background: var(--panel);
  border-radius: 2px;
}
.ta-gh > :first-child, .ta-hero > :first-child, .ta-now > :first-child, .ta-pre > :first-child { margin-top: 0; }

.ta-hero { margin: 0 0 8px; }
.ta-hero-teams {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ta-hero-me, .ta-hero-opp { font-size: 18px; font-weight: 700; }
.ta-hero-me { color: var(--ink); }
.ta-hero-opp { color: var(--ink2); }
.ta-hero-score {
  font-size: clamp(48px, 15vw, 72px);
  font-weight: 800;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ta-hero-dash { margin: 0 6px; color: var(--ink3); font-weight: 400; }
.ta-hero-vs { font-size: 18px; color: var(--ink3); }
/* 勝敗はスコアの下に言葉を添えて出す（印だけを相手名の右に置くと相手に付いて見える・2026-09-16） */
/* スコアが左寄せなので結果も左端に揃える（中央に置いたら宙に浮いて見えた・2026-09-16 ユーザー指摘） */
.ta-hero-res { margin: 6px 0 0; font-size: 16px; font-weight: 700; }
.ta-hero-res.is-win { color: var(--up); }
.ta-hero-res.is-lose { color: var(--down); }
.ta-hero-meta { margin: 4px 0 0; font-size: 13px; color: var(--ink2); }
.ta-hero-live { margin: 8px 0 0; font-size: 16px; font-weight: 700; }
.ta-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--down); margin-right: 6px; vertical-align: middle;
}
.ta-src { font-size: 13px; font-weight: 400; color: var(--ink2); }
.ta-src a { color: var(--link); text-decoration: underline; }

.ta-pre-time { margin: 10px 0 0; font-size: 18px; font-weight: 700; }
.ta-prob { margin: 8px 0 0; font-size: 13px; color: var(--ink2); }
.ta-h2h-line { margin: 0; font-size: 16px; }

/* 直近の調子 */
.ta-form { margin: 14px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ta-form-marks { display: flex; gap: 3px; }
.ta-fm { font-size: 13px; font-weight: 700; color: var(--ink3); }
.ta-fm.is-win { color: var(--up); }
.ta-fm.is-lose { color: var(--down); }
.ta-form-text { font-size: 13px; color: var(--ink2); }

/* ============================================================
   試合の行
   ============================================================ */
.ta-grow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.ta-grow:first-child { border-top: 1px solid var(--line); }
.ta-grow-date { width: 72px; color: var(--ink2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ta-grow-ha {
  width: 20px; text-align: center; font-size: 11px; color: var(--ink2);
  border: 1px solid var(--line); line-height: 1.5;
}
.ta-grow-logo { display: block; width: 22px; height: 22px; object-fit: contain; }
.ta-grow-opp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-grow-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.ta-grow-dash { margin: 0 3px; color: var(--ink3); font-weight: 400; }
.ta-grow-res { width: 18px; text-align: center; font-weight: 700; color: var(--ink3); }
.ta-grow.is-win .ta-grow-res { color: var(--up); }
.ta-grow.is-lose .ta-grow-res { color: var(--down); }
.ta-grow-st { font-size: 13px; color: var(--ink2); }
.ta-grow-st.is-live { color: var(--down); font-weight: 700; }

/* ============================================================
   なぜ・空気
   ============================================================ */
.ta-why-head { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; }
.ta-why-body { margin: 8px 0 0; color: var(--ink); }
.ta-mood { margin: 0; }
.ta-senti {
  display: flex; height: 6px; margin: 10px 0 0; overflow: hidden;
}
.ta-senti-pos { background: var(--up); }
.ta-senti-neg { background: var(--down); opacity: .75; }

/* ============================================================
   ハイライト・選手チップ
   ============================================================ */
.ta-hls { list-style: none; margin: 0; padding: 0; }
.ta-hl { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ta-hl-time { color: var(--ink2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ta-hl-head { flex: 1; font-weight: 700; }

.ta-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ta-chip {
  display: inline-block; padding: 7px 12px; font-size: 13px;
  border: 1px solid var(--line); color: var(--ink);
}
.ta-chip:hover { border-color: var(--accent); }

/* ============================================================
   実況
   ============================================================ */
.ta-cmts { list-style: none; margin: 0; padding: 0; }
.ta-cmt { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ta-cmt-body { margin: 0; font-size: 16px; line-height: 1.75; }
.ta-cmt-meta { margin: 4px 0 0; font-size: 13px; color: var(--ink3); display: flex; gap: 10px; }
.ta-cmt-src { color: var(--ink3); text-decoration: underline; }

/* ============================================================
   話題ワード
   ============================================================ */
.ta-trends { list-style: none; margin: 0; padding: 0; }
.ta-trend {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.ta-trend-rank {
  width: 18px; text-align: center; color: var(--ink3);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.ta-trend-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.ta-trend-word { font-size: 16px; font-weight: 700; white-space: nowrap; }
.ta-badge-new {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--ink); color: #FFFFFF; padding: 1px 5px;
}
.ta-trend-sample {
  min-width: 0; display: flex; font-size: 13px; color: var(--ink2);
}
/* 閉じ括弧は別の flex アイテムにする。text-overflow は自分のボックスの末尾しか
   見ないので、こうしないと溢れたときに 」 が消える（本サイトで実測） */
.ta-trend-sample-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-trend-heat { display: flex; gap: 1px; flex: none; }
.ta-flame { color: var(--line); line-height: 0; }
.ta-flame.is-on { color: var(--heat); }

/* ============================================================
   表（順位）
   ============================================================ */
.ta-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ta-table th, .ta-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.ta-table th { font-size: 13px; color: var(--ink2); font-weight: 400; }
.ta-table td.ta-num, .ta-table th:not(:nth-child(2)) { text-align: right; }
.ta-table td.ta-num { font-variant-numeric: tabular-nums; }
.ta-table tr.is-me { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 700; }

/* ============================================================
   ニュース
   ============================================================ */

/* ============================================================
   広告（観戦1行 CTA）— 本文で唯一の「枠」
   ============================================================ */
.ta-watch {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 12px 14px;
  border: 1px solid var(--line);
}
.ta-watch-pr {
  font-size: 11px; color: var(--ink3); border: 1px solid var(--line);
  padding: 0 4px; line-height: 1.6; flex: none;
}
.ta-watch-txt { flex: 1; min-width: 0; font-size: 16px; }
.ta-watch-btn {
  flex: none; background: var(--cta); color: var(--cta-ink);
  font-size: 16px; font-weight: 700; padding: 9px 18px;
}

/* ============================================================
   フッター
   ============================================================ */
.ta-foot { margin-top: 72px; background: var(--brand); color: rgba(255,255,255,.85); }
.ta-foot-in { max-width: 820px; margin: 0 auto; padding: 26px 16px 30px; }
.ta-foot-nav, .ta-foot-legal { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; }
.ta-foot-nav { margin-bottom: 12px; }
.ta-foot-nav a { color: #FFFFFF; }
.ta-foot-legal a { color: rgba(255,255,255,.7); text-decoration: underline; }
/* ほかの球団の試合まとめ（2026-09-16）。アプリ内ではほかの球団のサイトへ移ってしまうので出さない */
.ta-foot-teams { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); font-size: 13px; }
.ta-foot-teams-h { width: 100%; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); }
.ta-foot-teams a { color: rgba(255,255,255,.9); }
.pt-in-app .ta-foot-teams { display: none; }
.ta-foot-note { margin: 16px 0 0; font-size: 11px; color: rgba(255,255,255,.55); }

/* ============================================================
   下部タブ（スマホの Web のみ）
   ============================================================ */
.ta-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none;
  background: #FFFFFF;
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.ta-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 6px; color: var(--ink3); font-size: 11px;
}
.ta-tab.is-on { color: var(--accent); }
.ta-tab-ico { line-height: 0; }

/* アプリ内 WebView ではネイティブのタブがあるので出さない。
   判定は UA ではなく .pt-in-app（本番のページキャッシュは UA を見ないため） */
.pt-in-app .ta-tabs { display: none !important; }
.pt-in-app body { padding-bottom: 0; }

@media (max-width: 720px) {
  .ta-nav { display: none; }
  .ta-tabs { display: flex; }
  .ta-main { padding-top: 20px; }
  .ta-sec { margin-top: 52px; }
  .ta-h1 { font-size: 22px; }
  .ta-brand-sub { display: none; }
}

@media (max-width: 420px) {
  .ta-grow-date { width: 64px; }
  .ta-watch-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   試合詳細
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ta-crumb { margin: 0 0 10px; font-size: 13px; }
.ta-crumb a { color: var(--link); }
.ta-note { margin: 12px 0 0; font-size: 13px; color: var(--ink3); line-height: 1.7; }
.ta-note a { color: var(--link); text-decoration: underline; }

/* イニング表（球場の電光掲示板。テーマで反転させない） */
.ta-sb-wrap { overflow-x: auto; }
.ta-sb {
  border-collapse: collapse; min-width: 100%;
  background: #1C2430; color: #EFF1F4;
  font-variant-numeric: tabular-nums;
}
.ta-sb th, .ta-sb td {
  padding: 8px 10px; text-align: center; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ta-sb thead th { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 400; }
.ta-sb tbody th { text-align: left; white-space: nowrap; font-weight: 700; }
.ta-sb .ta-sb-r { font-weight: 800; font-size: 16px; }
.ta-sb tr.is-me tbody th, .ta-sb tbody tr.is-me th { color: #F6C84C; }

.ta-pits { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.ta-pit { display: inline-flex; align-items: center; gap: 5px; }
.ta-pit-tag {
  font-size: 11px; padding: 1px 5px; color: #FFFFFF; line-height: 1.6;
  background: var(--ink3);
}
.ta-pit-tag.is-w { background: var(--up); }
.ta-pit-tag.is-l { background: var(--down); }

/* 実況のタブ */
.ta-vtabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ta-vtab {
  padding: 8px 2px; font-size: 13px; color: var(--ink2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ta-vtab.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
.ta-filter-note { margin: 10px 0 0; font-size: 13px; color: var(--ink2); }
.ta-filter-note a { color: var(--link); text-decoration: underline; }
.ta-chip.is-on { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* 盛り上がり */
.ta-heat { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.ta-heat-bar { flex: 1; height: var(--h, 3%); background: var(--accent); opacity: .75; min-height: 2px; }
.ta-heat-bar:hover { opacity: 1; }
.ta-heat-scale { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 11px; color: var(--ink3); }

/* 出場選手 */
.ta-lineup { list-style: none; margin: 0; padding: 0; }
.ta-lineup-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.ta-lineup-no { width: 20px; text-align: center; color: var(--ink3); font-size: 13px; }
.ta-lineup-pos { width: 26px; color: var(--ink2); font-size: 13px; }
.ta-lineup-name { flex: 1; }
a.ta-lineup-name { color: var(--link); }

/* 投稿フォーム — 本文でない要素なので枠線を持ってよい */
.ta-uform { margin: 26px 0 0; padding: 16px; border: 1px solid var(--line); }
.ta-uform .ta-sub-h { margin-top: 0; }
.ta-uform-row { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; }
.ta-uform-nick { padding: 8px 10px; border: 1px solid var(--line); font-size: 16px; width: 240px; max-width: 100%; }
.ta-uform-text { width: 100%; padding: 10px; border: 1px solid var(--line); font-size: 16px; font-family: inherit; }
.ta-uform-rules { margin: 10px 0; font-size: 13px; color: var(--ink3); line-height: 1.7; }
.ta-uform-submit {
  margin-left: auto; padding: 9px 22px; font-size: 16px; font-weight: 700;
  background: var(--ink); color: #FFFFFF; border: 0; cursor: pointer;
}
.ta-flash { margin: 16px 0 0; padding: 10px 12px; font-size: 16px; }
.ta-flash.is-ok { background: #E8F3EC; color: var(--up); }
.ta-flash.is-ng { background: #FBEBEC; color: var(--down); }

/* ============================================================
   日程・選手の一覧
   ============================================================ */
.ta-season { margin: 0 0 4px; font-size: 16px; }
.ta-season strong { font-size: 18px; }
.ta-season-pct { margin-left: 10px; font-size: 13px; color: var(--ink2); }
.ta-monthnav { display: flex; justify-content: space-between; margin-top: 20px; font-size: 13px; }
.ta-monthnav a { color: var(--link); }

.ta-sorts { display: flex; gap: 16px; margin: 14px 0 0; font-size: 13px; }
.ta-sorts a { color: var(--ink2); padding-bottom: 3px; border-bottom: 2px solid transparent; }
.ta-sorts a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

.ta-players { list-style: none; margin: 0; padding: 0; }
.ta-player { border-bottom: 1px solid var(--line); }
.ta-player a { display: flex; align-items: center; gap: 12px; padding: 12px 2px; }
.ta-player-pos { width: 26px; text-align: center; font-size: 13px; color: var(--ink2); }
.ta-player-name { flex: 1; font-size: 16px; font-weight: 700; }
.ta-player-meta { font-size: 13px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.ta-player-heat { display: flex; gap: 1px; width: 42px; justify-content: flex-end; }
.ta-player-line { margin: 6px 0 0; font-size: 13px; color: var(--ink2); }
.ta-h1-sub { margin-left: 10px; font-size: 13px; font-weight: 400; color: inherit; opacity: .78; }

@media (max-width: 560px) {
  .ta-uform { padding: 14px 12px; }
  .ta-uform-submit { margin-left: 0; width: 100%; }
  .ta-vtabs { gap: 14px; }
}

/* ============================================================
   試合タブの絞り込み・対戦カード（/vs/{slug}・2026-09-14）
   ============================================================ */
/* 7個（すべて＋同リーグ5＋交流戦）を折り返すとスマホで2段になり本編が押し下がる
   （本サイトの .news-filter と同じ教訓）。常に1行・横スクロールにする */
.ta-filter {
  display: flex; gap: 8px; margin: 0 0 18px;
  overflow-x: auto; white-space: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ta-filter::-webkit-scrollbar { display: none; }
.ta-filter .ta-chip { flex: none; }

.ta-vs-recent { margin-left: 10px; font-size: 13px; color: var(--ink2); letter-spacing: 1px; }
.ta-vs-pp { margin: 8px 0 0; font-size: 13px; color: var(--ink2); }

/* 試合行を囲むと .ta-grow:first-child の上線が全行に効いて線が二重になる。線は囲みの側で引く */
.ta-vs-row { border-bottom: 1px solid var(--line); }
.ta-sec-h + .ta-vs-row { border-top: 1px solid var(--line); }
.ta-vs-row .ta-grow { border-top: 0; border-bottom: 0; }
/* 一言は相手名の列に揃える（日付 72px ＋ 間 10px） */
.ta-vs-one { margin: -6px 0 0; padding: 0 2px 12px 84px; font-size: 13px; line-height: 1.6; color: var(--ink2); }

.ta-vs-past { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 16px; }
.ta-sec-h + .ta-vs-past { border-top: 1px solid var(--line); }
.ta-vs-past-y { width: 72px; font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
  .ta-vs-one { padding-left: 2px; }
}

/* ============================================================
   試合 /game/{id}（終わった試合・試合中・試合前・2026-09-14）
   ============================================================ */
.ta-standing { margin: 8px 0 0; font-size: 16px; }

.ta-rec-meta { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink2); }
.ta-rec-meta b { color: var(--ink); font-weight: 700; }
.ta-lineups { margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ta-lineups > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 16px; list-style: none; }
.ta-lineups > summary::-webkit-details-marker { display: none; }
.ta-lineups > summary::after { content: "›"; color: var(--ink3); font-size: 18px; transition: transform .15s; }
.ta-lineups[open] > summary::after { transform: rotate(90deg); }
.ta-lineups-body { padding-bottom: 14px; }

/* ダイジェスト（旧「試合の流れ」・2026-09-16 改称）。並び順は属性だけで入れ替える（DOM を組み替えない） */
.ta-order { display: flex; gap: 16px; margin: -4px 0 6px; }
.ta-order-b {
  min-height: 40px; padding: 0; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--ink2); font: inherit; font-size: 13px; cursor: pointer;
}
.ta-order-b.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
.ta-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ta-flow[data-order="new"] { flex-direction: column-reverse; }
.ta-mo { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.ta-mo-h { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ta-mo-time { width: 44px; flex: none; }
.ta-mo-head { margin: 4px 0 0; padding-left: 54px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.ta-mo-fact { margin: 6px 0 0; padding-left: 54px; font-size: 13px; color: var(--ink2); }
.ta-mo-v { margin: 6px 0 0; padding-left: 54px; font-size: 16px; line-height: 1.7; }
.ta-mo-v.is-flat { padding-left: 0; }
.ta-mo-after { margin: 10px 0 0; padding-left: 54px; font-size: 13px; color: var(--ink3); letter-spacing: 1px; }

/* 試合中の上3行。仕事中にこっそり見る人が主役なので、赤い帯・球団色の面・動きを出さない */
.ta-now { }   /* 区切りの下線はカードになったので不要 */
.ta-now-l1 { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ta-now-inn { font-size: 16px; }
.ta-now-l2 { margin: 6px 0 0; font-size: 16px; line-height: 1.6; }
.ta-now-l3 { margin: 6px 0 0; font-size: 13px; color: var(--ink2); }
.ta-now-l3 a { color: var(--ink2); }

/* 試合前 */
.ta-pre { }
.ta-pre-l1 { margin: 6px 0 0; font-size: 18px; font-weight: 700; }
.ta-pre-l2 { margin: 8px 0 0; font-size: 16px; line-height: 1.6; }
.ta-pre-l2 a { color: var(--link); }
.ta-pre-note { margin-top: 56px; }

.ta-src-note { margin: 56px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink2); }
.ta-src-note a { margin-left: 8px; color: var(--link); }

@media (max-width: 420px) {
  .ta-mo-head, .ta-mo-fact, .ta-mo-v, .ta-mo-after { padding-left: 0; }
}

/* ============================================================
   ホーム（4ブロック）とトピックス・2026-09-14
   ============================================================ */
/* 試合の2枚だけは入口のカード（ワイヤーの形）。本文ではなくタップ先を選ぶ面なので枠を付ける */


/* ============================================================
   ニュース /news（日付ごと・見出しの下に選手チップ・2026-09-14）
   ============================================================ */
.ta-nday { margin-top: 36px; }
.ta-nday:first-of-type { margin-top: 12px; }
.ta-nday-h { margin: 0; padding-bottom: 6px; font-size: 13px; font-weight: 400; color: var(--ink2); border-bottom: 2px solid var(--line-strong); }
/* 見出し全体が記事へのリンクなので、選手のリンクは入れ子にせず下に並べる */

/* ------------------------------------------------------------
 * ニュース（写真・印つき。ホームと /news で共通・taNewsItem）
 * 2026-09-15: トピックスをニュースに合体し、記事の写真を出す（ユーザー判断。テキストサイトのように寂しかった）
 * - 写真の無い記事も同じ大きさの枠（球団ロゴを薄く）にして、見出しの左端と行の高さを揃える
 * - 印は球団色のベタ（ta.css は球団色をブランドにしてよい）。勝敗の赤緑・熱量の橙は使わない
 * ------------------------------------------------------------ */
.ta-nws { list-style: none; margin: 0; padding: 0; }
.ta-nw { border-bottom: 1px solid var(--line); }
.ta-nw-a { display: flex; gap: 12px; padding: 12px 0; color: var(--ink); text-decoration: none; }
.ta-nw-img { flex: none; display: flex; align-items: center; justify-content: center; width: 104px; height: 70px; overflow: hidden; border-radius: 2px; background: #F1F3F5; }
.ta-nw-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ta-nw-img.is-empty img { width: 34px; height: 34px; object-fit: contain; opacity: .45; }
.ta-nw-body { flex: 1; min-width: 0; }
.ta-nw-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 16px; line-height: 1.55; }
.ta-nw-a:hover .ta-nw-t { text-decoration: underline; }
.ta-nw-kind { display: inline-block; margin-right: 6px; padding: 0 6px; font-size: 11px; font-weight: 700; line-height: 20px; vertical-align: 1px; color: var(--accent-ink); background: var(--accent); border-radius: 2px; }
.ta-nw-m { display: block; margin-top: 4px; font-size: 13px; color: var(--ink3); }
.ta-nw-p { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px 116px; }
.ta-nw-p .ta-chip { padding: 3px 10px; font-size: 13px; }

/* ------------------------------------------------------------
 * いま話題の選手（ホーム・TeamPlayerService::trending・2026-09-15）
 * 名前と炎の下に「なぜ話題か」の1行。引用は閉じ括弧を別の要素にして、溢れても 」 が消えないようにする（本サイトのトレンドと同じ）
 * ------------------------------------------------------------ */
/* 試合中の「最新のコメント」（2026-09-16）。ダイジェストの引用と同じ字面にして、左の時刻だけ幅を固定する */
.ta-lc { list-style: none; margin: 0; padding: 0; }
.ta-lc-i { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.7; }
.ta-lc-t { flex: none; width: 60px; font-size: 13px; color: var(--ink2); }
.ta-lc-x { flex: 1; min-width: 0; }
.ta-hot { list-style: none; margin: 0; padding: 0; }
.ta-hot-i { border-bottom: 1px solid var(--line); }
.ta-hot-a { display: block; padding: 12px 2px; color: var(--ink); text-decoration: none; }
.ta-hot-row { display: flex; align-items: center; gap: 12px; }
.ta-hot-name { flex: 1; font-size: 16px; font-weight: 700; }
/* 最後に名前が出た実況の「◯分前」。炎の左（本サイトのトレンドと同じ 経過時間 → 炎 の並び） */
.ta-hot-ago { font-size: 13px; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ta-hot-a:hover .ta-hot-name { text-decoration: underline; }
/* 行頭は順位（幅を固定して名前の左端を揃える・本サイトのトレンドと同じ作法）。理由の1行は名前の左端に揃える */
.ta-hot-rank { flex: none; width: 20px; text-align: center; font-size: 18px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.ta-hot-why { display: flex; align-items: center; gap: 5px; margin: 4px 0 0 32px; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.ta-hot-why .ta-ico-q { margin-top: 0; }
.ta-hot-q { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ------------------------------------------------------------
 * 名簿（選手タブ /players・2026-09-15）と「いま話題の選手」の専用ページ（/trend）
 * 名簿は名前を詰めて並べる（順位・炎は出さない）。内野・外野・代打代走は守備の一字を添える
 * ------------------------------------------------------------ */
.ta-roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.ta-roster-a { display: flex; align-items: baseline; gap: 6px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ta-roster-a:hover .ta-roster-name { text-decoration: underline; }
.ta-roster-pos { flex: none; width: 14px; font-size: 13px; color: var(--ink3); }
.ta-roster-name { font-size: 16px; font-weight: 700; }

/* ------------------------------------------------------------
 * ホーム先頭の試合（taGameHero / taGameHeroLive / taGameLine・2026-09-15 作り直し）
 * 箱にせず、ロゴと大きなスコアと「何が起きたか」の1行で見せる。結果の色は勝ち＝--up／負け＝--down（色に意味を持たせる）。
 * 試合中は赤や球団色の面を出さない（仕事中にこっそり見る人が主役）
 * ------------------------------------------------------------ */
.ta-gh { display: block; color: var(--ink); text-decoration: none; }
.ta-gh-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.ta-gh-meta { font-weight: 400; color: var(--ink3); }
.ta-gh-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 14px; }
/* 球団名はロゴの下に置く（2026-09-16 本番）。横に並べると 2桁のスコア「2 - 13」でスコアが幅を取り、
   名前が「巨…」「D…」に潰れた。縦積みなら列が名前の幅まで広がるので、長い短縮名でも省略されない */
.ta-gh-team { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.ta-gh-team.is-opp { flex-direction: column-reverse; justify-content: flex-end; }
.ta-gh-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: #FFFFFF; }
.ta-gh-logo img { width: 34px; height: 34px; object-fit: contain; }
.ta-gh-name { max-width: 100%; overflow: hidden; font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ta-gh-score { font-size: clamp(48px, 15vw, 72px); font-weight: 800; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ta-gh-score.is-vs { font-size: 28px; font-weight: 700; color: var(--ink3); }
.ta-gh-dash { margin: 0 6px; font-weight: 400; color: var(--ink3); }
/* カードの中は**上から下まで中央**（2026-09-16 ユーザー判断）。いったん「スコアだけ中央・あとは左」に
   したが、揃っていないほうが気になるとのことで中央に戻した。長い1行は折り返すと行頭がガタつくが、
   それより縦の軸が1本通っていることを取る。※試合ページのヒーローは左寄せのままなので、そちらとは揃わない */
.ta-gh-res { display: block; margin-top: 12px; text-align: center; font-size: 16px; font-weight: 700; }
.ta-gh.is-win .ta-gh-res { color: var(--up); }
.ta-gh.is-lose .ta-gh-res { color: var(--down); }
.ta-gh-res.is-quiet { font-weight: 400; color: var(--ink2); }
.ta-gh-story { display: block; margin-top: 16px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.55; }
/* 上の1行（何が起きたか）は見出し、こちらはファンの言葉。字の大きさと色だけでは読み分けられなかったので
   吹き出しを付ける（2026-09-16 ユーザー指摘）。見出しとの間も少し広げて、別の種類の行だと分かるようにする */
.ta-gh-voice { display: flex; justify-content: center; align-items: flex-start; gap: 6px; margin-top: 10px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--ink2); }
.ta-ico-q { flex: none; margin-top: 3px; color: var(--ink3); }
.ta-gh-foot { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.ta-gh-src { font-size: 11px; color: var(--ink3); }
.ta-gh-cta { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--link); white-space: nowrap; }
.ta-gh:hover .ta-gh-cta { text-decoration: underline; }
.ta-gline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 16px; }
.ta-gline-k { font-size: 13px; color: var(--ink2); }
.ta-gline-t { font-weight: 700; font-variant-numeric: tabular-nums; }
.ta-gline-s { color: var(--ink2); }
.ta-gline-arrow { margin-left: auto; color: var(--ink3); }

/* ============================================================
   選手ページ（npb.jp のプロフィールと成績・2026-09-16）
   ============================================================ */
.ta-pid { margin: 0 0 4px; font-size: 13px; color: var(--ink2); }
.ta-plead { margin-top: 10px; }
/* 今季の成績の大きな3つ（打率・本塁打・打点／防御率・勝敗・奪三振）。先頭の試合カードと同じ地 */
.ta-statbig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 16px 12px; background: var(--panel); border-radius: 2px; }
.ta-statbig > div { text-align: center; min-width: 0; }
.ta-statbig dt { font-size: 13px; color: var(--ink2); }
.ta-statbig dd { margin: 2px 0 0; font-size: 28px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ta-statline { margin: 12px 0 0; font-size: 13px; line-height: 1.9; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ta-prof { margin: 0; }
.ta-prof > div { display: flex; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.ta-prof dt { flex: none; width: 84px; font-size: 13px; color: var(--ink2); }
.ta-prof dd { margin: 0; min-width: 0; font-size: 16px; }
/* 名前のすぐ下の基本情報。帯の直後なので上の余白を少しだけとり、冒頭の文章とは線で区切らない */
.ta-prof-top { margin: 4px 0 0; }
.ta-prof-top > div { padding: 8px 2px; }
/* 年度別成績はスマホで列が収まらないので、表だけ横にスクロールさせる（ページは横にはみ出さない） */
.ta-yearly-wrap { overflow-x: auto; }
.ta-yearly { min-width: 480px; white-space: nowrap; }
.ta-yearly th:nth-child(-n+2), .ta-yearly td:nth-child(-n+2) { text-align: left; }
.ta-yearly tr.is-total td { font-weight: 700; border-top: 2px solid var(--line-strong); }