@charset "utf-8";
/* 熟エロサーチ — 白基調 / ワインを差し色に */

:root {
  --bg: #ffffff;
  --bg2: #faf7f8;
  --panel: #ffffff;
  --panel2: #fbf8f9;
  --line: rgba(122, 31, 61, .14);
  --line-strong: rgba(122, 31, 61, .34);

  /* 白地に載せるので、暗い版の明るいゴールドから濃い色に置き換えている。
     --gold      = 小見出しやラベル用のブロンズ
     --gold-soft = 強調・ホバー用のワイン
     名前は暗い版から変えていない（使っている箇所が多いため） */
  --gold: #8a6a14;
  --gold-soft: #8c2749;

  --wine: #7a1f3d;
  --wine-hi: #a52c52;
  --text: #2a1b21;
  --muted: #78666c;
  /* 写真や動画プレイヤーの上など、暗い面に載せるとき用 */
  --on-dark: #f6ecd6;
  --shadow: 0 1px 2px rgba(42, 27, 33, .05), 0 6px 18px rgba(42, 27, 33, .05);
  --radius: 10px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #fdf4f7 0%, transparent 62%),
    var(--bg);
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------------------------------------------------------- 年齢確認 */

#agegate { display: none; }

/* ここに html.gated { overflow: hidden } を置いてはいけない。
   通過は #age-pass:checked（CSSだけ）で行うが、~ は #age-pass の兄弟
   ＝body 直下しか辿れないので html のクラスは外せない。
   結果、ゲートは消えたのにページが先頭で固まり、
   購入ボタン（上端から約546px）に永久に届かなくなる。
   ゲートは inset:0 のほぼ不透明なオーバーレイなので、
   背後が動いても見えない。ロックは割に合わない。 */

html.gated #agegate {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overscroll-behavior: contain;
}

html.gated body > *:not(#agegate) { filter: blur(10px); pointer-events: none; }

/* 入場したら解除する。JavaScript が動かない環境でもこれだけで通過できる。
   app.js は localStorage への記録（次回から出さない）だけを担当する。 */
#age-pass:checked ~ #agegate { display: none !important; }
#age-pass:checked ~ * { filter: none !important; pointer-events: auto !important; }

.agegate-box {
  max-width: 460px;
  width: 100%;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 50px rgba(42, 27, 33, .13);
  border-radius: 14px;
  padding: 32px 26px;
  text-align: center;
}

.agegate-brand {
  margin: 0 0 14px;
  letter-spacing: .3em;
  color: var(--gold);
  font-size: 13px;
}

.agegate-box h1 { margin: 0 0 14px; font-size: 19px; line-height: 1.5; }
.agegate-text { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.agegate-actions { display: grid; gap: 10px; }
.agegate-note { margin: 20px 0 0; font-size: 11px; color: var(--muted); }

/* ---------------------------------------------------------- ヘッダー */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 10px; }

/* ロゴの虫めがね部分。assets/logo.png から make_favicon.py が切り出す */
.brand-mark { width: 34px; height: 34px; display: block; }

.brand-text strong { display: block; font-size: 16px; letter-spacing: .08em; }
.brand-text small { display: block; font-size: 10px; color: var(--muted); }

.nav { display: flex; gap: 4px; flex-wrap: wrap; }

.nav a {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid transparent;
  white-space: nowrap;
}

.nav a:hover { color: var(--text); }

.nav a.on {
  color: var(--gold-soft);
  border-color: var(--line-strong);
  background: rgba(122, 31, 61, .06);
}

/* ---------------------------------------------------------- ヘッダーの検索窓

   どのページからでもキーワードで探せるようにするため、ヘッダーに常設する。

   ★ヘッダーを縦に伸ばさないこと。
     スマホ(375px)ではロゴが 16〜210px、その右に165px空いている。
     そこに収まる幅にして、ナビは今までどおり2行目に流す。
     ヘッダーが伸びると、作品ページの購入ボタン（上端から546px）が
     iPhone の1画面（Safari の実効553px）から押し出される。 */
.site-search {
  display: flex;
  align-items: center;
  flex: 1 1 140px;
  min-width: 0;
  max-width: 340px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.site-search:focus-within {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(122, 31, 61, .07);
}

.site-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 2px 7px 14px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  /* ★16px を下回らせないこと。iOS Safari は文字が小さい入力欄に触れると
     ページごと拡大し、戻すのに二本指の操作が要る。 */
  font-size: 16px;
  line-height: 1.2;
}

.site-search input::placeholder { color: var(--muted); }

/* Safari が付ける×印。丸い枠からはみ出して見えるので消す */
.site-search input::-webkit-search-decoration,
.site-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.site-search button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 7px 13px 7px 7px;
  border: 0;
  background: transparent;
  color: var(--gold-soft);
  cursor: pointer;
}

.site-search button:hover { color: var(--wine); }

/* 目には出さないが読み上げには残すラベル */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fav-count {
  display: inline-block;
  min-width: 17px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--wine);
  color: #fff;
  font-size: 10px;
  text-align: center;
  line-height: 17px;
}

.sample-notice {
  margin: 14px 0 0;
  padding: 9px 13px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--gold-soft);
  background: rgba(122, 31, 61, .04);
}

/* ---------------------------------------------------------- 見出し・共通 */

.hero { padding: 18px 0 4px; }
.hero-title {
  margin: 0 0 5px;
  font-size: 20px;
  letter-spacing: .12em;
  color: var(--gold-soft);
}
.hero-lead { margin: 0 0 12px; color: var(--muted); font-size: 12px; }

.page-head { padding: 28px 0 4px; }
.page-head-slim { padding-bottom: 0; }

@media (max-width: 560px) {
  .page-head-slim { padding-top: 16px; }
  .page-head-slim .page-title { font-size: 18px; }
  .page-head-slim .page-lead { font-size: 12px; }
}
.page-title { margin: 0 0 8px; font-size: 22px; letter-spacing: .06em; }
.page-lead { margin: 0; color: var(--muted); font-size: 13px; }

/* タグページの紹介文。読ませる文章なので本文寄りの見た目にする */
.page-intro {
  margin: 14px 0 0;
  max-width: 720px;
  font-size: 13.5px;
  line-height: 1.95;
  color: #4a3840;
  padding-left: 13px;
  border-left: 2px solid var(--line-strong);
}
.page-count { margin: 10px 0 0; color: var(--gold); font-size: 13px; }

.block { padding: 30px 0; }
.block-flush { padding: 20px 0; }

.section-title {
  margin: 0 0 16px;
  font-size: 15px;
  letter-spacing: .16em;
  color: var(--gold);
  padding-left: 11px;
  border-left: 3px solid var(--wine-hi);
}

.crumbs { margin: 0 0 12px; font-size: 11px; color: var(--muted); }
.crumbs a:hover { color: var(--gold-soft); }

.note { margin: 12px 0 0; font-size: 11px; color: var(--muted); }
.empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 13px; }
.more { margin-top: 22px; display: flex; flex-wrap: wrap;
        justify-content: center; gap: 10px; }

/* 見出しの右にボタンを置く行 */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-head .section-title { margin: 0; }

/* ---------------------------------------------------------- ページ送り

   ページ数が100を超えるので、番号は前後ぶんだけ出して間は「…」でたたむ。
   指で押せるよう、ひとつあたり 40px 四方は確保する */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
}

.pager-num,
.pager-step {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}

.pager-num:hover,
.pager-step:hover { border-color: var(--line-strong); background: var(--bg2); }

.pager-num.is-now {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--on-dark);
  font-weight: 700;
}

.pager-step.is-off { color: var(--muted); opacity: .45; }
.pager-step.is-off:hover { border-color: var(--line); background: #fff; }

.pager-gap { padding: 0 2px; color: var(--muted); }

@media (max-width: 560px) {
  .pager { gap: 5px; }
  .pager-num, .pager-step { min-width: 36px; height: 36px; padding: 0 9px; font-size: 13px; }
}

/* ---------------------------------------------------------- ボタン・チップ */

.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, filter .12s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(140deg, var(--wine-hi), var(--wine));
  border-color: var(--line-strong);
  color: #fff;
  font-weight: 700;
}

.btn-primary:hover { filter: brightness(1.15); }

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}

.btn-ghost:hover { color: var(--text); border-color: var(--line-strong); }

.btn-lg { padding: 11px 26px; font-size: 14px; letter-spacing: .08em; }
.btn-sm { padding: 7px 16px; font-size: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }

.chips-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-top: 14px;
  scrollbar-width: thin;
}

/* 未選択と選択済みがひと目で違って見えることを最優先にしている。
   白地なので、未選択＝白に濃い文字 / 選択済み＝ワイン地に白文字と、明暗を反転させる */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #503b43;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s ease;
}

.chip:hover {
  color: var(--wine);
  border-color: var(--wine-hi);
  background: rgba(122, 31, 61, .05);
}

.chip.on {
  background: linear-gradient(140deg, var(--wine-hi), var(--wine));
  border-color: var(--wine);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(122, 31, 61, .25);
}

.chip.on .chip-count { opacity: .85; }

/* 選ぶと0件になる属性。押せないことが見て分かるようにする */
.chip.dead {
  opacity: .38;
  cursor: not-allowed;
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
  text-decoration: line-through;
}

.chip.dead:hover { color: var(--muted); border-color: var(--line); background: transparent; }

.chip-sm { padding: 3px 9px; font-size: 10px; }
.chip-count { font-size: 10px; opacity: .65; }

/* ---------------------------------------------------------- ガチャ */

.gacha {
  display: grid;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, var(--bg2));
  box-shadow: var(--shadow);
}

.gacha-group + .gacha-group { margin-top: 10px; }

.gacha-group-label {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold-soft);
}

.gacha-group-label small {
  margin-left: 10px;
  letter-spacing: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
}

.gacha-console {
  text-align: center;
  padding: 12px 0 2px;
  border-top: 1px solid var(--line);
}

.capsule {
  width: 52px;
  height: 52px;
  margin: 0 auto 9px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 3px 14px rgba(122, 31, 61, .18);
}

.capsule-top { height: 50%; background: linear-gradient(160deg, var(--wine-hi), var(--wine)); }
.capsule-bottom { height: 50%; background: linear-gradient(160deg, #f4ead0, #cdb37a); }

.capsule.rolling { animation: shake .45s ease-in-out infinite; }

@keyframes shake {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  25% { transform: rotate(8deg) translateY(-5px); }
  50% { transform: rotate(-7deg) translateY(2px); }
  75% { transform: rotate(9deg) translateY(-3px); }
}

.gacha-selected { margin: 0 0 9px; font-size: 11.5px; color: var(--muted); min-height: 18px; }
.gacha-selected strong { color: var(--gold-soft); font-weight: 600; }
.gacha-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gacha-hint { margin: 8px 0 0; font-size: 10.5px; color: var(--muted); }

/* ---------------------------------------------------------- 結果表示 */

.results { padding: 16px 0 0; scroll-margin-top: 90px; }

.results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.results-cond { margin: 0; font-size: 12px; color: var(--muted); }
.results-count { margin: 0; font-size: 13px; color: var(--muted); }
.results-count strong { color: var(--gold-soft); font-size: 18px; }
.results-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.viewswitch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.viewswitch button {
  padding: 6px 14px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.viewswitch button.on { background: rgba(122, 31, 61, .08); color: var(--gold-soft); }

.sort { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

.sort select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
}

/* リスト表示（既定・一覧性重視） */

.list { display: flex; flex-direction: column; gap: 8px; }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  transition: border-color .12s ease, background .12s ease;
}

.row:hover { border-color: var(--line-strong); background: var(--bg2); }
.row-thumb { flex-shrink: 0; }
.row-thumb .thumb { width: 84px; height: 56px; object-fit: cover; border-radius: 6px; }
.row-body { min-width: 0; }

.row-title {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.row-title a:hover { color: var(--gold-soft); }
.row-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.row-side { display: flex; align-items: center; gap: 10px; }
.row-meta { margin: 0; font-size: 10px; color: var(--muted); text-align: right; line-height: 1.5; }

/* グリッド表示 */

/* カード1枚が横長なので、狭い画面は1列。広がるにつれ2列→3列 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* 2列まで。3列にすると1枚が狭くなり、肝心の画像が見えない大きさになる */
@media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ---------------------------------------------------------- 一覧のカード

   タイトルを上、その下に「動画のワンシーン + 情報」を横並び。
   パッケージ画像を並べると似た絵ばかりで中身が伝わらないため、
   一覧はサンプルのシーンを使う（ギャラリー検索だけはパッケージのまま）。 */

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  transition: border-color .12s ease, transform .12s ease;
}

.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

/* 必ず2行で切る。余白を padding で持つと overflow が padding の内側で切られ、
   3行目の頭が覗いてしまうので margin で持たせる */
.card-title {
  margin: 10px 12px 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  height: 3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-title a:hover { color: var(--gold-soft); }

.card-body { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding: 0 12px 12px; }

@media (min-width: 700px) {
  .card-body { grid-template-columns: 50% 1fr; }
}

.card-media { position: relative; }

.card-shot {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px;
  background: #f1eaed;
}

.card-shot .shot { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.card:hover .card-shot .shot { transform: scale(1.05); }
/* シーンが無い作品はパッケージで代用する。その場合だけ表側を切り出す */
.card-shot .thumb { width: 100%; height: 100%; object-fit: cover; }
.card-shot .thumb-2up { object-position: 100% 50%; }

.card-dur {
  position: absolute;
  left: 5px; top: 5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(10, 4, 8, .72);
  color: var(--on-dark);
  font-size: 10px;
}

.card-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.card-row { margin: 0; display: flex; align-items: center; gap: 7px; }

.card-src {
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--wine);
  color: #fff;
  font-size: 10px;
  letter-spacing: .04em;
}

.card-score { font-size: 11px; color: var(--gold); font-weight: 700; }
/* 評価の件数。★4.67 だけだと1件の作品と区別が付かない */
.card-rc { margin-left: 2px; font-size: 10px; font-weight: 400; color: var(--muted); }

.card-tags {
  margin: 0;
  font-size: 11px;
  line-height: 1.8;
  color: #503b43;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-tags a:hover { color: var(--wine); text-decoration: underline; }
.card-tags .sep { color: var(--line-strong); }

.card-foot {
  margin: auto 0 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: 10px;
  color: var(--muted);
}

.card-foot span:first-child { flex: 0 0 auto; }
.card-act { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

/* お気に入りは情報列の中に置く（サムネの上に重ねない）。
   .fav の絶対配置があとから効いてしまうので、詳細度を上げて確実に打ち消す */
.card .fav-flat {
  position: static;
  margin-left: auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}

.card .fav-flat:hover { color: var(--gold-soft); border-color: var(--line-strong); }

/* リスト表示は1列に伸ばすだけ。中身は同じカードなので組み直さなくてよい */
.as-list { grid-template-columns: 1fr !important; }
.as-list .card-body { grid-template-columns: 200px 1fr; }

/* サムネのプレースホルダ（画像が無い/読めないとき） */

.thumb-ph {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(122, 31, 61, .05) 0 8px, transparent 8px 16px),
    linear-gradient(150deg, #f3ecee, #e9dfe3);
  color: #6b5a60;
  font-size: 10px;
  letter-spacing: .08em;
}

.thumb-lg { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); font-size: 14px; }

/* お気に入りボタン */

.fav {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: all .12s ease;
}

.fav:hover { color: var(--gold-soft); border-color: var(--line-strong); }
.fav.on { color: #d6336c; border-color: #d6336c; background: rgba(214, 51, 108, .10); }

.fav-inline { position: static; width: 30px; height: 30px; flex-shrink: 0; }
.fav-text.on { color: #d6336c; border-color: #d6336c; }

/* ---------------------------------------------------------- ギャラリー */

.masonry {
  column-count: 2;
  column-gap: 6px;
  padding: 0 6px;
}

.masonry a {
  display: block;
  margin-bottom: 6px;
  break-inside: avoid;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .12s ease, filter .12s ease;
}

.masonry a:hover { border-color: var(--gold); filter: brightness(1.15); }
.masonry .thumb-ph { aspect-ratio: 3 / 4; }
.masonry .thumb { display: block; width: 100%; }

/* ギャラリーは高さがバラバラなのが持ち味なので、枠を固定せずに切り抜く。
   倍の幅で描いて1枚ぶん左へずらすと、右半分（表）だけが枠に残り、
   高さは表パッケージ本来の比率になる */
.masonry .thumb-2up { width: 200%; max-width: none; margin-left: -100%; }

/* ---------------------------------------------------------- おすすめ動画 */

.way-count {
  margin-left: 7px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.review-list { display: flex; flex-direction: column; gap: 14px; }

/* 一覧の時点で紹介文の書き出しを見せる。中身が想像できるほうが開かれる */
.review-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  transition: border-color .12s ease, transform .12s ease;
}

.review-item:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.review-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px;
  background: #f1eaed;
}

.review-thumb .shot,
.review-thumb .thumb { width: 100%; height: 100%; object-fit: cover; }
.review-thumb .thumb-2up { object-position: 100% 50%; }

.review-body { min-width: 0; }

.review-title {
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.review-title a:hover { color: var(--gold-soft); }

.review-lead {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.85;
  color: #4a3840;
}

.review-meta { margin: 0 0 8px; font-size: 11px; color: var(--muted); }

@media (min-width: 600px) {
  .review-item { grid-template-columns: 190px 1fr; gap: 18px; padding: 16px; }
  .review-title { font-size: 15px; }
}

/* ---------------------------------------------------------- カード全体をリンクにする

   写真とタイトルだけでなく、カードのどこを押しても作品ページへ行けるようにする。
   入れ子のリンクは HTML として不正なので、
   タイトルのリンクに透明な面を持たせてカード全面に広げる方式にしている。
   タグ・♥・再生ボタンは、その面より上に出して個別に効かせる。 */

.card, .cover, .review-item { cursor: pointer; }

.card .card-title a::after,
.cover .cover-title a::after,
.review-item .review-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 面より上に出すもの（押したときに別の動きをする要素）。
   もともと文中にある要素は position を与えないと z-index が効かない */
.card .card-tags a,
.card .fav-flat,
.review-item .chips a {
  position: relative;
  z-index: 2;
}

/* ★すでに absolute で位置を決めている要素は position を書き換えないこと。
   relative にすると絶対配置が外れて流し込みに戻り、
   ギャラリーでは♥が再生ボタンの上に重なって出ていた。 */
.card .thumb-play,
.cover .fav,
.cover .thumb-play { z-index: 2; }

/* 画像のリンクも残す。行き先は同じなのでどちらを押しても結果は変わらない */
.card .card-shot,
.cover .cover-thumb,
.review-item .review-thumb { position: relative; z-index: 2; }

/* 面が広がるので、位置の基準を必ず持たせる */
.review-item { position: relative; }

/* ---------------------------------------------------------- ヘッダーの出し入れ

   スマホでは上に貼り付いたナビが一覧の邪魔になるので、
   下へスクロールしている間だけ隠す。広い画面では邪魔にならないので常に出す。 */
@media (max-width: 760px) {
  .site-header { transition: transform .22s ease; will-change: transform; }
  .nav-hidden .site-header { transform: translateY(-100%); }
  /* 条件バーはヘッダーの下に貼り付いているので、隠れたぶん上へ詰める */
  .filterbar { transition: top .22s ease; }
  .nav-hidden .filterbar { top: 0; }

  /* スマホでメニューを折り返すとヘッダーだけで画面の1/4を使ってしまい、
     開いた瞬間に作品が見えない。1行に収めて横スクロールさせる。
     wrap の余白ぶん外へはみ出させて、画面端まで流れるようにする */
  /* 検索窓をロゴと同じ行に収める。
     ★ここで折り返させないこと。折り返すとヘッダーが 121px → 172px になり、
     作品ページの購入ボタン（上端から546px）が iPhone の1画面（実効553px）から出る。
     幅を auto のままにするとロゴの最大幅（キャッチコピーぶん）で場所を取り、
     検索窓が次の行に落ちるので、両方に基準幅を与えて確実に1行に入れる。 */
  .header-inner { gap: 10px; }
  .brand { flex: 0 1 188px; min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-search { flex: 1 1 120px; }
  .nav {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------- 条件バー・上に戻る */

/* 下までスクロールしても条件を選び直せるよう、画面上部に貼り付ける。
   ヘッダーの高さぶん下げて重ならないようにする。
   高さは幅で変わる（ナビが折り返す・折り返さない）ので、app.js が実測して
   --header-h に入れる。JS が動かなければ 57px のまま＝従来どおり。 */
.filterbar {
  position: sticky;
  top: var(--header-h, 57px);
  z-index: 40;
  padding: 8px 0;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.filterbar .chips-scroll { margin-top: 0; padding-bottom: 4px; }
.sort-inline { margin-bottom: 6px; }

/* 並び順とシャッフルを同じ行に並べる。
   幅が足りなければ折り返す（スマホの条件バーが縦に伸びすぎないように） */
.filterbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filterbar .chips-scroll { flex: 1 1 100%; }
#gallery-shuffle { margin-bottom: 6px; }

.totop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .94);
  color: var(--wine);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(42, 27, 33, .16);
  transition: transform .12s ease, background .12s ease;
}

.totop:hover { transform: translateY(-2px); background: #fff; }
.totop[hidden] { display: none; }

/* ---------------------------------------------------------- ギャラリー（パッケージ） */

/* ギャラリーだけはパッケージ画像。写真を主役にするので1枚を大きく取り、
   情報はタイトルだけ添える */
.grid-cover {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

@media (min-width: 900px) {
  .grid-cover { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
}

.cover {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  transition: border-color .12s ease, transform .12s ease;
}

.cover:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.cover-media { position: relative; }
.cover-thumb { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.cover-thumb .thumb { width: 100%; height: 100%; object-fit: cover; }
.cover-thumb .thumb-2up { object-position: 100% 50%; }

/* 余白を padding で持つと overflow が padding の内側で切られ、
   3行目の頭が覗いてしまう。余白は margin に出して高さで切る */
.cover-title {
  margin: 9px 10px 11px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  height: 2.9em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cover-title a:hover { color: var(--gold-soft); }

/* ---------------------------------------------------------- 出演者 */

.searchbox { margin-top: 16px; }

.searchbox input {
  width: 100%;
  max-width: 420px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
}

.searchbox input:focus { outline: none; border-color: var(--gold); }

.actress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 7px;
}

.actress-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.actress-list a:hover { border-color: var(--line-strong); color: var(--gold-soft); }
.actress-name { font-size: 13px; }
.actress-count { font-size: 10px; color: var(--muted); }

/* ---------------------------------------------------------- 探し方カード */

.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }

.way {
  display: block;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  transition: all .12s ease;
}

.way:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.way-icon { display: block; color: var(--gold); font-size: 20px; margin-bottom: 8px; }
.way strong { display: block; font-size: 14px; margin-bottom: 5px; }
.way small { display: block; font-size: 11px; color: var(--muted); line-height: 1.6; }

.tagline { margin-bottom: 16px; }
.tagline-label { margin: 0 0 7px; font-size: 11px; letter-spacing: .12em; color: var(--gold); }

/* ---------------------------------------------------------- 検索フィルタ */

.filter {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, var(--bg2));
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.filter-group + .filter-group { margin-top: 14px; }
.filter-label { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; color: var(--gold); }

.filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.filter-selected { margin: 0; font-size: 12px; color: var(--muted); }
.filter-selected strong { color: var(--gold-soft); font-weight: 600; }

/* ---------------------------------------------------------- 作品ページ */

.item-page { padding: 24px 0 8px; }
.item-main { display: grid; gap: 22px; }
.item-visual img, .item-visual .thumb-ph { width: 100%; border-radius: 12px; border: 1px solid var(--line); }

.pr-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--gold);
}

/* 初回購入者向けクーポンの案内。作品説明のすぐ下に置く */
.coupon {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff8fa, #fdf2f6);
}

.coupon-head {
  margin: 0 0 9px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.coupon-amount {
  display: inline-block;
  margin-right: 9px;
  padding: 2px 9px;
  border-radius: 4px;
  background: var(--wine);
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  vertical-align: 1px;
}

.coupon-terms {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 11.5px;
  line-height: 1.85;
  color: #4a3840;
}

.coupon-note { margin: 9px 0 0; font-size: 10.5px; color: var(--muted); line-height: 1.6; }

.item-title { margin: 0 0 12px; font-size: 20px; line-height: 1.5; }
.item-copy { margin: 0 0 18px; color: var(--muted); font-size: 13px; }

.item-spec {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 7px 12px;
  margin: 0 0 18px;
  font-size: 12px;
}

.item-spec dt { color: var(--muted); }
.item-spec dd { margin: 0; }
.item-spec a { color: var(--gold-soft); }
.item-spec a:hover { text-decoration: underline; }

.item-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }
.cta-note { margin: 10px 0 0; font-size: 10px; color: var(--muted); }

/* ---------------------------------------------------------- サンプル動画 */

/* 作品ページの大きい画像そのものが再生ボタンになる */

.item-visual.playable { position: relative; cursor: pointer; }
.item-visual.playable img { transition: filter .15s ease; }
.item-visual.playable:hover img,
.item-visual.playable:focus-visible img { filter: brightness(.62); }

.visual-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
  pointer-events: none;
}

.visual-play-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--wine-hi), var(--wine));
  border: 2px solid var(--on-dark);
  box-shadow: 0 4px 22px rgba(0, 0, 0, .55);
  font-size: 21px;
  padding-left: 4px;
  transition: transform .14s ease;
}

.item-visual.playable:hover .visual-play-icon { transform: scale(1.09); }

/* 一覧のサムネに出す小さい再生ボタン。
   サムネ本体のクリックは作品ページへ、この丸だけが再生 */

/* 再生ボタン。
   ▶ の文字は字ごとに余白の取り方が違って中央に来ないので、
   文字は消して CSS で三角を描く。
   三角は grid の中央寄せで外接箱ごと真ん中に置く。
   以前は「目で見た中央」を狙って右へずらしていたが、
   実際にはそのぶんがそのままズレになって見えたのでやめた。 */
.thumb-play {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(246, 236, 214, .7);
  background: rgba(10, 4, 8, .72);
  color: var(--on-dark);
  cursor: pointer;
  transition: all .12s ease;
}

/* ボタンの中身は空にしてある。文字を入れると grid の項目が2つになり、
   三角が上の段へ押し上げられる（実際にそれで上にずれていた） */
.thumb-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
}

.thumb-play:hover {
  background: linear-gradient(140deg, var(--wine-hi), var(--wine));
  color: #fff;
  transform: scale(1.1);
}

/* ギャラリーは写真が主役なので、さらに大きく */
.thumb-play-lg { width: 52px; height: 52px; left: 10px; bottom: 10px; }
.thumb-play-lg::before { border-width: 9px 0 9px 15px; }

.row-thumb { position: relative; }
.row-thumb .thumb-play { width: 28px; height: 28px; left: 4px; bottom: 4px; }
.row-thumb .thumb-play::before { border-width: 5px 0 5px 9px; }

/* 中央に拡大して再生するモーダル */

html.modal-open { overflow: hidden; }

.player-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* ★これが無いと閉じても消えない。
   hidden 属性は display:none で効いているだけなので、
   上の display:flex に負けて、黒い背景が画面を覆ったまま残る */
.player-modal[hidden] { display: none; }

.player-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 3, 6, .9);
  backdrop-filter: blur(5px);
}

/* プレイヤーは 720×480 固定なので、枠幅もそれに合わせる。
   大きくしすぎると下に黒帯が出るだけで、画も粗くなる */
.player-box {
  position: relative;
  width: min(860px, 100%);
  transform: scale(.94);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.player-modal.on .player-box { transform: scale(1); opacity: 1; }

.player-frame {
  position: relative;
  overflow: hidden;
  background: #000;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

/* 720×480 のまま拡大縮小して枠にぴったり収める */
.player-stage {
  width: 720px;
  height: 480px;
  transform-origin: top left;
}

.player-stage iframe { width: 720px; height: 480px; border: 0; display: block; }

.player-close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(36, 17, 28, .9);
  color: var(--on-dark);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.player-close:hover { color: #fff; border-color: var(--on-dark); }

.player-caption {
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

@media (max-width: 600px) {
  .player-close { top: -38px; }
  .player-caption { display: none; }
}

/* レビュー本文。節ごとに見出し＋文章＋サンプル画像2枚 */
.item-review { margin-top: 36px; max-width: 860px; }
.review-sec + .review-sec { margin-top: 30px; }

.review-h {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
  padding-left: 11px;
  border-left: 3px solid var(--wine-hi);
}

.review-p {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: #3d2c33;
}

/* 文章の直後に2枚並べる。読みながら画が目に入る配置 */
.review-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.review-shots img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.review-shots a:hover img { border-color: var(--line-strong); filter: brightness(1.04); }

.item-samples { margin-top: 36px; }
.sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sample-grid img { border-radius: 6px; border: 1px solid var(--line); }

/* ---------------------------------------------------------- フッター */

.site-footer {
  margin-top: 50px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg2);
}

/* 固定ページ（プライバシーポリシー等）の本文 */

.prose { max-width: 760px; }
.prose h2 {
  margin: 30px 0 10px;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--gold-soft);
  padding-left: 11px;
  border-left: 3px solid var(--wine-hi);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.9; color: #46343b; }
.prose strong { color: var(--text); }
.prose a { color: var(--gold-soft); text-decoration: underline; }
.contact-mail { font-size: 15px !important; }

.footer-links { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; font-size: 12px; }
.footer-links-sub { margin-top: -6px; }
.footer-links-sub a { opacity: .8; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--gold-soft); }
.footer-note { margin: 0 0 10px; font-size: 11px; color: var(--muted); line-height: 1.7; }
.footer-copy { margin: 0; font-size: 11px; color: var(--muted); }
.footer-credit { margin: 8px 0 0; font-size: 11px; }
.footer-credit a { color: var(--muted); }
.footer-credit a:hover { color: var(--gold-soft); }

/* ---------------------------------------------------------- 画面幅 */

@media (min-width: 600px) {
  .masonry { column-count: 3; }
  .row { grid-template-columns: 108px 1fr auto; }
  .row-thumb .thumb { width: 108px; height: 70px; }
}

@media (min-width: 900px) {
  body { font-size: 15px; }
  .masonry { column-count: 4; }
  .gacha { grid-template-columns: 1fr 300px; align-items: start; }
  .gacha-console { border-top: 0; border-left: 1px solid var(--line); padding: 4px 0 4px 24px; }
  .item-main { grid-template-columns: minmax(0, 420px) 1fr; align-items: start; }
}

@media (min-width: 1200px) {
  .masonry { column-count: 5; }
}

@media (prefers-reduced-motion: reduce) {
  .capsule.rolling { animation: none; }
  * { transition: none !important; }
}


/* 年齢確認の入場は label（JSなしでも押せるようにするため）。
   button と同じ見た目にそろえる */
#agegate-yes { display: inline-flex; align-items: center; justify-content: center;
               cursor: pointer; user-select: none; }

/* ---------------------------------------------------------------- 女優ランキング
   作品ページでは FANZA 公式と海賊版サイトに勝てないので、
   編集記事どうしの勝負になる女優軸のページを別に持っている。 */
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: rank; }
.rank-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.rank-head { display: flex; align-items: baseline; gap: 10px; }
.rank-no {
  flex: none;
  min-width: 2.1em;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--wine-hi);
  font-variant-numeric: tabular-nums;
}
.rank-name { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.rank-meta { margin: 6px 0 0; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-works { margin: 8px 0 0; font-size: .88rem; line-height: 1.7; }
.rank-works a { margin-right: .2em; }

/* トップページに置く短い版。カードにせず1行ずつ並べる */
.rank-compact { gap: 0; }
.rank-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.rank-row:last-child { border-bottom: none; }
.rank-row .rank-name { flex: 1; font-size: .98rem; }
.rank-num { flex: none; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* おすすめ・ランキングページの読み物部分 */
.article-body h2 { margin-top: 1.6em; }
.article-body p { line-height: 1.9; margin: .6em 0 0; }