:root { --bg:#fff; --tint:#f6f5f8; --ink:#17141b; --ink-2:#5f5966; --ink-3:#96909c;
        --hair:#e9e6ec; --accent:#c2185b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.7;
       font-family:"Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif; }
a { color:inherit; }
main { max-width:1000px; margin:0 auto; padding:0 16px 24px; }
.site-head { max-width:1000px; margin:0 auto; padding:16px; }
.logo { font-weight:800; font-size:1.2rem; text-decoration:none; }
footer { color:var(--ink-3); font-size:.75rem; text-align:center; padding:40px 16px;
         border-top:1px solid var(--hair); margin-top:40px; }
.intro h1 { font-size:clamp(1.4rem,4.5vw,2rem); line-height:1.3; margin:16px 0 8px; }
.intro p { margin:0; color:var(--ink-2); font-size:.9rem; }
.note { color:var(--ink-3) !important; font-size:.78rem !important; margin-top:8px !important; }
.counts { display:flex; gap:12px; margin:16px 0 4px; }
.counts a { background:var(--tint); border-radius:12px; padding:10px 18px; font-weight:700;
            text-decoration:none; }
.counts a:hover { background:var(--hair); }
.group { margin-top:36px; }
.group h2 { font-size:1.2rem; margin:0; padding-bottom:8px; border-bottom:1px solid var(--hair); }
.group h2 small { font-size:.85rem; color:var(--ink-3); font-weight:500; margin-left:8px; }
.group .cards { margin-top:16px; }
.lead { margin:8px 0 0; font-size:.85rem; color:var(--ink-2); }
.counts { flex-wrap:wrap; }
/* VRは横長のパッケージ画像をそのまま見せる */
.vr-cards { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.card.vr .img img { aspect-ratio:auto; height:auto; object-fit:contain; }
.vr-tag { display:inline-block; margin-left:6px; padding:0 6px; border-radius:4px;
          background:var(--ink); color:#fff; font-size:.68rem; letter-spacing:.06em; }
.counts b { font-size:1.8rem; margin-right:2px; }
.counts span { display:block; font-size:.75rem; color:var(--ink-3); font-weight:500; }

.cards { list-style:none; padding:0; margin:24px 0 0; display:grid;
         grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }
/* 大きいパッケージ画像（pl.jpg）の右側＝表紙だけを見せる（背表紙が入らない縦長の比率） */
.card .img img { width:100%; aspect-ratio:69/100; object-fit:cover; object-position:right center; display:block;
                 border-radius:8px; background:var(--tint); }
.card .body { padding-top:8px; }
.code { margin:0; font-size:.75rem; font-weight:700; color:var(--accent); letter-spacing:.04em; }
.ttl { font-size:.85rem; text-decoration:none; display:-webkit-box; -webkit-line-clamp:3;
       -webkit-box-orient:vertical; overflow:hidden; }
.ttl:hover { text-decoration:underline; }
.meta, .rank { margin:4px 0 0; font-size:.75rem; color:var(--ink-3); }
.rank a { color:var(--accent); }
.best { margin-top:32px; }
.best summary { cursor:pointer; font-weight:700; color:var(--ink-2); padding:10px 0;
                border-bottom:1px solid var(--hair); }

.others { margin-top:48px; }
.others h2 { font-size:1.1rem; border-bottom:1px solid var(--hair); padding-bottom:8px; }
.others ul { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.others a { display:inline-block; background:var(--tint); border-radius:999px; padding:4px 14px;
            font-size:.85rem; text-decoration:none; }
.others small { color:var(--ink-3); margin-left:6px; }

.foot-links { display:flex; justify-content:center; flex-wrap:wrap; gap:4px 20px; margin-bottom:12px; }
.foot-links a { color:var(--ink-2); text-decoration:none; }
.foot-links a:hover { text-decoration:underline; }
.doc { max-width:42em; }
.doc h1 { font-size:clamp(1.4rem,4.5vw,1.8rem); margin:16px 0 16px; }
.doc h2 { font-size:1.05rem; margin:28px 0 6px; }
.doc p, .doc li { font-size:.92rem; color:var(--ink-2); }
.btn { display:inline-block; background:var(--ink); color:#fff; text-decoration:none; font-weight:700;
       padding:12px 28px; border-radius:999px; margin-top:8px; }
.btn:hover { background:var(--accent); }

.actresses { list-style:none; padding:0; margin:24px 0 0; display:grid;
             grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px; }
.actresses a { display:block; text-decoration:none; }
.actresses img { width:100%; aspect-ratio:69/100; object-fit:cover; object-position:right center; border-radius:8px;
                 display:block; background:var(--tint); }
.actresses .nm { display:block; font-weight:700; margin-top:6px; }
.actresses .n { font-size:.8rem; color:var(--ink-3); }
@media (max-width:600px) {
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .vr-cards { grid-template-columns:minmax(0,1fr); }
  .actresses { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
}