/* 丸山工務店 — style.css
   ベースは白と淡い石色。コーポレートグリーン(#61B796)はボタン・線・印などのポイントに限定して使用 */
:root{
  --ink:#27302b; --ink-2:#5b645e; --ink-3:#8a928c;
  --paper:#fff; --stone:#f3f5f2; --stone-2:#e9ede8; --line:#dde3dd;
  --green:#61b796; --green-deep:#2e7a5c; --green-pale:#e8f4ee;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --w:1180px; --gut:clamp(20px,4vw,40px); --r:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.9;letter-spacing:.03em;font-feature-settings:"palt" 0}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-deep)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--green-deep);outline-offset:3px}
h1,h2,h3,h4{font-weight:700;line-height:1.5;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
.center{text-align:center;margin-top:40px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 16px;z-index:100}
.skip:focus{left:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:10px 26px;border-radius:999px;font-weight:700;font-size:.95rem;text-decoration:none;letter-spacing:.06em;transition:background .2s,color .2s,border-color .2s;margin:4px}
.btn-green{background:var(--green);color:#fff;border:1px solid var(--green)}
.btn-green:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.btn-line{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-lg{min-height:58px;padding:14px 40px;font-size:1.05rem}

/* header */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1400px;margin:auto;padding:12px var(--gut)}
.hd-logo img{width:clamp(170px,18vw,230px)}
.gnav{display:flex;align-items:center;gap:22px}
.gnav ul{display:flex;gap:clamp(12px,1.6vw,26px)}
.gnav li a{color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.gnav li a:hover,.gnav li a[aria-current]{border-bottom-color:var(--green)}
.gnav .gnav-sp{display:none}
.gnav-cta{display:flex;align-items:center;gap:12px}
.gnav-cta .tel{color:var(--ink);text-decoration:none;font-weight:700;font-size:1.05rem;letter-spacing:.04em;line-height:1.2;white-space:nowrap}
.gnav-cta .tel span{display:block;font-size:.65rem;font-weight:500;color:var(--ink-2)}
.gnav-cta .btn{margin:0;min-height:42px;padding:8px 20px}
.menu-btn{display:none}
@media (max-width:1180px){
  .gnav-cta .tel{display:none}
}
@media (max-width:980px){
  .menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:52px;height:52px;border:0;background:transparent;cursor:pointer;color:var(--ink)}
  .menu-btn span{display:block;width:24px;height:2px;background:currentColor;transition:transform .25s,opacity .2s}
  .menu-btn b{font-size:.6rem;font-weight:500;margin-top:2px}
  .menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .gnav{position:absolute;top:100%;left:0;right:0;bottom:auto;height:calc(100vh - var(--hd-h,77px));height:calc(100dvh - var(--hd-h,77px));z-index:60;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 40px;overflow:auto;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s}
  .gnav.is-open{visibility:visible;opacity:1}
  .gnav ul{flex-direction:column;gap:0}
  .gnav li a{display:block;padding:16px 4px;border-bottom:1px solid var(--line);font-size:1rem}
  .gnav .gnav-sp{display:block}
  .gnav-cta{flex-direction:column;align-items:stretch;margin-top:24px}
  .gnav-cta .tel{display:block;text-align:center;font-size:1.4rem;padding:10px}
  .gnav-cta .btn{min-height:54px}
}

/* sp bottom bar */
.spbar{display:none}
@media (max-width:760px){
  .spbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line)}
  .spbar a{display:flex;align-items:center;justify-content:center;min-height:54px;font-weight:700;text-decoration:none;color:var(--ink);font-size:.95rem}
  .spbar a.is-green{background:var(--green);color:#fff}
  body{padding-bottom:54px}
}

/* hero: 全面写真のスライド + 縦書きコピー */
.hero{position:relative;height:calc(100vh - 77px);height:calc(100svh - 77px);min-height:560px;max-height:1000px;overflow:hidden;background:#1d2320;color:#fff;isolation:isolate}
.hero-media,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;transition:opacity 1.8s ease;z-index:0}
.hero-slide.is-on{opacity:1;z-index:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);will-change:transform;filter:brightness(.86) saturate(.92)}
.hero-slide.is-on img{animation:heroZoom 9s cubic-bezier(.25,.1,.25,1) forwards}
@keyframes heroZoom{from{transform:scale(1.03)}to{transform:scale(1.12)}}
.hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(270deg,rgba(16,21,18,.78) 0%,rgba(16,21,18,.5) 26%,rgba(16,21,18,.12) 52%,rgba(16,21,18,0) 70%),linear-gradient(0deg,rgba(16,21,18,.66) 0%,rgba(16,21,18,0) 36%)}
.hero-copy{position:absolute;z-index:3;bottom:120px;top:clamp(40px,9vh,110px);right:clamp(24px,7vw,128px);display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(18px,2.4vw,36px)}
.hero-h{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:500;font-size:clamp(1.4rem,min(3.4vw,calc((100vh - 280px) / 15)),3.4rem);font-size:clamp(1.4rem,min(3.4vw,calc((100svh - 280px) / 15)),3.4rem);line-height:1.6;letter-spacing:.22em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero-h-in{display:block;white-space:nowrap}
.hero-sub{writing-mode:vertical-rl;font-size:clamp(.8rem,1vw,.95rem);letter-spacing:.2em;line-height:2.1;max-height:min(22em,calc(100vh - 380px));margin-top:5.5em;padding-right:16px;border-right:1px solid var(--green);opacity:.92}
.hero-foot{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(22px,4vh,40px);display:flex;align-items:flex-end;gap:28px;max-width:1400px}
.hero-cap{display:none;font-size:.88rem;letter-spacing:.06em;line-height:1.6;max-width:30em}
.hero-cap.is-on{display:block;animation:capIn .9s ease both}
.hero-cap a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
.hero-cap a:hover{border-color:var(--green)}
.hero-cap small{display:block;font-size:.7rem;color:rgba(255,255,255,.75);letter-spacing:.14em;margin-bottom:2px}
@keyframes capIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-dots{display:flex;gap:8px;margin-left:auto;margin-right:clamp(48px,6vw,96px)}
.hero-dot{width:44px;height:20px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.hero-dot i{position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(255,255,255,.35);overflow:hidden}
.hero-dot i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hero-dot.is-on i::after{animation:dotFill var(--hero-int,6500ms) linear forwards}
.hero-dot.is-done i::after{transform:scaleX(1)}
@keyframes dotFill{to{transform:scaleX(1)}}
.hero-scroll{position:absolute;z-index:3;right:clamp(20px,2.6vw,40px);bottom:0;writing-mode:vertical-rl;color:#fff;text-decoration:none;font-size:.7rem;letter-spacing:.3em;padding-bottom:76px}
.hero-scroll::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:64px;background:rgba(255,255,255,.4);overflow:hidden}
.hero-scroll::before{content:"";position:absolute;left:50%;bottom:0;width:1px;height:64px;background:#fff;z-index:1;transform-origin:top;animation:scrollLine 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes scrollLine{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* 初回表示の演出 */
html.js .hero-h-in{clip-path:inset(0 0 100% 0);animation:heroReveal 1.6s cubic-bezier(.7,0,.2,1) .35s forwards}
html.js .hero-sub{opacity:0;animation:fadeIn 1.2s ease 1.5s forwards}
html.js .hero-foot,html.js .hero-scroll{opacity:0;animation:fadeIn 1s ease 2s forwards}
@keyframes heroReveal{to{clip-path:inset(0 0 0 0)}}
@keyframes fadeIn{to{opacity:.92}}
@media (max-width:760px){
  .hero{height:calc(100svh - 77px - 54px);min-height:480px}
  .hero-copy{top:28px;right:22px}
  .hero-h{font-size:clamp(1.6rem,7.4vw,2.2rem);letter-spacing:.16em}
  .hero-sub{display:none}
  .hero-shade{background:linear-gradient(270deg,rgba(18,23,20,.58) 0%,rgba(18,23,20,.12) 50%,rgba(18,23,20,0) 70%),linear-gradient(0deg,rgba(18,23,20,.7) 0%,rgba(18,23,20,0) 40%)}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-dots{margin:0}
  .hero-scroll{display:none}
}
/* 実績の帯 */
.credo{border-bottom:1px solid var(--line);background:#fff}
.credo-list{display:grid;grid-template-columns:repeat(4,1fr)}
.credo-list li{padding:30px 0 28px 28px;border-left:1px solid var(--line)}
.credo-list li:first-child{border-left:0;padding-left:0}
.credo-list b{display:block;font-family:var(--mincho);font-weight:500;font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.1;letter-spacing:.02em}
.credo-list b small{font-family:var(--sans);font-size:.36em;font-weight:700;margin-left:.3em;color:var(--green-deep);letter-spacing:.08em}
.credo-list span{display:block;font-size:.8rem;color:var(--ink-2);margin-top:8px;line-height:1.6}
@media (max-width:900px){.credo-list{grid-template-columns:1fr 1fr}.credo-list li:nth-child(3){border-left:0;padding-left:0}.credo-list li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:420px){.credo-list li{padding-left:16px;padding-top:22px;padding-bottom:20px}}

/* intro */
.intro{padding-block:clamp(56px,9vw,110px);display:grid;grid-template-columns:1fr 1.25fr;gap:24px 64px;align-items:start}
.intro-h{font-family:var(--mincho);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:.08em;line-height:1.7}
.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:24px}
.stats li{padding:26px 8px 0;border-left:1px solid var(--line);padding-left:22px}
.stats li:first-child{border-left:0;padding-left:0}
.stats b{display:block;font-family:var(--mincho);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:500;line-height:1.1;color:var(--ink)}
.stats b small{font-size:.4em;margin-left:.2em;font-family:var(--sans)}
.stats span{font-size:.82rem;color:var(--ink-2)}
@media (max-width:760px){.intro{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.stats li{border-left:0;padding-left:0;border-bottom:1px solid var(--line);padding-bottom:18px}}

/* prose */
.prose p+p,.prose p+h4,.prose h4+p{margin-top:1em}
.prose h4.sub{font-size:1rem;padding-left:12px;border-left:3px solid var(--green);margin-top:1.6em}
.prose h4.sub:first-child{margin-top:0}
.prose .talk{display:grid;grid-template-columns:5.5em 1fr;gap:4px 14px}
.prose .talk-name{font-weight:700;font-size:.85rem;padding-top:.25em;color:var(--ink)}
.prose .talk.is-staff .talk-name{color:var(--green-deep)}
.prose .talk.is-staff .talk-body{color:var(--ink-2)}
@media (max-width:560px){.prose .talk{grid-template-columns:1fr}.prose .talk-name{padding:0}}

/* sections */
.sec{padding-block:clamp(56px,8vw,100px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.sec-h{font-family:var(--mincho);font-weight:500;font-size:clamp(1.55rem,2.6vw,2.15rem);letter-spacing:.1em;position:relative;padding-top:20px}
.sec-h::before{content:"";position:absolute;top:0;left:0;width:36px;height:3px;background:var(--green)}
.sec-h-s{font-size:1.35rem;margin-bottom:28px}
.sec-note{color:var(--ink-2);font-size:.92rem}
.sec-more{font-weight:700;text-decoration:none;font-size:.92rem;color:var(--ink);border-bottom:1px solid var(--green);padding-bottom:2px}
.sec-works,.sec-faq,.sec-related{background:var(--stone)}

/* work cards */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
@media (max-width:900px){.wgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.wgrid{grid-template-columns:1fr}}
.wcard a{display:block;text-decoration:none;color:var(--ink);background:#fff;height:100%}
.wcard-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--stone-2)}
.wcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.wcard a:hover .wcard-img img{transform:scale(1.04)}
.tag-ba{position:absolute;left:0;bottom:0;background:var(--green);color:#fff;font-size:.72rem;font-weight:700;padding:4px 12px;letter-spacing:.08em}
.wcard-body{padding:18px 20px 22px}
.wcard-meta,.work-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.75rem;color:var(--ink-2);letter-spacing:.06em}
.wcard-cat{color:var(--green-deep);font-weight:700}
.wcard-title{font-size:1.05rem;margin-top:6px;line-height:1.6}
.wcard-area{font-size:.8rem;color:var(--ink-2);margin-top:6px}
.cat-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;justify-content:center}
.cat-links a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 18px;color:var(--ink);text-decoration:none;font-size:.88rem}
.cat-links a:hover{border-color:var(--green)}
.cat-links span{font-size:.75rem;color:var(--ink-3)}

/* BA fader */
.ba{position:relative;overflow:hidden;background:var(--stone-2);user-select:none;-webkit-user-select:none;touch-action:pan-y;width:100%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.ba-handle i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.ba-handle i::before,.ba-handle i::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;margin-top:-6px}
.ba-handle i::before{left:7px;border-right-color:var(--green-deep)}
.ba-handle i::after{right:7px;border-left-color:var(--green-deep)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-range:focus-visible + *{outline:none}
.ba:has(.ba-range:focus-visible) .ba-handle i{outline:3px solid var(--green-deep);outline-offset:2px}
.ba-label{position:absolute;top:12px;font-size:.75rem;font-weight:700;letter-spacing:.1em;padding:4px 10px;pointer-events:none;transition:opacity .2s}
.ba-label-b{left:12px;background:rgba(39,48,43,.78);color:#fff}
.ba-label-a{right:12px;background:var(--green);color:#fff}
.ba figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font-size:.85rem;padding:24px 14px 10px;pointer-events:none}
.ba-hint{font-size:.85rem;color:var(--green-deep);background:var(--green-pale);padding:10px 16px;margin:0 0 32px}
.sec-ba{background:#fff}
.ba-feature{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(28px,5vw,64px);align-items:center}
.ba-feature-txt p{color:var(--ink-2);margin-top:18px}
.ba-feature-work a{display:block;color:var(--ink);font-weight:700;text-decoration:none;border-left:3px solid var(--green);padding-left:12px;line-height:1.6}
.ba-feature-work small{display:block;font-weight:400;font-size:.8rem;color:var(--ink-2)}
.ba-feature .btn{margin:24px 0 0}
@media (max-width:860px){.ba-feature{grid-template-columns:1fr}.ba-feature-img{order:-1}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
.pillars li{padding:28px 24px 8px 0;border-right:1px solid var(--line);padding-left:24px}
.pillars li:first-child{padding-left:0}
.pillars li:last-child{border-right:0}
.pillars h3{font-family:var(--mincho);font-weight:700;font-size:1.2rem;letter-spacing:.06em}
.pillars p{font-size:.88rem;color:var(--ink-2);margin-top:10px}
@media (max-width:900px){.pillars{grid-template-columns:1fr 1fr}.pillars li{border-right:0;padding-left:0;border-bottom:1px solid var(--line);padding-bottom:22px}}
@media (max-width:540px){.pillars{grid-template-columns:1fr}}

/* voice cards */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
@media (max-width:900px){.vgrid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.vgrid{grid-template-columns:1fr}}
.vcard a{display:block;text-decoration:none;color:var(--ink)}
.vcard figure{aspect-ratio:3/2;overflow:hidden;background:var(--stone-2)}
.vcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vcard a:hover img{transform:scale(1.04)}
.vcard-meta{font-size:.78rem;color:var(--ink-2);margin-top:14px;display:flex;gap:10px;align-items:center}
.vcard-type{border:1px solid var(--green);color:var(--green-deep);font-weight:700;padding:0 8px;font-size:.72rem}
.vcard h3{font-family:var(--mincho);font-size:1.15rem;margin-top:8px;font-weight:700}
.vcard-ex{font-size:.85rem;color:var(--ink-2);margin-top:8px;line-height:1.8}
.vgrid-full{padding-bottom:80px}

/* faq */
.faq-wrap{max-width:960px}
.faq{border-bottom:1px solid var(--line);background:#fff}
.faq-list{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 64px;position:relative;font-weight:700;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:20px;top:16px;font-family:var(--mincho);font-size:1.4rem;color:var(--green-deep);line-height:1.4}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{padding:0 32px 24px 64px;position:relative;color:var(--ink-2)}
.faq-a::before{content:"A";position:absolute;left:21px;top:-4px;font-family:var(--mincho);font-size:1.4rem;color:var(--ink-3)}
@media (max-width:560px){.faq summary{padding:16px 44px 16px 48px}.faq summary::before{left:12px;top:12px}.faq-a{padding:0 16px 20px 48px}.faq-a::before{left:13px}}
.faq-page{display:grid;grid-template-columns:220px 1fr;gap:48px;padding-bottom:80px}
.faq-toc ul{position:sticky;top:110px;border-left:1px solid var(--line)}
.faq-toc a{display:block;padding:8px 16px;color:var(--ink);text-decoration:none;font-size:.9rem}
.faq-toc a:hover{color:var(--green-deep)}
.faq-cat+.faq-cat{margin-top:56px}
.faq-cat h2{font-family:var(--mincho);font-weight:500;font-size:1.4rem;margin-bottom:16px}
@media (max-width:860px){.faq-page{grid-template-columns:1fr;gap:24px}.faq-toc ul{position:static;display:flex;flex-wrap:wrap;border:0;gap:8px}.faq-toc a{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.82rem}}

/* staff */
.staff-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.staff-strip a{display:block;text-decoration:none;color:var(--ink)}
.staff-strip img{aspect-ratio:3/4;object-fit:cover;width:100%;filter:saturate(.9)}
.staff-strip span{display:block;font-size:.68rem;color:var(--ink-2);margin-top:8px;line-height:1.5}
.staff-strip b{display:block;font-size:.85rem;color:var(--ink)}
@media (max-width:900px){.staff-strip{grid-template-columns:repeat(4,1fr)}}
.recruit-line{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:48px;padding:24px 28px;border:1px solid var(--line);border-left:4px solid var(--green)}
.staff-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 48px}
@media (max-width:860px){.staff-grid{grid-template-columns:1fr}}
.staff{display:grid;grid-template-columns:42% 1fr;gap:24px;align-items:start}
.staff-ph img{aspect-ratio:3/4;object-fit:cover;width:100%}
.staff-catch{font-family:var(--mincho);font-size:1.05rem;color:var(--green-deep);line-height:1.6}
.staff-name{font-size:1.45rem;margin-top:10px;letter-spacing:.12em}
.staff-name small{display:block;font-size:.78rem;color:var(--ink-2);letter-spacing:.08em;font-weight:500}
.staff-msg{font-size:.9rem;margin-top:14px}
.staff-dl{display:grid;grid-template-columns:5em 1fr;gap:6px 10px;font-size:.8rem;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-2)}
.staff-dl dt{font-weight:700;color:var(--ink)}
.staff-dl dd{margin:0}
@media (max-width:480px){.staff{grid-template-columns:1fr}.staff-ph{max-width:260px}}

/* news */
.news-wrap{max-width:960px}
.news-list li{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.news-list time{color:var(--ink-2);font-size:.88rem}
.news-list a{color:var(--ink)}
.news-full{padding-bottom:80px}
.news-full h2{font-size:1rem}
.news-full p{font-size:.9rem;color:var(--ink-2);margin-top:6px}
@media (max-width:540px){.news-list li{grid-template-columns:1fr;gap:2px}}

/* page header */
.phead{padding-top:20px;padding-bottom:clamp(32px,5vw,56px)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px;font-size:.75rem;color:var(--ink-3);padding:0}
.phead .crumbs{padding:0;margin-bottom:clamp(28px,5vw,56px)}
.crumbs li+li::before{content:"/";margin:0 8px;color:var(--line)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.phead-h{font-family:var(--mincho);font-weight:500;font-size:clamp(1.7rem,3.4vw,2.7rem);letter-spacing:.08em;line-height:1.55}
.phead-lead{margin-top:20px;max-width:46em;color:var(--ink-2)}
.work-meta{margin-bottom:12px}
.work-area{margin-top:10px;color:var(--ink-2);font-size:.92rem}
.voice-speakers{margin-top:14px;font-size:.85rem;color:var(--ink-2)}

/* work detail */
.work-cover{margin-bottom:clamp(36px,5vw,64px)}
.work-cover img{width:100%;max-height:78vh;object-fit:contain;background:var(--stone);cursor:zoom-in}
.work-body{max-width:980px;padding-bottom:60px}
.work-lead{font-size:1.02rem;margin-bottom:48px;padding-left:20px;border-left:3px solid var(--green)}
.wsec{margin-bottom:clamp(48px,7vw,84px)}
.wsec-ba{margin-bottom:16px}
.wsec-ba .ba{margin-bottom:16px}
.wsec-photos{display:grid;gap:16px;align-items:start}
.wsec-photos.cols-2{grid-template-columns:1fr 1fr}
.wsec-photos.cols-1 figure{max-width:100%}
.wsec-photos img{width:100%;cursor:zoom-in;background:var(--stone)}
.wsec-photos figcaption{font-size:.8rem;color:var(--ink-2);margin-top:6px}
@media (max-width:540px){.wsec-photos.cols-2{grid-template-columns:1fr}}
.wsec-txt{margin-top:24px;max-width:46em}
.wsec-txt h2,.vsec h2{font-family:var(--mincho);font-weight:700;font-size:1.3rem;margin-bottom:12px;letter-spacing:.05em}
.vsec{margin-bottom:56px}
.vsec .wsec-photos{margin-top:24px}
.work-voice{border:1px solid var(--line);padding:22px 26px;margin:24px 0 48px;display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
.work-voice p{font-size:.8rem;color:var(--ink-2)}
.work-voice a{font-weight:700;color:var(--ink)}
.work-voice small{font-weight:400;color:var(--ink-2);margin-left:10px}
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;border-top:1px solid var(--line);padding-top:28px;align-items:center}
.pager a{color:var(--ink);text-decoration:none;font-size:.92rem;line-height:1.6}
.pager small{display:block;color:var(--ink-3);font-size:.72rem}
.pager-next{text-align:right;grid-column:3}
.pager-list{grid-column:2;border:1px solid var(--line);border-radius:999px;padding:8px 18px}
@media (max-width:540px){.pager{grid-template-columns:1fr 1fr}.pager-list{grid-column:1/-1;grid-row:2;text-align:center}.pager-next{grid-column:2}}

/* works list */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;position:sticky;top:77px;z-index:5;background:rgba(255,255,255,.96);padding:12px 0}
.filter-btn{font:inherit;font-size:.88rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 18px;cursor:pointer;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.filter-btn span{font-size:.72rem;color:var(--ink-3)}
.filter-btn.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-btn.is-on span{color:#cfd6d1}
.wgroup{margin-bottom:72px}
.wgroup[hidden]{display:none}
.wgroup-h{font-family:var(--mincho);font-weight:500;font-size:1.45rem;margin-bottom:24px;display:flex;align-items:center;gap:16px}
.wgroup-h::after{content:"";flex:1;height:1px;background:var(--line)}
.wgroup-note{color:var(--ink-2);font-size:.9rem;margin-bottom:20px}
.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.plist li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.plist img{width:96px;aspect-ratio:3/2;object-fit:cover}
.plist h3{font-size:.95rem}
.plist-meta{font-size:.75rem;color:var(--ink-2)}
@media (max-width:760px){.plist{grid-template-columns:1fr}}

/* generic page */
.page-cover{margin-bottom:56px}
.page-cover img{width:100%;max-height:520px;object-fit:cover}
.page-body{max-width:1080px;padding-bottom:40px}
.steps{counter-reset:none;margin-bottom:72px;position:relative}
.step{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line);position:relative}
.step:last-child{border-bottom:1px solid var(--line)}
.step-num{font-family:var(--mincho);color:var(--green-deep);font-size:.95rem;letter-spacing:.1em;padding-top:2px}
.step h2{font-size:1.15rem;margin-bottom:6px}
.step .prose{color:var(--ink-2)}
@media (max-width:540px){.step{grid-template-columns:1fr;gap:4px}}
.psec{padding:clamp(36px,5vw,56px) 0;border-top:1px solid var(--line)}
.psec:first-child{border-top:0;padding-top:0}
.psec-h{font-family:var(--mincho);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.65rem);letter-spacing:.06em;margin-bottom:22px}
.psec.has-img .psec-in{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.psec.has-img:nth-of-type(even) .psec-img{order:-1}
.psec-img img{width:100%;cursor:zoom-in}
@media (max-width:760px){.psec.has-img .psec-in{grid-template-columns:1fr}.psec.has-img:nth-of-type(even) .psec-img{order:0}}
.dtable-wrap{overflow-x:auto;margin-top:16px}
.dtable{width:100%;border-collapse:collapse;font-size:.92rem}
.dtable th,.dtable td{border-bottom:1px solid var(--line);padding:14px 12px;text-align:left;vertical-align:top}
.dtable th{width:13em;font-weight:700;background:var(--stone);white-space:nowrap}
@media (max-width:560px){.dtable th,.dtable td{display:block;width:auto}.dtable th{border-bottom:0;padding-bottom:4px}.dtable td{padding-top:6px}}

/* contact */
.contact{display:grid;grid-template-columns:300px 1fr;gap:56px;padding-bottom:80px;align-items:start}
.contact-side{background:var(--stone);padding:28px;font-size:.9rem}
.contact-side h2{font-size:.8rem;color:var(--ink-2);margin-top:18px}
.contact-side h2:first-child{margin-top:0}
.contact-tel a{font-size:1.6rem;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:.04em}
.contact-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-2)}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:32px}.contact-side{order:2}}
.form{display:grid;gap:22px}
.f-row{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.f-row label,.f-row legend{font-weight:700;font-size:.92rem;padding:0}
.f-row em{font-style:normal;font-size:.68rem;background:var(--green);color:#fff;padding:1px 8px;margin-left:10px;vertical-align:2px;border-radius:2px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #c9d1cb;border-radius:var(--r);background:#fff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
.f-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.chip input{position:absolute;opacity:0}
.chip span{display:inline-block;border:1px solid #c9d1cb;border-radius:999px;padding:8px 16px;cursor:pointer;font-size:.88rem;background:#fff}
.chip input:checked+span{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.chip input:focus-visible+span{outline:2px solid var(--green-deep);outline-offset:2px}
.f-hp{position:absolute!important;left:-9999px}
.f-agree{font-size:.9rem}
.f-error{color:#b3261e;font-weight:700}
.f-submit{justify-self:start;margin:0}
.thanks{padding-block:60px 100px}
.thanks .btn{margin-top:28px}

/* cta band / footer */
.cta-band{background:var(--ink);color:#fff;padding-block:clamp(56px,8vw,88px)}
.cta-band h2{font-family:var(--mincho);font-weight:500;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:.08em}
.cta-band p{color:#cfd6d1;margin-top:14px;max-width:44em;font-size:.92rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center;margin-top:28px}
.cta-actions .btn{margin:0}
.cta-tel{color:#fff;text-decoration:none;font-size:1.7rem;font-weight:700;letter-spacing:.05em;line-height:1.3}
.cta-tel small{display:block;font-size:.72rem;font-weight:400;color:#cfd6d1}
.cta-tel:hover{color:var(--green)}
.ft{padding-top:56px;font-size:.85rem;background:#fff}
.ft-in{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.ft-co p{margin-top:16px;color:var(--ink-2);line-height:2}
.ft-co a{color:var(--ink-2)}
.ft-nav{display:flex;gap:56px}
.ft-nav li{margin-bottom:8px}
.ft-nav a{color:var(--ink);text-decoration:none}
.ft-nav a:hover{color:var(--green-deep)}
.ft-bn{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.ft-bn img{height:44px;width:auto}
.ft-copy{text-align:center;font-size:.75rem;color:var(--ink-3);padding:24px 0}
@media (max-width:540px){.ft-nav{gap:28px}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(20,24,22,.94);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb button{position:absolute;top:12px;right:12px;width:48px;height:48px;border:0;background:transparent;color:#fff;font-size:2rem;cursor:pointer}
.tcy{text-combine-upright:all;-webkit-text-combine:horizontal}
.faq-wrap,.news-wrap{max-width:var(--w)}
.faq-wrap .faq-list,.news-wrap .news-list{max-width:960px}
.wsec-ba .ba,.ba-feature .ba{margin-inline:auto}
.wsec-photos.cols-1 img{margin-inline:auto}
.work-cover img{max-height:none}
[hidden]{display:none!important}
@media (max-width:760px){.hero-h{font-size:clamp(1.3rem,5.6vw,1.65rem)}}

/* 厳選した施工事例（スライドショー） */
.picks{background:var(--ink);color:#fff;padding-block:clamp(64px,9vw,112px);overflow:hidden}
.picks-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.sec-h-inv{color:#fff}
.picks .sec-note{color:#b9c3bc;margin-top:12px}
.picks-ctrl{display:flex;align-items:center;gap:12px}
.picks-count{font-family:var(--mincho);font-size:.95rem;color:#b9c3bc;margin-right:12px;letter-spacing:.1em}
.picks-count b{color:#fff;font-size:1.5rem;font-weight:500}
.picks-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:1.1rem;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.picks-btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.picks-track{position:relative;--pad:max(var(--gut),calc((100vw - var(--w)) / 2 + var(--gut)));display:flex;gap:clamp(16px,2.4vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding-inline:var(--pad);scrollbar-width:none;cursor:grab;outline:none;overscroll-behavior-x:contain}
.picks-track::-webkit-scrollbar{display:none}
.picks-track.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.picks-track.is-drag a{pointer-events:none}
.picks-track:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.pick{flex:0 0 clamp(280px,46vw,700px);scroll-snap-align:start;opacity:.42;transition:opacity .6s ease}
.pick.is-cur{opacity:1}
.pick a{display:block;color:#fff;text-decoration:none}
.pick-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:#333b36}
.pick-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);user-select:none;-webkit-user-drag:none}
.pick a:hover .pick-img img{transform:scale(1.05)}
.pick-body{padding-top:18px}
.pick-meta{display:flex;gap:14px;font-size:.78rem;color:#b9c3bc;letter-spacing:.08em}
.pick-meta span{color:var(--green);font-family:var(--mincho);font-weight:700}
.pick-title{font-family:var(--mincho);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.45rem);margin-top:6px;letter-spacing:.06em}
.pick-area{font-size:.8rem;color:#b9c3bc;margin-top:4px}
.picks-bar{margin-top:36px}
.picks-progress{display:block;height:2px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.picks-progress i{position:absolute;left:0;top:0;bottom:0;width:10%;background:var(--green);transition:width .6s ease}
.picks-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:36px}
.cat-links-inv{margin:0;justify-content:flex-start}
.cat-links-inv a{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cat-links-inv a:hover{border-color:var(--green)}
.cat-links-inv span{color:#9aa59e}
.btn-white{border:1px solid #fff;color:#fff;background:transparent}
.btn-white:hover{background:#fff;color:var(--ink)}
@media (max-width:760px){.pick{flex-basis:84vw}.picks-ctrl .picks-btn{width:44px;height:44px}.picks-head{align-items:flex-start}}

/* スクロールで表示（JSが有効なときだけ） */
html.js [data-rv]{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0ms)}
html.js [data-rv=up]{transform:translate3d(0,40px,0)}
html.js [data-rv=right]{transform:translate3d(64px,0,0)}
html.js [data-rv=left]{transform:translate3d(-48px,0,0)}
html.js [data-rv=zoom]{transform:scale(.96)}
html.js [data-rv].is-in{opacity:1;transform:none}
html.js .sec-h[data-rv]::before{transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1) .35s}
html.js .sec-h[data-rv].is-in::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  html.js [data-rv]{opacity:1!important;transform:none!important;transition:none}
  .hero-slide.is-on img{animation:none}
  html.js .hero-h-in,html.js .hero-sub,html.js .hero-foot,html.js .hero-scroll{animation:none;clip-path:none;opacity:1}
}