@font-face{font-family:"Bebas Neue";src:url("../fonts/bebas-neue-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Sawarabi Gothic";src:url("../fonts/sawarabi-gothic-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
:root{--ink:#231815;--muted:#777;--dark:#151515;--line:#5c5c5c;--content:1200px;--display:"Bebas Neue",Impact,sans-serif;--body:"Sawarabi Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;color:var(--ink);background:#fff;font-family:var(--body);font-size:16px;line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea{font:inherit}
.skip-link{position:fixed;z-index:1000;top:0;left:1rem;transform:translateY(-120%);padding:.6rem 1rem;background:#fff;color:#111;box-shadow:0 2px 12px #0004}
.skip-link:focus{transform:none}
.site-header{height:76px;display:flex;align-items:center;padding:8px clamp(22px,5vw,78px);background:#fff;position:relative;z-index:50}
.brand{width:62px;height:62px;display:block;overflow:hidden}
.brand img{width:100%;height:100%;object-fit:contain}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:36px;font-family:var(--display);font-size:20px;line-height:1;letter-spacing:2px;text-transform:uppercase}
.site-nav a{text-decoration:none;transition:color .25s ease}
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a.is-current{color:#919191}
.menu-toggle{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;padding:10px;cursor:pointer}
.menu-toggle span{display:block;height:2px;background:#111;margin:6px 0;transition:transform .25s,opacity .25s}
.hero{min-height:calc(100vh - 76px);height:965px;max-height:1100px;display:flex;align-items:center;flex-direction:column;text-align:center;padding:125px 20px 62px;position:relative;background:#fff}
.hero-art{display:block;width:min(600px,80vw);height:auto;margin:0 auto}
.hero-copy{margin:auto 0 0;font-size:18px;line-height:1.75;animation:hero-in 1s .75s both}
.scroll-cue{position:absolute;bottom:20px;width:32px;height:42px;display:grid;place-items:center;text-decoration:none}
.scroll-cue span{width:1px;height:24px;background:#999;animation:scroll-cue 1.8s infinite}
@keyframes hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes scroll-cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.service{min-height:940px;padding:210px max(24px,calc((100vw - var(--content))/2)) 160px;background:linear-gradient(#0d1116aa,#0d1116aa),url("../images/bg-com.jpg") center/cover fixed no-repeat;color:#fff;display:flex;justify-content:flex-end}
.service-panel{width:70%;border:1px solid var(--line);padding:58px 60px 54px;background:#1c222722}
.service h2,.projects h2,.contact h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:10px}
.service h2{font-size:70px;line-height:1;margin:0 0 8px}
.service-lead{color:#ffffffb3;margin:0 0 58px}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px 44px;color:#ffffffb3}
.service-item h3{font-size:17px;font-weight:400;line-height:1.35;color:#fff;margin:0 0 12px}
.service-item p{font-size:14px;line-height:1.65;margin:0}
.service-icon{display:inline-grid;width:24px;margin-right:8px;color:#fff}
.projects{padding:135px max(24px,calc((100vw - var(--content))/2)) 150px;text-align:center;background:#fff}
.projects h2{font-size:58px;line-height:1;margin:0}
.title-rule{width:76px;height:1px;background:#bbb;margin:27px auto 62px}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:58px;align-items:start}
.project-card{display:flex;flex-direction:column;align-items:center}
.project-card img{width:260px;height:260px;object-fit:cover;margin-bottom:34px}
.project-card h3{font-size:22px;line-height:1.4;margin:0 0 20px}
.project-card p{font-size:13px;line-height:1.75;margin:0;min-height:74px}
.detail-button{display:inline-block;margin-top:25px;padding:6px 18px;background:#aaa;color:#fff;text-decoration:none;font-size:12px;line-height:1.4;border-radius:2px;transition:background .2s,transform .2s}
.detail-button:hover,.detail-button:focus-visible{background:#666;transform:translateY(-1px)}
.contact{padding:155px max(24px,calc((100vw - var(--content))/2));background:linear-gradient(#080808ba,#080808ba),url("../images/contact-bg.jpg") center/cover fixed no-repeat;color:#fff}
.contact-inner{display:grid;grid-template-columns:7fr 5fr;align-items:center}
.contact-form-card{background:#fff;color:#464855;padding:58px 60px 64px;box-shadow:0 20px 30px #0009}
.contact h2{font-size:40px;line-height:1.3;text-align:center;margin:0 0 38px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form-card label:not(.honeypot){display:block;margin-bottom:14px}
.contact-form-card input,.contact-form-card textarea{display:block;width:100%;border:1px solid #dcdcdc;border-radius:0;background:#fff;padding:11px 13px;color:#333;outline:0;transition:border-color .2s,box-shadow .2s}
.contact-form-card input:focus,.contact-form-card textarea:focus{border-color:#777;box-shadow:0 0 0 2px #7772}
.contact-form-card textarea{resize:vertical;min-height:140px}
.contact-form-card button{display:block;margin:22px auto 0;border:0;border-radius:2px;background:#606060;color:#fff;padding:8px 18px;cursor:pointer;transition:background .2s}
.contact-form-card button:hover,.contact-form-card button:focus-visible{background:#222}
.contact-form-card button:disabled{opacity:.6;cursor:wait}
.form-status{min-height:1.5em;text-align:center;margin:14px 0 0;font-size:14px}
.form-status.is-error{color:#a02323}.form-status.is-success{color:#247132}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.contact-details{font-style:normal;background:#ffffff0d;padding:48px 50px}
.contact-details div{margin-bottom:24px}.contact-details div:last-child{margin-bottom:0}
.contact-details h3{font-size:15px;font-weight:400;margin:0 0 9px}
.contact-details p{font-size:18px;margin:0}
.contact-details a{text-decoration:none}.contact-details a:hover{text-decoration:underline}
.site-footer{background:#171717;color:#a2a2a2;padding:34px max(24px,calc((100vw - var(--content))/2));font-size:12px}
.site-footer p{margin:0}
.reveal{opacity:0;transition:opacity 3s ease}
.reveal.is-visible{opacity:1}
@media (max-width:1199px){.hero{height:890px;padding-top:100px}.service{min-height:auto;padding-top:100px;padding-bottom:80px}.service-panel{width:100%}.contact{padding-top:110px;padding-bottom:110px}}
@media (max-width:767px){html{scroll-padding-top:68px}.site-header{height:68px;padding:4px 18px;position:sticky;top:0;box-shadow:0 1px 0 #0000000d}.brand{width:58px;height:58px}.menu-toggle{display:block}.site-nav{position:absolute;top:68px;left:0;right:0;display:grid;gap:0;background:#fff;border-top:1px solid #eee;box-shadow:0 10px 24px #0002;transform:translateY(-12px);opacity:0;visibility:hidden;transition:.25s;padding:12px 22px 20px}.site-nav.is-open{transform:none;opacity:1;visibility:visible}.site-nav a{padding:11px 0;font-size:19px}.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.hero{height:auto;min-height:780px;max-height:none;padding:72px 18px 52px}.hero-art{width:min(600px,100%)}.hero-copy{font-size:14px;line-height:1.85;margin-top:auto;margin-bottom:15px}.service{padding:52px 20px 42px;background-attachment:scroll}.service-panel{padding:28px 24px 30px}.service h2{font-size:42px;letter-spacing:7px}.service-lead{font-size:14px;line-height:1.7;margin-bottom:30px}.service-grid{grid-template-columns:1fr;gap:31px}.service-item h3{font-size:16px}.service-item p{font-size:13px}.projects{padding:62px 24px 80px}.projects h2{font-size:42px;letter-spacing:7px}.title-rule{margin-bottom:46px}.project-grid{grid-template-columns:1fr;gap:70px}.project-card img{width:min(240px,75vw);height:min(240px,75vw);margin-bottom:24px}.project-card p{min-height:0}.contact{padding:54px 18px;background-attachment:scroll}.contact-inner{grid-template-columns:1fr}.contact-form-card{padding:30px 26px 34px}.contact h2{font-size:30px;margin-bottom:22px}.form-row{grid-template-columns:1fr;gap:0}.contact-details{padding:34px 28px}.contact-details p{font-size:16px}.site-footer{padding:25px 20px;text-align:center}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-copy,.scroll-cue span{animation:none}.reveal{opacity:1;transition:none}}