/* ============================================================
   top-v2.css — トップ(ハブ) v2 ゆるかわPOP / .vstop スコープ / vt-*
   ============================================================ */
.vstop{
  --cream:#fff6ee;--card:#fff;--ink:#43344f;--ink2:#7c6e8c;
  --coral:#ff6f9c;--coral-d:#ff4f86;--peach:#ffb3a0;--mint:#36cdb8;--sky:#76d0ff;--lemon:#ffd23f;--lav:#b9a7ff;--line:#ffe3d6;
  --shadow:0 14px 34px -16px rgba(255,111,156,.45);--shadow-soft:0 10px 26px -14px rgba(126,80,120,.30);
  --r:26px;--pop:"Mochiy Pop One",sans-serif;--maru:"Zen Maru Gothic",system-ui,sans-serif;
  font-family:var(--maru);color:var(--ink);line-height:1.8;
  max-width:1120px;margin:0 auto;padding:8px 16px 50px;
  background-color:var(--cream);border-radius:var(--r);
  background-image:
    radial-gradient(circle at 12% 4%,rgba(118,208,255,.14),transparent 26%),
    radial-gradient(circle at 88% 2%,rgba(255,210,63,.16),transparent 22%),
    radial-gradient(rgba(255,179,160,.20) 1.4px,transparent 1.4px);
  background-size:auto,auto,22px 22px;
}
/* 親CSS継承を打ち消す自己完結リセット */
.vstop *{box-sizing:border-box}
.vstop h1,.vstop h2,.vstop h3{margin:0;padding:0;line-height:1.45;letter-spacing:normal;border:0;background:none;color:inherit;font-weight:900}
.vstop p{margin:0 0 .6em;padding:0}
.vstop ul,.vstop ol,.vstop li{margin:0;padding:0;list-style:none}
.vstop a{color:inherit;text-decoration:none}
.vstop img{max-width:100%;height:auto;display:block;border:0;border-radius:0;box-shadow:none;margin:0}
.vstop span,.vstop b,.vstop small,.vstop strong{font-family:inherit;color:inherit}

/* hero */
.vt-hero{position:relative;margin:14px 0 6px;border-radius:var(--r);overflow:hidden;border:3px solid #fff;box-shadow:var(--shadow);
  background:radial-gradient(circle at 85% 20%,#ffe1ec,transparent 55%),linear-gradient(120deg,#fff4ec,#ffeaf2 60%,#e7faf5);
  padding:30px 26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.vt-hero svg{width:100px;height:100px;flex:none;filter:drop-shadow(0 8px 14px rgba(255,111,156,.35))}
.vt-hero .t{flex:1;min-width:240px}
.vt-hero h1{font-family:var(--pop);font-size:25px;line-height:1.45;margin-bottom:8px;font-weight:400}
.vt-hero h1 b{color:var(--coral)}
.vt-hero p{color:var(--ink2);font-weight:500;font-size:13.5px;max-width:560px}
.vt-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vt-pills a{background:#fff;border:2px solid var(--line);font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;transition:.18s}
.vt-pills a:hover{border-color:var(--coral);color:var(--coral);transform:translateY(-2px)}

/* section heading */
.vt-sec{padding:28px 0 4px}
.vt-h2{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.vt-h2 .ic{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:18px;transform:rotate(-6deg);background:linear-gradient(135deg,var(--coral),var(--peach))}
.vt-h2.mint .ic{background:linear-gradient(135deg,var(--mint),var(--sky))}
.vt-h2.lemon .ic{background:linear-gradient(135deg,var(--lemon),#ffac3c)}
.vt-h2.lav .ic{background:linear-gradient(135deg,var(--lav),var(--sky))}
.vt-h2 .tt{font-family:var(--pop);font-size:20px}
.vt-h2 .more{margin-left:auto;font-weight:700;font-size:13px;color:var(--coral);background:#fff0f5;padding:7px 14px;border-radius:999px}
.vt-h2 .more:hover{background:var(--coral);color:#fff}

/* card grid */
.vt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.vt-grid{grid-template-columns:repeat(2,1fr)}}
.vt-card{background:var(--card);border:3px solid #fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-soft);transition:.2s;position:relative}
.vt-card:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:var(--shadow)}
.vt-card .th{aspect-ratio:16/10;background:linear-gradient(135deg,#ffe0cf,#ffd0e2);display:grid;place-items:center;color:rgba(67,52,79,.35);font-size:11px;font-weight:700;position:relative;overflow:hidden}
.vt-card .th img{width:100%;height:100%;object-fit:cover}
.vt-card .th .pct{position:absolute;top:8px;right:8px;background:var(--coral);color:#fff;font-family:var(--pop);font-size:11px;padding:3px 9px;border-radius:999px;transform:rotate(4deg)}
.vt-card .th .rank{position:absolute;top:-6px;left:8px;width:36px;height:42px;background:linear-gradient(135deg,var(--lemon),#ffac3c);color:#fff;font-family:var(--pop);font-size:18px;display:grid;place-items:center;border-radius:0 0 12px 12px;box-shadow:var(--shadow-soft)}
.vt-card .th .rank.r1{background:linear-gradient(135deg,#ffd23f,#ff9e3c)}
.vt-card .th .rank.r2{background:linear-gradient(135deg,#cdd6e0,#9fb0c2)}
.vt-card .th .rank.r3{background:linear-gradient(135deg,#f0b88a,#d8915c)}
.vt-card .m{padding:12px 13px}
.vt-card .m b{font-size:13px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.vt-card .m .pr{margin-top:7px;font-family:var(--pop);color:var(--coral);font-size:15px}
.vt-card .m .pr s{font-family:var(--maru);color:var(--ink2);font-size:11px;font-weight:500;margin-left:5px}

/* genre tiles */
.vt-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:760px){.vt-tiles{grid-template-columns:repeat(2,1fr)}}
.vt-tile{border-radius:18px;padding:18px 16px;font-family:var(--pop);font-size:16px;color:#fff;min-height:84px;display:flex;align-items:flex-end;box-shadow:var(--shadow-soft);transition:.2s;position:relative;overflow:hidden}
.vstop a.vt-tile{color:#fff} /* リセット(.vstop a{color:inherit})に勝たせる */
.vt-tile:hover{transform:translateY(-4px) scale(1.02)}
.vt-tile span{position:absolute;top:10px;right:12px;font-size:24px;opacity:.55}
.vt-tile.c1{background:linear-gradient(135deg,var(--coral),var(--peach))}
.vt-tile.c2{background:linear-gradient(135deg,var(--mint),var(--sky))}
.vt-tile.c3{background:linear-gradient(135deg,var(--lav),#8fb0ff)}
.vt-tile.c4{background:linear-gradient(135deg,var(--lemon),#ff9e5c)}
.vt-tile.c5{background:linear-gradient(135deg,#ff9bbb,#ff6f9c)}
.vt-tile.c6{background:linear-gradient(135deg,#6fd6c6,#3aa6c9)}
.vt-tile.c7{background:linear-gradient(135deg,#b6a7ff,#7c8cff)}
.vt-tile.c8{background:linear-gradient(135deg,#ffc46b,#ff8f5c)}

/* actress row */
.vt-actrow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:760px){.vt-actrow{grid-template-columns:repeat(3,1fr)}}
.vt-act{text-align:center}
.vt-act .av{aspect-ratio:1/1;border-radius:50%;border:3px solid #fff;box-shadow:var(--shadow-soft);background:linear-gradient(135deg,#ffd9e6,#c8f3ec);overflow:hidden;transition:.2s}
.vt-act .av img{width:100%;height:100%;object-fit:cover}
.vt-act:hover .av{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--coral)}
.vt-act b{display:block;margin-top:8px;font-size:13px;font-weight:700}
.vt-act small{color:var(--ink2);font-weight:500;font-size:11px}

/* sale band */
.vt-saleband{background:linear-gradient(120deg,#fff,#fff6f9);border:3px solid #fff;border-radius:var(--r);box-shadow:var(--shadow);padding:18px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.vt-saleband svg{width:54px;height:54px;flex:none}
.vt-saleband b{font-family:var(--pop);font-size:16px}
.vt-saleband small{color:var(--ink2);font-weight:500;display:block}
.vt-saleband a{margin-left:auto;font-family:var(--pop);color:#fff;background:linear-gradient(120deg,var(--coral),var(--coral-d));padding:13px 26px;border-radius:14px;box-shadow:0 12px 24px -10px rgba(255,79,134,.7)}

/* seo intro */
.vt-intro{background:var(--card);border:3px solid #fff;border-radius:var(--r);box-shadow:var(--shadow-soft);padding:22px;margin:24px 0 0;color:#5b4d68;font-size:14px}
.vt-intro h2{font-family:var(--pop);font-size:16px;color:var(--ink);margin-bottom:8px}
