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}}
.sp-br{display:none}
@media (max-width:560px){.sp-br{display:inline}.fl-step{gap:14px !important}.fl-no{width:40px !important;height:40px !important;font-size:12px !important}.fl-line{left:19px !important;top:20px !important;bottom:20px !important}.fl-card{padding:18px 18px !important;border-radius:18px !important}.fl-jp{font-size:17px !important}}
@media (max-width:560px){.photo-pill{flex-direction:column;align-items:stretch !important;align-self:stretch !important;gap:10px !important;padding:14px 14px 12px !important;border-radius:22px !important}.photo-pill .pp-label{justify-content:center}.photo-pill .pp-tag{text-align:center;padding:12px 14px !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: cursor reveals mirrored letterpress type (活字) ---------- */
@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;overflow:hidden;-webkit-mask-image:radial-gradient(circle 340px at var(--hx) var(--hy),#000 0,rgba(0,0,0,.35) 45%,transparent 78%);mask-image:radial-gradient(circle 340px at var(--hx) var(--hy),#000 0,rgba(0,0,0,.35) 45%,transparent 78%)}
.kat{position:absolute;inset:0;padding:96px 0 0;transform:scaleX(-1);background-image:linear-gradient(#2A2E33 1px,transparent 1px),linear-gradient(90deg,#2A2E33 1px,transparent 1px);background-size:40px 40px;background-position:0 96px}
.kat-l{display:block;white-space:nowrap;overflow:hidden;font-size:26px;line-height:40px;letter-spacing:14px;text-indent:7px;font-weight:900;opacity:.32}
@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}
.tombo{position:absolute;width:34px;height:34px;pointer-events:none}
.cbar-cell{animation:cbar 4.8s steps(1) infinite}
@keyframes cbar{0%{box-shadow:inset 0 0 0 40px var(--acc)}12%,100%{box-shadow:inset 0 0 0 0 rgba(200,245,60,0)}}

/* ---------- process 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 6s 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 6s linear infinite}
@keyframes trail{from{width:0%}to{width:100%}}
.fnode{animation:fnode 6s 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)}20%,100%{background:#121417;color:#9A9EA6;border-color:#3A3E44;box-shadow:0 0 0 0 rgba(200,245,60,0)}}
.flabel{animation:flabel 6s ease-out infinite}
@keyframes flabel{0%{color:var(--acc)}20%,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}}

/* ---------- cards ---------- */
.card{transition:transform .45s cubic-bezier(.2,.7,.1,1),border-color .35s ease}
.card:hover{transform:translateY(-8px);border-color:var(--acc) !important}
.card:hover .a-pop{animation:pop .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pop{from{scale:0;opacity:0}to{scale:1;opacity:1}}

/* business card: flips to its back */
.flip-wrap{perspective:900px}
.flip{position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.1,1);transform:rotateY(-16deg) rotateX(10deg)}
.card:hover .flip{transform:rotateY(164deg) rotateX(10deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face-b{transform:rotateY(180deg)}
/* leaflet: tri-fold opens */
.fold-wrap{perspective:700px}
.fold-l{transform-origin:right center;transform:rotateY(-80deg);transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.fold-r{transform-origin:left center;transform:rotateY(80deg);transition:transform .8s cubic-bezier(.2,.7,.1,1) .08s}
.card:hover .fold-l,.card:hover .fold-r{transform:rotateY(0deg)}
/* catalog: pages fan out */
.fan{transform-origin:15% 100%;transition:rotate .6s cubic-bezier(.2,.7,.1,1),translate .6s cubic-bezier(.2,.7,.1,1)}
.card:hover .fan1{rotate:-16deg;translate:-18px 0}
.card:hover .fan2{rotate:-7deg;translate:-6px 0}
.card:hover .fan3{rotate:5deg;translate:12px 0}
/* company profile: page turns */
.book{perspective:1100px}
.turn{transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card:hover .turn{animation:turn 1.3s cubic-bezier(.5,0,.2,1) both}
@keyframes turn{from{transform:rotateY(0deg)}to{transform:rotateY(-180deg)}}
@media (hover:none){
.flip{animation:flip 5s ease-in-out infinite}
.fold-l{animation:unfold-l 4s ease-in-out infinite alternate}
.fold-r{animation:unfold-r 4s ease-in-out infinite alternate}
.fan1{animation:fan1 4s ease-in-out infinite alternate}
.fan3{animation:fan3 4s ease-in-out infinite alternate}
.turn{animation:turn 3.2s cubic-bezier(.5,0,.2,1) infinite}
.a-pop{animation:pop 1.2s ease infinite alternate}
}
@keyframes flip{0%,30%{transform:rotateY(-16deg) rotateX(10deg)}50%,80%{transform:rotateY(164deg) rotateX(10deg)}100%{transform:rotateY(344deg) rotateX(10deg)}}
@keyframes unfold-l{0%,20%{transform:rotateY(-80deg)}80%,100%{transform:rotateY(0deg)}}
@keyframes unfold-r{0%,20%{transform:rotateY(80deg)}80%,100%{transform:rotateY(0deg)}}
@keyframes fan1{to{rotate:-16deg;translate:-18px 0}}
@keyframes fan3{to{rotate:5deg;translate:12px 0}}

/* ---------- photography: viewfinder ---------- */
.af{animation:af 4.5s cubic-bezier(.2,.8,.1,1) infinite}
@keyframes af{0%{scale:1.4;opacity:0}8%{opacity:1}20%,100%{scale:1;opacity:1}}
.af-c{animation:af-c 4.5s steps(1) infinite}
@keyframes af-c{0%{stroke:#9A9EA6}20%,100%{stroke:var(--acc)}}
.af-t{animation:af-t 4.5s steps(1) infinite}
@keyframes af-t{0%{color:#9A9EA6}20%,100%{color:var(--acc)}}
.flash{position:absolute;inset:0;background:#FFFFFF;opacity:0;pointer-events:none;animation:flash 4.5s linear infinite}
@keyframes flash{0%,44%{opacity:0}45%{opacity:.5}52%,100%{opacity:0}}
.shot{animation:shot 4.5s steps(1) infinite}
@keyframes shot{0%,44%{opacity:0}45%,100%{opacity:1}}

/* ---------- flow ---------- */
.flow-head{position:static}
@media (min-width:1080px){.flow-head{position:sticky;top:120px}}
.vline{transform-origin:top}

/* ---------- 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%}
.vline{animation:vline linear both;animation-timeline:view();animation-range:entry 20% cover 80%}
.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 vline{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@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,.cbar-cell,.a-pop,.flip,.fold-l,.fold-r,.fan,.fan1,.fan3,.turn,.af,.af-c,.af-t,.flash,.shot{animation:none !important;transition:none !important}.runner,.trail,.flash{display:none}.fold-l,.fold-r{transform: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}}