:root { --ink:#0b1220; --paper:#f5f4ef; --cloud:#dce6fb; --blue:#3158d4; --mint:#b8f2d3; --line:rgba(11,18,32,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans JP",sans-serif; line-height:1.75; }
a { color:inherit; text-decoration:none; }
.site-header { align-items:center; display:flex; height:84px; justify-content:space-between; max-width:1320px; margin:auto; padding:0 40px; }
.brand,.eyebrow,.section-number,.case-kicker,.card-index,.contact-note,footer { font-family:"DM Mono",monospace; letter-spacing:.08em; }
.brand { font-size:1rem; font-weight:500; letter-spacing:.15em; }.brand span { color:var(--blue); }
nav { display:flex; gap:26px; font: .72rem "DM Mono",monospace; letter-spacing:.08em; } nav a { opacity:.7; } nav a:hover { opacity:1; }
.hero { background:var(--ink); color:#fff; min-height:670px; overflow:hidden; padding:106px max(40px,calc((100vw - 1240px)/2)); position:relative; }
.hero > *:not(.orb) { position:relative; z-index:1; }.eyebrow,.section-number { color:var(--blue); font-size:.72rem; font-weight:500; margin:0 0 24px; }.hero .eyebrow { color:var(--mint); }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(3rem,6.4vw,6.35rem); letter-spacing:-.065em; line-height:1.1; margin-bottom:30px; max-width:960px; } h1 em,h2 em { color:var(--mint); font-style:normal; }
.hero-copy { color:#ccd2e1; font-size:1.05rem; line-height:2; margin-bottom:38px; }.hero-actions { display:flex; gap:13px; }.button { border:1px solid rgba(255,255,255,.35); display:inline-flex; gap:24px; padding:14px 18px; font-size:.82rem; transition:.2s; }.button-primary { background:var(--mint); border-color:var(--mint); color:var(--ink); }.button:hover { transform:translateY(-2px); }.button-quiet:hover { background:#fff; color:var(--ink); }
.hero-meta { bottom:36px; color:#9ba5bc; display:flex; flex-wrap:wrap; font: .68rem "DM Mono",monospace; gap:16px 30px; left:max(40px,calc((100vw - 1240px)/2)); position:absolute!important; }.hero-meta span::before { color:var(--mint); content:"/ "; }
.orb { border:1px solid rgba(184,242,211,.45); border-radius:50%; position:absolute; }.orb-one { height:560px; right:-100px; top:55px; width:560px; }.orb-two { background:radial-gradient(circle at 35% 35%,rgba(184,242,211,.38),rgba(49,88,212,.1) 48%,transparent 70%); height:410px; right:180px; top:165px; width:410px; }
.section-shell { max-width:1240px; margin:auto; padding-left:0; padding-right:0; }.intro { display:grid; grid-template-columns:1fr 2fr; gap:110px; padding-bottom:150px; padding-top:150px; }.intro h2,.expertise h2,.work h2,.approach h2,.contact h2 { font-size:clamp(2.3rem,4vw,4.4rem); letter-spacing:-.06em; line-height:1.2; margin-bottom:30px; }.intro > div > p { font-size:1.06rem; max-width:670px; }
.facts { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); margin-top:50px; }.facts div { border-right:1px solid var(--line); padding:22px 18px 0 0; }.facts div+div { padding-left:22px; }.facts strong { display:block; font:500 .88rem "DM Mono",monospace; margin-bottom:6px; }.facts span { color:#58606e; font-size:.76rem; }
.expertise { background:var(--cloud); padding:128px 0 140px; }.service-grid { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }.service-card { background:rgba(255,255,255,.63); display:flex; flex-direction:column; min-height:390px; padding:28px; }.service-card.featured { background:var(--blue); color:#fff; }.card-index { color:#66738e; font-size:.72rem; }.featured .card-index { color:var(--mint); }.service-card h3 { font-size:1.45rem; letter-spacing:-.03em; margin:42px 0 12px; }.service-card p { font-size:.88rem; line-height:1.8; }.service-card ul { border-top:1px solid currentColor; font: .7rem "DM Mono",monospace; line-height:2; list-style:none; margin:auto 0 0; padding:14px 0 0; }.service-card li::before { content:"→ "; }
.work { padding-bottom:150px; padding-top:150px; }.work-heading { align-items:end; display:flex; justify-content:space-between; margin-bottom:65px; }.work-heading h2 { margin-bottom:0; }.work-heading > p { color:#606979; font-size:.78rem; line-height:1.7; max-width:270px; }.case { align-items:center; border-top:1px solid var(--line); display:grid; gap:9%; grid-template-columns:42% 1fr; padding:54px 0; }.case-reverse { grid-template-columns:1fr 42%; }.case-reverse .case-visual { order:2; }.case-visual { aspect-ratio:1.23; overflow:hidden; position:relative; }.visual-grid { background:#d7e1f6; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; }.visual-grid span { background:#3158d4; opacity:.9; }.visual-grid span:nth-child(2),.visual-grid span:nth-child(3) { background:#eff1f6; }.visual-grid i { background:var(--mint); border-radius:50%; height:42%; left:29%; position:absolute; top:29%; width:42%; }.visual-flow { align-items:center; background:var(--ink); color:#fff; display:flex; flex-direction:column; font: .85rem "DM Mono",monospace; justify-content:center; letter-spacing:.06em; }.visual-flow i { background:var(--mint); display:block; height:42px; margin:8px; width:1px; }.visual-layers { background:#c5efd8; display:flex; flex-direction:column; justify-content:center; padding:24px; }.visual-layers span { border:1px solid var(--ink); font: .72rem "DM Mono",monospace; letter-spacing:.08em; margin-top:-1px; padding:16px; }.visual-layers span:nth-child(even) { background:var(--ink); color:#fff; margin-left:24px; }.case-kicker { color:var(--blue); font-size:.67rem; margin-bottom:13px; }.case h3 { font-size:clamp(1.45rem,2.5vw,2.35rem); letter-spacing:-.05em; line-height:1.35; margin-bottom:20px; }.case-body > p:not(.case-kicker) { color:#4f5867; font-size:.91rem; }.case dl { border-top:1px solid var(--line); font-size:.72rem; margin:25px 0 0; padding-top:12px; }.case dl div { display:flex; }.case dt { color:#727a88; font: .66rem "DM Mono",monospace; min-width:80px; }.case dd { margin:0; }
.approach { background:var(--ink); color:#fff; padding:130px 0; }.approach-grid { display:grid; gap:12%; grid-template-columns:1fr 1.15fr; }.approach .section-number { color:var(--mint); }.approach h2 { margin:0; }.approach ol { list-style:none; margin:0; padding:0; }.approach li { border-top:1px solid rgba(255,255,255,.25); display:grid; gap:24px; grid-template-columns:46px 1fr; padding:22px 0; }.approach li > span { color:var(--mint); font: .7rem "DM Mono",monospace; }.approach h3 { font-size:1.15rem; margin:0 0 7px; }.approach li p { color:#bac1d1; font-size:.86rem; margin:0; }
.contact { padding-bottom:140px; padding-top:145px; }.contact h2 { margin-bottom:25px; }.contact h2 em { color:var(--blue); }.contact > p { color:#626b78; font-size:.93rem; }.contact-note { border-top:1px solid var(--line); display:block; font-size:.7rem; margin-top:54px; padding-top:13px; }
footer { border-top:1px solid var(--line); color:#737b86; display:flex; font-size:.65rem; justify-content:space-between; margin:0 auto; max-width:1240px; padding:23px 0 34px; }
@media (max-width:1320px) { .section-shell { padding-left:40px; padding-right:40px; } .intro { gap:70px; } }
@media (max-width:760px) { .site-header { height:68px; padding:0 21px; } nav { gap:14px; font-size:.62rem; }.hero { min-height:640px; padding:84px 21px; }.hero-copy br { display:none; }.hero-meta { left:21px; right:21px; }.orb-one { height:400px; right:-195px; top:128px; width:400px; }.orb-two { height:280px; right:-52px; top:190px; width:280px; }.section-shell { padding-left:21px; padding-right:21px; }.intro,.approach-grid { display:block; padding-bottom:86px; padding-top:86px; }.intro .section-number { margin-bottom:45px; }.facts { grid-template-columns:1fr; margin-top:36px; }.facts div,.facts div+div { border-bottom:1px solid var(--line); border-right:0; padding:13px 0; }.expertise { padding:86px 0; }.service-grid { grid-template-columns:1fr; }.service-card { min-height:300px; }.work { padding-bottom:86px; padding-top:86px; }.work-heading { align-items:start; display:block; margin-bottom:35px; }.work-heading > p { margin-top:18px; }.case,.case-reverse { display:flex; flex-direction:column; gap:27px; padding:45px 0; }.case-reverse .case-visual { order:0; }.case-visual { width:100%; }.approach h2 { margin-bottom:42px; }.contact { padding-bottom:86px; padding-top:86px; } footer { margin:0 21px; padding-bottom:25px; }.case h3 br { display:none; } }