#cursor-vortex{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
#deviation-field{opacity:.85}
/* Small signatures, generous negative space: impact without oversized type. */
.hero h1{white-space:nowrap}
main section:not(.contact) h2,.demo-feature h3,.service-row h3,.pricing-grid h3,.work-card h3,.reel-card strong,.mini-site h3{font-family:var(--sans)}
.demo-reel .reel-card strong{font-family:var(--sans);font-size:27px;line-height:1.65;letter-spacing:.025em;font-weight:500}
#reel-stage .mini-site h3{font-family:var(--sans)}
@media(max-width:1100px){.hero .hero-english{position:static;margin-top:25px;font-size:22px}}
.hero h1{font-size:clamp(38px,4vw,58px);line-height:1.8;letter-spacing:.13em;width:max-content}
.hero h1>.cyan{padding-left:1.5em;line-height:1.8}
.hero .eyebrow{font-size:12px;letter-spacing:.24em;margin-bottom:30px}
.hero .hero-english{top:105px;font-size:28px;line-height:1.3;right:0;max-width:none;white-space:nowrap;color:#c3dbe3}
.hero .hero-bottom{margin-top:65px}.hero .hero-bottom p{font-size:14px}
.contact h2{font-size:clamp(28px,3.3vw,46px);line-height:1.9;letter-spacing:.09em}
.contact h2>span:not(.letter){padding-left:1.6em}.contact .contact-bottom{margin-top:60px}
@media(max-width:760px){.hero h1{font-size:36px;letter-spacing:.1em;line-height:1.9}.hero h1>.cyan{padding-left:1.3em}.hero .hero-english{font-size:clamp(14px,4.3vw,20px);margin-top:28px}.hero .hero-bottom{margin-top:36px}.hero .hero-bottom p{font-size:13px}.hero .eyebrow{font-size:10px}.contact h2{font-size:27px;letter-spacing:.06em}.contact .contact-bottom{margin-top:35px}}
.reel-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:75px;font:13px var(--en);letter-spacing:.1em}
.reel-toolbar button{background:transparent;border:1px solid #456777;color:#254455;padding:10px 18px;cursor:pointer;font:13px var(--sans);min-height:44px}
.demo-reel{margin:25px 0 0;padding:80px 0 85px;overflow:hidden;background:radial-gradient(ellipse at center,#153644,#060d1b 72%);color:#edf5f7}
.reel-tilt{transform:rotate(-7deg);margin-inline:-30px}.reel-track{display:flex;width:max-content;animation:reel-travel 32s linear infinite}.reel-group{display:flex;gap:20px;padding-right:20px}.reel-card{width:350px;height:245px;position:relative;overflow:hidden;border:1px solid #9dd3d52b;background:#173442;color:#eef5f5;text-align:left;padding:25px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:filter .3s}
.reel-card:after{content:'';position:absolute;right:-30px;top:30px;width:150px;height:230px;border:1px solid #b6e6e438;transform:rotate(25deg);box-shadow:20px 0 0 #b6e6e412,40px 0 0 #b6e6e40b;pointer-events:none}.reel-card:hover{filter:brightness(1.17)}
.reel-label,.reel-open{font:13px var(--en);letter-spacing:.1em;position:relative;z-index:1}.reel-card strong{font:400 34px/1.5 var(--display);position:relative;z-index:1}.reel-ui{font:12px var(--sans);color:#bed4db;position:relative;z-index:1}.reel-open{align-self:flex-start;border-bottom:1px solid #accfd266;padding-bottom:5px}
.reel-fde{background:#162443}.reel-fde:after{border-radius:50%;width:180px;height:180px;box-shadow:0 0 35px #62e4ed33,inset 0 0 35px #62e4ed22}.reel-hp{background:#e5e7dc;color:#243d3b}.reel-hp .reel-ui{color:#405c55}.reel-lp{background:#2d4948}.reel-back{margin-top:16px;animation-direction:reverse;animation-duration:42s;opacity:.4}.reel-back .reel-card{height:65px;justify-content:center;cursor:default;font:18px var(--en);letter-spacing:.1em}.reel-back .reel-card:after{display:none}
.demo-reel:hover .reel-track,.demo-reel:focus-within .reel-track,.demo-reel.paused .reel-track{animation-play-state:paused}.reel-note{text-align:center;margin-top:24px!important;font-size:13px!important}
@keyframes reel-travel{to{transform:translateX(-50%)}}
#reel-dialog{width:min(760px,94vw);max-height:90svh;border:1px solid #53667d;background:#0b1429;color:#edf4f8;padding:0;overflow:auto}#reel-dialog::backdrop{background:#010716b8;backdrop-filter:blur(8px)}.reel-close{color:#eaf4f7;background:none;border:0;font-size:30px;cursor:pointer;min-width:44px;min-height:44px}#reel-title{font:500 25px/1.5 var(--sans);margin-bottom:25px}.fde-sample,.mini-site{padding:25px;background:#152c3c;margin-bottom:22px}.fde-sample>span{font-size:12px;color:#8bdde8}.fde-sample p{font-size:16px}.mini-site h3{font:400 36px/1.6 var(--display);margin:25px 0}.mini-site small{font-size:12px}.mini-site p{font-size:15px}.mini-hp{background:#e5e7dc;color:#243d3b}.mini-lp{background:#2d4948}.hp-demo-nav,.line-menu{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.hp-demo-nav button,.line-menu button{padding:12px 15px;border:1px solid #638d91;background:transparent;color:inherit;cursor:pointer;font:14px var(--sans);min-height:44px}.hp-demo-nav button[aria-pressed=true]{background:#243d3b;color:#fff}.line-demo{padding:24px;background:#254253}.line-bubble{background:#eff5f5;color:#203b43;padding:16px;border-radius:0 12px 12px;max-width:90%;font-size:15px;margin-bottom:15px}.line-bubble.mine{margin-left:auto;background:#8dd7a7}.line-menu button{background:#edf5f1;color:#254253;flex:1}.mini-site .button{font-size:14px}
@media(max-width:760px){.reel-toolbar{margin-top:45px;font-size:11px}.demo-reel{padding:60px 0}.reel-card{width:280px;height:230px;padding:22px}.reel-card strong{font-size:29px}.reel-ui{font-size:11px}.reel-note{font-size:12px!important}.mini-site{padding:18px}.mini-site h3{font-size:29px}.line-demo{padding:15px}}
@media(prefers-reduced-motion:reduce){.demo-reel .reel-track{animation:none;width:auto}.demo-reel .reel-tilt{transform:none;margin:0}.demo-reel .reel-group{flex-wrap:wrap;justify-content:center;padding:0 15px}.demo-reel .reel-group[aria-hidden],.demo-reel .reel-back{display:none}.demo-reel .reel-card{max-width:100%}}
.work-image,.demo-preview{transition:transform .65s cubic-bezier(.2,.75,.2,1),box-shadow .65s}
.work-image.tilting,.demo-preview.tilting{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 22px 55px #02132226}
.button,.image-arrow{transition:translate .25s ease-out,background .25s,transform .3s}
.reveal-ready{opacity:0;transform:translateY(35px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.reveal-ready.arrived{opacity:1;transform:none}
.service-row{transition:background .4s,transform .5s,opacity .9s}
.service-row>a{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.service-row:hover>a{transform:rotate(45deg)}
.service-row:hover .service-no{color:var(--cyan);transform:translateX(5px)}
.service-no{transition:color .35s,transform .35s}
.brand-mark{transition:transform .5s cubic-bezier(.3,1.7,.4,1)}
.brand:hover .brand-mark{transform:rotate(-9deg)}
.brand-mark>span{transition:transform .5s cubic-bezier(.3,1.7,.4,1)}
.brand:hover .brand-mark>span{transform:translate(2px,-10px) rotate(9deg)}
.about-dd>span{transition:transform .8s cubic-bezier(.2,1.4,.3,1)}
.about-dd:hover>span{transform:translate(20px,-.14em) rotate(9deg)}
.about-dd i{transition:transform .8s cubic-bezier(.2,1.4,.3,1)}
.kinetic-title .letter{display:inline-block;white-space:pre;transition:color .3s,translate .45s cubic-bezier(.2,1.8,.4,1)}
.contact h2>.letter{padding-left:0;color:inherit}
.kinetic-title.arrived .letter{animation:letter-settle .95s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--letter-delay)}
@keyframes letter-settle{from{opacity:0;transform:translate3d(0,.55em,0) rotate(7deg);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@media(hover:hover){.kinetic-title .letter:hover{color:var(--cyan);translate:0 -.13em}.works .kinetic-title .letter:hover{color:#147488}}
.value{position:relative;overflow:hidden}
.value:before{content:'BEYOND THE ORDINARY.';position:absolute;left:-8%;top:5%;font:500 clamp(80px,14vw,200px)/1 var(--en);white-space:nowrap;color:#7edce90c;transform:translateX(calc(var(--journey,.5)*12%)) rotate(-7deg);pointer-events:none}
.value>.wrap{position:relative}.value-grid article{border-top:1px solid #8bdfea3b;padding-top:25px}.value-grid article:nth-child(2){transition-delay:.12s}.value-grid article:nth-child(3){transition-delay:.24s}
.process-grid>h2{align-self:start;position:sticky;top:130px}
.process ol{position:relative;padding-left:24px;border-left:1px solid #73d9ed25}
.process ol:before{content:'';position:absolute;left:-1px;top:0;width:1px;height:100%;background:linear-gradient(#62e4ed00,#62e4ed);transform:scaleY(var(--journey,0));transform-origin:top;box-shadow:0 0 15px #62e4ed}
.process li>span{position:relative;color:var(--cyan)}
.process li>span:before{content:'';position:absolute;left:-29px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px #62e4ed66}
.about-dd{display:block;transform:perspective(700px) rotateY(calc((var(--journey,.5) - .5)*35deg)) rotateZ(calc((var(--journey,.5) - .5)*-12deg))}
.about-dd>span{display:inline-block;translate:calc((var(--journey,.5) - .5)*40px) calc((var(--journey,.5) - .5)*-35px)}
.contact .wrap{position:relative;z-index:1}.contact-dust{position:absolute;inset:-20% 0;pointer-events:none;transform:translateY(calc((var(--journey,.5) - .5)*-100px)) rotate(-14deg);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.contact-dust i{position:absolute;left:var(--gx);top:var(--gy);width:var(--gs);height:var(--gs);border-radius:50%;background:#81e8f2;box-shadow:0 0 9px #81e8f2;opacity:.2;animation:dust-drift 9s ease-in-out infinite alternate;animation-delay:calc(var(--gd)*-1)}
@keyframes dust-drift{from{translate:-15px 25px;opacity:.1}to{translate:35px -30px;opacity:.55}}
.contact-button>span{display:inline-block;transition:rotate .4s}.contact-button:hover>span{rotate:45deg}
.demo-tile:after{content:'デモを開く ↗';font-size:12px;letter-spacing:.1em;align-self:flex-start;border-bottom:1px solid #99dce766;padding-bottom:6px}
@media(max-width:760px){.process-grid>h2{position:static}.contact-dust{opacity:.6}.value:before{top:8%;font-size:80px}}
@media(prefers-reduced-motion:reduce){.kinetic-title .letter,.kinetic-title.arrived .letter,.contact-dust i{animation:none;transition:none;translate:none;filter:none}.about-dd,.about-dd>span,.contact-dust,.value:before{transform:none;translate:none}.process ol:before{transform:none}}
.about-dd:hover i{transform:translate(14px,-14px) rotate(45deg)}
@media(prefers-reduced-motion:reduce){#cursor-vortex{display:none}.reveal-ready{opacity:1;transform:none}.tilting{transform:none!important}.button,.image-arrow{translate:none!important}}