/*
 * アニメニュース.jp 共通スタイル（第5版）
 *
 * 見た目の方針
 * - アニメらしさは、作品の画像（表紙・Blu-rayのパッケージ）と「放送中」などの目印で出す。
 *   画面の飾り（吹き出し・丸文字・太い枠・ずらした影）は使わない（第4版で「子ども向けっぽい」との指摘）。
 * - 色は淡く落ち着いた紫系。広い面に濃い色を使わない（第3版で「目に痛い」との指摘）。
 *   濃い色は、ボタン・リンク・栞・放送中の目印など、小さな面だけ。
 * - 文字：見出し・ロゴ・ボタンは Zen Kaku Gothic New（角ゴシック）、本文は読みやすい標準のゴシック。
 * - 段をそろえる：表紙の枠は常に同じ縦横比（1:1.42）。画像は切り取らずに収め、画像がなくても同じ枠を出す。
 * - 読みやすさ：本文17〜18px・行間広め、押せる大きさ、色だけに頼らない。
 */
:root {
  --page: #F6F5FA;
  --surface: #FFFFFF;
  --ink: #24213A;
  --ink-soft: #4F4B66;
  --muted: #67637C;
  --line: #E4E1EC;
  --line-strong: #CBC6DA;

  --accent: #6650D6;        /* ボタン・リンク */
  --accent-deep: #4E3AB8;
  --accent-wash: #EFECFB;
  --accent-tint: #F8F7FE;
  --rose: #B4446A;          /* 栞・放送中 */
  --rose-wash: #FBEAF0;
  --gold: #E3B341;          /* 栞の房 */

  --ok: #1D7447;
  --ok-wash: #E8F5EE;
  --est: #855400;
  --est-wash: #FFF4D2;
  --edit: #4E3AB8;
  --edit-wash: #EFECFB;

  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --font-display: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

  --step--1: 0.88rem;
  --step-0: 1.0625rem;   /* 17px */
  --step-1: 1.2rem;
  --step-2: 1.45rem;
  --step-3: 1.9rem;

  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 6px;
  --measure: 40em;
}
@media (min-width: 720px) {
  :root { --step-0: 1.125rem; } /* 18px */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.85;
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.45; letter-spacing: 0.04em; font-feature-settings: "palt"; margin: 0; word-break: auto-phrase; text-wrap: pretty; }
p { margin: 0 0 1em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: 0.6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }

/* ---------- ヘッダー ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner {
  max-width: 72rem; margin: 0 auto; padding: 0.85rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
}
.brand { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; line-height: 1.3; }
.brand:hover { color: var(--ink); }
.brand__name { font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; letter-spacing: 0.04em; font-feature-settings: "palt"; }
.brand__tld { color: var(--accent); }
.brand__tagline { font-size: 0.78rem; color: var(--muted); }
.search--header { flex: 1 1 22rem; display: flex; gap: 0.5rem; max-width: 34rem; margin-left: auto; min-width: 0; }
/* トップは、狭い画面ではすぐ下に大きな検索窓があるので、ヘッダーの検索窓は広い画面だけ */
@media (max-width: 719.98px) { .search--header-home { display: none; } }

.site-nav { border-top: 1px solid var(--line); }
.site-nav__list {
  max-width: 72rem; margin: 0 auto; padding: 0 1rem; list-style: none;
  display: flex; gap: 1.75rem; overflow-x: auto; scrollbar-width: none;
}
.site-nav__list::-webkit-scrollbar { display: none; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 2.9rem; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink-soft); text-decoration: none;
  box-shadow: inset 0 -3px 0 transparent;
}
.site-nav__link:hover { color: var(--ink); box-shadow: inset 0 -3px 0 var(--line-strong); }
.site-nav__link.is-current { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }

/* ---------- 検索 ---------- */
.search__input {
  flex: 1; width: 100%; min-width: 0; min-height: 3rem; padding: 0.5rem 0.95rem;
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.search__input::placeholder { color: #7B778F; }
.search__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.search__row { display: flex; gap: 0.5rem; min-width: 0; }
.search__label { display: block; font-family: var(--font-display); font-weight: 700; margin-bottom: 0.4rem; }
/* 略称でも探せることを、目立たせずに添える */
.search__hint { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted); }
.search__button { flex: none; }

/* ---------- ボタン ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 3rem; padding: 0.5rem 1.2rem;
  font-family: var(--font-display); font-weight: 700; font-size: inherit; line-height: 1.4;
  text-decoration: none; text-align: center; cursor: pointer;
  border: 1px solid transparent; border-radius: 8px;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.button--primary, .button--buy { background: var(--accent); color: #fff; }
.button--primary:hover, .button--buy:hover { background: var(--accent-deep); color: #fff; }
.button--secondary, .button--shop { background: var(--surface); color: var(--accent-deep); border-color: var(--line-strong); }
.button--secondary:hover, .button--shop:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-deep); }
/* お店・サービスのボタン：飛び先がひと目で分かる色にする（ロゴは使わない）。
   色を確かめたサービスだけ指定し、それ以外は標準の見た目。サービス名と data-out の対応は Links::SERVICE_SLUGS */
.button[data-out="amazon"] { background: #FF9900; border-color: #E88B00; color: #111111; }
.button[data-out="amazon"]:hover { background: #F08804; border-color: #D67D00; color: #111111; }
.button[data-out="rakuten"] { background: #BF0000; border-color: #A80000; color: #FFFFFF; }
.button[data-out="rakuten"]:hover { background: #A00000; border-color: #8C0000; color: #FFFFFF; }
.button[data-out="unext"] { background: #000000; border-color: #000000; color: #FFFFFF; }
.button[data-out="unext"]:hover { background: #2A2A2A; color: #FFFFFF; }
.button[data-out="netflix"] { background: #E50914; border-color: #C80812; color: #FFFFFF; }
.button[data-out="netflix"]:hover { background: #C80812; color: #FFFFFF; }
.button[data-out="primevideo"] { background: #00A8E1; border-color: #0092C4; color: #0F1111; }
.button[data-out="primevideo"]:hover { background: #0092C4; color: #0F1111; }
.button[data-out="disneyplus"] { background: #0063E5; border-color: #0052BE; color: #FFFFFF; }
.button[data-out="disneyplus"]:hover { background: #0052BE; color: #FFFFFF; }
.button[data-out="hulu"] { background: #1CE783; border-color: #17C46F; color: #0B0C0F; }
.button[data-out="hulu"]:hover { background: #17C46F; color: #0B0C0F; }
.button[data-out="bookwalker"] { background: #1B4B9B; border-color: #163E80; color: #FFFFFF; }
.button[data-out="bookwalker"]:hover { background: #163E80; color: #FFFFFF; }
.button--small { min-height: 2.75rem; padding: 0.3rem 0.9rem; font-size: var(--step--1); }
.button--wide { width: 100%; }
.button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- 共通の枠 ---------- */
.main { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3.5rem; }
.page { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; }
.page--narrow { max-width: 46rem; margin: 0 auto; }
.page__title { font-size: var(--step-3); margin-bottom: 0.75rem; }
.page__lead { color: var(--ink-soft); }
.prose h2 { font-size: var(--step-2); margin: 2rem 0 0.75rem; }
.prose ul { padding-left: 1.4em; }
.prose li { margin-bottom: 0.4em; }
.breadcrumb ol { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: var(--step--1); color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin: 0 0.35rem 0 0.1rem; color: var(--line-strong); }
.note { background: var(--accent-tint); border: 1px solid var(--line); padding: 0.8rem 1rem; border-radius: var(--radius); }
.note p:last-child { margin-bottom: 0; }
.empty { padding: 1rem 1.1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--ink-soft); background: var(--surface); }
.fineprint { font-size: var(--step--1); color: var(--muted); }
.block-title { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step-2); margin: 2.75rem 0 1.1rem; }
.block-title::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--accent); }

/* ---------- トップ ---------- */
.hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 2.25rem 2rem; }
.hero__title { font-weight: 900; font-size: clamp(1.55rem, 3.4vw, 2.35rem); line-height: 1.4; margin-bottom: 0.9rem; }
.hero__title span { display: block; }
.hero__lead { max-width: var(--measure); color: var(--ink-soft); margin-bottom: 1.25rem; }
.search--hero { max-width: 36rem; }
/* ページの中の検索欄（見つからないときなど）：下に続くボタンとくっつかないよう、区切りの線と余白を置く */
.search--page { margin: 1.25rem 0 0; }
.page__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.search--hero .search__input { min-height: 3.4rem; font-size: 1.1rem; }
.search--hero .search__button { min-width: 6rem; min-height: 3.4rem; font-size: 1.05rem; }
.hero__covers { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; align-items: flex-start; }
.hero__covers li { width: 9.5rem; }
.hero__covers--1 li { width: 11.5rem; }
.hero__cover { display: block; text-decoration: none; color: var(--ink); }
.hero__cover:hover { color: var(--ink); }
.hero__cover:hover .cover__frame { border-color: var(--accent); }
.hero__cover-title { display: block; margin-top: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; line-height: 1.45; }

/* 作品の一覧：棚（表紙を大きく）と、横長のカード */
.worklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.worklist--list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.worklist--shelf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 1.75rem 1.25rem; }
.worklist__item { min-width: 0; }
.worklist__link { display: grid; gap: 0.5rem; height: 100%; text-decoration: none; color: var(--ink); }
.worklist__link:hover { color: var(--ink); }
.worklist__link:hover .worklist__title { text-decoration: underline; text-decoration-color: var(--accent); }
.worklist__link:hover .cover__frame { border-color: var(--accent); }
.worklist--list .worklist__link {
  grid-template-columns: auto 1fr; align-items: start; gap: 1rem; padding: 0.85rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.worklist--list .worklist__link:hover { border-color: var(--accent); }
.worklist--shelf .worklist__link { grid-template-rows: auto 1fr; align-content: start; }
.worklist__visual { position: relative; display: block; }
.worklist--list .worklist__visual { width: 5.75rem; }
.worklist__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.worklist__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.4; }
.worklist--shelf .worklist__title { font-size: 1rem; }
.worklist__kana { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
.worklist__media, .worklist__features { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: flex-start; align-content: flex-start; }
.worklist--list .worklist__kana:empty, .worklist--list .worklist__media:empty { display: none; }
.worklist--shelf .worklist__features { display: none; }
.worklist-note { margin-top: 1.5rem; font-size: var(--step--1); color: var(--muted); }
/* トップの棚の下：作品一覧へ */
.shelf-more { margin: 1.75rem 0 0; text-align: center; }
.shelf-more__button { min-width: min(100%, 20rem); }
@media (max-width: 640px) { .shelf-wrap--home .worklist__item:nth-child(n+9) { display: none; } } /* スマホは8作品（4段） */

/* 五十音の目次（作品一覧・入口のページ）。作品のない行も同じ位置に出し、押せない形にする */
.kana-index { margin: 0 0 0.5rem; }
.kana-index__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kana-index__link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.7rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
a.kana-index__link:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-wash); }
.kana-index__link--empty { color: var(--line-strong); background: transparent; border-style: dashed; }
.kana-group { scroll-margin-top: 1rem; }
.kana-group__title {
  display: flex; align-items: baseline; gap: 0.75rem; margin: 2.25rem 0 1rem; padding-bottom: 0.45rem;
  font-size: var(--step-1); border-bottom: 2px solid var(--line);
}
.kana-group__count { font-family: var(--font-body, inherit); font-size: var(--step--1); font-weight: 400; color: var(--muted); }
@supports (grid-template-rows: subgrid) {
  /* 棚：表紙・題名・読み・種類の段を、横に並んだ作品どうしでそろえる */
  .worklist--shelf .worklist__item { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.4rem; }
  .worklist--shelf .worklist__link { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.4rem; }
  .worklist--shelf .worklist__body { display: contents; }
}
.feature-chip { display: inline-block; padding: 0 0.5em; font-size: 0.75rem; line-height: 1.75; color: var(--ink-soft); background: #F1F0F5; border-radius: 4px; }

/* 作品の種類（原作小説・漫画・アニメ・劇場版） */
.media-tag {
  display: inline-block; padding: 0.05em 0.55em; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; line-height: 1.6;
  color: var(--ink-soft); background: #F1F0F5;
}
.media-tag--novel { color: #8A4A12; background: #FCEFE3; }
.media-tag--manga { color: var(--accent-deep); background: var(--accent-wash); }
.media-tag--anime { color: #9A3157; background: var(--rose-wash); }
.media-tag--film { color: #1F6B62; background: #E5F4F2; }

/* 放送中などの目印 */
.badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.badge {
  display: inline-flex; align-items: center; gap: 0.35em; padding: 0.1em 0.55em; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; line-height: 1.55; word-break: keep-all;
}
.badge--live { color: #fff; background: var(--rose); }
.badge--live::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: #fff; }
.badge--info { color: #5E4300; background: #FFEDB8; }
/* 表紙の枠の上側に重ねる目印。枠を「目印の段（残りの高さ）＋答えの札」に分け、目印の段に入りきらない目印は
   次の列へ折り返して枠の外に出る（見えない）。目印が答えに重なることはない（全部の目印は作品ページに出る） */
.cover__frame.cover__frame--badged { display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: 0.5rem; align-items: end; justify-items: stretch; }
.cover__frame.cover__frame--badged:not(.answer-cover) { grid-template-rows: auto minmax(0, 1fr); align-items: center; justify-items: center; }
.badges--on-cover {
  align-self: stretch; justify-self: stretch; min-height: 0; overflow: hidden;
  flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 0.25rem 1rem;
  margin: calc(-3px - 0.25rem) -3px -3px; padding: 3px; /* 影が切れないように。上は ::before の分も戻す */
}
/* 高さ0の先頭：これがあるので、1つ目の目印も入りきらなければ折り返して隠れる（途中で切れた目印を出さない） */
.badges--on-cover::before { content: ""; width: 100%; height: 0; }
.cover__frame--badged:not(.answer-cover) .badges--on-cover { align-self: start; }
.badges__slot { display: flex; width: 100%; }
.badges--on-cover .badge { max-width: 100%; box-shadow: 0 1px 3px rgba(36, 33, 58, 0.25); }

/* 困りごとから探す */
.purpose-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0.9rem; }
.purpose {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; height: 100%;
  padding: 1rem 1.1rem; background: var(--surface); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.purpose:hover { color: var(--ink); border-color: var(--accent); }
.purpose__text { display: flex; flex-direction: column; gap: 0.15rem; }
.purpose__label { font-family: var(--font-display); font-weight: 700; line-height: 1.5; }
.purpose:hover .purpose__label { color: var(--accent-deep); }
.purpose__hint { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }
.purpose__count { font-size: 0.78rem; color: var(--muted); }
.purpose__covers { display: flex; }
.purpose__covers .cover { width: 2.6rem; }
.purpose__covers .cover + .cover { margin-left: -1rem; }
.purpose__covers .cover__frame { box-shadow: 0 0 0 2px var(--surface); }

/* ---------- 作品ページ ---------- */
.work { max-width: 50rem; margin: 0 auto; }
.pr-label { display: inline-block; margin: 0 0 0.5rem; font-size: 0.75rem; line-height: 1.6; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 0.4em; }
.work-head {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); grid-template-areas: "visual main" "visual body";
  gap: 0.25rem 1.75rem; align-items: start;
  padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.work-head__visual { grid-area: visual; margin: 0; text-align: center; }
.work-head__visual figcaption { margin-top: 0.4rem; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
/* 表紙の下のお店のボタン：枠の幅いっぱいに縦に並べる（2つの幅をそろえ、文字が折り返さないように） */
.work-head__visual .buy { display: grid; grid-template-columns: minmax(0, 1fr); }
.work-head__visual .buy .button { justify-content: center; white-space: nowrap; }
.work-head__main { grid-area: main; }
.work-head__body { grid-area: body; }
.work-head__title { font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.3; }
.work-head__kana { margin: 0.2rem 0 0.7rem; color: var(--muted); font-size: var(--step--1); }
.work-head__main .badges { margin-bottom: 0.5rem; }
.work-head__media { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.9rem; }
.work-head__summary { max-width: var(--measure); }
.work-head__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; font-size: var(--step--1); color: var(--muted); }

/* この作品で分かること */
.answers { margin: 0.5rem 0 1.5rem; }
.answers__title { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step-2); margin: 2.25rem 0 1rem; }
.answers__title::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--accent); }
/* 答えが1つだけのときは横いっぱいに広げる（右に空いた列を残さない。auto-fit） */
.answers__list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.answer {
  display: flex; flex-direction: column; gap: 0.8rem; padding: 0 1rem 1.1rem 0.9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink);
}
.answer--plain { padding-top: 1rem; }
.answer__main { display: flex; gap: 0.9rem; align-items: flex-start; }
.answer__main > .cover { width: 4.6rem; }
.answer__text { display: grid; gap: 0.3rem; align-content: start; padding-top: 0.85rem; min-width: 0; }
.answer--plain .answer__text { padding-top: 0; }
.answer__text p { margin: 0; }
.answer__q { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; line-height: 1.6; color: var(--accent-deep); }
.answer__a { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.5; }
.answer__covered { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }
.answer__flag { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--est); background: var(--est-wash); padding: 0 0.45em; border-radius: 4px; vertical-align: 0.1em; }
.answer__buy { margin-top: auto; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.85rem; align-items: center; }
.answer__buy--no-cover { grid-template-columns: 1fr; }
.answer__actions { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
.answer__actions .button { padding: 0.5rem 0.8rem; }
.answer__more { font-size: var(--step--1); justify-self: start; }
.answer__services { margin-top: auto; padding: 0.7rem 0.8rem; background: #F3F9F8; border: 1px solid #D3E9E5; border-radius: var(--radius); }
.answer__services-label { margin: 0 0 0.45rem; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: #1F6B62; }
@supports (grid-template-rows: subgrid) {
  /* 同じ段に並んだ答えは、「答え」「画像と購入ボタン」「詳しい説明」の高さをそろえる */
  .answer { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.8rem; }
  .answer > .answer__main, .answer > .answer__text { grid-row: 1; }
  .answer > .answer__buy, .answer > .answer__actions, .answer > .answer__services { grid-row: 2; margin-top: 0; align-self: start; }
  .answer > .answer__more { grid-row: 3; align-self: end; }
}

/* アニメの続き：読む本ごとに、見た期の行をそろえて並べる（同じ本で読み続けられるように） */
.cont-pick { margin-bottom: 2rem; }
.cont-pick__title { font-size: var(--step-1); margin: 0 0 0.35rem; }
.cont-pick__lead { margin: 0 0 1rem; font-size: var(--step--1); color: var(--ink-soft); }
/* 本が1つだけでも横いっぱいに広げない（ボタンが大きくなりすぎるため）。空いた列はそのまま残す */
.cont-pick__list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.cont-medium {
  display: flex; flex-direction: column; gap: 0.9rem; padding: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.cont-medium__head { display: flex; gap: 0.75rem; align-items: center; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }
.cont-medium__head .cover { width: 2.6rem; }
.cont-medium__label { min-width: 0; }
.cont-medium__name { font-size: 1.05rem; line-height: 1.35; }
.cont-medium__edition { display: inline-block; font-size: 0.85rem; white-space: nowrap; }
.cont-medium__suffix { margin: 0.15rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; line-height: 1.5; color: var(--ink-soft); }
.cont-medium__fact { margin-left: 0.6em; font-family: var(--font-body); font-weight: 400; color: var(--muted); }
.cont-medium__none { margin: 0; padding: 0.8rem; font-size: var(--step--1); color: var(--ink-soft); background: #F6F5FA; border-radius: var(--radius-sm); }
.cont-medium__more { font-size: var(--step--1); justify-self: start; }
.cont-row { display: flex; flex-direction: column; gap: 0.55rem; }
.cont-row + .cont-row { padding-top: 0.9rem; border-top: 1px dashed var(--line-strong); }
.cont-row__when { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--accent-deep); }
.cont-row__answer { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.cont-row__answer .cover { width: 4.2rem; }
.cont-row__text p { margin: 0; }
.cont-row__next { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; line-height: 1.5; }
.cont-row__vol { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1.25; color: var(--rose); }
.cont-row__next .answer__flag { margin-left: 0; }
.cont-row__covered { margin-top: 0.3rem !important; font-size: 0.82rem; line-height: 1.6; color: var(--ink-soft); }
.cont-row__buy { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
.cont-row__buy .button { width: 100%; }
.cont-row__none { margin: 0; font-size: var(--step--1); color: var(--muted); }
@supports (grid-template-rows: subgrid) {
  /* 横に並んだ本どうしで、「1期まで見た」「2期まで見た」の行の高さをそろえる */
  .cont-pick__list { grid-auto-rows: auto; }
  /* 各期の行の中も「見た期」「答え」「ボタン」の3段に分け、横に並んだ本どうしでボタンの高さまでそろえる */
  .cont-medium { display: grid; grid-row: span calc(var(--cont-seasons) * 3 + 2); grid-template-rows: subgrid; row-gap: 0.9rem; }
  .cont-row { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.55rem; }
  .cont-row__buy { align-self: start; }
  .cont-medium__none { grid-row: span calc(var(--cont-seasons) * 3); align-self: start; }
}
.cont-detail + .cont-detail { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.cont-detail > .section__sub:first-child { margin-top: 0.25rem; }


/* 作品ページ：アニメの続きの答え（本ごとの表。「見たところ → 次に読む巻 → その巻のボタン」を1行に。行をたどれば、買う巻とボタンが分かる） */
.cont-short { margin-bottom: 2rem; padding: 1rem 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.cont-short__lead { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.cont-short__list { list-style: none; margin: 0.6rem 0 1rem; padding: 0; display: grid; gap: 0; }
.cont-short__item { padding: 0.9rem 0 0.4rem; border-top: 1px solid var(--line); }
.cont-short__item:first-child { border-top: 0; padding-top: 0.3rem; }
.cont-short__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.cont-short__head .cover { width: 2.2rem; }
.cont-short__name { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.5; }
.cont-short__name span { margin-left: 0.25em; font-size: 0.78rem; color: var(--ink-soft); }
.cont-short__title { min-width: 0; }
/* 本の刊行の状況：既刊・最新巻の発売日・次の巻の発売予定（楽天ブックス。予約のリンクつき） */
.cont-short__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.9rem; margin: 0.1rem 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--ink-soft); }
.cont-short__upcoming { color: var(--ink); font-weight: 700; }
.cont-short__upcoming .store-links { margin-left: 0.5rem; font-weight: 400; }
/* 続編の発表・公式で無料で読む（続きの表のすぐ下） */
.more-facts { margin: 0 0 2rem; padding: 0.4rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.more-facts__list { margin: 0; }
.cont-short + .more-facts { margin-top: -1rem; }
.more-facts__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.3rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.more-facts__row:first-child { border-top: 0; }
.more-facts__term { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; line-height: 1.6; color: var(--ink-soft); }
.more-facts__desc { margin: 0; min-width: 0; }
.more-facts__main { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.6; }
.more-facts__main--none, .more-facts__main--complete { color: var(--ink-soft); }
.more-facts__detail { margin: 0.15rem 0 0; font-size: 0.82rem; line-height: 1.65; color: var(--ink-soft); }
.more-facts__meta { margin: 0.3rem 0 0; font-size: 0.74rem; line-height: 1.6; color: var(--muted); }
.more-facts__meta .evidence { display: inline; margin: 0 0 0 0.6rem; }
.free-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.free-links__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.7rem; }
.free-links__link { font-family: var(--font-display); font-weight: 700; }
.free-links__what { font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .more-facts { padding: 0.3rem 0.9rem; }
  .more-facts__row { grid-template-columns: minmax(0, 1fr); }
}
.cont-short__none { padding: 0.7rem 0.8rem; font-size: var(--step--1); color: var(--ink-soft); background: #F6F5FA; border-radius: var(--radius-sm); }
.cont-short__none p { margin: 0; }
.cont-short__none .search-links { margin: 0.4rem 0 0; }
/* 表：行ごとに区切り線と薄い地色。ボタンは答えのすぐ右 */
.cont-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.92rem; }
.cont-table__col-when { width: var(--ct-when, 12rem); }
.cont-table__col-next { width: var(--ct-next, 10rem); }
.cont-table thead th { padding: 0.35rem 0.7rem; font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; color: var(--muted); text-align: left; border-bottom: 1px solid var(--line-strong); }
.cont-table__row > * { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; }
.cont-table__row--alt > * { background: #FAF9FD; }
.cont-table__row--has-caution > * { border-bottom: 0; }
.cont-table__range { display: block; margin-top: 0.15rem; font-size: 0.74rem; line-height: 1.45; color: var(--muted); }
/* 注意書き：その行のすぐ下に1行（原作の順番の入れ替え・漫画版が追いついていない など） */
.cont-table__caution-row > td { padding: 0 0.7rem 0.6rem; border-bottom: 1px solid var(--line); }
.cont-table__caution-row.cont-table__row--alt > td { background: #FAF9FD; }
.cont-caution { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; font-size: 0.8rem; line-height: 1.6; color: var(--ink-soft); }
.cont-caution + .cont-caution { margin-top: 0.25rem; }
.cont-caution__label { flex: none; padding: 0 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; line-height: 1.6; color: #7A5200; background: #FFF1C9; border-radius: 4px; }
.continuation__text .cont-caution { margin: 0.5rem 0; }
.cont-table__when { font-weight: 400; color: var(--ink-soft); }
.cont-table__next { white-space: nowrap; }
.cont-short__vol { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; line-height: 1.2; color: var(--rose); }
.cont-table__from { margin: 0 0.35rem 0 0.15rem; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--rose); }
.cont-table__next .answer__flag { margin-left: 0; }
.cont-table__buy .buy { margin-top: 0; }
.cont-table__buy .search-links { margin: 0; }
/* アニメが原作の最後まで描いた行：巻の代わりに「続きの巻はありません」と、1巻のボタン */
.cont-table__row--end .cont-table__next { white-space: normal; }
.cont-table__end { display: block; font-family: var(--font-display); font-weight: 900; font-size: 0.95rem; color: var(--ink); word-break: auto-phrase; }
.cont-table__note { display: block; margin-top: 0.15rem; font-size: 0.78rem; line-height: 1.5; color: var(--ink-soft); }
/* スマートフォン：1行を「見たところ → 巻 → ボタン」の縦の並びにする（表の見出しは出さない） */
@media (max-width: 719.98px) {
  .cont-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cont-table, .cont-table tbody, .cont-table__row, .cont-table__row > * { display: block; width: auto; }
  .cont-table__row { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); }
  .cont-table__row--alt, .cont-table__caution-row.cont-table__row--alt { background: #FAF9FD; }
  .cont-table__row > *, .cont-table__row--alt > * { padding: 0; border: 0; background: none; }
  .cont-table__row--has-caution { border-bottom: 0; }
  .cont-table__caution-row, .cont-table__caution-row > td { display: block; }
  .cont-table__caution-row > td, .cont-table__caution-row.cont-table__row--alt > td { padding: 0 0.7rem 0.6rem; background: none; border: 0; }
  .cont-table__caution-row { border-bottom: 1px solid var(--line); }
  .cont-table__range { margin-top: 0; }
  .cont-table__when { font-size: 0.85rem; }
  .cont-table__when-label::after { content: " →"; color: var(--line-strong); }
  .cont-table__next { margin: 0.1rem 0 0.45rem; }
  .cont-table .buy--quiet .button { padding: 0.1rem 0.55rem; font-size: 0.74rem; } /* ボタン2つを1行に */
}
.cont-row__end { display: block; font-size: 1.1rem; font-weight: 900; line-height: 1.4; color: var(--ink); }
.cont-row__answer--end { grid-template-columns: minmax(0, 1fr); }
.continuation__restart { margin: 1rem 0 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); }
.continuation__extra { margin: 0.8rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.continuation__extra .store-links { margin-left: 0.6rem; }
.cont-short__go { width: 100%; }
@media (min-width: 720px) { .cont-short__go { width: auto; } }
.article-link { display: grid; gap: 0.6rem; }
.article-link__lead { margin: 0; color: var(--ink-soft); }
.article-link__card {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1.1rem; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--accent-tint);
}
.article-link__card:hover { border-color: var(--accent); color: var(--ink); }
.article-link__kind { font-size: 0.75rem; font-weight: 700; color: var(--accent-deep); }
.article-link__title { font-family: var(--font-display); font-weight: 700; line-height: 1.5; }

/* 個別記事 */
.article-head { padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.article-head__title { font-weight: 900; font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.4; margin-bottom: 0.9rem; }
.article-head__work { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; text-decoration: none; color: var(--ink); }
.article-head__work .cover { width: 2.2rem; }
.article-head__work-text { display: flex; flex-direction: column; line-height: 1.4; }
.article-head__work-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.article-head__work-sub { font-size: 0.78rem; color: var(--accent); text-decoration: underline; }
.article-head .badges { margin-bottom: 0.9rem; }
.article-head__answer { margin: 0 0 0.9rem; padding: 0.9rem 1.1rem; background: var(--rose-wash); border-radius: var(--radius); }
.article-head__answer p { margin: 0; }
.article-head__answer p + p { margin-top: 0.3rem; }
.article-head__answer-label { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: #9A3157; }
/* 先に答え：見た期ごとに、本ごとの「次に読む巻」と、その巻のお店のボタン */
.lead-answer { margin-top: 0.55rem; }
.lead-answer + .lead-answer { margin-top: 0.8rem; padding-top: 0.75rem; border-top: 1px dashed #E6BFCD; }
.article-head__answer .lead-answer__when { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); }
.lead-answer__list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
/* 狭い画面では、答えの下にボタン。ボタンの左端は、どの行でも同じ位置になる */
.lead-answer__item { display: grid; gap: 0.3rem; }
.lead-answer__what { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3rem; }
.lead-answer__medium { font-family: var(--font-display); font-weight: 700; }
.lead-answer__vol-group { display: inline-flex; align-items: baseline; gap: 0.3rem; white-space: nowrap; }
.lead-answer__vol { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; line-height: 1.3; color: var(--rose); }
.lead-answer__buy .buy--compact { margin-top: 0; }
.lead-answer__buy .search-links { margin: 0; }
@media (min-width: 720px) {
  @supports (grid-template-columns: subgrid) {
    /* 期がちがっても、ボタンの左端を同じ位置にそろえる */
    .article-head__answer { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.25rem; }
    .article-head__answer > * { grid-column: 1 / -1; }
    .lead-answer, .lead-answer__list, .lead-answer__item { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
    .lead-answer__when { grid-column: 1 / -1; }
    .lead-answer__item { align-items: center; }
  }
}
.article .cont-pick { margin-bottom: 0; }
.choose-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); margin-bottom: 1rem; }
.choose { display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
@supports (grid-template-rows: subgrid) {
  /* 本ごとの欄で、見出し・特徴・「1巻から読むなら」・出典の高さをそろえる */
  .choose { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .choose__buy { align-self: start; }
}
.choose__head { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.4rem; }
.choose__head .cover { width: 3.4rem; }
.choose__name { font-size: 1.05rem; line-height: 1.4; }
.choose__fact { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--muted); }
.choose .points { font-size: var(--step--1); }
/* 版の違いの記事 */
@supports (grid-template-rows: subgrid) { .choose--identify { grid-row: span 3; } }
.choose-list--identify { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
.choose__for { margin: 0.15rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--rose); }
.lead-points { margin: 0.4rem 0 0; padding-left: 1.2em; display: grid; gap: 0.3rem; font-weight: 700; line-height: 1.7; }
.lead-points .evidence { font-weight: 400; }
.lead-points__buy { list-style: none; margin: 0.8rem 0 0; padding: 0.7rem 0 0; border-top: 1px dashed #E6BFCD; display: grid; gap: 0.5rem; }
.lead-points__buy-row { display: grid; gap: 0.3rem; }
.lead-points__buy-name { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); }
.lead-points__buy .buy--compact { margin-top: 0; }
@media (min-width: 720px) { .lead-points__buy-row { grid-template-columns: 15rem auto; justify-content: start; align-items: center; column-gap: 1rem; } }
.related { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.related li { display: flex; flex-direction: column; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.related li:first-child { border-top: 0; padding-top: 0; }
.related a { font-family: var(--font-display); font-weight: 700; }
.related span { font-size: var(--step--1); color: var(--muted); }

/* お店のボタンのまとまり（本や巻が出てくる場所に置く） */
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.buy--compact { margin-top: 0.35rem; }
.buy--compact .button { min-height: 2.5rem; padding: 0.2rem 0.85rem; font-size: 0.8rem; }
.buy__label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); margin-right: 0.15rem; }
.choose__buy { margin: 0.9rem 0 0.2rem; padding-top: 0.8rem; border-top: 1px dashed var(--line-strong); }
.choose__buy-label { margin: 0 0 0.45rem; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--ink-soft); }
.choose__buy .buy { display: grid; grid-template-columns: 1fr; }
.choose__buy .button { width: 100%; }
/* 補助的な場所（年表など）のお店のボタン：白地に細い枠。お店の色は枠と小さな印で示し、存在感を抑える */
.buy--quiet { gap: 0.5rem; }
.buy--quiet .button { min-height: 2.25rem; padding: 0.1rem 0.7rem; font-size: 0.78rem; font-weight: 700; background: var(--surface); }
.buy--quiet .button::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 2px; margin-right: 0.1em; }
.buy--quiet .button[data-out^="amazon"] { border-color: #F2B860; color: #5C3600; }
.buy--quiet .button[data-out^="amazon"]::before { background: #FF9900; }
.buy--quiet .button[data-out^="amazon"]:hover { background: #FFF5E5; color: #5C3600; }
.buy--quiet .button[data-out^="rakuten"] { border-color: #E3A3A3; color: #9E0000; }
.buy--quiet .button[data-out^="rakuten"]::before { background: #BF0000; }
.buy--quiet .button[data-out^="rakuten"]:hover { background: #FDECEC; color: #9E0000; }
.timeline__label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 1rem; }
.timeline__label .buy { margin-top: 0; font-weight: 400; }

/* 検索ページへの控えめなリンク（取りこぼし防止。ボタンにせず、小さな文字のリンクにする） */
.search-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 1rem; margin: 0.35rem 0 0; font-size: 0.8rem; line-height: 1.6; }
.search-links__link { display: inline-flex; align-items: center; gap: 0.35em; min-height: 2rem; color: var(--ink-soft); text-decoration-color: var(--line-strong); }
.search-links__link:hover { color: var(--ink); }
.search-links__link::before { content: ""; flex: none; width: 0.55em; height: 0.55em; border-radius: 2px; }
.search-links__link--amazon::before { background: #FF9900; }
.search-links__link--rakuten::before { background: #BF0000; }
/* 電子書籍の導線：紙の巻のお店のボタンのすぐ下に、小さな1行「電子書籍：Kindle・楽天Kobo」（partials/ebook_links）。
   見た目は検索ページへのリンクと同じ控えめな文字のリンク（Kindle は Amazon の印、Kobo は楽天の印）。
   「電子書籍：」はリンクではないので、印も下線も付けず、薄い色にする。ボタンとリンクのすき間は上下も左右も 8px 以上 */
.ebook-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.5rem 0 0; font-size: 0.78rem; line-height: 1.6; }
.ebook-links__label { margin-right: -0.4rem; color: var(--muted); white-space: nowrap; } /* 「：」の後ろの空きがあるので、印までを少し詰める（ラベルは押せないので、すき間の決まりの外） */
.ebook-links .search-links__link { min-height: 2rem; }
.cont-row__buy .ebook-links { margin-top: 0; } /* 縦の並び（grid）の gap 0.5rem で離す */
.ebook-links + .search-links { margin-top: 0.5rem; }
.cont-medium__foot { display: grid; gap: 0.2rem; align-self: end; }
.cont-medium__none p { margin: 0; }

/* 栞（答えの巻数を見せる） */
.bookmark {
  flex: none; position: relative; display: flex; flex-direction: column; align-items: center;
  width: 4.6rem; padding: 0.55rem 0.3rem 1.35rem; color: #fff; background: var(--rose);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 87%, 0 100%);
  text-align: center; line-height: 1.15; font-family: var(--font-display);
}
.bookmark::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--gold); margin-bottom: 0.4rem; }
.bookmark__medium { font-size: 0.7rem; font-weight: 700; }
.bookmark__next { font-size: 0.7rem; font-weight: 700; margin-top: 0.15rem; }
.bookmark__num { font-weight: 900; font-size: 2.3rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.bookmark__unit { font-size: 0.8rem; font-weight: 700; }
.bookmark--text .bookmark__unit { font-size: 0.95rem; margin-top: 0.3rem; }

/* 目次 */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.2rem; margin: 1.5rem 0; }
.toc__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.toc__title { font-size: var(--step-1); }
.toc__list { margin: 0.6rem 0 0.2rem; padding-left: 1.6em; }
.toc__list li { margin: 0.2rem 0; }
.toc__list li::marker { color: var(--muted); }
.toc__list[hidden] { display: none; }
@media (min-width: 720px) {
  .toc__list { columns: 2; column-gap: 2.5rem; }
  .toc__list li { break-inside: avoid; }
}

/* 節 */
.section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; margin-top: 1.25rem; }
.section__title { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step-2); margin-bottom: 1.1rem; }
.section__title::before { content: ""; flex: none; width: 4px; height: 1.1em; border-radius: 2px; background: var(--accent); }
.section__sub { font-size: var(--step-1); margin: 1.75rem 0 0.6rem; line-height: 1.45; }
.section__title + .section__sub, .section__title + .vod .section__sub, .section__title + .sub > .section__sub:first-child { margin-top: 0.25rem; }

.status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 0 0 0.75rem; font-size: var(--step--1); }
.status__label { font-weight: 700; padding: 0 0.6em; border-radius: 4px; line-height: 1.7; }
.status__date { color: var(--muted); }
.status--confirmed .status__label { color: var(--ok); background: var(--ok-wash); }
.status--estimate .status__label { color: var(--est); background: var(--est-wash); }
.status--editorial .status__label { color: var(--edit); background: var(--edit-wash); }
.facts .status { margin: 0; }
/* 出典の小さなリンク：本文より一段小さく、目立たせない（下の「出典と確認日」へ移るためのもの） */
.evidence { font-size: 0.75rem; line-height: 1.7; color: var(--muted); margin: 0.5rem 0 0; }
.evidence a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* 作品の基本：媒体ごとに、代表の画像を左に（画像のない媒体も同じ幅を空けて文字の位置をそろえる） */
.media-list { margin: 0; }
.media-list__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.35rem 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.media-list__row:last-child { border-bottom: 1px solid var(--line); }
.media-list dt { padding-top: 0.2rem; }
.media-list dd { margin: 0; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.media-list__thumb { display: block; }
.media-list__thumb .cover { width: 3.2rem; }
.media-list__text { display: flex; flex-direction: column; gap: 0.1rem; }
.media-list__name { font-weight: 700; }
.media-list__detail { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.7; }
.media-list__status { font-size: var(--step--1); font-weight: 700; line-height: 1.7; }
.callout { margin-top: 1.25rem; padding: 0.9rem 1.1rem; background: #FFF9E6; border: 1px solid #EEDDA8; border-radius: var(--radius); }
.callout__title { font-family: var(--font-display); font-weight: 700; margin-bottom: 0.3rem; }
.callout p:last-child { margin-bottom: 0; }

/* アニメの続き：見た期のパッケージ → 次に読む巻の表紙 */
.continuation { padding: 1.3rem 0 1.4rem; border-top: 1px solid var(--line); }
.continuation:first-of-type { border-top: 0; padding-top: 0.25rem; }
.continuation__q { font-size: 1.05rem; margin-bottom: 0.9rem; }
.flow { display: flex; align-items: flex-start; gap: 0.9rem; margin: 0 0 1rem; }
.flow__item { margin: 0; width: 10rem; }
.flow__item .cover { width: 5.6rem; }
.flow__item figcaption { margin-top: 0.45rem; font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); }
.flow__item .store-links { margin-top: 0.1rem; gap: 0 0.75rem; font-size: 0.76rem; } /* 控えめな導線（すぐ下に本格的なボタンがある）。広い画面では1行、狭い画面では2行 */
.flow__item .store-links .search-links__link { min-height: 1.85rem; }
.flow__tag { display: table; margin-bottom: 0.2rem; padding: 0 0.45em; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; line-height: 1.6; border-radius: 4px; color: var(--ink-soft); background: #F1F0F5; }
.flow__tag--next { color: #fff; background: var(--rose); }
.flow__item--next .cover__frame { outline: 2px solid var(--rose); outline-offset: 2px; }
.flow__arrow { position: relative; flex: none; width: 2.5rem; height: 2px; margin-top: 3.9rem; background: var(--line-strong); }
.flow__arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--line-strong); border-right: 0; }
.continuation__body { display: flex; gap: 1.1rem; align-items: flex-start; }
.continuation__body .bookmark { width: 5.4rem; }
.continuation__body .bookmark__num { font-size: 2.8rem; }
.continuation__text { min-width: 0; }
.continuation__a { font-size: var(--step-1); margin-bottom: 0.4rem; font-family: var(--font-display); font-weight: 700; }
.continuation__a strong { color: var(--rose); }
.continuation__covered { margin: 0 0 0.5rem; color: var(--ink-soft); }
.continuation__basis { margin: 0.25rem 0 0; }

/* 順番（本当に順番なので番号を付ける。画像のない行も同じ幅を空ける） */
.timeline { list-style: none; margin: 0.5rem 0 0; padding: 0; counter-reset: step; }
.timeline__item { counter-increment: step; display: grid; grid-template-columns: 1.7rem 3rem 8.5rem minmax(0, 1fr); gap: 0.9rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.timeline__item::before {
  content: counter(step); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-deep); font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; line-height: 1;
}
.timeline__thumb .cover { width: 3rem; }
.timeline__date { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.timeline__label { font-weight: 700; }
/* 画像のない年表は、画像の列を空けない。日付が長い年表（物語の中の時系列など）は、日付を名前の上に小さく出す */
.timeline--plain .timeline__item { grid-template-columns: 1.7rem 8.5rem minmax(0, 1fr); }
.timeline--plain .timeline__thumb { display: none; }
.timeline--stacked .timeline__item { grid-template-columns: 1.7rem 3rem minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 0; }
.timeline--stacked.timeline--plain .timeline__item { grid-template-columns: 1.7rem minmax(0, 1fr); }
.timeline--stacked .timeline__item::before { grid-row: 1 / span 2; }
.timeline--stacked .timeline__thumb { grid-row: 1 / span 2; grid-column: 2; }
.timeline--stacked .timeline__date { grid-column: -2; font-size: var(--step--1); }
.timeline--stacked .timeline__label { grid-column: -2; }
.routes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.route { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--accent-tint); }
.route__title { font-size: var(--step-0); margin-bottom: 0.4rem; }
.route__steps { margin: 0 0 0.6rem; padding-left: 1.4em; font-weight: 700; }
.route__reason { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.route__steps li { margin-bottom: 0.35rem; }
/* 手順の文字の下にボタンを置く（幅の狭い欄で文字が細切れにならないように。ボタンの位置もそろう） */
.route__step { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.route__step .buy { margin-top: 0; font-weight: 400; }
.route__watch { margin: 0.6rem 0 0; font-size: var(--step--1); font-weight: 700; }

.compare { overflow-x: auto; margin: 0.25rem 0 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.compare__table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.compare__table th, .compare__table td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare__table tbody tr:last-child > * { border-bottom: 0; }
.compare__table thead th { background: var(--accent-wash); color: var(--ink); white-space: nowrap; font-family: var(--font-display); font-weight: 700; }
.compare__table tbody th { font-weight: 700; }
.compare__name { display: flex; gap: 0.6rem; align-items: center; }
@media (max-width: 640px) {
  /* スマートフォンでは表を行ごとのカードに組み替え、文字を縮めて押し込まない */
  .compare { border: 0; border-radius: 0; overflow: visible; }
  .compare__table thead { display: none; }
  .compare__table, .compare__table tbody, .compare__table tr, .compare__table th, .compare__table td { display: block; width: 100%; }
  .compare__table tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.8rem; overflow: hidden; }
  .compare__table tbody th { background: var(--accent-tint); border-bottom: 1px solid var(--line); }
  .compare__table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
  .compare__table tbody tr > :last-child { border-bottom: 0; }
  .compare__table td { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; font-size: var(--step-0); }
  .compare__table td::before { content: attr(data-label); color: var(--muted); font-size: var(--step--1); }
}
.points { margin: 0.5rem 0 0; padding-left: 1.3em; }
.points li { margin-bottom: 0.35rem; }

.facts { margin: 0.75rem 0; display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: 8rem 1fr; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 700; color: var(--ink-soft); }
.facts dd { margin: 0; }

.bonus + .bonus { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.bonus__name { font-size: var(--step-1); margin-bottom: 0.4rem; }

/* 配信：期ごとに、その期のパッケージを見出しの横に */
.vod + .vod { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.vod__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 0.4rem; }
.vod__visual { margin: 0; width: 4.75rem; flex: none; }
.vod__visual figcaption { margin-top: 0.3rem; font-size: 0.68rem; line-height: 1.4; color: var(--muted); }
.vod__head .section__sub { margin: 0.1rem 0 0.5rem; }
.vod__group { margin: 0.9rem 0; }
.vod__label { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.4rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li { padding: 0.1rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--step--1); background: var(--surface); }
.vod__group--svod .chips li, .chips--small li { border-color: #BFDDD8; color: #1F6B62; background: #F3F9F8; }
.chips--small { gap: 0.35rem; }
.chips--small li { padding: 0 0.6rem; font-size: 0.8rem; background: var(--surface); }
.chips--small .chips__more { border-style: dashed; background: transparent; }
/* サービスの作品ページへのリンクになっている札：札全体を押せる大きさにし、文字はリンクの色 */
.chips li:has(> .chips__link) { padding: 0; }
.chips__link { display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0.1rem 0.8rem; color: inherit; text-decoration: underline; text-decoration-color: rgba(31, 107, 98, 0.35); text-underline-offset: 0.2em; border-radius: 999px; }
.chips__link:hover { background: var(--accent-tint); color: var(--accent-deep); text-decoration: underline; }
.chips--small .chips__link { min-height: 1.9rem; padding: 0 0.6rem; }
.chips__more a { color: inherit; }
.checked { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid #A8D5B9; border-radius: var(--radius); background: var(--ok-wash); }
.checked__service { font-family: var(--font-display); font-weight: 700; margin-bottom: 0.2rem; }
.checked p { margin-bottom: 0.7rem; }

.sub .button { margin-top: 0.5rem; }

/* 商品カード */
.products { display: grid; gap: 0.75rem; }
.product { display: grid; grid-template-columns: 4.75rem 1fr; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.products .product { margin-top: 0; }
.product__cover { width: 4.75rem; }
.product__label { margin: 0 0 0.2rem; font-size: var(--step--1); color: var(--muted); }
.product__title { margin: 0 0 0.7rem; font-weight: 700; }
.product__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.product--compact .product__title { margin-bottom: 0.6rem; }

/* 出典 */
.sources { margin: 1rem 0; padding-left: 1.6em; font-size: var(--step--1); }
.sources__item { margin-bottom: 0.6rem; }
.sources__meta { display: block; color: var(--muted); }
.sources__item:target { background: var(--est-wash); }
.sources__item--hit { background: var(--est-wash); border-radius: 4px; }
/* 出典の一覧は折りたたむ。閉じたままでも、件数と最後の確認日は見える */
.sources-box { margin: 1rem 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sources-box > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem; min-height: 2.75rem; padding: 0.7rem 1rem 0.7rem 2.3rem; position: relative; cursor: pointer; list-style: none; }
.sources-box > summary::-webkit-details-marker { display: none; }
.sources-box > summary::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform 0.15s ease; }
.sources-box[open] > summary::before { transform: rotate(45deg); top: 1.05rem; }
.sources-box > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.sources-box__label { font-family: var(--font-display); font-weight: 700; color: var(--accent-deep); }
.sources-box__label--close, .sources-box[open] .sources-box__label--open { display: none; }
.sources-box[open] .sources-box__label--close { display: inline; }
.sources-box__meta { font-size: var(--step--1); color: var(--muted); }
.sources-box .sources { margin: 0; padding: 0.2rem 1rem 0.6rem 2.9em; border-top: 1px solid var(--line); }
.sources-box .sources__item:first-child { margin-top: 0.8rem; }
.report { margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px dashed var(--line-strong); background: var(--accent-tint); }
.report p { margin-bottom: 0.7rem; }
.tag { display: inline-block; margin-right: 0.5em; padding: 0 0.45em; font-size: 0.75rem; line-height: 1.65; border-radius: 3px; color: var(--ink-soft); background: #F1F0F5; }
.tag--official { color: var(--ok); background: var(--ok-wash); }

/* フォーム */
.form { margin-top: 1rem; }
.form__field { margin-bottom: 1.1rem; }
.form__field label { display: block; font-family: var(--font-display); font-weight: 700; margin-bottom: 0.3rem; }
.form__optional { font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: var(--step--1); margin-left: 0.3em; }
.form input[type=text], .form input[type=email], .form input[type=search], .form select, .form textarea {
  width: 100%; min-height: 3rem; padding: 0.55rem 0.85rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
}
.form textarea { min-height: 10rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.form__hp { position: absolute; left: -9999px; }

/* ---------- 表紙・パッケージ画像（APIの画像を縮小だけして表示。加工しない） ---------- */
.cover { display: inline-block; flex: none; vertical-align: top; }
.cover--lg { width: 11rem; }
.cover--md { width: 4.75rem; }
.cover--sm { width: 3rem; }
.cover--fill { display: block; width: 100%; }
.cover__frame {
  /* 画像の有無・縦横比に関係なく、枠は同じ大きさ（1:1.42）。画像は切り取らずに収める */
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1.42; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color 0.12s ease;
}
.cover__frame--img { background: #F3F2F7; }
.cover__frame--noimage { background: #fff; } /* 商品のない所の「NO IMAGE」の絵（白地） */
.cover__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cover__placeholder { padding: 0.5rem; background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%); }
.cover--tone-0 { background-color: #DAD3F4; }
.cover--tone-1 { background-color: #F1D3DE; }
.cover--tone-2 { background-color: #CFE6E2; }
.cover--tone-3 { background-color: #F3DFCB; }
.cover--tone-4 { background-color: #D3DCF3; }
.cover--tone-5 { background-color: #D9E8CE; }
.cover__text {
  /* 画像がまだないときの題名。長くても枠からはみ出さないよう、4行までで切る */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: break-word;
  max-width: 100%; padding: 0.2em 0.45em; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; line-height: 1.35; color: var(--ink);
  background: rgba(255, 255, 255, 0.92); border-radius: 4px;
}
.cover--lg .cover__text { font-size: 0.9rem; }
.cover--fill .cover__text { font-size: 0.95rem; padding: 0.3em 0.6em; }
.cover--sm .cover__placeholder { padding: 0.2rem; }
/* 小さい枠では題名をすぐ横に書いているので、枠の中の文字は出さない（巻数を見せたい枠は別） */
.cover--sm .cover__text, .cover--md:not(.cover--labeled) .cover__text { display: none; }
.cover--labeled .cover__text { font-size: 0.85rem; padding: 0.15em 0.4em; }

/* ---------- 答えが見える表紙（トップの棚・注目の作品） ----------
   表紙の枠の下側に、白い札で「何の答えか → 答え → どの本で → アニメになった範囲の帯 → 既刊・完結」を出す。
   帯：紫＝アニメになった範囲、赤い印＝次に読む巻、右端が薄い＝連載中（巻が増える） */
.answer-cover { align-items: flex-end; padding: 0.55rem; }
.answer-cover__panel {
  display: flex; flex-direction: column; gap: 0.18rem; width: 100%; padding: 0.6rem 0.65rem 0.55rem; text-align: left;
  background: rgba(255, 255, 255, 0.94); border-radius: 8px; box-shadow: 0 1px 0 rgba(36, 33, 58, 0.06);
}
.answer-cover__q { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; line-height: 1.35; color: var(--ink-soft); }
.answer-cover__a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.2rem;
  font-family: var(--font-display); font-weight: 900; font-size: 2.1rem; line-height: 1.1; color: var(--rose);
}
.answer-cover__a--s { font-size: 1.45rem; line-height: 1.2; }
.answer-cover__a--xs { font-size: 1.05rem; line-height: 1.3; }
.answer-cover__panel--vod .answer-cover__a, .answer-cover__panel--volumes .answer-cover__a { color: var(--ink); }
.answer-cover__panel--end .answer-cover__a { color: var(--accent-deep); }
.answer-cover__from { font-size: 0.85rem; font-weight: 700; }
.answer-cover__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.3rem; }
.answer-cover__head .answer-cover__q { flex: 1 1 auto; min-width: 0; }
.answer-cover__flag { flex: none; padding: 0 0.35rem; font-size: 0.62rem; font-weight: 700; line-height: 1.6; color: #7A5200; background: #FFF1C9; border-radius: 4px; }
.answer-cover__m { font-size: 0.7rem; font-weight: 700; line-height: 1.35; color: var(--ink-soft); }
.answer-cover__bar { position: relative; display: block; height: 7px; margin: 0.35rem 0 0.15rem; background: #ECE9F3; border-radius: 99px; }
.answer-cover__bar--open { -webkit-mask: linear-gradient(90deg, #000 85%, rgba(0, 0, 0, 0.2)); mask: linear-gradient(90deg, #000 85%, rgba(0, 0, 0, 0.2)); }
.answer-cover__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 99px; }
.answer-cover__panel--end .answer-cover__fill { background: var(--accent-deep); }
.answer-cover__next { position: absolute; top: -3px; width: 3px; height: 13px; margin-left: 1px; background: var(--rose); border-radius: 2px; }
.answer-cover__foot { font-size: 0.66rem; line-height: 1.35; color: var(--muted); }
/* 小さい形（横長のカード）：問い・答え・帯だけ */
.answer-cover--compact { padding: 0.3rem; }
.answer-cover--compact .answer-cover__panel { gap: 0.1rem; padding: 0.4rem 0.4rem 0.35rem; border-radius: 6px; }
.answer-cover--compact .answer-cover__q { font-size: 0.6rem; line-height: 1.3; }
.answer-cover--compact .answer-cover__a { font-size: 1.4rem; }
.answer-cover--compact .answer-cover__a--s { font-size: 1.05rem; }
.answer-cover--compact .answer-cover__a--xs { font-size: 0.8rem; }
.answer-cover--compact .answer-cover__from { font-size: 0.68rem; }
.answer-cover--compact .answer-cover__flag { padding: 0 0.25rem; font-size: 0.55rem; line-height: 1.55; }
.answer-cover--compact .answer-cover__bar { height: 5px; margin: 0.25rem 0 0.05rem; }
.answer-cover--compact .answer-cover__next { top: -2px; height: 9px; width: 2px; }
.answer-cover--compact .cover__text { font-size: 0.66rem; }
/* トップの上の3冊：狭い画面では表紙が小さいので、小さい形と同じ中身（問い・答え・帯）にし、目印は重ねない（すぐ下の一覧に出る） */
@media (max-width: 719.98px) {
  .hero__covers .badges--on-cover, .hero__covers .answer-cover__m, .hero__covers .answer-cover__foot { display: none; }
  .hero__covers .answer-cover { padding: 0.3rem; }
  .hero__covers .answer-cover__panel { gap: 0.1rem; padding: 0.4rem 0.4rem 0.35rem; border-radius: 6px; }
  .hero__covers .answer-cover__q { font-size: 0.6rem; line-height: 1.3; }
  .hero__covers .answer-cover__a { font-size: 1.3rem; }
  .hero__covers .answer-cover__a--s { font-size: 1rem; }
  .hero__covers .answer-cover__a--xs { font-size: 0.78rem; }
  .hero__covers .answer-cover__from { font-size: 0.68rem; }
  .hero__covers .answer-cover__flag { padding: 0 0.25rem; font-size: 0.55rem; line-height: 1.55; }
  .hero__covers .answer-cover__bar { height: 5px; margin: 0.25rem 0 0.05rem; }
  .hero__covers .answer-cover__next { top: -2px; height: 9px; width: 2px; }
}
@media (max-width: 600px) {
  .answer-cover { padding: 0.4rem; }
  .answer-cover__panel { padding: 0.5rem 0.5rem 0.45rem; }
  .answer-cover__a { font-size: 1.75rem; }
  .answer-cover__a--s { font-size: 1.2rem; }
  .answer-cover__a--xs { font-size: 0.95rem; }
  .answer-cover--compact .answer-cover__a { font-size: 1.3rem; }
  .answer-cover--compact .answer-cover__a--s { font-size: 1rem; }
  .answer-cover--compact .answer-cover__a--xs { font-size: 0.78rem; }
  .answer-cover--compact { padding: 0.3rem; }
  .answer-cover--compact .answer-cover__panel { padding: 0.4rem 0.4rem 0.35rem; }
}

/* ---------- 審査中のお知らせ（設定で出したときだけ。全ページのヘッダーの下に大きめに） ---------- */
.review-notice { background: #F2EFFB; border-bottom: 1px solid #D9D2F2; }
.review-notice__inner { max-width: 72rem; margin: 0 auto; padding: 1rem 1rem 1.1rem; }
.review-notice__title { margin: 0 0 0.45rem; font-size: 1.05rem; color: var(--accent-deep); }
.review-notice__list { margin: 0; padding-left: 1.3em; display: grid; gap: 0.2rem; font-size: 0.92rem; line-height: 1.65; color: var(--ink); }
.review-notice__list strong { color: var(--accent-deep); }
.review-notice__pr { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 600px) { .review-notice__inner { padding: 0.85rem 1rem 0.95rem; } .review-notice__list { font-size: 0.86rem; line-height: 1.6; } .review-notice__pr { font-size: 0.76rem; } }

/* ---------- フッター ---------- */
.site-footer { background: #EFEDF5; color: var(--ink-soft); border-top: 1px solid var(--line); }
.site-footer__inner { max-width: 72rem; margin: 0 auto; padding: 1.75rem 1rem 2.25rem; font-size: var(--step--1); }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--accent-deep); }
.footer-links { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-note { max-width: 48rem; }
.footer-copy { margin: 0; color: var(--muted); }
.footer-brand { font-family: var(--font-display); font-weight: 900; color: var(--ink); margin-right: 0.5em; }

/* ---------- スマートフォン ---------- */
@media (max-width: 640px) {
  .main { padding: 1rem 0.75rem 2.75rem; }
  .site-header__inner { padding: 0.7rem 0.75rem; gap: 0.6rem; }
  .brand__name { font-size: 1.3rem; }
  .search--header { flex-basis: 100%; }
  .site-nav__list { padding: 0 0.75rem; gap: 1.25rem; }
  .site-nav__link { font-size: 0.9rem; min-height: 2.75rem; }
  .hero__inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 1.1rem; }
  .hero__covers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 7.5rem); gap: 0.75rem; }
  .hero__covers li, .hero__covers--1 li { width: auto; }
  .hero__cover-title { font-size: 0.85rem; }
  .search--hero .search__row { flex-direction: column; }
  .search--hero .search__button { width: 100%; }
  .page, .section { padding: 1.25rem 1rem; }
  .work-head { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-areas: "visual main" "body body"; gap: 0.9rem 1rem; padding: 1.1rem 1rem; }
  .work-head__visual figcaption { font-size: 0.68rem; }
  .work-head__visual .buy--quiet .button { padding: 0.1rem 0.4rem; font-size: 0.72rem; }
  .work-head__title { font-size: 1.5rem; }
  .work-head__body { margin-top: 0.25rem; }
  .cover--lg { width: 100%; }
  .cover--lg .cover__text { font-size: 0.72rem; }
  .worklist--shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 0.9rem; }
  .badges--on-cover .badge { font-size: 0.68rem; }
  .badges--on-cover .badges__slot:nth-child(n+2) { display: none; } /* 小さい表紙では1つだけ。全部は作品ページで出す */
  .media-list__row { grid-template-columns: 1fr; }
  .timeline__item { grid-template-columns: 1.7rem 3rem minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 0; }
  .timeline__item::before { grid-row: 1 / span 2; }
  .timeline__thumb { grid-row: 1 / span 2; grid-column: 2; }
  .timeline__date { grid-column: 3; font-size: var(--step--1); }
  .timeline__label { grid-column: 3; }
  .timeline--plain .timeline__item { grid-template-columns: 1.7rem minmax(0, 1fr); }
  .timeline--plain .timeline__date, .timeline--plain .timeline__label { grid-column: 2; }
  .facts > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .flow { gap: 0.6rem; }
  .flow__item { width: 7.2rem; }
  .flow__item .cover { width: 5rem; }
  .flow__arrow { width: 1.6rem; margin-top: 3.5rem; }
  .continuation__body { gap: 0.8rem; }
  .continuation__body .bookmark { width: 4.6rem; }
  .continuation__body .bookmark__num { font-size: 2.3rem; }
  .compare__table tbody th .cover { width: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}
@media print {
  .site-header, .site-footer, .toc, .product__actions, .ebook-links, .answer__actions, .report { display: none; }
  body { background: #fff; }
}

/* そろえる費用：合計を大きく。巻ごとの表で、持っている巻を除いた金額も計算できる */
.cost + .cost { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.cost__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.cost__cover .cover { width: 5.2rem; }
.cost__summary > p { margin: 0; }
.cost__target { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); }
.cost__total { margin: 0.15rem 0 0.4rem !important; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.cost__total-num { font-weight: 900; font-size: 2rem; line-height: 1.2; color: var(--rose); margin-right: 0.1em; }
.cost__tax { margin-left: 0.3em; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.cost__remain { margin: 0 0 0.5rem !important; padding: 0.45rem 0.7rem; background: var(--rose-wash); border-radius: var(--radius-sm); font-size: var(--step--1); }
.cost__remain strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--rose); }
.cost__breakdown { list-style: none; margin: 1rem 0 0.6rem; padding: 0; border-top: 1px solid var(--line); }
.cost__breakdown li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.3rem 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.cost__breakdown li span:last-child { font-weight: 700; text-align: right; min-width: 5.5em; }
.cost__basis { margin: 0.3rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.cost__volumes { margin: 1rem 0 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); }
.cost__volumes > summary { cursor: pointer; padding: 0.7rem 0.9rem; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--accent-deep); }
.cost__table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.cost__table th, .cost__table td { padding: 0.35rem 0.9rem; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cost__table thead th { font-size: 0.78rem; color: var(--muted); font-weight: 700; }
.cost__table td:nth-child(2) { white-space: nowrap; }
.cost__table input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.store-links { display: inline-flex; flex-wrap: wrap; gap: 0 0.9rem; font-size: 0.78rem; }
.store-links .search-links__link { min-height: 2rem; }
@media (max-width: 480px) {
  .cost__table th, .cost__table td { padding: 0.35rem 0.5rem; }
  .store-links { gap: 0 0.6rem; }
}

/* お問い合わせの結果 */
.form__errors { margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: var(--radius-sm); background: #FDECEC; color: #A12828; font-weight: 700; }
.form__errors p { margin: 0; }
.contact-done { margin: 0 0 1.25rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--ok-wash); }
.contact-done p { margin: 0 0 0.5rem; }
.contact-done p:last-child { margin: 0; }
.contact-done__title { font-family: var(--font-display); font-weight: 700; color: var(--ok); }
.contact-done__no { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.04em; }

/* 長いタイトル：作品ページでは正式タイトル（全文）と略称を小さく添える。一覧のカードでは3行まで */
.work-head__official { margin: -0.4rem 0 0.7rem; font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
.worklist__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* 見放題サービスの月額と無料体験（配信の欄。公式ページで確かめた値・期限60日） */
.svc-facts { margin: 1.1rem 0 0.4rem; }
.svc-facts__scroll { overflow-x: auto; }
.svc-facts__table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.88rem; }
.svc-facts__table th, .svc-facts__table td { padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.svc-facts__table thead th { font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; color: var(--muted); border-bottom-color: var(--line-strong); }
.svc-facts__table tbody th { font-weight: 700; }
.svc-facts__table tbody tr:nth-child(even) > * { background: #FAF9FD; }
.svc-facts__plan { display: block; font-weight: 400; font-size: 0.74rem; color: var(--muted); }

/* 見る道筋と、かかる時間（見る順番の欄の先頭） */
.routes-time { margin: 0 0 2rem; }
.routes-time__table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 0.8rem; font-size: 0.9rem; }
.routes-time__table th, .routes-time__table td { padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.routes-time__table thead th { font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; color: var(--muted); border-bottom-color: var(--line-strong); }
.routes-time__table tbody th { font-family: var(--font-display); font-weight: 700; }
.routes-time__table strong { font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; color: var(--accent-deep); }
.routes-time__unknown { display: block; font-size: 0.74rem; color: var(--muted); }
.routes-time__list { margin: 0.4rem 0; padding: 0.55rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.routes-time__list summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; }
.routes-time__list ol { margin: 0.6rem 0 0.2rem; padding-left: 1.4rem; display: grid; gap: 0.45rem; font-size: 0.88rem; }
.routes-time__list li { line-height: 1.6; }
.routes-time__kind { display: inline-block; min-width: 3.2em; margin-right: 0.4rem; padding: 0 0.35rem; font-size: 0.7rem; font-weight: 700; text-align: center; color: var(--ink-soft); background: #F1EFF7; border-radius: 4px; }
.routes-time__title { font-weight: 700; }
.routes-time__role { margin-left: 0.4rem; padding: 0 0.35rem; font-size: 0.7rem; font-weight: 700; color: #7A5200; background: #FFF1C9; border-radius: 4px; }
.routes-time__meta { display: block; font-size: 0.78rem; color: var(--muted); }
.routes-time__note { display: block; font-size: 0.78rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .routes-time__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .routes-time__table, .routes-time__table tbody, .routes-time__table tr, .routes-time__table th, .routes-time__table td { display: block; }
  .routes-time__table tr { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
  .routes-time__table th, .routes-time__table td { padding: 0; border: 0; }
}

/* 季節から探す */
.season-nav { margin: 0.4rem 0 1.4rem; }
.season-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.season-nav__link {
  display: inline-flex; align-items: baseline; gap: 0.5rem; min-height: 2.75rem; padding: 0.55rem 0.9rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.season-nav__link:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-wash); }
.season-nav__link.is-current { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.season-nav__count { font-family: var(--font-body); font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.seasons-home__lead { margin: -0.4rem 0 0.4rem; color: var(--ink-soft); font-size: var(--step--1); }
.worklist__note { font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); }

/* 話数ごとの対応（途中まで見た人へ） */
.epmap-wrap { margin: 1.4rem 0 0.6rem; }
.epmap-wrap__title { margin: 0 0 0.2rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.epmap-wrap__lead { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--ink-soft); }
.epmap { margin: 0.4rem 0; padding: 0.55rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.epmap summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; }
.epmap__summary { margin: 0.6rem 0 0.2rem; font-size: 0.85rem; color: var(--ink-soft); }
.epmap__table { width: 100%; margin: 0.5rem 0 0.2rem; border-collapse: collapse; font-size: 0.86rem; }
.epmap__table th, .epmap__table td { padding: 0.45rem 0.55rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.epmap__table thead th { font-family: var(--font-display); font-size: 0.72rem; color: var(--muted); border-bottom-color: var(--line-strong); }
.epmap__table tbody th { white-space: nowrap; font-weight: 700; }
.epmap__table tbody tr:nth-child(even) > * { background: #FAF9FD; }
.epmap__table .answer__flag { margin-left: 0.4rem; }
.epmap__official { margin-left: 0.4rem; padding: 0 0.4rem; font-size: 0.7rem; font-weight: 700; color: #1F6B62; background: #E5F4F2; border-radius: 4px; }
.epmap__unknown { color: var(--muted); }
.epmap__note { display: block; margin-top: 0.15rem; font-size: 0.76rem; line-height: 1.55; color: var(--muted); }
.cont-short__epmap { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 640px) {
  .epmap__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .epmap__table, .epmap__table tbody, .epmap__table tr, .epmap__table th, .epmap__table td { display: block; }
  .epmap__table tr { padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
  .epmap__table th, .epmap__table td { padding: 0; border: 0; background: none !important; }
}