/* AI CREATOR KITASAN — AIシステム群の LP（/ai）2026-10-23
   黒の映画館。幕が上がる → スクリーンで「自転車で月へ」→ AI のタイトル → スポットの当たった画面でサービス紹介
   点滅なし（明るさの急な入れかわりは使わない）・「動きを止める」・prefers-reduced-motion で最初から止める */
:root {
  --bk: #000; --ink: #f4f1ea; --dim: #a7a29a; --red: #e50914; --gold: #ffd84a; --moon: #fff6d6; --cy: #6ee7ff;
  --curtain: #a10d1e; --curtain-d: #5c0510;
  --f-d: 'Dela Gothic One', 'Zen Kaku Gothic New', sans-serif; --f-e: 'Space Grotesk', sans-serif; --f-j: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif; --f-b: 'Yuji Syuku', serif;
}
* { box-sizing: border-box; }
html { background: var(--bk); scroll-behavior: smooth; }
body.ai-body { margin: 0; background: var(--bk); color: var(--ink); font-family: var(--f-j); line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-intro { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.sr { position: absolute; left: -9999px; } .sr:focus { left: 12px; top: 12px; z-index: 99; background: #fff; color: #000; padding: 6px 10px; }
.wrap { width: min(1120px, 92vw); margin: 0 auto; position: relative; }
.kicker { font-family: var(--f-e); letter-spacing: .28em; color: var(--gold); font-size: 12px; margin: 0 0 10px; }
h2 { font-family: var(--f-d); font-weight: 400; font-size: clamp(28px, 4.6vw, 54px); line-height: 1.25; margin: 0 0 18px; letter-spacing: .01em; }
h2 em { font-style: normal; color: var(--gold); }
.lead { color: #d8d3ca; font-size: clamp(15px, 1.6vw, 18px); }

/* ---------- ボタン ---------- */
.cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 6px; background: var(--ink); color: #000; font-weight: 900; text-decoration: none; border: 0; cursor: pointer; font: 900 16px var(--f-j); transition: transform .2s, background .2s; }
.cta:hover { transform: translateY(-1px); background: #fff; }
.cta:focus-visible, .nav a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cta svg { width: 20px; height: 20px; fill: currentColor; }
.cta.ghost { background: rgba(110, 110, 110, .55); color: #fff; } .cta.ghost:hover { background: rgba(140, 140, 140, .7); }
.cta.sm { padding: 7px 14px; font-size: 13px; background: var(--red); color: #fff; }
.cta.big { padding: 16px 34px; font-size: 18px; background: var(--red); color: #fff; }
.cta.big:hover { background: #ff1f2b; }

/* ---------- 開演 ---------- */
.intro { position: fixed; inset: 0; z-index: 50; background: #000; }
.intro.done { opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; }
.theater { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1200px; }
.screen { position: relative; width: min(94vw, 1500px); aspect-ratio: 16 / 9; max-height: 78vh; border-radius: 6px; overflow: hidden; background: #02030a; box-shadow: 0 0 120px rgba(120, 160, 255, .18); transform: scale(.92); transition: transform 2.6s cubic-bezier(.2, .8, .2, 1); }
.intro.play .screen { transform: scale(1); }
.intro.zoom .screen { transform: scale(1.18); transition: transform 1.4s ease-in; }
.seats { position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; background:
  radial-gradient(ellipse 60px 40px at 50% 100%, #111 70%, transparent 72%) 0 100% / 90px 60px repeat-x,
  radial-gradient(ellipse 60px 40px at 50% 100%, #0a0a0a 70%, transparent 72%) 45px 70% / 90px 60px repeat-x; opacity: .95; pointer-events: none; }
.sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 10%, #182a5c 0%, #070b1f 45%, #01020a 100%); }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.moon { position: absolute; width: 34%; aspect-ratio: 1; right: 8%; top: 6%; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fffdf0 0%, #fff3c4 45%, #e9d690 72%, #c9b46e 100%); box-shadow: 0 0 80px 10px rgba(255, 240, 190, .35), 0 0 220px 40px rgba(255, 230, 160, .12); transform: translateY(12%) scale(.85); transition: transform 6s ease-out; }
.moon i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 60%, rgba(160, 140, 80, .28) 0 8%, transparent 9%), radial-gradient(circle at 62% 30%, rgba(160, 140, 80, .22) 0 6%, transparent 7%), radial-gradient(circle at 70% 70%, rgba(160, 140, 80, .2) 0 10%, transparent 11%); }
.intro.play .moon { transform: translateY(0) scale(1); }
.city { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background:
  linear-gradient(to top, #000 0 30%, transparent 30%),
  repeating-linear-gradient(90deg, #04060f 0 38px, #070a18 38px 60px, #03050c 60px 100px); clip-path: polygon(0 60%, 6% 60%, 6% 30%, 12% 30%, 12% 50%, 18% 50%, 18% 20%, 24% 20%, 24% 55%, 32% 55%, 32% 35%, 40% 35%, 40% 62%, 52% 62%, 52% 28%, 58% 28%, 58% 48%, 66% 48%, 66% 40%, 74% 40%, 74% 58%, 84% 58%, 84% 32%, 90% 32%, 90% 52%, 100% 52%, 100% 100%, 0 100%); }
.riders { position: absolute; inset: 0; width: 100%; height: 100%; }
.year { position: absolute; left: 4%; top: 6%; font-family: var(--f-e); color: #fff; opacity: 0; transition: opacity .8s; }
.year span { display: block; font-size: clamp(26px, 5vw, 64px); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.year small { font-family: var(--f-j); font-size: clamp(12px, 1.4vw, 16px); color: var(--dim); }
.intro.play .year { opacity: 1; }
.title-card { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .25), rgba(0, 0, 0, .85)); transition: opacity 1.2s; }
.intro.title .title-card { opacity: 1; }
.presents { font-family: var(--f-e); letter-spacing: .4em; color: #ddd; font-size: clamp(10px, 1.2vw, 14px); margin: 0; }
.big-ai { font-family: var(--f-e); font-weight: 700; font-size: clamp(120px, 26vw, 360px); line-height: .9; margin: 0; letter-spacing: -.02em; color: #fff; text-shadow: 0 0 40px rgba(255, 230, 160, .35); }
.big-ai span { display: inline-block; transform: translateY(40px) scale(1.3); opacity: 0; transition: transform 1.1s cubic-bezier(.2, 1.4, .3, 1), opacity 1s; }
.big-ai span + span { transition-delay: .18s; color: var(--gold); }
.intro.title .big-ai span { transform: none; opacity: 1; }
.tagline { font-family: var(--f-d); font-size: clamp(16px, 2.6vw, 30px); margin: 10px 0 0; opacity: 0; transform: translateY(10px); transition: all 1s .6s; }
.intro.title .tagline { opacity: 1; transform: none; }
/* 幕（新喜劇のように、するすると上がる） */
.curtain { position: absolute; inset: 0; z-index: 3; transition: transform 3.2s cubic-bezier(.65, 0, .35, 1); }
.intro.up .curtain { transform: translateY(-104%); }
.drape { position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, var(--curtain-d) 0, var(--curtain) 3.5%, #c8172b 5%, var(--curtain) 6.5%, var(--curtain-d) 10%),
  linear-gradient(to bottom, rgba(0, 0, 0, .25), transparent 18%, transparent 80%, rgba(0, 0, 0, .55)); background-blend-mode: multiply; }
.drape::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 46px; background: radial-gradient(ellipse 40px 46px at 50% 0, var(--curtain) 60%, transparent 62%) 0 0 / 70px 46px repeat-x; filter: brightness(.8); }
.valance { position: absolute; left: 0; right: 0; top: 0; height: 14%; z-index: 2; background: linear-gradient(#e2b23a, #a87a15 60%, #6d4d07); box-shadow: 0 8px 18px rgba(0, 0, 0, .5); display: grid; place-items: center; }
.valance span { font-family: var(--f-b); color: #2b1a00; font-size: clamp(18px, 3vw, 36px); letter-spacing: .4em; }
.kojo { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font-family: var(--f-b); color: #ffe7a3; font-size: clamp(16px, 2.6vw, 26px); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); z-index: 2; margin: 0; }
.kojo b { font-size: 1.8em; font-weight: 400; letter-spacing: .2em; }
.skip { position: absolute; right: 18px; bottom: 18px; z-index: 5; background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 8px 16px; font: 700 14px var(--f-j); cursor: pointer; }

/* ---------- ヘッダー ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 22px; padding: 14px 4vw; background: linear-gradient(rgba(0, 0, 0, .85), transparent); transition: background .3s; }
.top.solid { background: rgba(0, 0, 0, .94); }
.brand { display: flex; align-items: baseline; gap: 6px; text-decoration: none; }
.brand b { font-family: var(--f-d); font-weight: 400; color: var(--red); font-size: 24px; letter-spacing: .02em; }
.brand span { font-family: var(--f-e); font-weight: 700; color: var(--gold); font-size: 18px; }
.nav { display: flex; gap: 18px; font-size: 14px; }
.nav a { text-decoration: none; color: #e5e5e5; } .nav a:hover { color: #fff; }
.motion { margin-left: auto; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #ddd; border-radius: 999px; padding: 6px 12px; font: 700 12px var(--f-j); cursor: pointer; }
.motion, .top .cta.sm { white-space: nowrap; }
@media (max-width: 860px) { .nav { display: none; } }
@media (max-width: 480px) { .top { gap: 8px; padding: 10px 4vw; } .brand b { font-size: 20px; } .brand span { font-size: 15px; } .motion { padding: 5px 9px; font-size: 11px; } .top .cta.sm { padding: 7px 10px; font-size: 12px; } }

/* ---------- ビルボード（スポットの当たった画面） ---------- */
.billboard { position: relative; min-height: 100vh; padding: 110px 0 60px; display: flex; align-items: center; overflow: hidden; }
.bb-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 72% 45%, rgba(255, 216, 74, .10), transparent 60%), radial-gradient(ellipse 40% 50% at 15% 80%, rgba(229, 9, 20, .10), transparent 60%); transition: background 1s; }
.bb-inner { position: relative; width: min(1320px, 94vw); margin: 0 auto; display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 40px; align-items: center; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.badge { font: 700 12px var(--f-j); padding: 3px 10px; border-radius: 4px; background: rgba(255, 255, 255, .12); color: #eee; }
.badge.red { background: var(--red); color: #fff; }
.bb-copy h2 { font-size: clamp(32px, 4.6vw, 60px); margin-bottom: 8px; }
.bb-copy h2 .ln { display: block; white-space: nowrap; }
.meta { color: var(--dim); font-size: 14px; margin: 0 0 16px; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.dots { display: flex; gap: 8px; }
.dots button { width: 28px; height: 4px; border-radius: 2px; border: 0; background: rgba(255, 255, 255, .25); cursor: pointer; padding: 0; }
.dots button[aria-selected="true"] { background: var(--ink); width: 44px; }
.bb-copy > * { transition: opacity .5s, transform .5s; }
.bb-copy.swap > h2, .bb-copy.swap > .meta, .bb-copy.swap > .lead { opacity: 0; transform: translateY(8px); }
.bb-device { position: relative; aspect-ratio: 16 / 11; }
.spot { position: absolute; left: 50%; top: -30%; width: 140%; height: 160%; transform: translateX(-50%); background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(255, 246, 214, .16) 172deg, rgba(255, 246, 214, .22) 180deg, rgba(255, 246, 214, .16) 188deg, transparent 200deg); filter: blur(6px); pointer-events: none; }
.browser { position: absolute; left: 0; top: 6%; width: 88%; margin: 0; border-radius: 10px; overflow: hidden; background: #1b1b1f; box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 90px rgba(255, 240, 190, .16); transition: transform .8s, opacity .5s; }
.browser .bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #2a2a30; }
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #555; }
.browser .bar span { margin-left: 10px; font: 500 12px var(--f-e); color: #aaa; background: #1b1b1f; border-radius: 999px; padding: 2px 12px; }
.browser img { width: 100%; height: auto; }
.phone { position: absolute; right: 0; bottom: 0; width: 26%; margin: 0; border-radius: 26px; overflow: hidden; border: 6px solid #111; background: #111; box-shadow: 0 30px 70px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); aspect-ratio: 390 / 760; transition: transform .8s, opacity .5s; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bb-device.swap .browser, .bb-device.swap .phone { opacity: 0; transform: translateY(14px) scale(.98); }
@media (max-width: 900px) {
  .billboard { padding-top: 84px; min-height: auto; }
  .bb-inner { grid-template-columns: 1fr; gap: 26px; }
  .bb-device { order: -1; aspect-ratio: auto; height: 118vw; max-height: 620px; }
  .browser { display: none; }
  .phone { position: relative; margin: 0 auto; width: min(62vw, 300px); }
}

/* ---------- 列（ラインナップ） ---------- */
.rows { padding: 10px 0 70px; }
.row { margin: 0 0 34px; }
.row-h { font: 900 clamp(18px, 2vw, 24px) var(--f-j); margin: 0 4vw 12px; }
.row-h small { color: var(--dim); font-weight: 400; font-size: 13px; margin-left: 10px; }
.rail { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4vw 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.card { flex: 0 0 min(300px, 72vw); scroll-snap-align: start; position: relative; border-radius: 8px; overflow: hidden; background: #141414; text-decoration: none; transition: transform .3s, box-shadow .3s; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.card:hover, .card:focus-visible { transform: scale(1.05); z-index: 2; box-shadow: 0 18px 40px rgba(0, 0, 0, .7); }
.card .shot { aspect-ratio: 16 / 9; overflow: hidden; background: #222; }
.card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card .shot.art { display: grid; place-items: center; font-family: var(--f-d); font-size: 30px; color: rgba(255, 255, 255, .9); }
.card .shot.art.c0 { background: linear-gradient(135deg, #1f6feb, #000); }
.card .shot.art.c1 { background: linear-gradient(135deg, #d97706, #000); }
.card .shot.art.c2 { background: linear-gradient(135deg, #0f766e, #000); }
.card .shot.art.c3 { background: linear-gradient(135deg, #7c3aed, #000); }
.card .shot.art.c4 { background: linear-gradient(135deg, #be123c, #000); }
.card .shot.art.c5 { background: linear-gradient(135deg, #4d7c0f, #000); }
.card .info { padding: 10px 12px 14px; }
.card h4 { margin: 0 0 2px; font-size: 16px; }
.card p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.6; }
.card .tag { position: absolute; top: 8px; left: 8px; font: 700 11px var(--f-j); padding: 2px 8px; border-radius: 3px; background: var(--red); color: #fff; }
.card .tag.soon { background: #333; }

/* ---------- 光の当たる区切り ---------- */
.lit-wrap { position: relative; overflow: hidden; }
.lit { position: absolute; left: 50%; top: -40%; width: 120%; height: 140%; transform: translateX(-50%); background: radial-gradient(ellipse 40% 60% at 50% 0, rgba(255, 246, 214, .10), transparent 70%); pointer-events: none; }
.patch, .price { padding: 100px 0; text-align: center; }
.holes, .tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; text-align: left; }
.holes article { border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 22px; background: linear-gradient(160deg, #111, #050505); }
.holes b { font-family: var(--f-e); color: var(--gold); font-size: 14px; }
.holes h4 { font-size: 20px; margin: 6px 0; }
.holes p { margin: 0; color: #cfc9bf; font-size: 14.5px; }
@media (max-width: 760px) { .holes, .tickets { grid-template-columns: 1fr; } }

/* ---------- 思い ---------- */
.manifesto { padding: 120px 0; background: radial-gradient(ellipse at 20% 0, rgba(229, 9, 20, .14), transparent 55%), #000; }
.smash { font-size: clamp(34px, 7vw, 88px); line-height: 1.15; }
.smash span { display: block; }
.smash .hit { color: #fff; }
.smash .hit2 { color: var(--red); transform: rotate(-2deg); transform-origin: left; display: inline-block; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s, transform .9s; }
.reveal.on { opacity: 1; transform: none; }
.m-body { max-width: 720px; font-size: clamp(16px, 1.8vw, 19px); color: #e6e1d8; }
.m-body b { color: var(--gold); }
.sig { font-family: var(--f-e); color: var(--dim); margin-top: 26px; }

/* ---------- 料金 ---------- */
.ticket { position: relative; border-radius: 14px; padding: 24px 22px 22px; background: linear-gradient(160deg, #191919, #070707); border: 1px solid rgba(255, 255, 255, .14); }
.ticket::before, .ticket::after { content: ''; position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: #000; transform: translateY(-50%); }
.ticket::before { left: -11px; } .ticket::after { right: -11px; }
.ticket.gold { border-color: rgba(255, 216, 74, .6); box-shadow: 0 0 40px rgba(255, 216, 74, .12); }
.t-h { font-family: var(--f-e); letter-spacing: .2em; color: var(--gold); font-size: 12px; margin: 0; }
.ticket h4 { font-size: 18px; margin: 4px 0 14px; }
.yen { margin: 0; font-family: var(--f-e); }
.yen b { font-size: 46px; color: #fff; }
.yen small { color: var(--dim); }
.t-n { color: #cfc9bf; font-size: 14px; margin: 6px 0 0; }
.note { color: var(--dim); font-size: 12.5px; margin-top: 22px; }

/* ---------- 先行受付 ---------- */
.entry { padding: 110px 0; background: linear-gradient(#000, #0b0b0f); }
.entry-head { text-align: center; margin-bottom: 34px; }
.entry-head .badge-row { justify-content: center; }
.next { display: inline-block; margin-top: 10px; padding: 8px 18px; border-radius: 999px; background: rgba(255, 216, 74, .12); border: 1px solid rgba(255, 216, 74, .4); color: var(--gold); }
.next b { font-family: var(--f-e); font-size: 24px; }
.form { max-width: 760px; margin: 0 auto; background: #101014; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 28px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .g2 { grid-template-columns: 1fr; } .form { padding: 20px; } }
.form label { display: block; margin-bottom: 14px; }
.form label > span { display: block; font-size: 13.5px; color: #ddd; margin-bottom: 4px; font-weight: 700; }
.form label > span i { font-style: normal; font-size: 11px; color: #fff; background: var(--red); border-radius: 3px; padding: 0 6px; margin-left: 4px; }
.form input, .form select, .form textarea { width: 100%; background: #000; color: #fff; border: 1px solid #3a3a42; border-radius: 8px; padding: 11px 12px; font: 16px var(--f-j); }
.form fieldset { border: 0; padding: 0; margin: 4px 0 14px; }
.form legend { font-size: 13.5px; color: #ddd; font-weight: 700; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid #44444c; color: #ddd; font-size: 13.5px; cursor: pointer; }
.chips input:checked + span { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 700; }
.chips input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.agree { font-size: 13px; color: #cfc9bf; }
.ck { display: flex !important; gap: 8px; align-items: flex-start; }
.ck input { width: auto; margin-top: 4px; }
.err { color: #ff8a8a; font-weight: 700; }
.done-card { text-align: center; padding: 30px 10px; }
.done-card .num { font-family: var(--f-e); font-size: clamp(80px, 18vw, 150px); line-height: 1; color: var(--gold); margin: 10px 0; }

/* ---------- 開発者 ---------- */
.maker { padding: 100px 0; }
.maker .wrap { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; }
.m-photo { margin: 0; border-radius: 16px; overflow: hidden; transform: rotate(-2deg); border: 4px solid var(--gold); box-shadow: 0 20px 60px rgba(0, 0, 0, .7); aspect-ratio: 1 / 1; }
.m-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.maker h2 .m-role { display: block; font-family: var(--f-j); font-weight: 700; font-size: .42em; letter-spacing: .3em; color: #cfc9bf; }
.maker h2 .m-name { display: block; font-family: var(--f-e); color: var(--gold); font-size: .9em; letter-spacing: .04em; white-space: nowrap; }
.m-big { font-family: var(--f-d); font-size: clamp(22px, 2.8vw, 34px); line-height: 1.4; color: #fff !important; margin: 0 0 18px; }
.m-dream { border-left: 3px solid var(--red); padding-left: 14px; font-weight: 700; color: #fff !important; }
.maker p { color: #ddd; }
@media (max-width: 760px) { .maker .wrap { grid-template-columns: 1fr; } .m-photo { width: 220px; } }

.foot { text-align: center; color: var(--dim); font-size: 13px; padding: 40px 0 60px; border-top: 1px solid #1a1a1a; }
.foot a { color: #ccc; }

/* ---------- 順番待ちページ ---------- */
.wait { min-height: 100vh; display: grid; place-items: center; padding: 90px 5vw 50px; text-align: center; background: radial-gradient(ellipse at 50% 0, rgba(255, 216, 74, .12), transparent 60%), #000; }
.wait .num { font-family: var(--f-e); font-size: clamp(110px, 30vw, 240px); line-height: .9; color: var(--gold); margin: 6px 0; font-variant-numeric: tabular-nums; text-shadow: 0 0 50px rgba(255, 216, 74, .25); }
.wait .ticket { max-width: 520px; margin: 0 auto; }
.wait .ahead { font-size: 18px; }
.wait .ahead b { font-family: var(--f-e); font-size: 34px; color: #fff; }

/* ---------- 動きを止める ---------- */
.still *, .still *::before, .still *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.wait .badge-row { justify-content: center; }
.wait .ticket.wt { margin-top: 24px; text-align: left; }
.wait .mt { margin-top: 24px; }
.nw { display: inline-block; }

/* ---------- 2026-10-23 追加：カードの色・料金の例 ---------- */
.card .shot.art.c6 { background: linear-gradient(135deg, #0ea5e9, #000); }
.card .shot.art.c7 { background: linear-gradient(135deg, #f59e0b, #3b0764); }
.card .tag:not(.soon) { background: #16a34a; }
.t-ex { color: var(--gold); font-size: 13px; margin: -8px 0 12px; }
.ticket .yen b { font-size: 42px; }

/* ---------- 3秒見積もり：呼び出しボタン ---------- */
.qq-call { margin-top: 34px; text-align: center; }
.qq-open { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; padding: 16px 30px; }
.qq-win { position: relative; width: 26px; height: 22px; border: 2px solid currentColor; border-radius: 3px; display: inline-flex; overflow: hidden; }
.qq-win i { flex: 1; border-right: 2px solid currentColor; background: rgba(255, 216, 74, .25); transition: transform .4s; }
.qq-win i:last-child { border-right: 0; }
.qq-open:hover .qq-win i:first-child { transform: translateX(-70%); } .qq-open:hover .qq-win i:last-child { transform: translateX(70%); }
.qq-sub { color: var(--dim); font-size: 13.5px; margin-top: 10px; }

/* ---------- 3秒見積もり：窓が開く ---------- */
.qq { padding: 0; border: 0; background: transparent; color: var(--fg, #f4f1ea); width: min(920px, 96vw); max-width: none; max-height: 94vh; overflow: visible; }
.qq::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(3px); }
.qq-room { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; pointer-events: none; }
.qq-sky { position: absolute; inset: 0; background: radial-gradient(circle at 78% 22%, #2a3a6b 0, #0b1230 45%, #04060f 100%); }
.qq-moon { position: absolute; right: 9%; top: 8%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff7d6, #f3d88a 70%); box-shadow: 0 0 60px rgba(255, 230, 160, .5); }
.qq-bike { position: absolute; right: 12%; top: 16%; width: 46px; height: 24px; background: #05070d; border-radius: 12px 12px 4px 4px; opacity: 0; transform: translate(-80px, 40px); transition: all 1.4s .7s; }
.qq-frame { position: absolute; inset: 0; border: 14px solid #3b2a1a; border-radius: 18px; box-shadow: inset 0 0 0 3px #1c130a; }
.qq-frame::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; margin-left: -5px; background: #3b2a1a; opacity: 1; transition: opacity .3s .5s; }
.qq-sash { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(180deg, rgba(180, 210, 255, .28), rgba(120, 150, 210, .16)); border: 10px solid #5a3f25; box-shadow: inset 0 0 40px rgba(255, 255, 255, .12); transition: transform .9s cubic-bezier(.6, .05, .25, 1); }
.qq-sash::after { content: ''; position: absolute; left: 14%; top: 10%; width: 22%; height: 70%; background: linear-gradient(115deg, rgba(255, 255, 255, .28), transparent 60%); }
.qq-sash.l { left: 0; } .qq-sash.r { right: 0; }
.qq-body { position: relative; margin: 14px; max-height: calc(94vh - 28px); overflow: auto; border-radius: 10px; padding: 28px 30px 24px; background: rgba(6, 8, 18, .86); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s .7s, transform .5s .7s; }
.qq.opened .qq-sash.l { transform: translateX(-96%); } .qq.opened .qq-sash.r { transform: translateX(96%); }
.qq.opened .qq-frame::after { opacity: 0; }
.qq.opened .qq-body { opacity: 1; transform: none; }
.qq.opened .qq-bike { opacity: 1; transform: none; }
.qq-x { position: absolute; right: 12px; top: 10px; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.qq h2 { margin-bottom: 8px; }
.qq-step { font-weight: 700; margin: 18px 0 8px; } .qq-step b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 12px; margin-right: 6px; }
.qq-svc, .qq-plan, .qq-pack { display: flex; flex-wrap: wrap; gap: 8px; }
.qq-chip input { position: absolute; opacity: 0; }
.qq-chip span { display: inline-flex; flex-direction: column; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; cursor: pointer; font-size: 14px; transition: all .2s; }
.qq-chip span small { font-size: 10.5px; color: var(--gold); }
.qq-chip input:checked + span { background: var(--gold); color: #111; border-color: var(--gold); font-weight: 700; }
.qq-chip input:checked + span small { color: #5a4200; }
.qq-chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.qq-pl, .qq-pk { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; padding: 10px 16px; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: flex-start; min-width: 120px; }
.qq-pl small, .qq-pk small { color: var(--dim); font-size: 11.5px; }
.qq-pl[aria-checked="true"], .qq-pk[aria-pressed="true"] { border-color: var(--red); background: rgba(229, 9, 20, .18); }
.qq-sum { margin-top: 20px; border-top: 1px dashed rgba(255, 255, 255, .2); padding-top: 14px; }
.qq-kind { color: var(--gold); font-weight: 700; margin: 0 0 6px; }
.qq-rows { list-style: none; padding: 0; margin: 0 0 12px; }
.qq-rows li { display: grid; grid-template-columns: 1fr auto 130px; gap: 10px; padding: 5px 0; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.qq-rows small { color: var(--dim); text-align: right; } .qq-rows li.ent b { color: var(--gold); }
.qq-total { display: flex; flex-wrap: wrap; gap: 18px; }
.qq-total > div { flex: 1 1 180px; background: rgba(255, 255, 255, .05); border-radius: 10px; padding: 10px 14px; }
.qq-total small { display: block; color: var(--dim); font-size: 12px; }
.qq-total b { font-family: var(--f-e); font-size: 30px; } .qq-total em { font-style: normal; color: var(--gold); margin-left: 8px; }
.qq-empty { color: var(--dim); }
.qq-note { color: var(--dim); font-size: 12px; margin-top: 14px; }
.qq-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
@media (max-width: 640px) { .qq-body { padding: 22px 16px; } .qq-rows li { grid-template-columns: 1fr auto; } .qq-rows small { grid-column: 1 / -1; text-align: left; } .qq-moon { width: 70px; height: 70px; } }
body.still .qq-sash, body.still .qq-body, body.still .qq-bike, body.still .qq-frame::after { transition: none; }

/* ===== 2026-10-23 演出 ===== */
/* 1. 月の光 → スポットライト */
.fx-orb { position: fixed; z-index: 60; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 248, 220, .95), rgba(255, 230, 160, .5) 45%, transparent 70%); transition: transform 1.1s cubic-bezier(.5, 0, .2, 1), opacity 1.1s ease-in; }
.bb-device .spot { transition: opacity 1s; }
.bb-device.fx-dark .spot { opacity: 0; }
.bb-device.fx-lit .spot { opacity: 1; filter: blur(4px) brightness(1.6); }
/* 3. AIが書いている */
.fx-type { position: absolute; left: 4%; bottom: -2%; z-index: 3; width: min(360px, 62%); background: rgba(10, 10, 14, .92); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 10px 14px 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); font-size: 13.5px; }
.fx-type p { margin: 0; }
.fx-who { font: 700 10.5px var(--f-e); letter-spacing: .15em; color: var(--dim); margin-top: 4px !important; }
.fx-who.ai { color: var(--gold); }
.fx-q { color: #fff; min-height: 1.5em; }
.fx-a { color: #ffe9a6; min-height: 1.5em; }
.fx-a::after { content: '▍'; color: var(--gold); margin-left: 2px; }
.fx-type.done .fx-a::after { content: ''; }
@media (max-width: 900px) { .fx-type { left: 2%; width: 70%; bottom: 4%; font-size: 12.5px; } }
/* 4. 年表 */
.future { position: relative; height: 420vh; }
.future { height: 360vh; }
.fu-stick { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 5vw 30px; overflow: hidden; }
.fu-year { font: 700 clamp(70px, 14vw, 180px) var(--f-e); line-height: 1; margin: 0; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.future[data-k="4"] .fu-year { color: var(--gold); text-shadow: 0 0 60px rgba(255, 216, 74, .35); }
.fu-track { width: min(560px, 80vw); height: 3px; background: rgba(255, 255, 255, .12); border-radius: 2px; margin: 14px 0 26px; overflow: hidden; }
.fu-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); transform-origin: left; transform: scaleX(0); }
.fu-steps { position: relative; width: min(680px, 92vw); height: 320px; }
.fu-step { position: absolute; inset: 0; opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; pointer-events: none; }
.fu-step.on { opacity: 1; transform: none; pointer-events: auto; }
.fu-step h3 { font: 700 clamp(22px, 3vw, 32px) var(--f-j); margin: 10px 0 8px; letter-spacing: .04em; }
.fu-step.final h3 { color: var(--gold); font-size: clamp(26px, 3.6vw, 40px); }
.fu-step p { color: #d8d3ca; font-weight: 400; font-size: 16px; }
.fu-art { height: 120px; display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.fu-art i { display: block; border-radius: 4px; }
.fu-art.a0 i { width: 40px; background: #e9e4d8; } .fu-art.a0 i:nth-child(1) { height: 60px; } .fu-art.a0 i:nth-child(2) { height: 100px; } .fu-art.a0 i:nth-child(3) { height: 80px; } .fu-art.a0 i:nth-child(4) { height: 112px; } .fu-art.a0 i:nth-child(5) { height: 70px; }
.fu-art.a1 i { width: 46px; height: 64px; background: #e9e4d8; } .fu-art.a1 i:nth-child(2) { background: var(--gold); height: 84px; }
.fu-art.a2 i { width: 70px; height: 70px; border-radius: 50%; background: #6ee7ff; } .fu-art.a2 i:nth-child(2) { background: var(--gold); width: 54px; height: 54px; }
.fu-art.a3 i { width: 34px; height: 34px; border-radius: 50%; background: #9cff6e; } .fu-art.a3 i:nth-child(odd) { border-radius: 8px; background: #94a3b8; height: 52px; }
.fu-art.a4 i { width: 22px; background: linear-gradient(var(--gold), var(--red)); } .fu-art.a4 i:nth-child(1) { height: 30px; } .fu-art.a4 i:nth-child(2) { height: 48px; } .fu-art.a4 i:nth-child(3) { height: 66px; } .fu-art.a4 i:nth-child(4) { height: 86px; } .fu-art.a4 i:nth-child(5) { height: 104px; } .fu-art.a4 i:nth-child(6) { height: 120px; }
.fu-step.on .fu-art i { animation: fuUp .8s both; } .fu-step.on .fu-art i:nth-child(2) { animation-delay: .08s; } .fu-step.on .fu-art i:nth-child(3) { animation-delay: .16s; } .fu-step.on .fu-art i:nth-child(4) { animation-delay: .24s; } .fu-step.on .fu-art i:nth-child(5) { animation-delay: .32s; } .fu-step.on .fu-art i:nth-child(6) { animation-delay: .4s; }
@keyframes fuUp { from { transform: scaleY(.1); opacity: 0; transform-origin: bottom; } to { transform: none; opacity: 1; } }
body.still .future { height: auto; } body.still .fu-stick { position: static; height: auto; }
body.still .fu-steps { height: auto; } body.still .fu-step { position: static; opacity: 1; transform: none; margin-bottom: 30px; pointer-events: auto; }
body.still .fu-track, body.still .fu-year { display: none; }
/* 2040年の解説 */
.fu-dlg { border: 0; padding: 30px 28px 22px; width: min(720px, 94vw); border-radius: 18px; background: linear-gradient(160deg, #0b1230, #04060f); color: #f4f1ea; }
.fu-dlg::backdrop { background: rgba(0, 0, 0, .8); }
.fu-scenes { position: relative; min-height: 340px; }
.fu-scene { position: absolute; inset: 0; opacity: 0; transform: translateX(30px); transition: opacity .6s, transform .6s; text-align: center; pointer-events: none; }
.fu-scene.on { opacity: 1; transform: none; pointer-events: auto; }
.fu-scene h3 { font: 900 clamp(20px, 3vw, 30px) var(--f-d); margin: 16px 0 8px; }
.fu-scene p { color: #d8d3ca; }
.fs-art { height: 170px; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.fs-art b { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font: 700 40px var(--f-e); color: rgba(255, 255, 255, .25); }
.fs-art.s3 b { color: var(--gold); font-size: 64px; top: 10px; }
.fs-art .pp { width: 24px; height: 60px; border-radius: 12px 12px 4px 4px; background: #cbd5e1; transition: opacity 1s, transform 1s; }
.fu-scene.on .fs-art .pp:nth-child(n+5) { opacity: .15; transform: translateY(10px); transition-delay: 1s; }
.fs-art .doc { width: 50px; height: 66px; background: #e9e4d8; border-radius: 4px; }
.fs-art .bot { width: 80px; height: 80px; border-radius: 20px; background: var(--gold); color: #111; font: 700 28px var(--f-e); display: grid; place-items: center; }
.fu-scene.on .fs-art .doc { animation: docIn 1.6s both; } .fu-scene.on .fs-art .doc:nth-child(2) { animation-delay: .25s; } .fu-scene.on .fs-art .doc:nth-child(3) { animation-delay: .5s; }
@keyframes docIn { from { transform: translateX(0); } to { transform: translateX(60px) scale(.6); opacity: .2; } }
.fs-art .rb { width: 56px; height: 76px; border-radius: 16px 16px 8px 8px; background: #94a3b8; }
.fs-art .kid { width: 34px; height: 50px; border-radius: 17px 17px 6px 6px; background: #ff7ab6; } .fs-art .kid + .kid { background: #6ee7ff; }
.fs-art .st { position: absolute; top: 20px; right: 20%; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 30px rgba(255, 216, 74, .6); }
.fs-art .up { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 100px solid var(--red); }
.fu-scene.on .fs-art .up { animation: upGo 1.4s both; } @keyframes upGo { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.fu-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.fu-dots { display: flex; gap: 6px; } .fu-dots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); } .fu-dots i.on { background: var(--gold); }
body.still .fu-scene, body.still .fs-art * { transition: none !important; animation: none !important; }
/* 2. チケット */
.qq-ticket { margin-top: 16px; }
.tk { display: grid; grid-template-columns: 1fr 170px; background: linear-gradient(135deg, #fff5d1, #f3d88a); color: #2b1a00; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.tk-main { padding: 16px 20px; border-right: 2px dashed rgba(43, 26, 0, .35); }
.tk-k { font: 700 11px var(--f-e); letter-spacing: .2em; margin: 0; }
.tk h3 { font: 900 22px var(--f-d); margin: 4px 0 6px; }
.tk ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.tk-stub { padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; }
.tk-stub small { font-size: 11px; opacity: .7; } .tk-stub b { font: 700 22px var(--f-e); margin-bottom: 4px; }
.tk-no { font: 700 12px var(--f-e); letter-spacing: .1em; margin-top: 4px; }
.tk-hint { color: var(--dim); font-size: 12.5px; margin: 8px 0 0; }
.qq-ticket.print .tk { animation: tkPrint .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tkPrint { from { transform: translateY(-30px) scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 560px) { .tk { grid-template-columns: 1fr; } .tk-main { border-right: 0; border-bottom: 2px dashed rgba(43, 26, 0, .35); } }
/* 5. 座席番号 */
.seat { display: inline-flex; flex-direction: column; align-items: center; padding: 16px 30px 18px; margin: 10px 0; border: 2px solid var(--gold); border-radius: 14px; background: radial-gradient(circle at 50% 0, rgba(255, 216, 74, .18), transparent 70%); }
.seat-row { font: 700 12px var(--f-j); color: #cfc9bf; }
.seat-lbl { font: 700 12px var(--f-e); letter-spacing: .4em; color: var(--gold); margin-top: 4px; }
.seat-no { font: 700 clamp(70px, 16vw, 130px) var(--f-e); line-height: 1; color: var(--gold); }
.seat-chairs { display: flex; gap: 5px; margin-top: 8px; } .seat-chairs i { width: 16px; height: 12px; border-radius: 5px 5px 2px 2px; background: #333; } .seat-chairs i.me { background: var(--red); box-shadow: 0 0 12px rgba(229, 9, 20, .7); }
.qq-act [hidden] { display: none !important; }
.fs-art.s3 b { top: -6px; } .fs-art.s3 .up { margin-top: 70px; border-bottom-width: 80px; border-left-width: 48px; border-right-width: 48px; }

/* ===== 年表のボタン（2026から出す） ===== */
.fu-btn { margin: 6px 0 0; } .fu-btn .cta { display: inline-flex; align-items: center; gap: 8px; } .fu-btn svg { width: 16px; height: 16px; fill: currentColor; }
.fu-steps { height: 280px; }
body.still .fu-btn { margin-top: 10px; }

/* ===== 2040年まで、30秒で見る ===== */
.fu-dlg { width: min(860px, 96vw); padding: 0; overflow: hidden; background: #04060f; }
.fv { position: relative; height: min(520px, 70vh); overflow: hidden; }
.fv-year { position: absolute; left: 22px; top: 14px; z-index: 5; margin: 0; font: 700 34px var(--f-e); color: #fff; letter-spacing: .04em; }
.fv-s { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; pointer-events: none; }
.fv-s.on { opacity: 1; pointer-events: auto; }
.fv-cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font: 700 clamp(16px, 2.4vw, 22px) var(--f-j); color: #fff; margin: 0; text-shadow: 0 2px 10px #000; opacity: 0; }
.fv-s.on .fv-cap { animation: capIn .8s .8s both; } @keyframes capIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fu-dlg .fu-nav { padding: 12px 18px 16px; margin: 0; background: #070a16; }
.fu-dlg .qq-x { z-index: 6; }
/* 2026 */
.s26 { background: linear-gradient(#1a1712, #0b0a08); }
.paper-rain i { position: absolute; top: -80px; width: 54px; height: 72px; background: #f1ece0; border-radius: 3px; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.paper-rain i::before { content: ''; position: absolute; left: 8px; right: 8px; top: 12px; height: 34px; background: repeating-linear-gradient(#bdb5a3 0 2px, transparent 2px 8px); }
.s26.on .paper-rain i { animation: paperFall 3.2s cubic-bezier(.4, .1, .6, 1) both; }
.paper-rain i:nth-child(1) { left: 6%; } .paper-rain i:nth-child(2) { left: 14%; animation-delay: .3s !important; } .paper-rain i:nth-child(3) { left: 24%; animation-delay: .6s !important; } .paper-rain i:nth-child(4) { left: 70%; animation-delay: .15s !important; } .paper-rain i:nth-child(5) { left: 80%; animation-delay: .45s !important; } .paper-rain i:nth-child(6) { left: 88%; animation-delay: .75s !important; } .paper-rain i:nth-child(7) { left: 10%; animation-delay: 1.1s !important; } .paper-rain i:nth-child(8) { left: 76%; animation-delay: 1.3s !important; } .paper-rain i:nth-child(9) { left: 20%; animation-delay: 1.6s !important; } .paper-rain i:nth-child(10) { left: 84%; animation-delay: 1.8s !important; } .paper-rain i:nth-child(11) { left: 4%; animation-delay: 2.1s !important; } .paper-rain i:nth-child(12) { left: 92%; animation-delay: 2.3s !important; }
@keyframes paperFall { from { transform: translateY(0) rotate(-10deg); } to { transform: translateY(var(--fall, 430px)) rotate(14deg); } }
.paper-rain i:nth-child(even) { --fall: 400px; } .paper-rain i:nth-child(3n) { --fall: 450px; }
.sheet { position: absolute; left: 50%; top: 70px; width: 340px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: #2b6b3f; padding: 2px; border-radius: 4px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.sheet b { height: 22px; background: #f6f6f0; }
.sheet b:nth-child(-n+6) { background: #cfe8d6; }
.s26.on .sheet b { animation: cellFill 5s steps(1) both; }
.sheet b:nth-child(7n) { animation-delay: .5s !important; } .sheet b:nth-child(5n) { animation-delay: 1.2s !important; } .sheet b:nth-child(3n) { animation-delay: 2s !important; }
@keyframes cellFill { 0% { background: #f6f6f0; } 50% { background: #fff1a8; } 100% { background: #ffd6d6; } }
.worker { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); width: 120px; height: 120px; }
.worker .head { position: absolute; left: 42px; top: 0; width: 36px; height: 36px; border-radius: 50%; background: #e8c9a0; }
.worker .body { position: absolute; left: 22px; top: 38px; width: 76px; height: 70px; border-radius: 30px 30px 6px 6px; background: #3b4b6b; }
.worker .sweat { position: absolute; left: 82px; top: 6px; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #7cc7ff; }
.s26.on .worker { animation: busy .35s ease-in-out infinite alternate; } @keyframes busy { from { transform: translateX(-52%); } to { transform: translateX(-48%); } }
/* 2027 */
.s27 { background: radial-gradient(circle at 50% 45%, #2a2410, #050505 70%); perspective: 900px; }
.coin { position: absolute; left: 50%; top: 46%; width: 190px; height: 190px; margin: -95px 0 0 -95px; transform-style: preserve-3d; }
.coin .face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font: 900 64px var(--f-d); backface-visibility: hidden; box-shadow: inset 0 0 0 10px rgba(0, 0, 0, .18), 0 20px 60px rgba(0, 0, 0, .6); }
.coin .f1 { background: radial-gradient(circle at 35% 30%, #fff, #cfc6b0); color: #554a33; }
.coin .f2 { background: radial-gradient(circle at 35% 30%, #fff3b0, #e0a800); color: #3a2a00; transform: rotateY(180deg); font-family: var(--f-e); }
.s27.on .coin { animation: flip 2.6s cubic-bezier(.5, 0, .3, 1) .5s both; }
@keyframes flip { 0% { transform: translateY(0) rotateY(0); } 40% { transform: translateY(-110px) rotateY(540deg); } 100% { transform: translateY(0) rotateY(1260deg); } }
/* 2030 */
.s30 { background: linear-gradient(160deg, #0d1b2a, #050912); }
.talk { position: absolute; left: 0; right: 0; top: 64px; display: grid; grid-template-columns: 70px 1fr 70px; gap: 12px; padding: 0 22px; }
.who .av { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; font: 700 20px var(--f-e); }
.who.ai .av { background: var(--gold); color: #111; box-shadow: 0 0 24px rgba(255, 216, 74, .5); }
.who.hu .av { background: #e8c9a0; border-radius: 50%; position: relative; } .who.hu .av::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -14px; height: 22px; border-radius: 14px 14px 4px 4px; background: #3b4b6b; }
.msgs { display: flex; flex-direction: column; gap: 10px; }
.bub { max-width: 78%; margin: 0; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.6; opacity: 0; transform: translateY(8px); }
.bub.l { align-self: flex-start; background: #fff7d6; color: #2b1a00; border-bottom-left-radius: 4px; }
.bub.r { align-self: flex-end; background: #2d3a55; color: #fff; border-bottom-right-radius: 4px; }
.s30.on .bub { animation: bubIn .5s both; } .s30.on .b1 { animation-delay: .4s; } .s30.on .b2 { animation-delay: 2.4s; } .s30.on .b3 { animation-delay: 3.6s; } .s30.on .b4 { animation-delay: 6.4s; }
@keyframes bubIn { to { opacity: 1; transform: none; } }
.plan { position: absolute; left: 50%; bottom: 18px; width: min(460px, 86%); transform: translate(-50%, 40px); opacity: 0; background: #fff; color: #1d2b2a; border-radius: 12px; padding: 12px 16px; box-shadow: 0 0 0 2px var(--gold), 0 24px 60px rgba(255, 216, 74, .25); font-size: 13.5px; }
.plan p { margin: 2px 0; } .plan .plan-h { font-weight: 700; color: #0f766e; margin-bottom: 6px; }
.plan i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #16a34a; margin-right: 6px; }
.s30.on .plan { animation: planUp 1.2s cubic-bezier(.2, .8, .2, 1) 8s both; } @keyframes planUp { to { opacity: 1; transform: translate(-50%, 0); } }
/* 2040 */
.s40 { background: #020806; }
#fv-rain { position: absolute; inset: 0; width: 100%; height: 100%; }
.geo { position: absolute; left: 50%; top: 46%; width: 260px; height: 260px; margin: -130px 0 0 -130px; }
.geo i { position: absolute; inset: 0; border: 2px solid rgba(80, 255, 170, .55); }
.geo .g1 { border-radius: 50%; } .geo .g2 { transform: rotate(45deg) scale(.72); border-color: rgba(255, 216, 74, .7); } .geo .g3 { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: rgba(80, 255, 170, .08); border: 0; transform: scale(.55); }
.s40.on .geo .g1 { animation: spin 12s linear infinite; } .s40.on .geo .g2 { animation: spin2 8s linear infinite; } .s40.on .geo .g3 { animation: pulse 3s ease-in-out infinite alternate; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin2 { from { transform: rotate(45deg) scale(.72); } to { transform: rotate(-315deg) scale(.72); } } @keyframes pulse { from { transform: scale(.5); } to { transform: scale(.62); } }
.geo .n { position: absolute; font: 700 13px var(--f-e); letter-spacing: .2em; color: #b9ffd9; background: rgba(2, 8, 6, .8); padding: 2px 8px; border-radius: 4px; }
.geo .n1 { left: 50%; top: -12px; transform: translateX(-50%); } .geo .n2 { right: -60px; bottom: 30px; } .geo .n3 { left: -50px; bottom: 30px; }
.fv-final { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; margin: 0; font: 900 clamp(26px, 4.4vw, 46px) var(--f-d); color: var(--gold); text-shadow: 0 0 30px rgba(255, 216, 74, .5), 0 2px 10px #000; opacity: 0; }
.s40.on .fv-final { animation: finalIn 1.6s ease 3.2s both; } @keyframes finalIn { from { opacity: 0; transform: translateY(20px) scale(.96); letter-spacing: .3em; } to { opacity: 1; transform: none; letter-spacing: .04em; } }
@media (max-width: 640px) { .sheet { width: 250px; } .bub { font-size: 13px; max-width: 92%; } .talk { grid-template-columns: 46px 1fr 46px; gap: 6px; padding: 0 10px; top: 60px; } .who .av { width: 42px; height: 42px; font-size: 15px; } .plan { font-size: 12px; } .geo { transform: scale(.75); } }
body.still .fv-s *, body.still .fv-s { animation-duration: .01s !important; animation-delay: 0s !important; transition: none !important; }
/* ===== 2026-10-24 ちびキャラのイラスト（年表・30秒アニメ） ===== */
.fu-steps { height: auto; min-height: 430px; }
.fu-art { height: auto; display: block; margin: 0 auto; width: min(560px, 88vw); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .6); background: #000; }
.fu-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fu-step.on .fu-art img { animation: tlIn 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tlIn { from { opacity: 0; transform: scale(1.06); filter: brightness(.4); } to { opacity: 1; transform: none; filter: none; } }
.fu-step.final .fu-art { box-shadow: 0 0 0 2px var(--gold), 0 0 60px rgba(255, 216, 74, .35); }
.fu-year { font-size: clamp(54px, 9vw, 120px); }
.fu-track { margin: 8px 0 16px; }
.fu-step h3 { margin: 12px 0 4px; }
.fu-step p { margin: 0; }
@media (max-height: 760px) { .fu-art { width: min(440px, 88vw); } .fu-year { font-size: clamp(44px, 7vw, 84px); } }
body.still .fu-step.on .fu-art img { animation: none; }
/* 30秒アニメ：イラストを背景に */
.fv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s26 .fv-img { object-position: center 40%; }
.s26.on .fv-img { animation: kenB 7s ease-out both; } @keyframes kenB { from { transform: scale(1.12); } to { transform: scale(1); } }
.s26 .fv-cap { background: linear-gradient(transparent, rgba(0, 0, 0, .85) 40%); padding: 30px 0 4px; bottom: 0; }
.s26 .paper-rain { position: absolute; inset: 0; z-index: 1; }
.coin .face { background: none !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 50px rgba(255, 216, 74, .15); overflow: hidden; }
.coin .face img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.coin { width: 230px; height: 230px; margin: -115px 0 0 -115px; }
.s30 .fv-bg30 { opacity: .55; }
.s30 .who { visibility: hidden; }
.s30 .msgs { padding-top: 0; }
@media (max-width: 640px) { .coin { width: 170px; height: 170px; margin: -85px 0 0 -85px; } .s30 .fv-bg30 { opacity: .35; } }
.s30 .fv-bg30 { opacity: .9; }
.s30 .talk { left: 27%; right: 22%; top: 58px; grid-template-columns: 1fr; padding: 0; }
.s30 .who { display: none; }
.s30 .bub { font-size: 13.5px; max-width: 92%; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.s30 .bub.l { position: relative; } .s30 .b1::before { content: 'AI'; position: absolute; left: -34px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #111; font: 700 11px/26px var(--f-e); text-align: center; box-shadow: 0 0 16px rgba(255, 216, 74, .6); }
.s30 .plan { left: auto; right: 3%; transform: translate(0, 40px); width: min(330px, 46%); font-size: 12.5px; }
.s30.on .plan { animation-name: planUp2; } @keyframes planUp2 { to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .s30 .talk { left: 6%; right: 6%; } .s30 .bub { font-size: 12px; } .s30 .b1::before { display: none; } .s30 .plan { right: 4%; left: 4%; width: auto; } .s30 .fv-bg30 { opacity: .4; } }
.coin .face { overflow: visible; -webkit-backface-visibility: hidden; }
.coin .face img { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.s27 .coin { transform: rotateY(1260deg); }
/* 2026-10-24：2040年の言葉を細く・読みやすく（太い見出しの書体をやめる） */
.fv-final { font: 700 clamp(24px, 3.8vw, 40px) var(--f-j); letter-spacing: .12em; text-shadow: 0 0 18px rgba(0, 0, 0, .9), 0 0 4px #000; }
.s40 .fv-final::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(620px, 90%); height: 2.2em; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); z-index: -1; }
@keyframes finalIn { from { opacity: 0; transform: translateY(20px); letter-spacing: .3em; } to { opacity: 1; transform: none; letter-spacing: .12em; } }
.s40.on .fv-final { animation-delay: 1.6s; }
.s27 .fv-cap { line-height: 1.6; }
/* 3秒見積もり：1画面に収める（左：えらぶ／右：金額） */
.qq { width: min(1080px, 97vw); }
.qq-body { padding: 20px 24px 16px; overflow: hidden; max-height: calc(100vh - 28px); }
.qq h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 4px; }
.qq .kicker { margin: 0; }
.qq-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: start; }
.qq-step { margin: 12px 0 6px; font-size: 14px; }
.qq-chip span { padding: 6px 12px; font-size: 13px; }
.qq-pl, .qq-pk { padding: 7px 12px; min-width: 0; flex: 1 1 0; }
.qq-pl b { font-size: 14px; }
.qq-sum { margin-top: 0; border-top: 0; padding-top: 4px; border-left: 1px dashed rgba(255, 255, 255, .2); padding-left: 20px; }
.qq-rows li { padding: 4px 0; font-size: 13px; grid-template-columns: 1fr auto 118px; }
.qq-soon { font-style: normal; font-size: 10.5px; color: var(--gold); border: 1px solid rgba(255, 216, 74, .5); border-radius: 99px; padding: 0 6px; margin-left: 6px; }
.qq-total { gap: 10px; }
.qq-total > div { padding: 8px 12px; flex-basis: 140px; }
.qq-total b { font-size: 24px; }
.qq-ticket { margin-top: 10px; }
.qq-note { font-size: 11px; margin-top: 8px; }
.qq-act { margin-top: 8px; } .qq-act .cta.big { padding: 12px 22px; font-size: 15px; }
.qq-moon { width: 90px; height: 90px; }
@media (max-width: 860px) { .qq-grid { grid-template-columns: 1fr; gap: 6px; } .qq-sum { border-left: 0; padding-left: 0; border-top: 1px dashed rgba(255, 255, 255, .2); padding-top: 8px; } .qq-body { overflow: auto; } }
/* 2030のコマ：AIが先に話しかける吹き出しの文字（2026-10-24） */
.fu-art.has-bub { position: relative; }
.tl-bub { position: absolute; left: 4.2%; top: 9.5%; width: 18.5%; height: 17%; display: grid; place-items: center; text-align: center; color: #2b1a00; font: 700 clamp(8px, 1.15vw, 12.5px)/1.35 var(--f-j); z-index: 1; opacity: 0; }
.fu-step.on .tl-bub { animation: capIn .5s .9s both; }
body.still .tl-bub { opacity: 1; animation: none; }
.fu-btn { margin-top: 18px; }
/* 2026-10-24 運用中に β版 */
.card .tag.beta { left: auto; right: 8px; background: var(--red) !important; }
.row-beta { vertical-align: middle; margin: 0 6px 0 4px; font-size: 12px; }
/* 2030 吹き出し：枠を広げた画像に合わせる（文字はみ出し対策） */
.tl-bub { left: 4.6%; top: 9.4%; width: 16%; height: 19%; font-size: clamp(7px, 1.05vw, 12px); line-height: 1.3; }
.fu-art.has-bub { container-type: inline-size; }
@container (min-width: 1px) { .tl-bub { font-size: clamp(7px, 2.05cqw, 15px); } }
.tl-bub { left: 3.6%; width: 18%; white-space: nowrap; letter-spacing: -.02em; }
@container (min-width: 1px) { .tl-bub { font-size: clamp(6.5px, 1.85cqw, 14px); } }
@container (max-width: 520px) { .tl-bub { font-size: 1.7cqw; } }
/* 2026-10-24 エンタープライズ */
.t-only { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--gold); border: 1px solid rgba(216, 180, 90, .5); border-radius: 999px; padding: 1px 10px; }
/* 2026-10-24 3秒見積もり：スマホで1画面に収める */
.qq-pk b { font-weight: 700; white-space: nowrap; } .qq-pk b i { font-style: normal; font-size: .8em; margin-left: 1px; }
@media (max-width: 640px) {
  .qq { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
  .qq-room { border-radius: 0; } .qq-frame { border-width: 6px; border-radius: 0; } .qq-moon, .qq-bike { display: none; }
  .qq-body { margin: 6px; max-height: calc(100dvh - 12px); height: calc(100dvh - 12px); padding: 12px 12px 0; display: flex; flex-direction: column; overflow: hidden; }
  .qq-body > .kicker { display: none; }
  .qq h2 { font-size: 20px; margin: 0 0 2px; }
  .qq-x { top: 8px; right: 8px; width: 30px; height: 30px; font-size: 16px; }
  .qq-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 4px; }
  .qq-step { margin: 8px 0 5px; font-size: 13px; } .qq-step b { width: 18px; height: 18px; font-size: 11px; }
  .qq-svc { gap: 5px; }
  .qq-chip span { padding: 5px 10px; font-size: 12.5px; line-height: 1.35; }
  .qq-chip span small { font-size: 9.5px; }
  .qq-plan, .qq-pack { display: grid; gap: 5px; }
  .qq-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qq-pack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qq-pl, .qq-pk { padding: 7px 4px; align-items: center; text-align: center; min-width: 0; border-radius: 8px; }
  .qq-pl b { font-size: 13px; white-space: nowrap; } .qq-pl small { font-size: 10px; line-height: 1.3; }
  .qq-pk b { font-size: 12.5px; letter-spacing: -.02em; } .qq-pk small { font-size: 9.5px; }
  .qq-sum { margin-top: 8px; padding-top: 6px; }
  .qq-kind { font-size: 13px; margin-bottom: 2px; }
  .qq-rows { margin-bottom: 6px; } .qq-rows li { font-size: 12.5px; padding: 3px 0; gap: 2px 8px; } .qq-rows small { font-size: 10.5px; }
  .qq-total { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .qq-total > div { padding: 6px 10px; min-width: 0; } .qq-total > div:nth-child(3) { grid-column: 1 / -1; }
  .qq-total small { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qq-total b { font-size: 20px; white-space: nowrap; }
  .qq-note { font-size: 10.5px; margin: 6px 0 0; } .qq-note-more { display: none; }
  .qq-act { position: sticky; bottom: 0; margin: 8px -12px 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(6, 8, 18, .96); border-top: 1px solid rgba(255, 255, 255, .1); gap: 6px; }
  .qq-act .cta.big { padding: 11px 14px; font-size: 14px; flex: 1; justify-content: center; text-align: center; }
  .qq-act .cta.ghost { padding: 10px 12px; font-size: 12.5px; }
}
@media (max-width: 640px) { .qq-grid { align-content: start; } .qq-act .cta { white-space: nowrap; } .qq-act .cta.big { font-size: 13.5px; padding: 11px 10px; } }
@media (max-width: 640px) { .qq-rows li { grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; } .qq-rows li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qq-rows small { grid-column: auto; text-align: right; white-space: nowrap; min-width: 64px; } .qq-rows small:empty { display: none; } }