/* P10（8kvr-love.com）。worker.js が組み立てるページの見た目（2026-10-02。見た目は 移行デモ で決めたもの）。
   色は下の「色の決まり」だけで変える */

/* ---------- 色の決まり ----------
   2026-10-02 ユーザーが候補3つから 案2「濃いローズで締める」に決めた（「文字が見やすい」）。
   帯を「この作品を見る」と同じ濃いローズにして、ピンクを1色にまとめる。札は白地＋縁、件数は縁だけ。
   前の色（帯は薄いピンク・札の地は白に近い薄ピンク）は「ミニヘッダーと統一感が無い・白と薄いピンクで境目があいまい」（ユーザー） */
:root {
  --band: #e11d48; --band-ink: #fff;            /* 一番上の細い帯（ミニヘッダー） */
  --ac: #e11d48;                                /* 選んでいる札・ボタン */
  --ac-ink: #e11d48;                            /* 白地に置くローズの字（リンク・選んでいない札の字）。ヘッダーと同じ（ユーザー 2026-10-02「ヘッダーと同じく明るく」） */
  --chip-bg: #fff; --chip-bd: #fbb6c4;          /* 選んでいない札 */
  --rank: #e11d48;                              /* ランクの札（ヘッダーと同じ） */
  /* カードの札（ユーザー 2026-10-02「明るい方がいい。セールの青は暗い・新作の濃い赤は熟女を感じる」→ 候補を見比べて
     「セール水色・VR 系ピンク・新作オレンジ・旧作は紫に白」に決めた） */
  --b-new: #ff7a00; --b-kyu: #78350f; --b-sale: #0fb2f2; --b-sale-ink: #fff; --b-vr: #ff3d7f;
  /* 旧作の札はこげ茶（2026-10-02 ユーザー。前の紫 #8b5cf6 は P5 のバストサイズの札の紫とかぶった。候補 栗色・こげ茶・ココア から） */
  --b-cup: #9333ea;                             /* P5 のバストサイズの札（紫系に白。候補3つ＝濃いぶどう・紫・赤紫から ユーザーが「B 紫」に決めた。2026-10-02） */
  --cta: #e11d48;                               /* 「この作品を見る」のボタン */
  --line: #fbd5dd;                              /* 区切りの線 */
  --ink: #2b2b2b; --sub: #8a8a8a; --bg: #ffffff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 15px; line-height: 1.7; letter-spacing: .02em; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

/* 札・小さいボタンの字は、上下の余白がフォントで違う（PC とスマホでずれる）ので、
   text-box で字の上（大文字・数字の高さ）と下（ベースライン）に切りそろえ、上下の余白は padding だけで作る */
.trim, .chip, .bdg span, .seg .t, .meta time, .meta .prb { text-box: trim-both cap alphabetic; }

.band { background: var(--band); color: var(--band-ink); text-align: center; font-size: 12px; padding: 4px 8px; letter-spacing: .08em; }
/* パソコンでも、メニューと検索のボタンは記事の幅にそろえる */
.hd { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 2px; background: #fff; max-width: 1080px; margin: 0 auto; }
/* メニュー・サイト名・検索の上下の中心をそろえる */
.logo { font-weight: 800; font-size: 19px; line-height: 1; text-decoration: none; letter-spacing: .1em; }
.hd-btn { width: 40px; height: 40px; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; }
.hd-btn.menu i { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.hd-btn.find svg { display: block; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; }
.search { display: flex; gap: 6px; padding: 0 12px 10px; max-width: 1080px; margin: 0 auto; }
.search[hidden] { display: none; }
.search input { flex: 1; font-size: 16px; padding: 8px 10px; border: 1px solid var(--chip-bd); border-radius: 8px; }
.search button { border: 0; background: var(--ac); color: #fff; border-radius: 8px; padding: 0 14px; font-weight: 700; }

/* 上の塊（ピンクの帯・メニュー・サイト名・検索・ランクの帯）。下へ送ると一度に隠れ、上へ戻すと一度に出る（site.js） */
.top { position: sticky; top: 0; z-index: 20; background: #fff; transition: transform .25s ease; }
.top.hide { transform: translateY(-100%); }
.chips { background: #fff; border-bottom: 1px solid var(--line); }
.chips-in { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; max-width: 1080px; margin: 0 auto; }
.chips-in::-webkit-scrollbar { display: none; }
/* 札の幅はそろえる（S・A が丸くなってかっこ悪い。ユーザー 2026-10-02）。ふちの線は 1.5px（切り替え・並べ替えと同じ） */
.chip { flex: 0 0 auto; display: inline-block; width: 64px; text-align: center; padding: 10px 0; border-radius: 999px; line-height: 1;
  background: var(--chip-bg); color: var(--ac-ink); font-weight: 700; font-size: 14px; text-decoration: none; border: 1.5px solid var(--chip-bd); }
@media (min-width: 561px) { .chip { width: 96px; } }      /* 広い画面は本数も出るので広め */
.chip span { margin-left: 5px; font-weight: 600; font-size: 11px; color: var(--sub); }
.chip.on { background: var(--ac); color: #fff; border-color: var(--ac); }
.chip.on span { color: rgba(255,255,255,.8); }
.chip.shin { color: #f06a00; background: #fff; border-color: #ffd0a3; }    /* 新作はカードの札と同じオレンジ（ユーザー 2026-10-02） */
.chip.shin.on { color: #fff; background: var(--b-new); border-color: var(--b-new); }
.chip.sl { color: #0a95cc; background: #fff; border-color: #a5e3fa; }      /* セールはカードの札と同じ水色 */
.chip.sl.on { color: #fff; background: var(--b-sale); border-color: var(--b-sale); }
/* スマホの幅では件数を出さない（件数はドロワーにある） */
@media (max-width: 560px) { .chip span { display: none; } }
/* それでもはみ出す狭い画面では、右の端をぼかして横にずらせると分かるようにする */
.chips.over .chips-in { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 12px 24px; }
.lh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 12px; }
/* 見出しは、上の帯に出ないページ（年・VR・8KVR・旧作）だけ。字の上下を切りそろえてから真ん中で合わせる */
.lh h1 { font-size: 16px; font-weight: 700; line-height: 1; margin: 0; text-box: trim-both cap alphabetic; }
/* 画面には出さず、検索と読み上げのために残す見出し */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

.tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.seg { display: inline-flex; border: 1.5px solid var(--chip-bd); border-radius: 999px; overflow: hidden; }
/* 2D／VR の切り替え。字は中の箱（.t）で上下を切りそろえ、ボタンの真ん中に置く（ボタンの中の字は、倍率やブラウザで上下がずれやすい。
   ユーザー 2026-10-02「PC で字が上寄りに見える」）。高さは隣の並べ替えの欄と同じ 30px */
.seg button { border: 0; background: #fff; height: 29px; padding: 0 14px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--sub); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.seg .t { display: inline-block; }
.seg button.on { background: var(--ac); color: #fff; }
.sort select { font-size: 14px; font-weight: 700; height: 32px; padding: 0 30px 0 12px; border: 1.5px solid var(--chip-bd); border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a8a8a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none; appearance: none; color: var(--ink); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* 広い画面でも3列まで（4列だと PC で小さくて、どんな作品か・どんな女優か見えない。ユーザー 2026-10-02） */
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: block; text-decoration: none; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.card[hidden] { display: none; }
/* アイキャッチは切り抜かない。枠に縮めて全部を収める（画像利用の基本ルール。P7 と同じ。ユーザー 2026-10-02「見切れてるのがある」）。
   アイキャッチの縦横比は 1.33〜1.6 とばらばらなので、枠は P7 と同じ 800:538 にして、余りは白 */
.th { position: relative; aspect-ratio: 800 / 538; background: #fff; min-height: 0; overflow: hidden; }   /* min-height: 0 … カードを縦に並べる形（flex）でも、縦長の画像で枠が伸びないように */
.th img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* カードの札。画像の下・題名の上に1行で右寄せ（画像の上だと見にくく、女優にかぶる。ユーザー 2026-10-02）。
   字は太さ700（極太の800は 100% 表示の画面で字の中がつぶれて滲んだ） */
.card { display: flex; flex-direction: column; }
/* スマホ（2列）の札は少し小さく（字 10px・間 3px。2026-10-02 ユーザー）。P5 で札が3〜4つ並ぶと2段になり、題名が隣のカードとずれた（287枚中48枚 → 14枚）。
   広い画面（3列）は元の大きさ（下の min-width: 720px） */
.bdg { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; padding: 8px 10px 0; min-height: 8px; }
.bdg:empty { padding-top: 0; }
.bdg span { font-size: 10px; font-weight: 700; line-height: 1; padding: 4px 4px; border-radius: 4px; color: #fff; letter-spacing: 0; white-space: nowrap; }
.bdg .b-vr { background: var(--b-vr); }
.bdg .b-new { background: var(--b-new); }
.bdg .b-kyu { background: var(--b-kyu); }
.bdg .b-rank { background: var(--rank); }
.bdg .b-cup { background: var(--b-cup); }       /* P5 のバストサイズ（ランクの右。2026-10-02 ユーザー「紫系に白」） */
.bdg .b-sale { background: var(--b-sale); color: var(--b-sale-ink); }
.owari { display: none !important; }      /* セールの終わりの日時を過ぎたら消す（site.js） */
@media (min-width: 720px) { .bdg { gap: 4px; } .bdg span { font-size: 12px; padding: 5px 6px; letter-spacing: .02em; } }
.tt { font-size: 13px; font-weight: 700; padding: 8px 10px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5; }
.dt { font-size: 11px; color: var(--sub); padding: 2px 10px 10px; }
.more { display: block; margin: 18px auto 0; border: 1px solid var(--ac); background: #fff; color: var(--ac);
  font-weight: 700; padding: 10px 40px; border-radius: 999px; font-size: 15px; cursor: pointer; }
.more[hidden], .hit0[hidden] { display: none; }
.none, .hit0 { color: var(--sub); text-align: center; padding: 24px 0; }

/* 記事 */
.bc { font-size: 12px; color: var(--sub); margin: 10px 0 0; }
.bc a { color: var(--sub); }
.wrap.art .content { max-width: 820px; }      /* 固定ページの字が横に広がりすぎないように（左はヘッダーにそろう） */
/* パソコンの記事のページは 左に記事・右に関連動画（端はヘッダーにそろう） */
@media (min-width: 1000px) {
  .kiji { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 40px; align-items: start; }
  .kiji .content { max-width: none; }
  /* 右の関連動画は、一覧と同じ縦並びのカードを1列に（横並びだと画像がほとんど無かった。ユーザー 2026-10-02）。
     スクロールに付いてこさせるのはやめた（縦並びにして下の余白がほぼ無くなった。ユーザー 2026-10-02） */
  .kiji .rel { margin-top: 18px; border-top: 0; padding-top: 0; }
  .kiji .rel .grid { grid-template-columns: 1fr; gap: 14px; }
}
/* 投稿日の行。記号と日付を真ん中で合わせ、PR の札は右の端（ユーザー） */
.meta { font-size: 12px; line-height: 1; color: var(--sub); margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.meta .d { display: inline-flex; align-items: center; gap: 4px; }
.meta .d svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.meta time { display: inline-block; }
.meta .prb { display: inline-block; margin-left: auto; font-size: 10px; font-weight: 700; line-height: 1; color: #fff; background: #a3a3a3;
  border-radius: 3px; padding: 3px 5px; letter-spacing: .06em; }
.at { font-size: 19px; line-height: 1.5; margin: 6px 0 12px; }
.eye { display: block; width: 100%; border-radius: 6px; margin-bottom: 14px; }
.content img { display: block; margin: 0 auto 15px; }
/* サンプル画像は縦長も横長も同じ幅（列いっぱい）。広い画面では2列に詰めて並べる（段違いにしない・大きくなりすぎない） */
.content img.smp { width: 100%; height: auto; margin: 0 0 12px; box-shadow: 0 2px 4px rgba(0,0,0,.2); break-inside: avoid; }
@media (min-width: 640px) { .smps { columns: 2; column-gap: 12px; } }
/* 「この作品を見る」（上は btn-ue・下は btn-shita。GA4 がこの名前で押された数を分けて数える）と、見放題ch のボタン */
.btn-wrap { text-align: center; margin: 0 0 30px; }
.btn-wrap.semai { margin-bottom: 12px; }
.btn { display: flex; align-items: center; justify-content: center; width: 260px; max-width: 100%; height: 56px; margin: 0 auto;
  background: var(--cta); color: #fff; border-radius: 50px; box-shadow: 0 4px 6px rgba(225, 29, 72, .3);
  text-decoration: none; font-size: 1.2em; font-weight: 700; line-height: 1; }
.btn.getsu { background: #2563eb; box-shadow: 0 4px 6px rgba(37, 99, 235, .3); }
.getsu-note { margin: -14px auto 14px; font-size: .9em; color: #64748b; text-align: center; }
/* 下の「この作品を見る」は、最後の画像から少し離す（15px だと画像にくっついて見えた。上のボタンと情報ボックスの間 24px に合わせる） */
.btn-wrap.shita { margin-top: 28px; }
/* サンプル動画は「タップで再生」。押すまで動画は読み込まない（site.js） */
.mv { margin: 24px 0 0; }
.mv-btn { display: block; width: 100%; padding: 16px; border: 1px solid var(--chip-bd); border-radius: 10px; background: #fff;
  color: var(--ac-ink); font-size: 15px; font-weight: 700; cursor: pointer; }
/* 動画の枠は 4:3（FANZA の再生画面は下に操作の部分が付く。16:9 だと下の4分の1ほどが切れた。WordPress のころの auto_post も 75%。ユーザー 2026-10-02） */
.mv-in { position: relative; width: 100%; padding-top: 75%; }
.mv-in iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rel { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 16px; }
.rel h2 { font-size: 17px; margin: 0 0 12px; }

/* ドロワー */
.drawer { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.35); }
.drawer[hidden] { display: none; }
.drawer-in { position: absolute; left: 0; top: 0; bottom: 0; width: min(82vw, 320px); background: #fff; overflow-y: auto; padding: 14px 16px 30px; }
.drawer-close { position: absolute; right: 8px; top: 6px; border: 0; background: none; font-size: 26px; color: var(--sub); cursor: pointer; }
.drawer h2 { font-size: 15px; margin: 18px 0 6px; border-left: 4px solid var(--band); padding-left: 8px; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li a { display: flex; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid #f2f2f2; text-decoration: none; font-weight: 700; }
.drawer li span { color: var(--sub); font-weight: 400; font-size: 12px; }

.ft { background: #fafafa; border-top: 1px solid #eee; padding: 18px 12px 30px; text-align: center; font-size: 12px; color: var(--sub); margin-top: 30px; }
.ft .age { margin: 0 0 10px; }
.ft nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 8px; }
.ft a { color: #666; }

/* ---------- 情報ボックス（案A。2026-10-02 ユーザーが見本から選んだ） ---------- */
.ib { border-radius: 14px; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .06); border: 1px solid var(--line);
  padding: 14px; margin: 0 0 24px; font-size: 13px; }
/* 情報ボックスの女優名・シリーズ（P7 のページへ）。押せると分かるように、下線と「›」（ユーザー 2026-10-02「押せるものだと気づきにくい」） */
/* 情報ボックスの女優名・シリーズ（P7 のページへ）。下線つきの青い字（ユーザー 2026-10-02「青文字＝リンクって感じがする」。「›」はやめた） */
.ib a { color: #2563eb; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ib-name { margin: 10px 0 0; font-size: 11px; color: var(--sub); line-height: 1.6; }
.ib-hero { display: flex; align-items: center; gap: 12px; }
/* 頭の部分（ランクの札・星と点数・件数）は、字の上下の余白を切りそろえてから真ん中で合わせる
   （行の高さの余白で右の字が上に寄り、星と点数も字の下の線でそろえていたので段違いに見えた。ユーザー 2026-10-02） */
.ib-rank { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 58px; height: 58px;
  border-radius: 12px; color: #fff; line-height: 1; background: var(--rank); }
.ib-rank b { display: block; font-size: 22px; font-weight: 900; letter-spacing: .02em; text-box: trim-both cap alphabetic; }
.ib-rank small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .1em; opacity: .9; text-box: trim-both cap alphabetic; }
.ib-sc { display: flex; flex-direction: column; gap: 10px; line-height: 1; }
.ib-sc .l1 { display: flex; align-items: center; gap: 8px; }
.ib-sc b { display: block; font-size: 22px; text-box: trim-both cap alphabetic; }
.ib-sc .stars { display: block; text-box: trim-both cap alphabetic; }
.ib-sc small { display: block; font-size: 11px; color: var(--sub); text-box: trim-both cap alphabetic; }
.stars { --v: 0; font-size: 16px; letter-spacing: 1px; line-height: 1; color: transparent;
  background: linear-gradient(90deg, var(--rank) calc(var(--v) / 5 * 100%), #e5e7eb 0); -webkit-background-clip: text; background-clip: text; }
.ibA dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); }
.ibA dl .w { grid-column: 1 / -1; }
.ibA dt { font-size: 10px; color: var(--sub); font-weight: 700; letter-spacing: .08em; }
.ibA dd { margin: 0; font-weight: 700; word-break: break-all; line-height: 1.5; }
.ib-sale { margin-left: auto; align-self: flex-start; white-space: nowrap; background: var(--b-sale); color: var(--b-sale-ink); font-weight: 700; font-size: 13px; line-height: 1;
  padding: 6px 9px; border-radius: 8px; text-align: center; }
.ib-sale small { display: block; font-size: 10px; font-weight: 700; margin-top: 3px; opacity: .9; }