/* 夜更かし見放題ナビ（2026-10-10）
   水色の基調（本人「水色っぽいのを基調に」）。キャラの髪のミントと 服の紺を差し色に。
   色・余白・動きは この先頭の値だけで決める。動きのイージングは1種類にそろえる（スキル homepage-scroll-motion） */
:root {
  --bg: #eef8fc;
  --surface: #ffffff;
  --surface-2: #e2f3fa;
  --line: rgba(31, 150, 200, .2);
  --ink: #1b2f45;
  --sub: #587083;
  --sky: #2fb2e4;
  --sky-deep: #0f73a2;
  --mint: #3cc9a6;
  --mint-deep: #11806a;
  --navy: #253c66;
  --heart: #ff7aa8;
  --gold: #d99a0b;
  --btn: linear-gradient(120deg, #1583b8, #129476);
  --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(60, 201, 166, .16), transparent 60%),
    radial-gradient(760px 480px at -10% 26%, rgba(47, 178, 228, .16), 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(--sky-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(--navy); color: #c9d8ea; 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(--sky), 0 4px 14px rgba(47, 178, 228, .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(--sky-deep); } .gnav .gnav-violet { color: var(--navy); } .gnav .gnav-cyan { color: var(--mint-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(21, 131, 184, .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(21, 131, 184, .4); }
.btn-ghost { background: #fff; color: var(--sky-deep); box-shadow: inset 0 0 0 1.5px rgba(31, 150, 200, .45); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--sky); }
/* きらっと光が走る（短いループ） */
.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, #f1eef7 45%, #dcf1fa); 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(47, 178, 228, .45), transparent 65%); }
.aurora i:nth-child(2) { right: -15%; top: 10%; background: radial-gradient(circle, rgba(60, 201, 166, .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(47, 178, 228, .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(--mint-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(--sky-deep), var(--sky) 45%, var(--mint)); -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(--sky-deep); border: 1.5px solid rgba(47, 178, 228, .5); font-size: 12px; font-weight: 800; line-height: 1.5; box-shadow: 0 8px 22px rgba(47, 178, 228, .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(31, 150, 200, .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(--sky-deep); } .stat-violet strong { color: var(--navy); } .stat-cyan strong { color: var(--mint-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(--sky); box-shadow: 0 0 0 4px rgba(47, 178, 228, .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(31, 150, 200, .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(--sky); --c2: #9fdcf3; } .ch-violet { --c1: var(--navy); --c2: #8fa3d8; } .ch-cyan { --c1: var(--mint); --c2: #a7ead9; }
@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(--sky-deep); } .ch-violet .ch-price strong { color: var(--navy); } .ch-cyan .ch-price strong { color: var(--mint-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(47, 178, 228, .5), 0 8px 20px rgba(47, 178, 228, .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, #e3f5fc, #e3f8f2); border: 1px solid rgba(47, 178, 228, .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(31, 150, 200, .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(31, 150, 200, .07); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { transform: translateY(-4px); border-color: rgba(47, 178, 228, .6); box-shadow: 0 16px 34px rgba(31, 150, 200, .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(27, 47, 69, .82); border: 1px solid rgba(159, 220, 243, .7); color: #e6f7fd; 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(27, 47, 69, .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(--sky-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(--sky); 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(31, 150, 200, .07); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.pick:hover { transform: translateY(-3px); border-color: var(--sky); }
.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: #f1eef7; border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(31, 150, 200, .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(47, 178, 228, .5); }
.foot-chara p { margin: 0 0 10px; padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid rgba(47, 178, 228, .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 span { flex: none; width: 5em; color: var(--sub); } .facts a { color: var(--sky-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, #e3f5fc, #e3f8f2); 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(214, 236, 246, .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(31, 150, 200, .2); }
.agegate-box img { border-radius: 50%; box-shadow: 0 0 0 2px var(--sky); }
.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, #e4f4fb 60%, #d3eef8);
  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(31, 150, 200, .3); background: #f1eef7; }
.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(21, 131, 184, .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; }
}