/* つぎエロ v0 のスタイル（2026-10-09 レイアウトを骨組みに合わせて手直し）。
 * 端末の設定にかかわらず明るい表示（デザイン方針 5章）。角丸は2〜3px、影なし、左揃え、情報多め（デザイン方針 4章）。
 * 色と文字の大きさの今の決まりは、後ろの「上書き」の指定（デザイン方針 6・7章。深緑がブランドの色・FANZA へのボタンだけピンク・本文15px・作品ページ17px）。
 * 上のほうの数字（本文14px・青いボタンなど）は最初の骨組みのまま。 */
:root {
  --bg: #ffffff;
  --fg: #1d1d1f;
  --muted: #5f6368;
  --link: #1a56b8;
  --brand: #1b6b55;       /* ブランドの色：深緑（2026-10-09 決定。デザイン方針 6章） */
  --brand-dark: #134e3e;
  --brand-soft: #e8f2ee;
  --page-bg: #f5f6f8;     /* 本文の地（まとまりは白い囲み） */
  --head-bg: #f6f7f9;     /* 見出しの帯 */
  --border: #c3c8ce;
  --line: #e6e8eb;
  --panel: #f4f6f8;
  --accent: #c62828;      /* 割引・期限・状態の変化だけ（赤は1つにそろえる） */
  --btn-bg: #1b6b55;
  --btn-fg: #ffffff;
  --warn-bg: #fff4e5;
  --wide: 1320px;      /* PC の本文の幅の上限（2026-10-18 作り直し 0-8。以前は 1120px。第2弾 0-6：決定「1,300〜1,400px」の中の 1,320px。バナーの列 180px と合わせて 1,500px に収まる） */
  --read: 760px;       /* 作品ページなど、読む本文の幅 */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;      /* Windows ではメイリオになる。Noto Sans JP と system-ui は一番目に置かない（2026-10-18 第2弾 3-3・0-7） */
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;   /* 数字は等幅（デザイン方針 5章） */
}

a { color: var(--link); }
/* キーボードのフォーカスの輪郭（ブラウザの既定は青で、深緑や暗い灰色の地では見えにくい）。ヘッダーとフッターの中は白（2026-10-15 評価 区切り20） */
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
main:focus-visible { outline: 0; }   /* 年齢確認を閉じた後に script が main へ移すだけ。本文全体を枠で囲まない */

[hidden] { display: none !important; }

h1 { font-size: 20px; line-height: 1.4; margin: 0.4em 0 0.6em; }
h2 { font-size: 16px; line-height: 1.4; margin: 1.8em 0 0.6em; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
h3 { font-size: 14px; margin: 1em 0 0.3em; }

.lead { color: var(--muted); margin: 0 0 1em; }
h1.site-lead { font-size: 18px; margin: 16px 0 4px; }
.entrance-line a { white-space: nowrap; }
.note { font-size: 13px; color: var(--muted); }
.count { font-weight: 700; }

/* ---------------------------------------------------------------- 全ページの枠 */

/* ヘッダー：ロゴ・検索窓・メニュー（骨組み A・B） */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.site-header-inner {
  max-width: var(--wide); margin: 0 auto; padding: 8px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
}
.site-name { font-size: 20px; font-weight: 700; text-decoration: none; color: var(--fg); }
.site-search { display: flex; flex: 1 1 280px; max-width: 460px; }
.site-search input {
  flex: 1; min-width: 0; padding: 6px 8px; font-size: 14px;
  border: 1px solid var(--border); border-right: 0; border-radius: 3px 0 0 3px; background: var(--bg); color: var(--fg);
}
.site-search button {
  padding: 6px 14px; font-size: 14px; border: 1px solid var(--btn-bg); border-radius: 0 3px 3px 0;
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-nav a { font-size: 14px; text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* 本文の枠。トップ・一覧は左に「条件で探す・ジャンル」の列（has-side）。HTML では本文が先 */
.page { max-width: var(--wide); margin: 0 auto; padding: 0 16px; }
.page.has-side {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "side main";
  gap: 0 28px; align-items: start;
}
.page.has-side > main { grid-area: main; }
.page.has-side > .side-nav { grid-area: side; }
main { min-width: 0; padding-bottom: 8px; }

/* 左の列 */
.side-nav { font-size: 13px; padding: 12px 0; }
.side-nav ul { list-style: none; margin: 0 0 10px; padding: 0; }
.side-nav li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px solid var(--line); }
.side-nav li a { text-decoration: none; }
.side-nav li a:hover { text-decoration: underline; }
.side-nav .n { color: var(--muted); font-size: 13px; }
.side-head { font-weight: 700; margin: 0 0 6px; padding: 4px 8px; background: var(--panel); border-radius: 2px; }
.side-sub { font-weight: 700; font-size: 13px; color: var(--muted); margin: 8px 0 2px; }
.side-more { margin: 4px 0 16px; }

.breadcrumbs { font-size: 13px; color: var(--muted); margin: 0; }
.breadcrumbs a { display: inline-block; padding: 10px 2px; }   /* 押せる高さ（以前は17px）。上の余白は、リンクの余白に移した（見た目の位置はほぼそのまま。2026-10-17 h5） */

/* フッター */
.site-footer {
  margin-top: 40px; padding: 16px 16px 32px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted); background: var(--panel);
}
.site-footer p { margin: 0.3em auto; max-width: calc(var(--wide) - 32px); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; max-width: calc(var(--wide) - 32px); margin: 0.6em auto 0; }
.notice-illegal { font-weight: 700; color: var(--fg); }

/* ---------------------------------------------------------------- 作品ページ（骨組み C・D の画像なしの形） */

/* 作品ページの読む列：ヘッダーと同じ左の端にそろえる（2026-10-09 決定。デザイン方針 4「左に揃える」。v1 の縦読みで見直す） */
.page:not(.has-side) > main:has(> .work) { max-width: var(--read); margin: 0 auto; }      /* 作品ページは左の列が無いので真ん中に（2026-10-18：左に偏っていた。パソコンの配置は競合の分析の時に決める） */
.work-meta { margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
.work-meta .kind { display: inline-block; border: 1px solid var(--border); border-radius: 2px; padding: 0 4px; margin-right: 6px; font-size: 13px; color: var(--fg); }
.series-more { margin: 2px 0; font-size: 13px; color: var(--muted); }
.work { max-width: var(--read); }
/* 作品情報の項目名の列は5em（最も長い「配信予定日」「ページ単価」が1行に収まる幅）にそろえ、項目名は折らない（値の欄を広く取る） */
.basic { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 2px 14px; margin: 0.5em 0; }
.basic dt { color: var(--muted); white-space: nowrap; }
.basic dd { margin: 0; }

/* 区切り「〈題名〉を FANZA で読むには（PR）」（構成設計書 9-1） */
.divider { border-top: 2px solid var(--fg); border-bottom: 1px solid var(--border); padding: 4px 0 14px; margin: 0.5em 0 1em; }
.divider h2 { border: 0; padding: 0; margin-top: 0.8em; }
/* 結論・ページ数・価格・ボタン・PR を1つの枠に（ここが区切りの主役） */
.read-box { border: 1px solid var(--border); border-radius: 3px; background: var(--panel); padding: 10px 14px; margin: 8px 0 12px; }
.read-box .conclusion-text { margin-top: 0; }
.read-box .store-action { margin-bottom: 0; }
.read-box .facts { color: var(--muted); }
.read-box .price-line { color: var(--fg); font-weight: 700; }
.conclusion-text { font-size: 15px; font-weight: 700; margin: 0.4em 0; }
.divider-ended { background: var(--warn-bg); padding-left: 12px; padding-right: 12px; }
.sale-line { color: var(--accent); font-weight: 700; margin: 0.3em 0; }
.facts, .price-line { margin: 0.2em 0; }
.price-line { font-weight: 700; }
/* 買う欄の値段は1行に分けて大きく太く。サンプルの枚数と全Nページは、その下の小さい補足の行（2026-10-17 夜の決定。値段の文は JS が data-slot="price-line" に入れる） */
.read-box .price-main { margin: 0.25em 0 0.1em; font-size: 24px; line-height: 1.4; font-weight: 800; color: var(--fg); }
.read-box .price-main .price-line { color: inherit; font-weight: inherit; margin: 0; }
.read-box .price-main .price-sub { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; }      /* かっこの中（割引率・終わりの日・時点）は小さく次の行へ */
.price-main:not(:has(> :not([hidden]))) { display: none; }      /* 値段の文が入るまで（JS が動く前・値段が古い時）は行ごと出さない */
.read-box .facts { margin: 0.1em 0 0.6em; font-size: 13px; line-height: 1.6; }
.series-link { margin: 0.8em 0; font-size: 15px; }      /* 単話の第2話以降：あらすじ・登場人物・特徴は第1話のページへの1行 */
.next-episode { font-size: 13px; margin: 0.6em 0 0; }
.episode-nav { margin: 6px 0 2px; font-size: 15px; }      /* 題名の下の「← 前の話（第N話）｜次の話（第N話） →」（2026-10-21） */
.episode-nav a { display: inline-block; padding: 8px 0; }
.episode-nav .en-sep { margin: 0 10px; color: var(--muted); }
.similar-fallback-lead { margin: 0 0 8px; color: var(--muted); font-size: 15px; }      /* 似た作品が0件の作品の代わりの行の頭の1行（2026-10-21） */
.similar-shared { margin: 0 0 8px; color: var(--muted); font-size: 15px; }      /* 理由が全部同じ欄の頭の1行（2026-10-23）。代わりの行の頭の1行と同じ見た目（これが無く、本文と同じ字で出ていた） */
.similar-fill { margin-top: 16px; }      /* 似た作品の空き枠を同じテーマの作品で埋めた行（2026-10-24）。似た作品の並びとの間を空ける */
.similar-fill > .similar-fallback-reason { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.similar-fallback-lead + .similar-fallback-reason { margin: -4px 0 8px; color: var(--muted); font-size: 15px; }      /* 理由が全部同じ時の、頭の1行の後ろの1回（2026-10-22 N5） */
/* お気に入り（2026-10-14 K9） */
.fav-line { font-size: 13px; margin: 0.8em 0 0; }
.fav-line .fav-btn { padding: 4px 10px; font-size: 13px; margin-right: 8px; }
.fav-btn.is-on { border-color: var(--ad); color: var(--ad); }      /* お気に入り済み：ピンクの文字・枠（ハートは .btn-ico.is-on で塗る） */
.fav-list { list-style: none; padding: 0; }
.fav-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.fav-list .card-price { font-size: 14px; margin: 2px 0; }      /* 「FANZA：1,100円（〇時点）」と長くなるので、カードの値段より小さく（h1） */
.fav-list .card-drop { font-size: 13px; margin: 2px 0; }
.card-drop { color: var(--muted); }
.fav-remove { margin-top: 6px; padding: 4px 10px; font-size: 13px; }      /* 各行の「外す」（h1）。押しやすい高さは評価5の別の直し */
.oneline { font-size: 15px; margin: 0.8em 0 0.4em; }

/* FANZA へのボタンと、そのすぐ下の PR 表記 */
.store-action { margin: 0.8em 0; }
.store-action .btn { margin: 0 8px 4px 0; }
.pr-label { margin: 0.1em 0 0; font-size: inherit; color: var(--fg); }   /* 本文と同じ大きさ・同じ色（2026-10-13 T84＝C。ステマ規制の運用基準：周囲より小さくしない） */
.list-pr { margin: 0.1em 0 8px; font-size: inherit; color: var(--fg); }   /* 一覧のページの頭の PR の1行（2026-10-22 N6）：行ごとの PR の1行の代わり。同じく本文と同じ大きさ・同じ色。頭の説明の行（.lead）に並べる時は main > .lead の余白が効く */
.sub-link-line { margin: 0.4em 0; font-size: 13px; }
.similar-gem { margin: 0.2em 0; font-size: 13px; color: var(--muted); }
.collection-note { margin: 0.2em 0 0.4em; font-size: 13px; color: var(--muted); }
/* ほかの版（T6 の6問目）：版ごとの題名と FANZA へのボタン。PR 表記はボタンのすぐ下 */
.editions { margin: 0.8em 0; }
.editions h3 { margin: 0 0 0.3em; font-size: 15px; }
.editions-lead { margin: 0.2em 0 0.4em; font-size: 13px; color: var(--muted); }
.editions-list { list-style: none; padding: 0; margin: 0; }
.editions-list li { padding: 6px 0; border-top: 1px solid var(--border); }
.edition-title { margin: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.edition-action { margin: 0.3em 0 0; }
.affiliate-note { font-size: 13px; }
.state-changed { font-size: 13px; color: var(--accent); margin: 0.3em 0; }
.contains, .contains b { color: var(--accent); }
.source { font-size: 13px; color: var(--muted); }

.btn {
  display: inline-block; background: var(--btn-bg); color: var(--btn-fg); border: 0; border-radius: 3px;
  padding: 9px 18px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center;
}
.btn:hover { opacity: 0.9; }

.similar-list { padding-left: 1.4em; margin: 0; }
.similar-list li { margin-bottom: 0.8em; }
.similar-list h3 { margin: 0; font-size: 14px; }
.similar-reason { display: block; color: var(--muted); font-size: 13px; margin: 0; }
.similar-list .card-meta { margin: 0; }

.attr-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0.4em 0; }
.attr-list dt { color: var(--muted); }
.attr-list dd { margin: 0; }
.attr-group { display: block; }
.attr-cat { color: var(--muted); font-size: 13px; margin-right: 6px; }
.attr-est { color: var(--muted); }
.attr-note { color: var(--muted); font-size: 13px; }
.attr-unknown { color: var(--muted); font-size: 13px; margin: 0.4em 0; }
.attr-src { display: block; color: var(--muted); font-size: 13px; }

.dislike-list { list-style: none; padding: 0; margin: 0.4em 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 12px; }
.dislike-list li { border-bottom: 1px dotted var(--border); padding: 2px 0; }
.dislike-yes .dislike-state { color: var(--accent); font-weight: 700; }
.dislike-no .dislike-state { font-weight: 700; }
.dislike-nogenre .dislike-state { color: var(--muted); }
.dislike-all-nogenre { color: var(--muted); margin: 0.4em 0; }
.same-author { padding-left: 1.2em; margin: 0.4em 0; }

/* ---------------------------------------------------------------- 一覧（骨組み B：文字のカード・1行1件） */

.cards { display: grid; gap: 12px; }
.cards.rows { gap: 0; border-top: 1px solid var(--border); }
.cards.rows .card {
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 10px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 4px 16px; align-items: start;
}
.cards.rows .card .store-action { margin: 2px 0 0; }
.card-side { min-width: 0; }
.card-price { margin: 0 0 4px; font-weight: 700; font-size: 17px; }      /* カードの値段は17px・太字。セール中だけ赤（.is-sale。2026-10-18 第2弾 3-3） */
.card-price .is-sale { color: var(--accent); }
.card-meta .kind { display: inline-block; border: 1px solid var(--border); border-radius: 2px; padding: 0 4px; margin-right: 6px; font-size: 13px; color: var(--fg); }
.card .contains { margin: 2px 0; font-size: 13px; }
h2 + .cards.rows { border-top: 0; }
/* 一覧のボタンは小さめ（2026-10-09。最初は枠線だけの控えめな形で作ったが、後ろの上書きで、サイト内の操作は深緑の塗り・FANZA へのボタンはピンクの塗りになっている） */
.cards.rows .card .btn, .data-table .btn, .find-results .btn {
  display: block; width: 100%; padding: 5px 10px; font-size: 13px; font-weight: 400;
  background: var(--bg); color: var(--btn-bg); border: 1px solid var(--btn-bg);
}
.cards.rows .card .pr-label, .data-table .pr-label { font-size: inherit; }
.card { border: 1px solid var(--border); border-radius: 3px; padding: 8px 14px 12px; }
.card h3 { margin: 0 0 2px; font-size: 15px; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card-meta { margin: 0; font-size: 13px; color: var(--muted); }
.card-summary { margin: 2px 0; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 4px 0; }
.chips li { border: 1px solid var(--border); border-radius: 2px; padding: 0 6px; font-size: 13px; line-height: 1.6; }
.chips li a { text-decoration: none; }
.dislike-summary { list-style: none; padding: 0; margin: 4px 0; font-size: 13px; }
.combo-list { list-style: none; padding: 0; margin: 0; }
.combo-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.combo-list li > a { font-weight: 700; font-size: 15px; }
.combo-intro { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.table-wrap { overflow-x: auto; }
.data-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.data-table th, .data-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.data-table th { background: var(--panel); font-weight: 700; }
/* 読み方ガイドの「こんな時は／向いている形」の表：見出しは折らず、右の列は見出しが1行に入る幅にそろえる（スマホでも1行） */
.data-table.pick th { white-space: nowrap; }
.data-table.pick :is(th, td):last-child { white-space: nowrap; width: 8em; }
.data-table .btn { padding: 4px 10px; font-size: 13px; }
.data-table .store-action { margin: 0; }

.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 1.2em 0; }
.pager a, .pager .current { min-width: 44px; padding: 9px 12px; text-align: center; border: 1px solid var(--border); border-radius: 2px; text-decoration: none; }   /* 押せる高さ44px（以前は30px。余白で広げる。2026-10-17 h5） */
.pager .current { background: var(--panel); font-weight: 700; }
.pager .gap { padding: 9px 4px; color: var(--muted); }

.sort-bar { margin: 0.8em 0; font-size: 13px; }
.author-list { list-style: none; padding: 0; margin: 0.4em 0; border-top: 1px solid var(--border); }
.author-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; border-bottom: 1px solid var(--border); padding: 8px 0; overflow-wrap: anywhere; }
.author-list .author-meta { font-size: 13px; color: var(--muted); }
/* 100人ずつのページ切り替え（site.js の setupAuthorSort）：行の display: flex が hidden に勝たないように。ページ送りは JS が使う時だけ出す（2026-10-22） */
.author-list li[hidden], .pager[hidden], .author-range[hidden] { display: none; }
.author-range { margin: 0.4em 0; }

/* /new/ の「新作 × 傾向」の絞り込み（強み7 の3）。data-filtered は site.js が付ける（保存した苦手の hidden とは別） */
.new-filter { margin: 0.8em 0; font-size: 13px; }
.new-filter[hidden], .new-filter-note[hidden] { display: none; }
.new-filter-lead { margin: 0 0 4px; }
.new-filter-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.new-filter-note { margin: 4px 0 0; color: var(--muted); }
[data-filtered] { display: none !important; }

/* ---------------------------------------------------------------- 条件で探す（パネル1つ。2026-10-09）と探すページ（結果） */

/* 左の列の「条件で探す」ボタン */
.side-find { display: block; margin: 12px 0 4px; }
.side-note { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.btn-plain { background: none; border: 1px solid var(--border); border-radius: 3px; padding: 8px 14px; font-size: 14px; cursor: pointer; color: var(--fg); }

/* パネル：PC は画面の中ほどに大きく、スマホは全画面 */
.find-dialog {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--fg);
}
.find-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.find-panel { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
.find-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.find-panel-title { font-weight: 700; font-size: 16px; margin: 0; }
.find-close { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }   /* 押せる大きさ44px（以前は37×38px。2026-10-17 h5） */
.find-dialog .find-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.find-dialog .find-keywords { padding: 12px 16px 0; }
.find-panel-body {
  position: relative;      /* 押せる札の隠した入力（position: absolute）の基準にする。無いと基準がダイアログになり、奥の札の分だけダイアログがスクロールして「×」が隠れた（2026-10-17 h5） */
  overflow-y: auto; padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px;
}
.find-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-content: start; }
.find-attrs legend { grid-column: 1 / -1; }
.find-panel-foot {
  display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--border); background: var(--panel);
}

/* 探すページ：結果の一覧と「条件を変える」 */
.find-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; }
.find-summary p { margin: 0; }
.find-chips { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.cond-chip { border: 1px solid var(--btn-bg); background: var(--bg); color: var(--btn-bg); border-radius: 2px; padding: 3px 8px; font-size: 13px; cursor: pointer; }
.find-zero { border: 1px solid var(--border); border-radius: 3px; background: var(--panel); padding: 10px 14px; margin: 8px 0; }
.find-zero p { margin: 0 0 6px; }
.find-zero .btn-plain { margin: 0 6px 6px 0; }
.find-more { margin: 12px 0 0; text-align: center; }

/* 3問診断（/quiz/。2026-10-16 K-i）：問いの枠と、結果のカードの「合った理由」 */
.quiz-form fieldset { border: 1px solid var(--border); border-radius: 3px; margin: 0 0 12px; padding: 6px 10px 10px; }
.quiz-form legend { font-weight: 700; padding: 0 4px; }
.quiz-form .note { margin: 0 0 6px; }
.quiz-actions { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }      /* 「合う作品を見る」と「やり直す」の間をあける（2026-10-18 第2弾 3-6） */
.quiz-result { margin: 16px 0; }
.quiz-reason { margin: 2px 0; font-size: 13px; }
.not-found-links { list-style: none; padding: 0; }
.not-found-links a { display: inline-block; padding: 10px 4px; min-height: 24px; }      /* 404 のリンクは押せる高さ（44px前後。2026-10-18 第2弾 3-6） */

/* （以下、パネルの中の部品） */

.find-keywords { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px 12px; }
.find-keywords label { display: block; font-size: 13px; color: var(--muted); }
.find-keywords input {
  display: block; width: 100%; margin-top: 2px; padding: 7px 8px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--fg);
}
.find-form fieldset { border: 1px solid var(--border); border-radius: 3px; margin: 0 0 12px; padding: 6px 10px 10px; }
.find-form legend { font-weight: 700; padding: 0 4px; }
.find-row { display: block; margin: 0.5em 0; }
/* 押せる札（二人の関係・雰囲気） */
.find-chip-group { grid-column: 1 / -1; margin: 4px 0 8px; }
.find-chip-title { margin: 0 0 4px; }
.chip-radio { display: inline-block; margin: 0 4px 4px 0; }
.chip-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-radio span { display: inline-block; padding: 2px 10px; border: 1px solid var(--border); border-radius: 2px; font-size: 13px; cursor: pointer; background: var(--bg); }
.chip-radio input:checked + span { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--btn-bg); outline-offset: 1px; }
.find-row select {
  display: block; width: 100%; max-width: 100%; padding: 5px; margin-top: 2px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 3px;
}
.mode-row label { display: block; }
.find-row[hidden], .mode-row[hidden] { display: none; }
.check-list { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.dislike-count { display: block; color: var(--muted); font-size: 13px; margin-left: 1.7em; }
.check-list.genre-list { max-height: 15em; overflow-y: auto; border: 1px solid var(--border); border-radius: 3px; padding: 6px 8px; }
.find-more { border: 1px solid var(--border); border-radius: 3px; padding: 4px 10px; margin: 8px 0; }
.find-multi-box { grid-column: 1 / -1; text-align: left; }
.find-multi { max-height: 18em; overflow-y: auto; border: 1px solid var(--border); border-radius: 3px; padding: 4px 8px; }
.find-cat { margin: 8px 0 0; font-size: 13px; font-weight: 700; }
.find-more summary { cursor: pointer; }

.contact-form label { display: block; margin: 0.8em 0; }
.contact-form input, .contact-form select, .contact-form textarea {
  display: block; width: 100%; padding: 6px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 3px;
}

/* ---------------------------------------------------------------- 年齢確認（構成設計書 9-8）
 * HTML と CSS で最初から重ねる。透けない。「はい」（label → チェックボックス）で閉じる＝JS が無くても閉じられる。
 * 確認済みの人は <head> のスクリプトが html に age-ok を付ける。
 * チェックボックスは画面の上端に固定（押した時に、末尾にあるこの要素までページが飛ばないように） */
.age-yes { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
#age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  background: var(--bg);
  padding: 16px;
  overflow-y: auto;      /* 横向きのスマホや大きい文字で上下が切れても、上端まで届く。中央寄せは箱の margin: auto で（align-items: center だと上端が画面の外に出る） */
}
#age-yes:checked + #age-gate { display: none; }
.age-ok #age-gate { display: none; }
.age-gate-box {
  background: var(--panel); color: var(--fg); max-width: 420px; width: 100%; margin: auto;
  border: 1px solid var(--border); border-radius: 3px; padding: 20px 24px 24px; text-align: center;
}
.age-gate-title { font-size: 18px; font-weight: 700; margin: 0 0 0.5em; }
.age-gate-yes { margin-bottom: 16px; }      /* 「はい」と「いいえ」の間を16px以上あける（押し間違えないように。2026-10-18 第2弾 3-6） */
.age-gate-no { display: block; margin-top: 0; padding: 9px 0; font-size: 15px; }   /* 押せる高さ（以前は23px。余白で広げる。2026-10-17 h5） */

/* ---------------------------------------------------------------- タブレット・スマホ */

@media (max-width: 860px) {
  /* 左の列は本文の下へ（HTML の順のまま） */
  .page.has-side { display: block; }
  .side-nav { position: static; border-top: 1px solid var(--border); margin-top: 24px; }
  .find-panel-body { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  h1 { font-size: 18px; }
  /* ヘッダー：1段目＝ロゴと検索窓、2段目＝メニュー（お気に入りを足して3〜4段になっていた。2026-10-15 B-104＝C） */
  .site-header-inner { gap: 8px 12px; }
  .site-search { flex: 1 1 0; min-width: 0; max-width: none; }
  .site-search input { text-overflow: ellipsis; }      /* 狭い画面で例の文が切れる時は「…」で終える */
  .site-search button { padding: 6px 10px; }
  .find-keywords { grid-template-columns: 1fr; }
  .find-dialog { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; }
  .find-panel { max-height: 100dvh; height: 100%; }
  .find-attrs { grid-template-columns: 1fr; }
  .basic, .attr-list { grid-template-columns: 1fr; }
  .basic dt, .attr-list dt { margin-top: 4px; }
  .btn { display: block; width: 100%; }
  .cards.rows .card { grid-template-columns: 1fr; }
  .card-side { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .card-side .card-price { margin: 0; flex: 0 0 100%; }   /* 値段は1行ぶん使う（短い「—」だと、ボタンが値段の横に並んで右へずれた。ボタンと PR の左端は値段の左端にそろう。2026-10-17 j5） */
  .cards.rows .card .btn, .data-table .btn { display: inline-block; width: auto; padding: 6px 12px; }
  .cards.rows .card .store-action { margin: 0; }
  .chips li { padding: 4px 8px; }   /* 指で押しやすい高さ。リンクの有無で高さをそろえる */
  .side-nav li { padding: 8px 0; }
  .find-close { padding: 8px 12px; }
  .check-list { grid-template-columns: 1fr; }
  /* シリーズの収録表：スマホでは行をカードにする（構成設計書 9-2） */
  .data-table.stack thead { display: none; }
  .data-table.stack, .data-table.stack tbody, .data-table.stack tr, .data-table.stack td { display: block; width: 100%; }
  .data-table.stack tr { border: 1px solid var(--border); border-radius: 3px; margin-bottom: 8px; padding: 4px 8px; }
  .data-table.stack td { border: 0; padding: 2px 0; }
  .data-table.stack td::before { content: attr(data-label) "："; color: var(--muted); font-size: 13px; }
}

/* 保存した苦手の設定のお知らせ・パネルの「ほかのページにも使う」（2026-10-09） */
.dislike-notice { border: 1px solid var(--border); border-radius: 3px; background: var(--panel); padding: 6px 10px; margin: 0 0 12px; font-size: 13px; }
.dislike-notice[hidden] { display: none; }
.keep-dislikes { display: block; margin: 8px 0; font-size: 13px; }
.free-mark { color: var(--fg); font-size: 13px; }
/* スマホの「条件で探す」・探す結果の並べ替え（2026-10-09）。分類のタブ（ヘッダーの形式のタブ）は 2026-10-18 の作り直しでなくした */
.mobile-find { display: none; margin: 0 0 10px; }
.find-sort { margin: 0 0 8px; font-size: 13px; }
/* 本文の上の「条件で探す」（.mobile-find）は出さない：ヘッダーと左の列（本文の下）にあるため（2026-10-17 j5。評価5 の⑧） */

/* ================================================================ 部品の見た目（2026-10-09 決定。デザイン方針 6章）
 * ストア寄り（DLsite 型）：色の帯のヘッダー・白地の形式のタブ・薄い灰色の地に白い囲み・見出しの帯・囲みの左の列・暗いフッター。
 * 上の指定を、ここで上書きする。 */
body { background: var(--page-bg); font-size: 13px; line-height: 1.6; }

/* 「含む」は色を付けず、黒の枠の札（色は割引・期限・ボタン・選択中だけ） */
.contains, .contains b { color: var(--fg); }
.contains b, .dislike-yes .dislike-state { border: 1px solid var(--fg); border-radius: 2px; padding: 0 4px; background: var(--bg); font-weight: 700; color: var(--fg); }
.sale-line, .state-changed { color: var(--accent); }

/* カード：題名は黒（押すと青）。FANZA へのボタンは深緑の塗り（サイト内のリンクの青と色でも分ける） */
.card h3 a, .similar-list h3 a { color: var(--fg); }
.card h3 a:hover, .similar-list h3 a:hover { color: var(--link); }
.cards.rows .card .btn, .data-table .btn { background: var(--brand); color: var(--btn-fg); border-color: var(--brand); }
.card-price { font-size: 17px; }

/* ヘッダー：ブランドの色の帯。その下に白地の形式のタブ */
.site-header { background: var(--brand); border: 0; }
.site-name, .site-nav a { color: #fff; }
.site-search input { border-color: #fff; }
.site-search button { background: var(--brand-dark); border-color: var(--brand-dark); }

/* 本文：薄い灰色の地に、まとまりごとの白い囲み。見出しは灰色の帯＋左にブランドの色の太線 */
.page { margin-top: 14px; }
main > section, main > .work, main > .find-result-area { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 0 14px 10px; margin: 0 0 14px; }
main > section > h2, .work > section > h2, .work > .work-about > section > h2, main > .find-result-area > h2 {
  margin: 0 -14px 8px; padding: 7px 12px; font-size: 14px; background: var(--head-bg); border-bottom: 1px solid var(--border); border-left: 4px solid var(--brand); }
main > h1, main > .lead, main > .count, main > .note { background: var(--bg); margin: 0; padding: 10px 14px 4px; border: 1px solid var(--border); border-bottom: 0; border-top: 0; }
main > h1:first-of-type { border-top: 1px solid var(--border); border-radius: 3px 3px 0 0; }
main > .breadcrumbs + h1 { border-top: 1px solid var(--border); }
main > .lead { padding: 0 14px 10px; }
main > :is(h1, .byline, .lead, .count, .note):not(:has(+ :is(.byline, .lead, .count, .note))) { border-bottom: 1px solid var(--border); margin-bottom: 14px; border-radius: 0 0 3px 3px; padding-bottom: 10px; }
h1.site-lead { margin-top: 0; }
.cards.rows { border-top: 0; }
.cards.rows .card:last-child { border-bottom: 0; }
.work { padding: 6px 14px 14px !important; }
.work-head > h1 { margin-top: 0.3em; }
.work > section > h2, .work > .work-about > section > h2 { margin: 18px -14px 8px; }
.work > .divider { border-top: 0; border-bottom: 0; padding-top: 0; }
.work > .divider > h2 { margin: 12px -14px 8px; padding: 7px 12px; font-size: 15px; background: var(--brand-soft); border-left: 4px solid var(--brand); border-bottom: 1px solid var(--border); }

/* 左の列：見出しつきの白い囲み */
.side-nav { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 0 0 6px; }   /* 列の中だけで動かさない（sticky・max-height・overflow をやめた）：ページと一緒に流れる。2026-10-18 作り直し 第2弾 1-4 */
.side-find { display: block; margin: 10px; text-align: center; }
.side-head { margin: 6px 0 4px; padding: 6px 10px; background: var(--head-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13px; }
.side-nav ul { padding: 0 10px; }

/* フッター：暗い灰色の帯 */
.site-footer { background: #3b4046; color: #d4d8dd; border: 0; }
.site-footer a { color: #fff; }

@media (max-width: 860px) {
  .side-nav { margin-top: 0; max-height: none; overflow-y: visible; }
  .mobile-find { margin-top: 0; }
}
main > h1.site-lead { margin: 0; }
.list-body { padding-top: 8px !important; }
.list-body .sort-bar { margin: 0 0 4px; }
.byline { color: var(--muted); font-size: 13px; background: var(--bg); margin: 0; padding: 0 14px 2px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.fit { margin: 2px 0; font-size: 13px; }
.fit b { font-weight: 700; }
/* 記事のページ（読み物・紹介記事。2026-10-10）：作品ページと同じ白い囲み。読む幅で、本文は少し大きく */
main > article.guide, main > article.review { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 6px 14px 14px; max-width: var(--read); }
/* 紹介記事・読み方ガイドは真ん中に寄せる（2026-10-18 作り直し第2弾 0-5・2-3：左寄せの記事をなくす。1列の作品ページと同じ。パンくずも同じ列に入れるため main ごと寄せる。
   読む文の行の長さは今のまま＝var(--read)。左の列があるページ〈has-side〉は触らない） */
.page:not(.has-side) > main:has(> article.guide), .page:not(.has-side) > main:has(> article.review) { max-width: var(--read); margin: 0 auto; }
article.guide > section > h2, article.review > section > h2 { margin: 18px -14px 8px; padding: 7px 12px; font-size: 14px; background: var(--head-bg); border-bottom: 1px solid var(--border); border-left: 4px solid var(--brand); }
article.guide, article.review { font-size: 14px; line-height: 1.75; }
article.guide .cite { font-size: 13px; color: var(--muted); }
article.guide .source-list { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
article.review details.spoiler { border: 1px solid var(--border); border-radius: 3px; padding: 6px 10px; }
article.review details.spoiler summary { cursor: pointer; }
.faq dt { font-weight: 700; margin-top: 8px; }
.faq dd { margin: 2px 0 0 0; }

/* ================================================================ 文字と FANZA へのボタン（2026-10-10 決定）
 * フォントは端末のフォント（"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo。Google Fonts は読み込まない。2026-10-18 第2弾 3-3）。大きさは「読みやすい形」より一段大きく：一覧15px、作品ページ・記事17px。
 * FANZA へのボタン（広告）だけピンク。サイト内の操作（条件で探す・検索・選択中の札）は深緑のまま（広告と操作を色で分ける）。
 * セールの赤（--accent）は文字、ボタンは塗りで、形でも見分ける。 */
:root { --ad: #d6336c; --ad-dark: #a61e4d; }
body { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 15px; line-height: 1.75; }
.work, article.guide, article.review { font-size: 17px; line-height: 1.9; }
h1 { font-size: 26px; }
main > section > h2, .work > section > h2, .work > .work-about > section > h2, article.guide > section > h2, article.review > section > h2 { font-size: 16px; }
.work > .divider > h2 { font-size: 17px; }
.card h3 { font-size: 17px; }
.card-meta, .note, .chips li, .series-more, .fit, .card .contains { font-size: 13px; }
.card-summary { font-size: 15px; }
.side-nav, .side-head { font-size: 15px; }
.site-nav a { font-size: 15px; }
.conclusion-text { font-size: 18px; }
.oneline { font-size: 17px; }
.data-table { font-size: 14px; }
/* FANZA へのボタン（広告）だけピンク */
.btn.store-link, .cards.rows .card .btn.store-link, .data-table .btn.store-link, .find-results .btn.store-link {
  background: var(--ad); border-color: var(--ad); color: #fff; }
.btn.store-link:hover { background: var(--ad-dark); border-color: var(--ad-dark); opacity: 1; }
/* 試し読みのボタン（2026-10-21。2026-10-24 から買う欄の外、表紙・サンプル画像の欄のすぐ下の箱）：購入と見分けるため、白い地にピンクの枠と文字（同じ広告なので色はそろえる） */
.btn.store-link.tachiyomi-link { background: #fff; color: var(--ad); border: 2px solid var(--ad); padding-top: 7px; padding-bottom: 7px; }
.btn.store-link.tachiyomi-link:hover { background: #fdf0f5; color: var(--ad-dark); border-color: var(--ad-dark); }
/* 試し読みの箱（2026-10-24）：表紙・サンプル画像の欄（.gallery）のすぐ下に、ボタンとそのすぐ下の PR の1行。スマホ（860px 以下）は横幅いっぱいのボタン、
   パソコンは幅を 420px までに（2列の形では左の列の中に収まる。列の置き方は画像を出す版のスタイル）。画像を出さない版・画像が無い作品は .gallery が無いので買う欄の区切りのすぐ上。
   2026-10-23 の「画像の無い作品は試し読みを主に・塗りつぶし」（lead-tachiyomi）は、箱が買う欄の外になり表紙のすぐ下に先に来るので外した */
.tachiyomi-box { margin: 10px 0 14px; }
.tachiyomi-box .btn { display: block; box-sizing: border-box; width: 100%; max-width: 420px; margin: 0; }
.tachiyomi-box .pr-label { margin: 4px 0 0; }
@media (max-width: 860px) { .tachiyomi-box .btn { max-width: none; } }
@media (max-width: 480px) {
  body { font-size: 15px; }
  .work, article.guide, article.review { font-size: 16px; }
  h1 { font-size: 22px; }
  /* 入力欄は16px（16px 未満だと iPhone で押した時に画面が拡大される。2026-10-15 評価 区切り20） */
  input, select, textarea, .site-search input { font-size: 16px; }
  /* トップの入口のリンクは折り返す（長い属性名で横にはみ出した。2026-10-15 評価 区切り20） */
  .entrance-line a { white-space: normal; }
}

/* ================================================================ 文字の大きさと押せる所の見直し（2026-10-17 h5。評価5・評価4）
 * 文字：デザイン方針 7章（一覧の本文15px・作品ページ17px／スマホは15px・16px）に、13px のまま残っていた部品を合わせる。
 *   文を伝える部品（組み合わせの説明・こんな人に・並べ替え・似ている理由など）は本文の大きさ（15px）、形式・作者・ページ数・「含む」の行は14px、
 *   札・注・出どころ・日付・パンくず・フッターなど小さくしてよいものは13px（12px 以下は無くす）。札は 6章の「角丸の小さい四角い札」のまま。
 *   PR 表記は本文と同じ大きさのまま（T84＝C）。 */
.card-meta, .card .contains, .series-more, .dislike-summary { font-size: 14px; }
.combo-intro, .fit, .sort-bar, .find-sort, .new-filter, .dislike-notice, .keep-dislikes, .quiz-reason { font-size: 15px; }
.kind, .card-meta .kind, .work-meta .kind { font-size: 13px; }
.byline, .free-mark, .dislike-count, .find-keywords label { font-size: 13px; }
.work-meta, .attr-unknown, .similar-reason, .similar-gem, .collection-note, .sub-link-line, .editions-lead, .next-episode, .state-changed { font-size: 15px; }
.edition-title, .similar-list h3 { font-size: 16px; }
.work .attr-note, .work .attr-src, .work .attr-cat, .work .source, .work .note { font-size: 14px; }
.cards.rows .card .btn, .data-table .btn, .find-results .btn { font-size: 14px; }
article.guide .cite, article.guide .source-list { font-size: 13px; }
.site-footer, .site-footer .affiliate-note { font-size: 13px; }
.site-footer .notice-illegal { font-size: 14px; }
/* フッターの「画像を隠す」：暗い灰色の地の上で白い文字（文字色が本文の黒のままで、地との差が約1.6:1だった。いまは10:1ほど）。押せる高さ44px */
.site-footer .btn-plain { color: #fff; border-color: #d4d8dd; min-height: 44px; }
/* 押せる所：見た目はそのまま、押せる範囲だけを広げる（札のリンクは、札の枠の外へ見えない範囲を足す。以前は高さ19px） */
.chips li { position: relative; }
.chips li a::after { content: ""; position: absolute; inset: -11px -2px; }
/* 3つの質問の選択肢（以前は高さ29px）：44px前後 */
.quiz-form .chip-radio span { padding: 8px 14px; font-size: 15px; }
/* 販売終了の作品：見出しが同じことを言うので、結論の文を隠した区切りの枠は、中に見えるものが無ければ出さない */
.read-box:not(:has(> :not([hidden]))) { display: none; }
/* 販売終了の作品の答えの区切り：見出しのほかに中身が無い時は、薄い橙色の帯（背景と下の余白）を出さない（見出しだけが残る。販売が再開された時の知らせや、次の話・収録の知らせが出れば帯も戻る。2026-10-17 j4） */
.divider-ended:not(:has(> :not(h2, .read-box))):not(:has(> .read-box > :not([hidden]))) { background: none; padding-bottom: 0; margin-bottom: 0; }
.work > .divider-ended:not(:has(> :not(h2, .read-box))):not(:has(> .read-box > :not([hidden]))) > h2 { margin-bottom: 0; }
/* シリーズのページ：題名の下に文が続くと、「作者」の囲みの上の線が欠けた */
main > :is(.conclusion-text, .sample-link) + .lead { border-top: 1px solid var(--border); border-radius: 3px; }

/* ---------------------------------------------------------------- 2026-10-10 多角分析を受けた直し */
/* 全ページ必須の注意文：暗いフッターの上で読めるように（以前は文字と地の明るさの差 1.6:1） */
.site-footer .notice-illegal { color: #fff; }
/* 左の列の件数が「2／3」に割れないように */
.side-nav li a { min-width: 0; }
.side-nav .n { flex-shrink: 0; white-space: nowrap; }
/* スマホの「条件で探す」：リンクの下線を消し、サイトの操作の色（深緑）にそろえる */
a.btn-plain { display: inline-block; text-decoration: none; }
.mobile-find .btn-plain { border-color: var(--brand); color: var(--brand); }
/* 入力欄・選ぶ札の枠：白い地との差を 3:1 以上に（WCAG 1.4.11。以前は 1.49:1） */
:root { --control-border: #8a9199; }
input[type="search"], input[type="text"], input[type="email"], textarea, select, .chip-radio span {
  border-color: var(--control-border); }
/* 年齢確認：何のサイトかを先に見せる */
.age-gate-site { font-size: 20px; font-weight: 700; color: var(--brand); margin: 0 0 2px; }
.age-gate-about { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
/* 画面には出さず、読み上げにだけ使う見出し */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* AI の判定で含む可能性（未確認）：「含む」と見分けられるよう点線の枠（2026-10-11 C1） */
.dislike-ai .dislike-state { border: 1px dashed var(--muted); border-radius: 2px; padding: 0 4px; color: var(--fg); }
/* ヘッダーのサイトの一文（2026-10-11 D2）は 2026-10-18 の作り直しでヘッダーから外した（トップは本文の一番上・年齢確認の画面にある） */
/* お問い合わせの自動化よけの欄（人には見せない。2026-10-11） */
.contact-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* セール中の作品（/sale/）と、トップの「いま0円の作品」の段（2026-10-16 Q1＝B・Q2＝A。中身は sale.js が毎日のデータから描く。角丸2〜3px・影なし） */
.sale-empty { margin: 12px 0; padding: 8px 12px; background: var(--panel); border-radius: 2px; }
.sale-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 8px 0 12px; font-size: 13px; }
.sale-controls select { margin-left: 6px; }
.sale-col { margin: 0 0 24px; }
.sale-col h2, .sale-col h3 { font-size: 15px; line-height: 1.4; margin: 1.2em 0 4px; }      /* 本体の一覧は見出し（.sale-heading の h2）の下なので、ストア名は h3（h1） */
.sale-heading { font-size: 16px; line-height: 1.4; margin: 1.2em 0 4px; }
.sale-fetched { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
/* ストアの欄の頭は1行「FANZA（値段：10/21 21:06時点）」（2026-10-22 F21）。時点は同じ行の小さな字 */
.sale-col .sale-col-head { margin: 4px 0 8px; }
.sale-col-head .sale-fetched { display: inline; margin: 0 0 0 4px; font-weight: 400; }
/* 24作品ずつのページ切り替え（2026-10-22 F18）：番号のボタン。見た目はランキングの .rank-pager・.rank-page（static_ranking/ranking.css）と同じ。ranking.css はランキングのある版にしか入らないので、ここに持つ */
.sale-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.sale-page { min-width: 44px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; cursor: pointer; }
.sale-page.is-on, .sale-page[aria-current="page"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.bcard.sale-off { display: none; }      /* 見せるページの外の作品（sale.js がページを変えるたびに付け外しする。苦手の設定で隠す hidden とは別） */
@media (max-width: 480px) { .sale-page { min-width: 40px; padding: 6px 8px; } }
.sale-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.sale-row { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.sale-row .sale-row-title { flex: 1 1 14em; min-width: 0; }
.sale-row .store-action, .fav-list .store-action { flex: 0 0 100%; margin: 4px 0 2px; }      /* 行のストアのボタン（すぐ下に PR の1行。2026-10-18 第2弾 3-1・3-5） */
.sale-meta { font-size: 13px; color: var(--muted); }
.sale-meta .kind { display: inline-block; border: 1px solid var(--border); border-radius: 2px; padding: 0 4px; margin-right: 6px; font-size: 13px; color: var(--fg); }
.free-top { margin: 0 0 24px; }
.free-note { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.free-col h3 { font-size: 15px; line-height: 1.4; margin: 1em 0 4px; }
/* ストアごとの値段・セールの行、価格の推移と記録上の最安値（作品ページ）、前回の記録より下がった作品（/sale/）
   （2026-10-17 g84。後ろの二つは案。中身は JS が毎日のデータから描く。角丸2〜3px・影なし） */
.store-facts { margin: 0.2em 0; }
.price-history { margin: 10px 0 4px; font-size: 13px; }
.price-history summary { cursor: pointer; color: var(--link); }
.ph-lowest { margin: 6px 0 4px; font-weight: 700; }
.ph-table { border-collapse: collapse; width: 100%; max-width: 420px; }
.ph-table th, .ph-table td { border: 1px solid var(--border); padding: 3px 8px; font-size: 13px; }
.ph-table th { text-align: left; font-weight: 400; }
.ph-table td { text-align: right; white-space: nowrap; }
.ph-note { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.ph-note.ph-since { margin-top: 8px; }
.ph-note.ph-since:empty { display: none; }
.sale-drops { margin: 0 0 24px; }
.sale-drops h2 { font-size: 16px; line-height: 1.4; margin: 1.2em 0 4px; }
.sale-drops .sale-col h3 { font-size: 15px; line-height: 1.4; margin: 1em 0 4px; }
.sale-note { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.sale-drop { font-size: 13px; color: var(--muted); }

/* トップの特集の帯（9-5。2026-10-17）：config/features.json に書いた特集だけ。題名のリンクと1文。色は使わない */
.feature-band { margin: 0 0 24px; }
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.feature-title { display: block; font-weight: 700; font-size: 15px; }
.feature-text { display: block; font-size: 13px; color: var(--muted); }
/* トップの割引・もうすぐ終了の段（9-5。2026-10-17）：0円の段と同じ横1列の札。期限と割引率だけ赤（デザイン方針 5章） */
.saleend-top { margin: 0 0 24px; }
.saleend-note { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.saleend-col h3 { font-size: 15px; line-height: 1.4; margin: 1em 0 4px; }
.saleend-more { margin: 4px 0 0; font-size: 13px; }
/* シリーズの「第1話のサンプル画像を見る →」（9-2。画像を出す段階だけ）・ほかのストアのボタンがあるページの頭の広告の1行（B-153。本文と同じ大きさ・同じ色） */
.sample-link { margin: 0 0 1em; }
.pr-head { margin: 0 0 10px; font-size: inherit; color: var(--fg); }

/* ================================================================ 画面の配置 第2版（2026-10-17 h6）
 * 作品ページ：題名・形式と作者の1行（画像を出す形でも残す）・表紙・答えの区切りを「頭」にまとめ、そのあとに 1行要約と札 → サンプル → 似た作品 → 続き … と並べる。
 * トップ：新作を表紙の横1列の札に。いま0円・もうすぐ終了は小さく。 */

/* 題名の下の1行と、同じ段の「画像を隠す」・お気に入り（押せる高さ44px） */
.work-sub { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: -4px 0 8px; }      /* 作者・ページ数・配信日の行と、ボタンの行を分ける */
.work-sub .work-meta { margin: 0; }
.work-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.work-tools .fav-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.work-tools .btn-plain { padding: 4px 12px; font-size: 14px; min-height: 44px; }      /* 「画像を隠す」とお気に入りは、高さ・形・余白をそろえる */
.work-tools:not(:has(> :not([hidden]))) { display: none; }      /* 中の部品が全部隠れている間（JS が動く前・画像のない形）は段ごと出さない */
.work-tools .fav-line .fav-btn { margin-right: 0; }
/* 線の絵つきのボタン（目＝画像の切り替え、ハート＝お気に入り）。絵は文字と同じ色の線。お気に入り済みは塗りのハート＋ピンクの文字・枠、画像を隠している間は目に斜線 */
.btn-ico { display: inline-flex; align-items: center; gap: 6px; }
.btn-ico .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ico .ico-slash { display: none; }
.btn-ico.is-off .ico-slash { display: inline; }
.btn-ico.is-on .ico { fill: currentColor; }

/* 題名の下の飛び先（2026-10-18 作り直し第2弾 2-1）：小さな1行。「値段と買う所 ↓」は画像が出ている間だけ（買う欄が題名のすぐ下にある1列の形では出さない。
   gallery は画像を読み込むまで・画像を隠した時 hidden）。全部隠れた時（販売終了に変わった・似た作品の欄が隠れた）は行ごと出さない。押せる高さは44px前後 */
.work-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; }
/* 目次は四角い小さな札のボタン（縦線の区切りはやめた）。2枚目以降の前に区切りの文字は出さない */
.work-jump a, a.jump-btn { display: inline-block; padding: 10px 12px; line-height: 1.5; border: 1px solid var(--muted); border-radius: 2px; background: var(--bg); color: var(--link); text-decoration: none; font-size: 14px; }
.work-jump a:hover, a.jump-btn:hover { text-decoration: underline; }
/* 「値段と買う所 ↓」は塗りつぶしのボタンの見た目に（2026-10-23。サイトの中の飛び先なので広告のピンクではなく深緑） */
.work-jump a[data-jump="buy"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: bold; }
.work-jump a[data-jump="buy"]:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
/* 同じ札のボタン（a.jump-btn）を、作者・シリーズ・月ごとの新作のページの文字のリンクの並び（RSS・似た作者・シリーズの一覧へ・サンプル画像・版違い）にも使う（2026-10-22）。
   .jump-list＝札のボタンを横に並べる一覧、.tally-list＝「属性 値 が3作中2作」の行（値が札のボタン）、.series-head＝作者ページのシリーズの見出し（見た目の土台の見出しの左線と同じ） */
.jump-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tally-list { list-style: none; margin: 0; padding: 0; }
.tally-list li { margin: 0 0 8px; line-height: 2.4; }
.tally-list .tally-attr { margin-right: 8px; font-weight: 700; }
.tally-list a.jump-btn { margin: 0 4px 0 0; padding: 4px 12px; }
.feed-link { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.feed-link small { font-size: 13px; color: var(--muted); }
.series-fold a.jump-btn { margin-left: 4px; }
.ep-variants a.jump-btn { margin: 2px 8px 2px 0; padding: 4px 10px; font-size: 13px; }
.series-head { font-size: 16px; font-weight: 800; border-left: 4px solid var(--brand); padding-left: 8px; margin: 1em 0 0.4em; }
.work-jump a[data-jump="buy"] { display: none; }
.work:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) .work-jump a[data-jump="buy"]:not([hidden]) { display: inline-block; }
.work:not(:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended])))) .work-jump:not(:has(a[data-jump="similar"]:not([hidden]))) { display: none; }
.work-jump:not(:has(a:not([hidden]))) { display: none; }

/* 答えの区切りの下：1行要約・特徴の札・苦手要素の要約（短い版） */
.work-glance { margin: 4px 0 14px; }
.work-glance .oneline { margin: 0.2em 0 0.4em; }
.work-glance .sub-link-line { margin: 0.2em 0; }
/* 「この作品の特徴」の表（開いたまま。2026-10-18 決定「作品ページの似た作品と特徴の欄」）：1行1属性。値は四角い札（デザイン方針 6章：角丸2px）。
   実線の札＝公式ジャンル・つぎエロの判断、点線の札＝手元の AI の推定（「（推定）」と書く）、黒い枠＝苦手要素の「含む」（色なしの枠） */
.features { margin: 4px 0 14px; }
.feat-legend { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.feat-list { border-top: 1px solid var(--line); }
.feat-row { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: start; }
.feat-row-fold { display: block; padding: 0; }
.feat-label { color: var(--muted); font-size: 14px; padding-top: 3px; white-space: nowrap; }      /* 項目名は1行（「ヒロイン」「ほかのジャンル」「リード」など短い名前。列は9em） */
.feat-body { min-width: 0; }
.work .feat-label { color: var(--fg); }      /* 作品ページの項目名は本文と同じ濃い色（2026-10-26。薄い灰色だと読みにくい） */
/* 「この作品について」の文とひとこと（2026-10-26。templates/work.html の about_block）：どんな話・読みどころ・こんな人には特徴の表と同じ行の形（feat-list）。
   こんな人には丸い薄緑の札（16px。折り返しても札の列の左端にそろう）。ひとことは人のシルエット＋左向きのしっぽ付きの吹き出し */
.about-text { margin: 6px 0 14px; }
.about-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.about-chip { font-size: 16px; background: var(--brand-soft); color: var(--brand-dark); border-radius: 999px; padding: 3px 10px; line-height: 1.5; }
.about-say { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 16px; }
.about-say .about-face { flex: 0 0 64px; text-align: center; }
.about-say .about-face svg { display: block; margin: 0 auto; }
.about-say .about-face small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.3; color: #8a5a00; }      /* 見本は10px。13px 未満は使わない決まり（test_99）なので 13px */
.about-say .about-bubble { position: relative; flex: 1 1 auto; margin-top: 2px; padding: 9px 13px; background: #fffaf0; border: 1px solid #ecc982; border-radius: 14px; }
.about-say .about-bubble::before { content: ""; position: absolute; left: -9px; top: 12px; border-width: 8px 9px 8px 0; border-style: solid; border-color: transparent #ecc982 transparent transparent; }
.about-say .about-bubble::after { content: ""; position: absolute; left: -7px; top: 13px; border-width: 7px 8px 7px 0; border-style: solid; border-color: transparent #fffaf0 transparent transparent; }
.about-bubble-h { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #8a5a00; }
.about-bubble-t { margin: 0; font-size: 15px; line-height: 1.7; }
.feat-body > .attr-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.feat-body > .attr-group + .attr-group { margin-top: 6px; }
.feat-body .attr-cat { margin-right: 0; }
.feat-vals { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.fchip { position: relative; display: inline-block; border: 1px solid var(--muted); border-radius: 2px; padding: 0 8px; font-size: 14px; line-height: 1.7; color: var(--fg); background: var(--bg); text-decoration: none; }
a.fchip { color: var(--link); }
a.fchip:hover { text-decoration: underline; }
a.fchip::after { content: ""; position: absolute; inset: -4px -2px; }      /* 押せる範囲を44px前後に広げる（見た目はそのまま） */
.fchip-est { border-style: dotted; }
.fchip-yes { border-color: var(--fg); font-weight: 700; }
.fchip .attr-est { margin-left: 2px; font-size: 13px; }
.feat-none { color: var(--muted); font-size: 15px; }
.feat-b64 { margin: 4px 0 0; }
.feat-articles { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.feat-articles li { padding: 2px 0; }
.feat-foot { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.feat-help { margin: 4px 0 0; }
.feat-help-list { margin: 0 0 8px; padding-left: 1.3em; }      /* 札の見方：箇条書き5行 */
.feat-help-list li { margin: 2px 0; }
.feat-help > summary, .feat-sit > summary { cursor: pointer; padding: 10px 0; color: var(--link); font-size: 15px; list-style: none; }
.feat-help > summary::-webkit-details-marker, .feat-sit > summary::-webkit-details-marker { display: none; }
.feat-sit > .feat-body { padding: 0 0 10px; }
@media (max-width: 480px) {
  .feat-row { grid-template-columns: 1fr; gap: 2px; }
  .feat-label { padding-top: 0; }
  .feat-vals { gap: 8px 8px; }
  .fchip { padding: 6px 10px; }
}

/* 横長の行（作品ページの「この作品が好きなら」「続き」「作者のほかの作品」・紹介記事の「好きなら」。2026-10-18 決定）。表紙の列は画像を出す段階の CSS */
ul.work-rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
ul.work-rows > .work-row { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.work-row h3 { margin: 0; font-size: 16px; }
/* 似た作品の行は、行全体を押せる（題名のリンクを行いっぱいに広げる。作者名のリンクは前に出して、そのまま押せる。2026-10-18 第2弾 3-6） */
.work-row { position: relative; }
.work-row h3 a::after { content: ""; position: absolute; inset: 0; }
.work-row .card-meta a { position: relative; z-index: 1; }
.work-row .row-tag { margin: 0 0 2px; font-size: 14px; color: var(--muted); }
.work-row .card-summary { margin: 2px 0; }
.work-row .card-meta { margin: 0; }
/* 右の列の囲み（work-about。サンプル画像のある作品だけ。2026-10-18 決定 ②）：スマホと狭い画面では囲みは素通しで、見出しは出さない
   （並びは今のまま。サンプル → 買う欄 → あらすじ → 判断の材料）。パソコンの2列の時だけ、画像を出す段階の CSS が見出しを出して右の列にする */
.work-about > .about-head { display: none; }

/* 「この作品の特徴」と苦手要素のくわしい表（畳んである）：見出しの帯が開閉のつまみ */
.attr-fold > summary { list-style: none; cursor: pointer; display: block; }
.attr-fold > summary::-webkit-details-marker { display: none; }
.attr-fold > summary > h2 { margin: 0 -14px; padding: 7px 12px; font-size: 16px; line-height: 1.4; background: var(--head-bg);
  border-bottom: 1px solid var(--border); border-left: 4px solid var(--brand); }
.attr-fold[open] > summary > h2 { margin-bottom: 8px; }
.attr-fold > summary > h2::after { content: "＋"; float: right; color: var(--brand); }
.attr-fold[open] > summary > h2::after { content: "－"; }
.fold-hint { display: block; margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.attr-fold[open] .fold-hint { display: none; }
.work > .editions > h3 { margin: 18px -14px 8px; padding: 7px 12px; font-size: 16px; line-height: 1.4; background: var(--head-bg);
  border-bottom: 1px solid var(--border); border-left: 4px solid var(--brand); }

.new-more { margin: 4px 0 0; font-size: 15px; }
.new-more a { display: inline-block; padding: 10px 0; }   /* 押せる高さ（44px前後） */

/* トップのいま0円・もうすぐ終了：小さく（札を細く・文を小さく・段の間を詰める） */
.free-top, .saleend-top { padding-bottom: 6px; }
.free-top > h2, .saleend-top > h2 { font-size: 15px; }
.free-note, .saleend-note { font-size: 13px; margin: 0 0 4px; }
.free-col h3, .saleend-col h3 { font-size: 14px; margin: 0.4em 0 2px; }
.saleend-more { margin: 2px 0 0; }
.saleend-more a { display: inline-block; padding: 10px 0; }

/* スマホでは、組み合わせの説明は2行まで（全文は各まとめ記事の頭にある） */
@media (max-width: 480px) {
  #combos .combo-intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* トップの説明：1文目（見出し）の下の2文目は小さく */
main > h1.site-lead + .lead { font-size: 13px; line-height: 1.5; }

@media (max-width: 480px) {
  /* 作品ページの頭：ボタンの行は左詰め（表紙の横の並べ方は画像を出す段階の CSS） */
  .work-tools { justify-content: flex-start; }
  .work-tools .btn-plain { font-size: 14px; }
  /* パンくずの最後（題名）は1行に省く（2026-10-17 j4）。題名の下の1行と2つの切り替えは、折り返しながら並べる */
  .breadcrumbs { display: flex; align-items: baseline; gap: 0 0.35em; overflow: hidden; white-space: nowrap; }
  .breadcrumbs a, .breadcrumbs span:not(:last-child) { flex: 0 0 auto; }
  .breadcrumbs span:last-child { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .work-head > h1 { margin-top: 0.1em; }
  .work-head .work-meta { flex: 1 0 100%; margin: -4px 0 4px; }
  .work > .divider > h2 { font-size: 16px; margin-top: 4px; margin-bottom: 4px; padding-top: 5px; padding-bottom: 5px; }
  .work .read-box { margin-top: 2px; padding-top: 6px; padding-bottom: 8px; }
  /* 作品情報：ラベルと値を2列に（以前は1列で縦に長かった） */
  .basic { grid-template-columns: 5em minmax(0, 1fr); gap: 2px 12px; }
  .basic dt { margin-top: 0; }
  /* トップの新作の横1列：3枚目が半分見える幅（ランキングの段と同じ。2.5枚分） */
}

/* シリーズの収録表：1話1行の小さな行（2026-10-17 h7。1話が約250pxのカードだった）。話数・題名・値段の枠・形式／ページ数／配信日／ページ単価・
   FANZA へのボタン（PR はボタンのすぐ下）。部品は行の直下に並べ、PC は左（題名・メモ）／値段／ボタン、スマホは題名と値段が1行目・ボタンは行の幅いっぱい。
   画像を出す段階の表紙は、その段階だけの別のスタイルファイル */
.ep-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.ep-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 290px); gap: 0 16px; align-items: start;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.ep-title { grid-column: 1; margin: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ep-title a { color: var(--fg); text-decoration: none; }
.ep-title a:hover { color: var(--link); text-decoration: underline; }
.ep-meta { grid-column: 1; margin: 0; }
.ep-notes { grid-column: 1; }
.ep-note { margin: 2px 0 0; font-size: 14px; }
.ep-note small { font-size: inherit; }
.ep-variants a { display: inline-block; margin-right: 12px; }      /* 同じ話・巻の版違い（タテヨミ版／フルカラー版）。1つずつ作品ページへ */
.ep-price { grid-column: 2; grid-row: 1; margin: 0; font-weight: 700; font-size: 16px; line-height: 34px; white-space: nowrap; }
.ep-row .store-action { grid-column: 3; grid-row: 1 / span 3; margin: 0; }
.ep-row .btn { display: inline-block; width: auto; margin: 0; padding: 5px 10px; font-size: 14px; }
.ep-row .pr-label { margin: 2px 0 0; }
@media (max-width: 480px) {
  .ep-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ep-price { line-height: 24px; }
  .ep-meta, .ep-notes, .ep-row .store-action { grid-column: 1 / -1; }
  .ep-row .store-action { grid-row: auto; margin-top: 4px; }
  .ep-row .btn { display: block; width: 100%; padding: 10px 14px; }
}

/* 新作の小さな行（card の compact。2026-10-17 h7）：題名・作者／形式／配信日・札1つ・1行要約（2行で切る）。右に値段・ボタン・PR。表紙は、画像を出す段階だけの別のスタイルファイル */
.cards.rows .card-compact { grid-template-columns: minmax(0, 1fr) 290px; padding: 8px 0; row-gap: 2px; }
.card-compact .card-body { min-width: 0; }
.card-compact h3 { font-size: 16px; }
.card-compact .card-summary { margin: 2px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.card-compact .chips { margin: 2px 0 0; }
.card-compact .series-more, .card-compact .contains { margin: 2px 0 0; }
@media (max-width: 480px) {
  .cards.rows .card-compact { grid-template-columns: minmax(0, 1fr); }
  /* 値段とボタンを1行に（値段が長い時だけ、ボタンが次の行へ回る）。PR はボタンのすぐ下：.store-action の箱を外して、ボタンと PR を行の部品として並べる（2026-10-17 j5。1件が286pxあった） */
  .card-compact .card-side { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
  .card-compact .card-price { margin: 0; flex: 0 0 auto; min-width: 4.5em; max-width: 100%; }
  .card-compact .store-action { display: contents; }
  .cards.rows .card-compact .store-action .btn { flex: 1 1 200px; min-width: 0; margin: 0; padding: 10px 8px; line-height: 1.35; }
  .cards.rows .card-compact .store-action .pr-label { flex: 0 0 100%; margin: 2px 0 0; }
}

/* ================================================================ 使いやすさとスマホ（2026-10-17 j5。2回目の評価5） */
/* /new/ の傾向の絞り込み：<details> の見出し。スマホ（480px以下）だけ、JS が閉じて作品を先に出す。見出しの帯は押せる高さ44px。PC は開いたまま・見出しは出さない（これまでの見た目のまま） */
.new-filter-fold > summary { display: none; }
@media (max-width: 480px) {
  .new-filter-fold > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font-weight: 700; color: var(--brand); }
  .new-filter-fold > summary::-webkit-details-marker { display: none; }
  .new-filter-fold > summary::after { content: "＋"; margin-left: auto; }
  .new-filter-fold[open] > summary::after { content: "－"; }
}
/* 探す画面の結果の行は、新作の小さな行の形（card-compact）。札は出さない（探す画面は条件の札が上にある）。新作の小さな行は札を1つ出す（j2）ので、ここは探す画面の結果だけ */
.find-results .card-compact .chips { display: none; }
/* 探す画面の「もっと見る」の段：枠つきの .find-more（探すパネルの畳み）と名前がぶつかっていた。ボタンが隠れている間は段ごと出さない */
p.find-more { border: 0; padding: 0; }
p.find-more:has(> button[hidden]) { display: none; }
/* 割引・期限は赤の1つ（デザイン方針 6章。トップの段は赤で、/sale/ と /fav/ は黒だった） */
/* 押せる所：44px前後 */
.site-search input, .site-search button { min-height: 44px; }
.sale-controls select { min-height: 44px; padding: 0 8px; }
.price-history summary { padding: 10px 0; }
.fav-list .fav-remove { display: block; min-width: 44px; min-height: 44px; padding: 8px 16px; margin: 6px 0 0 auto; }   /* 表紙のある行と無い行で、右の端にそろえる（表紙つきの行も同じ） */
/* 作品ページの1行の要約の「含む：〜」：カードと同じ、黒い枠の札（デザイン方針 6章） */
.dislike-summary .sum-yes b { border: 1px solid var(--fg); border-radius: 2px; padding: 0 4px; background: var(--bg); }

/* ================================================================ 作り直し（2026-10-18 r2）：トップ・大きな縦長のカード・読み物・バナーの枠
 * 大きな縦長のカード（.bcard）：トップの4つの段（新作・人気順・いま0円・もうすぐ終わるセール）と探すページの結果。HTML（_macros.html の big_card）と
 * JS（site.js の bigCardNode。sale.js・find.js が使う）の3か所で描くので、見た目はここ1か所。表紙 → 題名2行 → 形式と作者 → 値段（2行まで）→ 最安値の札 → 「含む」。
 * 角丸2〜3px・影なし・色は割引と期限の赤だけ（デザイン方針 6章）。画像が無い時は表紙の場所を作らない（文字だけの詰めたカード）。 */
.bc-strip { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 8px; overflow-x: auto; }
.bc-strip > .bcard { flex: 0 0 calc((100% - 40px) / 6); }      /* パソコンは1段に6枚（5枚の段は右が空く） */
.bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }      /* 探すページの結果：パソコンは1段に5枚前後、スマホは2列 */
/* 探すページの結果（/find/・/find/2/ …の一覧。JS が描く結果も同じ）：パソコンの本文 1,000px 前後で 7 枚並んで表紙が小さかったので、1枚 160px 以上＝1段に 5〜6 枚にした
 * （2026-10-23 目視の意見。.bcards-lg と同じ 160px。スマホは下の 2 列のまま。クイズの結果〈.quiz-cards〉は今のまま） */
@media (min-width: 481px) {
  .bcards.find-results, #card-list.bcards:not(.bcards-lg) { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}
.bcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 6px 8px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); }
.bc-title { margin: 0; width: 100%; font-size: 14px; line-height: 1.4; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bc-title a { color: var(--fg); text-decoration: none; }
.bc-title a:hover { color: var(--link); text-decoration: underline; }
.bc-meta { margin: 0; width: 100%; font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.bc-meta .kind { display: inline-block; border: 1px solid var(--border); border-radius: 2px; padding: 0 4px; margin-right: 6px; font-size: 13px; color: var(--fg); }
.bc-price { width: 100%; margin: 2px 0 0; }
.bc-main { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 700; }
.bc-main .fanza-list { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }      /* 「FANZA の表示：定価 1,210円」を値段の上に小さく1行（2026-10-25 V2-31） */
.bc-main-check { font-size: 13px; font-weight: 400; }
.bc-rate { color: var(--accent); font-size: 13px; }
.bc-sub { margin: 0; font-size: 13px; line-height: 1.4; color: var(--accent); }
.bc-main-sale { color: var(--accent); }      /* セール中の値段だけ赤（2026-10-18 第2弾 3-3） */
.bc-at { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }      /* 行ごとの時点（お気に入り・見出しの時点と違う行）。大きなカードには付けない */
/* 値段の行の部品（.bc-price）を行に入れた時（セール・ランキング・お気に入り。2026-10-18 第2弾 3-4）：行の幅いっぱいに */
.row-price { margin: 2px 0 0; }
.sale-row .row-price, .fav-list .row-price { flex: 0 0 100%; }
.bcard .low-mark { margin: 2px 0 0; }
.bcard .contains { margin: 2px 0 0; font-size: 13px; line-height: 1.5; }
.bc-when { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.bc-date { margin: 0; width: 100%; font-size: 13px; line-height: 1.5; color: var(--muted); }      /* 新作のカードの配信日 */
/* 表紙の大きなカードの格子（2026-10-21：画像が小さく、下へスクロールするだけの並びだったため）：セール・作品ページの「この作品が好きなら」・新作（/new/）。
 * 作りはトップの大きなカード（.bcard）そのまま。パソコンは1枚160〜190px 幅で横に入るだけ並べ、スマホは2列（下の @media。表紙は 3:4 の枠に収めるだけで切り抜かない）。
 * 探すページの結果の格子（.bcards だけ。128px〜）は今のまま */
.bcards-lg { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
ul.bcards { list-style: none; margin: 0; padding: 0; }      /* ul の既定の字下げ・.similar-list の字下げを外す */
.bcards > .bcard { margin: 0; }
.bcards .bc-title { font-size: 14px; }      /* .similar-list h3 の 16px に負けない */
.bcards-lg .contains { font-size: 13px; }
.bcard .card-summary { margin: 2px 0 0; font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.bcard .similar-reason, .bcard .similar-gem { margin: 2px 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }      /* 似ている理由はつぎエロの看板：切らずに全部出す */
.bcard .similar-gem { font-size: 13px; }
.bcard .series-more { margin: 2px 0 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
/* セールのカード：終わりの日は値段の行の部品の2行目。ストアのボタンはカードの下に（高さのちがうカードでも下にそろえる）。すぐ下に PR の1行（store-action の部品のまま） */
.sale-card .store-action { align-self: stretch; margin: auto 0 0; padding-top: 6px; }
.sale-card .store-action .btn { display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0 0 4px; padding: 12px 2px; font-size: 13px; line-height: 1.35; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }      /* スマホの2列（カードの中 約144px）でも1行に（2026-10-21 Claude の確認：14px では2行に折れていた） */
.sale-card .store-action .pr-label { margin: 2px 0 0; overflow-wrap: anywhere; }
.sale-card .sale-drop { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.bc-section .price-note { margin: 0 0 6px; }
.find-result-area .price-note { margin: 0 0 6px; }
@media (max-width: 860px) {
  .bc-strip > .bcard { flex-basis: calc((100% - 24px) / 4); }
}
@media (max-width: 480px) {
  .bc-strip > .bcard { flex-basis: calc((100% - 16px) / 2.5); }      /* 3枚目が半分見える幅にして、横に送れると分かるようにする */
  .bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* トップ：説明の一文は小さく1行（掲載範囲の文は、その下の同じ小さな字）。新作・もうすぐ終わるセールの「もっと見る」は押せる高さ44px前後 */
main > h1.site-lead { font-size: 14px; font-weight: 700; line-height: 1.5; padding-top: 8px; padding-bottom: 0; }
main > .lead.lead-scope { font-size: 13px; padding-bottom: 8px; }
.bc-section { padding-bottom: 6px; }
/* トップの「おすすめ」（2026-10-22）：欄の頭の1行は小さく、ブックスと同人の小見出しは新作の見出しより一段小さく */
.osusume-how { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.osusume-top .osusume-sub { margin: 10px 0 4px; font-size: 15px; font-weight: 700; }
.reads-list li { padding: 3px 0; }
.read-kind { display: inline-block; min-width: 3.2em; margin-right: 8px; padding: 0 6px; border: 1px solid var(--border); border-radius: 2px; font-size: 13px; line-height: 1.6; color: var(--fg); text-align: center; background: var(--panel); }
.rank-top .rank-col > h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.rank-when { font-size: 13px; font-weight: 400; color: var(--muted); }

/* 新作・セールの「この中から絞る」（2-7）：探すページを条件つきで開くボタン。絞り込みの列は付けない */
main > .lead.narrow-link { padding-top: 0; }
.narrow-link a { padding: 6px 14px; font-size: 14px; color: var(--brand); border-color: var(--brand); }

/* パソコンの幅と、キャンペーンのバナーの枠（2026-10-18 0-8）：本文の上限は 1,280px（--wide）。バナーは stage.json の campaign_banners が true で、config/banners.json に
 * 中身がある時だけ HTML に出る。パソコンは一覧のページの右の列（幅180px。付いてこない）を画面の幅1,500px以上の時だけ、スマホはトップのもうすぐ終わるセールの段の下に1枚。
 * 作品ページには置かない。加工しない（大きさを変えるだけ）。すぐ近くに PR の1行 */
.banner-col, .banner-sp { display: none; }
.banner-list { list-style: none; margin: 0; padding: 0; }
.banner-list li { margin: 0 0 12px; }
.banner-link { display: block; }
.banner-img { display: block; width: 100%; height: auto; background: var(--panel); }
.banner-pr { margin: 2px 0 0; }
.banner-img:not([src]) { min-height: 90px; }      /* 年齢確認の前は画像を読み込まない。枠だけ先に取って、確認の後に動かないように */
@media (min-width: 1500px) {
  .page.has-banner { max-width: calc(var(--wide) + 208px); display: grid; grid-template-columns: minmax(0, 1fr) 180px; grid-template-areas: "main banner"; gap: 0 28px; align-items: start; }
  .page.has-banner > main { grid-area: main; }
  .page.has-banner > .banner-col { display: block; grid-area: banner; }
  .page.has-side.has-banner { grid-template-columns: 250px minmax(0, 1fr) 180px; grid-template-areas: "side main banner"; }
}
@media (max-width: 860px) {
  .banner-sp { display: block; max-width: 340px; margin: 0 0 14px; padding: 8px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; }
}

/* スマホの細部（2026-10-17 見た目の直し。375px・360px の写しで見つけた分） */
/* 日付と「配信」など、途中で改行させたくない語 */
.nowrap { white-space: nowrap; }
/* /new/ の傾向の絞り込み：探す画面（パネル）の部品の形にそろえる（ラベルの下に選ぶ欄。幅いっぱい） */
@media (max-width: 480px) {
  .new-filter-row { display: block; }
  .new-filter-row label { display: block; margin: 0.5em 0; font-size: 15px; }
  .new-filter-row select {
    display: block; width: 100%; max-width: 100%; padding: 5px; margin: 2px 0 0;
    background: var(--bg); color: var(--fg); border: 1px solid var(--control-border); border-radius: 3px;
  }
  .new-filter-row .btn-plain { margin-top: 4px; }
  /* パネルの下のボタン：「条件をクリア」は1行・「この条件で作品を見る」が残りの幅 */
  .find-panel-foot { padding: 10px 12px; }
  .find-panel-foot .btn-plain { flex: none; white-space: nowrap; padding: 8px 10px; }
  .find-panel-foot .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
  /* ヘッダーのメニューは、2026-10-18 の作り直しで6つの入口を1行（2段目）に収める形にした（ファイルの終わりの指定） */
  /* 左の列の「条件で探す」：.btn の幅100%に外側の余白が足されて、枠から9pxはみ出していた */
  .side-nav .side-find { width: auto; }
  /* 一覧のカードの FANZA へのボタン：押せる高さ44px前後（以前は34px） */
  .cards.rows .card .btn, .data-table .btn { padding: 10px 14px; }
  /* 3つの質問の選択肢・札のリンクの押せる範囲は、上の 480px 以下の指定の後ろ（下の「押せる所」）で */
  .chips li a::after { inset: -7px -2px; }
}

/* まとめ記事の比べる表（2026-10-17 評価3・5）：列が潰れないよう最小の幅を付け、table-wrap の中で横に送る。題名は幅を確保し、
   形式・ページ数・価格・ページ単価・試し読みの列は折り返さない。横に送れることを狭い画面でだけ1行で知らせる。
   右へ送っても題名が見えるよう、1列目は左に固定する（sticky。背景色を付けないと後ろの列が透ける。
   border-collapse の表では固定した列の枠が欠けるので、左と右の線は box-shadow で引く） */
.data-table.compare { min-width: 640px; }
.data-table.compare :is(th, td):first-child { min-width: 11em; position: sticky; left: 0; z-index: 1; background: var(--bg); border-left: 0; box-shadow: inset 1px 0 0 var(--border), 1px 0 0 var(--border); }
.data-table.compare th:first-child { background: var(--panel); }
.data-table.compare :is(th, td):nth-child(n+2):nth-child(-n+6) { white-space: nowrap; }
.data-table.compare :is(th, td):nth-child(n+7) { min-width: 8em; }
.table-hint { display: none; margin: 0 0 4px; }
@media (max-width: 700px) {
  .table-hint { display: block; }
  /* スマホでは題名の列を狭く（約110px・3行まで。2026-10-18 作り直し第2弾 2-7：値段の列が収まらなかった）。3行に収まらない題名は切れる（作品ページで全文が読める） */
  .data-table.compare :is(th, td):first-child { min-width: 110px; width: 110px; max-width: 110px; }
  .data-table.compare td:first-child a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
}
/* 型で作ったひとこと（札は「特徴」）は、運営者が書いたひとことと見分けがつくよう、札を目立たせない */
.auto-note b { font-weight: 400; color: var(--muted); }

/* 評価2の直し（2026-10-17 j3）：作者ページで畳んだシリーズの1行・苦手の設定で似た作品が全部隠れた時の知らせ・探す画面の「確かめた値だけで絞る」 */
.series-fold { margin: 0.2em 0 1em; font-size: 15px; }
.similar-hidden p { margin: 0.4em 0; }
.find-verified { margin-bottom: 0; }
.check-list .is-zero { color: var(--muted); }
/* 割引の取り消し線の値段と注（2026-10-17 夜 k2）。<s> はセール前の値段（つぎエロが8週間記録した値段）。今の値段より目立たせない。注は1つのページに1回 */
.price-line .fanza-list { color: var(--muted); font-weight: 400; }
.price-note { display: block; margin: 0.1em 0 0.3em; font-size: 13px; font-weight: 400; color: var(--muted); }
/* 2026-10-18 n3：先に結論の好み別の早見・値段の推移の小さな折れ線・「つぎエロの記録で最安値」の札。色は上の変数、角丸は2〜3px、スマホで横にはみ出さない */
.quick-lead { margin: 0.6em 0 0.1em; }
.quick-pick { margin: 0.1em 0 0.4em; padding-left: 1.2em; }
.quick-pick li { margin: 0.15em 0; }
.ph-chart { margin: 6px 0 4px; max-width: 420px; }
.ph-chart:empty { display: none; }
.ph-chart-svg { display: block; width: 100%; height: auto; }
.ph-grid { stroke: var(--line); stroke-width: 1; }
.ph-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ph-dot { fill: var(--brand); }
.ph-lbl { fill: var(--muted); font-size: 13px; }
.low-mark { display: inline-block; margin: 0.1em 0 0.3em; padding: 0 6px; border: 1px solid var(--brand); border-radius: 2px; color: var(--brand); font-size: 13px; line-height: 1.6; }
.card-side .low-mark { display: block; width: fit-content; }

/* ================================================================ 作り直し（2026-10-18 r1）：ヘッダー・探すページ
 * ヘッダー：パソコンはロゴ・検索欄・6つの入口を1行に、スマホは1行目にロゴと検索、2行目に6つの入口（どのページも同じ2行）。説明の一文は出さない。
 * 探すページ：パソコンは左の列＋結果、スマホは「絞り込む」で全画面（左の列と同じ中身）。こだわり条件は FANZA 型の1行1軸の表の窓。 */
.site-header-inner { max-width: var(--wide); }
@media (min-width: 861px) {
  .site-header-inner { flex-wrap: nowrap; }
  .site-search { flex: 1 1 200px; min-width: 0; }
  .site-nav { flex: none; flex-wrap: nowrap; gap: 4px 16px; }
  .site-nav a { white-space: nowrap; }
}
@media (max-width: 860px) {
  .site-header-inner { gap: 4px 12px; }
  .site-search { flex: 1 1 0; min-width: 0; max-width: none; }
  .site-nav { flex-basis: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 0 2px; }
  .site-nav a { flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 400px) { .site-nav a { font-size: 13px; padding: 0; } }
@media (max-width: 340px) { .site-nav a { font-size: 13px; } }

/* 探すページの枠：左の列（250px）＋結果 */
main > h1 { margin-bottom: 8px; }
main > h1:has(+ :is(.byline, .lead, .count, .note)) { margin-bottom: 0; }      /* 見出しの箱と説明の箱の間の切れ目をなくす（2026-10-18 第2弾 3-7） */
.find-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 14px; align-items: start; margin: 0 0 14px; }
.find-side {
  min-width: 0;      /* 列の中だけで動かさない（sticky・max-height・overflow をやめた）：ページと一緒に流れる。2026-10-18 作り直し 第2弾 1-4。スマホの全画面（.is-open）は別 */
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 0 12px 8px; font-size: 13px;
}
.find-side-head, .find-sheet-foot, .find-sheet-open { display: none; }
.fs-block { padding: 8px 0 6px; border-bottom: 1px solid var(--line); }
.fs-block:last-of-type { border-bottom: 0; }
.fs-title { margin: 0 0 4px; font-weight: 700; font-size: 13px; }
.fs-chips { display: flex; flex-wrap: wrap; }
.fs-chips .chip-radio span { padding: 2px 8px; font-size: 13px; }
.fs-more { margin: 2px 0 0; }
.fs-more > summary { cursor: pointer; color: var(--brand); font-size: 13px; padding: 4px 0; }
.fs-quiz { margin: 6px 0 6px; }      /* 3つの質問のボタン（こだわり条件と同じ .fs-detail の形。2026-10-22 F17） */
.fs-check { display: block; margin: 2px 0; }
.fs-check.is-zero, .chip-radio.is-zero span { color: var(--muted); }
.chip-radio.is-zero span { background: var(--panel); }
.chip-radio input:disabled + span { cursor: default; opacity: .55; }
/* 札の件数（小さい字。2026-10-22）。選んでいる札（地が濃い）の上でも読める */
.chip-n { margin-left: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }      /* 13px 未満の字は使わない決まり。札の字より薄い色で小さく見せる */
.chip-radio input:checked + span .chip-n { color: inherit; opacity: .85; }
/* 相手は？のまとまり（見出しの下に札を並べる。職場の細かい値は畳む）。左の列と窓で同じ */
.fs-cluster-title { margin: 6px 0 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.fs-cluster-title:first-child { margin-top: 0; }
.fs-cluster-fold { margin: 6px 0 2px; }
.fs-cluster-fold > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); padding: 2px 0; }
.fs-cluster-fold[open] > summary { margin-bottom: 2px; }
.fp-ctl .fs-more { margin-top: 4px; }
.fs-dislikes { grid-template-columns: 1fr; margin: 2px 0; }
.fs-dislikes li { line-height: 1.5; padding: 2px 0; }
.fs-dislikes .dislike-count { margin-left: 1.7em; }
.fs-detail { margin: 8px 0 4px; }
.fs-detail .btn-plain { width: 100%; }

.find-result-area { min-width: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 10px 14px; }
.find-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 6px; }
.find-head .find-count { margin: 0; flex: 1 1 auto; }
.find-head .find-sort { margin: 0; }
.find-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; }
.find-selected .find-chips { margin: 0; }
.find-clear { padding: 3px 10px; font-size: 13px; }
.find-kinds { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border); margin: 0 0 8px; }
.find-kind { flex: 0 0 auto; display: flex; align-items: baseline; gap: 4px; background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--fg); cursor: pointer; }
.find-kind[aria-pressed="true"] { border-bottom-color: var(--brand); }
.find-kind-n { font-weight: 400; color: var(--muted); font-size: 13px; }
.find-kind-n::before { content: "（"; }
.find-kind-n::after { content: "）"; }
.find-result-area .find-ended-note { margin: 0 0 6px; }

/* スマホ：左の列は「絞り込む」で全画面。ページの下に固定の帯は付けない（全画面の中だけ「N件を見る」を固定する） */
@media (max-width: 860px) {
  .find-layout { display: block; }
  .find-sheet-open { display: inline-block; padding: 8px 14px; min-height: 44px; font-weight: 700; color: var(--brand); border-color: var(--brand); }
  .find-head .find-count { flex: 1 0 100%; order: 3; }
  .find-head .find-sort { margin-left: auto; }
  .find-head .find-sort select { max-width: 9.5em; }      /* 「絞り込む」と並べ替えを1行に収める */
  .find-kind { flex: 1 1 0; flex-direction: column; align-items: center; gap: 0; padding: 6px 4px; line-height: 1.3; }
  .find-kind-n::before, .find-kind-n::after { content: none; }
  .find-side { display: none; }
  .find-side.is-open {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 60; max-height: none; height: 100vh; height: 100dvh;
    border: 0; border-radius: 0; padding: 0; overflow: hidden;
  }
  .find-side.is-open .find-side-head {
    display: flex; justify-content: space-between; align-items: center; padding: 4px 12px; border-bottom: 1px solid var(--border); background: var(--panel);
  }
  .find-side-title { margin: 0; font-weight: 700; font-size: 16px; }
  .find-side.is-open .find-side-form { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 12px 12px; font-size: 15px; }
  .find-side.is-open .fs-title, .find-side.is-open .fs-more > summary { font-size: 15px; }
  .find-side.is-open .fs-chips .chip-radio span { padding: 6px 12px; font-size: 15px; }
  .find-side.is-open .find-sheet-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--panel); }
  .find-sheet-foot .btn-plain { flex: none; white-space: nowrap; padding: 8px 12px; }
  .find-sheet-foot .btn { flex: 1 1 0; min-width: 0; }
  html.find-lock, html.find-lock body { overflow: hidden; }
  .find-result-area { padding: 8px 10px; }
}

/* こだわり条件の窓（FANZA 型の1行1軸の表）。別の画面は同じ窓の中で入れ替わる */
.find-dialog { height: min(780px, calc(100vh - 48px)); }
.find-dialog .find-panel { height: 100%; max-height: none; }
.find-panel-head { gap: 8px; }
.find-panel-head .find-panel-title { flex: 1 1 auto; text-align: center; }
.find-panel-body { display: block; flex: 1 1 auto; min-height: 0; }
.find-dialog .find-form { height: 100%; }
.fp-screen { min-width: 0; }
.fp-top { margin: 0 0 8px; }
.fp-sub { margin: 4px 0 2px; font-weight: 700; font-size: 13px; }
.fp-recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fp-recent-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; }
.fp-recent-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 14em; min-width: 0; }
.fp-recent-tag { border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 2px; padding: 1px 6px; font-size: 13px; }
.fp-recent-more { border-style: dashed; color: var(--muted); }
.fp-recent-btn { padding: 4px 10px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
.fp-help { margin: 6px 0 0; font-size: 13px; }
.fp-table { border-top: 1px solid var(--border); }
.fp-row { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: start; }
.fp-label { margin: 0; font-weight: 700; font-size: 13px; }
.fp-ctl { min-width: 0; }
.fp-ctl .note { margin: 4px 0 0; }
.fp-ctl select { max-width: 100%; padding: 5px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 3px; }
.fp-ctl .check-list { margin: 0; }
.fp-ctl .find-keywords, .fp-row.find-keywords .fp-ctl { display: grid; gap: 6px 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fp-row.find-keywords { display: grid; grid-template-columns: 10em minmax(0, 1fr); }
.fp-row[hidden] { display: none; }
.fp-go { padding: 6px 12px; }
.fp-ctl .fs-chips + .fp-go { margin-top: 4px; }
/* 窓の「ジャンル名で探す」：入れた文字を含む札を、その場に並べる（札の写し。どの欄の札かを小さく添える） */
.fp-row[data-row="name-q"] input[type="search"] { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--fg); }
.fp-name-hits { margin: 6px 0 0; }
.fp-name-hits[hidden], .fp-ctl .note[hidden] { display: none; }
.fp-hit-from { margin-left: 4px; font-size: 13px; color: var(--muted); }
.fp-find { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.fp-find input[type="search"] { flex: 1 1 14em; min-width: 0; padding: 7px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--fg); }
.fp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.fp-tab { padding: 4px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 2px; background: var(--bg); cursor: pointer; }
.fp-tab[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.fp-authors { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fp-authors .btn-plain { width: 100%; text-align: left; padding: 8px 12px; }
.fp-screen .check-list li[hidden], .fp-screen p[hidden], .fp-screen ul[hidden] { display: none; }
.fp-back { padding: 6px 10px; font-size: 14px; }
.find-multi { max-height: none; overflow: visible; border: 0; padding: 0; }
.find-panel-foot .btn { min-width: 12em; }
@media (max-width: 860px) {
  .find-dialog { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; }
  .find-panel { max-height: 100dvh; height: 100%; }
  .fp-row, .fp-row.find-keywords { grid-template-columns: 1fr; }
  .fp-ctl .find-keywords, .fp-row.find-keywords .fp-ctl { grid-template-columns: 1fr; }
  .check-list { grid-template-columns: 1fr; }
  .find-panel-foot { padding: 10px 12px; }
  .find-panel-foot .btn-plain { flex: none; white-space: nowrap; padding: 8px 10px; }
  .find-panel-foot .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
}

/* ================================================================ 作り直し 第2弾（2026-10-18 t1）：左の列（トップ・探す）・結果の頭・一覧の頭の畳み・カードの題名の話数 */
/* トップの左の列：探すページの左の列と同じ作り（中身は _side.html）。選ぶと探すページへ移る。スマホは出さず、説明の下の2つのボタン（.top-find-btns）にする */
.side-nav { padding: 0 12px 8px; font-size: 13px; }
.side-nav .side-find { margin: 10px 0 4px; }
.side-nav .fs-detail-top { margin-top: 4px; }
.top-find-btns { display: none; }
/* こだわり条件のボタンを最初から見える所に（左の列の一番上。選んでいる条件の数のバッジつき。下のボタンも残す） */
.fs-detail-top { margin: 8px 0 0; }
.fs-detail a.btn-plain { display: block; text-align: center; width: 100%; }
.detail-badge { display: inline-block; min-width: 1.5em; margin-left: 6px; padding: 0 5px; border-radius: 2px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; text-align: center; }
.detail-badge[hidden] { display: none; }
/* 結果の頭：パソコンは 件数 → 苦手を除く → 並べ替え。「こだわり条件」は左の列の一番上にあるので、結果の頭には出さない */
.find-detail-open { display: none; }
.find-head .find-count { order: 1; }
.find-head .find-dislike-open { order: 2; }
.find-head .find-sort { order: 3; }
.find-dislike-open { padding: 5px 12px; font-size: 13px; }
.find-sort select { min-height: 44px; }      /* JS が無くても選べる、押せる高さの選ぶ欄 */
#sort-select, #author-sort { min-height: 44px; padding: 0 8px; }      /* 並べ替えの選ぶ欄は高さ44px（JS が無くても選べる形のまま。まとめ記事・作者の一覧。2026-10-18 第2弾 3-6） */
.quiz-actions .btn, .quiz-actions .btn-plain { min-height: 44px; }      /* JS が無くても選べる、押せる高さの選ぶ欄 */
@media (max-width: 860px) {
  .side-nav { display: none; }
  .top-find-btns { display: flex; gap: 8px; margin: 0 0 10px; }
  .top-find-btns a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; font-weight: 700; color: var(--brand); border-color: var(--brand); }
  /* 結果の頭（スマホ）：1行目＝絞り込む・こだわり条件・並べ替え、2行目＝件数・苦手を除く */
  .find-head { gap: 6px 8px; }
  .find-detail-open { display: inline-block; padding: 8px 10px; min-height: 44px; font-weight: 700; color: var(--brand); border-color: var(--brand); }
  .find-head .find-sheet-open { order: 1; padding-left: 10px; padding-right: 10px; }
  .find-head .find-detail-open { order: 2; }
  .find-head .find-sort { order: 3; flex: 1 1 0; min-width: 0; margin-left: 0; }
  .find-head .find-sort label { display: block; }
  .find-head .find-sort select { width: 100%; max-width: none; text-overflow: ellipsis; }
  .find-head .find-count { flex: 1 1 55%; order: 4; min-width: 0; }      /* 基準の幅を広めに取って、件数と「苦手を除く」を2行目に送る */
  .find-head .find-dislike-open { flex: 0 0 auto; order: 5; margin-left: auto; min-height: 44px; }
  .find-sort-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }      /* 並べ替えの文字は読み上げだけ（スマホで3つのボタンを1行に収める） */
}
/* 一覧のページの頭：説明は1行、残りは「くわしく」で畳む。注は1行にまとめて畳む（決まりの文は消さない。開けば読める）。2026-10-18 作り直し 第2弾 1-8 */
main > details.lead.head-more { padding-bottom: 6px; }
.head-more > summary, .head-note > summary { cursor: pointer; color: var(--brand); font-size: 13px; padding: 4px 0; }
.head-more > p { margin: 4px 0; font-size: 13px; }
.head-note { margin: 0 0 6px; font-size: 13px; }
/* セール・新作のページの頭を詰める（2026-10-22 F21）：見出しの下に、小さな説明1行（「くわしく」は説明の後ろ）。セールはその下の1行に「並べ替え」と「この中から絞る」を横に、
 * 新作は説明と同じ行の右に「この中から絞る」。最初の作品がすぐ見えるように、箱を重ねず1つの帯にまとめる */
.head-lines { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.head-lines > p.lead { margin: 0; padding: 0; font-size: 13px; line-height: 1.5; }
.head-lines > details.lead { margin: 0; padding: 0; }
.head-lines > details.lead[open] { flex: 0 0 100%; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.head-lines > .narrow-link, .head-actions > .narrow-link { margin: 0 0 0 auto; }
.head-actions > .sale-controls { margin: 0; }
.head-note > p, .head-note .price-note { margin: 2px 0 6px; }
/* 探すページの「注」と値段の時点を1行に（2026-10-22 N2）：開いた注は行の幅いっぱい */
.find-notes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.find-notes > .head-note { margin: 0; }
.find-notes > .head-note[open] { flex: 0 0 100%; }
.find-notes > .bc-when { margin: 0; }
/* カードの題名の末尾の話数・巻数は別の行（題名が2行で切れても見える。2-10）。題名は2行まで、話数は切らない */
.bc-title.has-ep { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; }
.bc-title.has-ep a { display: block; }
.bc-tt { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bc-ep { display: block; margin-top: 1px; font-size: 13px; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
/* 3つの質問の結果：大きな縦長のカードの中の「合った理由」 */
.bcard .quiz-reason { margin: 2px 0; font-size: 13px; line-height: 1.5; color: var(--fg); }

/* ================================================================ 2026-10-19 w5：ロゴ B1（白い本＋桃色のしおり）・絞り込みの欄の直し */
/* ヘッダーのロゴ：ヘッダーの高さを少し上げ、文字の大きさを前の約1.5倍に（ロゴの文字は図形の SVG）。パソコンは1行、スマホは2行（1行目＝ロゴと検索窓、2行目＝メニュー）のまま */
.site-header-inner { padding-top: 10px; padding-bottom: 10px; }
.site-name { display: block; flex: none; position: relative; width: 163px; height: 44px; background: url("/static/logo_header.svg") no-repeat left center / contain; }      /* 178×48 のロゴを高さ44pxで。中の文字は読み上げ用（.sr-only） */
.age-gate-site { position: relative; width: 178px; max-width: 100%; height: 48px; margin: 0 auto 6px; background: url("/static/logo_on_white.svg") no-repeat center / contain; }      /* 年齢確認の画面：白い地のロゴ */
@media (max-width: 860px) {
  .site-name { width: 148px; height: 40px; }
}
/* ③ JavaScript が動かない時：左の列（探す・トップ）の入力を隠し、注を列の頭に出す（html の scripted の印は _side.html の script が付ける。「js」の綴りは、18歳未満の明示の検査〈JS〉に当たるので使わない） */
.fs-nojs { display: none; margin: 8px 0; }
html:not(.scripted) .fs-nojs { display: block; }
html:not(.scripted) .fs-inputs { display: none; }
/* ⑧ 苦手を除く（左の列・スマホの全画面）は1行ずつ「寝取られ 17」 */
.fs-dislikes .dislike-n { margin-left: .4em; color: var(--muted); font-size: 13px; }
/* ② スマホの全画面の頭：選んだ条件の札（結果の上の札と同じもの）。条件が無い間は出さない */
.find-sheet-selected { display: none; }
@media (max-width: 860px) {
  /* 札の入力（見えない位置固定の input）が、全画面ではなく中の動く欄に属すように（前は、動かした後に札を押すと全画面ごと上へずれて、頭と「N件を見る」の位置が動いていた） */
  .find-side.is-open .find-side-form { position: relative; }
  .find-side.is-open .find-sheet-selected:not([hidden]) { display: block; flex: none; max-height: 30vh; overflow-y: auto; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
  .find-sheet-selected .find-chips { margin: 0; }
}
/* ⑦ 値段の下限・上限（窓） */
.fp-range { display: inline-block; margin: 0 14px 4px 0; font-size: 13px; }
.fp-range select { margin-left: 4px; }
/* 新作の「月で見る」：年ごとの1行に月を並べる（2026-10-21） */
.month-years { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; }
.month-years dt { font-weight: 700; }
.month-years dd { margin: 0; line-height: 1.9; }
.month-years dd a { white-space: nowrap; }
.month-years .n { color: var(--muted); font-size: 13px; margin-right: 8px; }
/* ================================================================ 2026-10-22 見た目の土台：案1「ストア風・くっきり」（見本の3案から選んだ。見本の CSS と同じ中身）
   文字は BIZ UDPゴシック（Windows に標準で入っている）・太め。ボタンは高さ44px・角6px・太字・下に影。札は角4pxの塗り。カードは白・角6px・薄い影。
   見出しは左に太い線。前の上書きより強くするため html body から書く（同じ要素の古い上書きの整理は後で）。デザイン方針 4章の「避ける型」のうち、
   影と角丸のカードを使う（2026-10-21 夜の決定 確認1＝A）。丸い札は使わない */
html body { font-family: "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, sans-serif; font-size: 15px; color: #16181a; }
html body h1 { font-size: 26px; font-weight: 800; letter-spacing: .01em; }
html body main > section > h2, html body .work > section > h2, html body .work > .work-about > section > h2, html body main > .find-result-area > h2 {
  font-size: 18px; font-weight: 800; border-bottom: 0; border-left: 5px solid var(--brand); padding: 10px 12px 8px; margin: 0 -14px 10px; background: #f3f6f5; }
html body main > section, html body main > .work, html body main > .find-result-area { border: 0; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 0 16px 14px; }
html body .btn { min-height: 44px; padding: 11px 22px; border-radius: 6px; font-size: 15px; font-weight: 800; box-shadow: 0 2px 0 rgba(0,0,0,.18); letter-spacing: .02em; }
html body .btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
html body .btn.store-link { background: linear-gradient(#e0457d, #c92a63); border: 0; }
html body .btn-plain { min-height: 40px; border-radius: 6px; font-weight: 700; border-color: #9aa3ab; }
html body .chips li, html body .chip-radio span, html body .bc-meta .kind, html body .card-meta .kind { border-radius: 4px; background: #eef3f1; border-color: #cfdcd6; font-weight: 700; font-size: 13px; }
html body .chip-radio span { padding: 5px 12px; font-size: 14px; }
html body .chip-radio input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
html body .bcard, html body .card { border: 0; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.12); background: #fff; }
html body .bcard:hover, html body .card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.16); }
html body .bc-title { font-size: 15px; }
html body .bc-main, html body .card-price { font-size: 19px; font-weight: 800; }
html body .fs-title, html body .side-head { font-size: 15px; font-weight: 800; border-left: 4px solid var(--brand); padding-left: 8px; }
html body .side-nav { border: 0; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
html body .site-header { box-shadow: 0 2px 6px rgba(0,0,0,.15); }
html body .site-nav a { font-weight: 700; }

/* ================================================================ 2026-10-24 トップの改善（確定の仕様 第2版：仕様_トップページの改善_2026-10-24.md）
 * 1. スマホ・タブレット（860px 以下）：1段のヘッダー（≡ ロゴ 検索 ♡）／説明の2行目を1行に／入口のボタン2つ／テーマのチップ／本文の並びの順（main.top-main の order）／
 *    作品の段は大きな表紙の2列（横に送る帯はやめた。段ごとの枚数は :nth-child で絞る）／ランキングは縦の一覧（ブックス／同人のタブ・5位まで）。
 * 2. パソコン（861px 以上）：左の列はやめた（2列）。ヘッダーは ロゴ｜探す・こだわり条件・3つの質問で探す｜検索の窓｜≡（メニューは右下に開く）。
 *    作品の段は1行4枚（表紙を大きく）。1,280px 以上は本文＋右の列（約250px＝バナー → ランキング → まとめ記事）。861〜1,279px は右の列を本文の一番下へ。
 * 3. 一覧のカードは値段の数字を出さず印だけ（JS）。ここでは印の大きさだけ（セールの3つの段は今の大きさのまま）。
 * 前の上書きより強くするため html body から書く */

/* ---------------------------------------------------------------- ヘッダー：スマホは1段（≡ のメニューの見た目は、第3版の末尾の節。メニューの箱はスマホもパソコンもヘッダーの下に重ねて開く） */
.hd-btn, .hd-menu-list { display: none; }
.site-header-inner { position: relative; }
@media (max-width: 860px) {
  html.hdjs .site-header-inner { flex-wrap: wrap; gap: 0 4px; padding: 4px 8px; }
  html.hdjs .hd-btn { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 26px; line-height: 1; text-decoration: none; cursor: pointer; }
  html.hdjs .site-name { margin-right: auto; }
  html.hdjs .hd-btn.hd-find { width: auto; min-width: 0; height: 40px; padding: 0 8px; border: 1px solid rgba(255,255,255,.75); border-radius: 6px; background: rgba(255,255,255,.14); font-size: 14px; font-weight: 800; white-space: nowrap; }      /* 文字のボタン「探す」（2026-10-26。虫めがねの絵は言葉で探す窓を開く別のボタン。375px で1行に収まる幅） */
  html.hdjs .site-nav { display: none; }
  html.hdjs .site-search { display: none; order: 5; flex: 1 0 100%; max-width: none; padding: 0 0 6px; }
  html.hdjs .site-header.search-open .site-search { display: flex; }
}

/* ---------------------------------------------------------------- 説明・入口（スマホ・タブレット）。テーマの札は 2026-10-26 にやめた */
@media (max-width: 860px) {
  html body main > h1.site-lead { font-size: 13px; line-height: 1.4; padding-top: 6px; }
  html body main > h1.site-lead + .lead.lead-scope { font-size: 13px; line-height: 1.4; padding-bottom: 2px; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }      /* 2行目は1行（長い分は「…」。文は変えない。13px 未満は使わない決まり） */
  .top-find-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 6px; }
  .top-find-btns a { min-height: 44px; padding: 4px 8px; font-size: 14px; }
}

/* ---------------------------------------------------------------- 本文の並び（main.top-main）
 * HTML の並びが画面の並び（2026-10-24 第3版：段の順は HTML で決め、order は使わない）。右の列（div.top-right＝バナー・ランキング・まとめ記事・バナー）は、
 * 1,279px 以下では本文の一番下の1つの塊、1,280px 以上は右の列（grid の2列目） */
@media (min-width: 1280px) {
  main.top-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; align-items: start; }
  main.top-main > * { grid-column: 1; }
  main.top-main > .top-right { grid-column: 2; grid-row: 1 / span 40; }
}
/* 段の見出しは深緑の帯（白い字。右の列の段も同じ。2026-10-24 第3版 9）：段は白い囲み、帯は囲みの左右いっぱい */
html body main.top-main section > h2 { margin: 0 -16px 10px; padding: 10px 16px 9px; border: 0; border-radius: 8px 8px 0 0; background: var(--brand); color: #fff; font-size: 18px; font-weight: 800; line-height: 1.4; }
html body main .top-right > section { border: 0; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 0 16px 14px; }
main.top-main > section, main.top-main .top-right > section, main.top-main .top-banner { margin: 0 0 14px; }

/* 作品の段の「すべて見る」・まとめ記事 */
.more-link { margin: 6px 0 0; text-align: right; font-size: 14px; font-weight: 700; }
.more-link a { display: inline-block; padding: 10px 2px; }
.matome-list { list-style: none; margin: 0; padding: 0; }
.matome-list li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.matome-list li:last-child { border-bottom: 0; }
.matome-list a { display: inline-block; padding: 2px 0; }

/* バナー（本物を置くまでは、見本の版だけ灰色の枠） */
.top-banner { display: block; }
.top-banner .banner-frame { min-height: 110px; }
@media (min-width: 1280px) { .top-banner .banner-frame { min-height: 250px; } }
.banner-frame { display: flex; align-items: center; justify-content: center; background: #e3e6e8; border: 1px dashed #9aa3ab; color: #5b646b; font-size: 14px; font-weight: 700; }

/* ---------------------------------------------------------------- 作品の段 */
main.top-main .bcard .contains { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }      /* 「含む」はある時だけ1行 */
main.top-main .bc-strip { list-style: none; margin: 0; padding: 0; overflow: visible; }
main.top-main .bc-strip > .bcard { flex: none; min-width: 0; }
/* 値段の印（セール中・○%OFF・0円）は小さく。セールの3つの段は値段（ストア名つき）なので今の大きさのまま */
main.top-main[data-price-mode="mark"] .bcard:not(.bc-salepop):not(.bc-free):not(.bc-saleend) .bc-main { font-size: 14px; }
/* 段ごとの枚数（スマホもパソコンも）：いま人気のセール・新作・0円・もうすぐ終わるセール・それに似た作品は4（セールの3つの段と似た作品は JS が多めに描くので、5枚目からは隠す）。
 * おすすめは HTML の側で商業4・同人4にしてある。ランキングは5位まで（ranking.js）。最近見た作品はスマホ2・パソコン4（下の @media） */

@media (max-width: 860px) {
  /* 大きな表紙の2列（表紙の幅 約155px）。ページの左右の余白を詰める */
  .page:has(> main.top-main) { padding: 0 8px; }
  html body main.top-main > section, html body main.top-main .top-right > section { padding: 0 4px 14px; }
  html body main.top-main > section > h2, html body main.top-main .top-right > section > h2 { margin: 0 -4px 10px; }
  main.top-main .bc-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 8px; }
}
@media (min-width: 861px) {
  /* パソコン：どの段も1行4枚（おすすめは商業4・同人4＝2つの段で1行ずつ。最近見た作品も4枚まで）。表紙を大きく */
  main.top-main .bc-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

/* ---------------------------------------------------------------- ランキング：FANZA／ブックス・FANZA／同人のタブ・画像の下に題名の縦のカード
 * 2026-10-24 第3版：太い枠・見出しの帯（上の h2）・1〜3位は色つきの番号の印（番号は表紙の左上に重ねる）・「FANZA」の後ろで改行したタブ。
 * 並べ方：スマホは2列、861〜1,279px は5枚を1行、1,280px 以上の右の列は1列（表紙は 170px まで） */
.toprank-tabs { display: flex; gap: 6px; margin: 0 0 8px; }
.toprank-tabs[hidden] { display: none; }
.toprank-tab { flex: 1 1 0; min-height: 52px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; font-weight: 800; line-height: 1.3; cursor: pointer; }
.toprank-tab.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.rank-col.is-off { display: none; }
html body main.top-main .rank-top { border: 3px solid var(--brand); box-shadow: none; }
html body main.top-main .rank-top > h2 { margin: 0 -16px 10px; border-radius: 4px 4px 0 0; }
main.top-main .rank-top .bc-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
main.top-main .rank-top .bc-strip > .bcard.rank-off { display: none; }      /* 5位より下（ranking.js が rank-off を付ける） */
main.top-main .rank-top .bcard > .rank-no { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 15px; background: var(--brand-dark); color: #fff; font-size: 15px; font-weight: 800; line-height: 1; }
main.top-main .rank-top .bc-strip > .bcard:nth-child(1) > .rank-no { background: #d4a017; color: #3a2a00; }
main.top-main .rank-top .bc-strip > .bcard:nth-child(2) > .rank-no { background: #b4bec7; color: #1d2a33; }
main.top-main .rank-top .bc-strip > .bcard:nth-child(3) > .rank-no { background: #d99a63; color: #3b2210; }
main.top-main .rank-top .bc-title { font-size: 14px; }
main.top-main .rank-top .rank-sub { margin: 0 0 6px; }
@media (min-width: 861px) { main.top-main .rank-top .bc-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1280px) {
  main.top-main .top-right .rank-top .bc-strip { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ---------------------------------------------------------------- いま人気のセール・最近見た作品 */
.salepop-top { padding-bottom: 6px; }
.salepop-top > h2 { font-size: 15px; }
.salepop-note { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.salepop-col h3 { font-size: 14px; margin: 0.6em 0 4px; }
.recent-top .recent-sub { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.recent-clear { display: inline-block; margin-left: 6px; padding: 8px 4px; border: 0; background: none; color: var(--link); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* ================================================================ 2026-10-24 トップの改善 第2版（仕様 2章・3章）
 * ・パソコンのヘッダー：ロゴ｜探す・こだわり条件・3つの質問で探す｜検索の窓｜≡。≡ のメニューはスマホと同じ部品（nav.hd-menu-list）を、パソコンではヘッダーの右下に開く白い箱にする
 *   （パソコンはヘッダーにある 探す・こだわり条件・3つの質問〈hd-m-sp〉を箱に出さず、「苦手を除いて探す」「つぎエロについて」を末尾に回す）。JavaScript が無い時（html に hdjs が無い）は、箱を開け閉めせず、メニューの行をヘッダーの下に並べる。
 * ・おすすめのカードの「なぜ出しているか」の一言（.bc-why）・おすすめのページ（main.osusume-page）：スマホ2列・パソコン1行4作品 */
html:not(.hdjs) .hd-menu-list { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: 0 16px; order: 9; }
html:not(.hdjs) .hd-menu-list a { display: flex; align-items: center; min-height: 40px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
html:not(.hdjs) .hd-menu-list .hd-m-sp { display: none; }
html:not(.hdjs) .hd-menu-list .ic { display: none; }
@media (min-width: 861px) {
  html:not(.hdjs) .site-header-inner { flex-wrap: wrap; }      /* JS が無い時は、メニューの行を2行目に（1行のままだと横にはみ出す） */
}

/* おすすめのカードの「なぜ出しているか」の一言（事実で言える型の文だけ。osusume.why_of・recent.js） */
.bcard .bc-why { margin: 2px 0 0; padding: 0 6px; border: 1px solid #cfdcd6; border-radius: 4px; background: #eef3f1; color: var(--fg); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
/* おすすめのページ（/osusume/）：スマホ2列・パソコン1行4作品 */
main.osusume-page .osusume-group { margin: 0 0 14px; }
@media (max-width: 860px) { .page:has(> main.osusume-page) { padding: 0 8px; } }      /* スマホは表紙を大きく（トップの作品の段と同じ余白） */
main.osusume-page .bcards.bcards-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
@media (min-width: 861px) {
  main.osusume-page .bcards.bcards-lg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

/* ================================================================ 2026-10-24 トップの改善 第3版（仕様の頭の表 7〜13）
 * ・≡ のメニュー：字を大きく（17px）・行を広く（52px）、項目ごとに小さな印（深緑）、まとまり（hd-g の項目から新しいまとまり）の間に区切り線。白い箱をヘッダーの下に重ねて開く
 *   （スマホは画面の幅いっぱい、パソコンは ≡ の下の左）。パソコンでもメニューのボタンは左（ロゴの左）。
 * ・パソコンのヘッダーの 探す・こだわり条件・3つの質問で探す は、押すボタンの形（枠・地の色・小さな印）
 * ・急上昇の段・まとめ記事のカード・2つ目のバナー */
.hd-menu-list a { display: flex; align-items: center; gap: 12px; position: relative; min-height: 52px; padding: 0 18px; border: 0; color: var(--fg); font-size: 17px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.hd-menu-list a:hover { background: var(--brand-soft); text-decoration: none; }
.hd-menu-list .ic { flex: none; width: 22px; height: 22px; color: var(--brand); }
.hd-menu-list .hd-g { margin-top: 8px; }
.hd-menu-list .hd-g::before { content: ""; position: absolute; left: 18px; right: 18px; top: -5px; height: 1px; background: var(--border); }
.hd-menu-list .hd-m-about { margin-top: 0; }
.hd-menu-list > a:first-child.hd-g { margin-top: 0; }
.hd-menu-list > a:first-child.hd-g::before { display: none; }
html.hdjs .hd-menu-list { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; max-height: calc(100vh - 70px); overflow-y: auto; padding: 8px 0; background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
html.hdjs .site-header.menu-open .hd-menu-list { display: block; }
@media (min-width: 861px) {
  .site-name { order: 2; }
  .site-nav { order: 3; gap: 8px; }
  .site-search { order: 4; margin-left: auto; }
  html.hdjs .hd-menu { display: flex; align-items: center; justify-content: center; flex: none; order: 1; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: none; color: #fff; font: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
  html.hdjs .hd-menu:hover { background: rgba(255,255,255,.16); }
  html.hdjs .site-header.menu-open .hd-menu { background: rgba(255,255,255,.26); }
  html.hdjs .hd-menu-list { left: 16px; right: auto; width: 320px; }
  html.hdjs .hd-menu-list .hd-m-sp { display: none; }
  html body .site-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.75); border-radius: 6px; background: rgba(255,255,255,.14); color: #fff; font-size: 15px; font-weight: 800; white-space: nowrap; text-decoration: none; }
  html body .site-nav a:hover { background: rgba(255,255,255,.28); text-decoration: none; }
  .site-nav .ic { flex: none; width: 20px; height: 20px; }
}
@media (min-width: 861px) and (max-width: 1099px) {
  .site-nav .ic { display: none; }      /* 狭いパソコンでは、印を省いて検索の窓の幅を残す */
  html body .site-nav a { padding: 0 10px; font-size: 14px; }
}
@media (max-width: 860px) {
  html:not(.hdjs) .site-nav .ic { display: none; }
}

/* 急上昇（トップ）：売り場ごとに4作品。カードの下の小さな1行「FANZA の人気順 7日で 520位→80位」 */
.surge-note { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.surge-col h3 { font-size: 14px; margin: 0.6em 0 4px; }
.bcard .surge-line { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--accent); font-weight: 700; overflow-wrap: anywhere; }

/* 右の列のまとめ記事：画像＋題名のカード（画像は記事のいちばん上の作品の表紙。年齢確認が済むまで・画像を隠す間は題名だけ。画像のある時の並びは画像の側の CSS） */
.matome-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 481px) and (max-width: 1279px) { .matome-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mt-card { position: relative; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.mt-card .mt-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.mt-card .mt-title:hover { color: var(--link); text-decoration: underline; }
.mt-card .mt-date { display: block; margin-top: 2px; }

/* 右の列の下のバナー（2枚目）も、上と同じ形 */
.top-banner-2 { margin-top: 0; }

/* ================================================================ 2026-10-24 トップの改善 第4版（仕様の頭の表の続き）
 * ・苦手の設定のページ（/dislike/）・最近見た作品（履歴）のページ（/history/）・セールのページの「いま0円の作品」への入口 */
.free-link { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.free-link a { display: inline-block; padding: 8px 0; }
.dislike-settings-link { margin-left: 6px; font-size: 14px; }

.dislike-settings .ds-block { margin: 0 0 14px; padding: 0 16px 14px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.dislike-settings .ds-block > h2 { margin: 0 -16px 10px; padding: 10px 16px 9px; border-radius: 8px 8px 0 0; background: var(--brand); color: #fff; font-size: 18px; font-weight: 800; line-height: 1.4; }
.dislike-settings .ds-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; list-style: none; margin: 0; padding: 0; }
.dislike-settings .ds-list label, .dislike-settings .ds-scopes label { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 8px 0; font-size: 15px; }
.dislike-settings .ds-scopes { list-style: none; margin: 0; padding: 0; }
.dislike-settings .ds-scopes b { display: block; font-size: 16px; }
.dislike-settings .ds-desc { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); font-weight: 400; }
.dislike-settings .ds-scopes label > span, .dislike-settings .ds-scopes label > b { min-width: 0; }
.dislike-settings input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.ds-status { min-height: 1.6em; margin: 0 0 8px; font-weight: 700; color: var(--brand-dark); }
.ds-actions { margin: 0 0 12px; }

.history-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 10px; font-weight: 700; }
.history-bar[hidden] { display: none; }
.history-empty { margin: 12px 0; padding: 12px 14px; background: var(--panel); border-radius: 6px; line-height: 1.8; }
.history-cards .hist-remove { width: 100%; min-height: 40px; margin: 6px 0 0; font-size: 14px; }

/* ================================================================ 2026-10-25 トップの改善 第4版
 * ・トップの作品の段は、横にスライドする1行（最大12作品。カードの大きさは今のまま：パソコンは1行に4枚見え、残りは横に送る。スマホは2枚見え）。
 *   左右の矢印のボタンと、行にフォーカスしての ← → は top.js。ランキング（右の列）とまとめ記事は今のまま縦
 * ・段の見出しの帯は、その段の「すべて見る」の行き先へのリンク（右に › の印）。「すべて見る」は押しやすい大きさの縁取りのボタン（右に ›）
 * ・まとめ記事の下のバナーの枠は、右の列の残りの高さを使う（1,280px 以上。見本の枠だけ）
 * ・苦手の設定のページ：小さく、1項目は1行（名前の途中で折り返さない）、保存ボタン */
main.top-main section:not(.rank-top) .bc-strip { display: flex; flex-wrap: nowrap; gap: 12px; margin: 0; padding: 2px 0 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; overscroll-behavior-x: contain; }
main.top-main section:not(.rank-top) .bc-strip > .bcard { flex: 0 0 calc((100% - 40px) / 4); min-width: 0; scroll-snap-align: start; }
main.top-main section:not(.rank-top) .bc-strip:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 860px) {
  main.top-main section:not(.rank-top) .bc-strip { gap: 8px; }
  main.top-main section:not(.rank-top) .bc-strip > .bcard { flex-basis: calc((100% - 12px) / 2); }
}
.slider { position: relative; }
.slider-btn { position: absolute; top: 96px; z-index: 4; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0 0 4px; border: 1px solid var(--border); border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 2px 6px rgba(0,0,0,.28); color: var(--brand-dark); font-size: 28px; line-height: 1; cursor: pointer; }
.slider-btn[hidden] { display: none; }
.slider-btn:hover { background: var(--brand); color: #fff; }
.slider-prev { left: -4px; }
.slider-next { right: -4px; }
@media (max-width: 860px) { .slider-btn { top: 70px; width: 38px; height: 38px; font-size: 25px; } }

html body main.top-main section > h2 { padding: 0; }
.band-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 9px; color: #fff; text-decoration: none; }
.band-link::after { content: "\203A"; flex: none; font-size: 28px; line-height: 1; font-weight: 400; }
.band-link:hover { text-decoration: none; background: rgba(255,255,255,.14); }
.band-link:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
main.top-main .more-link { margin: 10px 0 0; text-align: right; }
main.top-main .more-link a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; max-width: 100%; padding: 8px 22px; border: 2px solid var(--brand); border-radius: 24px; background: #fff; color: var(--brand-dark); font-size: 16px; font-weight: 800; line-height: 1.3; text-decoration: none; }
main.top-main .more-link a::after { content: "\203A"; font-size: 24px; line-height: 1; font-weight: 400; }
main.top-main .more-link a:hover { background: var(--brand); color: #fff; text-decoration: none; }
@media (min-width: 1280px) {
  main.top-main > .top-right { align-self: stretch; display: flex; flex-direction: column; }
  main.top-main .top-right > .top-banner-2 { flex: 1 1 auto; display: flex; flex-direction: column; margin-bottom: 0; }
  main.top-main .top-right > .top-banner-2 .banner-frame { flex: 1 1 auto; min-height: 250px; }
}

.dislike-settings { overflow-x: clip; }
.dislike-settings .ds-block { margin: 0 0 12px; padding: 0 12px 10px; }
.dislike-settings .ds-block > h2 { margin: 0 -12px 8px; padding: 7px 12px 6px; font-size: 16px; }
.dislike-settings .ds-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 10px; }
.dislike-settings .ds-list label, .dislike-settings .ds-scopes label, .dislike-settings .ds-kids label { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 0; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.dislike-settings .ds-list label > span, .dislike-settings .ds-kids label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dislike-settings input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; }
.dislike-settings .ds-scopes { list-style: none; margin: 0; padding: 0; }
.dislike-settings .ds-scopes b { display: inline; font-size: 14px; }
.dislike-settings .ds-all { margin: 0 0 4px; padding: 0 0 4px; border-bottom: 1px solid var(--line); }
.dislike-settings .ds-all label { font-size: 15px; }
.dislike-settings .ds-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 10px; }
.dislike-settings .ds-group > label { flex: 1 1 auto; min-width: 0; }
.dislike-settings .ds-part { font-size: 13px; font-weight: 400; color: var(--muted); }
.dislike-settings .ds-more { flex: 0 0 auto; font-size: 13px; }
.dislike-settings .ds-more[open] { flex-basis: 100%; }
.dislike-settings .ds-more > summary { min-height: 34px; padding: 6px 4px; cursor: pointer; color: var(--link); }
.dislike-settings .ds-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 10px; list-style: none; margin: 0 0 4px 26px; padding: 0; }
.dislike-settings .ds-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.dislike-settings .ds-save { min-height: 44px; padding: 8px 28px; }
.dislike-settings .ds-status { flex: 1 1 240px; min-width: 0; margin: 0; font-size: 14px; min-height: 0; }

/* ================================================================ 2026-10-25 DMM（FANZA）の広告バナー（static/banner.js・tsugiero/dmm_banners.py）
 * ・ページに固定で置く枠（.dmm-slot。トップの右の列の上に1つ・下に2つ）：JS が出すまでは隠してある（hidden）。出す時は、読み込みの前後で枠が動かないよう 300×250 の場所を先に取る。
 *   PR の1行（.pr-label。大きさ・色は .pr-label の決まりのまま）は部品が入ってから、枠のすぐ下に出す
 * ・右下の窓（.dmm-float-pc。パソコン）：部品が入ってから出す。バナーの下に PR の行、その右に ×（バナーに重ねない＝押し間違えない）
 * ・画面の下の帯（.dmm-float-sp。スマホ＝幅 860px 以下）：640×200 の素材を 320×100 で見せる（大きさを変えるだけ）。出ている間は html に dmm-bar-on が付き、ページの下に帯の分の余白を足す */
.dmm-slot { display: block; width: 300px; max-width: 100%; margin: 0 auto 14px; }
.dmm-slot[hidden] { display: none; }
.dmm-slot .dmm-body { width: 300px; max-width: 100%; min-height: 250px; }
.dmm-slot.is-loaded .dmm-body { min-height: 0; }
.dmm-body ins.widget-banner { display: block; text-decoration: none; }
.dmm-body a { display: block; }
.dmm-body img { display: block; max-width: 100%; height: auto; }
.dmm-slot:not(.is-loaded) .dmm-pr { display: none; }
.dmm-pr { margin: 2px 0 0; line-height: 1.5; }
/* 作品ページの表紙の下の横長の枠（work_coupon。640×200 の素材を枠の幅〈最大 640px〉に合わせて縮小するだけ）。読み込む前に場所を先に取る（枠が動かないように） */
.dmm-slot-wide { width: 640px; max-width: 100%; margin: 10px 0 14px; }
.dmm-slot-wide .dmm-body { width: 100%; min-height: 0; }
.dmm-slot-wide:not(.is-loaded) .dmm-body { aspect-ratio: 640 / 200; }
.dmm-slot-wide .dmm-body img { width: 100%; max-width: 640px; height: auto; }
.top-banner .dmm-slot:last-child { margin-bottom: 0; }
.dmm-float { display: none; position: fixed; z-index: 50; box-sizing: border-box; background: #fff; border: 1px solid var(--border); }
.dmm-float.is-loaded { display: block; }
.dmm-float .dmm-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 0 8px; }
.dmm-float .dmm-pr { flex: 1 1 auto; min-width: 0; margin: 0; }
.dmm-float .dmm-close { flex: none; min-width: 44px; min-height: 36px; padding: 0 8px; border: 0; background: transparent; color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer; }
.dmm-float .dmm-close:hover { background: var(--panel); }
.dmm-float-pc { right: 12px; bottom: 12px; width: 300px; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.28); }
.dmm-float-pc .dmm-body { width: 300px; height: 250px; overflow: hidden; border-radius: 6px 6px 0 0; }
.dmm-float-sp { left: 0; right: 0; bottom: 0; border-width: 1px 0 0; box-shadow: 0 -2px 8px rgba(0,0,0,.2); }
.dmm-float-sp .dmm-body { width: 320px; max-width: 100%; height: 100px; margin: 0 auto; overflow: hidden; }
.dmm-float-sp .dmm-body img { width: 320px; height: 100px; max-width: none; }
.dmm-float-sp .dmm-foot { box-sizing: border-box; width: 320px; max-width: 100%; margin: 0 auto; }
html.dmm-bar-on body { padding-bottom: 150px; }

/* 探す・お気に入りの直し（2026-10-25 V2-21）：苦手を除いている状態の行・お気に入りの値下げ中の印・お気に入りが空の時の入口 */
.find-dislike-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 3px; background: var(--panel); font-size: 14px; }
.find-dislike-status p { margin: 0; }
.find-dislike-text { flex: 1 1 18em; min-width: 0; }
.find-dislike-acts { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.find-dislike-acts .btn-plain { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; font-size: 13px; line-height: 1.3; }
.fav-mark { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid var(--accent); border-radius: 2px; color: var(--accent); font-size: 13px; font-weight: 700; line-height: 1.6; vertical-align: middle; }
.fav-empty-box { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 3px; background: var(--panel); }
.fav-empty-box p { margin: 0 0 6px; }
.fav-empty-links { margin: 6px 0 0; padding-left: 1.2em; }
.fav-empty-links li { margin: 0 0 4px; }