/* サキュ姉妹のおすすめ同人ガイド（2026-10-10）
   うすいラベンダーの明るい地に 紫（長女）とピンク（次女）。水色（三女）は小さな差し色だけ。
   姉妹サイトの 黒と金・水色 とかぶらない色。色・余白・動きは この先頭の値だけで決める（スキル homepage-scroll-motion） */
:root {
  --bg: #f6f2fb;
  --surface: #ffffff;
  --surface-2: #efe7f8;
  --line: rgba(124, 63, 184, .18);
  --ink: #2a1f3a;
  --sub: #6b5d7e;
  --violet: #8a4fd0;
  --violet-deep: #5d2a98;
  --pink: #ee5c9b;
  --pink-deep: #b8336d;
  --sky: #3f9fd9;
  --sky-deep: #1f6fa3;
  --heart: #ff6fa6;
  --gold: #c08310;
  --btn: linear-gradient(120deg, #6d34b0, #d9468a);
  --radius: 16px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --reveal: .5s;
  --wrap: 1180px;
  --gutter: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); line-height: 1.8; font-size: 16px;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(238, 92, 155, .12), transparent 60%),
    radial-gradient(760px 480px at -10% 26%, rgba(138, 79, 208, .13), transparent 55%),
    var(--bg);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  font-feature-settings: "palt"; letter-spacing: .03em;
  /* 文節（<wbr>）でだけ折り返す（スキル homepage-kutouten-kaigyo） */
  word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
}
body * { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; line-height: 1.35; }
p, li, dd, dt { text-wrap: pretty; }
body.is-locked { overflow: hidden; }
a { color: var(--violet-deep); }
img { max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.np { display: inline-block; white-space: nowrap; }

/* ヘッダー */
.pr { margin: 0; padding: 5px 16px; background: var(--violet-deep); color: #e6d8f6; font-size: 11px; text-align: center; }
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 10px; padding-bottom: 10px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; text-decoration: none; white-space: nowrap; }
.logo img { border-radius: 50%; box-shadow: 0 0 0 2px var(--violet), 0 4px 14px rgba(138, 79, 208, .4); }
.gnav { display: flex; gap: 4px 16px; font-size: 14px; overflow-x: auto; scrollbar-width: none; }
.gnav::-webkit-scrollbar { display: none; }
.gnav a { color: var(--sub); text-decoration: none; white-space: nowrap; transition: color .3s var(--ease); }
.gnav a:hover { color: var(--ink); }
.gnav .gnav-pink { color: var(--violet-deep); } .gnav .gnav-violet { color: var(--violet-deep); } .gnav .gnav-cyan { color: var(--pink-deep); }
.gnav a[class^="gnav-"] { font-weight: 700; }

/* ボタン */
.btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 22px; border-radius: 999px; border: 0;
  background: var(--btn); color: #fff; font-weight: 800; text-decoration: none; text-align: center; cursor: pointer; overflow: hidden;
  box-shadow: 0 10px 26px rgba(109, 52, 176, .28); transition: transform .3s var(--ease), box-shadow .3s var(--ease); white-space: nowrap; }
.btn small { font-size: 11px; font-weight: 600; opacity: .9; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(109, 52, 176, .4); }
.btn-ghost { background: #fff; color: var(--violet-deep); box-shadow: inset 0 0 0 1.5px rgba(124, 63, 184, .45); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--violet); }
/* きらっと光が走る（短いループ） */
.btn-glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-120%); animation: shine 3.2s var(--ease) infinite; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ヒーロー（キャラの背景のうす紫に 白→水色で溶かす） */
.hero, .ch-hero { position: relative; overflow: hidden; display: grid; gap: 12px; align-items: center; margin: 18px 0 8px; padding: 34px 22px 0; border-radius: 26px;
  background: linear-gradient(160deg, #ffffff, #f4effa 45%, #fbe4ef); border: 1px solid var(--line); }
.ch-hero { padding-bottom: 26px; }
.hero > *, .ch-hero > * { position: relative; z-index: 2; }
.aurora { position: absolute; inset: 0; z-index: 0; filter: blur(40px); opacity: .8; }
.aurora i { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; }
.aurora i:nth-child(1) { left: -10%; top: -20%; background: radial-gradient(circle, rgba(138, 79, 208, .45), transparent 65%); }
.aurora i:nth-child(2) { right: -15%; top: 10%; background: radial-gradient(circle, rgba(238, 92, 155, .38), transparent 65%); }
.aurora i:nth-child(3) { left: 25%; bottom: -35%; background: radial-gradient(circle, rgba(180, 160, 230, .3), transparent 65%); }
[data-motion].is-running .aurora i:nth-child(1) { animation: drift1 18s ease-in-out infinite alternate; }
[data-motion].is-running .aurora i:nth-child(2) { animation: drift2 22s ease-in-out infinite alternate; }
[data-motion].is-running .aurora i:nth-child(3) { animation: drift1 26s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(18%, 12%, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-16%, 14%, 0) scale(.9); } }
.hearts { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hearts span { position: absolute; bottom: -20px; left: calc(6% + var(--i) * 11%); color: rgba(255, 122, 168, .5); font-size: calc(12px + (var(--i) * 3px) % 14px); opacity: 0; }
.hearts span:nth-child(3n) { color: rgba(138, 79, 208, .55); }
[data-motion].is-running .hearts span { animation: rise 7s linear infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-420px) scale(1.2) rotate(18deg); opacity: 0; } }
.eyebrow { margin: 0; color: var(--pink-deep); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.hero h1 { margin: 6px 0 8px; font-size: clamp(30px, 8vw, 58px); font-weight: 900; }
.grad { background: linear-gradient(100deg, var(--violet-deep), var(--violet) 45%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { margin: 0; color: var(--sub); max-width: 32em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-mascot { justify-self: center; align-self: end; position: relative; width: min(300px, 78vw); }
/* 絵の背景を 下と左右でふわっと消す */
.hero-mascot img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 80%, transparent);
  mask-composite: intersect; }
[data-motion].is-running .hero-mascot img { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.hero-bubble { position: absolute; top: 12%; left: -4%; margin: 0; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #fff; color: var(--violet-deep); border: 1.5px solid rgba(138, 79, 208, .5); font-size: 12px; font-weight: 800; line-height: 1.5; box-shadow: 0 8px 22px rgba(138, 79, 208, .25); }

/* 数字 */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.stat { padding: 14px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-align: center; box-shadow: 0 6px 18px rgba(124, 63, 184, .07); }
.stat strong { display: block; font-size: clamp(22px, 6vw, 32px); font-weight: 900; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat span { color: var(--sub); font-size: 12px; }
.stat-pink strong { color: var(--violet-deep); } .stat-violet strong { color: var(--violet-deep); } .stat-cyan strong { color: var(--pink-deep); } .stat-gold strong { color: var(--gold); }

/* チャンネルのカード（縁がゆっくり回る） */
h2 { margin: 40px 0 14px; font-size: clamp(20px, 5vw, 28px); font-weight: 900; }
h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(138, 79, 208, .18); vertical-align: middle; }
.h2-sub { margin-left: 10px; color: var(--sub); font-size: 13px; font-weight: 400; }
.ch-grid, .compare { display: grid; gap: 14px; }
.ch-card { position: relative; padding: 20px; border-radius: 20px; background: var(--surface); isolation: isolate; overflow: hidden; box-shadow: 0 10px 28px rgba(124, 63, 184, .1); }
.ch-card::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit;
  background: conic-gradient(from var(--a, 0deg), var(--c1), transparent 30%, var(--c2), transparent 70%, var(--c1)); }
.ch-card::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 18px; background: var(--surface); }
.ch-pink { --c1: var(--violet); --c2: #d7b8f5; } .ch-violet { --c1: var(--violet-deep); --c2: #f3a6c8; } .ch-cyan { --c1: var(--pink); --c2: #a9d6f3; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ch-card.is-shown::before { animation: spin 6s linear infinite; }
@keyframes spin { to { --a: 360deg; } }
.ch-name { margin: 0; font-size: 20px; font-weight: 900; }
.ch-price { margin: 4px 0; } .ch-price strong { font-size: 28px; font-weight: 900; } .ch-price > span { color: var(--sub); font-size: 12px; }
.ch-pink .ch-price strong { color: var(--violet-deep); } .ch-violet .ch-price strong { color: var(--violet-deep); } .ch-cyan .ch-price strong { color: var(--pink-deep); }
.ch-count { margin: 0; color: var(--sub); font-size: 13px; }
.ch-lead { margin: 10px 0 14px; font-size: 14px; }
.ch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-hero .ch-price strong { font-size: clamp(28px, 7vw, 44px); }
.ch-hero h1 { margin: 6px 0 2px; font-size: clamp(30px, 8vw, 54px); font-weight: 900; }

/* 流れる表紙の帯（スキル homepage-scroll-motion：画面の外では止める） */
.marquee-wrap { margin: 34px calc(var(--gutter) * -1) 6px; opacity: .55; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee { overflow: hidden; }
.marquee + .marquee { margin-top: 10px; }
.marquee__track { display: inline-flex; gap: 10px; width: max-content; transform: translateZ(0); }
.marquee__track img { width: 110px; height: 150px; object-fit: cover; border-radius: 10px; }
.marquee.is-running .marquee__track { animation: marquee 80s linear infinite; }
.marquee--rev.is-running .marquee__track { animation-direction: reverse; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* キャラのひと言 */
.say { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 14px; }
.say-img { flex: none; width: 72px; height: 96px; object-fit: cover; object-position: 50% 12%; border-radius: 999px 999px 14px 14px; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(138, 79, 208, .5), 0 8px 20px rgba(138, 79, 208, .25); background: var(--surface-2); }
.say-text { position: relative; margin: 0 0 10px; padding: 9px 14px; border-radius: 16px 16px 16px 4px; background: linear-gradient(120deg, #f1e6fb, #fde7f1); border: 1px solid rgba(138, 79, 208, .35); font-size: 14px; font-weight: 700; line-height: 1.6; }

/* カード */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 172px); gap: 12px; overflow-x: auto; padding: 4px 2px 16px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(124, 63, 184, .35) transparent; }
.rail .card { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 6px 18px rgba(124, 63, 184, .07); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { transform: translateY(-4px); border-color: rgba(138, 79, 208, .6); box-shadow: 0 16px 34px rgba(124, 63, 184, .18); }
.card-media { position: relative; display: block; aspect-ratio: 147 / 200; background: var(--surface-2); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-badges { position: absolute; left: 6px; bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.badge { padding: 2px 8px; border-radius: 999px; background: rgba(42, 31, 58, .82); border: 1px solid rgba(220, 190, 250, .7); color: #f6eefe; font-size: 10px; font-weight: 800; white-space: nowrap; }
.badge-big { font-size: 12px; padding: 3px 10px; }
.rank { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(42, 31, 58, .85); color: #fff; font-weight: 900; font-size: 13px; border: 1px solid rgba(255, 255, 255, .5); }
.rank-1 { background: linear-gradient(135deg, #ffe08a, #f2b632); color: #2a1a00; } .rank-2 { background: linear-gradient(135deg, #f1f3f8, #c9cfdd); color: #222; } .rank-3 { background: linear-gradient(135deg, #f3c39a, #d68a55); color: #2a1200; }
.card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 10px 10px 12px; }
.card-title { color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.5; text-decoration: none; }
.card-cast { margin: 0; font-size: 12px; } .card-cast a { color: var(--violet-deep); text-decoration: none; }
.card-cta { margin-top: auto; padding: 8px; border-radius: 999px; background: var(--btn); color: #fff; font-size: 12px; font-weight: 800; text-align: center; text-decoration: none; }
.more { margin: 6px 0 0; text-align: right; font-size: 14px; } .more a { margin-left: 12px; }

/* チップ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.chip span { color: var(--sub); font-size: 12px; }
.chip:hover { border-color: var(--violet); transform: translateY(-2px); }

/* 20代・30代の人気女優。表紙の右半分＝前の面を見せる */
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pick { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: 0 6px 18px rgba(124, 63, 184, .07); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.pick:hover { transform: translateY(-3px); border-color: var(--violet); }
.pick-media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-2); }
.pick-media img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; transition: transform .6s var(--ease); }
.pick:hover .pick-media img { transform: scale(1.05); }
.pick-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.pick-body strong { font-size: 15px; }
.pick-body span { color: var(--sub); font-size: 12px; }

/* キャラが右に立つ横長の帯（左に文字）。出てくるとき絵が少し寄る */
.banner { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 260px; margin: 34px 0; border-radius: 24px; background: #f4effa; border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(124, 63, 184, .14); }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 88% 18%; transform: scale(1.08); transition: transform 1.2s var(--ease); }
.banner.is-shown img { transform: scale(1); }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0, rgba(255, 255, 255, .82) 42%, rgba(255, 255, 255, 0) 66%); }
.banner-copy { position: relative; z-index: 1; width: min(62%, 480px); padding: 22px 18px 22px 22px; }
.banner-title { margin: 4px 0 6px; font-size: clamp(20px, 5vw, 32px); font-weight: 900; line-height: 1.35; }
.banner-text { margin: 0 0 14px; color: var(--sub); font-size: 14px; }
.banner-more { margin: 10px 0 0; font-size: 13px; }
.banner .btn { white-space: normal; }

/* フッターのごあいさつ */
.foot-chara { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 0 0 18px; }
.foot-chara img { width: 84px; height: 112px; object-fit: cover; object-position: 50% 10%; border-radius: 999px 999px 14px 14px; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(138, 79, 208, .5); }
.foot-chara p { margin: 0 0 10px; padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid rgba(138, 79, 208, .35); color: var(--ink); font-weight: 700; text-align: left; }

/* 作品ページ */
.crumbs { margin: 14px 0 0; color: var(--sub); font-size: 13px; } .crumbs a { color: var(--sub); }
.work { display: grid; gap: 18px; margin-top: 14px; }
.work-media img { display: block; width: 100%; border-radius: var(--radius); }
.work-title { margin: 4px 0 10px; font-size: clamp(18px, 4.6vw, 24px); }
.work-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.ok-mark { padding: 4px 12px; border-radius: 999px; background: var(--btn); color: #fff; font-size: 12px; font-weight: 900; }
.facts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.facts li { display: flex; gap: 10px; } .facts li > span { flex: none; width: 5.5em; color: var(--sub); } .facts a { color: var(--violet-deep); }
.offers { display: grid; gap: 10px; }
.offers .btn { width: 100%; white-space: normal; }
.trial-note { margin: 12px 0 0; color: var(--sub); font-size: 13px; } .trial-note a { font-weight: 800; }
.samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.samples img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 10px; transition: transform .4s var(--ease); }
.samples a:hover img { transform: scale(1.04); }
.next-step { margin: 34px 0 10px; padding: 20px; border-radius: 20px; background: linear-gradient(150deg, #f1e6fb, #fde7f1); border: 1px solid var(--line); }
.next-step h2 { margin-top: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--sub); font-size: 12px; }
.page-head h1 { margin: 16px 0 6px; font-size: clamp(24px, 6vw, 38px); } .lead { margin: 0 0 18px; color: var(--sub); }
.faq dl { margin: 0; } .faq dt { margin-top: 16px; font-weight: 800; } .faq dd { margin: 4px 0 0; color: var(--sub); font-size: 14px; }

/* フッター */
.site-footer { margin-top: 60px; padding: 30px 0 90px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .6); color: var(--sub); font-size: 13px; text-align: center; }
.foot-genres { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-bottom: 14px; } .foot-genres a { color: var(--sub); }
.credit a { color: var(--sub); }

/* 年齢確認 */
.agegate { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(236, 224, 248, .82); backdrop-filter: blur(10px); }
.agegate[hidden] { display: none; }
.agegate-box { width: min(380px, 100%); padding: 26px 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); text-align: center; box-shadow: 0 20px 50px rgba(124, 63, 184, .2); }
.agegate-box img { border-radius: 50%; box-shadow: 0 0 0 2px var(--violet); }
.agegate-actions { display: grid; gap: 12px; margin-top: 14px; } .agegate-actions a { color: var(--sub); font-size: 14px; }

/* オープニング（トップ・1回の訪問で1度。キャラの絵がふわっと寄る） */
.opening { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer;
  background: radial-gradient(700px 460px at 50% 40%, #ffffff, #f1e8fb 60%, #ecdcf7);
  transition: opacity .6s var(--ease), visibility .6s; }
.opening[hidden] { display: none; }
.opening.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.opening-frame { position: relative; width: min(760px, 92vw); aspect-ratio: 1360 / 768; overflow: hidden; border-radius: 26px;
  box-shadow: 0 24px 70px rgba(124, 63, 184, .3); background: #f4effa; }
.opening-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; animation: open-fade .8s var(--ease) both; }
@keyframes open-fade { from { opacity: 0; } to { opacity: 1; } }
.opening-tag { position: absolute; top: 34%; left: 8%; padding: 10px 20px; border-radius: 18px 18px 18px 4px; background: var(--btn); color: #fff; font-size: clamp(15px, 3.4vw, 24px); font-weight: 900; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(109, 52, 176, .35); animation: open-tag .6s .7s var(--ease) both; }
@keyframes open-tag { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.opening-skip { margin: 0; color: var(--sub); font-size: 12px; letter-spacing: .12em; }

/* 出現（スキル homepage-scroll-motion の型。お店向けの 0.5秒） */
[data-anime] { opacity: 0; }
[data-anime="up"] { transform: translateY(1.6rem); transition: opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); }
[data-anime].is-shown { opacity: 1; transform: none; }

@media (max-width: 599px) {
  /* スマホのオープニングは縦長に切って キャラを大きく */
  .opening-frame { width: min(360px, 86vw); aspect-ratio: 3 / 4; }
  .opening-frame img { object-position: 70% 50%; }
  .opening-tag { top: 7%; left: 7%; }
}
@media (min-width: 600px) { .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .say-img { width: 96px; height: 128px; }
}
@media (min-width: 900px) {
  :root { --gutter: 24px; }
  .hero { grid-template-columns: minmax(0, 1fr) 380px; padding: 50px 46px 0; }
  .hero-copy { padding-bottom: 46px; }
  .hero-mascot { width: 380px; }
  .ch-grid, .compare { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work { grid-template-columns: minmax(280px, 42%) 1fr; align-items: start; gap: 30px; }
  .rail { grid-auto-columns: 190px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .pick-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .banner { aspect-ratio: 1360 / 560; min-height: 0; }
  .banner-copy { padding-left: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-anime] { opacity: 1 !important; transform: none !important; }
  .opening { display: none !important; }
}

/* ===== ここから このサイトだけの部品 ===== */
.gnav .gnav-violet { color: var(--violet-deep); } .gnav .gnav-pink { color: var(--pink-deep); } .gnav .gnav-sky { color: var(--sky-deep); }

/* ヒーロー：3人並びの絵を敷き 左に文字（スマホは絵を上に縦長で） */
.hero { display: block; padding: 0; background: #fbf8fe; }
.hero-art { display: block; }
.hero-art img { display: block; width: 100%; height: auto; }
.hero .hearts { z-index: 1; }
.hero-copy { position: relative; z-index: 2; padding: 4px 20px 26px; margin-top: -18%; background: linear-gradient(180deg, rgba(251, 248, 254, 0), #fbf8fe 22%); }
.hero h1 { font-size: clamp(32px, 9vw, 60px); }
.grad { background: linear-gradient(100deg, var(--violet-deep), var(--violet) 40%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { color: var(--pink-deep); }
[data-motion].is-running .hero-art img { animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.02); } }

/* 3姉妹の売り場 */
.sec-grid { display: grid; gap: 14px; }
.sec-card { position: relative; display: grid; grid-template-columns: 38% 1fr; align-items: end; min-height: 200px; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(124, 63, 184, .1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sec-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(124, 63, 184, .2); }
.sec-violet { --c: var(--violet); --c-deep: var(--violet-deep); --c-soft: #efe4fb; }
.sec-pink { --c: var(--pink); --c-deep: var(--pink-deep); --c-soft: #fde6f0; }
.sec-sky { --c: var(--sky); --c-deep: var(--sky-deep); --c-soft: #e4f1fb; }
.sec-card { background: linear-gradient(160deg, #fff, var(--c-soft)); }
.sec-art { align-self: stretch; overflow: hidden; }
.sec-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; transition: transform .6s var(--ease); }
.sec-card:hover .sec-art img { transform: scale(1.04); }
.sec-body { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 18px 6px; }
.sec-who { color: var(--c-deep); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.sec-body strong { font-size: 19px; font-weight: 900; line-height: 1.4; }
.sec-lead { color: var(--sub); font-size: 13px; line-height: 1.6; }
.sec-go { align-self: flex-start; margin-top: 8px; padding: 6px 16px; border-radius: 999px; background: var(--c-deep); color: #fff; font-size: 13px; font-weight: 800; }

/* 売り場の見出し */
.sec-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 38%; align-items: end; gap: 8px; margin: 14px 0 18px; padding: 24px 0 0 20px; border-radius: 24px;
  background: linear-gradient(150deg, #fff, var(--c-soft)); border: 1px solid var(--line); }
.sec-hero-copy { padding-bottom: 24px; }
.sec-hero h1 { margin: 4px 0 8px; font-size: clamp(24px, 6.4vw, 44px); font-weight: 900; color: var(--c-deep); }
.sec-hero-art img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
[data-motion].is-running .sec-hero-art img { animation: float 6s ease-in-out infinite; }

/* ジャンルのタイル */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--ink);
  background: linear-gradient(140deg, #fff, #f6effd); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.tile:nth-child(3n+2) { background: linear-gradient(140deg, #fff, #fdeef5); }
.tile:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: 0 10px 24px rgba(124, 63, 184, .16); }
.tile strong { font-size: 15px; font-weight: 800; } .tile span { color: var(--sub); font-size: 12px; }

/* カード（同人の表紙は横長 4:3・PCゲームはパッケージの表を見せる縦長） */
.card-media { aspect-ratio: 4 / 3; }
.card-pcgame .card-media { aspect-ratio: 3 / 4; }
.card-pcgame .card-media img { object-position: 100% 50%; }
.badge-comic { background: rgba(93, 42, 152, .88); } .badge-cg { background: rgba(138, 79, 208, .88); }
.badge-game { background: rgba(184, 51, 109, .9); } .badge-pcgame { background: rgba(31, 111, 163, .9); }
.badge-off { background: linear-gradient(120deg, #ff5f8f, #ff9f5a); border-color: rgba(255, 255, 255, .7); }
.card-circle { margin: 0; color: var(--sub); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-price { margin: 0; font-size: 13px; } .card-price s { margin-right: 6px; color: var(--sub); font-size: 11px; } .card-price strong { color: var(--pink-deep); }
.card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* FANZA GAMES（手で選んだもの） */
.gcards { display: grid; gap: 10px; margin-top: -10px; }
.gcard { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.gcard:hover { transform: translateY(-3px); border-color: var(--sky); }
.gcard-media { flex: none; width: 120px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.gcard-media img { width: 100%; height: 100%; object-fit: cover; }
.gcard-body { display: flex; flex-direction: column; gap: 2px; }
.gcard-body span { color: var(--sub); font-size: 13px; }
.gcard-body em { align-self: flex-start; margin-top: 4px; padding: 3px 12px; border-radius: 999px; background: var(--sky-deep); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; }

/* 作品ページ */
.work-media img { background: var(--surface-2); }
.work-sale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.facts s { color: var(--sub); font-weight: 400; }
.tag-link { color: var(--violet-deep); text-decoration: none; background: #efe4fb; } .tag-link:hover { background: #e3d2f8; }

/* 数字の色 */
.stat-violet strong { color: var(--violet-deep); } .stat-pink strong { color: var(--pink-deep); } .stat-sky strong { color: var(--sky-deep); }

/* オープニングの絵（3人並び） */
.opening-frame img { object-position: 64% 50%; }
.opening-frame picture { position: absolute; inset: 0; }

@media (min-width: 600px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1fr; padding: 0; }
  .hero-art, .hero-copy { grid-area: 1 / 1; }
  .hero-copy { align-self: center; width: 44%; margin: 0; padding: 40px 0 40px 46px; background: none; }
  /* 絵は右に寄せて左をふわっと消す（文字とキャラが重ならない） */
  .hero-art { justify-self: end; width: 74%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
  .sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-card { grid-template-columns: 1fr; grid-template-rows: 260px auto; align-items: stretch; }
  .sec-body { padding: 14px 18px 20px; }
  .sec-hero { padding: 30px 0 0 40px; grid-template-columns: 1fr 300px; }
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .rail { grid-auto-columns: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.price, .card-price { white-space: nowrap; }

/* ===== 左のメニュー（DLsite・FANZA同人の左メニューの形 2026-10-10） ===== */
:root { --side-w: 228px; --side-gap: 28px; }
.layout { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.main { min-width: 0; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--violet-deep); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -5px; } .menu-btn span::after { top: 5px; }
/* スマホ：左から出るパネル */
.side { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); padding: 16px 14px 40px; overflow-y: auto; background: #fbf8fe;
  box-shadow: 10px 0 40px rgba(42, 31, 58, .2); transform: translateX(-105%); visibility: hidden; transition: transform .3s var(--ease), visibility .3s; }
body.side-open { overflow: hidden; }
body.side-open .side { transform: none; visibility: visible; }
.side-shade { position: fixed; inset: 0; z-index: 45; background: rgba(42, 31, 58, .35); }
.side-shade[hidden] { display: none; }
.side-search { display: flex; gap: 6px; margin-bottom: 10px; }
.side-search input { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; }
.side-search button { flex: none; padding: 0 12px; border-radius: 10px; border: 0; background: var(--violet-deep); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.side-big { display: block; margin-bottom: 14px; padding: 11px 12px; border-radius: 12px; background: var(--btn); color: #fff; font-weight: 800; text-align: center; text-decoration: none; box-shadow: 0 8px 20px rgba(109, 52, 176, .25); }
.side-box { margin-bottom: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.side-h { margin: 0; padding: 7px 12px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.side-h-violet { background: var(--violet-deep); } .side-h-pink { background: var(--pink-deep); } .side-h-sky { background: var(--sky-deep); }
.side-box ul { list-style: none; margin: 0; padding: 4px 0; }
.side-box a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; color: var(--ink); font-size: 14px; text-decoration: none; border-left: 3px solid transparent; transition: background .2s var(--ease); }
.side-box a:hover { background: #f4ecfc; }
.side-box a.is-current { background: #efe4fb; border-left-color: var(--violet); color: var(--violet-deep); font-weight: 800; }
.side-box small { color: var(--sub); font-size: 11px; }
.side-more-item { display: none; }
.side.show-all-genres .side-more-item { display: block; }
.side-more { display: block; width: 100%; padding: 8px; border: 0; border-top: 1px solid var(--line); background: #faf6fe; color: var(--violet-deep); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.refine { margin: 0 0 16px; }

/* 条件で探す */
.finder { display: grid; gap: 12px; margin: 0 0 18px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(124, 63, 184, .08); }
.finder-row { margin: 0; padding: 0; border: 0; min-width: 0; }
.finder-label { display: block; margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 800; color: var(--violet-deep); }
.finder-label small { margin-left: 6px; color: var(--sub); font-weight: 400; }
.finder-q { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font: inherit; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #faf6fe; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.fchip:hover { border-color: var(--violet); }
.fchip.is-on { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; font-weight: 700; }
.fchip.is-on::after { content: " ×"; }
.finder-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.finder-sort { font-size: 13px; font-weight: 700; } .finder-sort select { margin-left: 6px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); font: inherit; }
.finder-clear { padding: 8px 16px; }
.finder-clear[hidden] { display: none; }
.finder-count { margin: 0 0 12px; font-weight: 800; }
.finder-more-wrap { text-align: center; } #f-more[hidden] { display: none; }

@media (min-width: 1024px) {
  :root { --wrap: 1400px; --gutter: 24px; }
  .menu-btn { display: none; }
  .layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: var(--side-gap); align-items: start; }
  .side { position: sticky; z-index: 1; top: 70px; bottom: auto; width: auto; max-height: calc(100vh - 82px); padding: 18px 0 24px; background: none; box-shadow: none; transform: none; visibility: visible; transition: none;
    scrollbar-width: thin; scrollbar-color: rgba(124, 63, 184, .3) transparent; }
  .side-shade { display: none !important; }
  body.side-open { overflow: auto; }
  .hero-copy { width: 48%; }
}
@media (min-width: 1600px) { :root { --wrap: 1560px; --side-w: 244px; --side-gap: 36px; } }

/* ===== スマホ対応（2026-10-10 本人「スマホで見る人も多いだろうからスマホの対応も」） ===== */
/* カードの表紙はどれも 4:3 にそろえる（PCゲームの縦長は 全体が入るように縮める）。並びがでこぼこにならない */
.card-pcgame .card-media { aspect-ratio: 4 / 3; }
.card-pcgame .card-media img { object-fit: contain; object-position: 50% 50%; background: radial-gradient(circle at 50% 40%, #fff, var(--surface-2)); }
/* 下のタブバー（よく使うページ） */
.tabbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(42, 31, 58, .08); }
.tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 0;
  border: 0; border-radius: 12px; background: none; color: var(--sub); font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--violet-deep); background: #f1e6fb; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
/* 作品ページの「FANZAで見る」の帯（タブバーの上） */
.buybar { position: fixed; z-index: 41; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(42, 31, 58, .1); }
.buybar-price { font-size: 17px; font-weight: 900; color: var(--pink-deep); white-space: nowrap; }
.buybar-price em { margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: linear-gradient(120deg, #ff5f8f, #ff9f5a); color: #fff; font-size: 11px; font-style: normal; vertical-align: 2px; }
.buybar .btn { flex: 1; max-width: 260px; padding: 11px 16px; }
body:has(.buybar) { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }
/* 条件検索：ジャンルの折りたたみ・結果へ飛ぶボタン */
.fchips-fold .fchip:nth-child(n+13):not(.is-on) { display: none; }
.fchips-fold.is-open .fchip { display: inline-block; }
.fold-btn { margin-top: 8px; padding: 6px 2px; border: 0; background: none; color: var(--violet-deep); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.jump-results { position: fixed; z-index: 42; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 12px 22px; border: 0; border-radius: 999px;
  background: var(--btn); color: #fff; font: inherit; font-weight: 800; box-shadow: 0 10px 26px rgba(109, 52, 176, .4); cursor: pointer; white-space: nowrap; }
.jump-results[hidden] { display: none; }
.menu-btn { width: 40px; height: 40px; justify-content: center; padding: 0; flex: none; }
.menu-btn span { width: 18px; }

@media (max-width: 1023px) {
  /* ヘッダーは1段（メニュー＋ロゴ）。ページの行き来は下のタブバーと左のメニュー */
  .header-inner { flex-wrap: nowrap; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
  .gnav { display: none; }
  .logo { min-width: 0; font-size: 15px; gap: 8px; }
  .logo img { width: 30px; height: 30px; }
  .pr { padding: 3px 12px; font-size: 10px; }
  /* ヒーロー：絵を低くして 最初の画面に作品が見えるように */
  .hero { margin-top: 12px; border-radius: 20px; }
  .hero-art img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 30%; }
  .hero-copy { margin-top: -5%; padding: 0 16px 18px; }
  .hero h1 { margin: 2px 0 6px; font-size: clamp(26px, 7.6vw, 36px); }
  .hero-lead { font-size: 14px; line-height: 1.7; }
  .hero-actions { flex-wrap: nowrap; gap: 8px; margin-top: 12px; }
  .hero-actions .btn { flex: 1; padding: 11px 10px; font-size: 14px; }
  .eyebrow { font-size: 11px; }
  h2 { margin: 30px 0 12px; font-size: clamp(19px, 5.4vw, 24px); }
  /* 押しやすさ（指で押す所は44px前後） */
  .side-box a { padding: 11px 14px; font-size: 15px; }
  .fchip { padding: 8px 13px; font-size: 14px; }
  .chip { padding: 9px 14px; }
  .tile { padding: 12px 14px; }
  .card-cta { padding: 10px 8px; font-size: 13px; }
  .grid { gap: 10px; }
  .card-body { padding: 8px 8px 10px; }
  .card-title { font-size: 13px; }
  .site-footer { padding-bottom: 30px; }
  /* 売り場の見出しは絵を小さく */
  .sec-hero { padding: 18px 0 0 16px; grid-template-columns: 1fr 34%; }
  .sec-hero-art img { max-height: 220px; }
  .banner { min-height: 220px; }
  .banner-copy { width: 70%; padding: 18px 12px 18px 16px; }
  .banner::after { background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0, rgba(255, 255, 255, .88) 55%, rgba(255, 255, 255, .2) 85%); }
  .banner-title { font-size: clamp(18px, 5vw, 26px); }
  .banner .btn { padding: 10px 16px; font-size: 14px; }
  .finder { padding: 14px 12px; }
  .work-title { font-size: 19px; }
}
@media (min-width: 1024px) {
  .tabbar, .buybar, .jump-results { display: none !important; }
  body, body:has(.buybar) { padding-bottom: 0; }
}
@media (max-width: 359px) {
  .logo { font-size: 13px; }
  .hero-actions { flex-wrap: wrap; }
}
.h2-sub { display: inline-block; white-space: nowrap; }
.hero-actions .btn { white-space: nowrap; }