:root{--navy:#0b1f4d;--blue:#4169e1;--yellow:#ffff00;--text:#17184b;--bg:#fff;--line:#d9def0;--soft:#f4f5f9;--serif:"Zen Old Mincho","Noto Serif JP","Hiragino Mincho ProN",serif;--sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;--num:"Montserrat","Noto Sans JP",sans-serif;--gut:max(20px,env(safe-area-inset-left,0px))}
*{box-sizing:border-box}html{scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gut);padding-right:max(20px,env(safe-area-inset-right,0px))}
/* header */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;color:var(--navy);letter-spacing:.04em}
.brand img{width:36px;height:36px}
.nav{margin-left:auto;display:flex;gap:28px;font-size:14px}
.nav a{text-decoration:none;color:var(--text)}.nav a:hover{color:var(--blue)}
.cta-s{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-size:14px;font-weight:700;padding:10px 18px}
.cta-s:hover{background:#13306f}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);font:700 13px var(--sans);color:var(--navy);padding:8px 12px}
@media (max-width:860px){.nav,.hd .cta-s{display:none}.menu-btn{display:block}.nav.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px var(--gut)}.nav.open a{padding:14px 0;border-top:1px solid var(--line)}}
/* hero */
.hero{position:relative;min-height:min(820px,calc(100svh - 68px));overflow:hidden}
.hero .orbit{position:absolute;inset:0;width:100%;height:100%}
.hero .wrap{position:relative;padding-top:clamp(64px,12vh,140px);padding-bottom:120px}
.eyebrow{font:700 12px var(--num);letter-spacing:.24em;color:var(--blue);margin:0 0 20px}
.q{font-family:var(--serif);font-weight:900;color:var(--navy);font-size:clamp(34px,5.2vw,68px);line-height:1.42;margin:0;max-width:11.5em;text-wrap:balance}
.mk{background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.lead{margin:28px 0 0;font-size:clamp(15px,1.4vw,18px);max-width:28em}
.down{display:inline-flex;align-items:center;gap:10px;margin-top:40px;font-size:13px;color:var(--blue);text-decoration:none;font-weight:700}
.down span{display:inline-block;width:1px;height:36px;background:var(--blue)}
.motion{position:absolute;right:var(--gut);top:20px;z-index:2;font:700 12px var(--sans);color:var(--navy);background:#fff;border:1px solid var(--blue);padding:5px 12px;cursor:pointer}
.arc{stroke-dasharray:1600;stroke-dashoffset:1600}
.js .arc{animation:draw 1.2s cubic-bezier(.3,.6,.2,1) forwards}
.js .arc.a2{animation-delay:.15s}.js .arc.a3{animation-delay:.3s}.js .arc.a4{animation-delay:.45s}
@keyframes draw{to{stroke-dashoffset:0}}
.flow{stroke-dasharray:6 14;animation:flow 10s linear infinite}
@keyframes flow{to{stroke-dashoffset:-200}}
.paused .flow,.paused .arc{animation-play-state:paused}
.orbit-sp{display:none}
@media (max-width:860px){.hero .orbit{display:none}.orbit-sp{display:block;width:calc(100% + 40px);max-width:none;height:auto;margin:28px -20px 0}.hero .wrap{padding-bottom:64px}.hero{min-height:0}.motion{top:12px}}
/* answer */
.answer{padding:clamp(80px,12vw,160px) 0}
.answer .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.concept{font-family:var(--serif);font-weight:900;color:var(--navy);font-size:clamp(36px,6vw,84px);line-height:1.3;margin:0}
.answer p{margin:0 0 1em;max-width:30em}
.more{display:inline-flex;gap:12px;align-items:center;color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px solid var(--blue);padding-bottom:4px}
.more i{font-style:normal;transition:transform .3s ease}.more:hover i,.more:focus-visible i{transform:translateX(6px)}
@media (max-width:860px){.answer .grid{grid-template-columns:1fr}}
/* distance */
.dist{padding:clamp(72px,10vw,140px) 0 clamp(40px,5vw,72px);background:linear-gradient(#fff 0%,#fff 55%,var(--soft) 100%)}
.h2{font-family:var(--serif);font-weight:900;color:var(--navy);font-size:clamp(28px,3.6vw,46px);line-height:1.45;margin:0 0 16px;text-wrap:balance}
.dist .intro{max-width:34em;margin:0 0 48px}
.st-pc{width:100%;height:auto;display:block}
.st-sp{display:none}
.dot{fill:#fff;stroke:var(--blue);stroke-width:2.5;transition:fill .5s ease}
.lit .dot{fill:var(--navy)}
.core{fill:#fff;transition:fill .5s ease 1s}.lit .core{fill:var(--yellow)}
.d2{transition-delay:.3s}.d3{transition-delay:.6s}.d4{transition-delay:.9s}
.st-sp li{list-style:none;position:relative;padding:0 0 34px 44px}
.st-sp li::before{content:"";position:absolute;left:10px;top:8px;width:16px;height:16px;border-radius:50%;border:2.5px solid var(--blue);background:#fff;transition:background .5s ease}
.st-sp li::after{content:"";position:absolute;left:19px;top:30px;bottom:0;width:1.5px;background:var(--blue)}
.st-sp li:last-child::after{display:none}
.lit .st-sp li::before{background:var(--navy)}
.lit .st-sp li:nth-child(2)::before{transition-delay:.3s}.lit .st-sp li:nth-child(3)::before{transition-delay:.6s}
.st-sp li:last-child::before{width:22px;height:22px;left:7px;top:5px}
.lit .st-sp li:last-child::before{background:radial-gradient(circle,var(--yellow) 0 40%,var(--navy) 41%);transition-delay:.9s}
.st-sp b{display:block;color:var(--navy);font-size:18px}
@media (max-width:860px){.st-pc{display:none}.st-sp{display:block;padding:0;margin:0}}
/* reveal */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .arc{animation:none;stroke-dashoffset:0}.flow{animation:none}.dot,.core,.st-sp li::before{transition:none!important}.js .rv{opacity:1;transform:none;transition:none}.more i{transition:none}}

/* skip + nav extras */
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--navy);color:#fff;padding:8px 14px}.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nav a[aria-current]{color:var(--blue);font-weight:700}
.nav-cta{display:none}
@media (max-width:860px){.nav.open .nav-cta{display:block;color:var(--navy);font-weight:700}}
/* business */
.biz{padding:clamp(40px,5vw,72px) 0 clamp(80px,10vw,140px);background:var(--soft)}
.biz .intro{max-width:34em;margin:0 0 48px}
.lane{margin:0 0 48px}
.lane-en{font:700 12px var(--num);letter-spacing:.24em;color:var(--blue);margin:0 0 4px}
.lane-h{font-size:20px;color:var(--navy);margin:0 0 20px;padding-bottom:10px;border-bottom:1.5px solid var(--blue)}
.tiles{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
.tile{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);padding:28px;text-decoration:none;color:var(--text);transition:border-color .3s ease,transform .3s ease}
.tile:hover,.tile:focus-visible{border-color:var(--blue);transform:translateY(-2px)}
.tile .fig{width:160px;height:90px;margin-bottom:8px}
.fig .ln{stroke-dasharray:220;stroke-dashoffset:60;transition:stroke-dashoffset .5s ease}
.tile:hover .fig .ln,.tile:focus-visible .fig .ln{stroke-dashoffset:0}
.t-name{font-size:20px;font-weight:700;color:var(--navy);line-height:1.4}
.t-sub{font-size:13px;color:#4a4f75}
.t-copy{font-family:var(--serif);font-weight:900;color:var(--navy);font-size:clamp(22px,2.2vw,28px);line-height:1.4;margin:8px 0 2px}
.t-text{font-size:15px;line-height:1.8}
.t-go{margin-top:auto;padding-top:12px;font-weight:700;color:var(--navy);font-size:14px}
.t-go i{font-style:normal;display:inline-block;transition:transform .3s ease}
.tile:hover .t-go i,.tile:focus-visible .t-go i{transform:translateX(6px)}
@media (max-width:860px){.tiles{grid-template-columns:1fr}}
/* proof */
.proof{padding:clamp(80px,10vw,140px) 0}
.nums{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.nums li{border-top:1.5px solid var(--blue);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.nums .n{color:var(--navy);font-weight:700;font-size:18px}
.nums .n b{font:700 clamp(48px,5vw,64px)/1 var(--num);margin-right:6px}
.nums .src{font-size:12px;color:#4a4f75}
.voice{margin:56px 0 0;padding:0 0 0 20px;border-left:1.5px solid var(--blue)}
.voice p{font-family:var(--serif);font-weight:900;color:var(--navy);font-size:clamp(20px,2.2vw,26px);line-height:1.6;margin:0 0 8px}
.voice cite{font-style:normal;font-size:12px;color:#4a4f75}
@media (max-width:860px){.nums{grid-template-columns:1fr}}
/* we */
.we{padding:0 0 clamp(80px,10vw,140px)}
.we-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.we-ph{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.we-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.we p{max-width:30em}
.badge{font-size:13px;color:#4a4f75;border-left:1.5px solid var(--blue);padding-left:12px}
@media (max-width:860px){.we-g{grid-template-columns:1fr}.we-ph{max-width:420px}}
/* closing (navy) */
.closing{position:relative;background:var(--navy);color:#fff;padding:clamp(120px,14vw,180px) 0 clamp(80px,10vw,120px)}
.bridge{position:absolute;top:-70px;left:0;width:100%;height:160px;pointer-events:none}
.on-navy{color:#9fb3ff}
.cl-h{font-family:var(--serif);font-weight:900;font-size:clamp(28px,3.8vw,48px);line-height:1.5;margin:0 0 20px;text-wrap:balance}
.mk-n{color:var(--yellow)}
.cl-p{max-width:32em;margin:0 0 36px;color:#e4e8f6}
.cta-y{display:inline-flex;gap:12px;align-items:center;background:var(--yellow);color:var(--navy);font-weight:700;text-decoration:none;padding:18px 32px;font-size:16px}
.cta-y i{font-style:normal;transition:transform .3s ease}.cta-y:hover i,.cta-y:focus-visible i{transform:translateX(6px)}
.closing :focus-visible{outline-color:#fff}
/* footer */
.ft{background:#081633;color:#d8ddf0;padding:48px 0 calc(32px + env(safe-area-inset-bottom,0px));font-size:13px;line-height:1.9}
.ft-in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ft-name{color:#fff;font-weight:700;margin:0 0 6px}.ft p{margin:0}
.ft nav{display:flex;gap:20px;flex-wrap:wrap}.ft nav a{color:#fff;text-decoration:none}.ft nav a:hover{text-decoration:underline}
.ft-c{margin-top:28px;opacity:.7}
.ft :focus-visible{outline-color:#fff}
/* sub pages */
.ph{position:relative;padding:clamp(72px,10vw,120px) 0 clamp(48px,6vw,80px);overflow:hidden;border-bottom:1px solid var(--line)}
.ph-arc{position:absolute;inset:0;width:100%;height:100%}
.ph .wrap{position:relative}
.ph-h{font-family:var(--serif);font-weight:900;color:var(--navy);font-size:clamp(34px,5vw,60px);line-height:1.3;margin:0}
.sec{padding:clamp(72px,9vw,120px) 0}.sec.soft{background:var(--soft)}
.label{font-size:13px;font-weight:700;color:var(--blue);margin:0 0 8px;letter-spacing:.08em}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,88px)}
.sec p{max-width:32em}
.pairs{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:16px}
.pairs li{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--line)}
.pairs .do{font-weight:700;color:var(--navy)}.pairs .do::before{content:"やる";display:block;font-size:12px;color:var(--blue)}
.pairs .no{color:#4a4f75}.pairs .no::before{content:"やらない";display:block;font-size:12px;color:#4a4f75}
.vals{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.vals li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line);font-weight:700;color:var(--navy)}
.vn{font:700 14px var(--num);color:var(--blue);letter-spacing:.08em}
.sign{margin-top:24px;font-weight:700;color:var(--navy)}.sign small{font-weight:400;color:#4a4f75}
.co{margin:32px 0 0}.co div{display:grid;grid-template-columns:8em 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.co dt{font-weight:700;color:var(--navy)}.co dd{margin:0}
.brow{display:grid;grid-template-columns:180px 1fr;gap:32px;padding:32px 0;border-top:1px solid var(--line)}
.brow .fig{width:160px;height:90px}
.b-name{font-size:24px;color:var(--navy);margin:0}
.b-copy{font-family:var(--serif);font-weight:900;color:var(--navy);font-size:24px;margin:8px 0}
.big-link{color:var(--navy);text-decoration:none;border-bottom:1.5px solid var(--blue);word-break:break-all}
.steps{padding:0;margin:32px 0 0;list-style:none;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;padding:16px 0 16px 48px;border-top:1px solid var(--line);position:relative}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;font:700 14px var(--num);color:var(--blue)}
.steps b{display:block;color:var(--navy)}
.note{font-size:14px;color:#4a4f75}
@media (max-width:860px){.two,.vals{grid-template-columns:1fr}.pairs li{grid-template-columns:1fr;gap:8px}.co div{grid-template-columns:1fr;gap:4px}.brow{grid-template-columns:1fr;gap:16px}}
@media (prefers-reduced-motion:reduce){.tile,.fig .ln,.t-go i,.cta-y i{transition:none}.tile:hover{transform:none}}
.q,.h2,.ph-h,.concept,.voice p,.t-copy,.b-copy{word-break:auto-phrase}
@media (max-width:860px){.ph-arc{display:none}}
.lanes2{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}.lanes2 .tiles{grid-template-columns:1fr}.lanes2 .lane{display:flex;flex-direction:column}.lanes2 .tiles{flex:1}.lanes2 .tile .t-go{margin-top:auto}
@media (max-width:860px){.lanes2{grid-template-columns:1fr}}
.t-sub{word-break:auto-phrase}
.nw{white-space:nowrap}