:root {
  --paper: #f4f1e8;
  --ink: #171717;
  --blue: #2457ff;
  --pink: #2457ff;
  --yellow: #c5cbd4;
  --green: #73808e;
  --line: rgba(23, 23, 23, .18);
  --sans: "DM Sans", "Noto Sans JP", sans-serif;
  --jp: "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  height: 76px; padding: 0 clamp(20px, 4vw, 64px); display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(244,241,232,.9);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 13px; height: 13px; background: var(--blue); position: relative; }
.brand-mark::after { content: ""; position: absolute; width: 13px; height: 13px; border: 1px solid var(--ink); left: 5px; top: 5px; }
.header-link { padding: 10px 16px; border: 1px solid var(--ink); border-radius: 999px; font: 700 13px var(--jp); transition: .2s ease; }
.header-link:hover { background: var(--ink); color: white; }

.hero { min-height: 580px; display: block; padding: clamp(54px, 7vw, 92px) clamp(20px, 4vw, 64px) 70px; border-bottom: 1px solid var(--ink); overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.kicker { margin: 0 0 55px; font: 700 11px var(--sans); letter-spacing: .14em; }
.kicker span { color: var(--blue); padding: 0 8px; }
.hero h1 { margin: 0; max-width: 700px; font: 800 clamp(42px, 4.8vw, 68px)/1.12 var(--jp); letter-spacing: -.05em; }
.hero h1 span { color: var(--ink); }
.hero-statement { margin-top: 55px; padding-top: 22px; max-width: 820px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; }
.hero-statement p { margin: 0; font: 700 13px/1.8 var(--jp); }
.hero-statement p:first-child { color: var(--blue); }
.hero-index { align-self: stretch; border-left: 1px solid var(--ink); padding-left: clamp(25px,4vw,55px); position: relative; display: flex; flex-direction: column; }
.hero-index > p:first-child { margin: 0 0 35px; font: 700 10px var(--sans); letter-spacing: .14em; }
.hero-index ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hero-index li { padding: 14px 0; border-bottom: 1px solid var(--line); font: 700 12px var(--sans); letter-spacing: .08em; }
.hero-index li span { display: inline-block; width: 40px; color: rgba(23,23,23,.45); }
.index-mark { margin-top: auto; font: 700 clamp(92px,10vw,148px)/.78 var(--sans); letter-spacing: -.08em; color: var(--blue); }
.index-caption { margin: 20px 0 0; font: 700 10px/1.3 var(--sans); letter-spacing: .1em; }
.hero-meta { grid-column: 1 / -1; display: flex; align-items: end; gap: 50px; border-top: 1px solid var(--line); padding-top: 24px; }
.hero-meta div { display: flex; align-items: end; gap: 10px; }
.hero-meta strong { font: 800 42px/1 var(--sans); }.hero-meta span,.hero-meta p { font: 700 11px/1.3 var(--sans); letter-spacing: .08em; }
.hero-meta p { margin: 0 0 0 auto; text-align: right; }

.featured,.works { padding: 82px clamp(20px, 4vw, 64px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }
.section-heading p { margin: 0; font: 800 12px var(--sans); letter-spacing: .08em; }
.section-heading > span { font: 600 12px var(--sans); }
.featured-card { min-height: 560px; display: grid; grid-template-columns: minmax(330px,.8fr) 1.4fr; background: #151b2b; color: white; border-radius: 4px; overflow: hidden; position: relative; box-shadow: 0 18px 50px rgba(23,23,23,.12); transition: transform .25s ease, box-shadow .25s ease; }
.featured-card:hover { transform: translateY(-3px); box-shadow: 0 24px 55px rgba(23,23,23,.18); }
.featured-copy { padding: clamp(34px, 5vw, 74px); display: flex; flex-direction: column; align-items: start; position: relative; z-index: 2; }
.featured-copy h2 { margin: 38px 0 24px; font: 900 clamp(40px, 4.6vw, 68px)/1.08 var(--jp); letter-spacing: -.055em; }
.featured-copy sup { color: #86a4ff; font: 800 24px var(--sans); vertical-align: top; }
.featured-copy p { max-width: 470px; margin: 0; color: rgba(255,255,255,.68); font: 600 15px/1.9 var(--jp); }
.open-link { margin-top: auto; padding-top: 48px; font: 700 14px var(--jp); border-bottom: 1px solid rgba(255,255,255,.6); }
.open-link b { margin-left: 8px; font-size: 20px; }
.future-visual { position: relative; min-height: 520px; overflow: hidden; background: linear-gradient(145deg, #1d263c, #0e1016); }
.future-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px, transparent 1px); background-size: 56px 56px; }
.future-visual svg { position: absolute; width: 92%; left: 3%; bottom: 34px; overflow: visible; }
.future-visual .area { fill: rgba(36,87,255,.16); }.future-visual .line { fill: none; stroke: #6f91ff; stroke-width: 5; stroke-linecap: square; }.future-visual circle { fill: #f4f1e8; stroke: #2457ff; stroke-width: 5; }
.year { position: absolute; z-index: 2; font: 700 12px var(--sans); color: rgba(255,255,255,.5); }.year-a{left:6%;bottom:25px}.year-b{left:48%;bottom:25px}.year-c{right:3%;bottom:25px}
.future-note { position: absolute; right: 38px; top: 40px; color: rgba(255,255,255,.82); font: 800 24px/1 var(--sans); text-align: right; letter-spacing: .02em; }

.tag { display: inline-block; padding: 6px 0; color: var(--ink); border-bottom: 2px solid currentColor; font: 800 10px var(--jp); letter-spacing: .04em; }
.tag-life,.tag-map,.tag-tool,.tag-patent,.tag-game { color: #2457ff; }
.featured-copy .tag { color: #86a4ff; }
.works { padding-top: 96px; }
.works-heading h2 { margin: 10px 0 0; font: 800 clamp(34px,3.4vw,48px)/1.15 var(--jp); letter-spacing: -.04em; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 38px 0 28px; }
.filter { border: 1px solid var(--ink); border-radius: 2px; padding: 10px 14px; background: transparent; cursor: pointer; font: 700 13px var(--jp); transition: .2s ease; }
.filter span { margin-left: 6px; opacity: .55; font-family: var(--sans); }
.filter:hover,.filter.is-active { background: var(--ink); color: white; }
.project-grid { display: block; border-top: 1px solid var(--ink); }
.project-card { background: transparent; border-bottom: 1px solid var(--ink); overflow: hidden; transition: background .2s ease, opacity .2s ease; }
.project-card:hover { background: rgba(36,87,255,.055); }
.project-card.is-hidden { display: none; }
.card-body { min-height: 126px; padding: 22px 8px; display: grid; grid-template-columns: 160px minmax(260px,1.25fr) minmax(220px,.8fr) 42px; align-items: center; gap: 24px; }
.card-body > div { display: flex; align-items: center; gap: 18px; }
.number { order: -1; color: rgba(23,23,23,.45); font: 700 11px var(--sans); }
.card-body h3 { margin: 0; font: 800 clamp(19px,1.7vw,25px)/1.3 var(--jp); letter-spacing: -.025em; }
.card-body p { margin: 0; color: rgba(23,23,23,.58); font: 600 13px var(--jp); }
.arrow { width: 38px; height: 38px; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 18px; transition: .2s ease; }
.project-card:hover .arrow { color: white; background: var(--blue); border-color: var(--blue); }

.visual-life { background: #d9dde5; }.mini-chart { position:absolute; right:40px; top:35px; width:45%; height:58%; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:skewY(-14deg); background:linear-gradient(145deg,transparent 42%,rgba(36,87,255,.85) 43% 47%,transparent 48%); }
.visual-character { background:#d9dde5; }.visual-character > span { position:absolute; font-size:110px; color:#a9b0bc; }.visual-character > span:nth-child(1){right:150px;top:10px}.visual-character > span:nth-child(2){right:40px;top:30px;color:#2457ff}.visual-character > span:nth-child(3){right:95px;top:115px;color:#171717}
.visual-flow { background:#dce0e9; }.flow-dot { width:16px;height:16px;border-radius:50%;background:var(--blue);position:absolute;right:70px;top:50px;box-shadow:0 0 0 12px rgba(36,87,255,.1);}.dot-b{right:210px;top:115px;background:#171717}.dot-c{right:120px;top:190px;background:#8c98ac}.visual-flow i{position:absolute;right:60px;top:70px;width:190px;height:135px;border:2px dashed var(--blue);border-radius:50%;transform:rotate(20deg)}
.visual-university { background:#d6dbe3; }.cap{position:absolute;right:70px;top:25px;font-size:130px;color:#2457ff;transform:rotate(45deg)}.pins{position:absolute;right:25px;top:170px;max-width:230px;font-size:38px;line-height:.45;color:#171717;letter-spacing:8px}
.visual-pulse { background:#151b2b;color:#fff }.clock{position:absolute;right:50px;top:28px;width:170px;height:170px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;font:900 38px/1 var(--sans);color:var(--yellow)}.clock i{position:absolute;width:2px;height:58px;background:#fff;left:84px;top:28px;transform-origin:bottom;transform:rotate(42deg)}
.visual-coffee { background:#d8dce3 }.bean{position:absolute;right:85px;top:25px;font-size:170px;color:#252a33;transform:rotate(-25deg)}.bean-two{right:20px;top:90px;font-size:110px;color:#2457ff;transform:rotate(35deg)}
.visual-dot { background:#191919;color:white }.pixels{position:absolute;right:35px;top:20px;font:900 54px/1.05 monospace;color:#50e8c2;letter-spacing:-8px;transform:rotate(4deg)}
.visual-block { background:#cbd3db }.cube{position:absolute;width:75px;height:75px;background:#718292;border:2px solid #171717;transform:rotate(30deg) skew(-8deg);box-shadow:15px 15px 0 #2457ff}.cube-a{right:80px;top:35px}.cube-b{right:190px;top:105px;transform:rotate(-12deg) skew(-8deg);background:#f4f1e8}.cube-c{right:40px;top:155px;width:52px;height:52px;background:#171717}
.visual-atc { background:#d7dce6 }.plane{position:absolute;right:55px;top:55px;font-size:115px;color:#2457ff;transform:rotate(-18deg)}.waves{position:absolute;right:180px;top:65px;font:900 55px monospace;transform:rotate(-20deg);color:#171717}
.visual-patent { background:#d8dce3 }.lens{position:absolute;right:70px;top:35px;width:135px;height:135px;border:14px solid #171717;border-radius:50%}.lens:after{content:"";position:absolute;width:85px;height:14px;background:#171717;right:-62px;bottom:-30px;transform:rotate(45deg)}.doc-lines{position:absolute;right:220px;top:60px;font:900 28px/1.4 monospace;color:#2457ff}
.visual-radar { background:#d3dfdc }.radar-ring{position:absolute;border:2px solid #17333e;border-radius:50%;right:45px;top:30px}.ring-a{width:200px;height:200px}.ring-b{width:120px;height:120px;right:85px;top:70px}.radar-sweep{position:absolute;right:145px;top:130px;width:100px;height:3px;background:#2457ff;transform-origin:right;transform:rotate(-25deg)}.radar-plane{position:absolute;right:90px;top:60px;font-size:45px;transform:rotate(20deg)}
.empty-state { padding: 80px 0; text-align: center; font: 700 14px var(--jp); }

footer { margin-top: 40px; padding: 32px clamp(20px,4vw,64px); color: white; background: var(--blue); }
footer > div{display:flex;justify-content:center;font:600 10px var(--sans);letter-spacing:.06em}

@media (max-width: 850px) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 65px; }
  .hero-index { min-height: 330px; margin-top: 70px; padding: 30px 0 0; border-left: 0; border-top: 1px solid var(--ink); }.index-mark{margin-top:50px}.hero-meta{margin-top:45px;gap:24px}.hero-meta strong{font-size:32px}
  .featured-card { grid-template-columns: 1fr; }.featured-copy{min-height:470px}.future-visual{min-height:400px}.card-body{grid-template-columns:120px 1fr 1fr 42px;gap:18px}
}
@media (max-width: 520px) {
  .site-header{height:64px}.brand{font-size:13px}.header-link{font-size:11px;padding:8px 11px}
  .hero{padding-top:48px}.kicker{margin-bottom:38px;line-height:1.5}.hero h1{font-size:clamp(34px,9.5vw,43px)}.hero-statement{margin-top:42px;grid-template-columns:1fr;gap:12px}.hero-index{margin-top:55px}.index-mark{font-size:112px}.hero-meta{align-items:start;gap:16px}.hero-meta div{display:block}.hero-meta strong{font-size:28px;display:block}.hero-meta p{display:none}
  .featured,.works{padding-top:58px;padding-bottom:58px}.featured-copy{padding:34px 24px;min-height:410px}.featured-copy h2{margin-top:30px;font-size:39px}.future-visual{min-height:310px}.future-note{font-size:18px;right:22px;top:25px}
  .works-heading h2{font-size:34px}.filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;margin-right:-20px}.filter{white-space:nowrap}.card-body{min-height:150px;padding:22px 2px;grid-template-columns:1fr 38px;gap:12px}.card-body>div{grid-column:1}.card-body h3{grid-column:1;font-size:21px}.card-body p{grid-column:1}.arrow{grid-column:2;grid-row:1 / span 3}
  footer > div{display:block}footer > div span{display:block;margin-top:7px}
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}*,*::before,*::after{transition:none!important} }