@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700;900&display=swap');
:root{--ink:#070a0e;--paper:#fff;--soft:#f4f7f8;--cyan:#00d7ee;--cyan-text:#007b8a;--line:#d7e0e4;--muted:#58646b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Avenir Next,Avenir,Helvetica Neue,'Noto Sans JP',sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
.srOnly{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #006b78;outline-offset:4px}
.mobileNav{display:none}
body>header{height:84px;padding:0 4vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative;z-index:20;background:#fff;border-bottom:2px solid var(--cyan)}
.brand img{width:155px}
.studio{justify-self:end;font-weight:900;letter-spacing:-.04em}
body>header nav,footer nav{display:flex;gap:26px;font-size:10px;font-weight:800;letter-spacing:.14em}
.hero{height:calc(100svh - 84px);min-height:690px;position:relative;overflow:hidden}
.hero>picture{display:block;width:100%;height:100%}
.hero>picture img{height:100%;object-fit:cover}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,13,.88),rgba(3,8,13,.42) 52%,rgba(3,8,13,.08))}
.hero article{position:absolute;left:7vw;top:50%;max-width:760px;transform:translateY(-46%);color:#fff}
.hero article>p,.intro>p,.chapters>header>p,.features>div>p,.product>p{color:var(--cyan-text);font-size:10px;font-weight:900;letter-spacing:.2em}
.fanclub>div>p{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.2em}
.hero h1{margin:22px 0 26px;font-size:clamp(64px,9vw,132px);line-height:.77;letter-spacing:-.075em}
.hero h1 small,.hero h1 span{display:block;font-size:1em;font-weight:900}
.hero h1 span{font-size:.62em}
.hero h2{font-size:clamp(20px,2.2vw,32px);line-height:1.65}
.hero article>div{display:flex;gap:12px;margin-top:30px}
.hero article a,.fanclub>a,.product>a{min-width:170px;padding:16px 22px;border:1px solid #fff;background:#fff;color:#080b0e;text-align:center;font-size:11px;font-weight:800}
.hero article .primary,.fanclub>a,.product>a{background:var(--cyan);border-color:var(--cyan)}
.hero>i{position:absolute;right:4vw;bottom:28px;background:#fff;padding:10px 14px;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.2em}
.intro,.chapters,.features,.fanclub,.product,.download{padding:130px 7vw}
.releaseNotice{display:grid;grid-template-columns:180px 1.2fr 1fr auto;gap:26px;align-items:center;padding:34px 7vw;background:#071019;color:#fff;border-top:4px solid var(--cyan)}
.releaseNotice p,.download header>p:first-child{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.2em}
.releaseNotice h2{margin:0;font-size:25px}
.releaseNotice span{color:#c4d0d5;font-size:12px;line-height:1.8}
.releaseNotice a{padding:13px 18px;background:var(--cyan);color:#071019;font-size:10px;font-weight:900;white-space:nowrap}
.intro{display:grid;grid-template-columns:180px 1fr;background:#fff}
.intro h2,.chapters h2,.features h2,.fanclub h2{font-size:clamp(42px,5.4vw,78px);line-height:1.28;letter-spacing:-.055em;margin:0 0 34px;white-space:nowrap}
.intro>div>p{max-width:760px;color:var(--muted);line-height:2}
.intro blockquote{margin:48px 0 0;padding-left:24px;border-left:4px solid var(--cyan);font-size:clamp(25px,3vw,42px);font-weight:800}
.chapters{background:var(--soft)}
.chapters>header{display:grid;grid-template-columns:180px 1fr}
.chapterGrid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:60px}
.chapterGrid.single{grid-template-columns:minmax(0,760px);justify-content:center}
.chapterGrid a{position:relative;background:#fff;border:1px solid var(--line);padding:18px 18px 28px;overflow:hidden}
.chapterGrid a:after{content:'';position:absolute;right:-1px;top:-1px;width:58px;height:22px;border-top:3px solid var(--cyan);border-right:3px solid var(--cyan);clip-path:polygon(28% 0,100% 0,100% 100%,48% 100%)}
.chapterGrid img{height:340px;object-fit:cover}
.chapterGrid span{display:block;margin-top:20px;color:#009aae;font-size:9px;font-weight:900;letter-spacing:.16em}
.chapterGrid h3{margin:8px 0;font-size:38px;letter-spacing:-.04em}
.chapterGrid p{color:var(--muted);font-size:12px}
.features{display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;background:#fff}
.features ol{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.features li{display:grid;grid-template-columns:45px 190px 1fr;gap:15px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.features li>b{color:#00aabd}
.features h3{font-size:18px}
.features li p{color:var(--muted);font-size:12px;line-height:1.8}
.download{background:#071019;color:#fff}
.download>header{display:grid;grid-template-columns:180px 1fr 1fr;gap:30px;align-items:start}
.download h2{margin:0;font-size:clamp(42px,5.4vw,78px);line-height:1.2;letter-spacing:-.055em;white-space:nowrap}
.download header>p:last-child{color:#b9c5ca;line-height:2}
.storeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:62px}
.storeGrid article{padding:34px;background:#0e1b25;border:1px solid #2a3b46;border-top:3px solid var(--cyan)}
.storeGrid b{color:var(--cyan);font-size:10px;letter-spacing:.16em}
.storeGrid h3{margin:16px 0 8px;font-size:30px}
.storeGrid p{color:#b9c5ca}
.storeGrid span{display:block;margin-top:30px;padding:13px;border:1px solid #566772;color:#d7e1e5;text-align:center;font-size:10px;font-weight:900;letter-spacing:.12em}
.downloadNote{margin:30px 0 0;color:#b9c5ca;font-size:11px;text-align:center}
.fanclub{display:flex;justify-content:space-between;align-items:end;gap:40px;background:#0b1116;color:#fff;border-top:4px solid var(--cyan)}
.fanclub>div{max-width:760px}
.fanclub>div>p:last-child{color:#b9c1c5;line-height:2}
.product{text-align:center;background:#fff}
.product h2{font-size:clamp(48px,7vw,100px);letter-spacing:-.06em}
.product h2 i{color:var(--cyan);font-style:normal}
.product dl{max-width:800px;margin:55px auto;border-top:1px solid var(--line)}
.product dl div{display:grid;grid-template-columns:170px 1fr;text-align:left;padding:17px 0;border-bottom:1px solid var(--line);font-size:13px}
.product dt{color:var(--muted);font-weight:700}
.product dd{margin:0;font-weight:700}
.productActions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:25px}
.productActions a{display:inline-block;min-width:190px;padding:16px 22px;background:var(--cyan);border:1px solid var(--cyan);color:#080b0e;text-align:center;font-size:11px;font-weight:800}
.productActions a:last-child{background:#fff;border-color:var(--ink)}
footer{padding:38px 5vw;display:flex;align-items:center;justify-content:space-between;border-top:2px solid var(--cyan);color:var(--muted);font-size:9px}
footer .brand img{width:140px}
.subPage{background:var(--soft)}
.supportMain{padding:100px 7vw 130px}
.supportMain>header{max-width:880px;margin-bottom:70px}
.supportMain>header>p:first-child{color:var(--cyan-text);font-size:10px;font-weight:900;letter-spacing:.2em}
.supportMain h1{margin:18px 0 24px;font-size:clamp(54px,8vw,110px);line-height:1.05;letter-spacing:-.065em}
.supportMain>header>p:last-child{max-width:700px;color:var(--muted);line-height:2}
.supportContact,.faqList,.updateList{max-width:980px;margin:0 auto 46px;padding:44px;background:#fff;border-top:3px solid var(--cyan)}
.supportContact h2,.faqList>h2{margin-top:0;font-size:28px}
.supportContact p{color:var(--muted);line-height:2}
.supportContact a{display:inline-block;margin-top:18px;padding:15px 24px;background:var(--cyan);font-size:11px;font-weight:900}
.faqList details{border-top:1px solid var(--line)}
.faqList details:last-child{border-bottom:1px solid var(--line)}
.faqList summary{cursor:pointer;padding:22px 0;font-weight:800}
.faqList details p{padding:0 0 22px;margin:0;color:var(--muted);line-height:1.9}
.updateList article{display:grid;grid-template-columns:150px 1fr;gap:30px}
.updateList time{color:var(--cyan-text);font-size:11px;font-weight:900}
.updateList h2{margin-top:0}
.updateList p{color:var(--muted);line-height:2}
@media(max-width:850px){body>header{grid-template-columns:1fr auto auto;gap:18px}
body>header>nav{display:none}
.mobileNav{display:block;position:relative;order:2}
.mobileNav summary{cursor:pointer;list-style:none;padding:9px 11px;border:1px solid var(--ink);font-size:9px;font-weight:900;letter-spacing:.12em}
.mobileNav summary::-webkit-details-marker{display:none}
.mobileNav nav{display:flex;position:absolute;z-index:50;right:0;top:calc(100% + 10px);min-width:190px;padding:14px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(7,10,14,.15);flex-direction:column;gap:0}
.mobileNav nav a{padding:12px;border-bottom:1px solid var(--line);font-size:10px;font-weight:800}
.studio{order:3}
.intro,.chapters>header,.features{grid-template-columns:1fr}
.chapterGrid{gap:20px}
.chapterGrid img{height:43vw}
.fanclub{align-items:flex-start;flex-direction:column}
.releaseNotice,.download>header{grid-template-columns:1fr}
.storeGrid{grid-template-columns:1fr}
}
@media(max-width:560px){body>header{height:68px;padding:0 4vw;gap:10px}
.brand img{width:110px}
.studio{font-size:12px}
.hero{height:auto;min-height:0;background:#07101b}
.hero>picture,.hero>picture img{height:auto}
.hero>picture img{aspect-ratio:auto;object-fit:contain;object-position:center;background:#07101b}
.hero article{left:6vw;right:6vw}
.hero h1{font-size:17vw}
.intro h2,.chapters h2,.features h2,.fanclub h2,.download h2{white-space:normal}
.hero article>div{flex-direction:column}
.intro,.chapters,.features,.fanclub,.product,.download{padding:86px 6vw}
.chapterGrid{grid-template-columns:1fr}
.chapterGrid img{height:60vw}
.features li{grid-template-columns:35px 105px 1fr}
.product dl div{grid-template-columns:110px 1fr}
footer{flex-direction:column;align-items:flex-start;gap:18px}
.supportMain{padding:70px 6vw 90px}
.supportContact,.faqList,.updateList{padding:28px}
.updateList article{grid-template-columns:1fr}
}