/* precure-datastars site styles 方針: - クレジット部分は Catalog 側 CreditPreviewRenderer の CSS をそのまま流用する （fallback-table / fallback-vc-table / .card / .tier / .group / .rol */

:root {
  /* 明るい配色だけのサイト。端末がダークモードでも、フォーム部品やスクロールバーを含めて明るい配色で描かせる
     （ブラウザによる自動の色反転を防ぐ。「only」を付けないと止まらない。<meta name="color-scheme"> と同じ指定）。 */
  color-scheme: only light;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #666666;
  --border: #d0d0d0;
  --accent: #d81b60;
  --hl: #fff7d6;
  --table-stripe: #f7f7f8;
  --container-w: 960px;
  /* 数字を縦に揃えたい箇所（フォーマット表・パート尺統計・ページネーションなど）専用のフォント。 */
  --font-num: "JetBrains Mono", "Consolas", "Menlo", "Roboto Mono", monospace;
  /* monospace が必要な場面（M 番号などのインライン）専用フォント変数。 */
  --font-mono: "JetBrains Mono", "Consolas", "Menlo", "Roboto Mono", monospace;

  /* サイト全体の本文・見出しのベース書体（可読性の高いやわらかな日本語ゴシック）。 */
  --font-base: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, -apple-system, sans-serif;
  /* ブランド表記（ヘッダ・フッタのサイト名、ホーム大見出し・タグライン）専用の据え置き書体。 */
  --font-brand: "Kiwi Maru", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, -apple-system, sans-serif;
  /* アクセント書体・装飾系。索引ページのリード文・404 見出しなど「ここぞ」の数箇所に効かせる。 */
  --font-accent-deco: "Kaisei Decol", "Hiragino Mincho ProN", serif;
  /* アクセント書体・ドット/デジタル系。ビルド情報スタンプ・大きな尺数値など「ここぞ」の数箇所に効かせる。 */
  --font-accent-dot: "DotGothic16", "Courier New", monospace;

  /* プリキュア風カラフルアクセント変数 メインカラー（pink）はそのまま --accent。
     pink と blue は白地の文字色として WCAG の 4.5:1 を満たす濃さ（pink 4.9:1、blue 5.2:1）。 */
  --accent-pink:   #d81b60;
  --accent-blue:   #3370aa;
  --accent-yellow: #d4a017;
  --accent-green:  #4ca36b;
  --accent-purple: #7e57c2;
  /* 絵コンテ（STORYBOARD）役職バッジ用に teal を追加。 */
  --accent-teal:   #2ea7ad;

  /* テーブル見出し背景（既存のいくつかの table で使う）。淡い灰色でストライプ系と馴染ませる。 */
  --th-bg: #f3f3f5;
}

html, body {
  margin: 0;
  padding: 0;
  /* サイト全体の本文・見出しは Noto Sans JP をベースにする（可読性の高い日本語ゴシック）。 */
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
}

* { box-sizing: border-box; }

/* リンク色は本文色と同じ var(--fg) に統一する。 */
a { color: var(--fg); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 16px;
}

/* ──────────────────── ヘッダ／フッタ ──────────────────── */
.site-header {
  /* PC では検索ボックスへの常時アクセスを 確保するため sticky 固定。 */
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
  padding: 12px 0;
  margin-bottom: 24px;
}
/* ヘッダ最上端のアクセントライン。プリキュアのチームカラー風パステル 5 色
   （ピンク→イエロー→グリーン→ブルー→パープル、フォーマット帯グラフと同系のパレット）の
   グラデーション細帯で、白基調ヘッダにかわいい世界観をひと刷毛だけ乗せる。 */
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f6b3cf, #f1e092, #a4dcc4, #aacdf2, #c9b8ec);
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.site-title {
  font-weight: 700;
  font-size: 1.2em;
  color: var(--fg);
  /* ヘッダのサイト名ワードマークはブランド書体（Kiwi Maru）を据え置く。 */
  font-family: var(--font-brand);
  /* 肩書き（日本語）と固有名詞（英字）の 2 span 構成。ベースラインを揃えて 1 つのワードマークとして読ませる。 */
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  white-space: nowrap;
}
/* ワードマークの肩書き（「プリキュアデータベース」）。固有名詞より一段小さく淡くし、視線が名前に落ちるようにする。 */
.site-title-ja {
  font-size: 0.72em;
  font-weight: 400;
  color: var(--muted);
}
/* ワードマークの固有名詞（「precure-datastars」）。サイト名の主役。 */
.site-title-en {
  font-weight: 700;
  color: var(--fg);
}
.site-nav a {
  margin-left: 16px;
  color: var(--muted);
  /* ホバー時にプリキュアピンクのアクセント。ナビ全体に活気が出る。 */
  transition: color 0.12s ease;
}
/* 2 行ヘッダ構造ではナビが独立した行（.site-header-bottom）に置かれるため、
   先頭リンクの左マージンはコンテナ左端から不要な余白を作る。リセットして
   container の左端と揃える。 */
.site-nav a:first-child {
  margin-left: 0;
}
.site-nav a:hover {
  color: var(--accent-pink);
  text-decoration: none;
}
/* 現在地ハイライト。PageRenderer が URL パスから所属セクションを解決して is-active を立てる。 */
.site-nav a.is-active {
  color: var(--accent-pink);
  font-weight: 600;
  border-bottom: 2px solid var(--accent-pink);
  padding-bottom: 2px;
}
/* モバイルオーバーレイ側の現在地ハイライト。 */
.mobile-nav-overlay-list a.is-active {
  color: var(--accent-pink);
  font-weight: 600;
}

/* ページフッター（連絡先・著作権・免責） HTML 側で `<footer id="pageFooter">` を出し、お問い合わせ（X / メール）と Copyright + 免責事項を縦に並べる。 */
.site-footer {
  margin-top: 64px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  font-size: 0.85em;
  color: var(--muted);
}
.footer-note { font-size: 0.9em; }

/* ページフッター。全幅の淡ピンク帯（シェアカードと同じ世界観）に、コンテナ幅の中身
   （.footer-inner）を載せる。構成は「サイト名 + 連絡先｜運営情報ナビ」の 2 カラム →
   法的注記 3 段落 → © の 3 段。 */
#pageFooter {
  margin-top: 64px;
  border-top: 1px solid #fce7f3;
  background: linear-gradient(180deg, #fff7fb 0%, #ffffff 100%);
  font-size: 0.9em;
  color: var(--muted);
}
.footer-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 28px 16px 30px;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px 40px;
}
.footer-site-name {
  margin: 0 0 8px;
  font-size: 1.1em;
  font-weight: 700;
  /* フッタのサイト名ワードマークはヘッダと揃えてブランド書体（Kiwi Maru）を据え置く。 */
  font-family: var(--font-brand);
}
.footer-site-name a {
  color: var(--fg);
  text-decoration: none;
}
.footer-site-name a:hover { color: var(--accent-pink); }
.footer-contact {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  /* フッタの連絡先もサイト名ワードマークと揃えてブランド書体（Kiwi Maru）を据え置く。 */
  font-family: var(--font-brand);
}
.footer-contact a { color: var(--fg); }
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footer-nav a {
  color: #be185d;
  text-decoration: none;
  width: fit-content;
}
.footer-nav a:hover { text-decoration: underline; }

/* サブタイトル解禁トグル（iOS 風の横長スイッチ）。未放送話（前話の予告が未放送）の
   サブタイトルを表示するか隠すかを閲覧者がいつでも切り替えられる常設スイッチ。
   フッタの運営情報リンク列に他の常設リンクと並べて置く。状態の読み書きは subtitle-embargo.js。
   ネイティブ checkbox を視覚的に隠し、track/thumb の 2 要素で見た目を組み立てる定番構成。 */
.subtitle-embargo-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 2px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.92em;
}
.subtitle-embargo-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.subtitle-embargo-switch-track {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 38px;
  height: 22px;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.subtitle-embargo-switch-track:has(.subtitle-embargo-switch-input:checked) {
  background: var(--accent-pink);
}
.subtitle-embargo-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.subtitle-embargo-switch-input:checked ~ .subtitle-embargo-switch-thumb {
  transform: translateX(16px);
}
.subtitle-embargo-switch-input:focus-visible ~ .subtitle-embargo-switch-thumb {
  outline: 2px solid var(--accent-pink);
  outline-offset: 2px;
}

/* フッタの姉妹サイト列（「姉妹サイト」見出し + いえるかなクイズへの外部リンク）。
   footer-nav と同じ縦並び・同じリンク色で、footer-grid の 3 列目として並ぶ。 */
.footer-sister {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* フッタの姉妹サイトは小さなバナー画像（クリックでクイズへ別タブ）。見出しは付けず、しれっと置く。
   角丸クリップ＋淡い境界線でホーム上部カードの縮小版として見せる。 */
.footer-sister-link {
  display: inline-block;
  width: fit-content;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #f4c6dd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.footer-sister-link:hover,
.footer-sister-link:focus-visible {
  border-color: var(--accent-pink);
  box-shadow: 0 2px 8px rgba(233, 30, 99, 0.16);
  transform: translateY(-1px);
}
.footer-sister-banner {
  display: block;
  width: 200px;
  height: auto;
}
.footer-legal {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed #f4c6dd;
}
.footer-legal p {
  margin: 4px 0;
  font-size: 0.86em;
  line-height: 1.7;
}
.footer-copyright {
  margin: 16px 0 0;
  font-weight: 600;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

/* ──────────────────── パンくず ──────────────────── */
.breadcrumbs ol {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 0.9em;
  color: var(--muted);
}
.breadcrumbs li { display: inline; }
.breadcrumbs li + li::before {
  content: " › ";
  color: var(--border);
  margin: 0 4px;
}

/* ──────────────────── 見出し・本文 ──────────────────── */
/* 見出し。 */
h1 {
  font-size: 1.65em;
  margin-top: 0;
  /* 1 文字分の太いピンク下線。タイトル行を引き締める。 */
  border-bottom: 3px solid var(--accent-pink);
  padding-bottom: 6px;
}
h2 {
  font-size: 1.25em;
  margin-top: 32px;
  border-bottom: 1px solid var(--border);
  padding: 0 0 4px 10px;
  /* 左に 4px のパープル縦帯。見出し階層が紙面でリズミカルに見える。 */
  border-left: 4px solid var(--accent-purple);
}
h3 {
  font-size: 1.05em;
  margin-top: 24px;
  padding-left: 12px;
  position: relative;
}
h3::before {
  /* 小さなブルーのマーカー。控えめに、しかし淡白すぎないよう色を効かせる。 */
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-blue);
}

/* 各索引・ランディングページの導入リード文。書体は本文と同じで、
   一回り大きい字と薄い色でだけ本文と区別する（見出し直下に置く同じ役割の文が、
   ページによって別の書体で出ないようにする）。ホーム hero のタグラインだけは
   下の .hero.hero-gradient .lead でブランド書体に上書きする。 */
.lead { font-size: 1.05em; color: var(--muted); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
th, td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
th { background: var(--table-stripe); font-weight: 600; }
table.numeric td.num,
table.numeric th.num {
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
table tr:nth-child(even) td { background: #fcfcfc; }

/* ──────────────────── ホーム／シリーズ一覧：シリーズ表 ──────────────────── */
/* TV シリーズと配下の映画・短編・春映画を「タイトル / 期間 / 全話数」の 3 列で揃え、 行間ガタつきを抑える。 */
.series-tv-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  counter-reset: tv-no;
}
.series-tv-table colgroup .col-no { width: 3em; }
.series-tv-table colgroup .col-title { width: auto; }
.series-tv-table colgroup .col-period { width: 22em; }
.series-tv-table colgroup .col-episodes { width: 7em; }
.series-tv-table td {
  border: none;
  padding: 4px 12px 4px 0;
  vertical-align: baseline;
  background: transparent;
  line-height: 1.5;
}
.series-tv-table tr:nth-child(even) td {
  background: transparent;
}
.series-tv-table tr.tv-row {
  /* 親 TV 行は次の子行と切り離さないので border は子側で出す */
}
.series-tv-table tr.tv-row td {
  padding-top: 8px;
}
.series-tv-table tr.tv-row td.col-title {
  font-weight: 600;
  font-size: 1.02em;
}
.series-tv-table tr.tv-row td.col-no::before {
  /* TV 行だけに連番を打つ */
  counter-increment: tv-no;
  content: counter(tv-no, decimal-leading-zero) ".";
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 600;
}
.series-tv-table tr.child-row td.col-title-child {
  /* 子作品（映画・短編・春映画）は左に余白を入れて字下げ */
  padding-left: 1.6em;
  font-size: 0.95em;
}
.series-tv-table tr.spinoff-row td.col-title,
.series-tv-table tr.orphan-row td.col-title {
  font-size: 0.95em;
}
.series-tv-table .col-period {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  white-space: nowrap;
}
.series-tv-table .col-episodes {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  white-space: nowrap;
  text-align: right;
}
/* 「（見込）」付与時に列がガタつかないための整列規約。 */
.series-tv-table td.col-period .series-col-val,
.series-tv-table td.col-episodes .series-col-val {
  position: relative;
}
/* 「（見込）」を本体の右辺に絶対配置で添える（本体幅に不算入＝整列に影響しない）。改行は禁止（.estimate-note 側で nowrap 済み）。 */
.series-tv-table td.col-period .series-col-val .estimate-note,
.series-tv-table td.col-episodes .series-col-val .estimate-note {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: 1px;
}

/* /series/ シリーズ索引はカード型リスト（.series-card-list）へ移行済み。
   .series-tv-table 系の現行用途は、シリーズ詳細ページなど別文脈での再利用となる。 */

/* /series/ シリーズ索引：カード型リスト。1 シリーズ = 1 カード。連番は CSS counter、
   TV はサブ行（プリキュア・スタッフ バッジ）、映画は親カードに子作品 (MOVIE_SHORT) の小リスト。 */
.series-card-list {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  /* セクションごとに番号がリセットされるよう、各リスト先頭で counter-reset。 */
  counter-reset: series-card-no;
}
/* <li> 直接子のリストマーカー（・）を確実に消す。
   親 ul の list-style: none だけでは UA や別経路の宣言で disc が復活するケースがあるため、
   <li> 自身に display: block を当ててリストアイテム文脈を抜ける（::marker も同時に消える）。 */
.series-card-list > li {
  display: block;
  list-style: none;
}
.series-card {
  position: relative;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--bg, #fff);
  transition: border-color 150ms ease, background-color 150ms ease;
  min-width: 0;
  overflow: hidden;
}
.series-card:hover,
.series-card:focus-within {
  border-color: var(--accent-pink, #ec4899);
  background-color: var(--surface-2, #fff7fb);
}

/* カードヘッダ：タイトル（連番付き）+ メタ行（期間・件数・バッジ）。
   メタ行はバッジや「（見込）」を含み得るので flex-wrap で素直に折り返せるようにする。 */
.series-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.series-card-title {
  /* h3 のグローバル装飾（青丸＋左余白）をカード見出しでは打ち消し、タイトルだけ accent-pink で出す。 */
  margin: 0;
  padding-left: 0;
  font-size: 1.06em;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent-pink, var(--fg));
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  /* グローバル h3 の position: relative を打ち消す。
     positioned のままだと、同じカード内の絶対配置オーバーレイ
     .bgms-card-link（z-index: 0）と同レベルでツリー後勝ちにより
     h3 が上に被さり、タイトル文字部分のクリックが
     カード遷移リンクに届かなくなる。 */
  position: static;
}
.series-card-title::before {
  /* グローバルの h3::before（左に絶対配置される青丸マーカー）を打ち消す。
     content を none にすると擬似要素自体が生成されない。 */
  content: none;
}
/* 連番バッジ：アクセントピンクの円に白抜きの 2 桁ゼロ埋め数字。
   ::before で counter 値を描画。数字フォントは var(--font-num) + tabular-nums で幅固定。 */
.series-card-no {
  /* 円形バッジ本体。inline-flex で文字を中央揃え。サイズはタイトル文字に対する em 換算で
     視覚的バランスを取り、line-height を 1 に落として円が縦に間延びしないようにする。
     vertical-align: middle で見出し文字の中心ライン（x-height 付近）に揃え、
     上下のはみ出しが見出し行高の中に収まるようにする。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  margin-right: 0.4em;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--accent-pink, #ec4899);
  color: #fff;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.7em;
  line-height: 1;
}
.series-card-no::before {
  counter-increment: series-card-no;
  content: counter(series-card-no, decimal-leading-zero);
}

/* メタ行：期間・件数・映画シーズンバッジ・「（見込）」を 1 行に並べる flex。
   件数は margin-left:auto で右寄せ。長い場合は wrap で次行折り返し。 */
.series-card-meta {
  display: flex;
  flex-wrap: wrap;
  /* 期間（本文の書体）と件数（数字の等幅書体）で字の高さが違うので、上端ではなくベースラインでそろえる */
  align-items: baseline;
  gap: 4px 12px;
  font-size: 0.88em;
}
/* 件数（全 N 話 / 尺）。期間に min-width を与えて件数の開始 x 位置を揃える。
   本体と「（見込）」注記を縦積みし、注記は本体文字幅に対してセンタリング。 */
.series-card-period {
  /* 放送期間／公開日の「枠」。デスクトップで件数の開始位置を揃えるため最小幅を確保。
     min-width: 17em は「2025年12月10日 〜 2026年1月25日」（最長想定）が 1 行に収まる目安。
     本体テキストはこの枠の左端から始まる（枠の右側は件数の押し出し用余白）。 */
  min-width: 17em;
}
/* /series/ の並べ方のタブ。区分の ON/OFF ボタンは年度順のときだけ出す。 */
.series-index-root .series-kind-toggles {
  display: none;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 6px 0 14px;
  font-size: 0.9em;
  /* トグルスイッチ（.rtl-switch）のオンの色。年表の外で使うので色をここで決める。 */
  --rtl-tv: #3b82c4;
}
.series-index-root[data-active-tab="year"] .series-kind-toggles {
  display: flex;
}
/* 映画のカードの略記のプリキュア：出身の作品ごとに 1 行にまとめ、作品の切れ目でだけ改行する（スマホでは行の中でも折り返す）。 */
.precure-badge-line {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px 6px;
}
/* 略記のプリキュアはスタッフの行くらいの字にする（今までどおりの表記のバッジより一回り小さく）。 */
.precure-badge-line .precure-badge {
  font-size: 0.72em;
  padding: 0 6px;
}
@media (max-width: 640px) {
  .precure-badge-line {
    flex-wrap: wrap;
  }
}
/* 併映の行のプリキュアとスタッフ：題の下に、少し字下げして、親の映画と同じ組み方で出す
   （字の大きさも親と同じにするため、併映の小リストの 0.88em を打ち消す）。 */
.series-card-children-sub {
  flex: 1 0 100%;
  padding-left: 1em;
  font-size: 1em;
  margin-top: 2px;
}
/* 年度順で OFF にした区分のカードを隠す（作品が 1 つも出ない年度の段は JS が隠す）。 */
.series-index-root[data-hide-tv] [data-kind-group="tv"],
.series-index-root[data-hide-movie] [data-kind-group="movie"],
.series-index-root[data-hide-spring] [data-kind-group="spring"],
.series-index-root[data-hide-spinoff] [data-kind-group="spinoff"] {
  display: none;
}
/* 年度順では区分が混ざるので連番を出さない。 */
.series-year-list .series-card-no {
  display: none;
}
/* 年度順の映画カードの公開日の枠は、種類順の映画カードと同じ幅にする。 */
.series-year-list [data-kind-group="movie"] .series-card-period,
.series-year-list [data-kind-group="spring"] .series-card-period {
  min-width: 8.5em;
}
/* 映画は公開日 1 つだけなので、枠は「2008年11月30日」（最長想定）が収まる幅にして尺を日付の近くに置く
   （映画のカードどうしでは尺の開始位置がそろう）。 */
.series-card-list-movie .series-card-period {
  min-width: 8.5em;
}
.series-card-count {
  /* 件数（全 N 話 / 尺）。期間枠のすぐ右に並ぶ。 */
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
/* 共通：本体（period-main / count-main）と「（見込）」注記を縦に積むラッパー。
   inline-flex で本体の幅にフィットし、注記は本体直下にセンタリングされる
   （本体文字列の幅を基準にした中央寄せ）。 */
.series-card-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.series-card-period-main,
.series-card-count-main {
  white-space: nowrap;
}
/* 併映のある映画の「(上映総尺 m分ss秒)」。長編の尺に続けて同じ行に小さく添える。 */
.series-card-count-sub {
  font-size: 0.85em;
  white-space: nowrap;
}
/* 「（見込）」注記。本体直下に小さく出す。stack の中央寄せ規律で本体幅中央に収まる。 */
.series-card-period .estimate-note,
.series-card-count .estimate-note {
  position: static;
  margin-left: 0;
  font-size: 0.85em;
  line-height: 1.2;
}

/* モバイル幅：期間の min-width を解除して自然な折り返しに任せる。
   かつ件数は flex 行の右端に押し出す（カード幅一杯まで使った右寄せレイアウト）。
   デスクトップでは期間のすぐ右にライン揃え、モバイルでは画面端まで寄せて視認性を確保する。 */
@media (max-width: 640px) {
  .series-card-period {
    min-width: 0;
  }
  .series-card-count {
    margin-left: auto;
  }
}

/* TV シリーズの追加情報（プリキュアバッジ + スタッフバッジ）。
   オーバーレイリンクより上のレイヤーに置き、内側の人物リンクが押せるようにする
   （仕組みは .bgms-card-staff と同じ：pointer-events: none + 内部リンクのみ auto）。 */
.series-card-sub {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88em;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.series-card-sub .precure-badge,
.series-card-sub a.staff-name,
.series-card-sub a.role-badge {
  pointer-events: auto;
}
/* スタッフの行はエピソード一覧（/episodes/）のスタッフと同じ字の大きさ（本文の 0.7 倍＝ 0.88em × 0.8）にする。 */
.series-card-sub .staff-badges-row {
  font-size: 0.8em;
}
/* デスクトップでは、プリキュアを左の列、スタッフを右の列に並べ、それぞれの列の中で折り返す
   （プリキュアの無い映画のカードはスタッフが全幅）。スマホでは今までどおり縦に積む。 */
@media (min-width: 900px) {
  .series-card-sub:has(> .precure-badges-row) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 16px;
    align-items: start;
  }
}
/* プリキュアバッジ行は薄いピンクの枠に収め、下のスタッフ行（役職バッジ + 人名）と見分けられるようにする。
   地色はカードのホバー色（#fff7fb）より一段濃くして、ホバー中も枠が見えるようにする。 */
.series-card-sub .precure-badges-row {
  padding: 6px 8px;
  background: #fdeef4;
  border: 1px solid #f6c6d8;
  border-radius: 8px;
}

/* 映画カード内の MOVIE_SHORT 子作品リスト。
   親映画にぶら下がる併映短編で、タイトルは短編の詳細ページへのリンク。
   カード余白クリックで親映画にナビするオーバーレイは下に敷いてあるため、
   pointer-events: none で子作品全体をクリックスルーに倒し、タイトルのリンクだけ auto で拾う。 */
.series-card-children {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.88em;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.series-card-children > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  /* 中黒スタイルの目印は CSS marker ではなく ::before で出すと擬似要素の余白制御が容易。 */
}
/* 行の頭は「・」ではなく、秋映画・春映画と同じ形の札（併映・同時上映）で示す。 */
.series-card-children > li .movie-badge {
  flex: 0 0 auto;
  align-self: baseline;
}
/* 併映の題はスタッフの行より一回り大きく太くして、作品名として読めるようにする。 */
.series-card-children-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 1.14em;
  font-weight: 600;
}
a.series-card-children-title {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}
a.series-card-children-title:hover {
  text-decoration: underline;
}
.series-card-children-meta {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 併映短編のメインスタッフ。タイトルの下の行に、中黒の分だけ字下げして出す。
   人物・役職のリンクだけ押せるようにする（親の pointer-events: none を部分的に戻す）。 */
.series-card-children-staff {
  flex: 1 0 100%;
  padding-left: 1em;
  line-height: 1.7;
  /* 親の映画のスタッフと同じ大きさ（本文の 0.7 倍＝ 0.88em × 0.8） */
  font-size: 0.8em;
}
.series-card-children-staff a.staff-name,
.series-card-children-staff a.role-badge {
  pointer-events: auto;
}

.series-flat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.series-flat li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.child-kind {
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  min-width: 9em;
}
.child-period {
  font-size: 0.85em;
}

/* ──────────────────── シリーズ詳細：エピソード一覧（スタッフ列付き） ──────────────────── */
.episode-list { font-variant-numeric: tabular-nums; }
.episode-list td.no {
  text-align: right;
  width: 4em;
  font-family: var(--font-num);
  /* 話数（「第10話」）が 2 桁になっても折り返さない */
  white-space: nowrap;
}
.episode-list td.date {
  width: 11em;
  color: var(--muted);
  white-space: nowrap;
  font-family: var(--font-num);
}

/* スタッフ列付きの拡張表 */
.episode-list-with-staff {
  font-size: 0.92em;
}
.episode-list-with-staff th,
.episode-list-with-staff td {
  padding: 4px 8px;
  vertical-align: top;
}
.episode-list-with-staff th.col-no,
.episode-list-with-staff td.col-no {
  white-space: nowrap;
  text-align: right;
  width: 4.5em;
  font-family: var(--font-num);
}
.episode-list-with-staff th.col-date,
.episode-list-with-staff td.col-date {
  white-space: nowrap;
  width: 10em;
  font-family: var(--font-num);
  color: var(--muted);
}
.episode-list-with-staff th.col-title,
.episode-list-with-staff td.col-title {
  min-width: 12em;
}
.episode-list-with-staff th.col-staff,
.episode-list-with-staff td.col-staff {
  font-size: 0.95em;
  /* スタッフ列は連名で長くなりがちなので、列幅を少なめに固定して セル内で折り返させる方針 */
  min-width: 6em;
  word-break: break-word;
}
/* スタッフ列付きエピソード表は情報量が多いので、奇偶ストライプで読みやすく。 */

/* ──────────────────── エピソード詳細：サブタイトル ──────────────────── */
.subtitle-display {
  font-size: 1.5em;
  line-height: 1.5;
  padding: 24px 16px;
  margin: 16px 0 24px;
  background: #fafafa;
  border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0;
}
.subtitle-display ruby rt {
  font-size: 0.5em;
  color: var(--muted);
}
/* テロップ画像のサブタイトル。画像は字の外形で切ってあるので欄の中央に置き、
   欄より広い画像は縦横比を保って欄の幅まで縮める。--telop-w は画像の表示幅（字が 45px に見える幅）。 */
.subtitle-telop {
  text-align: center;
  line-height: 0;
}
.subtitle-telop img {
  display: inline-block;
  width: min(100%, var(--telop-w));
  height: auto;
}
@media (max-width: 640px) {
  /* スマホでは字の大きさの上限を 24px（PC の 8/15）にする。短い題だけが大きく出て、
     長い題（欄の幅まで縮む）との差が開きすぎないようにするため。 */
  .subtitle-telop img {
    width: min(100%, calc(var(--telop-w) * 8 / 15));
  }
}
.subtitle-kana {
  font-size: 0.85em;
  color: var(--muted);
  margin-top: 8px;
}
/* サブタイトル未確定話のプレースホルダ（（サブタイトル「未定」）等）。
   エピソード詳細のサブタイトル表示・一覧行・前後話ナビで共通に使う。
   誌面の案内の引用であってサブタイトル本文ではないことを muted で示す。 */
.subtitle-placeholder {
  color: var(--muted);
}

/* ──────────────── エピソード詳細：アニメ雑誌サブタイトル掲載 ──────────────── */
/* 状態バッジ（掲載/非公開/未定）＋担当号・発売日の小書きを 1 行に並べる。
   バッジは charinfo バッジと同じ「薄背景＋濃色文字＋薄ボーダー」トーンの角丸ピル。 */
.magazine-subtitle-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}
.magazine-subtitle-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95em;
  font-weight: 600;
}
.magazine-subtitle-badge-published     { background: #e2f4e2; color: #1e6b2e; border-color: #b7dfb9; }
.magazine-subtitle-badge-not-disclosed { background: #fdeaea; color: #a12727; border-color: #f2bcbc; }
.magazine-subtitle-badge-undecided     { background: #eef1f5; color: #4b5563; border-color: #d3dae3; }
/* 掲載なしは「その号に枠自体が無かった」状態。他 3 種が塗りバッジなのに対し、
   背景を持たない枠線のみの表現にして「そこに何も無かった」ことを視覚的に区別する。 */
.magazine-subtitle-badge-not-listed {
  background: transparent;
  color: var(--muted);
  border-color: #d3dae3;
  font-weight: 500;
}
.magazine-subtitle-issue {
  color: var(--muted);
  font-size: 0.9em;
}

/* ──────────────────── YouTube 予告 ──────────────────── */
.youtube-trailer {
  margin: 16px 0 24px;
}
.youtube-trailer iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* ──────────────────── YouTube 公式動画（楽曲録音） ──────────────────── */
/* 楽曲詳細の録音セクション・シリーズ詳細の主題歌カードに置く iframe。
   サイズはエピソード予告と同じ 560×315（狭幅では 100% 幅・16:9 を保つ）。 */
.youtube-embed {
  margin: 12px 0 16px;
}
.youtube-embed iframe {
  display: block;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}
/* シリーズ詳細の主題歌カード内では見出し行と歌唱者行の間に収まるよう余白を詰める。 */
.theme-songs-list .ts-youtube {
  margin: 8px 0 10px;
}

/* ──────────────────── エピソード詳細：フォーマット表 ──────────────────── */
/* ヘッダセル（2 段とも）は全列センタリングで揃える（rowspan の「パート」「備考」は
   縦位置もミドル）。数値セル（td）は従来どおり右寄せ。 */
.format-table thead th { text-align: center; vertical-align: middle; }
/* 「配信(Amazon Prime)」の補足部分だけ縮小して、ヘッダの横幅の暴れを抑える。 */
.format-table thead .th-note { font-size: 60%; }
.format-table .partname { font-weight: 500; }
/* 各データ列は内容に必要な最小幅だけを取り、余った横幅をすべて備考列へ寄せる。
   非備考セルを nowrap で 1 行に固定し、備考セルに width:100% を与えると、テーブルの
   auto レイアウトで他列が内容幅に収縮したあと、残りの余白を備考列が総取りする。 */
.format-table th,
.format-table td { white-space: nowrap; }
.format-table .timecode {
  /* 時刻列は左右パディングを通常 td より圧縮して列幅を絞る。 */
  font-variant-numeric: tabular-nums;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 0.95em;
}
.format-table .duration {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding-left: 6px;
  padding-right: 6px;
}
/* 本文（tbody）の数値セルを DotGothic16（ドット/デジタル系）に統一する。
   従来の var(--font-num) は先頭の JetBrains Mono を Web フォントとして読み込んでおらず、
   環境ごとにフォールバック先（Consolas / monospace 等）が変わるうえ、記号（〜・コロン）と
   数字でグリフ源が割れて表示が不安定だった。読み込み済みの DotGothic16 に固定して全環境で
   同一字形にし、同一ページのパート尺統計カード（.partstat-duration）とも書体を揃える。
   ただし最下段「合計」行（tfoot の th.num）は太字（th の font-weight:600）が効くため、
   太字フェイスを持たない DotGothic16 だとフェイクボールドで潰れる。合計セルだけは元の数字
   フォント（table.numeric th.num が与える var(--font-num)）のまま残してボールドを正しく描く
   （合計は「28:40」等の数字＋コロンのみで波ダッシュを含まず、元フォントでも字形は安定する）。
   tbody 側は table.numeric td.num（specificity 0,2,2）に勝つよう .format-table.numeric で限定する。 */
.format-table.numeric td.num {
  font-family: var(--font-accent-dot);
}
.format-table .empty { color: var(--border); }
.format-table .notes {
  /* 余白を引き受ける列。内容は通常テキストなので nowrap を解除して自然折り返しさせる。 */
  white-space: normal;
  width: 100%;
  font-size: 0.85em;
  color: var(--muted);
}

/* 本放送フォーマット調査中の断り書き（備考に【本放送未確認】を含む回のみ）。小さめの赤字。 */
.format-oa-note {
  margin: 2px 0 8px;
  font-size: 0.8em;
  color: #c62828;
}
/* ──────────────────── エピソード詳細：フォーマット帯グラフ ──────────────────── */
/* メディア別バーは「最長メディア = 100%」の同一スケール（バー幅はテンプレが style="width: N%" で指定）。
   セグメント幅は flex-grow にパート尺秒を渡して比例配分する。 */
.fmt-bars { margin: 12px 0 4px; }
.fmt-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.fmt-bar-medium {
  flex: 0 0 3.2em;
  font-size: 0.85em;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.fmt-bar-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fmt-bar {
  display: flex;
  gap: 1px;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
}
.fmt-seg {
  flex-basis: 0;
  flex-shrink: 1;
  min-width: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fmt-seg-label {
  font-size: 0.72em;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.65);
}
.fmt-bar-total {
  flex: 0 0 auto;
  /* 帯グラフ右端の総尺ラベルも、直下のフォーマット表の数値（DotGothic16）と書体を揃える。 */
  font-family: var(--font-accent-dot);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  color: var(--muted);
  white-space: nowrap;
}
/* 色パレット。フォーマット帯グラフ・凡例チップ・パート尺統計カードで共用する。
   CM・配信イントロは「本編ではない埋め草」感を出すため斜線パターンの無彩色にする。 */
.fmt-p-avant   { background: #c9b8ec; }
.fmt-p-op      { background: #f6b3cf; }
.fmt-p-a       { background: #aacdf2; }
.fmt-p-b       { background: #a4dcc4; }
.fmt-p-c       { background: #cfe6a3; }
.fmt-p-ed      { background: #f8cb96; }
.fmt-p-trailer { background: #f1e092; }
.fmt-p-sponsor { background: #e2e2e8; }
.fmt-p-misc    { background: #d7d7de; }
.fmt-p-cm      { background: repeating-linear-gradient(135deg, #ececf0 0 6px, #f8f8fa 6px 12px); }
.fmt-p-intro   { background: repeating-linear-gradient(135deg, #dfdfe6 0 6px, #efeff4 6px 12px); }
.fmt-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 4px 0 0;
  padding: 0 0 0 calc(3.2em + 8px);
  font-size: 0.8em;
  color: var(--muted);
}
.fmt-chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
}
.fmt-details {
  margin-top: 12px;
}
/* 精密テーブルは列数が多く狭幅に収まらないため、テーブルだけをラッパ内で横スクロールさせる。
   details 全体を overflow コンテナにすると、右上の「?」ツールチップ吹き出しがスクロール領域に
   取り込まれて横スクロールバーを誘発するため、テーブル専用ラッパ（.fmt-table-scroll）に分離する。
   ページ全体の横膨張は fixed 要素＝ハンバーガーを画面外へ押し出すので厳禁。 */
.fmt-table-scroll {
  overflow-x: auto;
}
.fmt-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9em;
  user-select: none;
  width: fit-content;
}
.fmt-details summary:hover { color: var(--fg); }
.fmt-details-note {
  /* 表右上に「?」ツールチップを浮かせる行。details を開いたときだけ見える。
     summary 内に置くとタップが開閉トグルと衝突するため独立させている。 */
  text-align: right;
  margin: 6px 0 4px;
}
.fmt-details-note .help-tip { margin-left: 0; }
.fmt-details-note .help-tip-text {
  /* 右端アンカーなので吹き出しは左方向へ展開する。右端は本文コンテンツ幅から
     はみ出さないようアンカー右端に揃える（横スクロールバーの誘発を防ぐ）。 */
  left: auto;
  right: 0;
}
@media (max-width: 560px) {
  /* 狭幅では小さめセグメントのラベルを隠し、色＋凡例に委ねる。 */
  .fmt-seg-s .fmt-seg-label { display: none; }
  .fmt-legend { padding-left: 0; }
}

/* ──────────────────── ヘルプツールチップ / 参照点注記 ──────────────────── */
/* 見出し横の「?」アイコン。ホバーまたはフォーカス（タップ）で説明の吹き出しを出す。JS 不要。
   tabindex="0" をテンプレ側で付けることでモバイルのタップ・キーボード操作にも反応する。 */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--table-stripe);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  user-select: none;
}
.help-tip:hover,
.help-tip:focus {
  color: var(--fg);
  border-color: var(--muted);
}
.help-tip:focus-visible {
  outline: 2px solid var(--accent-pink);
  outline-offset: 1px;
}
.help-tip-text {
  position: absolute;
  top: calc(100% + 6px);
  left: -6px;
  z-index: 30;
  width: max-content;
  max-width: min(440px, 78vw);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  color: var(--fg);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  /* 非表示は display:none で行う（visibility:hidden だと吹き出しの幅がレイアウト上の
     スクロール領域に残り、モバイルでページ全体が横に膨らんで fixed 要素＝ハンバーガーが
     画面外へ押し出される）。 */
  display: none;
}
.help-tip:hover .help-tip-text,
.help-tip:focus .help-tip-text,
.help-tip:focus-within .help-tip-text {
  display: block;
}

/* セクション右下の参照点注記（「（YYYY年M月D日現在、『○○』第N話時点）」）。
   集計が毎週変動するセクションの「いま現在の参照点」を、本文より一回り小さく右寄せで添える。 */
.section-refpoint {
  margin: 8px 0 0;
  text-align: right;
  font-size: 0.78em;
  color: var(--muted);
}

/* ──────────────────── エピソード詳細：サブタイトル分析 ──────────────────── */
/* 1 文字 = 1 行。左にグリフのボックス、右にバッジ（初出 = 黄 / 唯一 = ピンク / N年ぶり = 青）と
   復活詳細の補足テキストを並べる。 */
.charinfo-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.charinfo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.charinfo-glyph {
  flex: 0 0 auto;
  width: 2.1em;
  height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  font-weight: 600;
  background: var(--table-stripe);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.charinfo-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
.charinfo-info .badge {
  display: inline-block;
  font-size: 0.75em;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}
.charinfo-info .badge-first   { background: var(--hl); color: #8a6d00; border-color: #e5d375; }
.charinfo-info .badge-uniq    { background: #ffe6f1; color: #a31a5b; border-color: #f4b8d6; }
.charinfo-info .badge-revival { background: #e5f0fa; color: #1d5e96; border-color: #b9d7ef; }
.charinfo-detail { font-size: 0.85em; }

/* ──────────────────── エピソード詳細：パート尺統計情報 ──────────────────── */
/* パートごとの 1 カードに「実尺 / シリーズ内 / 歴代全体」をまとめる。チップと
   ゲージマーカーの色はフォーマット帯グラフの fmt-p-* パレットを共用する。 */
.partstat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.partstat-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}
.partstat-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.partstat-head .fmt-chip {
  flex: 0 0 auto;
  align-self: center;
}
.partstat-partname { font-weight: 600; }
.partstat-duration {
  margin-left: auto;
  /* パート尺統計カードの大きな尺数値はドット/デジタル系（DotGothic16）で
     デジタルカウンタ風のアクセントにする（大きめサイズなので可読性も保てる）。 */
  font-family: var(--font-accent-dot);
  font-variant-numeric: tabular-nums;
  font-size: 1.3em;
}
.partstat-scope {
  padding: 8px 0 2px;
  border-top: 1px dashed var(--border);
}
.partstat-scope-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.partstat-scope-label {
  font-size: 0.8em;
  color: var(--muted);
}
.partstat-rank {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}
/* 偏差値ゲージ。25〜75 を全幅に割り当て、中央線が 50（平均）。マーカー位置はテンプレが
   style="left: N%" で指定する。背景には同スケールの母集団ヒストグラム（hensachi-hist）を薄敷きし、
   下端の基線（border-bottom）上にマーカーが乗る「分布プロット」構成。 */
.hensachi-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 9px;
}
.hensachi-label {
  flex: 0 0 auto;
  font-size: 0.75em;
  color: var(--muted);
}
.hensachi-gauge {
  display: block;
  position: relative;
  flex: 1 1 auto;
  height: 22px;
  /* 分布の基線。ヒストグラムの棒はこの線から上へ立ち上がり、マーカーはこの線上に乗る。 */
  border-bottom: 1px solid var(--border);
}
.hensachi-hist {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 1px;
}
.hensachi-hist > span {
  flex: 1 1 0;
  /* 棒の色はパートのキーカラー（fmt-p-*）。減光して「分布は背景・マーカーが主役」の序列を保つ。 */
  opacity: 0.35;
  border-radius: 1px 1px 0 0;
}
.hensachi-mid {
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.hensachi-marker {
  position: absolute;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  /* 基線（gauge 下端）にマーカーの中心を合わせる。 */
  transform: translate(-50%, 50%);
}
.hensachi-value {
  flex: 0 0 3.4em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}

/* ──────────────────── エピソード詳細：基本情報のファクトタイル ──────────────────── */
/* 放送日時と通算情報を「薄色の小ラベル＋値」のタイルで横に並べる。タイル幅は内容なり、
   入り切らない分は折り返す（旧: テーブル入れ子表現）。 */
.fact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.fact {
  flex: 1 1 auto;
  min-width: 9em;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
}
.fact-label {
  display: block;
  font-size: 0.75em;
  color: var(--muted);
  margin-bottom: 2px;
  white-space: nowrap;
}
.fact-value {
  font-size: 1.05em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 長い値（シリーズ正式タイトル等）用の折返し許可。 */
.fact-value.is-wrap {
  white-space: normal;
}
/* 値の下に添える小さな注記（団体の関係の期間など）。 */
.fact-note {
  display: block;
  margin-top: 2px;
  font-size: 0.75em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 汎用のボタン状リンク（ピンクのピル。劇伴一覧などの「別ページへ送る」導線に使う）。 */
.button-link {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--accent-pink);
  border-radius: 999px;
  color: var(--accent-pink);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.button-link:hover {
  background: var(--accent-pink);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(233, 30, 99, 0.3);
}
/* 説明つきタイル。タイル内に「?」アイコンを置くと狭くなるため、カード全体を
   ツールチップ（.help-tip-text）のトリガにする。ラベルの点線下線が「説明あり」の合図。 */
.fact-has-help {
  position: relative;
  cursor: help;
}
.fact-has-help .fact-label {
  width: fit-content;
  border-bottom: 1px dotted var(--muted);
  padding-bottom: 1px;
}
.fact-has-help .help-tip-text {
  top: calc(100% + 4px);
  left: -1px;
}
.fact-has-help:hover .help-tip-text,
.fact-has-help:focus .help-tip-text,
.fact-has-help:focus-within .help-tip-text {
  display: block;
}
.fact-has-help:focus-visible {
  outline: 2px solid var(--accent-pink);
  outline-offset: 1px;
}

/* ──────────────────── エピソード詳細：スタッフ ──────────────────── */
.staff-table {
  width: auto;
  margin: 8px 0 16px;
}
.staff-table th {
  text-align: left;
  white-space: nowrap;
  width: 6em;
  font-weight: 600;
}
.staff-table td {
  padding-right: 24px;
}

/* 主題歌・挿入歌セクション 「カード型 + メタ行群」のリッチ表示。 */
.theme-songs-list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.theme-songs-list .ts-card {
  margin: 0;
  padding: 10px 14px 12px;
  background: #fafafa;
  border-left: 3px solid var(--accent-pink);
  border-radius: 0 6px 6px 0;
  line-height: 1.6;
}

/* タイトル行：横並びで [区分][タイトル][バリアント][使用話数][本放送のみ] を表示。 */
.theme-songs-list .ts-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
/* 配信音源の再生ボタン：カードの右上に固定する。見出しが折り返しても行を増やさないよう、
   ボタンのあるカードだけ見出し行の右側をボタンの幅だけ空ける。 */
.theme-songs-list .ts-card {
  position: relative;
}
.theme-songs-list .ts-card:has(> .ts-headline > .ts-play) > .ts-headline {
  padding-right: 2.6em;
}
.theme-songs-list .ts-play {
  position: absolute;
  top: 10px;
  right: 12px;
}
.theme-songs-list .ts-kind {
  display: inline-block;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--accent-pink);
  color: #fff;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.theme-songs-list .ts-title {
  font-weight: 600;
  font-size: 1.06em;
}
.theme-songs-list .ts-title a {
  color: inherit;
}
.theme-songs-list .ts-title a:hover {
  color: var(--accent-pink);
}
.theme-songs-list .ts-variant {
  font-size: 0.88em;
}
.theme-songs-list .ts-bcast {
  font-size: 0.88em;
}
/* シリーズ詳細でのみ出る使用話数ラベル（「#1～49 (全話)」「#24～47（本放送では #35～38 を除く）」）。 */
.theme-songs-list .ts-range {
  font-size: 0.88em;
}

/* メタ行：[ラベル][：][値] の 3 列構造。 */
/* 作詞・作曲・編曲・歌の各メタ行を 1 行に並べる。 */
.theme-songs-list .ts-meta-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin: 0 12px 0 8px;
  font-size: 0.94em;
}
.theme-songs-list .ts-meta-label {
  flex: 0 0 auto;
  /* 1 行並列構成では min-width による右寄せ揃えは不要（余白が大きくなりすぎるため）。 */
  color: var(--muted);
  font-weight: 500;
}
.theme-songs-list .ts-meta-label a {
  color: var(--muted);
}
.theme-songs-list .ts-meta-label a:hover {
  color: var(--accent-pink);
}
.theme-songs-list .ts-meta-sep {
  flex: 0 0 auto;
  margin-right: 2px;
  color: var(--muted);
}
.theme-songs-list .ts-meta-value {
  flex: 1 1 auto;
  min-width: 0;
}

/* 「歌」行だけは主役級フォントに（楽曲詳細の song-recording-vocalists と同じ哲学）。 */
.theme-songs-list .ts-meta-vocalists {
  font-size: 1.0em;
}
.theme-songs-list .ts-meta-vocalists .ts-meta-value {
  font-weight: 500;
}

/* 備考行：ラベル無しでそのまま muted 表示。 */
.theme-songs-list .ts-meta-notes {
  display: block;
  margin-left: 8px;
  font-size: 0.88em;
}

/* 旧テーブル形式（テンプレ側で参照しなくなったが、互換のため空定義のみ残す）。 */
.theme-songs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.theme-songs-table th,
.theme-songs-table td {
  padding: 6px 10px;
  vertical-align: top;
}
.theme-songs-table th.col-kind,
.theme-songs-table td.col-kind {
  white-space: nowrap;
  width: 8em;
  font-weight: 500;
}
.theme-songs-table th.col-title,
.theme-songs-table td.col-title {
  font-weight: 600;
  min-width: 12em;
}
.theme-songs-table th.col-variant,
.theme-songs-table td.col-variant {
  white-space: nowrap;
  width: 8em;
  font-size: 0.9em;
}
.theme-songs-table th.col-singer,
.theme-songs-table td.col-singer {
  min-width: 8em;
}
.theme-songs-table th.col-notes,
.theme-songs-table td.col-notes {
  font-size: 0.9em;
}

/* ──────────────────── 前後話ナビ ──────────────────── */
.prev-next-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.prev-next-nav .nav-prev::before { content: "‹ "; }
.prev-next-nav .nav-next::after { content: " ›"; }

/* ──────────────────── 話数ページネーション ──────────────────── */
.ep-pagination {
  margin: 8px 0 16px;
}
.ep-pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  align-items: center;
  justify-content: center;
}
.ep-pagination li {
  display: block;
}
.ep-pagination a,
.ep-pagination span.current,
.ep-pagination span {
  /* セル幅をすべて揃えるための共通土台 。 */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6em;
  height: 2em;
  padding: 0 8px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  color: var(--fg);
  font-size: 0.9em;
  line-height: 1;
}
.ep-pagination a:hover {
  border-color: var(--accent);
  background: #fafafa;
  text-decoration: none;
}
.ep-pagination span.current {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  /* font-weight は通常セルと同じ（normal）に揃える。 */
  cursor: default;
}
/* 前話 / 次話ボタン（「«」「»」1 文字）。 */
.ep-pagination li.page-prev { margin-right: 8px; }
.ep-pagination li.page-next { margin-left: 8px; }
.ep-pagination li.page-prev.disabled span,
.ep-pagination li.page-next.disabled span {
  color: var(--border);
  background: #fafafa;
  cursor: not-allowed;
}
/* 省略記号「…」：見た目はボーダー無し・背景透過だが、ボックスサイズは数字セルと同一にして 横並びの「マス目」感が崩れないようにする 。 */
.ep-pagination li.ellipsis span {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  cursor: default;
  /* min-width / height / padding / display / align は上位の .ep-pagination span 共通スタイルを継承 */
}

.ep-pagination-top {
  margin-bottom: 24px;
}
.ep-pagination-bottom {
  margin-top: 24px;
}

/* ════════════════════════════════════════════════════════════════ クレジット階層（プレビュー完全準拠） Catalog 側 CreditPreviewRenderer の <style> ブロックをそのまま移植。 */
.credit-section {
  /* クレジットセクションもサイト全体の本文と同じベース書体（Noto Sans JP）で表示する。 */
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.6;
  color: #222;
}
.credit-section h3.credit-kind-heading {
  /* サイト共通の h3 と同じ大きさに揃える（他セクションの「外部サイト」「使用音声」見出しと統一感）。 */
  font-size: 1.05em;
  font-weight: bold;
  margin: 24px 0 12px 0;
  padding: 0 0 4px 0;
  border: none;
  border-bottom: 1px solid #ccc;
}
/* オープニング／エンディング／本編 のクレジット見出し（h3.credit-kind-heading）に対して、 グローバル h3::before の青ドットマーカーが見出しテキストの先頭文字に重なるバグの修正。 */
.credit-section h3.credit-kind-heading::before {
  display: none;
}
/* 階層余白: ブロック ≦ ロール ＜ グループ ＜ ティア ＜ カード */
.credit-section .card  { margin-top: 40px; }
.credit-section .card:first-child { margin-top: 0; }
.credit-section .tier  { margin-top: 24px; }
.credit-section .tier:first-child { margin-top: 0; }
.credit-section .group { margin-top: 14px; }
.credit-section .group:first-child { margin-top: 0; }
.credit-section .role  { margin-top: 6px; }
.credit-section .role:first-child { margin-top: 0; }

/* テーブル内のブロック区切り行（グループ内のロール変わり目と同等の余白で切れ目を視覚化）。 */
.credit-section table.fallback-table tr.block-break > td,
.credit-section table.fallback-vc-table tr.block-break > td {
  padding-top: 6px;
}
/* キャスティング協力行 */
.credit-section table.fallback-vc-table tr.cooperation-row > td {
  padding-top: 6px;
}
/* テンプレ展開結果ブロック（HTML 素通し、改行のみ <br>） */
.credit-section .role-rendered {
  margin: 0;
  padding: 0;
}
/* 映画のタイトルカード：タイトルと同じ幅の透明な箱に、左下へ CJ マークの印、右下へ映倫審査番号を寄せる。 */
.credit-section .film-title-card {
  display: inline-flex;
  flex-direction: column;
}
.credit-section .film-title-marks {
  display: flex;
  align-items: center;
}
.credit-section .film-title-marks .film-rating {
  margin-left: auto;
}
/* CJ マークの印（小さく丸囲みで出す）。 */
.credit-section .cj-mark {
  display: inline-block;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.75em;
  line-height: 1.4;
  vertical-align: middle;
  opacity: 0.8;
}
/* コンテンツ領域ヘッダ上書き（role_templates.content_header_override）。
   左カラム役職名の代替として、シリーズ別「役職名の表示テキスト・位置だけ変える」用途で使う。
   本体（フォールバック表 or テンプレ展開結果）と視覚的に区切るために下マージンを取る。
   x 位置は声の出演や他フォールバック行の右カラム（entry-cell）と揃えるため、
   credit-align.js が共有する --credit-role-name-w（役職名カラム実測幅）分だけ左マージンを足し、
   さらに役職名カラムの padding-right: 16px と同等の余白を inset として加える。 */
.credit-section .role-content-header {
  margin: 0 0 8px calc(var(--credit-role-name-w, 8em) + 16px);
}

/* テンプレ未定義時のフォールバック表（役職名 | エントリ右並び） */
.credit-section table.fallback-table {
  border-collapse: collapse;
  margin: 0;
  width: auto;
}
.credit-section table.fallback-table td {
  border: none;
  background: transparent;
  padding: 0 16px 0 0;
  vertical-align: top;
}
.credit-section table.fallback-table tr:nth-child(even) td {
  background: transparent;
}
.credit-section table.fallback-table td.role-name {
  /* 役職名は右寄せ。 */
  font-weight: bold;
  min-width: 8em;
  width: var(--credit-role-name-w, auto);
  text-align: right;
  padding-right: 16px;
  white-space: nowrap;
}
.credit-section table.fallback-table td.entry-cell {
  padding-right: 24px;
}
/* PREFIX レイアウト（映画の製作・配給など）の屋号セル。80% 縮小フォント + muted で、
   左の人名カラムを引き立てる 2 カラム表記。直前行と屋号が同じ場合は空セル化されて圧縮される。 */
.credit-section table.fallback-table td.affil-prefix {
  font-size: 80%;
  color: var(--muted, #777);
  padding-right: 14px;
  min-width: 8em;
  vertical-align: top;
  white-space: nowrap;
}

/* VOICE_CAST 用 3 カラムフォールバック表 */
.credit-section table.fallback-vc-table {
  border-collapse: collapse;
  margin: 0;
  width: auto;
}
.credit-section table.fallback-vc-table td {
  border: none;
  background: transparent;
  padding: 0 16px 0 0;
  vertical-align: top;
}
.credit-section table.fallback-vc-table tr:nth-child(even) td {
  background: transparent;
}
.credit-section table.fallback-vc-table td.role-name {
  /* VOICE_CAST テーブルでも役職名カラムは右寄せ。 */
  font-weight: bold;
  min-width: 8em;
  width: var(--credit-role-name-w, auto);
  text-align: right;
  padding-right: 16px;
  white-space: nowrap;
}
.credit-section table.fallback-vc-table td.character-cell {
  /* キャラ名カラムは VC テーブル内で列幅を統一して縦に揃える。 */
  min-width: 6em;
  width: var(--credit-character-cell-w, auto);
  padding-right: 16px;
}
.credit-section table.fallback-vc-table td.actor-cell {
  /* 声優名カラムは VC テーブル内で列幅を統一して縦に揃える。 */
  min-width: 12em;
  padding-right: 24px;
}
/* n 役連続（同じ声優が連続キャラを担当）で rowspan 結合された actor-cell は、
   既定の vertical-align: top を上書きして、結合された N 行ぶんの中央に揃える。 */
.credit-section table.fallback-vc-table td.actor-cell[rowspan] {
  vertical-align: middle;
}
.credit-section table.fallback-vc-table td.character-cell.dim {
  color: #ccc;
}
/* まとまりの頭に出る見出し（映画の声の出演で作品ごとに並ぶときの作品名、「特別出演」など）。
   名前の行と見分けられるよう、少し小さく薄い色で出す。 */
.credit-section table.fallback-table td.block-heading,
.credit-section table.fallback-vc-table td.block-heading {
  font-size: 0.9em;
  color: #666;
}
/* 画面で斜体の見出し（プリキュアオールスターズDX の声の出演の作品名など）。 */
.credit-section .block-heading-italic {
  font-style: italic;
}
/* CASTING_COOPERATION 由来の「協力」行。 */
.credit-section table.fallback-vc-table tr.cooperation-row > td.role-name {
  text-align: right;
  font-weight: bold;
  padding-right: 16px;
  white-space: nowrap;
}

.credit-section .empty-credit {
  color: #999;
  font-style: italic;
}
.credit-section .render-error {
  color: #c0392b;
  font-size: 12px;
}

/* ──────────────────── ユーティリティ ──────────────────── */
.muted { color: var(--muted); }
.empty-row { color: var(--muted); font-style: italic; }

/* ──────────────────── 人物・企業 索引 ──────────────────── */
.persons-index-table,
.companies-index-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.persons-index-table th,
.persons-index-table td,
.companies-index-table th,
.companies-index-table td {
  padding: 5px 10px;
  vertical-align: baseline;
}
.persons-index-table th.col-name,
.companies-index-table th.col-name { width: auto; }
.persons-index-table th.col-kana,
.companies-index-table th.col-kana { width: 14em; }
.persons-index-table th.col-count,
.companies-index-table th.col-count {
  width: 8em;
  text-align: right;
}
.persons-index-table td.col-count,
.companies-index-table td.col-count {
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ──────────────────── 詳細ページ共通の小物（静的行・バッジ・タイル注記） ──────────────────── */
/* リンクを持たない行リスト用：ホバー反応を抑止する（役職詳細ページのスタッフ一覧など）。 */
.entity-row.is-static:hover {
  background: transparent;
}
/* 続柄などの小さな無彩色バッジ。 */
.tag-badge {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.75em;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--table-stripe);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
/* ファクトタイルの値に添える小書き（読みがな等）。 */
.fact-note {
  display: block;
  font-size: 0.78em;
  margin-top: 1px;
}
/* ──────────────────── 声の出演履歴表（プリキュア・キャラクター詳細） ──────────────────── */
.voicecast-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.voicecast-table th,
.voicecast-table td {
  padding: 4px 10px;
  vertical-align: baseline;
}
.voicecast-table th.col-series,
.voicecast-table td.col-series { width: 22em; }
.voicecast-table th.col-episode,
.voicecast-table td.col-episode { width: auto; }
.voicecast-table th.col-alias,
.voicecast-table td.col-alias {
  width: 12em;
  font-size: 0.92em;
}
.voicecast-table th.col-actor,
.voicecast-table td.col-actor {
  width: 12em;
  font-size: 0.92em;
}

/* シリーズ名 + 開始年 表記 シリーズ略称（series.title_short）を表示で一切使わない方針に伴い、シリーズ名を並列 表示する場面では正式タイトル直後に「(2004)」のような薄色の開始年を添える表現に統一。 */
.series-year {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  margin-left: 0.25em;
}
.col-year {
  width: 5em;
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* 商品索引タブ 商品一覧ページ（/products/）で「シリーズ別」「ジャンル別」を切り替えるタブ UI。 */
.products-tabs {
  margin: 8px 0 16px;
}
.products-tabs .tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.products-tabs .tab-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 8px 18px;
  margin-bottom: -2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95em;
  color: var(--muted);
  border-radius: 6px 6px 0 0;
  line-height: 1.4;
}
.products-tabs .tab-btn:hover:not(.is-active) {
  background: var(--table-stripe);
  color: var(--fg);
}
.products-tabs .tab-btn.is-active {
  background: #fff;
  color: var(--fg);
  border-color: var(--border);
  border-bottom: 2px solid #fff;
  font-weight: 500;
}
.products-tabs .tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* パネルは既定で非表示。 */
.products-tabs .tab-panel { display: none; }
.products-tabs .tab-panel.is-active { display: block; }
.products-tabs .tab-panel[hidden] { display: none; }

/* 商品索引：商品カード。横長カードを <a class="products-card"> で 1 リンク化、
   内部 grid は 左=タイトル+meta／右=種別バッジ の 2 カラム。
   ホバー時は左ボーダーをアクセントピンク、背景うっすらピンク。 */
.products-card-list {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.products-card-list > li {
  margin: 0;
  padding: 0;
}
.products-card {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--bg, #fff);
  color: inherit;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.products-card:hover,
.products-card:focus-visible {
  border-color: var(--accent-pink, #ec4899);
  background-color: var(--surface-2, #fff7fb);
}
.products-card:focus-visible {
  outline: 2px solid var(--accent-pink, #ec4899);
  outline-offset: 2px;
}
.products-card,
.products-card:hover,
.products-card:focus-visible,
.products-card *,
.products-card:hover *,
.products-card:focus-visible * {
  text-decoration: none;
}
.products-card-grid {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  grid-template-areas: "thumb main badge";
  align-items: start;
  column-gap: 16px;
}
/* カード左端の正方形ジャケット枠。短辺にあわせて contain ではなく cover でめいっぱい敷き、
   角丸の内側に収める（はみ出しは overflow: hidden でクリップ）。画像が無ければグレーのプレースホルダ。 */
.products-card-thumb {
  grid-area: thumb;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: #e5e7eb;
  flex: none;
}
.products-card-thumb img,
.products-card-thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.products-card-thumb-placeholder {
  background: #e5e7eb;
}
.products-card-main {
  grid-area: main;
  min-width: 0;
}
.products-card-title {
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1.4;
  color: var(--accent-pink, var(--fg));
  /* タイトルが長くなりすぎても 1 行に収めず自然に折り返す。 */
  word-break: break-word;
}
.products-card-meta {
  margin-top: 4px;
  font-size: 0.85em;
  line-height: 1.55;
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  align-items: baseline;
}
/* meta 行内の区切り「／」は装飾なので flex 折り返し時に行頭に来ても違和感の無い muted トーン。 */
.products-card-meta-sep {
  opacity: 0.6;
}
/* 数字系（発売日・品番・価格）は等幅で桁を揃える。 */
.products-card-meta-release,
.products-card-meta-catalog,
.products-card-meta-price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.products-card-meta-catalog code {
  font-family: var(--font-num);
  font-size: inherit;
  background: transparent;
  padding: 0;
}
.products-card-badge-cell {
  grid-area: badge;
  justify-self: end;
  align-self: start;
  padding-top: 2px;
}
/* 商品種別バッジ（共通装飾）。固定マッピングで色を当てるが、未マッピング種別もデフォルトで
   グレー寄りに落ちるよう、ベース色を muted に置く。 */
.products-card-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
  white-space: nowrap;
  background: var(--muted, #94a3b8);
}

/* 商品種別バッジ：product_kind_code ごとの色（色相環ベースのトーン）。
   テンプレ側のクラス末尾は ProductKindCode を tolowerinvariant + _→- 変換した値。 */
.products-card-badge.products-card-kind-drama             { background: #c060c8; } /* ドラマ */
.products-card-badge.products-card-kind-chara-album       { background: #d9a73a; } /* キャラクターアルバム */
.products-card-badge.products-card-kind-chara-single      { background: #e8a23a; } /* キャラクターシングル */
.products-card-badge.products-card-kind-live-album        { background: #2fb29b; } /* ライブアルバム */
.products-card-badge.products-card-kind-live-novelty      { background: #5cae5c; } /* ライブ特典 */
.products-card-badge.products-card-kind-theme-single      { background: #e84a5f; } /* 主題歌シングル */
.products-card-badge.products-card-kind-theme-single-late { background: #d65a8a; } /* 後期主題歌シングル */
.products-card-badge.products-card-kind-ost               { background: #5470d6; } /* オリジナル・サウンドトラック */
.products-card-badge.products-card-kind-ost-movie         { background: #6a8ae0; } /* 映画オリジナル・サウンドトラック */
.products-card-badge.products-card-kind-radio             { background: #f08a3c; } /* ラジオ */
.products-card-badge.products-card-kind-tie-up            { background: #b86ed8; } /* タイアップアーティスト */
.products-card-badge.products-card-kind-vocal-album       { background: #d65aa0; } /* ボーカルアルバム */
.products-card-badge.products-card-kind-vocal-best        { background: #e07ab0; } /* ボーカルベスト */
.products-card-badge.products-card-kind-seasonal-event    { background: #cf6a4c; } /* 季節行事 */
.products-card-badge.products-card-kind-other             { background: #94a3b8; } /* その他 */

/* 商品索引：≤640px の縦積み。2 列 grid を縦並びに反転してバッジをタイトル上に移動。
   meta 行の不自然な flex 折り返しを回避するため。楽曲索引 (.songs-card-grid) の
   モバイルルールは別途、その既定値の後段に書く必要があるため別所に宣言。 */
@media (max-width: 640px) {
  /* 左にサムネ（48px 正方形・2 行分のスパン）、右上にバッジ、右下に main。
     grid-template-areas で配置を固定し、HTML 上の thumb → main → badge 順に依存しない。 */
  .products-card-grid {
    grid-template-columns: 48px 1fr;
    grid-template-areas:
      "thumb badge"
      "thumb main";
    column-gap: 12px;
    row-gap: 4px;
  }
  .products-card-thumb {
    width: 48px;
    height: 48px;
  }
  .products-card-badge-cell {
    justify-self: start;
    align-self: start;
    padding-top: 0;
  }
  /* meta 行の flex 折り返しを安定させるため、行内の最小幅を 0 に。
     既存設定が flex-wrap: wrap; なので、子要素が縮められるようにすれば自然に折り返す。 */
  .products-card-meta { row-gap: 2px; }
}

/* ──────────────────── 楽曲索引 ──────────────────── */
.songs-index-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.songs-index-table th,
.songs-index-table td {
  padding: 5px 10px;
  vertical-align: baseline;
}
.songs-index-table th.col-title,
.songs-index-table td.col-title { width: auto; }
.songs-index-table th.col-kana,
.songs-index-table td.col-kana { width: 14em; }
.songs-index-table th.col-class,
.songs-index-table td.col-class { width: 8em; }
.songs-index-table th.col-count,
.songs-index-table td.col-count {
  width: 8em;
  text-align: right;
  font-family: var(--font-num);
  white-space: nowrap;
}

/* ──────────────────── 商品詳細：ジャケット画像と購入/視聴リンク ──────────────────── */
/* 画像は提供元 CDN のホットリンク。 */
.product-media {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  margin: 8px 0 20px;
}
.product-cover img {
  display: block;
  /* 商品詳細のジャケット画像はやや大きめ（280px）に。
     モバイル幅では画面の 50vw に抑えてレイアウト破綻を防ぐ。 */
  width: 280px;
  max-width: 50vw;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
/* CD/デジタルでデザインが異なり「両方表示」のとき、2 枚を横並び（狭い画面では折り返し）。 */
.product-cover-both {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.product-links-label {
  margin: 0 0 6px;
  font-size: 0.92em;
}
/* 購入リンクの下の、広告である旨の注記。 */
.product-links-note {
  margin: 6px 0 0;
  font-size: 0.82em;
}
.product-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product-link {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 0.92em;
  text-decoration: none;
  border: 1px solid #d1d5db;
  color: var(--fg);
  background: #f9fafb;
  white-space: nowrap;
}
.product-link:hover {
  background: #f0f1f3;
}
.product-link-amazon { border-color: #f0a020; }

/* ──────────────────── 商品詳細：トラックカードリスト ──────────────────── */
/* 商品詳細ページのトラックカードリスト（旧 <table class="track-list"> を v1.4.1 でカード化）。
   1 disc に対して 1 ul を出し、各トラックは縦に並ぶカード。種別列（ContentKindLabel）は廃止し、
   種別情報はタイトル本文・サイズ/パートバッジ・メタ行のクレジット表現に内在する形に整理した。
   カード本体は <a> ではなく <div>（カードそのものは商品詳細ページの一部であり、リンク先は
   持たない）。劇伴詳細・歌詳細からのジャンプ先となる id="track-..." は li 側に振る。 */
.products-tracks-card-list {
  list-style: none;
  margin: 4px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* sticky ヘッダ分のスクロール着地マージン。/songs/{id}/ や /bgms/{slug}/ から
   /products/{catalog}/#track-... で飛んできた時、ヘッダで頭を切られないようにする。 */
.products-tracks-card-list > li[id] {
  scroll-margin-top: 110px;
}
/* :target 擬似クラスでジャンプ先のトラックカードを 2.4 秒フェードでハイライト。
   ハイライト色は黄色系 var(--hl)、最後は背景透過に戻す（track-target-flash キーフレーム）。 */
.products-tracks-card-list > li[id]:target .products-tracks-card {
  background-color: var(--hl, #fff7d6);
  animation: track-target-flash 2.4s ease-out;
}
/* 同じトラックに続く枝番（編集でつないだ 2 つ目以降の劇伴、メドレーの後ろの隠しトラックなど）。
   トラックの枠の grid の全幅を使い、頭の「＋」で続きであることを示す。劇伴・歌の詳細から飛んできたときは同じ色で光らせる。 */
.products-tracks-card .track-sub-part {
  grid-column: 1 / -1;
  scroll-margin-top: 110px;
  border-radius: 4px;
}
/* 「＋」と曲名を横に並べたまま、曲名（と札）の側だけを折り返す。 */
.products-tracks-card .track-sub-titleline {
  display: flex;
  align-items: baseline;
  margin-top: 6px;
  font-weight: 600;
}
.products-tracks-card .track-sub-title-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
.products-tracks-card .track-sub-plus {
  color: var(--muted);
  font-weight: 700;
  margin-right: 6px;
}
/* 枝番の歌の曲名は、親の曲名（枠全体のリンク）より手前に出して、それ単体で押せるようにする。 */
.products-tracks-card .track-sub-title-link {
  position: relative;
  z-index: 2;
  color: inherit;
  text-decoration: none;
}
.products-tracks-card .track-sub-title-link:hover,
.products-tracks-card .track-sub-title-link:focus-visible {
  text-decoration: underline;
}
/* 劇伴を編集でつないだトラックの札（「2曲の編集」）。サイズの札と同じ大きさで、色は灰色。 */
.products-tracks-card .track-edit-badge {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--table-stripe);
  color: var(--muted);
  white-space: nowrap;
}
.products-tracks-card .track-sub-part:target {
  background-color: var(--hl, #fff7d6);
  animation: track-target-flash 2.4s ease-out;
}
@keyframes track-target-flash {
  0%   { background-color: var(--hl, #fff7d6); }
  100% { background-color: transparent; }
}
.products-tracks-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  background: var(--bg, #fff);
  /* カード内タイトルリンク (.products-tracks-card-title-link) の絶対配置オーバーレイを
     カード矩形にぴったり重ねるための基準ボックス。 */
  position: relative;
  /* products 索引カードと同じく、ホバー / フォーカス時に枠線と背景を切り替える際の
     遷移を滑らかにする。 */
  transition: border-color 150ms ease, background-color 150ms ease,
              box-shadow 150ms ease, transform 150ms ease;
}
/* カード全体のホバー反応：products 索引と同じ視覚効果（枠線アクセントピンク化・微浮上・薄い陰）。
   タイトルリンク (.products-tracks-card-title-link) はカード全域に ::before 透明オーバーレイで
   拡張されているので、カード上の任意位置のホバー/フォーカスがそのリンクの :hover / :focus-visible に
   なる。:has() でその状態を親カードに反映する。 */
.products-tracks-card:has(.products-tracks-card-title-link:hover),
.products-tracks-card:has(.products-tracks-card-title-link:focus-visible) {
  border-color: var(--accent-pink, #ec4899);
  background-color: var(--surface-2, #fff7fb);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.10);
  transform: translateY(-1px);
}
/* タイトル本文を包む <a>。SONG トラックでは歌詳細へのリンク、その他では <span> なので
   このクラスは付かない。
   カード全体のホバー反応で「クリックできること」が伝わるので、タイトル文字自体には
   下線・色変化を一切付けない（products 索引のタイトルと挙動を揃える）。 */
.products-tracks-card-title-link,
.products-tracks-card-title-link:hover,
.products-tracks-card-title-link:focus-visible,
.products-tracks-card-title-link .track-title-text {
  text-decoration: none;
  color: inherit;
}
/* カード矩形全体に拡がる透明オーバーレイ。.products-tracks-card-title-link の ::before として
   絶対配置することで、カードのどこをクリックしても歌詳細に飛ぶ B 型構造を実現する。
   HTML 仕様上 <a> をネストすることはできないため、内側にある名義リンク・劇伴リンクは
   z-index でオーバーレイの上に乗せて独立クリック可能にする（下の .products-tracks-card a 規則）。 */
.products-tracks-card-title-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* カード内の他のリンク（名義リンク、劇伴 cuelink、Mナンバーリンク等）は
   オーバーレイより上のレイヤに置いて単独クリックを可能にする。
   タイトルリンク自身 (.products-tracks-card-title-link) は除外する（こちらは ::before オーバーレイで
   クリックを受けるため、コンテンツ部の z-index は不要）。
   通常時は下線なし、ホバー / フォーカス時のみ下線を出して「別ページへ飛ぶ独立リンクである」
   ことを明示する。 */
.products-tracks-card a:not(.products-tracks-card-title-link) {
  position: relative;
  z-index: 2;
  text-decoration: none;
}
.products-tracks-card a:not(.products-tracks-card-title-link):hover,
.products-tracks-card a:not(.products-tracks-card-title-link):focus-visible {
  text-decoration: underline;
}
/* カード内 grid 構造：
     1 行目：[タイトル行（番号バッジ + タイトル + サイズ/パートバッジ、1fr）] [尺セル（auto）]
     2 行目以降：メタ行（クレジット等）を 1 / -1 で全幅展開
   2 列構成にすることで、デスクトップ・モバイルともに番号とタイトルが横並び、
   尺だけが右端に独立カラムとして残る。メタ行はカード横幅をフルに使える。 */
.products-tracks-card-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 6px;
  min-width: 0;
}
/* 1 行目の左セル：番号バッジ + タイトル本文 + サイズ/パートバッジ。
   タイトルが長いときに「番号バッジの右側余白」を活かしつつ、はみ出した分は
   バッジの下に回り込ませたいので、ここは flex ではなく float レイアウトを採る。
   番号バッジを左に float すると、タイトル本文と末尾バッジ群は通常フローのインライン
   テキストとしてバッジ右側に流れ込み、行送りで足りなくなったら自動的に
   バッジの下に回り込む（通常のテキストの回り込み挙動）。
   align-items の概念がないので、:after に clear:both を立てて高さを担保する。 */
.products-tracks-card-titleline {
  min-width: 0;
}
.products-tracks-card-titleline::after {
  content: "";
  display: block;
  clear: both;
}
/* トラック番号バッジ：シリーズ一覧 .series-card-no と同型のアクセントピンク円バッジ。
   シリーズ側は ::before の CSS counter で連番を描画するが、トラック番号はテンプレ側で
   t.TrackNo（と SubOrder>0 の時の "-N" 枝番）を直接テキストで埋めるため、こちらは
   インラインテキストとして数字を表示する（counter は使わない）。
   サイズ／太さはタイトル文字との視覚的バランスを取り、line-height:1 で円が縦に
   間延びしないようにする。 */
.products-tracks-card-no {
  /* float:left でバッジを左に寄せ、タイトル本文と末尾バッジ群をその右側に流す。
     タイトルが長くて 1 行に収まらないときは、はみ出した文字が自動的にバッジの下
     （バッジ高さを超えた位置）に回り込む。display:flex は中の数字を円内中央に
     置くために使う（float は中身のレイアウトとは独立）。
     右隣にテキストが流れ込むので margin-right で間隔を確保、
     ベースラインを少し下げてタイトル本文の上端に視覚的に揃える（margin-top）。
     背景色はトラックの内容種別（data-kind）に応じて 3 色から選ぶ仕様。
     既定（DRAMA / RADIO / JINGLE / CHAPTER / OTHER / 不明値）は青、
     SONG はアクセントピンクの赤、BGM は緑（下記の属性セレクタで上書き）。 */
  float: left;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  margin-right: 0.5em;
  margin-top: 0.1em;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.82em;
  line-height: 1;
  white-space: nowrap;
}
/* SONG（歌）トラック：アクセントピンクの赤バッジ（既存のシリーズカード番号バッジと同色）。
   サイト全体のアクセントカラー var(--accent-pink) に統一し、歌が「主役の存在」であることを
   視覚的に強調する。 */
.products-tracks-card-no[data-kind="SONG"] {
  background: var(--accent-pink, #ec4899);
}
/* BGM（劇伴）トラック：緑バッジ。
   高彩度・中明度の緑 #22c55e（HSL 142° 70% 48%）。ピンクと並べたときに彩度・明度の
   バランスが取れ、白文字とのコントラストも WCAG AA を満たす。 */
.products-tracks-card-no[data-kind="BGM"] {
  background: #22c55e;
}
/* SONG 録音が劇伴としても扱われる「両性」トラック：
   円バッジを左上=赤（SONG）／右下=緑（BGM）の斜め分割塗りに変更し、二重性を視覚化する。
   linear-gradient(135deg, ...) で対角線（左上から右下）を境界として 2 色を境目なしで直接接続する。
   白い境界ラインを挟むと中央の白文字数字（特に "0" "8" のような閉じた字形）が境目で消えて読みにくく
   なるため、境界は色のハードエッジ（赤の終端と緑の開始位置を同じ 50% に揃える）のみで表現する。 */
.products-tracks-card-no[data-kind="SONG"][data-bgm-assigned="true"] {
  background: linear-gradient(
    135deg,
    var(--accent-pink, #ec4899) 0%,
    var(--accent-pink, #ec4899) 50%,
    #22c55e 50%,
    #22c55e 100%
  );
}
/* ISRC が登録されているトラックは円バッジに細いドット枠を重ねて「補助情報あり」を視覚化。
   バッジは <button> で、押すと ISRC ポップアップ（.isrc-popover）が開く。title="ISRC: ..." 属性の
   ホバー表示も併用する。カード全体に広がるタイトルリンクの透明オーバーレイ（z-index: 1）より
   上に置かないとホバーも押下もオーバーレイに吸われるため、カード内の他のリンクと同じ z-index: 2 に上げる。
   button の既定の枠・余白・書体は打ち消し、円バッジの見た目（.products-tracks-card-no）をそのまま使う。 */
.products-tracks-card-no.has-isrc {
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  outline: 1px dashed #cbd5e1;
  outline-offset: 2px;
}
.products-tracks-card-no.has-isrc:focus-visible {
  outline: 2px solid var(--accent-blue, #3370aa);
}
/* ISRC ポップアップ。HTML の popover で最上位レイヤーに出し、画面中央に置く（スマホでも同じ）。
   外側を押す・Esc・× で閉じる。popover 非対応ブラウザでは :popover-open の規則ごと無視され、
   既定の display: none のまま本文に紛れ込まない。 */
.isrc-popover {
  display: none;
}
.isrc-popover:popover-open {
  display: block;
  width: min(30rem, calc(100vw - 32px));
  max-height: min(70vh, 34rem);
  overflow: auto;
  margin: auto;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-family: var(--font-base);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
}
.isrc-popover::backdrop {
  background: rgba(0, 0, 0, 0.25);
}
.isrc-popover-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.isrc-popover-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.isrc-popover-head > .isrc-popover-code {
  font-size: 1.1rem;
  font-weight: 700;
}
.isrc-popover-code {
  font-family: var(--font-num);
  letter-spacing: 0.02em;
}
.isrc-popover-close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.isrc-popover-close:hover,
.isrc-popover-close:focus-visible {
  color: var(--fg);
}
.isrc-popover-heading {
  margin: 12px 0 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.isrc-popover-empty {
  margin: 0;
  color: var(--muted);
}
.isrc-popover-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.isrc-popover-list > li {
  padding: 5px 0;
  border-top: 1px dashed var(--border);
}
.isrc-popover-list > li:first-child {
  border-top: 0;
}
.isrc-popover-list a {
  color: var(--accent-blue, #3370aa);
  text-decoration: none;
}
.isrc-popover-list a:hover,
.isrc-popover-list a:focus-visible {
  text-decoration: underline;
}
.isrc-popover-meta {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}
/* 尺セル：曲尺の表示（mm:ss.f）。tabular-nums で桁を揃え、muted で他要素より少し沈める。
   表組み時代と同じ font-size（1em 据置）。LengthFraction は .micro-fraction で小数点以下を
   さらに小さい添字風に出す。 */
.products-tracks-card-length {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--muted, #64748b);
  white-space: nowrap;
  font-size: 1em;
  text-align: right;
}
/* メタ行（クレジット）はカード横幅をフルに使う 2 行目に全幅展開。
   Generator 出力 HTML の .track-meta-line をそのまま grid item として扱う。 */
.products-tracks-card-grid > .track-meta-line {
  grid-column: 1 / -1;
}

/* トラックカード内の main セル子要素（タイトル本文・サイズ/パートバッジ・メタ行）の共通スタイル。
   タイトル本文・バッジは .products-tracks-card-titleline 配下に置かれ、その先頭に float された
   番号バッジ（.products-tracks-card-no）の右側へインラインで流れ込む。メタ行は grid 全幅行。 */
.track-title-text {
  /* シリーズ一覧 TV 行の見出しスタイル（font-weight 600 / font-size 1.02em）を
     さらに一段強めた書式で、カード本文の主役として目立たせる。
     インラインテキストとして float された番号バッジの右側に流れ込み、長文時は
     バッジの下に回り込む（通常テキストの float 回り込み挙動）。 */
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.track-title-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}
.track-meta-line {
  margin-top: 3px;
  font-size: 0.82em;
  line-height: 1.55;
  color: var(--muted, #64748b);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
/* クレジットセグメント（バッジ + 名義）。複数セグメントを 1 行内で横並び連結する。
   名義テキストは ↓ で色を本文寄りに戻す（バッジに比べてやや視認性を上げる）。 */
.track-credit-segment {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.track-credit-names {
  color: var(--fg, #1f2937);
}
.track-credit-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
/* 劇伴トラックのメタ行に使う「Mナンバー」と「[メニュー名]」の小要素。 */
.track-bgm-mno {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.track-bgm-menu {
  /* opacity で muted トーンに沈めつつ、本文と並べたときの押し付けがましさを抑える。 */
}
/* 「Mナンバー [メニュー]」リンクは muted トーン継承＋下線抑止。ホバー時のみ accent カラーに切替。 */
.track-bgm-cuelink {
  color: inherit;
  text-decoration: none;
}
.track-bgm-cuelink:hover,
.track-bgm-cuelink:focus-visible {
  color: var(--accent-pink, #ec4899);
  text-decoration: underline;
}
/* 劇伴トラックのメタ行先頭に出すシリーズ略記スタンプ。ディスク内に複数シリーズ起源の劇伴が
   同居する場合（映画オールスターズ系サウンドトラック等）にだけ Generator 側が出力する。
   見た目は M ナンバーよりも控えめなインライン枠で、起源シリーズの識別補助である旨を視覚化する。 */
.track-bgm-series {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted-strong, #475569);
  background: var(--surface-2, #f3f4f6);
  white-space: nowrap;
}

/* ──────────────────── 楽曲詳細：録音バージョン × 収録 / 主題歌使用 ──────────────────── */
.song-recording {
  border-left: 3px solid #e5e7eb;
  padding-left: 12px;
  margin-top: 16px;
}
.song-recording h3 {
  margin-top: 14px;
  font-size: 1em;
}

/* 楽曲詳細の基本情報セクション・各録音セクションの歌唱者行の grid レイアウト。
   シリーズ詳細の #key-staff と同型（バッジ列：max-content / 名義列：1fr）で、
   各 .key-staff-line は display:contents で grid 親に直接子要素を流す。 */
.song-credits {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 8px;
  row-gap: 4px;
  align-items: baseline;
  margin: 8px 0 12px;
}
/* h2 を持つ section の場合は見出しを全列にスパンさせる（#key-staff と同じ扱い）。 */
.song-credits > h2 {
  grid-column: 1 / -1;
  margin: 0 0 4px;
}
/* 録音セクション内の歌唱者専用ラッパ：基本情報セクション本体より上下マージンをタイト目に。 */
.song-recording .song-credits.song-recording-vocalists-credits {
  margin: 6px 0 8px;
}
/* 表記ではメンバーを出さないユニット名義に添えるメンバー列（例：DARK ELEMENTS（竹内 浩明、…））。
   名義そのものより一段控えめにする。 */
.unit-members-hidden {
  font-size: 0.85em;
}

/* 収録商品カードリスト（歌詳細 /songs/{id}/ 各録音バージョン配下）。
   カード全域 = 1 リンクの構造で、/products/ 索引の products-card と DOM・見た目を揃える
   （ボーダー囲み、ホバー時のピンクボーダー + 微浮上、:focus-visible のアウトライン）。
   1 カードは内部 2 セル grid：
     - 左 main：商品名（太字）/ meta 行（発売日短縮 ／ 品番 ／ 収録位置）
     - 右 badge-cell：サイズ・パートのバッジ群（KindBadgesHtml の出力をそのまま受ける）。 */
.recording-tracks-card-list {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recording-tracks-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
  background: var(--bg, #fff);
  transition: border-color 150ms ease, background-color 150ms ease,
              box-shadow 150ms ease, transform 150ms ease;
}
/* カード全域リンクの内部に grobal a:hover の下線が浸透するのを抑止。
   全状態・全子孫で text-decoration:none。 */
.recording-tracks-card,
.recording-tracks-card:hover,
.recording-tracks-card:focus-visible,
.recording-tracks-card *,
.recording-tracks-card:hover *,
.recording-tracks-card:focus-visible * {
  text-decoration: none;
}
.recording-tracks-card:hover,
.recording-tracks-card:focus-visible {
  border-color: var(--accent-pink, #ec4899);
  background-color: var(--surface-2, #fff7fb);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.10);
  transform: translateY(-1px);
}
.recording-tracks-card:focus-visible {
  outline: 2px solid var(--accent-pink, #ec4899);
  outline-offset: 2px;
}
/* 3 セル grid。左端に正方形ジャケット枠（thumb）、main 列は伸縮（1fr）、badge 列はバッジ並び分だけ取る（auto）。
   gap で各セルの間に余白を入れる。 */
.recording-tracks-card-grid {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-areas: "thumb main badge";
  align-items: start;
  column-gap: 14px;
  row-gap: 6px;
  min-width: 0;
}
/* カード左端の正方形ジャケット枠。商品索引のサムネと同仕様（cover でめいっぱい・角丸クリップ・無ければグレー）。 */
.recording-tracks-card-thumb {
  grid-area: thumb;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #e5e7eb;
  flex: none;
}
.recording-tracks-card-thumb img,
.recording-tracks-card-thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recording-tracks-card-thumb-placeholder {
  background: #e5e7eb;
}
.recording-tracks-card-main {
  grid-area: main;
  min-width: 0;
}
.recording-tracks-card-title {
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* meta 行は「発売日短縮 ／ 品番 ／ 収録位置（Tr01 / 3-Tr23）」を「／」セパレータで横並び。
   全体 muted・小フォント・tabular-nums で桁を揃える。長行時は flex で自然折り返し。 */
.recording-tracks-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: 2px;
  font-size: 0.82em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.recording-tracks-card-meta-sep {
  opacity: 0.5;
}
/* badge セル：サイズ＋パートのバッジ群を縦積み or 横並びで配置（バッジ数次第）。
   バッジ自体は .recording-tracks-kind-badge クラス（Generator が組み立てる）の見た目を流用。 */
.recording-tracks-card-badge-cell {
  grid-area: badge;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

/* モバイル幅（≤640px）：左にサムネ（48px・2 行スパン）、右上にバッジ、右下に main。
   /products/ 索引のカードのモバイル時挙動と同じ areas 配置に揃える（バッジを左寄せに変更）。 */
@media (max-width: 640px) {
  .recording-tracks-card-grid {
    grid-template-columns: 48px 1fr;
    grid-template-areas:
      "thumb badge"
      "thumb main";
    column-gap: 12px;
  }
  .recording-tracks-card-thumb {
    width: 48px;
    height: 48px;
  }
  .recording-tracks-card-badge-cell {
    justify-content: flex-start;
  }
}

/* サイズ・パートのバッジ自体は Generator 側 KindBadgesHtml が
   <span class="recording-tracks-kind-badge recording-tracks-kind-size|part"> を組み立てる。
   テーブル時代から継続して使うのでクラス名は据置。 */
.recording-tracks-kind-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
/* サイズ（曲尺）バッジ：淡い緑系（recording-tracks-kind-size）。
   フル／TV size／ボーカルアルバム等のサイズ違いは全件この緑で統一する。 */
.recording-tracks-kind-badge.recording-tracks-kind-size {
  background: rgba(92, 174, 92, 0.14);
  color: #3c823c;
  border-color: rgba(92, 174, 92, 0.40);
}
/* パート（歌入り／カラオケ等）バッジ：淡い青系（recording-tracks-kind-part）。
   パート違いの目印として、サイズの緑とは色相を分けて視覚的に区別する。
   ただし「VOCAL（歌入り）」は録音物の既定状態のためバッジ自体を Generator 側で出さない
   仕様になっており、本クラスが現れるのはカラオケ・パート歌入り等の特殊版だけ。 */
.recording-tracks-kind-badge.recording-tracks-kind-part {
  background: rgba(84, 112, 214, 0.13);
  color: #3b56b8;
  border-color: rgba(84, 112, 214, 0.40);
}
/* 次回予告サイズバッジ（recording-tracks-kind-next）：パートと同じ青系の塗りで、
   通常のサイズ（緑系）とは色相を分けて「予告」だと一目で判別できるようにする。
   さらに当該歌詳細への独立リンクとしても機能するため、<a> 要素になっている前提で
   ホバー時の下線挙動を products-tracks-card 内の他の <a> と揃える
   （カード全体オーバーレイは products-tracks-card-title-link で別途張られている）。 */
.recording-tracks-kind-badge.recording-tracks-kind-next {
  background: rgba(84, 112, 214, 0.13);
  color: #3b56b8;
  border-color: rgba(84, 112, 214, 0.40);
}
a.recording-tracks-kind-badge.recording-tracks-kind-next {
  text-decoration: none;
}
a.recording-tracks-kind-badge.recording-tracks-kind-next:hover,
a.recording-tracks-kind-badge.recording-tracks-kind-next:focus-visible {
  text-decoration: underline;
}
/* NEXT トラックの「原曲: 元曲タイトル」行。トラックメタ行の上段として静かに添える muted 表現。
   元曲タイトル本体は意図的にリンク化しない（カード全体・サイズバッジ・役職名義リンク群と
   合わせると重複動線になるため）。同行は flex コンテナの .track-meta-line を継承するので、
   ラベル「原曲:」と本文を 1 行に並べる。 */
.track-meta-line-original-song {
  color: var(--muted, #6b7280);
}

/* 主題歌使用は表ではなく縦リスト型へ変更。 */
.recording-theme-usages {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recording-theme-usages li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted #e5e7eb;
}
.recording-theme-usages li:last-child {
  border-bottom: none;
}
.recording-theme-usages-series {
  font-weight: 500;
}
.recording-theme-usages-range {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  white-space: nowrap;
}
.recording-theme-usages-kind {
  font-size: 0.92em;
  color: var(--fg);
  background: rgba(233, 30, 99, 0.08);
  border-radius: 3px;
  padding: 1px 8px;
  white-space: nowrap;
}

/* /bgms/{slug}/ 劇伴詳細：cue カードリスト。1 cue = 1 カード。
   構造：ヘッダ (M番号+メニュー+尺) / スタッフバッジ行 (作曲・編曲) / 収録盤リスト。
   仮 M 番号 cue もカード装飾は通常 cue と同じで、ヘッダの主役表記だけが
   「M番号 → 初出盤トラックタイトル」に差し替わる（テンプレ側のスロット入れ替えで実現）。
   カード自体はリンク化しない。 */
.bgm-cue-card-list {
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.bgm-cue-card-list > li {
  display: block;
  list-style: none;
}
/* 外部ページ（商品詳細トラック行など）から /bgms/{slug}/#cue-XXX でジャンプしてきた際、
   sticky ヘッダの裏に潜らないよう scroll-margin-top を確保する。
   ヘッダ実高さ + バッファを見越して 110px。
   :target 擬似クラスで一瞬ハイライトして「飛び先はここ」を分かりやすく示す。 */
.bgm-cue-card-list > li[id] {
  scroll-margin-top: 110px;
}
.bgm-cue-card-list > li[id]:target .bgm-cue-card {
  animation: cue-card-target-flash 2.4s ease-out;
}
@keyframes cue-card-target-flash {
  0%   { background-color: var(--hl, #fff7d6); }
  100% { background-color: transparent; }
}
.bgm-cue-card {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--bg, #fff);
  min-width: 0;
  overflow: hidden;
}

/* カードヘッダ：1 行目=M番号+尺、2 行目=メニュー の固定 2 行 grid。
   尺は右上に固定（grid-row:1; column:2; justify-self:end）。 */
.bgm-cue-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 14px;
  min-width: 0;
}
.bgm-cue-mno {
  /* M番号は cue カードの主役。本文色・太字・大きめ（基準 1em の倍）。
     1 行目の左列。長文時は折り返しを許可。 */
  grid-row: 1;
  grid-column: 1;
  font-size: 2em;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
  min-width: 0;
}
.bgm-cue-length {
  /* 尺は常に 1 行目の右上固定。M番号の長さに関わらずスペースを確保する。 */
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  align-self: start;
  font-size: 1.15em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg);
  /* 1 行目のベースラインがメインの M番号文字に揃うよう、ちょい下げ調整。 */
  margin-top: 0.3em;
}
.bgm-cue-menu {
  /* メニュータイトル（曲名）。M番号を主役にする方針なので、控えめに muted で通常字。
     常に 2 行目、全幅で表示。長文時の折り返しを許可。 */
  grid-row: 2;
  grid-column: 1 / -1;
  font-weight: 400;
  color: var(--muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* スタッフバッジ行：劇伴一覧と同じ .staff-badges-row レイアウトを継承。
   カード文脈での微調整として、上下余白を 1 段詰める。 */
.bgm-cue-card-staff {
  margin-top: 6px;
  font-size: 0.88em;
  line-height: 1.7;
  min-width: 0;
}
/* 人物名（staff-name）：プレーンテキスト（<span>）と人物リンク（<a>）の両ケースを同じ見た目に。
   リンクのみホバー時に下線を出して「クリック可能」を示す。 */
.bgm-cue-card-staff .staff-name {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.bgm-cue-card-staff a.staff-name:hover,
.bgm-cue-card-staff a.staff-name:focus-visible {
  text-decoration: underline;
}

/* 収録盤リスト。1 行 1 収録盤、行全体が 1 つのリンク（商品詳細ページへ）。
   青色のリンク表示は撤廃し、本文色のテキストとして並べる。ホバー時のみ控えめに
   背景色を当てて「クリック可能」を示す。 */
.bgm-cue-card-recordings {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 0.88em;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bgm-cue-card-recordings > li {
  display: block;
  list-style: none;
  /* 長文の disc.title_short やトラックタイトルが続く場合に折り返せるよう、min-width: 0。 */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* 行全体リンク。block 表示で行全幅をヒット領域にし、テキスト色・装飾は控えめに。 */
.bgm-rec-line {
  display: block;
  color: var(--fg);
  text-decoration: none;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 4px;
  transition: background-color 120ms ease;
}
.bgm-rec-line:hover,
.bgm-rec-line:focus-visible {
  background-color: var(--surface-2, #fff7fb);
  text-decoration: none;
}
/* 初回盤の行に添える再発売盤の同じトラック（「再発売盤 無印 OST1(再)-Tr.3」）。行の下に一段下げて小さく出し、再発売盤の該当トラックへリンクする。 */
.bgm-rec-reissue,
.recording-tracks-reissue {
  display: inline-block;
  font-size: 0.88em;
  text-decoration: none;
}
.bgm-rec-reissue {
  margin-left: 1em;
}
.recording-tracks-reissue {
  margin: 4px 0 0 14px;
}
.bgm-rec-reissue:hover,
.bgm-rec-reissue:focus-visible,
.recording-tracks-reissue:hover,
.recording-tracks-reissue:focus-visible {
  text-decoration: underline;
}
/* 「OST1-Tr.2」部分。等幅数字でやや muted。タイトル「サブタイトル」より一段下げる。 */
.bgm-rec-disc-track {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-right: 0.4em;
}
.bgm-rec-title {
  color: var(--fg);
}

/* 未収録の cue：シンプルな muted ラベル。 */
.bgm-cue-card-unrecorded {
  margin-top: 6px;
  font-size: 0.88em;
}
.bgm-cue-unrecorded-label {
  color: var(--muted);
}

/* 欠番の cue（番号はあるが音源が制作されていない）：グレー地・点線枠で音源のあるカードと区別し、
   M 番号も muted に落とす。右上（通常は尺の位置）に「欠番」バッジを置く。
   メニューが判明している欠番だけメニュー行が出る。 */
.bgm-cue-card.is-missing {
  background: var(--th-bg);
  border-style: dashed;
}
.bgm-cue-card.is-missing .bgm-cue-mno {
  color: var(--muted);
}
.bgm-cue-missing-badge {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  align-self: start;
  margin-top: 0.3em;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.85em;
  white-space: nowrap;
}

/* モバイル幅：基本構造（M番号 + 尺の 1 行目、メニューの 2 行目）はそのまま維持。
   M番号フォントだけ画面幅とのバランスを取って一段抑え、尺サイズも調整する。 */
@media (max-width: 640px) {
  .bgm-cue-mno {
    font-size: 1.7em;
  }
  .bgm-cue-length {
    font-size: 1.05em;
  }
}

/* ──────────────────── シリーズ詳細：劇伴一覧 ──────────────────── */
.bgm-cues-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.bgm-cues-table th,
.bgm-cues-table td {
  padding: 4px 10px;
  vertical-align: baseline;
}
.bgm-cues-table th.col-mno,
.bgm-cues-table td.col-mno {
  width: 11em;
  font-family: var(--font-num);
  white-space: nowrap;
}
.bgm-cues-table th.col-title,
.bgm-cues-table td.col-title { width: auto; }
.bgm-cues-table th.col-composer,
.bgm-cues-table td.col-composer { width: 11em; }
.bgm-cues-table th.col-arranger,
.bgm-cues-table td.col-arranger { width: 11em; }
.bgm-cues-table th.col-length,
.bgm-cues-table td.col-length {
  width: 5em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bgm-cues-table th.col-session,
.bgm-cues-table td.col-session { width: 12em; }
.bgm-cues-table th.col-usecount,
.bgm-cues-table td.col-usecount {
  width: 6em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ──────────────────── エピソード詳細：使用音声 ──────────────────── */
.episode-use-part {
  margin-top: 14px;
  margin-bottom: 4px;
  font-size: 1em;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 2px;
}
.episode-use-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 10px;
}
.episode-use-table th,
.episode-use-table td {
  padding: 4px 10px;
  vertical-align: baseline;
}
.episode-use-table th.col-no,
.episode-use-table td.col-no {
  width: 4em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.episode-use-table th.col-kind,
.episode-use-table td.col-kind { width: 5em; }
.episode-use-table th.col-title,
.episode-use-table td.col-title { width: auto; }
.episode-use-table th.col-sub,
.episode-use-table td.col-sub {
  width: 18em;
  font-size: 0.92em;
}
.episode-use-table th.col-scene,
.episode-use-table td.col-scene {
  width: 14em;
  font-size: 0.92em;
}
.episode-use-table th.col-duration,
.episode-use-table td.col-duration {
  width: 5em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ──────────────────── サイト内検索ボックス（ヘッダ右端） ──────────────────── */
/* ヘッダ 2 行構造：上段=タイトル+検索、下段=グローバルナビ。
   ヘッダ高さをビューポート幅によらず ≒95px に固定するため、scroll-margin-top 110px が機能する。 */
.site-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-header-bottom {
  /* 上段との間に小さな gap を取る（border-bottom など使わず純粋な間隔のみ）。 */
  margin-top: 6px;
}
.site-search {
  position: relative;
  flex-shrink: 0;
  width: 16em;
}
#site-search-input {
  width: 100%;
  /* 右パディングはショートカットヒントチップ（.site-search-kbd）の逃げ。 */
  padding: 6px 30px 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.92em;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#site-search-input:focus {
  outline: none;
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.15);
}
/* キーボードショートカットのヒントチップ（「/」キー）。入力開始（focus-within）で消す。
   モバイルはソフトキーボード前提なので常時非表示（下の 768px MQ）。 */
.site-search-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--table-stripe);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  pointer-events: none;
}
.site-search:focus-within .site-search-kbd {
  display: none;
}
@media (max-width: 768px) {
  .site-search-kbd { display: none; }
  /* iOS Safari はフォーカス時に 16px 未満の入力欄を自動ズームするため、モバイルでは 16px を確保する。 */
  #site-search-input { font-size: 16px; }
}

/* 検索結果ドロップダウン。input 直下に absolute 配置。 */
.site-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 28em;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 1000;
}
.site-search-results.open {
  display: block;
}

.site-search-result-item {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 4px 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  align-items: baseline;
}
.site-search-result-item:last-child {
  border-bottom: none;
}
.site-search-result-item:hover,
.site-search-result-item.selected {
  background: #fdf2f8;
}

.site-search-result-kind {
  font-size: 0.78em;
  background: #f3f4f6;
  color: #4b5563;
  border-radius: 3px;
  padding: 1px 6px;
  text-align: center;
  white-space: nowrap;
  align-self: center;
}
/* 種別別の色分け（軽めに） */
.site-search-result-kind-series    { background: #fef3c7; color: #92400e; }
.site-search-result-kind-episode   { background: #fef9c3; color: #854d0e; }
.site-search-result-kind-precure   { background: #fce7f3; color: #9d174d; }
.site-search-result-kind-character { background: #fae8ff; color: #86198f; }
.site-search-result-kind-person    { background: #dbeafe; color: #1e40af; }
.site-search-result-kind-company   { background: #d1fae5; color: #065f46; }
.site-search-result-kind-song      { background: #e0e7ff; color: #3730a3; }
.site-search-result-kind-product   { background: #ffedd5; color: #9a3412; }

.site-search-result-title {
  font-size: 0.95em;
  word-break: break-word;
}
.site-search-result-sub {
  grid-column: 2;
  font-size: 0.82em;
  color: #6b7280;
}

.site-search-no-results {
  padding: 12px;
  font-size: 0.9em;
  color: #6b7280;
  text-align: center;
}

/* モバイル：mobile-nav.js が .site-search をオーバーレイ内へ DOM 移動する。
   オーバーレイ内のときだけ詳細度 (0,2,0) で display:none を打ち消して再表示し、
   パネル幅いっぱい・結果ドロップダウンも 100% 幅に整える。 */
@media (max-width: 768px) {
  .mobile-nav-overlay-search .site-search {
    display: block;
    width: 100%;
  }
  .mobile-nav-overlay-search .site-search-results {
    width: 100%;
    max-width: 100%;
    right: auto;
    left: 0;
  }
  .site-search-results {
    width: 100%;
  }
}

/* サブタイトルガード：未放送話（前話の予告が未放送）のサブタイトルをぼかす。
   実テキストは常に DOM 上に存在し、subtitle-embargo.js が現在時刻・閲覧者設定に応じて
   is-revealed クラスを付け外しするだけ（サーバー側は判定を一切行わない）。
   リンクの一部として使われることも多いため pointer-events は変更せずクリックは常に通す。 */
.ep-subtitle-guard {
  filter: blur(6px);
  user-select: none;
  transition: filter 0.15s ease;
}
/* ルビ（rt）はインライン要素に掛けた filter の適用対象から外れるブラウザがあり、
   サブタイトル本体だけがぼけて振り仮名は素通しで読めてしまう。ルビだけで漢字が
   割れる（例「二人の過去」→「ふたり／か／こ」）ため、rt にも個別にぼかしを掛ける。
   親の filter も効くブラウザでは二重に掛かるが、伏せる目的は満たすので許容する。 */
.ep-subtitle-guard rt {
  filter: blur(4px);
  transition: filter 0.15s ease;
}
.ep-subtitle-guard.is-revealed,
.ep-subtitle-guard.is-revealed rt {
  filter: none;
  user-select: auto;
}
/* 解禁前の話のサブタイトル欄。画像はぼかせないので、解禁される（または先の題を見る設定にする）までは画像を隠して
   ぼかした文字を出し、解禁されたら画像に切り替える。 */
.subtitle-telop-guard .subtitle-telop-image {
  display: none;
}
.subtitle-telop-guard.is-revealed .subtitle-telop-image {
  display: block;
}
.subtitle-telop-guard.is-revealed .subtitle-telop-fallback {
  display: none;
}

/* サブタイトル解禁の初回確認ダイアログ。mobile-nav-overlay と同じ「hidden 属性 + 暗幕 + パネル」
   構成だが、こちらは中央配置の確認モーダルのため display:flex を明示指定する必要がある
   （mobile-nav-overlay は子要素が全て position:absolute のため親に display 指定が不要で、
   hidden 属性由来の既定 display:none がそのまま効いていた）。
   display:flex をクラスセレクタに直接書くと [hidden]（詳細度 0,1,0）と同点になり、
   同点時は作者スタイルが UA スタイルより優先されるため hidden 属性が無視されてしまう
   （実際に本番でダイアログが常時表示になる事故を起こした）。
   [hidden] を組み合わせたセレクタ（詳細度 0,2,0）で確実に上書きする。 */
.subtitle-embargo-dialog {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.subtitle-embargo-dialog[hidden] {
  display: none;
}
.subtitle-embargo-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.subtitle-embargo-dialog-panel {
  position: relative;
  width: min(92vw, 420px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  padding: 24px;
}
.subtitle-embargo-dialog-title {
  margin: 0 0 10px;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.5;
}
.subtitle-embargo-dialog-body {
  margin: 0 0 20px;
  font-size: 0.9em;
  color: var(--muted);
  line-height: 1.7;
}
.subtitle-embargo-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.subtitle-embargo-dialog-btn {
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  padding: 8px 18px;
  font-size: 0.92em;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.subtitle-embargo-dialog-btn:hover {
  border-color: var(--accent-pink);
}
.subtitle-embargo-dialog-btn-primary {
  background: var(--accent-pink);
  border-color: var(--accent-pink);
  color: #fff;
}
.subtitle-embargo-dialog-btn-primary:hover {
  background: #d81a58;
  border-color: #d81a58;
}
/* ダイアログ表示中は背面スクロールを抑止（mobile-nav-open と同じ流儀）。 */
body.subtitle-embargo-dialog-open {
  overflow: hidden;
}

/* 統計索引（/stats/subtitles/・/stats/episodes/）の横長カード。
   1 列スタック、左ボーダー 4px 常時確保、ホバーでアクセントピンクに変色。 */
.stats-landing-list {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stats-landing-list li {
  margin: 0;
  padding: 0;
}
.stats-landing-link {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--border);
  /* 左ボーダーは常に 4px 確保（ホバー時は色だけ変える）。
     幅を変えないことで隣のカードへのレイアウト揺れを起こさない。 */
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--bg, #fff);
  color: inherit;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.stats-landing-link:hover,
.stats-landing-link:focus-visible {
  border-color: var(--accent-pink, #ec4899);
  background-color: var(--surface-2, #fff7fb);
}
.stats-landing-link:focus-visible {
  outline: 2px solid var(--accent-pink, #ec4899);
  outline-offset: 2px;
}
/* グローバルの a:hover { text-decoration: underline } を打ち消す。
   カード全域がリンクなので、文字側に下線は付けない。 */
.stats-landing-link,
.stats-landing-link:hover,
.stats-landing-link:focus-visible,
.stats-landing-link *,
.stats-landing-link:hover *,
.stats-landing-link:focus-visible * {
  text-decoration: none;
}
.stats-landing-link-title {
  display: block;
  font-weight: 600;
  color: var(--accent-pink, var(--fg));
  margin-bottom: 4px;
}
.stats-landing-link-desc {
  display: block;
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.55;
}

/* ──────────────────── 統計：文字ランキング（縦に長いシンプル表） ──────────────────── */
.stats-char-ranking-table {
  width: auto;
  min-width: 24em;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.stats-char-ranking-table th,
.stats-char-ranking-table td {
  padding: 4px 12px;
  vertical-align: baseline;
  border-bottom: 1px solid #f3f4f6;
}
.stats-char-ranking-table th.col-rank,
.stats-char-ranking-table td.col-rank {
  width: 4em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.stats-char-ranking-table th.col-char,
.stats-char-ranking-table td.col-char {
  width: 5em;
  text-align: center;
  font-size: 1.1em;
}
.stats-char-ranking-table th.col-count,
.stats-char-ranking-table td.col-count {
  width: 7em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.stats-char-ranking-table td.col-char code {
  background: #fdf2f8;
  padding: 2px 8px;
  border-radius: 3px;
}

/* ──────────────────── 統計：エピソード単位ランキング共通 ──────────────────── */
.stats-episode-ranking-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.stats-episode-ranking-table th,
.stats-episode-ranking-table td {
  padding: 4px 10px;
  vertical-align: baseline;
  border-bottom: 1px dotted #e5e7eb;
}
.stats-episode-ranking-table th.col-rank,
.stats-episode-ranking-table td.col-rank {
  width: 3.5em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stats-episode-ranking-table th.col-series,
.stats-episode-ranking-table td.col-series {
  width: 16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-episode-ranking-table th.col-epno,
.stats-episode-ranking-table td.col-epno {
  width: 5em;
  white-space: nowrap;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.stats-episode-ranking-table th.col-title,
.stats-episode-ranking-table td.col-title {
  width: auto;
}
.stats-episode-ranking-table th.col-value,
.stats-episode-ranking-table td.col-value {
  width: 7em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 統計：エピソード単位ページの脱テーブルレイアウト。
   1 行 = 左ブロック（順位+指標値）／右ブロック（シリーズ+年度、第N話+放送日+サブタイトル）。
   同率順位は順位を空文字、カラムは固定幅。アバンスキップ回 (.no-rank) は左ブロック省略。 */
.stats-ep-list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
}
.stats-ep-row {
  display: grid;
  grid-template-columns: 12em 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dotted #e5e7eb;
}
.stats-ep-row:last-child { border-bottom: none; }
.stats-ep-row.no-rank { grid-template-columns: 1fr; }
/* 左ブロック：順位（固定幅・右寄せ）＋指標値を横並び。空順位でも幅を保ち全行整列。
   淡いアクセント地＋左アクセントバー＋角丸の小パネルにして、数字列を「カード」として
   おしゃれに見せる。1〜3 位の金銀銅装飾は持たず全行同一意匠（同率順位は順位だけ空白）。 */
.stats-ep-rank {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(233, 30, 99, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 4px 10px 10px 4px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.77em;
  line-height: 1.1;
}
.stats-ep-rank-no {
  text-align: right;
  color: var(--accent);
  font-weight: 700;
}
.stats-ep-rank-val {
  text-align: right;
  color: var(--fg);
  font-weight: 700;
  font-size: 0.74em;
  white-space: nowrap;
}
.stats-ep-body { min-width: 0; }
.stats-ep-series {
  font-size: 0.95em;
  margin-bottom: 5px;
}
.stats-ep-year {
  color: var(--muted);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
/* 下段：第N話（固定幅・右寄せでサブタイトル開始位置を全行整列）＋サブタイトル。放送日は出さない。 */
.stats-ep-line2 {
  display: grid;
  grid-template-columns: 3.9em 1fr;
  gap: 12px;
  align-items: baseline;
}
.stats-ep-line2 .ep-row-no-date {
  text-align: right;
}
.stats-ep-line2 .ep-row-no {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.stats-ep-title {
  font-weight: 600;
  color: var(--fg);
  line-height: 1.6;
}
.stats-ep-title:hover { text-decoration: underline; }
.stats-ep-title ruby rt {
  font-size: 0.55em;
  color: var(--muted);
}
/* 使用文字 TOP100：左は共通の stats-ep-rank パネル（順位＋出現回数）、右は対象文字を
   <li> 高さに迫る超特大で表示。記号・かな・漢字で字幅が異なり左寄りに見えるため、
   正方形セルを置きその中で上下左右ともに中央寄せして全行の見え方を揃える。 */
.stats-char-glyph {
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8em;
  line-height: 1;
  color: var(--fg);
  font-weight: 600;
}
/* 記号出現回数・初使用エピソード：左は出現回数のみ（順位なし）なのでパネルの順位カラムを
   詰めた value-only バリアント。1 行＝[出現回数パネル][大きな記号グリフ][初使用エピソード]。
   初使用回の話数は「第N話 (YYYY.M.D)」と日付併記で幅が要るため、この行だけ広めに取る。 */
.stats-ep-rank.value-only {
  grid-template-columns: 1fr;
}
.stats-symbol-row {
  grid-template-columns: 6.5em 4.6em 1fr;
}
.stats-symbol-row .stats-ep-line2 {
  grid-template-columns: 5em 3.6em 1fr;
  gap: 6px;
  align-items: baseline;
}
/* 初使用エピソードの下段は「放送日 → 第N話 → サブタイトル」の 3 カラムを固定幅で
   全行ぴったり整列。放送日＝左寄せ（エピソード一覧と同じ .ep-row-date：0.88em・muted・非太字）、
   第N話＝右寄せ（.ep-row-no：muted）、サブタイトル＝左寄せ。 */
.stats-symbol-row .stats-ep-line2 .ep-row-date {
  text-align: left;
  font-weight: 400;
}
.stats-symbol-row .stats-ep-line2 .ep-row-no {
  text-align: right;
}
/* 話数 → サブタイトルの間隔だけ広げる（grid の gap は全カラム共通のため、
   放送日↔話数は 6px 据え置きのまま、サブタイトル側に左マージンを足して倍にする）。 */
.stats-symbol-row .stats-ep-line2 .stats-ep-title {
  margin-left: 6px;
}
/* スマホ幅：左ブロックと下段を縦積みへ。順位・指標値は横並びのまま左寄せ。 */
@media (max-width: 640px) {
  .stats-symbol-row {
    grid-template-columns: 1fr;
  }
  .stats-symbol-row .stats-ep-line2 {
    grid-template-columns: 1fr;
  }
  .stats-ep-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .stats-ep-rank {
    grid-template-columns: 2.4em auto;
    justify-self: start;
    width: fit-content;
  }
  .stats-ep-line2 {
    grid-template-columns: 3.9em 1fr;
    gap: 8px;
  }
  .stats-ep-line2 .ep-row-no-date {
    text-align: left;
  }
}

/* ──────────────────── 統計：シリーズ別文字種別比率 ──────────────────── */
.stats-by-series-types-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.stats-by-series-types-table th,
.stats-by-series-types-table td {
  padding: 6px 10px;
  vertical-align: baseline;
  border-bottom: 1px solid #f3f4f6;
}
.stats-by-series-types-table th.col-series,
.stats-by-series-types-table td.col-series {
  width: 18em;
  text-align: left;
}
.stats-by-series-types-table th.col-num,
.stats-by-series-types-table td.col-num {
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ──────────────────── 統計：シリーズ別記号集計（横スクロール） ──────────────────── */
.stats-symbols-scroll {
  overflow-x: auto;
}
/* 統計のシリーズ別の表（ランキング・文字種別・パート尺など）。列が多くスマホの幅に収まらないので、
   表だけを横スクロールさせ、ページ全体を横にはみ出させない。 */
.stats-table-scroll {
  overflow-x: auto;
}
.stats-by-series-symbols-table {
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.stats-by-series-symbols-table th,
.stats-by-series-symbols-table td {
  padding: 4px 8px;
  vertical-align: baseline;
  border-bottom: 1px solid #f3f4f6;
  border-right: 1px dotted #e5e7eb;
}
.stats-by-series-symbols-table th.col-series,
.stats-by-series-symbols-table td.col-series {
  width: 16em;
  white-space: nowrap;
}
.stats-by-series-symbols-table th.col-sym,
.stats-by-series-symbols-table td.col-sym {
  min-width: 2.5em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────── 統計：シリーズ別 TOP5 文字 ──────────────────── */
.stats-by-series-topchars-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.stats-by-series-topchars-table th,
.stats-by-series-topchars-table td {
  padding: 6px 10px;
  vertical-align: baseline;
  border-bottom: 1px solid #f3f4f6;
}
.stats-by-series-topchars-table th.col-series,
.stats-by-series-topchars-table td.col-series {
  width: 18em;
}
.stats-by-series-topchars-table td.col-topchar {
  text-align: center;
}
.stats-by-series-topchars-table td.col-topchar code {
  background: #fdf2f8;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 4px;
}

/* ──────────────────── 統計：シリーズ別パート尺 ──────────────────── */
.stats-by-series-group {
  margin-top: 18px;
}
.stats-by-series-parts-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 12px;
}
.stats-by-series-parts-table th,
.stats-by-series-parts-table td {
  padding: 4px 10px;
  vertical-align: baseline;
  border-bottom: 1px dotted #e5e7eb;
}
.stats-by-series-parts-table th.col-part,
.stats-by-series-parts-table td.col-part {
  width: 12em;
}
.stats-by-series-parts-table th.col-num,
.stats-by-series-parts-table td.col-num {
  width: 7em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────── シリーズ詳細：主要スタッフ表 ──────────────────── */
.key-staff-role {
  margin-top: 14px;
  margin-bottom: 4px;
  font-size: 1em;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 2px;
}
.key-staff-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.key-staff-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.key-staff-name { font-size: 0.98em; }
.key-staff-count {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.88em;
}

/* ──────────────────── 統計索引（役職別・総合・声優） ──────────────────── */
.stats-overview-list {
  margin: 8px 0 16px;
  padding-left: 1.2em;
}
.stats-overview-list li {
  margin: 4px 0;
}

.role-index-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.role-index-table th,
.role-index-table td {
  padding: 5px 10px;
  vertical-align: baseline;
}
.role-index-table th.col-rolename,
.role-index-table td.col-rolename { width: auto; }
.role-index-table th.col-kind,
.role-index-table td.col-kind { width: 11em; font-size: 0.9em; }
.role-index-table th.col-pcount,
.role-index-table td.col-pcount,
.role-index-table th.col-ccount,
.role-index-table td.col-ccount {
  width: 6em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ──────────────────── ランキング表（役職別・総合・声優共通） ──────────────────── */
.role-rank-table,
.voice-cast-rank-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
}
.role-rank-table th,
.role-rank-table td,
.voice-cast-rank-table th,
.voice-cast-rank-table td {
  padding: 5px 10px;
  vertical-align: baseline;
}
.role-rank-table th.col-rank,
.role-rank-table td.col-rank,
.voice-cast-rank-table th.col-rank,
.voice-cast-rank-table td.col-rank {
  width: 4em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.role-rank-table th.col-name,
.role-rank-table td.col-name { width: auto; }
.role-rank-table th.col-episodes,
.role-rank-table td.col-episodes,
.role-rank-table th.col-series,
.role-rank-table td.col-series {
  width: 8em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.role-rank-table th.col-breakdown,
.role-rank-table td.col-breakdown { width: 32em; font-size: 0.92em; }
.breakdown-item { white-space: nowrap; }

.voice-cast-rank-table th.col-name,
.voice-cast-rank-table td.col-name { width: auto; }
.voice-cast-rank-table th.col-episodes,
.voice-cast-rank-table td.col-episodes,
.voice-cast-rank-table th.col-charcount,
.voice-cast-rank-table td.col-charcount {
  width: 7em;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.voice-cast-rank-table th.col-charpreview,
.voice-cast-rank-table td.col-charpreview { width: 24em; font-size: 0.92em; }

/* ──────────────────── ホームページ：拡充セクション ──────────────────── */
.home-section {
  margin-top: 32px;
}
.home-section-anniversary {
  border-left: 4px solid #ec4899;
  padding: 8px 16px 12px 16px;
  background: #fdf2f8;
  border-radius: 0 4px 4px 0;
}
.home-section-anniversary h2 {
  color: #be185d;
}

/* エピソードリスト（最新 / 次回予告 共通） 4 要素（日付・シリーズ名・年・エピソードタイトル）を明示的な grid-row/grid-column で配置する： row 1：[日付] [シリーズ名（auto 幅）] [年（justify-self: start でシリーズ名の真横に貼り付け）] row 2：エピソー */
.home-episode-list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
}
.home-episode-list li {
  display: grid;
  grid-template-columns: 11em auto 1fr;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 6px 4px;
  border-bottom: 1px dotted #e5e7eb;
  align-items: baseline;
}
.home-episode-list .home-episode-date {
  grid-column: 1;
  grid-row: 1;
}
.home-episode-list .home-episode-series {
  grid-column: 2;
  grid-row: 1;
  max-width: 18em;
}
.home-episode-list .series-year {
  /* col 3（1fr）の左端に貼り付け → auto 幅の col 2（シリーズ名）のすぐ右隣に来る。 */
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  white-space: nowrap;
}
.home-episode-list .home-episode-title {
  /* row 2 はシリーズ名列の左端から末尾までスパン。col 1（日付ぶん）は空けて視覚的にインデント。 */
  grid-column: 2 / -1;
  grid-row: 2;
}
.home-episode-date {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  white-space: nowrap;
}
.home-episode-series {
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-episode-title {
  font-size: 0.98em;
}

/* 記念日リスト（今日の・今週の）：1 件 = 1 カード（白背景・薄ボーダー・縦積み）。
   カード全域 = <a> でラップし、クリック先は ep ならエピソード詳細、cb ならキャラ詳細、
   pb なら人物詳細。クレジットカード / 楽曲カードと同じ流儀。
   メタ行（label + シリーズ + 年）と main 行（ep-row もしくは誕生日バッジ）を縦に並べる。 */
.home-anniversary-list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-anniversary-card {
  list-style: none;
}
.home-anniversary-card-link {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.home-anniversary-card-link:hover,
.home-anniversary-card-link:focus-visible {
  border-color: var(--accent-pink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  /* グローバル a:hover { text-decoration: underline } をカード全域で抑止。 */
  text-decoration: none;
}
/* カード内 .ep-row-title はグローバルに :hover で下線を引く規約のため、
   カードホバー時に内部だけ下線が出るのをスコープ限定で打ち消す。 */
.home-anniversary-card-link:hover .ep-row-title,
.home-anniversary-card-link:focus-visible .ep-row-title {
  text-decoration: none;
}
/* メタ行：「N年前」ラベル + シリーズ名 + (放送年度) を横並びで詰める。
   行幅を超えるときは折り返し可。シリーズ名はエリプシスせず素直に折り返す
   （カード内なので幅は確保できる）。 */
.home-anniversary-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.home-anniversary-label {
  font-weight: 500;
  color: #be185d;
  font-size: 0.92em;
  white-space: nowrap;
}
.home-anniversary-series {
  font-size: 0.95em;
}
.home-anniversary-card-meta .series-year {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  white-space: nowrap;
}
/* main 行：エピソードカードでは ep-row、誕生日カードではバッジ群を詰める。 */
.home-anniversary-card-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.home-anniversary-person-name {
  font-weight: 600;
}

/* エピソードカード内の ep-row：/episodes/・シリーズ詳細と同じ共通レイアウト
   （第N話 + 放送日 ／ サブタイトルの 2 列）をカード内でそのまま使う。 */
.home-anniversary-card .ep-row {
  display: block;
  padding: 0;
  border-bottom: none;
  width: 100%;
}
.home-anniversary-card .ep-row-main {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.home-anniversary-card .ep-row-main > .ep-row-title {
  display: block;
  min-width: 0;
  font-weight: 600;
}
.home-anniversary-card .ep-row-no-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
}
.home-anniversary-card .ep-row-no-date .ep-row-date {
  text-align: right;
  margin-top: 1px;
}
@media (max-width: 640px) {
  /* 狭幅：1 列縦積みに倒すが、サブタイトル（main 情報）を上に、
     「第N話 / 放送日」（meta 情報）を下に並べる視覚階層に切り替える
     （order で並べ替え、第N話 + 日付は小字 muted で添える）。 */
  .home-anniversary-card .ep-row-main {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .home-anniversary-card .ep-row-main > .ep-row-title {
    order: 0;
  }
  .home-anniversary-card .ep-row-main > .ep-row-no-date {
    order: 1;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    font-size: 0.88em;
    color: var(--muted);
  }
  .home-anniversary-card .ep-row-no-date .ep-row-no {
    font-weight: 500;
  }
  .home-anniversary-card .ep-row-no-date .ep-row-date {
    margin-top: 0;
  }
}

/* 商品リスト（新着 / 間もなく発売 共通） 種別ラベル（「オリジナル・サウンドトラック」「ボーカルアルバム」等）の kind 列は幅 9em。 */
.home-product-list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
}
.home-product-list li {
  display: grid;
  grid-template-columns: 11em 9em 1fr;
  gap: 12px;
  padding: 6px 4px;
  border-bottom: 1px dotted #e5e7eb;
  align-items: baseline;
}
.home-product-date {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  white-space: nowrap;
}
.home-product-kind {
  font-size: 0.92em;
  /* kind 列内は折り返し可能（white-space: nowrap にしない）。 */
  line-height: 1.4;
}
.home-product-title {
  font-size: 0.98em;
}

/* ホームの商品カードグリッド（発売予定 / 新着）。
   PC は minmax(240px,1fr) で 3 列前後、スマホ 1 列。
   カード本体 a は商品詳細、購入導線 a は Amazon 外部。 */
.home-product-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 8px 0 16px;
}
.home-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.home-product-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.home-product-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  flex: 1 1 auto;
}
/* カード内 a はホバー時も下線なし。カード浮き上がり (box-shadow/transform) で十分視認可能。
   グローバル a:hover の underline をスコープ限定の !important で打ち消す。 */
.home-product-card a,
.home-product-card a:hover,
.home-product-card a:focus,
.home-product-card a:active {
  text-decoration: none !important;
}
/* サムネ枠：正方形比率、ジャケットは contain でレターボックス（カット禁止）。
 * Amazon 由来は縦長 BD/DVD ケースもあり得るため contain で全表示。 */
.home-product-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #fef3f7 0%, #fff8ec 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-product-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.home-product-card-noimage {
  color: #9ca3af;
  font-size: 0.95em;
  letter-spacing: 0.04em;
}
/* 状態バッジ（「予約受付中」「本日発売」「発売中」）。サムネ右上に重ねる。
 * 発売予定は淡ピンク、新着は淡グリーンで色分けして視認性を上げる。 */
.home-product-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.home-product-card-badge-upcoming {
  background: #ec4899;
}
.home-product-card-badge-released {
  background: #10b981;
}
.home-product-card-body {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}
.home-product-card-title {
  font-size: 0.98em;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  /* 長いタイトルは 3 行までで省略（…）。display: -webkit-box は WebKit/Blink 系で広くサポート。 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-product-card-meta {
  font-size: 0.86em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
}
.home-product-card-date {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.home-product-card-countdown {
  font-size: 0.84em;
  color: #ec4899;
  font-weight: 500;
}
.home-product-card-kind,
.home-product-card-series {
  font-size: 0.88em;
}
.home-product-card-price {
  font-size: 0.9em;
  margin: 0;
  color: #374151;
  font-variant-numeric: tabular-nums;
}
/* 購入導線（カード下端）：横 3 列等幅 grid。4 ボタン時は 4 個目が次行に単独折り返し。
   カード a と独立した <ul>><a> なので内側リンクが優先される。 */
.home-product-card-links {
  list-style: none;
  margin: 0;
  padding: 8px 12px 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-top: 1px dotted #e5e7eb;
}
.home-product-card-cta {
  display: block;
  text-align: center;
  padding: 6px 6px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s ease;
}
.home-product-card-cta:hover {
  opacity: 0.85;
}
.home-product-card-cta-amazon {
  background: #ff9900;
}

/* スマホ向け：カードは 1 列に縦積み、行内のメタ行はそのまま折返し。 */
@media (max-width: 640px) {
  .home-product-cards {
    grid-template-columns: 1fr;
  }
}

/* データベース統計 */
.home-db-stats {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
  gap: 8px;
}
.home-db-stats li {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home-db-stats-label {
  font-size: 0.88em;
  color: #6b7280;
}
.home-db-stats-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.6em;
  font-weight: 500;
  margin-top: 4px;
}

/* スマホ向け：グリッド列を縦積みに */
@media (max-width: 640px) {
  .home-episode-list li,
  .home-anniversary-list li,
  .home-product-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  /* デスクトップで explicit grid-column/grid-row を指定した .home-episode-list 各子要素を、縦積みフォールバックでは自動配置に戻す。 */
  .home-episode-list .home-episode-date,
  .home-episode-list .home-episode-series,
  .home-episode-list .series-year,
  .home-episode-list .home-episode-title {
    grid-column: auto;
    grid-row: auto;
    max-width: none;
  }
}

/* シリーズ詳細・一覧のスタイル */

/* ──────────────── シリーズ一覧テーブル：映画行・子作品テキスト ──────────────── */
/* TV 行と同等の余白で映画セクションも揃える */
.series-tv-table tr.movie-row td {
  padding-top: 6px;
}
.series-tv-table tr.movie-row td.col-title {
  font-size: 0.98em;
}
/* 子作品（HasOwnPage=false）のリンクなしテキスト。リンク色は使わず本文色でそのまま表示 */
.series-tv-table tr.child-row td .child-title {
  color: var(--fg);
}

/* 映画セクションの子作品（併映短編・MOVIE_SHORT）タイトルセル内の箇条書き。 */
.series-tv-table tr.movie-child-row td.col-title-child .movie-child-list {
  list-style: disc;
  margin: 0;
  /* td.col-title-child 自身に既存ルールで padding-left:1.6em（親タイトルより 字下げ）が当たっている。 */
  padding-left: 1.2em;
}
.series-tv-table tr.movie-child-row td.col-title-child .movie-child-list li {
  /* 文字サイズ・字下げは td.col-title-child 側の既存ルールに委ねる （ここで font-size を再指定すると入れ子で縮小が二重に掛かる）。 */
  color: var(--fg);
  line-height: 1.5;
  /* タイトルは折り返さない（親映画行 movie-row と同じ方針）。 */
  white-space: nowrap;
}
.series-tv-table tr.movie-child-row td.col-title-child .movie-child-list li::marker {
  /* マーカー色は控えめに（本文より薄い muted）。 */
  color: var(--muted);
}

/* ──────────────── シリーズ詳細：メインスタッフ ──────────────── */
/* 役職別サブセクション。h3 はサイト共通の h3 スタイルを使うので個別の指定は最小限。 */
.key-staff-role {
  /* h3 のデフォルトとは別に、メインスタッフ役職見出しは詰めて見せる */
  margin-top: 18px;
  margin-bottom: 6px;
}
.key-staff-list {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.key-staff-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1.6;
}
.key-staff-name {
  /* リンク色は本文色に（サイト全体の方針）、ホバーで下線 */
  color: var(--fg);
}
.key-staff-range {
  /* 担当話数の圧縮表記。括弧で囲んだ形をテンプレ側で出している。 */
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
}

/* ──────────────── シリーズ詳細：エピソード一覧（dl 構造） ──────────────── */
/* テーブル廃止 → <dl class="ep-list"> + <dt> 話数+サブタイ + <dd> 字下げスタッフ群。 */
.ep-list {
  margin: 8px 0 24px 0;
  padding: 0;
}
.ep-list dt.ep-title {
  margin-top: 14px;
  font-size: 1.02em;
  line-height: 1.5;
  display: grid;
  /* 左 5em（/episodes/ ランディングと同じ幅）、右 1fr。 */
  grid-template-columns: 5em minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}
.ep-list dt.ep-title:first-child {
  margin-top: 0;
}
/* 左列：第N話 + 放送日 縦積み（/episodes/ の ep-row-no-date と同じ装い）。 */
.ep-list dt.ep-title .ep-row-no-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
}
.ep-list dt.ep-title .ep-row-no-date .ep-row-no {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
.ep-list dt.ep-title .ep-row-no-date .ep-row-date {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
  margin-top: 1px;
}
/* 右列：サブタイトルリンク。 */
.ep-list dt.ep-title .ep-row-title {
  display: block;
  color: var(--fg);
  font-weight: 600;
  min-width: 0;
}
.ep-list dt.ep-title .ep-row-title:hover {
  text-decoration: underline;
}
/* dd（スタッフ）：dt の左列幅ぶんインデント。 */
.ep-list dd.ep-meta {
  margin: 2px 0 0 calc(5em + 12px);
  padding: 0 0 4px 0;
  font-size: 0.9em;
  color: var(--muted);
  line-height: 1.6;
}
.ep-list dd.ep-meta .staff-badges-row {
  /* バッジ群は staff-badges-row の既存スタイル（flex-wrap）を継承するだけで十分。 */
  margin: 0;
}

/* スマホ幅では字下げを浅くしてスタッフ群が窮屈にならないように。 */
@media (max-width: 480px) {
  .ep-list dt.ep-title {
    grid-template-columns: 4.5em minmax(0, 1fr);
    column-gap: 8px;
  }
  .ep-list dd.ep-meta {
    margin-left: calc(4.5em + 8px);
  }
}

/* ホーム改修 */

/* hero 直下の「最終ビルド：YYYY年M月D日 H:MM」表記 */
.home-build-info {
  font-size: 0.85em;
  margin-top: 4px;
  /* ビルド情報スタンプはドット/デジタル系（DotGothic16）で「データ端末の刻印」風アクセント。 */
  font-family: var(--font-accent-dot);
}

/* ホーム統計のコンパクト表示。横並び 1 行（または 2 行）で件数だけを並べる。 */
.home-db-stats.home-db-stats-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-db-stats.home-db-stats-compact li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.home-db-stats.home-db-stats-compact .home-db-stats-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.4em;
  font-weight: 700;
  color: var(--accent-pink, var(--fg));
}
.home-db-stats.home-db-stats-compact .home-db-stats-label {
  font-size: 0.85em;
  color: var(--muted);
}

@media (max-width: 480px) {
  .home-db-stats.home-db-stats-compact {
    gap: 8px 16px;
  }
  .home-db-stats.home-db-stats-compact .home-db-stats-value {
    font-size: 1.2em;
  }
}

/* JS で空とわかった「今日の記念日 / 今週の記念日」セクションは hideEmptySections() で inline style display:none が当たる。 */
.home-section-anniversary .home-anniversary-list:empty {
  margin: 0;
  padding: 0;
}

/* 音楽ランディング + 劇伴ページ */

/* /music/ ランディング：歌・劇伴の 2 カード横並び。
   カード全体を <a> でラップする方式で運用する。カード自体がリンクであることを
   ホバー時の border-color／背景色変化と微小な translateY で示す。
   transition は全環境で軽く動かせる範囲（150ms）に留める。 */
.music-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 24px 0;
}
/* 音楽製作一覧の行で、担当した役職（作詞・作曲・編曲）をバッジで並べる。名前・初参加曲との間に余白を取る。 */
.music-role-badges {
  display: inline-flex;
  gap: 4px;
  margin: 0 8px;
  vertical-align: middle;
}
/* カードが 4 枚のランディング（/creators/）は 2 列固定にして 2×2 に揃える（3 列だと 1 枚だけ次の行に落ちる）。狭い画面では 1 列。 */
.music-categories.is-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .music-categories.is-two-col {
    grid-template-columns: minmax(0, 1fr);
  }
}
.music-category-card {
  /* ランディング (/music/・/creators/・/stats/) 共用カード。flex 列で内部を縦積みし、
   親 grid の align-items:stretch と組み合わせて、最終子要素 (件数バッジ/カバレッジラベル) を
   margin-top:auto でカード底辺に揃える。 */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  /* カード全域が <a> なので、文字色とアンダーラインを抑えてプレーンに見せる。
     ホバー時にだけアクセントを見せる方針。 */
  color: inherit;
  text-decoration: none;
  background: var(--bg, #fff);
  transition: border-color 150ms ease, background-color 150ms ease,
              box-shadow 150ms ease, transform 150ms ease;
}
/* カード全体リンクの内部テキストにグローバル a:hover の下線が浸透するのを抑止。
   全状態・全子孫で text-decoration:none。 */
.music-category-card,
.music-category-card:hover,
.music-category-card:focus-visible,
.music-category-card *,
.music-category-card:hover *,
.music-category-card:focus-visible * {
  text-decoration: none;
}
.music-category-card:hover,
.music-category-card:focus-visible {
  border-color: var(--accent-pink, #ec4899);
  background-color: var(--surface-2, #fff7fb);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.10);
  transform: translateY(-1px);
}
.music-category-card:focus-visible {
  outline: 2px solid var(--accent-pink, #ec4899);
  outline-offset: 2px;
}
.music-category-card h2 {
  margin-top: 0;
  margin-bottom: 8px;
}
/* :last-child を margin-top:auto でカード底辺に押し付ける。
   /music/・/creators/ の <ul.music-category-stats> と /stats/ の <p.stats-coverage> の
   Y 位置を 3 ランディングで一律に揃える。 */
.music-category-card > :last-child {
  margin-top: auto;
}
.music-category-stats {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.music-category-stats li {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.music-category-stats-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--accent-pink, var(--fg));
}
.music-category-stats-label {
  font-size: 0.85em;
  color: var(--muted);
}
/* /music/ ランディングの音楽商品カード：「N 点 M 枚」を 2 ペアとして見せる際の隙間調整。
   ベースの .music-category-stats li は子要素間に gap:4px が一律で入るので、
   2 ペア構成の li では label→value の間に追加の左マージンを入れて視覚分離する。
   pair 内の value→label は元の 4px のまま、pair→pair の間だけ広げる。 */
.music-category-stats-music-products li .music-category-stats-label + .music-category-stats-value {
  margin-left: 8px;
}
/* カード内に置かれた段落リンク用の太字（テンプレートからカード内テキストリンクを
   出さない運用だが、ありえる文脈の保険として段落用フォント太字だけ残す）。 */
.music-category-link {
  font-weight: 600;
}

/* /bgms/ シリーズ一覧：1 シリーズ = 1 カード。
   ヘッダ行（タイトル/放送期間/曲・ver. 数）+ スタッフ行（役職バッジ+名前）を縦積み。
   楽曲索引・商品索引と同系列の左ボーダー＋ホバー淡背景意匠。 */
.bgms-card-list {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* リスト自身が親（main 列）より広がらないようにする保険。flex column 子の
     min-width: auto デフォルト挙動で、内部に nowrap 要素があると親を超えて広がるのを抑止。 */
  min-width: 0;
}
.bgms-card {
  /* カード自身は <div>。カード全体リンクは内側の .bgms-card-link（絶対配置 <a>）で実現する。 */
  position: relative;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--bg, #fff);
  transition: border-color 150ms ease, background-color 150ms ease;
  /* カードが内部の nowrap 要素（件数メタ等）に押されて親より広がるのを防ぐ。
     min-width: 0 でカードを親幅まで縮められるようにし、万一はみ出した場合の見栄えとして
     overflow を hidden に倒す（border-radius と整合させる）。 */
  min-width: 0;
  overflow: hidden;
}
.bgms-card:hover,
.bgms-card:focus-within {
  border-color: var(--accent-pink, #ec4899);
  background-color: var(--surface-2, #fff7fb);
}
/* カード全体クリック：絶対配置の透明 <a>、z-index:0。
   後段で .bgms-card-staff を z-index:1 で上に重ね、名前クリックは人物リンクへ渡す。
   aria-label はテンプレ側でシリーズ名を付与。 */
.bgms-card-link {
  /* inline 既定のままだと、空のリンクでも inline ボックスが生成されて
     周辺レイアウトに微妙な影響（特にリスト先頭で「• のような点が見える」現象）を
     引き起こすケースがあるため、block に倒しておく。 */
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  text-decoration: none;
  /* リンク色は出さない（背景透明、テキストもない要素）。 */
  color: transparent;
}
.bgms-card-link:focus-visible {
  /* キーボードフォーカス時の輪郭はカード外形に沿う形で出す（カード自体に focus-visible を当てる代わりに、
     オーバーレイリンクに当てて見た目はカード全体がフォーカスされたように見せる）。 */
  outline: 2px solid var(--accent-pink);
  outline-offset: -2px;
}

/* カードヘッダ行：タイトル／放送期間／曲・ver. 数 を横並び。
   タイトルが伸縮し、放送期間と曲数メタは固有幅で右に寄る。
   モバイル幅では grid を 1 列に倒して縦並びにする（タイトル→放送期間→曲数の順）。 */
.bgms-card-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 2px;
  /* grid item の暗黙の min-width: auto がコンテンツ最小幅まで伸びる挙動を抑えるため、
     ヘッダ自身に min-width: 0 を効かせる（各 grid item にも個別に効かせる）。 */
  min-width: 0;
}
.bgms-card-title {
  /* h2 のデフォルト余白・装飾はカード内では出さず、テキスト要素として振る舞う。 */
  margin: 0;
  font-size: 1.08em;
  font-weight: 600;
  line-height: 1.4;
  /* タイトルが長くても素直に折り返す。grid item の min-width: auto を上書きして
     1fr 列が中身の最小幅で押し広げられるのを防ぐ。和文長文や記号連続でも折り返せるよう
     overflow-wrap: anywhere まで踏み込む。 */
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  /* タイトルだけはカードの見出しとして目立たせる。カード全体は color: var(--fg) を持つので、
     見出しだけ accent-pink を上書きする。下線は出さない（カード全体がリンクとしてホバー時に
     背景色変化で押下可能性を示すため、テキスト装飾は不要）。 */
  color: var(--accent-pink, var(--fg));
}
.bgms-card-period {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.88em;
  /* 期間はデスクトップでも狭幅カードでは折り返してよい（grid 1fr 列を押し広げない）。
     min-width: 0 で grid item の自然最小幅を解除する。 */
  min-width: 0;
}
.bgms-card-counts {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.88em;
  /* 件数メタは 1 行で見せたい（「107 曲 126 ver.」を途中改行すると意味が崩れる）ので
     nowrap を保つ。文字列長の上限は実質「999 曲 9999 ver.」程度で予測可能なため、
     カードの auto 列幅を圧迫しても親 grid 全体としては許容範囲。 */
  white-space: nowrap;
  min-width: 0;
}

/* スタッフ表示：staff-badges-row を直接当て、グループ（作曲 / 編曲 / 統合済み）を横並び。
   グループ間は staff-badges-row の gap で間隔が空き、必要に応じて折り返す。
   フォントサイズ・行高は曲名以下の補助情報として一段控える。 */
.bgms-card-staff {
  margin-top: 6px;
  font-size: 0.88em;
  line-height: 1.7;
  /* グループの flex 子が長文人物名を持つ場合に、カード幅を超えて広がらないようにする。
     staff-badges-row は flex-wrap: wrap を持つので必要に応じて折り返す。 */
  min-width: 0;
  /* スタッフ表示をカード全体リンクより上 (z-index:1) に置きつつ pointer-events:none で透過。
   a.staff-name だけ pointer-events:auto で人物ページへ、それ以外は劇伴ページへ遷移。 */
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.bgms-card-staff a.staff-name {
  pointer-events: auto;
}
/* 人物名は長い名前のときに折り返せるようにしておく。和文・英文混在でも詰まらないよう
   overflow-wrap: anywhere を選ぶ。 */
/* staff-name：<span> と <a> を同じ見た目に。通常は本文色・下線なし、
   <a> だけホバー時に下線を出して入れ子リンクを弁別。<span> はホバーしても下線を出さない。 */
.bgms-card-staff .staff-name {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.staff-name:hover,
a.staff-name:focus-visible {
  text-decoration: underline;
}

/* モバイル：ヘッダ行を「タイトル行（全幅）」「期間 + 曲数の横並び行」の 2 行構成に倒す。
   - タイトル：grid-column: 1 / -1 で全幅を取り、改行可能なまま素直に折り返す
   - 期間：2 行目の左列、左揃え
   - 曲数：2 行目の右列、右揃え
   スタッフ行は引き続き横並び折り返しを維持（変更なし）。 */
@media (max-width: 640px) {
  .bgms-card-head {
    grid-template-columns: 1fr auto;
  }
  .bgms-card-title {
    grid-column: 1 / -1;
  }
  .bgms-card-period {
    justify-self: start;
    white-space: normal;
  }
  .bgms-card-counts {
    justify-self: end;
    white-space: nowrap;
  }
}

/* /bgms/{slug}/ セッション別レイアウト */
.bgm-session {
  margin-top: 24px;
}

/* セッション見出し (h2) の右隣に bgm_sessions.caption を小さく添える span。
   60% / muted / normal で副次情報感を出し、baseline 揃え。
   セクションナビへの混入回避は section 要素の data-section-nav-label 明示で対応。 */
.bgm-session-caption {
  display: inline-block;
  margin-left: 0.6em;
  font-size: 60%;
  font-weight: normal;
  color: var(--muted);
  vertical-align: baseline;
}

/* セッション内のセクション小見出し (h3、bgm_sections.section_name)。
   直前のカードリストが下に 24px の余白を持つため、h3 既定の上余白を詰めて間延びを防ぐ。 */
.bgm-subsection-title {
  margin-top: 8px;
  margin-bottom: 0;
}
.bgm-cues-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
.bgm-cues-table th,
.bgm-cues-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.bgm-cues-table thead th {
  background: var(--th-bg, transparent);
  text-align: left;
  font-weight: 600;
}
.bgm-cues-table th.num,
.bgm-cues-table td.num {
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bgm-cues-table td.mono {
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  /* 枝番付き M 番号でも崩れないように改行を抑える */
}

@media (max-width: 600px) {
  /* 狭幅では作曲・編曲列の余白を削減 */
  .bgm-cues-table .col-composer,
  .bgm-cues-table .col-arranger {
    font-size: 0.9em;
  }
}

/* 人物・企業・団体・キャラの 関与クレジット一覧（旧 involvement-table テーブルの代替） */

/* 役職セクション見出し（h3 にカウント注釈付き） */
.role-section-heading {
  /* 役職名と「（N 話）」が同じ行に出る。改行されないよう詰める。 */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.role-section-heading .role-count {
  font-size: 0.85em;
}

/* 関与シリーズ一覧（ul + li） */
.involvement-list {
  list-style: none;
  margin: 0 0 16px 0;
  /* シリーズ行を役職見出し（h4.role-section-heading）の下に一段インデントして「ぶら下げる」。
     役職とシリーズが同じ左位置だと階層が潰れて見づらいため、横位置で親子を区別する。 */
  padding: 0 0 0 1.4em;
}
.involvement-list .involvement-row {
  /* 1 行：シリーズ名 / 話数圧縮表記 / キャラ名（声優のみ）を横並び。 */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 4px 0;
  line-height: 1.6;
  border-bottom: 1px dotted var(--border);
}
.involvement-list .involvement-row:last-child {
  border-bottom: none;
}
.involvement-list .involvement-series {
  /* シリーズタイトルへのリンク。本文色を維持しつつホバー時に下線 */
  font-weight: 600;
}
.involvement-list .involvement-range {
  /* 話数圧縮表記（"#1〜4, 8" や "(全話)"）。等幅フォントで揃える */
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  white-space: nowrap;
}
.involvement-list .involvement-character {
  /* 声優役のときシリーズ内で演じたキャラ名一覧を併記。dash 付きで控えめに */
  font-size: 0.92em;
  color: var(--muted);
}

/* メンバー履歴：屋号 → 役職（クレジット履歴と共用の alias-section-heading / role-section-heading）の下に、
   人物 1 名 = 1 行で「人物名リンク → 担当作品（インライン）」を並べる。役職見出しの下に一段
   インデントしてぶら下げ（involvement-list と同じ横位置で親子を区別する）。 */
/* メンバー履歴：屋号 → 人物ブロック → 役職グループ → 作品行 の入れ子。
   人物・役職の横に担当回数ピル（📺 / 🎥）、作品は 1 行ずつ・話数を可視表示。 */
.member-person-block {
  padding: 6px 0 8px 1.4em;
  border-bottom: 1px dotted var(--border);
}
.member-person-block:last-child { border-bottom: none; }
.member-person-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.member-person-head .member-person-name {
  /* 人物名義リンク。本文色を維持しつつホバー時に下線。 */
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}
.member-person-head .member-person-name:hover { text-decoration: underline; }
.member-role-group { margin: 4px 0 0 1.2em; }
.member-role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 4px;
}
.member-role-head .member-role-label { font-weight: 600; font-size: 0.94em; }
.member-work-lines {
  list-style: none;
  margin: 2px 0 0 0;
  padding: 0 0 0 1.2em;
}
.member-work-lines .member-work-line {
  font-size: 0.9em;
  line-height: 1.8;
}
.member-work-lines .member-work-icon { font-size: 0.9em; margin-right: 2px; }
.member-work-lines .involvement-series { font-weight: 500; }
.member-work-lines .involvement-range {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}

@media (max-width: 480px) {
  .involvement-list .involvement-row {
    /* 狭幅では range と character がシリーズ名の下に折り返される */
    gap: 2px 10px;
  }
}

/* 人物詳細「クレジット」セクション：役職別 h3 見出し + シリーズ行カード。
   見出しの役職名は素のリンク（バッジ風の塗りはしない。長い役職ラベルもあるため）。
   ホバー時のみ accent-pink で下線を出す。 */
.credit-role-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
}
.credit-role-heading .role-count {
  font-size: 0.85em;
}
.credit-role-link {
  color: inherit;
  text-decoration: none;
}
a.credit-role-link:hover,
a.credit-role-link:focus-visible {
  color: var(--accent-pink);
  text-decoration: underline;
}
.credit-card-list {
  list-style: none;
  margin: 6px 0 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.credit-card {
  list-style: none;
}
/* カードの見出し枠。各話の内訳を持つ行では details の summary で、枠のどこを押しても開閉する
   （シリーズ詳細への遷移はシリーズ名のリンク .credit-card-series だけが担う）。
   各話を持たない行（映画など）は同じ見た目の素の div。 */
.credit-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 8px 10px;
  line-height: 1.6;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: inherit;
}
summary.credit-card-head {
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
summary.credit-card-head::-webkit-details-marker { display: none; }
summary.credit-card-head:hover,
summary.credit-card-head:focus-visible {
  border-color: var(--accent-pink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* 開閉の目印。右端に寄せ、開いているときは三角を下向きにする。 */
.credit-card-toggle {
  margin-left: auto;
  font-size: 0.85em;
  color: var(--muted);
  white-space: nowrap;
}
.credit-card-toggle::before {
  content: "▶";
  display: inline-block;
  margin-right: 4px;
  font-size: 0.8em;
  transition: transform 0.12s ease;
}
.credit-card-details[open] > summary .credit-card-toggle::before {
  transform: rotate(90deg);
}
.credit-card-series {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
a.credit-card-series:hover,
a.credit-card-series:focus-visible {
  color: var(--accent-pink);
  text-decoration: underline;
}
.credit-card-range {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  white-space: nowrap;
}
.credit-card-affiliation {
  font-size: 0.8em;
  color: var(--muted);
}
.credit-card-character {
  font-size: 0.92em;
  color: var(--muted);
}

/* 人物詳細「楽曲」セクション：1 曲 = 1 カード。カード全域 = <a> で楽曲詳細ページ遷移。
   役職バッジを上段に並べ、その下に曲タイトル、さらに下に出典シリーズ + 開始年を muted で出す。 */
.person-songs-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.person-song-card {
  display: block;
}
.person-song-card-link {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  /* 種別クラス .cat-* があればその淡色（--cat-tint）、無ければ白背景。 */
  background: var(--cat-tint, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.person-song-card-link:hover,
.person-song-card-link:focus-visible {
  border-color: var(--accent-pink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  /* グローバル a:hover { text-decoration: underline } をカード全域で抑止。 */
  text-decoration: none;
}
/* 役職バッジ群（左）＋種別バッジ（右上）を 1 行に並べるヘッダ。 */
.person-song-card-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.person-song-card-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* 種別バッジ（楽曲索引の .songs-card-badge を流用）。カード右上に小さく寄せる。
   font-size は後方定義の .songs-card-badge に勝つよう、具体度の高い複合セレクタで指定する。 */
.person-song-card-head .person-song-cat-badge {
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 0.68em;
}
.person-song-card-title {
  font-weight: 600;
  line-height: 1.4;
}
.person-song-card-series {
  margin-top: 2px;
  font-size: 0.85em;
}
.person-song-card-series .series-year {
  margin-left: 4px;
}

/* 楽曲索引（dl + 録音サブリスト） */
.songs-section {
  margin-top: 32px;
}
.songs-list {
  margin: 8px 0 0 0;
  padding: 0;
}
.songs-list dt.songs-list-title {
  margin-top: 12px;
  font-size: 1em;
  line-height: 1.5;
}
.songs-list dt.songs-list-title:first-child {
  margin-top: 0;
}
.songs-list dt.songs-list-title a {
  font-weight: 600;
}
.songs-list .songs-list-class {
  font-size: 0.85em;
  margin-left: 4px;
}
.songs-list dd.songs-list-recordings {
  /* 楽曲名の下にぶら下がる録音バリエーション */
  margin: 0 0 4px 1.5em;
}
.songs-list .songs-recording-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 0.9em;
  color: var(--muted);
  line-height: 1.55;
}
.songs-list .songs-recording-sublist li::before {
  /* 「・」マーカー。ul list-style より控えめ。 */
  content: "・";
  margin-right: 2px;
  color: var(--accent-blue);
}
@media (max-width: 480px) {
  .songs-list dd.songs-list-recordings {
    margin-left: 1em;
  }
}

/* 楽曲索引 /songs/ の横長カード。1 録音バリエーション = 1 カード。
   カード自身は <div>。カード全体クリックは内部の絶対配置 .songs-card-link（透明 <a>）で実現する
   ので HTML 仕様上のネスト <a> を作らず、内部の <a class="role-badge">（役職統計）と
   <a class="staff-name">（人物詳細）はオーバーレイより上に置いて個別クリックを受ける
   （series-card-sub / bgms-card と同じパターン）。 */
.songs-card-list {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.songs-card-list > li {
  margin: 0;
  padding: 0;
}
.songs-card {
  position: relative;
  padding: 12px 16px;
  border: 1px solid var(--border);
  /* 左ボーダーは常に 4px 確保（ホバー時は色だけ変える、レイアウト揺れ防止）。 */
  border-left-width: 4px;
  border-radius: 6px;
  /* 種別クラス .cat-* があればその淡色（--cat-tint）、無ければ既定の白背景。 */
  background: var(--cat-tint, var(--bg, #fff));
  color: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  /* カードが内部 nowrap 要素に押されて親より広がるのを防ぐ。 */
  min-width: 0;
}
.songs-card:hover,
.songs-card:focus-within {
  /* ホバー時は種別の淡色背景を保ったまま、枠色と影だけで反応を返す。 */
  border-color: var(--accent-pink, #ec4899);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* オーバーレイリンク：絶対配置の透明 <a>（z-index:0）。カード余白クリックで /songs/{id}/ へ。 */
.songs-card-link {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  text-decoration: none;
  color: transparent;
}
.songs-card-link:focus-visible {
  outline: 2px solid var(--accent-pink, #ec4899);
  outline-offset: -2px;
}
/* カード内コンテンツはオーバーレイより上に重ね、デフォルト pointer-events: none で
   オーバーレイへクリックを透過させる。内部の <a> 全てに pointer-events: auto を効かせて
   個別クリック（人物詳細・役職統計）を拾う。
   注意：構造化エントリの HTML は <span class="staff-name"><a href="/people/X/">name</a></span>
   という形で、<a> 自身には staff-name クラスが付かない。なので `a.staff-name` ではキャッチできず、
   `.songs-card-grid a` 経由で全 <a> を一律拾う。 */
.songs-card-grid {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.songs-card-grid a {
  pointer-events: auto;
}
/* 名義リンク（<span class="staff-name"> 内部の <a>）はホバー時のみ下線。
   構造化エントリ歌唱者（VOCALS、.staff-name ラッパなしで直に <a> が出る）と
   挙動を揃えるため、常時下線ではなく hover 限定で「クリック可能」シグナルを出す。 */
.songs-card .staff-name a {
  color: inherit;
  text-decoration: none;
}
.songs-card .staff-name a:hover {
  text-decoration: underline;
}
/* role-badge（<a class="role-badge">）は色付き背景があるので下線は不要。
   既存の a.role-badge:hover の opacity 変化でホバーを示す。 */
.songs-card a.role-badge {
  text-decoration: none;
}
/* フォールバックの span.staff-name はリンク無しなので下線も無し。
   グローバル .staff-name:hover の浸透を明示的に打ち消しておく。 */
.songs-card span.staff-name,
.songs-card span.staff-name:hover {
  color: inherit;
  text-decoration: none;
}
.songs-card-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 16px;
}
.songs-card-main {
  min-width: 0;
}
.songs-card-title {
  display: inline-block;
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1.4;
  color: var(--accent-pink, var(--fg));
}
/* カード内に staff-badges-row（meta 行）が来た時の見栄え調整：
   行間隔を曲名の下にやや詰めて配置し、フォントサイズも一段控える。 */
.songs-card .staff-badges-row {
  margin-top: 6px;
  font-size: 0.78em;
  line-height: 1.7;
  gap: 4px 10px;
}
/* メドレーの曲の中の曲（.medley-parts）。曲詳細の「収録曲」と、楽曲の一覧のカードの開け閉めの枠で共用する。
   各曲は原曲の曲名（原曲へのリンク）の下に、原曲の作詞・作曲・編曲のバッジの行を置く。 */
.medley-parts {
  margin: 6px 0 0;
  padding-left: 1.6em;
}
.medley-parts > li {
  margin: 0 0 6px;
}
.medley-parts .staff-badges-row {
  margin-top: 2px;
  font-size: 0.85em;
}
/* 楽曲の一覧のカードでは、中の曲を開け閉めの枠に包む。カードの中身はオーバーレイへクリックを素通しにして
   いるため（.songs-card-grid の pointer-events: none）、枠の見出しと中身だけはクリックを拾うように戻す。 */
.songs-card-medley {
  margin-top: 6px;
  font-size: 0.85em;
  pointer-events: auto;
}
.songs-card-medley > summary {
  cursor: pointer;
  color: var(--muted);
  width: max-content;
}
.songs-card-medley .medley-parts .staff-badges-row {
  font-size: 0.9em;
}
.songs-card-badge-cell {
  justify-self: end;
  align-self: start;
  padding-top: 2px;
}
.songs-card-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
  white-space: nowrap;
  /* 種別クラスは「淡い背景＋同系の濃い文字＋細い枠」で上書きする。枠分のレイアウトは
     ここで透明枠を確保しておき、ジャンルタブの series 色（白文字ベタ）には影響させない。 */
  border: 1px solid transparent;
  /* デフォルト（種別不明等）は muted グレー。具体的なクラスで上書きする。 */
  background: var(--muted, #94a3b8);
}

/* music_class_code ごとの種別カラー。バッジは「淡い背景＋同系の濃い文字＋細い枠」で軽く、
   黄色も濁らせず綺麗に出す。TV版と映画版（OP/映画OP・ED/映画ED）は同色にまとめ、実質 6 色を
   色相環に大きく離して配置する（TV/映画の区別はバッジのラベル文言で行う）。配置方針：
     ・OP / 映画OP＝レッド、ED / 映画ED＝藍。両グループを対角に置いて OP↔ED を離す。
     ・キャラ（マゼンタ）とイメージ（イエロー）をほぼ対角に置いて両者を離す。
     ・メドレー（グリーン）・映画挿入歌（ティール）で円環の隙間を埋める。
   カード背景の淡色は下の .cat-* トークン（--cat-tint）と同色相で対応させる。 */
.songs-card-badge.songs-badge-op           { background: #fcd8d9; color: #bb3540; border-color: #f4bcbf; } /* オープニング主題歌（レッド） */
.songs-card-badge.songs-badge-movie-op     { background: #fcd8d9; color: #bb3540; border-color: #f4bcbf; } /* 映画オープニング主題歌（OP と同色・レッド） */
.songs-card-badge.songs-badge-chara        { background: #fbd8f0; color: #ab3686; border-color: #f1bce3; } /* キャラクターソング（マゼンタ） */
.songs-card-badge.songs-badge-medley       { background: #cfecc9; color: #2f7035; border-color: #b0deb0; } /* メドレー（グリーン） */
.songs-card-badge.songs-badge-movie-insert { background: #c8eeea; color: #107065; border-color: #a4e0db; } /* 映画挿入歌（ティール） */
.songs-card-badge.songs-badge-movie-ed     { background: #dcdcfb; color: #4a48b5; border-color: #c5c5f3; } /* 映画エンディング主題歌（ED と同色・藍） */
.songs-card-badge.songs-badge-ed           { background: #dcdcfb; color: #4a48b5; border-color: #c5c5f3; } /* エンディング主題歌（藍） */
.songs-card-badge.songs-badge-image        { background: #fbedb0; color: #80660a; border-color: #eedb8e; } /* イメージソング（イエロー） */

/* カード背景の淡色トークン。種別クラス .cat-* をカード要素に付け、子要素の背景は var(--cat-tint)
   を参照する（songs-card / person-song-card 共通）。バッジと同色相でさらに薄いトーンに揃える。 */
.cat-op           { --cat-tint: #fef8f8; }
.cat-movie-op     { --cat-tint: #fef8f8; }
.cat-chara        { --cat-tint: #fef9fc; }
.cat-medley       { --cat-tint: #f8fcf6; }
.cat-movie-insert { --cat-tint: #f5fbfa; }
.cat-movie-ed     { --cat-tint: #faf9fe; }
.cat-ed           { --cat-tint: #faf9fe; }
.cat-image        { --cat-tint: #fefcf0; }

/* ジャンル別タブ用：各セクション内のシリーズ初出順に振った 0〜5 の 6 色循環。
   セクションをまたぐと同じシリーズが別色になり得る（仕様）。 */
.songs-card-badge.songs-badge-series-0 { background: #e84a5f; }
.songs-card-badge.songs-badge-series-1 { background: #f08a3c; }
.songs-card-badge.songs-badge-series-2 { background: #d9a73a; }
.songs-card-badge.songs-badge-series-3 { background: #5cae5c; }
.songs-card-badge.songs-badge-series-4 { background: #5470d6; }
.songs-card-badge.songs-badge-series-5 { background: #c060c8; }

/* 楽曲索引のモバイル時縦積み（バッジを曲名上に移動）。
   既定値 (1fr auto) を同セクション直後でカスケード後勝ちさせて上書き。
   挙動は .products-card-grid のモバイル時と同型。 */
@media (max-width: 640px) {
  .songs-card-grid {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .songs-card-badge-cell {
    order: -1;
    justify-self: start;
    align-self: start;
    padding-top: 0;
  }
  .songs-card-main {
    order: 0;
  }
}

/* 楽曲詳細/索引の役職バッジ (LYRICS/COMPOSITION/ARRANGEMENT/VOCALS)。
   .role-badge ベース、4 色を色相環上に配置。data-role-code 値が一致するときだけ着色。 */
.role-badge[data-role-code="LYRICS"] {
  /* 作詞 = 桃赤系 */
  background: rgba(232, 74, 95, 0.13);
  color: #c0354c;
  border-color: rgba(232, 74, 95, 0.42);
}
.role-badge[data-role-code="COMPOSITION"] {
  /* 作曲 = 黄橙系 */
  background: rgba(217, 167, 58, 0.16);
  color: #a17821;
  border-color: rgba(217, 167, 58, 0.45);
}
.role-badge[data-role-code="ARRANGEMENT"],
.role-badge[data-role-code="MEDLEY_ARRANGEMENT"] {
  /* 編曲・メドレー編曲 = 緑系 */
  background: rgba(92, 174, 92, 0.16);
  color: #3c823c;
  border-color: rgba(92, 174, 92, 0.45);
}
.role-badge[data-role-code="MUSIC"] {
  /* 音楽（劇伴一覧で本編クレジットの担当者に付ける）= 橙系。作曲の黄橙と編曲の緑の両方を兼ねる役職なので、どちらとも別の色にする */
  background: rgba(230, 120, 50, 0.14);
  color: #a8521a;
  border-color: rgba(230, 120, 50, 0.45);
}
.role-badge[data-role-code="VOCALS"],
.role-badge[data-role-code="BACKING_VOCALS"],
.role-badge[data-role-code="DIALOGUE"] {
  /* 歌 / コーラス / 台詞 = 青系（同色相で並べる）。同じ録音に対し 歌・コーラス・台詞 を並べて出すため、 視認上同系統の青で揃える。 */
  background: rgba(84, 112, 214, 0.14);
  color: #3b56b8;
  border-color: rgba(84, 112, 214, 0.45);
}
.role-badge[data-role-code="SERIES"] {
  /* 出典シリーズ = 中立グレー系（役職 4 色とぶつからないトーン） */
  background: rgba(107, 114, 128, 0.13);
  color: #4b5563;
  border-color: rgba(107, 114, 128, 0.42);
}

/* --------------------------------------------------- 統計ページ追加クラス。 */

/* 平均値「1:30.22」の「.22」部分のみフォントサイズを下げる。 */
.micro-fraction {
  font-size: 80%;
  color: var(--text-muted, #666);
}

/* シリーズ単位ランキング表（episode 版 .stats-episode-ranking-table と同一構造で運用） */
.stats-series-ranking-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1rem;
  font-variant-numeric: tabular-nums;
}
.stats-series-ranking-table th,
.stats-series-ranking-table td {
  padding: 0.4em 0.6em;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
  vertical-align: middle;
}
.stats-series-ranking-table th {
  background-color: var(--bg-subtle, #f5f5f5);
  font-weight: 600;
  text-align: left;
}
.stats-series-ranking-table th.col-rank,
.stats-series-ranking-table td.col-rank {
  width: 4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stats-series-ranking-table th.col-series,
.stats-series-ranking-table td.col-series {
  min-width: 12em;
}
.stats-series-ranking-table th.col-value,
.stats-series-ranking-table td.col-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stats-series-ranking-table th.col-epcount,
.stats-series-ranking-table td.col-epcount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 5em;
}

/* episode 版テーブルでも col-epcount / col-firstdate を使えるように同じスタイルを共有 */
.stats-episode-ranking-table th.col-firstdate,
.stats-episode-ranking-table td.col-firstdate,
.stats-char-ranking-table th.col-firstdate,
.stats-char-ranking-table td.col-firstdate {
  text-align: left;
  white-space: nowrap;
  width: 10em;
}

/* 記号出現回数ページ：「初使用」グループヘッダ（colspan="4"）の見た目調整。 */
.stats-char-ranking-table th.col-firstuse-group {
  text-align: center;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
}
.stats-char-ranking-table th.col-epno,
.stats-char-ranking-table td.col-epno {
  text-align: right;
  white-space: nowrap;
  width: 4em;
}
.stats-char-ranking-table th.col-title,
.stats-char-ranking-table td.col-title {
  min-width: 12em;
}
.stats-char-ranking-table th.col-series,
.stats-char-ranking-table td.col-series {
  white-space: nowrap;
}

/* 統計ページのカバレッジラベル用。 */
.stats-coverage {
  font-size: 0.9em;
  display: inline-block;
}

/* ════════════════════════════════════════════════════════════════ シリーズ一覧 / 映画バッジ ════════════════════════════════════════════════════════════════ */

/* 映画シリーズ行に出すシーズンバッジ（[秋映画]／[春映画]）。 */
.movie-badge {
  display: inline-block;
  padding: 1px 8px;
  /* バッジは専用カラム（col-movie-badge）に入るため、タイトルとの間隔は セル側 padding-right で取る。 */
  font-size: 0.78em;
  font-weight: 600;
  border-radius: 3px;
  vertical-align: 1px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}

/* バッジは淡色パステル（目に優しく）。 */

/* 秋映画バッジ：水色（パステル）。スカイブルー寄りで、紅葉色の対比相当。文字は濃紺で締める。 */
.movie-badge-fall {
  background: rgba(135, 206, 235, 0.42);
  color: #1f5b80;
  border: 1px solid rgba(70, 130, 180, 0.55);
}

/* 併映・同時上映の札（シリーズ一覧の映画カードの子作品行）：薄紫（パステル）。 */
.movie-badge-cofeature {
  background: rgba(186, 160, 230, 0.35);
  color: #5b3f8c;
  border: 1px solid rgba(140, 110, 200, 0.5);
}

/* 春映画バッジ：薄ピンク（パステル）。 */
.movie-badge-spring {
  background: rgba(255, 192, 203, 0.55);
  color: #8b3a62;
  border: 1px solid rgba(219, 112, 147, 0.5);
}

/* 映画セクション専用テーブル。 */
.series-movie-table {
  counter-reset: movie-no;
}
/* 映画テーブルの列幅を「公開日」「尺」専用にタイト化。・公開日（col-period）：単一日付「YYYY年MM月DD日」最長 11 文字相当 → 9.5em （TV の「YYYY年MM月DD日 〜 YYYY年MM月DD日」期間表記用 22em を縮める） ・尺（col-episodes）：「N時間NN分NN秒」最長 9 */
.series-movie-table colgroup .col-movie-badge { width: 4.5em; }
.series-movie-table colgroup .col-period { width: 9.5em; }
.series-movie-table colgroup .col-episodes { width: 8em; }
/* バッジカラムのセル：バッジ右にタイトル列との間隔を少し空ける。 */
.series-movie-table td.col-movie-badge {
  white-space: nowrap;
  padding-right: 8px;
}
/* 親映画行（movie-row）に通し番号を採番表示する（TV 行と同じ意匠： ゼロ詰め 2 桁 + ピリオド、等幅数字、muted、太字）。 */
.series-tv-table tr.movie-row td.col-no::before {
  counter-increment: movie-no;
  content: counter(movie-no, decimal-leading-zero) ".";
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 600;
}
.series-tv-table tr.movie-row td {
  padding-top: 8px;
}
.series-tv-table tr.movie-row td.col-title {
  font-weight: 600;
  font-size: 1.02em;
  /* 長尺タイトル（「映画ふたりはプリキュア Max Heart 雪空のともだち」等）が col-title 内で折り返してレイアウトを壊していたため nowrap。 */
  white-space: nowrap;
}
.series-tv-table tr.movie-child-row td.col-title-child {
  /* 子作品行（MOVIE_SHORT）も同じくタイトルは折り返さない。 */
  white-space: nowrap;
  /* バッジを別カラム（col-movie-badge）に分離したため、子の col-title セルは 親映画の col-title セルと同じ列＝左端が一致する。 */
  padding-left: 0;
}

/* スピンオフテーブル。TV と同じ連番付与スタイルを使うため、counter を独立してリセットする。 */
.series-spinoff-table {
  counter-reset: tv-no;
}

/* ════════════════════════════════════════════════════════════════ エピソード詳細の前後話カード ページネーション直上に置く「← 前話 / 次話 →」のおしゃれな枠付きリンク。 */

.ep-prev-next-cards {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
}
.ep-prev-next-cards-top {
  margin-top: 8px;
  margin-bottom: 12px;
}
.ep-prev-next-cards-bottom {
  margin-top: 20px;
  margin-bottom: 4px;
}

/* カード本体。 */
.ep-prev-next-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  max-width: 50%;
}
.ep-prev-next-card:hover {
  border-color: var(--accent-pink);
  box-shadow: 0 2px 6px rgba(233, 30, 99, 0.12);
  text-decoration: none;
  transform: translateY(-1px);
}
.ep-prev-next-card.disabled {
  background: #fafafa;
  border-color: #ececec;
  color: var(--border);
  cursor: not-allowed;
}
.ep-prev-next-card.disabled:hover {
  border-color: #ececec;
  box-shadow: none;
  transform: none;
}

/* 「← 前話」「次話 →」の小さい方向ラベル */
.ep-prev-next-direction {
  font-size: 0.82em;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ep-prev-next-card-next .ep-prev-next-direction {
  text-align: right;
}

/* シリーズ境界をまたぐ前後話でだけ出る『正式タイトル』の行。
   サブタイトルと同じ行に置くと長さが倍になって省略されるため、独立した行に分けて
   方向ラベルの直下に薄く出す。左右のカードは flex の stretch で高さが揃うので、
   片側だけこの行が増えても崩れない。 */
.ep-prev-next-series {
  font-size: 0.82em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-prev-next-card-next .ep-prev-next-series {
  text-align: right;
}

/* サブタイトル本体。長すぎる場合は省略表示で他要素を押し出さない。
   margin-top: auto で必ずカード下端に置く。これにより、片側にシリーズ名の行が入って
   背が高くなっても、左右のサブタイトルが同じ高さに並ぶ（伸びた分の余白は上に寄る）。 */
.ep-prev-next-label {
  font-size: 0.95em;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: auto;
}
.ep-prev-next-card-next .ep-prev-next-label {
  text-align: right;
}

/* スマホ幅では縦積みにしてサブタイトルが見切れにくくする。 */
@media (max-width: 560px) {
  .ep-prev-next-cards {
    flex-direction: column;
    gap: 8px;
  }
  .ep-prev-next-card {
    max-width: none;
  }
  .ep-prev-next-card-next .ep-prev-next-direction,
  .ep-prev-next-card-next .ep-prev-next-label {
    text-align: left;
  }
}

/* ════════════════════════════════════════════════════════════════ ホーム統計ボックスのリンク化 各統計ボックスを <a> でラップしたときの見た目調整。 */

.home-db-stats-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.home-db-stats-link:hover {
  background: rgba(233, 30, 99, 0.08);
  text-decoration: none;
}
.home-db-stats-link:hover .home-db-stats-value {
  color: var(--accent-pink);
}
.home-db-stats-link:hover .home-db-stats-label {
  color: var(--fg);
}

/* ホーム DB 統計の音楽商品セル：「N 点 M 枚」を 2 ペアとして見せる際の隙間調整。
   ベースの .home-db-stats-link は子要素間に gap:6px が一律で入るが、音楽商品セルは
   value→label（数値とその直後の単位）を詰め、label→value（前ペア末尾と次ペア先頭）の
   間に追加の左マージンを入れて 2 つのペアに視覚的に分離させる。 */
.home-db-stats-link-music-products {
  column-gap: 4px;
}
.home-db-stats-link-music-products .home-db-stats-label + .home-db-stats-value {
  margin-left: 8px;
}

/* ════════════════════════════════════════════════════════════════ エピソード一覧ランディング /episodes/ 全 TV シリーズのエピソードをシリーズ別セクションで一覧表示するページ。 */

.episodes-index-section {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
/* シリーズ詳細（#episode-list 配下）のエピソード一覧は、すぐ上の基本情報に 年度・放送期間・全話数が出ていて重複するため、枠線ボックスの体裁を解除して 素のリストとして見せる。 */
#episode-list .episodes-index-section {
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
  margin: 0;
}
/* 枠が無くなったぶん、リストの左右パディングによる字下げを解除して シリーズ詳細の他コンテンツと左端を揃える（上下パディングは維持）。 */
#episode-list .episodes-index-list {
  padding-left: 0;
  padding-right: 0;
}
/* シリーズ単位の見出し行。 */
.episodes-index-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  background: rgba(233, 30, 99, 0.05);
  border-bottom: 1px solid var(--border);
  font-size: 1.05em;
  font-weight: 600;
}
.episodes-index-series-link {
  font-weight: 600;
  font-size: 1.02em;
  color: var(--fg);
}
.episodes-index-series-link:hover {
  text-decoration: underline;
}
.episodes-index-period {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  font-weight: 400;
  white-space: nowrap;
}
.episodes-index-count {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  font-weight: 400;
  white-space: nowrap;
  margin-left: auto;
}

/* セクション内のエピソード行 */
.episodes-index-list {
  list-style: none;
  margin: 0;
  padding: 8px 14px 12px;
}
.episodes-index-list li {
  display: grid;
  grid-template-columns: 4.2em 1fr 13em;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dotted #e5e7eb;
}
.episodes-index-list li:last-child {
  border-bottom: none;
}
.episodes-index-no {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
.episodes-index-title {
  font-size: 0.98em;
  color: var(--fg);
}
.episodes-index-title:hover {
  text-decoration: underline;
}
.episodes-index-date {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.88em;
  white-space: nowrap;
  text-align: right;
}

/* スマホ向け：3 段グリッドを縦積みに。 */
@media (max-width: 640px) {
  .episodes-index-list li {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 6px 0;
  }
  .episodes-index-no {
    text-align: left;
  }
  .episodes-index-date {
    text-align: left;
  }
  .episodes-index-count {
    margin-left: 0;
  }
}

/* ════════════════════════════════════════════════════════════════ - シリーズ一覧の 3 セクションへアンカー遷移したときの停止位置調整 - 劇伴セクションの収録盤情報リスト（メニューセル下段の小さい字） - 劇伴の作曲・編曲列の縮小（似た名前が連続するた */

/* シリーズ一覧の各セクションをフラグメント遷移で開いたとき、サイトヘッダ（2 行構造で約 95px）に
   見出しが隠れない位置で停止するように余白を予約する。
   ヘッダ実高さ + 約 15px のバッファを見越して 110px。 */
#tv-series,
#movies,
#otona,
#short-anime,
#event,
#spinoff {
  scroll-margin-top: 110px;
}
@media (max-width: 560px) {
  #tv-series,
  #movies,
  #otona,
  #short-anime,
  #event,
  #spinoff {
    scroll-margin-top: 60px;
  }
}

/* ──────── 劇伴 cue 行：収録盤情報リスト ──────── */

/* メニューセル本体の文字サイズ・余白。 */
.bgm-cues-table .col-title .bgm-cue-menu {
  display: inline-block;
  font-size: 0.98em;
  line-height: 1.4;
}

/* 仮 M 番号 cue の代替メニュー表示。 */
.bgm-cues-table .col-title .bgm-cue-menu-fallback {
  color: var(--muted);
  font-style: italic;
}

/* 収録盤情報リスト（全 cue の下段、メニューの直後）。 */
.bgm-cues-table .bgm-cue-recordings {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0;
  font-size: 0.78em;
  line-height: 1.4;
  color: var(--muted);
}
.bgm-cues-table .bgm-cue-recordings li {
  padding: 1px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px;
}
.bgm-cues-table .bgm-cue-recordings .bgm-rec-product {
  color: var(--fg);
  font-weight: 500;
}
.bgm-cues-table .bgm-cue-recordings .bgm-rec-product:hover {
  text-decoration: underline;
}
.bgm-cues-table .bgm-cue-recordings .bgm-rec-sep {
  color: var(--border);
  margin: 0 1px;
}
.bgm-cues-table .bgm-cue-recordings .bgm-rec-track {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bgm-cues-table .bgm-cue-recordings .bgm-rec-title {
  color: var(--fg);
}

/* 仮 M 番号 cue の行スタイル（背景色をごく淡く敷いて、通常 cue との区別を視覚的に補助）。 */
.bgm-cues-table .bgm-cue-row-temp td {
  background: rgba(212, 160, 23, 0.04);
}
.bgm-cues-table .bgm-cue-row-temp .col-mno {
  border-left: 2px solid var(--accent-yellow);
}

/* 作曲・編曲列の縮小。 */
.bgm-cues-table .col-composer,
.bgm-cues-table .col-arranger {
  font-size: 0.85em;
}
.bgm-cues-table col.col-composer,
.bgm-cues-table col.col-arranger {
  width: 8em;
  max-width: 8em;
}
.bgm-cues-table .col-composer,
.bgm-cues-table .col-arranger {
  word-break: break-word;
}

/* ──────── 映画行の尺合計列（TV の「全N話」と同位置） ──────── */

/* MovieSeriesRow.RuntimeLabel を表示する col-episodes セルは、TV 行の「全N話」と 同じ位置（4 列目）。 */
.series-movie-table .col-episodes {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* MOVIE_SHORT 子作品行：親映画の下に少し小さい字で出す。 */
.series-movie-table .movie-child-row .col-title-child {
  padding-left: 0;
  font-size: 0.92em;
}
.series-movie-table .movie-child-row .child-title {
  color: var(--fg);
}

/* ════════════════════════════════════════════════════════════════ - 複合行アプローチ（メイン行 + サブ行）の共通スタイル - シリーズ一覧 TV のサブ行（スタッフサマリ + プリキュアサマリ） - シリーズ詳細のプリキュアセクション表 - 劇伴詳細の */

/* ──────── 複合行：シリーズ一覧 TV のサブ行 ──────── */

/* メイン行とサブ行は同じ tbody 内に並ぶ tr ペアで、ブラウザ的には独立行扱い。 */
.series-tv-table .main-row td {
  border-bottom: none;
}
/* サブ行のセル：淡背景 + 左ボーダーアクセント。 */
.series-tv-table .sub-row .sub-row-cell {
  background: rgba(0, 0, 0, 0.02);
  border-left: 2px solid var(--border);
  padding: 6px 8px 8px 8px;
  font-size: 0.86em;
  line-height: 1.5;
}
/* サブ行内の各情報行（スタッフサマリ / プリキュアサマリ）。 */
.series-tv-table .sub-row-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 2px 0;
}
.series-tv-table .sub-row-line:last-child {
  margin-bottom: 0;
}
.series-tv-table .sub-row-label {
  flex: 0 0 auto;
  min-width: 6em;
  color: var(--muted);
  font-size: 0.94em;
  font-weight: 500;
}
.series-tv-table .sub-row-content {
  flex: 1 1 auto;
  color: var(--fg);
  word-break: break-word;
}

/* ──────── シリーズ詳細：プリキュアセクション表 ──────── */

.series-precures-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.series-precures-table th,
.series-precures-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.series-precures-table th {
  background: rgba(0, 0, 0, 0.025);
  font-weight: 600;
  font-size: 0.95em;
  color: var(--muted);
}
.series-precures-table .col-precure-pre {
  width: 11em;
}
.series-precures-table .col-precure-transform {
  /* 変身後（キュア○○）名はリンクのみで、フォントを少し強める */
  font-weight: 500;
}
.series-precures-table .col-precure-cv {
  width: 11em;
  font-size: 0.94em;
}

/* ──────── 劇伴詳細：複合行アプローチへの差し替え ──────── */

/* 第 2 弾で「同セル内縦並び」にしていた収録盤情報を、第 4 弾で「サブ行 colspan」構造に再構成。 */

/* メイン行：下ボーダー無しで、次のサブ行と一体に見せる。 */
.bgm-cues-table .bgm-cue-main td {
  border-bottom: none;
}
/* /bgms/{slug}/#cue-XXX アンカージャンプ時に sticky ヘッダ (≒95px) の裏に潜らないよう
   scroll-margin-top:110px を確保。 */
.bgm-cues-table .bgm-cue-main[id] {
  scroll-margin-top: 110px;
}
/* サブ行：1 番目のセル（M番号位置）は空でボーダー無し、2 番目以降を colspan でぶち抜く。 */
.bgm-cues-table .bgm-cue-sub td {
  border-bottom: 1px solid var(--border);
}
.bgm-cues-table .bgm-cue-sub .bgm-cue-sub-cell {
  background: rgba(0, 0, 0, 0.02);
  border-left: 2px solid var(--border);
  padding: 4px 8px 8px 8px;
}
/* サブ行内の収録盤リスト（既存スタイルを若干微調整）。 */
.bgm-cues-table .bgm-cue-sub .bgm-cue-recordings {
  margin-top: 0;
}
/* 仮 M 番号 cue 行のうち、サブ行側の左ボーダーアクセントは黄系に切り替え （メイン行の col-mno に当てた既存スタイル .bgm-cue-row-temp .col-mno との一体感）。 */
.bgm-cues-table .bgm-cue-sub.bgm-cue-row-temp .bgm-cue-sub-cell {
  border-left-color: var(--accent-yellow);
  background: rgba(212, 160, 23, 0.04);
}

/* 「（未収録）」サブ行の薄め表示。 */
.bgm-cues-table .bgm-cue-sub.bgm-cue-sub-unrecorded .bgm-cue-sub-cell {
  background: rgba(0, 0, 0, 0.012);
  border-left-color: #e5e7eb;
}
.bgm-cues-table .bgm-cue-sub .bgm-cue-unrecorded-label {
  display: inline-block;
  color: #9ca3af;
  font-style: italic;
  font-size: 0.88em;
}

/* 関連作品・外部サイトセクション関連 - シリーズ詳細「関連作品」専用テーブル（タイトル幅可変・公開日右寄せ固定） - 外部サイトセクションは下部配置 - エピソード詳細スタッフ表の役職ラベルリンクのアクセント */

/* シリーズ詳細「関連作品」「プリキュア」はサイト共通の行リスト（entity-list / entity-row）で描画。 */

/* 外部サイトセクション シリーズ詳細・エピソード詳細の最下部に置かれる「外部サイト」セクションを、 上のメインコンテンツと視覚的に区切るための薄い上罫線。 */
.external-links-section {
  margin-top: 32px;
  padding-top: 8px;
  border-top: 1px dotted var(--border);
}
.external-links-section h2 {
  font-size: 1.05em;
}
.external-links-section ul {
  margin: 4px 0 0;
}
.external-links-section a {
  /* nofollow 外部リンクは少し控えめのアクセント色で */
  color: var(--accent-blue);
}

/* 人物詳細の「代表作（プリキュアを除く）」。「年 ｜ 作品 ｜ 役職」の 3 列で、年と役職は折り返さない。
   作品名は作品の公式サイトへの外部リンク。アーカイブへのリンクには「公式サイトのアーカイブ」の小さな札を添える。 */
.notable-works-table th.col-year,
.notable-works-table td.col-year {
  width: 7.5em;
  white-space: nowrap;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.notable-works-table th.col-role,
.notable-works-table td.col-role {
  width: 12em;
}
.notable-works-table td.col-title a {
  color: var(--accent-blue);
}
.notable-work-archive {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.78em;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .notable-works-table th.col-year,
  .notable-works-table td.col-year { width: auto; }
  .notable-works-table th.col-role,
  .notable-works-table td.col-role { width: auto; }
}

/* 人物詳細の本編クレジットで、役職の見出しの下に添える「初担当（声の出演は初出演）『作品』第N話（放送日）」の 1 行。 */
.credit-role-first {
  margin: -4px 0 8px;
  font-size: 0.85em;
  color: var(--muted);
}
.credit-role-first a { color: var(--accent-blue); }

/* 人物・企業・キャラ・商品の各詳細ページ末尾の「外部リンク」セクション。
   .external-links ul はバッジ風に横並びで配置し、各種類は色違いの薄いボーダーで区別する。
   購入リンクの .product-link 群と意匠を揃えつつ、サイズ感はやや小さめに。 */
#external-links {
  margin-top: 32px;
  padding-top: 8px;
  border-top: 1px dotted var(--border);
}
#external-links h2 {
  font-size: 1.05em;
}
.external-links {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.external-links > li { margin: 0; padding: 0; }
.external-link {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.92em;
  text-decoration: none;
  border: 1px solid #d1d5db;
  color: var(--fg);
  background: #f9fafb;
  white-space: nowrap;
}
.external-link:hover {
  background: #f0f1f3;
}
.external-link-official  { border-color: #6b7280; }
/* 所属先（事務所・会社・楽団などのサイトにある本人のプロフィール）。公式ページのグレーと見分けられる青。 */
.external-link-affiliation { border-color: #2563eb; }
.external-link-x         { border-color: #0f172a; }
.external-link-instagram { border-color: #d6249f; }
.external-link-youtube   { border-color: #ff0000; }

/* スタッフ表：役職ラベルリンク エピソード詳細のスタッフセクション（staff-table）で、役職ラベル（脚本／絵コンテ／演出 等）を 役職統計詳細ページにリンクできるようになった。 */
.staff-table th a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
.staff-table th a:hover {
  color: var(--accent-pink);
  border-bottom-color: var(--accent-pink);
}

/* 人物詳細の所属併記、企業詳細のメンバー履歴・ロゴ範囲注記、一覧の役職カラム */

/* 人物詳細：所属屋号の併記 「所属：東映アニメーション」の小書きラベル。 */
.involvement-affiliation {
  margin-left: 0.4em;
  font-size: 0.88em;
}

/* 企業詳細：ロゴ下のクレジット範囲注記 「クレジット範囲：キミとアイドルプリキュア♪ #1〜14」のような注記。 */
.logo-credit-range {
  margin-left: 1em;
  font-size: 0.82em;
  line-height: 1.5;
  margin-top: 2px;
}

/* 企業詳細：ロゴタイプ（ロゴを持つ屋号）のカードリスト。 */
.brand-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.brand-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.brand-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.brand-name { font-weight: 600; }
.brand-kana { font-size: 0.85em; }
.brand-period {
  margin-left: auto;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  white-space: nowrap;
}
.brand-logos {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0 12px;
  border-top: 1px dashed var(--border);
  font-size: 0.92em;
}
.brand-logos > li { margin: 3px 0; }
.brand-logo-label { font-weight: 500; }

/* 企業詳細：クレジット履歴の屋号セクション見出し（「TAP 名義」など。初登場順に並ぶ）。 */
.alias-section-heading {
  margin: 24px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 1.05em;
}
.alias-section-note {
  font-size: 0.78em;
  font-weight: 400;
}

/* 人物詳細：声の出演の「役（キャラ）」大くくり見出し。 */
.voice-character-heading {
  margin: 14px 0 6px;
  font-size: 0.98em;
}
.voice-character-heading a {
  font-weight: 600;
}
/* 一覧の役職カラム persons-index / companies-index で読みと話数の間に追加した「役職」カラム。 */
.persons-index-table th.col-roles,
.persons-index-table td.col-roles,
.companies-index-table th.col-roles,
.companies-index-table td.col-roles {
  font-size: 0.88em;
  line-height: 1.5;
  word-break: break-word;
  max-width: 22em;
}

/* 協力行レイアウト 声の出演ブロックの 2 段目（キャラ名カラム = td.character-cell）に「協力」を置き、 3 段目（声優名カラム = td.actor-cell）に屋号一覧を並べる。 */
.credit-section table.fallback-vc-table tr.cooperation-row > td.role-name {
  /* このセルは空表示なので装飾なし */
  text-align: inherit;
  font-weight: inherit;
  padding-right: inherit;
  white-space: inherit;
}
.credit-section table.fallback-vc-table tr.cooperation-row > td.character-cell {
  text-align: right;
  font-weight: bold;
  padding-right: 16px;
  white-space: nowrap;
}
/* ──────────────────── クレジットの表：スマホの幅 ────────────────────
   クレジットの表（役職名 | 中身）は、パソコンの幅では役職名の列を credit-align.js がページ内でそろえた幅
   （--credit-role-name-w。最も長い役職名に合わせる）で並べる。スマホの幅ではその幅と各列の最低幅の合計が画面を
   超え、名前の列が 1 文字幅まで押しつぶされたり、ページが横にはみ出したりしていた。
   スマホの幅では各行を「役職名の列 + 中身の列」の grid に組み替える。
     - 役職名の列は固定の幅（8.5em）にし、長い役職名はその中で折り返す。空の役職名のセルも同じ幅を取るので、
       同じページの表どうしで列の位置がそろう（credit-align.js のそろえ幅は、組み替えた後の列の幅を測ってしまい
       狭くなるので、スマホの幅では使わない）。
     - 中身のセル（所属を前に置く行の屋号と名前、2 列・3 列の枠の各列）は中身の列に縦に積む
       （屋号の下に名前、多段組みは 1 列）。
     - 声の出演の表は「役職名 | キャラ名 | 声優名」の 3 列で、キャラ名の列も固定の幅（8em）にする。
       名前はなるべく語の途中で折り返さず、収まらないときだけ折り返す。 */
@media (max-width: 768px) {
  .credit-section {
    --credit-role-col-m: 8.5em;
    --credit-char-col-m: 8em;
  }
  .credit-section table.fallback-table,
  .credit-section table.fallback-table > tbody,
  .credit-section table.fallback-vc-table,
  .credit-section table.fallback-vc-table > tbody {
    display: block;
    max-width: none;
  }
  .credit-section table.fallback-table tr {
    display: grid;
    grid-template-columns: var(--credit-role-col-m) minmax(0, 1fr);
    column-gap: 10px;
  }
  .credit-section table.fallback-vc-table tr {
    display: grid;
    grid-template-columns: var(--credit-role-col-m) var(--credit-char-col-m) minmax(0, 1fr);
    column-gap: 10px;
  }
  /* パソコンの幅の、セルの種類ごとの最低幅・右余白（td.role-name など、こちらより優先度が高い）も打ち消す。 */
  .credit-section table.fallback-table td,
  .credit-section table.fallback-vc-table td,
  .credit-section table.fallback-table td.role-name,
  .credit-section table.fallback-table td.entry-cell,
  .credit-section table.fallback-table td.affil-prefix,
  .credit-section table.fallback-vc-table td.role-name,
  .credit-section table.fallback-vc-table td.character-cell,
  .credit-section table.fallback-vc-table td.actor-cell,
  .credit-section table.fallback-vc-table tr.cooperation-row > td.role-name,
  .credit-section table.fallback-vc-table tr.cooperation-row > td.character-cell {
    display: block;
    min-width: 0;
    width: auto;
    padding: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .credit-section table.fallback-table td.role-name,
  .credit-section table.fallback-vc-table td.role-name {
    grid-column: 1;
    white-space: normal;
  }
  .credit-section table.fallback-table td:not(.role-name) {
    grid-column: 2;
  }
  .credit-section table.fallback-table td.affil-prefix {
    white-space: normal;
  }
  .credit-section table.fallback-vc-table td.character-cell {
    grid-column: 2;
    white-space: normal;
  }
  .credit-section table.fallback-vc-table td.actor-cell {
    grid-column: 3;
  }
  /* まとまりの頭の見出しは、キャラ名と声優名の 2 列分の幅を使う。 */
  .credit-section table.fallback-vc-table td.character-cell.block-heading {
    grid-column: 2 / span 2;
  }
  /* 協力の行（「キャスティング協力 | 屋号」）は役職に近いので、スマホの幅では見出しを役職名の列に置き、
     屋号はキャラ名と声優名の 2 列分の幅を使う（声優名の列だけでは屋号が途中で折り返す）。 */
  .credit-section table.fallback-vc-table tr.cooperation-row > td.role-name {
    display: none;
  }
  .credit-section table.fallback-vc-table tr.cooperation-row > td.character-cell {
    grid-column: 1;
    white-space: normal;
  }
  .credit-section table.fallback-vc-table tr.cooperation-row > td.actor-cell {
    grid-column: 2 / span 2;
  }
  /* 行間の区切り（ブロックの切れ目・協力の行）は td の上余白で付けているので、grid にしても残す。 */
  .credit-section table.fallback-table tr.block-break > td,
  .credit-section table.fallback-vc-table tr.block-break > td,
  .credit-section table.fallback-vc-table tr.cooperation-row > td {
    padding-top: 6px;
  }
  /* テンプレ展開結果のブロックも、上限を付けた役職名の列の右から始める。 */
  .credit-section .role-rendered {
    margin-left: calc(var(--credit-role-col-m) + 10px);
  }
}

/* ════════════════════════════════════════════════════════════════ セクション内ナビ — 左サイド縦タイムライン型 - HTML 骨格は _layout.sbn が出力する <nav id="pageSectionNav"> プレースホルダのみで、 中身は */

/* ナビ本体は左サイドに固定。 */
.page-section-nav {
  display: none;
  position: fixed;
  top: 88px; /* ヘッダ 56px + 上余白 + パンくず分の追加余白 */
  /* 配置位置は CSS 変数で管理。 */
  left: max(16px, calc((100vw - 960px) / 2 - 360px));
  width: 340px;
  /* 本文 (max-width 960px 中央寄せ) の左端を侵食しないようナビ右端の実効幅を制約。
   画面幅 ≤959px は別 MQ で display:none に倒れるため実害なし。
   実効幅が縮んだら label は overflow:hidden + text-overflow:ellipsis で末尾省略。 */
  max-width: calc((100vw - 960px) / 2 - 28px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 40;
  padding: 4px 0;
  /* hidden 属性が立っているときはブラウザ既定の display:none が効くので、 ここで display を上書きしない（メディアクエリ側で display:block を当てる）。 */
}

.page-section-nav-inner {
  /* 内側のレイアウトコンテナ。罫線・余白等は子要素側で持つ。 */
  position: relative;
}

/* セクション一覧の前置き見出し。 */
.page-section-nav-heading {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-left: 20px;
  margin-bottom: 10px;
  border-left: 3px solid var(--accent-pink);
  line-height: 1.4;
}

/* タイムライン本体：縦線とアイテム円を ::before / dot で描画する。 */
.page-section-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  /* 縦線は ::before で 1 本貫通させる。グレーベース + 上半分（--progress 部）をピンクで上書き。 */
  --progress: 0%;
}
.page-section-nav-list::before {
  content: "";
  position: absolute;
  left: 9px; /* dot 中心と一致させる（dot:10px width → 半径 5、padding-left 4 で中心 9px） */
  /* 縦線の上端を最初のアイテムのマーカー位置（≒ 14px）まで下げ、 その上に余分な線端が見えてしまう（左上の赤いドット問題）のを解消する。 */
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--accent-pink) 0%,
    var(--accent-pink) var(--progress),
    #e5e7eb var(--progress),
    #e5e7eb 100%
  );
  border-radius: 1px;
  /* progress 変化を滑らかに：JS の rAF と組み合わせて滑らかな伸縮を実現 */
  transition: background 0.15s linear;
}

.page-section-nav-item {
  position: relative;
  margin: 0;
  padding: 0;
}

/* アイテム本体（リンク）— grid 3 列構成： [年(右揃)] [マーカー(バッジ or ○、中央)] [ラベル(左揃)] マーカー列にはバッジ or dot のいずれかだけが見える状態にして（バッジが居る時は dot を非表示にする）、縦線がマーカー列の中央を貫通するようにする。 */
.page-section-nav-item > a {
  display: grid;
  /* 既定は [年予約 0] [マーカー 16px] [ラベル 1fr]。has-year で年列を 2.6em に拡張する。 */
  grid-template-columns: 0 16px 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 4px 8px 4px 0;
  color: var(--muted);
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.4;
  transition: transform 0.15s ease, color 0.12s ease, background 0.12s ease;
  /* grid item のデフォルト min-width: auto が「中身の最小幅まで縮まない」挙動になり、
     1fr のラベル列がコンテナ幅を超えて広がって text-overflow:ellipsis が効かない原因となるため、
     a 自体を親 li の幅で打ち切るよう明示する。 */
  min-width: 0;
  max-width: 100%;
}
.page-section-nav.has-year .page-section-nav-item > a {
  grid-template-columns: 2.6em 16px 1fr;
}
.page-section-nav-item > a:hover {
  color: var(--fg);
  background: rgba(233, 30, 99, 0.04);
  text-decoration: none;
  /* translateX 揺れは grid 列幅とのズレを起こすため指定しない。 */
}
.page-section-nav-item > a:focus-visible {
  outline: 2px solid var(--accent-pink);
  outline-offset: 1px;
}

/* 年エリア（4 桁西暦、等幅）。 */
.page-section-nav-year {
  grid-column: 1;
  justify-self: end;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.78em;
  color: var(--muted);
  line-height: 1.5;
  text-align: right;
  /* has-year でない場合は親 grid の年列が 0 幅なので、要素自体は描画されない（はみ出さない）。 */
}
.page-section-nav-year.is-empty {
  visibility: hidden;
}

/* 件数バッジ。 */
.page-section-nav-count {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
  min-width: 1.8em;
  padding: 2px 5px;
  border-radius: 999px;
  text-align: center;
  /* 背景は 2 レイヤー：下地 #fff（不透明、縦線を完全に遮蔽）+ 上地 半透明ピンク（バッジの淡色感を維持）。1 レイヤーだけだと半透明ピンクが透けて縦線が貫通して見えるため、白下地を必ず重ねる 。 */
  background:
    rgba(233, 30, 99, 0.12),
    #fff;
  /* 上の 2 値構文は古いブラウザで誤解されるため、明示的に layer 指定する。 */
  background-color: #fff;
  background-image: linear-gradient(rgba(233, 30, 99, 0.12), rgba(233, 30, 99, 0.12));
  color: #831843;
  white-space: nowrap;
  /* バッジ周囲の白フチで縦線を視覚的に切る（バッジの上下数 px に縦線がはみ出さない）。 */
  border: 2px solid #fff;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.page-section-nav-count.is-empty {
  /* バッジ値が無い場合：完全に非表示にして、同じセル内の dot を表に出す。 */
  display: none;
}
/* 現在地アイテムでの件数バッジ：濃ピンク背景 + 白文字で強調。 */
.page-section-nav-item.is-current .page-section-nav-count {
  background: var(--accent-pink);
  color: #fff;
  box-shadow:
    0 0 0 3px rgba(233, 30, 99, 0.18),
    0 0 10px rgba(233, 30, 99, 0.35);
}

/* 円アイコン本体。 */
.page-section-nav-dot {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #cbd5e1;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
              transform 0.18s ease;
}
/* バッジが存在するアイテム（has-count かつ count.is-empty でない）では dot を隠す。 */
.page-section-nav-item:has(.page-section-nav-count:not(.is-empty)) .page-section-nav-dot {
  display: none;
}

/* 通過済みアイテム：dot を中抜きピンク。 */
.page-section-nav-item.is-passed > a {
  color: var(--fg);
}
.page-section-nav-item.is-passed .page-section-nav-dot {
  background: #fff;
  border-color: var(--accent-pink);
}

/* 現在地アイテム：dot をピンクで塗りつぶし、ふわっとした光彩。ラベルもピンクで強調。 */
.page-section-nav-item.is-current > a {
  color: var(--accent-pink);
  font-weight: 600;
}
.page-section-nav-item.is-current .page-section-nav-dot {
  background: var(--accent-pink);
  border-color: var(--accent-pink);
  box-shadow:
    0 0 0 3px rgba(233, 30, 99, 0.18),
    0 0 12px rgba(233, 30, 99, 0.45);
  transform: scale(1.15);
}

/* ラベル：残りスペースを全部使い、長い場合は末尾省略（…）。 */
.page-section-nav-label {
  grid-column: 3;
  justify-self: start;
  min-width: 0;
  /* justify-self:start の grid item は折り返さない文字列の幅まで広がるので、列幅で打ち切って省略記号を出す。 */
  max-width: 100%;
  font-size: 0.88em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 縦線位置：マーカー列（grid 第 2 列）の中央を貫通させる - has-year なし: 年列 0、gap 8px、マーカー 16px → マーカー中央 = 0 + 8 + 16/2 = 16px - has-year あり: 年列 2.6em(=約 41.6px @ 16px base)、gap 8px、マーカー */
.page-section-nav-list::before {
  left: 16px; /* デフォルト（year なし） */
}
.page-section-nav.has-year .page-section-nav-list::before {
  left: calc(2.6em + 16px);
}
/* has-count 単独や has-year + has-count のときも、マーカー列幅は同じ 16px のため has-year の有無だけで縦線位置が決まる。 */
.page-section-nav.has-count:not(.has-year) .page-section-nav-list::before {
  left: 16px;
}
.page-section-nav.has-year.has-count .page-section-nav-list::before {
  left: calc(2.6em + 16px);
}

/* scroll-behavior:smooth はグローバルに付けない（直リンクや戻る/進むでアニメさせない）。
   section-nav.js のクリックハンドラ側でだけ scrollTo({behavior:'smooth'}) を発行するハイブリッド方針。 */

/* セクション側のスクロールオフセット：スティッキーヘッダ（2 行構造で約 95px）ぶん、
   アンカークリック時のジャンプ位置を上に逃がす。実高さ + 約 15px のバッファで 110px。 */
section[id] {
  scroll-margin-top: 110px;
}

/* デスクトップ広め（≥1180px）：左サイド全幅表示。 */
@media (min-width: 1180px) {
  .page-section-nav {
    display: block;
  }
}

/* デスクトップ中間（960〜1179px）：本文と被らないギリギリで左端寄せ、幅を少し詰める。 */
@media (min-width: 960px) and (max-width: 1179px) {
  .page-section-nav {
    display: block;
    left: 12px;
    width: 200px;
  }
  .page-section-nav-label {
    font-size: 0.82em;
  }
}

/* 狭めデスクトップ・タブレット（769〜959px）：左サイドナビは表示せず、 スクロール文脈は本文中心で扱う。 */
@media (max-width: 959px) {
  .page-section-nav {
    display: none !important;
  }
}

/* モバイル：scroll-margin-top を少し縮める（ヘッダが非固定で消えるため余白小でも見出しが隠れない）。 */
@media (max-width: 560px) {
  section[id] {
    scroll-margin-top: 60px;
  }
}

/* ──────────────── モバイルオーバーレイ内のセクションナビミラー ──────────────── */
.mobile-nav-overlay-section-nav {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.mobile-nav-overlay-section-nav-heading {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px 0;
  padding-left: 14px;
}
.mobile-nav-overlay-section-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-nav-overlay-section-nav-list li {
  margin: 0;
}
.mobile-nav-overlay-section-nav-list a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--fg);
  font-size: 0.95em;
  text-decoration: none;
}
.mobile-nav-overlay-section-nav-list a:hover,
.mobile-nav-overlay-section-nav-list a:focus-visible {
  background: rgba(233, 30, 99, 0.08);
  color: var(--accent-pink);
  outline: none;
}

/* ════════════════════════════════════════════════════════════════ モバイル時のハンバーガーメニュー（site-header は通常通り static） - デスクトップ（>768px）：site-header は非固定、左サイドにセクションナビ。 */

/* ハンバーガーボタン本体。 */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  z-index: 70;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
  cursor: pointer;
  padding: 0;
  /* タップ領域を 44px 確保しつつ、アイコン線を中央に並べる */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.mobile-nav-toggle:focus-visible {
  outline: 2px solid var(--accent-pink);
  outline-offset: 2px;
}
.mobile-nav-toggle .hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fg);
  border-radius: 1px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
/* オーバーレイ展開時のアイコンを X 形に変形（aria-expanded で状態判定）。 */
.mobile-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* オーバーレイ：全画面の暗幕 + 右側パネル。 */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  /* hidden 属性側でブラウザ既定の display:none が効く */
}
.mobile-nav-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.mobile-nav-overlay-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(80vw, 320px);
  background: #fff;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18);
  padding: 64px 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobile-nav-overlay-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  color: var(--fg);
}
.mobile-nav-overlay-close:hover {
  background: rgba(233, 30, 99, 0.06);
}
.mobile-nav-overlay-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-nav-overlay-list li {
  margin: 0;
}
.mobile-nav-overlay-list a {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  color: var(--fg);
  font-size: 1.02em;
  text-decoration: none;
}
.mobile-nav-overlay-list a:hover,
.mobile-nav-overlay-list a:focus-visible {
  background: rgba(233, 30, 99, 0.08);
  color: var(--accent-pink);
  outline: none;
}
/* オーバーレイ展開中は背面スクロールを抑止。 */
body.mobile-nav-open {
  overflow: hidden;
}
.mobile-nav-overlay-search {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ──────────────── モバイル時の構造調整（≤768px） ──────────────── */
@media (max-width: 768px) {
  /* モバイルでは site-header を非固定に戻す。 */
  .site-header {
    position: static;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* ハンバーガーボタンを表示。 */
  .mobile-nav-toggle {
    display: flex;
  }
  /* モバイル：ヘッダ内ナビ本体と検索ボックスを非表示。.mobile-nav-overlay にのみ集約。
   セレクタは .site-header の子孫として書き、詳細度 (0,2,0) で .site-header .container を後勝ちで上書き。 */
  .site-header .site-header-bottom {
    display: none;
  }
  .site-header .site-nav {
    display: none;
  }
  .site-header .site-search {
    display: none;
  }
}

/* スマホ幅でハンバーガーボタンの右マージンを container に揃える（任意の微調整）。 */
@media (max-width: 560px) {
  .mobile-nav-toggle {
    top: 8px;
    right: 8px;
  }
  /* 狭幅ではワードマークを 2 段にし、肩書きを上の段に回す（1 行だとハンバーガーボタンとぶつかるため）。 */
  .site-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.25;
  }
}

/* デスクトップでは念のためオーバーレイ／ボタンを非表示に固定（メディアクエリ外の保険）。 */
@media (min-width: 769px) {
  .mobile-nav-toggle,
  .mobile-nav-overlay {
    display: none !important;
  }
  body.mobile-nav-open {
    overflow: auto;
  }
}

/* ════════════════════════════════════════════════════════════════ 役職バッジ（.role-badge）と エピソード行・スタッフ行共通レイアウト 役職を 1 つの「色付きチップ」として描画するための共通スタイル。 */

.role-badge {
  display: inline-block;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 0.84em;
  line-height: 1.7;
  font-weight: 500;
  /* デフォルト（未マッピングの役職コード用）：薄灰色 */
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted);
  border: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: baseline;
}
a.role-badge { text-decoration: none; }
a.role-badge:hover { opacity: 0.85; text-decoration: none; }

/* 密表示用の縮小版（エピソード行内のスタッフ欄など、小さく多数並べる場合）。 */
.role-badge-sm {
  font-size: 0.76em;
  padding: 0 6px;
  border-radius: 9px;
  line-height: 1.6;
}

/* 役職バッジの文字色は、各色の淡い背景の上で 4.5:1 を満たすよう、背景・枠の色より濃くしている。 */
/* プロデューサー・企画 = 紫（企画はプロデューサー枠のフォールバックなので同色） */
.role-badge[data-role-code="PRODUCER"],
.role-badge[data-role-code="PLANNING"] {
  background: rgba(126, 87, 194, 0.13);
  color: #7a54bc;
  border-color: rgba(126, 87, 194, 0.42);
}
/* シリーズ構成・脚本 = 青 */
.role-badge[data-role-code="SERIES_COMPOSITION"],
.role-badge[data-role-code="SCREENPLAY"] {
  background: rgba(59, 130, 196, 0.13);
  color: #316ca4;
  border-color: rgba(59, 130, 196, 0.42);
}
/* 絵コンテ = ティール（青系と暖系の中間） */
.role-badge[data-role-code="STORYBOARD"] {
  background: rgba(46, 167, 173, 0.14);
  color: #20767a;
  border-color: rgba(46, 167, 173, 0.45);
}
/* シリーズディレクター・演出・監督 = ピンク */
.role-badge[data-role-code="SERIES_DIRECTOR"],
.role-badge[data-role-code="EPISODE_DIRECTOR"],
.role-badge[data-role-code="DIRECTOR"] {
  background: rgba(233, 30, 99, 0.13);
  color: #c71958;
  border-color: rgba(233, 30, 99, 0.42);
}
/* キャラクターデザイン・作画監督 = 緑 */
.role-badge[data-role-code="CHARACTER_DESIGN"],
.role-badge[data-role-code="ANIMATION_DIRECTOR"] {
  background: rgba(76, 163, 107, 0.14);
  color: #38784f;
  border-color: rgba(76, 163, 107, 0.42);
}
/* 美術デザイン・美術（TV）・美術監督 = 黄 */
.role-badge[data-role-code="ART_DESIGN"],
.role-badge[data-role-code="ART_DIRECTOR"],
.role-badge[data-role-code="ART_DIRECTOR_TV"] {
  background: rgba(212, 160, 23, 0.14);
  color: #8a680f;
  border-color: rgba(212, 160, 23, 0.42);
}

/* スタッフ バッジ行（共通） シリーズ一覧 TV サブ行・/episodes/ ランディング・シリーズ詳細 dl.ep-list で共有。 */
.staff-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  line-height: 1.7;
  color: var(--fg);
}
.staff-badge-group {
  /* バッジと名前を 1 ユニットとして扱う。 */
  display: inline;
}
.staff-badge-group .role-badge + .role-badge {
  /* 「絵コンテ・演出」など同一人物のとき、バッジを 2 つ並べる時の隙間調整。 */
  margin-left: 2px;
}
.staff-badge-group .role-badge {
  margin-right: 4px;
}
.staff-name {
  color: var(--fg);
}
.staff-name:hover {
  text-decoration: underline;
}
.staff-affiliation {
  font-size: 0.8em;
  color: var(--muted);
}
/* クレジットの名義が今の名乗りと違うときに添える今の名乗り（「上野 ケン (玖遠 らぎ)」の括弧）。所属屋号（0.8em）ほどではなく少し小さく。 */
.staff-current-name {
  font-size: 0.9em;
}
/* 声優などを伏せてクレジットされた行（「？」）の後ろに添える、正名義の括弧部分。 */
.staff-masked-actual {
  color: var(--muted);
}
/* 1 人分のスタッフ表記（名義 + 所属屋号 + 担当話数 範囲ラベル）を 1 ユニットとして扱い、
   ユニット途中での改行を抑止する。連名間の 、 区切りはこのユニットの外側に置くため、
   行幅を超えるときは 、 の直後で素直に改行される（、 は kinsoku で行頭禁則のため、
   常に前行末尾に残る）。シリーズ一覧 TV サブ行の staff-badge-group 内連名と、
   シリーズ詳細メインスタッフ key-staff-names 内連名の両方に使う共通クラス。 */
.staff-member-group {
  display: inline-block;
  white-space: nowrap;
}

/* エピソード行 共通レイアウト（/episodes/ + シリーズ詳細 dl） 1 エピソード = 2 段構成： .ep-row-main : 第N話 / サブタイトル / 放送日 を 3 列グリッド（4em / 1fr / 11em） .staff-badges-row : 1 段下にずれて、5 役職の色付きバッジ群を */
.ep-row {
  padding: 4px 0;
  border-bottom: 1px dotted #e5e7eb;
}
.ep-row:last-child { border-bottom: none; }
.ep-row-main {
  display: grid;
  grid-template-columns: 4em 1fr 7em;
  gap: 12px;
  align-items: baseline;
}
.ep-row-no {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
.ep-row-title {
  font-size: 0.98em;
  color: var(--fg);
  /* エピソードサブタイトルは一覧系（/episodes/・シリーズ詳細・ホーム放送予定/最新・ 今日の記念日）で共通して太字にする。 */
  font-weight: 600;
}
.ep-row-title:hover { text-decoration: underline; }
/* 放送見込み注記「（見込）」の共通スタイル。狙いは「列幅をガタつかせない」こと： - inline で本体（日付・話数）の直後に密着させ、改行を禁止（nowrap） - 親セル/見出しの数字フォント（tabular-nums）には乗せず、やや小さめの注記サイズに 落として、固定列幅（series-tv-table の c */
.estimate-note {
  display: inline;
  white-space: nowrap;
  font-size: 0.78em;
  /* 数字列に紛れないよう、注記であることが分かる控えめな色。 */
  color: var(--muted);
  /* 本体（日付・話数）に密着させ、間延びを防ぐ。 */
  margin-left: 1px;
  letter-spacing: 0;
}
.ep-row-date {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.88em;
  white-space: nowrap;
  text-align: right;
  color: var(--muted);
}
/* スタッフ段：第N話列ぶんだけ左にインデント、放送日列の幅も確保しつつ flex で詰める。 */
.ep-row .staff-badges-row {
  margin: 2px 0 4px 5em;
  font-size: 0.94em;
}

/* スマホ向け：第N話 / タイトル / 放送日 を縦積み、スタッフ段のインデントも解除。 */
@media (max-width: 640px) {
  .ep-row-main {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .ep-row-no, .ep-row-date {
    text-align: left;
  }
  .ep-row .staff-badges-row {
    margin-left: 0;
  }
}

/* シリーズ一覧 TV サブ行のスタッフ欄 [スタッフ] 行のラベル右に staff-badges-row を入れて、5 役職を色付きバッジで横並び表示する。 */
.series-tv-table .sub-row-line .staff-badges-row {
  flex: 1 1 auto;
  min-width: 0;
}

/* プリキュア バッジ行（シリーズ一覧 TV サブ行） プリキュアマスタの key_color を地色にしたバッジを横並びで詰める。 */
.precure-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.7;
}
.precure-badge {
  display: inline-block;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 0.82em;
  line-height: 1.7;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  /* key_color 未設定時の中立フォールバック（インライン style で上書きされる）。 */
  background: rgba(0, 0, 0, 0.05);
  color: var(--fg);
  border: 1px solid var(--border);
}
.precure-badge:hover { opacity: 0.85; text-decoration: none; }

/* ════════════════════════════════════════════════════════════════ /episodes/ ランディング専用の 3 列レイアウト 1 行に 3 列で配置 左：第N話 + 放送日 を縦積みでひとブロック化（.ep-row-no-date） 中：サブタイトル（.e */

/* 3 列構成：左ブロック（話数+日付） / タイトル / スタッフ。 */
.episodes-index-list .ep-row-main {
  grid-template-columns: 5em minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

/* grid item の min-width を明示的に 0 にする。 */
.episodes-index-list .ep-row-main > .ep-row-title,
.episodes-index-list .ep-row-main > .staff-badges-row {
  min-width: 0;
}

/* <a class="ep-row-title"> はインライン要素のため、grid cell に入れたときに幅 0 に潰れて、 中の日本語テキストが 1ch 幅で縦書きのように描画されてしまう。 */
.episodes-index-list .ep-row-main > .ep-row-title {
  display: block;
}

/* `.episodes-index-list li { display: grid; ... }` のルールが `<li class="ep-row">` にも 当たると、ep-row 自身が grid 化されて子（ep-row-main）が auto column 第1列に押し込まれ、 ep-row-main 内のサブ */
.episodes-index-list li.ep-row {
  display: block;
  grid-template-columns: none;
}

/* 左ブロック：第N話と放送日を縦積み、テキストは右寄せで列幅にぴたっと揃える。 */
.episodes-index-list .ep-row-no-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
}
.episodes-index-list .ep-row-no-date .ep-row-no {
  /* 元の .ep-row-no スタイル（右寄せ・等幅数字・ミュート色）はそのまま継承 */
}
.episodes-index-list .ep-row-no-date .ep-row-date {
  /* スタンドアロン段ではなく、no の下に積まれる形に。インデントは container 側の align-items で右寄せ済み。 */
  text-align: right;
  margin-top: 1px;
}

/* スタッフ列：右半分の領域に小さなフォントでバッジ群を並べる。 */
.episodes-index-list .ep-row .staff-badges-row {
  margin: 0;
  font-size: 0.7em;
}

/* スマホ向け：3 列を縦積みに（タイトルが折り返して読みやすいレイアウトに戻す）。 */
@media (max-width: 640px) {
  .episodes-index-list .ep-row-main {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .episodes-index-list .ep-row-no-date {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .episodes-index-list .ep-row-no-date .ep-row-date {
    margin-top: 0;
  }
  .episodes-index-list .ep-row .staff-badges-row {
    font-size: 0.78em;
  }
}
/* ════════════════════════════════════════════════════════════════════════════ ヒーロー・SNS シェア・運営情報・統計装飾まわりのスタイル - ヒーローセクションのグラデ（home の .hero-gradient） - SNS シェアボタン群 */

/* ヒーロー：グラデ背景バリエーション ホームの .hero に .hero-gradient を併用すると、淡ピンク→クリームの縦グラデ背景になる。 */
.hero.hero-gradient {
  background: linear-gradient(180deg, #fff1f6 0%, #fde7ef 45%, #fff8f0 100%);
  border-radius: 12px;
  padding: 2.2em 1.4em;
}
.hero.hero-gradient h1 {
  color: #be185d;
  /* ホーム大見出しのサイト名はブランド書体（Kiwi Maru）を据え置く。 */
  font-family: var(--font-brand);
}
.hero.hero-gradient .lead {
  color: #9d174d;
  /* ホームのタグライン（プリキュアまるごとデータベース。）もブランド書体を据え置く。
     他ページの .lead はアクセント書体（Kaisei Decol）だが、ここだけブランド側に上書きする。 */
  font-family: var(--font-brand);
}

/* 姉妹サイト「いえるかなクイズ」バナーカード（ホーム上部）。
   1920×640(3:1) の不透明バナーをカード全域に敷き、角丸でクリップして
   淡い境界線＋影で「クリックできる 1 枚」に見せる。ホバー/フォーカスでわずかにリフトして
   クリック可能性を示す。img は width:100%/height:auto でレスポンシブに縮む。 */
.sister-site {
  margin: 1.4em 0;
}
.sister-site-link {
  display: block;
  /* 本文幅いっぱいだと主役級に大きくなりすぎるため、控えめな callout サイズに抑えて中央寄せ。 */
  max-width: 500px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #f4c6dd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.sister-site-link:hover,
.sister-site-link:focus-visible {
  border-color: var(--accent-pink);
  box-shadow: 0 4px 14px rgba(233, 30, 99, 0.16);
  transform: translateY(-2px);
  text-decoration: none;
}
.sister-site-banner {
  display: block;
  width: 100%;
  height: auto;
}

/* SNS シェアボタン群 _share-buttons.sbn が main の末尾に挿入する <aside class="share-buttons">。
   角丸カードの中にブランドカラーのピル群を並べる。ロゴの自前描画はせず、
   色とサービス名でサービスを識別する（ロゴ使用規約・改変リスクの回避）。 */
.share-buttons {
  margin: 2.4em 0 1.2em;
  padding: 1.1em 1.2em 1.2em;
  border: 1px solid #fce7f3;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff7fb 0%, #ffffff 90%);
}
.share-buttons-heading {
  /* サイト共通の h2 装飾（下線・紫の左帯）はカード内では打ち消し、
     シェアアイコン + 文言の軽い見出しにする。 */
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.95em;
  font-weight: 600;
  color: #9d174d;
  margin: 0 0 0.8em;
  padding: 0;
  border: 0;
  letter-spacing: 0.04em;
}
.share-buttons-heading svg {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}
.share-buttons-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em 0.6em;
}
.share-buttons-list li {
  margin: 0;
  padding: 0;
}

/* 共通の見た目（カラーは個別サービス側で上書きする）。 */
.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-width: 3.4em;
  padding: 0.6em 1.05em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.88em;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  color: #1f2937;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  font-family: inherit;
}
.share-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
  text-decoration: none;
}
.share-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.share-button:focus-visible {
  outline: 2px solid #ec4899;
  outline-offset: 2px;
}
.share-button svg {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}

/* X / Twitter — 黒（塗り） */
.share-button-x { background: #111827; color: #fff; border-color: #111827; }
.share-button-x:hover { background: #000; color: #fff; }

/* Bluesky — 水色 */
.share-button-bluesky { background: #1185fe; color: #fff; border-color: #1185fe; }
.share-button-bluesky:hover { background: #0d6ee0; color: #fff; }

/* Misskey — ライム */
.share-button-misskey { background: #86b300; color: #fff; border-color: #86b300; }
.share-button-misskey:hover { background: #76a000; color: #fff; }

/* Facebook — ブランド青 */
.share-button-facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.share-button-facebook:hover { background: #166fe5; color: #fff; }

/* はてなブックマーク — はてな青 */
.share-button-hatena { background: #00a4de; color: #fff; border-color: #00a4de; }
.share-button-hatena:hover { background: #008cbf; color: #fff; }

/* LINE — ブランド緑 */
.share-button-line { background: #06c755; color: #fff; border-color: #06c755; }
.share-button-line:hover { background: #05a847; color: #fff; }

/* URL コピー — 操作系として SNS とは別格のグレー基調 */
.share-button-copy { background: #f3f4f6; color: #1f2937; border-color: #d1d5db; }
.share-button-copy:hover { background: #e5e7eb; color: #111827; }

/* コピー成功時のトースト。固定位置の小さなピル状ラベルでフェード表示する。 */
.share-toast {
  position: fixed;
  bottom: 1.5em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.6em 1.1em;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  border-radius: 999px;
  font-size: 0.9em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.share-toast.is-visible {
  opacity: 1;
}

/* スマホ画面ではトーストをやや上に上げ、モバイルナビトグルと干渉しないように。 */
@media (max-width: 768px) {
  .share-toast {
    bottom: 4.5em;
  }
}

/* フッタの運営情報リンク群は .footer-nav（フッタ本体のスタイル群を参照）。 */

/* ─────────── About ページの運営案内リスト ─────────── */
.about-operations-list {
  list-style: disc;
  padding-left: 1.4em;
  margin: 0.4em 0 0.8em;
}
.about-operations-list li {
  margin: 0.35em 0;
  line-height: 1.6;
}
.about-operations-list li a {
  font-weight: 500;
}

/* ─────────── 運営情報ページ共通：要点ボックス ─────────── */
/* プライバシーポリシー冒頭などで「現状の取り扱い」を 3 行で要約する淡ピンクのカード。 */
.policy-summary {
  margin: 14px 0 6px;
  padding: 12px 16px;
  border: 1px solid #fce7f3;
  border-left: 4px solid var(--accent-pink);
  border-radius: 8px;
  background: #fff7fb;
}
.policy-summary-title {
  margin: 0 0 6px;
  font-size: 0.92em;
  font-weight: 600;
  color: #9d174d;
}
.policy-summary ul {
  margin: 0;
  padding-left: 1.3em;
}
.policy-summary li {
  margin: 3px 0;
  line-height: 1.7;
}

/* ─────────── 免責事項：使用フォントの一覧 ─────────── */
/* 「サブタイトル画像について」の折りたたみ。ライセンスごとの小見出し → フォントの箇条書き。
   各行は「製品名（製品ページへのリンク）＋ Windows の書体名（薄く）」、2 行目に使っている作品。 */
.subtitle-font-list { margin-top: 10px; }
.subtitle-font-license {
  font-size: 0.95em;
  margin: 12px 0 4px;
}
.subtitle-font-list ul {
  margin: 0;
  padding-left: 1.3em;
}
.subtitle-font-list li {
  margin: 4px 0;
  line-height: 1.6;
}
.subtitle-font-name {
  margin-left: 0.4em;
  font-size: 0.85em;
  color: var(--muted);
}
.subtitle-font-usage {
  display: block;
  font-size: 0.88em;
  color: var(--muted);
}
.subtitle-font-ruby-note {
  font-size: 0.9em;
  color: var(--muted);
}

/* ─────────── 運営情報ページ：経歴・改定日・外部送信の一覧・広告の注記 ─────────── */
/* このサイトについての「公式に関わった主な経歴」。日付を等幅数字で薄く前置きし、1 行 1 件。 */
.about-career-list li { margin: 4px 0; line-height: 1.7; }
.about-career-date {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  color: var(--muted);
  margin-right: 0.6em;
}
.about-policy-list li { margin: 6px 0; line-height: 1.7; }
/* 外部への情報送信の一覧（プライバシーポリシー）。1 サービス 1 項目で、送信先を太字で前置き。 */
.policy-transmission-list li { margin: 6px 0; line-height: 1.7; }
/* 権利の整理の根拠（免責事項の折りたたみの中身）。 */
.policy-basis { font-size: 0.95em; margin: 8px 0 0; }
/* ポリシーページ末尾の改定日。右寄せの薄字。 */
.policy-revised {
  margin-top: 28px;
  text-align: right;
  font-size: 0.85em;
  color: var(--muted);
}

/* ─────────── お問い合わせページ：窓口カード ─────────── */
/* X / メールの 2 窓口をカード全体クリックで開ける形にする（シェアカードと同じ世界観）。 */
.contact-channel-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 14px 0 8px;
}
.contact-channel-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid #fce7f3;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff7fb 0%, #ffffff 90%);
  text-decoration: none;
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.contact-channel-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}
.contact-channel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88em;
  font-weight: 600;
  color: #9d174d;
}
.contact-channel-head svg {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
}
.contact-channel-value {
  display: block;
  margin-top: 4px;
  font-size: 1.05em;
  font-weight: 600;
}
.contact-channel-note {
  display: block;
  margin-top: 2px;
  font-size: 0.82em;
}

/* 統計ランキング表のメダル装飾 テンプレ無変更で、CSS の :has() セレクタを使って「順位列を持つテーブル」だけに当てる。 */
table:has(th.col-rank) tbody tr:nth-child(1) td.col-rank {
  background: linear-gradient(180deg, #fff7d6 0%, #ffe98a 100%);
  color: #7c2d12;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #facc15;
}
table:has(th.col-rank) tbody tr:nth-child(2) td.col-rank {
  background: linear-gradient(180deg, #f9fafb 0%, #d1d5db 100%);
  color: #1f2937;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #9ca3af;
}
table:has(th.col-rank) tbody tr:nth-child(3) td.col-rank {
  background: linear-gradient(180deg, #fde8d4 0%, #f3a36b 100%);
  color: #7c2d12;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #d97706;
}

/* AdSense Auto Ads の CLS（Cumulative Layout Shift）抑制プレースホルダ Auto Ads が挿入する <ins class="adsbygoogle"> に対して、最低限の高さを与えておくことで 広告ロード前後でのレイアウトジャンプを軽減する目的。 */
ins.adsbygoogle {
  display: block;
  min-height: 1px;
}
ins.adsbygoogle[data-ad-status="filled"] {
  /* 充填された広告では何もしない（min-height をリセットして広告本来の高さに任せる）。 */
  min-height: auto;
}

/* 404 ページ用スタイル not-found.sbn 経由で出力される /404.html 専用。 */
.not-found-hero {
  text-align: center;
  padding: 2.4em 1em 1.6em;
  margin: 0 0 1.4em;
  background: linear-gradient(180deg, #fff7fb 0%, #fff 100%);
  border-radius: 12px;
}
.not-found-hero h1 {
  font-size: 1.6em;
  color: #be185d;
  margin: 0 0 0.4em;
  /* 404 の見出しはアクセント書体（Kaisei Decol）でやわらかい表情に。エラー画面の角を取る。 */
  font-family: var(--font-accent-deco);
}
.not-found-hero .lead {
  font-size: 1.05em;
  color: #831843;
  margin: 0 0 0.3em;
}
.not-found-hero .muted {
  margin: 0;
}

.not-found-suggestion-list {
  list-style: disc;
  padding-left: 1.4em;
  margin: 0.5em 0 0.8em;
}
.not-found-suggestion-list li {
  margin: 0.35em 0;
  line-height: 1.6;
}
.not-found-suggestion-list li a {
  font-weight: 500;
}

/* スキップリンク _layout.sbn の <body> 開始直後に <a class="skip-link" href="#main-content">本文へスキップ</a> として配置。 */
.skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 10000;
  background: #ec4899;
  color: #fff;
  padding: 0.6em 1.1em;
  font-size: 0.95em;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

/* スキップ先 <main> のフォーカス時アウトラインは出さない（tabindex="-1" でクリックフォーカスのみ受ける）。 */
#main-content:focus,
#main-content:focus-visible {
  outline: none;
}

/* 印刷用スタイル ブラウザの「印刷」「PDF として保存」操作時に、本文だけを綺麗に印字するための上書き。 */
@media print {
  /* ナビゲーション要素群を一括非表示 */
  .skip-link,
  .mobile-nav-toggle,
  .mobile-nav-overlay,
  .site-header,
  .site-nav,
  .site-search,
  #pageSectionNav,
  .share-buttons,
  .share-toast,
  .footer-nav {
    display: none !important;
  }

  /* パンくずは紙面で経路情報として有用なので残すが、リンクの装飾は落とす。 */
  .breadcrumbs {
    margin: 0 0 0.6em;
    font-size: 0.85em;
  }
  .breadcrumbs a {
    color: inherit;
    text-decoration: none;
  }

  /* 本文：余白を最小化、フォントサイズを印刷向けに 11pt 程度に。 */
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }
  main.container {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  /* 装飾系の背景・グラデを落とす（インク節約）。 */
  .hero,
  .hero.hero-gradient,
  .not-found-hero {
    background: #fff !important;
    border-radius: 0;
    padding: 0.4em 0;
  }

  /* リンクの行末に URL を補記する（紙面でリンク先がわかるように）。 */
  a[href^="http"]:not([href*="schema.org"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }

  /* テーブルは横スクロール禁止、ボーダーは黒線で明示。 */
  table {
    page-break-inside: auto;
    border-collapse: collapse;
  }
  table th, table td {
    border: 1px solid #999;
    padding: 4px 6px;
  }

  /* 見出しは改ページの直後にぶら下がりにならないように。 */
  h1, h2, h3 {
    page-break-after: avoid;
  }

  /* フッタの copyright と免責は残す（紙面での出典明示として価値あり）。帯背景は落とす。 */
  #pageFooter {
    margin-top: 1.4em;
    border-top: 1px solid #999;
    padding-top: 0.6em;
    font-size: 0.85em;
    background: none;
  }
}

/* シリーズ詳細：メインスタッフ行 役職ごと 1 行で「[役職バッジ] 名前(範囲)、名前(範囲)、...」のフラットレイアウト。 */
/* 親 section 自身を grid 化することで、全行で列幅が共有される。 */
#key-staff {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 8px;
  row-gap: 4px;
  align-items: baseline;
}
/* h2 と各行の wrapping は section grid の中で全列に span させる。 */
#key-staff > h2 {
  grid-column: 1 / -1;
}
.key-staff-line {
  /* grid の子要素になるが、自身は描画フローから消して内部の .role-badge と .key-staff-names を 親 grid に直接流す。 */
  display: contents;
}
.key-staff-line > .role-badge {
  /* バッジ列：右揃え。 */
  justify-self: end;
  line-height: 1.8;
}
.key-staff-line > .key-staff-names {
  /* 人名列：左揃え。長い連名でも折り返せるよう min-width:0。 */
  justify-self: start;
  min-width: 0;
  line-height: 1.8;
  color: var(--fg);
}
.key-staff-line .key-staff-name {
  color: var(--fg);
}
.key-staff-line .key-staff-name:hover {
  text-decoration: underline;
}
.key-staff-line .key-staff-range {
  font-size: 0.85em;
}

/* エピソード詳細のスタッフセクション。
   1 役職 = 1 .key-staff-line（同一人物が兼ねる「絵コンテ・演出」は 1 entry 内で複数バッジを並べる仕様で、
   常に 1 セット = 1 行）。シリーズ詳細 #key-staff のような grid 縦揃えは要求されないため、セット単位で
   flex 子として並べる：デスクトップではセット境界で wrap、モバイルでは column に倒して 1 セット = 1 行に。 */
#staff {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
}
/* 見出しは flex 内でも全幅を占めてセット群の上に独立して並ぶ。 */
#staff > h2 {
  flex-basis: 100%;
  margin-bottom: 4px;
}
/* グローバルの display: contents を上書きし、各 .key-staff-line を 1 つの flex 子に戻す。
   セット内（バッジ + 名義）の途中改行はセット境界以外で起きないよう nowrap で凝集する。
   行幅を超えるときは親の flex-wrap によってセット境界（次の .key-staff-line）で折り返す。 */
#staff .key-staff-line {
  display: block;
  white-space: nowrap;
}
/* モバイル：1 セット 1 行で縦に積む（flex 方向を column に倒す）。
   align-items を flex-start に切り替えてセットを左揃えに、gap も縦間隔だけに簡素化する。 */
@media (max-width: 640px) {
  #staff {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* 関連作品バッジ シリーズ詳細の「関連作品」セクションで、relation_kind の name_ja_reverse 値を表示する小バッジ。 */
.relation-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.4;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  margin-right: 4px;
  vertical-align: middle;
  white-space: nowrap;
}

/* キャラクター種別バッジ（ゲストキャラクター一覧の行で、名前の後ろに種別を出す）。
   関連作品バッジと同じ形で、種別ごとに色を分ける（プリキュア＝ピンク / 味方＝青 / 敵＝紫 / とりまく人々＝グレー）。 */
.character-kind-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.4;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  vertical-align: middle;
  white-space: nowrap;
}
.character-kind-badge[data-kind="PRECURE"] {
  background: #fdf2f8;
  color: #be185d;
  border-color: #fbcfe8;
}
.character-kind-badge[data-kind="ALLY"] {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.character-kind-badge[data-kind="VILLAIN"] {
  background: #f5f3ff;
  color: #6d28d9;
  border-color: #ddd6fe;
}

/* 映画 BGM リスト（series-detail の #movie-bgm-list セクション）。 */
#movie-bgm-list .movie-bgm-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 4px;
}
#movie-bgm-list .movie-bgm-table th,
#movie-bgm-list .movie-bgm-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
#movie-bgm-list .movie-bgm-table td.movie-bgm-no {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#movie-bgm-list .movie-bgm-table td.movie-bgm-mno {
  white-space: nowrap;
}
/* 未使用：音源はあるが本編未使用。行全体を淡色にして注記スパンを添える。 */
#movie-bgm-list .movie-bgm-row.movie-bgm-unused td {
  color: var(--muted, #6b7280);
}
#movie-bgm-list .movie-bgm-unused-note {
  margin-left: 6px;
  font-size: 0.85em;
}
/* 欠番：そもそも未制作。さらに淡く・イタリックで「存在しない」ことを示す。 */
#movie-bgm-list .movie-bgm-row.movie-bgm-missing td {
  color: var(--muted, #9ca3af);
  font-style: italic;
}
/* クリエイターセクション（スタッフ / 役職詳細 / 声の出演）。/creators/ 配下に統合された
   索引・詳細ページ共通のレイアウトを定義する。 */

/* エンティティ行リスト（スタッフ / 役職詳細 / 声の出演 / キャラクター索引 共通）。
   旧テーブル表現（creators-entity-table / creators-vc-table / creators-roles-table /
   characters-index-table）を置き換えた行リスト。1 行 = 1 エンティティで、
   「区分バッジ｜名前｜補足（muted）｜件数」を flex で並べる。読みがな列は持たない。
   狭い画面では補足・件数が自然に折り返すため、列を畳む @media 対応は不要。 */
.entity-list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
}
.entity-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.entity-row:hover {
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
}
/* 行全体クリック用のオーバーレイリンク（songs-card / bgms-card と同じ pointer-events パターン）。
   行余白のクリックは主エンティティの詳細へ、行内の個別 <a>（CV の声優リンク等）は
   pointer-events: auto で各自のリンク先へ届く。 */
.entity-row-link {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  text-decoration: none;
  color: transparent;
}
.entity-row-link:focus-visible {
  outline: 2px solid var(--accent-pink, #ec4899);
  outline-offset: -2px;
}
/* 行コンテンツはオーバーレイより上に重ね、既定 pointer-events: none でクリックを
   オーバーレイへ透過。内部の <a>（名前本体・CV リンク等）のみ個別クリックを復活させる。 */
.entity-row > :not(.entity-row-link) {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.entity-row a:not(.entity-row-link) {
  pointer-events: auto;
}
.entity-row-name {
  font-weight: 600;
}
/* 初参加順で旧名義の行に添える、いまの名乗り（最新名義）の括弧書き。 */
.entity-row-current {
  margin-left: -4px;
  font-size: 0.88em;
  white-space: nowrap;
}
/* 役職詳細の行で、系譜でまとめた別の表記でもクレジットされた人に添える「（デジタル撮影監督 1・撮影監督 1）」。
   件数の下に 1 行で置く。 */
.entity-row-role-usage {
  flex-basis: 100%;
  font-size: 0.85em;
}
/* 役職詳細の「役職名の変遷」。表記ごとに件数とクレジットされた作品を並べる。 */
.role-name-history-list {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}
.role-name-history-item {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.role-name-history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.role-name-history-name {
  font-weight: 600;
}
.role-name-history-works {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.9em;
}
.role-name-history-works > li {
  overflow-wrap: anywhere;
}
.role-name-history-range {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
/* タブ・並べ替えボタンのラベル末尾の「順」（「初参加順」「担当回数順」など）。スマホでは隠して「初参加」「担当回数」と短く見せる。 */
@media (max-width: 768px) {
  .tab-sfx { display: none; }
}
/* 年表タブの「担当（出演・参加）の移り変わり」（線表。役職詳細・声の出演・歌唱）。
   説明文・凡例のあとに、名前・年の目盛り付きの線表を全行出す。
   色は件数バッジにそろえ、TV は青、映画は橙、歌は紫、劇伴は緑。盤は濃い青の四角（形でも区別する）。 */
.role-timeline {
  --rtl-tv: #3b82c4;
  --rtl-span: rgba(59, 130, 196, 0.38);
  --rtl-movie: #c8820f;
  --rtl-song: #7e57c2;
  --rtl-bgm: #4ca36b;
  --rtl-disc: #2563a8;
  --rtl-band-alt: #f4f5f8;
  --rtl-grid: #e6e7eb;
  --rtl-name-w: 11.5em;
  --rtl-gap: 12px;
  --rtl-track-x: calc(var(--rtl-name-w) + var(--rtl-gap));
  margin: 0 0 2em;
}
/* 凡例（左）と「主な方のみ」のスイッチ（右端）の行。狭い画面ではスイッチが凡例の下の行に回る。 */
.rtl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 18px;
  margin: 10px 0 10px;
}
.rtl-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  font-size: 0.85em;
  color: var(--muted);
}
.rtl-legend > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rtl-key {
  display: inline-block;
  flex: 0 0 auto;
}
.rtl-key-tv { width: 18px; height: 10px; border-radius: 3px; background: var(--rtl-tv); }
.rtl-key-movie { width: 9px; height: 9px; border-radius: 50%; background: var(--rtl-movie); }
.rtl-key-song { width: 9px; height: 9px; border-radius: 50%; background: var(--rtl-song); }
.rtl-key-bgm { width: 9px; height: 9px; border-radius: 50%; background: var(--rtl-bgm); }
.rtl-key-disc { width: 9px; height: 9px; border-radius: 2px; background: var(--rtl-disc); }
.rtl-key-span { width: 18px; height: 2px; border-radius: 1px; background: var(--rtl-span); }
/* 関連する役職の見本（色は役職ごとに --key-c で渡す）。TV の話は細い帯、映画は白抜きの輪。 */
.rtl-key-rel { width: 18px; height: 6px; border-radius: 3px; background: var(--key-c); }
.rtl-key-rel-movie { width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 2px solid var(--key-c); }

/* 「主な方のみ」のスイッチ。入っている間（.is-main-only）は主な方でない行を隠す。 */
.rtl-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 0.85em;
  white-space: nowrap;
}
.rtl-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.rtl-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.rtl-switch-ui {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 9px;
  background: #c4c6cc;
  transition: background 0.15s;
}
.rtl-switch-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.rtl-switch input:checked + .rtl-switch-ui { background: var(--rtl-tv); }
.rtl-switch input:checked + .rtl-switch-ui::after { transform: translateX(13px); }
.rtl-switch input:focus-visible + .rtl-switch-ui { outline: 2px solid var(--rtl-tv); outline-offset: 2px; }
.rtl-filter-help {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 0.8em;
  line-height: 15px;
  cursor: help;
}
.rtl-filter-help:hover,
.rtl-filter-help[aria-expanded="true"] { border-color: var(--rtl-tv); color: var(--rtl-tv); }
.rtl-filter-count {
  color: var(--muted);
  font-family: var(--font-num);
  font-size: 0.92em;
}
.rtl-filter-tip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(20, 20, 40, 0.14);
  font-size: 0.92em;
  line-height: 1.6;
  white-space: normal;
}
.rtl-filter-tip[hidden] { display: none; }
.role-timeline.is-main-only .rtl-row-extra { display: none; }

.rtl {
  position: relative;
  border-bottom: 1px solid var(--border);
  font-size: 0.92em;
}
/* 背景の TV シリーズの帯（1 作 = 1 帯、交互に薄く塗る）。目盛りと全行の後ろに敷く。 */
.rtl-bands {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rtl-track-x);
  right: 0;
  pointer-events: none;
}
.rtl-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--rtl-grid);
}
.rtl-band-alt { background: var(--rtl-band-alt); }
/* 年の目盛り。帯の左端に放送開始年を置き、シリーズ詳細へリンクする（title にシリーズの正式タイトル）。
   帯が多いときは 5 の倍数の年だけ文字を残す（rtl-ticks-medium は狭い画面だけ、rtl-ticks-sparse は常に）。 */
.rtl-axis {
  position: sticky;
  top: 95px;
  z-index: 2;
  height: 30px;
  padding-left: var(--rtl-track-x);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--border);
}
.rtl-axis-track {
  position: relative;
  height: 100%;
}
.rtl-tick {
  position: absolute;
  bottom: 5px;
  padding-left: 5px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}
.rtl-tick::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 9px;
  border-left: 1px solid #b9bcc4;
}
a.rtl-tick:hover { color: var(--accent); text-decoration: none; }
.rtl-ticks-sparse .rtl-tick-minor { font-size: 0; }

.rtl-rows {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rtl-row {
  display: flex;
  align-items: center;
  gap: var(--rtl-gap);
  height: 26px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.035);
}
.rtl-row:last-child { border-bottom: 0; }
.rtl-row:hover,
.rtl-row.is-tip { background: rgba(255, 240, 180, 0.38); }
.rtl-name {
  flex: 0 0 var(--rtl-name-w);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-left: 2px;
  color: var(--fg);
}
.rtl-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rtl-name:hover { text-decoration: none; }
.rtl-row:hover .rtl-name-text,
.rtl-name:focus-visible .rtl-name-text { text-decoration: underline; }
.rtl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
}
.rtl-badge-person { background: var(--accent-pink-weak, #fce7f3); color: var(--accent-pink-strong, #be185d); }
.rtl-badge-company { background: var(--surface-2, #eef2ff); color: var(--fg, #3730a3); }
.rtl-badge-character { background: rgba(126, 87, 194, 0.12); color: var(--accent-purple, #7e57c2); }
.rtl-badge-unit { background: rgba(13, 148, 136, 0.12); color: #0f766e; }
.rtl-track {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
}
/* 続けて担当した期間（13 週以内の間隔でつながる担当の始まりから終わりまで）の細線。 */
.rtl-span {
  position: absolute;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--rtl-span);
}
/* 担当した TV の話（話数が続く間はひと続きの帯）。右端の 1px を地の色で抜き、シリーズの境で帯を切り分ける。 */
.rtl-seg {
  position: absolute;
  top: 50%;
  height: 10px;
  margin-top: -5px;
  min-width: 3px;
  border-radius: 3px;
  background: var(--rtl-tv);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.85);
}
/* 映画（公開日の点。重なっても読めるよう地の色の輪を付ける）。 */
.rtl-movie {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--rtl-movie);
  box-shadow: 0 0 0 2px #fff;
}
/* 歌（初めて盤に収められた日の点。同じ日に出た曲は 1 つの点）。 */
.rtl-song {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--rtl-song);
  box-shadow: 0 0 0 2px #fff;
}
/* 劇伴（録音回の曲が初めて盤に収められた日の点）。 */
.rtl-bgm {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--rtl-bgm);
  box-shadow: 0 0 0 2px #fff;
}
/* 関連する役職の担当した TV の話（主の帯の下に細く重ねる。主の帯と同じ回は隠れ、主の役職の無い回だけが見える）。
   色は役職ごとに --rel-c で渡す（関連の種類ごとの色相（前段階＝若葉・並列＝ティール・後段階＝藤色）を基準に、同じ種類の役職どうしは
   色相を回して分ける。いずれも主の青より淡い。RoleTimelineBuilder.AssignRelatedColors）。 */
.rtl-rel {
  position: absolute;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  min-width: 2px;
  border-radius: 3px;
  background: var(--rel-c);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.85);
}
/* 関連する役職の映画（白抜きの輪。主の役職の映画の点と形で分ける）。 */
.rtl-rel-movie {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid var(--rel-c);
  box-shadow: 0 0 0 2px #fff;
}
/* 盤（発売日の四角）。 */
.rtl-disc {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 2px;
  background: var(--rtl-disc);
  box-shadow: 0 0 0 2px #fff;
}
/* 行にマウスを載せる・帯をタップすると出す、担当期間と作品ごとの担当話（role-timeline.js）。 */
.rtl-tip {
  position: fixed;
  z-index: 60;
  max-width: min(340px, calc(100vw - 24px));
  padding: 9px 12px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(20, 20, 40, 0.14);
  font-size: 0.84em;
  line-height: 1.55;
  pointer-events: none;
}
.rtl-tip[hidden] { display: none; }
.rtl-tip-name { font-weight: 700; }
.rtl-tip-sub { color: var(--muted); }
.rtl-tip-period {
  margin-bottom: 4px;
  color: var(--muted);
}
.rtl-tip-works {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rtl-tip-works > li { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  .rtl-axis { top: 0; }
  .rtl-ticks-medium .rtl-tick-minor { font-size: 0; }
}
/* 狭い画面では名前を帯の上の行に置き、帯を表示幅いっぱいに使う（横軸は全期間のまま）。 */
@media (max-width: 640px) {
  .role-timeline { --rtl-name-w: 0px; --rtl-gap: 0px; }
  .rtl-row {
    flex-wrap: wrap;
    height: auto;
    padding: 3px 0 1px;
  }
  .rtl-name {
    flex: 1 1 100%;
    font-size: 0.86em;
  }
  .rtl-badge { width: 15px; height: 15px; }
  .rtl-badge svg { width: 10px; height: 10px; }
  .rtl-track {
    flex: 1 1 100%;
    height: 14px;
  }
}
/* 歌唱一覧のキャラクターの行で、キャラ名の直後に添える「(CV: 声優)」。 */
.entity-row-cv {
  margin-left: -6px;
  white-space: nowrap;
}
/* 行ホバーで遷移先（主エンティティ名）に下線を出し、行全体がクリックできることを示す。 */
.entity-row:hover a.entity-row-name {
  text-decoration: underline;
}
.entity-row-sub {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9em;
}
.entity-row-count {
  margin-left: auto;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 名前＋件数だけの軽い行は複数列グリッドに詰めて密度を上げる
   （キャラクター索引・役職詳細・楽曲役職詳細で使用）。 */
.entity-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 18px;
}

/* 個人 / 団体 の区分バッジ。テキストの代わりに人物・建物のアイコンを中央に置く
   小さな円形チップ。色味は個人 = ピンク / 団体 = 青グレーを踏襲する。 */
.entity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* バッジ内のインライン SVG アイコン。currentColor で塗り、バッジの文字色を継ぐ。 */
.entity-badge-icon {
  width: 13px;
  height: 13px;
  display: block;
}
.entity-badge-person {
  background: var(--accent-pink-weak, #fce7f3);
  color: var(--accent-pink-strong, #be185d);
}
.entity-badge-company {
  background: var(--surface-2, #eef2ff);
  color: var(--fg, #3730a3);
}
/* 歌唱一覧のキャラクターの行（星のアイコン）。歌手（個人と同じピンク）と見分けられる紫系。 */
.entity-badge-character {
  background: rgba(126, 87, 194, 0.12);
  color: var(--accent-purple, #7e57c2);
}
/* 歌唱一覧のユニットの行（2 人の人影のアイコン）。歌手のピンク・キャラクターの紫と見分けられる青緑系。 */
.entity-badge-unit {
  background: rgba(13, 148, 136, 0.12);
  color: #0f766e;
}
/* ユニット詳細のメンバー。キャラクターのメンバーに添える「(CV: 声優)」は少し離す。 */
.unit-member-cv { margin-left: 0.15em; }

/* 担当数・出演数・登場数の絵文字ピルバッジ。「📺 N（話）」「🎥 N（本）」を
   小さな角丸ピルで表す。
   役職詳細・スタッフ一覧・人物/企業詳細・キャラ索引・声の出演で共通利用。 */
.count-badges {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}
.count-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 7px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--table-stripe);
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}
/* TV（話）= 青〜ティール寄りの淡い色味。 */
.count-pill-tv {
  background: rgba(59, 130, 196, 0.10);
  border-color: rgba(59, 130, 196, 0.34);
  color: var(--accent-blue, #2563eb);
}
/* 映画（本）= 暖色（アンバー）寄りの淡い色味。 */
.count-pill-movie {
  background: rgba(217, 145, 32, 0.12);
  border-color: rgba(217, 145, 32, 0.36);
  color: var(--accent-amber, #b45309);
}
/* 曲（楽曲担当数）= パープル寄りの淡い色味。歌系役職ページ（作詞 / 作曲 / 編曲 / 歌唱）の担当曲数に使う。 */
.count-pill-song {
  background: rgba(126, 87, 194, 0.10);
  border-color: rgba(126, 87, 194, 0.32);
  color: var(--accent-purple, #7e57c2);
}
/* 人物数（名）・企業団体数（社）のカウントピル。entity-badge と同じ人/建物アイコン＋色で揃える。
   スタッフ索引（役職順）の役職ごとの担当数に使う。 */
.count-pill-icon {
  width: 11px;
  height: 11px;
  display: block;
  flex-shrink: 0;
}
.count-pill-person {
  background: var(--accent-pink-weak, #fce7f3);
  border-color: rgba(190, 24, 93, 0.30);
  color: var(--accent-pink-strong, #be185d);
}
.count-pill-company {
  background: var(--surface-2, #eef2ff);
  border-color: rgba(55, 48, 163, 0.26);
  color: var(--fg, #3730a3);
}
/* CD / 音楽商品の件数（💿）= シアン寄りの淡い色味。商品索引（CD一覧）の件数に使う。 */
.count-pill-cd {
  background: rgba(8, 145, 178, 0.10);
  border-color: rgba(8, 145, 178, 0.32);
  color: #0e7490;
}
/* 劇伴の件数（🎼）= 緑寄りの淡い色味。人物・企業詳細の音楽クレジットで、劇伴の録音・シリーズの行の件数に使う。 */
.count-pill-bgm {
  background: rgba(76, 163, 107, 0.10);
  border-color: rgba(76, 163, 107, 0.34);
  color: #38784f;
}
/* 歌（録音）の件数（🎤）= ローズ寄りの淡い色味。楽曲索引（歌一覧）の件数に使う。 */
.count-pill-mic {
  background: rgba(225, 29, 72, 0.10);
  border-color: rgba(225, 29, 72, 0.30);
  color: #be123c;
}

/* 個人 / 団体（歌唱一覧では歌手 / キャラクター）の絞り込みトグル。タブ行の下に小さく置く。
   見た目は音楽制作の並べ替え切り替え（.sort-toggle-btn）とそろえ、選択中は文字と枠を本文色にする。 */
.entity-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 14px;
}
/* 役職順タブは「役職名＋人数」の索引でエンティティ行を持たないため、 個人/団体トグルは無意味。 */
.creators-root[data-active-tab="roles"] .entity-filter {
  display: none;
}
.entity-filter-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.88em;
  cursor: pointer;
}
.entity-filter-btn:hover:not(.is-active) {
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
}
.entity-filter-btn.is-active {
  color: var(--fg);
  border-color: var(--fg);
}
.entity-filter-btn:focus-visible {
  outline: 2px solid var(--accent-pink, #ec4899);
  outline-offset: 2px;
}

/* 個人/団体・歌手/キャラクターのトグルの行出し分け（entity-row の li を data-entity-type 属性で隠す）。 */
.creators-root[data-entity-filter="person"] [data-entity-type="company"],
.creators-root[data-entity-filter="company"] [data-entity-type="person"],
.creators-root[data-entity-filter="singer"] [data-entity-type="character"],
.creators-root[data-entity-filter="character"] [data-entity-type="singer"],
.creators-root[data-entity-filter="singer"] [data-entity-type="unit"],
.creators-root[data-entity-filter="character"] [data-entity-type="unit"],
.creators-root[data-entity-filter="unit"] [data-entity-type="singer"],
.creators-root[data-entity-filter="unit"] [data-entity-type="character"] {
  display: none;
}

/* 初参加順・キャラクター順・初出演順タブのシリーズ別セクション。 */
.creators-series-section {
  margin: 0 0 22px;
}
.creators-series-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 14px 0 6px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--border);
}
.creators-series-heading a {
  text-decoration: none;
}
.creators-series-heading a:hover {
  text-decoration: underline;
}

/* ホーム：誕生日対応の「今日の記念日」カード ＋ 「今月のカレンダー」。
   記念日の誕生日カード（cb/pb）はエピソードカードの上に積まれる（JS 側で順序保証）。 */

/* 今日の記念日：誕生日ラベルだけ通常ラベルと別色（ピンク地）。 */
.home-anniversary-card-bday .home-anniversary-label-bday {
  background: #ffd9ec;
  color: #9b2c66;
  padding: 1px 8px;
  border-radius: 999px;
}
/* キャラ誕生日カード内のキーカラーバッジ（<span>）。 */
.home-bday-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  font-size: 0.85rem;
  line-height: 1.5;
}
.home-bday-badge-plain {
  background: #f1f1f4;
  color: #333;
}

/* 今月のカレンダー */
/* 旧キャプション（単一ラベル）の余地。現行ホームはナビ行構成を用いるが、
   他箱所や外部参照互換のためルール自体は残しておく。 */
.home-calendar-caption {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 2px 0 8px;
}
/* キャプション行：前月ボタン・大きな月名（中央）・翌月ボタンを
   一行に並べるコンテナ。月名を左右のボタンと独立させて中央揃えにするため、
   ボタンを flex 両端に、月名を中央に配置する。 */
.home-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 12px;
}
.home-calendar-title {
  /* 旧キャプション（1.05rem）の約 2 倍。中央揃えで表示する。 */
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.2;
  text-align: center;
  min-width: 7.5em;
  letter-spacing: 0.02em;
}
/* 前月／翌月送りボタン（丸型）。ホバー・フォーカスを可視化する。 */
.cal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #e3c4d3;
  border-radius: 999px;
  background: #fff;
  color: #c2557a;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cal-nav-btn:hover {
  background: #fff1f6;
  border-color: #f48fb1;
  color: #a83e63;
}
.cal-nav-btn:focus-visible {
  outline: 2px solid #f48fb1;
  outline-offset: 2px;
}
.cal-nav-btn:active {
  background: #ffe3ee;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-dow {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #666;
  padding: 4px 0;
}
/* 日曜・土曜の文字色は、白地と曜日の淡い背景のどちらでも 4.5:1 を満たす濃さにしている。 */
.cal-dow.cal-sun { color: #b84a6b; }
.cal-dow.cal-sat { color: #4570b6; }
.cal-cell {
  min-height: 92px;
  border: 1px solid #ececf1;
  border-radius: 10px;
  padding: 5px 5px 6px;
  background: #fff;
  overflow: hidden;
}
.cal-cell-empty {
  background: transparent;
  border-color: transparent;
}
.cal-cell.cal-today {
  border-color: #f48fb1;
  box-shadow: 0 0 0 2px rgba(244, 143, 177, 0.35) inset;
  background: #fff6fa;
}
.cal-daynum {
  font-size: 0.82rem;
  font-weight: 700;
  color: #555;
  margin-bottom: 4px;
}
.cal-cell.cal-sun .cal-daynum { color: #b84a6b; }
.cal-cell.cal-sat .cal-daynum { color: #4570b6; }
.cal-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-chip {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 1px 7px;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 縦 flex（.cal-chips）の子の min-width:auto 対策。0 にしないと ellipsis が効かず横膨張する。 */
  min-width: 0;
}
.cal-chip-bday {
  border-color: rgba(0, 0, 0, 0.16);
  font-weight: 600;
}
.cal-chip-plain {
  background: #f1f1f4;
  color: #333;
}
.cal-chip-movie {
  background: #fff2d6;
  color: #8a5a00;
  border-color: #f2d79a;
}
.cal-chip-person {
  background: #e7f0ff;
  color: #2f5aa8;
  border-color: #cbdcf6;
}
.cal-chip-ep {
  background: #eef7ee;
  color: #2f7a3f;
  border-color: #cfe6cf;
}
/* TV 放送の第 1 話・最終話だけ強調（太字＋少し濃い地色＋少し濃いボーダー）。
   .cal-chip-ep-first と .cal-chip-ep-last は同一スタイルを共有する。 */
.cal-chip-ep-first,
.cal-chip-ep-last {
  background: #d8ecd8;
  border-color: #a8cea8;
  font-weight: 700;
}
/* 平年の 2/28 セル末尾に併記する「(2/29)」ブロック。
   セルを増やさずに 1 セル内へ収めるため、上に細い区切り線と小さなラベルを付ける。 */
.cal-leap-section {
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px dashed rgba(0, 0, 0, 0.18);
}
.cal-leap-label {
  font-size: 0.66rem;
  color: #888;
  margin-bottom: 2px;
}
.cal-chip-tag {
  display: inline-block;
  margin-right: 3px;
  padding: 0 4px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.66rem;
}
/* チップ先頭の種別絵文字（📺／🎥／🎂）。本文との間隔を微調整し、
   絵文字自体はエリプシスで欠けないよう shrink させない。 */
.cal-chip-emoji {
  flex: 0 0 auto;
  margin-right: 3px;
  font-size: 0.78rem;
  line-height: 1;
}
.cal-chip:hover { filter: brightness(0.97); }

/* カレンダー凡例 */
.home-calendar-legend {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cal-legend {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
}
.cal-legend::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin-right: 5px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.cal-legend-bday::before   { background: #ffd9ec; }
.cal-legend-movie::before  { background: #fff2d6; }
.cal-legend-person::before { background: #e7f0ff; }
.cal-legend-ep::before     { background: #eef7ee; }

/* 7 日縦並びモード（calendar.js が狭幅で月グリッドの代わりに描画）。
   各行は「(今日マーク？) {m}/{d} ({曜})」ヘッダ + チップ列の縦並びで、
   行ごとに日付と曜日が一目で識別できる配置にする。 */
.cal-rolling {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-day-row {
  border: 1px solid #ececf1;
  border-radius: 8px;
  background: #fff;
  padding: 6px 8px;
  /* 縦 flex（.cal-rolling）の子は min-width:auto で nowrap チップの全文幅より縮めなくなり、
     ページ全体を横に膨張させる（モバイルで fixed 要素が画面外へ出る）。明示的に 0 へ。 */
  min-width: 0;
}
.cal-day-row.cal-sun { background: #fff5f7; }
.cal-day-row.cal-sat { background: #f4f7fc; }
.cal-day-row.cal-day-row-today {
  border-color: #f48fb1;
  box-shadow: 0 0 0 2px rgba(244, 143, 177, 0.35) inset;
}
.cal-day-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.95rem;
  font-weight: 600;
}
.cal-day-row.cal-sun .cal-day-md,
.cal-day-row.cal-sun .cal-day-dow { color: #b84a6b; }
.cal-day-row.cal-sat .cal-day-md,
.cal-day-row.cal-sat .cal-day-dow { color: #4570b6; }
.cal-day-today-mark {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: #f48fb1;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.cal-day-dow { font-size: 0.85rem; }
.cal-day-empty {
  font-size: 0.8rem;
  color: #aaa;
}

/* 狭い画面：ナビ行は月名を少し縮めてボタンと並んだまま収める。
   カレンダー本体は calendar.js が 7 列グリッドの代わりに 7 日縦並びを描画するため、
   グリッド向けの横スクロールフォールバックは不要。 */
@media (max-width: 720px) {
  .home-calendar-title {
    font-size: 1.4rem;
    min-width: auto;
  }
  .home-calendar-nav {
    gap: 10px;
  }
  .cal-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 1.35rem;
  }
}

/* ===== 読み物（/articles/） ===== */
/* 記事一覧：カード全体が 1 リンク（内部リンクを持たないためオーバーレイ不要）。 */
.articles-lead { margin-top: -0.25em; }
.article-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 1.25em;
}
.article-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.article-card:hover {
  border-color: var(--accent-pink);
  box-shadow: 0 4px 14px rgba(233, 30, 99, 0.10);
  transform: translateY(-2px);
}
.article-card-title { margin: 0 0 0.4em; font-size: 1.1em; line-height: 1.4; color: var(--fg); }
.article-card-date { margin: 0 0 0.5em; font-size: 0.8em; color: var(--muted); }
.article-card-desc { margin: 0 0 0.6em; font-size: 0.9em; color: var(--muted); line-height: 1.6; }
.article-card-tags, .article-meta .article-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.article-tag {
  display: inline-block;
  font-size: 0.72em;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  white-space: nowrap;
}

/* 記事詳細：読み物なので本文幅を絞って可読性を上げる。 */
.article { max-width: 720px; }
.article > h1 { margin-bottom: 0.3em; line-height: 1.45; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 1.5em; }
.article-date { font-size: 0.85em; color: var(--muted); }
.article-body { font-size: 1.02em; line-height: 1.9; color: var(--fg); }
.article-body h2 {
  margin-top: 2em; margin-bottom: 0.6em;
  padding-bottom: 0.2em; font-size: 1.3em;
  border-bottom: 2px solid var(--hl);
}
.article-body h3 { margin-top: 1.6em; margin-bottom: 0.5em; font-size: 1.12em; }
.article-body p { margin: 0 0 1.1em; }
.article-body ul, .article-body ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.article-body li { margin-bottom: 0.4em; }
.article-body a { color: var(--accent-pink); }
.article-body blockquote {
  margin: 1.2em 0; padding: 0.4em 1.1em;
  border-left: 3px solid var(--border); color: var(--muted);
}
.article-body code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--table-stripe); padding: 1px 5px; border-radius: 4px;
}
.article-body hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
.article-body img { max-width: 100%; height: auto; border-radius: 6px; }
.article-body table { border-collapse: collapse; margin: 1.2em 0; font-size: 0.92em; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.article-body th { background: var(--th-bg); }

/* ホームの「データ充足率」暫定表記（赤字）。BuildLabel 直下に小さく出す。追いついたら除去する。 */
.home-data-sufficiency {
  margin: 0.1em 0 0;
  color: #c0392b;
  font-size: 0.8em;
}

/* ════════════════════════════════════════════════════════════════════════════
   記念日カレンダー（/anniversary/）
   - 日付別ページ：年・話数の数値列、初回／最終回フラグ、誕生日リスト、前後日ナビ
   - 索引ページ：12 か月ぶんの日付グリッド（出来事 0 件の日は薄く出す）
   ════════════════════════════════════════════════════════════════════════════ */

/* 年と話数は数値なので等幅の数字書体で桁を揃える。 */
.anniv-year,
.anniv-epno {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 初回・最終回のマーカー。話数リンクの後ろに小さく添える。 */
.anniv-flag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.78em;
  background: var(--hl);
  color: var(--fg);
}

/* 誕生日リスト。1 行 1 名で、名前の後ろに補助表記と出典作品を薄色で続ける。 */
.anniv-birthday-list {
  margin: 8px 0 16px;
  padding-left: 1.2em;
}
.anniv-birthday-list li {
  margin-bottom: 6px;
}
.anniv-birthday-list .muted {
  margin-left: 8px;
  font-size: 0.92em;
}

/* イメージカラー付きのキャラ名バッジ（配色はキャラごとにインラインで当たる）。 */
.anniv-birthday-name {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
}
.anniv-birthday-name:hover {
  text-decoration: underline;
}

/* 前日・翌日ナビ。左右に日付、中央に索引へのリンクを置く。 */
.anniv-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.anniv-nav a {
  color: var(--muted);
  text-decoration: none;
}
.anniv-nav a:hover {
  color: var(--accent-pink);
}
.anniv-nav-index {
  font-weight: 700;
}

/* ── 記念日索引の年間カレンダー ──
   ホームの「今月のカレンダー」と同じ .cal-grid / .cal-cell / .cal-chip 系をそのまま使い、
   同じカレンダーがサイト内で 2 通りの見え方をしないようにする。チップの中身も同じで、
   件数ではなく作品名・話数・キャラ名・氏名を載せる。相違は 3 点：
     - 日番号が日付ページへのリンク（ホームは当月なので日番号にリンクを持たない）
     - 12 か月ぶんを縦に積むのでチップ数に上限を設け、溢れた分は「ほか n件」へ畳む
     - 升目の配列はビルド年で組み、閲覧年がずれていれば anniversary-calendar.js が
       閲覧年の配列へ組み替える（1 日の列位置・土日の色・平年 2/29 の畳み込み）
   狭い幅ではホームと同じく 1 列の日付リストへ倒す。DOM は 1 つのまま CSS だけで切り替える。 */
/* 月は必ず 1 行 1 か月。段組みにするとセル幅が半分になり、チップのラベルが
   エリプシスで潰れて「何があった日か」が読めなくなる（ホームのカレンダーは
   1 か月に面の全幅を使っているので、同じ幅を確保しないと同じ見え方にならない）。 */
.anniv-month {
  margin-bottom: 28px;
}
.anniv-cal-grid {
  margin-top: 6px;
}
.anniv-cell {
  min-height: 92px;
}
/* 日番号はその日の全件ページへの入口。セル内で唯一の「日付そのもの」へのリンクなので、
   チップと取り違えないよう下線を持たず、ホバーでだけアクセント色に変わる。 */
.anniv-daynum {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.anniv-daynum:hover,
.anniv-daynum:focus-visible {
  color: var(--accent-pink);
  text-decoration: none;
}
/* 升目表示では月と曜日を伏せる（月は見出しが、曜日は列が示している）。
   狭い幅の 1 列表示でだけ「8/20（木）」の形に開く。 */
.anniv-daynum-md,
.anniv-daynum-dow {
  display: none;
}
/* チップのラベルは略称と正式名の両方を持ち、幅に応じて片方だけを見せる
   （ホームのカレンダーが升目では略称、7 日縦並びでは正式名を出すのと同じ切り替え）。 */
.anniv-cell .cal-chip-full {
  display: none;
}
/* 出来事の無い日のダッシュは 1 列表示のときだけ出す（升目では日付だけで足りる）。 */
.anniv-cell .cal-day-empty {
  display: none;
}
/* 平年 2/29 の見出し。2/28 セル末尾に畳んだブロックの入口。 */
a.cal-leap-label {
  display: inline-block;
  text-decoration: none;
  color: #888;
}
a.cal-leap-label:hover,
a.cal-leap-label:focus-visible {
  color: var(--accent-pink);
  text-decoration: none;
}
/* 「今日」バッジ。ホームの 7 日縦並びと同じ意匠を升目にも出す。 */
.anniv-cell .cal-day-today-mark {
  margin-right: 6px;
}
/* 出来事が 1 件も無い日。リンクは残しつつ、視線が向かないよう薄く落とす。 */
.anniv-cell-empty {
  background: transparent;
  border-style: dashed;
}
.anniv-cell-empty .cal-daynum {
  color: var(--muted);
  font-weight: 400;
}
/* 溢れた件数への導線。中身を語れないチップなので彩度を持たせず、地の色で控えめに置く。 */
.cal-chip-more {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
/* 索引冒頭の凡例。チップ実物を並べて色と種別の対応を示す。 */
.anniv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.anniv-legend .cal-chip {
  white-space: nowrap;
}
/* 升目を組んだ年の断り。凡例と同じ行に、チップではない注記として置く。 */
.anniv-legend-note {
  align-self: center;
  font-size: 0.85em;
}
/* 日付ページの年表カードで、劇場公開の行に添えるラベル。 */
.anniv-label-movie {
  color: #8a5a00;
}

/* 狭い幅：7 列のカレンダーは成立しないので、ホームのカレンダーが同じ幅で見せる
   「日付行の縦並び」（.cal-day-row）とまったく同じ組みへ倒す。
     - 升目・曜日見出し・月初の空セルは畳む（列が曜日を示さなくなるため）
     - 日付は行の見出しとして「今日 8/20（木）」の形で 1 行使う
     - チップは行幅を使えるので縦積み＋正式タイトル
     - 出来事の無い日はダッシュを置く
   閾値はホームのカレンダー（calendar.js の MOBILE_QUERY）と同じ 720px。 */
@media (max-width: 720px) {
  .anniv-cal-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* 曜日見出しは列の意味が無くなるので畳む。1 日セルの列指定も flex では効かない。 */
  .anniv-cal-grid .cal-dow {
    display: none;
  }
  .anniv-cell {
    min-height: 0;
    padding: 6px 8px;
    border-radius: 8px;
    /* 縦 flex の子は min-width:auto だと nowrap チップの全文幅より縮まず、
       ページ全体を横へ膨張させる。明示的に 0 へ（.cal-day-row と同じ対処）。 */
    min-width: 0;
  }
  /* 本日は枠と内側シャドウだけで示す。地色は曜日側に譲る（.cal-day-row と同じ序列）。 */
  .anniv-cell.cal-today {
    background: #fff;
  }
  .anniv-cell.cal-sun { background: #fff5f7; }
  .anniv-cell.cal-sat { background: #f4f7fc; }
  /* 日付は行の見出し。チップは div なので、日付を inline-block にしておけば
     「今日」バッジと同じ行に並び、チップは次の行から始まる。 */
  .anniv-cell .cal-daynum {
    margin-bottom: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
  }
  .anniv-daynum-md,
  .anniv-daynum-dow {
    display: inline;
  }
  .anniv-daynum-dow {
    font-size: 0.85rem;
  }
  /* チップは行幅いっぱいを使えるので、略称ではなく正式タイトルを見せる。 */
  .anniv-cell .cal-chip-short {
    display: none;
  }
  .anniv-cell .cal-chip-full {
    display: inline;
  }
  .anniv-cell .cal-day-empty {
    display: block;
  }
  /* 2/28 セルに畳んだ 2/29 も同じ幅で続ける。 */
  .anniv-cell .cal-leap-section {
    width: 100%;
  }
}

/* 記念日カレンダー索引への動線（ホームの当月カレンダー直下）。 */
.home-calendar-more {
  margin: 4px 0 24px;
  text-align: center;
}
.home-calendar-more a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.home-calendar-more a:hover {
  color: var(--accent-pink);
  border-bottom-color: var(--accent-pink);
}

/* クレジット履歴カード内の担当話内訳（担当話数が少ない行にだけ出る）。
   カードリンクの兄弟要素として置くので、各話リンクは通常どおりクリックできる。 */
.credit-card-episodes {
  list-style: none;
  margin: 4px 0 0 12px;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--border);
}
.credit-card-episodes li {
  padding: 2px 0;
  line-height: 1.5;
}
.credit-card-episodes .muted {
  margin-left: 10px;
  font-size: 0.88em;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   書籍（/books/）
   索引カードは商品索引（.products-card 系）と同じ骨格・寸法にそろえる。
   商品カードのセレクタに相乗りせず別系統で定義するのは、書籍側だけ meta 行の項目
   （版構成・ページ数）が違い、後から片方だけ調整したくなる余地を残すため。
   ============================================================ */
.books-card-list {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.books-card-list > li {
  margin: 0;
  padding: 0;
}
.books-card {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--bg, #fff);
  color: inherit;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.books-card:hover,
.books-card:focus-visible {
  border-color: var(--accent-pink, #ec4899);
  background-color: var(--surface-2, #fff7fb);
}
.books-card:focus-visible {
  outline: 2px solid var(--accent-pink, #ec4899);
  outline-offset: 2px;
}
.books-card,
.books-card:hover,
.books-card:focus-visible,
.books-card *,
.books-card:hover *,
.books-card:focus-visible * {
  text-decoration: none;
}
.books-card-grid {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  grid-template-areas: "thumb main badge";
  align-items: start;
  column-gap: 16px;
}
/* カード左端の表紙枠。書影は縦長なので、正方形枠に cover で敷くと天地が切れる。
   ジャケット（正方形）と違いここは contain にして、判型の違いをそのまま見せる。 */
.books-card-thumb {
  grid-area: thumb;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  background: #e5e7eb;
  flex: none;
}
.books-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.books-card-thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: #e5e7eb;
}
.books-card-main {
  grid-area: main;
  min-width: 0;
}
.books-card-title {
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1.4;
  color: var(--accent-pink, var(--fg));
  word-break: break-word;
}
.books-card-meta {
  margin-top: 4px;
  font-size: 0.85em;
  line-height: 1.55;
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  align-items: baseline;
}
.books-card-meta-sep {
  opacity: 0.6;
}
/* 数字系（発売日・ページ数・価格）は等幅で桁を揃える。 */
.books-card-meta-release,
.books-card-meta-pages,
.books-card-meta-price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.books-card-badge-cell {
  grid-area: badge;
  justify-self: end;
  align-self: start;
  padding-top: 2px;
}
/* ジャンルバッジ（共通装飾）。未マッピングのジャンルもグレー寄りに落ちるようベース色を muted に置く。 */
.books-card-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
  white-space: nowrap;
  background: var(--muted, #94a3b8);
}
.books-card-badge.books-card-genre-setting-book     { background: #5470d6; } /* 設定資料集 */
.books-card-badge.books-card-genre-fan-book         { background: #e84a5f; } /* ファンブック */
.books-card-badge.books-card-genre-mook             { background: #f08a3c; } /* ムック */
.books-card-badge.books-card-genre-art-book         { background: #b86ed8; } /* 画集・イラスト集 */
.books-card-badge.books-card-genre-picture-book     { background: #2fb29b; } /* 絵本 */
.books-card-badge.books-card-genre-comic            { background: #d65a8a; } /* コミカライズ */
.books-card-badge.books-card-genre-novel            { background: #6a8ae0; } /* ノベライズ */
.books-card-badge.books-card-genre-score            { background: #c060c8; } /* 楽譜・スコア */
.books-card-badge.books-card-genre-magazine-special { background: #d9a73a; } /* 雑誌増刊・別冊 */
.books-card-badge.books-card-genre-guide            { background: #5cae5c; } /* ガイドブック */
.books-card-badge.books-card-genre-activity         { background: #e8a23a; } /* ぬりえ・シール・知育 */
.books-card-badge.books-card-genre-other            { background: #94a3b8; } /* その他 */

/* 書籍の件数バッジ（📚）= インディゴ寄りの淡い色味。索引セクション見出しで使う。 */
.count-pill-book {
  background: rgba(79, 70, 229, 0.10);
  border-color: rgba(79, 70, 229, 0.32);
  color: #4338ca;
}

/* 書籍詳細の h1 直下に並べるジャンルバッジ。索引カードのバッジより控えめな枠線スタイルにして、
   ページ主役の書名を食わないようにする。 */
.book-genre-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}
.book-genre-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted-fg, #64748b);
  white-space: nowrap;
}

/* 書籍詳細の収録シリーズ一覧。 */
.book-series-list {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0;
}
.book-series-list li {
  padding: 3px 0;
  line-height: 1.6;
}

/* =====================================================================
   配信音源（YouTube アートトラック）の再生 UI。

   再生ボタンは 2 系統ある：
     - アルバムのトラックリスト（.products-tracks-card-no.art-track-play）
       番号バッジそのものを button 化したもの。見た目は span 版と共有し、
       ここでは button の既定スタイルを打ち消すだけに留める。
     - 劇伴 cue（.bgm-cue-play）
       M 番号の左に置く独立ボタン。M 番号は桁も形も可変で読ませたい情報なので、
       バッジを置換せず専用ボタンを足す形にしている。

   プレイヤー本体は art-track-player.js が画面下部に生成する sticky バー。
   YouTube API Services Developer Policies がビューポート最小 200x200px を
   定めているため、狭い画面でも 16:9 で高さ 200px を下回らないサイズに保つ。
   ===================================================================== */

/* --- 再生ボタン（アルバム・劇伴で共通の見た目） ---
   トラック番号や M 番号は「何曲目か」を読む情報であって押す対象ではないので、
   バッジ自体は再生ボタンにしない。どちらのカードでも尺表示の真下に独立したボタンを置き、
   サイト全体で再生ボタンの居場所と見た目を揃える。 */
button.art-track-play {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent-pink);
  color: #fff;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
button.art-track-play::before {
  content: "▶";
  /* ▶ のグリフは字面が左に寄って見えるため、光学的な中央に寄せる。 */
  margin-left: 0.1em;
}
button.art-track-play:hover,
button.art-track-play:focus-visible {
  transform: scale(1.12);
}
button.art-track-play.is-playing::before {
  content: "⏸";
  margin-left: 0;
}

/* アルバムのトラックカード：grid の 2 行目・右列（尺表示の真下）。 */
.products-tracks-card-play {
  grid-row: 2;
  grid-column: 2;
  justify-self: end;
  align-self: start;
  /* カード全域は .products-tracks-card-title-link::before の透明オーバーレイ（z-index:1）が
     覆っており、そのままではクリックもホバーもオーバーレイに吸われて楽曲ページへ遷移してしまう。
     カード内の他リンクを持ち上げている規則は a 要素だけが対象なので、button も同じ層へ上げる。 */
  position: relative;
  z-index: 2;
}
/* 再生ボタンを持つカードでは、メタ行と枝番の部分（.track-sub-part）の全幅 span をやめて 1 列目に留める。
   ボタンが 2 行目・右列に入るため、そのままでは重なってしまう。親にメタ行が無いトラック（メドレーなど）でも、
   枝番の部分がボタンの左の空いた 2 行目に入り、ボタンだけの行が空かない。 */
.products-tracks-card-grid.has-art-track > .track-meta-line,
.products-tracks-card-grid.has-art-track > .track-sub-part {
  grid-column: 1;
}

/* 劇伴 cue カード：ヘッダ grid の 2 行目・右列（尺表示の真下）。 */
.bgm-cue-play {
  grid-row: 2;
  grid-column: 2;
  justify-self: end;
  align-self: start;
}
/* 同上の理由でメニュータイトルの全幅 span を 1 列目までに狭める。 */
.bgm-cue-card-head.has-art-track .bgm-cue-menu {
  grid-column: 1;
}

/* 再生中の行・カードを淡く示す。:target のジャンプ先ハイライト（--hl）と
   同系色だが、同時に出ても喧嘩しないよう左端のラインで区別する。 */
[data-art-track-row].is-playing > .products-tracks-card,
[data-art-track-row].is-playing > .bgm-cue-card {
  background: var(--hl);
  box-shadow: inset 3px 0 0 var(--accent-pink);
}

/* 劇伴 cue の収録盤リストで、実際に再生される盤を示す印。
   同じ cue でも盤によって尺が違うため、どの音源が鳴っているかを示す必要があるが、
   常時出していると「この盤が特別」という別の意味に読めてしまう。
   そのため既定では隠し、その cue を再生している間だけ表示する。 */
.bgm-rec-source-mark {
  display: none;
  margin-right: 0.3em;
  color: var(--accent-pink);
  font-size: 0.9em;
}
[data-art-track-row].is-playing .bgm-rec-source-mark {
  display: inline;
}

/* --- 画面下部の sticky プレイヤーバー --- */
.art-track-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}
.art-track-bar[hidden] {
  display: none;
}
.art-track-bar-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 12px 16px;
}
/* プレイヤー枠。16:9 を保ちつつ、狭い画面でも高さ 200px を下回らないようにする
   （Developer Policies のビューポート最小 200x200px 要件）。 */
.art-track-frame {
  flex: 0 0 auto;
  width: 480px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  background: #000;
}
.art-track-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.art-track-meta {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 4px;
}
.art-track-meta-title {
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.art-track-meta-sub {
  margin-top: 2px;
  font-size: 0.86em;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* 再生できるページには必ず根拠が読める注記を添える（/music/playback/ へ導線）。
   説明本文と詳細ページへのリンクは段落を分け、リンクを独立した行として見せる。 */
.art-track-note {
  margin: 10px 0 0;
  font-size: 0.75em;
  line-height: 1.6;
}
.art-track-note-link {
  margin-top: 4px;
}
.art-track-close {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0 4px;
  color: var(--muted);
  font-size: 1.4em;
  line-height: 1;
  cursor: pointer;
}
.art-track-close:hover {
  color: var(--fg);
}
/* バーが出ている間は、ページ末尾がバーの裏に隠れないよう下余白を足す。 */
body.has-art-track-bar {
  padding-bottom: 300px;
}

@media (max-width: 720px) {
  .art-track-bar-inner {
    gap: 12px;
    padding: 10px 12px;
  }
  /* 16:9 で高さ 200px を確保できる最小幅は 356px。これ以上は縮めない。 */
  .art-track-frame {
    width: 356px;
  }
  /* 狭い画面では説明本文を畳むが、掲載根拠への導線は残す。 */
  .art-track-note:not(.art-track-note-link) {
    display: none;
  }
}
@media (max-width: 560px) {
  /* 横並びが成立しない幅では縦積みにする。プレイヤーは 356x200 を維持する。 */
  .art-track-bar-inner {
    flex-wrap: wrap;
  }
  .art-track-meta {
    flex: 1 1 100%;
    order: 3;
    padding-top: 0;
  }
}

/* 楽曲詳細の録音セクション：配信音源の再生ボタン。
   サイズ（フル / TV など）× バージョン（歌入り / カラオケなど）の組み合わせごとに 1 つ。
   バッジを左・ボタンを右にして右端で揃えるので、バッジの文字数や個数が違ってもボタンが動かない。 */

/* ミュージックビデオと再生ボタンの段。動画を左に置き、ボタンは右の余白へ縦に積む。
   幅が足りない画面では下へ回り込ませる。 */
.song-recording-media {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 12px 0 16px;
}
.song-recording-media .youtube-embed {
  margin: 0;
}
.song-recording-plays {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 14px;
  row-gap: 6px;
  margin-left: auto;
}
/* 動画の横（または単独の段）では縦に積む。行の右端が揃うのでボタンが一直線に並ぶ。 */
.song-recording-plays-stacked {
  flex-direction: column;
  align-items: flex-end;
  row-gap: 10px;
}
.song-recording-play {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* バッジ側は折り返しを許可する（「コーラス入りオリジナル・カラオケ」のような長いラベルが
   ボタンを押し出さないようにする）。 */
.song-recording-play-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

/* 見出し行に入れる場合。見出しの罫線（h2 の border-bottom）は全幅のまま保ちたいので、
   段を作らず h2 の中へ入れる。見出しの字送りを引き継ぐとバッジが大きく太くなるため戻す。 */
.song-recording-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 4px;
}
.song-recording-title-text {
  flex: 1 1 auto;
  min-width: 0;
}
.song-recording-title .song-recording-plays {
  font-size: 0.8em;
  font-weight: 400;
}

/* 配信音源が YouTube Music Premium 会員限定のトラック。
   会員以外が押しても再生できないため、フッターのトグルで丸ごと隠せるようにしてある。
   表示しているときはボタンの見た目を変えない（押せるものは同じ見た目で揃える方針）。
   非表示の指定はページ全体のクラスで行い、判定は art-track-pref.js が付け外しする。 */
.hide-premium-art-tracks .art-track-play.is-premium-only:not([data-art-track-alt-id]) {
  display: none;
}
/* 楽曲詳細はボタンとバッジで 1 組を成すので、ボタンだけ消すとバッジが宙に浮く。組ごと畳む。 */
.hide-premium-art-tracks .song-recording-play:has(.art-track-play.is-premium-only:not([data-art-track-alt-id])) {
  display: none;
}

/* ── 音楽クレジット（人物詳細の「音楽クレジット」欄、楽曲・劇伴・商品詳細の演奏・レコーディング・ディスクスタッフ） ── */
/* 区分（作詞・作曲・編曲 / 演奏・コーラス等 / レコーディング / 音盤製作）の小見出し。 */
.music-credit-group-heading {
  margin: 18px 0 8px;
  font-size: 1.02em;
}
.music-credit-block .music-credit-group-heading:first-child {
  margin-top: 8px;
}
/* 楽曲・劇伴・商品詳細のクレジット欄：役職バッジ + 名前の 1 ユニットの中では改行しない。
   狭い画面で 1 ユニットが画面幅を超えるときだけ折り返しを許す（横スクロールを出さないため）。 */
.music-credit-row {
  margin: 6px 0 10px;
}
.music-credit-unit {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .music-credit-unit {
    white-space: normal;
  }
}
/* 区分の中の小見出し（歌 / 劇伴 / 音盤）。 */
.music-credit-sub-heading {
  margin: 12px 0 6px;
  font-size: 0.92em;
  color: var(--muted);
}
/* 別名義のクレジットに添える、いまの名前（「仲弓 香乃（ゆかな）」）と、人物詳細の曲カードの「〇〇 名義」。 */
.staff-primary-name {
  font-size: 0.9em;
}
.person-song-card-alias {
  font-size: 0.85em;
}
/* 盤の所属表記（「（タバック）」など）。 */
.music-credit-affiliation {
  font-size: 0.9em;
}
/* 根拠にした盤。 */
.music-credit-sources {
  margin: 10px 0 0;
  font-size: 0.88em;
}
/* 人物詳細：音盤の音楽クレジットの行（役職バッジ + 紐付け先）。 */
.music-credit-item-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.music-credit-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.music-credit-item-roles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.music-credit-item-sub {
  font-size: 0.9em;
}
/* 人物・企業詳細の音楽クレジット：歌 / 劇伴 / 音盤の枠を開いた中身。本編のクレジットの各話の内訳と同じく、
   左の線で枠の中身であることを示す。 */
.music-credit-card-body {
  margin: 6px 0 4px 12px;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--border);
}
.music-credit-card-body > .music-credit-item-list {
  margin-bottom: 0;
}
.music-credit-card-body > .music-credit-item-list > .music-credit-item:last-child {
  border-bottom: none;
}
.music-credit-card-body > .person-songs-card-list {
  margin: 4px 0 8px;
}
/* 劇伴詳細：セッションの演奏・レコーディング（既定で閉じる）。 */
.bgm-session-credits {
  margin: 4px 0 16px;
}
.bgm-session-credits > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.92em;
}
/* 音楽製作：歌・劇伴タブの中の並べ替え切り替え（初参加順 / 多い順）。 */
.sort-toggle {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
}
.sort-toggle-btn {
  padding: 3px 12px;
  font-size: 0.88em;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.sort-toggle-btn.is-active {
  color: var(--fg);
  border-color: var(--fg);
}
/* タブとリストの間の段（絞り込み・初参加順／多い順の切り替えを左に、件数での並べ替えボタンを右に置く）。 */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 4px 0 14px;
}
.list-toolbar > .entity-filter,
.list-toolbar > .sort-toggle {
  margin: 0;
}
.list-toolbar > .count-sort-btn {
  margin-left: auto;
}
/* 並べ替えボタンだけの段で、ボタンが隠れているタブ（初参加順など）では段ごと詰める。 */
.list-toolbar:not(:has(> .entity-filter, > .sort-toggle, > .count-sort-btn:not([hidden]))) {
  display: none;
}
/* 件数バッジでの並べ替えボタン（count-sort.js が中身を描く）。バッジと同じ絵文字・色に ⬇ / ⬆ を添える。 */
.count-sort-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.count-sort-btn[hidden] {
  display: none;
}
.count-sort-btn:focus-visible {
  outline: 2px solid var(--accent-pink, #ec4899);
  outline-offset: 2px;
  border-radius: 999px;
}
/* 種類ごとの段階は .count-pill + .count-pill-{種類} の色をそのまま使い、大きさだけボタン向けに広げる。 */
.count-sort-pill {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.88em;
  line-height: 1.6;
}
/* 合計・もとの並びの段階は特定の色を持たないので、本文色の枠にする。 */
.count-sort-pill-total,
.count-sort-pill-none {
  color: var(--fg);
  border-color: var(--fg);
  background: transparent;
}
.count-sort-arrow {
  font-size: 0.95em;
}
/* 音楽クレジットの役職詳細：1 人 1 行のアコーディオン。
   閉じた状態は「開閉の三角｜名前｜件数（右寄せ）」、開くと劇伴・歌・盤の担当先を 1 行ずつ並べる。 */
.music-role-member {
  border-bottom: 1px solid var(--border);
}
.music-role-member > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 6px 10px;
  cursor: pointer;
  list-style: none;
}
.music-role-member > summary::-webkit-details-marker { display: none; }
.music-role-member > summary::before {
  content: "▶";
  display: inline-block;
  font-size: 0.7em;
  color: var(--muted);
  transition: transform 0.12s ease;
}
.music-role-member[open] > summary::before {
  transform: rotate(90deg);
}
.music-role-member > summary:hover {
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
}
.music-role-member > summary:hover a.entity-row-name {
  text-decoration: underline;
}
.music-role-member-body {
  padding: 0 10px 10px 30px;
}
/* 担当先の区分（劇伴 / 歌 / 盤）の小見出し。 */
.music-role-member-kind {
  margin: 6px 0 2px;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--muted);
}
.music-role-member-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.music-role-member-items > li {
  padding: 1px 0;
  font-size: 0.92em;
  line-height: 1.6;
}

/* ──────── 引用ボックス（_cite-box.sbn） ────────
   シェアボタンの直下に置く「このページを引用する」。シェアカードと同じ角丸の箱で、色は控えめなグレー。
   引用文は <pre> だが折り返して読める幅に収める（URL は overflow-wrap で途中改行を許す）。 */
.cite-box {
  margin: 0 0 1.2em;
  padding: 1.1em 1.2em 1.2em;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
}
.cite-box-heading {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.95em;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.6em;
  padding: 0;
  border: 0;
  letter-spacing: 0.04em;
}
.cite-box-heading svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}
.cite-box-lead {
  margin: 0 0 0.7em;
  font-size: 0.88em;
  color: var(--muted);
}
.cite-box-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em 0.8em;
}
.cite-box-text {
  flex: 1 1 20em;
  margin: 0;
  padding: 0.7em 0.9em;
  font-family: var(--font-base);
  font-size: 0.9em;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cite-box-copy {
  flex: none;
}
.cite-box-alt {
  margin-top: 0.8em;
  font-size: 0.9em;
}
.cite-box-alt summary {
  cursor: pointer;
  color: var(--muted);
}
.cite-box-alt .cite-box-item {
  margin-top: 0.5em;
}
.cite-box-note {
  margin: 0.8em 0 0;
  font-size: 0.85em;
  color: var(--muted);
}

/* ──────── 歴代記録バッジ（エピソード詳細の基本情報の下） ────────
   歴代 10 位以内（is-global：金）とシリーズ内の最長・最短（is-series：桃）のピル。 */
.ep-record-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0.8em 0 0;
}
.ep-record-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.75em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.84em;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}
.ep-record-badge::before {
  content: "🏆";
  font-size: 0.95em;
}
.ep-record-badge.is-global {
  color: #8a5a00;
  background: #fff6dc;
  border-color: #f1d38a;
}
.ep-record-badge.is-series {
  color: #7a3b5a;
  background: #fdf0f6;
  border-color: #f3c2d7;
}
.ep-record-badge:hover,
.ep-record-badge:focus-visible {
  text-decoration: underline;
}

/* ──────── チーフの組み合わせの通算回数（エピソード詳細のスタッフセクション） ────────
   #staff は flex（セットを横に並べる）なので、リストと注記は全幅の子にして下に回す。 */
#staff .staff-combo-list {
  flex-basis: 100%;
  list-style: none;
  margin: 0.4em 0 0;
  padding: 0.6em 0 0;
  border-top: 1px dashed var(--border);
  font-size: 0.9em;
  display: grid;
  gap: 0.25em;
}
#staff .staff-combo-list li {
  white-space: normal;
}
.staff-combo-label {
  color: var(--muted);
  margin-right: 0.5em;
}
.staff-combo-label::after {
  content: "：";
}
.staff-combo-value b {
  font-weight: 700;
}
#staff .staff-combo-note {
  flex-basis: 100%;
  margin: 0;
}

/* ──────── 歴代記録（/stats/records/） ────────
   分類ごとに記録カードをグリッドで並べる。カードは順位・名前（＋添え書き）・値の 3 列。 */
.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1em;
  margin: 0.8em 0 1.4em;
}
.records-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9em 1em 1em;
  background: #fff;
}
.records-card-title {
  margin: 0 0 0.6em;
  padding: 0;
  border: 0;
  font-size: 1em;
  font-weight: 600;
}
.records-entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45em;
}
.records-entry {
  display: grid;
  grid-template-columns: 1.8em minmax(0, 1fr) auto;
  gap: 0.5em;
  align-items: baseline;
}
.records-rank {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}
.records-entry:first-child .records-rank {
  font-size: 1.15em;
}
.records-body {
  min-width: 0;
}
.records-name {
  display: block;
  overflow-wrap: anywhere;
}
.records-sub {
  display: block;
  font-size: 0.85em;
  color: var(--muted);
}
.records-role {
  font-size: 0.85em;
  color: var(--muted);
}
.records-value {
  font-family: var(--font-num);
  font-weight: 600;
  white-space: nowrap;
}
.records-empty {
  margin: 0;
  font-size: 0.9em;
}
.records-more {
  margin: 0.7em 0 0;
  font-size: 0.88em;
  text-align: right;
}

/* ──────── 本放送・配信・円盤の尺の違い（/stats/records/format-differences/） ──────── */
.fmtdiff-count {
  font-size: 0.7em;
  font-weight: 400;
  margin-left: 0.6em;
}
.fmtdiff-series {
  margin: 1.4em 0 0.5em;
  font-size: 1.02em;
}
.fmtdiff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6em;
}
.fmtdiff-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6em 0.9em;
}
.fmtdiff-ep {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.6em;
  align-items: baseline;
  margin-bottom: 0.35em;
}
.fmtdiff-date {
  font-size: 0.85em;
}
.fmtdiff-parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25em;
  font-size: 0.9em;
}
.fmtdiff-parts li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 1em;
  align-items: center;
}
.fmtdiff-part {
  font-weight: 600;
  min-width: 6em;
}
.fmtdiff-src b {
  font-family: var(--font-num);
  font-weight: 600;
}
.fmtdiff-src i {
  font-style: normal;
  font-family: var(--font-num);
  color: var(--accent);
}
.fmtdiff-note {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.92em;
}

/* ──────── ホームの商品・書籍カードの状態バッジとカウントダウン ────────
   要素は常に出力し、文言が空のときだけ消す。閲覧時に release-countdown.js が文言を入れ替えるので、
   空 → 非空（発売日が来た）や非空 → 空（発売から 7 日過ぎた）の切り替えが CSS だけで済む。 */
.home-product-card-badge:empty,
.home-product-card-countdown:empty {
  display: none;
}