/* 案A 調査票：紙の地、インクの濃紺、線で見せる */
:root{--paper:#f5f2ea;--paper2:#ece7da;--ink:#0e1a2b;--ink2:#46515f;--gold:#b08a3e;--gold-d:#7f6122;--line:rgba(14,26,43,.22);--gut:clamp(16px,4.4vw,72px);--dr-bg:#0e1a2b;--bar-bg:#0e1a2b;--bar-cta:#c9a357;--focus:#b08a3e}
body{background:var(--paper);color:var(--ink);font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:17px}
@media(max-width:767.98px){body{font-size:16px}}
.mono{font-family:"IBM Plex Mono",monospace}
.h-xl{font-weight:700;font-size:clamp(60px,9.3vw,158px);line-height:1.08;letter-spacing:-.02em}
.h-lg{font-weight:700;font-size:clamp(38px,6.1vw,96px);line-height:1.14;letter-spacing:-.015em}
.h-md{font-weight:700;font-size:clamp(30px,4vw,60px);line-height:1.22;letter-spacing:-.01em}
.h-lg .ln,.h-md .ln{white-space:nowrap}
@media(max-width:767.98px){.h-lg{font-size:min(10vw,52px)}.h-md{font-size:min(8vw,40px)}}
.btn{background:var(--ink);color:#fff;border-radius:2px}.btn:hover{background:var(--gold-d)}
.hd{color:var(--ink);background:var(--paper)}
.hd.is-scrolled{box-shadow:0 1px 0 var(--line)}
.logo-t{color:var(--ink)}
.row-rule{display:block;height:1px;background:var(--line);grid-column:1/-1}
body.menu-open .hd{color:#fff;background:none;box-shadow:none}body.menu-open .logo{visibility:hidden}

.loader{position:fixed;inset:0;z-index:200;background:var(--paper);display:grid;place-items:center;pointer-events:none}
.ld{fill:none;stroke:var(--ink);stroke-width:2.5}
html:not(.anim) .loader{display:none}

/* ヒーロー */
.hero{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);min-height:100svh}
.hero-text{padding:clamp(116px,15vh,170px) 0 56px var(--gut);display:flex;flex-direction:column;justify-content:flex-end;position:relative;z-index:2}
.eyebrow{font-size:clamp(14px,1.2vw,18px);margin-bottom:22px}
.hero-lead{margin-top:30px;max-width:37em;line-height:1.85}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:28px}
.tel-big{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1.25}
.tel-big b{font-size:clamp(30px,2.9vw,42px);letter-spacing:.01em}
.tel-big small{font-size:13px;color:var(--ink2)}
.btn-main{height:62px;padding:0 34px;font-size:16px}
.hero-note{margin-top:14px;font-size:14px;color:var(--ink2)}
.hero-photo{position:relative;height:calc(100svh - 76px);min-height:620px;margin-top:76px}
.hp-frame{position:absolute;inset:0}
.hp-frame img{object-position:50% 34%}
.callouts{position:absolute;inset:0}
.cl{position:absolute;display:flex;align-items:center;color:#fff;font-weight:700;font-size:clamp(14px,1.15vw,17px);white-space:nowrap}
.cl i{display:block;height:1px;width:clamp(36px,5vw,84px);background:#fff;transform-origin:left;position:relative}
.cl i::before{content:"";position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:#fff}
.cl em{font-style:normal;padding:4px 10px;background:rgba(14,26,43,.74);margin-left:0}
.cl-1{left:48%;top:9%}.cl-2{left:27%;top:47%}.cl-3{left:58%;top:66%}

@media(max-width:1119.98px) and (min-width:768px){.hero{grid-template-columns:1.2fr .8fr}.h-xl{font-size:clamp(60px,10vw,104px)}.btn-main{height:56px;padding:0 24px}}
@media(max-width:767.98px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-photo{order:-1;height:62svh;min-height:380px;margin-top:64px}
  .hero-text{padding:0 var(--gut) 40px;margin-top:-58px}
  .h-xl{font-size:clamp(50px,15.6vw,74px)}
  .h-xl .ln:nth-child(1){background:var(--paper);display:inline-block;padding:12px 12px 0 0;margin-left:0}
  .h-xl .ln{white-space:nowrap}
  .eyebrow{order:2;margin:18px 0 0;font-size:14px}
  .h-xl{order:1}.hero-lead{order:3;margin-top:12px}.hero-act{order:4;margin-top:20px}.hero-note{order:5}
  .tel-big b{font-size:32px}
  .btn-main{width:100%}
}

/* 考え方 */
.statement{padding:clamp(90px,17vh,200px) var(--gut)}
.st-small{font-size:clamp(15px,1.3vw,19px);margin-bottom:26px;color:var(--gold-d);font-weight:700}
.st-big{font-size:clamp(30px,4.7vw,76px);line-height:1.34;font-weight:700;max-width:21em;letter-spacing:-.01em}

/* 住まいの断面 */
.survey{padding:0 var(--gut) clamp(60px,10vh,120px)}
.survey-head{margin-bottom:clamp(30px,6vh,70px)}
.survey-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,110px);align-items:start}
.house-wrap{position:sticky;top:92px;height:calc(100svh - 120px);display:flex;align-items:center}
.house{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.hs{stroke:rgba(14,26,43,.34);transition:stroke .45s}
.hs .fillable{transition:fill .45s}
.hs .dash{stroke-dasharray:5 6}
.hs.on{stroke:var(--gold-d);stroke-width:2.6}
.hs.on .fillable{fill:rgba(176,138,62,.28)}
.step{min-height:82svh;padding:6vh 0;display:flex;flex-direction:column;justify-content:center}
.step-part{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px;color:var(--gold-d)}
.num{font-family:"IBM Plex Mono",monospace;font-weight:500}
.step h3{font-size:clamp(32px,3.6vw,56px);line-height:1.2;margin:8px 0 16px}
.step-d{max-width:30em}
.st-pic{margin-top:24px;aspect-ratio:4/3;max-width:460px}
.step-case{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:460px;margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:15px}
.step-case b{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:22px;white-space:nowrap}
@media(max-width:899.98px){
  .survey-grid{grid-template-columns:1fr;gap:0}
  .house-wrap{top:64px;height:34svh;z-index:5;background:var(--paper);justify-content:center;padding:8px 0;box-shadow:0 1px 0 var(--line);margin-inline:calc(var(--gut)*-1)}
  .step{min-height:0;padding:44px 0 30px}
  .step h3{font-size:34px}
  .st-pic,.step-case{max-width:none}
}
@media(min-width:768px) and (max-width:899.98px){.house-wrap{top:76px}}

/* 工事の記録 */
.ledger{background:var(--ink);color:#f5f2ea;padding:clamp(80px,14vh,170px) var(--gut);--line:rgba(245,242,234,.26)}
.ledger-head{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:end;margin-bottom:clamp(40px,8vh,90px)}
.ledger-head p{color:#cfd3d8}
.row{display:grid;grid-template-columns:clamp(220px,25vw,360px) 1fr auto;gap:0 clamp(20px,4vw,64px);align-items:center;padding-bottom:0}
.row-pic{grid-column:1;margin:clamp(16px,2.4vh,26px) 0;aspect-ratio:2/1;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.row:hover .row-pic{transform:translateX(10px)}
.row-pic img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}.row:hover .row-pic img{transform:scale(1.05)}
.row-t h3{font-size:clamp(22px,2.3vw,36px);line-height:1.3}
.row-t p{color:#cfd3d8;font-size:15px}
.row-y{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.row-y b{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:clamp(50px,7.4vw,118px);line-height:1;color:#e0bf79;letter-spacing:-.04em}
.row-y small{font-size:14px;color:#cfd3d8}
@media(max-width:767.98px){
  .ledger-head{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:0}
  .row-pic{margin:20px 0 12px;aspect-ratio:2/1;max-width:440px;width:100%}
  .row-y{justify-content:flex-end;padding-bottom:18px}
  .row-y b{font-size:60px}
}

/* 現場の写真 */
.field{overflow:hidden;padding:clamp(60px,12vh,130px) 0 clamp(30px,6vh,70px)}
.field-track{display:flex;gap:clamp(12px,1.6vw,24px);align-items:flex-end;width:max-content;padding-left:var(--gut);will-change:transform}
.f1{width:clamp(320px,42vw,660px);aspect-ratio:4/3}.f2{width:clamp(240px,26vw,400px);aspect-ratio:719/426}.f3{width:clamp(220px,24vw,380px);aspect-ratio:3/4}.f4{width:clamp(260px,28vw,430px);aspect-ratio:3/4}.f5{width:clamp(220px,22vw,340px);aspect-ratio:3/4}
.field-cap{padding:14px var(--gut) 0;font-size:13px;color:var(--ink2)}
@media(hover:none),(max-width:767.98px){.field-track{width:auto;overflow-x:auto;scroll-snap-type:x proximity;padding-right:var(--gut);-webkit-overflow-scrolling:touch}.field-track>*{flex:none;scroll-snap-align:center}}

/* 窓口 */
.network{display:grid;grid-template-columns:repeat(12,1fr);gap:0 20px;padding:clamp(70px,12vh,150px) var(--gut);position:relative}
.nw-a{grid-column:1/8;grid-row:1/3;aspect-ratio:16/10}
.nw-b{grid-column:7/13;grid-row:2;align-self:end;aspect-ratio:3/1.1;margin:28px 0 -5vw;z-index:2;box-shadow:0 0 0 clamp(6px,.8vw,12px) var(--paper)}
.nw-text .h-md{font-size:clamp(26px,3.1vw,48px)}
.nw-text{grid-column:8/13;grid-row:1;padding-left:clamp(0px,2vw,30px)}
.nw-text p{margin-top:20px;max-width:30em}
@media(max-width:899.98px){
  .network{display:flex;flex-direction:column;gap:0}
  .nw-text{order:-1;padding:0 0 28px}
  .nw-a{aspect-ratio:16/10}.nw-b{aspect-ratio:3/1.1;width:82%;align-self:flex-end;margin-top:-40px}
}

/* 流れ */
.flow{padding:clamp(60px,10vh,130px) var(--gut);background:var(--paper2)}
.flow-body{position:relative;margin-top:clamp(40px,8vh,80px);padding-left:clamp(44px,11vw,180px)}
.flow-line{position:absolute;left:clamp(12px,3vw,50px);top:0;bottom:0;width:4px;height:100%}
.flow-line path{stroke:var(--gold);stroke-width:4;fill:none;vector-effect:non-scaling-stroke}
.flow-list li{position:relative;padding:clamp(22px,4.5vh,50px) 0;max-width:40em}
.fl-n{position:absolute;left:calc(clamp(44px,11vw,180px)*-1 + clamp(12px,3vw,50px) - 18px);top:clamp(26px,5vh,54px);width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:17px}
.flow-list h3{font-size:clamp(25px,3vw,44px);line-height:1.25;margin-bottom:8px}

/* 不安 */
.worry{padding:clamp(80px,14vh,170px) var(--gut)}
.worry-list{margin-top:clamp(36px,7vh,70px)}
.w-row{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,5vw,80px)}
.w-row dt{font-size:clamp(21px,2.3vw,34px);font-weight:700;line-height:1.35;padding:clamp(20px,3.4vh,36px) 0}
.w-row dd{padding:clamp(20px,3.4vh,36px) 0;align-self:center}
@media(max-width:767.98px){.w-row{grid-template-columns:1fr}.w-row dt{padding-bottom:6px}.w-row dd{padding-top:0}}

/* FAQ */
.faq{padding:0 var(--gut) clamp(80px,14vh,160px);display:grid;grid-template-columns:.8fr 1.2fr;gap:30px clamp(20px,5vw,80px);align-items:start}
.faq h2{position:sticky;top:110px}
.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{padding:20px 0;font-weight:700;font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.faq-a{padding:0 38px 22px 0}
@media(max-width:899.98px){.faq{grid-template-columns:1fr}.faq h2{position:static}}

/* 会社情報 */
.company{padding:clamp(70px,12vh,150px) var(--gut);background:var(--paper2)}
.co-head{margin-bottom:clamp(36px,6vh,70px)}.co-head p{margin-top:14px}
.bases{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(16px,3vw,40px);margin-bottom:clamp(40px,7vh,80px)}
.bases h3{padding-top:18px;font-size:22px;display:flex;align-items:baseline;justify-content:space-between}
.bases h3 span{font-size:clamp(38px,4.6vw,70px);line-height:1.1}
.bases p{font-size:15px;margin-top:10px;padding-bottom:20px}
.co>div{display:grid;grid-template-columns:clamp(100px,14vw,180px) 1fr;padding:16px 0;border-top:1px solid var(--line)}
.co dt{font-weight:700}
@media(max-width:767.98px){.bases{grid-template-columns:1fr}.co>div{grid-template-columns:1fr;gap:2px}}

/* お問い合わせ */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);padding:clamp(80px,14vh,170px) var(--gut)}
.ct-left p{margin:22px 0 26px;max-width:26em}
.ct-right{background:#fff;padding:clamp(20px,3vw,44px);box-shadow:0 0 0 1px var(--line)}
@media(max-width:899.98px){.contact{grid-template-columns:1fr}}

.ft{background:var(--ink);color:#f5f2ea;padding:50px var(--gut);display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}
.ft-logo{display:flex;align-items:center;gap:10px}.ft-logo .logo-t{color:#fff;font-size:26px}
.ft-c{margin-left:auto;font-size:13px;opacity:.75}