:root{color-scheme:dark;--ink:#eeeff2;--sub:#a3a7b0;--faint:#7d828c;--line:#24262c;--bg:#000;--panel:#121317;--field:#1a1b20;--edge:#34363e;--red:#e0484a;--mgs:#ef8a2c}
*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:14px}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.view{display:none}.view.on{display:block}

/* ヘッダー: ロゴ・検索・行き先。スマホでは行き先を「≡」にしまう */
header{position:sticky;top:0;z-index:20;background:#000;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:10px 20px}
.logo{font-weight:800;font-size:18px;letter-spacing:.02em}
/* 広告であることの表示（DMM アフィリエイト規約で必須）。どのページでもヘッダーのロゴの右。押すと説明 */
.prmark{flex:none;margin-left:-8px;border:0;background:rgba(255,255,255,.18);color:var(--ink);border-radius:4px;padding:2px 7px;font-size:11px;font-weight:700;line-height:1.2;cursor:pointer}
/* 上部の帯（ロゴ・PR・≡）は全部のページで同じにする（2026-10-12 合意）。ページ側の書き方（ガイドの /guide/port/*.css など）が入り込まないよう、帯の中の書体と大きさをここで決め切る（2026-10-13） */
body>header{font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;font-size:14px;line-height:1.4;letter-spacing:normal}
body>header .logo{font-family:inherit;font-weight:800;font-size:18px;letter-spacing:.02em;line-height:1.4;color:var(--ink);text-decoration:none}
body>header .prmark{font-family:inherit;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:normal;padding:2px 7px;min-height:0;min-width:0;width:auto;height:auto;box-shadow:none}
body>header .menubtn{font-family:inherit;padding:0;min-height:0;min-width:0;box-shadow:none}
.prnote{position:fixed;z-index:46;top:calc(var(--hh,57px) + 6px);left:12px;max-width:calc(100% - 24px);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.prnote[hidden]{display:none}
.q{flex:1;min-width:0;max-width:640px;display:flex}
.q input{flex:1;min-width:0;background:var(--field);color:var(--ink);border:1px solid var(--edge);border-radius:8px 0 0 8px;padding:10px 12px;font-size:15px}
.q button{border:0;background:#fff;color:#000;font-weight:700;border-radius:0 8px 8px 0;padding:0 16px;font-size:14px}
.menubtn{display:grid;place-items:center;flex:none;width:40px;height:40px;margin-right:-6px;margin-left:auto;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.menubtn:hover{background:var(--field)}
.menubtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* メニュー: PC もスマホも「≡」から。横長の画面では右から、縦長の画面では下から（絞り込み・詳細と同じ） */
.menupanel{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(360px,88%);display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.menu-open .menupanel{transform:none}
.mp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.mp-head b{font-size:16px}
.mp-body{flex:1;overflow-y:auto;padding:6px 8px calc(16px + env(safe-area-inset-bottom))}
.mp-body h3{margin:14px 8px 4px;font-size:12px;font-weight:600;color:var(--sub)}
.mp-body a{display:block;padding:10px 8px;border-radius:8px;font-size:15px}
.mp-body a:hover{background:var(--field)}
.mp-set{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 8px 4px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.mp-set b{display:block;font-size:14px}
.mp-set small{display:block;margin-top:2px;font-size:11px;color:var(--sub)}
.mscrim{position:fixed;inset:0;z-index:49;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.menu-open .mscrim{opacity:1;pointer-events:auto}
.menu-open{overflow:hidden}

/* トップ＝全作品のカタログ */
.wrap{padding:16px 24px}
/* 絞り込み: PC もスマホも「絞り込み」ボタンから開く。横長の画面では右から、縦長の画面では下から */
#top aside{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(380px,88%);display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.fs-open #top aside{transform:none}
.fs-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.fs-head b{font-size:16px}
.fs-x{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:50%}
.fs-x:hover{background:var(--field)}
.fs-x svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.fs-body{flex:1;overflow-y:auto;padding:12px 16px 16px}
.fs-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.fs-go{width:100%;border:0;border-radius:10px;padding:13px 0;background:#fff;color:#000;font-size:15px;font-weight:700;cursor:pointer}
.fs-scrim{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.fs-open .fs-scrim{opacity:1;pointer-events:auto}
.fs-open{overflow:hidden}
#top aside h3{margin:14px 0 6px;font-size:12px;color:var(--sub);font-weight:600}
#top aside h3:first-child{margin-top:0}
#top aside label{display:flex;justify-content:space-between;gap:8px;padding:7px 0;font-size:14px;cursor:pointer}
#top aside input[type=checkbox]{width:17px;height:17px;vertical-align:-3px;margin-right:6px}
#top aside label span:last-child{color:var(--sub);font-size:12px}
#top aside select{width:100%;padding:6px;background:var(--field);color:var(--ink);border:1px solid var(--edge);border-radius:6px}
#top aside input{accent-color:#fff}
#top aside label.zero{opacity:.38}
/* 一覧の頭: 作品数・絞り込み・並び順 */
.tools{display:flex;align-items:center;gap:8px;margin-bottom:12px}
/* 下までスクロールしても、ヘッダーのすぐ下に付いてくる（2026-10-12 運営者と合意）。選んでいる条件の札（.fchips）は付いてこない
   1行に収めるため、並び順の欄は一番長い選択肢の幅にせず上限を付ける。背景は画面の左右の端まで黒く伸ばす */
.tools{position:sticky;top:var(--hh,60px);z-index:15;flex-wrap:nowrap;padding:8px 0;margin:-8px 0 4px;background:#000;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax)}
.count{margin-right:auto;font-size:13px;color:var(--sub);white-space:nowrap}
.fbtn{display:inline-flex;flex:none;align-items:center;gap:5px;border:1px solid var(--edge);background:var(--field);color:var(--ink);border-radius:999px;padding:6px 12px 6px 10px;font-size:13px;font-weight:700;cursor:pointer}
.fbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fbtn.on{background:#fff;color:#000;border-color:#fff}
.sortsel{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0}
.sortsel select{appearance:none;-webkit-appearance:none;border:1px solid var(--edge);background:var(--field);color:var(--ink);border-radius:999px;padding:6px 30px 6px 13px;font-size:13px;font-weight:700;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sortsel svg{position:absolute;right:10px;width:14px;height:14px;fill:none;stroke:var(--sub);stroke-width:2;stroke-linecap:round;pointer-events:none}
/* 選んでいる条件の札は横にスクロールする1行（2026-10-18 運営者と合意。いくつ選んでも作品が押し出されない）。全部は絞り込みのシートの一番上（.fs-chips は折り返す） */
.fchips{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.fchips::-webkit-scrollbar{display:none}
.fchips button{flex:none;white-space:nowrap}
.fchips .fclear-all{background:none;border-color:transparent;color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.fs-chips{flex-wrap:wrap;overflow:visible;margin-bottom:4px}
/* 対象外（除く）の札（【合意 2026-10-18 運営者】）: 赤い枠と薄い赤の地・白い字・名前に細い赤の取り消し線（字の高さの60%。text-decoration だとカタカナの「ー」と重なるので背景で引く）・× は薄い赤。絞り込みのシートの中の札は今のまま */
.fchips button.ex{border-color:#e0484a;background:rgba(224,72,74,.14);color:#f2f3f5}
.fchips button.ex .nm{background:linear-gradient(#ff3b3e,#ff3b3e) 0 60%/100% 1px no-repeat}
.fchips button.ex svg{stroke:#ff9c9d}
.fs-chips button.ex{border-color:var(--edge);background:var(--field);color:var(--ink)}
.fchips:not(:empty){margin-bottom:12px}
.fchips button{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--edge);background:var(--field);color:var(--ink);border-radius:999px;padding:4px 8px 4px 11px;font-size:12px;cursor:pointer}
.fchips svg{width:14px;height:14px;fill:none;stroke:var(--sub);stroke-width:2;stroke-linecap:round}
.empty{grid-column:1/-1;color:var(--sub);padding:40px 0;text-align:center}

/* 作品カード: パケ写・女優名・タイトルだけ。観られるかが変わる VR と AVScript だけパケ写の角に付ける */
/* カードの幅を 147px 以下にする（【合意】2026-10-16 運営者）（FANZA の小さいパケ写 147×200 を、普通の画面で引き伸ばさない幅）
   間隔は横10px・縦14px（カードが約187px のときの横14px と同じ割合。2026-10-15 運営者と決めた）
   一覧の欄の幅いっぱいに並べ、カードが 147px を超えない一番少ない列の数にする（列の数 = (欄の幅＋10) ÷ (147＋10) の切り上げ）。1440px の画面で9列・約146px
   列の数は欄の幅から決める（コンテナクエリ）。下の @container は「この幅を超えたら n 列」: (n−1)×157−10 px */
main:has(>.grid){container-type:inline-size}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 10px}
@container (min-width:776px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@container (min-width:933px){.grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@container (min-width:1090px){.grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@container (min-width:1247px){.grid{grid-template-columns:repeat(9,minmax(0,1fr))}}
@container (min-width:1404px){.grid{grid-template-columns:repeat(10,minmax(0,1fr))}}
@container (min-width:1561px){.grid{grid-template-columns:repeat(11,minmax(0,1fr))}}
@container (min-width:1718px){.grid{grid-template-columns:repeat(12,minmax(0,1fr))}}
@container (min-width:1875px){.grid{grid-template-columns:repeat(13,minmax(0,1fr))}}
@container (min-width:2032px){.grid{grid-template-columns:repeat(14,minmax(0,1fr))}}
@container (min-width:2189px){.grid{grid-template-columns:repeat(15,minmax(0,1fr))}}
@container (min-width:2346px){.grid{grid-template-columns:repeat(16,minmax(0,1fr))}}
@container (min-width:2503px){.grid{grid-template-columns:repeat(17,minmax(0,1fr))}}
@container (min-width:2660px){.grid{grid-template-columns:repeat(18,minmax(0,1fr))}}
@container (min-width:2817px){.grid{grid-template-columns:repeat(19,minmax(0,1fr))}}
@container (min-width:2974px){.grid{grid-template-columns:repeat(20,minmax(0,1fr))}}
@container (min-width:3131px){.grid{grid-template-columns:repeat(21,minmax(0,1fr))}}
@container (min-width:3288px){.grid{grid-template-columns:repeat(22,minmax(0,1fr))}}
@container (min-width:3445px){.grid{grid-template-columns:repeat(23,minmax(0,1fr))}}
@container (min-width:3602px){.grid{grid-template-columns:repeat(24,minmax(0,1fr))}}
/* 【合意】2026-10-16 運営者: 元が 147×200 しか無いパケ写（FANZA の古い作品・DVD）は、端に3〜4px の白い線（パッケージの紙の端）が入っていることがあるので、6% 拡大して枠の外に出す（左右が約4px・上下が約6px ずつ切れる） */
.thumb img.sm,.rk-pod img.sm,.pface img.sm{transform:scale(1.06)}
.card{cursor:pointer;min-width:0}
.thumb{position:relative;aspect-ratio:147/200;background:#15161a;overflow:hidden;border-radius:8px}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.thumb.sq img{object-position:center}
/* パケ写が無い作品（FANZA の DVD だけの作品・昔の作品など）は、枠の中だけ全作品同じ「NO IMAGE」。カードの形（共演者・題名）は画像ありと同じ（【合意】2026-10-17 OLD_WORKS_LISTING.md） */
.thumb .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#6b6e76;font-size:15px;font-weight:800;letter-spacing:.06em}
@media (max-width:767px){.thumb .noimg{font-size:12px}}
.badges{position:absolute;left:6px;right:6px;bottom:6px;display:flex;flex-wrap:wrap-reverse;gap:4px}
.badges span{font-size:10px;font-weight:800;line-height:1;padding:4px 6px;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;white-space:nowrap}
.badges .b-av{background:#2f6be0}.badges .b-sale{background:#d23b3b}
.cname{margin-top:8px;font-size:13px;font-weight:700;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cname+.ttl{margin-top:3px}
.ttl{margin-top:8px;font-size:12px;line-height:1.45;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.seen .thumb{outline:3px solid #fff;outline-offset:2px}

/* 一覧の頭: そのページの名前（女優・メーカー・レーベル・シリーズ・監督・ジャンル）。トップには無い */
.phead{display:flex;align-items:center;gap:16px;margin:0 0 16px}
.phead h1{margin:0;font-size:24px;line-height:1.3}
.ptype{display:block;margin-bottom:2px;font-size:12px;color:var(--sub)}
.pface{flex:none;width:96px;height:130px;border-radius:8px;overflow:hidden;background:#15161a}
.pface img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.pface.sq img{object-position:center}
.yomi{margin-top:2px;font-size:13px;color:var(--sub)}
.aka{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:10px 0 0;font-size:13px;line-height:1.45}
.aka dt{color:var(--sub)}.aka dd{margin:0}
.plinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.plinks a{border:1px solid var(--edge);background:var(--field);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700}

/* スマホ＝幅が狭い画面、または指で操作する背の低い画面（スマホを横にしたとき）。縦でも横でも同じ部品を同じ場所に置く */
@media (max-width:760px), (pointer:coarse) and (max-height:600px){
 header{gap:10px;padding:10px 12px}
 .q input{font-size:14px;padding:9px 10px}
 .q button{padding:0 12px}
 .wrap{padding:10px}
 .tools{margin-bottom:10px}
 /* スマホ縦は3列。1画面に9本ほど見える */
 .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
 .cname{margin-top:6px;font-size:12px}
 .ttl{font-size:11px;line-height:1.4;margin-top:6px}
 .badges{left:4px;right:4px;bottom:4px;gap:3px}
 .badges span{font-size:9px;padding:3px 5px}
 .phead{gap:12px;margin-bottom:12px}
 .phead h1{font-size:19px}
 .pface{width:66px;height:90px}
 .yomi{font-size:12px}
 .aka{margin-top:6px;font-size:12px;gap:2px 8px}
}
/* 背の低い横長の画面（スマホを横にしたとき）: 列を増やし、シートは右から */
@media (max-height:600px) and (orientation:landscape){
 .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
}
@media (max-width:760px) and (orientation:portrait){
 .menupanel{top:auto;left:0;width:auto;max-height:82dvh;border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;transform:translateY(105%)}
 #top aside{top:auto;left:0;width:auto;max-height:82dvh;border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;transform:translateY(105%)}
 #top aside label{padding:9px 0;font-size:15px}
 #top aside input[type=checkbox]{width:18px;height:18px}
}

.card{display:block;color:inherit;text-decoration:none}
/* 検索エンジンが読む本文（画面の JS が動くと、ショートの画面に置き換わる） */
.ssr-work{max-width:860px;margin:0 auto;padding:20px}
.ssr-work img{max-width:100%;height:auto;border-radius:8px}
.ssr-work dl{display:grid;grid-template-columns:110px 1fr;gap:6px 12px}
.ssr-work a{text-decoration:underline}

/* 作品ページ（ショート）では、ヘッダーを帯にせず映像の上に重ねる。サイトの上部の帯（body の直下の header）だけに効かせる（詳細・設定のシートの見出しも header なので、> で絞らないと画面の一番上に貼り付いて隠れる。2026-10-13）。左上にロゴと PR、右上に ≡。検索の欄は出さない
   （スマホを横にしたときに映像の高さを削らないため。一覧のページは今まで通り） */
body[data-view=work]{--hh:0px}
body[data-view=work]>header{position:fixed;left:0;right:0;top:0;border-bottom:0;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
body[data-view=work]>header>*{pointer-events:auto}
body[data-view=work]>header .logo,body[data-view=work]>header .menubtn{text-shadow:0 1px 6px rgba(0,0,0,.6)}
body[data-view=work]>header .menubtn svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
body[data-view=work] .prnote{top:58px}
body[data-view=work]>header{background:none}
/* 作品ページでは ≡ をゴーグル・矢印・音・設定・詳細と同じ縦の線（--rx、work.css）に置く。ヘッダーの右の余白は PC 20px・スマホ 12px */
body[data-view=work]>header .menubtn{margin-right:calc(var(--rx) - 40px)}
@media (max-width:760px), (pointer:coarse) and (max-height:600px){body[data-view=work]>header .menubtn{margin-right:calc(var(--rx) - 32px)}}

/* 絞り込みのシート（作品・ランキング共通）。下の2つのボタンは「すべて外す」と「見る」 */
.fs-foot{display:flex;gap:8px}
.fs-clear{flex:none;border:1px solid var(--edge);border-radius:10px;padding:0 14px;background:transparent;color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}
.fs-go{flex:1}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#top aside .frow2 select{padding:9px 8px;font-size:13px}
#top aside select:disabled{opacity:.4}
/* 名前で選ぶ項目: 押すと名前を打って探す一覧が開く */
.prow{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:10px 0;font-size:14px;cursor:pointer;border-bottom:1px solid var(--line)}
.prow>span:first-child{flex:none}
.prow .pv{flex:1;min-width:0;text-align:right;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pv.on{color:var(--ink);font-weight:700}
.prow svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--sub);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--edge);background:var(--field);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.seg button.on{background:#fff;color:#000;border-color:#fff;font-weight:700}
.pick{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;background:var(--panel)}
.pick[hidden]{display:none}
.pick-head{display:flex;align-items:center;gap:6px;padding:10px 12px 8px;border-bottom:1px solid var(--line)}
.pick-head b{font-size:16px}
.pick-q{margin:10px 16px 4px;padding:10px 12px;background:var(--field);color:var(--ink);border:1px solid var(--edge);border-radius:8px;font-size:15px}
.pick-list{flex:1;overflow-y:auto;padding:4px 16px calc(16px + env(safe-area-inset-bottom))}
.popt{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;gap:10px;width:100%;padding:10px 0;font-size:14px;cursor:pointer;border-bottom:1px solid var(--line)}
.popt .pn{flex:none;color:var(--sub);font-size:12px}
.popt.in .pn,.popt.ex .pn{color:#000;background:#fff;border-radius:4px;padding:1px 6px;font-weight:700}
.popt.ex>span:first-child{text-decoration:line-through;color:var(--sub)}
.popt.ex .pn{background:var(--red);color:#fff}
.pnote{color:var(--sub);font-size:12px;text-align:center;padding:14px 0}
/* 続きを読み始める目印（一覧の一番下） */
.more{height:1px}

/* ランキング: カードの左上に順位 */
.rank{position:absolute;left:0;top:0;min-width:34px;padding:5px 8px 6px;background:#000;color:#fff;font-size:20px;font-weight:800;line-height:1;text-align:center;font-variant-numeric:tabular-nums;border-bottom-right-radius:8px}
.cname.who{font-size:14px}
a.ptype{text-decoration:underline}
.pmeta{margin-top:4px;font-size:13px;color:var(--sub)}
@media (max-width:760px), (pointer:coarse) and (max-height:600px){
 .rank{min-width:26px;padding:4px 6px 5px;font-size:15px}
 .cname.who{font-size:12px}
}
.pmeta span+span{margin-left:12px}

/* メニュー（【合意 2026-10-18 運営者】）: 見出しは14pxの太字。「作品をさがす」は同じ形の札7つ（折り返し）、ほかは高さ48px以上の行と右に「>」。説明文は付けない */
.mp-body .mg{margin:0 8px;padding:16px 0 14px;border-top:1px solid var(--line)}
.mp-body .mg:first-child{border-top:0;padding-top:8px}
.mp-body .mg h3{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink)}
.mp-body .mg-chips{display:flex;flex-wrap:wrap;gap:8px}
.mp-body .mg-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--edge);border-radius:10px;background:var(--field);font-size:15px;font-weight:700}
.mp-body .mg-chips a:hover{background:var(--edge)}
.mp-body .mg-list{display:block}
.mp-body .mg-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:0 2px;border-radius:0;border-bottom:1px solid var(--line);font-size:15px;font-weight:700}
.mp-body .mg-row:last-child{border-bottom:0}
/* 連動の始め方の2つの箱（/guide/ の入口の箱と同じ形: 見出し＋3行。各行は大きい言葉＋小さい説明、右に「›」。.mp-body a の決まりより強くするため .mp-body を付ける。2026-10-27） */
.mg-boxes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.mg-box{display:grid;align-content:start;padding:10px 6px 4px;border:1px solid var(--edge);border-radius:10px;background:var(--field)}
.mg-bt{padding:0 4px 6px;font-size:14px;font-weight:800;line-height:1.3;color:var(--ink);text-align:center}
.mp-body .mg-bd{position:relative;display:grid;align-content:center;gap:2px;min-height:52px;padding:6px 26px 6px 8px;border-radius:6px}
.mp-body .mg-bd+.mg-bd::before{content:'';position:absolute;left:8px;right:8px;top:0;height:1px;background:var(--line)}
.mp-body .mg-bd::after{content:'';position:absolute;right:9px;top:50%;width:6px;height:6px;border-top:2px solid var(--sub);border-right:2px solid var(--sub);transform:translateY(-50%) rotate(45deg)}
.mp-body .mg-bd:hover{background:var(--edge)}
.mp-body .mg-bd b{font-size:15px;font-weight:700;line-height:1.25}
.mp-body .mg-bd small{font-size:11px;font-weight:500;line-height:1.4;color:var(--sub)}
.mp-body .mg-bd .nw{display:inline-block}
.mg-bt .nw{display:inline-block}
/* 横幅 380〜399px は「Meta Quest で／始める」の2行になるので、2つの箱の見出しを同じ高さにして下の3行の位置をそろえる。
   379px 以下は小さい説明の言葉（「VRヘッドセット・PC・」「AVScript Connector」）が途中で折れるので、2つの箱を縦に積む（320〜430px を 10px ごとに測って決めた） */
@media (min-width:380px) and (max-width:399px){.mg-bt{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;min-height:calc(2.6em + 6px)}}
@media (max-width:379px){.mg-boxes{grid-template-columns:1fr}}
.mp-body .mg-row:hover{background:transparent;color:#fff}
.mp-body .mg-row>span{display:flex;align-items:center;gap:8px;min-width:0}
.mp-body .mg-row svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--sub);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mp-body .mg-av{display:inline-block;padding:3px 7px;border-radius:5px;background:#2f6be0;color:#fff;font-style:normal;font-size:12px;font-weight:800;line-height:1.2}
/* 一番下の規約のリンク（今のまま） */
.mp-body .mg-foot{display:flex;gap:16px;margin:4px 8px 0;padding-top:14px;border-top:1px solid var(--line)}
.mp-body .mg-foot a{padding:4px 0;font-size:12px;color:var(--sub)}
/* 設定（通信を節約）は一番下に、線で区切った1行として */
.mp-body .mg~.mp-set{margin:26px 8px 0;padding:14px 0 12px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.mp-body .mp-set~.mg-foot{border-top:0;padding-top:4px;margin-top:0}
/* PC（と横にしたスマホ）のメニューの幅。縦のスマホは下から全幅のまま */
@media (min-width:761px), (orientation:landscape){.menupanel{width:min(400px,88%)}}

/* 絞り込み: チェックの項目は押すたびに 含む（白に✓）→ 除く（赤に×）→ 外す */
.fs-how{margin:0 0 6px;font-size:12px;line-height:1.6;color:var(--sub)}
.fs-how .box{display:inline-block;vertical-align:-4px;margin-right:4px}
.tri{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:8px 0;font-size:14px;cursor:pointer}
.box{position:relative;flex:none;box-sizing:border-box;width:18px;height:18px;border:1.5px solid var(--edge);border-radius:4px}
.tri[data-mode=in],.tri[data-mode=ex]{font-weight:700}
.tri[data-mode=in] .box{background:#fff;border-color:#fff}
.tri[data-mode=in] .box::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tri[data-mode=ex] .box{background:var(--red);border-color:var(--red)}
.tri[data-mode=ex] .box::after{content:'×';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;line-height:1}
/* 発売日 */
#top aside .dates label{flex-direction:column;justify-content:flex-start;gap:4px;padding:0;font-size:12px;color:var(--sub);cursor:default}
#top aside input[type=date]{box-sizing:border-box;width:100%;padding:8px;background:var(--field);color:var(--ink);border:1px solid var(--edge);border-radius:6px;font:inherit;font-size:14px}
.dates+.seg{margin-top:8px}
/* 数値で絞る: つまみ2つ（いくつから・いくつまで） */
.rg{padding:6px 0 8px}
.rg-top{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.rg-top b{font-weight:500;color:var(--sub)}
.rg-top b.on{color:var(--ink);font-weight:700}
.rg-bar{position:relative;height:30px}
.rg-fill{position:absolute;top:13px;height:4px;border-radius:2px;background:#fff;left:calc(12px + (100% - 24px) * var(--a));right:calc(12px + (100% - 24px) * (1 - var(--b)));pointer-events:none;z-index:1}
.rg-bar input{z-index:2;position:absolute;inset:0;width:100%;height:30px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.rg-bar input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:transparent}
.rg-bar input:first-child::-webkit-slider-runnable-track{background:var(--edge)}
.rg-bar input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:24px;height:24px;margin-top:-10px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5);cursor:pointer}
.rg-bar input::-moz-range-track{height:4px;border-radius:2px;background:transparent}
.rg-bar input:first-child::-moz-range-track{background:var(--edge)}
.rg-bar input::-moz-range-thumb{pointer-events:auto;width:24px;height:24px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.rg-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--faint)}
.shelf-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px}
.shelf-h h2{margin:0;font-size:17px;font-weight:800}
.shelf-h a{display:inline-flex;align-items:center;gap:2px;color:var(--sub);font-size:13px;text-decoration:none}
.shelf-h a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 絞り込みの品番の欄（スマホで文字が16px未満だと、押したときに画面が拡大されるので16px） */
#top aside .fcode{box-sizing:border-box;width:100%;margin:0 0 10px;padding:9px 12px;background:var(--field);color:var(--ink);border:1px solid var(--edge);border-radius:8px;font:inherit;font-size:16px}

/* ランキングの一覧（/ranking/）: 段は作品・女優。カードは横長の絵＋「TOP 10」の札＋テーマ。月間・年間の残りは年ごとの月の表 */
.rk-sec{margin:10px 0 44px}
.rk-sec .shelf-h{margin-bottom:12px}
.rk-sec .shelf-h h2{font-size:20px}
.rk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px 16px}
.rk{display:block;min-width:0}
/* 1位を大きく（左・2段分）、2位・3位を右に縦に。どれも縦長のパケ写（147:200）がそのまま収まる比率 */
.rk-pod{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;aspect-ratio:441/400;border-radius:8px;overflow:hidden}
.rk-pod span{position:relative;background:#15161a;overflow:hidden}
.rk-pod .p1{grid-row:1/3}
.rk-pod img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.rk-pod i{position:absolute;left:0;top:0;min-width:22px;padding:3px 6px 4px;background:#000;color:#fff;font-style:normal;font-size:13px;font-weight:800;line-height:1;text-align:center;border-bottom-right-radius:6px}
.rk-pod .p1 i{min-width:28px;font-size:17px;padding:4px 8px 5px;border-bottom-right-radius:8px}
.rk-cap{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.rk-top{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:50px;height:50px;border-radius:8px;background:#fff;color:#000;font-size:21px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rk-top small{font-size:10px;font-weight:700;letter-spacing:.08em;margin-bottom:3px}
.rk-t{min-width:0;padding-top:3px}
.rk-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:1.35;font-weight:700}
.rk-t small{display:block;margin-top:4px;font-size:12px;color:var(--sub)}
.rk-arc{max-width:900px;margin-top:36px}
.rk-arc h3{margin:0 0 8px;font-size:15px;font-weight:700}
.rk-yr{display:flex;align-items:center;gap:14px;padding:8px 0;border-top:1px solid var(--line)}
.rk-y{flex:none;width:52px;font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums}
.rk-ms{flex:1;min-width:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.rk-ms a,.rk-ys a{display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;background:var(--panel);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.rk-ms a:hover,.rk-ys a:hover{background:var(--field)}
.rk-old summary{display:flex;align-items:center;gap:6px;height:44px;border-top:1px solid var(--line);color:var(--sub);font-size:14px;cursor:pointer;list-style:none}
.rk-old summary::-webkit-details-marker{display:none}
.rk-old summary::after{content:"";width:7px;height:7px;margin-left:2px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.rk-old[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.rk-old summary:hover{color:var(--ink)}
.rk-ys{display:flex;flex-wrap:wrap;gap:8px}
.rk-ys a{padding:0 20px}
@media (max-width:760px), (pointer:coarse) and (max-height:600px){
 .rk-sec{margin-bottom:36px}
 .rk-sec .shelf-h h2{font-size:18px}
 .rk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}
 .rk-cap{gap:8px;margin-top:8px}
 .rk-top{width:40px;height:40px;font-size:16px;border-radius:7px}
 .rk-top small{font-size:8px;margin-bottom:2px}
 .rk-t{padding-top:1px}
 .rk-t b{font-size:14px}
 .rk-t small{font-size:11px;margin-top:2px}
 .rk-arc{margin-top:28px}
 .rk-yr{flex-direction:column;align-items:stretch;gap:6px;padding:10px 0}
 .rk-ms{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* 一覧の見出し（src/layout.js の listSwitch）: 押すと作品・女優・シリーズなどの一覧を切り替える。中身はメニューと同じ面 */
.lsw{position:relative}
.lsw summary{display:inline-flex;align-items:center;gap:4px;min-height:44px;list-style:none;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent}
.lsw summary::-webkit-details-marker{display:none}
.lsw summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.lsw summary>svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--sub);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.lsw[open] summary>svg{transform:rotate(180deg)}
.lsw-list{position:absolute;z-index:30;top:100%;left:0;margin-top:6px;width:220px;padding:6px;background:var(--panel);border:1px solid var(--edge);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.65)}
.lsw-list a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
.lsw-list a:hover,.lsw-list a:focus-visible{background:var(--field);outline:none}
.lsw-list a[aria-current]{background:var(--field)}
.lsw-list a svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.lsw summary>svg{transition:none}}

/* 過去の人気（暦の月・年）の前後へ送る段（【合意 2026-10-22 運営者】work/catalog-design/past_popularity） */
.pp-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.pp-nav b{flex:1;text-align:center;font-size:16px;font-variant-numeric:tabular-nums}
.pp-ar{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer}
.pp-ar:hover{background:var(--field)}
.pp-ar:disabled{color:var(--faint);background:transparent;cursor:default}

/* 「◀ 期間 ▶」の真ん中: 押すと全部の期間の一覧（select を字の上に重ねる。スマホは回す形・パソコンは一覧）。ストアの順位のいつ・時刻、人気の月ごと・年ごと（2026-10-25 work/srk-when）
   ◀▶ と真ん中は、絞り込みの部品（.seg のボタン）と同じ地と枠。aside の label の決まり（両端に寄せる）より強く書く */
#top aside .pp-nav .pp-pick,.pp-nav .pp-pick{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 12px;border:1px solid var(--edge);border-radius:10px;background:var(--field);font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;cursor:default}
.pp-nav .pp-pick span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-nav .pp-pick svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--sub);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pp-nav .pp-pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;color-scheme:dark}
.pp-nav .pp-pick:has(select):hover{border-color:#5a5d66}
.pp-nav .pp-pick:has(select:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.pp-nav .pp-ar{border:1px solid var(--edge);background:var(--field)}
.pp-nav .pp-ar:hover{border-color:#5a5d66;background:var(--field)}
.pp-nav .pp-ar:disabled{border-color:var(--line);background:transparent}
.srk-when{margin-top:8px}
/* 狭いスマホ（360px 以下）は並び順の欄の左右の余白を少し詰め、ランキングの回の名前（「FANZA 2D 10/20 23:50」）が入るようにする */
@media (max-width:360px){.sortsel select{padding-left:10px;padding-right:26px}.sortsel svg{right:8px}}
@media (max-width:360px){.pp-nav{gap:6px}#top aside .pp-nav .pp-pick,.pp-nav .pp-pick{padding:0 6px;gap:2px;font-size:15px}}
.srk-when .pp-nav{margin-top:0}
.srk-when .pp-nav+.pp-nav{margin-top:8px}