body{margin:0;background:#0E1220}
a{color:#E3CF9A}a:hover{color:#F2E4BC}
.tq{font-family:'Zen Kaku Gothic New','Hiragino Sans',system-ui,sans-serif;color:#ECE8E1;background:#0E1220;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.tq h1,.tq h2,.tq h3{text-wrap:balance}
.tq p{text-wrap:pretty}
.sky{background-color:#0B0E18;background-image:radial-gradient(1px 1px at 12% 18%,rgba(236,232,225,.55) 50%,transparent 51%),radial-gradient(1px 1px at 68% 9%,rgba(236,232,225,.4) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 84% 31%,rgba(236,232,225,.5) 50%,transparent 51%),radial-gradient(1px 1px at 31% 42%,rgba(236,232,225,.3) 50%,transparent 51%),radial-gradient(1px 1px at 52% 24%,rgba(236,232,225,.35) 50%,transparent 51%),radial-gradient(1px 1px at 91% 64%,rgba(236,232,225,.3) 50%,transparent 51%),radial-gradient(1px 1px at 7% 71%,rgba(236,232,225,.3) 50%,transparent 51%),linear-gradient(180deg,#0B0E18 0%,#121626 48%,#231D2B 100%)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.35s}.d3{animation-delay:.6s}.d4{animation-delay:.85s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;background:#ECE8E1;color:#0E1220;font-weight:700;font-size:16px;text-decoration:none}
.btn:hover{background:#FFFFFF;color:#0E1220}

html{scroll-snap-type:y proximity}
.pin{--h:min(100vh,920px);position:relative;height:var(--h);background:#0E1220}
@supports (height:1svh){.pin{--h:min(100svh,920px)}}
.stage{position:sticky;top:0;height:var(--h);display:flex;align-items:center;overflow:hidden}
.stage-head{margin-bottom:36px;text-align:center}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) 322px minmax(0,1fr);gap:48px;align-items:center}
.stack{display:grid}
.stack > *{grid-area:1/1}
.card{padding:20px 22px;border-radius:20px;background:rgba(236,232,225,.045);border:1px solid rgba(236,232,225,.09);max-width:300px}
.card b{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:#E3CF9A}
.card p{margin:8px 0 0;font-size:15px;line-height:1.8}
.phone{--s:1;padding:10px;border-radius:50px;background:#05070C;border:1px solid #2A3042;box-shadow:0 40px 100px rgba(0,0,0,.6);transform:scale(var(--s));transform-origin:top center;margin-bottom:calc((var(--s) - 1) * 671px);margin-inline:calc((var(--s) - 1) * 161px)}
.screen{position:relative;width:300px;height:649px;border-radius:40px;overflow:hidden;background:#FFFFFF}
.screen img{position:absolute;left:0;top:0;width:300px;height:649px;display:block}
.curtain{position:absolute;left:0;top:0;right:0;height:100%;overflow:hidden}
.hem{position:absolute;left:0;right:0;top:-6px;height:18px;pointer-events:none;display:none}
.strip{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(236,232,225,.06);border:1px solid rgba(236,232,225,.1)}
.ind{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;color:#C3C6CF}
.ind.i1{background:#ECE8E1;color:#0E1220}
.glow{position:absolute;left:50%;top:50%;width:760px;height:760px;max-width:100%;transform:translate(-50%,-50%);pointer-events:none}
.s2,.s3{opacity:0}

@supports (animation-timeline: view()){
.pin{height:calc(var(--h) * 3);view-timeline:--steps block}
.snap{position:absolute;left:0;width:100%;height:var(--h);scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none}
.p1{top:0}.p2{top:var(--h)}.p3{top:calc(var(--h) * 2)}
.s1{animation:v1 linear both;animation-timeline:--steps;animation-range:contain 0% contain 100%}
.s2{animation:v2 linear both;animation-timeline:--steps;animation-range:contain 0% contain 100%}
.s3{animation:v3 linear both;animation-timeline:--steps;animation-range:contain 0% contain 100%}
.ind.i1{animation:a1 linear both;animation-timeline:--steps;animation-range:contain 0% contain 100%}
.ind.i2{animation:a2 linear both;animation-timeline:--steps;animation-range:contain 0% contain 100%}
.ind.i3{animation:a3 linear both;animation-timeline:--steps;animation-range:contain 0% contain 100%}
}
/* 帳は貼り付いた後に 1 回だけ時間で下ろす。JS が無い・動きを減らす設定では最初から下りた状態 */
.pre .curtain{height:0}
.pre.down .curtain{animation:drop 1s ease both}
.pre.down .hem{display:block;animation:hem 1s ease both}
@keyframes drop{from{height:0}to{height:100%}}
@keyframes hem{0%{top:-6px;opacity:1}92%{opacity:1}100%{top:calc(100% - 6px);opacity:0}}
@keyframes v1{0%,20%{opacity:1}30%,100%{opacity:0}}
@keyframes v2{0%,20%{opacity:0}30%,70%{opacity:1}80%,100%{opacity:0}}
@keyframes v3{0%,70%{opacity:0}80%,100%{opacity:1}}
@keyframes a1{0%,20%{background:#ECE8E1;color:#0E1220}30%,100%{background:transparent;color:#C3C6CF}}
@keyframes a2{0%,20%{background:transparent;color:#C3C6CF}30%,70%{background:#ECE8E1;color:#0E1220}80%,100%{background:transparent;color:#C3C6CF}}
@keyframes a3{0%,70%{background:transparent;color:#C3C6CF}80%,100%{background:#ECE8E1;color:#0E1220}}

.flash-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.facts3{grid-template-columns:repeat(3,minmax(0,1fr))}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px}
#faq details{border-bottom:1px solid rgba(236,232,225,.1);padding:14px 0}
#faq summary{cursor:pointer;font-size:16px;font-weight:700;line-height:1.7}
@media (max-height:900px){.phone{--s:.86}.stage-head{margin-bottom:24px}}
@media (max-height:800px){.phone{--s:.74}}
@media (max-height:700px){.phone{--s:.62}.stage-head{margin-bottom:14px}}
@media (max-height:620px){.phone{--s:.44}.stage-head{margin-bottom:10px}}
@media (max-width:960px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts3,.faq-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
.demo-grid{grid-template-columns:minmax(0,1fr);gap:14px;justify-items:center}
.phone-col{order:1}.note-l{order:2}.note-r{display:none !important}
.note-l{justify-content:center !important;justify-self:center !important}
.card{padding:12px 16px}
.card p{font-size:14px;margin-top:4px}
.stage-head h2{font-size:22px !important}
.cap{display:none}
.flash-grid{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr);gap:28px}.ind{padding:0 14px}}
@media (prefers-reduced-motion:reduce){.rise{animation:none}}