:root {
  --paper: #f3ead8;
  --paper-2: #fffaf0;
  --ink: #182021;
  --muted: #66655e;
  --teal: #123f43;
  --rust: #c34d24;
  --gold: #d9a928;
  --line: #182021;
  --reading: #66508b;
  --chat: #187260;
  --trivia: #a3315c;
  --onthisday: #7a5a2e;
  --weather: #286d9c;
  --littlebit: #c34d24;
  --sans: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 20%, rgba(24,32,33,.035) 0 1px, transparent 1.5px) 0 0 / 11px 11px,
    var(--paper);
  font-family: var(--sans);
  line-height: 1.7;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select { font: inherit; }
button, .button {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper-2);
  color: var(--ink);
  min-height: 44px;
  padding: .55rem 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
button:hover, .button:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem max(1rem, calc((100vw - 1180px)/2));
  border-bottom: 2px solid var(--ink);
  background: rgba(243,234,216,.96);
}
.brand { text-decoration: none; font-weight: 950; letter-spacing: .08em; line-height: 1; }
.brand small { display:block; margin-top:.4rem; color:var(--rust); font-size:.62rem; letter-spacing:.16em; }
.site-nav { display:flex; gap:.9rem; font-size:.85rem; font-weight:800; align-items:center; }
.site-nav a[aria-current="page"] { color:var(--rust); }
#fullscreen-btn {
  min-height:0; flex-shrink:0; width:28px; height:28px; padding:0; border:2px solid var(--ink);
  background:transparent; color:var(--ink); font-size:13px; line-height:1;
  cursor:pointer; touch-action:manipulation;
}

.shell { width:min(1180px, calc(100% - 2rem)); margin-inline:auto; }
.hero {
  display:grid;
  gap:1.5rem;
  padding: clamp(2.5rem, 8vw, 6rem) 0 2rem;
  border-bottom: 2px solid var(--ink);
}
.eyebrow, .label {
  margin:0 0 .5rem;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rust);
}
h1, h2, h3, p { overflow-wrap:anywhere; }
h1 { margin:0; max-width:11ch; font-size:clamp(3rem, 12vw, 8.6rem); line-height:.82; letter-spacing:-.075em; }
.hero-copy { max-width:38rem; margin:0; font-family:var(--serif); font-size:clamp(1.08rem, 2.4vw, 1.55rem); }
.tuner { height:28px; border-block:2px solid var(--ink); background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5%, var(--ink) 5% calc(5% + 1px), transparent calc(5% + 1px) 10%); position:relative; }
.tuner::after { content:""; position:absolute; width:6px; inset:-8px auto -8px 58%; background:var(--rust); }

.now-grid { display:grid; gap:1rem; padding:2rem 0; }
.radio-panel { border:2px solid var(--ink); background:var(--teal); color:var(--paper-2); padding:clamp(1rem,4vw,2rem); box-shadow:7px 7px 0 var(--ink); }
.live-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.live-badge { display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; font-weight:900; letter-spacing:.12em; }
.live-dot { width:.7rem; height:.7rem; border-radius:50%; background:#ff6a3c; box-shadow:0 0 0 4px rgba(255,106,60,.18); }
.clock { font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.now-title { margin:.8rem 0 .15rem; font-size:clamp(1.8rem,6vw,4rem); line-height:1.08; }
.now-meta { margin:0; color:#e0d7c8; }
.transport { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin:1.3rem 0 .7rem; }
.transport button { color:var(--ink); background:var(--gold); }
.sync-note { margin:.5rem 0 0; font-size:.78rem; color:#d8d2c7; }
.region-jump { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.region-jump button { padding:.35rem .7rem; font-size:.78rem; color:var(--ink); background:var(--gold); box-shadow:2px 2px 0 var(--ink); }

.caption {
  min-height:13rem;
  border:2px solid var(--ink);
  padding:1.4rem;
  background:var(--paper-2);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.caption-speaker { margin:0 0 .5rem; color:var(--rust); font-weight:900; }
.caption-text { margin:0; font-family:var(--serif); font-size:clamp(1.35rem,4vw,2.35rem); line-height:1.55; }

.section { padding:clamp(2.5rem,7vw,5rem) 0; border-top:2px solid var(--ink); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; }
.section h2 { margin:0; font-size:clamp(2rem,6vw,4.5rem); line-height:1; letter-spacing:-.04em; }
.section-intro { max-width:42rem; color:var(--muted); }
.schedule-tools, .filter-bar { display:flex; flex-wrap:wrap; gap:.65rem; align-items:end; margin-bottom:1rem; }
.field { display:grid; gap:.25rem; font-size:.78rem; font-weight:900; }
.field input, .field select {
  min-height:44px;
  border:2px solid var(--ink);
  border-radius:0;
  padding:.45rem .65rem;
  background:var(--paper-2);
  color:var(--ink);
  font-size:1rem;
}
.field.grow { flex:1 1 16rem; }

.schedule {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap:1rem;
}
.slot {
  position:relative;
  min-height:104px;
  padding:1rem;
  border:2px solid var(--ink);
  background:var(--paper-2);
  box-shadow:4px 4px 0 var(--ink);
  font-size:.82rem;
  overflow:hidden;
}
/* .slot自体はdiv(▶ボタンをaと並べるため)。中のリンクはaとして
   text-decorationだけ引き継ぐ(2026-08-11)。 */
.slot > a { display:block; text-decoration:none; color:inherit; }
.slot strong { display:block; margin-bottom:.5rem; font-size:1.4rem; font-variant-numeric:tabular-nums; }
.slot span { display:block; font-weight:800; }
.slot.current { background:var(--gold); }
.slot.current::after { content:"NOW"; position:absolute; top:2px; right:2px; font-size:.54rem; font-weight:950; }
.slot[data-corner="littlebit"] { border-top:5px solid var(--littlebit); }
.slot[data-corner="weather"] { border-top:5px solid var(--weather); }
.slot[data-corner="chat"] { border-top:5px solid var(--chat); }
.slot[data-corner="trivia"] { border-top:5px solid var(--trivia); }
.slot[data-corner="onthisday"] { border-top:5px solid var(--onthisday); }
.slot[data-corner="reading"] { border-top:5px solid var(--reading); }
.slot.rerun { opacity:.82; }
.rerun-tag { display:inline-block; margin-top:.4rem; font-size:.68rem; font-weight:700; color:var(--muted); }
.slot-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.slot-actions .play-button { padding:.2rem .45rem; font-size:.68rem; min-height:0; }
.slot-actions .bookmark-button.compact { padding:.3rem; min-height:0; }

.cards { display:grid; gap:1rem; }
.episode-card { border:2px solid var(--ink); background:var(--paper-2); padding:1.2rem; display:grid; gap:.6rem; box-shadow:4px 4px 0 var(--ink); }
.episode-card h2, .episode-card h3 { margin:0; font-size:1.35rem; line-height:1.3; }
.episode-card a { text-decoration:none; }
.episode-card a::after { content:"  →"; color:var(--rust); }
.card-meta { display:flex; flex-wrap:wrap; gap:.5rem 1rem; color:var(--muted); font-size:.78rem; }
.card-actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
/* ブックマーク。ボタンの基本形はplay-buttonと合わせ、押下中(on)は金色で塗る。 */
.bookmark-button {
  display:inline-flex; align-items:center; gap:.4rem;
  border:2px solid var(--ink); background:var(--paper-2); color:var(--ink);
  font-weight:800; font-size:.75rem; padding:.4rem .7rem; cursor:pointer;
  box-shadow:2px 2px 0 var(--ink); width:max-content;
}
.bookmark-button:hover { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.bookmark-button.on { background:var(--gold); }
.bookmark-icon { display:block; --bookmark-fill: transparent; }
.bookmark-button.on .bookmark-icon { --bookmark-fill: var(--ink); }
.bookmark-button.compact { padding:.4rem; box-shadow:1px 1px 0 var(--ink); }
.corner-tag { width:max-content; padding:.15rem .5rem; background:var(--ink); color:var(--paper-2); font-size:.7rem; font-weight:900; letter-spacing:.08em; }
/* 一覧・番組表からその場で再生する▶ボタン(2026-08-11、ユーザー要望:
   各コンテンツに再生ボタンを置き、押すまでは現在の再生を変えない)。 */
.play-button {
  border:2px solid var(--ink); background:var(--gold); color:var(--ink);
  font-weight:800; font-size:.75rem; padding:.4rem .7rem; cursor:pointer;
  box-shadow:2px 2px 0 var(--ink); width:max-content;
}
.play-button:hover { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.empty, .error { padding:2rem; border:2px dashed var(--ink); background:var(--paper-2); }

.page-head { padding:clamp(2.5rem,8vw,5rem) 0 2rem; border-bottom:2px solid var(--ink); }
.page-head h1 { max-width:16ch; font-size:clamp(2.8rem,9vw,7rem); }
.episode-layout { display:grid; gap:2rem; padding:2rem 0 5rem; }
.episode-actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
/* /podcast/内のどのページでも画面下端に常駐する(2026-08-11、ユーザー要望)。
   再生中かどうかに関わらず常に表示し、台本・本文(#transcript)にさしかかった
   あたりのスクロール量(player.jsが--shrinkを0〜1で更新)に応じて縮む。
   3行分(約90px)スクロールしたところで最小サイズに達し、それ以降は最小の
   まま。上へ戻るときは同じ計算式が自然に逆再生になる。台本の無いページ
   (トップ・アーカイブ)では--shrinkは常に0で、常駐時と同じ大きさのまま。
   AUDIOの文字は常に見えるままにし、消しはしない。 */
.sticky-player {
  border:2px solid var(--ink); background:var(--teal); color:var(--paper-2);
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:calc(1rem - .82rem * var(--shrink)) max(1rem, calc((100vw - 1180px)/2));
  padding-bottom:calc(1rem - .82rem * var(--shrink) + env(safe-area-inset-bottom, 0px));
  box-shadow:0 calc(-4px * var(--shrink)) 0 var(--ink);
  --shrink:0;
}
/* iOS/Androidのネイティブ音声コントロールは高さがCSSでほぼ調整できず、
   padding/marginを詰めるだけでは縦幅の大部分(コントロール本体)が残る。
   transform:scaleで見た目ごと縮め、縮めた分だけ下の余白も負のmarginで
   詰める(2026-08-11、スマホ実機のスクリーンショットでの指摘)。 */
.sticky-player audio {
  width:100%;
  transform-origin:top left;
  transform:scale(calc(1 - .16 * var(--shrink)));
  margin-bottom:calc(-.5rem * var(--shrink));
}
/* 常駐バーの分、ページ末尾(フッターの下)に余白を確保して隠れないようにする。 */
body { padding-bottom:calc(9.5rem + env(safe-area-inset-bottom, 0px)); }
/* 再生バーに⟲10秒・停止・10秒⟳・本文追従の1段を足した分だけ広げる
   (2026-08-13、ユーザー要望: 縦幅はそれに合わせて最低限大きく)。 */
.player-controls { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.45rem; }
.player-controls button {
  font:inherit; font-size:.78rem; font-weight:800; letter-spacing:.02em;
  padding:.4rem .75rem; min-height:2.2rem; cursor:pointer;
  color:var(--paper-2); background:transparent;
  border:2px solid var(--paper-2); border-radius:0;
}
.player-controls button:hover { color:var(--teal); background:var(--paper-2); }
.player-controls button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
/* 追従ONのときだけ塗りつぶして、今どちらなのかを見た目で分かるようにする。 */
/* 追従ONのときだけ塗りつぶす。文言も「追従中」に変わるので、色が見分けに
   くい環境でも今どちらのモードか分かる(2026-08-14、実機での指摘)。
   文言の長さでバーが動かないよう幅を確保しておく。 */
/* 再生/一時停止。記号だけのボタンなので、▶と❚❚で幅が変わらないよう
   正方形に固定する(2026-08-14、ユーザー要望)。 */
.player-toggle { min-width:3.2rem; letter-spacing:.1em; }
.player-follow { min-width:8.5em; }
.player-follow[aria-pressed="true"] { color:var(--teal); background:var(--gold); border-color:var(--gold); }
.player-now-title { text-decoration:underline; cursor:pointer; }
.player-now-title:hover { color:var(--gold); }
.sticky-player .label {
  display:flex; align-items:baseline; gap:.5em; overflow:hidden; white-space:nowrap;
  font-size:calc(.75rem - .25rem * var(--shrink));
  /* 最小時は.02rem(AUDIOの文字と再生バーがほぼ隙間なく詰まる) */
  margin:0 0 calc(.5rem - .48rem * var(--shrink));
}
/* 現在再生中のコンテンツ名。AUDIOの見出しスタイル(大文字・字間)を引き継がず、
   長い題名は省略記号で切る(2026-08-11、ユーザー要望)。 */
.player-now-title {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-transform:none; letter-spacing:normal; font-weight:700; color:var(--paper-2);
}
.sticky-player.is-playing .label { display:none; }
.transcript { list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.transcript li { display:grid; gap:.3rem; padding:1rem 0; border-bottom:1px solid rgba(24,32,33,.35); }
.transcript .speaker { font-size:.75rem; font-weight:900; color:var(--rust); }
.transcript p { margin:0; font-family:var(--serif); font-size:1.12rem; }

/* 再生位置に合わせて「いま読み上げている文」を太字+下線にする
   (2026-08-13、ユーザー要望)。明朝でfont-weightを切り替えると文が変わる
   たびに後続テキストが横にずれて段落全体がガタつくので、太字はリフローの
   起きないtext-shadowの擬似太字で作る。下線は明朝の字の下部に被らないよう
   offsetを取る。 */
/* 朗読の連載を前後に辿るリンク(2026-08-13、ユーザー要望)。本文の直後に置く。 */
.serial-nav { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.serial-nav .serial-link {
  flex:1 1 14rem; display:grid; gap:.2rem; padding:.8rem 1rem;
  border:2px solid var(--ink); background:var(--paper-2);
  box-shadow:3px 3px 0 var(--ink); text-decoration:none; color:var(--ink);
}
.serial-nav .serial-link:hover { transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.serial-label { font-size:.72rem; font-weight:900; letter-spacing:.08em; color:var(--rust); }
.serial-title { font-family:var(--serif); font-size:1.02rem; }

.sentence { cursor:pointer; }
.sentence:hover { background:rgba(217,169,40,.28); }
.sentence:focus-visible { outline:2px solid var(--rust); outline-offset:2px; }
.is-current {
  text-shadow:0 0 .35px currentColor, 0 0 .35px currentColor;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.25em;
  text-decoration-color:var(--rust);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
.facts { margin:0; display:grid; grid-template-columns:minmax(7rem, .4fr) 1fr; border-top:2px solid var(--ink); }
.facts dt, .facts dd { margin:0; padding:.65rem; border-bottom:1px solid var(--ink); }
.facts dt { font-size:.75rem; font-weight:900; }
.facts dd { border-left:1px solid var(--ink); overflow-wrap:anywhere; }

.site-footer { padding:2rem max(1rem,calc((100vw - 1180px)/2)); border-top:2px solid var(--ink); background:var(--ink); color:var(--paper); font-size:.78rem; }
.footer-grid { display:grid; gap:1rem; }
.site-footer p { margin:0; }
.site-footer a { color:var(--paper); }
.noscript { padding:1rem; background:#fff1b8; border-bottom:2px solid var(--ink); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (min-width: 720px) {
  .hero { grid-template-columns:1.4fr .6fr; align-items:end; }
  .now-grid { grid-template-columns:1.35fr .65fr; align-items:stretch; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .episode-layout { grid-template-columns:minmax(0,1.5fr) minmax(250px,.5fr); }
  .episode-aside { order:2; }
}
@media (min-width: 1040px) {
  .cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

/* little-bit: focus-visible(2026-08-29追加)
   キーボード操作でいまどこにいるかが見えないアプリが24中20あった
   (サイト品質棚卸し B-5)。:where() で詳細度0にしてあるので、
   個別に focus スタイルを持つ要素はそちらが勝つ。
   色はサイト共通のアクセント(#e8825a)。明るい地でも暗い地でも見える。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #e8825a;
  outline-offset: 2px;
}