:root{--navy:#0b2545;--navy2:#13315c;--ice:#8dd8f8;--ice2:#dff3fc;--sky:#1ea7e0;--txt:#1b2733;--mut:#5b6b7a;--bg:#fff;--line:#e3ecf2;--max:1120px}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--txt);background:var(--bg);line-height:1.65;font-size:16px}
body.lang-ja{font-family:"Noto Sans JP",Inter,system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}a{color:var(--sky);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .6em;color:var(--navy);font-weight:800}h1{font-size:clamp(1.8rem,4.5vw,3rem)}h2{font-size:clamp(1.4rem,3vw,2.1rem)}h3{font-size:1.15rem}
p{margin:0 0 1em}ul,ol{margin:0 0 1em;padding-left:1.2em}.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}.narrow{max-width:800px}.center{text-align:center}
.kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);font-weight:800;margin-bottom:.5em}.lead{color:var(--mut);max-width:620px}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:.8em 1.6em;border-radius:999px;font-weight:800;letter-spacing:.06em;border:2px solid var(--navy);cursor:pointer;font-size:.92rem}
.btn:hover{background:var(--navy2);text-decoration:none}.btn.ghost{background:transparent;color:#fff;border-color:#fff}.btn.ghost:hover{background:rgba(255,255,255,.15)}.btn.small{padding:.6em 1.3em;font-size:.85rem}
.hide{display:none}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--navy);font-weight:800;letter-spacing:.04em;font-size:.95rem;white-space:nowrap}.brand em{font-style:normal;font-weight:400;color:var(--mut)}.brand img{width:44px;height:44px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem;align-items:center}.nav a{color:var(--navy);font-weight:600;font-size:.86rem;letter-spacing:.08em}.nav a.on{color:var(--sky)}
.nav .lang a{border:1px solid var(--navy);border-radius:999px;padding:.3em .9em;font-size:.8rem}
.menu-chk,.menu-btn{display:none}
@media(max-width:860px){.menu-btn{display:block;width:40px;height:40px;position:relative;cursor:pointer}.menu-btn span,.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:8px;width:24px;height:2px;background:var(--navy);transition:.2s}.menu-btn span{top:19px}.menu-btn span::before{top:-8px;left:0}.menu-btn span::after{top:8px;left:0}
.nav{display:none;position:absolute;left:0;right:0;top:68px;background:#fff;border-bottom:1px solid var(--line);padding:1rem 20px 1.4rem}.nav ul{flex-direction:column;align-items:flex-start;gap:.9rem}.menu-chk:checked~.nav{display:block}.brand span{font-size:.85rem}}
/* hero */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;background-size:cover;background-position:center;color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,37,69,.88) 0%,rgba(11,37,69,.55) 55%,rgba(11,37,69,.25) 100%)}
.hero-in{position:relative;padding:5rem 20px;max-width:var(--max)}.hero h1{color:#fff;max-width:14em;text-shadow:0 2px 12px rgba(0,0,0,.25)}.hero p{max-width:560px;font-size:1.05rem;opacity:.95}.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.ph{position:relative;min-height:46vh;display:flex;align-items:flex-end;background-size:cover;background-position:center;color:#fff}.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,.15),rgba(11,37,69,.78))}.ph .wrap{position:relative;padding-bottom:2.5rem}.ph h1{color:#fff;margin:0}.ph p{margin:.3em 0 0;letter-spacing:.12em;font-size:.85rem;opacity:.9}
/* stats */
.stats{background:var(--navy);color:#fff}.stats ul{list-style:none;margin:0;padding:1.6rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.stats li{text-align:center}.stats strong{display:block;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--ice);font-weight:800;line-height:1.1}.stats span{font-size:.8rem;opacity:.85}
@media(max-width:700px){.stats ul{grid-template-columns:1fr 1fr}}
/* sections */
section.split,section.steps,section.works-teaser,section.text,section.group,section.compare,section.photos,section.design,section.works-all{padding:4.5rem 0}
.split.alt{background:var(--ice2)}.split-in{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.split-in img{border-radius:14px;box-shadow:0 10px 30px rgba(11,37,69,.12)}
@media(max-width:800px){.split-in{grid-template-columns:1fr}}
.steplist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;counter-reset:s}.steplist li{background:var(--ice2);border-radius:12px;padding:1.2rem 1rem;font-weight:600;font-size:.95rem}.steplist span{display:block;font-size:1.6rem;color:var(--sky);font-weight:800;margin-bottom:.3rem}
@media(max-width:900px){.steplist{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.steplist{grid-template-columns:1fr}}
.numlist{padding-left:1.4em;font-weight:600}.numlist li{margin:.3em 0}
/* works */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}@media(max-width:900px){.works-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.works-grid{grid-template-columns:1fr}}
.work{position:relative;border-radius:14px;overflow:hidden;background:var(--navy);box-shadow:0 8px 24px rgba(11,37,69,.12)}.work img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s}.work:hover img{transform:scale(1.04)}
.work-t{position:absolute;inset:auto 0 0 0;padding:2.6rem 1.1rem 1rem;color:#fff;background:linear-gradient(180deg,rgba(11,37,69,0),rgba(11,37,69,.9))}.work-t .year{font-size:.75rem;letter-spacing:.2em;color:var(--ice);font-weight:800}.work-t h3{color:#fff;margin:.1em 0 .2em;font-size:1.25rem}.work-t h3 small{display:block;font-size:.72rem;font-weight:400;opacity:.85;letter-spacing:.1em}.work-t p{margin:0;font-size:.78rem;opacity:.9}
.works-teaser .center{margin-top:2rem}
/* company */
.text h2{max-width:22em}.group{background:var(--ice2)}.group-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}.group-grid li{background:#fff;border-radius:12px;padding:1.3rem 1.4rem;border:1px solid var(--line)}.group-grid h3{color:var(--sky);letter-spacing:.15em;font-size:.85rem;margin-bottom:.4em}.group-grid p{margin:0;font-size:.92rem}
@media(max-width:640px){.group-grid{grid-template-columns:1fr}}
/* technology */
.cmp{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}.cmp li{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.cmp li img{width:100%}.cmp h3{margin:1rem 1.2rem .4rem}.cmp p{margin:0 1.2rem .9rem;font-size:.9rem;color:var(--mut)}.cmp .old,.cmp .new{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.14em;padding:.15em .6em;border-radius:4px;margin-right:.5em;vertical-align:middle}.cmp .old{background:#e9eef2;color:#4b5a68}.cmp .new{background:var(--sky);color:#fff}
@media(max-width:900px){.cmp{grid-template-columns:1fr}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.two img{border-radius:12px;width:100%}@media(max-width:640px){.two{grid-template-columns:1fr}}
/* service */
.blocks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}.blocks>li{background:var(--ice2);border-radius:14px;padding:1.5rem 1.6rem}.blocks h3{margin-bottom:.6em}.blocks ul{margin:0;padding-left:1.2em;font-size:.95rem}.blocks ul li{margin:.25em 0}
@media(max-width:760px){.blocks{grid-template-columns:1fr}}
.design{background:var(--navy);color:#fff}.design h2,.design h3{color:#fff}.designs{list-style:none;padding:0;margin:0;display:grid;gap:2.2rem}.designs h3{font-size:1.05rem;color:var(--ice)}
/* contact */
.contact{background:linear-gradient(180deg,var(--ice2),#fff);padding:4.5rem 0}.form{max-width:640px;display:grid;gap:1rem}.form label{display:grid;gap:.35rem;font-weight:600;font-size:.9rem;color:var(--navy)}.form input,.form textarea{font:inherit;padding:.75em .9em;border:1px solid #c7d6e0;border-radius:10px;background:#fff;width:100%}.form input:focus,.form textarea:focus{outline:2px solid var(--sky);border-color:var(--sky)}.form .btn{justify-self:start}
/* footer */
.ftr{background:var(--navy);color:#cfe3ef;padding:3.5rem 0 1.5rem;font-size:.9rem}.ftr-in{display:grid;grid-template-columns:1.2fr 1.4fr .8fr;gap:2.5rem}.ftr h4{color:#fff;letter-spacing:.14em;font-size:.8rem;margin-bottom:.8em}.ftr ul{list-style:none;padding:0;margin:0}.ftr li{margin:.35em 0}.ftr a{color:#cfe3ef}.ftr strong{color:#fff}.copy{text-align:center;margin:2.5rem 0 0;font-size:.78rem;opacity:.7}
@media(max-width:800px){.ftr-in{grid-template-columns:1fr}}