@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');
:root{--bg:#d2d2d0;--ink:#898989;--line:#b4b4b0;--brown:#48372d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans JP',sans-serif;font-weight:300;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit}header{height:108px;margin:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.logo{font-size:37px;letter-spacing:-3px;font-weight:500}.logo small{font-size:12px;letter-spacing:0;margin-left:8px}nav{display:flex;gap:38px;font-size:14px}nav a{padding:12px 0}nav a:hover,nav a[aria-current=page]{border-bottom:1px solid var(--ink)}main{overflow:hidden}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase}.hero{padding:60px 5% 0;position:relative}.hero-top{display:flex;justify-content:space-between}.hero h1{font-family:'Noto Sans JP',sans-serif;font-size:clamp(38px,5.8vw,84px);font-weight:300;letter-spacing:.12em;line-height:1.6;margin:37px 0 25px;position:relative;z-index:1}.hero-image{height:490px;position:relative;margin-top:-15px;background:#c6c6c1;overflow:hidden}.hero-image img{height:100%;width:100%;object-fit:cover;object-position:center 53%}.hero-image .caption{position:absolute;bottom:22px;left:25px;font-size:12px;letter-spacing:2px;color:#fff;text-shadow:0 1px 5px #222}.intro{padding:100px 5% 110px;display:grid;grid-template-columns:1fr 1.2fr;gap:10%}.intro h2,.mission h2{font-family:'Noto Sans JP',sans-serif;font-size:clamp(25px,3vw,41px);font-weight:300;line-height:1.8;margin:0}.intro p{line-height:2.4;margin:24px 0 0;max-width:580px}.section{padding:80px 5%;border-top:1px solid var(--line)}.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:48px}.section-head h2{font-size:48px;letter-spacing:-2px;font-weight:300;margin:0}.section-head a{font-size:14px;border-bottom:1px solid}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 30px}.work-card{display:block;border-top:1px solid var(--line);padding-top:18px}.work-card .top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px}.work-card h3{font-family:'Noto Sans JP',sans-serif;font-size:28px;font-weight:300;margin:22px 0 12px}.work-card p{line-height:1.9;font-size:14px;max-width:450px}.study{height:225px;display:flex;align-items:center;justify-content:center;margin-top:28px;background:#c8c8c2;position:relative;overflow:hidden}.study .geometry{width:130px;height:130px;border:1px solid #77766f;border-radius:50%;position:relative;transition:transform .7s}.study .geometry:before{content:'';position:absolute;inset:20px -35px;border:1px solid #77766f;transform:rotate(45deg)}.work-card:hover .geometry{transform:rotate(45deg)}.study.s2{background:#48372d;color:#dad7d1}.s2 .geometry,.s2 .geometry:before{border-color:#b4a397}.study.s3{background:#252625;color:#d5d4cc}.s3 .geometry{border-radius:0;border-color:#999}.s3 .geometry:before{border-color:#999;transform:rotate(30deg)}.study.s4{background:#edede8}.study-label{position:absolute;bottom:15px;left:18px;font-size:12px;letter-spacing:1px}.mission{padding:100px 5%;background:var(--brown);color:#e7e4de;display:grid;grid-template-columns:1fr 1.2fr;gap:10%}.mission p{font-size:16px;line-height:2.3;max-width:550px}.page-title{padding:75px 5% 65px}.page-title h1{font-size:clamp(50px,7vw,90px);font-weight:300;letter-spacing:-3px;margin:20px 0}.page-title p{line-height:2}.company{padding:10px 5% 100px;display:grid;grid-template-columns:1fr 1.4fr;gap:9%}.company .mark{height:280px;display:grid;place-items:center;border:1px solid var(--line);position:relative}.mark span{font-size:70px;letter-spacing:-6px}.mark:before{content:'';position:absolute;width:210px;height:210px;border:1px solid var(--line);border-radius:50%}dl{margin:0}dl>div{display:grid;grid-template-columns:100px 1fr;border-top:1px solid var(--line);padding:23px 0;gap:20px;font-size:15px;line-height:1.9}dt{color:#62615a}dd{margin:0}.offices{display:grid;grid-template-columns:1fr 1fr;gap:30px}.offices article{border-top:1px solid var(--line);padding:28px 0}.offices h3{font-size:24px;font-weight:300}.offices p{line-height:2}.filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:45px}.filters button{background:transparent;border:1px solid var(--line);padding:12px 17px;color:var(--ink);cursor:pointer;font-size:14px}.filters button[aria-pressed=true]{background:var(--ink);color:#eee;border-color:var(--ink)}.notice{font-size:14px;line-height:2;color:#64635e;padding:25px 0}.detail{padding:0 5% 90px;max-width:1000px}.detail .study{height:350px}.detail p{line-height:2.2}.detail h2{font-weight:300;font-size:29px}.back{display:inline-block;border-bottom:1px solid;padding-bottom:8px;margin-top:25px}footer{padding:50px 5% 30px;border-top:1px solid var(--line)}.footer-top{display:flex;justify-content:space-between;align-items:baseline}.footer-top .logo{font-size:64px}.footer-bottom{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;margin-top:70px}.reveal{animation:appear 1s ease both}@keyframes appear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media(max-width:700px){header{height:86px}.logo{font-size:29px}nav{gap:17px;font-size:12px}.hero{padding-top:35px}.hero-top .eyebrow:last-child{display:none}.hero h1{font-size:35px;letter-spacing:.05em;margin:30px 0}.hero-image{height:350px;margin-top:0}.intro,.mission,.company{grid-template-columns:1fr;gap:35px;padding-top:65px;padding-bottom:65px}.work-grid,.offices{grid-template-columns:1fr}.section{padding-top:55px;padding-bottom:55px}.section-head h2{font-size:35px}.work-card h3{font-size:25px}.page-title{padding-top:50px}.footer-top .logo{font-size:45px}.footer-top{align-items:center}.footer-bottom{gap:20px;font-size:10px}.company .mark{height:220px}.filters{gap:8px}.filters button{font-size:12px;padding:10px}.detail .study{height:250px}}
[hidden]{display:none!important}
.logo{display:block;width:165px;line-height:0}.logo img{width:100%;height:auto}footer .logo{width:230px}.mark:before{display:none}.philosophy{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-top:100px;padding-bottom:100px}.vision h2{font-size:clamp(35px,5vw,65px);font-weight:300;letter-spacing:-2px;margin:25px 0}.vision p{font-family:'Noto Sans JP',sans-serif;line-height:2.2;font-size:24px}.guidelines ol{list-style:none;padding:0;counter-reset:g;margin-top:35px}.guidelines li{counter-increment:g;border-top:1px solid var(--line);padding:17px 0;font-size:18px}.guidelines li:before{content:'0' counter(g);font-size:12px;margin-right:30px;color:#65645f}.mission h2{font-family:'Noto Sans JP',sans-serif;font-size:clamp(35px,5vw,64px);letter-spacing:-1px}.mission p{font-size:24px}.hero h1{font-size:clamp(36px,5.5vw,78px)}@media(max-width:700px){.logo{width:115px}footer .logo{width:160px}.philosophy{grid-template-columns:1fr;gap:45px;padding-top:60px;padding-bottom:60px}.hero h1{font-size:35px}.vision p{font-size:21px}.footer-bottom{flex-direction:column}.section-head{gap:20px}.section-head .eyebrow{font-size:10px}}
/* Refined mission composition and unified brand typography. */
body,button,h1,h2,h3,p,li,dt,dd{font-family:'Noto Sans JP',sans-serif;font-weight:300;color:var(--ink)}
.eyebrow,.top,.study,.study-label,.notice,dt,.guidelines li:before,.mission,.mission p,.hero-image .caption{color:var(--ink)}
.hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:7%;align-items:center;padding:70px 5% 80px;min-height:650px;border-bottom:1px solid var(--line)}
.hero-copy{padding:35px 0}.hero h1{font-family:'Noto Sans JP',sans-serif;font-size:clamp(28px,3.1vw,46px);font-weight:300;letter-spacing:.015em;line-height:1.35;margin:25px 0 20px;white-space:nowrap}.hero-japanese{font-size:clamp(17px,1.5vw,22px);letter-spacing:.08em;line-height:1.9;margin:0}
.hero-image{margin:0;height:470px;width:100%}.hero-image img{object-position:center}.intro h2,.work-card h3,.mission h2{font-family:'Noto Sans JP',sans-serif;font-weight:300}.mission{background:#48372d}.filters button{color:var(--ink)}.filters button[aria-pressed=true]{background:#f1f1ee;border-color:var(--ink);color:var(--ink)}footer{padding:28px 5%}.footer-bottom{margin:0;justify-content:flex-end}.vision p{font-family:'Noto Sans JP',sans-serif}
@media(max-width:700px){.hero{grid-template-columns:1fr;gap:30px;padding:35px 5% 45px;min-height:0}.hero-copy{padding:12px 0}.hero h1{font-size:29px;margin:18px 0 14px}.hero-japanese{font-size:17px;letter-spacing:.04em}.hero-image{height:340px}.footer-bottom{flex-direction:row}.mission h2{font-size:34px}}
/* Washi, quiet material motion, and logo-inspired curves. */
body{background-color:var(--bg);background-image:linear-gradient(rgba(210,210,208,.64),rgba(210,210,208,.64)),url('/assets/washi.png');background-size:auto,760px 760px}
.hero-visual{position:relative;min-width:0;padding:12px 0 32px}
.hero-visual .hero-image{height:470px;clip-path:inset(0);background:transparent}
.hero-visual .hero-image img{animation:material-drift 22s ease-in-out infinite alternate;transform-origin:50% 60%;will-change:transform}
@keyframes material-drift{from{transform:scale(1.015) translate(-.4%,0)}to{transform:scale(1.09) translate(.4%,-.7%)}}
.hero-lines{position:absolute;left:-12%;bottom:17px;width:108%;height:130px;pointer-events:none;overflow:visible}
.hero-lines path{stroke:#898989;stroke-width:.7;opacity:.48;animation:line-breathe 13s ease-in-out infinite alternate;transform-origin:center;vector-effect:non-scaling-stroke}
.hero-lines path:nth-child(2){animation-delay:-5s}.hero-lines path:nth-child(3){animation-delay:-9s}
@keyframes line-breathe{from{transform:translateY(-7px) scaleY(.78)}to{transform:translateY(7px) scaleY(1.12)}}
.motion-toggle{position:absolute;right:0;bottom:0;padding:7px 0;background:none;border:0;border-bottom:1px solid var(--line);font-size:12px;cursor:pointer;color:var(--ink)}
.motion-toggle:focus-visible{outline:1px solid var(--ink);outline-offset:5px}
.hero-visual.is-paused *{animation-play-state:paused!important}
.scroll-reveal{transition:opacity .85s ease,transform .85s ease}.scroll-reveal.is-pending{opacity:0;transform:translateY(18px)}
@media(max-width:700px){.hero-visual .hero-image{height:340px}.hero-lines{left:-4%;width:104%;height:85px}.hero-visual .hero-image img{animation-duration:28s}body{background-size:auto,500px 500px}}
@media(prefers-reduced-motion:reduce){.scroll-reveal.is-pending{opacity:1;transform:none}.hero-visual .hero-image img{transform:none;will-change:auto}.motion-toggle{display:none}}