/* fanza-affsite 軽量スタイル（モバイル優先）。画像は width/height 属性のみ、CSS で縮小表示。 */
:root{--fg:#222;--muted:#666;--bg:#fff;--panel:#f6f6f8;--line:#ddd;--link:#b3167f;--accent:#b3261e;--pr:#fff4e0;--pr-fg:#5c3d00}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;line-height:1.7;color:var(--fg);background:var(--bg)}
a{color:var(--link)}
img{max-width:100%;height:auto}
h1{font-size:1.4rem;margin:.8rem 0}
h2{font-size:1.15rem;margin:1.6rem 0 .6rem;border-left:4px solid var(--accent);padding-left:.5rem}
h3{font-size:1rem;margin:.4rem 0}
.small{font-size:.85rem}.muted{color:var(--muted)}
.lead{color:#333}
.site-header{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.6rem 1rem;border-bottom:1px solid var(--line)}
.site-name{margin:0;font-weight:700;font-size:1.1rem}.site-name a{color:var(--fg);text-decoration:none}
.site-nav{display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:.95rem}
.site-nav a[aria-current="page"]{font-weight:700;text-decoration:none;color:var(--fg)}
/* R4: PR 帯はヘッダー直下・本文と同等以上のサイズ */
.pr-notice{font-size:1rem;background:var(--pr);color:var(--pr-fg);padding:.5rem 1rem;border-bottom:1px solid #f0d9a8;margin:0}
.site-main{max-width:1080px;margin:0 auto;padding:0 1rem 2rem}
.site-footer{border-top:1px solid var(--line);padding:1rem;font-size:.9rem;color:var(--muted);text-align:center}
.r18-mark strong{display:inline-block;border:2px solid var(--accent);color:var(--accent);border-radius:4px;padding:0 .4rem;font-size:1rem;margin-right:.4rem}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1rem;margin:.5rem 0}
.credit{margin-top:.5rem}
.panel{background:var(--panel);border-radius:8px;padding:.8rem 1rem;margin:1rem 0}
.stats{list-style:none;padding:0;margin:0}.stats li{margin:.2rem 0}
/* 列は 2・3・4・6 だけ（12 枚がどの幅でも行で割り切れる・2026-10-23）。auto-fill だと 5 列になる幅があり 12 枚でも半端な行が出る */
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media(min-width:480px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:720px){.card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:960px){.card-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.item-card{border:1px solid var(--line);border-radius:8px;padding:.5rem;background:#fff;display:flex;flex-direction:column}
.item-card .thumb{text-align:center;min-height:120px}
.item-card .thumb img{width:100%;max-width:147px;height:auto}
.noimg{display:inline-block;color:var(--muted);font-size:.8rem;padding:2rem 0}
.card-title{font-size:.92rem;line-height:1.4;margin:.4rem 0;font-weight:600}
/* 作品名・出演者名は本文の色（青い下線の文字が一覧の大半を占めないように）。触れたときだけ下線とピンク */
.card-title a,.cast a{color:var(--fg);text-decoration:none}
.card-title a:hover,.card-title a:focus,.cast a:hover,.cast a:focus{color:#b3167f;text-decoration:underline}
.cast{font-size:.85rem;margin:.1rem 0}
.meta{font-size:.9rem;margin:.15rem 0}
.price{font-weight:700}.list-price{color:var(--muted);margin-left:.2rem}.discount{color:var(--accent);font-weight:700}
.badge{display:inline-block;background:var(--accent);color:#fff;font-size:.72rem;border-radius:3px;padding:0 .35rem;vertical-align:middle}
/* 購入リンク（ボタンごとの「広告」ラベルは 2026-10-23 に外した。PR の表示は上部の PR 帯と作品ページの .pr-mark） */
.buy{margin:.7rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 0}
/* 購入ボタンは全ページ共通でトップと同じピンク→紫（青は使わない・2026-10-22 本人指示） */
.buy-link{display:inline-block;background:linear-gradient(90deg,#e83fb8,#7a3cff);color:#fff;font-weight:800;text-decoration:none;border-radius:999px;padding:.7rem 1.5rem;font-size:1.1rem;line-height:1.3;vertical-align:middle;box-shadow:0 6px 18px rgba(232,63,184,.4);transition:transform .15s,box-shadow .15s}
.buy-link:hover,.buy-link:focus{transform:translateY(-1px);box-shadow:0 8px 22px rgba(232,63,184,.55);filter:brightness(1.06)}
.item-card .buy-link,.item-row .buy-link,.ranking .buy-link{padding:.4rem 1rem;font-size:.9rem;box-shadow:0 3px 10px rgba(232,63,184,.35)}
.buy-bottom{margin:1.4rem 0 0}
.item-row{display:flex;gap:.6rem;align-items:flex-start}
.item-row .thumb img{width:60px;height:auto}
.rank-list{padding-left:1.4rem}.rank-list li{margin:.5rem 0}.score{font-size:.85rem;color:var(--muted)}
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.table td{border-bottom:1px solid var(--line);padding:.35rem .4rem;text-align:left;vertical-align:top}
.table.data th{width:8em;background:var(--panel)}
.ranking .rank{font-weight:700;text-align:center}.up{color:#0a7d2c}.down{color:var(--accent)}
.tags a{display:inline-block;margin:.15rem .3rem .15rem 0;padding:.1rem .5rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.9rem}
.tags .count{color:var(--muted);font-size:.8rem;margin-left:.25rem}
.hub-list,.month-list,.doc-list{padding-left:1.2rem}.hub-list li,.month-list li{margin:.15rem 0}.count{color:var(--muted);font-size:.85rem}
.week-nav ul,.month-nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.item-top{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:720px){.item-top{grid-template-columns:3fr 2fr}}
/* スマホ（幅 375px など）: 見出し・紹介文・購入ボタンを最初の画面に入れるため、画像より前に出す（HTML の順番は変えず、PC の並びもそのまま）。
   画像は購入ボタンの下に置く。タイトルと価格の行は少し小さくして縦の幅を節約する */
@media(max-width:719px){
 .item-top{display:flex;flex-direction:column;gap:.6rem}
 .item-top .item-price{order:1}
 .item-top .item-images{order:2}
 .item-title{font-size:1.1rem;line-height:1.4;margin:.5rem 0 .2rem}
 .item-page>.meta{margin:.1rem 0 .4rem}
 .hook-headline{font-size:1.25rem;line-height:1.4;margin:.1rem 0 .4rem}
 .hook-body{font-size:1rem;line-height:1.7;margin:.35rem 0}
 .hook-note{margin:.3rem 0 .1rem}
 .price-line{font-size:1.15rem;margin:.1rem 0}
 .item-price .buy{margin:.5rem 0 0}
}
.jacket{width:100%;max-width:800px;height:auto;border:1px solid var(--line)}
.samples{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}.samples img{width:120px;height:auto;border:1px solid var(--line)}
.price-line{font-size:1.3rem;margin:.2rem 0}
.description p,.intro p{margin:.5rem 0}
/* 「データで見るこの作品」は数字の自動文。紹介文で上げた気分を戻さないよう、たたんで下に置く */
details.description{margin:1.2rem 0;padding:.5rem .9rem;background:var(--panel);border-radius:8px}
details.description summary{cursor:pointer;font-weight:700;font-size:1rem}
/* サンプル画像（SPEC §11.16）: サンプル（大）を切り抜かずに石積み風（CSS の columns）に。スマホ 2 列・PC 3 列。押すと拡大（static/gallery.js） */
.sample-section{margin:1.2rem 0}
.sample-section .buy{margin-top:.5rem}
.gallery{columns:2;column-gap:.5rem}
@media(min-width:720px){.gallery{columns:3;column-gap:.7rem}}
.gallery-item{display:block;width:100%;margin:0 0 .5rem;padding:0;border:0;background:#f4f2f7;border-radius:6px;cursor:zoom-in;break-inside:avoid;-webkit-column-break-inside:avoid;line-height:0}
.gallery-item img{display:block;width:100%;height:auto;border-radius:6px}
.gallery-item:focus-visible{outline:3px solid #e83fb8;outline-offset:2px}

.sample-movie-note{margin:.4rem 0 0}
/* 拡大表示（<dialog>）。画像は縦横とも画面に収まる大きさに縮小・拡大するだけ */
html.lb-open{overflow:hidden}
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:rgba(10,6,18,.94);color:#fff;overflow:hidden}
.lightbox::backdrop{background:rgba(0,0,0,.7)}
.lb-frame{position:absolute;inset:3rem 3.6rem 2.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.lb-img{display:block;max-width:100%;max-height:calc(100% - 1.8rem);width:auto;height:auto;pointer-events:auto;border-radius:4px}
.lb-count{margin:.5rem 0 0;font-size:.9rem;color:#d8d0ec;line-height:1.3}
.lb-btn{position:absolute;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:2rem;line-height:1;width:2.8rem;height:2.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-btn:hover,.lb-btn:focus-visible{background:rgba(232,63,184,.75);outline:2px solid #fff;outline-offset:1px}
.lb-btn[hidden]{display:none}
.lb-prev{left:.5rem;top:50%;transform:translateY(-50%)}
.lb-next{right:.5rem;top:50%;transform:translateY(-50%)}
.lb-close{right:.5rem;top:.5rem;font-size:1.7rem}
@media(max-width:600px){.lb-frame{inset:3.4rem .4rem 3.6rem}.lb-prev,.lb-next{top:auto;bottom:.5rem;transform:none}.lb-prev{left:25%}.lb-next{right:25%}}
/* 見出しと紹介文（SPEC §11.12）: 作品ページの先頭で一番目立たせる。一覧のカードには見出しを 1 行だけ出す */
.hook{margin:.2rem 0 .6rem}
.hook-headline{font-size:1.4rem;line-height:1.45;font-weight:900;margin:.2rem 0 .5rem;border-left:0;padding-left:0;color:#b3167f}
.hook-body{font-size:1.02rem;line-height:1.9;margin:.5rem 0}
.hook-note{font-size:.78rem;color:var(--muted);margin:.4rem 0 .2rem}
/* 作品ページの PR 表示（R4・L1・消費者庁ステマ Q&A Q13）: 小さめ・灰色。白地の --muted #666 は対比 5.7:1 で読める */
.pr-mark{color:var(--muted)}
.hook-line{font-size:.82rem;font-weight:700;line-height:1.45;color:#b3167f;margin:.15rem 0 .3rem}
.page-top .hook-line{color:#ffb3ec}
.doc-body{max-width:760px}.doc-body table{border-collapse:collapse;font-size:.9rem}.doc-body th,.doc-body td{border:1px solid var(--line);padding:.3rem .5rem}
.facts dl{display:grid;grid-template-columns:max-content 1fr;gap:.2rem 1rem;margin:0}.facts dt{font-weight:700}.facts dd{margin:0}
/* 年齢ゲート: 既定は非表示。JS が html.gate-open を付けたときだけ重ね表示（HTML は隠さない・L4/S2） */
.age-gate{display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:1000;align-items:center;justify-content:center;padding:1rem}
html.gate-open .age-gate{display:flex}
html.gate-open{overflow:hidden}
.age-gate-box{background:#fff;color:var(--fg);max-width:420px;border-radius:10px;padding:1.2rem 1.4rem;text-align:center}
.age-gate-title{font-size:1.3rem;font-weight:700;margin:0 0 .5rem}
.age-gate-actions{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0 0}
.btn{display:inline-block;border:0;border-radius:999px;padding:.6rem 1rem;font-size:1rem;font-weight:700;cursor:pointer;background:linear-gradient(90deg,#e83fb8,#7a3cff);color:#fff;text-decoration:none}
.btn-exit{background:#eee;color:var(--fg)}
/* 体験カード（SPEC §11）: 運営者が視聴して書いた感想。広告・自動生成文と見分けやすいよう枠と見出しを変える */
.experience-card{border-left:4px solid #e83fb8;background:#fff2fa}
.experience-card h2{border-left:0;padding-left:0;margin-top:.2rem}
.badge-seen{background:#b3167f}
.rv-summary{font-weight:600;margin:.4rem 0}
.rv-table{max-width:520px}
.rv-chip{display:inline-block;margin:.15rem .3rem .15rem 0;padding:.05rem .45rem;border:1px solid var(--line);border-radius:999px;font-size:.8rem;background:#fff}
.rv-score{color:var(--accent);font-weight:700}
.rv-highlights{padding-left:1.2rem}.rv-highlights li{margin:.2rem 0}
.rv-time{display:inline-block;min-width:3.5em;font-variant-numeric:tabular-nums;font-weight:700}
.rv-body p{margin:.5rem 0}

/* トップの帯と記事の一覧の小さな図（SPEC §11.8） */
.hero{margin:.4rem 0 1rem}.hero img{display:block;width:100%;border-radius:6px}
.guide-cards{list-style:none;padding:0;margin:0}.guide-cards li{display:flex;gap:.8rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px solid var(--line)}
.guide-thumb{flex:0 0 120px}.guide-thumb img{display:block;width:120px;height:auto;border:1px solid var(--line);border-radius:4px}
.guide-body img,.doc-body img{display:block;margin:1rem auto;border:1px solid var(--line);border-radius:6px}
@media (max-width:480px){.guide-thumb{flex-basis:84px}.guide-thumb img{width:84px}}

/* ===== 夜のネオン（SPEC §11.11・2026-10-22 本人選定）===== */
/* ヘッダーと PR 帯は全ページ共通で暗く。本文を暗くするのはトップ（body.page-top）だけ（記事・作品ページの読みやすさは従来どおり） */
.site-header{background:#0d0a14;border-bottom:1px solid #2c2445;padding:.7rem 1rem;position:relative}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#e83fb8,#7a3cff,transparent)}
.site-name{font-weight:900;letter-spacing:.02em;font-size:1.05rem}
.site-name a{color:#fff;display:inline-flex;align-items:center;gap:.5rem}
.mark{width:.95rem;height:.95rem;border-radius:4px;background:linear-gradient(135deg,#ff4fc3,#7a3cff);box-shadow:0 0 10px #e83fb8;flex:none}
.site-nav a{color:#cfc6e6;text-decoration:none;font-weight:600;font-size:.9rem}
.site-nav a:hover{color:#ff7ad9}
.site-nav a[aria-current="page"]{color:#fff}
.pr-notice{background:#241636;color:#f1dcff;border-bottom:1px solid #3a2656;font-size:1rem}

body.page-top{--fg:#ece8f5;--muted:#b3aac9;--bg:#0d0a14;--panel:#17122a;--line:#2c2445;--link:#ff8ade;--accent:#e83fb8;background:#0d0a14 radial-gradient(800px 400px at 85% -50px,rgba(232,63,184,.16),transparent 70%) no-repeat;color:var(--fg)}
.page-top h2{color:#fff;border-left-color:#e83fb8}
.page-top .lead,.page-top .small,.page-top .meta{color:#d8d0ec}
.page-top .item-card{background:#17122a;border-color:#2c2445}
.page-top .card-title a,.page-top .cast a{color:#f3eefc}
.page-top .price{color:#ffb3ec}
.page-top .panel{background:#17122a}
.page-top .tags a{border-color:#3a2f5c;color:#e9c8ff}
.page-top .site-footer{color:#b3aac9;border-top-color:#2c2445}
.page-top .site-footer a,.page-top main a{color:#ff8ade}
.page-top .guide-cards li{border-bottom-color:#2c2445}
.page-top .guide-thumb img{border-color:#2c2445}

.hv{position:relative;margin:0 -1rem;padding:2.2rem 1rem 1.4rem;overflow:hidden;text-align:center}
.hv-glow{position:absolute;inset:-30% -30% auto -30%;height:120%;background:radial-gradient(closest-side at 30% 40%,rgba(232,63,184,.35),transparent 70%),radial-gradient(closest-side at 75% 30%,rgba(122,60,255,.35),transparent 70%);pointer-events:none}
.hv>*{position:relative}
.hv-eyebrow{margin:0;font-size:.8rem;letter-spacing:.15em;color:#ff9be4;font-weight:700}
.hv h1{margin:.4rem 0 0;font-size:.95rem;font-weight:700;color:#cfc6e6;letter-spacing:.08em}
.hv-catch{margin:.2rem 0 .4rem;font-size:clamp(2.4rem,9vw,4.6rem);font-weight:900;line-height:1.1;letter-spacing:.04em;color:#fff;text-shadow:0 0 24px rgba(232,63,184,.6)}
.hv-catch em{font-style:normal;background:linear-gradient(90deg,#ff4fc3,#a56bff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(232,63,184,.55))}
.hv-sub{margin:0 auto 1.1rem;max-width:34em;color:#d8d0ec;font-size:.95rem}
.hv-sub strong{font-size:1.15rem;color:#fff;letter-spacing:.06em}
.hv-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:0 0 1.4rem}
.hv-btn{display:inline-block;padding:.65rem 1.4rem;border-radius:999px;background:linear-gradient(90deg,#e83fb8,#7a3cff);color:#fff!important;font-weight:800;text-decoration:none;box-shadow:0 6px 20px rgba(232,63,184,.4)}
.hv-ghost{background:rgba(122,60,255,.12);border:1px solid #a56bff;box-shadow:none;color:#f1dcff!important}
.hv-band{display:flex;justify-content:center;padding:.5rem 0 .2rem}
/* 作品の画像は元の縦横比（147:200）のまま縮小・拡大だけ（切り抜かない＝DMM の画像は拡大縮小のみ） */
.hv-card{flex:none;width:clamp(78px,14vw,147px);aspect-ratio:147/200;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 10px 26px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.1);margin-left:-1.2%;transform:rotate(var(--r,0deg)) translateY(var(--y,0));transition:transform .2s}
.hv-card:first-child{margin-left:0}
.hv-card img{width:100%;height:100%;object-fit:contain;display:block;max-width:none}
.hv-1{--r:-5deg;--y:8px}.hv-2{--r:-3deg;--y:2px}.hv-3{--r:-1deg;z-index:2}.hv-4{--r:1deg;z-index:2}.hv-5{--r:3deg;--y:2px}.hv-6{--r:5deg;--y:8px}
.hv-card:hover,.hv-card:focus{transform:translateY(-6px) scale(1.04);z-index:5}
.hv-note{margin:.6rem 0 0;font-size:.78rem;color:#a79fbb}
.hv-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:1rem 0 0}
.hv-chips a{display:inline-block;padding:.35rem .9rem;border-radius:999px;border:1px solid #3a2f5c;background:rgba(23,18,42,.8);color:#f1dcff!important;text-decoration:none;font-size:.88rem}
.hv-chips a:hover{border-color:#e83fb8}
@media (max-width:600px){
 .hv{padding:1.5rem .8rem 1rem}
 .hv-band{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.5rem .4rem .6rem}
 .hv-band::-webkit-scrollbar{display:none}
 .hv-card{width:27%;margin-left:-3%;scroll-snap-align:center}
 .site-nav{gap:.2rem .7rem}
}

/* 年齢確認は配色の変数に頼らず、どのページでも白地に濃い文字で固定（2026-10-22: トップの暗い配色で文字が白に近くなり読めなかった） */
.age-gate-box{background:#fff!important;color:#1a1a1a!important}
.age-gate-box p{color:#1a1a1a!important}
.age-gate-title{color:#111!important}
.age-gate .btn{background:linear-gradient(90deg,#e83fb8,#7a3cff)!important;color:#fff!important}
.age-gate .btn-exit{background:#e6e6e6!important;color:#1a1a1a!important;border:1px solid #bdbdbd}
/* ランキングの各段のサンプル画像（大）3 枚: 高さ 96px まで・幅は比率のまま（切り抜かない）。狭い画面では 3 枚とも縮んで横 1 行に収まる */
.rank-samples{display:flex;gap:.35rem;margin:.5rem 0 0;max-width:100%;overflow:hidden}
.rank-sample{flex:0 1 auto;min-width:0;display:block;line-height:0}
.rank-sample img{display:block;width:auto;height:auto;max-width:100%;max-height:96px;border-radius:4px;background:#f4f2f7}
/* 作品の詳しい情報（作品データの表）はたたんで下に置く */
details.item-facts{margin:1.2rem 0;padding:.5rem .9rem;background:var(--panel);border-radius:8px}
details.item-facts summary{cursor:pointer;font-weight:700;font-size:1rem}
details.item-facts .table{margin-top:.5rem}
/* 一覧のカード: 購入ボタンを各カードの下端にそろえる・「30%引き」を途中で折り返さない（2026-10-23） */
.item-card .card-body{display:flex;flex-direction:column;flex:1}
.item-card .buy{margin-top:auto;padding-top:.3rem}
.discount{white-space:nowrap}
/* ===== 特集（おすすめランキング記事・SPEC §11.14・§11.21・2026-10-24 本人「目につきやすい導入と秀逸なデザインに」）=====
   記事 /picks/<slug>/ と一覧 /picks/: 上にランキング（§11.19）と同じ夜のネオンの帯 .rk-hero（body.page-picks のときだけ幅いっぱい）→ .rk-wrap（1080px）。
   トップ: 帯のすぐ下の .tp-feature（最新の特集の大きなバナー）。
   DMM の画像は拡大縮小だけ（object-fit:contain・高さは自動か表紙と同じ 147:200 の枠・切り抜かない・画像に文字や枠を重ねない。メダルと番号は画像の外） */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.page-picks .site-main{max-width:none;padding:0}
/* 帯 */
.pk-tags{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;margin:0}
.pk-theme{display:inline-block;padding:.2rem .8rem;border-radius:999px;background:linear-gradient(135deg,#e83fb8,#7a3cff);color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.08em;line-height:1.5;box-shadow:0 4px 14px rgba(232,63,184,.35)}
.rk-hero .pk-h1{margin:.8rem 0 .7rem;font-size:clamp(1.75rem,6.6vw,3.1rem);line-height:1.2;letter-spacing:.02em;text-shadow:none}
.pk-h1-main,.tpf-title-main{background:linear-gradient(90deg,#fff 0%,#ffd1f1 30%,#ff4fc3 65%,#a56bff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(232,63,184,.45))}
.pk-h1 .pk-h1-top{vertical-align:.3em;font-size:max(.36em,.8rem)}
.pk-h1-sub{display:block;margin:.6rem 0 0;font-size:clamp(.92rem,2.7vw,1.12rem);font-weight:700;line-height:1.55;letter-spacing:.02em;color:#e4dcf5}
.pk-facts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem .9rem;margin:0;font-size:.9rem}
.pk-count{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .9rem;border-radius:999px;border:1px solid rgba(242,201,76,.6);background:rgba(242,201,76,.12);color:#ffe7a3;font-weight:800;font-size:.9rem;line-height:1.5}
.pk-count::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:#f2c94c;box-shadow:0 0 8px #f2c94c;flex:none}
.pk-date{color:#b3aac9;font-weight:600;font-size:.85rem}
.pk-index-sub{margin-top:.2rem;font-size:.92rem;font-weight:500}
@media(min-width:760px){.pk-tags,.pk-facts{justify-content:flex-start}}
/* 導入文と PR の一文 */
.pk-wrap{padding-bottom:1.5rem}
.pick-lead{max-width:52em;margin:1.6rem 0 0;padding:1.1rem 1.3rem;border-radius:14px;background:linear-gradient(180deg,#fff5fb,#fff);border:1px solid #f3d6ea;box-shadow:0 6px 22px rgba(60,20,90,.06)}
.pick-lead p{margin:.55rem 0;font-size:1.08rem;line-height:1.95;color:#2a2233}
.pick-lead p:first-child{font-size:1.16rem;font-weight:700;color:#1e1726}
.pick-pr{max-width:52em;margin:.6rem 0 0;font-size:.8rem}
/* 目次（順位・小さい表紙・作品名・★） */
.pick-toc{margin:2rem 0 0;scroll-margin-top:1rem}
.pick-toc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem}
@media(min-width:760px){.pick-toc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .9rem}}
.pick-toc-item{display:grid;grid-template-columns:2.2rem 46px minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.45rem .7rem;border:1px solid #eee4f4;border-radius:10px;background:#fff;color:var(--fg);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pick-toc-item:hover,.pick-toc-item:focus-visible{border-color:#e83fb8;box-shadow:0 4px 14px rgba(232,63,184,.15)}
.pick-toc-no{justify-self:center;font-weight:900;font-size:1.15rem;line-height:1;background:linear-gradient(180deg,#ff4fc3,#6a2ee8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pick-toc-no-1,.pick-toc-no-2,.pick-toc-no-3{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;font-size:.95rem;-webkit-background-clip:border-box;background-clip:border-box;color:#4a3300;box-shadow:inset 0 -2px 4px rgba(0,0,0,.18),inset 0 2px 4px rgba(255,255,255,.55)}
.pick-toc-no-1{background:radial-gradient(circle at 35% 30%,#fff6c8,#f2c94c 45%,#b8860b)}
.pick-toc-no-2{background:radial-gradient(circle at 35% 30%,#fff,#cfd5de 45%,#8e98a6);color:#2b3440}
.pick-toc-no-3{background:radial-gradient(circle at 35% 30%,#ffe2c4,#d99560 45%,#94562a);color:#3b1f08}
.pick-toc-img img{display:block;width:46px;height:auto;border-radius:4px;background:#f4f2f7}
.pick-toc-name{font-size:.86rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pick-toc-name strong{margin-right:.35rem}
.pick-toc-score{white-space:nowrap;color:#f5a623;font-size:.9rem;letter-spacing:.02em}
.pick-toc-score .pk-off{color:#ddd5ea}
@media(max-width:480px){.pick-toc-item{grid-template-columns:2rem 40px minmax(0,1fr);gap:.1rem .6rem}.pick-toc-no,.pick-toc-img{grid-row:span 2}.pick-toc-img img{width:40px}.pick-toc-score{grid-column:3;font-size:.8rem}}
/* 作品の段（共通） */
.pk-sec{margin:2.2rem 0 0;scroll-margin-top:1rem}
.pick-entry{scroll-margin-top:1rem}
.pick-head{display:flex;align-items:center;gap:.8rem;margin:0;border-left:0;padding:0;line-height:1.35}
.pick-label{font-size:1.35rem;font-weight:900}
.pick-label-title{font-size:1.02rem;font-weight:800}
.pick-label-title a{color:var(--fg);text-decoration:none}.pick-label-title a:hover{color:#b3167f;text-decoration:underline}
/* 各段の画像（2026-10-24 改・SPEC §11.21）: パッケージ・見どころの場面・サンプルを 1 つの四角にすき間なく並べる。
   static/gallery.js が画像の実寸の縦横比から並びを選び、枠を画像の形に合わせて置く（.is-laid・高さは --pk-r × 幅）。
   画像は枠いっぱいに object-fit:contain（拡大縮小だけ・切り抜かない）。合わない分の余白は落ち着いた暗い色。
   JS が無い・読み込み前は パッケージ（8:5 の枠）→ 場面の組（見どころを大きく左・サンプルを右に縦に）の枠に収める */
.picks-page{--pk-mat:#221a2c}
.pick-img{--pk-r:1.05;display:flex;flex-direction:column;gap:.45rem;min-width:0}
.pick-pkg{position:relative;display:block;aspect-ratio:8/5;border-radius:8px;background:var(--pk-mat)}
.pick-pkg img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;border-radius:8px}
.pick-shots{margin:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr auto;gap:.4rem}
.pick-shots .gallery-item{position:relative;display:block;min-width:0;min-height:0;margin:0;background:var(--pk-mat);border-radius:6px}
.pick-shots .gallery-item img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;border-radius:6px}
.pick-shots .pick-shot-lead{grid-row:1/3;aspect-ratio:3/2;box-shadow:0 0 0 2px #e83fb8,0 6px 18px rgba(232,63,184,.28)}
.pick-shots-1{grid-template-columns:minmax(0,1fr)}
.pick-shots-2>.gallery-item:not(.pick-shot-lead){grid-row:1/3}
.pick-shots-4{grid-template-rows:1fr 1fr 1fr auto}
.pick-shots-4 .pick-shot-lead{grid-row:1/4}
/* 並べたあと（gallery.js）: 四角の高さは padding-top、各画像は位置と大きさを JS が入れる */
.pick-img.is-laid{position:relative;display:block}
.pick-img.is-laid .pick-pkg,.pick-img.is-laid .pick-shots .gallery-item{position:absolute;aspect-ratio:auto;grid-row:auto}
.pick-img.is-laid .pick-shots{display:block;padding-top:.45rem}
.pick-shots figcaption{grid-column:1/-1;font-size:.76rem;line-height:1.5;color:var(--muted)}
.pick-body{min-width:0}
.pick-body .card-title{font-size:1rem;font-weight:700;margin:.1rem 0 .3rem}
/* ★の帯（当たり度） */
.pick-score{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin:.4rem 0 .5rem;padding:.45rem .85rem;border-radius:10px;background:linear-gradient(90deg,#1b1230,#2c1850);color:#fff}
.pk-rate{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.2rem .55rem}
.pk-rate-label{font-size:.76rem;font-weight:700;color:#d8d0ec;letter-spacing:.08em}
.pk-stars{font-size:1.2rem;line-height:1.2;color:#f7c948;letter-spacing:.08em;text-shadow:0 0 10px rgba(247,201,72,.45);white-space:nowrap}
.pk-stars .pk-off{color:#5a4d78;text-shadow:none}
.pk-rate-num{font-weight:900;font-size:1.05rem}.pk-rate-num small{font-size:.7em;color:#b3aac9;margin-left:.05em}
.pick-basis{margin-left:auto;font-size:.72rem;line-height:1.5;color:#e9dcff;border:1px solid #5a4d78;border-radius:999px;padding:.05rem .6rem;white-space:nowrap}
/* 本人の一言（summary）を大きめの引用で */
.pick-quote{margin:.7rem 0;padding:.75rem 1rem .6rem 1.1rem;border-left:4px solid #e83fb8;border-radius:0 12px 12px 0;background:linear-gradient(90deg,#fff0f9,#fbf7ff)}
.pick-quote .rv-summary{margin:0;font-size:1.06rem;line-height:1.8;font-weight:700;color:#2a1f33}
.pick-quote-by{margin:.25rem 0 0;font-size:.74rem;color:#857796;text-align:right}
/* こんな人に（note） */
.pick-comment{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .5rem;margin:.6rem 0;font-weight:700;line-height:1.6}
.pick-for{flex:none;display:inline-block;padding:.1rem .7rem;border-radius:999px;background:linear-gradient(135deg,#e83fb8,#7a3cff);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.04em;line-height:1.6}
.pick-chips{margin:.3rem 0}
.pick-chips .rv-chip{background:#f7f2fb;border-color:#e6dbf0;color:#4b3b5e;font-size:.76rem}
.pick-price .price{font-size:1.15rem;color:#b3167f}
.pick-more{margin:.6rem 0 0;font-size:.9rem;font-weight:700}
.pick-more a{color:#b3167f}
/* 1〜3 位（表彰台）: PC は 1 位を横長に全幅、2・3 位を横に並べる。スマホは縦に積む */
.pk-podium{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem}
.pk-podium>.pick-entry{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;align-content:start;padding:1.1rem;border-radius:16px;background:#fff;border:1px solid #eadff3;box-shadow:0 10px 30px rgba(60,20,90,.1)}
.pk-podium>.pick-entry:nth-child(1){border:2px solid #e6c15a;background:linear-gradient(180deg,#fff8e6,#fff 40%)}
.pk-podium>.pick-entry:nth-child(2){border-top:4px solid #b8c0cc}
.pk-podium>.pick-entry:nth-child(3){border-top:4px solid #c98a55}
.pk-podium .pick-head{padding-top:.55rem}
.pk-podium .buy-link{padding:.65rem 1.6rem;font-size:1.05rem}
@media(min-width:760px){
 .pk-podium{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pk-podium>.pick-entry:nth-child(1){grid-column:1/-1;padding:1.4rem}
 /* 2・3 位は同じ高さの枠に。見出し・画像・本文の行を subgrid で横の枠とそろえる（画像の枠は比率で決まるので同じ高さ） */
 .pk-podium>.pick-entry:nth-child(n+2){grid-row:span 3;grid-template-rows:subgrid;row-gap:.8rem}
 .pk-podium>.pick-entry:nth-child(n+2) .pick-img{--pk-r:.9}
 .pk-podium>.pick-entry:nth-child(1) .pick-label-title{font-size:1.15rem}
 .pk-podium>.pick-entry:nth-child(1) .pick-quote .rv-summary{font-size:1.18rem}
}
/* 1 位: 中くらいの幅（760〜959px）は パッケージ｜場面の組 を横に並べて本文の上に（全幅で縦に積むと画像が大きすぎる） */
@media(min-width:760px) and (max-width:959.98px){
 .pk-podium>.pick-entry:nth-child(1) .pick-img{--pk-r:.6}
 .pk-podium>.pick-entry:nth-child(1) .pick-img:not(.is-laid){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:.6rem}
}
/* 1 位は広い画面では 画像（パッケージ＋場面の組）｜本文 の横並び（列の高さがおおむね釣り合う幅） */
@media(min-width:960px){
 .pk-podium>.pick-entry:nth-child(1){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"head head" "img body";align-items:start;gap:.9rem 1.5rem}
 .pk-podium>.pick-entry:nth-child(1) .pick-head{grid-area:head}
 .pk-podium>.pick-entry:nth-child(1) .pick-img{grid-area:img}
 .pk-podium>.pick-entry:nth-child(1) .pick-body{grid-area:body}
 .pk-podium>.pick-entry:nth-child(1) .pick-img{--pk-r:1}
}
/* 4 位以下: 少し小さめの段（番号をグラデーションの数字に・同じ要素を詰める） */
.pk-rest .pick-img{--pk-r:.95}
.pk-rest>.pick-entry{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:.6rem 1.4rem;align-items:start;padding:1.2rem 0;border-bottom:1px solid #eee4f4}
.pk-rest .pick-head{grid-column:1/-1}
.pick-no{flex:none;font-size:2.1rem;font-weight:900;line-height:1;background:linear-gradient(180deg,#ff4fc3,#6a2ee8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pick-no small{font-size:.45em;margin-left:.1em}
.pk-rest .pick-quote{padding:.55rem .85rem .45rem .95rem}
.pk-rest .pick-quote .rv-summary{font-size:.98rem}
@media(max-width:700px){
 .pk-rest>.pick-entry{grid-template-columns:minmax(0,1fr)}
 .pick-label{font-size:1.2rem}
 .pick-no{font-size:1.8rem}
}
@media(max-width:600px){
 .pick-img{--pk-r:.95}
 .pk-podium>.pick-entry{padding:.85rem;gap:.6rem}
 .pick-label-title{font-size:.95rem;line-height:1.45}
 .pk-podium .medal{width:2.6rem;height:2.6rem;font-size:1.2rem}
 .pk-podium .medal-crown{top:-.95rem;font-size:1rem}
}
/* 補足・このページについて */
.pick-extra{margin:2.2rem 0 0}
.pick-about{margin:2rem 0 0;padding:.8rem 1rem;border-radius:8px;background:var(--panel)}
.pick-about .meta{margin:0}
/* 特集のカード（一覧・ほかの特集）: 暗い地に表紙 3 枚（2・1・3）・題・テーマ・本数・更新日。カード全体が記事へのリンク */
.pick-others{margin:2.4rem 0 0}
.pkc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin:1.4rem 0 0}
@media(min-width:760px){.pkc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pkc{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;padding:1.1rem;border-radius:16px;border:1px solid transparent;background:linear-gradient(#150e26,#150e26) padding-box,linear-gradient(120deg,#ff4fc3,#7a3cff 55%,#2c2445) border-box;color:#ece8f5;text-decoration:none;box-shadow:0 10px 28px rgba(20,8,40,.25);transition:transform .2s,box-shadow .2s}
.pkc:hover,.pkc:focus-visible{transform:translateY(-3px);box-shadow:0 14px 34px rgba(232,63,184,.3)}
.pkc-pod,.tpf-pod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);align-items:end;gap:.55rem;width:100%;margin:0 auto}
.pkc-pod{max-width:300px}
.pkc-pod .rk-pod-item,.tpf-pod .rk-pod-item{width:auto;min-width:0}
.pkc-body{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-width:0}
.pkc-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.pkc-tag{display:inline-block;padding:.05rem .7rem;border:1px solid rgba(255,155,228,.5);border-radius:999px;background:rgba(232,63,184,.12);color:#ffc2ef;font-size:.74rem;font-weight:700;letter-spacing:.08em}
.pkc-theme{display:inline-block;padding:.05rem .7rem;border-radius:999px;background:linear-gradient(135deg,#e83fb8,#7a3cff);color:#fff;font-size:.74rem;font-weight:800}
.pkc-title{font-size:1.25rem;font-weight:900;line-height:1.3;color:#fff}
.pkc-sub{font-size:.85rem;line-height:1.5;color:#cfc6e6}
.pkc-facts{display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-size:.8rem;color:#b3aac9}
.pkc-count{color:#ffe7a3;font-weight:800}
.pkc-go{margin-top:.3rem;padding:.45rem 1.1rem;border-radius:999px;background:linear-gradient(90deg,#e83fb8,#7a3cff);color:#fff;font-weight:800;font-size:.9rem;box-shadow:0 6px 18px rgba(232,63,184,.35)}
@media(min-width:760px){.pkc{grid-template-columns:minmax(0,210px) minmax(0,1fr);align-items:center}.pkc-pod{max-width:none}}
/* トップの特集の枠（帯のすぐ下・「今週の新作」より上） */
.tp-feature{margin:1.2rem 0 1.4rem}
.tpf-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:1.3rem;padding:1.4rem 1.2rem;border-radius:20px;border:1px solid transparent;background:linear-gradient(135deg,#21123a,#140d27 55%,#1c1030) padding-box,linear-gradient(120deg,#ff4fc3,#a56bff 45%,#2c2445 80%) border-box;box-shadow:0 18px 48px rgba(0,0,0,.5),0 0 40px rgba(232,63,184,.12)}
.tpf-glow{position:absolute;inset:-60% -20% auto 25%;height:220%;background:radial-gradient(closest-side at 60% 40%,rgba(232,63,184,.3),transparent 70%),radial-gradient(closest-side at 85% 70%,rgba(122,60,255,.28),transparent 70%);pointer-events:none}
.tpf-text,.tpf-pod{position:relative;min-width:0}
.tpf-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;margin:0}
.tpf-date{font-size:.78rem;color:#b3aac9;font-weight:600}
.page-top .tpf-title{margin:.7rem 0 .55rem;padding:0;border-left:0;font-size:clamp(1.35rem,5.4vw,2.7rem);font-weight:900;line-height:1.2;letter-spacing:.02em}
.page-top .tpf-title a{color:#fff;text-decoration:none}
.tpf-title .tpf-top{vertical-align:.3em;font-size:max(.4em,.8rem)}
.page-top .tpf-lede{margin:0 0 .7rem;max-width:34em;font-size:1.02rem;line-height:1.8;color:#e4dcf5}
.tpf-facts{margin:0}
.tpf-cta{margin:1rem 0 0}
.tpf-btn{padding:.75rem 1.9rem;font-size:1.05rem}
.tpf-pod{max-width:360px}
.tpf-pod .rk-pod-1 .rk-pod-img{box-shadow:0 10px 28px rgba(0,0,0,.6),0 0 0 2px #e6c15a,0 0 22px rgba(242,201,76,.4)}
.tpf-others{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:.8rem 0 0;padding:0}
.tpf-others a{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.4rem;padding:.35rem .9rem;border-radius:999px;border:1px solid #3a2f5c;background:rgba(23,18,42,.85);color:#f1dcff!important;text-decoration:none;font-size:.88rem;font-weight:700}
.tpf-others a:hover{border-color:#e83fb8}
.tpf-other-tag{font-size:.7rem;color:#ff9be4;letter-spacing:.08em}
.tpf-other-theme{font-size:.72rem;padding:0 .45rem;border-radius:999px;background:rgba(232,63,184,.25);color:#ffd1f1}
@media(min-width:760px){.tpf-card{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center;gap:2rem;padding:1.9rem 2.1rem}.tpf-pod{max-width:none}}

/* ===== ランキング（SPEC §11.19・2026-10-24 本人「タイトルを秀逸に・説明文は下に小さく・アクセントを」）=====
   上に夜のネオンの帯（幅いっぱい）→ TOP 3 の表彰台（金・銀・銅のメダル）→ 4〜10 位 → 11〜30 位（小さいカード 2 列）→ 31〜100 位（details の中の 1 行）。
   DMM の画像は拡大縮小だけ（object-fit:contain・切り抜かない・画像に文字や枠を重ねない。メダルは画像の外の rank-head に置く） */
body.page-ranking .site-main{max-width:none;padding:0}
.rk-wrap{max-width:1080px;margin:0 auto;padding:0 1rem 1rem}
.rk-hero{position:relative;overflow:hidden;text-align:center;background:#0d0a14;color:#ece8f5;padding:2.4rem 1rem 1.9rem}
.rk-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#e83fb8,#7a3cff,transparent)}
.rk-glow{position:absolute;inset:-40% -20% auto -20%;height:170%;background:radial-gradient(closest-side at 25% 45%,rgba(232,63,184,.32),transparent 70%),radial-gradient(closest-side at 78% 35%,rgba(122,60,255,.34),transparent 70%);pointer-events:none}
.rk-hero>*{position:relative}
.rk-tag{display:inline-flex;align-items:center;gap:.45rem;margin:0;padding:.2rem .85rem;border:1px solid rgba(255,155,228,.5);border-radius:999px;background:rgba(232,63,184,.12);color:#ffc2ef;font-size:.8rem;font-weight:700;letter-spacing:.08em}
.rk-dot{width:.5rem;height:.5rem;border-radius:50%;background:#ff4fc3;box-shadow:0 0 8px #ff4fc3;flex:none}
.rk-hero h1{margin:.75rem 0 .35rem;font-size:clamp(2rem,7.2vw,3.6rem);font-weight:900;line-height:1.15;letter-spacing:.03em;color:#fff;text-shadow:0 0 24px rgba(232,63,184,.45)}
.rk-hero h1 em{font-style:normal;background:linear-gradient(90deg,#ff4fc3,#a56bff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 12px rgba(232,63,184,.5))}
.rk-h1-main{white-space:nowrap}
.rk-h1-top{display:inline-block;vertical-align:.4em;margin-left:.15em;padding:.15em .55em;border-radius:.4em;font-size:.36em;letter-spacing:.12em;line-height:1.2;color:#fff;background:linear-gradient(135deg,#e83fb8,#7a3cff);text-shadow:none;box-shadow:0 4px 16px rgba(232,63,184,.4)}
.rk-h1-top b{font-size:1.4em;margin-left:.1em}
.rk-sub{margin:0 auto;max-width:36em;color:#d8d0ec;font-size:clamp(.92rem,2.6vw,1.05rem);font-weight:600}
.rk-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:1.2rem 0 0}
.rk-jump a{display:inline-block;padding:.4rem 1rem;border-radius:999px;border:1px solid #4a3b73;background:rgba(23,18,42,.85);color:#f1dcff;text-decoration:none;font-size:.9rem;font-weight:700}
.rk-jump a:hover,.rk-jump a:focus-visible{border-color:#e83fb8;color:#fff;box-shadow:0 0 12px rgba(232,63,184,.45)}
.rk-empty{margin:1.6rem 0}
/* 見出しの帯の 1〜3 位の小さい絵（SPEC §11.19）: スマホは見出しの下に横 3 枚（2・1・3 の表彰台の並び＝grid の列で・order は使わない）、760px 以上は帯の右。拡大縮小だけで切り抜かない・番号は絵の外の下 */
.rk-hero-in{position:relative;max-width:1080px;margin:0 auto}
.rk-pod{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-items:end;gap:.7rem;margin:1.1rem auto 0}
.rk-pod-item{display:flex;flex-direction:column;align-items:center;gap:.35rem;flex:none;width:clamp(76px,26vw,96px);text-decoration:none;transition:transform .2s}
.rk-pod-item:hover,.rk-pod-item:focus-visible{transform:translateY(-4px)}
.rk-pod-1{grid-area:1/2;width:clamp(88px,30vw,116px)}.rk-pod-2{grid-area:1/1}.rk-pod-3{grid-area:1/3}
.rk-pod-img{display:block;width:100%;aspect-ratio:147/200;border-radius:8px;overflow:hidden;background:#000;box-shadow:0 8px 22px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12)}
.rk-pod-1 .rk-pod-img{box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 0 2px #e6c15a,0 0 18px rgba(242,201,76,.35)}
.rk-pod-img img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.rk-pod-img .noimg{display:flex;align-items:center;justify-content:center;height:100%;color:#a79fbb;font-size:.75rem}
.rk-pod-no{display:inline-flex;align-items:baseline;justify-content:center;min-width:2.4rem;padding:.1rem .55rem;border-radius:999px;font-weight:900;font-size:.95rem;line-height:1.3;color:#4a3300;box-shadow:inset 0 -2px 4px rgba(0,0,0,.18),inset 0 2px 4px rgba(255,255,255,.55)}
.rk-pod-no small{font-size:.7em;margin-left:.1em}
.rk-pod-no-1{background:radial-gradient(circle at 35% 30%,#fff6c8,#f2c94c 45%,#b8860b)}
.rk-pod-no-2{background:radial-gradient(circle at 35% 30%,#fff,#cfd5de 45%,#8e98a6);color:#2b3440}
.rk-pod-no-3{background:radial-gradient(circle at 35% 30%,#ffe2c4,#d99560 45%,#94562a);color:#3b1f08}
@media(min-width:760px){
 .rk-hero{padding:1.9rem 1.5rem 1.6rem}
 .rk-hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.5rem}
 .rk-hero-text{text-align:left}
 .rk-hero h1{font-size:clamp(1.9rem,4.6vw,3.4rem)}
 .rk-sub{margin:0}
 .rk-jump{justify-content:flex-start}
 .rk-pod{margin:0;gap:.8rem}
 .rk-pod-item{width:clamp(76px,8.5vw,100px)}
 .rk-pod-1{width:clamp(88px,10vw,120px)}
}
/* 区切りの見出し */
.rk-sec{margin:2rem 0 0;scroll-margin-top:1rem}
.rk-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .8rem;margin:0 0 .9rem;padding:0 0 .45rem;border-left:0;position:relative}
.rk-h::after{content:"";position:absolute;left:0;bottom:0;width:100%;max-width:420px;height:3px;border-radius:3px;background:linear-gradient(90deg,#e83fb8,#7a3cff,transparent)}
.rk-h-main{font-size:1.45rem;font-weight:900;letter-spacing:.04em;background:linear-gradient(90deg,#c41f95,#6a2ee8);-webkit-background-clip:text;background-clip:text;color:transparent}
.rk-h-sub{font-size:.88rem;color:var(--muted);font-weight:600}
/* ★（平均点を 5 段で・半端は幅で） */
.rk-rate{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.1rem .35rem;vertical-align:middle}
.stars{position:relative;display:inline-block;font-size:1.05em;line-height:1;letter-spacing:.06em;color:#ddd5ea;white-space:nowrap}
.stars::before{content:"★★★★★"}
.stars-fill{position:absolute;left:0;top:0;height:100%;overflow:hidden;white-space:nowrap;color:#f5a623}
.stars-fill::before{content:"★★★★★"}
.rk-avg{font-weight:800;color:var(--fg)}
.rk-count{color:var(--muted);font-size:.88em}
/* 前週比の札 */
.chg{display:inline-block;margin-left:.35rem;padding:.05rem .45rem;border-radius:999px;font-size:.72rem;font-weight:800;line-height:1.5;vertical-align:middle;white-space:nowrap}
.chg-new{background:#fde7f5;color:#a3106f}
.chg-up{background:#e3f6ea;color:#0a6b27}
.chg-down{background:#fdecea;color:#a3261e}
.chg-same{background:#f0eef4;color:#5d5670}
.rk-price .price{font-size:1.1rem;color:#b3167f}
.rank-img img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain;border-radius:6px;background:#f4f2f7}
.rank-body .card-title{font-size:1rem;font-weight:700;margin:.1rem 0 .4rem}
.rank-card .buy-link{padding:.5rem 1.2rem;font-size:.95rem}
.rank-no small{font-size:.6em;margin-left:.1em}
/* TOP 3（表彰台）: PC は 1 位を横長に大きく、2・3 位を横に並べる。スマホは縦に積む */
.rank-podium{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.rank-podium>.rank-card{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem;padding:1rem;border-radius:14px;background:#fff;border:1px solid #eadff3;box-shadow:0 8px 28px rgba(60,20,90,.1)}
.rank-podium>.rank-card:nth-child(1){border:2px solid #e6c15a;background:linear-gradient(180deg,#fff8e6,#fff 45%)}
.rank-podium>.rank-card:nth-child(2){border-top:4px solid #b8c0cc}
.rank-podium>.rank-card:nth-child(3){border-top:4px solid #c98a55}
.rank-podium .rank-head{display:flex;align-items:center;gap:.5rem;padding-top:.55rem}
.rank-podium .rank-img img{max-height:520px;border-radius:8px}
.rank-podium .card-title{font-size:1.02rem;font-weight:800;line-height:1.5}
.rk-hook{font-size:1.12rem;line-height:1.5;font-weight:900;color:#b3167f;margin:.2rem 0 .45rem}
.rank-podium .buy-link{padding:.65rem 1.6rem;font-size:1.05rem}
@media(min-width:760px){
 .rank-podium{grid-template-columns:repeat(2,minmax(0,1fr))}
 .rank-podium>.rank-card:nth-child(1){grid-column:1/-1;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"img head" "img body";grid-template-rows:auto 1fr;align-items:start;gap:.4rem 1.4rem;padding:1.3rem}
 .rank-podium>.rank-card:nth-child(1) .rank-head{grid-area:head}
 .rank-podium>.rank-card:nth-child(1) .rank-img{grid-area:img}
 .rank-podium>.rank-card:nth-child(1) .rank-body{grid-area:body}
 .rank-podium>.rank-card:nth-child(1) .card-title{font-size:1.15rem}
 .rank-podium>.rank-card:nth-child(1) .rk-hook{font-size:1.4rem}
}
/* 金・銀・銅のメダル（CSS のグラデーションの丸・画像は使わない） */
.medal{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:3.1rem;height:3.1rem;border-radius:50%;font-weight:900;font-size:1.45rem;line-height:1;color:#4a3300;box-shadow:inset 0 -3px 6px rgba(0,0,0,.18),inset 0 3px 6px rgba(255,255,255,.6),0 4px 12px rgba(0,0,0,.18)}
.medal::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(255,255,255,.55)}
.medal-1{background:radial-gradient(circle at 35% 30%,#fff6c8,#f2c94c 45%,#b8860b)}
.medal-2{background:radial-gradient(circle at 35% 30%,#fff,#cfd5de 45%,#8e98a6);color:#2b3440}
.medal-3{background:radial-gradient(circle at 35% 30%,#ffe2c4,#d99560 45%,#94562a);color:#3b1f08}
.medal-crown{position:absolute;top:-1.05rem;left:50%;transform:translateX(-50%);font-size:1.15rem;line-height:1;color:#d9a300;text-shadow:0 1px 2px rgba(0,0,0,.25);font-variant-emoji:text}
/* 4〜10 位: 番号＋大きいパッケージ画像＋本文＋サンプル 3 枚 */
.rank-cards{list-style:none;padding:0;margin:0}
.rank-cards>.rank-card{display:grid;grid-template-columns:3.2rem minmax(0,340px) minmax(0,1fr);gap:1rem;align-items:start;padding:1rem 0;border-bottom:1px solid var(--line)}
.rank-cards .rank-head{text-align:center}
.rank-cards .rank-head .chg{margin:.35rem 0 0}
.rank-cards .rank-no{display:block;font-size:1.9rem;font-weight:900;line-height:1.1;background:linear-gradient(180deg,#c41f95,#6a2ee8);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:700px){
  .rank-cards>.rank-card{grid-template-columns:2.4rem minmax(0,1fr);gap:.6rem}
  .rank-cards .rank-img{grid-column:2}
  .rank-cards .rank-body{grid-column:1/-1}
  .rank-cards .rank-no{font-size:1.5rem}
}
/* 11〜30 位: 小さめのカード（PC 2 列・サンプルなし） */
.rank-compact{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
@media(min-width:760px){.rank-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rank-compact>.rank-card{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:.8rem;align-items:start;padding:.75rem;border:1px solid var(--line);border-radius:10px;background:#fff}
.rank-compact .rank-img img{max-height:220px}
.rk-line{margin:0;display:flex;align-items:center;flex-wrap:wrap}
.rank-compact .rank-no{font-size:1.3rem;font-weight:900;line-height:1.2;color:#6a2ee8}
.rank-compact .card-title{font-size:.9rem;line-height:1.45;margin:.15rem 0 .2rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rank-compact .buy{margin-top:.4rem}
.rank-compact .buy-link{padding:.35rem .95rem;font-size:.85rem}
@media(max-width:480px){.rank-compact>.rank-card{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:.6rem;padding:.6rem}}
/* 31〜100 位: 閉じた details の中の細い 1 行 */
.rk-more{border:1px solid var(--line);border-radius:10px;background:#faf8fc}
.rk-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .4rem;padding:.9rem 1rem;font-weight:700}
.rk-more>summary::-webkit-details-marker{display:none}
.rk-more>summary::before{content:"";width:.55rem;height:.55rem;border-right:2px solid #b3167f;border-bottom:2px solid #b3167f;transform:rotate(-45deg);margin-right:.4rem;transition:transform .15s}
.rk-more[open]>summary::before{transform:rotate(45deg)}
.rk-more>summary:focus-visible{outline:3px solid #e83fb8;outline-offset:2px;border-radius:10px}
.rk-more .rk-h-main{font-size:1.2rem}
.rk-more-label{color:var(--muted);font-size:.92rem}
.rank-rest{list-style:none;margin:0;padding:0 .6rem .4rem}
.rank-rest>.rank-card{display:grid;grid-template-columns:2.8rem 48px minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.5rem .3rem;border-top:1px solid var(--line)}
.rank-rest .rank-no{font-weight:800;text-align:center;color:#5d4a86}
.rank-thumb img{display:block;width:48px;height:auto;border-radius:4px;background:#f4f2f7}
.rank-rest .card-title{font-size:.88rem;line-height:1.4;margin:0 0 .1rem}
.rank-rest .meta{margin:0}
.rank-rest .buy{margin:0}
.rank-rest .buy-link{padding:.3rem .8rem;font-size:.8rem;box-shadow:none;white-space:nowrap}
@media(max-width:560px){.rank-rest>.rank-card{grid-template-columns:2.2rem 44px minmax(0,1fr);gap:.5rem}.rank-thumb img{width:44px}.rank-rest .buy{grid-column:3}}
/* このランキングについて（算出の説明は下に小さく） */
.rk-about{margin:2.2rem 0 0;padding:.9rem 1rem;border-radius:8px;background:var(--panel);font-size:.82rem;color:var(--muted)}
.rk-about h2{font-size:.92rem;margin:0 0 .3rem;border-left:0;padding-left:0;color:#444}
.rk-about p{margin:.3rem 0}
.rk-calc{font-size:.78rem}
.page-ranking .week-nav{margin:2rem 0 0}
.page-ranking .week-nav h2{font-size:1rem;border-left-color:#e83fb8}
@media(max-width:600px){
 .rk-hero{padding:1.5rem .8rem 1.3rem}
 .rk-hero h1{margin:.6rem 0 .3rem}
 .rk-jump{margin-top:.9rem;gap:.35rem}
 .rk-jump a{padding:.35rem .8rem;font-size:.85rem}
 .rk-sec{margin-top:1.6rem}
 .rk-h-main{font-size:1.3rem}
 .rank-podium>.rank-card{padding:.8rem;gap:.5rem}
 .rank-podium .rank-head{padding-top:.45rem}
 .medal{width:2.6rem;height:2.6rem;font-size:1.2rem}
 .medal-crown{top:-.95rem;font-size:1rem}
}

/* 運営者モード（SPEC §11.20）: /owner/ の状態表示と、運営者モードの端末だけに JS が足す隅の札 */
.owner-state{background:var(--panel);border-left:4px solid #7a3cff;border-radius:6px;padding:.6rem .8rem}
.owner-state[data-owner="1"]{border-left-color:#1a7f37}
.owner-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.owner-actions .btn:disabled{opacity:.5;cursor:not-allowed}
.owner-badge{position:fixed;left:8px;bottom:8px;z-index:900;max-width:calc(100vw - 16px);box-sizing:border-box;background:#1a1a1a;color:#fff;font-size:.72rem;line-height:1.3;padding:.3rem .6rem;border-radius:999px;text-decoration:none;opacity:.85;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.owner-badge:hover,.owner-badge:focus{opacity:1;color:#fff}