:root{
  --accent:#8a2f6a;--accent-dark:#5c1f46;--accent-tint:#faf0f6;
  --cta:#ff3700;--cta-dark:#d62d00;--cta-tint:#fff2ee;
  --ink:#1a202c;--muted:#718096;--line:#e2e8f0;--bg-soft:#f7fafc;
}
*{box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;margin:0;color:var(--ink);background:#fff;line-height:1.9}
a{color:var(--accent-dark)}
img{max-width:100%;height:auto}
header.site{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;padding:20px 16px;text-align:center}
header.site .tagline{font-size:.85em;opacity:.9;margin-bottom:6px}
header.site .site-name{font-weight:700;font-size:1.6em}
header.site .site-name a{color:#fff;text-decoration:none}
nav.site{display:flex;justify-content:center;gap:18px;padding:10px;border-bottom:1px solid var(--line);font-size:.9em;flex-wrap:wrap}
nav.site a{color:var(--ink);text-decoration:none}
nav.site a:hover{color:var(--accent-dark)}
main{max-width:860px;margin:0 auto;padding:24px 16px 60px}
h1.page-title{font-size:1.45em;line-height:1.55;margin:0 0 .8em}
h2{font-size:1.18em;margin-top:2em;border-left:4px solid var(--accent);padding-left:10px}
h3{font-size:1.03em;margin-top:1.6em;color:var(--accent-dark)}
.note{font-size:.92em;color:#4a5568;background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:12px 14px}
.updated{display:inline-block;background:var(--accent-tint);color:var(--accent-dark);padding:3px 12px;border-radius:999px;font-size:.82em}

/* 表 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1em 0}
table{width:100%;border-collapse:collapse;font-size:.95em}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left}
th{background:var(--bg-soft);font-weight:600;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* CTA（サイトカラーの青と対比させたオレンジ） */
.cta{text-align:center;margin:1.6em 0}
.cta-btn{display:inline-block;background:linear-gradient(135deg,var(--cta),var(--cta-dark));color:#fff!important;
  text-decoration:none;font-weight:700;font-size:1.05em;padding:15px 38px;border-radius:999px;
  box-shadow:0 4px 14px rgba(255,55,0,.32);transition:transform .12s ease,box-shadow .12s ease}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,55,0,.42)}
.cta-note{font-size:.82em;color:var(--muted);margin-top:.5em}
/* 作品ページの主要CTA。真上のサムネイル画像と同じ横幅（本文コンテンツ幅いっぱい）にする */
.cta-btn.wide{display:block;width:100%;box-sizing:border-box;padding:17px 20px;border-radius:14px;font-size:1.1em}

/* タグチップ */
.chips{margin:.6em 0;line-height:2.4}
.chip{display:inline-block;background:var(--accent-tint);color:var(--accent-dark);text-decoration:none;
  padding:4px 12px;border-radius:999px;font-size:.85em;margin-right:6px}
.chip:hover{background:var(--accent);color:#fff}
.chip-cta{background:var(--cta-tint);color:var(--cta-dark)}
.chip-cta:hover{background:var(--cta);color:#fff}

/* 作品カードのグリッド（サムネイルで関連作品を並べる） */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px;margin:1.2em 0}
.work-card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#fff;transition:box-shadow .15s ease,transform .15s ease}
.work-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.10);transform:translateY(-2px)}
.work-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--bg-soft)}
.work-card .cap{display:block;padding:8px 10px 2px;font-size:.86em;font-weight:600;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.work-card .meta{display:block;padding:0 10px 10px;font-size:.78em;color:var(--muted)}
.work-card .price{color:var(--cta-dark);font-weight:700}

/* 一覧の索引カード */
.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:1.2em 0}
.index-card{display:block;border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.index-card:hover{border-color:var(--accent);background:var(--accent-tint)}
.index-card .name{font-weight:700;display:block}
.index-card .sub{font-size:.82em;color:var(--muted)}

/* タグ・価格帯カード（1位作品のサムネイルを背景にした画像カード） */
.visual-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:1.2em 0}
.visual-card{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  text-decoration:none;background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  box-shadow:0 2px 8px rgba(0,0,0,.12);transition:transform .15s ease,box-shadow .15s ease}
.visual-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.22)}
.visual-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.visual-card .scrim{position:absolute;left:0;right:0;bottom:0;height:75%;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,0) 100%)}
.visual-card .info{position:absolute;left:0;right:0;bottom:0;padding:14px 12px 12px}
.visual-card .name{display:block;color:#fff;font-weight:800;font-size:1.02em;line-height:1.35;
  text-shadow:0 1px 5px rgba(0,0,0,.6)}
.visual-card .count{display:inline-block;margin-top:6px;background:rgba(255,255,255,.94);
  color:var(--ink);font-size:.76em;font-weight:700;padding:3px 10px;border-radius:999px}

/* 構成比バー */
.bars{margin:1em 0}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:.88em}
.bar-label{flex:0 0 128px;text-align:right;color:#4a5568}
.bar-track{flex:1;background:var(--bg-soft);border-radius:999px;height:10px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--accent);border-radius:999px}
.bar-pct{flex:0 0 46px;color:var(--muted);font-variant-numeric:tabular-nums}

/* FAQ */
dl.faq{margin:1em 0}
dl.faq dt{font-weight:700;margin-top:1em}
dl.faq dd{margin:.3em 0 0;padding-left:1em;border-left:3px solid var(--line);color:#4a5568}

/* /ranking/ の絞り込み */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:1.2em 0;font-size:.9em}
.filters input[type=text]{padding:12px 18px;font-size:1em;border:1px solid var(--line);border-radius:999px;flex:1 1 240px;max-width:420px}
.filters select{padding:7px 10px;border:1px solid var(--line);border-radius:6px}
.filters label{display:flex;align-items:center;gap:5px}
.counts{font-size:.85em;color:var(--muted);margin:.4em 0}

.pager{margin:1.6em 0;text-align:center;font-size:.92em}
.pager a,.pager span{display:inline-block;padding:7px 13px;margin:0 3px;border:1px solid var(--line);border-radius:6px;text-decoration:none}
.pager .current{background:var(--accent);color:#fff;border-color:var(--accent)}

.promo-notice{font-size:.8em;color:var(--muted);background:var(--bg-soft);padding:9px 12px;border-radius:8px;margin-top:2.5em}
footer.site{border-top:1px solid var(--line);margin-top:3em;padding:24px 16px;text-align:center;font-size:.85em;color:var(--muted)}
footer.site a{color:var(--muted);margin:0 8px}
.age-notice{font-size:.8em;color:var(--muted);margin:0 0 .5em}
.age-gate{position:fixed;inset:0;background:rgba(15,23,42,.93);display:flex;align-items:center;justify-content:center;z-index:999;padding:20px}
.age-gate-inner{background:#fff;border-radius:14px;padding:32px 28px;max-width:360px;text-align:center;line-height:1.8}
.age-gate-title{font-weight:700;font-size:1.1em;margin:0 0 12px}
.age-btn{background:var(--cta);color:#fff;border:none;border-radius:999px;padding:12px 28px;font-size:1em;cursor:pointer;margin-top:8px}
.age-btn:hover{background:var(--cta-dark)}
.age-no{display:inline-block;margin-top:10px;color:var(--muted);font-size:.9em}