:root{--ink:#0a1027;--muted:#65718a;--blue:#4967ff;--violet:#a943ff;--cyan:#67dff3;--paper:#f4f7fc;--line:#dce4f2;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans JP",sans-serif;line-height:1.8}
a{color:inherit;text-decoration:none}
.guide-wrap{width:min(1500px,calc(100% - 28px));margin:auto}
.guide-nav{position:absolute;z-index:2;inset:0 0 auto;color:#fff}
.guide-nav-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.guide-brand{font:700 1.5rem Outfit,sans-serif;letter-spacing:.05em}
.guide-brand span{color:#7b8dff}
.guide-back{padding:9px 17px;border:1px solid #ffffff4d;border-radius:999px;font-size:.875rem;font-weight:700;background:#ffffff10}
.guide-back:hover{background:#ffffff1f}
.guide-hero{padding:88px 0 14px;color:#fff;background:radial-gradient(circle at 80% 10%,#57338e 0,transparent 30%),radial-gradient(circle at 12% 95%,#12377a 0,transparent 34%),linear-gradient(145deg,#080c21,#10132e 55%,#0c1028)}
.guide-eyebrow,.guide-number,.guide-next>span{font:700 .8rem/1.4 Outfit,sans-serif;letter-spacing:.18em;color:var(--cyan)}
.guide-hero h1{margin:0;font-size:clamp(.9rem,1.4vw,1.15rem);line-height:1.3;letter-spacing:.02em}
.guide-content{padding:12px 0 48px;background:linear-gradient(180deg,#0c1028 0,#f4f7fc 120px)}
.guide-card{padding:12px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 18px 50px #1b2e6b18}
.guide-card-copy{display:flex;align-items:center;gap:14px;max-width:none;padding:2px 4px 10px}
.guide-number{color:var(--blue)}
.guide-card h2{margin:0;font-size:clamp(.95rem,1.7vw,1.25rem);line-height:1.4;letter-spacing:-.02em}
.guide-card-copy>p{margin:0;color:var(--muted);font-size:1rem}
.guide-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none;counter-reset:flow;padding:0;margin:30px 0 34px}
.guide-flow li{position:relative;padding:15px 12px 15px 48px;border:1px solid var(--line);border-radius:14px;color:#33415d;background:#f8faff;font-size:.9rem;font-weight:700}
.guide-flow li:before{counter-increment:flow;content:counter(flow);position:absolute;left:13px;top:50%;transform:translateY(-50%);width:25px;height:25px;display:grid;place-items:center;border-radius:8px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet));font:700 .75rem Outfit,sans-serif}
.guide-media{overflow:hidden;border:1px solid #7185ff;border-radius:12px;background:#090d20;box-shadow:0 14px 34px #172b6a2c}
.guide-media video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#090d20}
.guide-next{margin-top:30px;padding:34px;border:1px dashed #b8c4dc;border-radius:22px;background:#fff;text-align:center}
.guide-next>span{color:var(--blue)}
.guide-next h2{margin:8px 0 6px;font-size:clamp(1.3rem,2.4vw,1.8rem)}
.guide-next p{margin:0;color:var(--muted)}
.guide-footer{padding:26px 0;color:#aeb8d1;background:#070a1b}
.guide-footer .guide-wrap{display:flex;justify-content:space-between;gap:24px;font-size:.82rem}
.guide-footer a{text-decoration:underline;text-underline-offset:4px}
a:focus-visible,video:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
@media(max-width:760px){.guide-wrap{width:calc(100% - 18px)}.guide-nav-inner{min-height:58px}.guide-brand{font-size:1.05rem}.guide-back{padding:6px 10px;font-size:.68rem}.guide-hero{padding:68px 0 9px}.guide-content{padding:8px 0 36px}.guide-card{padding:8px;border-radius:14px}.guide-card-copy{gap:8px;padding:1px 2px 7px}.guide-number{font-size:.62rem}.guide-card h2{font-size:.82rem}.guide-media{border-radius:9px}.guide-footer .guide-wrap{flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
