*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.8 "Manrope","Yu Gothic",sans-serif}.lime{--bg:#111310;--ink:#eef0e8;--muted:#9ea795;--line:#41483b;--accent:#cbff55;--panel:#1b2018}.blue{--bg:#f1f2ee;--ink:#171c23;--muted:#64707c;--line:#c6ccd0;--accent:#245de8;--panel:#e3e7e8}.orange{--bg:#1b1b1b;--ink:#f0ede8;--muted:#aaa6a0;--line:#4d4a46;--accent:#ff9848;--panel:#262523}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.wrap{width:min(1350px,calc(100% - 96px));margin:auto}header{display:flex;justify-content:space-between;align-items:center;height:90px;border-bottom:1px solid var(--line)}.brand{font-size:23px;font-weight:800}.brand span,.accent{color:var(--accent)}nav{display:flex;gap:30px;font-size:12px}.eyebrow{color:var(--accent);font-size:11px;letter-spacing:2px}.hero{min-height:690px;display:grid;grid-template-columns:1.1fr 1fr;gap:65px;align-items:center;padding:60px 0}.hero h1{font-size:clamp(48px,5vw,78px);line-height:1.35;letter-spacing:-3px;margin:25px 0}.hero p{color:var(--muted);font-size:15px}.btn{display:inline-block;background:var(--accent);color:var(--bg);padding:15px 25px;font-size:13px;font-weight:700;margin-top:22px}.hero small{display:block;font-size:10px;color:var(--muted);margin-top:22px}.device{height:440px;perspective:1000px;position:relative}.stack{position:absolute;inset:18% 12%;transform:rotateX(57deg) rotateZ(-30deg);transform-style:preserve-3d}.slab{position:absolute;inset:0;border:1px solid var(--accent);background:color-mix(in srgb,var(--panel) 85%,transparent);display:grid;place-items:center;box-shadow:15px 20px 0 #0002}.slab:nth-child(1){transform:translateZ(-65px)}.slab:nth-child(2){transform:translateZ(10px)}.slab:nth-child(3){transform:translateZ(85px)}.slab span{font-size:22px;letter-spacing:4px}.device>small{position:absolute;bottom:0;letter-spacing:2px}.blue .hero h1{font-weight:500}.orange .hero{grid-template-columns:1.25fr 1fr}.orange .hero h1{font-weight:900}.orange .hero h1 .accent{background:var(--accent);color:var(--bg);padding:0 10px}.section{padding:95px 0;border-top:1px solid var(--line)}h2{font-size:38px;line-height:1.5;letter-spacing:-1px;margin:15px 0 25px}.intro{max-width:730px;color:var(--muted);font-size:14px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.feature{border-top:1px solid var(--line);padding-top:25px}.feature h3{font-size:22px}.feature p{color:var(--muted);font-size:14px}.feature small{font-size:10px;color:var(--accent)}.num{font-size:12px;color:var(--accent)}.road{position:relative;border-top:1px solid var(--line)}.road-head{padding:70px 0 30px}.road-layout{display:grid;grid-template-columns:1.55fr .65fr;gap:45px;align-items:start}.sticky{position:sticky;top:30px;padding-top:20px}.screen{border:1px solid var(--line);background:var(--panel);padding:24px;perspective:1200px;overflow:hidden}.screen-top{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:2px;color:var(--muted)}.scene{height:430px;display:flex;align-items:center;justify-content:center}.board{width:100%;transform-style:preserve-3d;transform:rotateX(var(--tilt,18deg)) rotateZ(var(--turn,-5deg));will-change:transform}.board svg{width:100%;display:block;overflow:visible}.zone{fill:var(--bg);stroke:var(--line);stroke-width:1}.node{fill:var(--panel);stroke:var(--muted);stroke-width:1.2}.node-group text{fill:var(--ink);font:14px sans-serif}.node-group .sub{fill:var(--muted);font:10px sans-serif}.node-group.active .node{stroke:var(--accent);stroke-width:2.5;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 35%,transparent))}.zone-name{fill:var(--muted);font:12px monospace;letter-spacing:3px}.trace-base{fill:none;stroke:var(--line);stroke-width:2}.trace{fill:none;stroke:var(--accent);stroke-width:3}.packet{fill:var(--accent);stroke:var(--bg);stroke-width:2}.node-group.active{transform:translateY(-5px)}.screen-label{min-height:90px;border-top:1px solid var(--line);padding-top:20px}.screen-label strong{font-size:20px;font-weight:500}.screen-label p{font-size:12px;color:var(--muted);margin:7px 0}.progress{height:2px;background:var(--line);margin-top:20px}.progress span{display:block;background:var(--accent);height:100%;width:0}.stages article{min-height:78vh;padding:140px 0 60px;border-top:1px solid var(--line)}.stages article:last-child{min-height:95vh}.stages b{color:var(--accent);font:12px monospace;letter-spacing:2px}.stages h3{font-size:28px;line-height:1.5}.stages p{font-size:14px;color:var(--muted)}.footnote{font-size:11px;color:var(--muted);margin:18px 0 25px}.report-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px}.report{background:var(--panel);border:1px solid var(--line);padding:30px}.report-head{font-size:10px;color:var(--muted);display:flex;justify-content:space-between}.report-row{display:grid;grid-template-columns:100px 1fr;gap:20px;border-top:1px solid var(--line);padding:20px 0;font-size:12px}.report-row span,.report-layout p{color:var(--muted)}.report-layout p{font-size:14px}.socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.end{padding:70px 0}.end h2{font-size:32px}.end p{color:var(--muted)}footer{padding:25px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.back{position:fixed;bottom:20px;right:20px;background:var(--ink);color:var(--bg);padding:9px 16px;font-size:11px;z-index:10}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.road-layout{grid-template-columns:1.3fr .7fr;gap:25px}.scene{height:340px}.screen{padding:16px}.hero{gap:25px}.hero h1{font-size:48px}.device{height:360px}}
@media(max-width:700px){.wrap{width:calc(100% - 36px)}header{height:75px}nav a:not(:last-child){display:none}.hero,.orange .hero{grid-template-columns:1fr;padding:45px 0;gap:20px}.hero h1{font-size:46px}.device{height:310px}.features,.report-layout{grid-template-columns:1fr}.section{padding:60px 0}h2{font-size:29px}.road-layout{display:block}.sticky{top:0;z-index:3;background:var(--bg);padding-top:8px}.scene{height:220px}.screen{padding:12px}.screen-top{font-size:8px}.screen-label{min-height:65px;padding-top:10px}.screen-label strong{font-size:16px}.screen-label p{font-size:10px}.progress{margin-top:10px}.footnote{font-size:9px;margin:8px 0}.stages article{min-height:65vh;padding:65px 0 40px}.stages h3{font-size:26px}.report-layout{gap:25px}.back{bottom:12px;right:12px}footer{padding-bottom:65px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.board{transform:none!important}.node-group.active{transform:none}}

.node-group .node{filter:drop-shadow(0 7px 0 #0003)}

/* 図とノードの位置は固定し、経路と説明の切り替えだけを滑らかにする。 */
.lime{--bg:#080f18;--ink:#edf3f5;--muted:#92a6b4;--line:#20313e;--accent:#70ebc6;--panel:#0c1823}
.hero,.orange .hero{grid-template-columns:1fr;min-height:620px;max-width:1100px}
.hero h1{font-size:clamp(48px,5.8vw,84px)}
.board{transform:none!important;will-change:auto}
.node-group.active{transform:none}
.node-group .node{transition:stroke .65s ease,filter .65s ease}
.trace,.packet{transition:opacity .7s ease}
.screen-label{min-height:115px}
@media(max-width:700px){.hero,.orange .hero{min-height:560px}.hero h1{font-size:46px}.screen-label{min-height:105px}}
@media(prefers-reduced-motion:reduce){.trace,.packet,.node-group .node{transition:none}}

/* SNSを画面いっぱいに近い2×2の入口にし、リンク全体を押せるようにする。 */
.social-section{padding:48px 0}
.social-section>.wrap{width:calc(100% - 64px);max-width:none}
.socials{min-height:78svh;margin-top:32px}
.socials a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(24px,4vw,76px);border:1px solid var(--line);background:var(--panel);font-size:clamp(28px,4.4vw,76px);font-weight:600;letter-spacing:-.04em;line-height:1.2;transition:background .4s ease,border-color .4s ease,color .4s ease}
.socials a:hover,.socials a:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.socials a span{font-size:.65em;font-weight:400;letter-spacing:0}
@media(max-width:700px){.social-section>.wrap{width:calc(100% - 24px)}.social-section h2{font-size:24px}.socials{gap:10px;min-height:72svh}.socials a{padding:20px 12px;font-size:clamp(19px,5vw,34px);flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}}
@media(prefers-reduced-motion:reduce){.socials a{transition:none}}
/* スマホでは本文を縦に並べ、設計図は文字を保ったまま横へ動かして読める。 */
@media(max-width:700px){
 html{scroll-padding-top:16px}
 header{gap:12px}.brand{font-size:21px}nav a{display:inline-flex;align-items:center;min-height:44px}
 .hero,.orange .hero{min-height:0;padding:48px 0 56px}.hero h1{font-size:clamp(35px,10vw,54px);letter-spacing:-.045em}.hero p{font-size:14px}.hero small{font-size:11px}
 .btn{min-height:48px;padding:14px 18px;max-width:100%}.section{padding:52px 0}.feature h3{font-size:21px}
 .road-head{padding:48px 0 22px}.road-head h2{font-size:27px}.intro{font-size:13px}
 .scene{height:auto;min-height:280px;overflow-x:auto;justify-content:flex-start;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
 .board{flex:0 0 560px;width:560px}.screen{padding:10px}.screen-top{letter-spacing:1px}
 .scene::after{content:none}.screen-label{min-height:116px}.screen-label strong{font-size:17px}.screen-label p{font-size:12px}
 .footnote{font-size:10px;line-height:1.65}.sticky>.footnote{margin:6px 0 10px}
 .stages article{padding:48px 0;min-height:65svh}.stages p{font-size:14px}.stages h3{font-size:24px}
 .report{padding:18px;min-width:0}.report-row{grid-template-columns:1fr;gap:6px}.report-head{gap:12px;flex-wrap:wrap}
 .back{position:static;display:block;text-align:center;margin:0 18px 20px;padding:12px;font-size:13px}
 footer{gap:16px;flex-wrap:wrap;padding-bottom:24px}footer a{min-height:44px;display:inline-flex;align-items:center}
 .socials a{overflow-wrap:anywhere}.social-section h2{letter-spacing:-.03em}
}
/* 横向きや低い画面では固定図が本文を覆わないよう通常フローへ戻す。 */
@media(max-width:1000px) and (max-height:600px){.road-layout{display:block}.sticky{position:relative;top:auto}.stages article{min-height:65svh;padding:48px 0}}

/* 自動再生の星座は入力を取らず、スマホの縦スクロールを妨げない。 */
.analysis-story{width:100%;min-width:0;aspect-ratio:760/620;position:relative}
.analysis-story svg{width:100%;height:100%;display:block;pointer-events:none;font-family:"Segoe UI","Yu Gothic",sans-serif}
.art.analysis-story{height:auto;min-height:0;aspect-ratio:760/620}
.analysis-story svg text{fill:revert}

.hero.with-story{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);max-width:1350px;gap:32px;min-height:690px}.with-story h1{font-size:clamp(44px,4.8vw,72px)}
@media(max-width:900px){.hero.with-story{grid-template-columns:1fr;gap:12px;min-height:0}.with-story h1{font-size:clamp(38px,8vw,64px)}.with-story .analysis-story{max-width:700px;margin:auto}}

/* 追加説明は読みやすい本文サイズを保ち、スマホでは比較を縦に並べる。 */
.explanation .section-lead{max-width:850px;color:var(--muted);font-size:17px;line-height:1.95;margin:0 0 36px}
.explanation .eyebrow,.explanation .num{font-size:13px}
.explanation .feature p,.explanation .explain-panel p{font-size:16px;line-height:1.95;color:var(--muted)}
.explain-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.explain-panel{min-width:0;border-top:2px solid var(--accent);padding:28px 30px;background:var(--panel)}
.explain-panel h3{font-size:25px;line-height:1.5;margin:15px 0}
.explain-example{max-width:960px;border-left:3px solid var(--accent);padding:14px 24px;margin:32px 0 0;color:var(--muted);font-size:16px}
.explain-example strong{display:block;color:var(--ink);margin-bottom:8px}
.design-status{font-size:14px;color:var(--accent);padding:12px 0;border-bottom:1px solid var(--line);margin:0 0 32px}
.detail-list{list-style:none;padding:0;margin:0}.detail-list li{padding:20px 0;border-bottom:1px solid var(--line)}
.detail-list li:last-child{border:0}.detail-list strong,.detail-list span{display:block;font-size:16px}.detail-list span{margin-top:7px;color:var(--muted)}
.availability-note{font-size:15px;color:var(--muted);margin:28px 0 0}
@media(max-width:700px){.explain-pair{grid-template-columns:1fr;gap:24px}.explain-panel{padding:22px 20px}.explanation .section-lead{font-size:16px}.explain-panel h3{font-size:22px}.explain-example{padding:12px 18px}}

/* SNSの2×2配置を維持し、画面占有率と文字サイズを抑える。 */
.social-section>.wrap{width:min(1350px,calc(100% - 96px));max-width:1350px}
.socials{min-height:0;margin-top:24px;gap:16px}
.socials a{min-height:180px;padding:32px 40px;font-size:clamp(25px,3vw,46px)}
@media(max-width:1000px){.social-section>.wrap{width:calc(100% - 48px)}}
@media(max-width:700px){.social-section>.wrap{width:calc(100% - 36px)}.socials{min-height:0;gap:10px}.socials a{min-height:125px;padding:20px 16px;font-size:clamp(19px,5vw,27px);gap:16px}}