/* FanSale design system */
:root{
  --bg:#f6f7f9; --surface:#fff; --ink:#14151b; --sub:#646875; --line:#e8e9ee;
  --accent:#ff2e63; --accent2:#ff8a3d; --gold:#f5a524; --danger:#e5484d;
  --grad:linear-gradient(135deg,var(--accent),var(--accent2));
  --r:16px; --r-s:10px;
  --sh1:0 1px 2px rgba(18,20,28,.05);
  --sh2:0 10px 30px -12px rgba(18,20,28,.14);
  --sh3:0 18px 44px -14px rgba(18,20,28,.22);
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Zen Kaku Gothic New",-apple-system,system-ui,"Hiragino Sans",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid #ffb3c7;outline-offset:2px;border-radius:6px}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdin{display:flex;align-items:center;gap:22px;height:60px}
.logo{font-weight:900;font-size:22px;letter-spacing:.01em;white-space:nowrap}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 13px;border-radius:99px;font-size:13.5px;font-weight:700;color:var(--sub);white-space:nowrap;transition:.15s}
.nav a:hover{background:#eef0f4;color:var(--ink)}
.nav a.on{background:var(--ink);color:#fff}

/* ---------- hero ---------- */
.hero{background:#12131a;color:#fff;position:relative;overflow:hidden;
  background-image:radial-gradient(720px 420px at 82% -8%,rgba(255,46,99,.32),transparent 62%),radial-gradient(560px 380px at 8% 110%,rgba(255,138,61,.18),transparent 60%)}
.hero .wrap{padding:76px 20px 66px;max-width:980px}
.hero-k{font-size:13px;font-weight:700;letter-spacing:.18em;color:#ffb3c4;margin-bottom:14px}
.hero h1{font-size:clamp(34px,6.4vw,64px);font-weight:900;line-height:1.22;letter-spacing:-.01em}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-x{margin-top:16px;color:#b9bcc9;font-size:15.5px;max-width:640px}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-chips span{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:99px;padding:7px 15px;font-size:13.5px;color:#d8dae2}
.hero-chips b{color:#fff;margin:0 3px}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;border-radius:99px;padding:12px 26px;font-size:15px;transition:.18s}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 10px 26px -10px rgba(255,46,99,.6)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(255,46,99,.66)}
.btn.ghost{border:1.5px solid rgba(255,255,255,.3);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.big{padding:15px 34px;font-size:16.5px;width:100%;justify-content:center}

/* ---------- sections ---------- */
.sec{padding:54px 0 8px}
.sec2{margin-top:40px}
.sec2 h2,.pghd h1{letter-spacing:-.01em}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.22em;color:var(--accent);margin-bottom:4px}
.sechead h2{font-size:clamp(22px,3.4vw,30px);font-weight:900;letter-spacing:-.01em}
.sechead p{color:#8b91a8;font-size:14px;margin-top:2px}
.more{font-weight:800;font-size:14px;color:var(--accent);display:inline-flex;align-items:center;gap:2px}
.more:hover{text-decoration:underline}

/* ---------- card ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:18px}
.hrow{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:thin}
.hrow .card{min-width:206px;max-width:206px;scroll-snap-align:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh1);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh3)}
.cover{position:relative;aspect-ratio:3/4;background:#eceef2;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;object-position:right center;transition:transform .3s}
.card:hover .cover img{transform:scale(1.045)}
.badge{display:inline-block;align-self:flex-start;width:max-content;background:var(--grad);color:#fff;font-weight:900;font-size:12px;padding:3px 10px;border-radius:99px;box-shadow:0 4px 14px -4px rgba(255,46,99,.7);letter-spacing:.02em}
.badge.big{font-size:16px;padding:7px 16px}
.badge-end{display:inline-block}.cbody>.badge-end .chips{font-size:11px;padding:2px 9px}
.ranknum{position:absolute;bottom:8px;left:8px;background:rgba(18,19,26,.82);backdrop-filter:blur(4px);color:#fff;font-weight:900;font-size:13px;border-radius:8px;padding:3px 9px;z-index:2}
.cbody{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.cbody h3{font-size:13.5px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.actress{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rate{display:flex;align-items:center;gap:6px;font-size:12px}
.rate b{color:var(--gold);font-weight:700;letter-spacing:-1px}
.rate b i{font-style:normal;color:#dcdfe6}
.rate em{font-style:normal;font-weight:800}
.rate small{color:var(--sub)}
.price{margin-top:auto;display:flex;align-items:baseline;gap:8px}
.price s{color:#a2a6b3;font-size:12.5px}
.price strong{font-size:22px;font-weight:900;color:var(--accent);letter-spacing:-.02em}
.price small{font-size:11px;color:var(--sub);margin-left:-4px}
.meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.meta code{font-size:10.5px;background:#eef0f4;color:#565b68;padding:2px 7px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tag{font-size:10.5px;border:1px solid var(--line);color:var(--sub);padding:2px 8px;border-radius:99px}
.chips{font-size:11.5px;font-weight:700;background:rgba(18,19,26,.82);color:#fff;padding:4px 10px;border-radius:99px;backdrop-filter:blur(4px)}
.chips.hot{background:var(--danger)}

/* ---------- pills / index ---------- */
.pillwall{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:9px 16px;font-weight:700;font-size:14px;box-shadow:var(--sh1);transition:.15s}
.pill b{font-size:12px;background:#ffe9ef;color:var(--accent);padding:2px 9px;border-radius:99px}
.pill:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh2)}
.ixgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ixcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:18px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--sh1);transition:.15s}
.ixcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh2)}
.ixname{font-weight:800;font-size:15.5px}
.ixcount{font-size:12.5px;color:var(--accent);font-weight:700}

/* ---------- page header ---------- */
.pghd{background:#12131a;color:#fff;padding:44px 0 38px;background-image:radial-gradient(640px 300px at 90% -20%,rgba(255,46,99,.25),transparent 60%)}
.pghd h1{font-size:clamp(26px,4.6vw,40px);font-weight:900;letter-spacing:-.01em}
.pghd p{color:#b9bcc9;font-size:14.5px;margin-top:6px}
.pghd .wrap{padding:0 20px}
.pghd + .wrap,.pghd ~ .wrap{padding-top:34px;padding-bottom:70px}
.empty{color:var(--sub);text-align:center;padding:60px 0}

/* ---------- about box / stats ---------- */
.aboutbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:34px;box-shadow:var(--sh1)}
.aboutbox h2{font-size:21px;font-weight:900;margin-bottom:10px}
.aboutbox p{color:var(--sub);font-size:14.5px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:22px}
.statgrid>div{background:#f8f9fb;border:1px solid var(--line);border-radius:var(--r-s);padding:18px;text-align:center}
.statgrid b{display:block;font-size:28px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.statgrid span{font-size:12.5px;color:var(--sub)}
.dtable{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line);margin-top:26px}
.dtable th{background:#f2f3f6;font-size:13px;text-align:left;padding:10px 16px}
.dtable td{padding:9px 16px;border-top:1px solid var(--line);font-size:14px}
.note{color:var(--sub);font-size:13px;margin-top:14px}
.prose{padding-top:30px;padding-bottom:70px;max-width:820px}
.prose h2{font-size:19px;font-weight:900;margin:26px 0 8px}
.prose p{color:#3c404c;font-size:15px}

/* ---------- item page ---------- */
.crumb{padding:18px 0 6px;font-size:13px;color:var(--sub)}
.crumb a:hover{color:var(--accent)}
.itemgrid{display:grid;grid-template-columns:420px 1fr;gap:34px;padding:14px 0 10px;align-items:start}
.iposter{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--sh2)}
.iposter>.badge{position:absolute;top:12px;left:12px;font-size:18px;padding:8px 18px;z-index:3}
.iposter img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:right center}
.iinfo h1{font-size:clamp(19px,2.6vw,24px);font-weight:900;line-height:1.55;letter-spacing:-.005em}
.icode{display:inline-block;margin-top:8px;font-size:12px;background:#eef0f4;color:#565b68;padding:3px 10px;border-radius:7px;font-family:ui-monospace,Menlo,monospace}
.irate{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px}
.irate b{color:var(--gold);letter-spacing:0}
.irate b i{font-style:normal;color:#dcdfe6}
.irate small{color:var(--sub)}
.endbar{margin:16px 0;padding:12px 16px;border-radius:var(--r-s);background:#fff7ed;border:1.5px solid #fed7aa;font-size:14px}
.endbar.danger{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.iprice{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh1);margin-bottom:18px}
.iprice s{color:#a2a6b3;font-size:14px}
.iprice div{margin:2px 0 14px}
.iprice strong{font-size:36px;font-weight:900;color:var(--accent);letter-spacing:-.02em}
.iprice span{color:var(--sub);font-size:13px}
.iprice-note{font-size:11.5px;color:var(--sub);margin-top:10px;text-align:center}
.itable{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line);font-size:14px}
.itable th{width:110px;text-align:left;background:#f6f7f9;padding:10px 14px;font-size:13px;color:var(--sub);font-weight:700;border-top:1px solid var(--line)}
.itable td{padding:10px 14px;border-top:1px solid var(--line)}
.itable a{color:#2456d6}
.itable a:hover{text-decoration:underline}
.samples{display:flex;overflow-x:auto;gap:8px;padding:12px;border-top:1px solid var(--line);scrollbar-width:thin}
.samples img{height:120px;border-radius:8px;flex:none}
.sec2 h2{font-size:20px;font-weight:900;margin-bottom:16px}

/* ---------- search ---------- */
.searchbox{display:flex;gap:10px;max-width:640px;margin-bottom:26px}
.searchbox input{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:13px 22px;font-size:15.5px;font-family:inherit;box-shadow:var(--sh1)}
.searchbox input:focus{outline:none;border-color:var(--accent)}
.searchbox button{background:var(--grad);color:#fff;border:0;border-radius:99px;padding:0 30px;font-weight:800;font-size:15px;font-family:inherit;cursor:pointer}

/* ---------- footer ---------- */
.ft{background:#12131a;color:#9da2b1;margin-top:70px;padding:52px 0 34px;font-size:13.5px}
.ftgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)}
.ftgrid b{color:#fff;font-size:17px;font-weight:900}
.ftgrid p{margin-top:8px;line-height:1.8}
.ftlinks{display:flex;flex-direction:column;gap:8px}
.ftlinks a:hover{color:#fff}
.fine{margin-top:18px;line-height:1.9;font-size:12px;color:#7d8290}
.fine a{text-decoration:underline}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .itemgrid{grid-template-columns:1fr}
  .ftgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .hdin{gap:12px}
  .nav a{padding:7px 10px;font-size:12.5px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .cbody h3{font-size:12.5px}
  .price strong{font-size:19px}
  .hero .wrap{padding:56px 20px 48px}
  .ftgrid{grid-template-columns:1fr}
}

/* ===== 作品DBレイヤ（av-wiki代替）＋ 人気ランキング ===== */
.clsbadge{font-size:10px;font-weight:800;padding:1.5px 6px;border-radius:5px;color:#fff;white-space:nowrap;flex:none}
.b-mgs{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.b-ama{background:linear-gradient(135deg,#0ea5e9,#0369a1)}.b-vid{background:#475569}

/* 縦リスト（frow/poprow）: 濃背景なので文字色は全部明示 */
.fwrap{display:flex;flex-direction:column;gap:8px}
.frow{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;text-decoration:none;color:#e8ebf7;
 background:linear-gradient(90deg,#181b26 0%,#151824 100%);border:1px solid #232637;transition:all .16s ease}
.frow:hover{background:linear-gradient(90deg,#1f2436 0%,#181b28 100%);border-color:#ff2e6355;transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.frow:hover .ftitle{color:#ff6b93}
.fthumb{flex:none;width:96px;height:60px;border-radius:8px;overflow:hidden;background:#000;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.fthumb img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.fbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ftitle{font-weight:700;font-size:13.5px;color:#e8ebf7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.fmeta{display:flex;align-items:center;gap:8px;font-size:11px;color:#9aa3c7;min-width:0}
.fmeta em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;color:#aab4e8}
.fmeta code{background:#0c0e15;border:1px solid #262a3d;padding:1px 6px;border-radius:5px;font-size:10.5px;flex:none;color:#93a0c8}
.fdate{font-weight:800;font-size:12px;color:var(--accent);width:44px;flex:none;text-align:center}
.fprice{font-size:13px;flex:none;color:#ffd166;font-weight:800;background:#ffd16612;padding:4px 10px;border-radius:8px}
.badge.sm{font-size:10.5px;padding:1.5px 6px;flex:none}
.popbadge{background:linear-gradient(135deg,#ff2e63,#ff8f3d);color:#fff;font-weight:800;font-size:11px;padding:2px 8px;border-radius:6px;text-decoration:none;display:inline-block;width:max-content}

/* 日セクション/カレンダー（明背景・色を明示） */
.daysec{margin:14px 0 24px}
.dayhd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:6px 0 10px}
.dayhd h2{font-size:17px;color:var(--ink)}
.dayhd small{color:#68708a;font-weight:400}
.daynav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;font-size:13px;color:var(--ink)}
.daynav span b{color:#b8860b}
.daynav a{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.endbar.ok{background:#12281f;border-color:#1d4a35;color:#7ee2b8}
.dategrid{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:22px;align-items:start}
.calbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--sh1)}
.calbox h2{font-size:16px;margin-bottom:8px;color:var(--ink)}
table.cal{width:100%;border-collapse:collapse;table-layout:fixed}
table.cal th{font-size:11px;color:#68708a;padding:4px 0;font-weight:600}
table.cal td{border:1px solid var(--line);text-align:center;padding:4px 0;font-size:12px;color:var(--ink)}
table.cal td.dim{opacity:.32}
table.cal td.today{outline:2px solid var(--accent);outline-offset:-2px}
table.cal td.has a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
table.cal td.has:hover{background:#fff1f5}
table.cal td.has i{font-style:normal;font-size:10px;color:var(--accent);font-weight:800}
.sec2{margin:22px 0}
.sec2 h2{font-size:19px;color:var(--ink)}
.note{font-size:12.5px;color:#68708a;margin-top:4px}

/* サンプル動画プレイヤー（DMM litevideo iframe） */
.player{position:relative;width:100%;max-width:720px;margin:10px auto 4px;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ===== 人気NOW（MOST WATCHED）: 濃背景セクション → 文字色は全部明示 ===== */
.popsec{background:linear-gradient(180deg,#16121d 0%,#191725 100%);border-radius:22px;border:1px solid #2a2740;padding:22px 0 10px;margin:8px 0 26px}
.popsec .sechead h2{color:#fff}
.popsec .sechead p{color:#b9c0dd}
.popsub{color:#ff5c85;font-weight:900}
.poprail{display:grid;grid-auto-flow:column;grid-auto-columns:196px;gap:14px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x proximity}
.poprail::-webkit-scrollbar{height:8px}.poprail::-webkit-scrollbar-thumb{background:#33374d;border-radius:8px}
.popcard{background:#14161f;border:1px solid #262a3d;border-radius:14px;overflow:hidden;text-decoration:none;color:#e8ebf7;display:flex;flex-direction:column;transition:all .16s;scroll-snap-align:start}
.popcard:hover{border-color:#ff2e63aa;transform:translateY(-3px);box-shadow:0 12px 26px rgba(255,46,99,.14)}
.popcover{position:relative;aspect-ratio:3/4;background:#000}
.popcover img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.poprank{position:absolute;top:8px;left:8px;min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:#fff;background:#000c;border-radius:8px;padding:0 6px;backdrop-filter:blur(4px)}
.poprank.t1,.poprank.t2{background:linear-gradient(135deg,#ffd166,#ff8f3d);color:#231207}
.seeds{position:absolute;bottom:8px;right:8px;font-size:11px;font-weight:800;color:#7ee2b8;background:#000b;border-radius:6px;padding:2px 7px}
.popbody{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.poptitle{font-size:12.5px;font-weight:700;line-height:1.45;height:2.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#e8ebf7}
.popmeta{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#9aa3c7;min-width:0}
.popmeta em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#aab4e8}
.popmeta code{background:#0c0e15;padding:1px 5px;border-radius:4px;font-size:10px;color:#93a0c8;flex:none}
.popfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px}
.popfoot b{color:#ffd166;font-size:15px}
.popnote{background:#14161f;border:1px solid #262a3d;border-left:3px solid #ff2e63;border-radius:12px;padding:12px 16px;margin:14px 0 18px;font-size:12.5px;color:#c3c9e4;line-height:1.7}
.popnote b:first-child{color:#fff;display:block;margin-bottom:4px;font-size:13.5px}
.poplist{background:#14161f;border:1px solid #262a3d;border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:6px}
.poprow{display:flex;align-items:center;gap:13px;padding:7px 10px;border-radius:12px;text-decoration:none;color:#e8ebf7;background:linear-gradient(90deg,#181b26,#151824);border:1px solid #232637;transition:all .16s}
.poprow:hover{background:linear-gradient(90deg,#1f2436,#181b28);border-color:#ff2e6355;transform:translateX(2px)}
.poprow:hover .ftitle{color:#ff6b93}
.prank{flex:none;width:40px;text-align:center;font-weight:900;font-size:19px;color:#5a617e;font-style:italic}
.prank.t2{color:#ff8f3d}.prank.t1{color:#ffd166;text-shadow:0 0 14px #ffd16655}
.pseeds{flex:none;text-align:center;width:64px}
.pseeds b{display:block;color:#7ee2b8;font-size:13px}
.pseeds small{font-size:9.5px;color:#8a90a8}
.pseeds.mgs b{color:#a78bfa}
.poplist.mgs{margin-top:8px}
@media(max-width:860px){.dategrid{grid-template-columns:1fr}.fmeta em{max-width:120px}.fthumb{width:74px;height:48px}.poprow .fprice{font-size:12px}.prank{width:30px;font-size:16px}.popsec{border-radius:14px}}

/* ===== ヘッダー検索 & item女優強調 ===== */
.hsearch{margin-left:auto;display:flex;flex:none;background:#f1f2f7;border:1.5px solid var(--line);border-radius:99px;padding:3px 4px 3px 14px;transition:.15s;width:min(260px,34vw)}
.hsearch:focus-within{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(255,46,99,.12)}
.hsearch input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:13px;font-family:inherit;color:var(--ink)}
.hsearch button{border:0;background:var(--grad);color:#fff;border-radius:99px;width:30px;height:30px;font-size:13px;cursor:pointer;flex:none}
@media(max-width:1080px){.hsearch{width:min(170px,38vw)}.hdin .nav{flex:1;min-width:60px}}
.iact{font-size:16px;font-weight:800;margin-top:8px;color:var(--ink)}
.iact a{color:var(--accent);text-decoration:none;border-bottom:2px solid rgba(255,46,99,.25);padding-bottom:1px}
.iact a:hover{border-bottom-color:var(--accent)}
.iact a.who{font-size:13px;font-weight:700;color:#8b91a8;border-bottom-style:dotted}

/* ===== 記事型itemページ ===== */
.article{max-width:900px}
.post{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(18px,4vw,40px);box-shadow:var(--sh2)}
.ptitle{font-size:clamp(19px,2.8vw,26px);font-weight:900;line-height:1.5;letter-spacing:-.01em;margin:10px 0 6px}
.h1sub{font-style:normal;color:var(--accent);font-size:.72em;font-weight:900}
.pmeta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#68708a;margin-bottom:14px}
.pmeta code{background:#f1f2f7;border:1px solid var(--line);padding:2px 8px;border-radius:6px;font-size:11.5px;color:#4a5068}
.pm-rate b{color:#f5a524;letter-spacing:1px}
.pcover{position:relative;max-width:360px;margin:6px auto 18px;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh2)}
.pcover>img,.pcover a>img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:right center;display:block}
.pcover>.badge{position:absolute;top:12px;left:12px;font-size:17px;padding:7px 15px;z-index:3}
.pcover>.popbadge,.pcover>.clsbadge{position:absolute;z-index:3}
.pcover>.popbadge{top:14px;right:12px;font-size:12px;padding:4px 10px}
.pcover>.clsbadge{bottom:12px;right:12px;font-size:11px;padding:3px 8px}
.plead{font-size:15.5px;line-height:2.05;margin:16px 0}
.plead a{color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,46,99,.3)}
.pans{background:linear-gradient(135deg,#fff5f7,#fffaf3);border:1.5px solid #ffd7e0;border-radius:14px;padding:16px 20px;margin:18px 0 24px}
.pq{font-weight:800;font-size:15px;color:#33364a;margin-bottom:8px}
.pq::before{content:"Q.";color:var(--accent);margin-right:8px;font-weight:900}
.pans-a{font-size:16.5px;font-weight:800;line-height:1.9}
.pans-a::before{content:"A.";color:#0a9d5a;margin-right:8px;font-weight:900}
.pans-a a{color:var(--accent);text-decoration:none;border-bottom:2px solid rgba(255,46,99,.35);padding-bottom:1px}
.pans-a a:hover{border-bottom-color:var(--accent)}
.pans-a a.who{color:#68708a;border-bottom-style:dotted;font-size:14px}
.psec{margin:30px 0 6px}
.psec h2{font-size:19px;font-weight:900;padding:8px 0 8px 14px;border-left:5px solid var(--accent);margin-bottom:14px;letter-spacing:-.01em}
.psale .iprice{display:flex;align-items:center;flex-wrap:wrap;gap:14px;background:#12131a;border-radius:14px;padding:16px 20px;color:#fff}
.psale .iprice s{color:#9aa3c7}
.psale .iprice strong{font-size:30px;color:#ffd166}
.psale .iprice .btn{margin-left:auto}
.psale .iprice-note{flex-basis:100%;color:#8a90a8;font-size:11.5px;margin-top:2px}
.psign{margin-top:28px;padding-top:14px;border-top:1px dashed var(--line);font-size:12px;color:#8a90a8;line-height:1.8}
.psign a{color:var(--accent)}
@media(max-width:860px){.psale .iprice .btn{margin-left:0;flex-basis:100%;text-align:center}}

/* ==========================================================
   FanSale 2026 Round1 — tokens / header / hero / CTA
   ========================================================== */
:root{
  color-scheme:light;accent-color:var(--accent);
  /* --- gray 7段 --- */
  --gray-1:#fbfcfd;  /* 雪:埋め込み白面 */
  --gray-2:#f6f7f9;  /* 霞:ページ背景 */
  --gray-3:#edeff1;  /* 薄雲:押沈め・nav hover */
  --gray-4:#e2e5eb;  /* 霧罫:境界線 */
  --gray-5:#c3c8d4;  /* 錫:placeholder */
  --gray-6:#8b91a3;  /* 澄:補助文字 */
  --gray-7:#14151b;  /* 墨:本文インク */
  /* --- 既存セクション互換エイリアス --- */
  --ink:var(--gray-7);--sub:var(--gray-6);--line:var(--gray-4);--bg:var(--gray-2);
  /* --- surface階層 --- */
  --surface:#ffffff;         /* L1 白土:カード */
  --surface-2:var(--gray-1); /* L2 白の上の白:浮き面 */
  --surface-3:var(--gray-3); /* L3 くぼみ:入力地 */
  --glass-hd:rgba(255,255,255,.86);  /* 白硝:hdr半透明 */
  --glass-hd2:rgba(255,255,255,.94); /* 白磁:scroll濃度 */
  --night:#12131a;           /* L4 夜空:hero・ranknum */
  /* --- accent --- */
  --accent:#ff2e63;   /* ローズ:主CTA・リンク */
  --accent2:#ff8a3d;  /* アンバー:グラデ末端・数値 */
  --accent-deep:#e01552;       /* 深紅:押下 */
  --grad:linear-gradient(135deg,var(--accent),var(--accent2)); /* 朝陽 */
  --tint:color-mix(in srgb,var(--accent) 9%,#fff);   /* 桜湯:淡面 */
  --tint-2:color-mix(in srgb,var(--accent) 16%,#fff);/* 薄紅:ring */
  /* --- 意味色 --- */
  --ok:#1f9d6c;    /* 松:セール中 */
  --gold:#f5a524;  /* 金:評価・更新ランプ */
  --danger:#e5484d;/* 朱:終了間近 */
  /* --- hero専用 --- */
  --dawn:#ffb3c4;             /* 薄明:hero-k */
  --mist:#b9bcc9;             /* 霧:hero-x */
  --moon:#d8dae2;             /* 月光:chips文字 */
  --glass:rgba(255,255,255,.06);   /* 硝子:chips地 */
  --frost:rgba(255,255,255,.16);   /* 氷紋:chips罫 */
  --dew:rgba(255,255,255,.12);     /* 朝露:ghost釉 */
  --frostline:rgba(255,255,255,.32);/* 霜:ghost罫 */
  /* --- type scale --- */
  --font:"Zen Kaku Gothic New",-apple-system,system-ui,"Hiragino Sans",sans-serif;
  --fs-xs:12px;--fs-s:13.5px;--fs-m:15px;--fs-lg:18px;
  --fs-h2:clamp(22px,3.4vw,30px);--fs-hero:clamp(32px,6.4vw,64px);
  --lh:1.7;--lh-tight:1.22;
  /* --- shadow 3段＋CTAグロー --- */
  --sh1:0 1px 2px rgba(18,20,28,.05);         /* 接地:静止 */
  --sh2:0 10px 30px -12px rgba(18,20,28,.14); /* 浮遊:hover */
  --sh3:0 18px 44px -14px rgba(18,20,28,.22); /* 昇天:展開 */
  --sh-cta:0 10px 26px -10px color-mix(in srgb,var(--accent) 52%,transparent); /* 灯:primary */
  /* --- radius / layout --- */
  --r-xl:24px;--r:16px;--r-s:10px;--r-xs:8px;--r-pill:999px;
  --hd-h:64px;--wrap:1240px;--gutter:20px;
}

/* ------------------------------------------------ header */
.hd{position:sticky;top:0;z-index:50;background:var(--glass-hd);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--line)}
.hdin{display:flex;align-items:center;gap:16px;height:var(--hd-h)}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)} /* 流れの両岸 */
.nav::-webkit-scrollbar{display:none}
.nav a{display:inline-flex;align-items:center;padding:9px 13px;border-radius:var(--r-pill);
  font-size:var(--fs-s);font-weight:700;line-height:1;color:var(--sub);white-space:nowrap;
  transition:background-color .18s,color .18s}
.nav a:hover{background:var(--gray-3);color:var(--ink)}
.nav a.on{background:var(--ink);color:#fff;box-shadow:var(--sh1)}
.nav a.on::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent2);margin-left:7px} /* 灯:現在地 */
.nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-pill)}
.hsearch{margin-left:auto;display:flex;align-items:center;flex:none;min-width:0;
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px 4px 3px 14px;width:min(260px,32vw);
  transition:width .25s,background .2s,box-shadow .2s,border-color .2s}
.hsearch:focus-within{width:min(300px,38vw);background:var(--surface);
  border-color:var(--accent);box-shadow:0 0 0 3px var(--tint-2)} /* 薄紅リング */
.hsearch input{flex:1;min-width:0;border:0;background:transparent;outline:0;
  font-family:inherit;font-size:13px;color:var(--ink)}
.hsearch input::placeholder{color:var(--gray-5)}
.hsearch button{flex:none;border:0;background:var(--grad);color:#fff;border-radius:var(--r-pill);
  width:30px;height:30px;font-size:13px;cursor:pointer;transition:transform .15s}
.hsearch button:hover{transform:scale(1.08)}
.hsearch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* scroll()のみのスクロール表現:最上部=平面→200pxで影が定着(非対応は現状維持) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .hd{animation:hd-elev linear both;animation-timeline:scroll(root);animation-range:0 200px}
    @keyframes hd-elev{to{background:var(--glass-hd2);border-bottom-color:transparent;box-shadow:var(--sh2)}}
  }
}

/* ------------------------------------------------ hero */
.hero{position:relative;overflow:hidden;background:var(--night);color:#fff;
  background-image:radial-gradient(720px 420px at 82% -8%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 62%),
                   radial-gradient(560px 380px at 8% 112%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 60%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; /* 地平線 */
  background:linear-gradient(90deg,transparent 8%,color-mix(in srgb,var(--accent2) 55%,transparent) 50%,transparent 92%)}
.hero .wrap{max-width:1000px;padding:76px var(--gutter) 66px}
.hero-k{display:inline-flex;align-items:center;font-size:var(--fs-s);font-weight:700;
  letter-spacing:.18em;color:var(--dawn);margin-bottom:14px}
.hero-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold); /* 常夜灯 */
  margin-right:10px;box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 60%,transparent);
  animation:live 2.6s ease-out infinite}
@keyframes live{70%,100%{box-shadow:0 0 0 9px transparent}}
.hero h1{font-size:var(--fs-hero);font-weight:900;line-height:1.22;letter-spacing:-.01em;text-wrap:balance}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-x{margin-top:16px;color:var(--mist);font-size:var(--fs-m);max-width:640px;text-wrap:pretty}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-chips span{display:inline-flex;align-items:center;padding:7px 15px;border-radius:var(--r-pill);
  border:1px solid var(--frost);background:var(--glass);font-size:var(--fs-s);font-weight:600;color:var(--moon)}
.hero-chips b{margin:0 4px;font-size:1.1em;font-weight:900;letter-spacing:-.02em;font-feature-settings:"tnum";
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* 数値=朝陽 */
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;line-height:1.2;border-radius:var(--r-pill);padding:13px 28px;font-size:var(--fs-m);
  transition:transform .18s,box-shadow .18s,background-position .4s}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--accent)} /* 二重光輪 */
.btn.primary{background:var(--grad);background-size:160% 160%;color:#fff;
  box-shadow:var(--sh-cta),var(--sh1);text-shadow:0 1px 2px color-mix(in srgb,var(--night) 25%,transparent)}
.btn.primary:hover{transform:translateY(-2px);background-position:100% 50%; /* グラデ走査 */
  box-shadow:0 16px 32px -12px color-mix(in srgb,var(--accent) 60%,transparent),var(--sh1)}
.btn.ghost{border:1px solid var(--frostline);color:#fff;background:transparent}
.btn.ghost:hover{background:var(--dew);border-color:color-mix(in srgb,#fff 50%,transparent)}
.btn.big{padding:16px 34px;font-size:16.5px;width:100%}
.hero-cta .btn.primary{padding:15px 32px}                                               /* 階層:主 */
.hero-cta .btn.ghost{padding:12px 22px;font-size:14px;font-weight:700;color:rgba(255,255,255,.9)} /* 従 */

/* ------------------------------------------------ section heads */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.22em;color:var(--accent);margin-bottom:6px}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:1px;background:var(--grad)} /* 罫 */
.sechead h2{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.01em;text-wrap:balance}
.sechead p{color:var(--sub);font-size:14px;margin-top:2px}
.more{font-weight:800;font-size:14px;color:var(--accent);display:inline-flex;align-items:center;gap:2px}
.more:hover{color:var(--accent-deep);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:2px}
.wrap{padding-inline:var(--gutter)}

/* ------------------------------------------------ responsive: 375px 最優先 */
@media (max-width:1080px){ /* hsearch縮小運用の踏襲 */
  .hsearch{width:min(220px,28vw)}
  .hsearch:focus-within{width:min(260px,34vw)}
}
@media (max-width:744px){
  .hdin{flex-wrap:wrap;height:auto;row-gap:6px;padding:6px 0 4px}
  .hsearch{order:1;flex:1;width:auto;min-width:0;padding:4px 4px 4px 16px}
  .hsearch:focus-within{width:auto}
  .hsearch input{font-size:16px} /* iOSフォーカスズーム封じ */
  .hsearch button{width:32px;height:32px}
  .nav{order:2;flex:1 1 100%}
  .nav a{padding:8px 13px}
  .hero .wrap{padding:56px 16px 48px}
  .hero-x{font-size:14.5px}
  .hero-chips{gap:8px}
  .hero-chips span{padding:6px 13px;font-size:var(--fs-xs)}
  .hero-cta{display:grid;grid-template-columns:1fr;gap:10px} /* CTAスタック */
  .hero-cta .btn{width:100%}
  .wrap{padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){
  .hero-k::before{animation:none}
  .btn,.nav a,.hsearch,.hsearch button{transition:none}
}


/* Round2 cards/lists */
/* ==== :root 追加分(Round1の:rootの続きにマージ) ==== */
:root{--ok:#0fa968}

/* ---- 状態バッジ体系: %OFF=grad / セール中=ok / 終了間近=danger / 順位・統計=暗scrim ---- */
.badge{display:inline-block;width:max-content;background:var(--grad);color:#fff;font-weight:900;font-size:12px;line-height:1.2;padding:3px 10px;border-radius:99px;letter-spacing:.02em;box-shadow:0 4px 14px -4px rgba(255,46,99,.7)}
.badge.big{font-size:16px;padding:7px 16px}
.badge.sm{font-size:10.5px;padding:2px 7px}
.chips{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:700;line-height:1.4;background:rgba(18,19,26,.82);color:#fff;padding:4px 10px;border-radius:99px;backdrop-filter:blur(4px)}
.cbody .chips:not(.hot){background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:color-mix(in srgb,var(--ok) 70%,var(--ink));backdrop-filter:none}
.chips.hot{background:var(--danger);color:#fff;animation:hotpulse 2.8s ease-in-out infinite}
@keyframes hotpulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--danger) 15%,transparent)}}
@media (prefers-reduced-motion:reduce){.chips.hot{animation:none}}
.ranknum{position:absolute;bottom:8px;left:8px;z-index:2;background:rgba(18,19,26,.82);backdrop-filter:blur(4px);color:#fff;font-weight:900;font-size:13px;line-height:1;padding:4px 8px;border-radius:8px;font-variant-numeric:tabular-nums}

/* ---- セールカード ---- */
.hrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:2px 0 4px;overflow:visible;scroll-snap-type:none}
.hrow .card{min-width:0;max-width:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh1);text-decoration:none;color:inherit;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.cover{position:relative;aspect-ratio:3/4;background:#eceef2;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;transition:transform .35s ease}
@media (hover:hover){
 .card:hover,.card:focus-visible{transform:translateY(-4px);box-shadow:var(--sh3);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
 .card:hover .cover img{transform:scale(1.045)}
}
.card:active{transform:translateY(-1px)}
.card:focus-visible,.popcard:focus-visible,.frow:focus-visible,.poprow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cbody{padding:12px 12px 14px;flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;row-gap:7px}
.cbody>.badge{grid-area:1/1;font-size:11px;padding:3px 9px}
.cbody>.badge-end{grid-area:2/1;justify-self:start;max-width:100%}
.cbody>.badge-end .chips{font-size:10.5px;padding:2px 8px}
.cbody>h3{grid-area:3/1/4/-1;font-size:13px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em;min-width:0}
.cbody>.actress{grid-area:4/1/5/-1;font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cbody>.rate{grid-area:5/1/6/-1;align-self:start;display:flex;align-items:center;gap:6px;font-size:12px;font-variant-numeric:tabular-nums}
.rate b{color:var(--gold);font-weight:700;letter-spacing:-1px}
.rate b i{font-style:normal;color:#dcdfe6}
.rate em{font-style:normal;font-weight:800}
.rate small{color:var(--sub)}
.cbody>.price{grid-area:6/1/7/-1;display:flex;align-items:baseline;gap:8px;min-width:0}
.price s{color:#a2a6b3;font-size:12.5px;text-decoration-thickness:1.5px}
.price strong{font-size:20px;font-weight:900;color:var(--accent);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.price small{font-size:11px;color:var(--sub);margin-left:-2px}
.cbody>.meta{grid-area:7/1/8/-1;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.meta code{font-size:10.5px;background:#eef0f4;color:#565b68;padding:2px 7px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.tag{font-size:10.5px;border:1px solid var(--line);color:var(--sub);padding:2px 8px;border-radius:99px;white-space:nowrap}
@media (min-width:560px){
 .hrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
 .cbody{padding:13px 14px 15px}
 .cbody>.badge{font-size:12px;padding:4px 11px}
 .cbody>.badge-end .chips{font-size:11px;padding:2px 9px}
 .cbody>h3{font-size:13.5px}
 .price strong{font-size:22px}
}
@media (min-width:744px){.hrow{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){
 .hrow{grid-auto-flow:column;grid-auto-columns:212px;gap:16px;padding:4px 2px 18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;mask-image:linear-gradient(90deg,#000 0 calc(100% - 44px),transparent)}
 .hrow .card{scroll-snap-align:start}
 .cbody{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;column-gap:10px}
 .cbody>.badge-end{grid-area:1/2;justify-self:end}
 .cbody>h3{grid-area:2/1/3/-1}
 .cbody>.actress{grid-area:3/1/4/-1}
 .cbody>.rate{grid-area:4/1/5/-1}
 .cbody>.price{grid-area:5/1/6/-1}
 .cbody>.meta{grid-area:6/1/7/-1}
}

/* ---- 人気NOW popcard ---- */
.poprail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(146px,42vw,196px);gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 2px 14px;scrollbar-width:thin;mask-image:linear-gradient(90deg,#000 0 calc(100% - 30px),transparent)}
.poprail::-webkit-scrollbar{height:8px}
.poprail::-webkit-scrollbar-thumb{background:#33374d;border-radius:8px}
.popcard{background:#14161f;border:1px solid #262a3d;border-radius:14px;overflow:hidden;text-decoration:none;color:#e8ebf7;display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;scroll-snap-align:start}
@media (hover:hover){
 .popcard:hover,.popcard:focus-visible{transform:translateY(-3px);border-color:#ff2e63aa;box-shadow:0 12px 26px rgba(255,46,99,.16)}
 .popcard:hover .popcover img{transform:scale(1.04)}
}
.popcard:active{transform:translateY(-1px)}
.popcover{position:relative;aspect-ratio:3/4;background:#000;overflow:hidden}
.popcover img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;transition:transform .35s ease}
.poprank{position:absolute;top:8px;left:8px;z-index:2;background:rgba(18,19,26,.82);backdrop-filter:blur(4px);color:#fff;font-weight:900;font-style:italic;font-size:14px;line-height:1;padding:4px 9px;border-radius:8px;font-variant-numeric:tabular-nums}
.poprank.t1{color:var(--gold);text-shadow:0 0 12px rgba(245,165,36,.45)}
.poprank.t2{color:var(--accent2)}
.seeds{position:absolute;bottom:8px;right:8px;z-index:2;font-size:11px;font-weight:800;color:color-mix(in srgb,var(--ok) 80%,#fff);background:rgba(18,19,26,.82);backdrop-filter:blur(4px);border-radius:6px;padding:3px 7px;line-height:1;font-variant-numeric:tabular-nums}
.popbody{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.poptitle{font-size:12.5px;font-weight:700;line-height:1.45;height:2.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#e8ebf7}
.popmeta{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#9aa3c7;min-width:0}
.popmeta em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:#aab4e8}
.popmeta code{background:#0c0e15;padding:1px 5px;border-radius:4px;font-size:10px;color:#93a0c8;flex:none;font-variant-numeric:tabular-nums}
.popfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px}
.popfoot b{color:var(--gold);font-size:15px;font-variant-numeric:tabular-nums}

/* ---- 縦リスト行 frow / poprow ---- */
.fwrap{display:flex;flex-direction:column;gap:8px}
.frow,.poprow{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;text-decoration:none;color:#e8ebf7;background:linear-gradient(90deg,#181b26,#151824);border:1px solid #232637;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.poprow{gap:13px;padding:7px 10px}
@media (hover:hover){
 .frow:hover,.poprow:hover{background:linear-gradient(90deg,#1f2436,#181b28);border-color:#ff2e6355}
 .frow:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.35)}
 .poprow:hover{transform:translateX(2px)}
 .frow:hover .ftitle,.poprow:hover .ftitle{color:#ff6b93}
}
.frow:active{transform:translateY(0)}
.poprow:active{transform:translateX(0)}
.fthumb{flex:none;width:96px;height:60px;border-radius:8px;overflow:hidden;background:#000;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.fthumb img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.fbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ftitle{font-weight:700;font-size:13.5px;color:#e8ebf7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.fmeta{display:flex;align-items:center;gap:8px;font-size:11px;color:#9aa3c7;min-width:0}
.fmeta em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;color:#aab4e8}
.fmeta code{background:#0c0e15;border:1px solid #262a3d;padding:1px 6px;border-radius:5px;font-size:10.5px;flex:none;color:#93a0c8;font-variant-numeric:tabular-nums}
.fmeta .clsbadge{flex:none;font-size:10px;font-weight:700;padding:1px 7px;border-radius:5px;background:#0c0e15;border:1px solid #262a3d;color:#93a0c8}
.fmeta .clsbadge.b-vid{color:#ff6b93;border-color:#ff2e6355}
.fprice{font-size:13px;flex:none;color:var(--gold);font-weight:800;background:color-mix(in srgb,var(--gold) 10%,transparent);padding:4px 10px;border-radius:8px;font-variant-numeric:tabular-nums}
.prank{flex:none;width:40px;text-align:center;font-weight:900;font-style:italic;font-size:19px;line-height:1;color:#5a617e;font-variant-numeric:tabular-nums}
.prank.t1{color:var(--gold);text-shadow:0 0 14px rgba(245,165,36,.35)}
.prank.t2{color:var(--accent2)}
.pseeds{flex:none;width:64px;text-align:center;font-variant-numeric:tabular-nums}
.pseeds b{display:block;color:color-mix(in srgb,var(--ok) 82%,#fff);font-size:13.5px;line-height:1.2;font-weight:800}
.pseeds small{display:block;font-size:9.5px;color:#8a90a8;letter-spacing:.03em}
.pseeds.mgs b{color:#a78bfa}
.poplist{background:#14161f;border:1px solid #262a3d;border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:6px}
.poplist.mgs{margin-top:8px}
@media (max-width:420px){
 .fthumb{width:84px}
 .prank{width:30px;font-size:17px}
 .pseeds{width:54px}
}


/* R3 .post 最終仕上げ（既定義の直後に追記して上書き） */
:root{--ok:#0a9d5a;--ink2:#232735;--hair:#eef0f6;--measure:47em}

/* 1 .post 記事面：読み出しと本文の行長 */
.post{border-radius:22px;padding:clamp(20px,4.6vw,48px) clamp(18px,4.4vw,48px)}
.post>*+*{margin-top:.25em}
.post>p,.plead{font-size:15.5px;line-height:2.05;letter-spacing:.005em;color:var(--ink2);max-width:var(--measure);text-wrap:pretty}
.plead{margin:18px 0 16px}
.plead b{background:linear-gradient(transparent 62%,#ffe9ee 62%)}

/* 2 H1の視覚順反転（質問を先頭化）とメタ罫線 */
.ptitle{display:flex;flex-direction:column-reverse;gap:10px;margin:12px 0 10px}
.ptitle::first-letter{}
.h1sub{display:block;font-weight:900;font-size:clamp(15px,3.6vw,19px);line-height:1.6;letter-spacing:.02em;padding:8px 2px 12px;border-bottom:3px solid var(--line)}
.h1sub::after{content:"";display:block;width:52px;height:3px;margin-top:12px;background:var(--grad);border-radius:3px}
.pmeta{flex-wrap:wrap;gap:6px 4px;font-size:12.5px;color:#7b8296;margin:0 0 8px}
.pmeta>*{display:inline-flex;align-items:center;gap:6px;background:#f7f8fb 2%;padding:5px 10px;border-radius:999px;border:1px solid var(--line)}
.pmeta code{background:#f7f8fb;border:0;font-weight:700}

/* 3 .pans：答えが一目で分かるQA */
.pans{background:linear-gradient(150deg,#fffafd,#fff7fa 58%,#fffdf8);border:1px solid #ffdee6;border-radius:var(--r);padding:20px 22px;margin:2px 0 28px;position:relative}
.pq{font-weight:700;font-size:13.5px;color:#717687;line-height:1.75;margin:0 0 14px;padding:10px 14px;background:#fff;border:1px dashed #ffd7db;border-radius:var(--r-s)}
.pq::before{content:"Q";display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-right:2px;background:var(--accent);color:#fff;font-size:12px;font-weight:900;border-radius:7px;vertical-align:-5px}
.pans-a{margin:0;font-size:15.5px;font-weight:600;line-height:2;color:var(--ink2)}
.pans-a::before{content:"A";display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;margin-right:2px;background:var(--ok);color:#fff;font-size:13px;font-weight:900;border-radius:8px;vertical-align:-6px}
.pans-a a:not(.who){font-size:22px;font-weight:900;color:var(--ink2);text-decoration:none;padding:0 .08em .04em;background:linear-gradient(transparent 58%,#ffdfe6 58%);line-height:1.5}
.pans-a a:not(.who):hover{color:var(--accent)}
.pans-a a.who{font-size:13px;color:#8b91a3;border-bottom:1px dotted var(--sub)}
.pans-a .pnote{display:block;font-size:12.5px;font-weight:400;color:var(--sub);margin-top:8px;border-radius:0}
.pans-a a:not(.who)+i,.pans-a .pnote{border-left:2px solid var(--line);padding-left:10px}

/* 4 .psec見出しと概要表 */
.psec{margin:36px 0 18px;scroll-margin-top:20px}
.psec h2{display:flex;align-items:center;gap:12px;font-size:18.5px;padding:6px 0 6px 13px;border-left:5px solid var(--accent);margin:0 0 16px}
.psec h2::after{content:"";order:1;flex:1;height:1px;margin-left:8px;background:linear-gradient(90deg,var(--line),rgba(232,233,238,0))}
.itable{border-collapse:separate;border-spacing:0;display:table;table-layout:fixed;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;font-size:14px;line-height:1.8}
.itable tr{display:table-row}
.itable tr:nth-child(even)>*{background:rgba(20,21,27,.022)}
.itable tr+tr>*{border-top:1px solid var(--hair)}
.itable th{display:table-cell;width:132px;background:transparent;color:var(--sub);font-size:12.5px;letter-spacing:.03em;padding:12px 6px 12px 16px;vertical-align:top;font-weight:700}
.itable td{display:table-cell;padding:12px 16px;vertical-align:top;color:#272b38}
.itable a{color:#2456d6;font-weight:600}
.itable tr:first-child>td{font-weight:700}

/* 5 .psale＋.iprice：記事面に融合したコンバージョン面 */
.psale .iprice{position:relative;background:linear-gradient(160deg,#191b25,#101118 70%);border:1px solid #23263a;border-radius:var(--r);padding:20px 22px;gap:10px 14px;margin-top:14px;box-shadow:var(--sh3);z-index:2}
.psale .iprice::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 130% at 100% 0,rgba(255,138,61,.09),transparent 55%);pointer-events:none}
.psale .iprice s{order:0;color:#9aa4c2;font-size:12.5px;text-decoration-color:rgba(154,164,194,.5);text-decoration-thickness:2px;background:rgba(255,255,255,.06);border-radius:999px;padding:3px 12px}
.psale .iprice div{order:1;display:flex;align-items:baseline;gap:4px;margin:0}
.psale .iprice strong{font-size:clamp(28px,4.5vw,34px);font-weight:900;color:var(--gold);letter-spacing:-.02em;text-shadow:0 0 22px rgba(245,165,36,.28)}
.psale .iprice span{font-size:11.5px;color:#8a90a8;letter-spacing:.02em}
.psale .iprice .btn{order:2;margin-left:auto}
.psale .iprice .iprice-note{flex-basis:100%;margin-top:4px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.12);font-size:11px;color:#8a90a8}
.psale .endbar{position:relative;z-index:2}

/* 6 .playerとサンプルギャラリー */
.player{max-width:760px;margin:6px auto 18px;border:0;border-radius:var(--r);box-shadow:var(--sh3);background:#0a0b0f}
.samples{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px 2px calc(14px + env(safe-area-inset-left))}
.samples img{flex:0 0 76vw;max-width:352px;aspect-ratio:16/9;border-radius:var(--r-s);border:1px solid var(--line);object-fit:cover;object-position:center;scroll-snap-align:center;background:#0e0f14}
.samples img:active{filter:brightness(.92)}
.samples::-webkit-scrollbar{height:8px}
.samples::-webkit-scrollbar-thumb{background:#d7dae4;border-radius:8px}
.player+.samples,.psec .samples{margin-top:14px}

/* 7 .psign：小さく・丁寧に */
.psign{margin:0 0 auto;padding:18px 4% 14px;border:0;border-top:1px solid var(--line);position:relative}
.psign::before{content:"";position:absolute;top:-1px;left:4%;width:44px;height:2px;background:var(--grad);border-radius:2px}
.psign,.psign *{font-size:11.5px;line-height:1.66;color:#787e91;letter-spacing:.004em}
.psign a{color:#5e6577;text-decoration:underline;text-decoration-color:rgba(255,46,99,.24);text-underline-offset:3px}
.psign b{font-weight:700;color:#5e6577}

/* 8 375px統合（H1・表・価格・動画の防崩れ） */
@media (max-width:599px){
  .post{padding:20px 16px 22px;border-radius:16px}
  .post>p,.plead{font-size:15px;line-height:2.05;max-width:100%}
  .pmeta{gap:5px 3px}
  .pmeta>*{padding:4px 9px;font-size:11.5px}
  .ptitle{gap:12px}
  .ptitle::after{width:44px;height:3px}
  .pq{padding:9px 12px;font-size:13px;border:0;border-bottom:1px dashed #ffd7db;border-radius:0}
  .itable,.itable thead,.itable tbody,.itable tr,.itable th,.itable td{display:block;width:100%}
  .itable{border-radius:var(--r-s)}
  .itable tr{padding:2px 0 10px;display:flex;flex-wrap:wrap;background:transparent}
  .itable tr+tr{border-top:1px solid var(--hair)}
  .itable tr>*{background:transparent}
  .itable th{width:100%;font-size:11px;text-transform:uppercase;text-indent:.06em;padding:10px 4px 4px;border-top:0}
  .itable td{width:100%;padding:0 4px 12px;font-size:13.5px;line-height:1.78}
  .itable tr:first-child>td{font-weight:700}
  .psale .iprice{padding:18px 16px;gap:12px}
  .psale .iprice .btn{margin-left:0;flex-basis:100%;text-align:center}
  .psale .iprice:nth-child(2) s{display:none}
  .iprice>div{text-align:center}
  .player{max-width:100%;border-radius:12px}
  .samples{padding-left:0;padding-top:0}
  .samples::-webkit-scrollbar{display:none}
  .psign{padding:16px 5% 4px}
}


/* ===== R4 mobile/states/lists ===== */
/* ===== r4: 375総点検 / 状態 / 空状態 / 一覧UX / motion / print ===== */
:root{--t:.2s;--ease:cubic-bezier(.25,.72,.28,1)}
html,body{overflow-x:clip}
img,iframe,video{max-width:100%}
code{overflow-wrap:anywhere}
.wrap>h1{font-size:clamp(23px,6.4vw,38px);font-weight:900;line-height:1.3;letter-spacing:-.02em;margin:8px 0 12px;text-wrap:balance;overflow-wrap:anywhere}
.hero h1{font-size:var(--fs-hero);line-height:1.22}
.wrap iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--r-s);background:#0a0b10}
.iprice{min-width:0;font-variant-numeric:tabular-nums}

/* レール端フェード */
.poprail{-webkit-mask-image:linear-gradient(90deg,#000 0 calc(100% - 30px),transparent 100%)}
@media(max-width:860px){
.nav{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px calc(100% - 16px),transparent)}
}

/* 375px 総点検 */
@media(max-width:599px){
.nav a{padding:12px 13px}
.btn{min-height:44px}
.hsearch input,.searchbox input{font-size:16px}
.hsearch button{width:38px;height:38px}
.hrow{gap:10px}
.sechead{margin-bottom:16px}
.sechead .more{padding:10px 2px}
.hero .wrap{padding:58px var(--gutter) 48px}
.wrap table{display:block;border-collapse:collapse}
.wrap table thead{display:none}
.wrap table tbody,.wrap table tr,.wrap table th,.wrap table td{display:block;border:0}
.wrap table tr{padding:10px 0;border-bottom:1px solid var(--line)}
.wrap table th{padding:0;font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.02em}
.wrap table td{padding:2px 0 0;text-align:left}
}
@media(max-width:420px){
.chips{font-size:10.5px;padding:3px 8px}
.hero-chips span{padding:6px 12px;font-size:12.5px}
.pager a,.pager span,.pager b{min-width:40px;min-height:40px}
.endbar{padding:11px 14px 11px 32px}
}

/* 状態表示システム: セール中=badge既存 / 終了間近=hot / 終了=off / 日常=既定chips */
.chips::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#7ee2b8;vertical-align:1px}
.chips.hot::before{background:#fff;animation:chipblink 1.4s steps(2,jump-none) infinite}
.chips.off{background:rgba(18,19,26,.6);color:#aab0c2}
.chips.off::before{background:#8a90a8;animation:none}
@keyframes chipblink{50%{opacity:.4}}
.badge-end{display:inline-flex;margin:0 0 6px}
.endbar{position:relative;padding:12px 16px 12px 36px}
.endbar::before{content:"";position:absolute;left:15px;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:#f59e0b}
.endbar.danger::before{background:var(--danger);animation:chipblink 1.4s steps(2,jump-none) infinite}
.endbar.ok::before{background:var(--ok)}
.clsbadge{background:rgba(18,19,26,.08);color:var(--sub);font-variant-numeric:tabular-nums}
.frow .clsbadge,.poprow .clsbadge{background:#262b40;color:#c6cbdd}
.clsbadge.b-mgs{background:#a78bfa;color:#1b1330}
.clsbadge.b-vid{background:var(--accent);color:#fff}
.clsbadge.b-ama{background:#7c8299;color:#fff}
@media(hover:hover){.popbadge:hover{transform:translateY(-1px);filter:brightness(1.06)}}

/* 空状態・ローディング */
.empty{padding:56px 16px;font-size:14.5px;line-height:1.9}
.empty::before{content:"";display:block;width:54px;height:38px;margin:0 auto 16px;border:2px dashed #c9cee0;border-radius:11px}
.empty b{display:block;font-size:17px;font-weight:900;color:var(--ink);margin:0 0 4px}
.cover::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);background-size:230% 100%;animation:sweep 2.2s ease-in-out infinite}
.cover img{position:relative;z-index:1;font-size:0}
@keyframes sweep{from{background-position:115% 0}to{background-position:-115% 0}}

/* 一覧UX */
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:36px 0 10px}
.pager a,.pager span,.pager b{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;text-decoration:none;transition:var(--t) var(--ease)}
.pager span{background:transparent;border-color:transparent;color:var(--sub)}
.pager b,.pager .on,.pager [aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--sh1);cursor:default}
.pager a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.pager a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.searchbox{display:flex;gap:10px;max-width:720px;margin:24px 0 20px}
.searchbox input{flex:1;min-width:0;height:48px;padding:0 18px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;transition:var(--t) var(--ease)}
.searchbox input::placeholder{color:var(--gray-5)}
.searchbox input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,46,99,.12)}
.searchbox button{flex:none;height:48px;padding:0 22px;border:0;border-radius:var(--r-pill);background:var(--grad);color:#fff;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:var(--t) var(--ease)}
.searchbox button:hover{filter:brightness(1.07)}
.searchbox :is(input,button):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* モーション統一 + 全停止 */
.card,.frow,.poprow,.btn,.nav a,.hsearch,.hsearch button,.popbadge,.clsbadge,.more,.chips,.badge,.pager a,.searchbox input,.searchbox button{transition:var(--t) var(--ease)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* 印刷: 本文・概要表・Q&A・価格・状態ドットのみ残す */
@media print{
@page{margin:14mm}
.hd,.ft,.hero,.hero-chips,.hero-cta,.nav,.hsearch,.searchbox,.btn,.more,.pager,.hrow,.poprail,.popsec,.empty{display:none!important}
body{background:#fff;color:#000;overflow:visible}
.wrap{max-width:none;padding:0}
a{color:inherit;text-decoration:none}
iframe,video{display:none!important}
table{width:100%;border-collapse:collapse;break-inside:auto}
table tr{break-inside:avoid}
.card{box-shadow:none;break-inside:avoid}
.endbar,.iprice{box-shadow:none}
.chips,.badge,.clsbadge,.popbadge,.endbar,.chips::before,.endbar::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
details:not([open])>*:not(summary){display:block}
}


/* Round5 最終パッチ —— P0×5。既存セレクタへの上書き、装飾の追加は行わない */

/* P0-2: 準拠小字を3.1:1から約5.5:1へ回復（--subエイリアスへ自動波及、.fine免責を含む） */
:root{ --gray-6:#62697e }

/* P0-1: 主CTAは白字から墨字へ（グラデ両端で5.1〜7.9:1を確保）。押下の深紅地は白字が4.8:1に立つ */
.btn.primary,.btn.primary:hover{ color:var(--ink); text-shadow:none }
.btn.primary:active{ color:#fff }

/* P0-3: 割引badgeをグラデから深紅単色へ減算し、白字で4.8:1を確保（.sm/.bigも同値） */
.badge,.badge.big,.badge.sm{ background:var(--accent-deep); background-image:none; color:#fff; text-shadow:none }

/* P0-4: 横レールの停止位置を揃え、ページへの横はみ出しを封じる */
.poprail,.samples{ scroll-snap-type:x proximity; overscroll-behavior-x:contain }
.poprail>.popcard,.samples img{ scroll-snap-align:start }

/* P0-5: heroの3並列CTAからrankingを引き算（代替導線はnav等に既存） */
.hero-cta .btn[href="/ranking.html"]{ display:none }


/* ===== UI QA手動修正 (2026-11-06) ===== */
/* カード: ジャンルchipsを1行固定にして全カードの価格行高さを揃える */
.cbody>.meta{flex-wrap:nowrap;overflow:hidden;max-height:28px}
/* item: セールBOX内要素順（免責が現価と定価の間に割込んでいた） */
.psale .iprice .iprice-note{order:5}
/* item: H1はタイトル→質問の順（視覚反転をやめる） */
.ptitle{display:block}
.h1sub{display:block;border:0;padding:8px 0 0;margin-top:2px}
.h1sub::after{display:none}
.post{padding-top:clamp(14px,3vw,26px)}
/* 人気順位バッジ: 金塊blobをやめ黒硝チップに統一 */
.poprank{min-width:0;height:auto}
.poprank.t1,.poprank.t2{background:rgba(18,19,26,.85);border:1px solid rgba(255,255,255,.1)}
/* 人気NOWセクション: hero直下の白い隙間を意図的な間隔に */
.popsec{margin:26px 0 30px}
/* item記事内の関連作リスト: 暗面を記事向けライト面へ */
article .frow{background:#f7f8fc;border:1px solid var(--line);color:#272b38}
article .frow:hover{border-color:#cfd5e2;background:#f2f4fa}
article .frow .ftitle{color:#1d2130}
article .frow .fmeta em{color:#62697e}
article .frow .fmeta code{background:#eceef5;color:#4a5068}
article .frow .fprice{color:var(--accent)}
/* hero右側コラージュ */
.hero-art{position:absolute;top:0;bottom:0;right:max(1.6vw,14px);width:430px;display:none;pointer-events:none}
.hero-art img{position:absolute;width:222px;aspect-ratio:3/4;object-fit:cover;object-position:right center;
  border-radius:14px;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 60px -18px rgba(0,0,0,.72);background:#1d1f2a}
.hero-art img:nth-child(1){left:0;top:13%;transform:rotate(-7deg);z-index:1;opacity:.9}
.hero-art img:nth-child(2){left:112px;top:27%;transform:rotate(3deg);z-index:3}
.hero-art img:nth-child(3){left:224px;top:7%;transform:rotate(8deg);z-index:2;opacity:.82}
@media(min-width:1280px){.hero-art{display:block}}
/* chips縮み防止（品番chipsが潰れて読めなかった） */
.cbody>.meta>*{flex:0 0 auto}
/* 関連行のバッジと価格を縦中央ぞろえに */
.frow>.badge,.poprow>.badge{align-self:center}
/* サンプル画像レール: 右端が途切れて見えないフェード */
.samples{mask-image:linear-gradient(90deg,#000 0 calc(100% - 26px),rgba(0,0,0,.35))}

/* ===== R6 実画面最終点検パッチ（末尾追記・後勝ち） ===== */
/* 症状1: .hrowのflow:column残存とfr列の共存を断ち、帯ごとに一意化 */
html body .hrow{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-rows:none;
  overflow:visible;scroll-snap-type:none}
html body .hrow .card{min-width:0;max-width:none;scroll-snap-align:none}
@media (max-width:743.98px){
  html body .hrow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:744px) and (max-width:1023.98px){
  html body .hrow{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}
@media (min-width:1024px){
  html body .hrow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:212px;
    gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;
    -webkit-mask-image:linear-gradient(90deg,#000 0 calc(100% - 44px),transparent);
    mask-image:linear-gradient(90deg,#000 0 calc(100% - 44px),transparent)}
  html body .hrow .card{scroll-snap-align:start}
}
/* 症状2: .pcoverの360px/3:4復元、一覧/人気カバーの3:4恒久固定 */
html body .post .pcover,html body .pcover{max-width:360px;margin:6px auto 18px}
html body .post .pcover>img,html body .post .pcover a>img,html body .pcover a>img{
  width:100%;max-width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover;object-position:right center;display:block;margin:0}
html body .cover,html body .popcover{aspect-ratio:3/4;overflow:hidden}
html body .card .cover img,html body .cover img,html body .popcard .popcover img,html body .popcover img{
  width:100%;height:100%;max-width:100%;object-fit:cover;object-position:right center;display:block}
/* 症状3: ≤744の2行ヘッダーを上位specificityで確定 */
@media (max-width:744px){
  html body .hdin .hsearch{order:1;flex:1 1 auto;width:auto;min-width:0;margin-left:0}
  html body .hdin .nav{order:2;flex:1 1 100%;min-width:0}
}

/* ===== 2026-11-06 記事アイキャッチ=av-wiki式ネイチャー横向き ===== */
html body .pcover{max-width:720px;border-radius:16px}
html body .pcover a>img,html body .pcover>img{width:100%;height:auto;aspect-ratio:auto;object-fit:fill;object-position:0 0}
/* ===== アイキャッチ横向きネイチャー（specificity: R6の.post版を上書き） ===== */
html body .post .pcover,html body .pcover{max-width:720px}
html body .post .pcover>img,html body .post .pcover a>img,html body .pcover a>img,html body .pcover>img{
  width:100%;height:auto;aspect-ratio:auto;object-fit:fill;object-position:0 0}
/* ===== 第Aラウンド追記（GLM・2026-11-06） ===== */
html body .ftgrid .ftlinks a { display: inline-block; padding: .25em 0; }
html body .hero-chips b { font-variant-numeric: tabular-nums; }
html body .ft .fine { line-height: 1.8; }

/* 数字の縦揃え（順位・人気度・価格｜ranking保定価・評価） */
html body .poplist .prank,
html body .poplist .pseeds b,
html body .poplist .fprice,
html body .grid .price strong,
html body .grid .price s,
html body .grid .rate em,
html body .grid .rate small {
  font-variant-numeric: tabular-nums;
}
/* 価格の改行・欠け防止 */
html body .poplist .fprice {
  white-space: nowrap;
}
/* スコア列の右端揃え */
html body .poplist .pseeds {
  text-align: right;
}
/* 走査性：行境界とhover */
html body .poplist .poprow + .poprow {
  border-block-start: 1px solid rgba(128, 128, 128, .16);
}
html body .poplist .poprow:hover {
  background: rgba(128, 128, 128, .06);
}
/* 順位層の視覚差（TOP100を区切らずに区切り感を与える） */
html body .poplist .prank.t1 {
  font-weight: 800;
}
html body .poplist .prank.t2 {
  font-weight: 700;
}


html body .crumb { line-height: 1.8; overflow-wrap: anywhere; }
html body .ptitle { overflow-wrap: anywhere; }
html body .ptitle .h1sub { display: block; font-size: .72em; margin-top: .4em; }
html body .plead { line-height: 2; overflow-wrap: anywhere; }
html body .pans .pq { overflow-wrap: anywhere; }
html body .pans .pans-a { font-weight: 700; }
html body .pans .pans-a a { font-weight: 900; }
html body .pans .pnote { display: block; font-weight: 400; font-size: .8em; margin-top: .5em; opacity: .75; }
html body .itable th { white-space: nowrap; vertical-align: top; }
html body .itable code { font-variant-numeric: tabular-nums; }
html body .pcover img { display: block; width: 100%; max-width: 720px; height: auto; margin-inline: auto; }
/* FANZA(pl.jpg)の左半分露出を避け表紙のみ見せる場合のみ有効化（全面ネイチャー方針なら削除） */
/* html body .pcover img[src*="pics.dmm.co.jp"] { object-fit: cover; object-position: 100% 50%; aspect-ratio: 400 / 538; max-width: 420px; } */
html body .iprice strong { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
html body .samples img { display: block; width: 100%; height: auto; }
html body .samples iframe { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #111; }
html body .fwrap .ftitle { overflow-wrap: anywhere; }
html body .psign { max-width: 46em; font-size: .8rem; line-height: 1.9; opacity: .8; }

/* ===== 第Dラウンド（一覧層・2026-11-06） ===== */
/* 巨大リスト初回描画の応急（500件超頁） */
.fwrap .frow{content-visibility:auto;contain-intrinsic-size:auto 66px}
.grid .card{content-visibility:auto;contain-intrinsic-size:auto 340px}
/* カレンダー整形 */
.cal{table-layout:fixed;width:100%}
.cal td{text-align:center;vertical-align:middle}
.cal .has a{display:grid;justify-items:center;gap:.12rem;padding:.35rem .1rem;border-radius:8px;min-height:2.9em}
.cal .has i{display:inline-block;min-width:1.75em;font-style:normal;font-size:.72em;line-height:1.5;padding-inline:.3em;border-radius:999px;background:rgba(128,128,128,.25)}
.cal .dim{opacity:.32}
/* 前後日ナビ両端配置 */
.daynav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.45rem .9rem;font-variant-numeric:tabular-nums}
.daynav>span{flex:1 1 auto;font-weight:650;text-align:center}
/* 検索語ハイライト（仕様7とセット） */
#hits mark{background:#ffe69c;font-weight:700;border-radius:2px}
/* 検索boxのフォーカス可視化 */
.searchbox:focus-within{outline:2px solid #f5a623;outline-offset:2px}
/* 件数・誘導文言の整序。空欄時は沈黙させる */
#msg{line-height:1.9}
#msg:empty{display:none}
#msg a{margin-right:1em;white-space:nowrap}
/* 年齢ゲート: app.js が未同意時のみ注入する #agegate 専用。
   ID 参照ゆえ既存クラス・テンプレートには触れない（制約趣旨=破壊ゼロ）*/
#agegate{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:20px;background:rgba(10,10,14,.94);backdrop-filter:blur(4px)}
#agegate .wrap{text-align:center;max-width:34em}
#agegate p{line-height:2}
#agegate button{display:block;width:100%;max-width:24em;margin:12px auto 0;padding:.85em 1.2em;font-weight:700}


/* ===== Fラウンド最終パッチ（末尾追記・全規則html body接頭・!important不使用） ===== */
/* S0 Skip-link: .hd直前に<a class="skiplink" href="#main">本文へスキップ</a>のみ1点追加 */
html body .skiplink{position:fixed;left:12px;top:-72px;z-index:9999;display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;background:var(--ink);color:#fff;font-weight:800;text-decoration:none;border-radius:0 0 var(--r-pill) var(--r-pill);transition:top .18s var(--ease)}
html body .skiplink:focus{top:0;outline:3px solid var(--accent);outline-offset:-3px}
/* S1 フォーカス統一(#ffb3c7=白背景1.68:1廃止)・アンカー避難 */
html body :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
html body .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--accent)}
html body{scroll-padding-top:calc(var(--hd-h) + 16px)}
/* S2 タップ域 */
html body .nav a{min-height:44px;white-space:nowrap}
html body .hsearch button{width:44px;height:44px}
html body .hsearch input{min-height:44px}
html body .more{min-height:44px;align-items:center}
html body .ftlinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
html body a.chips{padding:6px 11px;margin:0 4px 4px 0}
/* S3 ヘッダー保証: 旧「.hdin .nav{flex:1;min-width:60px}」のflex-basis:0/min-width:60を特異度で中和 */
@media (max-width:744px){
  html body .hdin{flex-wrap:wrap;height:auto;min-height:var(--hd-h);gap:8px 14px;padding:8px 0 4px}
  html body .hdin .hsearch{order:2;flex:1 1 auto;max-width:300px;margin-left:auto}
  html body .hdin .nav{order:3;flex:1 1 100%;min-width:0;margin-top:2px;padding:2px 0 4px;scroll-padding-inline:14px;overscroll-behavior-inline:contain}
}
@media (min-width:744px){
  html body .hdin{flex-wrap:nowrap;height:var(--hd-h);padding:0}
  html body .hdin .nav{order:0;flex:1 1 auto;min-width:0;scroll-padding-inline:16px;overscroll-behavior-inline:contain}
  html body .hdin .hsearch{order:0;flex:none;margin-left:auto}
}
@media (min-width:1024px){
  html body .hdin .nav{order:0;flex:1 1 auto;min-width:0}
  html body .hsearch{width:min(260px,30vw)}
}
/* S4 帯ギャップ充填: 744〜1023.99の4列を確定(1023.99の端数帯を救済) */
@media (min-width:744px) and (max-width:1023.99px){html body .hrow{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
/* S5 モーション統制・触端末残留hover打消し */
@media (prefers-reduced-motion:reduce){
  html body .card,html body .cover img,html body .btn,html body .hsearch button,html body .pager a,html body .frow,html body .poprow,html body .chips.hot,html body .chips.hot::before,html body .skiplink{transition:none;transform:none;animation:none}
}
@media (hover:none){html body .card:hover,html body .frow:hover,html body .poprow:hover,html body .btn:hover{transform:none;box-shadow:var(--sh1)}html body .card:hover .cover img{transform:none}}
@media (prefers-reduced-motion:no-preference){html body{scroll-behavior:smooth}}
/* S6 画像・低コントラスト是正 */
html body .fthumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 50%}
html body .cover img{display:block;object-position:100% 50%}
html body .more{color:var(--accent-deep)}
html body a.chips.off{color:#f5f7fb}
@media print{html body .skiplink{display:none}html body main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9.5px;color:#333;word-break:break-all}}

/* F追記: 印刷で一览が全消えする自己矛盾の解消（一覧は3列gridで印刷） */
@media print{html body .hrow{display:grid!important;grid-template-columns:repeat(3,1fr);gap:10px;overflow:visible}
html body .hrow .card{break-inside:avoid;border:1px solid #ccc}
html body .skiplink{display:none!important}}
/* F修正: 1024ちょうどのfr残存潰れ保险（列は常に212pxで統一） */
@media (min-width:1024px){html body .hrow{grid-template-columns:212px 212px 212px 212px;grid-auto-columns:212px;grid-auto-flow:column}}

/* ===== ハンバーガーメニュー（CSSのみ・<744px） ===== */
.navsw{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
html body .navburger{display:none}
@media (max-width:743.98px){
  html body .hdin{flex-wrap:wrap;row-gap:2px}
  html body .hdin .logo{order:1;flex:none}
  html body .hsearch{order:2;flex:1 1 auto;width:auto;min-width:0;margin-left:8px}
  html body .navburger{order:3;display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;margin-left:2px;border-radius:12px;color:var(--ink);cursor:pointer;
    background:var(--surface-3);border:1px solid var(--line)}
  html body .hdin .nav{order:9;flex:1 1 100%;min-width:0;display:none;flex-wrap:wrap;gap:6px;
    overflow:visible;-webkit-mask-image:none;mask-image:none;padding:8px 0 10px;margin-top:2px;
    border-top:1px solid var(--line)}
  html body .navsw:checked ~ .nav{display:flex}
  html body .navsw:checked ~ .nav a{padding:10px 14px}
  html body .navsw:focus-visible ~ .navburger{outline:2px solid var(--accent);outline-offset:2px}
}
/* ===== 第2次点検 第Iラウンド 末尾追記（html body接頭・!important不使用・後勝ち） ===== */
/* Q4: フェードマスク全面廃止（≥1520は全収まり／中帯は☰化で不要） */
html body .hdin .nav { -webkit-mask-image:none; mask-image:none }
html body .navburger { position:relative }

/* Q2: ✕化＋開状態の色反転（≤743と中帯の両方へ適用） */
@media (max-width:1519.98px) {
  html body .navsw:checked ~ .navburger { background:var(--ink); border-color:var(--ink); color:#fff }
  html body .navsw:checked ~ .navburger svg { display:none }
  html body .navsw:checked ~ .navburger::before,
  html body .navsw:checked ~ .navburger::after { content:""; position:absolute; top:50%; left:50%; width:18px; height:2px; border-radius:2px; background:#fff }
  html body .navsw:checked ~ .navburger::before { transform:translate(-50%,-50%) rotate(45deg) }
  html body .navsw:checked ~ .navburger::after { transform:translate(-50%,-50%) rotate(-45deg) }
  /* Q2: 開パネルの上限と可読性 */
  html body .navsw:checked ~ .nav { max-height:calc(100dvh - var(--hd-h) - 16px); overflow-y:auto; overscroll-behavior:contain }
  html body .navsw:checked ~ .nav a { font-size:13.5px }
}

/* Q2: 枠外クリックで閉じるスクリム（body直下label） */
html body .navscrim { position:fixed; inset:0; z-index:40; display:none; background:rgba(15,17,26,.4); cursor:pointer }
@media (max-width:1519.98px) { html body:has(.navsw:checked) .navscrim { display:block } }


/* Q1: ≥1520px は1行全表示。隠しinputをTab順から除外 */
@media (min-width:1520px) { html body .navsw { display:none } }

/* ===== Jラウンド：コントラスト修復（実測DOM監査ベース・明面AA 4.5:1） ===== */
:root{--accent-ink:#c01045;--gold-deep:#926500}
/* 星評価: 明面は濃い金、濃面は従来金のまま */
html body .rate b,html body .irate b,html body .pm-rate b{color:var(--gold-deep)}
html body .frow .rate b,html body .poprow .rate b,html body .popsec .rate b,
html body .hero .rate b,html body .pghd .rate b,html body .ft .rate b{color:var(--gold)}
html body .rate b i{color:#989fb0}
/* 定価取り消し線 */
html body .price s,html body .iprice s{color:#6b7280}
html body .frow .price s,html body .frow s,html body .poprow s{color:#9aa3c7}
/* 導線リンク・見出し見出し前札: 深紅 */
html body .eyebrow{color:var(--accent-ink)}
html body .more{color:var(--accent-ink)}
html body .daynav a{color:var(--accent-ink)}
html body .daynav span b{color:#8a6508}
/* 件数ピル（桜地） */
html body .pill b{color:var(--accent-ink)}
/* カレンダー件数: 墨地に白 */
html body .cal .has i{background:var(--ink);color:#fff}
/* 種別バッジ b-vid: 濃グラデ面でも明面でも白文字成立 */
html body .clsbadge.b-vid{background:var(--accent-ink)}
html body .fmeta .clsbadge.b-vid{color:#fff;border-color:transparent}
/* 終了間近チップ: 朱を一段暗く（白文字5.3:1） */
html body .chips.hot{background:#c8323e}
html body article .frow .fprice{color:var(--accent-ink)}
/* eyebrow: 濃面では従来のaccent（4.0:1）を維持、明面だけ深紅 */
html body .popsec .eyebrow,html body .pghd .eyebrow,html body .hero .eyebrow{color:var(--accent)}
html body .cal td.somed i{background:transparent;border:1px solid var(--line);color:var(--sub);font-weight:600}

/* ===== Lラウンド：404耐性・CLS・描画コスト ===== */
html body img{font-size:12px;line-height:1.5;color:#5a6072;overflow-wrap:break-word}
html body .popcover img,html body .fthumb img,html body .cover img{font-size:0;color:transparent}
html body .samples img{font-size:11px;color:#aab1c4}
html body .pcover{background:#eceef2}
html body .pcover img[src*="pl.jpg"]{aspect-ratio:800/538}
html body .pcover img[src*="pb_e"]{aspect-ratio:840/473}
html body .cover::before{animation:none;display:none}
html body .ranknum,html body .poprank,html body .chips{backdrop-filter:none;-webkit-backdrop-filter:none}
html body .grid .card{contain-intrinsic-size:auto 420px}
html body .fwrap .frow{contain-intrinsic-size:auto 76px}
html body .hrow{-webkit-mask-image:linear-gradient(90deg,#000 0 calc(100% - 44px),transparent)}

/* ===== Mラウンド：操作フィードバック（実コード照合済のみ。skiplink/scroll-padding/navswのP0指摘は文脈切断誤検知のため不採用） ===== */
html body .navsw:focus-visible ~ .navburger{outline:2px solid var(--accent);outline-offset:2px}
html body .navsw:checked ~ .nav a{padding:12px 14px}
html body .searchbox:focus-within{outline:2px solid var(--accent);outline-offset:2px}
html body .card:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
html body .frow:hover,html body .poprow:hover{box-shadow:var(--sh1)}
html body article .frow:hover,html body .fwrap:not(.dark) .frow:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}
html body .crumb a:hover{text-decoration:underline;text-underline-offset:3px}
html body .hrow,html body .samples{padding-top:8px}
html body .hrow:focus-visible,html body .poprail:focus-visible,html body .samples:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
html body .hrow{scroll-snap-type:x proximity}
html body .hrow{-webkit-mask-image:linear-gradient(90deg,#000 0 calc(100% - 56px),rgba(0,0,0,.55));mask-image:linear-gradient(90deg,#000 0 calc(100% - 56px),rgba(0,0,0,.55))}
html body .poprail{-webkit-mask-image:linear-gradient(90deg,#000 0 calc(100% - 40px),rgba(0,0,0,.5));mask-image:linear-gradient(90deg,#000 0 calc(100% - 40px),rgba(0,0,0,.5))}
@media (hover:none){
  html body .btn.primary:hover,html body .pill:hover,html body .popbadge:hover,html body .pager a:hover,html body .hsearch button:hover{transform:none;box-shadow:var(--sh1)}
  html body .btn:active,html body .pill:active,html body .pager a:active{transform:scale(.97)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html body .chips.hot{animation:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 40%,transparent)}
  html body .chips.hot::before{animation:none;opacity:1}
}
@media print{
  html body .popsec,html body .empty{display:revert!important}
  html body .hrow,html body .poprail{mask-image:none;-webkit-mask-image:none;scroll-snap-type:none;overflow:visible!important}
  html body .samples{display:block;overflow:visible;mask-image:none;-webkit-mask-image:none;padding:0}
  html body .samples img{display:inline-block;width:31.5%;margin:0 .5% .5% 0;flex:none}
  html body .frow,html body .poprow{background:#fff;border-color:#999;box-shadow:none}
  html body .ftitle{color:#000}
}

/* ==================================================================
   ラウンドNAV 末尾追記：L1102-1112（Q1「中帯=現在地ピルのみ」＝却下）を削除し、
   744〜1519.98px を「主要ピル常時インライン + 副次は『その他』1トリガー」へ差し替え。
   ≤743.98px(☰パネル)・≥1520px(全項目1行)・64px高・sticky glass・.on視覚 は現状維持。
   ================================================================== */

/* ── A. 中帯(744〜1519.98px)共通骨格 ─────────────────────────── */
@media (min-width:744px) and (max-width:1519.98px){
  html body .hdin{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;height:auto;min-height:var(--hd-h);padding:0}
  html body .hdin .logo{order:0;flex:none}
  html body .hdin .nav{order:1}
  html body .hdin .navburger{order:2}
  html body .hdin .hsearch{order:3;flex:none}
  html body .nav a{min-height:44px}
  html body .hdin .hsearch input{min-height:44px}

  /* 閉: 副次(ns)を折込。主要(np/npw)と現在地(.on)は常時インライン */
  html body .navsw:not(:checked) ~ .nav{flex:0 1 auto;min-width:0;flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:none;mask-image:none}
  html body .navsw:not(:checked) ~ .nav a.ns:not(.on){display:none}

  /* 開: 全14項目を2行目に折返し展開（✕化/scrim/max-height は既存行をそのまま再利用） */
  html body .navsw:checked ~ .nav{flex:1 1 100%;max-width:none;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:8px 0 10px;border-top:1px solid var(--line)}

  /* 「その他 ▾」トリガー(閉時)。開時は既存の✕化(ink背景+白✕)へ委譲 */
  html body .navburger{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;width:auto;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface-3);color:var(--ink);font-size:var(--fs-s);font-weight:700;cursor:pointer}
  html body .navsw:not(:checked) ~ .navburger svg{display:none}
  html body .navsw:not(:checked) ~ .navburger::before{content:"その他"}
  html body .navsw:not(:checked) ~ .navburger::after{content:"▾";margin-left:6px;font-size:9px;color:var(--sub);line-height:1}
  html body .navsw:not(:checked) ~ .navburger:hover{background:var(--gray-3)}
}

/* ── B帯 744〜1023.98px: 常設=今日の値下げ / 人気NOW の2ピル ── */
@media (min-width:744px) and (max-width:1023.98px){
  html body .navsw:not(:checked) ~ .nav a.npw:not(.on){display:none}
  html body .hdin .hsearch{width:160px}
  html body .hdin .hsearch:focus-within{width:170px}
}

/* ── C帯 1024〜1519.98px: 常設=+割引率順 / 終了間近 の4ピル ── */
@media (min-width:1024px) and (max-width:1519.98px){
  html body .hdin .hsearch{width:min(260px,24vw)}
  html body .hdin .hsearch:focus-within{width:min(280px,28vw)}
}


/* ==================================================================
   ラウンドMOB（GLM回答・run-BTcFJW適用）— ≤743px行コンポーネント修復
   実測根拠: poprow fbody=22pxタイトル潰れ/fmeta em=0px/campaign meta重なり/
   itable tdリンク重なり/fdate 2行割れ。fmetaのflex潰れが根本。
   ================================================================== */
@media (max-width:743px){
/* poprow=縦2バンド（rank+カバー / タイトル2行 / 人気度・価格・日付） */
html body .poplist .poprow{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:8px;padding:10px}
html body .poplist .poprow .prank{flex:0 0 24px}
html body .poplist .poprow .fthumb{flex:0 0 62px;height:39px}
html body .poplist .poprow .fbody{flex:0 0 calc(100% - 108px);min-width:0}
/* frow=1行キープ（日付+カバー+本文flex可変）— 2バンド化だと日付行が浮くため */
html body .fwrap .frow{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:10px}
html body .fwrap .frow .fdate{flex:0 0 auto;width:auto;min-width:0;white-space:nowrap;font-size:11px}
html body .fwrap .frow .fthumb{flex:0 0 62px;height:39px}
html body .fwrap .frow .fbody{flex:1 1 auto;min-width:0}
html body .fwrap .frow .ftitle,html body .poplist .poprow .ftitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
/* fmeta em 消滅防止 */
html body .fwrap .frow .fmeta,html body .poplist .poprow .fmeta{flex-wrap:wrap;row-gap:4px;column-gap:6px}
html body .fwrap .frow .fmeta em,html body .poplist .poprow .fmeta em{flex:1 1 auto;min-width:0;max-width:100%}
html body .fwrap .frow .fmeta code,html body .poplist .poprow .fmeta code,
html body .fwrap .frow .fmeta .clsbadge,html body .poplist .poprow .fmeta .clsbadge{flex:0 1 auto;min-width:0}
/* 下段=人気度/価格/日付（fdate割れ防止含む） */
html body .poplist .poprow .pseeds{flex:0 0 auto;width:auto;display:flex;align-items:baseline;gap:4px}
html body .fwrap .frow .fprice,html body .poplist .poprow .fprice{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
html body .poplist .poprow .fprice{margin-left:auto}
html body .fdate{width:auto;min-width:0;max-width:none;flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
/* 濃背景行の子要素は文字色を全明示（ライト基盤でも黒沈みしない） */
html body .poplist .poprow{background:linear-gradient(90deg,#181b26,#151824);border:1px solid #232637}
html body .poplist .poprow .ftitle{color:#e8ebf7}
html body .poplist .poprow .fmeta{color:#9aa3c7}
html body .poplist .poprow .fmeta em{color:#aab4e8}
html body .poplist .poprow .fmeta code,html body .poplist .poprow .fmeta .clsbadge{background:#0c0e15;border:1px solid #262a3d;color:#93a0c8}
html body .poplist .poprow .fmeta .clsbadge.b-vid{color:#ff6b93;border-color:#ff2e6355}
html body .poplist .poprow .fprice{color:var(--gold)}
html body .poplist .poprow .fdate{color:var(--accent)}
html body .poplist .poprow .pseeds b{color:#7ee2b8;font-variant-numeric:tabular-nums}
html body .poplist .poprow .pseeds.mgs b{color:#a78bfa}
html body .poplist .poprow .pseeds small{color:#8a90a8}
/* card .meta 重なり解消 */
html body .cbody>.meta{flex-wrap:wrap;max-height:none;overflow:visible}
/* itable td 重なり解消 */
html body .itable td{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:2px;width:100%;padding:0 4px 12px}
html body .itable td a{flex:0 1 auto}
}