
:root{
  --white:#FCFCFA; --paper:#F6F5F1; --ink:#101218; --ink-2:#4B4E5A; --muted:#8B8D99;
  --night:#0B0D14; --night-2:#131624;
  --red:#E8462B; --orange:#F07A2E; --pink:#E82B6C;
  --grad:linear-gradient(100deg,var(--red) 0%,var(--orange) 48%,var(--pink) 100%);
  --rule:#1012181c; --rule-d:#FCFCFA22;
  --serif:"Zen Old Mincho",serif; --en:"Manrope",sans-serif; --body:"Noto Sans JP",sans-serif;
  --mx:clamp(1.4rem,5vw,6rem); --maxw:1200px; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:86px}
body{font-family:var(--body);background:var(--white);color:var(--ink);line-height:2.05;
  font-size:clamp(.95rem,.9rem + .2vw,1.02rem);letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:rgba(232,70,43,.25)}
.col{max-width:var(--maxw);margin:0 auto;padding-left:var(--mx);padding-right:var(--mx)}

header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(11,13,20,.85);backdrop-filter:blur(12px)}
header.scrolled{box-shadow:0 1px 0 #FCFCFA1a}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:var(--maxw);margin:0 auto;padding:0 var(--mx)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--white)}
.brand img{width:28px;height:28px;display:block}
.brand b{font-family:var(--en);font-weight:800;font-size:1.05rem;letter-spacing:.3em}
.bar nav{display:flex;gap:1.7rem;align-items:center;font-weight:500;font-size:.82rem;letter-spacing:.1em}
.bar nav a{color:#C7C9D2;position:relative;padding:.3rem 0;white-space:nowrap}
.bar nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.bar nav a:hover{color:var(--white)} .bar nav a:hover::after{transform:scaleX(1);transform-origin:left}
.bar nav a[aria-current="page"]{color:var(--white)} .bar nav a[aria-current="page"]::after{transform:scaleX(1)}
.bar .cta-s{color:var(--white);background:var(--grad);padding:.55rem 1.2rem;border-radius:3px;font-weight:700;white-space:nowrap;transition:opacity .25s,transform .25s var(--ease)}
.bar .cta-s::after{content:none}
.bar .cta-s:hover{opacity:.9;transform:translateY(-1px)}
@media(max-width:840px){.bar nav a.hideable{display:none}.bar{height:58px}}

.hero-dark{position:relative;background:var(--night);color:var(--white);overflow:hidden;
  min-height:92svh;display:grid;place-items:center;text-align:center;padding:7rem 0 5rem}
.hero-dark::before{content:"";position:absolute;inset:-20%;
  background:radial-gradient(38% 42% at 30% 68%,rgba(232,70,43,.32),transparent 70%),
             radial-gradient(34% 38% at 72% 30%,rgba(240,122,46,.26),transparent 70%),
             radial-gradient(30% 34% at 62% 78%,rgba(232,43,108,.22),transparent 70%);
  filter:blur(10px)}
.hero-dark::after{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23FCFCFA' stroke-opacity='.07'%3E%3Cpath d='M60 460 L200 320 L200 200 L320 80 M320 80 L460 80 M200 320 L340 320 L420 240'/%3E%3C/g%3E%3Cg fill='%23FCFCFA' fill-opacity='.12'%3E%3Ccircle cx='60' cy='460' r='4'/%3E%3Ccircle cx='200' cy='200' r='4'/%3E%3Ccircle cx='320' cy='80' r='4'/%3E%3Ccircle cx='460' cy='80' r='4'/%3E%3Ccircle cx='340' cy='320' r='4'/%3E%3Ccircle cx='420' cy='240' r='4'/%3E%3C/g%3E%3C/svg%3E")}
.hero-dark .in{position:relative;z-index:1;max-width:880px;padding:0 var(--mx)}
.hero-dark .mark{width:clamp(74px,11vw,104px);height:auto;margin:0 auto 2.2rem;display:block;filter:drop-shadow(0 8px 30px rgba(232,70,43,.35))}
.hero-dark .kicker{font-family:var(--en);font-weight:700;font-size:clamp(.78rem,1.4vw,.95rem);letter-spacing:.5em;color:#C7C9D2;margin-bottom:1.4rem}
.hero-dark .wordmark{font-family:var(--en);font-weight:800;font-size:clamp(3rem,10vw,6.5rem);letter-spacing:.18em;line-height:1.1;margin-bottom:2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-dark h1.copy{font-family:var(--serif);font-weight:700;font-size:clamp(1.25rem,2.8vw,1.9rem);line-height:1.8;letter-spacing:.06em;margin-bottom:1.2rem;max-width:none}
.hero-dark .sub{color:#B9BCC8;font-size:clamp(.92rem,1.3vw,1.02rem);line-height:2.1;max-width:40ch;margin:0 auto 2.8rem}
.btn{display:inline-flex;align-items:center;gap:.7rem;font-weight:700;font-size:.98rem;letter-spacing:.1em;
  color:var(--white);background:var(--grad);padding:1.05rem 2.5rem;border-radius:3px;
  box-shadow:0 16px 38px -18px rgba(232,70,43,.6);transition:opacity .25s,transform .3s var(--ease)}
.btn:hover{opacity:.92;transform:translateY(-2px)}
.btn .ar{transition:transform .3s var(--ease)} .btn:hover .ar{transform:translateX(5px)}
.btn-ghost{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.92rem;letter-spacing:.1em;
  color:var(--white);border:1px solid #FCFCFA3a;padding:1rem 2rem;border-radius:3px;transition:border-color .25s,background .25s}
.btn-ghost:hover{border-color:var(--white);background:#FCFCFA0d}
.hero-dark .actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.hero-light{padding:clamp(8rem,16vh,11rem) 0 clamp(3rem,7vw,5rem)}
.kicker{font-family:var(--en);font-weight:700;font-size:.8rem;letter-spacing:.42em;color:var(--red);margin-bottom:1.6rem;display:inline-flex;align-items:center;gap:1rem}
.hero-light .kicker::before{content:"";width:3rem;height:2px;background:var(--grad)}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.3rem,6vw,4.2rem);line-height:1.45;letter-spacing:.02em;margin-bottom:1.8rem;max-width:24ch}
.lead{font-size:clamp(.98rem,1.3vw,1.12rem);color:var(--ink-2);max-width:46ch;line-height:2.2}
section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.sec-kicker{font-family:var(--en);font-weight:700;font-size:.78rem;letter-spacing:.42em;color:var(--red);display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.sec-kicker::after{content:"";width:3rem;height:2px;background:var(--grad)}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.5;letter-spacing:.03em;margin-bottom:1.2rem}
.sec-lead{color:var(--ink-2);max-width:54ch;line-height:2.15;margin-bottom:3rem}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pillar{border:1px solid var(--rule);border-radius:4px;padding:2.2rem 1.9rem;background:#fff;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.pillar:hover{transform:translateY(-4px);box-shadow:0 20px 44px -28px rgba(16,18,24,.35)}
.pillar h3{font-family:var(--serif);font-weight:700;font-size:1.2rem;margin-bottom:.7rem;letter-spacing:.04em}
.pillar p{font-size:.92rem;color:var(--ink-2);line-height:2}
@media(max-width:760px){.pillars{grid-template-columns:1fr}}

.crew{background:var(--night);color:var(--white)}
.crew h2{color:var(--white)} .crew .sec-lead{color:#B9BCC8}
.crew-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.mate{border:1px solid var(--rule-d);border-radius:4px;padding:1.9rem 1.7rem;background:var(--night-2);transition:transform .3s var(--ease),border-color .3s}
.mate:hover{transform:translateY(-4px);border-color:#F07A2E66}
.mate .node{width:12px;height:12px;border-radius:50%;background:var(--grad);margin-bottom:1.2rem;box-shadow:0 0 14px rgba(240,122,46,.6)}
.mate .en{font-family:var(--en);font-weight:800;font-size:1.06rem;letter-spacing:.22em;margin-bottom:.25rem}
.mate .role{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--orange);margin-bottom:.8rem}
.mate p{font-size:.87rem;color:#B9BCC8;line-height:1.95}
.crew-note{margin-top:2rem;font-size:.78rem;color:#8B8D99}
@media(max-width:880px){.crew-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.crew-grid{grid-template-columns:1fr}}

.svc{display:grid;grid-template-columns:minmax(0,.4fr) 1fr;gap:clamp(1.2rem,3vw,3.4rem);padding:2.6rem 0;border-top:1px solid var(--rule);align-items:baseline}
.svc:last-of-type{border-bottom:1px solid var(--rule)}
.svc .name{font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:.04em}
.svc .name em{font-style:normal;display:block;font-family:var(--en);font-weight:800;font-size:.68rem;letter-spacing:.3em;margin-top:.55rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc .desc p{font-size:.97rem;color:var(--ink-2);line-height:2.1;max-width:52ch}
.svc .desc ul{list-style:none;margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.svc .desc li{font-size:.78rem;letter-spacing:.06em;color:var(--ink-2);border:1px solid var(--rule);padding:.3rem .9rem;border-radius:999px}
@media(max-width:680px){.svc{grid-template-columns:1fr;gap:.8rem;padding:2.1rem 0}}

.work{border:1px solid var(--rule);border-radius:4px;padding:clamp(1.8rem,4vw,2.8rem);background:#fff;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;position:relative;overflow:hidden}
.work::before{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--grad)}
.work h3{font-family:var(--serif);font-weight:700;font-size:1.4rem;margin-bottom:.6rem}
.work p{font-size:.94rem;color:var(--ink-2);line-height:2;max-width:56ch}
.work .go{font-family:var(--en);font-weight:800;font-size:.82rem;letter-spacing:.14em;color:var(--red);border:1px solid #E8462B55;padding:.8rem 1.6rem;border-radius:3px;white-space:nowrap;transition:background .25s,color .25s}
.work .go:hover{background:var(--red);color:#fff}
.work+.work{margin-top:1.1rem}
@media(max-width:680px){.work{grid-template-columns:1fr}}

.table{width:100%;border-collapse:collapse;max-width:760px}
.table th,.table td{border-top:1px solid var(--rule);padding:1.15rem .6rem;text-align:left;vertical-align:top;font-size:.96rem}
.table tr:last-child th,.table tr:last-child td{border-bottom:1px solid var(--rule)}
.table th{font-weight:700;letter-spacing:.08em;color:var(--ink-2);white-space:nowrap;width:11em}
.contact-box{border:1px solid var(--rule);border-radius:4px;padding:clamp(2rem,5vw,3.4rem);max-width:760px;background:#fff;position:relative;overflow:hidden}
.contact-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.contact-box p{color:var(--ink-2);line-height:2.1;margin-bottom:1.6rem;max-width:48ch}
.contact-mail{font-family:var(--en);font-weight:800;font-size:clamp(1.15rem,2.6vw,1.6rem);letter-spacing:.05em;color:var(--ink);border-bottom:2px solid var(--red);padding-bottom:.3rem}
.contact-note{margin-top:1.6rem;font-size:.8rem;color:var(--muted)}

.cta-band{background:var(--night);color:var(--white);text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:-30%;background:radial-gradient(40% 50% at 50% 120%,rgba(232,70,43,.4),transparent 70%)}
.cta-band .col{position:relative;z-index:1}
.cta-band h2{color:var(--white)}
.cta-band p{color:#B9BCC8;max-width:44ch;margin:0 auto 2.4rem}
.cta-band .sec-kicker{justify-content:center}
.cta-band .sec-kicker::after{display:none}

footer{background:var(--night);color:#B9BCC8;padding:3.2rem 0 2.8rem;border-top:1px solid #FCFCFA14}
.f-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem;align-items:center}
.f-brand img{width:190px;height:auto;display:block;filter:brightness(0) invert(1);opacity:.92}
.f-links{display:flex;gap:1.7rem;flex-wrap:wrap;font-size:.83rem;letter-spacing:.08em}
.f-links a{color:#B9BCC8;padding:.4rem 0}.f-links a:hover{color:var(--white)}
.f-note{margin-top:2rem;font-size:.75rem;color:#8B8D99}

.u{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s var(--ease)}
.u.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.u{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}}
