:root { --ink:#f5f7ff; --muted:#bdc8e5; --navy:#071128; --deep:#020716; --gold:#ffd25c; --pink:#fd73d2; --cyan:#60dcff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#030817; font-family:"Noto Sans JP",sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1; opacity:.5; pointer-events:none; background:radial-gradient(circle at 75% 0,rgba(115,45,180,.3),transparent 28rem),radial-gradient(circle at 10% 43%,rgba(15,101,190,.25),transparent 29rem),#030817; }
.section-shell { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }.site-header { position:absolute; z-index:10; inset:0 0 auto; width:min(1240px,100%); margin:auto; padding:25px 30px; display:flex; align-items:center; justify-content:space-between; }.brand { color:#fff; font:500 20px/1 "DM Serif Display",serif; letter-spacing:.11em; text-decoration:none; }.brand span { color:var(--cyan); }.header-cta,.text-button { color:#fff3bd; font-size:13px; font-weight:700; text-decoration:none; }.header-cta { border:1px solid rgba(255,255,255,.38); border-radius:99px; padding:10px 16px; background:rgba(4,8,25,.34); backdrop-filter:blur(8px); }
.hero { min-height:790px; position:relative; display:flex; align-items:center; isolation:isolate; overflow:hidden; background:linear-gradient(90deg,#030817 0%,#07132b 45%,#160b36 100%); }.hero-character { position:absolute; z-index:-2; inset:0 0 0 auto; width:min(72vw,900px); height:100%; object-fit:cover; object-position:right 38%; mix-blend-mode:screen; opacity:.98; }.hero-vignette { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#030817 0%,rgba(3,8,23,.95) 25%,rgba(3,8,23,.47) 58%,rgba(3,8,23,.12)),linear-gradient(0deg,#030817 0%,transparent 25%); }.hero-content { padding-top:116px; padding-bottom:82px; }.official-logo { display:block; width:min(435px,72vw); height:auto; margin:0 0 10px -8px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)); }.hero-kicker { color:var(--gold); font-weight:900; font-size:16px; letter-spacing:.13em; margin:0 0 16px; }.eyebrow { color:var(--cyan); font-size:11px; font-weight:900; letter-spacing:.18em; margin:0 0 15px; } h1,h2 { margin:0; font-family:"Noto Serif JP",serif; letter-spacing:.035em; } h1 { font-size:clamp(39px,5.2vw,71px); line-height:1.28; } h1 em,h2 em { font-style:normal; color:#fff0a3; } .hero-lead { color:var(--muted); font-size:16px; line-height:2; margin:24px 0; }.hero-actions { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }.store-button { display:inline-flex; align-items:center; justify-content:center; width:176px; height:53px; color:#fff; text-decoration:none; line-height:0; }.store-button img { display:block; width:auto; height:53px; }.text-button { border-bottom:1px solid var(--gold); padding-bottom:5px; }.text-button span { margin-left:5px; }.pending-note { color:rgba(190,202,230,.66); font-size:11px; margin:14px 0 0; }
.intro { padding:130px 0 112px; text-align:center; }.intro h2,.rhythm h2,.memory h2,.modes h2,.final-cta h2 { font-size:clamp(29px,3.5vw,48px); line-height:1.48; }.intro>p:last-child,.rhythm-copy>p:not(.eyebrow),.memory-copy>p:not(.eyebrow),.modes-copy>p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:2; margin:22px 0 0; }
.rhythm { min-height:560px; display:grid; grid-template-columns:.86fr 1.14fr; align-items:center; gap:4%; padding:48px 0 105px; }.rhythm-copy { position:relative; z-index:1; }.mini-points { display:flex; gap:15px; list-style:none; padding:0; margin:29px 0 0; }.mini-points li { display:grid; gap:1px; }.mini-points b { color:var(--gold); font-size:30px; line-height:1; }.mini-points span { color:var(--muted); font-size:10px; font-weight:700; }.rhythm-art { position:relative; width:100%; }.rhythm-art::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,#030817 0%,transparent 18%),linear-gradient(0deg,#030817 0%,transparent 13%); pointer-events:none; }.rhythm-art img { width:100%; height:auto; display:block; }
.memory { min-height:660px; position:relative; display:flex; align-items:center; overflow:hidden; background:linear-gradient(110deg,#180632,#0a1236 55%,#041024); }.memory-art { position:absolute; inset:0 48% 0 0; }.memory-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 34%,#0a1131 100%),linear-gradient(0deg,rgba(3,8,23,.6),transparent 37%); }.memory-art img { width:100%; height:100%; object-fit:cover; object-position:center; }.memory-content { display:flex; justify-content:flex-end; }.memory-copy { width:45%; padding:85px 1vw 85px 0; }.memory-copy .text-button { display:inline-block; margin-top:27px; }
.numbers { padding:130px 0; text-align:center; }.numbers h2 { font-size:clamp(27px,3vw,40px); font-family:"Noto Serif JP",serif; }.number-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:43px; background:rgba(147,190,255,.2); }.number-grid article { min-height:134px; display:flex; flex-direction:column; justify-content:center; background:#071128; }.number-grid strong { color:var(--gold); font-size:clamp(38px,5vw,62px); font-family:"DM Serif Display",serif; line-height:1; }.number-grid span { margin-top:9px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.04em; }
.modes { display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:9%; padding-bottom:145px; }.modes-art { width:100%; }.modes-art img { width:100%; height:auto; display:block; }.mode-note { color:var(--pink)!important; font-weight:900; font-size:12px!important; letter-spacing:.08em; }
.final-cta { position:relative; min-height:600px; display:grid; place-items:center; overflow:hidden; text-align:center; isolation:isolate; }.final-cta>img { position:absolute; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 64%; opacity:.66; }.final-cta::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#030817,rgba(3,8,23,.27) 56%,#030817); }.final-content { padding:70px 24px; }.final-cta .store-button { margin-top:28px; } footer { width:min(1160px,calc(100% - 48px)); margin:auto; padding:30px 0 40px; border-top:1px solid rgba(177,208,255,.15); display:flex; justify-content:space-between; align-items:center; color:rgba(190,202,230,.7); font-size:11px; } footer .brand { font-size:16px; }.footer-links { display:flex; align-items:center; gap:18px; }.footer-links a { color:rgba(210,221,243,.76); text-decoration:none; transition:color .2s; }.footer-links a:hover { color:var(--gold); }.footer-links p { margin:0; }
@media (max-width:800px) { .site-header { padding:20px 22px; }.site-header .header-cta { display:none; }.section-shell { width:min(100% - 32px,620px); }.hero { min-height:760px; align-items:flex-end; }.hero-character { width:100%; height:100%; object-position:66% center; opacity:.72; }.hero-vignette { background:linear-gradient(0deg,#030817 7%,rgba(3,8,23,.8) 36%,rgba(3,8,23,.18) 83%),linear-gradient(90deg,rgba(3,8,23,.55),transparent); }.hero-content { padding:210px 0 62px; }.official-logo { width:min(350px,86vw); }.hero-kicker { font-size:13px; }.hero-lead { font-size:14px; }.hero-actions { flex-direction:column; align-items:flex-start; gap:16px; }.intro { padding:85px 0 70px; }.rhythm { grid-template-columns:1fr; gap:18px; padding-bottom:72px; }.rhythm-art { margin:0 -8px; }.memory { min-height:640px; align-items:flex-end; }.memory-art { inset:0; }.memory-art::after { background:linear-gradient(0deg,#0a1131 4%,rgba(10,17,49,.84) 37%,transparent 75%); }.memory-content { justify-content:flex-start; }.memory-copy { width:100%; padding:230px 4px 62px; }.numbers { padding:85px 0; }.number-grid { grid-template-columns:repeat(2,1fr); }.number-grid article { min-height:118px; }.modes { grid-template-columns:1fr; gap:23px; padding-bottom:95px; }.modes-art { margin:0 -8px; }.final-cta { min-height:520px; } footer { width:min(100% - 32px,620px); flex-direction:column; align-items:flex-start; gap:17px; }.footer-links { flex-wrap:wrap; gap:12px 17px; } }
@media (max-width:420px) { .brand { font-size:18px; }.mini-points { gap:12px; }.mini-points b { font-size:26px; }.number-grid strong { font-size:43px; } }