/* 日程調整 ガイド — styles. Colors live in :root. */
html,body{margin:0}
img,svg{max-width:100%}
body{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
/* Layout: one narrow column read like a mission log — hero, crew steps, a playable demo, captain steps, destinations, questions. Single dark "night sky" world, matching the app. */
:root{
  --sky:#17133C; --sky-2:#2A1F62; --sky-3:#4A2E86;
  --card:#FFFCF5; --ink:#2B2550; --ink-2:#6E6892; --soft:#F3EFFF; --line:#E7E1F6;
  --sun:#FFC94D; --sun-d:#DDA126; --coral:#FF6B6B; --coral-d:#D94F58; --mint:#45CFA0; --mint-d:#25A97C;
  --on-sky:#FFFFFF; --on-sky-2:#D8D1FF;
  --display:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",-apple-system,sans-serif;
  --body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
html[lang^=zh]{--display:"PingFang SC","Hiragino Sans GB","Noto Sans SC","M PLUS Rounded 1c",sans-serif;--body:"PingFang SC","Hiragino Sans GB","Noto Sans SC","M PLUS Rounded 1c",sans-serif}
*{box-sizing:border-box}
body{background:var(--sky);color:var(--on-sky);font-family:var(--body);font-size:16px;line-height:1.7;font-weight:500;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 70% at 50% 110%,var(--sky-3) 0%,var(--sky-2) 45%,var(--sky) 80%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(1.6px 1.6px at 22px 34px,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 140px 90px,#fff 50%,transparent 51%),radial-gradient(2px 2px at 210px 180px,#FFE7A3 50%,transparent 51%),radial-gradient(1.2px 1.2px at 70px 200px,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 180px 20px,#CFC4FF 50%,transparent 51%);background-size:250px 250px;opacity:.8}
.wrap{max-width:600px;margin:0 auto;padding-inline:18px;padding-block:12px 56px}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:8px}
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:.02em;text-wrap:balance;margin:0}
h2{font-size:clamp(24px,6vw,30px);line-height:1.3}
p{margin:0}

.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:6px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px}
.brand svg{width:28px;height:28px;transform:rotate(35deg)}
.langs{display:flex;background:rgba(255,255,255,.12);border-radius:999px;padding:3px}
.langs button{border:0;background:transparent;color:var(--on-sky);font:inherit;font-size:12px;font-weight:800;border-radius:999px;padding:5px 11px;cursor:pointer}
.langs button[aria-pressed=true]{background:var(--card);color:var(--ink)}

/* hero */
.hero{display:grid;gap:14px;padding-block:22px 10px;text-align:center;justify-items:center}
.hero-art{position:relative;width:min(300px,80vw);height:220px}
.hero-art .rocket{position:absolute;left:50%;bottom:6px;height:190px;transform:translateX(-50%) rotate(-8deg);animation:float 3.2s ease-in-out infinite}
.hero-art .p1{position:absolute;right:0;top:4px;width:92px;animation:bob 5s ease-in-out infinite}
.hero-art .p2{position:absolute;left:4px;top:56px;width:64px;animation:bob 6s ease-in-out infinite reverse}
.hero-art .p3{position:absolute;left:30px;bottom:0;width:48px;animation:bob 4.4s ease-in-out infinite}
@keyframes float{50%{transform:translateX(-50%) rotate(-8deg) translateY(-10px)}}
@keyframes bob{50%{transform:translateY(-8px)}}
.eyebrow{font-size:13px;font-weight:800;color:var(--sun);letter-spacing:.08em}
.hero h1{font-size:clamp(32px,9vw,46px);line-height:1.2}
.lead{color:var(--on-sky-2);font-size:16px;max-width:30em}
.ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:16px;border:0;font:inherit;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px)}
.btn-sun{background:var(--sun);color:var(--ink);box-shadow:0 4px 0 var(--sun-d)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 4px 0 var(--coral-d)}
.btn-glass{background:rgba(255,255,255,.13);color:var(--on-sky)}
.btn:disabled{opacity:.5;cursor:default}

section{display:grid;gap:16px;padding-block:44px 0}
.sub{color:var(--on-sky-2)}

/* step lists: a dotted flight path links the steps because they happen in order */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative}
.steps::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;border-left:3px dotted rgba(255,255,255,.28)}
.step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start}
.badge{width:56px;height:56px;border-radius:50%;background:var(--card);color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-size:22px;box-shadow:0 4px 0 rgba(8,5,35,.35);position:relative;z-index:1}
.step-body{background:var(--card);color:var(--ink);border-radius:20px;padding:14px 16px;box-shadow:0 5px 0 rgba(8,5,35,.35)}
.step-body b{display:block;font-size:17px;font-weight:800}
.step-body p{color:var(--ink-2);font-size:14px;margin-top:2px}
.mini{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.tgm{width:42px;height:38px;border-radius:12px;border:2px solid var(--line);background:#fff;display:grid;place-items:center;color:#C2BCD9}
.tgm svg{width:20px;height:20px}
.tgm.y{background:var(--mint);border-color:var(--mint-d);color:#fff}
.tgm.m{background:var(--sun);border-color:var(--sun-d);color:var(--ink)}
.tgm.n{background:#8E88AA;border-color:#716B91;color:#fff}
.chipdemo{display:inline-flex;align-items:center;gap:6px;background:var(--coral);color:#fff;border-radius:12px;padding:6px 14px;font-weight:800;font-size:14px;box-shadow:0 3px 0 var(--coral-d)}
.icons{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.icons span svg,.th .tag svg{width:18px;height:18px;vertical-align:-4px}
.ico{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.22em}
#ctaIco{display:inline-flex}
.icons span{background:var(--soft);border-radius:12px;padding:4px 9px;font-size:13px;font-weight:700;color:var(--ink)}

/* demo */
.demo{background:var(--card);color:var(--ink);border-radius:26px;padding:18px 16px 16px;box-shadow:0 6px 0 rgba(8,5,35,.35);display:grid;gap:12px;overflow:hidden}
.d-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.d-head b{font-size:18px;font-weight:800}
.d-count{font-size:13px;font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}
.d-scene{position:relative;height:150px;border-radius:18px;background:radial-gradient(120% 90% at 50% 120%,var(--sky-3),var(--sky) 75%);overflow:hidden}
.d-scene .rocket{position:absolute;left:50%;bottom:16px;height:116px;transform:translateX(-50%);transition:transform 1.4s cubic-bezier(.55,0,.85,.35)}
.d-scene .rocket .rk-flame{opacity:0;transition:opacity .2s}
.d-scene.go .rocket{transform:translate(-50%,-260px)}
.d-scene.go .rocket .rk-flame,.d-scene.lit .rocket .rk-flame{opacity:1}
.d-scene .ground{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:170px;height:22px;border-radius:50%;background:#3B2E7E}
.d-scene .seats{position:absolute;left:10px;top:10px;display:flex;gap:5px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--ink);border:2px solid #fff}
.av.seat{border:2px dashed rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.6)}
.av.pop{animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:translateY(-30px) scale(.3);opacity:0}}
.d-land{position:absolute;inset:0;display:grid;place-items:end center}
.d-land{animation:landin .8s ease-out both}
@keyframes landin{from{opacity:0;transform:translateY(-30px)}}
.d-land .lp{position:relative;width:120px;height:150px}
.d-land .lp>svg{position:absolute;left:0;bottom:-8px;width:120px;height:120px}
.d-land .lr{position:absolute;left:calc(50% - 20px);bottom:76px;transform:rotate(8deg);transform-origin:50% 100%}
.d-scene .d-land .lr .rocket{position:static;transform:none;height:64px;width:auto}
.opts{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--soft);border-radius:16px;padding:8px 8px 8px 12px;border:2px solid transparent}
.opt.need{border-color:var(--coral);animation:shake .4s}
@keyframes shake{25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.opt .when{font-weight:800;font-size:14px;line-height:1.35}
.opt .friends{display:flex;gap:3px;margin-top:3px}
.opt .friends i{font-style:normal;font-size:11px;font-weight:800;border-radius:6px;padding:0 5px;background:#fff;color:var(--ink-2)}
.tgs{display:flex;gap:5px}
.tg{width:42px;height:42px;border-radius:12px;border:2px solid var(--line);background:#fff;color:#C2BCD9;display:grid;place-items:center;cursor:pointer;padding:0}
.tg svg{width:20px;height:20px}
.tg[aria-pressed=true].y{background:var(--mint);border-color:var(--mint-d);color:#fff}
.tg[aria-pressed=true].m{background:var(--sun);border-color:var(--sun-d);color:var(--ink)}
.tg[aria-pressed=true].n{background:#8E88AA;border-color:#716B91;color:#fff}
.d-foot{display:flex;gap:10px;align-items:center}
.d-foot .btn{flex:1}
.d-msg{font-size:13px;font-weight:700;color:var(--ink-2);min-height:1.5em;text-align:center}
.result{display:grid;gap:4px;text-align:center;background:#FFF6D9;border-radius:16px;padding:12px}
.result b{font-size:17px}
.result .date{font-size:20px;font-weight:800;color:var(--coral)}

.rule{background:rgba(255,255,255,.08);border:2px dashed rgba(255,255,255,.25);border-radius:18px;padding:14px 16px;color:var(--on-sky-2);font-size:14px}
.rule b{color:var(--sun)}

/* destinations */
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:560px){.themes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.th{background:var(--card);color:var(--ink);border-radius:20px;padding:12px 10px;display:grid;justify-items:center;text-align:center;gap:2px;min-width:0}
.th svg{width:90px;height:90px}
.th b{font-size:14px}
.th small{font-size:12px;color:var(--ink-2);line-height:1.5}
.th .tag{font-size:11px;font-weight:800;color:var(--ink);background:var(--soft);border-radius:999px;padding:2px 9px;margin-bottom:4px}
.planets{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.pl{display:grid;justify-items:center;gap:0;text-align:center;font-size:12px;font-weight:700;color:var(--on-sky-2)}
.pl svg{width:44px;height:44px}

/* faq */
.faq{display:grid;gap:8px}
details{background:var(--card);color:var(--ink);border-radius:18px;padding:0 16px}
summary{list-style:none;cursor:pointer;font-weight:800;padding:14px 0;display:flex;justify-content:space-between;gap:10px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:20px;line-height:1;color:var(--ink-2)}
details[open] summary::after{content:"−"}
details p{color:var(--ink-2);font-size:14px;padding-bottom:14px}

.modal{position:fixed;inset:0;z-index:50;background:rgba(10,6,40,.7);display:flex;align-items:flex-end;justify-content:center;animation:fadein .2s}
.modal[hidden]{display:none!important}
.modal-card{position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:radial-gradient(120% 70% at 50% 110%,var(--sky-3),var(--sky-2) 50%,var(--sky) 85%);border-radius:28px 28px 0 0;padding:26px 18px calc(22px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;animation:sheetup .3s cubic-bezier(.3,1.2,.5,1)}
@media (min-width:600px){.modal{align-items:center}.modal-card{border-radius:28px}}
.modal-card h2{padding-right:40px}
.modal-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:var(--on-sky);font-size:24px;line-height:1;cursor:pointer}
@keyframes fadein{from{opacity:0}}
@keyframes sheetup{from{transform:translateY(100%)}}
body.locked{overflow:hidden}
.end{text-align:center;justify-items:center;padding-block:56px 10px}
.end p{color:var(--on-sky-2)}
.foot{text-align:center;font-size:11px;color:rgba(255,255,255,.4);margin-top:28px}

.rocket{display:block;overflow:visible}
.rocket .rk-flame{transform-box:fill-box;transform-origin:50% 0;animation:flick .12s ease-in-out infinite alternate}
@keyframes flick{from{transform:scaleY(.85)}to{transform:scaleY(1.1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}