:root{--ink:#0f1419;--green:#009976;--accent:#00BF93;--slate:#78848B;--mist:#E5E7EB;--paper:#f8faf9;--line:#c8cfd3;--gutter:clamp(22px,7.5vw,128px);--header:78px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 14px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.85}
a{color:inherit;text-underline-offset:5px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.skip{position:fixed;top:8px;left:12px;z-index:9;background:white;padding:6px 14px;transform:translateY(-150%)}
.skip:focus{transform:none}
header{position:sticky;top:0;z-index:5;min-height:var(--header);padding:12px clamp(22px,4.4vw,76px);display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--paper);border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none;font:800 24px/1 Georgia,serif;letter-spacing:.12em}
.logo i{font:normal 31px/1 Georgia,serif;color:var(--green)}
.logo small{font:700 12px/1 sans-serif;letter-spacing:.05em}
.nav-wrap,nav{display:flex;align-items:center;gap:clamp(14px,2.3vw,34px)}
nav a,.pill{font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap}
nav a:hover,footer a:hover{text-decoration:underline}
.pill{display:inline-flex;align-items:center;gap:16px;background:var(--accent);color:var(--ink);padding:8px 17px;border-radius:99px}
.pill:hover,.button:hover{background:var(--green)}
.hero{isolation:isolate;position:relative;display:grid;align-items:center;min-height:clamp(530px,calc(100svh - var(--header) - 82px),780px);background:var(--slate);color:var(--ink)}
.hero-media{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.hero::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(15,20,25,.24),transparent 70%)}
.intro{justify-self:start;margin:40px var(--gutter) 60px;padding:clamp(22px,3vw,46px);background:rgba(248,250,249,.94);border-left:5px solid var(--green)}
.label,.index b,.cards article span,.brand-note,footer span{font:700 12px/1.5 ui-monospace,monospace;letter-spacing:.14em}
.label{display:flex;align-items:center;gap:12px;color:var(--ink)}
.label::before{content:"";width:24px;height:2px;background:var(--green)}
h1,h2,h3,p{overflow-wrap:break-word}
h1{font:800 clamp(42px,6.1vw,98px)/1.18 "Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;letter-spacing:.035em;margin:26px 0 24px}
h1 span{background:linear-gradient(transparent 72%,var(--accent) 72% 92%,transparent 92%)}
.intro p{font-size:clamp(14px,1.3vw,18px);font-weight:700;margin:0 0 26px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;background:var(--accent);color:var(--ink);min-height:50px;padding:9px 18px 9px 22px;border-radius:60px;text-decoration:none;font-weight:800;font-size:14px}
.button b,.index i{font:normal 19px/1 sans-serif}
.brand-note{position:absolute;bottom:20px;right:var(--gutter);color:var(--ink);background:var(--mist);padding:5px 9px}
.index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 var(--gutter);background:var(--mist);border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:15px clamp(11px,2.3vw,34px);text-decoration:none;border-left:1px solid var(--line);line-height:1.45;font-weight:800;font-size:14px}
.index a:last-child{border-right:1px solid var(--line)}
.index b{color:var(--ink)}
.index i{grid-column:2;grid-row:1 / 3;color:var(--green)}
.index a:hover{background:white}
.section{padding:clamp(65px,9vw,136px) var(--gutter)}
h2{font-size:clamp(26px,3.4vw,52px);line-height:1.32;letter-spacing:.035em;margin:8px 0 22px}
.display{display:block;width:fit-content;color:var(--ink);background:linear-gradient(transparent 83%,var(--accent) 83% 91%,transparent 91%);font:italic clamp(56px,8vw,122px)/.98 Georgia,serif;letter-spacing:-.075em;margin:14px 0 17px}
.split{display:grid;grid-template-columns:1fr .94fr;gap:clamp(24px,6vw,90px);align-items:center}
.work-copy>p{max-width:42ch}
.art{margin:24px 0 0;background:var(--mist);overflow:hidden}
.art svg{display:block;width:100%;height:auto}
.art figcaption{padding:9px 15px;background:var(--mist);color:var(--ink);font:700 10px/1.6 ui-monospace,monospace;letter-spacing:.12em}
.note{border-left:3px solid var(--green);background:var(--mist);padding:16px 19px;margin-top:25px}
.note p,.cards p{margin:8px 0 0}
.tinted{background:var(--mist)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.cards article{background:var(--paper);border-top:3px solid var(--green);padding:24px clamp(17px,2.3vw,33px) 28px}
.cards article span{color:var(--ink)}
.cards h3{margin:9px 0 0;font-size:20px}
.job-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;margin-top:32px}
details{min-width:0;background:white;border:1px solid var(--line);border-top:3px solid var(--green)}
summary{list-style:none;display:grid;grid-template-columns:1fr auto;align-items:center;gap:9px 12px;cursor:pointer;font-size:clamp(16px,2vw,24px);font-weight:800;padding:19px clamp(15px,2.3vw,30px)}
summary:hover{background:var(--mist)}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋";grid-row:1 / 3;grid-column:2;place-self:center;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--slate);border-radius:50%;color:var(--ink);font:normal 18px/1 sans-serif}
details[open] summary::after{content:"−"}
details>a{display:inline-block;margin:14px clamp(15px,2.3vw,30px) 22px;font-weight:800}
.tag{justify-self:start;background:var(--mist);color:var(--ink);font-size:12px;padding:3px 10px;border-radius:40px}
dl{display:grid;grid-template-columns:auto 1fr;gap:7px 15px;margin:0;padding:15px clamp(15px,2.3vw,30px) 0;font-size:14px}
dt{font-weight:800}
dd{margin:0}
.visit{background:#d4f4e9;color:var(--ink);border-top:1px solid var(--line)}
.visit .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.visit article{color:var(--ink);border-color:var(--accent)}
.demo{font-size:13px;margin:24px 0 0}
footer{padding:24px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
footer>a:last-child{font-size:13px}
@media(max-width:760px){
:root{--header:102px}
header{display:grid;grid-template-columns:1fr auto;gap:9px 10px;padding:10px 17px}
.nav-wrap{display:contents}
nav{grid-row:2;grid-column:1 / -1;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px;gap:8px}
nav a{font-size:12px}
.logo{font-size:21px;gap:6px}
.logo i{font-size:25px}
.logo small,.pill{font-size:11px}
.pill{padding:6px 10px;gap:6px}
.hero{min-height:540px;align-items:end}
.hero-media{object-position:70% 50%}
.hero::before{background:linear-gradient(0deg,rgba(15,20,25,.28),transparent 70%)}
.intro{margin:170px var(--gutter) 42px;padding:19px 16px;border-left-width:4px}
h1{font-size:clamp(30px,8.7vw,48px);margin:16px 0 13px}
.brand-note{bottom:10px;font-size:9px}
.index{padding:0}
.index a{display:flex;flex-direction:column;align-items:flex-start;font-size:12px;gap:4px}
.index b{font-size:10px;letter-spacing:.07em}
.index i{display:none}
.split,.cards,.job-grid,.visit .cards{grid-template-columns:1fr}
.art{margin-top:0}
footer span{order:3;width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}