/* 色はカバーの空と雲から：深いスレートの黒、薄い雲の白青。太い角ゴシックはロゴと核心の問いだけ */
/* 游ゴシックは 500（Medium）より細くしない。500 以下はすべて Medium、600 以上は Bold で出す */
@font-face { font-family: "Yu Gothic 500"; font-weight: 100 500; src: local("YuGothic Medium"), local("YuGothic-Medium"), local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic 500"; font-weight: 600 900; src: local("YuGothic Bold"), local("YuGothic-Bold"), local("Yu Gothic Bold"); }
:root {
  /* 窓（カード・note の記事・そのカバー写真）の角丸。どの窓もこの値にそろえる */
  --r-win: 14px;
  --black: #11161e;
  --white: #fff;
  --accent: #2c3440;
  --muted: #66707c;
  --light: #f3f6fa;
  --sky: #8ab8f0;
  /* 英数字は Noto Sans、和文は游ゴシック（太さは上の "Yu Gothic 500"）。游ゴシックのない端末は Noto Sans JP */
  --font: "Noto Sans", "Yu Gothic 500", "Noto Sans JP", sans-serif;
  --speed: .2s;
  /* Material の動き：標準（速く出て、ゆっくり止まる）、減速（長く減速して止まる）、ばね（わずかに弾んで収まる） */
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.22, 1.38, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 小窓（プロフィール・お便り）が開いているあいだは、下のページをスクロールさせない。スクロールバーが消えて横にずれないよう幅は残す */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
body { margin: 0; font-family: var(--font); color: var(--black); background: var(--white); overflow-x: hidden; font-feature-settings: "palt"; }
/* ロゴの「問いと、対話と。」は、読点の空きもロゴの一部なので詰めない */
.open-title, .foot-name { font-feature-settings: normal; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: all var(--speed) var(--ease-std); }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--black); color: var(--white); padding: 8px 12px; z-index: 50; }
.skip:focus { top: 8px; }
/* 記号は SVG（build.py の ICONS）。文字ではないので、フォントを待たずに出て、読み上げや検索の本文にも混ざらない。大きさは font-size で決める */
.icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; fill: currentColor; }


/* 1：開いたとき。--p（0→1）はスクロール量。JS が無いとき・動きを減らす設定のときは広がった状態 */
.s-open { font-family: "Noto Sans", "Noto Sans JP", sans-serif; --p: 1; --s: min(52vw, 60vh); position: relative; background: var(--white); }
/* 動きを減らす設定のときは、はじめから広がった空に「番組について」を重ねる。ふつうは画面1つ分スクロールして広げてから */
.motion .s-open { --p: 0; }
.open-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.open-frame {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--s) + (100% - var(--s)) * var(--p));
  height: calc(var(--s) + (100% - var(--s)) * var(--p));
  translate: -50% -50%;
  border-radius: calc(16px * (1 - var(--p)));
  overflow: hidden; background: var(--black);
  /* 中の変化が外の配置に響かないように閉じ込める（スクロールのたびの計算を小さくする） */
  contain: layout paint;
}
/* はじめの四角の影。大きさは変えず、広がるにつれて薄れるだけ（影の大きさを毎回描き直すと重い） */
.open-sticky::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); translate: -50% -50%; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 28, 46, .16); opacity: clamp(0, 1 - var(--p) * 4, 1); pointer-events: none; }
/* はじめはカバーアートと同じ切り抜き：空の上の方を 1.3 倍に寄せて、山と家を隠す。広がるにつれて写真全体へ戻る */
.open-frame img { width: 100%; height: 100%; object-fit: cover; transform-origin: 51% 20%; scale: calc(1.3 - .3 * var(--p)); }
.open-frame::after { content: ""; position: absolute; inset: 0; background: rgba(17, 22, 30, calc(.46 * var(--p))); }
/* 題字ははじめ写真の真ん中。広がるにつれて上へ移りながら消える */
.open-over { position: absolute; inset: 0; z-index: 1; color: var(--white); text-align: center; }
.open-head {
  position: absolute; left: 0; right: 0; padding-inline: 24px;
  top: calc(50% * (1 - var(--p)) + clamp(48px, 9vh, 96px) * var(--p));
  translate: 0 calc(-50% * (1 - var(--p)));
  opacity: clamp(0, 1 - var(--p) * 2.2, 1);
}
/* はじめはカバーアートと同じ比率：四角の幅の約9%で、文字列が幅の約3分の2になる */
.open-title { font-size: calc(var(--s) * .087); font-weight: 700; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; text-shadow: 0 2px 14px rgba(17, 22, 30, .18);
  /* カバーと同じく、四角の中で少し右に寄せる（左の余白 20%・右 16%） */
  translate: calc(var(--s) * .045) 0; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; z-index: 2; translate: -50% 0;
  font-size: 30px; line-height: 0; color: var(--black); opacity: calc(.35 - var(--p));
}
/* 続きから：前に途中まで聴いた回があるとき、矢印の代わりに出す再生ボタン */
.resume-cue { position: absolute; left: 50%; bottom: 22px; z-index: 2; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: var(--black); cursor: pointer; opacity: clamp(0, 1 - var(--p) * 3, 1); -webkit-tap-highlight-color: transparent; }
.resume-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: var(--white); transition: scale var(--speed); }
.resume-icon .icon { font-size: 28px; }
.resume-cue:hover .resume-icon, .resume-cue:focus-visible .resume-icon { scale: 1.06; }
/* 吹き出し：ボタンの上に「続きから聴きませんか？」。下向きの小さな三角でボタンを指す。少し遅れてふわっと出る */
.resume-tip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 16px 10px; border-radius: 10px; background: var(--black); color: var(--white); line-height: 1.45; animation: tip-in .5s var(--ease-out) .6s both; }
.resume-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg; border-radius: 2px; background: var(--black); }
.resume-title, .resume-text { max-width: min(76vw, 340px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-title { font-size: 13px; font-weight: 600; }
.resume-text { font-size: 11px; color: rgba(255, 255, 255, .7); }
@keyframes tip-in { from { opacity: 0; translate: 0 6px; } }
.open-sticky.has-resume .scroll-cue { display: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* 2：番組について。1枚目の中にあり、背景なしで空の上を流れる。空（.open-sticky）はこの欄を読み終わるまで後ろに留まる。
   言葉は空が広がりきる直前（--p が .8→1）にふっと出る */
.s-about { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; container-type: inline-size; color: var(--white); padding: clamp(120px, 18vh, 200px) 30px; pointer-events: none; }
html:not(.motion) .s-about { margin-top: -100svh; }
.about-body { opacity: clamp(0, (var(--p, 1) - .8) * 5, 1); }
/* 広がるあいだ、上がってくる欄が「続きから」ボタンを覆わないよう、押せるのは言葉の部分だけにする */
.about-body { pointer-events: auto; }
/* 文は左にそろえ、書き出しは左から 35% の位置（デライト・ベンチャーズの VISION と同じ置き方）。
   右にプレイヤーが開いても釣り合いが崩れないよう、画面ではなくこの欄の幅（cqw）を基準にする */
.inner.about-solo { position: relative; z-index: 2; max-width: none; margin: 0; padding-left: calc(35vw - 30px); padding-left: 35cqw; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 文字は欄の幅の 1.35%（幅2000pxで27px）、字間 .2em、一行の送りは文字の約3倍 */
.about-lines { margin: 0; font-size: max(15px, 1.35vw); font-size: max(15px, 1.35cqw); font-weight: 400; letter-spacing: .2em; line-height: 1.6; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
/* 一行ずつ。画面が狭くて折り返すときは、文節の切れ目で */
.about-lines > span { display: block; margin-bottom: 1.5em; word-break: auto-phrase; text-wrap: pretty; }
.about-lines > span:last-child { margin-bottom: 0; }
/* CoIU の公式サイトへの案内：細い下線。触れたら濃く */
.about-coiu { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(255,255,255,.4); }
.about-coiu:hover, .about-coiu:focus-visible { text-decoration-color: currentColor; }
.about-body .actions { margin-top: clamp(48px, 7vh, 72px); }
/* 学生活動であること（公認ではないこと）の説明：詩の行より小さく、控えめに */
.about-note { max-width: 36em; margin: 32px 0 0; word-break: auto-phrase; text-wrap: pretty; font-size: 13px; line-height: 1.9; letter-spacing: .06em; color: rgba(255,255,255,.72); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
@media (max-width: 760px) {
  .s-about { padding-block: 96px; }
  .inner.about-solo { padding-left: 4px; }
  .about-lines { font-size: 15px; letter-spacing: .12em; }
  .about-lines > span { margin-bottom: 1.3em; }
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.btn {
  /* 線だけの丸いボタン。ホバーすると、マウスが入った所から円が広がって塗りつぶし、文字が反転する */
  --fg: var(--white); --bg: var(--black);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 200px; padding: 10px 28px; line-height: 1.4; border-radius: 999px; border: 2px solid var(--fg);
  background: transparent; color: var(--fg); font-size: 14px; font-weight: 500; letter-spacing: .02em; cursor: pointer;
  transition: color .4s ease-in-out;
}
.btn-fill { position: absolute; z-index: -1; left: 50%; top: 50%; width: 0; aspect-ratio: 1; border-radius: 50%; background: var(--fg); translate: -50% -50%; transition: width .4s ease-in-out; pointer-events: none; }
.btn:hover, .btn:focus-visible { color: var(--bg); }
.btn:hover .btn-fill, .btn:focus-visible .btn-fill { width: 260%; }
/* 配信先のボタンは、ホバーでそのサービスの色に（Spotify は緑、Apple Podcasts は赤） */
.btn-spotify { background: var(--white); color: var(--black); }
.btn-apple { border-width: 1px; border-color: rgba(255, 255, 255, .45); }
.btn-spotify:hover, .btn-spotify:focus-visible { border-color: #1db954; color: var(--black); }
.btn-spotify .btn-fill { background: #1db954; }
.btn-apple:hover, .btn-apple:focus-visible { border-color: #fa243c; color: var(--white); }
.btn-apple .btn-fill { background: #fa243c; }
.btn { transition: color .4s ease-in-out, border-color .4s ease-in-out; }
.ep-play .i-pause { display: none; }
.ep-play.is-playing .i-play { display: none; }
.ep-play.is-playing .i-pause { display: block; }

/* プレイヤー：Spotify のように、画面の下いっぱいに横長のバー。左に流れている回、真ん中に操作と再生位置、右に脇役のボタン。
   色はカバーの空から取る：地は同じ青を深く沈めた色（一色）、文字と再生ボタンは雲の白、控えめなものは雲の影の青。影や枠は使わない */
:root { --bar-h: 0px; }
body.player-open { --bar-h: 88px; padding-bottom: var(--bar-h); }
.audio-player {
  --deep: #1e2b3e; --ink: #e9eff7; --sub: #93a8c4;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 24px;
  height: 88px; padding: 0 20px calc(env(safe-area-inset-bottom)); background: var(--deep); color: var(--ink);
  animation: player-up .4s var(--ease-out);
}
@keyframes player-up { from { translate: 0 100%; } }
.audio-player.is-closing { animation: player-down .35s var(--ease-std) forwards; }
@keyframes player-down { to { translate: 0 100%; } }
.audio-player button { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.audio-player audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 左：カバーの小さな正方形と、題名・回 */
.audio-player-now { display: flex; align-items: center; gap: 14px; min-width: 0; }
.audio-player-cover { flex: none; width: 56px; height: 56px; border-radius: 4px; object-fit: cover; }
.audio-player-text { min-width: 0; }
.audio-player-title { display: block; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.audio-player-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--sub); font-size: 12px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
/* 流れているあいだだけ、回の前に小さく揺れる棒 */
.audio-player-eq { display: none; align-items: flex-end; gap: 2px; height: 10px; color: var(--ink); }
.audio-player-eq i { width: 2px; height: 30%; border-radius: 1px; background: currentColor; }
.audio-player.is-playing .audio-player-eq { display: inline-flex; }
.audio-player.is-playing .audio-player-eq i { animation: eq .9s ease-in-out infinite alternate; }
.audio-player.is-playing .audio-player-eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.audio-player.is-playing .audio-player-eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
@keyframes eq { from { height: 25%; } to { height: 100%; } }

/* 真ん中：戻る・再生・進む・次の回。その下に再生位置 */
.audio-player-center { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.audio-player-actions { display: flex; align-items: center; gap: 18px; }
.audio-player-skip { width: 36px; height: 36px; border-radius: 50%; color: var(--sub); display: grid; place-items: center; transition: color var(--speed), scale var(--speed); }
.audio-player-skip:hover, .audio-player-skip:focus-visible { color: var(--ink); }
.audio-player-skip:active { scale: .94; }
.audio-player-skip:disabled { opacity: .35; cursor: default; }
.audio-player-skip .icon { font-size: 24px; }
.audio-player-play { width: 40px; height: 40px; border-radius: 50%; background: var(--ink) !important; color: var(--deep) !important; display: grid; place-items: center; transition: scale var(--speed); }
.audio-player-play:hover, .audio-player-play:focus-visible { scale: 1.06; }
.audio-player-play:active { scale: .96; }
/* 押したあとにブラウザが付ける輪やタップの影は出さない。キーボードで選んだときの輪（:focus-visible）だけ残す */
.audio-player-play { -webkit-tap-highlight-color: transparent; }
.audio-player-play:focus:not(:focus-visible) { outline: none; }
/* 指やマウスで押したあとは、ブラウザが :focus-visible とみなしても輪を出さない（Safari では押したあとに暗い輪が残る）。キーボードで操作したときは出す */
.using-pointer .audio-player-play:focus-visible { outline: none; }
.audio-player-play .icon { font-size: 26px; }
.audio-player-controls { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; }
.audio-player-time { flex: none; min-width: 40px; color: var(--sub); font-size: 11px; font-variant-numeric: tabular-nums; }
#audio-player-current { text-align: right; }
/* 再生位置の線：進んだ分を雲の白で塗る。触れるとつまみが出る */
.audio-player-range { --h: 4px; -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 16px; margin: 0; background: transparent; cursor: pointer; }
.audio-player-range::-webkit-slider-runnable-track { height: var(--h); border-radius: 99px; background: linear-gradient(to right, var(--ink) var(--p, 0%), rgba(188, 204, 223, .22) var(--p, 0%)); }
.audio-player-range::-moz-range-track { height: var(--h); border-radius: 99px; background: linear-gradient(to right, var(--ink) var(--p, 0%), rgba(188, 204, 223, .22) var(--p, 0%)); }
.audio-player-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity var(--speed); }
.audio-player-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity var(--speed); }
.audio-player-range:hover::-webkit-slider-thumb, .audio-player-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.audio-player-range:hover::-moz-range-thumb, .audio-player-range:focus-visible::-moz-range-thumb { opacity: 1; }

/* 右：速度・消音・共有・すべての回・閉じる。小さな記号を右に寄せる */
.audio-player-tools { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.audio-player-tool { height: 32px; min-width: 32px; padding: 0 6px !important; display: grid; place-items: center; border-radius: 6px; color: var(--sub); transition: color var(--speed); }
.audio-player-tool:hover, .audio-player-tool:focus-visible { color: var(--ink); }
.audio-player-tool.is-on { color: var(--ink); }
.audio-player-tool .icon { font-size: 20px; }
.audio-player-speed-num { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* 全画面：Spotify の再生中の画面のように、下のバーはそのまま、上いっぱいに角の丸い面を出す。
   面の地はカバーの空の青から少し沈めた青へ。下のバー（深い青）とは色を分け、境目がわかるようにする。カバーは影を落とした板のように置き、マウスでわずかに傾く。開くときはふわっと広がる */
.audio-player-stage { display: none; }
.audio-player.is-full { top: 0; z-index: 60; height: 100dvh; grid-template-rows: minmax(0, 1fr) 88px; align-items: center; padding-top: 0; background: var(--deep); }
.audio-player.is-full .audio-player-stage { grid-column: 1 / -1; display: flex; flex-direction: column; align-self: stretch; min-height: 0; margin: 8px -12px 0; padding: 24px 32px 48px; overflow-y: auto; overscroll-behavior: contain; border-radius: 10px; background: linear-gradient(180deg, #3d5d8a 0%, #33507a 50%, #2a4264 100%); scrollbar-width: thin; scrollbar-color: rgba(233, 239, 247, .25) transparent; }
/* 下のバーは全画面でも通常時と同じ（小さなカバーも残す）。スマホだけはカバーが上に移るので隠す（下の @media） */
/* 広がる・閉じる：対応しているブラウザでは、下のバーが画面いっぱいへ伸び、小さなカバーと題名がそのまま大きな位置へ移る（View Transitions）。
   対応していないブラウザでは、面とカバーがふわっと出る */
.audio-player { view-transition-name: ap-panel; }
.audio-player-cover { view-transition-name: ap-cover; }
.audio-player-title { view-transition-name: ap-title; }
::view-transition-group(ap-panel), ::view-transition-group(ap-cover), ::view-transition-group(ap-title) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(ap-title), ::view-transition-new(ap-title) { height: 100%; object-fit: none; object-position: left top; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
.no-vt .audio-player.is-full .audio-player-stage { animation: stage-in .45s var(--ease-out); }
.no-vt .audio-player.is-full .ap-full-art { animation: art-in .6s var(--ease-out); }
/* PC の開閉は app.js が動かすので、CSS の出方は止める */
.audio-player.anim-js .audio-player-stage, .audio-player.anim-js .ap-full-art { animation: none !important; }
@keyframes stage-in { from { opacity: 0; translate: 0 24px; } }
@keyframes art-in { from { opacity: 0; scale: .94; } }
.ap-full-show { font-size: 15px; font-weight: 700; color: var(--ink); }
.ap-full-art { --rx: 0deg; --ry: 0deg; --gx: 30%; --gy: 20%; position: relative; width: min(60vh, 640px, 100%); flex: none; aspect-ratio: 1; margin: auto; perspective: 1600px; }
.audio-player-big, .ap-full-glare { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; transform: rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform; }
.audio-player-big { object-fit: cover; box-shadow: 0 24px 56px rgba(6, 12, 22, .45), 0 6px 16px rgba(6, 12, 22, .25); }
/* 表面の光：マウスのある側が明るくなる */
.ap-full-glare { pointer-events: none; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%); mix-blend-mode: soft-light; }
body.player-full { overflow: hidden; }
/* お便りの切手は、バーの上に逃がす */
.audio-player:not([hidden]) ~ .letter-fab.show { bottom: calc(var(--bar-h) + 16px); }

/* スマホ：左にカバーと題名、右に再生と閉じるだけ。再生位置はバーの上端に細い線で */
@media (max-width: 760px) {
  body.player-open { --bar-h: 72px; }
  .audio-player { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; height: auto; min-height: 72px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) 10px; }
  .audio-player-cover { width: 44px; height: 44px; }
  .audio-player-now { gap: 10px; }
  .audio-player-title { font-size: 13px; }
  .audio-player-meta { font-size: 11px; }
  .audio-player-center { display: contents; }
  .audio-player-actions { gap: 4px; }
  .audio-player-skip:not(.audio-player-next) { display: none; }
  .audio-player-controls { position: absolute; left: 0; right: 0; top: -6px; max-width: none; }
  .audio-player-time { display: none; }
  .audio-player-range { --h: 3px; height: 12px; }
  .audio-player-range::-webkit-slider-thumb { opacity: 1; width: 10px; height: 10px; margin-top: -3.5px; }
  .audio-player-range::-moz-range-thumb { opacity: 1; width: 10px; height: 10px; }
  .audio-player-tools .audio-player-tool:not(.audio-player-close):not(#audio-player-full) { display: none; }
  /* スマホの全画面：カバー、題名、再生位置、操作を上から並べる */
  /* スマホの全画面：縮小と×は上端に固定。カバーから操作までを一つのまとまりにして縦の真ん中へ。上下の空きは 上:下 = 2:3。
     操作は「速度・10秒戻る・再生・30秒進む・次の回」の5等分で、再生がちょうど画面の真ん中に来る。
     左右の端は 24px でそろえる。面は分けず、画面全体を同じ地で塗る */
  .audio-player.is-full { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 52px minmax(0, 2fr) auto auto auto auto minmax(0, 3fr); align-content: stretch; gap: 0; padding: env(safe-area-inset-top) 24px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #3d5d8a 0%, #2c4468 45%, var(--deep) 100%); }
  .audio-player.is-full .audio-player-cover { display: none; view-transition-name: none; }
  .audio-player.is-full .audio-player-big { view-transition-name: ap-cover; }
  .audio-player.is-full .audio-player-stage, .audio-player.is-full .audio-player-tools, .audio-player.is-full .audio-player-center, .audio-player.is-full .audio-player-actions { display: contents; }
  .audio-player:not(.is-full) .audio-player-now { cursor: pointer; }
  .audio-player.is-full .ap-full-show { display: none; }
  .audio-player.is-full #audio-player-full { grid-row: 1; grid-column: 1; justify-self: start; align-self: center; margin-left: -6px; }
  .audio-player.is-full .audio-player-close { grid-row: 1; grid-column: 5; justify-self: end; align-self: center; margin-right: -6px; }
  .audio-player.is-full .ap-full-art { grid-row: 3; grid-column: 1 / -1; width: min(100%, calc(100dvh - 400px)); margin: 0 auto; }
  .audio-player.is-full .audio-player-now { grid-row: 4; grid-column: 1 / -1; margin-top: 20px; }
  /* 題名は文節で折り返して3行まで。超えるときだけ末尾を…に */
  .audio-player.is-full .audio-player-title { font-size: 20px; line-height: 1.45; white-space: normal; word-break: auto-phrase; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .audio-player.is-full .audio-player-meta { margin-top: 6px; font-size: 13px; }
  /* 再生位置：線を端から端まで。時間はその下の左右に */
  .audio-player.is-full .audio-player-controls { position: static; grid-row: 5; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 0; margin-top: 22px; }
  .audio-player.is-full .audio-player-range { grid-row: 1; grid-column: 1 / -1; }
  .audio-player.is-full .audio-player-time { display: block; min-width: 0; font-size: 12px; }
  .audio-player.is-full #audio-player-current { grid-row: 2; grid-column: 1; text-align: left; }
  .audio-player.is-full #audio-player-duration { grid-row: 2; grid-column: 2; text-align: right; }
  /* 操作の5つ：それぞれの列の真ん中に置く */
  .audio-player.is-full .audio-player-tools #audio-player-speed { display: grid; grid-row: 6; grid-column: 1; justify-self: center; align-self: center; margin-top: 14px; }
  .audio-player.is-full #audio-player-back { grid-row: 6; grid-column: 2; }
  .audio-player.is-full #audio-player-play { grid-row: 6; grid-column: 3; }
  .audio-player.is-full #audio-player-forward { grid-row: 6; grid-column: 4; }
  .audio-player.is-full #audio-player-next { grid-row: 6; grid-column: 5; }
  .audio-player.is-full .audio-player-skip, .audio-player.is-full .audio-player-play { justify-self: center; align-self: center; margin-top: 14px; }
  .audio-player.is-full .audio-player-skip { display: grid; width: 48px; height: 48px; }
  .audio-player.is-full .audio-player-skip .icon { font-size: 30px; }
  .audio-player.is-full .audio-player-play { width: 64px; height: 64px; }
  .audio-player.is-full .audio-player-play .icon { font-size: 36px; }
}

/* 番組の特徴：見出しと短い文のあとに、3つの特徴（角の丸い写真、見出し、本文、たとえばの回）を3列で。
   最後に、すべての回へのボタン。スマホでは縦に並べる */
.s-features { background: var(--white); padding: clamp(80px, 12vh, 130px) 30px clamp(72px, 10vh, 112px); }
.ft-kicker { font-size: 14px; color: var(--sub); letter-spacing: .04em; }
.ft-title { margin-top: 14px; font-size: clamp(1.9rem, 4.4vw, 3.3rem); font-weight: 700; line-height: 1.35; letter-spacing: .01em; color: var(--ink); }
.ft-title .nb, .ft-lead .nb { display: inline-block; }
.ft-lead { margin-top: 22px; font-size: 15px; line-height: 2; color: var(--sub); }
.ft-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(20px, 3vw, 40px); margin-top: clamp(48px, 7vh, 72px); }
.ft-card { display: flex; flex-direction: column; }
.ft-pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: var(--light); }
.ft-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ft-name { margin-top: 24px; font-size: clamp(1.15rem, 1.6vw, 1.3rem); font-weight: 700; line-height: 1.55; color: var(--ink); }
.ft-name .ph { display: inline-block; }
.ft-text { margin-top: 12px; font-size: 15px; line-height: 1.95; color: var(--sub); word-break: auto-phrase; text-wrap: pretty; }
/* たとえばの回：下にそろえる */
.ft-ex { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; gap: 10px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); }
.ft-card .ft-text { margin-bottom: 20px; }
.ft-ex-label { font-size: 12px; color: var(--sub); white-space: nowrap; }
.ft-ex-title { font-size: 14px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-ex .icon { align-self: center; font-size: 16px; color: var(--sub); transition: translate var(--speed), color var(--speed); }
.ft-ex:hover .ft-ex-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ft-ex:hover .icon { translate: 2px -2px; color: var(--ink); }
.ft-all { display: flex; justify-content: center; margin-top: clamp(56px, 8vh, 80px); }
.btn-more { --fg: var(--ink); --bg: var(--white); min-width: 260px; padding: 14px 32px; border-width: 1px; border-color: var(--line); font-size: 15px; }
.btn-more:hover, .btn-more:focus-visible { border-color: var(--ink); }
@media (max-width: 760px) {
  .s-features { padding-inline: 16px; }
  .ft-title { font-size: 1.6rem; }
  .ft-lead { font-size: 14px; }
  .ft-cards { grid-template-columns: 1fr; gap: 48px; }
  .ft-pic { border-radius: 16px; }
  .ft-name { margin-top: 18px; }
}

/* 3の右：note のマガジン。記事を1件ずつ横に送るスライドショー。指で横に払っても、矢印や下のカバー写真を押しても送れる */
.nt-all { display: flex; justify-content: center; margin-top: 20px; }
.nt-all .btn-more { min-width: 0; width: 100%; }
.nt-all .icon { font-size: 18px; }
.nt-stage { position: relative; }
.nt-track { height: 100%; }
.nt-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--r-win); }
.nt-track::-webkit-scrollbar { display: none; }
.nt-slide { flex: 0 0 100%; display: flex; scroll-snap-align: start; }
/* 左の最新回と同じ形：見出し画像を敷いて暗くし、日付・題名・書いた人を左下に白で置く */
.nt-card { position: relative; display: flex; flex-direction: column; flex: 1; background: var(--black); color: var(--white); border-radius: var(--r-win); border: 1px solid rgba(22, 28, 36, .08); overflow: hidden; }
.nt-pic { position: absolute; inset: 0; display: block; background: var(--black); overflow: hidden; }
.nt-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-std); }
/* note の見出し画像は明るいものが多いので、字のある下側をより暗くする */
.nt-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .4) 70%); }
.nt-card:hover .nt-pic img { transform: scale(1.03); }
.nt-body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; padding: 36px 36px 24px; }
.nt-meta { font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.nt-title { margin-top: 8px; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nt-card:hover .nt-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.nt-foot { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .8); }
/* 矢印はカードの左右の中ほどに重ねる */
.nt-arrow { position: absolute; top: 50%; z-index: 2; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); transition: background var(--speed) var(--ease-std); }
.nt-prev { left: 12px; }
.nt-next { right: 12px; }
.nt-arrow:hover, .nt-arrow:focus-visible { background: var(--white); }
/* 指やマウスで押したあとは輪を出さない（輪のぶん片方の矢印だけ大きく見えるため）。キーボードで操作したときは出す */
.using-pointer :is(.nt-arrow, .nt-thumb):focus-visible { outline: none; }
.nt-arrow .icon { font-size: 22px; }
/* 下に一列に並べるカバー写真。入りきらない分は横にずらして見る。押すとその記事へ。いま出ている記事は濃く、枠をつける */
.nt-thumbs { position: relative; display: flex; gap: 10px; margin-top: 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
.nt-thumbs::-webkit-scrollbar { display: none; }
.nt-thumb { position: relative; flex: none; height: 72px; aspect-ratio: 1280 / 670; scroll-snap-align: start; padding: 0; border: 0; border-radius: var(--r-win); overflow: hidden; background: var(--line); cursor: pointer; opacity: .5; transition: opacity var(--speed) var(--ease-std); }
.nt-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.nt-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--speed) var(--ease-std); }
.nt-thumb:hover, .nt-thumb:focus-visible { opacity: .85; }
.nt-thumb[aria-current="true"] { opacity: 1; }
.nt-thumb[aria-current="true"]::after { box-shadow: inset 0 0 0 2px var(--ink); }
@media (prefers-reduced-motion: reduce) { .nt-track { scroll-behavior: auto; } }

/* 共通の小見出し */
.inner { max-width: 1000px; margin: 0 auto; }
.head { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 600; margin-bottom: 32px; }


/* 3：最新回。いちばん新しい回は写真を敷いて大きく、続く2回は右に小さく */
.s-latest { background: var(--light); padding: clamp(64px, 10vh, 110px) 30px; }
/* 左にポッドキャスト、右に note のマガジン。記事がなければ左だけが横いっぱいになる */
.latest-grid:has(> .latest-note) { max-width: 1200px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); }
/* 左右の大きいカードは同じ高さ */
.latest-grid:has(> .latest-note) .card-main, .latest-grid .nt-stage { height: 360px; min-height: 0; }
/* 右の列は左の列と同じ高さまでのばし、余った高さはカバー写真の帯に回す（写真が大きくなり、入りきらない分は横にずらして見る） */
.latest-grid:has(> .latest-note) .latest-note { display: flex; flex-direction: column; }
.latest-grid:has(> .latest-note) .nt-show { flex: 1; display: flex; flex-direction: column; }
.latest-grid:has(> .latest-note) .nt-thumbs { flex: 1; min-height: 64px; }
.latest-grid:has(> .latest-note) .nt-thumb { height: 100%; }
.latest-grid:has(> .latest-note) .cards { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.latest-grid:has(> .latest-note) .card-main { grid-column: span 2; grid-row: auto; }
.latest-grid:has(> .latest-note) .card-main .card-title { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.4; }
@media (max-width: 960px) {
  .latest-grid:has(> .latest-note) { grid-template-columns: minmax(0, 1fr); gap: 64px; }
}
.cards { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-win); border: 1px solid rgba(22, 28, 36, .08); overflow: hidden; }
.card-title::before { content: ""; position: absolute; inset: 0; }
.card-in { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 24px 24px 20px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.card-title { flex: 1; margin-top: 10px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font-size: 17px; font-weight: 600; line-height: 1.6; }
.card-title { color: inherit; font-family: inherit; }
.card:hover .card-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; font-size: 12px; color: var(--muted); }

.card-main { grid-row: span 2; min-height: 440px; background: var(--black); color: var(--white); }
.card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-std); }
.card-main:hover .card-bg { transform: scale(1.03); }
.card-main::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.card-main .card-in { justify-content: flex-end; padding: 36px; }
.card-main .card-meta, .card-main .card-foot { color: rgba(255, 255, 255, .8); }
.card-main .card-title { flex: 0; margin-top: 14px; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.35; }
.card-main .card-foot { margin-top: 28px; }

/* 5：横に流れる年表（Google「検索の歴史」の動きを、このサイトの白黒で）。点の色＝番組 */
:root { --c-main: #4a6f96; --c-guest: #5f8a6e; --c-fukka: #c4954a; --c-mark: #b5634b; --ink: #161c24; --sub: #6b7480; --line: #d8dee6; }
.s-timeline { position: relative; background: var(--white); }
.kind-main { --c: var(--c-main); } .kind-guest { --c: var(--c-guest); } .kind-fukka { --c: var(--c-fukka); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-sticky { position: relative; display: grid; grid-template-rows: auto 1fr; padding-top: 72px; }
.s-timeline.horizontal .tl-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* 上：今いる月と、何回目まで来たか（左上に大きく） */
.tl-now { display: flex; align-items: baseline; gap: 14px; padding-inline: max(20px, calc((100% - 1000px) / 2)); height: 44px; pointer-events: none; transition: opacity .4s; }
.tl-now-cur { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-block; }
.tl-now-count { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.tl-now.bump .tl-now-cur { animation: nowbump .55s var(--ease-spring); }
@keyframes nowbump { from { transform: translateY(10px) scale(.92); opacity: .2; } }

/* 帯 */
.tl-viewport { position: relative; overflow: hidden; min-height: 420px; }
.s-timeline:not(.horizontal) .tl-viewport { overflow-x: auto; height: 72vh; }
.tl-track { position: relative; height: 100%; width: max-content; will-change: transform; --vx: 0; --af: 0; }
/* 線の位置を測る間（帯の transform を外したとき）だけ、回の中の揺れを止める。回そのものの上下のずれは残す */
.tl-track[style*="none"] .tl-item *, .tl-track[style*="none"] .tl-intro * { transform: none !important; rotate: none !important; }
.tl-items { display: flex; align-items: center; gap: 84px; height: 100%; }
.tl-line { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.tl-line path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* 入口：問いを丸で囲む。スクロールし始めると、線がこの丸を描いてから年表へ伸びる */
.tl-intro { flex: none; width: 100vw; display: flex; align-items: center; justify-content: center; gap: clamp(32px, 7vw, 120px); padding-inline: 30px; }
.tl-intro-text { max-width: 420px; transform: translate3d(calc(var(--mx, 0) * -4px + var(--vx, 0) * -8px), calc(var(--my, 0) * -3px), 0); }
.tl-intro-title { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; color: var(--ink); }
.tl-intro-sub { margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--sub); }
.tl-ring { flex: none; width: clamp(170px, 18vw, 230px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; }
.tl-ring p { font-size: clamp(.95rem, 1.3vw, 1.1rem); font-weight: 600; line-height: 1.6; color: var(--ink); transform: translate3d(calc(var(--mx, 0) * 5px + var(--vx, 0) * -5px), calc(var(--my, 0) * 5px + var(--af, 0) * 2.5px), 0); }
.tl-line .tl-ghost { stroke: var(--line); stroke-dasharray: 2 6; }
.tl-arrow { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.tl-arrow.on { opacity: 1; }

/* 最後：矢印の先に一言。色の点を散らす */
.tl-end { width: 100vw; height: 100%; display: flex; align-items: center; justify-content: center; padding-inline: 30px; transform: none; }
.tl-end-anchor { position: absolute; left: calc(50% - min(400px, 42vw)); top: 50%; width: 1px; height: 1px; }
.tl-end-body { position: relative; z-index: 1; max-width: 680px; text-align: center; transform: translate3d(calc(var(--mx, 0) * 4px + var(--vx, 0) * -10px), calc(var(--my, 0) * 4px + var(--af, 0) * 2px), 0); }
.tl-end-title { font-size: clamp(2.2rem, 5.2vw, 4.4rem); font-weight: 600; color: var(--ink); letter-spacing: .02em; white-space: nowrap; }
.tl-end-text { margin-top: 20px; font-size: 15px; line-height: 2; color: var(--sub); }
.tl-end-text a { color: var(--ink); font-weight: 600; border-bottom: 1px solid currentColor; }
.c-main { --c: var(--c-main); } .c-guest { --c: var(--c-guest); } .c-fukka { --c: var(--c-fukka); } .c-mark { --c: var(--c-mark); }

/* 出来事：右から近づくと浮かび上がる */
.tl-item { position: relative; flex: none; transform: translateY(calc(var(--y) * 13vh)); --rel: 0; --w: 0; }
/* 線が届いたら、点がばねで弾んで出てから、見出し → 日付 → 写真 の順に 0.1 秒ずつずらして出す */
.js .tl-item .tl-dot { opacity: 0; scale: 0; transition: opacity .25s var(--ease-out), scale .55s var(--ease-spring), background-color var(--speed), transform .35s var(--ease-spring); }
.js .tl-item :is(.tl-mark, .tl-title, .tl-mname) { opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease-out) .08s, translate .75s var(--ease-out) .08s; }
.js .tl-item :is(.tl-meta, .tl-go) { opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease-out) .16s, translate .75s var(--ease-out) .16s, background-color var(--speed), border-color var(--speed), color var(--speed); }
.js .tl-item .tl-photo { opacity: 0; scale: .92; translate: 0 32px; transition: opacity .75s var(--ease-out) .14s, scale .85s var(--ease-spring) .14s, translate .8s var(--ease-out) .14s, rotate .5s var(--ease-std); }
.js .tl-item:not(.is-in) { pointer-events: none; }
.js .tl-item.is-in :is(.tl-dot, .tl-mark, .tl-title, .tl-mname, .tl-meta, .tl-go, .tl-photo) { opacity: 1; scale: 1; translate: 0 0; }
.js .tl-end { opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease-out), translate .75s var(--ease-out); }
.js .tl-end.is-in { opacity: 1; translate: 0 0; }

/* スクロールで画面の下から 15% 入ったところで、28px 浮かび上がる。--i で 0.1 秒ずつずらす */
.js [data-reveal] { opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease-out) calc(var(--i, 0) * .1s), translate .75s var(--ease-out) calc(var(--i, 0) * .1s); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
.tl-ep { width: 236px; }
/* 点（17.5px, 22.5px）は線の上に固定したまま、スクロールの加減速（--vx）とマウスの漂い（--mx/--my）と呼吸（--w）でカードが揺れる */
.tl-card { display: grid; grid-template-columns: 10px minmax(0, 1fr) 32px; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: transparent; color: var(--ink); transform-origin: 17.5px 22.5px; }
.tl-card { width: 100%; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
.tl-ep .tl-dot { width: 11px; height: 11px; margin-top: 7px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--c); }
.tl-text { display: block; transform: translate3d(calc(var(--mx, 0) * 3.5px + var(--vx, 0) * -9px + var(--rel, 0) * -5px), calc(var(--my, 0) * 3.5px + var(--vx, 0) * 2.5px + var(--w, 0) * 2.5px), 0); }
.tl-mark { display: block; font-size: 11px; font-weight: 700; color: var(--c-mark); margin-bottom: 2px; }
.tl-title { display: block; font-size: 16px; font-weight: 500; line-height: 1.45; }
.tl-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.tl-go { width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: var(--white); color: var(--ink); transform: translate3d(calc(var(--mx, 0) * 5px + var(--vx, 0) * -12px + var(--rel, 0) * -7px), calc(var(--my, 0) * 5px + var(--vx, 0) * 3.5px + var(--w, 0) * 3px), 0); }
.tl-go .icon { font-size: 20px; }
.tl-card:hover .tl-go, .tl-card:focus-visible .tl-go { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tl-card:hover .tl-dot, .tl-card:focus-visible .tl-dot { background: var(--c); transform: scale(1.35); }

/* ホバー：背景を薄く敷くだけ */
.tl-card { transition: background-color var(--speed); }
.tl-card:hover, .tl-card:focus-visible { background: var(--light); }
.tl-card:hover .tl-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tl-card.is-playing .tl-go { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tl-go .i-pause, .tl-card.is-playing .tl-go .i-play { display: none; }
.tl-card.is-playing .tl-go .i-pause { display: inline-block; }

/* 月の区切り：写真のカード。画面内の位置による視差（--rel）とスクロール速度の揺れ（--vx）とマウスの漂い（--mx/--my）を重ねる */
.tl-month { width: auto; }
.tl-month .tl-dot { position: absolute; left: 4px; top: 13px; width: 13px; height: 13px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--ink); }
.tl-mname { display: inline-flex; align-items: baseline; gap: 8px; margin-left: 28px; padding: 5px 15px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; transform: translate3d(calc(var(--mx, 0) * 3.5px + var(--vx, 0) * -7px + var(--rel, 0) * -6px), calc(var(--my, 0) * 3.5px + var(--w, 0) * -1.8px), 0); }
.tl-mname span { font-size: 12px; font-weight: 500; opacity: .75; }
.tl-photo { margin-top: 14px; padding: 6px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--white); overflow: hidden; transform-origin: 20px 0; transform: translate3d(calc(var(--mx, 0) * -8px + var(--rel, 0) * -18px + var(--vx, 0) * -15px), calc(var(--my, 0) * -8px + var(--vx, 0) * 5px + var(--w, 0) * 3.2px), 0); }
.tl-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; transform: scale(1.06) translate3d(calc(var(--rel, 0) * 9px + var(--vx, 0) * 5px + var(--mx, 0) * 3px), calc(var(--my, 0) * 3px), 0); }
.tl-month:hover .tl-photo { rotate: -1.4deg; }
/* マウスに合わせた漂い（横の年表の中だけ。app.js が --mx / --my を -1〜+1 で動かす）。数字は最大の移動量。
   手前（文字・枠）はマウスと同じ向き、奥（写真）は逆向きに動かして奥行きを出す。transform だけを使い、
   スクロールで出る動き（translate / scale）とは別の性質なので重ならない。transform には transition を付けない */
.drift { --mx: 0; --my: 0; }

.tl-now.out { opacity: 0; }

.tl-ep.flash .tl-card { animation: flash 1.6s var(--ease-std); }
@keyframes flash { 0%, 60% { background: #f2f2f4; } }

/* 最新回のボタン：黒い丸の▶ */

/* お便り */
/* お便り：右下に置いた封筒。表に「お便り」と小さな切手、切手の左上に送れるもの（感想・質問・テーマ）の消印。
   少し傾けて置き、触れるとまっすぐ浮いて、ふたが開き便箋が少しのぞく。右からすべり込む */
.letter-fab {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 25;
  display: block; filter: drop-shadow(0 6px 14px rgba(17,22,30,.22));
  opacity: 0; transform: translateX(calc(100% + 60px)) rotate(8deg); pointer-events: none;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .45s var(--ease-std), filter var(--speed);
}
.letter-fab.show { opacity: 1; transform: rotate(-4deg); pointer-events: auto; }
.letter-fab.show:hover { transform: rotate(0deg) translateY(-4px); filter: drop-shadow(0 12px 22px rgba(17,22,30,.3)); }
/* 封筒：奥の面、便箋、手前のポケット（上がV字に切れている）、ふたの順に重ねる。
   ふたの付け根は角ばっているので、開いたときに角がはみ出さないよう、本体も上の角は丸めない */
.letter-env { --w: 168px; --h: 108px; --v: 56%; position: relative; display: block; width: var(--w); height: var(--h); perspective: 400px; }
.letter-env > span { position: absolute; }
.env-back { inset: 0; border-radius: 0 0 4px 4px; background: #e9dfcd; }
.env-letter {
  left: 10px; right: 10px; top: 8px; height: calc(var(--h) - 20px); z-index: 1; border-radius: 2px; background: #fff;
  background-image: repeating-linear-gradient(transparent 0 13px, rgba(17,22,30,.1) 13px 14px); background-position: 0 10px; background-clip: content-box; padding: 0 12px;
  transition: translate .45s cubic-bezier(.2,.8,.2,1);
}
.env-front { inset: 0; z-index: 2; border-radius: 0 0 4px 4px; background: #f8f3ea; clip-path: polygon(0 0, 50% var(--v), 100% 0, 100% 100%, 0 100%); }
.env-flap {
  left: 0; right: 0; top: 0; height: var(--v); z-index: 3; background: #f1e9da; clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; transition: transform .45s cubic-bezier(.2,.8,.2,1), z-index 0s .18s;
}
.letter-fab.show:not(.rest):hover .env-flap, .letter-fab.peek .env-flap { transform: rotateX(180deg); z-index: 0; }
.letter-fab.show:not(.rest):hover .env-letter, .letter-fab.peek .env-letter { translate: 0 -34%; transition-delay: .12s; }
/* お便りの小窓が開いているあいだ：最前面に重ねた封筒の写し（app.js）。ふたが開き、便箋が大きく出る */
.letter-fab.env-pop { top: auto; left: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; cursor: pointer; }
.letter-fab.env-pop.is-open .env-flap { transform: rotateX(180deg); z-index: 0; }
.letter-fab.env-pop.is-open .env-letter { translate: 0 -58%; transition-delay: 0s; }
/* 送ったあと：便箋は紙飛行機になって飛んでいったので、封筒は空のまま閉じる */
.letter-fab.sent .env-letter { opacity: 0; transition: none; }
/* 切手：右上に小さく。ふちはミシン目（丸い穴をならべて抜く。中身は content-box で抜かない） */
.letter-stamp {
  --hole: 2.5px; --step: 7px;
  top: 9px; right: 10px; z-index: 4; display: block; padding: 4px; background: var(--white);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, #0000 var(--hole), #000 calc(var(--hole) + .5px)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step) round;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, #0000 var(--hole), #000 calc(var(--hole) + .5px)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step) round;
}
.letter-stamp img { display: block; width: 30px; height: 36px; object-fit: cover; }
/* 表書き。字間のぶんだけ右に寄って見えるので、左にも同じだけ足す */
.env-word { left: 0; right: 0; bottom: 14px; z-index: 4; padding-left: .4em; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .4em; line-height: 1; color: var(--black); }
/* 消印：上下に字、まんなかに二本線の帯。切手の左下にかけて押す */
.letter-mark {
  position: absolute; right: 26px; top: 14px; z-index: 5; width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px solid currentColor; color: rgba(17,22,30,.75); background: rgba(248,243,234,.6);
  display: grid; grid-template-rows: 1fr auto 1fr; place-items: center; rotate: -12deg;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; line-height: 1;
}
/* 感想・質問・テーマは同じ大きさ。字間のぶん右に寄って見えるので、左にも同じだけ足す */
.letter-mark > span { padding-left: .06em; }
.letter-mark > span:first-child { align-self: end; padding-bottom: 3px; }
.letter-mark > span:last-child { align-self: start; padding-top: 3px; }
.letter-mark-band { width: 100%; padding: 3px 0; border-block: 1.5px solid currentColor; text-align: center; }
@media (max-width: 760px) {
  .letter-fab { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .letter-env { --w: 128px; --h: 84px; }
  .env-letter { left: 8px; right: 8px; top: 6px; height: calc(var(--h) - 16px); }
  .letter-stamp { top: 7px; right: 8px; padding: 3px; --hole: 2px; --step: 6px; }
  .letter-stamp img { width: 22px; height: 27px; }
  .env-word { bottom: 11px; font-size: 13.5px; }
  .letter-mark { right: 19px; top: 11px; width: 44px; height: 44px; border-width: 1px; font-size: 7px; }
  .letter-mark > span:first-child { padding-bottom: 2px; }
  .letter-mark > span:last-child { padding-top: 2px; }
  .letter-mark-band { padding: 2px 0; border-block-width: 1px; }
}
@media (prefers-reduced-motion: reduce) { .env-flap, .env-letter { transition: none; } }
/* お便りのフォーム：押すとページの中に開く */
.letter-box { width: min(680px, calc(100% - 32px)); height: min(860px, calc(100% - 48px)); max-height: none; padding: 20px 20px 0; border: 0; border-radius: 12px; background: var(--white); color: var(--ink); }
.letter-box[open] { display: flex; flex-direction: column; animation: letter-in .32s cubic-bezier(.2,.8,.2,1); }
.letter-box::backdrop { background: rgba(0,0,0,.5); }
.letter-box[open]::backdrop { animation: fade-in .32s var(--ease-std); }
/* 開くときは少し下から浮かび、閉じるときはすっと下がって消える。閉じるほうを短くする */
.letter-box.closing { animation: letter-out .2s ease-in forwards; pointer-events: none; }
.letter-box.closing::backdrop { animation: fade-out .2s ease-in forwards; }
@keyframes letter-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes letter-out { to { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
/* スマホでは画面いっぱいなので、下からせり上がり、下へ戻る */
@keyframes letter-in-m { from { transform: translateY(100%); } }
@keyframes letter-out-m { to { transform: translateY(100%); } }
/* 送ったあと閉じるとき：小窓が細く折りたたまれて、紙飛行機の形に縮む */
.letter-box.folding { animation: letter-fold .42s cubic-bezier(.5,0,.75,0) forwards; pointer-events: none; }
.letter-box.folding::backdrop { animation: fade-out .42s ease-in forwards; }
@keyframes letter-fold {
  45% { opacity: 1; transform: scale(.55, .4) rotate(-6deg); }
  to { opacity: 0; transform: scale(.06, .14) rotate(-24deg); }
}
/* 紙飛行機：ひと呼吸ためてから、右上へ飛んでいく。飛んでいるあいだは画面を少し暗くする */
.fly-veil { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.35); pointer-events: none; animation: veil 1.8s var(--ease-std) both; }
@keyframes veil { from, to { opacity: 0; } 12%, 78% { opacity: 1; } }
.plane { --size: min(180px, 42vw); position: fixed; z-index: 1001; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2); pointer-events: none; animation: plane-fly 1.3s cubic-bezier(.45,0,.55,1) forwards; }
.plane svg { display: block; width: 100%; height: 100%; }
@keyframes plane-fly {
  0% { opacity: 0; transform: scale(.3) rotate(-20deg); }
  14% { opacity: 1; transform: scale(1.05) rotate(-6deg); }
  30% { transform: translate(-40px, 26px) scale(1) rotate(4deg); }
  to { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(.5) rotate(-4deg); } /* 行き先は app.js が機首の向きから決める */
}
@media (prefers-reduced-motion: reduce) { .letter-box[open], .letter-box[open]::backdrop { animation: none; } }
.letter-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px 14px; }
.letter-title { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 600; }
.letter-frame { flex: 1; width: 100%; border: 0; }
/* 閉じるボタンは、プロフィールの小窓と同じ黒い丸。開いたときに自動でこのボタンに移るフォーカスの輪は、指やマウスで開いたときは出さない */
.ov-close { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--black); color: var(--white); cursor: pointer; display: grid; place-items: center; transition: background var(--speed) var(--ease-std); }
.ov-close .icon { font-size: 20px; }
.ov-close:hover { background: #222; }
.using-pointer .ov-close:focus-visible { outline: none; }
@media (max-width: 760px) {
  .letter-box { width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; padding: 14px 8px 0; }
  .letter-box[open] { animation-name: letter-in-m; animation-duration: .38s; }
  .letter-box.closing { animation-name: letter-out-m; animation-duration: .26s; }
  .letter-box.folding { animation-name: letter-fold; animation-duration: .42s; }
  /* 閉じるボタンはフォームの下、親指の届くところに置く */
  .letter-head { display: contents; }
  .letter-title { padding: 0 4px 14px; }
  .letter-box .ov-close { order: 1; width: 44px; height: 44px; margin: 12px auto max(12px, env(safe-area-inset-bottom)); }
}

/* 5：メンバー */
.s-members { position: relative; background: var(--black); color: var(--white); padding: clamp(72px, 11vh, 120px) 30px; }
/* 横幅は「新しい回」の2カラムとそろえる */
.s-members .inner { max-width: 1200px; }
.persons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.person { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; text-align: left; }
.person img, .person .no-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.person img { transition: transform .6s var(--ease-std), opacity var(--speed); }
.person:hover img { transform: scale(1.02); opacity: .9; }
.no-photo { background: #1a1a1a; }
.person > span:not(.no-photo) { display: block; margin-top: 14px; font-size: 17px; font-weight: 600; }
.person small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.55); }
.person em { display: block; margin-top: 10px; font-style: normal; font-size: 13px; line-height: 1.75; color: rgba(255,255,255,.82); }

.site-footer { background: var(--white); border-top: 1px solid var(--light); padding: 22px max(20px, calc((100% - 1000px) / 2)); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 40px; font-size: 12px; color: var(--muted); }
.foot-note { flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--light); line-height: 1.7; }
.foot-name { font-size: 13px; font-weight: 600; color: var(--black); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-right: auto; font-size: 12px; font-weight: 500; color: var(--accent); }
.foot-links a:hover { color: var(--black); }

/* ツールチップ：記号だけのボタンの名前（app.js が出す） */
/* Google のツールチップと同じ形：ボタンの下に、グレーの無地の小さな札。影もぼかしもつけない */
.tip { position: fixed; z-index: 1000; max-width: min(240px, calc(100vw - 16px)); padding: 4px 8px; border-radius: 4px; background: #3c4043; color: #fff; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .02em; pointer-events: none; opacity: 0; transition: opacity .15s var(--ease-std); }
.tip.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }

/* 小窓 */
.modal { width: min(620px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 44px 40px 36px; border: 0; border-radius: 12px; background: var(--white); color: var(--black); }
.modal::backdrop { background: rgba(0,0,0,.6); }
.modal[open] { animation: pop .3s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--black); color: var(--white); cursor: pointer; display: grid; place-items: center; }
.modal-close .icon { font-size: 20px; }
.modal-close:hover { background: #222; }
.modal-kicker { font-size: 12px; color: var(--muted); letter-spacing: .06em; padding-right: 48px; }
.modal-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.45; margin-top: 10px; padding-right: 40px; }
.modal-who { font-size: 13px; margin-top: 8px; color: var(--accent); }
.modal-text { margin-top: 18px; font-size: 14px; line-height: 1.9; }
.btn-dark, .modal .actions .btn { --fg: var(--black); --bg: var(--white); }
.modal .actions .btn-line { background: transparent; color: var(--black); border: 1px solid var(--black); display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.modal .actions .btn-line:hover { background: var(--black); color: var(--white); }
.modal-photo { width: calc(100% + 80px); margin: -44px -40px 28px; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; }
.mini-list { margin-top: 18px; }
.mini-list li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 32px; gap: 14px; align-items: center; padding-block: 12px; border-top: 1px solid var(--light); }
.mini-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mini-title { font-size: 14px; font-weight: 600; line-height: 1.6; }
.modal-person { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: start; }
.modal-person img, .modal-person .no-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.modal-person .no-photo { background: var(--light); }
/* 話している人のプロフィールは、写真と文を大きく見せる */
.modal:has(.modal-person) { width: min(920px, calc(100% - 32px)); padding: 56px 56px 52px; }
.modal-person { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; }
.modal-person img, .modal-person .no-photo { border-radius: 10px; }
.modal-person .modal-kicker { font-size: 13px; }
.modal-person .modal-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 12px; }
.modal-person .modal-text { margin-top: 22px; font-size: 16px; line-height: 2; }
.modal-person .actions { margin-top: 36px; }

/* 再生バー */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 10px max(20px, calc((100% - 1000px) / 2)) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--black);
}
.player-embed { min-height: 152px; border-radius: 12px; overflow: hidden; }
/* 埋め込みの角が白く抜けないように、地を透明にして角を丸める */
.player-embed iframe { display: block; border: 0; border-radius: 12px; background: transparent; color-scheme: normal; }
.player-close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #222; color: var(--white); cursor: pointer; display: grid; place-items: center; }
.player-close .icon { font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue, .modal[open] { animation: none !important; }
  .js .tl-item *, .js .tl-end, .js [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; transform: none !important; rotate: none !important; transition: none !important; }
  .person img { transition: none; }
}

@media (max-width: 760px) {
  .s-open { --s: min(80vw, 54vh); }
  .cards { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
  .card-main { grid-row: auto; min-height: 380px; }
  .latest-grid:has(> .latest-note) .cards { grid-template-columns: 1fr; }
  .latest-grid:has(> .latest-note) .card-main { grid-column: auto; }
  .nt-body { padding: 26px 22px; }
  .card-main .card-in { padding: 26px 22px; }
  .tl-ep { width: 210px; }
  .tl-month { width: auto; }
  .tl-item { transform: translateY(calc(var(--y) * 10vh)); }
  .tl-items { gap: 30px; }
  .tl-intro { flex-direction: column; gap: 28px; padding-inline: 20px; }
  .tl-intro-text { text-align: center; }
  .tl-end { padding-inline: 20px; }
  .tl-end-anchor { left: 18%; top: 34%; }
  .tl-end-title { white-space: normal; }
  .s-latest { padding-inline: 16px; }
  .s-history, .s-episodes, .s-members, .s-about { padding-inline: 16px; }
  .persons { grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid-title { font-size: 36px; }
  .modal { padding: 40px 22px 26px; }
  .modal-photo { width: calc(100% + 44px); margin: -40px -22px 24px; }
  /* プロフィール：写真を上いっぱいに、文はその下に */
  .modal:has(.modal-person) { padding: 0; overflow-y: auto; }
  .modal-person { grid-template-columns: 1fr; gap: 0; }
  .modal-person img, .modal-person .no-photo { width: 100%; aspect-ratio: 1; max-height: 48svh; border-radius: 0; object-position: 50% 25%; }
  .modal-person > div { padding: 22px 24px 26px; }
  .modal-person .modal-kicker, .modal-person .modal-title { padding-right: 0; }
  .modal-person .modal-title { margin-top: 4px; }
  .modal-person .modal-text { margin-top: 12px; }
  .modal-person .actions { margin-top: 24px; }
  .modal-person .actions .btn { width: 100%; }
  /* 閉じるボタンは親指の届く下に置く */
  .modal-close { position: static; margin: 24px auto 0; width: 44px; height: 44px; }
  .modal-kicker, .modal-title { padding-right: 0; }
  .modal-person > div { padding-bottom: 0; }
  .modal:has(.modal-person) .modal-close { margin: 22px auto 24px; }
}


/* スマホ：年表は縦に進む。線は左の余白を下へ伸び、回は右に並ぶ。上に今の月、右下に一覧ボタン */
.s-timeline.vertical .tl-sticky { position: static; height: auto; overflow: visible; }
.s-timeline.vertical .tl-viewport { overflow: visible; min-height: 0; height: auto; }
.s-timeline.vertical .tl-track { width: auto; height: auto; }
.s-timeline.vertical .tl-items { flex-direction: column; align-items: stretch; gap: 30px; height: auto; padding: 0 16px 0 52px; }
.s-timeline.vertical .tl-item { transform: none; }
.s-timeline.vertical .tl-item :is(.tl-text, .tl-go, .tl-mname, .tl-photo) { transform: none; }
.s-timeline.vertical .tl-ep { width: auto; }
.s-timeline.vertical .tl-intro { margin: 0 -16px 10px -52px; padding: 48px 20px 64px; }
.s-timeline.vertical .tl-end { height: auto; min-height: 72svh; margin: 20px -16px 0 -52px; }
.s-timeline.vertical .tl-end-anchor { left: 24px; top: 0; }
.s-timeline.vertical .tl-now { position: sticky; top: 0; z-index: 6; height: 52px; align-items: center; background: var(--white); padding-inline: 16px; }


/* 回ごとのページ（/episodes/{id}/）とすべての回（/episodes/）。トップと同じ白地・文字色・ボタン。
   左右の幅はフッターと同じ（最大1000px）。長い文章だけ読みやすい幅で折り返す */
.ep-head { padding: 22px max(20px, calc((100% - 1000px) / 2)); border-bottom: 1px solid var(--light); }
.ep-home { font-size: 15px; font-weight: 600; color: var(--black); font-feature-settings: normal; }
.ep-home:hover, .ep-home:focus-visible { color: var(--muted); }
.ep-page { padding: 64px max(20px, calc((100% - 1000px) / 2)) 96px; color: var(--ink); }
.ep-title { max-width: 860px; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 600; line-height: 1.4; }
.ep-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 24px 0 0; font-size: 14px; }
.ep-meta div { display: flex; gap: 8px; }
.ep-meta dt { color: var(--sub); }
.ep-meta dd { margin: 0; }
.ep-summary { max-width: 760px; margin-top: 36px; font-size: 16px; line-height: 2; }
.ep-actions { margin-top: 40px; }
.ep-actions .btn .icon { font-size: 22px; }
.ep-listen { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-size: 14px; }
.ep-listen a, .ep-sns a { color: var(--sub); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ep-listen a:hover, .ep-listen a:focus-visible, .ep-sns a:hover, .ep-sns a:focus-visible { color: var(--ink); }
.ep-about { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.9; }
.ep-about h2 { margin-top: 28px; font-size: 13px; font-weight: 600; color: var(--sub); }
.ep-about h2:first-child { margin-top: 0; }
.ep-about p, .ep-sns { margin-top: 8px; }
.ep-about p { max-width: 760px; }
.ep-sns li { display: flex; flex-wrap: wrap; gap: 0 12px; }
.ep-sns span { min-width: 8em; }
.ep-sns a { overflow-wrap: anywhere; }
.ep-transcript { margin-top: 8px; }
.ep-transcript summary { display: inline; list-style: none; font-size: 14px; color: var(--sub); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ep-transcript summary::-webkit-details-marker { display: none; }
.ep-transcript summary:hover, .ep-transcript summary:focus-visible { color: var(--ink); }
.ep-transcript[open] summary { display: none; }
.ep-transcript-body { max-width: 760px; font-size: 13px; line-height: 1.9; color: var(--sub); }
.ep-about .ep-transcript-body p { margin-top: 0; }
.ep-about .ep-transcript-body p + p { margin-top: .8em; }
.ep-transcript-note { font-weight: 600; }
.ep-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); }
.ep-nav a { display: block; font-size: 15px; font-weight: 500; line-height: 1.6; }
.ep-nav a span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 400; color: var(--sub); }
.ep-nav a:hover, .ep-nav a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ep-next { grid-column: 2; text-align: right; }
.ep-all { grid-column: 1 / -1; margin-top: 16px; font-size: 14px !important; }
.ep-prev + .ep-all, .ep-next + .ep-all { margin-top: 16px; }
.lt-kinds { display: grid; gap: 14px; max-width: 760px; margin-top: 32px; font-size: 15px; line-height: 1.8; }
.lt-kinds div { display: flex; gap: 16px; }
.lt-kinds dt { flex: none; width: 4em; font-weight: 600; }
.lt-kinds dd { margin: 0; color: var(--sub); }
.lt-form { display: block; width: 100%; max-width: 760px; height: 1500px; margin-top: 48px; border: 0; }
/* 埋め込みのフォームは中の高さを測れないので、狭い画面では折り返す分だけ高くする */
@media (max-width: 760px) { .lt-kinds div { gap: 10px; } .lt-form { height: 2100px; margin-top: 36px; } }
.el-count { margin-top: 12px; font-size: 14px; color: var(--sub); }
.el-month { margin-top: 56px; }
.el-month h2 { padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.el-list li { border-bottom: 1px solid var(--light); }
.el-list a { display: block; padding: 16px 0 16px 18px; position: relative; }
.el-list a::before { content: ""; position: absolute; left: 0; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.el-meta { display: block; font-size: 12px; color: var(--sub); }
.el-title { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; line-height: 1.6; }
.el-list a:hover .el-title, .el-list a:focus-visible .el-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 760px) {
  .ep-page { padding-top: 40px; }
  .ep-nav { grid-template-columns: 1fr; }
  .ep-next { grid-column: auto; text-align: left; }
}