@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Noto+Sans+JP:wght@100;200;300;400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;background:#060610}
html.no-smooth{scroll-behavior:auto}
:root{--c:#00f0ff;--m:#ff00aa;--g:#ffd700;--bg:#060610}
body{background:#060610;color:#fff;font-family:'Noto Sans JP',sans-serif;overflow-x:hidden;min-height:100vh}
body.no-motion *,body.no-motion *::before,body.no-motion *::after{animation:none!important;transition:none!important}
body.no-motion .ov,body.no-motion canvas{display:none!important}
body.no-motion nav{backdrop-filter:none!important;background:rgba(6,6,16,0.92)!important}
body.no-motion *{text-shadow:none!important;box-shadow:none!important;filter:none!important}

canvas#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;background:#060610}
.ov{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}
.ov.v{background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,0.6) 100%);z-index:1}
.ov.s{background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,0.005) 2px,rgba(0,240,255,0.005) 4px);z-index:2}

nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:0 50px;height:60px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(6,6,16,0.95),transparent);backdrop-filter:blur(6px)}
body.perf-mid nav,body.perf-low nav{backdrop-filter:none;background:rgba(6,6,16,0.9)}
.nav-logo{font-family:'Orbitron';font-weight:700;font-size:15px;letter-spacing:5px}
.lα{font-size:1.15em;vertical-align:baseline;line-height:0}
.tα{font-size:1.15em;vertical-align:baseline;line-height:0}
.nav-links{display:flex;gap:28px}
.nav-links a{font-family:'Rajdhani';font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.4);text-decoration:none;transition:color .3s;cursor:pointer}
.nav-links a:hover{color:#fff}
.nav-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:42px;height:42px;border:1px solid rgba(0,240,255,0.35);background:rgba(6,6,16,0.55);cursor:pointer;transition:border-color .3s,background .3s}
.nav-toggle span{display:block;width:18px;height:1px;background:rgba(255,255,255,0.8);transition:transform .25s,opacity .25s}
nav.menu-open .nav-toggle{border-color:rgba(0,240,255,0.75);background:rgba(6,6,16,0.85)}
nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

[data-r]{opacity:0;transform:translateY(50px);transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1)}
[data-r].vis{opacity:1;transform:translateY(0)}
[data-r="1"]{transition-delay:.15s}[data-r="2"]{transition-delay:.3s}[data-r="3"]{transition-delay:.45s}[data-r="4"]{transition-delay:.6s}[data-r="5"]{transition-delay:.75s}
.stag{font-family:'Rajdhani';font-size:12px;letter-spacing:8px;text-transform:uppercase;color:rgba(0,240,255,0.6);margin-bottom:10px}
.snum{font-family:'Orbitron';font-size:10px;letter-spacing:4px;color:rgba(255,255,255,0.2);margin-bottom:30px}

.hero{position:relative;z-index:10;width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#060610}
canvas#hc{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}
.hcon{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center}
.hsym{position:relative;width:150px;height:150px;margin-bottom:25px}
.hsym .rn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid}
.r1{width:150px;height:150px;border-color:rgba(0,240,255,0.15)!important;animation:sp 25s linear infinite}
.r2{width:110px;height:110px;border-color:rgba(255,0,170,0.12)!important;animation:sp 18s linear infinite reverse}
.r3{width:70px;height:70px;border-color:rgba(255,215,0,0.1)!important;animation:sp 12s linear infinite}
.r4{width:30px;height:30px;border-color:rgba(255,255,255,0.15)!important;animation:sp 8s linear infinite reverse}
@keyframes sp{to{transform:translate(-50%,-50%) rotate(360deg)}}
.r1::after{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px;background:var(--c);border-radius:50%;box-shadow:0 0 14px var(--c)}
.r2::after{content:'';position:absolute;bottom:-2px;right:18%;width:4px;height:4px;background:var(--m);border-radius:50%;box-shadow:0 0 10px var(--m)}
.hcore{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:7px;height:7px;background:#fff;border-radius:50%;box-shadow:0 0 20px var(--c),0 0 40px rgba(0,240,255,0.3);animation:cp 3s ease-in-out infinite}
@keyframes cp{0%,100%{box-shadow:0 0 20px var(--c),0 0 40px rgba(0,240,255,0.3)}50%{box-shadow:0 0 30px var(--c),0 0 60px rgba(0,240,255,0.5)}}
.htitle{font-family:'Orbitron';font-weight:900;font-size:clamp(54px,9vw,140px);letter-spacing:.15em;line-height:1;background:linear-gradient(180deg,#fff,#d0e8ff 30%,var(--c) 65%,rgba(0,240,255,0.5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 40px rgba(0,240,255,0.15));text-align:center}
.hsep{width:180px;height:1px;margin:16px auto;background:linear-gradient(90deg,transparent,var(--c),var(--m),transparent)}
.hsub-jp{font-family:'Orbitron';font-weight:500;font-size:clamp(18px,3.5vw,30px);letter-spacing:.3em;color:rgba(255,255,255,0.7);text-align:center;margin-top:4px}
.hsub-en{font-family:'Rajdhani';font-weight:400;font-size:clamp(10px,1.4vw,14px);letter-spacing:.5em;color:rgba(255,255,255,0.55);text-align:center;margin-top:12px}
.hscr{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;animation:hb 3s ease-in-out infinite;z-index:5}
.hscr span{font-family:'Rajdhani';font-size:9px;letter-spacing:5px;text-transform:uppercase;color:rgba(255,255,255,0.25)}
.hscr i{display:block;width:1px;height:28px;background:linear-gradient(180deg,rgba(0,240,255,0.4),transparent)}
@keyframes hb{0%,100%{opacity:.5;transform:translateX(-50%)}50%{opacity:1;transform:translateX(-50%) translateY(5px)}}
.hc{position:absolute;width:35px;height:35px;z-index:5}
.hc::before,.hc::after{content:'';position:absolute;background:rgba(0,240,255,0.2)}
.hc.tl{top:70px;left:4%}.hc.tl::before{top:0;left:0;width:18px;height:1px}.hc.tl::after{top:0;left:0;width:1px;height:18px}
.hc.tr{top:70px;right:4%}.hc.tr::before{top:0;right:0;width:18px;height:1px}.hc.tr::after{top:0;right:0;width:1px;height:18px}
.hc.bl{bottom:70px;left:4%}.hc.bl::before{bottom:0;left:0;width:18px;height:1px}.hc.bl::after{bottom:0;left:0;width:1px;height:18px}
.hc.br{bottom:70px;right:4%}.hc.br::before{bottom:0;right:0;width:18px;height:1px}.hc.br::after{bottom:0;right:0;width:1px;height:18px}

.sec-story{position:relative;z-index:10;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 8%;background:#060610}
canvas.scv{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.si{max-width:700px;position:relative;z-index:2;text-align:center}
.sq{font-weight:200;font-size:clamp(15px,2.8vw,22px);line-height:2.4;letter-spacing:.08em;color:rgba(255,255,255,0.55);border:none;padding:0}
.sq em{font-style:normal;color:rgba(0,240,255,0.7);font-weight:300}
.sb{display:none}

.sec-world{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 5%;background:#060610}
.world-intro{font-weight:300;font-size:clamp(13px,1.8vw,16px);line-height:2.4;letter-spacing:.06em;color:rgba(255,255,255,0.75);text-align:center;margin-bottom:50px;max-width:600px;text-shadow:0 0 20px rgba(6,6,16,0.9)}
.weq{font-family:'Orbitron';font-weight:300;font-size:clamp(44px,8vw,110px);letter-spacing:.08em;margin-bottom:60px;text-align:center;position:relative;z-index:2}
.weq .z{color:rgba(255,255,255,0.6)}.weq .eq{color:rgba(255,255,255,0.12)}.weq .d{color:var(--c)}.weq .pl{color:rgba(255,255,255,0.1);margin:0 8px}.weq .id{color:var(--m)}
.wcs{display:flex;gap:4px;width:100%;max-width:900px;position:relative;z-index:2}
.wc{flex:1;padding:45px 30px;background:rgba(255,255,255,0.02);border-top:2px solid transparent;transition:all .5s}
.wc:hover{background:rgba(255,255,255,0.05)}
.wc:first-child{border-top-color:rgba(0,240,255,0.2)}.wc:last-child{border-top-color:rgba(255,0,170,0.2)}
.wc .wi{font-family:'Orbitron';font-size:40px;font-weight:800;margin-bottom:20px}
.wc:first-child .wi{color:rgba(0,240,255,0.4)}.wc:last-child .wi{color:rgba(255,0,170,0.4)}
.wc .wt{font-family:'Orbitron';font-size:14px;letter-spacing:4px;color:rgba(255,255,255,0.8);margin-bottom:16px}
.wc .wb{font-weight:300;font-size:14px;line-height:2.1;color:rgba(255,255,255,0.65);text-shadow:0 0 20px rgba(6,6,16,0.9)}
.wcon{width:60px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wcon div{width:100%;height:1px;background:linear-gradient(90deg,var(--c),var(--m));animation:wcp 2s ease-in-out infinite}
@keyframes wcp{0%,100%{opacity:.15}50%{opacity:.5}}

.sec-phases{position:relative;z-index:10;padding:100px 0;background:#060610}
.ph{text-align:center;padding:0 5% 60px}
.ph h2{font-family:'Orbitron';font-weight:700;font-size:clamp(22px,3.2vw,38px);letter-spacing:.12em;color:rgba(255,255,255,0.7)}
.pg{display:grid;grid-template-columns:repeat(4,1fr);min-height:75vh}
.pp{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 28px;border-right:1px solid rgba(255,255,255,0.02);transition:all .6s;cursor:pointer;outline:none}
.pp:focus-visible{box-shadow:inset 0 0 0 1px rgba(0,240,255,0.2)}
.pp:last-child{border-right:none}.pp:hover{background:rgba(255,255,255,0.03)}
.pp::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;opacity:.04;transition:opacity .5s}
.pp:hover::before{opacity:.12}
.pp:nth-child(1)::before{background:linear-gradient(180deg,transparent 20%,var(--c))}
.pp:nth-child(2)::before{background:linear-gradient(180deg,transparent 20%,var(--m))}
.pp:nth-child(3)::before{background:linear-gradient(180deg,transparent 20%,var(--g))}
.pp:nth-child(4)::before{background:linear-gradient(180deg,transparent 20%,#fff)}
.pp .pbg{position:absolute;top:12%;left:50%;transform:translateX(-50%) translateY(8px);font-family:'Orbitron';font-weight:900;font-size:clamp(100px,14vw,200px);line-height:1;opacity:.06;pointer-events:none;transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1)}
.pp:hover .pbg,.pp:focus .pbg,.pp:focus-visible .pbg{opacity:.18;transform:translateX(-50%) translateY(-4px)}
.pp:nth-child(1) .pbg{color:var(--c)}.pp:nth-child(2) .pbg{color:var(--m)}.pp:nth-child(3) .pbg{color:var(--g)}.pp:nth-child(4) .pbg{color:#fff}
.pp .pn{font-family:'Rajdhani';font-size:12px;letter-spacing:4px;color:rgba(255,255,255,0.5);margin-bottom:12px;text-shadow:0 0 15px rgba(6,6,16,0.9)}
.pp .pj{font-weight:500;font-size:clamp(20px,2.5vw,28px);letter-spacing:3px;color:rgba(255,255,255,0.85);margin-bottom:6px;transition:color .5s;text-shadow:0 0 20px rgba(6,6,16,0.9)}.pp:hover .pj{color:rgba(255,255,255,1)}
.pp .pe{font-family:'Rajdhani';font-size:12px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:18px;text-shadow:0 0 15px rgba(6,6,16,0.9)}
.pp .pd{font-weight:300;font-size:14px;line-height:2;color:rgba(255,255,255,0.55);max-width:260px;transition:color .5s;text-shadow:0 0 20px rgba(6,6,16,0.9)}.pp:hover .pd{color:rgba(255,255,255,.75)}

.sec-homo{position:relative;z-index:10;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 5%;background:#060610;overflow:hidden}
.homo-inner{max-width:900px;width:100%;text-align:center;position:relative;z-index:2}
.homo-title{font-family:'Orbitron';font-weight:700;font-size:clamp(28px,5vw,50px);letter-spacing:.08em;color:rgba(255,255,255,0.8);margin-bottom:20px;text-shadow:0 0 20px rgba(6,6,16,0.9)}
.homo-jp{font-family:'Noto Sans JP';font-weight:200;font-size:clamp(14px,2vw,20px);letter-spacing:.1em;color:rgba(255,255,255,0.35);margin-left:8px}
.homo-desc{font-weight:200;font-size:clamp(13px,1.6vw,16px);line-height:2.4;letter-spacing:.06em;color:rgba(255,255,255,0.5);margin-bottom:50px;text-shadow:0 0 20px rgba(6,6,16,0.9)}
.homo-traits{display:flex;gap:3px;width:100%}
.homo-trait{flex:1;padding:35px 25px;background:rgba(255,255,255,0.02);border-top:1px solid rgba(0,240,255,0.1);text-align:center;transition:background .4s}
.homo-trait:hover{background:rgba(255,255,255,0.05)}
.ht-label{font-family:'Orbitron';font-size:clamp(11px,1.3vw,14px);letter-spacing:3px;color:rgba(0,240,255,0.6);margin-bottom:14px}
.ht-desc{font-weight:300;font-size:clamp(12px,1.3vw,14px);line-height:2;color:rgba(255,255,255,0.7);text-shadow:0 0 15px rgba(6,6,16,0.9)}
.homo-lineage{margin-top:50px;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.8vw,28px);flex-wrap:wrap}
.hl-item{text-align:center;font-family:'Rajdhani';font-size:clamp(18px,2.1vw,24px);letter-spacing:2px;color:rgba(255,255,255,0.55)}
.hl-item .hl-sub{display:block;font-size:clamp(13px,1.5vw,18px);color:rgba(255,255,255,0.35);margin-top:6px;letter-spacing:1px}
.hl-active{color:rgba(0,240,255,0.85)}
.hl-active .hl-sub{color:rgba(0,240,255,0.5)}
.hl-arrow{font-family:'Rajdhani';font-size:clamp(22px,2.8vw,28px);color:rgba(255,255,255,0.25)}
.hl-arrow-mob{display:none}

@media(max-width:640px){
  .homo-lineage{flex-direction:column;gap:16px;margin-top:60px}
  .hl-arrow-desk{display:none}
  .hl-arrow-mob{display:inline}
  .hl-item{font-size:clamp(22px,2.5vw,29px)}
  .hl-item .hl-sub{font-size:clamp(16px,1.8vw,22px);margin-top:8px}
  .hl-arrow{font-size:clamp(26px,3.4vw,34px)}
}

.sec-sys{position:relative;z-index:10;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 5%;background:#060610}
.syi{max-width:950px;width:100%}
.ss{display:flex;align-items:center;gap:25px;padding:30px 0;border-bottom:1px solid rgba(255,255,255,0.03);transition:all .4s;position:relative}
.ss:hover{padding-left:15px;border-bottom-color:rgba(0,240,255,0.08)}
.ss::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--c),transparent);transition:width .8s}
.ss:hover::after{width:100%}
.ss .n{font-family:'Orbitron';font-weight:800;font-size:clamp(30px,4.5vw,52px);color:rgba(0,240,255,0.15);min-width:90px;text-align:right;transition:color .4s}.ss:hover .n{color:rgba(0,240,255,.35)}
.ss .l{width:50px;height:1px;background:linear-gradient(90deg,rgba(0,240,255,0.3),transparent);flex-shrink:0}
.ss .t{font-weight:300;font-size:clamp(16px,2vw,21px);letter-spacing:.06em;color:rgba(255,255,255,0.7);transition:color .4s;text-shadow:0 0 20px rgba(6,6,16,0.9)}.ss:hover .t{color:rgba(255,255,255,.95)}
.send{margin-top:70px;text-align:center;font-weight:200;font-size:clamp(22px,4vw,42px);letter-spacing:.25em;color:rgba(255,255,255,0.4)}
.send em{font-style:normal;color:rgba(0,240,255,.7);font-weight:400}

.sec-meta{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 5%;background:#060610}
.mb{position:absolute;border-radius:50%;border:1px solid rgba(255,215,0,0.05);top:50%;left:50%;transform:translate(-50%,-50%)}
.mb1{width:200px;height:200px;animation:mbp 4s ease-in-out infinite}.mb2{width:350px;height:350px;animation:mbp 4s ease-in-out infinite .5s}.mb3{width:500px;height:500px;animation:mbp 4s ease-in-out infinite 1s}
@keyframes mbp{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.05)}}
.ml{font-family:'Rajdhani';font-size:12px;letter-spacing:8px;text-transform:uppercase;color:rgba(255,215,0,0.5);margin-bottom:25px;position:relative;z-index:2}
.mt{font-family:'Orbitron';font-weight:900;font-size:clamp(42px,9vw,130px);letter-spacing:.1em;text-align:center;background:linear-gradient(180deg,#fff,#ffe680 40%,var(--g) 70%,rgba(255,215,0,.4));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 50px rgba(255,215,0,.1));margin-bottom:30px;position:relative;z-index:2}
.md{font-weight:300;font-size:clamp(15px,2vw,19px);letter-spacing:.4em;text-align:center;color:rgba(255,255,255,.5);max-width:600px;line-height:2.2;position:relative;z-index:2;text-shadow:0 0 20px rgba(6,6,16,0.9)}

.meta-crit{text-align:center;position:relative;z-index:2;margin-top:60px}
.meta-crit-desc{font-weight:200;font-size:clamp(13px,1.6vw,16px);line-height:2.4;letter-spacing:.06em;color:rgba(255,255,255,0.6);margin-top:20px;text-shadow:0 0 20px rgba(6,6,16,0.9)}

footer{position:relative;z-index:10;padding:50px;border-top:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;align-items:center;gap:25px}
.ft-ibox-wrap{display:flex;justify-content:center;margin-bottom:15px}
.ft-ibox{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid rgba(0,240,255,0.3);font-family:'Orbitron';font-size:14px;letter-spacing:0;color:rgba(0,240,255,0.6);text-decoration:none;transition:all .3s}
.ft-ibox:hover{border-color:rgba(0,240,255,0.8);color:rgba(0,240,255,1);box-shadow:0 0 12px rgba(0,240,255,0.2)}
.ft-ibox-txt{width:auto;min-height:28px;padding:6px 12px;font-size:12px}
.ft-links{display:flex;align-items:center;justify-content:center;gap:20px}
.ft-sep{color:rgba(255,255,255,0.1);font-size:12px}
.ft-bottom{display:flex;gap:40px}
.ft-bottom span{font-family:'Rajdhani';font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.1);text-transform:uppercase}

.highlight-cyan{color:rgba(0,240,255,0.5)}
.sys-steps{margin-top:50px}
.mn{font-size:clamp(50px,10vw,100px);color:rgba(255,215,0,.6)}

@media(min-width:1024px){
  nav{height:68px;padding:0 56px}
  .nav-logo{font-size:17px;letter-spacing:5.5px}
  .nav-links a{font-size:12px;letter-spacing:3.5px}

  .stag{font-size:13px}
  .snum{font-size:11px}

  .hsub-jp{font-size:clamp(20px,3.2vw,34px)}
  .hsub-en{font-size:clamp(12px,1.5vw,16px)}
  .sq{font-size:clamp(17px,2.4vw,24px)}

  .world-intro{font-size:clamp(14px,1.9vw,18px)}
  .wc .wt{font-size:15px}
  .wc .wb{font-size:15px}

  .pp .pn{font-size:13px}
  .pp .pe{font-size:13px}
  .pp .pd{font-size:15px}

  .homo-desc{font-size:clamp(14px,1.8vw,18px)}
  .ht-desc{font-size:clamp(13px,1.4vw,15px)}

  .ss .t{font-size:clamp(18px,2.1vw,23px)}
  .meta-crit-desc{font-size:clamp(14px,1.7vw,17px)}
  .ft-bottom span{font-size:10px}
}

@media(max-width:900px){
  .pg{grid-template-columns:repeat(2,1fr)}
  .pp{min-height:45vh}
  .wcs{flex-direction:column}
  .wcon{width:auto;height:40px}
  .homo-desc br.hide-on-mob{display:none}
  nav{padding:0 20px;align-items:center}
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute;
    top:calc(100% + 8px);
    left:16px;
    right:16px;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:14px 16px;
    background:rgba(6,6,16,0.92);
    border:1px solid rgba(0,240,255,0.18);
    backdrop-filter:blur(8px);
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .25s ease,transform .25s ease;
  }
  nav.menu-open .nav-links{opacity:1;transform:translateY(0);pointer-events:auto}
  .nav-links a{font-size:12px;letter-spacing:3px}
  .ss .n{min-width:50px;font-size:24px}
}
@media(max-width:600px){.pg{grid-template-columns:1fr}.pp{min-height:35vh}}

/* スマホ改行修正 */
@media(max-width:768px){
  /* 手段A: PCレイアウト用brをスマホで非表示 */
  br.hide-on-mob{display:none}
  /* 手段B: テキストブロックの左右余白を縮小し1行あたりの文字数を確保 */
  .sec-story{padding-left:5%;padding-right:5%}
  .sec-world,.sec-homo,.sec-sys,.sec-meta{padding-left:4%;padding-right:4%}
  /* 手段C: 日本語の不自然な途中切れを防ぐ */
  .sq,.world-intro,.wc .wb,.pp .pd,.homo-desc,.ht-desc,.md,.meta-crit-desc{word-break:keep-all;overflow-wrap:break-word}
  /* 手段D: 短い見出し・2〜3行段落の折り返しバランス */
  .stag,.ph h2,.homo-title,.md,.send,.pp .pj{text-wrap:balance}
  /* Homodimes 3項目をスマホで縦並びにし「虚次元干渉力」などが確実に見えるように */
  .homo-traits{flex-direction:column;gap:8px}
  .homo-trait{min-width:0}
  /* System steps: スマホではライン非表示・文章を左寄せ */
  .ss .l{display:none}
  .ss{gap:12px;padding-left:0;padding-right:0}
  .ss .n{min-width:40px;text-align:left}
  .sys-steps{text-align:left}
  /* 革命ではない。転移である。をスマホで80％に */
  .send{font-size:clamp(17.6px,3.2vw,33.6px)}
}
/* ============================================
   ΑΛΦα — スマホ視認性修正パッチ
   styles.css の末尾に追加、または別ファイルとして読み込む
   ============================================ */

/* ─── 1. コントラスト改善（全デバイス共通） ─── */

/* Prologue本文: 0.55 → 0.72 */
.sq {
  color: rgba(255, 255, 255, 0.72);
}

/* World説明文: 0.75は合格だが、もう少し上げると安心 */
.world-intro {
  color: rgba(255, 255, 255, 0.8);
}

/* D/iD説明文: 0.65 → 0.75 */
.wc .wb {
  color: rgba(255, 255, 255, 0.75);
}

/* Phase説明文: 0.55 → 0.7 */
.pp .pd {
  color: rgba(255, 255, 255, 0.7);
}

/* Phase英語ラベル: 0.45 → 0.6 */
.pp .pe {
  color: rgba(255, 255, 255, 0.6);
}

/* Homodimes説明文: 0.5 → 0.68 */
.homo-desc {
  color: rgba(255, 255, 255, 0.68);
}

/* 革命ではない。転移である。: 0.4 → 0.6 */
.send {
  color: rgba(255, 255, 255, 0.6);
}

/* META PEACE サブコピー: 0.5 → 0.65 */
.md {
  color: rgba(255, 255, 255, 0.65);
}

/* 3.5%説明文: 0.6 → 0.72 */
.meta-crit-desc {
  color: rgba(255, 255, 255, 0.72);
}

/* Nav links: 0.4 → 0.55 */
.nav-links a {
  color: rgba(255, 255, 255, 0.55);
}


/* ─── 2. スマホ専用修正 (768px以下) ─── */

@media (max-width: 768px) {

  /* --- letter-spacing 緩和 --- */
  
  /* META PEACE サブコピー: .4em → .12em（劇的に読みやすくなる） */
  .md {
    letter-spacing: .12em;
  }

  /* ヒーロー副題: .3em → .15em */
  .hsub-jp {
    letter-spacing: .15em;
  }
  
  /* ヒーロー英語副題: .5em → .25em */
  .hsub-en {
    letter-spacing: .25em;
  }

  /* Section tag: 8px → 5px */
  .stag {
    letter-spacing: 5px;
  }

  /* Phase日本語タイトル: 3px → 1px */
  .pp .pj {
    letter-spacing: 1px;
  }

  /* 革命ではない。転移である。: .25em → .12em */
  .send {
    letter-spacing: .12em;
  }


  /* --- Homo title の折り返し改善 --- */
  .homo-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .homo-jp {
    margin-left: 0;
    display: block;
  }


  /* --- Phase カードの余白改善 --- */
  .pp {
    padding: 30px 20px;
  }
  .pp .pd {
    max-width: none; /* 260px制限をスマホで解除 */
  }
  .pp .pbg {
    font-size: clamp(70px, 20vw, 120px); /* 背景文字を少し小さく */
    top: 8%;
  }


  /* --- footer が横溢れしない --- */
  .ft-bottom {
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: center;
  }
  .ft-bottom span {
    font-size: 9px; /* 元のまま。装飾なのでOK */
  }
  footer {
    padding: 40px 20px;
  }


  /* --- System steps の余白調整 --- */
  .ss {
    padding: 20px 0;
  }
  .ss .n {
    min-width: 36px;
    font-size: clamp(20px, 5vw, 28px);
  }
  .ss .t {
    font-size: clamp(14px, 3.8vw, 18px);
    line-height: 1.8;
  }


  /* --- Homodimes trait のパディング調整 --- */
  .homo-trait {
    padding: 24px 16px;
  }
  .ht-label {
    font-size: 12px;
    letter-spacing: 2px;
  }
  .ht-desc {
    font-size: 13px;
  }


  /* --- 全体的な line-height 確保 --- */
  .world-intro,
  .homo-desc,
  .meta-crit-desc {
    line-height: 2.2; /* 元は2.4だが、letter-spacing縮小と合わせてバランス調整 */
  }
}


/* ─── 3. 小型スマホ専用 (375px以下) ─── */

@media (max-width: 375px) {

  /* ヒーローの余白確保 */
  .hsub-jp {
    font-size: 16px;
    letter-spacing: .1em;
  }

  /* 数式が溢れないように */
  .weq {
    font-size: clamp(36px, 10vw, 50px);
    letter-spacing: .04em;
  }

  /* Phase見出し */
  .ph h2 {
    font-size: 18px;
    letter-spacing: .06em;
  }

  /* 3.5% の数字 */
  .mn {
    font-size: clamp(40px, 12vw, 60px);
  }

  /* META PEACEタイトル */
  .mt {
    letter-spacing: .05em;
  }
}