:root{
  --bg:#ffffff;
  --ink:#18140f;
  --ink-dim:#68655f;
  --blue:#2f6bff;
  --cyan:#0891b2;
  --blob-blue:#cfe1ff;
  --blob-cyan:#c7f4f2;
  --glitch-a:#ff3d81;
  --glitch-b:#0891b2;
  --border:rgba(24,20,15,0.12);
  --acc-01:#2f6bff;
  --acc-02:#ff3d81;
  --acc-03:#8b5cf6;
  --acc-04:#0891b2;
  --acc-05:#d97706;
  --acc-06:#16a34a;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans JP", sans-serif;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.mono{font-family:"Space Mono", monospace;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50; height:84px;
  display:flex; align-items:center; padding:0 clamp(20px,4vw,56px);
  transition:background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{ background:rgba(255,255,255,0.82); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.header-inner{ width:100%; max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
#header-logo-slot{ width:108px; height:28px; opacity:0; }
#header-logo-slot img{ display:block; width:100%; height:100%; object-fit:contain; }
nav.desktop-nav{ display:flex; gap:40px; }
.nav-media{ display:inline-flex; align-items:center; gap:5px; }
nav.desktop-nav a{ color:var(--ink-dim); text-decoration:none; font-size:14px; font-weight:700; letter-spacing:.02em; transition:color .25s ease; }
nav.desktop-nav a:hover{ color:var(--ink); }
.header-right{ display:flex; align-items:center; gap:20px; }
.cta-pill{ background:var(--ink); color:#fff; font-size:13px; font-weight:700; padding:11px 24px; border-radius:999px; text-decoration:none; white-space:nowrap; border:1.5px solid var(--ink); transition:background-color .25s ease, color .25s ease; }
.cta-pill:hover{ background:#fff; color:var(--ink); }
.burger{
  width:44px; height:44px; border-radius:999px; border:1px solid var(--border); background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; z-index:120;
  transition:border-color .25s ease, background-color .25s ease;
}
.burger:hover{ border-color:var(--ink); background:rgba(24,20,15,0.05); }
.burger span, .burger span::before, .burger span::after{ content:""; display:block; width:16px; height:1.5px; background:var(--ink); position:relative; transition:transform .3s ease, opacity .3s ease; }
.burger span::before{ position:absolute; top:-5px; }
.burger span::after{ position:absolute; top:5px; }
.burger.open span{ background:transparent; }
.burger.open span::before{ transform:translateY(5px) rotate(45deg); background:var(--ink); }
.burger.open span::after{ transform:translateY(-5px) rotate(-45deg); background:var(--ink); }
@media(max-width:1023px){ nav.desktop-nav{ display:none; } .cta-pill{ display:none; } }

/* ---------- hero ---------- */
.hero{ position:relative; height:calc(100vh - 84px); min-height:calc(100vh - 84px); display:flex; flex-direction:column; justify-content:center; padding:36px clamp(20px,5vw,64px) 44px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.dotgrid{ position:absolute; inset:0; background-image:radial-gradient(rgba(24,20,15,0.14) 1px, transparent 1px); background-size:26px 26px; opacity:.5; }
.blob{ position:absolute; border-radius:50%; filter:blur(80px); }
.blob-1{ width:46vw; height:46vw; top:-20%; left:-12%; background:radial-gradient(circle,var(--blob-blue),transparent 70%); animation:drift 16s ease-in-out infinite; }
.blob-2{ width:34vw; height:34vw; bottom:6%; right:-10%; background:radial-gradient(circle,var(--blob-cyan),transparent 70%); animation:drift 20s ease-in-out infinite reverse; }
@keyframes drift{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(3%,4%);} }

.hero-top{
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  text-align:center; max-width:1300px; margin:0 auto; width:100%;
}

.hero-left{ display:flex; flex-direction:column; align-items:center; width:100%; }
#hero-logo{ display:block; width:clamp(280px, 42vw, 620px); height:auto; }

.headline{
  margin-top:36px; font-weight:900; line-height:1.25; letter-spacing:.005em;
  font-size:clamp(1.2rem, 5.6vw, 4.6rem); color:var(--ink);
  white-space:nowrap; max-width:100%;
}

/* glitch layer (applied to headline) */
.glitch-wrap{ position:relative; display:inline-block; }
.glitch-wrap::before, .glitch-wrap::after{ content:attr(data-text); position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.glitching .glitch-wrap::before{ content:attr(data-text); color:var(--glitch-a); opacity:.8; clip-path:inset(20% 0 55% 0); transform:translate(-3px,-1px); animation:glitchTop .28s steps(2,end); }
.glitching .glitch-wrap::after{ content:attr(data-text); color:var(--glitch-b); opacity:.8; clip-path:inset(55% 0 15% 0); transform:translate(3px,1px); animation:glitchBottom .28s steps(2,end); }
.glitching .glitch-wrap{ animation:glitchShift .28s steps(2,end); }
/* monochrome (black) variant — jagged distortion without color separation */
.glitching-mono .glitch-wrap::before{ content:attr(data-text); color:var(--ink); opacity:.9; clip-path:inset(20% 0 55% 0); transform:translate(-4px,-1px); animation:glitchTop .26s steps(2,end); }
.glitching-mono .glitch-wrap::after{ content:attr(data-text); color:var(--ink); opacity:.9; clip-path:inset(55% 0 15% 0); transform:translate(4px,1px); animation:glitchBottom .26s steps(2,end); }
.glitching-mono .glitch-wrap{ animation:glitchShift .26s steps(2,end); }
@keyframes glitchShift{ 0%{transform:translate(0,0);} 20%{transform:translate(-2px,1px);} 40%{transform:translate(2px,-1px);} 60%{transform:translate(-1px,0);} 100%{transform:translate(0,0);} }
@keyframes glitchTop{ 0%{clip-path:inset(10% 0 70% 0);} 50%{clip-path:inset(35% 0 40% 0);} 100%{clip-path:inset(20% 0 55% 0);} }
@keyframes glitchBottom{ 0%{clip-path:inset(70% 0 5% 0);} 50%{clip-path:inset(45% 0 30% 0);} 100%{clip-path:inset(55% 0 15% 0);} }

.hero-right{ margin-top:40px; max-width:760px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-right .label{ font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.18em; color:var(--cyan); text-transform:uppercase; margin-bottom:16px; font-weight:700; }
.hero-right p{ color:var(--ink); font-size:clamp(16px,1.9vw,19px); line-height:1.9; font-weight:500; text-wrap:pretty; overflow-wrap:break-word; }
.hero-btns{ margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:32px; }

.btn-primary{ background:var(--ink); color:#fff; font-weight:700; font-size:16px; letter-spacing:.04em; padding:18px 32px; border-radius:999px; text-decoration:none; display:flex; align-items:center; justify-content:center; white-space:nowrap; border:1.5px solid var(--ink); width:240px; position:relative; transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn-primary:hover{ background:#fff; color:var(--ink); }
.btn-primary:hover svg path, .btn-primary:hover svg circle{ stroke:var(--ink); }
.btn-primary svg{ position:absolute; right:20px; top:50%; transform:translateY(-50%); }
.btn-primary svg path, .btn-primary svg circle{ transition:stroke .25s ease; }
.btn-ghost{ border:1.5px solid var(--glitch-a); color:#fff; font-weight:700; font-size:16px; letter-spacing:.04em; padding:18px 32px; border-radius:999px; text-decoration:none; display:flex; align-items:center; justify-content:center; white-space:nowrap; background:var(--glitch-a); width:240px; position:relative; transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn-ghost svg{ position:absolute; right:20px; top:50%; transform:translateY(-50%); }
.btn-ghost:hover{ border-color:var(--glitch-a); color:var(--glitch-a); background:#fff; }

.scroll-hint{ position:absolute; bottom:28px; left:clamp(20px,5vw,64px); font-family:"Space Mono",monospace; font-size:11px; color:var(--ink-dim); letter-spacing:.15em; display:flex; align-items:center; gap:10px; z-index:2; }
.scroll-hint::after{ content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--ink-dim),transparent); animation:scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ 0%{opacity:0; transform:scaleX(.4);} 50%{opacity:1; transform:scaleX(1);} 100%{opacity:0; transform:scaleX(.4);} }

/* flying logo (scroll-linked shrink, image based) */
#flying-logo{ position:fixed; top:0; left:0; z-index:60; pointer-events:none; will-change:transform; }
#flying-logo img{ display:block; width:100%; height:auto; }

/* ---------- filler section ---------- */
.filler{ max-width:900px; margin:0 auto; padding:80px 24px; color:var(--ink-dim); font-size:14px; line-height:2; }
.filler h2{ color:var(--ink); font-size:22px; margin-bottom:16px; font-weight:700; }

/* ---------- services section ---------- */
.services{ position:relative; padding:100px var(--spad) 0; overflow:hidden; --spad:clamp(20px,5vw,64px); }
.services::before{
  content:""; position:absolute; left:0; right:0; top:250px; bottom:0; z-index:0;
  background:#f5f5f5;
  border-radius:50% 50% 0 0 / 540px 540px 0 0;
}
.services .hero-bg{ opacity:.8; }
.services-header{
  position:relative; z-index:2; max-width:1440px; margin:0 auto; padding-bottom:0; border-bottom:none;
}
.h-wrap{ margin-left:calc(50% - (var(--vw100, 100vw) / 2)); margin-right:calc(50% - (var(--vw100, 100vw) / 2)); padding-left:var(--logo-x, clamp(20px,4vw,56px)); overflow:hidden; padding-bottom:.12em; }
.h-headline{
  position:relative; display:inline-block; cursor:default;
  font-weight:900; font-size:clamp(5rem,16vw,14rem); line-height:1.06; letter-spacing:-.02em;
  white-space:nowrap; padding-left:0;
  background:linear-gradient(90deg, var(--ink) 0%, var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.services-grid{ position:relative; z-index:2; max-width:1360px; margin:0 auto; display:flex; flex-direction:column; gap:72px; }
.service-card{ display:flex; flex-direction:column; }
.service-card-media{ position:relative; width:100%; aspect-ratio:21/9; border-radius:26px; overflow:hidden; }
.service-card-media .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%); }
.service-card-num{ position:absolute; top:26px; left:30px; color:#fff; font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.08em; opacity:.9; }
.service-card-tag{ position:absolute; top:24px; right:28px; font-size:10px; font-weight:700; letter-spacing:.1em; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.9); color:var(--ink); }
.service-card-title{ position:absolute; left:30px; right:30px; bottom:26px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; color:#fff; }
.service-card-title h3{ font-weight:900; font-size:clamp(1.9rem,4vw,3.2rem); line-height:1; }
.service-card-title .cat{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-top:8px; display:block; }

.service-card-body{ display:flex; gap:44px; flex-wrap:wrap; align-items:flex-start; margin-top:28px; }
.service-desc{ flex:1 1 420px; color:var(--ink-dim); font-size:14.5px; line-height:1.9; max-width:640px; }
.service-bullets{ flex:0 1 260px; display:flex; flex-direction:column; gap:10px; }
.service-side{ flex:0 1 260px; display:flex; flex-direction:column; }
.service-side .service-bullets{ flex:none; }
.service-bullets li{ display:flex; align-items:flex-start; gap:12px; font-size:13px; font-weight:700; color:var(--ink); list-style:none; }
.service-bullets li::before{ content:""; width:6px; height:6px; border-radius:999px; background:var(--dot,var(--ink)); margin-top:6px; flex:none; opacity:.75; }

.btn-sm{ display:inline-flex; align-items:center; gap:10px; padding:13px 18px 13px 22px; border-radius:999px; background:var(--ink); color:#fff; font-weight:700; font-size:13px; text-decoration:none; border:1.5px solid var(--ink); position:relative; margin-top:20px; transition:background-color .25s ease, color .25s ease; }
.btn-sm svg{ position:relative; }
.btn-sm:hover{ background:#fff; color:var(--ink); }
.btn-sm:hover svg path, .btn-sm:hover svg circle{ stroke:var(--ink); }
.btn-sm svg path, .btn-sm svg circle{ transition:stroke .25s ease; }

@media(max-width:720px){ .service-card-media{ aspect-ratio:4/3.4; } .service-card-title h3{ font-size:1.7rem; } }

/* ---------- fullscreen nav overlay (kept dark, unchanged) ---------- */
.menu-overlay{
  position:fixed; inset:0; z-index:100; background:#fbfbfa; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .55s cubic-bezier(.22,1,.36,1); overflow:hidden;
  --border:rgba(24,20,15,0.12);
}
.menu-overlay.open{ transform:translateX(0); }
.menu-overlay .blob{ opacity:.55; filter:blur(90px); }
.menu-overlay .blob-1{ background:radial-gradient(circle,var(--blob-blue),transparent 70%); }
.menu-overlay .blob-2{ background:radial-gradient(circle,var(--blob-cyan),transparent 70%); }
.menu-watermark{
  position:absolute; right:-6%; bottom:-12%; font-weight:900; font-size:min(46vw,560px);
  color:transparent; -webkit-text-stroke:1px rgba(24,20,15,.07); line-height:1; z-index:0;
  user-select:none; pointer-events:none;
}
.menu-marquee{
  position:absolute; top:38%; left:0; width:100%; z-index:0; white-space:nowrap; pointer-events:none;
  font-family:"Space Mono",monospace; font-size:clamp(40px,9vw,110px); font-weight:700;
  color:transparent; -webkit-text-stroke:1px rgba(24,20,15,.06); letter-spacing:.02em;
}
.menu-marquee span{ display:inline-block; padding-right:60px; animation:marquee 26s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.menu-top{ position:relative; z-index:2; height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,4vw,56px); border-bottom:1px solid var(--border); }
.menu-top .menu-eyebrow{ font-family:"Space Mono",monospace; font-size:11px; color:var(--ink-dim); letter-spacing:.2em; }

.menu-body{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; padding:20px clamp(24px,6vw,90px); }
.menu-item{ display:flex; align-items:baseline; gap:22px; padding:14px 0; border-bottom:1px solid var(--border); text-decoration:none; color:var(--ink); position:relative; }
.menu-accordion-trigger{ width:100%; background:none; border:none; border-bottom:1px solid var(--border); cursor:pointer; font-family:inherit; font-size:inherit; color:inherit; text-align:left; position:relative; }
.menu-group.open .menu-accordion-trigger{ border-bottom-color:transparent; }
.menu-accordion-icon{ margin-left:auto; width:30px; height:30px; border-radius:99px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; flex:none; transition:transform .3s ease, border-color .3s ease; color:var(--ink); }
.menu-group.open .menu-accordion-icon{ transform:rotate(180deg); border-color:var(--ink); }
.menu-sublist{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,1,.36,1); border-bottom:1px solid var(--border); }
.menu-group.open .menu-sublist{ max-height:400px; }
.menu-sublist-inner{ display:flex; flex-direction:column; padding:6px 0 22px 50px; gap:2px; }
.menu-subitem{ display:flex; align-items:center; gap:14px; padding:11px 14px; margin:0 -14px; border-radius:12px; text-decoration:none; color:var(--ink); font-size:16px; font-weight:700; transition:background .2s ease, transform .2s ease; }
.menu-subitem:hover{ background:rgba(0,0,0,.04); transform:translateX(4px); }
.menu-subitem-dot{ width:9px; height:9px; border-radius:99px; background:var(--sub-acc,var(--ink)); flex:none; }
.menu-item .num{ font-family:"Space Mono",monospace; font-size:13px; color:var(--cyan); }
.menu-item .label{ font-size:clamp(26px,5vw,48px); font-weight:900; letter-spacing:.01em; transition:transform .3s ease, color .3s ease; }
.menu-item .desc{ font-size:12px; color:var(--ink-dim); font-family:"Space Mono",monospace; opacity:0; transform:translateX(-8px); transition:opacity .3s ease, transform .3s ease; display:none; }
@media(min-width:640px){ .menu-item .desc{ display:block; } }
.menu-item:hover .label{ transform:translateX(10px); color:var(--cyan); }
.menu-item:hover .desc{ opacity:1; transform:translateX(0); }

.menu-footer{
  position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;
  padding:24px clamp(24px,6vw,90px) 40px; border-top:1px solid var(--border);
  font-family:"Space Mono",monospace; font-size:12px; color:var(--ink-dim);
}
.menu-footer a{ color:var(--ink-dim); text-decoration:none; }
.menu-social{ display:flex; gap:10px; }
.menu-social a{
  width:34px; height:34px; border:1px solid var(--border); border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--ink); transition:border-color .25s ease, color .25s ease;
}
.menu-social a:hover{ border-color:var(--cyan); color:var(--cyan); }
#jstClock::before{ content:"JST "; color:var(--ink-dim); }/* ---------- services: stacking scroll cards ---------- */
.stack{ position:relative; }
.stack-item{
  position:sticky; top:0; min-height:100vh;
  background:#fff;
  display:flex; align-items:center;
  padding:40px clamp(20px,5vw,64px);
}
.stack-item-inner{ max-width:1360px; margin:0 auto; width:100%; display:flex; gap:64px; align-items:center; flex-wrap:wrap; }
.stack-left{ flex:1 1 460px; min-width:0; }
.stack-eyebrow{ display:flex; align-items:center; gap:18px; margin-bottom:26px; flex-wrap:wrap; }
.stack-eyebrow .num{ font-family:"Space Mono",monospace; font-size:60px; font-weight:700; color:var(--ink); }
.stack-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.stack-tag{ font-family:"Space Mono",monospace; font-weight:700; font-size:13px; letter-spacing:.03em; border:1.5px solid var(--ink); border-radius:99px; padding:7px 16px; color:var(--ink); }
.stack-title{ font-weight:900; font-size:clamp(2.8rem,6vw,5.2rem); line-height:1.02; margin:26px 0 30px; letter-spacing:1px; white-space:nowrap; }
.stack-left p{ color:#2c2c2c; font-size:17px; line-height:1.95; max-width:640px; letter-spacing:1px; margin-bottom:28px; }
.stack-bullets{ display:flex; flex-direction:column; gap:14px; }
.stack-bullets li{ list-style:none; display:flex; align-items:flex-start; gap:12px; font-weight:700; font-size:15px; color:var(--ink); }
.stack-bullets li::before{ content:""; width:7px; height:7px; border-radius:99px; background:var(--acc,var(--ink)); margin-top:7px; flex:none; }
.stack-more{
  display:flex; flex-direction:column; align-items:flex-start; margin-top:32px;
  font-family:"Space Mono",monospace; font-weight:700; font-size:24px; letter-spacing:.05em;
  color:var(--ink); text-decoration:none; cursor:pointer;
}
.more-line{ position:relative; width:60px; height:2px; background:var(--ink); margin-top:6px; transition:width .4s cubic-bezier(.22,1,.36,1); }
.more-line::after{
  content:""; position:absolute; right:0; top:0; width:11px; height:2px; background:var(--ink);
  transform-origin:100% 50%;
  transform:rotate(45deg);
}
.stack-more:hover .more-line{ width:100px; }
.stack-media{ flex:1 1 480px; max-width:600px; aspect-ratio:1/1; border-radius:28px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 30px 60px -20px rgba(0,0,0,0.25); }
.stack-media svg{ width:120%; height:120%; }
/* ---------- owned media ---------- */
.media-section{ padding:60px var(--logo-x, clamp(20px,4vw,56px)) 120px; }
.media-card{
  position:relative; border-radius:36px; overflow:hidden; padding:clamp(36px,6vw,80px);
  background:linear-gradient(150deg, var(--acc-03), #241455 85%);
  display:flex; gap:56px; align-items:center; flex-wrap:wrap; color:#fff;
}
.media-card .blob{ opacity:.5; }
.media-logo{ height:26px; opacity:.9; margin-bottom:28px; border-radius:4px; }
.media-left{ flex:1 1 420px; position:relative; z-index:2; }
.media-left h2{ font-weight:900; font-size:clamp(1.8rem,3.4vw,2.8rem); line-height:1.35; margin-bottom:22px; letter-spacing:.5px; }
.media-left p{ color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.95; max-width:620px; margin-bottom:8px; }
.media-more{
  display:flex; flex-direction:column; align-items:flex-start; margin-top:30px;
  font-family:"Space Mono",monospace; font-weight:700; font-size:20px; letter-spacing:.05em;
  color:#fff; text-decoration:none; cursor:pointer;
}
.media-more-line{ position:relative; width:230px; height:2px; background:#fff; margin-top:6px; transition:width .4s cubic-bezier(.22,1,.36,1); }
.media-more-line::after{
  content:""; position:absolute; right:0; top:0; width:11px; height:2px; background:#fff;
  transform-origin:100% 50%; transform:rotate(45deg);
}
.media-more:hover .media-more-line{ width:280px; }

.media-right{ flex:1 1 380px; max-width:520px; position:relative; z-index:2; }
.browser-mock{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:20px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.4); }
.browser-bar{ display:flex; gap:6px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.14); }
.browser-bar span{ width:9px; height:9px; border-radius:99px; background:rgba(255,255,255,.35); }
.browser-body{ padding:26px; display:flex; flex-direction:column; gap:12px; }
.browser-body .line{ height:10px; border-radius:5px; background:rgba(255,255,255,.16); }
.browser-body .line.w60{ width:60%; } .browser-body .line.w80{ width:80%; } .browser-body .line.w40{ width:40%; }
.browser-thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
.browser-thumbs div{ aspect-ratio:16/10; border-radius:10px; background:rgba(255,255,255,.1); }
/* ---------- about ---------- */
.about-section{ padding:100px 0 140px; border-top:1px solid var(--border); }
.about-inner{ max-width:1360px; margin:0 auto; padding:0 clamp(20px,4vw,56px); display:flex; gap:48px; flex-wrap:wrap; }
.about-left{ flex:1 1 480px; max-width:560px; }
.about-heading{ font-weight:900; font-size:clamp(2.6rem,5vw,4.4rem); line-height:1; margin-bottom:36px; letter-spacing:-.01em; }
.about-lead{ font-size:17px; line-height:2.05; color:var(--ink); font-weight:500; max-width:520px; margin-bottom:24px; }
.about-lead:last-child{ margin-bottom:0; }
.about-name{ margin-top:44px; display:flex; align-items:baseline; gap:16px; }
.about-name .jp{ font-weight:900; font-size:1.5rem; }
.about-name .en{ font-family:"Space Mono",monospace; font-size:12px; color:var(--ink-dim); letter-spacing:.05em; }

.about-right{ flex:1 1 420px; max-width:520px; }
.about-table{ border-top:1px solid var(--border); }
.about-row{ display:flex; gap:24px; padding:22px 0; border-bottom:1px solid var(--border); }
.about-row dt{ flex:0 0 108px; font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.05em; color:var(--ink-dim); padding-top:2px; }
.about-row dd{ flex:1; font-size:14.5px; line-height:1.85; color:var(--ink); font-weight:500; }
.about-row dd a{ color:var(--ink); }
/* ---------- news ---------- */
.news-section{ padding:100px 0 140px; border-top:1px solid var(--border); }
.news-inner{ max-width:1360px; margin:0 auto; padding:0 clamp(20px,4vw,56px); }
.news-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:48px; flex-wrap:wrap; }
.news-heading{ font-weight:900; font-size:clamp(2.6rem,5vw,4.4rem); line-height:1; letter-spacing:-.01em; }
.news-viewall{
  display:flex; flex-direction:column; align-items:flex-start; margin-bottom:8px; width:140px;
  font-family:"Space Mono",monospace; font-weight:700; font-size:15px; letter-spacing:.05em;
  color:var(--ink); text-decoration:none; cursor:pointer;
}
.news-viewall-line{ position:relative; width:90px; height:2px; background:var(--ink); margin-top:6px; transition:width .4s cubic-bezier(.22,1,.36,1); }
.news-viewall-line::after{
  content:""; position:absolute; right:0; top:0; width:9px; height:2px; background:var(--ink);
  transform-origin:100% 50%; transform:rotate(45deg);
}
.news-viewall:hover .news-viewall-line{ width:115px; }

.news-list{ border-top:1px solid var(--border); }
.news-row{ display:flex; align-items:center; gap:28px; padding:26px 4px; border-bottom:1px solid var(--border); text-decoration:none; color:var(--ink); transition:opacity .2s ease; }
.news-row:hover{ opacity:.55; }
.news-date{ font-family:"Space Mono",monospace; font-size:13px; color:var(--ink-dim); flex:0 0 100px; }
.news-tag{ font-family:"Space Mono",monospace; font-weight:700; font-size:11px; letter-spacing:.05em; border:1.5px solid var(--ink); border-radius:99px; padding:5px 13px; flex:0 0 88px; text-align:center; }
.news-title{ font-size:15.5px; font-weight:700; flex:1; }
.news-arrow{ flex:0 0 auto; opacity:.4; }
/* ---------- contact ---------- */
.contact-section{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:#141110; color:#fff; padding:160px clamp(20px,4vw,56px) 140px;
  text-align:center; position:relative; overflow:hidden;
}
.contact-heading{ font-weight:900; font-size:clamp(3rem,7vw,6rem); line-height:1; letter-spacing:-.01em; margin-bottom:28px; }
.contact-lead{ font-size:16.5px; line-height:1.95; color:rgba(255,255,255,.72); max-width:560px; margin:0 auto 56px; }
.contact-form{ max-width:640px; margin:0 auto; text-align:left; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.form-row.single{ grid-template-columns:1fr; }
.form-field{ margin-bottom:28px; }
.form-label{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; margin-bottom:12px; color:rgba(255,255,255,.9); }
.form-required{ font-family:"Space Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.03em; background:var(--glitch-a); color:#fff; padding:3px 9px; border-radius:99px; }
.form-optional{ font-family:"Space Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.03em; border:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.55); padding:3px 9px; border-radius:99px; }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:10px;
  padding:14px 16px; font-size:15px; color:#fff; font-family:inherit; transition:border-color .2s ease, background .2s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:rgba(255,255,255,.32); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--glitch-a); background:rgba(255,255,255,.1);
}
.contact-form textarea{ resize:vertical; min-height:140px; }
.contact-form select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.contact-form select option{ background:#141110; color:#fff; }
.contact-submit{
  display:flex; align-items:center; justify-content:center; gap:10px; width:auto;
  background:var(--glitch-a); color:#fff; font-weight:700; font-size:15px; letter-spacing:.04em;
  padding:16px 36px; border-radius:999px; border:none; cursor:pointer; margin:36px auto 0;
  transition:background-color .25s ease, color .25s ease; font-family:inherit;
}
.contact-submit:hover{ background:#fff; color:var(--glitch-a); }
.contact-submit svg{ flex:none; }
/* ---------- copyright ---------- */
.copyright-bar{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:#141110; color:#fff; text-align:center;
  padding:28px clamp(20px,4vw,56px); font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.05em;
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:auto;
}