/* =========================================================
   こもれび工務店（架空）— Harukaze Works の見本サイト
   preset: trust（誠実･信頼感）＋ 木の茶色を差し色に
   開幕：mo-O-R curtain（trust の標準）＋ trust-H-02 全面写真のスライド ＋ trust-H-04 実務情報カード
   ========================================================= */
:root{
  --font-head:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --font-body:"Noto Sans JP",sans-serif;
  --font-en:"Inter","Noto Sans JP",sans-serif;
  --c-base:#ffffff;--c-surface:#f3f5f7;--c-text:#2b2e33;--c-sub:#5f646b;--c-line:#dde1e6;
  --c-accent:#0b5fae;--c-accent-deep:#0c2a4d;--c-accent-soft:#e8f1fa;--c-wood:#a8743f;--c-wood-soft:#f6efe6;
  --container:1260px;--gutter:40px;--sec-y:136px;
  --r-card:12px;--r-pill:999px;
  --ease:cubic-bezier(.33,1,.68,1);--ease-io:cubic-bezier(.77,0,.18,1);
  --t-hover:.3s cubic-bezier(.4,0,.2,1);--t-show:1.5s var(--ease);--show-dy:12px;
  --hd:80px;--demo:34px;
}
@media (max-width:767px){:root{--gutter:20px;--sec-y:72px;--hd:64px;--demo:30px}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + var(--demo) + 8px)}
body{margin:0;background:var(--c-base);color:var(--c-text);font-family:var(--font-body);font-size:16px;line-height:1.8;letter-spacing:.04em;overflow-x:clip;-webkit-font-smoothing:antialiased}
@media (max-width:767px){body{font-size:14px}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,dl,dd{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
p,h1,h2,h3,h4,li,dd,dt,th,td,span,small{word-break:auto-phrase;text-wrap:pretty}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--sec-y) 0;position:relative}
.sp{display:none}@media (max-width:767px){.sp{display:inline}.pc{display:none}}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.ph{display:block;background:var(--c-surface) center/cover no-repeat}
.photo-empty{background:linear-gradient(135deg,#dfe9f3,#f3eadf)}

/* 見本の帯（常に上に） */
.demo{position:fixed;inset:0 0 auto 0;z-index:120;height:var(--demo);display:flex;align-items:center;justify-content:center;gap:14px;background:#1d2733;color:#fff;font-size:12px;letter-spacing:.04em;padding:0 12px}
.demo b{font-weight:700;background:#f2c94c;color:#1d2733;border-radius:4px;padding:1px 8px;font-size:11px}
.demo a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (max-width:767px){.demo{font-size:10.5px;gap:8px}.demo span{display:none}}

/* ボタン（trust-M-01） */
.btn{display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 10px 0 28px;border-radius:var(--r-pill);background:var(--c-accent);color:#fff;font:700 15px/1 var(--font-body);letter-spacing:.06em;transition:background var(--t-hover);white-space:nowrap}
.btn:hover{background:var(--c-accent-deep)}
.btn i{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--c-accent);display:grid;place-items:center;transition:transform .35s}
.btn i svg{width:16px;height:16px}
.btn:hover i{transform:translateX(3px)}
.btn--line{background:#fff;color:var(--c-text);box-shadow:inset 0 0 0 1.5px var(--c-line)}
.btn--line:hover{background:var(--c-surface)}
.btn--line i{background:var(--c-accent);color:#fff}
.btn--wh{background:rgba(255,255,255,.94);color:var(--c-text)}
.btn--wh:hover{background:#fff}
.btn--wh i{background:var(--c-accent);color:#fff}
.btn--sm{height:46px;font-size:14px;padding-left:22px}
.btn--sm i{width:28px;height:28px}

/* 見出し（trust-T-01） */
.ttl{margin-bottom:56px}
.ttl__en{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--font-en);letter-spacing:.18em;color:var(--c-accent);text-transform:uppercase;margin-bottom:16px}
.ttl__en::before{content:"";width:8px;height:8px;background:var(--c-wood);transform:rotate(45deg)}
.ttl h2{font:700 clamp(24px,2.6vw,34px)/1.5 var(--font-head);letter-spacing:.04em}
.ttl p{margin-top:16px;color:var(--c-sub);max-width:40em}
.ttl--c{text-align:center}.ttl--c .ttl__en{justify-content:center}.ttl--c p{margin-left:auto;margin-right:auto}
.ttl--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
@media (max-width:767px){.ttl{margin-bottom:36px}}

/* 表示（v1.6） */
html.js .rv{opacity:0;transform:translateY(var(--show-dy));transition:opacity var(--t-show),transform var(--t-show);transition-delay:calc(var(--i,0) * .12s)}
html.js .rv.is-in{opacity:1;transform:none}
/* 写真のマスク（mo-E-01・trust は下から） */
html.js .e1{clip-path:inset(100% 0 0 0);transition:clip-path 1.8s cubic-bezier(.65,0,.35,1)}
html.js .e1.is-in{clip-path:inset(0 0 0 0)}

/* ---------- ヘッダー（trust-N-01／U-01 隠れるヘッダー） ---------- */
.hd{position:fixed;left:0;right:0;top:var(--demo);z-index:100;height:var(--hd);display:flex;align-items:center;gap:32px;padding:0 var(--gutter);color:#fff;transition:background .6s,color .6s,transform .6s var(--ease),box-shadow .6s}
.hd.is-solid,.hd--solid{background:#fff;color:var(--c-text);box-shadow:0 1px 0 var(--c-line)}
.hd.is-hide{transform:translateY(-110%)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font:700 19px/1 var(--font-head);letter-spacing:.08em;white-space:nowrap}
.brand svg{width:34px;height:34px;flex:none}
.brand small{display:block;font:500 9px/1 var(--font-en);letter-spacing:.2em;opacity:.7;margin-top:5px}
.gnav{display:flex;gap:30px;font-size:14px;font-weight:500}
.gnav a{position:relative;padding:6px 0}
.gnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.hd__tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.hd__tel b{font:600 20px/1 var(--font-en);letter-spacing:.02em}
.hd__tel small{font-size:10.5px;opacity:.8}
.mbtn{display:none;width:46px;height:46px;border-radius:50%;background:var(--c-accent);position:relative}
.mbtn span{position:absolute;left:14px;right:14px;height:2px;background:#fff;transition:transform .35s,top .35s,opacity .2s}
.mbtn span:nth-child(1){top:16px}.mbtn span:nth-child(2){top:22px}.mbtn span:nth-child(3){top:28px}
.mbtn[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.mbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.mbtn[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}
.mbtn em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.spnav{position:fixed;inset:0;z-index:95;background:#fff;padding:calc(var(--hd) + var(--demo) + 20px) var(--gutter) 40px;display:flex;flex-direction:column;gap:24px;overflow-y:auto}
.spnav[hidden]{display:none}
.spnav a.sl{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;border-bottom:1px solid var(--c-line);font:700 18px/1.4 var(--font-head)}
.spnav a.sl small{font:600 11px/1 var(--font-en);letter-spacing:.14em;color:var(--c-accent)}
@media (max-width:1100px){.gnav{gap:20px}.hd__tel{display:none}}
@media (max-width:900px){.gnav,.hd>.btn{display:none}.mbtn{display:block}}

/* ---------- ヒーロー：mo-O-R curtain ＋ trust-H-02 ---------- */
.op{--ok:1;position:relative;height:100svh;min-height:620px;max-height:980px;overflow:hidden;background:var(--c-accent-deep);color:#fff;isolation:isolate}
.op__photos,.op__ph,.op__ph>.ph{position:absolute;inset:0}
.op__photos{z-index:1;overflow:hidden;will-change:transform}
.op__ph{z-index:0}.op__ph.is-prev{z-index:1}.op__ph.is-on{z-index:2}
.op__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(12,42,77,.5) 0,rgba(12,42,77,0) 24%,rgba(12,42,77,0) 40%,rgba(12,42,77,.66) 100%),linear-gradient(90deg,rgba(12,42,77,.55) 0,rgba(12,42,77,.25) 40%,rgba(12,42,77,0) 65%)}
.op__mark{position:absolute;z-index:4;left:0;right:0;top:calc(var(--demo) + var(--hd) + 2vh);padding-left:max(var(--gutter),calc((100% - var(--container))/2 + var(--gutter)));white-space:nowrap;pointer-events:none;font:200 clamp(60px,11vw,184px)/1 var(--font-en);letter-spacing:-.03em;color:rgba(255,255,255,.22);will-change:transform}
.op__copy{position:absolute;z-index:5;left:max(var(--gutter),calc((100% - var(--container))/2 + var(--gutter)));right:var(--gutter);bottom:clamp(150px,22vh,220px);will-change:transform}
.op__en{margin:0 0 1em;font:500 clamp(12px,1.1vw,14px)/1 var(--font-en);letter-spacing:.3em;white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.op__h{font:700 clamp(30px,4vw,56px)/1.38 var(--font-head);letter-spacing:.06em;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.op__l{display:block;overflow:hidden;padding:0 .1em .08em 0}
.op__r{display:inline-block}
.op__mk{font-style:normal;position:relative;z-index:0;white-space:nowrap}
.op__mk::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.12em;height:.3em;background:rgba(168,116,63,.75);z-index:-1;transform-origin:left}
.op__lead{margin-top:18px;font-size:15px;max-width:30em;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.op__cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.op .ch{display:inline-block;white-space:pre}
.op__cur{display:none;position:absolute;inset:0;z-index:8;background:var(--c-accent-deep);place-items:center;overflow:hidden;pointer-events:none}
.op__cur span{font:700 clamp(30px,5vw,72px)/1 var(--font-head);letter-spacing:.2em;padding-left:.2em;color:#fff;white-space:nowrap}
.op__glow{display:none;position:absolute;inset:-10% -30%;z-index:4;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(100deg,transparent 35%,rgba(255,214,160,.16) 47%,rgba(255,232,190,.26) 50%,rgba(255,214,160,.16) 53%,transparent 65%)}
html.js .op:not(.is-static):not(.is-done) .op__cur{display:grid}
html.js .op:not(.is-play):not(.is-static) .op__copy,html.js .op:not(.is-play):not(.is-static) .op__mark{visibility:hidden}
html.js .op.is-play .op__ph:first-child>.ph{animation:opZoom calc(3.6s*var(--ok)) var(--ease) calc(.6s*var(--ok)) both}
html.js .op.is-play .op__cta{animation:opFadeUp calc(1s*var(--ok)) var(--ease) calc(1.4s*var(--ok)) both}
html.js .op.is-play .op__lead{animation:opFadeUp calc(1.4s*var(--ok)) var(--ease) calc(3.6s*var(--ok)) both}
html.js .op.is-play .op__en .ch{animation:opChar calc(1.6s*var(--ok)) var(--ease) both;animation-delay:calc((2 + var(--i)*.07)*1s*var(--ok))}
html.js .op.is-play .op__mark .ch{animation:opMark calc(1.8s*var(--ok)) var(--ease) both;animation-delay:calc((1.6 + var(--i)*.06)*1s*var(--ok))}
html.js .op.is-play .op__r{animation:opRise calc(1.5s*var(--ok)) var(--ease) both;animation-delay:calc(2.8s*var(--ok))}
html.js .op.is-play .op__l:nth-child(2) .op__r{animation-delay:calc(3.05s*var(--ok))}
html.js .op.is-play .op__l:nth-child(3) .op__r{animation-delay:calc(3.3s*var(--ok))}
html.js .op.is-play .op__mk::after{animation:opUnder calc(1.1s*var(--ok)) var(--ease-io) calc(3.7s*var(--ok)) both}
html.js .op.is-play .op__glow{display:block;animation:opGlow calc(11s*var(--ok)) ease-in-out calc(4.6s*var(--ok)) infinite}
html.js .op.is-play .op__cur{animation:opCurtain calc(1.8s*var(--ok)) var(--ease-io) calc(.7s*var(--ok)) both}
html.js .op.is-play .op__cur span{animation:opCurTxt calc(1.5s*var(--ok)) ease both}
html.js .op.is-off .op__glow,html.js .op.is-off .op__ph>.ph{animation-play-state:paused}
@keyframes opZoom{from{transform:scale(1.2)}to{transform:none}}
@keyframes opFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes opChar{from{opacity:0;transform:translateY(.7em) rotateX(-70deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes opMark{from{opacity:0;transform:translateY(55%)}to{opacity:1;transform:none}}
@keyframes opRise{from{transform:translateY(112%)}to{transform:none}}
@keyframes opUnder{from{transform:scaleX(0)}to{transform:none}}
@keyframes opGlow{0%{opacity:.001;transform:translateX(-45%)}18%{opacity:1}55%{opacity:1}78%,100%{opacity:.001;transform:translateX(45%)}}
@keyframes opCurtain{from{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}to{clip-path:polygon(130% 0,130% 0,100% 100%,100% 100%)}}
@keyframes opCurTxt{0%{opacity:0;transform:scale(.94)}35%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-40px)}}
/* 重ね替え：斜めワイプ（trust の標準） */
html.js .op__ph.is-on.is-anim{animation:opSwapWipe calc(2s*var(--ok)) cubic-bezier(.65,0,.35,1) both}
html.js .op__ph.is-on>.ph{animation:opDrift 12s linear both}
@keyframes opSwapWipe{from{clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%)}to{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}}
@keyframes opDrift{from{transform:scale(1)}to{transform:scale(1.06)}}
/* 送り表示＋一時停止（trust-H-02） */
.op__pager{position:absolute;z-index:6;right:max(var(--gutter),calc((100% - var(--container))/2 + var(--gutter)));top:calc(var(--demo) + var(--hd) + 40px);display:flex;align-items:center;gap:12px;font:500 12px/1 var(--font-en);letter-spacing:.1em}
.op__pager i{width:72px;height:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.op__pager i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.op.is-cyc .op__pager i::after{animation:pgr 9s linear infinite}
.op.is-paused .op__pager i::after,.op.is-off .op__pager i::after{animation-play-state:paused}
@keyframes pgr{to{transform:scaleX(1)}}
.op__pause{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center}
.op__pause svg{width:12px;height:12px;fill:#fff}
.op__pause .pl{display:none}.op.is-paused .op__pause .pl{display:block}.op.is-paused .op__pause .pa{display:none}
html:not(.js) .op__pager{display:none}
/* 実務情報カード（trust-H-04） */
.info{position:absolute;z-index:7;right:0;bottom:0;width:min(640px,100%);background:#fff;color:var(--c-text);border-radius:var(--r-card) 0 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.info>div{padding:20px 22px;border-left:1px solid var(--c-line)}
.info>div:first-child{border-left:0}
.info dt{font-size:11px;color:var(--c-accent);font-weight:700;letter-spacing:.08em;margin-bottom:4px}
.info dd{font-size:14px;font-weight:700;line-height:1.5}
.info dd small{display:block;font-weight:400;font-size:11.5px;color:var(--c-sub)}
@media (max-width:767px){
  .op{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column}
  .op__stage{position:relative;height:calc(100svh - 150px);min-height:540px}
  .op__copy{bottom:28px}
  .op__h{font-size:clamp(25px,7.4vw,32px)}
  .op__mark{font-size:17vw;top:calc(var(--demo) + var(--hd) + 8px)}
  .op__pager{right:var(--gutter);top:calc(var(--demo) + var(--hd) + 10px)}
  .op__pager i{width:40px}
  .cta__tel a.tel{font-size:30px}
  .op__cur span{font-size:clamp(20px,6.4vw,30px);letter-spacing:.12em;padding-left:.12em}
  .op__cta .btn{height:50px;font-size:14px}
  .info{position:relative;width:100%;border-radius:0;grid-template-columns:minmax(0,1fr)}
  .info>div{border-left:0;border-top:1px solid var(--c-line);padding:12px var(--gutter);display:flex;gap:14px;align-items:baseline}
  .info>div:first-child{border-top:0}
  .info dt{flex:none;width:6.5em;margin:0}
}
@media (min-width:768px){.op__stage{position:absolute;inset:0}}
@media (prefers-reduced-motion:reduce){
  .op *,.op{animation:none!important}
  .op__cur,.op__glow{display:none!important}
  .op__copy,.op__mark{visibility:visible!important;opacity:1!important;transform:none!important}
}

/* ---------- お困りごと ---------- */
.nayami{background:var(--c-surface)}
.nayami__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.nayami__grid li{display:flex;align-items:center;gap:16px;background:#fff;border-radius:var(--r-card);padding:20px 22px;font-weight:700;font-size:16px}
.nayami__grid svg{width:48px;height:48px;flex:none;padding:9px;border-radius:50%;background:var(--c-accent-soft);fill:none;stroke:var(--c-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nayami__grid small{display:block;font-weight:400;font-size:12.5px;color:var(--c-sub)}
.nayami__note{text-align:center;margin-top:36px;font:700 18px/1.7 var(--font-head)}
.nayami__note b{color:var(--c-accent)}
@media (max-width:900px){.nayami__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.nayami__grid{grid-template-columns:minmax(0,1fr);gap:10px}.nayami__grid li{padding:14px 16px;font-size:15px}.nayami__grid svg{width:42px;height:42px}}

/* ---------- 工事の内容（trust-S-01） ---------- */
.svc__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.svc__card{display:block}
.svc__img{display:block;aspect-ratio:3/2;border-radius:var(--r-card);overflow:hidden}
.svc__img .ph{width:100%;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.svc__card:hover .ph,.svc__card:focus-visible .ph{transform:scale(1.05)}
.svc__card h3{margin-top:18px;font:700 18px/1.5 var(--font-head);display:inline-block;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:var(--c-line);transition:text-decoration-color .3s}
.svc__card:hover h3{text-decoration-color:var(--c-accent)}
.svc__card p{margin-top:10px;font-size:14px;color:var(--c-sub)}
.svc__more{margin-top:48px;text-align:center}
@media (max-width:1000px){.svc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc__grid{grid-template-columns:minmax(0,1fr);gap:28px}}

/* ---------- 施工事例（trust-W-01・見られる①） ---------- */
.works{background:var(--c-wood-soft)}
.wk__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.wk{display:block;background:#fff;border-radius:var(--r-card);overflow:hidden;transition:box-shadow .45s}
.wk:hover{box-shadow:0 18px 40px -24px rgba(12,42,77,.35)}
.wk__pic{display:block;aspect-ratio:4/3;overflow:hidden;position:relative}
.wk__pic .ph{position:absolute;inset:0;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.wk:hover .wk__pic .ph{transform:scale(1.05)}
.wk__cat{position:absolute;left:12px;top:12px;z-index:1;font-size:11.5px;font-weight:700;background:#fff;border-radius:999px;padding:3px 12px;color:var(--c-accent-deep)}
.wk__body{display:block;padding:16px 18px 18px}
.wk__ttl{display:block;font:700 16px/1.55 var(--font-head)}
.wk__meta{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin-top:10px;font-size:12.5px;color:var(--c-sub)}
.wk__meta dt{color:var(--c-wood);font-weight:700}
.wk__note{margin-top:20px;font-size:12px;color:var(--c-sub)}
@media (max-width:1000px){.wk__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.wk__grid{gap:12px}.wk__body{padding:12px 12px 14px}.wk__ttl{font-size:14px}.wk__meta{font-size:11.5px;grid-template-columns:minmax(0,1fr)}}
/* 一覧の絞り込み */
.flt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.flt button{padding:9px 18px;border-radius:999px;font-size:14px;font-weight:700;background:#fff;box-shadow:inset 0 0 0 1.5px var(--c-line);transition:background .3s,color .3s,box-shadow .3s}
.flt button[aria-pressed="true"]{background:var(--c-accent);color:#fff;box-shadow:none}
.wk__grid--list>li{transition:opacity .6s,transform .6s var(--ease)}
.wk__grid--list>li.is-hide{display:none}

/* ---------- 工事の流れを写真で（mo-A-05 縦2列・trust ◎） ---------- */
.a5{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.a5__cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:520px;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.a5__col{display:flex;flex-direction:column;gap:14px;animation:a5up 48s linear infinite}
.a5__col:nth-child(2){margin-top:-150px}
.a5__item{aspect-ratio:4/5;border-radius:var(--r-card);flex:none}
.a5.is-off .a5__col,.a5.is-paused .a5__col{animation-play-state:paused}
@keyframes a5up{to{transform:translateY(-50%)}}
.a5__stop{margin-top:20px;font-size:12px;color:var(--c-sub);border:1px solid var(--c-line);border-radius:999px;padding:5px 14px}
.a5__stop[aria-pressed="true"]{background:var(--c-text);color:#fff;border-color:var(--c-text)}
.reasons{display:flex;flex-direction:column;gap:0;margin-top:8px}
.reasons li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 18px;padding:22px 0;border-top:1px solid var(--c-line)}
.reasons li:last-child{border-bottom:1px solid var(--c-line)}
.reasons b{grid-row:1/3;font:300 40px/1 var(--font-en);color:var(--c-accent)}
.reasons h3{font:700 18px/1.5 var(--font-head)}
.reasons p{font-size:14px;color:var(--c-sub)}
@media (max-width:900px){.a5{grid-template-columns:minmax(0,1fr);gap:36px}.a5__cols{height:360px;grid-template-columns:1fr 1fr 1fr}.a5__col:nth-child(3){margin-top:-80px}}
@media (min-width:901px){.a5__col:nth-child(3){display:none}}
@media (prefers-reduced-motion:reduce){.a5__col{animation:none}}

/* ---------- 対応エリアと費用の目安（見られる②） ---------- */
.area{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.area__map{position:relative;background:var(--c-accent-soft);border-radius:var(--r-card);padding:28px;aspect-ratio:1/1}
.area__map svg{width:100%;height:100%}
.area__map .w{fill:#fff;stroke:#bcd2e8;stroke-width:2}
.area__map .w.on{fill:var(--c-accent);stroke:#fff}
.area__map text{font:700 16px var(--font-body);fill:#7f8ea0}
.area__map text.on{fill:#fff}
.area__map .pin{fill:var(--c-wood)}
.area__note{position:absolute;right:14px;bottom:10px;font-size:11px;color:var(--c-sub)}
.area__txt h3,.cost h3{font:700 20px/1.5 var(--font-head);margin-bottom:12px}
.area__txt>p{color:var(--c-sub);font-size:15px}
.area__chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 36px}
.area__chips li{font-size:14px;font-weight:700;background:var(--c-accent-soft);color:var(--c-accent-deep);border-radius:999px;padding:5px 16px}
.cost{border-top:1px solid var(--c-line);padding-top:32px}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:15px 4px;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top}
.tbl th{font-weight:500;width:auto}
.tbl td{text-align:right;font:600 16px/1.5 var(--font-en);white-space:nowrap}
.tbl td small{font:400 12px var(--font-body);color:var(--c-sub);margin-left:4px}
.tbl tr:first-child th,.tbl tr:first-child td{border-top:1px solid var(--c-line)}
.cost__note{margin-top:14px;font-size:12.5px;color:var(--c-sub)}
@media (max-width:900px){.area{grid-template-columns:minmax(0,1fr);gap:36px}.area__map{max-width:420px;width:100%;margin:0 auto}}

/* ---------- 代表あいさつ・許可（見られる③） ---------- */
.boss{background:var(--c-surface)}
.boss__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:center}
.boss__fig{position:relative}
.boss__face{aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:linear-gradient(160deg,#dfeaf5,#f4ecdf)}
.boss__face svg{width:100%;height:100%;display:block}
.boss__cap{position:absolute;left:-16px;bottom:24px;background:#fff;border-radius:8px;padding:12px 18px;box-shadow:0 10px 30px -18px rgba(12,42,77,.4)}
.boss__cap small{display:block;font-size:11px;color:var(--c-sub)}
.boss__cap b{font:700 18px/1.4 var(--font-head);letter-spacing:.1em}
.boss__msg h3{font:700 clamp(21px,2.2vw,28px)/1.6 var(--font-head);margin-bottom:22px}
.boss__msg p+p{margin-top:14px}
.boss__msg p{color:#41454b}
.lic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px}
.lic li{background:#fff;border-radius:10px;padding:14px 16px;border-left:3px solid var(--c-accent)}
.lic small{display:block;font-size:11px;color:var(--c-accent);font-weight:700;letter-spacing:.06em}
.lic b{display:block;font-size:13.5px;font-weight:700;line-height:1.55}
@media (max-width:900px){.boss__in{grid-template-columns:minmax(0,1fr);gap:40px}.boss__fig{max-width:340px;margin:0 auto;width:100%}.boss__cap{left:12px}.lic{grid-template-columns:minmax(0,1fr)}}

/* ---------- ご相談の流れ（mo-S-03 の縦版） ---------- */
.flow__list{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;counter-reset:f}
.flow__list::before{content:"";position:absolute;left:4%;right:4%;top:31px;height:2px;background:var(--c-line)}
.flow__list::after{content:"";position:absolute;left:4%;right:4%;top:31px;height:2px;background:var(--c-accent);transform-origin:left;transform:scaleX(var(--p,1))}
html.js .flow__list::after{transform:scaleX(var(--p,0))}
.flow__list li{position:relative;text-align:center;padding:0 4px}
.flow__list b{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:#fff;border:2px solid var(--c-line);font:500 20px/1 var(--font-en);color:var(--c-sub);transition:background .9s,border-color .9s,color .9s}
.flow__list li.is-pass b,html:not(.js) .flow__list b{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.flow__list h3{font:700 16px/1.5 var(--font-head)}
.flow__list p{font-size:13px;color:var(--c-sub);margin-top:6px;text-align:left}
@media (max-width:900px){.flow__list{grid-template-columns:minmax(0,1fr);gap:22px}.flow__list::before,.flow__list::after{left:31px;right:auto;top:20px;bottom:20px;width:2px;height:auto}.flow__list::after{transform-origin:top;transform:scaleY(var(--p,1))}html.js .flow__list::after{transform:scaleY(var(--p,0))}.flow__list li{text-align:left;padding-left:86px;min-height:64px}.flow__list b{position:absolute;left:0;top:0;margin:0}.flow__list p{margin-top:2px}}

/* ---------- お問い合わせ（trust-C-01） ---------- */
.cta{background:var(--c-accent-deep);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"CONTACT";position:absolute;right:-1vw;bottom:-3vw;font:200 16vw/1 var(--font-en);letter-spacing:-.03em;color:rgba(255,255,255,.06);pointer-events:none}
.cta__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;position:relative}
.cta .ttl__en{color:#9fc5ea}
.cta h2{font:700 clamp(24px,2.8vw,36px)/1.5 var(--font-head)}
.cta__in>div>p{margin-top:12px;color:#c9d8e8}
.cta__tel{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cta__tel a.tel{font:500 clamp(34px,3.6vw,46px)/1 var(--font-en);letter-spacing:.02em;display:flex;align-items:center;gap:12px}
.cta__tel a.tel svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8}
.cta__tel small{color:#c9d8e8;font-size:13px}
@media (max-width:900px){.cta__in{grid-template-columns:minmax(0,1fr);gap:28px}}

/* ---------- 固定の連絡バー（mo-U-02・trust ◎） ---------- */
.u2{position:fixed;left:50%;bottom:18px;z-index:90;display:flex;gap:8px;padding:8px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 14px 36px -14px rgba(12,42,77,.45);transform:translate(-50%,140%);transition:transform .9s var(--ease)}
.u2.is-on{transform:translate(-50%,0)}
.u2 a{display:flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap}
.u2 a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u2__tel{background:var(--c-surface)}
.u2__mail{background:var(--c-accent);color:#fff}
@media (max-width:767px){.u2{left:12px;right:12px;bottom:12px;transform:translateY(140%)}.u2.is-on{transform:none}.u2 a{flex:1;justify-content:center;padding:0 10px;font-size:13.5px}}
html:not(.js) .u2{transform:translate(-50%,0)}
@media (max-width:767px){html:not(.js) .u2{transform:none}}

/* ---------- 下層ページの見出し ---------- */
.ph-hd{position:relative;padding:calc(var(--demo) + var(--hd) + 72px) 0 72px;background:var(--c-accent-deep);color:#fff;overflow:hidden}
.ph-hd .ph{position:absolute;inset:0;opacity:.35}
.ph-hd .wrap{position:relative}
.ph-hd .ttl__en{color:#9fc5ea;margin-bottom:12px}
.ph-hd h1{font:700 clamp(28px,3.4vw,44px)/1.4 var(--font-head);letter-spacing:.06em}
.ph-hd p{margin-top:12px;color:#d6e3f0}
.crumb{display:flex;gap:10px;font-size:12px;color:var(--c-sub);padding:14px 0}
.crumb a{color:var(--c-accent)}
.crumb li+li::before{content:"/";margin-right:10px;color:var(--c-line)}

/* 工事の内容（詳細・trust-S-02） */
.s02{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--c-line)}
.s02:nth-child(even) .s02__pic{order:2}
.s02__pic{aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden}
.s02__pic .ph{width:100%;height:100%}
.s02 h2{font:700 24px/1.5 var(--font-head);margin-bottom:10px}
.s02 h2 small{display:block;font:600 12px/1 var(--font-en);letter-spacing:.16em;color:var(--c-accent);margin-bottom:10px}
.s02>div>p{color:var(--c-sub)}
.s02__list{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.s02__list li{padding:12px 0;border-bottom:1px solid var(--c-line);font-size:14.5px;display:flex;justify-content:space-between;gap:8px}
.s02__list li span{color:var(--c-sub);font:500 13px var(--font-en);white-space:nowrap}
@media (max-width:900px){.s02{grid-template-columns:minmax(0,1fr);gap:24px;padding:40px 0}.s02:nth-child(even) .s02__pic{order:0}.s02__list{grid-template-columns:minmax(0,1fr)}}

/* 会社概要（trust-I-01） */
.co{width:100%;border-collapse:collapse;font-size:15px}
.co th,.co td{padding:18px 8px;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top}
.co tr:first-child th,.co tr:first-child td{border-top:1px solid var(--c-line)}
.co th{width:9em;font-weight:700;color:var(--c-accent-deep)}
.co td small{color:var(--c-sub);font-size:12.5px}
@media (max-width:600px){.co th,.co td{display:block;width:auto;padding:10px 4px}.co th{border-bottom:0;padding-bottom:0}}
.access{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.access__map{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:#e9eef2}
.access__map svg{width:100%;height:100%}
.access__map span{position:absolute;right:12px;bottom:10px;font-size:11px;color:var(--c-sub);background:rgba(255,255,255,.8);padding:2px 8px;border-radius:4px}
@media (max-width:900px){.access{grid-template-columns:minmax(0,1fr)}}
.form{display:flex;flex-direction:column;gap:16px;max-width:720px;margin:0 auto}
.fld{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
.fld em{font-style:normal;font-size:11px;background:#d64040;color:#fff;border-radius:3px;padding:1px 6px;margin-left:6px}
.fld input,.fld select,.fld textarea{font:inherit;font-weight:400;font-size:16px;border:1.5px solid var(--c-line);border-radius:8px;background:#fff;padding:12px 14px;color:var(--c-text)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--c-accent);box-shadow:0 0 0 4px var(--c-accent-soft)}
.form__note{font-size:12.5px;color:var(--c-sub);text-align:center}
.form .btn{align-self:center}
.form__done{display:none;text-align:center;background:var(--c-accent-soft);border-radius:var(--r-card);padding:20px;font-weight:700}
.form.is-done .form__done{display:block}

/* ---------- フッター（trust-F-01） ---------- */
.ft{background:#141c26;color:#cfd8e2;padding:88px 0 calc(40px + 80px)}
.ft__catch{font:700 clamp(26px,3.6vw,48px)/1.4 var(--font-head);color:#fff;letter-spacing:.06em}
.ft__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;margin-top:56px;padding-top:32px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px}
.ft__row .brand{color:#fff;margin:0 0 14px}
.ft__nav{display:grid;grid-template-columns:repeat(2,auto);gap:10px 40px}
.ft__nav a:hover{color:#fff}
.ft__copy{margin-top:40px;font-size:11.5px;color:#8996a4}
@media (max-width:767px){.ft{padding-top:64px}.ft__row{grid-template-columns:minmax(0,1fr)}}

/* 読んだ量の輪（mo-S-04） */
.totop{position:fixed;right:20px;bottom:20px;z-index:85;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c-accent) calc(var(--p,0) * 1turn),var(--c-line) 0);opacity:0;pointer-events:none;transition:opacity .6s}
.totop::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff}
.totop svg{position:relative;width:18px;height:18px;transform:rotate(-90deg);color:var(--c-accent)}
.totop.is-on{opacity:1;pointer-events:auto}
@media (max-width:767px){.totop{bottom:80px;right:12px;width:44px;height:44px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  html.js .rv{opacity:1;transform:none}
  html.js .e1{clip-path:none}
  html.js .flow__list::after{transform:none}
}