@charset "utf-8";

/* =============================================================================
   公式テキスト（/textbook）と お寿司の歴史（/history）— 2026-10-27
   この 2 つの画面にだけ読み込む（layouts.app の @stack('head')）。トップページの節と、
   どこでも使う表紙 .tbCover・動画の絵 .histArt は styles.css 側。
   色・余白は design-system.css のトークン。モバイル優先: 基本＝スマホ、601px 以上・
   1025px 以上で広げる（docs/architecture.md §12 のブレークポイントだけを使う）。

   旧 CSS の汎用ルールに注意: `section { padding-top: 7rem }`、`header { position: fixed }`、
   `main h2/h3/p` の大きさと余白、`body { letter-spacing; font-weight: 300 }`。この画面の
   部品はすべてクラスで余白と文字を明示し、<header> は使わない。
   ========================================================================== */

/* ── 共通 ─────────────────────────────────────────────────────────────── */
/* styles.css の `html, body { overflow-x: hidden }` と `#container { overflow: hidden }` は
   body と #container をスクロールの箱にしてしまい、position: sticky（読む画面の横の目次）が
   ページと一緒に流れて行く。この画面では clip にする（はみ出しを切るのは同じ、スクロールの箱には
   ならない。#container の float の囲い込みは flow-root で保つ）。 */
body { overflow-x: clip;}
#container { overflow: clip; display: flow-root;}
main.learn { display: block; background: #fff; color: var(--ds-ink);}
/* 公式テキスト・お寿司の歴史のページでは、サイト共通の半透明ヘッダー（rgba(0,0,0,.3)）だと
   スクロールした本文が透けて読みにくいので、不透明に近い墨色にする（learn.css はこの 2 機能のページだけで読む） */
header { background: rgba(23, 19, 15, .94);}
.learnCrumbs { margin: 0 0 var(--ds-space-2); font-size: 13px; line-height: 1.6; letter-spacing: .04em;}
.learnCrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none;}
.learnCrumbs li { margin: 0;}
.learnCrumbs li + li::before { content: "›"; margin: 0 8px; color: var(--ds-muted-strong);}
.learnCrumbs a { color: var(--ds-muted-strong); text-decoration: underline; text-underline-offset: .25em;}
.learnCrumbs a:hover { color: var(--ds-primary);}
.learnCrumbs [aria-current] { color: var(--ds-ink);}
main.learn p.learnNote { display: flex; gap: var(--ds-space-1); align-items: flex-start; margin: 0; padding: 12px var(--ds-space-2); border-radius: var(--ds-radius); background: var(--ds-gold-50); border: 1px solid var(--ds-gold-100); color: var(--ds-ink); font-size: 14px; line-height: 1.7; letter-spacing: .02em;}
.learnNote__icon { flex: none; font-size: 16px; line-height: 1.5;}
.learnFree { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 12px; border-radius: 9999px; background: var(--ds-green-50); border: 1px solid var(--ds-green-100); color: var(--ds-green-700); font-size: 13px; font-weight: 700; line-height: 30px; letter-spacing: .04em;}
.learnFree::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-success);}
.learnLink { color: var(--ds-primary); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;}
.learnLink:hover { color: var(--ds-primary-dark);}
.learnLink:focus-visible, .learnBtnGhost:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px;}
.learnBtnGhost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1.5px solid currentColor; border-radius: 3px; color: var(--ds-ink); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-decoration: none;}
.learnBtnGhost:hover { background: var(--ds-cream); color: var(--ds-ink);}
.learnBtnGhost--onNight { color: var(--ds-on-night);}
.learnBtnGhost--onNight:hover { background: rgba(255,255,255,.08); color: #fff;}
main.learn .lpCta { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.4;}
main.learn .lpCta.is-disabled { background: #c9c4c1; box-shadow: none; cursor: default;}
.learnActions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;}

/* 学んだら検定へ（/textbook・/history の終わり） */
.learnNext { padding: 64px 16px 72px; background: var(--ds-app-bg); text-align: center;}
.learnNext__inner { max-width: 760px; margin: 0 auto;}
main.learn .learnNext__title { word-break: auto-phrase; text-wrap: balance; margin: 0 0 12px; color: var(--ds-primary); font-size: 24px; line-height: 1.5; letter-spacing: .06em; text-align: center;}
main.learn p.learnNext__text { margin: 0 auto 28px; max-width: 640px; font-size: 15px; line-height: 1.9; text-align: center;}
.learnNext .learnActions { justify-content: center;}
@media (min-width: 601px) {
  main.learn .learnNext__title { font-size: 30px;}
}

/* ── /textbook 一覧 ───────────────────────────────────────────────────── */
.tbHero { padding: calc(var(--ds-header-h) + 40px) 16px 40px; background: var(--ds-app-bg);}
.tbHero__inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ds-space-2);}
main.learn p.tbHero__eyebrow { margin: 0; color: var(--ds-muted-strong); font-size: 13px; font-weight: 700; letter-spacing: .24em;}
main.learn h1.tbHero__title { margin: 0; font-size: 32px; line-height: 1.35; letter-spacing: .08em; color: var(--ds-ink); font-weight: bold;}
main.learn p.tbHero__lead { margin: 0; max-width: 760px; font-size: 15px; line-height: 1.9; letter-spacing: .04em;}
.tbHero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;}
.tbHero__text { display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0;}
.tbSubjects { padding: 20px 20px 18px; border-radius: 10px; background: #fff; border: 1px solid var(--ds-line);}
main.learn p.tbSubjects__title { margin: 0 0 10px; color: var(--ds-primary); font-size: 14px; font-weight: 700; letter-spacing: .14em;}
.tbSubjects__list { margin: 0; padding: 0; list-style: none; counter-reset: subject; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px;}
.tbSubjects__list li { counter-increment: subject; display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: 14px; line-height: 1.6; font-weight: 700;}
.tbSubjects__list li::before { content: counter(subject); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ds-ink); color: #fff; font-size: 12px; line-height: 22px; text-align: center;}
main.learn p.tbSubjects__note { margin: 12px 0 0; color: var(--ds-muted-strong); font-size: 12px; line-height: 1.7;}

.tbShelf { max-width: 1080px; margin: 0 auto; padding: 40px 16px 24px; display: grid; gap: 56px;}
.tbBook { display: grid; grid-template-columns: 1fr; gap: 28px; scroll-margin-top: calc(var(--ds-header-h) + 16px);}
.tbBook__cover { width: 64%; max-width: 280px; margin: 0 auto;}
.tbBook__cover .tbCover { transform: perspective(1600px) rotateY(-4deg); transform-origin: left center;}
.tbBook__body { display: flex; flex-direction: column; gap: 14px; min-width: 0;}
main.learn p.tbBook__grade { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--ds-muted-strong);}
.tbSeal { display: inline-block; padding: 0 10px; background: var(--ds-primary); color: #fff; font-size: 14px; font-weight: 700; line-height: 28px; letter-spacing: .14em;}
main.learn h2.tbBook__title { word-break: auto-phrase; margin: 0; font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 26px; line-height: 1.4; letter-spacing: .06em; color: var(--ds-ink); font-weight: 700;}
main.learn p.tbBook__subtitle { margin: -8px 0 0; color: var(--ds-muted-strong); font-size: 14px; letter-spacing: .04em;}
main.learn p.tbBook__tagline { margin: 0; font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; color: var(--ds-primary-dark); font-size: 17px; font-weight: 700; letter-spacing: .12em;}
main.learn p.tbBook__desc { margin: 0; font-size: 15px; line-height: 1.9; letter-spacing: .04em;}
.tbStats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0 0; padding: 14px 0; border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line);}
.tbStats div { display: flex; flex-direction: column-reverse; margin: 0;}
.tbStats dt { font-size: 12px; color: var(--ds-muted-strong); letter-spacing: .1em; line-height: 1.6;}
.tbStats dd { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums;}
.tbStats dd small { font-size: 13px; margin-left: 2px;}
.tbBuy { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 16px; border-radius: var(--ds-radius); background: var(--ds-app-bg);}
.tbBuy div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0;}
.tbBuy dt { font-size: 13px; font-weight: 700; color: var(--ds-muted-strong); letter-spacing: .08em;}
.tbBuy dd { margin: 0; font-size: 15px; font-weight: 700;}
.tbBuy__soon { display: inline-block; padding: 0 10px; border-radius: 9999px; background: var(--ds-cream); color: var(--ds-ink); font-size: 13px; line-height: 26px; letter-spacing: .06em;}
.tbBuy__download { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 40px; border: 1px dashed var(--ds-muted); border-radius: 3px; background: transparent; color: var(--ds-muted-strong); font-size: 13px; font-weight: 700; letter-spacing: .04em; cursor: not-allowed;}
.tbBook__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 6px;}
.tbBook__actions .lpCta { flex: 1 1 100%;}
.tbBook__actions .tbResume { flex: 1 1 100%;}
.tbResume { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-left: 3px solid var(--ds-primary); background: var(--ds-red-50); color: var(--ds-ink); font-size: 13px; line-height: 1.5; text-decoration: none;}
.tbResume[hidden] { display: none;}
.tbResume strong { color: var(--ds-primary-dark); font-size: 12px; letter-spacing: .1em;}
.tbResume:hover { background: var(--ds-red-100); color: var(--ds-ink);}
.tbBook__toc { margin-top: 6px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: #fff;}
.tbBook__toc > summary { position: relative; list-style: none; cursor: pointer; padding: 14px 48px 14px 16px; font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: .06em;}
.tbBook__toc > summary::-webkit-details-marker { display: none;}
.tbBook__toc > summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ds-primary); font-size: 22px;}
.tbBook__toc[open] > summary::after { content: "−";}
.tbBook__toc > summary:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px;}
.tbBook__toc .tbToc { padding: 0 16px 16px;}
@media (min-width: 601px) {
  .tbBook__actions .lpCta, .tbBook__actions .tbResume { flex: 0 1 auto;}
  .tbHero { padding-top: calc(var(--ds-header-h) + 56px); padding-bottom: 48px;}
  main.learn h1.tbHero__title { font-size: 40px;}
  .tbBook { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start;}
  .tbBook__cover { width: 100%; position: sticky; top: calc(var(--ds-header-h) + 24px);}
  main.learn h2.tbBook__title { font-size: 30px;}
}
@media (min-width: 1025px) {
  .tbHero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center;}
  .tbShelf { padding-top: 56px; gap: 72px;}
  .tbBook { grid-template-columns: 300px minmax(0, 1fr); gap: 56px;}
  .tbBuy { grid-template-columns: 1fr 1fr;}
}

/* 目次（一覧の開閉・読む画面の横・スマホの開閉で共通） */
.tbToc { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; letter-spacing: .02em;}
.tbToc ol { margin: 0; padding: 0; list-style: none;}
.tbToc li { margin: 0;}
.tbToc__part + .tbToc__part { margin-top: 14px;}
main.learn p.tbToc__partLabel { margin: 0 0 4px; padding: 6px 0 4px; border-bottom: 1px solid var(--ds-line); color: var(--ds-primary-dark); font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1.5;}
.tbToc__link { display: flex; gap: 10px; padding: 7px 8px; border-radius: 6px; color: var(--ds-ink); text-decoration: none;}
a.tbToc__link:hover { background: var(--ds-cream); color: var(--ds-ink);}
a.tbToc__link:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 1px;}
.tbToc__num { flex: 0 0 4.2em; color: var(--ds-muted-strong); white-space: nowrap; font-variant-numeric: tabular-nums;}
.tbToc__item.is-current > .tbToc__link { background: var(--ds-red-50); color: var(--ds-primary-dark); font-weight: 700;}
.tbToc__item.is-current > .tbToc__link .tbToc__num { color: var(--ds-primary-dark);}
.tbToc .tbToc__secs { margin: 2px 0 6px calc(4.2em + 18px); border-left: 1px solid var(--ds-line);}
.tbToc__secs a { display: block; padding: 4px 10px; color: var(--ds-muted-strong); font-size: 13px; line-height: 1.5; text-decoration: none;}
.tbToc__secs a:hover, .tbToc__secs a.is-active { color: var(--ds-primary-dark);}
.tbToc__secs a.is-active { font-weight: 700; box-shadow: inset 2px 0 0 var(--ds-primary); margin-left: -1px;}

/* ── 読む画面 /textbook/{level}/{chapter} ─────────────────────────────── */
.tbProgress { position: fixed; z-index: 10001; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;}
.tbProgress i { display: block; width: 0; height: 100%; background: var(--ds-primary); transition: width .1s linear;}
.tbRead { padding: calc(var(--ds-header-h) + 20px) 0 0;}
.tbRead__top { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 12px;}
.tbRead__layout { max-width: 1200px; margin: 0 auto; padding: 8px 16px 0;}
.tbRead__side { display: none;}
.tbRead__main { max-width: 44rem; min-width: 0; margin: 0 auto;}
.tbRead__toc { margin: 8px 0 24px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: #fff; scroll-margin-top: calc(var(--ds-header-h) + 8px);}
.tbRead__toc > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; padding: 12px 16px; font-size: 14px; line-height: 1.5;}
.tbRead__toc > summary::-webkit-details-marker { display: none;}
.tbRead__toc > summary::after { content: "▾"; margin-left: auto; color: var(--ds-primary); transition: transform .15s;}
.tbRead__toc[open] > summary::after { transform: rotate(180deg);}
.tbRead__toc > summary:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px;}
.tbRead__tocLabel { flex: none; padding: 0 10px; border-radius: 9999px; background: var(--ds-ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 24px; letter-spacing: .1em;}
.tbRead__tocHere { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-muted-strong);}
.tbRead__toc .tbToc { padding: 0 12px 14px; max-height: 60vh; overflow-y: auto;}

/* 本文: 教本の組版（public/textbooks/<book>/book.css）をサイトの中に置くための調整だけ。
   書き出された CSS は .tb-doc の内側にしか効かないが、サイトの旧 CSS は外から入って来る
   （header を fixed に、h3 を赤に、section に上余白を、body の字間と細字を継承）。 */
.tbRead .tb-doc { --bar: var(--ds-header-h); background: transparent; letter-spacing: normal; font-weight: 400;}
.tb-doc header { position: static; z-index: auto; width: auto; background: none; padding: 0;}
.tb-doc section { padding-top: 0;}
.tb-doc h1, .tb-doc h2, .tb-doc h3, .tb-doc h4, .tb-doc h5 { color: inherit; text-align: left;}
.tb-doc h3, .tb-doc h4 { scroll-margin-top: calc(var(--ds-header-h) + 16px);}
.tbRead__doc > .tb-chapter { margin-top: 0;}
.tbRead__part { margin: 0 0 32px;}
.tbRead__part.tb-doc .tb-part-divider { margin: 0;}

/* 章の終わり: この本は何級の筆記に出るか → 検定へ */
.tbExam { margin: 56px 0 0; padding: 28px 20px; border-radius: 10px; background: var(--ds-night); color: var(--ds-on-night); text-align: left;}
main.learn p.tbExam__eyebrow { margin: 0 0 6px; color: var(--ds-on-night-muted); font-size: 12px; font-weight: 700; letter-spacing: .2em;}
main.learn h2.tbExam__title { word-break: auto-phrase; text-wrap: balance; margin: 0 0 10px; color: #fff; font-size: 20px; line-height: 1.6; letter-spacing: .04em; font-weight: 700;}
main.learn p.tbExam__text { margin: 0 0 20px; color: var(--ds-on-night-muted); font-size: 14px; line-height: 1.9;}
.tbExam .learnLink { color: #fff;}

.tbPager { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 32px 0 0;}
.tbPager__link { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: #fff; color: var(--ds-ink); text-decoration: none; line-height: 1.6;}
.tbPager__link:hover { border-color: var(--ds-primary); color: var(--ds-ink); box-shadow: var(--ds-shadow-soft);}
.tbPager__link:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px;}
.tbPager__dir { color: var(--ds-primary); font-size: 13px; font-weight: 700; letter-spacing: .1em;}
.tbPager__title { font-size: 15px; font-weight: 700;}
.tbPager__link--next { text-align: right;}
.tbRead__end { height: 96px;}

/* スマホ・タブレットの下のバー: 前の章 / 目次 / 次の章。下へ読み進めている間は引っ込む */
.tbBar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.94); border-top: 1px solid var(--ds-line); backdrop-filter: blur(8px); transition: transform .25s ease;}
.tbBar.is-hidden { transform: translateY(110%);}
.tbBar__btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 9999px; color: var(--ds-ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-decoration: none; white-space: nowrap;}
.tbBar__btn:hover { background: var(--ds-cream); color: var(--ds-ink);}
.tbBar__btn:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 1px;}
.tbBar__btn--prev { justify-content: flex-start;}
.tbBar__btn--next { justify-content: flex-end;}
.tbBar__btn--toc { background: var(--ds-ink); color: #fff; padding: 0 20px;}
.tbBar__btn--toc:hover { background: #000; color: #fff;}
.tbBar__btn--toc small { font-size: 12px; font-weight: 400; opacity: .8;}
.tbBar__btn.is-empty { visibility: hidden;}
@media (min-width: 601px) {
  .tbPager { grid-template-columns: 1fr 1fr;}
  .tbPager__link--next:only-child { grid-column: 2;}
  .tbExam { padding: 32px 36px;}
}
@media (min-width: 1025px) {
  .tbRead { padding-top: calc(var(--ds-header-h) + 28px);}
  .tbRead__top, .tbRead__layout { max-width: calc(280px + 56px + 44rem + 48px); padding-left: 24px; padding-right: 24px;}
  .tbRead__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start;}
  .tbRead__main { margin: 0;}
  .tbRead__side { display: block; position: sticky; top: calc(var(--ds-header-h) + 16px); max-height: calc(100vh - var(--ds-header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 24px 0;}
  .tbRead__toc, .tbBar { display: none;}
  .tbRead__end { height: 72px;}
}
.tbSideBook { display: flex; gap: 12px; align-items: center; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--ds-line); color: var(--ds-ink); text-decoration: none;}
.tbSideBook .tbCover { width: 56px; flex: none; box-shadow: 0 2px 8px -2px rgba(0,0,0,.35);}
.tbSideBook__title { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 15px; font-weight: 700; line-height: 1.5;}
.tbSideBook__all { display: block; margin-top: 2px; color: var(--ds-muted-strong); font-size: 12px;}
.tbSideBook:hover .tbSideBook__all { color: var(--ds-primary);}

/* 読めないとき（free_access=false） */
.tbLocked { max-width: 720px; margin: 0 auto; padding: calc(var(--ds-header-h) + 48px) 16px 80px; text-align: center;}
.tbLocked .tbCover { width: 160px; margin: 0 auto 28px;}
main.learn h1.tbLocked__title { margin: 0 0 12px; font-size: 24px; line-height: 1.5; letter-spacing: .06em; text-align: center;}
main.learn p.tbLocked__text { margin: 0 auto 28px; font-size: 15px; line-height: 1.9; text-align: center;}
.tbLocked .learnActions { justify-content: center;}

/* ── /history ─────────────────────────────────────────────────────────── */
.histStage { padding: calc(var(--ds-header-h) + 24px) 0 48px; background: var(--ds-night); color: var(--ds-on-night);}
.histStage__inner { max-width: 1120px; margin: 0 auto; padding: 0 16px;}
.histStage .learnCrumbs a { color: var(--ds-on-night-muted);}
.histStage .learnCrumbs a:hover { color: #fff;}
.histStage .learnCrumbs [aria-current] { color: var(--ds-on-night);}
.histStage .learnCrumbs li + li::before { color: var(--ds-on-night-muted);}
.histHead { margin: 0 0 20px;}
main.learn p.histHead__eyebrow { margin: 0 0 6px; color: var(--ds-on-night-muted); font-size: 12px; font-weight: 700; letter-spacing: .24em;}
main.learn .histHead__title { margin: 0; color: #fff; font-size: 28px; line-height: 1.4; letter-spacing: .08em; font-weight: bold;}
main.learn p.histHead__lead { margin: 8px 0 0; color: var(--ds-on-night-muted); font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 16px; line-height: 1.8; letter-spacing: .06em;}
.histStage main.learn p.learnNote, .histStage p.learnNote { margin-top: 12px;}

.histPlayer { position: relative;}
.histPlayer__frame { position: relative; margin: 0 -16px; aspect-ratio: 16 / 9; background: #000; overflow: hidden;}
.histPlayer__frame .histArt { position: absolute; inset: 0;}
.histPlayer__video { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; background: transparent;}
.histPlayer__soon { position: absolute; z-index: 3; right: 6%; top: 8%; padding: 0 12px; border-radius: 9999px; background: rgba(255,255,255,.92); color: var(--ds-ink); font-size: 13px; font-weight: 700; line-height: 30px; letter-spacing: .06em;}
/* 上に出す（下は標準の操作バー。押せなくならないように） */
.histPlayer__error { position: absolute; z-index: 4; left: 0; right: 0; top: 0; padding: 14px 16px; background: rgba(23,19,15,.9); color: #fff; font-size: 14px; line-height: 1.7; letter-spacing: .02em;}
.histPlayer__error[hidden] { display: none;}
.histControls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 14px 0 0;}
.histControls__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0;}
.histControls__label { margin-right: 4px; color: var(--ds-on-night-muted); font-size: 12px; font-weight: 700; letter-spacing: .12em;}
.histChip { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 9999px; background: transparent; color: var(--ds-on-night); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; cursor: pointer;}
.histChip:hover { border-color: #fff; color: #fff;}
.histChip[aria-pressed="true"] { background: var(--ds-on-night); border-color: var(--ds-on-night); color: var(--ds-night);}
.histChip:focus-visible { outline: 2px solid #fff; outline-offset: 2px;}
.histChip--toggle::before { content: ""; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 2px solid currentColor;}
.histChip--toggle[aria-pressed="true"]::before { background: var(--ds-primary); border-color: var(--ds-primary);}

.histNow { margin: 24px 0 0; display: grid; gap: 12px;}
main.learn p.histNow__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ds-on-night-muted); font-size: 13px; font-weight: 700; letter-spacing: .12em;}
.histNow__num { color: #fff; background: var(--ds-primary); padding: 0 10px; line-height: 26px;}
.histNow__time { line-height: 26px;}
main.learn .histNow__title { word-break: auto-phrase; text-wrap: balance; margin: 0; color: #fff; font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 24px; line-height: 1.45; letter-spacing: .04em; font-weight: 700;}
.histNow__sub { display: block; margin-top: 4px; color: var(--ds-on-night-muted); font-size: 16px; letter-spacing: .06em;}
main.learn p.histNow__summary { margin: 0; max-width: 760px; color: var(--ds-on-night); font-size: 15px; line-height: 1.95; letter-spacing: .03em;}
.histNow .learnActions { margin-top: 8px;}
main.learn p.histNow__books { margin: 0; color: var(--ds-on-night-muted); font-size: 13px; line-height: 1.8;}
.histNow__books a { color: var(--ds-on-night); text-decoration: underline; text-underline-offset: .25em;}
.histNow__books a:hover { color: #fff;}

main.learn section.histList { max-width: 1120px; margin: 0 auto; padding: 48px 16px 56px;}
main.learn h2.histList__title { margin: 0 0 20px; color: var(--ds-ink); font-size: 22px; line-height: 1.5; letter-spacing: .08em; text-align: left;}
.histCards { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0; list-style: none;}
.histCards li { margin: 0;}
.histCard { display: flex; flex-direction: column; gap: 10px; height: 100%; color: var(--ds-ink); text-decoration: none;}
.histCard .histArt { border-radius: var(--ds-radius); box-shadow: 0 10px 24px -14px rgba(0,0,0,.55);}
.histCard:hover { color: var(--ds-ink);}
.histCard:hover .histCard__title { color: var(--ds-primary);}
.histCard:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 4px; border-radius: var(--ds-radius);}
.histCard__num { color: var(--ds-primary); font-size: 12px; font-weight: 700; letter-spacing: .16em;}
.histCard__title { word-break: auto-phrase; font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .03em;}
.histCard__sub { color: var(--ds-muted-strong); font-size: 14px; line-height: 1.6;}
.histCard__now { position: absolute; z-index: 3; left: 10px; top: 10px; padding: 0 10px; border-radius: 9999px; background: var(--ds-primary); color: #fff; font-size: 12px; font-weight: 700; line-height: 24px; letter-spacing: .08em;}
.histCard[aria-current] .histArt { box-shadow: 0 0 0 3px var(--ds-primary), 0 10px 24px -14px rgba(0,0,0,.55);}
/* スマホ: 絵を左、題を右に並べて 3 話を 1 画面に収める */
@media (max-width: 600px) {
  .histCard { display: grid; grid-template-columns: 44% minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 2px; align-items: start;}
  .histCard .histArt { grid-row: 1 / 4; width: 100%;}
  .histCard .histArt__play { left: 6px; bottom: 6px; width: 30px; height: 30px; margin: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.9);}
  .histCard .histArt__play::after { left: 11px; top: 8px; border-width: 7px 0 7px 11px;}
  .histCard .histArt__time { right: 6px; bottom: 6px; padding: 0 8px; font-size: 11px; line-height: 20px;}
  .histCard .histCard__now { left: 6px; top: 6px; font-size: 11px; line-height: 20px; padding: 0 8px;}
  .histCard__title { font-size: 16px;}
  .histCard__sub { font-size: 13px;}
}
@media (min-width: 601px) {
  .histPlayer__frame { margin: 0; border-radius: 10px;}
  main.learn .histHead__title { font-size: 36px;}
  main.learn .histNow__title { font-size: 30px;}
  .histCards { grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 1025px) {
  .histStage { padding-top: calc(var(--ds-header-h) + 36px); padding-bottom: 64px;}
  .histNow { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: start;}
  .histNow > * { grid-column: 1;}
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .tbBar, .tbProgress i { transition: none;}
}

/* 部扉の題（章の h2 より上の見出しなので p で組み、見た目だけ教本の部扉に合わせる） */
.tbRead__part .tb-pd-cap .tbRead__partTitle { margin: .4rem 0 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 700; line-height: 1.3; letter-spacing: .06em;}
.tbRead__part .tb-pd-photo .tbRead__partTitle { color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,.4);}
.tbRead__part .tb-part-divider > .tb-pd-cap { padding: 1.2rem 0 0;}

/* 確認問題: 「答えを見る」が長い問いの 1 行目に重なる（教本の組版のまま）。PC は右に場所を空け、
   スマホは問いの下に回す。 */
.tbRead .tb-doc .tb-quiz summary { padding-right: 6.5rem;}
@media (max-width: 600px) {
  .tbRead .tb-doc .tb-quiz summary { padding-right: 1.1rem;}
  .tbRead .tb-doc .tb-quiz summary::after { position: static; display: block; margin-top: .4rem; text-align: right;}
}
.tbRead__part .tb-pd-cap p { margin: 0;}
.tbRead__part .tb-pd-cap .tb-psub { margin-top: .35rem;}
.histControls[hidden] { display: none;}