/* 色は2組。スマホ（パソコン）の「ダーク」設定の人には、夜、暗い部屋で見る人に合わせた暗い色。
   「ライト」設定の人には明るい色（下の @media）。切りかえボタンは置かず、端末の設定にまかせる。
   どちらも純白・純黒の背景は使わず暖色に寄せ、画面でいちばん目立つのは購入ボタン（キツネ色）にする。
   色はすべてここの名前（--〇〇）で使う。ほかの場所に色を直接書かない（test/style.test.ts が確かめる） */
:root {
  --bg: #121014;
  --surface-1: #1b181d;
  --surface-2: #25212a;
  --line: #34303a;
  --line-strong: #4a4450;
  --placeholder: #2a2530;
  --text: #ece6dc;
  --text-2: #b3aaa0;
  --text-3: #8a827a;
  --hover: #fff;
  --fox: #f0913f;
  --fox-hover: #f39d51;
  --fox-press: #d97a2b;
  /* 文字・細い線に使うキツネ色（明るい背景では濃くして読めるようにする） */
  --fox-text: #f0913f;
  --fox-tint: rgba(240, 145, 63, 0.14);
  --on-fox: #1c1006;
  --sale: #ff6b57;
  --on-sale: #1a0a08;
  --low: #7fd1a8;
  --low-tint: rgba(127, 209, 168, 0.08);
  --low-bg: rgba(127, 209, 168, 0.12);
  --low-line: rgba(127, 209, 168, 0.35);
  --eightk: #c9b6f2;
  --scrim: rgba(10, 9, 11, 0.96);
  --backdrop: rgba(10, 9, 11, 0.85);
  --tabs-h: 64px;
  --buybar-h: 80px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* 横向きの iPhone の切り欠き（左右）。viewport-fit=cover なので、中身はこの分だけ内側に寄せる */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* 押したときの反応（指が触れた瞬間に変える。離すまで待たない） */
  --press: 120ms ease-out;
  color-scheme: dark;
}

/* 明るい色。文字は背景に対してコントラスト4.5以上（いちばん薄い --text-3 も） */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f8f6f2;
    --surface-1: #ffffff;
    --surface-2: #efebe5;
    --line: #ddd6cc;
    --line-strong: #c9c0b4;
    --placeholder: #e6e0d7;
    --text: #1f1a16;
    --text-2: #564e46;
    --text-3: #6b625a;
    --hover: #000;
    --fox: #ef8a33;
    --fox-hover: #f39d51;
    --fox-press: #d97a2b;
    --fox-text: #a9520c;
    --fox-tint: rgba(239, 138, 51, 0.14);
    --on-fox: #1c1006;
    --sale: #c23a22;
    --on-sale: #ffffff;
    --low: #106c47;
    --low-tint: rgba(19, 119, 79, 0.06);
    --low-bg: rgba(19, 119, 79, 0.1);
    --low-line: rgba(19, 119, 79, 0.35);
    --eightk: #6242bd;
    --scrim: rgba(248, 246, 242, 0.97);
    --backdrop: rgba(31, 26, 22, 0.45);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html:not(.age-ok) body { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-tap-highlight-color: transparent;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}
/* 下に固定したタブ・購入バーの分だけ、最後の行が隠れないようにあけておく */
body.has-tabs { padding-bottom: calc(var(--tabs-h) + var(--safe-b)); }
body.has-buybar { padding-bottom: calc(var(--buybar-h) + var(--safe-b)); }

a { color: var(--text); }
/* 指を乗せる（hover）は、マウスのような細かく指せる道具のときだけ。スマホは指で触ると、その見た目が付いたまま残る */
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--hover); } }

/* スマホの手ざわり（docs/design.md 9章）
   - 押すものはダブルタップの拡大を待たずにすぐ反応させる（300ms の待ちを消す）
   - ボタン・タブ・札の文字は長押しで選択されない・リンクのメニューを出さない（作品カードや本文のリンクは長押しの先読みを残す）
   - 横に送る棚は、端まで送っても画面全体の「戻る」スワイプや上下の動きに伝えない */
a, button, label, summary, [role="button"] { touch-action: manipulation; }
.btn, .tabs__item, .filter, .buybar__later, .option, .device, .later-remove, .shelf-nav button, .pager__pages a, .taglist a {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.shelf, .filters, .samples, .minis--shelf { overscroll-behavior-x: contain; }
/* 押した瞬間の反応。写真のあるカードは少しだけ縮め（色は変えない＝公式画像に何も重ねない）、行や札は地の色を1段上げる */
.card__link, .tile__link, .mini__link, .row__link, .guide-link, .filter, .option, .device, .taglist a, .pager__pages a, .rank-list a, .buybar__later, .later-remove, .tabs__item, .btn {
  transition: transform var(--press), background-color var(--press), opacity var(--press);
}
.card__link:active, .tile__link:active, .mini__link:active, .row__link:active, .guide-link:active { transform: scale(0.98); }
/* 選んでいる札・機器（キツネ色や緑の地）も押した瞬間に変わるよう、それらの決まりより強くする */
.filter:active, .filter[aria-current]:active, .option:active, .option:has(input:checked):active, .device:active, .device.is-ok:active, .taglist a:active, .pager__pages a:active, .later-remove:active { background-color: var(--surface-2); }
.buybar__later:active, .btn--outline:active { background-color: var(--surface-1); }
.rank-list a:active, .tabs__item:active, .btn--text:active { opacity: 0.6; }
:focus-visible { outline: 2px solid var(--fox-text); outline-offset: 2px; }

.main, .header, .crumbs, .footer, .prbar { max-width: 760px; margin-left: auto; margin-right: auto; }
.main { padding-bottom: 8px; }

.prbar { color: var(--text-2); font-size: 12px; padding: 6px 16px 0; }
/* 「くわしく」が行の途中で「くわし／く」と折れないように */
.prbar a { color: var(--text-2); white-space: nowrap; }
/* 日付・品番・「◯本目」のような短いひとまとまりを、行の途中で折らない */
.nowrap { white-space: nowrap; }

.header { display: flex; align-items: center; height: 48px; padding: 0 16px; }
.logo { display: flex; align-items: center; gap: 8px; min-height: 48px; color: var(--text); text-decoration: none; font-size: 18px; font-weight: 700; }
/* サイトの一言・上のメニュー・棚の ◀ ▶・今夜の1本のボタンの形・読みものの右の欄は PC だけ（下の「PC（幅1024px以上）」）。スマホは下のタブと指で送る棚 */
.header__tag, .pcnav, .shelf-nav, .tile__link .tile__go, .read-side { display: none; }

/* パンくずは1行。長い題名は「…」で切る（全文は下の見出しにある）。リンクは押せる高さ（行いっぱい）にする */
.crumbs { padding: 0 16px; font-size: 13px; line-height: 44px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { display: inline-block; color: var(--text-2); }

.section { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.title { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 700; }
/* 作品ページの題名は2行で切る。h1 の中身は全文のまま（検索・読み上げには全文が届く。目で読む全文は作品データ） */
.title--clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.heading { margin: 8px 0 0; font-size: 17px; font-weight: 700; }
.heading--xl { font-size: 20px; margin-top: 4px; }
.subheading { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--text-2); }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; }
p { margin: 0; }
.section p + p { margin-top: -4px; }

.reason { font-size: 13px; color: var(--text-2); line-height: 1.6; }
/* 目には見せず、読み上げにだけ届く文字（✓・「—」・★の意味） */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.panel { margin: 8px 16px; padding: 14px; background: var(--surface-1); border-radius: 14px; display: flex; flex-direction: column; gap: 8px; }
.panel--flat { margin: 0; }

/* チップ：眠い目でも読める大きさ（13px・太字・高さ28px） */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip--low { background: var(--low-bg); color: var(--low); font-weight: 700; align-self: flex-start; white-space: normal; }
.chip--sale { background: var(--sale); color: var(--on-sale); font-weight: 700; }
.star { display: inline-flex; color: var(--fox-text); }
/* 1画面目の事実の帯（8K・視点・長さ・FANZAレビュー）。公式画像の枠の外、題名のすぐ下に置く */
.facts-strip { margin: 0; padding: 0; list-style: none; }
.chip--8k { background: none; border: 1px solid var(--eightk); color: var(--eightk); }
/* /sale/ の絞り込みの札。押すものなので高さ48px・角12px・枠1.5px。選んでいる札は、機器の選択肢（.option）と同じくキツネ色の枠と薄い地（色の意味：キツネ色＝押す・選んだ）。
   スマホで1行に収まらない分は、棚と同じく画面の端まで横に送る（上下の余白はフォーカスの輪が切れないため） */
.filters { display: flex; gap: 8px; overflow-x: auto; margin: 4px -16px 0; padding: 4px 16px; scrollbar-width: none; }
.filter { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-1); color: var(--text); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.filter svg { width: 18px; height: 18px; flex: 0 0 auto; }
.filter__n { font-size: 13px; font-weight: 600; color: var(--text-2); }
.filter--8k svg { color: var(--eightk); }
.filter--soon svg { color: var(--sale); }
.filter--star svg { color: var(--fox-text); }
.filter[aria-current] { border-color: var(--fox-text); background: var(--fox-tint); }
.pr-chip { margin-left: auto; font-size: 12px; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 8px; }

/* 公式画像はトリミングしない（object-fit: contain）。画像の上には何も重ねず、角も丸めて隠さない（DMM のNG例「切り抜く」「何かを加える」） */
.official-img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--placeholder); }
.img-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--placeholder); color: var(--text-3); font-size: 12px; text-align: center; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.badge--sale { background: var(--sale); color: var(--on-sale); }
.badge--8k { border: 1px solid var(--eightk); color: var(--eightk); }

/* VRのパッケージ画像（大）は横長で、およそ 1.49:1 */
.hero { position: relative; aspect-ratio: 1.49; max-height: 480px; width: 100%; max-width: 760px; margin: 0 auto; background: var(--placeholder); }

.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price__now { font-size: 30px; font-weight: 700; line-height: 1.2; }
.price__list { font-size: 14px; color: var(--text-3); text-decoration: line-through; }
/* 8K作品で8K版の価格を大きく出すときの形式名と、その下のいちばん安い形式の価格（Issue #26） */
.price__fmt { font-size: 15px; font-weight: 700; color: var(--text-2); }
/* いまの値段の表（作品ページ）：形式ごとに1行。割引は価格の左の同じ場所 */
.ptable { background: var(--surface-1); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; }
.prow__fmt { font-size: 14px; font-weight: 700; color: var(--text-2); }
.prow__price { display: flex; align-items: center; gap: 8px; justify-self: end; }
.prow__now { font-size: 22px; font-weight: 700; line-height: 1.2; }
.prow__sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pends { margin: 0; padding: 10px 14px; background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.pends__left { margin-right: 8px; font-size: 15px; font-weight: 800; color: var(--sale); }
.strike { font-size: 13px; color: var(--text-3); text-decoration: line-through; }

.verdict { font-size: 15px; font-weight: 700; }
.verdict--low { color: var(--low); }

/* ボタン：主ボタンは高さ56px・幅いっぱい。どれも指で押しやすい48px以上 */
.btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; text-align: center; }
.btn--primary { min-height: 56px; background: var(--fox); color: var(--on-fox); font-size: 17px; font-weight: 700; }
.btn--primary:active, .btn--primary.is-busy { background: var(--fox-press); transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { color: var(--on-fox); background: var(--fox-hover); } .btn--primary:hover:active, .btn--primary.is-busy:hover { background: var(--fox-press); } }
.btn--outline { border: 1.5px solid var(--line); }
.btn--text { color: var(--text-2); font-weight: 400; font-size: 14px; }
.btn.is-off { background: var(--surface-1); color: var(--text-3); cursor: default; }

/* 一覧の1枚（A案）：スマホは2列、PCは3列。写真の枠は、パッケージ画像（大）の実物と同じ4:3（トップの棚と同じ）。
   写真の下は 題名 → 価格 → ★と件数 → セールの終わり を、どのカードも同じ順に置く */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; } }
.card__link { display: block; color: var(--text); text-decoration: none; }
.card__media { position: relative; aspect-ratio: 1.49; background: var(--placeholder); }
.card .card__media { aspect-ratio: 4 / 3; }
.card__body { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.card__title, .mini__title { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__title { min-height: 2.8em; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--text-2); }
.card__price { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 700; line-height: 1.3; }
.card__price .num { font-size: 18px; }
.card__price .price__fmt, .card__price .strike { font-size: 12px; }
.card__price .badge { height: 22px; font-size: 13px; padding: 0 6px; }
.card__price .chip--low { margin-left: auto; }
.card__sub { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.card__meta:empty { display: none; }
.card__meta .badge { height: 20px; font-size: 12px; padding: 0 5px; }

.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 似た作品：スマホは横に送る棚（次の1枚が少し見えるので、横に続くとわかる）。PCは3列 */
@media (max-width: 639px) {
  .minis--shelf { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .minis--shelf .mini { flex: 0 0 42%; scroll-snap-align: start; }
}
.mini { background: var(--surface-1); border-radius: 14px; }
.mini__link { display: block; color: var(--text); text-decoration: none; }
.mini__body { padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.mini__title { font-size: 14px; font-weight: 700; line-height: 1.45; }
.mini__price { font-size: 17px; font-weight: 700; }
/* 「8K版2,280円」とくっつかないよう、ほかのカードと同じくすきまを空ける */
.mini__price .price__fmt { margin-right: 4px; }
.mini .badge { height: 22px; font-size: 12px; padding: 0 6px; }

.rows { display: grid; gap: 8px; }
.row { background: var(--surface-1); border-radius: 14px; }
.row__link { display: flex; gap: 12px; padding: 10px; color: var(--text); text-decoration: none; }
.row__media { width: 128px; flex-shrink: 0; align-self: flex-start; }
.row .badge { height: 20px; font-size: 12px; padding: 0 5px; }
.row__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* トップの1枚（tile）。「今夜の1本」は幅いっぱいに大きく出す。
   写真の枠は、パッケージ画像（大）の実物（800×600、2026-10-25に本番で確かめた）と同じ4:3にして余白を出さない。角は丸めない（画像を切り抜かない） */
.tonight__label { margin: 0; font-size: 15px; font-weight: 800; color: var(--fox-text); }
.tile__link { display: block; color: var(--text); text-decoration: none; }
.tile__media { aspect-ratio: 4 / 3; }
.tile__body { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; }
.tile__star, .card__star { display: flex; align-items: center; gap: 3px; font-size: 16px; font-weight: 800; line-height: 1.3; }
.tile__star small, .card__star small { font-size: 12px; font-weight: 600; color: var(--text-2); }
.card__star { font-size: 14px; }
.tile__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tile__marks:empty { display: none; }
.tile .badges { gap: 4px; }
.tile .badge { height: 22px; font-size: 12px; padding: 0 6px; }
.tile__maker { font-size: 12px; font-weight: 600; color: var(--eightk); }
.tile__end, .card__end { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.tile__end b, .card__end b { color: var(--sale); font-weight: 800; }
.tile__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tonight .tile__star { font-size: 18px; }
.tonight .card__price--s .num { font-size: 22px; }
.tonight .tile__end { font-size: 13px; }
/* 今夜の1本の見出しの行：右に「選び方」（押す場所は48px。行の高さは増やさないよう上下にはみ出させる） */
.tonight__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tonight__head a { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 48px; min-height: 48px; margin: -12px 0; font-size: 13px; color: var(--text-2); }
/* 今夜の1本の選んだ理由の印の列（8K・主観・★4以上・記録内最安／値段の記録◯日目）。押せない事実なので灰の地・枠なし、✓ は文字の色（キツネ色は押す・選んだ） */
.picks { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.picks__head { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-2); }
.picks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pick { display: flex; align-items: center; gap: 2px; min-height: 28px; }
.pick__mark { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pick .badge { height: 22px; font-size: 12px; padding: 0 6px; }
.pick .chip { min-height: 22px; padding: 0 6px; font-size: 12px; font-weight: 700; }
.pick .chip--low { align-self: auto; }
.pick__ok { display: inline-flex; color: var(--text); }
.pick__ok svg { width: 18px; height: 18px; }
.pick__no { padding: 0 2px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.pick__rec { gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.pick__rec svg { width: 18px; height: 18px; }
.pick__rec b { font-size: 15px; font-weight: 800; color: var(--text); }
/* トップの棚（Netflix 流）：横に送る（次の写真が少し見えるので、横に続くとわかる）。PCは4枚ずつ見え、つまみで送れる */
.shelf { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.shelf > .tile { flex: 0 0 42%; scroll-snap-align: start; }
/* レビューの多い高評価：順位の数字を写真の左の外に大きく置く（写真には重ねない） */
.shelf { list-style: none; }
/* 数字は行の高さ（0.9）より上にはみ出す。棚は横に送るので上下もはみ出しを切ってしまうため、上を空けて数字のてっぺんを見せる */
ol.shelf { padding-top: 12px; }
.shelf > .rank { flex: 0 0 54%; display: flex; align-items: flex-start; gap: 4px; scroll-snap-align: start; }
.rank .tile { flex: 1; min-width: 0; }
/* 「10」でも写真の幅が変わらないよう、数字の幅を決めておく */
.rank__n { flex: 0 0 1.1em; text-align: right; font-size: 64px; font-weight: 900; line-height: 0.9; color: var(--bg); -webkit-text-stroke: 2px var(--text-3); letter-spacing: -2px; }
.tile__dropped .num { color: var(--low); }
.tile__before { font-size: 12px; font-weight: 600; color: var(--text-2); }
/* はじめての人へ：入門記事への入口。押しやすい高さ（64px）の行を並べる */
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.section__head .heading { margin: 0; }
.section__head a { display: inline-flex; align-items: center; min-height: 48px; margin: -2px 0; font-size: 13px; color: var(--text-2); }
.guide-links { display: grid; gap: 8px; }
.guide-link { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 14px; background: var(--surface-1); color: var(--text); text-decoration: none; }
/* 記事の種類は文字の札でなく線のアイコン（題名と同じ言葉をくり返さない）。8K とセールは下のタブと同じアイコン */
.guide-link__tag { flex: 0 0 48px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface-2); color: var(--fox-text); }
.guide-link__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guide-link__text b { font-size: 15px; line-height: 1.4; }
.guide-link__text span { font-size: 12px; line-height: 1.5; color: var(--text-2); }
@media (min-width: 640px) {
  /* PCの「今夜の1本」は、写真を左に、★・価格などを右に並べて、1画面に収める */
  .tonight .tile__link { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
  .tonight .tile__body { padding-top: 0; gap: 6px; }
  .shelf { scrollbar-width: thin; }
  .shelf > .tile { flex-basis: calc(25% - 8px); }
  .shelf > .rank { flex-basis: calc(31% - 8px); }
}
@media (min-width: 1000px) {
  .guide-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 「このサイトについて」などの表 */
.facts { margin: 0; display: grid; grid-template-columns: 96px 1fr; row-gap: 8px; column-gap: 10px; font-size: 14px; }
.facts dt { color: var(--text-2); }
.facts dd { margin: 0; }

/* サンプル画像：横にスワイプ。隣の画像を少し見せて、続きがあると分かるようにする */
.samples { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.samples::-webkit-scrollbar { display: none; }
.samples__item { flex: 0 0 82%; max-width: 420px; aspect-ratio: 1.5; scroll-snap-align: start; }

.chart { display: block; width: 100%; height: auto; max-width: 520px; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__label { font-size: 10px; fill: var(--text-2); }
.chart__line { fill: none; stroke: var(--fox-text); stroke-width: 2; }
.chart__low { fill: var(--low); }
.chart__low-label { font-size: 10px; fill: var(--low); }

/* あなたの機器で見られるか */
.device { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); max-width: 728px; min-height: 56px; margin: 8px 16px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-1); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
@media (min-width: 760px) { .device { margin-left: auto; margin-right: auto; } }
.device[hidden] { display: none; }
.device__icon { display: flex; color: var(--text-3); }
.device.is-ok { border-color: var(--low-line); background: var(--low-tint); }
.device.is-ok .device__icon { color: var(--low); }
.device.is-empty .device__icon { visibility: hidden; width: 0; }
.device__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.device__main { font-size: 15px; font-weight: 700; }
.device__sub { font-size: 12px; color: var(--text-2); }
.device__change { margin-left: auto; font-size: 13px; color: var(--text-2); white-space: nowrap; }

/* 下からのシート（機器を選ぶ） */
.sheet { margin: auto 0 0; width: 100%; max-width: 100%; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--surface-2); color: var(--text); }
@media (min-width: 640px) { .sheet { margin: auto; max-width: 480px; border-radius: 20px; } }
.sheet::backdrop { background: var(--backdrop); }
.sheet__body { padding: 12px 16px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; }
.sheet-handle { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.options { display: flex; flex-direction: column; gap: 8px; }
.option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-1); font-size: 15px; font-weight: 600; cursor: pointer; }
.option:has(input:checked) { border-color: var(--fox-text); background: var(--fox-tint); }
.option input { accent-color: var(--fox); width: 18px; height: 18px; margin: 0; }

/* 画面の下に固定する購入バー（作品ページ）：どこまで読んでも親指の下にある */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: var(--buybar-h); padding: 8px calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l)); background: var(--surface-2); border-top: 1px solid var(--line); }
@media (min-width: 760px) { .buybar { padding-left: max(calc(50% - 368px), var(--safe-l)); padding-right: max(calc(50% - 368px), var(--safe-r)); } }
.buybar__later { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1.5px solid var(--line); background: none; color: var(--text); cursor: pointer; }
.buybar__later[aria-pressed='true'] { color: var(--fox-text); border-color: var(--fox-text); }
.buybar__later[aria-pressed='true'] svg { fill: currentColor; }
.buybar__price { display: flex; flex-direction: column; min-width: 72px; line-height: 1.2; }
.buybar__price .num { font-size: 19px; font-weight: 700; }
.buybar__off { font-size: 12px; font-weight: 700; color: var(--sale); }
.buybar__fmt { font-size: 11px; font-weight: 700; color: var(--text-2); }
.buybar__go { flex: 1; flex-direction: column; gap: 0; line-height: 1.3; }
.buybar__sub { font-size: 11px; font-weight: 600; }

.toast { position: fixed; left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); bottom: calc(var(--buybar-h) + 12px + var(--safe-b)); z-index: 21; max-width: 600px; margin: 0 auto; padding: 12px 14px; border-radius: 12px; background: var(--line); font-size: 14px; }
.toast[hidden] { display: none; }

/* 画面の下のタブ（親指の届く位置） */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--tabs-h) + var(--safe-b)); padding: 0 var(--safe-r) var(--safe-b) var(--safe-l); background: var(--surface-2); border-top: 1px solid var(--line); }
@media (min-width: 760px) { .tabs { padding-left: max(calc(50% - 380px), var(--safe-l)); padding-right: max(calc(50% - 380px), var(--safe-r)); } }
.tabs__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-2); font-size: 11px; text-decoration: none; }
.tabs__item.is-active { color: var(--fox-text); font-weight: 700; }
.tabs__count { display: inline-block; min-width: 16px; margin-left: 2px; padding: 0 4px; border-radius: 8px; background: var(--fox); color: var(--on-fox); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.tabs__count[hidden] { display: none; }

.pager { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pager__sub { display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-size: 14px; }
.pager__sub a { display: flex; align-items: center; min-height: 48px; color: var(--text-2); }
.pager__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; font-size: 14px; }
.pager__pages a, .pager__pages [aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; }
.pager__pages [aria-current] { border-color: var(--line-strong); background: var(--surface-2); font-weight: 700; }
.pager__gap { display: inline-flex; align-items: center; min-height: 48px; color: var(--text-3); }

.taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
/* 札の見た目は40px のまま、押せる場所だけ上下に4pxずつ広げて48px（札のすきま8pxの中なので隣と重ならない） */
.taglist a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; }
.rank-list { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.more-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 48px; font-size: 14px; font-weight: 600; }
.rank-list a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.rank-list__n { flex: 0 0 2em; text-align: right; font-weight: 700; }
.rank-list__name { flex: 1; min-width: 0; font-weight: 700; }
.rank-list__sub { flex: 0 0 auto; text-align: right; }

.guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.article { line-height: 1.8; }
.article h2 { margin-top: 12px; }

.later-empty[hidden], .later-list[hidden] { display: none; }
/* 空の画面（「あとで」が空のとき）：大きな印・ひとこと・次に押すボタン。印は押せないので灰（キツネ色は押す・選んだ）。見つからないページの「トップへ戻る」も同じボタン */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0 8px; text-align: center; }
.empty__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.empty__icon svg { width: 32px; height: 32px; }
.empty__title { font-size: 16px; font-weight: 700; }
.empty__sub { font-size: 13px; color: var(--text-2); }
.empty__mark { display: inline-flex; vertical-align: -4px; margin: 0 2px; color: var(--text); }
.empty__mark svg { width: 18px; height: 18px; }
.empty__go { align-self: stretch; margin-top: 8px; }
@media (min-width: 640px) { .empty__go { align-self: center; min-width: 320px; } }
.later-tools { padding: 0 10px 10px; display: flex; justify-content: flex-end; }
.taglist a::before, .later-remove::before { content: ''; position: absolute; inset: -4px 0; }
/* 「外す」のすぐ上は作品のリンクなので、上には広げず下に8px（行の下の余白10pxの中） */
.later-remove::before { inset: 0 0 -8px; }
.later-remove { position: relative; align-self: flex-start; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }

.footer { margin-top: 16px; padding: 20px 16px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.footer p { margin: 0 0 6px; }
.footer a { color: var(--text-2); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0 16px; margin-bottom: 12px; font-size: 13px; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 48px; }

/* 年齢確認：別の全画面ページにせず、ほぼ不透明の幕（背景と同じ色）と下からのシート。だれにでも同じHTMLを返し、画面に重ねて出す */
.agegate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; background: var(--scrim); }
.age-ok .agegate { display: none; }
.agegate__sheet { width: 100%; max-width: 480px; padding: 12px 16px calc(28px + var(--safe-b)); background: var(--surface-2); border-radius: 20px 20px 0 0; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 640px) { .agegate { align-items: center; } .agegate__sheet { border-radius: 20px; } }
.agegate__brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.agegate__next { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: 14px; }
.agegate__label { font-size: 12px; color: var(--text-2); }
.agegate__page { font-size: 15px; font-weight: 700; }
.agegate__title { margin: 0; font-size: 16px; }
.agegate__note { margin: 0; font-size: 12px; color: var(--text-3); text-align: center; }

/* PC（幅1024px以上）：広い画面では下のタブをやめて上にメニューを置き、中身を1,200pxまで広げる。
   スマホ・タブレット（〜1023px）はここより上の決まりのまま。値は docs/design.md の段だけを使う */
@media (min-width: 1024px) {
  .main, .header, .crumbs, .footer, .prbar { max-width: 1232px; }
  /* パンくずの高さは今までどおり（マウスで押すので、スマホの押せる高さ44pxはいらない） */
  .crumbs { line-height: 1.7; }
  body.has-tabs { padding-bottom: 0; }
  .tabs { display: none; }
  .header { height: 64px; gap: 16px; }
  .header__tag { display: block; font-size: 13px; color: var(--text-2); }
  .pcnav { display: flex; gap: 4px; margin-left: auto; }
  .pcnav a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-bottom: 2px solid transparent; color: var(--text-2); font-size: 15px; font-weight: 600; text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .pcnav a:hover { color: var(--text); } }
  .pcnav a.is-active { border-bottom-color: var(--fox-text); color: var(--text); font-weight: 700; }
  /* 件数は下限の12pxで（下のタブの10pxは例外の扱い。上のメニューは小さくする理由が無い） */
  .pcnav .tabs__count { min-width: 20px; margin-left: 0; font-size: 12px; line-height: 20px; border-radius: 999px; }
  /* 中身を広げても、説明の文は1行720pxまで（長い行は読みにくい） */
  .section > p { max-width: 720px; }
  /* 一覧：1024〜1279px は4列、1280px 以上は5列（1ページ30本がちょうど6行） */
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
  /* あとで：横長の行を2列に。「外す」は行の右上 */
  .later-list.rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .later-list .row { display: flex; align-items: flex-start; }
  .later-list .row__link { flex: 1; min-width: 0; }
  .later-tools { padding: 10px; }
  /* 区切りの線は中身（左右16pxの内側）と同じ幅にする。枠線だと箱の端まで出て、中身より左右に16pxずつ長くなる */
  .footer { padding-top: 24px; border-top: 0; background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 32px) 1px no-repeat; }
  /* ハイコントラスト表示では背景の線が消えるので、枠線に戻す */
  @media (forced-colors: active) { .footer { border-top: 1px solid CanvasText; } }
  .footer__nav { gap: 4px 24px; }
  /* 作品ページ：左7（写真・買いどき・作品データ・サンプル）：右5（.item-side＝題名・帯・いまの値段・購入・機器）。
     写真は実物（800×600）より大きくしない。下の購入バーは右の列の箱になり、値段は表と重なるので出さない */
  body.has-buybar { padding-bottom: 0; }
  /* 左は 写真・買いどき・作品データ・サンプル の4段。右の列が長いときは、余りを4段目（1fr）が受けて左の段のあいだを空けない */
  .item-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(3, auto) 1fr; column-gap: 24px; align-items: start; padding: 8px 16px 0; }
  .item-layout > * { grid-column: 1; }
  .item-layout > .section { padding-left: 0; padding-right: 0; }
  .item-layout .hero { aspect-ratio: 4 / 3; max-height: none; max-width: 800px; margin: 0; }
  .item-side { grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
  .item-side > * { flex-shrink: 0; }
  .item-side .section { padding: 0; }
  .item-side .title--clamp { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; font-size: 22px; line-height: 1.4; }
  .item-side .device { width: 100%; margin: 0; }
  .item-side .buybar { position: static; min-height: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); }
  .item-side .buybar__price { display: none; }
  .item-side .buybar__sub { font-size: 12px; }
  .toast { bottom: 24px; }
  .samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .samples__item { max-width: none; }
  .minis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  /* トップ：今夜の1本は 写真7：情報5（写真は実物の800pxまで）。棚は1列に5枚（順位の棚は4枚）で、見出しの右の ◀ ▶ で送る。入門の入口は5本を1行に */
  .tonight .tile__link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
  .tonight .tile__media { max-width: 800px; }
  .tonight .tile__body { gap: 12px; padding-top: 8px; }
  .tonight .tile__title { font-size: 22px; line-height: 1.4; -webkit-line-clamp: 3; line-clamp: 3; }
  .tonight .card__price--s .num { font-size: 30px; }
  .tile__link .tile__go { display: flex; max-width: 320px; margin-top: 8px; }
  /* 選んだ理由の印は、右の列のボタンの下の空きに置き、写真の下端にそろえる（写真が低いときは、ボタンのすぐ下に続く）。
     1024〜1279px は写真が低く、題名が3行だと右の列が写真より下に出るので、スマホと同じ1行のまま。2×2の箱は1280px から */
  .tonight .tile__link { align-items: stretch; }
  .tonight .tile__media { align-self: start; }
  .tonight .picks { margin-top: auto; gap: 8px; }
  .picks__head { font-size: 15px; color: var(--text); }
  .shelf { gap: 16px; margin: 0; padding: 0 0 4px; scroll-behavior: smooth; }
  /* 1列に5枚（すきま16px×4を5枚で割る）。◀ ▶ は見えている幅ぶん送り、止まる位置は棚の scroll-snap が1枚目の頭にそろえる */
  .shelf > .tile { flex-basis: calc(20% - 13px); }
  /* 順位の棚は左に大きな数字があるので1列に4枚（すきま16px×3を4枚で割る）。写真と価格の幅をほかの棚とそろえ、定価が2行に折れないようにする */
  .shelf > .rank { flex-basis: calc(25% - 12px); }
  .section__head .heading { margin-right: auto; }
  .shelf-head { display: flex; align-items: center; gap: 8px; }
  .shelf-head .heading { margin: 0 auto 0 0; }
  .shelf-nav { display: flex; gap: 8px; }
  .shelf-nav button { width: 48px; height: 48px; border: 1.5px solid var(--line); border-radius: 999px; background: none; color: var(--text-2); font: inherit; font-size: 15px; cursor: pointer; }
  @media (hover: hover) and (pointer: fine) { .shelf-nav button:hover { color: var(--text); } }
  .shelf-nav button[aria-disabled="true"] { color: var(--text-3); cursor: default; }
  .guide-links { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .guide-link { flex-direction: column; align-items: flex-start; }
  .guide-link__tag { flex: none; width: 48px; }
  /* 読みもの：本文は720pxまで（日本語で1行40〜45字）。右に「この記事の中」と同じ種類のページへのリンク（ついてくる） */
  .read { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  /* 右の欄は画面より長くなることがある（見出しが多い記事）ので、欄の中だけで送れるようにする */
  .read-side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 12px 16px; }
  .read-side > * { flex-shrink: 0; }
  .read-side__title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
  .read-side ul { margin: 0; padding: 0; list-style: none; }
  .read-side a { display: flex; align-items: center; min-height: 48px; padding: 4px 14px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--text-2); text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .read-side a:hover { color: var(--text); } }
  .read-side a[aria-current] { border-left-color: var(--fox-text); color: var(--text); font-weight: 700; }
  /* 入門ガイドの一覧：2列の箱（トップの入門の入口と同じ箱を、アイコンを左にして横に並べる） */
  .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .guides .guide-link { flex-direction: row; align-items: center; height: 100%; }
}
/* 右の列は、高さ800px以上の画面のときだけついてくる（低い画面では下が切れたままになるので、ふつうに流す）。
   題名が長くて画面より高くなっても機器のボタンまで届くよう、列の中だけで送れるようにする */
@media (min-width: 1024px) and (min-height: 800px) {
  .item-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}
@media (min-width: 1280px) {
  .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* 今夜の1本の選んだ理由の印：右の列の空きに2×2の灰の箱（押せない事実なので枠なし・角丸は札の6px） */
  .picks__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pick { gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: 6px; background: var(--surface-2); }
  .pick__mark { font-size: 15px; }
  .pick .badge, .pick .chip { height: 24px; min-height: 24px; font-size: 13px; }
  .pick__ok, .pick__no { margin-left: auto; }
  .pick__ok svg { width: 20px; height: 20px; }
  .pick__rec { font-size: 15px; }
  .pick__rec b { font-size: 18px; }
}

/* ページの切りかえ：白く消えてから出るのでなく、短く重ねて切りかえる（スマホのアプリの画面の移り方に近づける）。
   下のタブと購入バーは名前を付けて、切りかえのあいだも動かさない。動きを減らす設定の人には使わない（docs/design.md 9章） */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 150ms; }
  /* 名前を付けるのは画面の下に固定しているときだけ（PC の購入バーは右の列の箱なので、ほかの中身といっしょに切りかえる） */
  @media (max-width: 1023px) {
    .tabs { view-transition-name: tabs; }
    .buybar { view-transition-name: buybar; }
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn--primary:active, .btn--primary.is-busy, .card__link:active, .tile__link:active, .mini__link:active, .row__link:active, .guide-link:active { transform: none; }
}