:root{
  --bg:#040b17; --bg2:#081731; --bg3:#0b2348; --text:#eef5ff; --muted:#9fb2d4; --line:rgba(196,219,255,.16);
  --gold:#d6b476; --gold2:#f3dfb0; --blue:#5bb8ff; --purple:#8272ff; --shadow:0 28px 80px rgba(0,0,0,.42); --radius:28px; --max:1400px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--text);background: radial-gradient(circle at 15% -10%, rgba(55,110,230,.24) 0, transparent 36%), radial-gradient(circle at 88% 0, rgba(141,48,108,.24) 0, transparent 38%), linear-gradient(180deg, #050d1c 0%, #081328 35%, #050c18 100%);font-family:-apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;line-height:1.75;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.08) 1px, transparent 1px), radial-gradient(circle at 70% 35%, rgba(255,255,255,.05) 1.2px, transparent 1.2px), radial-gradient(circle at 85% 15%, rgba(255,255,255,.05) 1px, transparent 1px);background-size:180px 180px, 240px 240px, 320px 320px;opacity:.22;mix-blend-mode:screen;z-index:-2}
a{text-decoration:none;color:inherit} img{display:block;max-width:100%}.container{width:min(calc(100% - 28px), var(--max));margin-inline:auto}
.serif{font-family: 'Times New Roman','Hiragino Mincho ProN','Yu Mincho',serif;letter-spacing:.06em}
.site-header{position:fixed;inset:0 0 auto 0;z-index:80;padding:18px 0;background:linear-gradient(180deg, rgba(2,8,18,.82), rgba(2,8,18,.35), rgba(2,8,18,0));backdrop-filter: blur(12px)}
.site-header.scrolled{background:rgba(4,11,23,.75);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.08em}.brand img{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.nav-links{display:flex;gap:26px;flex-wrap:wrap;align-items:center}.nav-links a{font-size:.9rem;color:#d6e6ffcc;letter-spacing:.12em;text-transform:uppercase}.nav-links a:hover{color:#fff}
.header-icons{display:flex;gap:14px;color:#d8e6ff}.header-icons span{width:34px;height:34px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.04)}
.hero{position:relative;min-height:100vh;padding-top:88px;display:grid;align-items:end;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,7,16,.1), rgba(2,7,16,.5) 60%, rgba(2,7,16,.92) 100%), url('assets/story_kv.png') center top/cover no-repeat;transform:scale(1.03)}
.hero-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(29,113,219,.20), transparent 38%, transparent 62%, rgba(84,24,62,.22));mix-blend-mode:screen}
.hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(180deg, rgba(4,10,22,0), rgba(4,10,22,.95));}
.hero-inner{position:relative;z-index:1;padding-bottom:40px}
.hero-copy{max-width:860px;margin-inline:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:.65rem;padding:10px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(5,12,25,.44);font-size:.86rem;color:#d8e7ff;backdrop-filter: blur(10px)}
.hero-title{font-size:clamp(3.3rem,8vw,7rem);line-height:1.04;margin:18px 0 12px;text-shadow:0 16px 50px rgba(0,0,0,.45)}
.hero-sub{font-size:clamp(1rem,1.8vw,1.25rem);color:#ebf2ff;max-width:42em;margin:0 auto 18px}
.hero-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}.btn{padding:14px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));backdrop-filter: blur(12px);box-shadow:var(--shadow);font-weight:700;letter-spacing:.06em}.btn.primary{background:linear-gradient(180deg,#3b4477,#22183e);border-color:rgba(255,255,255,.1)}.btn.alt{background:linear-gradient(180deg,#0d6a7d,#083950)}
.scroll-hint{display:flex;justify-content:center;margin-top:24px;color:#bdd0f2;font-size:.88rem;letter-spacing:.1em}
.main{position:relative}
.section{padding:84px 0;position:relative}.section::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(var(--max),calc(100% - 40px));height:1px;background:linear-gradient(90deg, transparent, rgba(238,245,255,.15), transparent)}
.frame{position:relative;border:1px solid rgba(214,180,118,.3);border-radius:30px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));box-shadow:var(--shadow);overflow:hidden}
.frame::before,.frame::after{content:"";position:absolute;width:34px;height:34px;border:1px solid rgba(214,180,118,.45);opacity:.65}
.frame::before{left:12px;top:12px;border-right:none;border-bottom:none}.frame::after{right:12px;bottom:12px;border-left:none;border-top:none}
.heading{text-align:center;margin-bottom:28px}.heading .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold2);font-size:.86rem;letter-spacing:.18em;text-transform:uppercase}.heading .eyebrow::before,.heading .eyebrow::after{content:"";width:56px;height:1px;background:linear-gradient(90deg, transparent, rgba(214,180,118,.8), transparent)}
.heading h2{font-size:clamp(2rem,4vw,3.5rem);margin:12px 0 0}.heading p{margin:10px auto 0;max-width:56ch;color:var(--muted)}
.story-block{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;padding:26px}.story-text{padding:16px 8px 8px 6px}.story-text h3{font-size:1.65rem;margin:.2rem 0 1rem}.story-text p{margin:0 0 1rem;color:#d7e4f6}.story-points{display:grid;gap:14px;margin-top:20px}.story-point{display:flex;gap:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}.story-point .icon{font-size:1.2rem;color:var(--gold2)}.story-visual{position:relative;min-height:440px}.story-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.story-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(4,11,23,0), rgba(4,11,23,.12), rgba(4,11,23,.55));}
.world-grid{display:grid;grid-template-columns:1fr 1.08fr .8fr;gap:20px;align-items:stretch}.world-aside,.world-main,.world-side{display:grid;gap:20px}
.card{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}.card.pad{padding:22px}.card img{width:100%;height:100%;object-fit:cover}.world-copy h3{margin:.2rem 0 1rem;font-size:1.6rem}.world-copy p{color:var(--muted);margin:0 0 1rem}.small-btn{display:inline-flex;padding:10px 16px;border-radius:999px;border:1px solid rgba(214,180,118,.45);color:var(--gold2);background:rgba(255,255,255,.03)}
.map-main{min-height:560px}.map-main .label{position:absolute;padding:9px 13px;border-radius:999px;background:rgba(3,8,18,.68);border:1px solid rgba(255,255,255,.15);backdrop-filter: blur(10px);font-size:.86rem;box-shadow:0 12px 28px rgba(0,0,0,.35)}
.map-main .l1{left:16%;top:10%}.map-main .l2{left:41%;top:17%}.map-main .l3{left:70%;top:26%}.map-main .l4{left:58%;top:66%}.map-main .l5{left:12%;top:72%}
.mini-shot{height:150px}.mini-shot .caption,.side-shot .caption{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 14px;border-radius:16px;background:rgba(3,8,18,.68);border:1px solid rgba(255,255,255,.12);font-size:.92rem}.side-shot{height:270px}
.characters-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.character-panel{position:relative;border-radius:28px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow)}
.character-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 48%, rgba(5,10,20,.92) 100%)}
.character-panel img{width:100%;height:100%;object-fit:cover;aspect-ratio:0.76/1}.character-panel .meta{position:absolute;left:18px;right:18px;bottom:16px;z-index:1}.character-panel .jp{font-size:1.62rem;font-weight:700}.character-panel .en{font-size:.84rem;letter-spacing:.14em;color:#dbe7fb;opacity:.82}.character-panel .desc{font-size:.88rem;color:#d3dff3;margin-top:8px;line-height:1.55}
.special{padding-bottom:92px}.special-inner{display:grid;grid-template-columns:1fr .9fr;gap:20px;align-items:stretch}.special-visual{position:relative;min-height:360px;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#06142a,#030812)}.special-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(4,11,23,.12), rgba(4,11,23,.7)), url('assets/icon_world.png') center/cover no-repeat;opacity:.8}.special-visual::after{content:"";position:absolute;inset:0;background:url('assets/mystery-girl.svg') 76% 54%/44% auto no-repeat, radial-gradient(circle at 76% 44%, rgba(154,195,255,.24), transparent 18%), linear-gradient(180deg, rgba(5,10,20,.05), rgba(5,10,20,.3), rgba(5,10,20,.75));mix-blend-mode:screen}
.special-copy{padding:34px 30px}.special-copy h3{font-size:clamp(1.8rem,4vw,3rem);line-height:1.25;margin:.2rem 0 1rem}.special-copy .lead{font-size:1.05rem;color:#d8e5f8}.glow{background:linear-gradient(90deg, #caa6ff, #c3b6ff, #ebecff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 26px rgba(182,140,255,.2)}
.cta-band{margin-top:22px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:18px 20px;border-radius:22px;border:1px solid rgba(214,180,118,.32);background:linear-gradient(90deg, rgba(35,49,98,.68), rgba(77,48,111,.68))}.cta-band b{font-size:1.16rem}.social{display:flex;gap:10px;align-items:center}.social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
.footer{padding:30px 0 50px;border-top:1px solid rgba(255,255,255,.08);color:var(--muted)}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer nav{display:flex;gap:18px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s ease}.reveal.show{opacity:1;transform:none}
@media (max-width: 1200px){.world-grid{grid-template-columns:1fr}.characters-strip{grid-template-columns:repeat(2,1fr)}.special-inner{grid-template-columns:1fr}.story-block{grid-template-columns:1fr}}
@media (max-width: 760px){.site-header{padding:12px 0}.nav{align-items:flex-start;flex-direction:column}.nav-links{gap:16px}.header-icons{display:none}.hero{min-height:92vh}.hero-title{font-size:2.7rem}.characters-strip{grid-template-columns:1fr}.story-visual{min-height:300px}.map-main{min-height:420px}.special-visual{min-height:320px}.cta-band{grid-template-columns:1fr}.section{padding:68px 0}}