/* Data is CITY Media の見た目の決まり（docs/dataiscity/design.md に考え方）。
   書体は和文 Noto Sans JP・欧文 IBM Plex Mono の 2 つだけ（どちらも Web フォント）。
   記事は白地。黒は映像（トップの一番上・映像の記事の表紙）だけ。色は白・黒・灰に、要の所の赤（--red）を少し。色を持つのは画だけ
   左端はひとつ：.wrap の左（頭の帯・題・画・本文・図がすべてここから始まる）。端まで広げる画（.ch-bleed）だけが例外 */
:root {
  --paper: #ffffff;
  --ink: #0f1114;     /* 本文・見出し（濃い黒） */
  --ink-2: #353b43;   /* リード・説明 */
  --ink-3: #636a73;   /* 日付・注記（白地で 5.5:1） */
  --rule: #dfe2e6;    /* 細い罫 */
  --tint: #f3f4f6;    /* 面（断り・編集部注・登録の区画・読み上げ中の段落） */
  --night: #0c0d10;   /* 映像 */
  --night-2: #17191d;
  --night-ink: #eef0f3;
  --night-sub: #a3a9b2;
  --night-rule: #2b2e34;
  --red: #e5383b;

  --jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --mono: "IBM Plex Mono", "Noto Sans JP", ui-monospace, monospace;

  /* 文字の大きさ（狭い画面 → 広い画面）。大見出し 800・節の見出し 700・話し手 700 の小さめ、で階層を分ける */
  --fs-display: clamp(30px, 4.8vw, 58px);
  --fs-h2: clamp(22px, 2.3vw, 27px);
  --fs-pull: clamp(21px, 2.4vw, 28px);
  --fs-lead: clamp(17px, 1.6vw, 19px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-label: 13px;

  /* 余白：8 の倍数 */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --gut: clamp(20px, 5vw, 56px);
  --wrap: 1080px;     /* 頭の帯・題・画・図の幅。左端の基準 */
  --measure: 680px;   /* 本文の幅（18px で 1 行 37 字ほど）。左端は .wrap と同じ */
}
@media (min-width: 768px) { :root { --fs-body: 18px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--jp); font-size: var(--fs-body); line-height: 2; font-weight: 400; -webkit-font-smoothing: antialiased; line-break: strict; overflow-wrap: break-word; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-feature-settings: "palt" 1; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.vh, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gut); top: -60px; background: var(--ink); color: #fff; padding: 8px 14px; font-size: 14px; z-index: 50; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.i { width: 1em; height: 1em; flex: none; }
.tc { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* ---------- 左端の基準 ---------- */
.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); }
/* 本文の区画：中身は本文の幅。図（.w）は .wrap いっぱい。どちらも左端は同じ */
.prose > :not(.w):not(.prose):not(.dialogue) { max-width: var(--measure); }

/* ---------- 頭の帯（マストヘッド） ---------- */
.mh { border-bottom: 1px solid var(--rule); background: var(--paper); }
.mh-in { height: 64px; display: flex; align-items: center; gap: var(--s3); }
.mh-name { margin: 0; line-height: 0; font-size: 0; }
.mh-name a { display: inline-block; }
/* 「Teleport / Data is CITY」：ロゴは高さで合わせる。区切りの / は細い灰 */
.lockup { display: flex; align-items: center; gap: 0; white-space: nowrap; }
.lockup a { display: inline-flex; align-items: center; }
.logo-tp { height: 17px; width: auto; }
.lk-sep { font-family: var(--jp); font-weight: 300; font-size: 26px; line-height: 1; color: #a9aeb6; margin: 0 12px; transform: translateY(-1px); }
.mh-dark .logo-tp { filter: brightness(0) invert(1); }
.mh-dark .lk-sep { color: #5a5f68; }
.logo { height: 20px; width: auto; }
.mh-tag { font-size: var(--fs-label); color: var(--ink-3); letter-spacing: .04em; padding-left: var(--s3); border-left: 1px solid var(--rule); line-height: 1.4; }
.mh-nav { margin-left: auto; display: flex; gap: var(--s3); font-size: 14px; line-height: 1; }
.mh-nav a { text-decoration: none; color: var(--ink-2); padding: 6px 0; }
.mh-nav a:hover { color: var(--ink); }
.mh-nav .mh-join { color: var(--ink); font-weight: 700; border-bottom: 1.5px solid var(--ink); }
.mh-home .mh-in { height: 72px; }
.mh-home .logo { height: 24px; }
.mh-home .logo-tp { height: 20px; }
.mh-home .lk-sep { font-size: 30px; }
.mh-dark { background: var(--night); border-bottom-color: var(--night-rule); color: var(--night-ink); }
.mh-dark .logo-inline { height: 20px; width: auto; color: #fff; }
.mh-dark .mh-tag { color: var(--night-sub); border-left-color: var(--night-rule); }
.mh-dark .mh-nav a { color: var(--night-sub); }
.mh-dark .mh-nav a:hover, .mh-dark .mh-nav .mh-join { color: #fff; }
.mh-dark .mh-nav .mh-join { border-bottom-color: #fff; }
@media (max-width: 900px) {
  .mh-tag { display: none; }
  .mh-nav a:not(.mh-join) { display: none; }
  .mh-in, .mh-home .mh-in { height: 56px; gap: 12px; }
  .logo, .mh-dark .logo-inline, .mh-home .logo { height: 16px; }
  .logo-tp, .mh-home .logo-tp { height: 13px; }
  .lk-sep, .mh-home .lk-sep { font-size: 20px; margin: 0 8px; }
  .mh-nav { font-size: 13px; }
}
@media (max-width: 380px) { .logo, .mh-dark .logo-inline, .mh-home .logo { height: 14px; } .logo-tp, .mh-home .logo-tp { height: 11.5px; } .lk-sep, .mh-home .lk-sep { margin: 0 6px; } .mh-nav { font-size: 12px; } }

/* ---------- 種類と日付・テレポートの取り組み ---------- */
.kl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--fs-label); line-height: 1.2; color: var(--ink-3); }
.kind { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); letter-spacing: .06em; font-size: 14px; }
.roof { width: 16px; height: 16px; }
.kl time { font-family: var(--mono); letter-spacing: .02em; }
.kl-dark { color: var(--night-sub); }
.kl-dark .kind { color: var(--night-ink); }
.tp { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .04em; color: var(--ink); border: 1px solid var(--ink); padding: 5px 8px 4px; white-space: nowrap; }
.kl-dark .tp { color: var(--night-ink); border-color: var(--night-sub); }

/* ---------- 区画の見出し ---------- */
.sec-h { font-size: 21px; font-weight: 800; line-height: 1.4; padding-top: 14px; border-top: 2px solid var(--ink); margin-bottom: var(--s4); letter-spacing: .02em; }

/* ---------- 仮の画（画が届くまで） ---------- */
.ph { width: 100%; height: 100%; }

/* ---------- 映像の画面と大きな再生（トップの一番上・映像の記事の表紙） ---------- */
.screen { position: relative; aspect-ratio: 16 / 9; background: var(--night-2); overflow: hidden; }
/* 開いてすぐ再生が見えるように、画面の高さを窓の高さに合わせて抑える（左端はそのまま） */
.hero .screen, .film-cover .screen { width: min(100%, max(560px, calc((100svh - 330px) * 16 / 9))); }
@media (max-width: 700px) { .hero .screen, .film-cover .screen { width: auto; } }
.screen video { width: 100%; height: 100%; object-fit: cover; }
/* 再生は画面の左下（画の真ん中の絵を隠さない）。画面のどこを押しても始まる */
.screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 13, 16, .72), rgba(12, 13, 16, 0) 42%); pointer-events: none; }
.play-big { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 0 18px; padding: clamp(16px, 3vw, 36px); background: none; border: 0; color: #fff; text-align: left; }
.play-big .pb-text { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.pb-circle { width: clamp(56px, 8vw, 96px); height: clamp(56px, 8vw, 96px); border-radius: 50%; background: #fff; color: var(--night); display: grid; place-items: center; transition: transform .2s ease; box-shadow: 0 6px 30px rgba(0, 0, 0, .3); flex: none; }
.pb-circle .i { width: 42%; height: 42%; margin-left: 6%; }
.play-big:hover .pb-circle { transform: scale(1.06); }
.pb-label { font-weight: 800; font-size: clamp(17px, 2vw, 24px); letter-spacing: .08em; line-height: 1; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.play-big .tc { color: rgba(255, 255, 255, .85); line-height: 1; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
@media (max-width: 600px) { .hero .wrap > .screen, .film-cover .wrap > .screen { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); } }

/* ---------- トップ：一番上は映像 ---------- */
.hero { background: var(--night); color: var(--night-ink); padding-bottom: var(--s5); }
.hero-in { padding-top: var(--s4); padding-bottom: var(--s3); }
.hero-tag { font-size: clamp(15px, 1.5vw, 18px); font-weight: 700; color: var(--night-sub); line-height: 1.7; margin-bottom: var(--s3); padding-bottom: 14px; border-bottom: 1px solid var(--night-rule); word-break: keep-all; overflow-wrap: anywhere; }
.hero-k { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: #fff; }
.hero-k::before { content: ""; width: 24px; height: 2px; background: var(--red); }
.hero-title { font-size: clamp(32px, 4.6vw, 60px); font-weight: 800; line-height: 1.3; margin: var(--s2) 0 12px; letter-spacing: .005em; }
.hero-dek { font-size: clamp(16px, 1.7vw, 20px); color: var(--night-sub); font-weight: 500; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px var(--s3); padding-top: var(--s3); font-size: var(--fs-small); color: var(--night-sub); line-height: 1.6; }
.hero-more, .about-link, .entry-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; line-height: 1.3; }
.hero-more { color: #fff; font-size: 15px; }
.hero-more .i, .about-link .i, .entry-more .i { transition: transform .2s ease; }
.hero-more:hover .i, .about-link:hover .i, .entry-more:hover .i { transform: translateX(4px); }

/* ---------- 記事の一覧 ---------- */
.latest, .next { padding: var(--s7) 0 0; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5) var(--s5); }
.cards-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
@media (max-width: 1000px) { .cards-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards-top .card-l .card-title { font-size: clamp(20px, 1.9vw, 24px); }
@media (max-width: 760px) { .cards-top { grid-template-columns: 1fr; } }
.card a { display: block; text-decoration: none; }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card a:hover .card-media img { transform: scale(1.02); }
.card-text { padding-top: 18px; }
.card-title { font-size: 22px; font-weight: 800; line-height: 1.5; margin: 14px 0 8px; }
.card-l .card-title { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.45; }
.card a:hover .card-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.card-dek { font-size: 15px; line-height: 1.75; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.card-by { margin-top: 10px; font-size: var(--fs-label); color: var(--ink-3); line-height: 1.6; }

/* ---------- Data is CITY について（小さく。編集方針への入口） ---------- */
.about { padding: var(--s7) 0 0; }
.about-in { display: grid; max-width: var(--wrap); grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s4); }
.about-h { font-size: 17px; font-weight: 800; line-height: 1.5; }
.about-body { max-width: var(--measure); font-size: 16px; line-height: 1.9; color: var(--ink-2); }
.about-body p + p { margin-top: 12px; }
.about-link { color: var(--ink); font-size: 15px; }
@media (max-width: 760px) { .about-in { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- 新しい記事をメールで受け取る ---------- */
.join { margin-top: var(--s7); background: var(--tint); }
.join-in { padding-top: var(--s6); padding-bottom: var(--s6); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s5); align-items: start; }
.join-k { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 8px; }
.join-h { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.45; }
.join-lead { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.85; }
.wl-row { display: flex; flex-wrap: wrap; row-gap: 8px; } /* 欄が狭くなるときは、ボタンを下の行に回して、メールの欄を細くしない（平野さん 2026-10-28「テキストフォームが小さい」） */
.wl input[type=email] { flex: 1 1 240px; min-width: 0; height: 54px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid #b9bec5; border-radius: 0; outline: none; }
.wl input[type=email]:focus { border-color: var(--ink); }
.wl button { flex: 1 0 auto; margin-left: -1px; height: 54px; padding: 0 28px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; border-radius: 0; letter-spacing: .04em; }
.wl button:hover { background: #2a2e34; }
.wl button:disabled { opacity: .5; cursor: default; }
.wl-msg { min-height: 1.6em; margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--red); }
.ts:empty { display: none; }
.ts { margin-top: 10px; }
.wl-note { font-size: var(--fs-label); color: var(--ink-3); line-height: 1.8; }
.wl-done[hidden], .wl[hidden] { display: none; }
.wl-done { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); background: #fff; border: 1px solid var(--rule); margin-bottom: var(--s2); outline: none; }
.wl-check { width: 36px; height: 36px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wl-done-title { font-weight: 800; font-size: 18px; line-height: 1.5; }
.wl-done-note { font-size: 14px; line-height: 1.85; color: var(--ink-2); margin-top: 4px; }
.wl-addr { font-weight: 700; color: var(--ink); word-break: break-all; }
@media (max-width: 860px) { .join-in { grid-template-columns: 1fr; gap: var(--s3); padding-top: var(--s5); padding-bottom: var(--s5); } }
@media (max-width: 400px) { .wl button { padding: 0 18px; } }

/* ---------- 足もと ---------- */
.ft { border-top: 1px solid var(--rule); }
.ft-in { padding-top: var(--s5); padding-bottom: var(--s6); display: grid; grid-template-columns: auto 1fr; gap: 10px var(--s4); align-items: center; font-size: var(--fs-label); color: var(--ink-3); line-height: 1.7; }
.ft-name { line-height: 0; }
.ft .logo { height: 18px; }
.ft .logo-tp { height: 15px; }
.ft-name { line-height: 0; font-size: 0; }
.ft-tag { color: var(--ink-2); }
.ft-links { grid-column: 1 / -1; list-style: none; padding: var(--s3) 0 0; margin: var(--s2) 0 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px var(--s4); }
.ft-links a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ft-links a:hover { color: var(--ink); text-decoration: underline; }
.ft-by a { color: var(--ink-2); }
.ft-by, .ft-copy { grid-column: 1 / -1; }
@media (max-width: 600px) { .ft-in { grid-template-columns: 1fr; } }

/* ---------- 記事の共通：頭・画・本文 ---------- */
.a-head { padding-top: var(--s6); }
.a-head > * { max-width: 900px; }
.a-title { font-size: var(--fs-display); font-weight: 800; line-height: 1.36; margin: var(--s3) 0 var(--s2); letter-spacing: .005em; }
.a-dek { font-size: clamp(17px, 1.9vw, 22px); font-weight: 500; line-height: 1.7; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.a-byline { margin-top: var(--s3); font-size: var(--fs-small); color: var(--ink-2); }
.a-by { list-style: none; margin: var(--s4) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 16px var(--s5); }
.a-by li { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; line-height: 1.35; }
.a-by .face { grid-row: 1 / 3; }
.by-name { font-weight: 700; font-size: 17px; align-self: end; }
.by-role { font-size: var(--fs-label); color: var(--ink-3); align-self: start; font-family: var(--mono); }
.a-hero { margin-top: var(--s5); }
.a-hero > img, .a-hero > video, .a-hero > .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tint); }
.feature .a-hero > img, .feature .a-hero > video { aspect-ratio: 16 / 9; }
figcaption { font-size: var(--fs-label); color: var(--ink-3); line-height: 1.7; margin-top: 10px; }
figcaption .ai { display: inline-block; margin-left: 6px; color: var(--ink-3); }
.a-body { padding-top: var(--s5); }
.a-lead p { font-size: var(--fs-lead); line-height: 2.05; margin-bottom: 1.1em; }
.a-lead p:first-child { font-weight: 500; }
.f-lead p { margin-bottom: .7em; }

/* 断り（対話（再構成）の頭） */
.disc { border: 1px solid var(--ink); padding: var(--s3) var(--s3) 20px; margin-bottom: var(--s4); }
.disc-h { font-size: 14px; font-weight: 800; letter-spacing: .06em; margin-bottom: 8px; }
.disc ul { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.85; color: var(--ink); }
.disc li + li { margin-top: 4px; }

/* まず映像を見る（記事の中の入口） */
.entry { margin: 0 0 var(--s5); border-top: 2px solid var(--ink); padding-top: var(--s2); }
.entry-play { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s3); align-items: center; width: 100%; background: none; border: 0; padding: 0; text-align: left; }
.entry-pic { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--night); overflow: hidden; }
.entry-pic img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.entry-pic .pb-circle { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); }
.entry-play:hover .pb-circle { transform: translate(-50%, -50%) scale(1.08); }
.entry-text { display: flex; flex-direction: column; gap: 6px; }
.entry-k { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.entry-k::before { content: ""; width: 18px; height: 2px; background: var(--red); }
.entry-t { font-size: clamp(18px, 2vw, 22px); font-weight: 800; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; font-feature-settings: "palt" 1; }
.entry-m { font-size: var(--fs-label); color: var(--ink-3); line-height: 1.5; }
.entry-play:hover .entry-t { text-decoration: underline; text-underline-offset: 5px; }
.entry-more { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 520px) { .entry-play { grid-template-columns: 120px minmax(0, 1fr); gap: var(--s2); } .entry-pic .pb-circle { width: 40px; height: 40px; } }

/* 目次（対話・特集） */
.atoc { margin: var(--s5) 0 0; }
.atoc-h { font-size: 14px; font-weight: 800; letter-spacing: .08em; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.atoc ol { list-style: none; margin: 0; padding: 0; }
.atoc a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 15px; line-height: 1.65; font-weight: 500; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.atoc a:hover { color: var(--ink); }
.atoc-no { font-family: var(--mono); font-size: 13px; color: var(--ink-3); padding-top: 2px; }

/* 顔（丸） */
.face { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--tint); flex: none; color: var(--ink-2); font-weight: 700; line-height: 1; }
.face img { width: 100%; height: 100%; object-fit: cover; }
.face-s { width: 56px; height: 56px; font-size: 20px; }
.face-l { width: 88px; height: 88px; font-size: 30px; }
.face.is-empty { background: #e7e9ec; border: 1px solid #d5d9de; }

/* 節の見出し：番号（等幅・灰）と題（太字）。大見出しより小さく、話し手の名前より大きく */
.t-sec, .f-sec { margin-top: var(--s7); }
.t-h { margin-bottom: var(--s4); }
.t-h-no { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: .06em; margin-bottom: 10px; line-height: 1; }
.t-h-no::after { content: ""; flex: 0 0 48px; height: 1px; background: var(--ink-3); }
.t-h-t { display: block; font-size: var(--fs-h2); font-weight: 700; line-height: 1.55; }
.f-sec > p:not([class]) { margin-bottom: .7em; }

/* 引き立てる一言：節の頭に、その節の後ろの方にある言葉を置く */
.pull { margin: 0 0 var(--s5); padding: var(--s3) 0 0; border-top: 1px solid var(--ink); position: relative; }
.pull::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 4px; background: var(--red); }
.pull p { font-size: var(--fs-pull); font-weight: 700; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; font-feature-settings: "palt" 1; }
.pull footer { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-3); line-height: 1.6; }

/* 対話：話し手ごとに、大きめの顔と名前 */
.turn { margin-bottom: var(--s4); }
.who { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; line-height: 1; }
.who-name { font-weight: 700; font-size: 17px; letter-spacing: .08em; }
.say { margin: 0 -14px 1.1em; padding: 2px 14px; border-radius: 2px; transition: background-color .25s ease, box-shadow .25s ease; }
.t-fig { margin: var(--s6) 0; }
.t-fig > img, .t-fig > .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tint); }
.is-listening .say { cursor: pointer; }
.is-listening .say:hover { background: var(--tint); }
.say.is-reading { background: var(--tint); box-shadow: inset 3px 0 0 var(--red); }
.fnref { font-size: 11px; line-height: 0; margin-left: 1px; font-family: var(--mono); }
.fnref a { text-decoration: none; color: var(--ink-3); padding: 0 2px; border-bottom: 1px solid var(--ink-3); }
.profs { margin-top: var(--s7); }
.profs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.prof { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s3); }
.prof-name { font-size: 19px; font-weight: 800; line-height: 1.5; }
.prof-name span { display: block; font-size: var(--fs-label); font-weight: 400; color: var(--ink-3); }
.prof p:not(.prof-name) { margin-top: 10px; font-size: 15px; line-height: 1.95; color: var(--ink-2); }
.a-notes { margin-top: var(--s5); padding-top: var(--s2); border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.85; color: var(--ink-2); }
.fns { margin-top: var(--s5); }
.fns ol { list-style: none; margin: 0; padding: 0; }
.fns li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.fn-n { font-family: var(--mono); color: var(--ink-3); }
.fns a { color: var(--ink); text-underline-offset: 3px; }
.fns .fn-back { color: var(--ink-3); font-size: 12px; margin-left: 4px; }
@media (max-width: 480px) { .prof { grid-template-columns: 1fr; gap: 12px; } }

/* 出典（折りたたむ） */
.src { margin-top: var(--s4); border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.75; color: var(--ink-2); }
.src summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 0; font-weight: 700; color: var(--ink); line-height: 1; }
.src summary::-webkit-details-marker { display: none; }
.src-n { font-family: var(--mono); font-weight: 500; color: var(--ink-3); font-size: var(--fs-label); }
.src summary .i { margin-left: auto; width: 18px; height: 18px; transition: transform .2s ease; color: var(--ink-3); }
.src[open] summary .i { transform: rotate(180deg); }
.src ol { margin: 0; padding: 0 0 var(--s2) 1.6em; }
.src li { padding: 0 0 14px; }
.src li::marker { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.src-ref { margin-top: 2px; }
.src-ref a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: #b9bec5; word-break: break-word; }
.src-ref span { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* 編集部注（映像の語りに、限定と補足を足す） */
.ed { margin: var(--s3) 0 var(--s2); padding: 16px 20px; background: var(--tint); border-left: 3px solid var(--ink); }
.ed-h { font-size: 13px; font-weight: 800; letter-spacing: .08em; margin-bottom: 6px; line-height: 1.4; }
.ed ul { margin: 0; padding-left: 1.1em; font-size: 15px; line-height: 1.85; }
.ed li + li { margin-top: 8px; }
.ed-src { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-top: 2px; }
.ed-src a { color: var(--ink-3); text-underline-offset: 2px; }

/* ---------- 映像の記事 ---------- */
.film-cover { background: var(--night); color: var(--night-ink); padding-bottom: var(--s5); }
.film-cover-in { padding-top: var(--s4); padding-bottom: var(--s3); }
.film-title { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; line-height: 1.28; margin: var(--s2) 0 12px; letter-spacing: .005em; }
.film-dek { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.7; color: var(--night-sub); font-weight: 500; max-width: 36em; word-break: keep-all; overflow-wrap: anywhere; }
.film-by { padding-top: var(--s3); font-size: var(--fs-small); color: var(--night-sub); }
.read { padding-top: var(--s6); }
.read-h { font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; line-height: 1.4; padding-top: 14px; border-top: 3px solid var(--ink); }
.film-lead { max-width: var(--measure); margin-top: var(--s3); }
.film-lead p { font-size: var(--fs-lead); line-height: 2.05; margin-bottom: 1em; }
.toc { margin-top: var(--s4); max-width: 820px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.toc a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 52px; gap: var(--s2); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 16px; line-height: 1.65; color: var(--ink); }
.toc a:hover .toc-t { text-decoration: underline; text-underline-offset: 4px; }
.toc-no { font-family: var(--mono); font-size: 15px; color: var(--ink-3); font-weight: 500; }
.toc-t { word-break: keep-all; overflow-wrap: anywhere; }
.toc-tc { font-family: var(--mono); font-size: var(--fs-label); color: var(--ink-3); text-align: right; }
/* 部の扉 */
.part { margin-top: var(--s8); }
.part-no { font-family: var(--mono); font-size: 15px; letter-spacing: .1em; color: var(--ink-3); font-weight: 500; padding-top: var(--s2); border-top: 3px solid var(--ink); }
.part-title { font-size: clamp(30px, 4.4vw, 54px); font-weight: 800; line-height: 1.32; margin-top: 10px; }
/* 場面：画の大きさを 3 つ（端まで・図の幅・図表）に分けて、13 回の同じ組に強弱をつける */
.ch { margin-top: var(--s7); }
.part + .ch { margin-top: var(--s6); }
.ch-shot { margin: 0; }
.ch-wide .ch-shot { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.ch-bleed .ch-shot img, .ch-bleed .ch-shot video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ch-shot video, .ch-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--night-2); }
.ch-text { padding-top: var(--s4); }
.ch-text > * { max-width: var(--measure); }
.ch-k { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: var(--fs-label); line-height: 1.4; color: var(--ink-3); letter-spacing: .04em; }
.ch-no { font-family: var(--mono); font-weight: 500; color: var(--ink); font-size: 30px; letter-spacing: 0; line-height: 1; }
.ch-kick { font-size: 14px; color: var(--ink-2); }
.scen { font-size: 12px; font-weight: 700; color: var(--ink); background: var(--tint); padding: 5px 8px 4px; line-height: 1; }
.tp-note { margin-top: 14px; font-size: 15px; font-weight: 700; line-height: 1.7; padding-left: 12px; border-left: 3px solid var(--red); }
.ch-title { font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; line-height: 1.5; margin: 14px 0 var(--s3); }
.ch-text > p:not([class]) { margin-bottom: 1.2em; }
.ch-watch { margin-top: var(--s3); }
.play-at:not(.play-big):not(.entry-play) { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: left; }
.play-at:not(.play-big):not(.entry-play) > .i { width: 34px; height: 34px; padding: 10px 9px 10px 11px; border-radius: 50%; background: var(--ink); color: #fff; transition: transform .2s ease; }
.play-at:not(.play-big):not(.entry-play):hover > .i { transform: scale(1.08); }
.play-at:not(.play-big):not(.entry-play):hover > span:first-of-type { text-decoration: underline; text-underline-offset: 4px; }
.play-at .tc { color: var(--ink-3); font-weight: 400; }
.film-credit { margin-top: var(--s7); }
.film-credit p { max-width: var(--measure); border-top: 1px solid var(--rule); padding-top: var(--s2); font-size: var(--fs-small); color: var(--ink-3); line-height: 1.85; }
/* 図表（映像の 2 番・4 番を描き直したもの） */
.chart { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.chart-bars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.chart-panel { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.chart-h { font-size: 18px; font-weight: 800; line-height: 1.5; }
.chart-sub { font-size: var(--fs-label); color: var(--ink-3); line-height: 1.6; margin-bottom: var(--s2); }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px; gap: 10px; align-items: center; padding: 3px 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar-t { display: block; height: 16px; }
.bar { display: block; height: 100%; width: calc(var(--v) * 100%); background: #b9bec6; border-radius: 0 4px 4px 0; }
.bars .is-last .bar { background: var(--red); }
.bars .is-last { color: var(--ink); font-weight: 600; }
.bar-v { text-align: right; }
.chart-src { margin-top: var(--s2); font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.chart-src a { color: var(--ink-3); text-underline-offset: 2px; }
@media (max-width: 760px) { .chart-bars { grid-template-columns: 1fr; gap: var(--s4); } }
.chart-time { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.chart-time { max-width: calc(var(--wrap) + 2 * var(--gut)); }
.ch-chart > .chart-time { border-top: 0; }
.ch-chart > .chart-time > * { max-width: none; }
.chart-time > .chart-h { padding-top: var(--s2); border-top: 2px solid var(--ink); }
.stats { display: flex; gap: var(--s6); margin: var(--s2) 0 var(--s4); }
.stat-n { font-size: clamp(44px, 6vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.01em; font-feature-settings: "palt" 1; }
.stat-l { margin-top: 8px; font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.stat.is-fast .stat-l::before { content: ""; width: 10px; height: 10px; background: var(--red); border-radius: 50%; }
.stat:not(.is-fast) .stat-l::before { content: ""; width: 10px; height: 10px; background: var(--ink); border-radius: 50%; }
.lg { position: relative; height: 84px; margin: 0 8px; }
.lg-line { position: absolute; left: 0; right: 0; top: 40px; height: 2px; background: var(--ink); }
.lg-tick { position: absolute; top: 34px; width: 1px; height: 14px; background: var(--ink); }
.lg-tick span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; line-height: 1; }
.lg-tick:first-of-type span { transform: none; left: 0; }
.lg-tick:last-of-type span { transform: translateX(-100%); left: 0; }
.lg-mark { position: absolute; top: 33px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; }
.lg-mark.is-fast { background: var(--red); }
.lg-mark .lg-v, .lg-mark .lg-l { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; line-height: 1; }
.lg-mark .lg-v { bottom: 24px; font-size: 14px; font-weight: 800; color: var(--ink); }
.lg-mark .lg-l { display: none; }
/* 読み終えたら：うちで確かめること・言葉 */
.take { margin-top: var(--s7); }
.take-box { max-width: var(--measure); border: 2px solid var(--ink); padding: var(--s4) var(--s4) var(--s3); }
.take-h { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; line-height: 1.4; }
.take-lead { margin-top: 8px; font-size: 15px; color: var(--ink-2); line-height: 1.8; }
.take-list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.take-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.75; }
.take-list .i { width: 20px; height: 20px; margin-top: 4px; }
.take-h3 { margin-top: var(--s4); font-size: 17px; font-weight: 800; line-height: 1.5; }
.take-ask { margin: 10px 0 0; padding-left: 1.4em; font-size: 16px; line-height: 1.8; }
.take-ask li + li { margin-top: 6px; }
@media (max-width: 520px) { .take-box { padding: var(--s3) 20px; } }
.gloss { margin-top: var(--s7); }
.gloss dl { margin: 0; max-width: var(--measure); }
.gloss dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.8; }
.gloss dt { font-weight: 700; }
.gloss dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .gloss dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- 特集：画に文字を重ねる（パソコンの幅だけ。スマホでは画の下に並べる） ---------- */
.ill { margin: var(--s6) 0; }
.ill-pic { position: relative; background: var(--night); }
.ill-pic > img, .ill-pic > video { width: 100%; height: auto; display: block; }
.ov { padding: 12px 0 0; }
.ov-t { font-size: 16px; font-weight: 800; line-height: 1.5; }
.ov-d { font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.ov-nums { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: baseline; }
.ov-big-n { font-size: clamp(40px, 7vw, 76px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; font-feature-settings: "palt" 1; }
.ov-big-n + .ov-big-n { font-size: clamp(28px, 4vw, 44px); }
@media (max-width: 959px) {
  .ill-pic { background: none; }
  .ov { border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
  .ov-center { display: none; }
}
@media (min-width: 960px) {
  .ov { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); padding: 0; color: #fff; text-shadow: 0 1px 14px rgba(5, 10, 25, .85); }
  .ov-d { color: rgba(255, 255, 255, .88); }
  .ov-center { text-align: center; }
  .ov-center .ov-t { font-size: 14px; letter-spacing: .06em; }
}
.ill-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: s; }
.ill-steps li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.6; font-weight: 700; border-top: 2px solid var(--ink); padding-top: 8px; }
.ill-steps span { font-family: var(--mono); font-weight: 500; color: var(--ink-3); }
@media (max-width: 640px) { .ill-steps { grid-template-columns: 1fr 1fr; } }
/* 解説の画面の番号（画に焼き込んだ赤い丸と同じ） */
.ill-steps.ill-marks { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ill-marks li { font-weight: 500; border-top: 1px solid var(--rule); padding-top: 10px; align-items: flex-start; }
.ill-marks span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
@media (max-width: 640px) { .ill-steps.ill-marks { grid-template-columns: 1fr; } }
/* 縦長の図（解説の図など）は本文の幅に収める */
.ill.ill-tall .ill-pic, .ill.ill-tall figcaption { max-width: min(100%, 640px); }
.ill.ill-tall .ill-pic { background: var(--tint); } /* 白い図なので、読み込むまでの面も明るく */
/* 本文の箇条書き */
.f-list { margin: 0 0 1.4em; padding-left: 1.3em; }
.f-list li { margin: .35em 0; line-height: 1.8; }
.endmatter { margin-top: var(--s7); padding-top: var(--s3); border-top: 2px solid var(--ink); }
.end-h { font-size: 17px; font-weight: 800; line-height: 1.5; margin: var(--s3) 0 10px; }
.end-h:first-child { margin-top: 0; }
.endmatter p { font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.endmatter p + p { margin-top: 8px; }
.refs { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.8; }
.refs li + li { margin-top: 6px; }
.refs a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: #b9bec5; word-break: break-word; }

/* ---------- 編集方針 ---------- */
.pg-body { padding-bottom: var(--s4); }
.pg-lead { font-size: var(--fs-lead); line-height: 2.05; font-weight: 500; }
.pg-h { font-size: var(--fs-h2); font-weight: 800; line-height: 1.5; margin: var(--s6) 0 var(--s2); padding-top: 14px; border-top: 1px solid var(--ink); }
.pg-body > p + p { margin-top: 1em; }
.pg-ul { margin: 0; padding-left: 1.2em; }
.pg-ul li + li { margin-top: 6px; }

/* 音つきの本編（全画面） */
dialog.player { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 9, 11, .96); display: none; }
dialog.player[open] { display: grid; place-items: center; }
dialog.player::backdrop { background: rgba(8, 9, 11, .96); }
dialog.player video { width: min(100vw - 32px, (100vh - 120px) * 16 / 9); aspect-ratio: 16 / 9; background: #000; }
dialog.player .close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff; display: grid; place-items: center; }
dialog.player .close .i { width: 22px; height: 22px; }
dialog.player .close:hover { background: rgba(255, 255, 255, .16); }

/* ---------- 対話を聴く ---------- */
.listen { margin: var(--s4) 0 var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--s3); }
.listen-btn { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; line-height: 1; }
.listen-btn .i { width: 20px; height: 20px; }
.listen-btn .tc { color: rgba(255, 255, 255, .7); font-weight: 400; }
.listen-btn:hover { background: #2a2e34; }
.listen-note { flex: 1 1 240px; font-size: var(--fs-label); color: var(--ink-3); line-height: 1.75; }
.pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px rgba(17, 19, 22, .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pbar[hidden] { display: none; }
.pbar-in { padding-top: 12px; padding-bottom: 12px; display: flex; align-items: center; gap: var(--s2); }
.pbar-toggle { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.pbar-toggle .i { width: 20px; height: 20px; }
.pbar-toggle .ic-play { display: none; }
.pbar.is-paused .ic-play { display: block; }
.pbar.is-paused .ic-pause { display: none; }
.pbar-meta { flex: 1; min-width: 0; line-height: 1.4; }
.pbar-t { display: block; font-weight: 700; font-size: 14px; }
.pbar-who { display: block; font-size: var(--fs-label); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar-time { color: var(--ink-3); }
.pbar-close { width: 40px; height: 40px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; flex: none; }
.pbar-close .i { width: 20px; height: 20px; }
.pbar-track { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: transparent; }
.pbar-fill { display: block; height: 100%; width: 0; background: var(--red); }
.has-pbar .ft { padding-bottom: 72px; }

/* ---------- OG 画像（build.py --og が撮る。ページでは使わない） ---------- */
body.og { width: 1200px; height: 630px; margin: 0; overflow: hidden; background: var(--night); color: var(--night-ink); position: relative; }
.og-pic { position: absolute; top: 0; right: 0; bottom: 0; width: 560px; background-size: cover; background-position: center; }
.og-pic .ph { height: 630px; }
.og-full { width: 1200px; opacity: .16; }
.og-pic-film { background-size: contain; background-repeat: no-repeat; }
.og-text { position: absolute; left: 64px; top: 56px; bottom: 56px; width: 540px; display: flex; flex-direction: column; }
.og-logo { color: #fff; height: 30px; margin-bottom: auto; }
.og-logo svg { height: 30px; width: auto; }
.og-text .kl { font-size: 18px; margin-bottom: 22px; }
.og-text .kind { font-size: 18px; }
.og-title { font-size: 44px; font-weight: 800; line-height: 1.38; word-break: keep-all; overflow-wrap: anywhere; font-feature-settings: "palt" 1; }
.og-center { left: 0; right: 0; width: auto; align-items: center; justify-content: center; text-align: center; }
.og-center .og-logo { margin: 0; height: 84px; }
.og-logo-big svg { height: 84px; }
.og-tag { margin-top: 28px; max-width: 900px; font-size: 30px; line-height: 1.6; word-break: keep-all; font-weight: 700; letter-spacing: .06em; }

/* ---------- スライドの記事：学年ごとの札・配るファイル・指導の流れ ---------- */
.grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); margin: var(--s5) 0 0; }
@media (max-width: 960px) { .grades { grid-template-columns: 1fr; gap: var(--s6); } }
.grade { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.grade-cover { display: block; aspect-ratio: 16 / 9; background: var(--tint); border: 1px solid var(--rule); overflow: hidden; }
.grade-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.grade-cover:hover img { transform: scale(1.02); }
.grade-label { margin-top: var(--s2); font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.grade-title { margin-top: 6px; font-size: 21px; font-weight: 800; line-height: 1.5; }
.grade-meta { margin-top: 6px; font-family: var(--mono); font-size: var(--fs-label); color: var(--ink-3); line-height: 1.6; }
.grade-dl { margin: 12px 0 0; }
.grade-dl > div { padding: 8px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.8; }
.grade-dl dt { font-weight: 700; font-size: 12px; letter-spacing: .06em; color: var(--ink-3); }
.grade-dl dd { margin: 2px 0 0; color: var(--ink); }
.grade-files { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.grade-files-h { margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.dl { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 15px; line-height: 1.45; }
.dl:hover .dl-l { text-decoration: underline; text-underline-offset: 4px; }
.dl-k { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
.dl-l { font-weight: 700; }
.dl-s { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.grade-plan { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; line-height: 1.3; }
.rules { margin-top: var(--s6); }
.rules p { font-size: 16px; line-height: 1.95; }
.rules p + p { margin-top: 10px; }
.rules a { text-underline-offset: 3px; }
.plans { margin-top: var(--s6); }
/* 指導の流れ：アコーディオンに畳まず、学年を切り替えて全部読める（平野さん 2026-10-28「ガイドラインが素晴らしいのに、さらっとおいてある。もったいない」） */
.plans-lead { font-size: 16px; line-height: 1.95; }
.plans-lead + .plans-lead { margin-top: 10px; }
.plan-tabs { display: none; gap: 0; margin-top: var(--s4); border: 1.5px solid var(--ink); width: fit-content; max-width: 100%; }
.plans.js-tabs .plan-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 420px); }
.plan-tab { appearance: none; border: 0; border-right: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 800; padding: 10px 12px; cursor: pointer; line-height: 1.3; white-space: nowrap; }
.plan-tab:last-child { border-right: 0; }
.plan-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.plan { margin-top: var(--s4); border-top: 3px solid var(--ink); }
.plans.js-tabs .plan:not(.is-on) { display: none; }
.plan-head { padding: 18px 0 14px; border-bottom: 1px solid var(--rule); }
.plan-l { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); line-height: 1.4; }
.plan-t { margin-top: 6px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.plan-dl { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 24px; border-top: 1px solid var(--ink); }
.plan-toc { margin-top: 18px; padding: 14px 16px; background: var(--tint); }
.plan-toc ol { margin: 0; padding-left: 1.4em; columns: 2 240px; column-gap: 28px; font-size: 14px; line-height: 1.7; }
.plan-toc li { break-inside: avoid; padding: 2px 0; }
.plan-toc a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.plan-body .doc-h3 { scroll-margin-top: 80px; }
.doc { padding: 0 0 var(--s4); font-size: 15px; line-height: 1.9; }
.doc p, .doc ul, .doc .tbl { margin: 10px 0 0; }
.doc ul { padding-left: 1.2em; }
.doc-h3 { font-size: 17px; font-weight: 800; line-height: 1.5; margin-top: var(--s4); padding-top: 12px; border-top: 1px solid var(--ink); }
.doc-h4 { font-size: 15px; font-weight: 800; line-height: 1.5; margin-top: var(--s3); }
.doc code { font-family: var(--mono); font-size: .9em; background: var(--tint); padding: 1px 4px; }
.doc a { word-break: break-all; text-underline-offset: 2px; }
.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 13.5px; line-height: 1.7; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); }
.tbl th { font-weight: 700; border-bottom: 1px solid var(--ink); white-space: nowrap; }
/* 狭い画面では横に流さず、1 行を 1 まとまりにして縦に積む（見出しは各セルの頭に data-label で出す） */
@media (max-width: 600px) {
  .tbl { overflow: visible; }
  .tbl table { min-width: 0; border-top: 1px solid var(--ink); }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tbl tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .tbl td { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 10px; padding: 2px 0; border: 0; }
  .tbl td::before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--ink-3); }
  .tbl td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .tbl td[data-label=""]::before { display: none; }
}

/* トップに続ける映像の記事：表紙（.hero）のすぐ下から */
.film-on-top .read { padding-top: var(--s6); }

/* ---------- トップの頭：Data is CITY とは（左）と映像（右）。狭い画面では Data is CITY → 映像 → 2 本柱 ---------- */
.hero { padding-bottom: var(--s5); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "brand film" "about film"; column-gap: var(--s5); row-gap: var(--s3); padding-top: var(--s5); align-items: start; }
.hero-brand { grid-area: brand; }
.hero-film { grid-area: film; }
.hero-about { grid-area: about; }
.hero-mark { line-height: 0; }
.hero-logo { height: clamp(34px, 4.4vw, 60px); width: auto; color: #fff; }
.hero .hero-tag { margin: var(--s3) 0 0; padding: 0; border: 0; font-size: clamp(18px, 1.9vw, 24px); font-weight: 800; line-height: 1.6; color: #fff; }
.hero-lead { font-size: 15px; line-height: 1.9; color: var(--night-sub); }
.hero-short { list-style: none; margin: var(--s3) 0 0; padding: 0; border-top: 1px solid var(--night-rule); }
.hero-short li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--night-rule); font-size: 14px; line-height: 1.6; }
.hs-n { font-weight: 800; color: #fff; }
.hs-d { color: var(--night-sub); }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px var(--s3); margin-top: var(--s3); }
.hero-links a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; line-height: 1.3; }
.hero-film .hero-k { margin-top: 4px; }
.hero-film .hero-title { font-size: clamp(24px, 2.6vw, 34px); margin: 10px 0 var(--s2); }
.hero .hero-film .screen { width: 100%; }
.hero-by { margin-top: 12px; font-size: 13px; color: var(--night-sub); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "brand" "film" "about"; padding-top: var(--s4); }
  .hero .hero-tag { margin-top: 14px; }
  .hero-short li { grid-template-columns: 1fr; gap: 0; }
  .hero .hero-film .screen { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); width: auto; }
}

/* ---------- Data is CITY PROJECT（平野さんの文そのまま） ---------- */
.project { margin-top: var(--s8); padding: var(--s7) 0 var(--s6); background: var(--tint); }
.pj-mark { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: .02em; line-height: 1.2; }
.pj-mark span { font-family: var(--mono); font-weight: 500; font-size: .55em; letter-spacing: .14em; color: var(--ink-3); margin-left: 10px; vertical-align: middle; }
.pj-title { margin-top: var(--s3); font-size: clamp(28px, 4vw, 48px); font-weight: 800; line-height: 1.4; max-width: 18em; }
.pj-lead { margin-top: var(--s3); max-width: 40em; font-size: clamp(17px, 1.7vw, 20px); font-weight: 500; line-height: 1.9; }
.pj-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s6); }
.pj-pillar { border-top: 3px solid var(--ink); padding-top: var(--s3); }
.pj-no { font-family: var(--mono); font-size: 28px; font-weight: 500; color: var(--ink-3); line-height: 1; }
.pj-h { margin: 14px 0 var(--s3); font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; line-height: 1.3; }
.pj-h span { display: block; margin-top: 10px; font-size: 17px; font-weight: 700; color: var(--ink-2); line-height: 1.6; }
.pj-pillar p:not(.pj-no) { font-size: 16px; line-height: 2; }
.pj-pillar p + p { margin-top: .8em; }
.pj-policy { margin-top: var(--s5); font-size: 13px; color: var(--ink-3); line-height: 1.8; }
.pj-policy a { color: var(--ink-2); text-underline-offset: 3px; }
@media (max-width: 760px) { .pj-pillars { grid-template-columns: 1fr; gap: var(--s5); } .project { margin-top: var(--s7); padding-top: var(--s6); } }

/* ---------- 記事の終わりの「Data is CITY とは」 ---------- */
.dic-box { margin-top: var(--s7); }
.dic-in { max-width: var(--measure); border-top: 3px solid var(--ink); padding-top: var(--s3); }
.dic-h { font-size: 20px; font-weight: 800; line-height: 1.4; }
.dic-lead { margin-top: 10px; font-size: 16px; line-height: 1.9; }
.dic-pillars { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.dic-pillars li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.6; }
.dic-pillars li:last-child { border-bottom: 1px solid var(--rule); }
.dic-pillars strong { font-weight: 800; }
.dic-more { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s2); font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; line-height: 1.3; }
@media (max-width: 520px) { .dic-pillars li { grid-template-columns: 1fr; gap: 0; } }

/* 要点の一行（一覧の札・記事の副題の下） */
.card-point { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--red); font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--ink); }
.a-point { margin-top: var(--s2); padding-left: 14px; border-left: 3px solid var(--red); font-size: clamp(15px, 1.5vw, 17px); font-weight: 700; line-height: 1.8; max-width: 40em; }

/* ---------- シェアといいね（モノクロ。いいねは押した後だけ赤） ---------- */
.share { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s3); }
.share-l { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); margin-right: 2px; }
.share-sep { width: 1px; height: 22px; background: var(--rule); margin: 0 8px; }
.sh { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; color: var(--ink); text-decoration: none; padding: 0; transition: transform .15s ease, border-color .15s ease, background-color .15s ease; }
.sh .i { width: 17px; height: 17px; }
.sh:hover { border-color: var(--ink); }
.sh:active { transform: scale(.9); }
.sh[hidden] { display: none; }
.like { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 18px; border: 1px solid var(--rule); background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1; transition: transform .15s ease, border-color .15s ease, color .15s ease; }
.like .i { width: 19px; height: 19px; }
.like .like-shape { fill: none; transition: fill .2s ease; }
.like:hover { border-color: var(--ink); }
.like:active { transform: scale(.94); }
.like.is-liked { color: var(--red); border-color: var(--red); cursor: default; }
.like.is-liked .like-shape { fill: var(--red); }
.like-n { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.like-n[hidden] { display: none; }
.sh-toast { position: absolute; left: 0; top: calc(100% + 6px); font-size: 12px; font-weight: 700; color: #fff; background: var(--ink); padding: 6px 10px; line-height: 1; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; white-space: nowrap; }
.share.is-toast .sh-toast { opacity: 1; transform: none; }
.share-dark .sh, .share-dark .like { background: transparent; border-color: var(--night-rule); color: #fff; }
.share-dark .sh:hover, .share-dark .like:hover { border-color: #fff; }
.share-dark .share-l { color: var(--night-sub); }
.share-dark .share-sep { background: var(--night-rule); }
.share-dark .like.is-liked { color: #ff6b6e; border-color: #ff6b6e; }
.share-dark .like.is-liked .like-shape { fill: var(--red); }
.share-dark .sh-toast { background: #fff; color: var(--night); }
.film-cover .share { margin-top: var(--s2); }
/* 記事の終わり：少し大きく */
.share-end { margin-top: var(--s7); }
.share-end .share { max-width: var(--measure); padding: var(--s3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); gap: 8px; margin-top: 0; }
.share-l.share-l { }
.share-end .share-l { font-size: 15px; color: var(--ink); flex-basis: 100%; margin-bottom: 6px; }
.share-end .share-sep { display: none; }
.share-end .sh { width: 44px; height: 44px; }
.share-end .sh .i { width: 20px; height: 20px; }
.share-end .like { height: 44px; padding: 0 18px 0 14px; font-size: 14px; border-radius: 22px; margin-right: 8px; order: -1; }
.share-end .like .i { width: 22px; height: 22px; }
.share-end + .dic-box { margin-top: var(--s5); }

/* ---------- ウェイティングリスト：頭の帯の赤いボタン（ここが要）・右下のボタン・入口・黒い区画 ---------- */
.mh-join { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; margin-left: var(--s3); background: var(--red); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-decoration: none; line-height: 1; white-space: nowrap; transition: background-color .15s ease; }
.mh-join:hover { background: #c92b2e; }
.mh-nav + .mh-join { margin-left: var(--s3); }
@media (max-width: 900px) { .mh-nav { display: none; } .mh-join { margin-left: auto; height: 32px; padding: 0 12px; font-size: 12px; } }
@media (max-width: 380px) { .mh-join { padding: 0 9px; font-size: 11.5px; } }
.float-join { position: fixed; right: 16px; bottom: 16px; z-index: 25; display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 23px; background: var(--red); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-decoration: none; box-shadow: 0 6px 20px rgba(17, 19, 22, .22); transition: opacity .25s ease, transform .25s ease; }
.float-join.is-off { opacity: 0; transform: translateY(12px); pointer-events: none; }
.has-pbar .float-join { bottom: 86px; }
.wl-entry { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; background: var(--red); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; letter-spacing: .03em; line-height: 1; }
.wl-entry:hover { background: #c92b2e; }
.wl-entry .i { width: 18px; height: 18px; }
.pj-join { margin-top: var(--s5); }
.dic-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.dic-acts .dic-more { margin-top: 0; }
/* 登録の区画：黒い地で大きく */
.join { background: var(--night); color: var(--night-ink); }
.join-in { padding-top: var(--s7); padding-bottom: var(--s7); grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
.join-k { color: var(--night-sub); }
.join-h { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.45; color: #fff; }
.join-lead { color: var(--night-sub); font-size: 16px; }
.join .wl input[type=email] { border-color: #fff; height: 58px; }
.join .wl button { height: 58px; background: var(--red); border-color: var(--red); font-size: 16px; padding: 0 30px; }
.join .wl button:hover { background: #c92b2e; }
.join .wl-note { color: var(--night-sub); }
.join .wl-note a { color: var(--night-ink); }
.join .wl-done { background: var(--night-2); border-color: var(--night-rule); }
.join .wl-done-note { color: var(--night-sub); }
.join .wl-addr { color: #fff; }
.join .wl-check { stroke: #fff; }
.join .wl-msg { color: #ff8a8c; }
@media (max-width: 860px) { .join-in { grid-template-columns: 1fr; padding-top: var(--s6); padding-bottom: var(--s6); } }

/* ---------- トップの頭：全画面の映像に、Data is CITY・タグライン・PLAY の 3 つだけ ---------- */
.home .mh { position: absolute; left: 0; right: 0; top: 0; z-index: 10; background: transparent; border-bottom: 0; }
.home .mh .lk-sep, .home .mh .lk-dic { display: none; }
.home .mh .logo-tp { height: 19px; }
.hero-full { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--night); color: #fff; padding: 0; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 13, 16, .92) 0%, rgba(12, 13, 16, .55) 38%, rgba(12, 13, 16, .15) 70%, rgba(12, 13, 16, .35) 100%); pointer-events: none; }
.hero-full .hero-in { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: clamp(48px, 9vh, 96px); }
.hero-full .hero-mark { line-height: 0; margin: 0; }
.hero-full .hero-logo { height: clamp(52px, 9vw, 128px); width: auto; color: #fff; }
.hero-full .hero-tag { margin: clamp(16px, 2.4vw, 28px) 0 0; padding: 0; border: 0; font-size: clamp(19px, 2.6vw, 34px); font-weight: 800; line-height: 1.55; color: #fff; max-width: 22em; }
.hero-play { display: inline-flex; align-items: center; gap: 18px; margin-top: clamp(28px, 5vh, 52px); padding: 0; background: none; border: 0; color: #fff; text-align: left; }
.hero-play .pb-circle { width: clamp(64px, 6.5vw, 88px); height: clamp(64px, 6.5vw, 88px); }
.hero-play:hover .pb-circle { transform: scale(1.06); }
.hero-play-t { display: flex; flex-direction: column; gap: 6px; }
.hp-t { font-size: clamp(14px, 1.3vw, 17px); font-weight: 700; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.hero-play .tc { color: rgba(255, 255, 255, .72); }
/* 頭のすぐ下の白い帯：短く、静か */
.intro { border-bottom: 1px solid var(--rule); }
.intro-in { padding-top: var(--s5); padding-bottom: var(--s5); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: var(--s3) var(--s5); align-items: center; }
.intro-lead { font-size: 16px; font-weight: 500; line-height: 1.9; }
.intro-pillars { list-style: none; margin: 0; padding: 0; }
.intro-pillars li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 8px 0; font-size: 14px; line-height: 1.6; border-top: 1px solid var(--rule); }
.intro-pillars li:last-child { border-bottom: 1px solid var(--rule); }
.ip-n { font-weight: 800; }
.ip-d { color: var(--ink-2); }
.intro-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; line-height: 1.3; white-space: nowrap; }
@media (max-width: 900px) { .intro-in { grid-template-columns: 1fr; gap: var(--s2); } .intro-pillars li { grid-template-columns: 1fr; gap: 0; } }

/* 頭の帯のタグライン（小さな灰の字。幅が足りなければ 2 行に） */
.mh .mh-tag { flex: 0 1 auto; min-width: 0; max-width: 24em; font-size: 12px; line-height: 1.45; color: var(--ink-3); padding-left: var(--s2); border-left: 1px solid var(--rule); margin-left: var(--s2); }
.mh-dark .mh-tag { color: var(--night-sub); border-left-color: var(--night-rule); }
.home .mh .mh-tag { color: rgba(255, 255, 255, .78); border-left-color: rgba(255, 255, 255, .28); }
@media (max-width: 900px) { .mh .mh-tag { display: none; } }

/* ---------- トップの記事：最新の特集を大きく、続いて中くらいの札 ---------- */
.latest { padding-top: var(--s6); }
.lead-card a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: center; text-decoration: none; }
.lead-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--night); }
.lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lead-card a:hover .lead-media img { transform: scale(1.015); }
.lead-title { margin: 16px 0 10px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.35; }
.lead-card a:hover .lead-title { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.lead-dek { font-size: 16px; font-weight: 500; line-height: 1.75; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.lead-desc { margin-top: 12px; font-size: 15px; line-height: 1.9; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lead-card { padding-bottom: var(--s5); border-bottom: 1px solid var(--rule); margin-bottom: var(--s5); }
@media (max-width: 860px) { .lead-card a { grid-template-columns: 1fr; gap: var(--s2); } }
.card-desc { font-size: 14px; line-height: 1.85; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 700; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; line-height: 1.3; }

/* ---------- トップの頭（作り直し）：静止画の CITY の街。左下に Data is CITY・タグライン、右に映像の札 ---------- */
.hero-full .hero-bg { position: absolute; inset: 0; }
.hero-full .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; transform-origin: 70% 30%; animation: hero-zoom 40s ease-out forwards; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .hero-full .hero-bg img { animation: none; } }
.hero-full::after { background: linear-gradient(to top, rgba(10, 11, 13, .88) 0%, rgba(10, 11, 13, .35) 45%, rgba(10, 11, 13, 0) 70%), linear-gradient(to right, rgba(10, 11, 13, .55), rgba(10, 11, 13, 0) 55%); }
.hero-full .hero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s5); align-items: end; }
.hero-card { display: block; background: rgba(18, 20, 24, .92); border: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; transition: transform .25s ease, border-color .25s ease; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.hero-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .4); }
.hc-pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.hc-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hero-card:hover .hc-pic img { transform: scale(1.03); }
.hc-time { position: absolute; right: 10px; bottom: 10px; font-family: var(--mono); font-size: 12px; background: rgba(0, 0, 0, .7); padding: 4px 7px; line-height: 1; }
.hc-text { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.hc-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--night-sub); }
.hc-t { font-size: clamp(19px, 1.8vw, 24px); font-weight: 800; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; font-feature-settings: "palt" 1; }
.hc-lead { font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, .82); }
.hc-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; height: 48px; padding: 0 22px 0 8px; border-radius: 24px; background: #fff; color: var(--night); font-size: 15px; font-weight: 800; line-height: 1; transition: transform .2s ease; }
.hc-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--night); color: #fff; }
.hc-ic .i { width: 14px; height: 14px; margin-left: 2px; }
.hero-card:hover .hc-btn { transform: scale(1.03); }
@media (max-width: 900px) {
  .hero-full .hero-in { grid-template-columns: 1fr; gap: var(--s3); padding-top: 96px; padding-bottom: var(--s4); }
  .hero-full .hero-bg img { object-position: 75% 0%; }
  .hc-text { padding: 14px 16px 16px; }
}
/* 映像の記事の表紙：その場で本編。音つきで始められないときは「音つきで再生」 */
.screen.is-playing { width: 100% !important; aspect-ratio: 16 / 9; }
.screen.is-playing::after { display: none; }
.screen video.main { width: 100%; height: 100%; background: #000; object-fit: contain; }
.tap-sound { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 0; background: rgba(8, 9, 11, .55); color: #fff; }
.tap-sound[hidden] { display: none; }
.tap-sound .pb-label { font-size: 18px; }
.after-film { margin-top: 14px; font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; }
.after-film::before { content: ""; width: 18px; height: 2px; background: var(--red); }
.after-film[hidden] { display: none; }
.entry-play { text-decoration: none; color: inherit; }

/* 狭い画面：ウェイティングリストのボタンは右端。頭の文字の下の街は暗く沈める（文字と画を重ねない） */
@media (max-width: 900px) {
  .mh-nav + .mh-join { margin-left: auto; }
  .hero-full::after { background: linear-gradient(to bottom, rgba(10, 11, 13, .1) 0%, rgba(10, 11, 13, .2) 18%, rgba(10, 11, 13, .82) 34%, rgba(10, 11, 13, .95) 52%); }
}

/* スライドの記事：公開の印と CC BY */
.dlb { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--tint); padding: 4px 8px 4px 6px; line-height: 1; white-space: nowrap; }
.dlb .i { width: 14px; height: 14px; }
.kl-dark .dlb { background: var(--night-2); color: var(--night-ink); }
.cc { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); border: 1px solid var(--rule); margin-bottom: 14px; }
.cc p { font-size: 15px; line-height: 1.8; }
.cc-logo { flex: none; width: 88px; height: 31px; }
.cc-text { display: inline-grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; border: 1.5px solid var(--ink); }
.grade-cc { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.cc-mini { width: 66px; height: 23px; flex: none; }
.cc-mini.cc-text { font-size: 10px; }

/* ---------- スライドの記事：見る道具と、見る・落とすの分け方 ---------- */
.grade-cover { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--rule); background: var(--tint); cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; }
.gc-play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 19px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; transition: transform .2s ease; }
.gc-play .i { width: 14px; height: 14px; }
.grade-cover:hover .gc-play { transform: scale(1.05); }
.grade-h { margin-top: var(--s3); font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--ink-3); }
.dl-inapp { margin: 8px 0 0; padding: 10px 12px; background: var(--tint); font-size: 13px; line-height: 1.7; }
.dl-inapp[hidden] { display: none; }
.grade-view { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.deck-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 12px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font-size: 14px; font-weight: 800; line-height: 1; }
.deck-btn .i { width: 14px; height: 14px; }
.deck-btn .tc { color: var(--ink-3); font-weight: 400; }
.deck-btn:hover { background: var(--ink); color: #fff; }
.deck-btn:hover .tc { color: rgba(255, 255, 255, .7); }
.grade-files-h { display: none; }
.grade-files { margin-top: 6px; }
.dl-k { display: inline-flex; align-items: center; gap: 5px; }
.dl-k .i { width: 14px; height: 14px; }
dialog.viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0c0e; color: #fff; }
dialog.viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
dialog.viewer::backdrop { background: #0b0c0e; }
.vw-stage { position: relative; display: grid; place-items: center; padding: 16px; min-height: 0; }
.vw-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.vw-zone { position: absolute; top: 0; bottom: 0; width: 30%; border: 0; background: transparent; cursor: pointer; }
.vw-zone-prev { left: 0; cursor: w-resize; }
.vw-zone-next { right: 0; cursor: e-resize; }
.vw-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #22252b; }
.vw-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #c9cdd3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-bar button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #33373e; background: transparent; color: #fff; flex: none; }
.vw-bar button:hover { border-color: #fff; }
.vw-bar .i { width: 20px; height: 20px; }
.vw-count { min-width: 64px; text-align: center; font-size: 14px; color: #fff; }
dialog.viewer:fullscreen .vw-stage { padding: 0; }
@media (max-width: 600px) { .vw-title { display: none; } .vw-bar { justify-content: center; } }

.vw-zone:focus, .vw-zone:focus-visible { outline: none; }

/* 学年の色（小 #FFF4D6・中 #E6F0FA・高 #14213D。スライドの地の色と同じ） */
.grade { border-top: 6px solid var(--grade, var(--ink)); }
.grade-cover { background: var(--grade, var(--tint)); border-color: var(--rule); }
.vw-stage { background: var(--deck-bg, #0b0c0e); }
.vw-img { box-shadow: 0 6px 30px rgba(0, 0, 0, .35); }

.og-city { opacity: 1; background-size: cover; background-position: 70% 30%; }
.og-city::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10, 11, 13, .9), rgba(10, 11, 13, .35)); }
.og-center { z-index: 1; }

/* ---------- 映像の記事：再生中にスクロールしたら、映像を画面の上部に浮かせる ---------- */
.float-bar { display: none; }
.screen.is-float { position: fixed; z-index: 40; top: 0; left: 0; right: 0; width: 100% !important; max-height: 33vh; margin: 0 !important; aspect-ratio: 16 / 9; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: float-in .25s ease; }
.screen.is-float video.main { max-height: 33vh; }
@keyframes float-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.screen.is-float .float-bar { display: flex; position: absolute; top: 6px; right: 6px; z-index: 3; gap: 6px; }
.float-bar button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 16px; background: rgba(8, 9, 11, .78); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.float-bar .i { width: 16px; height: 16px; }
.float-bar .fl-close { width: 32px; padding: 0; justify-content: center; }
@media (min-width: 900px) {
  .screen.is-float { top: 16px; right: 16px; left: auto; width: 420px !important; max-height: none; border-radius: 2px; overflow: hidden; }
  .screen.is-float video.main { max-height: none; }
}
@media (max-width: 899px) { .screen.is-float .float-bar .fl-back span { display: none; } .screen.is-float .float-bar .fl-back { width: 32px; padding: 0; justify-content: center; } }

/* ---------- ウェイティングリストの登録の箱（.su）：トップの頭の下・映像の終わり・記事の終わり・スマホの帯・足もと ---------- */
.su .wl-row { display: flex; flex-wrap: wrap; row-gap: 8px; } /* 欄が狭くなるときは、ボタンを下の行に回して、メールの欄を細くしない（平野さん 2026-10-28「テキストフォームが小さい」） */
.su-h { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; line-height: 1.45; }
.su-lead { margin-top: 6px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.su-gets { list-style: none; margin: 10px 0 14px; padding: 0 0 0 12px; border-left: 3px solid var(--red); font-size: 15px; font-weight: 700; line-height: 1.8; }
.su-gets li::before { content: "・"; color: var(--ink-3); }
.fe-thanks { font-size: 14px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; margin-bottom: 6px; }
.su .wl button { background: var(--red); border-color: var(--red); }
.su .wl button:hover { background: #c92b2e; }
.su .wl-note { margin-top: 6px; }
.su.is-joined .su-gets, .su.is-joined .su-lead { display: none; }
/* トップ：頭のすぐ下 */
.su-band-wrap { background: var(--tint); border-bottom: 1px solid var(--rule); }
.su-band { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "h form" "lead form" "gets form" "note note"; column-gap: var(--s5); padding: var(--s4) 0; align-items: center; }
.su-band .su-h { grid-area: h; } .su-band .su-lead { grid-area: lead; } .su-band .su-gets { grid-area: gets; margin-bottom: 0; }
.su-band .wl, .su-band .wl-done { grid-area: form; } .su-band .wl-note { grid-area: note; }
@media (max-width: 860px) { .su-band { grid-template-columns: 1fr; grid-template-areas: "h" "lead" "gets" "form" "note"; } }
/* 記事の終わり */
.su-end-wrap { margin-top: var(--s4); }
.su-end { max-width: var(--measure); padding: var(--s4); background: var(--tint); border-top: 3px solid var(--red); }
/* 足もとの黒い区画 */
.su-dark .su-h { color: #fff; }
.su-dark .su-lead { color: var(--night-sub); }
.su-dark .su-gets { color: #fff; }
.su-dark .wl-note { color: var(--night-sub); }
/* 映像の終わりの札 */
.film-end[hidden] { display: none; }
.film-end { margin-top: var(--s3); }
.fe-in { padding: var(--s4); background: #fff; color: var(--ink); border-top: 4px solid var(--red); animation: float-in .3s ease; }
.su-film .su-h { font-size: clamp(22px, 2.6vw, 30px); }
.fe-links { display: flex; flex-wrap: wrap; gap: 10px var(--s3); margin-top: var(--s3); font-size: 14px; }
.fe-links a, .fe-links button { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 700; text-decoration: none; background: none; border: 0; padding: 0; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.fe-links .i { width: 14px; height: 14px; }
/* スマホの画面の下の帯（入力中に画面を隠さない大きさ） */
.su-bar { display: none; }
@media (max-width: 900px) {
  .su-bar:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 10px 52px 12px 16px; background: #fff; border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px rgba(17, 19, 22, .12); animation: float-in .3s ease; }
  .su-bar .su-h { font-size: 14px; margin-bottom: 6px; }
  .su-bar .wl input[type=email] { height: 44px; font-size: 16px; }
  .su-bar .wl button { height: 44px; padding: 0 16px; font-size: 14px; }
  .su-bar .wl-msg { min-height: 0; margin-top: 4px; font-size: 12px; }
  .su-bar .wl-done { padding: 10px; margin: 0; }
  .su-bar .wl-done-note { display: none; }
  .su-bar-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; }
  .su-bar-close .i { width: 20px; height: 20px; }
  .has-subar .float-join { display: none; }
  .has-subar .ft { padding-bottom: 140px; }
}

/* 足もとの黒い区画：箱の見出しと一文は左に出したので、右はメールの欄だけ */
.su-dark .su-h, .su-dark .su-lead, .su-dark .su-gets { display: none; }
.join-gets { color: #fff; margin-top: var(--s2); }
/* 右下のボタン：2 行（何のボタンか分かるように）。スマホでは出さず、下の帯にまとめる。浮く映像が出ている間は隠す */
.float-join { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; height: auto; padding: 12px 20px 13px; border-radius: 4px; }
.fj-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .9; line-height: 1.2; }
.fj-t { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; line-height: 1.2; }
.fj-t .i { width: 16px; height: 16px; }
.has-float-video .float-join { opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .float-join { display: none !important; } }
/* 登録のパネル（下から出る） */
dialog.su-panel { width: min(520px, calc(100vw - 24px)); margin: auto auto 16px; padding: 28px 28px 22px; border: 0; border-top: 4px solid var(--red); background: #fff; color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
dialog.su-panel[open] { animation: float-in .25s ease; }
dialog.su-panel::backdrop { background: rgba(10, 11, 13, .45); }
.su-panel-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; }
.su-panel-close .i { width: 20px; height: 20px; }
.su-panel .wl-row { flex-wrap: wrap; }
/* スライドを落とす前の窓（登録と引き換え。見るのは登録なし） */
.dl-gate .gate-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.dl-gate .gate-h { margin-top: 6px; font-size: 20px; font-weight: 800; line-height: 1.5; padding-right: 32px; }
.dl-gate .gate-l { margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.dl-gate .su { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.dl-gate .su-gets { display: none; }
.dl-gate-note { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-3); }
@media (max-width: 520px) { .su-panel .wl input[type=email] { flex-basis: 100%; border-right: 1px solid #b9bec5; } .su-panel .wl button, .su-end .wl button, .su-film .wl button { width: 100%; margin-top: 8px; } .su-end .wl-row, .su-film .wl-row { flex-wrap: wrap; } .su-end .wl input[type=email], .su-film .wl input[type=email] { flex-basis: 100%; border-right: 1px solid #b9bec5; } }
.mh-join { cursor: pointer; }

@media (max-width: 900px) { .su-bar-close { z-index: 2; } .su-bar .su { position: relative; z-index: 1; min-width: 0; } .su-bar .wl input[type=email] { min-width: 0; } }

.su-h { word-break: keep-all; overflow-wrap: anywhere; font-feature-settings: "palt" 1; }
.su .wl button { white-space: nowrap; }
@media (max-width: 520px) { .su .wl button { padding: 0 14px; font-size: 14px; } }

@media (max-width: 860px) { .join-in { grid-template-columns: minmax(0, 1fr) !important; } .join-text, .join-form { min-width: 0; } }
@media (max-width: 860px) { .su-band { grid-template-columns: minmax(0, 1fr) !important; } }
.su, .su > * { min-width: 0; }

/* ---------- 本文の表（特集・手記・解説）：本文の幅で読める。狭い画面では 1 行ずつ縦に積む ---------- */
.f-tbl { margin: var(--s4) 0; }
.f-tbl table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.7; }
.f-tbl th { text-align: left; font-weight: 800; padding: 10px 14px 10px 0; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.f-tbl td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); }
.f-tbl td:first-child { font-weight: 700; }
@media (max-width: 600px) {
  .f-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .f-tbl table, .f-tbl tbody, .f-tbl tr, .f-tbl td { display: block; width: 100%; }
  .f-tbl tr { padding: 10px 0 12px; border-top: 2px solid var(--ink); }
  .f-tbl td { padding: 4px 0; border: 0; }
  .f-tbl td + td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-3); line-height: 1.6; margin-top: 4px; }
  .f-tbl td:first-child { font-size: 17px; }
}

/* ---------- 配るファイル（downloads）：スライドの記事の dl と同じ型。落とすには登録が要る ---------- */
.dls { margin-top: var(--s7); }
.dls-lead { margin: -12px 0 14px; font-size: 16px; line-height: 1.9; color: var(--ink-2); }
.dls-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.dls .dl { grid-template-columns: 92px minmax(0, 1fr) auto; padding: 14px 0; font-size: 16px; }
.dl-n { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; line-height: 1.7; color: var(--ink-3); }
.su-gate { margin: 0 36px 14px 0; padding: 10px 14px; background: var(--tint); border-left: 3px solid var(--ink); font-size: 16px; font-weight: 800; line-height: 1.7; }
.su-gate[hidden] { display: none; }

/* ---------- 漫画（manga）：記事の中の 1 話の区画 ---------- */
.mg { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: var(--s3); align-items: start; margin: var(--s5) 0; padding-top: var(--s3); border-top: 3px solid var(--ink); }
.mg-cover { display: block; padding: 0; border: 1px solid var(--rule); background: var(--tint); line-height: 0; }
.mg-cover img { width: 100%; height: auto; aspect-ratio: 1600 / 2263; }
.mg-cover:hover { border-color: var(--ink); }
.mg-k { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .02em; color: var(--ink-3); line-height: 1.7; }
.mg-t { margin-top: 6px; font-size: clamp(21px, 2.4vw, 28px); font-weight: 800; line-height: 1.5; }
.mg-no { display: block; font-size: 15px; font-weight: 700; color: var(--ink-3); line-height: 1.6; }
.mg-m { margin-top: 8px; font-size: 14px; color: var(--ink-3); line-height: 1.7; }
.mg-act { margin-top: var(--s2); }
.mg-open { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 168px; height: 56px; padding: 0 24px; border: 2px solid var(--ink); background: var(--ink); color: #fff; font-size: 19px; font-weight: 800; line-height: 1; }
.mg-open .i { width: 16px; height: 16px; }
.mg-open:hover { background: #fff; color: var(--ink); }
.mg > .mg-text .mg-ai { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.mg-sc { grid-column: 1 / -1; font-size: 15px; line-height: 1.9; }
.mg-sc summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.mg-script { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.mg-script li { padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.mg-script b { display: block; font-size: 13px; color: var(--ink-3); }
@media (max-width: 520px) { .mg { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); gap: var(--s2); } .mg-open { min-width: 0; width: 100%; padding: 0 12px; } }

/* ---------- 漫画ビューアー（右綴じ。パソコンの横長は見開き、スマホは 1 ページ） ---------- */
dialog.mg-viewer { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #17191d; color: #fff; }
dialog.mg-viewer[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
dialog.mg-viewer::backdrop { background: #17191d; }
.mg-top { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; }
.mg-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #c9cdd3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-close { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px 0 12px; border: 1px solid #5a5f67; background: transparent; color: #fff; font-size: 15px; font-weight: 700; flex: none; }
.mg-close .i { width: 18px; height: 18px; }
.mg-close:hover { border-color: #fff; }
.mg-stage { position: relative; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.mg-stage[data-zone="l"] { cursor: w-resize; } .mg-stage[data-zone="r"] { cursor: e-resize; } .mg-stage[data-zone="c"] { cursor: zoom-in; }
.mg-stage.is-zoomed { cursor: grab; }
.mg-spread { position: absolute; inset: 0 8px; display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; transform-origin: 50% 50%; }
.mg-spread[hidden], .mg-end[hidden] { display: none; }
.mg-pg { margin: 0; height: 100%; min-width: 0; max-width: 50%; display: flex; align-items: center; justify-content: center; }
.mg-spread:has(.mg-pg:only-child) .mg-pg { max-width: 100%; }
.mg-pg img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #fff; -webkit-user-drag: none; }
.mg-end { position: absolute; inset: 0; overflow: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 24px 20px; text-align: center; touch-action: pan-y; }
.mg-end-k { font-size: 14px; font-weight: 700; color: #c9cdd3; letter-spacing: .06em; }
.mg-end-p { max-width: 640px; padding: 24px 26px; background: #fff; color: var(--ink); border-top: 5px solid var(--red); font-size: clamp(21px, 4.4vw, 32px); font-weight: 800; line-height: 1.65; text-align: left; }
.mg-end-btns { display: flex; flex-direction: column; gap: 10px; width: min(100%, 420px); }
.mg-end-btns button { min-height: 56px; padding: 10px 18px; border: 1.5px solid #8a8f98; background: transparent; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.5; }
.mg-end-btns button[hidden] { display: none; }
.mg-end-btns .mg-next-ep { background: #fff; color: var(--ink); border-color: #fff; font-weight: 800; }
.mg-end-btns button:hover { border-color: #fff; }
.mg-foot { margin: 0; padding: 4px 12px 2px; text-align: center; font-size: 12.5px; color: #a3a9b2; line-height: 1.6; }
.mg-bar { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px 12px 14px; }
.mg-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 52px; min-width: 52px; padding: 0 16px; border: 1px solid #5a5f67; background: transparent; color: #fff; font-size: 17px; font-weight: 800; }
.mg-bar button:hover:not(:disabled) { border-color: #fff; }
.mg-bar button:disabled { opacity: .3; cursor: default; }
.mg-bar .i { width: 20px; height: 20px; }
.mg-zoom[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
.mg-count { min-width: 86px; text-align: center; font-size: 15px; color: #fff; }
@media (max-width: 520px) { .mg-bar { gap: 6px; padding-left: 8px; padding-right: 8px; } .mg-bar button { padding: 0 12px; } .mg-count { min-width: 64px; } .mg-title { font-size: 13px; } }