/* 性癖AV事典
   題材は「ムック本のベスト10特集」。順位が主役の誌面。
   ─ 白地に濃い色面を大きく置く。罫線に階層を負わせない
   ─ 順位の数字を巨大にして、1位は塗り、2〜3位は太枠で差をつける
   ─ 色に役割を持たせる（プラム=順位と導線 / 緑=見放題 / 琥珀=予定と賛否）

   前の版は「罫線の太さと余白で階層を作る／プラムは句読点のように置く」だったが、
   その罫線のコントラスト比が 1.29、順位の数字が 1.64 で**見えていなかった**。
   抑制だけが残って構造が伝わらず、淡白に見えていた。

   避けたもの: 角丸カードの量産／全要素に同じ影／ALL-CAPSのラベル／
              中黒でつないだメタ行／リンク文末の「→」 */

:root{
  /* ライト固定。参考にした競合（jp-loveless / oppai-doga）は全てライトで、
     ダークで見ると比較の土俵が変わる。 */
  color-scheme: light;
  /* ⚠️ 以前は --sink:#F5F2F3（温かみのあるオフホワイト）と
     --plum:#8E1F4B（ワイン系）と --band:#1A1418（色味を帯びた黒）だった。
     運営者に「claudeで書き出された典型的な色味」と指摘された。実際そのとおりで、
     暖色のオフホワイト＋暖色アクセントはAI生成で量産される配色の既定値。
     **背景は純白。グレーはニュートラル。アクセントはビビッドなマゼンタ**に振る。 */
  --paper:#FFFFFF; --raise:#FFFFFF; --sink:#F5F5F7; --band:#1C1C1F;
  /* ⚠️ --ink-3 は #77777F だった。白地で 4.44:1、薄いグレー地で 4.08:1 と、
     どちらもWCAG AA（4.5:1）に届いていなかった。補助テキストは全ページの
     レビュー数・日付・注記に使っている色なので、ここ1行で全部直る。
     #6B6B74 は白地 5.28:1 / --sink 地 4.85:1。 */
  --ink:#17171A; --ink-2:#4A4A52; --ink-3:#6B6B74;
  --hair:#E4E4E8; --rule:#8A8A93;
  /* #D6006E は白地でコントラスト5.15:1。本文サイズのリンクでもAAを満たす */
  --plum:#D6006E; --plum-deep:#9E0052; --plum-soft:#FDE8F2; --plum-line:#D6006E33;
  --teal:#0C6156;      /* 見放題 */
  --amber:#8A5A06;     /* 配信予定・賛否あり */
  /* 1.25 の等比スケール（15px 基準）。順位用に t8 を足した */
  --t0:.72rem; --t1:.82rem; --t2:.94rem; --t3:1rem;
  --t4:1.28rem; --t5:1.62rem; --t6:2.1rem; --t7:2.9rem; --t8:4rem;
  /* 1920pxの画面で左右に490pxずつ余っていたので広げた。
     本文の行長は p{max-width:40em} で別に抑えている */
  --col:86rem; --gut:4.2rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 15px/1.85 "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",
       "Yu Gothic",Meiryo,system-ui,sans-serif;
  font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--col); margin-inline:auto; padding-inline:1.25rem}
a{color:var(--plum); text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--plum-line); text-underline-offset:.22em;
  transition:text-decoration-color .15s}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--plum); outline-offset:3px}

/* 広告表示（景表法・DMM参加規約第4条4項）。細い帯にして紙面を圧迫しない
   ⚠️ 2026-09-30 の審査前レビュー: 本文より小さく薄い灰色だった。ステマ告示の運用基準は
      「周囲の文字より小さい」「薄い色」を不適切な表示の例に挙げている。
      **広告であることの一文は本文と同じ大きさ・濃さ**にし、先頭に「PR」を置く。価格の注意書きだけ小さくする */
.pr{font-size:inherit; line-height:1.7; color:var(--ink);
  padding:.45rem 0; border-bottom:1px solid var(--hair)}
.pr-k{display:inline-block; margin-right:.45rem; padding:0 .4rem; background:var(--ink); color:#fff;
  font-size:var(--t1); font-weight:800; letter-spacing:.06em; line-height:1.5}
/* 2026-09-30 運営者の指摘: スマホで「…利用して｜います。」と割れ、注意書きが後ろに続いて収まりが悪かった。
   広告の一文は1行に収め（「当サイトは」を外した）、注意書きは次の行に分ける。PCでは横に並べる */
.pr-main{white-space:nowrap}
.pr-note{display:block; font-size:var(--t0); color:var(--ink-3); line-height:1.6}
/* いまセール中の帯（2026-10-25・base.html）。PR表記の下・パンくずの上に1行 */
.salebar{background:var(--plum-soft); border-bottom:1px solid var(--plum-line)}
.salebar a{display:block; padding:.45rem 0; font-size:var(--t0); color:var(--ink); text-decoration:none; line-height:1.5}
.salebar a:hover{text-decoration:underline}
.salebar b{display:inline-block; margin-right:.45rem; padding:0 .4rem; background:var(--plum); color:#fff; font-weight:800}
@media (min-width:46rem){ .pr-note{display:inline; margin-left:.8rem} }
/* ── ロゴ ──
   事典の見出し語の体裁で組む。画像は使わない（量産しても維持が要らない）。
   ヘッダーが縦を食わないよう、高さは元の1行ぶんに収める */
.masthead{padding:1rem 0 .9rem; border-bottom:3px solid var(--ink);
  background:var(--paper)}
.masthead .wrap{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
/* ロゴ。題材は**事典の見出し語**。
   ⚠️ 以前は「性癖」も「AV事典」も同じ太さ・同じ大きさで並べていただけで、
   文字を置いただけに見えていた（運営者の指摘）。
   事典の見出し語は、語・分類・読みで**大きさと役割が違う**。それを写す。

     ▌ 性癖  AV事典        ← 語は大きく、分類は小さく罫を敷いて添える
       せいへき・えーぶいじてん   ← 読みは字間を広く、小さく

   太字にするのは「性癖」だけ。ここが唯一の主役で、他は静かにする。
   画像は使わない（量産しても維持が要らず、表示も速い）。 */
.logo{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  color:var(--ink)}
/* 索引のつまみに見立てた色帯。文字の塊と同じ高さに揃える */
.logo-mark{width:.34rem; height:2.1rem; background:var(--plum); flex:none;
  transition:background .16s ease, transform .16s ease}
.logo-text{display:grid; gap:.26rem}
.logo-row{display:flex; align-items:baseline; gap:.5rem}
.logo-text b{font-size:var(--t5); font-weight:800; letter-spacing:.09em;
  line-height:1}
/* 分類（AV事典）。小さく、字間を開け、下に細い罫。主役を食わない */
.logo-text i{font-style:normal; font-size:var(--t0); font-weight:800;
  letter-spacing:.22em; color:var(--plum); line-height:1;
  padding-bottom:.2em; border-bottom:2px solid var(--plum)}
.logo-text small{font-size:.66rem; color:var(--ink-3); letter-spacing:.2em;
  line-height:1}
.logo:hover .logo-mark{background:var(--ink); transform:scaleY(1.12)}
@media (prefers-reduced-motion:reduce){ .logo-mark{transition:none} }
@media (max-width:26rem){
  .logo-text b{font-size:var(--t4); letter-spacing:.06em}
  .logo-mark{height:1.8rem}
}
/* 上のメニュー（2026-09-30）。以前ここにあった説明の一文（tagline）はトップのリード文と同じなので外した。
   PCはロゴの右に1行。スマホはロゴの下に細い1行（開閉するメニューにはしない） */
.gnav{display:flex; align-items:center; gap:.2rem; margin-left:auto}
.gnav a,.gnav button{display:inline-flex; align-items:center; min-height:2.75rem; padding:0 .7rem;
  font:inherit; font-size:var(--t1); font-weight:700; color:var(--ink); text-decoration:none;
  background:none; border:0; cursor:pointer; letter-spacing:.04em}
.gnav a:hover,.gnav button:hover{color:var(--plum)}
.gnav button{color:#fff; background:var(--ink); margin-left:.3rem}
.gnav button:hover{color:#fff; background:var(--plum)}
@media (max-width:40rem){
  .masthead{padding-bottom:0}
  .gnav{width:100%; margin:.2rem 0 0; justify-content:space-between; gap:0;
    border-top:1px solid var(--hair)}
  .gnav a,.gnav button{padding:0 .5rem}
  .gnav button{margin-left:0}
}
.crumbs{font-size:var(--t0); color:var(--ink-3); padding:.9rem 0 0; letter-spacing:.02em}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--plum)}
.crumbs span+span::before{content:"›"; margin:0 .5em; color:var(--rule)}

main{padding-block:.2rem 4rem}
/* 見出しが「放尿・お漏らしジャン / ルのAV女優ラン / キングと作品紹介」のように
   語の途中で折り返していた。日本語は既定でどこでも折れるので、
   文節で折る指定（auto-phrase）と禁則（line-break:strict）を明示する。
   サイドバーには入れてあったが、本文の見出しに入れ忘れていた */
h1,h2,h3,.hero h1{word-break:auto-phrase; line-break:strict; overflow-wrap:normal}
/* ⚠️ auto-phrase は対応ブラウザでしか効かない。効かない環境では日本語は
   どこでも折れるので、実機で「性癖ジャン／ル」とカタカナ語が1文字だけ
   次行に落ちた（運営者のスクリーンショット）。CSSの既定ではカタカナ語の
   途中で折ることは禁則にあたらない。
   keep-all は日本語全体の折り返しを止めて横にはみ出すので使えない。
   **語のまとまりだけを原子にする**。中身は naming.nobreak が包む。 */
.nw{white-space:nowrap}
/* 本文の折らないまとまり（naming.nobreak_body が書き出すときに付ける）。
   span にしないのは、span 向けのCSSや flex の升に影響させないため */
w-n{white-space:nowrap}
/* 見出しは行の長さをそろえる（2026-09-24 の改行点検）。pretty だと
   「見放題で見られるイラマチオ／作品」のように2字だけ次の行に落ちた */
h1,h2,h3{text-wrap-style:balance}
/* 短い文（リード・注記・作品の説明・図の説明）は、最後の行に1〜2字だけ残さない（「…ありませ／ん。」）。
   ⚠️ 長い本文・一覧には付けない。Safari の pretty は段落の全部の行を組み直すので、
      「このサイトについて」の本文が行ごとに短く切れ、右側ががたがたになった（2026-09-24 に見比べて外した）。
   ボタン・カードの題名・サイドバーの題名は、短いので行の長さをそろえる。
   ⚠️ 省略形の text-wrap は使わない。折り返しの有無（text-wrap-mode）まで wrap に戻すので、
      .rail-list span が中の .nw（span）にも当たり、「ヒ｜ロイン」と割れた。整え方だけを指定する */
.lede,.note,.why,.pick-lede,.prof-more,figcaption{text-wrap-style:pretty}
.go,.fz,.more-link a,.artlist .t,.rail-list span:not(.nw),.rail-h{text-wrap-style:balance}
h1{font-size:clamp(1.8rem,5.6vw,var(--t7)); line-height:1.22; margin:1.1rem 0 .5rem;
  letter-spacing:-.02em; font-weight:800; text-wrap-style:balance;
  padding-bottom:.5rem; border-bottom:8px solid var(--plum)}
/* 作品ページの長い題名（40字超）。見出しだけで最初の画面が埋まらないように */
h1.h1-long{font-size:clamp(1.2rem,4.6vw,1.9rem); line-height:1.35}
/* 見出しは罫線の太さで階層を出す。左の色罫を全部に付けない */
/* 見出しは3種類に分ける。全部を同じ濃色帯にすると、
   ページが均質に流れて反復感が出る（外部レビューの指摘・記事1本にh2が12個あった）。
   ─ .lead 級（ページの主役）= 濃色の帯
   ─ 通常の h2（区切り）    = 太い左罫 ＋ 余白
   ─ .sub 級（注釈的）      = 薄い色面 */
h2{font-size:var(--t4); font-weight:800; letter-spacing:.03em; line-height:1.5;
  margin:3.4rem 0 .9rem; padding:.1rem 0 .1rem .9rem;
  border-left:6px solid var(--plum); background:none; color:var(--ink)}
/* ページに主役はひとつ。そこだけ濃色帯にする */
h2.lead{padding:.55rem .9rem; border-left:0;
  background:var(--band); color:#fff}
h2.sub{font-size:var(--t3); padding:.45rem .8rem; border-left:0;
  background:var(--sink); color:var(--ink-2)}
h3{font-size:var(--t3); font-weight:700; line-height:1.55; margin:0}
p{margin:.6rem 0; max-width:40em}
/* リードも記事と作品ページで同じ見え方にする */
.lede,.pick-lede{margin:1.2rem 0 0; padding:.9rem 0 .9rem 1.4rem;
  border-left:6px solid var(--plum);
  font-size:var(--t3); line-height:1.9; color:var(--ink); max-width:40em}
.note{font-size:var(--t1); color:var(--ink-3); line-height:1.8; max-width:42em}

/* H1直下のサムネイル一覧。ファーストビューを文字だけにしないための面。
   画像はDMMの規定どおり切り抜かない（contain）。余白は帯色で埋める */
.strip{list-style:none; margin:1.4rem 0 0; padding:0; display:grid;
  grid-template-columns:repeat(5,1fr); gap:.5rem}
.strip li{margin:0; min-width:0}
.strip a{position:relative; display:block; background:var(--band);
  text-decoration:none; outline-offset:2px}
.strip img{display:block; width:100%; aspect-ratio:3/2;
  object-fit:contain; background:var(--band)}
.strip a:hover img{opacity:.82}
.strip .sn{position:absolute; z-index:1; top:0; left:0;
  min-width:1.7rem; padding:.12rem .3rem;
  background:var(--band); color:#fff;
  font-size:var(--t1); font-weight:700; line-height:1.5;
  text-align:center; font-variant-numeric:tabular-nums}
.strip li:nth-child(-n+3) .sn{background:var(--plum)}
/* ジャンルページの帯では順位ではなく見放題を印にする。
   掲載3,067作品の52%が対象なので、ここで見えると価値が伝わる */
.strip .sn-sub{background:var(--teal); font-size:var(--t0); letter-spacing:.02em}
.strip li:nth-child(-n+3) .sn-sub{background:var(--teal)}
@media (max-width:52rem){
  .strip{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:30rem){
  .strip{grid-template-columns:repeat(3,1fr); gap:.35rem}
}

/* 概況。箱で囲わず、罫線で挟んで数字を見せる */
.facts{display:flex; flex-wrap:wrap; gap:.1rem 2.6rem; margin:1.4rem 0 0;
  padding:.9rem 0; list-style:none;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--hair)}
.facts div{display:flex; align-items:baseline; gap:.4rem}
.facts b{font-size:var(--t5); font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:-.025em; line-height:1.1}
.facts small{font-size:var(--t0); color:var(--ink-3); letter-spacing:.04em}
.facts .fact-sub b{color:var(--teal)}

/* ══ 順位表：このサイトの主役。索引のノンブルのように数字を左余白に置く ══ */
.rank{list-style:none; margin:1.2rem 0 0; padding:0;
  border-top:1px solid var(--rule)}
/* ⚠️ 代表作の画像(.face)を2番目の子として差し込んだとき、列を増やし忘れて
   名前が3列目・本数が次の行に落ちて崩れた。列は 順位 / 画像 / 名前 / 本数 の4つ。 */
.rank li{display:grid; grid-template-columns:2.6rem 5.5rem 1fr auto;
  gap:.1rem .9rem; align-items:baseline;
  padding:.85rem 0 .9rem; border-bottom:1px solid var(--hair)}
.rank .face{grid-row:1/3; align-self:center}
.rank .no{grid-row:1/3; align-self:center; text-align:right;
  font-size:var(--t5); font-weight:300; font-variant-numeric:tabular-nums;
  color:var(--rule); letter-spacing:-.04em; line-height:1}
.rank li:nth-child(-n+3) .no{color:var(--plum); font-weight:400}
.rank .who{font-size:var(--t3); font-weight:700; color:var(--ink); text-decoration:none}
.rank .who:hover{color:var(--plum)}
.rank .n{font-size:var(--t2); font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--ink-2); white-space:nowrap}
/* バーは角丸にせず、細い罫として引く */
.rank .track{grid-column:3/5; height:3px; background:var(--hair); margin-top:.45rem}
.rank .fill{display:block; height:100%; background:var(--plum);
  transform-origin:left; animation:grow .55s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--d,0s)}
@keyframes grow{from{transform:scaleX(0)}}
.rank .sub{grid-column:3/5; margin-top:.45rem; font-size:var(--t0);
  color:var(--ink-3); font-variant-numeric:tabular-nums;
  display:flex; flex-wrap:wrap; gap:.15rem 1.1rem}
.rank .sub b{font-weight:700; color:var(--ink-2)}
.pro{color:var(--plum); font-weight:700}
.star{color:var(--amber); font-weight:700}

/* 13位以降 */
.more{margin:1rem 0 0}
.more summary{cursor:pointer; list-style:none; font-size:var(--t1);
  color:var(--ink-3); letter-spacing:.03em; padding:.3rem 0;
  border-bottom:1px dashed var(--rule); display:inline-block}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"＋"; margin-left:.6em; color:var(--plum)}
.more[open] summary::after{content:"－"}
.more summary:hover{color:var(--plum); border-color:var(--plum)}

/* 補足。箱にせず、左の細罫と小さい文字で「注記」として置く */
.callout{margin:1.5rem 0 0; padding:.1rem 0 .1rem 1.1rem;
  border-left:2px solid var(--plum-line);
  font-size:var(--t1); line-height:1.85; color:var(--ink-2); max-width:40em}
.callout strong{color:var(--ink); font-weight:700}

/* ══ 出演者ごとの項 ══ */
.who-sec{margin:2.2rem 0 0; padding-top:1.5rem; border-top:1px solid var(--hair)}
.who-sec:first-of-type{border-top:0; padding-top:.5rem; margin-top:1.4rem}
.who-sec h3 a{color:var(--ink); text-decoration:none}
.who-sec h3 a:hover{color:var(--plum)}
/* 数値は箱ではなく、小さな表として並べる */
.chips{display:flex; flex-wrap:wrap; gap:.1rem 1.5rem; margin:.5rem 0 .2rem;
  padding:0; list-style:none; font-size:var(--t0); color:var(--ink-3);
  letter-spacing:.02em}
.chips li{display:flex; align-items:baseline; gap:.35em}
.chips b{font-size:var(--t2); font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.chips .c-pro b{color:var(--plum)}
.chips .c-teal b{color:var(--teal)}

/* ══ 見どころ。カードにせず、見出しの左に細い色罫だけ ══ */
.hl{margin:2.4rem 0 0; padding-left:1.1rem; border-left:2px solid var(--plum)}
.hl.sub{border-left-color:var(--teal)}
.hl.new{border-left-color:var(--amber)}
.hl h3{font-size:var(--t2); letter-spacing:.02em}
.hl .why{margin:.2rem 0 0; font-size:var(--t0); color:var(--ink-3)}
.hl .grid{margin-top:.9rem}

/* ══ 作品。枠も影も付けず、画像そのものを見せる ══ */
.grid{display:grid; gap:1.5rem 1rem; padding:0; margin:1.1rem 0 0; list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* スマホは2列（2026-09-30 の第三者レビュー: 1列で性癖ページが約40画面あった。運営者の判断） */
@media (max-width:33.99rem){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem .75rem}
  .grid .yen{font-size:var(--t1)}
}
/* ⚠️ カードの高さがバラバラで、価格とボタンの位置が1枚ごとにずれていた
   （運営者のスクリーンショット）。原因はタイトルの行数が1〜4行と幅があること。
   **下の要素を底に揃え、上の可変部分は行数を決める**。
   タイトルはDOMには全文が残る（読み上げと検索のため）が、見た目は2行で止める。 */
.grid li{display:flex; flex-direction:column; min-width:0}
.grid a{display:flex; flex-direction:column; flex:1;
  text-decoration:none; color:inherit; min-width:0}
.grid .ph{
  /* DMM規約: 拡大縮小のみ可。切り抜き禁止 → cover ではなく contain */
  aspect-ratio:16/11; background:var(--sink); display:grid; place-items:center;
  overflow:hidden}
/* ⚠️ 以前は grid の中で height:100% にしていたが、%が解決されず
   縦長のサンプル画像（533×800 など）が枠より背高に描かれ、はみ出た分が
   overflow で切れていた＝実質の切り抜き。Safari では小さく下に寄った
   （運営者のスクリーンショット）。枠いっぱいに絶対配置して必ず収める */
.grid .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .2s}
.grid a:hover .ph img{opacity:.82}
/* タイトルは**DOMには全文を残す**（読み上げ・検索のため）。
   見た目だけ2行で止める。行数を決めないとカードの高さが揃わない */
.grid .t{font-size:var(--t1); line-height:1.65; margin-top:.5rem; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; word-break:auto-phrase; line-break:strict;
  min-height:calc(var(--t1) * 1.65 * 2)}
.grid a:hover .t{color:var(--plum)}
.grid .m{font-size:var(--t0); color:var(--ink-3); font-variant-numeric:tabular-nums;
  margin-top:.25rem; line-height:1.6;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;
  overflow:hidden}
/* 押すかどうかの判断に効く2つ（いくらか／買わずに見られるか）を、
   判断する場所＝カードの上に置く。以前は★と件数だけで、価格は
   作品ページまで行かないと分からなかった */
/* 価格と見放題の印は**カードの底に揃える**。margin-top:auto で押し下げる */
.grid .buy{display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .6rem;
  margin-top:auto; padding-top:.45rem}
.grid .yen{font-size:var(--t2); font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.sub-badge{color:var(--teal); font-weight:700; font-size:var(--t0)}
/* サイト内に作品ページが無く、押すとFANZAへ行くカードの印（2026-09-30。押したら急にFANZAへ出た、という指摘） */
/* 「へ」が小さい字で「∧」に見えた（2026-10-03 のQA）ので、字を少し太く */
.to-fz{margin-left:auto; font-size:var(--t0); font-weight:700; color:var(--ink-3); border:1px solid var(--hair);
  padding:0 .35rem; line-height:1.6; letter-spacing:.02em}
/* セール中の印（2026-09-29）。価格の横に「◯%OFF」。条件は /sale/ と同じ（GS.active_sales）。
   終わったら nav.js が価格ごと隠す。煽る色にはしない（サイトの主色で小さく） */
/* hidden の付いた要素は必ず消す（2026-10-03）。⚠️ 下の .sale-on・.sale-line の display が hidden に勝ち、
   セールが終わった後も「350円〜 30%OFF」が出たままだった（nav.js は hidden を付けていた。有利誤認） */
[hidden]{display:none!important}
.sale-on{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .35rem}  /* 320px で「30%OFF」がはみ出した（2026-10-03） */
.sale-badge{font-size:var(--t0); font-weight:800; color:#fff; background:var(--plum);
  padding:.05rem .35rem; letter-spacing:.02em; font-variant-numeric:tabular-nums}
/* 作品ページのボタン・単品の欄に添える「セール中（◯◯）・◯/◯まで」 */
.sale-line{display:block}
.way .sale-line{color:var(--plum); font-weight:700}
/* 見放題対象のボタンは文言も色も変える。「買う」ではなく「もう見られる」 */
.grid .fz-sub{background:var(--teal)}
.grid .fz-sub:hover{background:#08463E}
/* カードの見放題印は表紙の左上。.on-img の位置指定を一覧でも効かせる */
.grid .ph{position:relative}

/* ══ 単品 vs 見放題の対比（作品ページ） ══════════════════════
   「買う」以外の選択肢があることを、価格表の中ではなく導線の位置で示す。
   月額は継続課金なので、単品より先に置く */
.ways{display:grid; gap:.8rem; margin:1.4rem 0 .6rem}
.way{display:grid; gap:.25rem; padding:1rem 1.1rem; background:var(--sink);
  border-left:6px solid var(--rule)}
.way-sub{background:#EAF5F3; border-left-color:var(--teal)}
.way .wk{font-size:var(--t0); color:var(--ink-2); letter-spacing:.04em}
.way .wv{font-size:var(--t5); font-weight:800; line-height:1.25;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.way-sub .wv{color:var(--teal)}
.way .wn{font-size:var(--t0); color:var(--ink-3)}
.way .go{margin-top:.7rem; max-width:none}
/* 単品側は塗らない。主役は月額のほう */
.go-line{background:none; color:var(--plum); border:2px solid var(--plum)}
.go-line:hover{background:var(--plum); color:#fff}
@media (min-width:46rem){ .ways{grid-template-columns:1fr 1fr} }

/* ══ 見放題ハブ（/subscription/） ════════════════════════════
   コース別の本数。数字を主役にするが、**合計や単品換算は出さない**
   （掲載作品を全部買う人はいないので、意味のない大きい数字になる） */
.floors{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.6rem;
  grid-template-columns:1fr}
.floors li{display:flex; align-items:baseline; gap:.5rem; padding:.9rem 1.1rem;
  background:#EAF5F3; border-left:6px solid var(--teal)}
.floors .fn{flex:1; font-weight:700; color:var(--ink)}
.floors .fv{font-size:var(--t5); font-weight:800; color:var(--teal);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.floors .fu{font-size:var(--t0); color:var(--ink-2)}
@media (min-width:40rem){ .floors{grid-template-columns:repeat(3,1fr)} }
/* 女優ページのチップ。見放題は緑（色の役割を守る） */
.chips .c-sub{color:var(--teal); border-color:var(--teal)}
/* 見放題の送客ボタン。色の役割どおり緑にする */
.go-sub{background:var(--teal)}
.go-sub:hover{background:#08463E}

/* ══ 記事の中に差し込む出演者・ジャンル ═══════════════════════
   運営者は [[actress:名前]] [[genre:名前]] と1行書くだけでよく、
   プロフィールも作品数もDBから入る。手で書いた数字が古くなる事故が起きない。
   ⚠️ 人物の写真は使えないので、サンプル画像（許諾素材②③）で代替する */
.md-act{display:grid; gap:.7rem; margin:1.8rem 0; padding:1rem;
  background:var(--sink); border-left:6px solid var(--plum)}
.md-act .ph{display:block; background:var(--paper)}
.md-act .ph img{width:100%; aspect-ratio:3/2; object-fit:contain}
.md-act-b{display:grid; gap:.3rem; align-content:start}
.md-act .nm{font-size:var(--t4); font-weight:800; line-height:1.4}
.md-act .nm a{color:var(--ink); text-decoration:none}
.md-act .nm a:hover{color:var(--plum)}
.md-act .n{font-size:var(--t1); color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.md-act .prof-items{margin-top:.2rem}
@media (min-width:46rem){
  .md-act{grid-template-columns:1fr 1fr minmax(0,1.4fr); align-items:start}
}
/* ジャンルへの1行リンク。本文の流れを止めすぎない大きさに */
.md-genre{margin:1.4rem 0; max-width:40em}
.md-genre a{display:flex; align-items:baseline; gap:.6rem;
  padding:.8rem 1rem; background:var(--plum-soft);
  border-left:6px solid var(--plum); color:var(--ink);
  font-weight:700; text-decoration:none}
.md-genre a:hover{background:var(--plum); color:#fff}
.md-genre b{margin-left:auto; font-size:var(--t1); color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.md-genre a:hover b{color:#fff}
/* 下線つきのテキストリンクで、押せると分からなかった。塗りのボタンにする。
   末尾の「↗」は「やらないこと」に挙げた既定値なので消した */
/* ⚠️ このボタンも <a> なので、上の .grid a{flex:1} が当たっていた。余った高さを
   カード本体と分け合い、女優名の行が無いカードだけ価格とボタンが19px上にずれた
   （運営者のPCの写真。2026-09-30）。flex:none で伸ばさず、本体だけを底まで伸ばす */
.grid .fz{flex:none; margin-top:.5rem; align-self:stretch; text-align:center;
  font-size:var(--t0); font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--plum); text-decoration:none;
  padding:.42rem .6rem; transition:background .15s ease}
.grid .fz:hover{background:var(--plum-deep)}

/* 関連ジャンル。ピルを止め、索引の語列のように並べる */
.tags{display:flex; flex-wrap:wrap; gap:.3rem 1.4rem; padding:0; margin:1rem 0 0;
  list-style:none; font-size:var(--t2)}
.tags a{color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--hair); padding-bottom:.1rem}
.tags a:hover{color:var(--plum); border-color:var(--plum)}
.tags .x{font-size:var(--t0); color:var(--ink-3); margin-left:.4em;
  font-variant-numeric:tabular-nums}

/* ⚠️ .spec は**作品ページの表**と**記事の箇条書き**で名前が衝突していた。
   どちらも `.spec`（0,1,0）だったため、後ろにある記事側（下の ul.spec）が
   この margin-top:.9rem を打ち消し、作品ページの表が見出しに詰まっていた。
   要素名まで書いて（table.spec / ul.spec）互いに当たらないようにしてある。
   ⚠️ 片方だけ直すと元に戻る。必ず両方そろえること（L-052 と同じ型） */
table.spec{width:100%; border-collapse:collapse; margin-top:.9rem; font-size:var(--t2);
  table-layout:fixed}  /* 320px で右に12pxはみ出していた（2026-10-03 のQA） */
table.spec td{overflow-wrap:anywhere}
table.spec th,table.spec td{text-align:left; padding:.65rem .8rem .65rem 0;
  border-bottom:1px solid var(--hair); vertical-align:top}
table.spec th{width:8.5em; color:var(--ink-3); font-weight:400; white-space:nowrap;
  font-size:var(--t1)}
table.spec td{font-variant-numeric:tabular-nums}

/* 送客。1つだけ強い要素を置く */
/* 導線はサイト全体で同じ見え方にする。記事だけ塗りで作品ページが黒い枠、
   という不統一を解消した */
.go{display:block; width:100%; max-width:34rem; margin:1.4rem 0 .2rem;
  padding:1.05rem 1rem; background:var(--plum); color:#fff; text-align:center;
  font-weight:800; font-size:var(--t3); letter-spacing:.06em;
  text-decoration:none; transition:background .16s}
.go:hover{background:var(--plum-deep); color:#fff}
/* ⚠️ ボタンに添える補足（価格など）が inline のままで、
   「見放題で見る単品なら500円」「FANZAでこの作品を見る2,180円」と
   文がくっついて読めなくなっていた（運営者の実機スクリーンショット）。
   .go-big には display:block があったが .go には無かった。
   価格は主役ではないので小さく、下に落とす */
.go small{display:block; margin-top:.3rem; font-size:var(--t0);
  font-weight:400; letter-spacing:.02em; opacity:.92}

footer{border-top:2px solid var(--ink); margin-top:4.5rem; padding:1.8rem 0 4rem;
  font-size:var(--t1); color:var(--ink-3)}
footer a{color:var(--ink-2); text-decoration-color:var(--hair)}
footer nav{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin-bottom:1rem}
.credit{margin-top:1.2rem; font-size:var(--t0)}

/* ---- 作品ページの、画面下の購入ボタン（2026-09-29） ------------------ */
/* 上の購入ボタンを通り過ぎたら出す（nav.js）。下まで読んでも戻らずに押せるように。
   幅の広い画面は、購入ボタンが右の列に見えているので出さない */
.buybar{position:fixed; z-index:59; left:0; right:0; bottom:0; margin:0;
  padding:.5rem .7rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.96); border-top:1px solid var(--rule);
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
  transform:translateY(110%); transition:transform .2s ease}
.buybar.on{transform:none}
.buybar .go{margin:0; max-width:none; padding:.75rem 1rem; font-size:var(--t2)}
.buybar .go small{margin-top:.15rem}
/* 購入ボタンが出ている間は、右下の「先頭へ・さがす・ホーム」を隠す。
   ⚠️ 以前は上に逃がしていたが、2段に積み重なって画面の約4分の1をふさいだ（2026-10-03 のQA）。
   購入バーが引っ込めば（サンプル画像の後のボタンが見えている間など）また出る */
body:has(.buybar.on) .fab{opacity:0; pointer-events:none}
body:has(.buybar) footer{padding-bottom:calc(10rem + env(safe-area-inset-bottom, 0px))}
@media (min-width:80rem){ .buybar{display:none} }

/* ---- 画面下に固定する操作ボタン ---------------------------------- */
/* モバイルではサイドバー（＝検索欄）が本文の下に回るため、実測で
   /genre/巨乳/ は検索欄まで25,588px＝29画面あった。どこからでも1タップで届かせる。
   縦積みにすると10rem超の帯がページ端を覆うので、横1列にして高さを抑える。
   footer の下余白（下記）はこのボタンぶんを空けてある */
.fab{position:fixed; z-index:60; right:.7rem; margin:0; padding:0;
  bottom:calc(.7rem + env(safe-area-inset-bottom, 0px));
  display:flex; gap:.3rem;
  opacity:0; transform:translateY(.5rem); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease}
.fab.on{opacity:1; transform:none; pointer-events:auto}
.fab button,.fab a{display:flex; align-items:center; justify-content:center;
  min-width:3.4rem; min-height:2.9rem; padding:0 .5rem;
  font:inherit; font-size:var(--t0); font-weight:700; line-height:1;
  color:var(--ink-2); background:var(--paper); border:1px solid var(--rule);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  box-shadow:0 1px 5px rgba(0,0,0,.12)}
.fab button:hover,.fab a:hover{color:#fff; background:var(--ink);
  border-color:var(--ink)}
/* 探す口だけは塗りにする。ここへ来させるためのボタン列なので、主役を1つ作る */
.fab .f-q{color:#fff; background:var(--plum); border-color:var(--plum)}
.fab .f-q:hover{background:var(--plum-deep); border-color:var(--plum-deep)}
/* ボタンが本文の最下部を隠さないよう、フッターの下余白で逃がす
   （ボタンは 2.9rem + 下0.7rem = 3.6rem。footer の padding-bottom はそれ以上） */
footer{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom, 0px))}

/* ══ 年齢確認 ════════════════════════════════════════════════
   サイトに最初に出る画面。素の白地に文字を置いただけでは、
   どこのサイトに来たのか分からず、トンマナも伝わらない。
   ロゴと同じ組み方（色帯＋事典の文字組み）を持ってくる。
   ⚠️ 見え方だけを覆う方式は変えない。HTMLは完全に配信する
   （サーバー側でリダイレクトすると Googlebot が本文を取れない）。 */
#age{position:fixed; inset:0; z-index:99; display:none;
  place-items:center; padding:1.4rem; text-align:center;
  background:var(--paper)}
#age.on{display:grid; animation:fade .2s ease both}
/* <head> のスクリプトが付ける印。スクリプトの読み込みを待たず、最初の描画から覆う。
   hidden 属性（UAの display:none）より作者側の指定が勝つ。
   裏のページはスクロールさせない */
html.age-pending #age{display:grid}
html.age-pending, html.age-pending body{overflow:hidden}
@keyframes fade{from{opacity:0}}
/* 上下にサイトのアクセントを1本ずつ。白一色にしない */
#age::before,#age::after{content:""; position:absolute; left:0; right:0;
  height:.5rem; background:var(--plum)}
#age::before{top:0}
#age::after{bottom:0}

.age-card{width:min(30rem,100%); display:grid; justify-items:center;
  gap:.2rem; padding:2rem 1.4rem; background:var(--paper)}
/* ロゴはヘッダーと同じ組み。左の色帯を少し太くして主役にする */
.age-brand{display:inline-flex; align-items:center; gap:.6rem;
  margin-bottom:1.6rem}
/* ⚠️ ここで文字を var(--t5) に拡大していたが、**大きすぎた**（運営者の指摘）。
   ロゴはヘッダーと同じ寸法のまま置く。主役は下の問いかけのほう */

.age-lead{margin:0; font-size:var(--t4); font-weight:800; line-height:1.6;
  letter-spacing:.01em; word-break:auto-phrase; line-break:strict}
.age-sub{margin:.7rem 0 0; font-size:var(--t2); color:var(--ink-2);
  line-height:1.8}
.age-q{margin:1.4rem 0 0; font-size:var(--t3); font-weight:700;
  padding-top:1.2rem; border-top:1px solid var(--hair); width:100%}

#age .row{display:grid; gap:.7rem; width:100%; margin-top:1.2rem}
#age button,#age a{display:block; width:100%; padding:1rem 1.2rem;
  font:inherit; font-size:var(--t3); font-weight:800; letter-spacing:.04em;
  cursor:pointer; text-decoration:none; text-align:center;
  border:2px solid var(--plum); background:var(--plum); color:#fff;
  transition:background .16s ease, color .16s ease}
#age button:hover{background:var(--plum-deep); border-color:var(--plum-deep)}
/* 退出のほうは塗らない。選ばせたいのは「はい」だが、
   押しにくくして誤操作を誘うことはしない（同じ大きさを保つ） */
#age a{background:none; color:var(--ink-2); border-color:var(--hair);
  font-weight:700}
#age a:hover{border-color:var(--rule); color:var(--ink)}

.age-note{margin:1.4rem 0 0; font-size:var(--t0); color:var(--ink-3);
  line-height:1.9}
@media (min-width:34rem){
  .age-card{padding:2.4rem 2rem}
  #age .row{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
@media (min-width:46rem){
  .grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  /* ⚠️ ここは .rank li の**2つ目の定義**。150行目より後ろにあるので勝つ。
     画像の列を足したときここを直し忘れ、名前と本数が崩れた（L-052と同じ型で3回目）。
     列数は必ず両方そろえる */
  .rank li{grid-template-columns:var(--gut) 5.5rem 1fr auto}
  .rank .no{font-size:var(--t6)}
}

/* ══════════════════════════════════════════════════════════
   ピックアップ記事 /pick/
   ムック本のベスト10特集。順位が主役。
   ══════════════════════════════════════════════════════════ */

.picks{list-style:none; margin:2.4rem 0 0; padding:0}
.pick{margin:0 0 1rem; padding:1.8rem 1.4rem 2rem; background:var(--paper)}
/* 偶数番を薄い面にして、10本が塊として見えるようにする */
.pick:nth-child(even){background:var(--sink); box-shadow:inset 0 0 0 1px var(--hair)}

/* ── 順位と作品名。ここが誌面の主役 ── */
/* 帯の中に順位と作品名を並べる。全体の背景は上の h2 規則（--band）を使う。
   長いタイトルで帯が縦に伸びるので、番号は上の行に合わせて置く */
/* 作品の見出しは順位バッジが主役。帯で囲わず、番号と作品名を並べるだけにする。
   10本すべてを黒帯にすると、そこが壁になってページのリズムが消える */
.pick h2{display:grid; grid-template-columns:auto 1fr; gap:1rem;
  align-items:start; margin:0 0 1.1rem; padding:0; border:0;
  background:none; color:var(--ink);
  font-size:var(--t4); line-height:1.45; letter-spacing:0}
/* FANZAのタイトルは長いが省略しない。帯が縦に伸びるぶんは行間を詰めて抑える */
.pick h2 .t{line-height:1.42}
.pn{display:grid; place-items:center; width:3.6rem; height:3.6rem;
  font-size:var(--t6); font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.05em;
  border:3px solid var(--ink); color:var(--ink); background:var(--paper)}
/* 1位は塗り、2〜3位は太枠。差をつけないと順位が伝わらない */
.pick:nth-child(1) .pn{background:var(--plum); border-color:var(--plum);
  color:#fff; width:4.2rem; height:4.2rem; font-size:var(--t7)}
.pick:nth-child(2) .pn,
.pick:nth-child(3) .pn{border-color:var(--plum); color:var(--plum)}
/* 登場は1回だけ。全セクションに付けると機械的に見える */
.pick:nth-child(-n+3) .pn{animation:pop .4s cubic-bezier(.2,1.2,.3,1) both}
.pick:nth-child(2) .pn{animation-delay:.06s}
.pick:nth-child(3) .pn{animation-delay:.12s}
@keyframes pop{from{transform:scale(.72); opacity:0}}
@media (prefers-reduced-motion:reduce){ .pn{animation:none !important} }

.pick-head{display:grid; grid-template-columns:minmax(0,22rem) 1fr; gap:1.6rem}
/* 1位だけ表紙を特大にして、ページに主役を作る */
.pick:nth-child(1) .pick-head{grid-template-columns:minmax(0,30rem) 1fr}
.cover{display:block}
/* DMM画像利用ルール: 拡大・縮小のみ可。切り抜きは不可。
   hover で transform:scale + overflow:hidden をやると切り抜きになるので使わない */
.cover img{width:100%; object-fit:contain}
.cover:hover img{outline:4px solid var(--plum); outline-offset:0}

/* ── バッジ。文章に埋もれていた情報を面に出す ── */
.badges{display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .8rem; padding:0;
  list-style:none}
.badges li{font-size:var(--t0); font-weight:700; letter-spacing:.04em;
  padding:.28rem .7rem; color:#fff; background:var(--ink-2)}
.badges .b-sub{background:var(--teal)}
.badges .b-soon{background:var(--amber)}
.badges .b-debut{background:var(--plum)}
.badges .b-split{background:var(--amber)}
.badges .b-series{background:var(--ink)}

/* 記事(/pick/)側の箇条書き。上の table.spec と同名だったので ul を明示する */
ul.spec{list-style:none; margin:0; padding:0; font-size:var(--t1); color:var(--ink-2)}
ul.spec li{display:grid; grid-template-columns:4.6rem 1fr; gap:.6rem;
  padding:.22rem 0; border-bottom:1px solid var(--hair)}
ul.spec li:last-child{border-bottom:0}
ul.spec span{color:var(--ink-3); font-size:var(--t0); letter-spacing:.04em}
/* 値の側に span を使う行（評価・セール。2026-10-25）は、見出しの灰色・小さい字を当てない */
ul.spec .sv,ul.spec .sale-on,ul.spec .sale-on .nw{color:var(--ink-2); font-size:var(--t1); letter-spacing:0}
ul.spec .sale-badge{color:#fff; font-size:var(--t0)}
ul.spec .star{color:var(--amber); font-size:inherit; letter-spacing:0}

.pick .why{margin:.9rem 0 0; font-size:var(--t2); line-height:1.95; color:var(--ink)}

/* サンプル画像。
   定義が2か所にあり、後ろが前を部分的に上書きしていた（実際の値が読めない）。
   1か所にまとめてある。

   記事（/pick/）はグリッド。10作品×12枚を1列にすると1ページ5万pxになる。
   作品ページ（/item/）だけ1列大判にする。 */
.shots{list-style:none; display:grid; gap:.5rem; padding:0; margin:1.1rem 0 0;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.shots img{width:100%; aspect-ratio:3/2; object-fit:contain; background:var(--sink)}
.shots a{display:block}
.shots a:hover img{outline:3px solid var(--plum); outline-offset:-3px}

/* 作品ページのサンプル画像は1列・大判。
   元画像は800×534pxなので、それ以上には引き伸ばさない（粗くなるだけ）。
   DMMは拡大・縮小のみ許容・切り抜き禁止なので object-fit:contain は維持する */
.shots-big{grid-template-columns:1fr; gap:1rem; max-width:800px}
/* 10枚中9枚は 800×534 だが、1枚だけ縦長（534×800）が混ざる。
   width:100% にすると縦長のほうを 534→800 に引き伸ばして粗くなる。
   width:auto なら、どの画像も元のサイズを超えない（DMMは拡大も許容しているが、
   粗くする理由がない）。幅が揃わないぶんは中央に寄せる */
.shots-big img{width:auto; max-width:100%; height:auto; aspect-ratio:auto;
  margin-inline:auto}
/* スマホは2列（2026-09-30）。1枚ずつ幅いっぱいに20枚並び、作品の概要まで約10画面あった。
   縮小のみ・切り抜きなし（contain）は保つ */
@media (max-width:33.99rem){
  .shots-big{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem}
  .shots-big img{width:100%; aspect-ratio:3/2; object-fit:contain; background:var(--sink)}
}

/* ── 導線。塗りで大きく ── */
.pick .go{max-width:none; margin-top:1.3rem}

@media (max-width:640px){
  .pick{padding:1.3rem 1rem 1.6rem}
  /* 1位は .pick:nth-child(1) .pick-head（詳細度 0,3,0）で30remを指定している。
     .pick-head 単独（0,1,0）では**メディアクエリの中でも負ける**ため、
     1位だけ左カラムが480pxを占め、右が数文字幅に潰れて縦に伸びていた。
     同じ詳細度で上書きする。 */
  .pick-head,
  .pick:nth-child(1) .pick-head{grid-template-columns:1fr}
  .cover{max-width:15rem}
  .pick h2{grid-template-columns:2.6rem 1fr; gap:.7rem; font-size:var(--t3)}
  .pn{width:2.6rem; height:2.6rem; font-size:var(--t4); border-width:2px}
  .pick:nth-child(1) .pn{width:3rem; height:3rem; font-size:var(--t5)}
  /* .shots-big（1列大判）と同じ詳細度なので、ここが後ろにある以上こちらが勝つ。
     作品ページのサンプルが 800px → 159px に潰れていた。1位の pick-head と同じ型の事故 */
  .shots:not(.shots-big){grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}


/* 記事の一覧。作品カードとは別の見え方にする（記事は横組み・大きめ） */
.artlist{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.2rem}
.artlist a{display:grid; grid-template-columns:12rem 1fr; gap:.15rem 1.1rem;
  grid-template-areas:"ph t" "ph m"; align-content:center;
  text-decoration:none; color:inherit;
  padding:.7rem 0; border-bottom:1px solid var(--hair)}
.artlist .ph{grid-area:ph; align-self:center}
.artlist .ph img{width:100%; aspect-ratio:3/2; object-fit:contain; background:var(--sink)}
.artlist .t{grid-area:t; align-self:end;
  font-size:var(--t3); font-weight:700; color:var(--ink); line-height:1.55}
.artlist .m{grid-area:m; align-self:start; font-size:var(--t0); color:var(--ink-3)}
.artlist a:hover .t{color:var(--plum)}
@media (max-width:640px){ .artlist a{grid-template-columns:7.5rem 1fr; gap:.8rem} }
/* 表紙の無い記事（運営者の記事）。画像の列を作らず1列にする。
   ⚠️ .artlist a の2列の定義より詳細度を上げる（li のクラス＋a）ことで、画面幅の指定にも勝つ */
.artlist li.artlist-noimg a{grid-template-columns:1fr; grid-template-areas:"t" "m"}

/* ══════════════════════════════════════════════════════════
   評価の星
   数値だけの「★4.27」では強さが伝わらないので5つ星の図にする。
   半端な星は幅で表す（塗りの星を重ねて width:% で切る）。
   ※ AggregateRating の構造化データは出力しない（Google・DMM双方の規約違反）
   ══════════════════════════════════════════════════════════ */
.rate{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap}
.stars{position:relative; display:inline-block; font-size:1.15em; line-height:1;
  color:var(--hair); letter-spacing:.06em; white-space:nowrap}
.stars::before{content:"★★★★★"}
.stars i{position:absolute; inset:0 auto 0 0; overflow:hidden;
  color:var(--amber); font-style:normal; white-space:nowrap}
.stars i::before{content:"★★★★★"}
.rate .v{font-size:var(--t4); font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums}
.rate .n{font-size:var(--t1); color:var(--ink-3)}

/* 作品ページの頭。評価とバッジをひとまとまりに */
.item-head{margin:1.1rem 0 0; padding:1rem 1.2rem; background:var(--plum-soft);
  border-left:6px solid var(--plum)}
.item-head .badges{margin:.7rem 0 0}

/* 10本をまとめて見た比較。1作品ずつの事実とは別の段として見せる */
.money{margin:.9rem 0 0; padding:.85rem 1.1rem; background:var(--plum-soft);
  border-left:6px solid var(--teal); font-size:var(--t2); line-height:1.9;
  color:var(--ink); max-width:44em}
.cmp{margin:.5rem 0 0; font-size:var(--t2); line-height:1.9; font-weight:700;
  color:var(--teal)}

/* ══════════════════════════════════════════════════════════
   サイドバー（回遊の導線）
   1920pxの画面で左右に384pxずつ余っていた。競合（jp-loveless /
   oppai-doga）は同じ場所を絞り込み・人気・カテゴリに使っている。
   外部のクリック広告はDMM API規約 第9条1項(4)で不可なので置かない。
   ══════════════════════════════════════════════════════════ */
.shell{display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:2.6rem;
  align-items:start; min-width:0}
/* グリッドの子は既定で min-width:auto。中身より縮まず横にはみ出すので明示的に0にする */
.shell > *{min-width:0}
/* sticky にしていたが、サイドバーが 2,122px まで伸びた時点で
   画面(952px)からはみ出した下半分（タグ・見放題）に**永久に到達できなく**なっていた。
   本文のほうが長いので、一緒に流したほうが全部読める。競合2社も流している。 */
.rail{display:grid; gap:1.1rem; min-width:0; align-self:start}
.rail .card{min-width:0}
.rail-list a,.rail-tags a{min-width:0}
/* 目次の作品名が `叶愛 30 / 歳` のように語の途中で折り返していた。
   overflow-wrap:anywhere は「どこでも折る」指定なので、これが原因。
   auto-phrase は日本語を文節で折る（Chrome 119+ / Safari 17.4+）。
   未対応のブラウザ向けには naming.toc_label() で先に短くしてある */
.rail-list span,.toc a{word-break:auto-phrase; line-break:strict;
  overflow-wrap:normal}
.card{background:var(--sink); padding:1rem 1.1rem 1.2rem;
  border-top:4px solid var(--plum)}
.card-sub{border-top-color:var(--teal)}
.rail-h{font-size:var(--t2); font-weight:800; letter-spacing:.03em;
  margin:0 0 .7rem; padding:0; background:none; border:0; color:var(--ink)}

.toc{margin:0; padding:0 0 0 1.6rem; font-size:var(--t1); line-height:1.6}
.toc li{margin:.42rem 0}
.toc a{display:block; color:var(--ink-2); text-decoration:none}
.toc a:hover .tt{color:var(--plum); text-decoration:underline}
.toc .tt{display:block}
.toc .tw{display:block; font-size:var(--t0); color:var(--ink-3); margin-top:.1rem}

.rail-list{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.rail-list a{display:grid; grid-template-columns:4.6rem 1fr; gap:.7rem;
  align-items:center; text-decoration:none; color:var(--ink)}
.rail-list .ph{display:block; width:100%; aspect-ratio:3/2; background:var(--sink)}
.rail-list img{width:100%; height:100%; object-fit:contain}
.rail-list span{font-size:var(--t0); line-height:1.6}
.rail-list a:hover span{color:var(--plum)}

/* .rail-tags（1行1件の一覧）は廃止した。69件で2,698px＝サイドバーの62%を
   占めていた。チップ（.tchips）に一本化し、作品数も出さない */

@media (max-width:900px){
  /* サイドバーは本文の下へ。消さずに回す（導線を失わないため） */
  .shell{grid-template-columns:1fr; gap:2rem}
  .rail{position:static; grid-template-columns:1fr 1fr; gap:1rem}
}
@media (max-width:560px){ .rail{grid-template-columns:1fr} }


/* ══ 装飾 ══ */
/* 1〜3位に王冠相当の印。jp-loveless が採用している見せ方 */
.pick:nth-child(-n+3) .pn::after{content:"";
  position:absolute; left:50%; top:-.62rem; transform:translateX(-50%);
  width:1.15rem; height:.62rem; background:var(--plum);
  clip-path:polygon(0 100%,0 18%,25% 52%,50% 0,75% 52%,100% 18%,100% 100%)}
.pick:nth-child(1) .pn::after{background:#C9A227}
.pick:nth-child(2) .pn::after{background:#9AA0A6}
.pick:nth-child(3) .pn::after{background:#A9713B}
.pn{position:relative}

/* 見放題は画像の上に重ねる。表の中に埋もれると気づかれない。
   ⚠️ 以前は `.cover .on-img` と親を限定していたため、トップページ
   （.cover を使っていない）では**背景が付かず白文字が画像に溶けて
   コントラスト 1.05:1** になっていた。親に依存しない形にする。 */
.cover,.pn,.deck .ph,.strip a{position:relative}
.on-img{position:absolute; left:0; top:0; z-index:1;
  background:var(--teal); color:#fff; font-size:var(--t0); font-weight:700;
  letter-spacing:.04em; padding:.3rem .6rem; line-height:1.5}

/* セクションの区切り */
.picks > li + li{position:relative}
.picks > li + li::before{content:""; position:absolute; left:50%; top:-.5rem;
  transform:translateX(-50%); width:2.4rem; height:2px; background:var(--plum-line)}


/* ---- サイト内検索 ------------------------------------------------ */
.card-q{border-top-color:var(--teal)}
#q{width:100%; box-sizing:border-box; font:inherit; font-size:var(--t2);
  padding:.55rem .7rem; border:2px solid var(--ink); background:var(--paper);
  color:var(--ink); border-radius:0; -webkit-appearance:none}
#q::placeholder{color:var(--ink-3)}
#q:focus{outline:none; border-color:var(--plum)}
#qr:not(:empty){margin-top:.7rem; border-top:1px solid var(--plum-line);
  padding-top:.6rem}
.qh{font-size:var(--t0); font-weight:700; color:var(--ink-3);
  letter-spacing:.06em; margin:.5rem 0 .25rem}
.qh:first-child{margin-top:0}
.qlist{list-style:none; margin:0 0 .3rem; padding:0}
.qlist a{display:flex; justify-content:space-between; align-items:baseline;
  gap:.5rem; padding:.26rem 0; font-size:var(--t1); color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--plum-line)}
.qlist a:hover{color:var(--plum)}
.qn{min-width:0; word-break:auto-phrase}
.qc{flex:none; font-size:var(--t0); color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.qx{margin-left:.45em; padding:0 .3em; background:var(--ink-3); color:#fff;
  font-size:.86em; font-style:normal; letter-spacing:.02em}
.qmsg{font-size:var(--t0); color:var(--ink-3); line-height:1.7; margin:0}
/* 検索結果の品番。作品名より小さく前に置く */
.qhb{display:block; font-size:.9em; font-weight:800; color:var(--plum);
  letter-spacing:.04em}

/* ---- タグから探す ------------------------------------------------ */
.tgh{font-size:var(--t0); font-weight:700; color:var(--ink-3);
  letter-spacing:.06em; margin:.9rem 0 .35rem}
.tgh:first-of-type{margin-top:.2rem}
.tchips{list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.3rem}
.tchips li{min-width:0}
.tchips a{display:inline-flex; align-items:baseline; gap:.3em;
  padding:.2rem .5rem; background:var(--paper);
  border:1px solid var(--plum-line); font-size:var(--t0);
  color:var(--ink-2); text-decoration:none; white-space:nowrap}
.tchips a:hover{border-color:var(--plum); color:var(--plum)}
.tchips b{font-weight:700; color:var(--ink-3);
  font-variant-numeric:tabular-nums; font-size:.92em}
.tchips i{font-style:normal; font-size:.8em; color:var(--ink-3);
  letter-spacing:.02em}

/* 本文側の索引（/genre/ ・/item/ ・サイトマップ）で使うチップ。
   サイドバー用の寸法のままだと本文では小さすぎるので、字と余白だけ上げる。
   ⚠️ .tchips a と同じ詳細度(0,1,1)では順序頼みになるので、
   クラスを2つ重ねて(0,2,1)にしておく（L-052/L-058 と同じ型の事故を避ける） */
.tchips.chips-idx{gap:.4rem}
.tchips.chips-idx a{font-size:var(--t1); padding:.3rem .65rem; color:var(--ink)}
/* 作品索引 /item/。ジャンルごとに1行の開閉。500件を1枚に並べると
   スマホで32画面あった。サイト内検索（#q）と同じ見た目の入力欄で絞り込む */
.idx-q{margin:1rem 0 1.2rem}
#idx-q{width:100%; box-sizing:border-box; font:inherit; font-size:var(--t2);
  padding:.55rem .7rem; border:2px solid var(--ink); background:var(--paper);
  color:var(--ink); border-radius:0; -webkit-appearance:none}
#idx-q::placeholder{color:var(--ink-3)}
#idx-q:focus{outline:none; border-color:var(--plum)}
#idx-hit{display:block; margin-top:.4rem; font-size:var(--t0); color:var(--ink-3)}
.idx-g{border-bottom:1px solid var(--hair)}
.idx-g:first-of-type{border-top:1px solid var(--hair)}
.idx-g summary{cursor:pointer; list-style:none; display:flex; align-items:baseline;
  min-height:2.75rem; padding:.55rem 0; font-size:var(--t2); font-weight:700;
  color:var(--ink); box-sizing:border-box}
.idx-g summary::-webkit-details-marker{display:none}
.idx-g summary::after{content:"＋"; margin-left:auto; color:var(--plum); font-weight:400}
.idx-g[open] summary::after{content:"－"}
.idx-g summary:hover{color:var(--plum)}
.idx-g .tchips{padding:0 0 1rem}
/* 節ごとの件数。見出しに数字を埋め込まず、小さく添える */
.cnt{margin-left:.6em; font-size:var(--t0); font-weight:400; color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.tg{margin:.9rem 0 0}
.tg summary{font-size:var(--t0); font-weight:700; color:var(--ink-3);
  letter-spacing:.06em; cursor:pointer; padding:.15rem 0}
.tg summary:hover{color:var(--plum)}
.tg[open] summary{margin-bottom:.4rem}

/* ---- 配信形式ごとの価格 ------------------------------------------ */
.prices{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:.3rem .9rem}
.prices li{display:flex; align-items:baseline; gap:.4em}
.prices span{font-size:var(--t0); color:var(--ink-3)}
.prices b{font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink)}

/* ---- 出演者のプロフィール ----------------------------------------
   写真は置かない。DMMが許諾している画像は商品メイン画像とサンプル画像の
   3種のみで、人物写真は含まれていない（docs/COMPLIANCE.md 1-3）。 */
.prof{margin:1.1rem 0 0; padding:1rem 1.1rem 1.1rem; background:var(--sink);
  border-top:3px solid var(--teal)}
.prof h3{margin:0; font-size:var(--t3); font-weight:800; display:flex;
  align-items:baseline; gap:.6em; flex-wrap:wrap}
/* 名前と同じ行に並べると読みにくいので改行して下に置く */
.prof h3{display:block}
.prof .ruby{display:block; font-size:var(--t0); font-weight:400;
  color:var(--ink-3); letter-spacing:.04em; margin-top:.15rem}
.prof-items{list-style:none; margin:.7rem 0 0; padding:0; display:flex;
  flex-wrap:wrap; gap:.35rem 1.4rem}
.prof-items li{display:flex; align-items:baseline; gap:.45em; min-width:0}
.prof-items span{font-size:var(--t0); color:var(--ink-3); letter-spacing:.04em}
.prof-items b{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.prof-more{margin:.8rem 0 0; font-size:var(--t1); color:var(--ink-2);
  line-height:1.8}

/* 作品ページの表紙。1画面目に画像が1枚も無かったので頭に置く */
.item-cover{position:relative; display:block; margin:1.2rem 0 0;
  max-width:800px; background:var(--band)}
/* ⚠️ aspect-ratio が無いと、読み込み前の高さが0で、確定した瞬間に
   本文が飛ぶ（CLS）。作品ページ151枚のLCP要素そのものなので効く。
   object-fit:contain のままなので切り抜きは起きない（DMM規約） */
.cover-buy{display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin:.6rem 0 0}
.cover-buy .cb-p{display:grid; font-weight:800; font-size:var(--t3); line-height:1.35; font-variant-numeric:tabular-nums}
.cover-buy .cb-p small{font-size:var(--t0); font-weight:400; color:var(--ink-3)}
.cover-buy .cb-p .cb-sub{color:var(--teal); font-weight:700}
.cover-buy .go{margin:0; flex:none; width:auto; max-width:none; padding:.7rem 1.2rem; font-size:var(--t2)}
@media (min-width:80rem){ .cover-buy{display:none} }
.item-cover img{display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:contain}
.item-cover:hover img{opacity:.9}

/* ---- 見出しをもっと強く ------------------------------------------
   3階層あるが差が弱く、どれも似て見えていた。
   罫 → 帯 → パネル の差をはっきりつける。 */
/* サイドバーのカード見出し(.rail-h)も h2 なので、除外しないと
   罫が文字に重なる（実際に重なった） */
h2:not(.rail-h){position:relative; padding-left:1rem}
h2:not(.rail-h)::before{content:""; position:absolute; left:0; top:.12em;
  bottom:.12em; width:.42rem; background:var(--plum)}
h2.lead{padding-left:1.1rem; padding-right:1rem}
/* ⚠️ ここは --amber（配信予定・賛否）と --teal（見放題）を使っていたが、
   このCSSの冒頭で「色に役割を持たせる」と決めた約束を、装飾のために
   破っていた。濃色帯の上に琥珀の罫が出ると警告のように見える。
   階層は**太さと位置**で出し、色はプラム1色に戻す。 */
h2.lead::before{background:var(--plum); width:.6rem; left:.28rem}
h2.sub::before{background:var(--rule); width:.3rem}

/* セクションの区切り帯。ページの骨格を見せる */
.band{height:.42rem; margin:2.4rem 0 1.4rem;
  background:repeating-linear-gradient(90deg,
    var(--plum) 0 1.1rem, transparent 1.1rem 1.6rem)}

/* ---- 導線のボタン -------------------------------------------------
   ジャンルページの「FANZAで見る」がただのリンクで、押せると分からなかった */
/* ⚠️ 以前は display:grid で、文の中の要素（折らないまとまり w-n・.nw）が1つずつ別の行になり、
   「FANZA｜で｜顔面騎乗の｜作品を見る」と4行に割れていた（運営者のスマホの画面。2026-09-30）。
   文は1つの流れにし、補足の small だけを下の行に落とす */
.go-big{display:block; text-align:center; padding:1rem 1.2rem;
  font-size:var(--t4); font-weight:800; letter-spacing:.04em}
.go-big small{display:block; margin-top:.3rem; font-size:var(--t0); font-weight:400; letter-spacing:.02em;
  opacity:.82}
@media (max-width:40rem){.go-big{font-size:var(--t3)}}

/* 特化度ラベル。数字ではなく言葉を主役にする */
.tag-spec{display:inline-block; padding:.1rem .5rem; background:var(--plum);
  color:#fff; font-size:var(--t0); font-weight:700; letter-spacing:.03em}
.chips .c-spec{padding:.12rem .55rem; background:var(--plum); color:#fff;
  font-weight:700}

/* 記事一覧に出すジャンルタグ（「〇〇本から」の置き換え） */
.artlist .m i{display:inline-block; font-style:normal; margin-right:.45rem;
  padding:.05rem .45rem; background:var(--sink); color:var(--ink-3);
  font-size:var(--t0); border:1px solid var(--plum-line)}

/* ---- トップページ -------------------------------------------------
   セクションごとに列数と画像の大きさを変える。
   全セクションを同じ auto-fill グリッドで並べるのが、いちばん
   WordPressテンプレートらしく見える。そこを崩すのがこのページの狙い。 */
.hero{padding:2rem 0 1.6rem; border-bottom:3px solid var(--ink); margin-bottom:2rem}
.hero h1{font-size:clamp(2rem,6vw,3.4rem); margin:0; padding:0; border:0;
  letter-spacing:.04em}
.hero h1::after{content:none}
.hero p{margin:.9rem 0 0; font-size:var(--t3); line-height:1.9; max-width:34em;
  color:var(--ink-2)}
.hero p b{font-weight:800; color:var(--plum)}

.deck{list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.9rem}
.deck-3{grid-template-columns:repeat(3,1fr)}
.deck-4{grid-template-columns:repeat(4,1fr)}
.deck-6{grid-template-columns:repeat(6,1fr); gap:.5rem}
.deck li{min-width:0}
.deck a{display:grid; gap:.4rem; text-decoration:none; color:var(--ink)}
.deck .ph{display:block; background:var(--band); overflow:hidden}
/* ⚠️ 以前はホバーで img を scale(1.03) していた。.ph が overflow:hidden なので
   **拡大した分の端が切れる**＝切り抜き（DMMは拡大縮小のみ可・切り抜き不可）。
   ホバーの反応は箱の影（.deck a:hover .ph）だけにする */
.deck img{display:block; width:100%; aspect-ratio:3/2; object-fit:contain}
.deck .t{font-size:var(--t2); font-weight:700; line-height:1.5;
  word-break:auto-phrase}
.deck .m{font-size:var(--t0); color:var(--ink-3); font-variant-numeric:tabular-nums}
.deck a:hover .t{color:var(--plum)}

/* 人気の性癖は主役。表紙を大きく、名前を重ねる */
.deck-big img{aspect-ratio:16/10}
.deck-big .t{font-size:var(--t4); font-weight:800; letter-spacing:.04em}

@media (max-width:60rem){
  .deck-3{grid-template-columns:repeat(2,1fr)}
  .deck-4{grid-template-columns:repeat(3,1fr)}
  .deck-6{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:34rem){
  .deck-3,.deck-4{grid-template-columns:repeat(2,1fr)}
  .deck-6{grid-template-columns:repeat(3,1fr)}
  .deck-big .t{font-size:var(--t3)}
}

/* ---- 横スクロールのセクション ------------------------------------
   縦に並べると一覧になりすぎるので横に流す。
   端にフェードをかけて「まだ続く」ことを見せる。 */
.rail-x{position:relative; margin:1.1rem 0 0}
.rail-x::after{content:""; position:absolute; right:0; top:0; bottom:.6rem;
  width:3rem; pointer-events:none;
  background:linear-gradient(90deg,#FFF0,var(--paper))}
.deck-x{display:flex; gap:.8rem; margin:0; overflow-x:auto; padding-bottom:.6rem;
  scroll-snap-type:x proximity; scrollbar-width:thin;
  scrollbar-color:var(--hair) transparent}
.deck-x>li{flex:0 0 14rem; scroll-snap-align:start}
.deck-x::-webkit-scrollbar{height:6px}
.deck-x::-webkit-scrollbar-thumb{background:var(--hair)}
.deck-x .ph{position:relative}
.deck-x .t{font-size:var(--t1); font-weight:700; line-height:1.5}
@media (max-width:34rem){ .deck-x>li{flex-basis:11rem} }
/* いまセール中（トップ）。定価は打ち消し線で小さく、セール価格を主役にする。
   ⚠️ .grid .yen は .grid の中だけなので、ここで別に当てる */
.sale .yen{font-size:var(--t1); font-weight:800; color:var(--ink)}
.sale-was{color:var(--ink-3)}
.sale-off{color:var(--plum); font-weight:700}
.sale .sale-end{display:block; margin-top:.1rem}
/* 価格の確認日。並びの下に小さく右寄せで（説明文からは外した） */
.sale .sale-asof{margin:.3rem 0 0; font-size:var(--t0); color:var(--ink-3); text-align:right}
/* バナー枠。中身は banner.js が入れる。候補が無ければDOMごと出ない／消える。
   素材の画像は拡大縮小だけ（改変禁止）。枠より大きい素材はJSが選ばない */
.ad-slot{margin:2rem 0; text-align:center}
.ad-slot .ad-pr{margin:0 0 .3rem; font-size:var(--t0); color:var(--ink-3); letter-spacing:.08em}
.ad-slot .ad-box{display:flex; justify-content:center; align-items:center}
.ad-slot .ad-box img{max-width:100%; height:auto}
.rail .ad-slot{margin:1.2rem 0 0}

/* ---- 動き --------------------------------------------------------
   運営者の指示で多めに入れている。ただし**全セクションに同じフェードを
   付けるのは逆にAI生成に見える**ので、動かす対象を選んでいる。 */
[data-reveal]{opacity:0; transform:translateY(14px)}
[data-reveal].on{opacity:1; transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1)}
/* 見出しの罫が伸びる */
h2:not(.rail-h)::before{transform-origin:top; transform:scaleY(0);
  transition:transform .4s cubic-bezier(.2,.9,.3,1) .05s}
h2:not(.rail-h).on::before,
.no-reveal h2:not(.rail-h)::before{transform:none}
/* カードは箱ごと持ち上げる（画像は切り抜かない） */
.deck a,.artlist a,.grid a{transition:transform .16s ease}
.deck a:hover,.artlist a:hover{transform:translateY(-3px)}
.deck .ph{transition:box-shadow .18s ease}
.deck a:hover .ph{box-shadow:0 6px 0 -2px var(--plum)}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1; transform:none}
  h2:not(.rail-h)::before{transform:none}
  .deck a:hover,.artlist a:hover{transform:none}
}

/* ---- ランキングに代表作の表紙を置く ------------------------------
   女優のプロフィール画像は許諾素材に含まれないため、
   その人がこのジャンルで最も評価を集めた作品の表紙を使う。 */
.rank li{position:relative}
/* パッケージ表紙ではなくサンプル画像を使うようにしたので、
   枠を大きくすると人物がしっかり見える（切り抜きはしていない） */
.rank .face{display:block; width:100%; background:var(--band)}
.rank .face img{display:block; width:100%; aspect-ratio:3/2; object-fit:contain}
@media (max-width:34rem){ .rank li{grid-template-columns:2rem 4.4rem 1fr auto} }
.rank .who[href]{color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--plum-line)}
.rank .who[href]:hover{color:var(--plum); border-color:var(--plum)}

/* 評点は数字ではなく★で見せる（数字も併記して正確さは保つ） */
.rate-s{display:inline-flex; align-items:center; gap:.3em;
  font-variant-numeric:tabular-nums; color:var(--ink-2)}
.chips .c-star{display:flex; align-items:center; gap:.35em}
.chips .c-star .stars{flex:none}

/* 個別紹介にページ内リンクで飛んだとき、見出しがヘッダーに隠れないように */
.who-sec{scroll-margin-top:1.2rem}

/* 作品ページ h1 の品番。作品名より小さく、前に置く。
   検索で使われる語なので拾わせたいが、見出しの主役は作品名 */
.hb{display:block; font-size:var(--t2); font-weight:700; letter-spacing:.06em;
  color:var(--plum); margin-bottom:.15rem}


/* ══ 指で押せる大きさを確保する ═══════════════════════════════
   実測（390px）で、押せる要素のうち高さ40px未満が各ページ5〜7個あった。
   Googleのモバイルの目安は48px、Appleは44pt。ここでは**44px**を下限にする。
   ⚠️ 見た目を大きくするのではなく、**当たり判定だけ**を広げる。
   カードが間延びすると1画面に入る作品数が減り、回遊が落ちる。 */
.grid .fz,.md-card .fz{min-height:2.75rem; display:inline-flex;
  align-items:center; justify-content:center}
/* 診断の結果の「合う1本」。1枚だけなので、スマホでも横に広げず半分の幅のカードにしない（2026-10-03） */
.grid-one{grid-template-columns:minmax(0,1fr)!important; max-width:22rem}
/* FANZA TV の無料お試しの箱（2026-10-06）。条件はボタンと同じ箱の中に、本文と同じくらいの大きさで */
.ftv{margin:1.6rem 0; padding:1.1rem 1.2rem 1.2rem; background:var(--sink); border-top:4px solid var(--teal)}
.ftv-k{margin:0; font-size:var(--t0); font-weight:800; letter-spacing:.12em; color:var(--teal)}
.ftv-h{margin:.2rem 0 .5rem; font-size:var(--t4); font-weight:800}
.ftv-h span{display:block; margin-top:.2rem; font-size:var(--t1); font-weight:400; color:var(--ink-2)}
.ftv-terms{margin:.4rem 0 .9rem; padding-left:1.2rem; font-size:var(--t1); line-height:1.8}
.ftv .go{background:var(--teal); margin:.4rem 0 .5rem}
.ftv-small .ftv-h{font-size:var(--t3)}
/* 2026-10-14 短くした版。見出しの左に小さく「まず試すなら」、条件は1行 */
.ftv-h .ftv-k{display:block; margin:0 0 .15rem; font-size:var(--t0); font-weight:800; letter-spacing:.12em; color:var(--teal)}
.ftv-t{margin:.2rem 0 .5rem; font-size:var(--t1); line-height:1.7}
/* ランキングの上位3人の理由（2026-10-03） */
.rank .why{color:var(--plum); font-weight:700}
.rank-total{margin:.6rem 0 0; padding-left:1.6rem; font-size:var(--t1)}
.rank-total li{padding:.35rem 0}
.rank-total span{margin-left:.6rem; color:var(--ink-3); font-size:var(--t0)}
/* ランキングの名前。文字は大きくせず、上下の余白で押しやすくする */
.rank .who{display:inline-block; padding:.35rem 0}
/* パンくず・フッター・サイドバーの小さいリンク。行間で稼ぐ */
.crumbs a,footer nav a,.rail-more a,.toc a,.rail-list a{
  padding-block:.3rem; display:inline-block}
.toc a,.rail-list a{display:grid}
/* チップは元から押しやすいが、狭い画面では指1本ぶんを確保する */
@media (max-width:46rem){
  /* 44px。Appleの44pt / Googleの48dp のうち厳しくないほうに合わせる。
     チップは数が多いので、これ以上大きくすると一覧が縦に伸びる */
  .tchips a{min-height:2.75rem; display:inline-flex; align-items:center}
  .toc a,.rail-list a{min-height:2.75rem; align-content:center}
  /* 2026-09-30 の第三者レビュー: パンくず17px・「今日の新作◯本」15px・セールの過去の日付13px の高さしか無かった */
  .crumbs a,.today a,.sc-runs a{min-height:2.75rem; display:inline-flex; align-items:center}
}


/* ══ 女優ページ（/actress/） ══════════════════════════════
   ⚠️ 人物のプロフィール写真は使えない（DMMの許諾素材は商品メイン画像と
   サンプル画像の3種のみ）。人物が大きく写るサンプル画像で代替する。
   切り抜きは禁止なので object-fit:contain のまま、枠のほうを大きくする */
/* 代表画像の帯。1枚だけ置いたらPCで右に900px近い空白が残ったので横並びに */
.act-shots{list-style:none; margin:1.4rem 0 0; padding:0; display:grid;
  grid-template-columns:repeat(2,1fr); gap:.5rem}
.act-shots li{margin:0; min-width:0}
/* ⚠️ 以前はただの <img> で**4枚とも押せない飾り**だった。
   実測で女優ページは1画面目のリンク0本、最初のFANZAリンクまで1,820px。
   画像を並べて押せないのは機会を捨てている */
.act-shots a{display:block; background:var(--sink); text-decoration:none;
  color:var(--ink-2)}
.act-shots img{width:100%; aspect-ratio:3/2; object-fit:contain;
  transition:opacity .18s ease}
.act-shots a:hover img{opacity:.85}
.act-shots .cap{display:block; padding:.4rem .5rem; font-size:var(--t0);
  line-height:1.55; background:var(--paper); word-break:auto-phrase}
.act-shots a:hover .cap{color:var(--plum)}
@media (min-width:46rem){ .act-shots{grid-template-columns:repeat(4,1fr)} }
.act-head{display:grid; gap:1.2rem; margin-top:1.4rem; align-items:start}
.act-ruby{margin:0 0 .5rem; font-size:var(--t1); color:var(--ink-3);
  letter-spacing:.1em}
/* 旧名義。読みがなの下に小さく。ここ（女優ページ）以外には出さない */
.act-alias{margin:-.2rem 0 .6rem; font-size:var(--t0); color:var(--ink-3)}

/* 見放題の料金と損得の目安（_sub_plans.html）。コースごとに1行の組。
   狭い画面で5列の表は読めないので表にしない */
.plans ul{list-style:none; margin:.8rem 0 0; padding:0; border-top:1px solid var(--hair)}
.plans li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.3rem 1rem;
  align-items:center; padding:.8rem 0; border-bottom:1px solid var(--hair)}
.plans .pl-n{font-weight:700; font-size:var(--t2)}
.plans .pl-v{grid-column:1; font-size:var(--t1); color:var(--ink-2)}
.plans .pl-v b{color:var(--ink)}
.plans .pl-go{grid-column:2; grid-row:1 / span 2; white-space:nowrap;
  padding:.55rem .9rem; background:var(--teal); color:#fff; text-decoration:none;
  font-weight:700; font-size:var(--t1)}
.plans .pl-go:hover{background:#08463E}
@media (max-width:34rem){
  .plans li{grid-template-columns:1fr}
  .plans .pl-go{grid-column:1; grid-row:auto; justify-self:start}
}

/* 年ごとの出演本数（女優ページ）。年・棒・本数の3列。
   出ていない年も0として並べる（活動の切れ目が見えるように） */
.tl{list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.2rem; max-width:40rem}
.tl li{display:grid; grid-template-columns:3.2em 1fr 3em; align-items:center; gap:.6rem;
  font-size:var(--t0); font-variant-numeric:tabular-nums}
.tl-y{color:var(--ink-3)}
.tl-bar{height:.55rem; background:var(--hair)}
.tl-bar span{display:block; height:100%; background:var(--plum)}
.tl-n{text-align:right; color:var(--ink-2)}

/* 例年の大型セール（/sale/）。時期・名前・説明・過去の開催（出典へのリンク） */
.salecal{list-style:none; margin:.8rem 0 0; padding:0; border-top:1px solid var(--hair)}
.salecal li{display:grid; grid-template-columns:9em minmax(0,1fr); gap:.2rem 1rem;
  padding:.8rem 0; border-bottom:1px solid var(--hair)}
.salecal .sc-m{grid-row:1 / span 3; font-weight:700; color:var(--plum)}
.salecal .sc-n{font-weight:700; font-size:var(--t2)}
.salecal .sc-note{font-size:var(--t0); color:var(--ink-2)}
.salecal .sc-runs{font-size:var(--t0); color:var(--ink-3)}
@media (max-width:34rem){
  .salecal li{grid-template-columns:1fr}
  .salecal .sc-m{grid-row:auto}
}

/* シリーズの配信順（作品ページ）。番号・配信日・題名。今見ている作品に印 */
.sq{list-style:none; margin:.8rem 0 0; padding:0; border-top:1px solid var(--hair)}
.sq li{display:grid; grid-template-columns:2.6em 6.2em minmax(0,1fr); gap:.6rem;
  align-items:baseline; padding:.55rem 0; border-bottom:1px solid var(--hair);
  font-size:var(--t1)}
.sq-no{color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums}
.sq-d{color:var(--ink-3); font-size:var(--t0); font-variant-numeric:tabular-nums}
.sq-t{min-width:0; overflow-wrap:anywhere}
/* 日付の列が「開始日〜終了日」になる一覧（/sale/ の記録） */
.sq.sq-wide li{grid-template-columns:2.6em 13em minmax(0,1fr)}
.sq a.sq-t{color:var(--ink); text-decoration:none}
.sq a.sq-t:hover{color:var(--plum)}
.sq li.me{background:var(--sink)}
.sq li.me .sq-t{font-weight:700}
.sq li.me b{margin-left:.5em; font-size:var(--t0); color:var(--plum)}
@media (max-width:34rem){
  /* 狭い画面は配信日を題名の上に回す（3列だと題名が1行数文字になる） */
  .sq li{grid-template-columns:2.2em minmax(0,1fr); row-gap:.1rem}
  /* ⚠️ .sq.sq-wide li は上の .sq li より詳細度が高いので、ここでも崩す（L-052） */
  .sq.sq-wide li{grid-template-columns:2.2em minmax(0,1fr)}
  .sq-d{grid-column:2}
  .sq-t{grid-column:2}
}
.act-meta .chips{margin-top:0}
.act-meta .prof-items{margin-top:.8rem}
/* メタ情報は1カラムのまま。画像を上の帯に移したので、
   ここで2カラムにすると右がまた空く */

/* よく出ているジャンルの棒。.rank を流用するが、
   ⚠️ .rank li は 順位/画像/名前/本数 の4列で、ここには画像が無い。
   列を1つ減らさないと名前と本数が1マスずつずれる（L-052/L-058 と同じ型）。
   .rank-g を後ろに置いて、両方のブレークポイントぶん上書きする */
.rank-g li{grid-template-columns:2.6rem 1fr auto}
@media (min-width:46rem){ .rank-g li{grid-template-columns:var(--gut) 1fr auto} }
@media (max-width:34rem){ .rank-g li{grid-template-columns:2rem 1fr auto} }
.rank-g .track{grid-column:1/-1}

/* ══ 手書き記事（/column/） ═══════════════════════════════
   本文は markdown.py が全文エスケープしてから記法だけ置換したHTML。
   通るタグはあのファイルに書いてあるものだけなので、ここで想定するのは
   h2 / h3 / p / ul / blockquote / strong / a / .md-card の8つ */
.byline{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem;
  margin:.8rem 0 0; font-size:var(--t1); color:var(--ink-3)}
.byline .bt{padding:.1rem .5rem; border:1px solid var(--plum-line);
  color:var(--ink-2)}
.md{margin-top:1.6rem}
.md h2{margin-top:2.8rem}
.md h3{margin:2rem 0 .5rem; padding-left:.7rem;
  border-left:3px solid var(--plum-line)}
.md p{line-height:2}
.md-list{margin:.9rem 0; padding-left:1.4rem; max-width:40em}
.md-list li{margin:.25rem 0; line-height:1.9}
ol.md-list li::marker{font-weight:700; color:var(--plum)}
/* 区切り線。書き手が --- と書いたとき、段落に「---」が出るのを防ぐ */
.md-hr{border:0; border-top:1px solid var(--hair); margin:2.2rem 0; max-width:40em}
.md blockquote{margin:1.4rem 0; padding:.2rem 0 .2rem 1.2rem;
  border-left:4px solid var(--hair); color:var(--ink-2); max-width:40em}
.md blockquote p{margin:.3rem 0}
/* [[cid:xxxx]] を展開した作品カード。本文の流れを止める面なので、
   グリッドのカードより大きく、1枚で置く */
.md-card{display:grid; grid-template-columns:1fr; gap:.5rem;
  margin:1.8rem 0; padding:1rem; background:var(--sink);
  border-left:6px solid var(--plum)}
.md-card>a:first-child{display:grid; gap:.1rem .9rem; text-decoration:none;
  color:var(--ink)}
.md-card .ph{display:block; background:var(--paper)}
.md-card .ph img{width:100%; aspect-ratio:3/2; object-fit:contain}
/* 記事の挿絵（[[img:]]）。自サイトに置いた画像。枠の幅いっぱいで縦横比を保つ。
   width/height 属性があるので、読み込み中もレイアウトがずれない */
.md-fig{margin:1.6rem 0}
.md-fig img{display:block; width:100%; height:auto; max-width:100%; background:var(--sink)}
.md-fig figcaption{margin-top:.4rem; font-size:var(--t0); color:var(--ink-3); text-align:center}
.md-card .t{font-size:var(--t3); font-weight:700; line-height:1.6;
  word-break:auto-phrase}
.md-card>a:first-child:hover .t{color:var(--plum)}
.md-card .m{font-size:var(--t1); color:var(--ink-3)}
.md-card .fz{justify-self:start; display:inline-block;
  font-size:var(--t0); font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--plum); text-decoration:none;
  padding:.42rem .9rem; transition:background .15s ease}
.md-card .fz:hover{background:var(--plum-deep)}
@media (min-width:46rem){
  /* 表紙を左、題名と評価を右に。本文の途中なので高さを食わせない */
  .md-card>a:first-child{grid-template-columns:minmax(0,16rem) 1fr;
    align-items:start}
}

/* ══ サイドバーの追加カード ══════════════════════════════
   ⚠️ .rail-list a は grid-template-columns:4.6rem 1fr（画像＋題名）。
   画像を持たない一覧（読みもの）にそのまま使うと、
   題名が4.6remの画像カラムに入って5行に折れる。列を1つにする */
.rail-plain a{grid-template-columns:1fr !important}
.rail-more{margin:.7rem 0 0; font-size:var(--t0)}
.rail-more a{color:var(--ink-3)}
.rail-more a:hover{color:var(--plum)}

/* 記事の作品一覧。⚠️ 以前は19字で切って「…」を出しており、
   10本中9本が途中で切れて**どの作品か分からなかった**（運営者の指摘）。
   切らずに折り返す。行間を詰めて、縦に伸びすぎないようにする */
.toc .tt{display:block; line-height:1.55}
.toc li{margin-bottom:.45rem}

/* 本文から別ページへ送る1行。⚠️ リンクを文の途中に置くと、狭い画面で
   リンクの内側で折り返して読めなくなる。行を独立させて、
   語の途中で折れないようにする */
.more-link{margin:.6rem 0 0; font-size:var(--t1)}
.more-link a{display:inline-block; padding:.35rem 0;
  word-break:auto-phrase; line-break:strict; overflow-wrap:normal}

/* カップ別の出演者一覧。⚠️ .rank（順位バー前提）を流用したら列が合わず、
   本数とスリーサイズが別の行に散って読めなかった。専用の並びにする */
.plist{list-style:none; margin:1.2rem 0 0; padding:0;
  border-top:1px solid var(--rule)}
.plist li{display:grid; gap:.1rem .9rem; padding:.85rem 0;
  border-bottom:1px solid var(--hair);
  grid-template-columns:1fr auto; align-items:baseline}
/* ⚠️ 最初 .pn と名付けたが、**記事の順位番号（3.6remの四角）で既に
   使われているクラス**で、名前がその四角に押し込まれて縦書きのように
   潰れた。site.css に .pn の定義が10箇所ある。
   クラスを足す前に grep で数えること（L-052 / L-058 と同じ型） */
.plist .pname{min-width:0; font-size:var(--t3); font-weight:700;
  color:var(--ink); text-decoration:none;
  word-break:auto-phrase; line-break:strict}
.plist a.pname:hover{color:var(--plum)}
.plist .pw{font-size:var(--t1); color:var(--ink-2); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.plist .pw b{font-weight:700; color:var(--ink)}
.plist .pp{grid-column:1/-1; font-size:var(--t0); color:var(--ink-3);
  font-variant-numeric:tabular-nums}


/* ══════════════════════════════════════════════════════════
   PC拡張（min-width:80rem = 1280px / min-width:110rem = 1760px）
   ══════════════════════════════════════════════════════════
   ⚠️ このブロックは**必ずファイルの末尾**に置くこと。
   このCSSには min-width の指定が 46rem（本文の上のほう）ひとつしか無く、
   max-width の指定（60rem・52rem・640px …）はそれより後ろに並んでいる。
   PC用をファイルの途中に書くと、後ろの max-width 群と詳細度が並んで
   **順序で負けて消える**（同じ型の事故が3回起きている）。足すときも末尾に足す。

   直していること: 1904pxで左右に264pxずつ余り、main は974px、
   .rail は320pxのまま。46rem より上のブレークポイントが無かったので、
   1000pxでも1904pxでも当たるCSSが同じだった。
   ⚠️ p{max-width:40em}（本文の行長＝約40字）はここでも触らない。
   ⚠️ 画像は拡大・縮小のみ可（DMM）。object-fit:contain は全部そのまま。 */

@media (min-width:80rem){
  /* 紙面の幅とサイドバー。1376px → 1536px、20rem → 21rem */
  :root{--col:96rem}
  .shell{grid-template-columns:minmax(0,1fr) 21rem}

  /* main が広がったぶん、中身も1段ずつ大きく・多くする */
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .strip{grid-template-columns:repeat(6,1fr)}
  .shots:not(.shots-big){grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}

  /* ── 作品ページ。表紙の右に、評価・価格表・導線を寄せる ──
     .item-top のDOM順は 表紙 → 評価 → リード → 導線 → サンプル画像 → 概要 で、
     モバイル（この指定が当たらない幅）では今までどおり素直に縦へ積まれる。
     PCでだけ grid-template-areas で置き直すので、目次(main h2 の順)も変わらない。
     表紙は5行ぶんをまたぐ。右の列が表紙より短いときに行が間延びしないよう、
     最後の行（概要の表）を 1fr にして余りをそこへ吸わせている。 */
  .item-top{display:grid; align-items:start;
    grid-template-columns:minmax(0,1.4fr) minmax(19rem,1fr);
    column-gap:2.4rem; row-gap:0;
    grid-template-rows:auto auto auto auto 1fr auto;
    grid-template-areas:
      "cover head"
      "cover lede"
      "cover go"
      "cover spech"
      "cover spec"
      "shots shots"}
  .item-top > .item-cover{grid-area:cover; margin-top:1.2rem}
  .item-top > .item-head{grid-area:head; margin-top:1.2rem}
  .item-top > .lede{grid-area:lede}
  /* .go は max-width:34rem で左半分だけに置かれて間延びしていた。列に収める */
  .item-top > .go{grid-area:go; max-width:none}
  .item-top > h2.lead{grid-area:spech; margin-top:1.8rem}
  .item-top > table.spec{grid-area:spec; align-self:start}
  .item-top > .item-shots{grid-area:shots}
  /* 右の列は本文より狭い。見出し列を詰めて本文側に幅を回す */
  .item-top > table.spec th{width:6.5em}

  /* サンプル画像。1列800pxだと右がまるごと空いていた。
     下限 30rem の auto-fit なので、入る幅のときだけ2列になる（1280pxでは1列のまま）。
     ⚠️ width:auto / max-width:100% / object-fit:contain は触らない。
        引き伸ばしも切り抜きもしない（DMMは拡大・縮小のみ可） */
  .shots-big{grid-template-columns:repeat(auto-fit,minmax(30rem,1fr));
    max-width:none}
}

@media (min-width:110rem){
  /* 1376px → 1696px。1904pxの画面で左右の余りが264px→104pxになる */
  :root{--col:106rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  /* 記事冒頭のサムネ10枚。5列だと2行目が半端に余る。8列で1行半に収まる */
  .strip{grid-template-columns:repeat(8,1fr)}
  .shots:not(.shots-big){grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  /* 横スクロールの1枚。main が974→1278pxになったぶん、1枚を大きくしても
     見えている枚数は増える（14rem で4.2枚 → 16rem で4.8枚） */
  .deck-x>li{flex-basis:16rem}
}

/* ══ 性癖カルテ・要点・内訳（2026-09-29） ══════════════════════
   定型の紹介文の代わりに、このサイトの集計でしか出ない数字を並べる。
   文章にしないのは、同じ型の文が全ページに並ぶと自動生成に見えるため */
.karte{margin:1.4rem 0 1.6rem; padding:1rem 1.1rem 1.1rem; background:var(--sink);
  border-left:6px solid var(--plum)}
.karte-h{margin:0 0 .7rem; font-size:var(--t0); font-weight:800; letter-spacing:.12em; color:var(--plum)}
.karte-h span{margin-left:.6rem; color:var(--ink); letter-spacing:.04em; font-size:var(--t2)}
.karte dl{display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem; margin:0}
@media (min-width:48rem){ .karte dl{grid-template-columns:repeat(3, 1fr); gap:.9rem 1.4rem} }
/* 名前が入る項目（特化している出演者・一緒に付く性癖）は1行を使う */
.karte dl .wide{grid-column:1 / -1}
.karte dl div{min-width:0}
/* 性癖ページの選び方（2026-10-31）。本文は記事と同じ .md。読みやすい幅に収める */
.gnote{margin:1.6rem 0 2rem; max-width:40em}
.gnote .md p{margin:.6rem 0}
.gnote-a{margin:.8rem 0 0; font-weight:700}
.gnote-a a::after{content:" →"}
.karte dt{font-size:var(--t0); color:var(--ink-3)}
.karte dd{margin:.15rem 0 0; font-size:var(--t1); font-weight:700; color:var(--ink)}
.karte dd b{font-size:var(--t4); font-weight:800; font-variant-numeric:tabular-nums; margin-right:.1rem}
.karte dd small{display:block; font-weight:400; font-size:var(--t0); color:var(--ink-3)}
.karte dd a{color:var(--ink)}
/* 作品ページの「要点」。表と同じ並びで、数えた事実だけ */
.points{display:grid; gap:.35rem; margin:1rem 0 .2rem}
.points div{display:flex; gap:.8rem; align-items:baseline}
.points dt{flex:none; width:6.5rem; font-size:var(--t0); color:var(--ink-3)}
.points dd{margin:0; font-weight:700; font-size:var(--t1)}
/* 記事の「この10本の内訳」 */
.pick-sum{list-style:none; display:flex; flex-wrap:wrap; gap:.3rem 1.4rem; margin:1rem 0 .4rem; padding:0}
.pick-sum li{display:flex; align-items:baseline; gap:.4rem; font-size:var(--t1); font-weight:700}
.pick-sum span{font-size:var(--t0); font-weight:400; color:var(--ink-3)}
.pick-sum b{font-size:var(--t3); font-variant-numeric:tabular-nums}
/* 記事の中で際立っている1本の印（「10本で最多のレビュー 689件」） */
.badges .b-top{background:#fff; color:var(--plum); box-shadow:inset 0 0 0 1.5px var(--plum)}
/* トップの「今日の新作・いまセール中」 */
.today{list-style:none; display:flex; flex-wrap:wrap; gap:.3rem 1.4rem; margin:1rem 0 0; padding:0;
  font-size:var(--t1)}
.today b{font-size:var(--t3); font-weight:800; font-variant-numeric:tabular-nums}
/* 今月伸びている性癖 */
.trend{list-style:none; margin:0; padding:0}
.trend > li{padding:.4rem 0 1rem; border-bottom:1px solid var(--hair)}
.updated{font-size:var(--t0)}

/* ══ 性癖診断（2026-09-29） ═══════════════════════════════
   スマホで親指で押せるよう、1問ずつ、答えは縦に大きく並べる */
.quiz{margin:1.4rem 0 2rem}
.quiz-start .go{max-width:none}
.quiz-q{padding:1.2rem 1rem 1.1rem; background:var(--sink); border-left:6px solid var(--plum)}
.quiz-prog{display:flex; align-items:center; gap:.7rem; font-size:var(--t0); color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.quiz-bar{flex:1; height:6px; background:var(--hair); overflow:hidden}
.quiz-bar i{display:block; height:100%; width:0; background:var(--plum); transition:width .2s ease}
.quiz-t{min-height:4.2em; margin:1rem 0 1.1rem; font-size:var(--t4); font-weight:800; line-height:1.55}
.quiz-a{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.quiz-a button{display:block; width:100%; min-height:3.1rem; padding:.6rem 1rem; font:inherit;
  font-size:var(--t2); font-weight:700; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--rule); cursor:pointer; text-align:center}
/* スマホは押したボタンに :hover が残り、次の質問でも同じ位置のボタンが色付きに見える。
   hover の色は、マウスのある端末だけにする（2026-09-29） */
.quiz-a button.on{color:#fff; background:var(--plum); border-color:var(--plum)}
/* PC は押した後もマウスが同じ位置にあり、次の質問で同じボタンが hover の色になる。
   質問が変わったら、マウスが動くまで hover の色を出さない（.fresh。shindan.js） */
@media (hover:hover){.quiz-a:not(.fresh) button:hover{color:#fff; background:var(--plum); border-color:var(--plum)}}
.quiz-a button:focus-visible{outline:3px solid var(--plum); outline-offset:2px}
.quiz-back{margin-top:.9rem; padding:.4rem 0; font:inherit; font-size:var(--t0); color:var(--ink-3);
  background:none; border:0; text-decoration:underline; cursor:pointer}
.axes{display:grid; gap:.7rem; margin:.6rem 0 0}
.axes dt{font-weight:700}
.axes dt b{display:inline-block; min-width:1.6em; margin-right:.2rem; color:var(--plum)}
.axes dd{margin:.1rem 0 0; font-size:var(--t1); color:var(--ink-3)}
.types{list-style:none; margin:.8rem 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.5rem}
.types a{display:grid; grid-template-columns:3.4rem 1fr; gap:.1rem .7rem; padding:.7rem .8rem;
  border:1px solid var(--hair); text-decoration:none; color:var(--ink)}
.types a:hover{border-color:var(--plum)}
.types .tc{grid-row:1 / 3; align-self:center; font-weight:800; color:var(--plum); letter-spacing:.06em}
.types .tn{font-weight:700}
.types .tp{font-size:var(--t0); color:var(--ink-3)}
/* 結果のページ */
.result-k{margin:1.2rem 0 -.6rem; font-size:var(--t0); font-weight:800; letter-spacing:.14em; color:var(--plum)}
.poles{margin:.2rem 0 .4rem}
/* タイプの絵（2026-09-29）。Codex で作ったイラスト。地はサイトの暗い色 */
.types-art{grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr)); gap:.8rem .6rem}
/* PCでは4×4（運営者の指定。2026-09-30）。並びが VR・VA・SR・SA の4つずつなので、1行が同じ系統になる */
@media (min-width:46rem){ .types-art{grid-template-columns:repeat(4, 1fr)} }
.types-art a{display:flex; flex-direction:column; gap:.15rem; padding:0 0 .6rem; border:0}
.types-art img,.tcard img{display:block; width:100%; height:auto; aspect-ratio:2 / 3; object-fit:cover;
  background:#1A1418; margin-bottom:.35rem}
.types-art a:hover img,.tcard:hover img{outline:3px solid var(--plum); outline-offset:-3px}
.types-art .tc{grid-row:auto; align-self:auto; font-size:var(--t0); text-align:left}
.result-head.has-art{display:grid; gap:1rem; align-items:center; margin-top:1rem}
.result-head.has-art .result-k{margin-top:0}
.result-art{margin:0; perspective:1200px}
.result-art img{display:block; width:100%; max-width:min(15rem, 62vw); height:auto; margin:0 auto; aspect-ratio:2 / 3;
  background:#1A1418; box-shadow:0 10px 30px rgba(26,20,24,.35);
  animation:card-flip .9s cubic-bezier(.2,.7,.2,1) both; backface-visibility:hidden}
@keyframes card-flip{from{transform:rotateY(-100deg) scale(.92); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){.result-art img{animation:none}}
@media (min-width:44rem){.result-head.has-art{grid-template-columns:minmax(0, 18rem) 1fr}
  .result-art img{max-width:18rem}}
.tips{list-style:none; margin:.6rem 0 1.2rem; padding:0; display:grid; gap:.7rem}
.tips li{padding:.7rem .9rem; background:var(--sink); border-left:4px solid var(--plum)}
.tips p{margin:0}
.tip-links{display:flex; flex-wrap:wrap; gap:.3rem .9rem; margin-top:.35rem !important; font-weight:700}
/* 「あなたにいちばん近い性癖」。本文の行間（1.9）を引き継いで、札が縦に大きくなっていた */
#mine-genres a{line-height:1.4; padding:.35rem .7rem}
.tcards{display:grid; grid-template-columns:repeat(auto-fill, minmax(8.5rem, 1fr)); gap:.8rem .6rem; margin:.6rem 0 1rem}
.tcards-one{grid-template-columns:minmax(0, 10rem)}
.tcard{display:flex; flex-direction:column; gap:.1rem; text-decoration:none; color:var(--ink)}
.tcard .tc{font-size:var(--t0); font-weight:800; color:var(--plum); letter-spacing:.06em}
.tcard .tn{font-weight:700; line-height:1.45; text-wrap-style:balance}
.tcard .tp{font-size:var(--t0); color:var(--ink-3)}
.mine{margin:1.2rem 0; padding:1rem 1.1rem; background:var(--sink); border-left:6px solid var(--plum)}
.mine h2{margin-top:0}
.meters{list-style:none; margin:.4rem 0 1rem; padding:0; display:grid; gap:.55rem}
.meters li{display:grid; grid-template-columns:1fr; gap:.2rem; font-size:var(--t0)}
.mt-l,.mt-r{font-weight:700}
.mt-r{text-align:right; color:var(--ink-3)}
.mt-bar{height:8px; background:#B9B9C3; order:0}
.mt-l.dom,.mt-r.dom{color:var(--plum)}
.mt-bar i{display:block; height:100%; background:var(--plum)}
.meters li{grid-template-areas:"l r" "b b"; grid-template-columns:1fr 1fr}
.mt-l{grid-area:l} .mt-r{grid-area:r} .mt-bar{grid-area:b}
.fits{margin:.6rem 0 0; padding-left:1.4rem}
.fits li{margin:.5rem 0}
.fit-n{font-size:var(--t3); font-weight:800}
.fit-m{display:block; font-size:var(--t0); color:var(--ink-3)}
.share{display:flex; flex-wrap:wrap; gap:.6rem; margin:.6rem 0 1rem}
.share a,.share button{display:inline-flex; align-items:center; justify-content:center; min-height:2.9rem;
  padding:0 1.2rem; font:inherit; font-weight:700; text-decoration:none; cursor:pointer;
  border:1.5px solid var(--ink); background:var(--paper); color:var(--ink)}
.share .share-x{background:var(--ink); color:#fff}
.share .share-line{background:#06c755; border-color:#06c755; color:#fff}
/* 幅をそろえる（スマホでは X・LINE が1行、コピーが下の1行。2026-10-07） */
.share a,.share button{flex:1 1 8rem}
/* トップとサイドバーの入口 */
.hero-q{margin:1.2rem 0 0}
.hero-q .go{margin:0; max-width:24rem}
.my-type{margin:.6rem 0 0; font-size:var(--t1)}
.my-type a{font-weight:800}
.card-shindan p{margin:.3rem 0 0; font-size:var(--t1)}
/* 作品ページのサンプル動画（2026-10-14）。押すまではボタンだけ。押したら 720×480 のプレイヤーを横いっぱいに */
.smv{margin:.7rem 0 0}
.smv-btn{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.15rem .5rem; width:100%; max-width:34rem;
  min-height:3rem; padding:.6rem 1rem; font:inherit; font-weight:800; cursor:pointer;
  border:1.5px solid var(--ink); background:var(--paper); color:var(--ink); border-radius:.4rem}
.smv-btn small{flex-basis:100%; text-align:center; font-size:var(--t0); font-weight:400; color:var(--ink-3)}
.smv-i{display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%;
  background:var(--ink); color:#fff; font-size:.75rem; padding-left:.1rem}
.smv-on{position:relative; width:100%; max-width:48rem; aspect-ratio:720/480; background:#000}
.smv-on iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
/* 一覧のカードの「▶動画」（作品ページでサンプル動画が見られる。2026-10-14） */
.mv-badge{display:inline-block; padding:.05rem .4rem; font-size:var(--t0); font-weight:800; line-height:1.5;
  border:1px solid var(--ink); color:var(--ink); background:var(--paper); white-space:nowrap}
/* トップの最初の一言（2026-10-14） */
.hero .hero-lead{font-size:var(--t3); line-height:1.6}
/* 初回購入の500円OFFクーポン（作品ページの「FANZAで見る」の下。2026-10-14） */
.coupon{margin:.5rem 0 0; font-size:var(--t1); line-height:1.6}
.coupon .cp-k{margin-right:.3rem; color:var(--ink-2)}
.coupon a{font-weight:800}
.coupon small{display:block; font-size:var(--t0); color:var(--ink-3)}