:root{
  --bg:#0b0b0f; --fg:#f4f4f6; --muted:#a3a3ad; --accent:#ff3b5c; --accent2:#ffb020; --new:#3bb4ff; --pick:#facc15;
  --card:#17171f; --line:#2a2a35;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* ---- 年齢確認 ---- */
#gate{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
#gate .box{max-width:340px;width:100%;text-align:center}
#gate h1{font-size:20px;margin-bottom:12px}
#gate p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:24px}
#gate .yes{display:block;width:100%;padding:14px;border-radius:12px;background:var(--accent);font-weight:700;margin-bottom:10px}
#gate .no{display:block;width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);color:var(--muted);text-decoration:none}
#gate .disc{font-size:11px;margin:20px 0 0}
#gate .disc a,.end a{color:var(--muted)}

/* ---- 上部バー＋タブ ---- */
#top{position:fixed;top:0;left:0;right:0;z-index:10;background:linear-gradient(var(--bg) 70%,transparent);padding:10px 0 14px}
#top .row{display:flex;justify-content:space-between;align-items:center;padding:0 16px 8px}
#top .logo{font-weight:800;letter-spacing:.02em}
#top .salelink{margin-left:auto;margin-right:6px;white-space:nowrap;font-size:12px;font-weight:700;color:var(--fg);text-decoration:none;padding:4px 10px;border:1px solid var(--line);border-radius:999px}
#top .count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
#tabs{display:flex;gap:8px;overflow-x:auto;padding:0 16px;scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--muted);white-space:nowrap;transition:.15s}
.tab.on{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:700}
.tab.pick{border-color:var(--pick);color:var(--pick)}
.tab.pick.on{background:var(--pick);color:#1a1300}

/* ---- フィード ---- */
#feed{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none}
#feed::-webkit-scrollbar{display:none}
.state{height:100dvh;display:flex;align-items:center;justify-content:center;color:var(--muted);padding:24px;text-align:center}
.slide{height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;flex-direction:column;justify-content:center;padding:96px 16px 24px}

.player{position:relative;width:100%;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
/* 再生するまではパッケージ画像をプレイヤーの上に重ねる。プレイヤーの読み込み後は、タップを下のプレイヤーに通す */
.poster{z-index:1}
.player.ready .poster{pointer-events:none}
.player.on .poster{display:none}
.player iframe.fz{right:auto;bottom:auto;width:720px;height:480px;transform:translate(var(--fx,0),var(--fy,0)) scale(var(--fz,1));transform-origin:0 0}
.fsbtn{position:absolute;top:8px;right:8px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.fsbtn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 全画面（横向き・全画面ボタン） */
.player.fs{position:fixed;inset:0;z-index:40;width:auto;margin:0;aspect-ratio:auto;border:0;border-radius:0}
.player.fs .poster{display:none}
body.fs-on #feed{overflow:hidden}
/* スワイプでタブを移ったときに、横から入ってくる */
#feed.in-next{animation:in-next .25s ease-out}
#feed.in-prev{animation:in-prev .25s ease-out}
@keyframes in-next{from{transform:translateX(30%);opacity:0}}
@keyframes in-prev{from{transform:translateX(-30%);opacity:0}}
/* 画像は改変しないよう、切り取らずに全体を表示（contain） */
.poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--card) center/contain no-repeat}
.poster .play{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.poster .play svg{width:26px;height:26px;margin-left:4px;fill:#fff}
.poster .note{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.85);text-shadow:0 1px 3px #000}
.poster.noplay .play{display:none}

.info{margin-top:16px}
.badges{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.b{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.b.off{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:800;font-size:14px;padding:3px 10px}
.b.new{background:var(--new);border-color:var(--new);color:#001;font-weight:800}
.b.ends{color:var(--accent2);border-color:var(--accent2)}
.b.pick{color:var(--pick);border-color:var(--pick)}
.b.pr{font-size:11px;border-radius:4px;padding:2px 6px;margin-left:auto}
.title{font-size:17px;font-weight:700;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.title.more{cursor:pointer}
.tip{position:fixed;z-index:30;background:#262630;color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:700;line-height:1.6;box-shadow:0 8px 24px rgba(0,0,0,.5);max-height:40vh;overflow:auto}
.tip::before{content:"";position:absolute;left:20px;top:-6px;width:10px;height:10px;background:inherit;border:solid var(--line);border-width:1px 0 0 1px;transform:rotate(45deg)}
.tip.up::before{top:auto;bottom:-6px;transform:rotate(225deg)}
.comment{margin-top:8px;font-size:14px;line-height:1.6;color:#d6d6dc;background:var(--card);border-left:3px solid var(--accent);padding:8px 10px;border-radius:0 8px 8px 0}
.meta{font-size:13px;color:var(--muted);margin-top:6px}
.price{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.price .now{font-size:26px;font-weight:800}
.price .was{font-size:14px;color:var(--muted);text-decoration:line-through}
.cta{display:block;text-align:center;margin-top:14px;padding:14px;border-radius:12px;background:var(--fg);color:var(--bg);font-weight:800;text-decoration:none}
.cta.off{opacity:.4;pointer-events:none}

/* ---- 女優・ジャンルで探す ---- */
#top .qbtn{margin-right:6px}
#top .qbtn + .salelink, #top .salelink + .salelink{margin-left:0}
#top .salelink + .count{margin-left:6px}
#top .logo,#top .count{white-space:nowrap}
/* 上部のボタン（さがす・セール情報・新作）が1行に収まるよう、狭い画面では小さくする */
@media (max-width:400px){
  #top .salelink{font-size:11px;padding:3px 7px;margin-right:4px}
  #top .salelink + .count{margin-left:4px}
}
@media (max-width:349px){ #top .count{display:none} }
.tab.srch{border-color:var(--new);color:var(--new)}
.tab.srch.on{background:var(--new);color:#001}
body.qs-on{overflow:hidden}
.qs{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.qs[hidden],.qv[hidden]{display:none}
.qbox{width:100%;max-width:560px;height:min(86dvh,720px);background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;display:flex;flex-direction:column;padding:14px 16px calc(12px + env(safe-area-inset-bottom));animation:qup .2s ease-out}
.qhead{display:flex;justify-content:space-between;align-items:center;font-size:17px}
.qx{font-size:26px;line-height:1;color:var(--muted);padding:0 4px}
.qseg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg);border-radius:10px;padding:4px;margin-top:12px}
.qseg button{padding:8px;border-radius:8px;color:var(--muted);font-weight:700}
.qseg button.on{background:var(--fg);color:var(--bg)}
.qin{margin-top:10px;width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:16px}
.qlist{flex:1;overflow-y:auto;margin-top:10px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding-bottom:8px}
.qc{padding:8px 13px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--fg)}
.qc.on{background:var(--new);border-color:var(--new);color:#001;font-weight:700}
.qnone{color:var(--muted);font-size:14px;padding:16px 0;width:100%;text-align:center}
.qfoot{border-top:1px solid var(--line);padding-top:10px}
.qsel{font-size:13px;color:var(--muted);margin-bottom:8px}
.qsel b{color:var(--fg)}
.qbtns{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.qbtns button{padding:13px;border-radius:12px;font-weight:800}
.qlistbtn{border:1px solid var(--line)!important}
.qreel{background:var(--fg);color:var(--bg)}
.qbtns button:disabled{opacity:.35}
.qv{position:fixed;inset:0;z-index:44;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
.qvhead{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(11,11,15,.94);border-bottom:1px solid var(--line)}
.qvhead b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qvback{font-size:20px;padding:0 4px}
.qvreel{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--fg);color:var(--bg);white-space:nowrap}
.qvbody{max-width:760px;margin:0 auto;padding:12px 16px 40px}
.qvpr{color:var(--muted);font-size:12px;margin-bottom:10px}
.qvlist{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.qvc{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px}
.qvimg{position:relative;aspect-ratio:3/2;border-radius:8px;background:#000 center/contain no-repeat}   /* 切り取らない */
.qvimg span{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-size:12px}
.qvb{min-width:0}
.qvbad{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.qvbad .off{background:var(--accent);color:#fff;font-weight:800;font-size:12px;padding:0 7px;border-radius:999px}
.qvbad .ends{color:var(--accent2);border:1px solid var(--accent2);font-size:11px;padding:0 6px;border-radius:999px}
.qvt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:700;font-size:14px;line-height:1.5;color:var(--fg);text-decoration:none}
.qvp{margin-top:2px}.qvp b{font-size:16px}.qvp s{color:var(--muted);font-size:12px}
.qvm{color:var(--muted);font-size:12px}
@media (min-width:600px){ .qs{align-items:center} .qbox{border-radius:18px;border-bottom:1px solid var(--line)} .qvlist{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .qvc{grid-template-columns:minmax(0,1fr)} }
@keyframes qup{from{transform:translateY(30px);opacity:0}}
@media (prefers-reduced-motion:reduce){ .qbox{animation:none} }

/* ---- 今日の女優ポップアップ ---- */
.daily{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:24px;animation:dfade .2s ease-out}
.dbox{width:100%;max-width:340px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 18px 16px;text-align:center;animation:dpop .25s ease-out}
.dk{display:inline-block;font-size:12px;font-weight:700;color:var(--pick);border:1px solid var(--pick);border-radius:999px;padding:2px 10px}
.dn{font-size:26px;font-weight:800;margin-top:10px;line-height:1.3;word-break:break-all}
.dimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.dimgs img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#000;border-radius:6px;display:block}   /* 切り取らない */
.dsub{color:var(--muted);font-size:13px;line-height:1.6;margin-top:12px}
.dgo{display:block;width:100%;margin-top:14px;padding:13px;border-radius:12px;background:var(--pick);color:#1a1300;font-weight:800}
.dclose{display:block;width:100%;margin-top:6px;padding:10px;color:var(--muted);font-size:14px}
@keyframes dfade{from{opacity:0}}
@keyframes dpop{from{transform:scale(.94);opacity:0}}
@media (prefers-reduced-motion:reduce){ .daily,.dbox{animation:none} }

/* ---- MGS広告スライド（MGS公式の画像ウィジェットを表示。画像は切り取らない） ---- */
.slide.ad{justify-content:center}
.adcard{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px 14px 16px;position:relative}
.adlabel{font-size:11px;color:var(--muted);letter-spacing:.1em;margin-bottom:10px}
.mgsw{min-height:150px}   /* 中の見た目はMGSのウィジェット（MGS側のCSS）のまま。こちらでは手を加えない */
.adcard .info{margin-top:12px}
.adcta{background:var(--accent);color:#fff}

.hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.end{text-align:center;color:var(--muted);font-size:13px;line-height:1.8}
.end .next{display:inline-block;margin-top:12px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;color:var(--fg)}

@media (min-width:600px){ .slide{max-width:520px;margin:0 auto} }
/* スマホは動画を画面幅いっぱいに、上に寄せて大きく見せる */
@media (max-width:599px){ .slide{justify-content:flex-start} .player{width:auto;margin:0 -16px;border:0;border-radius:0} }
@media (max-height:640px){ .slide{padding-top:88px} .info{margin-top:10px} .price .now{font-size:22px} .cta{padding:11px;margin-top:10px} }
@media (prefers-reduced-motion:reduce){ .hint,#feed.in-next,#feed.in-prev{animation:none} }