:root{--black:#080b0f;--ink:#11151b;--blue:#125dff;--yellow:#f5e900;--teal:#10b8ae;--white:#f6f7f4;--gray:#b7bdc5;--line:rgba(255,255,255,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--white);font-family:"Noto Sans JP",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;width:100%}.container{width:min(1180px,calc(100% - 48px));margin:auto}
.site-header{position:fixed;z-index:100;top:0;left:0;width:100%;height:84px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;color:#fff;transition:.3s}.site-header.scrolled{height:70px;background:rgba(8,11,15,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font:900 25px/1 Montserrat,sans-serif;letter-spacing:.07em}.brand-mark{display:flex;width:32px;height:32px;transform:skew(-12deg);gap:3px}.brand-mark i{display:block;flex:1}.brand-mark i:nth-child(1){background:var(--blue)}.brand-mark i:nth-child(2){background:var(--yellow)}.brand-mark i:nth-child(3){background:var(--teal)}
.global-nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:700}.global-nav a{position:relative}.global-nav a:not(.nav-contact):after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--yellow);transition:.25s}.global-nav a:hover:after{width:100%}.nav-contact{padding:13px 20px;background:var(--yellow);color:var(--black)}.menu-button{display:none;background:none;border:0;color:#fff}
.hero{min-height:780px;height:100svh;position:relative;background:var(--black);color:#fff;overflow:hidden}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,14,.96) 0%,rgba(5,8,14,.72) 40%,rgba(5,8,14,.08) 77%),linear-gradient(0deg,rgba(4,7,10,.65),transparent 45%)}.hero-image{position:absolute;inset:0;height:100%;object-fit:cover}.hero-grid{position:absolute;z-index:1;inset:0;opacity:.11;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,#000,transparent 75%)}.hero-copy{position:relative;z-index:2;width:min(1180px,calc(100% - 48px));margin:auto;padding-top:22vh}.eyebrow,.works-label{font:700 11px/1.4 Montserrat,sans-serif;letter-spacing:.22em;color:var(--teal)}.hero h1{margin:24px 0 20px;font-size:clamp(56px,6.8vw,104px);line-height:1.08;letter-spacing:-.06em;font-weight:900}.hero h1>span{display:block;white-space:nowrap}.hero h1 .accent{display:inline;color:var(--yellow);position:relative}.hero h1 .accent:after{content:"";position:absolute;z-index:-1;left:-6px;right:-7px;bottom:6px;height:16px;background:var(--blue);transform:rotate(-2deg)}.hero-lead{font-size:17px;line-height:1.9;color:#dde1e6}.hero-actions{display:flex;align-items:center;gap:36px;margin-top:36px}.button{display:inline-flex;align-items:center;justify-content:center;font-weight:700}.button-yellow{width:240px;padding:16px 18px;background:var(--yellow);color:var(--black);flex-direction:column;clip-path:polygon(0 0,94% 0,100% 28%,100% 100%,0 100%)}.button-yellow small{font-size:11px}.button-yellow strong{font:800 23px/1.4 Montserrat,sans-serif}.text-link{font-size:14px;font-weight:700;border-bottom:1px solid #fff;padding:12px 0}.text-link span{color:var(--yellow);margin-left:12px}.hero-badge{position:absolute;z-index:3;right:5vw;bottom:7vh;width:126px;height:126px;background:var(--yellow);color:var(--black);border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(6deg);box-shadow:0 0 0 10px rgba(245,233,0,.12)}.hero-badge span{font:800 10px Montserrat;letter-spacing:.18em}.hero-badge strong{font-size:17px;line-height:1.15}.hero-badge b{font-size:26px;line-height:1}.scroll-note{position:absolute;z-index:3;right:26px;top:44%;font:700 9px Montserrat;letter-spacing:.2em;writing-mode:vertical-rl}.scroll-note span{display:inline-block;width:1px;height:60px;background:var(--yellow);margin-top:12px}
.section-dark{background:var(--black);color:#fff}.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--blue);font:900 clamp(34px,5vw,76px)/1.25 Montserrat,sans-serif;white-space:nowrap}.ticker div{width:max-content;animation:ticker 22s linear infinite}@keyframes ticker{to{transform:translateX(-50%)}}.intro{padding-bottom:130px}.intro-layout{display:grid;grid-template-columns:110px 1.1fr .8fr;gap:50px;align-items:end;padding-top:110px}.section-index span,.section-title>div span{color:var(--yellow);font:800 12px Montserrat}.section-index p,.section-title>div p{margin:7px 0;font:700 10px Montserrat;letter-spacing:.2em}.kicker{color:var(--teal);font-size:13px;font-weight:700;line-height:1.7;margin:0 0 18px}.intro h2,.company h2{margin:0;font-size:clamp(37px,4vw,62px);line-height:1.35;letter-spacing:-.04em}.intro h2 em,.company h2 em{font-style:normal;color:var(--yellow)}.intro-text{margin:0;color:var(--gray);font-size:14px;line-height:2.1}
.services{padding:130px 0;background:#eef0ed}.section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:55px;border-bottom:2px solid var(--ink);padding-bottom:25px}.section-title h2{margin:0;font-size:clamp(45px,6vw,76px);line-height:1;font-weight:900;letter-spacing:-.06em}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.service-card,.service-photo{position:relative;min-height:360px;overflow:hidden;padding:42px}.service-card h3,.service-photo h3{margin:70px 0 4px;font-size:clamp(35px,4vw,58px);line-height:1;font-weight:900;letter-spacing:-.05em}.service-card p,.service-photo p{font:700 10px Montserrat;letter-spacing:.18em}.service-no{font:800 12px Montserrat}.service-main{background:var(--yellow)}.service-blue{background:var(--blue);color:#fff}.shape{position:absolute;right:-30px;bottom:-55px}.shape-yellow{width:210px;height:210px;background:var(--blue);transform:rotate(25deg)}.shape-ring{width:230px;height:230px;border:45px solid var(--yellow);border-radius:50%}.service-photo{padding:0;min-height:500px}.service-photo img{height:100%;object-fit:cover;filter:saturate(.85) contrast(1.08)}.service-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.8))}.service-photo>div{position:absolute;z-index:2;left:42px;bottom:35px;color:#fff}.service-photo h3{margin:8px 0}.service-list{background:var(--teal)}.service-list ul{list-style:none;padding:0;margin:58px 0 0}.service-list li{font-size:23px;font-weight:900;padding:19px 0;border-bottom:1px solid rgba(0,0,0,.28);display:flex;justify-content:space-between;align-items:center}.service-list small{font:700 9px Montserrat;letter-spacing:.1em}
.works{padding:130px 0}.title-light{border-color:#fff}.works-layout{display:grid;grid-template-columns:.8fr 1.1fr;gap:8vw;align-items:start}.works-copy{position:sticky;top:120px}.works-copy h3{font-size:clamp(35px,4vw,54px);line-height:1.35;margin:22px 0}.works-copy>p:not(.works-label){color:var(--gray);line-height:2;font-size:14px;max-width:420px}.button-outline{margin-top:28px;border:1px solid var(--blue);color:#fff;padding:18px 25px}.instagram-shell{background:#fff;padding:14px;transform:rotate(1deg);box-shadow:18px 18px 0 var(--blue)}.instagram-shell iframe{display:block;width:100%;height:720px;border:0}
.company{padding:140px 0;background:var(--yellow)}.company-grid{display:grid;grid-template-columns:.8fr 1fr;gap:8vw;align-items:start}.company-heading>p{line-height:2;margin-top:35px;max-width:430px}.company-card{background:var(--black);color:#fff;padding:55px;clip-path:polygon(0 0,92% 0,100% 9%,100% 100%,0 100%)}.company-label{color:var(--teal);font:700 10px Montserrat;letter-spacing:.18em}.company-card h3{font:900 clamp(44px,5vw,72px) Montserrat;margin:18px 0 35px}.company-card dl{margin:0}.company-card dl div{display:grid;grid-template-columns:90px 1fr;border-top:1px solid var(--line);padding:20px 0}.company-card dt{color:var(--gray);font-size:12px}.company-card dd{margin:0;font-weight:700;line-height:1.7}.company-links{display:flex;gap:15px;margin-top:25px}.company-links a{background:var(--blue);padding:14px 18px;font-size:12px;font-weight:700}
.contact{position:relative;background:var(--blue);color:#fff;padding:130px 0;overflow:hidden}.contact .container{position:relative;z-index:2}.contact p{font:700 11px Montserrat;letter-spacing:.24em}.contact h2{font-size:clamp(55px,8vw,110px);line-height:1.05;margin:20px 0 45px;letter-spacing:-.07em}.contact h2 span{color:var(--yellow)}.contact a{display:flex;align-items:center;max-width:650px;background:#fff;color:var(--black);padding:22px 28px;gap:20px}.contact a small{font-weight:700}.contact a strong{font:900 clamp(24px,4vw,42px) Montserrat;margin-left:auto}.contact a b{font-size:30px;color:var(--blue)}.contact-shapes i{position:absolute}.contact-shapes i:nth-child(1){width:300px;height:300px;border:60px solid var(--yellow);border-radius:50%;right:-80px;top:-90px}.contact-shapes i:nth-child(2){width:210px;height:500px;background:var(--teal);right:18%;bottom:-300px;transform:rotate(35deg)}.contact-shapes i:nth-child(3){width:130px;height:130px;background:var(--black);right:6%;bottom:12%;transform:rotate(18deg)}
footer{background:var(--black);color:#fff;padding:60px 5vw;display:flex;align-items:end;gap:30px}footer p{color:var(--gray);font:600 9px Montserrat;letter-spacing:.18em}footer small{margin-left:auto;color:#777}.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s,transform .75s}.reveal.visible{opacity:1;transform:none}
@media(max-width:780px){.container{width:min(100% - 32px,620px)}.site-header{height:70px;padding:0 20px}.brand{font-size:20px}.brand-mark{width:27px;height:27px}.menu-button{display:grid;width:44px;height:44px;padding:9px;place-content:center;gap:5px;position:relative;z-index:102}.menu-button span{display:block;width:25px;height:2px;background:#fff;transition:.25s}.menu-button b{font:600 7px Montserrat}.menu-button.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-button.open span:nth-child(2){opacity:0}.menu-button.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.global-nav{position:fixed;inset:0;background:var(--black);display:flex;flex-direction:column;justify-content:center;font-size:20px;transform:translateX(100%);transition:.35s}.global-nav.open{transform:none}.nav-contact{margin-top:15px}.hero{min-height:700px}.hero-image{object-position:62% center}.hero:after{background:linear-gradient(90deg,rgba(5,8,14,.93),rgba(5,8,14,.3)),linear-gradient(0deg,rgba(4,7,10,.84),transparent)}.hero-copy{width:calc(100% - 40px);padding-top:24vh}.eyebrow{font-size:8px}.hero h1{font-size:clamp(43px,13vw,62px);margin-top:19px}.hero h1>span{white-space:nowrap}.hero-lead{font-size:14px}.hero-actions{align-items:flex-start;flex-direction:column;gap:12px;margin-top:25px}.button-yellow{width:215px}.hero-badge{width:92px;height:92px;right:20px;bottom:30px}.hero-badge strong{font-size:13px}.hero-badge b{font-size:20px}.scroll-note{display:none}.intro{padding-bottom:80px}.intro-layout{grid-template-columns:1fr;gap:20px;padding-top:75px}.section-index{display:flex;gap:10px;align-items:center}.intro h2,.company h2{font-size:38px}.intro-text{font-size:13px}.services,.works{padding:80px 0}.section-title{margin-bottom:35px}.section-title h2{font-size:48px}.service-grid{grid-template-columns:1fr}.service-card{min-height:300px;padding:30px}.service-card h3{margin-top:55px}.service-photo{min-height:410px}.service-list li{font-size:20px}.works-layout{grid-template-columns:1fr;gap:45px}.works-copy{position:static}.instagram-shell{padding:8px;box-shadow:10px 10px 0 var(--blue);transform:none}.instagram-shell iframe{height:650px}.company{padding:80px 0}.company-grid{grid-template-columns:1fr;gap:45px}.company-card{padding:35px 25px}.company-card dl div{grid-template-columns:70px 1fr}.company-links{flex-wrap:wrap}.contact{padding:85px 0}.contact h2{font-size:56px}.contact a{padding:18px;flex-wrap:wrap;gap:5px}.contact a strong{width:100%;order:2;margin:0;font-size:30px}.contact a b{margin-left:auto}footer{align-items:flex-start;flex-direction:column}footer small{margin:0}}
@media(max-width:390px){.hero h1{font-size:40px}.hero h1 .accent:after{height:9px}.intro h2,.company h2{font-size:34px}.instagram-shell iframe{height:590px}.contact h2{font-size:48px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker div{animation:none}.reveal{opacity:1;transform:none;transition:none}}
.intro h2 span{display:block;white-space:nowrap}
@media(max-width:390px){.intro h2{font-size:30px}}
.service-grid>.service-photo{grid-column:1/-1}
.company h2 em{color:var(--blue)}
.company h2 em{white-space:nowrap}
