body{margin:0;background:#0B0C0E}
a{color:#ECEDE8}a:hover{color:#C8F53C}
.nav-links{display:flex}
.menu-btn{display:none}
.m-cta{display:none}
@media (max-width:860px){.nav-links{display:none}.menu-btn{display:flex}}
@media (max-width:760px){.m-cta{display:flex}.hdr-cta{display:none !important}}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--acc);mix-blend-mode:difference;pointer-events:none;z-index:90;translate:var(--cx,-200px) var(--cy,-200px);scale:.3;transition:translate .14s ease-out,scale .35s cubic-bezier(.2,.7,.1,1)}
.root:has(a:hover) .cursor,.root:has(button:hover) .cursor{scale:1.7}
@media (hover:none){.cursor{display:none}}

/* ---------- page hero ---------- */
@property --hx{syntax:'<length-percentage>';inherits:true;initial-value:72%}
@property --hy{syntax:'<length-percentage>';inherits:true;initial-value:38%}
.spot{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--acc) 1px,transparent 1px),linear-gradient(90deg,var(--acc) 1px,transparent 1px);background-size:80px 80px;background-position:center top;opacity:.18;-webkit-mask-image:radial-gradient(circle 300px at var(--hx) var(--hy),#000 0,transparent 75%);mask-image:radial-gradient(circle 300px at var(--hx) var(--hy),#000 0,transparent 75%)}
/* EC icon spotlight: カート・ショッピングバッグ・値札・梱包箱がカーソル周辺に浮かぶ */
.spot-ec{position:absolute;inset:0;pointer-events:none;background:var(--acc);opacity:.9;-webkit-mask-image:url(../img/ec-icons.svg),radial-gradient(circle 320px at var(--hx) var(--hy),#000 0,rgba(0,0,0,.6) 40%,transparent 78%);-webkit-mask-size:160px 160px,100% 100%;-webkit-mask-position:center top,0 0;-webkit-mask-repeat:repeat,no-repeat;-webkit-mask-composite:source-in;mask-image:url(../img/ec-icons.svg),radial-gradient(circle 320px at var(--hx) var(--hy),#000 0,rgba(0,0,0,.6) 40%,transparent 78%);mask-size:160px 160px,100% 100%;mask-position:center top,0 0;mask-repeat:repeat,no-repeat;mask-composite:intersect}
@media (hover:none){.hero{animation:roam 9s ease-in-out infinite alternate}}
@keyframes roam{0%{--hx:15%;--hy:25%}50%{--hx:80%;--hy:40%}100%{--hx:40%;--hy:80%}}
.ch{display:inline-block;animation:ch-in 1s cubic-bezier(.2,.8,.1,1) both}
@keyframes ch-in{from{opacity:0;translate:0 .6em;rotate:8deg;filter:blur(10px)}to{opacity:1;translate:0 0;rotate:0deg;filter:blur(0)}}
.fade-in{animation:fade-in 1s cubic-bezier(.2,.8,.1,1) both}
@keyframes fade-in{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.blink{animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.live{animation:blink 1.6s steps(1) infinite}
.pill-nav a{transition:background .3s ease,color .3s ease,border-color .3s ease}
.pill-nav a:hover{background:var(--acc);color:#0B0C0E;border-color:var(--acc) !important}

/* ---------- service band (light dot runs) ---------- */
.runner{position:absolute;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--acc);box-shadow:0 0 18px 4px rgba(200,245,60,.55);animation:run 5s linear infinite}
@keyframes run{from{left:0%}to{left:100%}}
.trail{position:absolute;left:0;top:6px;height:2px;background:linear-gradient(90deg,transparent,var(--acc));animation:trail 5s linear infinite}
@keyframes trail{from{width:0%}to{width:100%}}
.fnode{animation:fnode 5s ease-out infinite}
@keyframes fnode{0%{background:var(--acc);color:#0B0C0E;border-color:var(--acc);box-shadow:0 0 0 8px rgba(200,245,60,.14)}24%,100%{background:#121417;color:#9A9EA6;border-color:#3A3E44;box-shadow:0 0 0 0 rgba(200,245,60,0)}}
.flabel{animation:flabel 5s ease-out infinite}
@keyframes flabel{0%{color:var(--acc)}24%,100%{color:#ECEDE8}}
@media (max-width:760px){.fnode{width:40px !important;height:40px !important}.fnode svg{width:16px;height:16px}.flabel{font-size:12px !important}.flabel-en{display:none}.flow-track{top:19px !important;left:20px !important;right:20px !important}}

/* ---------- before / after bars ---------- */
.ba-bar{transform-origin:left}

/* ---------- growth loop ---------- */
.orbit{position:absolute;inset:8%;border-radius:50%;animation:spin 10s linear infinite}
@keyframes spin{to{rotate:360deg}}
.lnode{animation:lnode 10s ease-out infinite}
@keyframes lnode{0%{background:var(--acc);color:#0B0C0E;border-color:var(--acc);scale:1.06}20%,100%{background:#121417;color:#ECEDE8;border-color:#3A3E44;scale:1}}
/* growth loop: スマホでは図を内側に寄せ、左右のラベルが切れないように */
@media (max-width:640px){
.loop{width:calc(100% - 56px) !important;margin:12px 0}
.lnode{font-size:11px !important;padding:7px 11px !important;border-width:1px !important}
.lnode-r{left:84% !important}
.lnode-l{left:16% !important}
}

/* ---------- cards & mini screens ---------- */
.card{transition:transform .45s cubic-bezier(.2,.7,.1,1),border-color .35s ease}
.card:hover{transform:translateY(-8px);border-color:var(--acc) !important}
.a-grow{transform-origin:bottom}
.a-prog{transform-origin:left;transform:scaleX(.38)}
.card:hover .a-grow{animation:grow .9s cubic-bezier(.2,.8,.1,1) both}
.card:hover .a-pop{animation:pop .6s cubic-bezier(.3,1.5,.5,1) both}
.card:hover .a-slide{animation:slide .7s cubic-bezier(.2,.8,.1,1) both}
.card:hover .a-prog{animation:prog 2.2s linear both}
.card:hover .a-flash{animation:flash .5s ease both}
.card:hover .a-pulse{animation:pulse 1s ease infinite}
@keyframes grow{from{transform:scaleY(.08)}to{transform:scaleY(1)}}
@keyframes pop{from{scale:0;opacity:0}to{scale:1;opacity:1}}
@keyframes slide{from{translate:-40px 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes flash{0%{opacity:0}20%{opacity:.9}100%{opacity:0}}
@keyframes pulse{50%{scale:1.12}}
@media (hover:none){
.a-grow{animation:grow 1.6s ease infinite alternate}
.a-pop{animation:pop 1.2s ease infinite alternate}
.a-slide{animation:slide 1.4s ease infinite alternate}
.a-prog{animation:prog 3s linear infinite}
.a-flash{animation:flash 2.4s ease infinite}
.a-pulse{animation:pulse 1.4s ease infinite}
}
/* RECOMMENDED badge: ゆっくり明滅＋光のにじみ */
.rec-badge{animation:rec-glow 2.6s ease-in-out infinite}
/* 透明にせず明るさだけ落とす＝背後の枠線が透けない */
@keyframes rec-glow{0%,100%{filter:brightness(1);box-shadow:0 0 0 0 rgba(200,245,60,.55),0 0 14px 2px rgba(200,245,60,.45)}50%{filter:brightness(.62);box-shadow:0 0 0 6px rgba(200,245,60,0),0 0 2px 0 rgba(200,245,60,0)}}
@media (prefers-reduced-motion:reduce){.rec-badge{animation:none}}
.plan-std{transform:translateY(-16px)}
.plan-std:hover{transform:translateY(-24px)}
@media (max-width:1080px){.plan-std{transform:none}.plan-std:hover{transform:translateY(-8px)}}
.prow{transition:background .3s ease,padding .3s ease}
.prow:hover{background:#181B1F;padding-left:12px !important;padding-right:12px !important}

/* ---------- footer neon trace ---------- */
.nl{stroke-dasharray:3000 3000;stroke-dashoffset:3000;animation-duration:7.5s;animation-timing-function:linear;animation-iteration-count:infinite}
.d0{animation-name:d0}.d1{animation-name:d1}.d2{animation-name:d2}.d3{animation-name:d3}.d4{animation-name:d4}.d5{animation-name:d5}.d6{animation-name:d6}.d7{animation-name:d7}.d8{animation-name:d8}.d9{animation-name:d9}.d10{animation-name:d10}
@keyframes d0{0%{stroke-dashoffset:3000;opacity:1}12%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d1{0%,4%{stroke-dashoffset:3000;opacity:1}16%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d2{0%,8%{stroke-dashoffset:3000;opacity:1}20%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d3{0%,12%{stroke-dashoffset:3000;opacity:1}24%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d4{0%,16%{stroke-dashoffset:3000;opacity:1}28%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d5{0%,20%{stroke-dashoffset:3000;opacity:1}32%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d6{0%,24%{stroke-dashoffset:3000;opacity:1}36%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d7{0%,28%{stroke-dashoffset:3000;opacity:1}40%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d8{0%,32%{stroke-dashoffset:3000;opacity:1}44%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d9{0%,36%{stroke-dashoffset:3000;opacity:1}48%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d10{0%,40%{stroke-dashoffset:3000;opacity:1}52%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.neon-full{opacity:0;animation:neon-on 7.5s linear infinite}
@keyframes neon-on{0%,52%{opacity:0}53%{opacity:.9}54%{opacity:.15}55.5%{opacity:1}56.5%{opacity:.4}58%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.nl,.neon-full{animation:none}.nl{stroke-dashoffset:0}}

/* ---------- menu overlay ---------- */
.menu-ov{animation:mo-in .55s cubic-bezier(.8,0,.2,1) both}
@keyframes mo-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.mo-link{animation:mo-link .6s cubic-bezier(.2,.8,.1,1) both}
@keyframes mo-link{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}

/* ---------- scroll-driven ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;z-index:30}
.sr-line{transform-origin:left}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
.sr{animation:sr-up linear both;animation-timeline:view();animation-range:entry 5% entry 90%}
.sr-clip{animation:sr-clip linear both;animation-timeline:view();animation-range:entry 10% entry 100%}
.sr-line{animation:sr-line linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.sr-card{animation:sr-card linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
.hero-out{animation:hero-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
.drift-l{animation:drift-l linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.ba-bar{animation:sr-line linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.fill{background:linear-gradient(90deg,#ECEDE8 50%,#2E3136 50%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:fill linear both;animation-timeline:view();animation-range:entry 70% cover 45%}
.fill-acc{background:linear-gradient(90deg,var(--acc) 50%,#2E3136 50%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:fill linear both;animation-timeline:view();animation-range:entry 70% cover 45%}
.progress{animation:progress linear both;animation-timeline:scroll(root)}
.hdr{animation:hdr linear both;animation-timeline:scroll(root);animation-range:0px 240px}
}
}
@keyframes sr-up{from{opacity:0;translate:0 56px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes sr-clip{from{clip-path:inset(-0.3em -0.3em 100% -0.3em);translate:0 40%}to{clip-path:inset(-0.3em -0.3em -0.3em -0.3em);translate:0 0}}
@keyframes sr-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sr-card{from{opacity:0;translate:0 80px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes hero-out{from{opacity:1;translate:0 0;scale:1}to{opacity:0;translate:0 -140px;scale:.95}}
@keyframes drift-l{from{transform:translateX(0)}to{transform:translateX(-30%)}}
@keyframes fill{from{background-position:100% 0}to{background-position:0 0}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hdr{from{background:rgba(11,12,14,0)}to{background:rgba(11,12,14,.86);backdrop-filter:blur(14px);border-bottom-color:#26292E}}
@media (prefers-reduced-motion:reduce){.ch,.fade-in,.blink,.live,.hero,.runner,.trail,.fnode,.flabel,.orbit,.lnode,.a-grow,.a-pop,.a-slide,.a-prog,.a-flash,.a-pulse{animation:none !important}.runner,.trail{display:none}}

/* ---------- JP line breaking (phrase-aware, mobile) ---------- */
.root{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
.root p{text-wrap:pretty}
.w{display:inline-block}
.sp-br{display:none}
@media (max-width:760px){.flow-track ~ ol > li{width:40px !important}}
@media (max-width:600px){.pc-br{display:none}.sp-br{display:inline}}