/* ============================================================
   トップページ専用（2026-09-30 第5版・立て直し）
   最初の依頼に立ち返る：「清潔感 × 信頼（ブルー）」「しっかりした会社のサイト」「写真多め」
   ・ファーストビューだけ紺＋家の写真、その上に「家の断面図」
   ・その下は白と淡い青で明るく。紺は最初と最後だけ
   ・書体は Zen角ゴシック New で統一。飾り（色分け・タグ・判子）は使わない
   ヘッダー・フッター・ボタンの基本形は style.css を使う。
   ============================================================ */
.is-top{
  --f-go:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --sky:#EAF4FA;--sky-2:#F5FAFD;--t-line:#DCE8EF;--t-text:#1F3440;--t-muted:#5B6E79;
  --edge:max(var(--gut),calc((100% - 1240px) / 2 + var(--gut)));
}
.tp{font-family:var(--f-go);font-size:15.5px;line-height:1.95;letter-spacing:.04em;color:var(--t-text)}
.tp h1,.tp h2,.tp h3{font-family:var(--f-go)}
.nw{white-space:nowrap}
.t-wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}

/* ---------- 章の見出し ---------- */
.sec{padding:clamp(64px,10vw,112px) 0}
.sec--tint{background:var(--sky)}
.sh{margin-bottom:clamp(28px,4vw,44px)}
.sh--c{text-align:center}
.sh-lb{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13.5px;font-weight:700;letter-spacing:.12em;color:var(--blue)}
.sh-lb::before{content:"";width:20px;height:2px;background:var(--aqua)}
.tp .sec h2,.co h2{margin:0;font-size:clamp(1.45rem,5.4vw,2.15rem);font-weight:700;line-height:1.55;letter-spacing:.04em;color:var(--navy)}
.sh-lead{margin:14px 0 0;max-width:40em;font-size:15px;line-height:1.95;color:var(--t-muted)}
.sh--c .sh-lead{margin-inline:auto}

/* ---------- ヘッダー（トップのスマホだけ、1行に収める） ---------- */
.is-top .nav > .btn{transition:opacity .3s ease,transform .3s ease,visibility .3s}
.is-top.hero-cta-in .nav > .btn{opacity:0;visibility:hidden;transform:translateY(-6px)}
@media(max-width:900px){
  .is-top .brand__en{display:none}
  .is-top .brand{gap:.5em}
  .is-top .brand__mark{width:34px;height:34px}
  .is-top .brand__name{font-size:14.5px;white-space:nowrap}
  .is-top .header__inner{gap:8px}
  .is-top .nav > .btn{min-height:36px;padding:0 14px;font-size:12.5px;width:auto;box-shadow:none}
}

/* ============================================================
   ファーストビュー（紺＋家の写真＋断面図）
   ============================================================ */
.hv{position:relative;overflow:hidden;padding:calc(var(--header-h) + 24px) 0 48px;background:var(--navy);color:#fff}
.hv-bg{position:absolute;inset:0}
.hv-bg img{width:100%;height:100%;object-fit:cover;object-position:42% 55%}
.hv-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,40,64,.82) 0%,rgba(11,58,91,.62) 45%,rgba(11,58,91,.86) 100%)}
.hv-in{position:relative;max-width:1320px;margin-inline:auto;padding-inline:var(--gut);display:grid;gap:30px}
.hv-tx > *{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.22,.7,.2,1),transform .9s cubic-bezier(.22,.7,.2,1)}
.is-ready .hv-tx > *{opacity:1;transform:none}
.is-ready .hv-tx > :nth-child(2){transition-delay:.08s}.is-ready .hv-tx > :nth-child(3){transition-delay:.16s}
.is-ready .hv-tx > :nth-child(4){transition-delay:.24s}.is-ready .hv-tx > :nth-child(5){transition-delay:.32s}
.hv-lb{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;font-weight:500;letter-spacing:.12em;color:#A9DDE9}
.hv-lb::before{content:"";width:22px;height:2px;background:var(--aqua)}
.hv h1{margin:0;font-size:clamp(1.5rem,6.1vw,2.5rem);font-weight:900;line-height:1.5;letter-spacing:.03em;color:#fff}
.hv h1 em{font-style:normal;color:#8BDDEA}
.hv-lead{margin:14px 0 0;font-size:15.5px;line-height:1.85;color:#CFE2EC}
.hv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:24px}
.hv-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:#fff;font-size:15px}
.hv-link svg{width:18px;height:18px;transition:transform .25s ease}
@media (hover:hover){.hv-link:hover svg{transform:translateX(3px)}}
.hv-pt{display:flex;flex-wrap:wrap;gap:6px 18px;margin:20px 0 0;padding:0;list-style:none}
.hv-pt li{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:#E3EEF5}
.hv-pt svg{width:16px;height:16px;color:#6FD3A0}

/* 断面図 */
.hv-fig{width:100%;max-width:560px;justify-self:center;opacity:0;transform:translateY(20px);transition:opacity 1s cubic-bezier(.22,.7,.2,1) .35s,transform 1s cubic-bezier(.22,.7,.2,1) .35s}
.is-ready .hv-fig{opacity:1;transform:none}
.xr-frame{background:#fff;border-radius:16px;padding:12px 14px 10px;box-shadow:0 30px 60px -32px rgba(0,0,0,.6)}
.xr-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px;line-height:1.4}
.xr-meta__sec{font-weight:700;font-size:13px;color:var(--navy)}
.xr-meta__now{padding:2px 10px;border-radius:999px;background:var(--blue);color:#fff;font-size:12px;font-weight:700}
.xr-svg{display:block;width:100%;height:auto;overflow:hidden;border-radius:10px}
.xr-cap{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-size:13.5px;font-weight:700;color:var(--navy);min-height:1.6em;line-height:1.5}
.xr-cap::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--aqua)}
.xr-tabs{display:flex;gap:6px;margin-top:10px}
.xr-tabs button{flex:1;min-height:40px;padding:0 4px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease}
.xr-tabs button.is-on{background:#fff;border-color:#fff;color:var(--navy)}
@media (hover:hover){.xr-tabs button:not(.is-on):hover{border-color:#fff}}

.xr-scene{transform-box:view-box;transform-origin:0 0;transition:transform 1.25s cubic-bezier(.65,0,.35,1)}
.xr-svg[data-s="1"] .xr-scene{transform:translate(-502.5px,-352.5px) scale(1.75)}
.xr-svg[data-s="2"] .xr-scene{transform:translate(-231px,-360px) scale(1.9)}
.xr-svg[data-s="3"] .xr-scene{transform:translate(-25px,-478.8px) scale(2.3)}
.xr-moist,.xr-term,.xr-pipes,.xr-pit,.xr-sludge,.xr-mk,.xr-guard,.xr-dim,.xr-dim-t{transition:opacity .7s ease}
.xr-haze{opacity:.07}
.xr-drop{fill:#12A9C4;animation:xr-rise 2.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes xr-rise{0%{transform:translateY(6px);opacity:0}35%{opacity:.85}100%{transform:translateY(-12px);opacity:0}}
.xr-ant{animation:xr-wig .8s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes xr-wig{from{transform:translateX(-1.3px)}to{transform:translateX(1.3px)}}
.xr-water path{stroke-dasharray:5 11;animation:xr-flow 1.8s linear infinite}
@keyframes xr-flow{to{stroke-dashoffset:-32}}
.xr-sheet{fill:none;stroke:#12A9C4;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s cubic-bezier(.22,.7,.2,1)}
.xr-guard{opacity:0}
.xr-mk path{fill:none;stroke:#0B3A5B;stroke-width:1.2;stroke-dasharray:3 3}
.xr-mk__dot{fill:var(--blue)}
.xr-mk__pulse{fill:none;stroke:#12A9C4;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:xr-pulse 2.2s ease-out infinite}
@keyframes xr-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.xr-mk__n{fill:#fff;font:700 13px 'Zen Kaku Gothic New',sans-serif;text-anchor:middle}
.xr-mk__lb{fill:#0B3A5B;font:700 14px 'Zen Kaku Gothic New',sans-serif;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.xr-dim-t{fill:#0B3A5B;opacity:.7;font:500 10px 'Zen Kaku Gothic New',sans-serif}
.xr-svg:not([data-s="0"]) :is(.xr-mk,.xr-dim,.xr-dim-t){opacity:0}
.xr-svg[data-s="1"] :is(.xr-moist,.xr-term){opacity:.15}
.xr-svg[data-s="2"] :is(.xr-pipes,.xr-pit,.xr-sludge,.xr-term){opacity:.22}
.xr-svg[data-s="3"] :is(.xr-pipes,.xr-pit,.xr-sludge,.xr-moist){opacity:.18}
.xr-svg[data-s="1"] .xr-water path{animation-duration:.55s;stroke-width:3.2}
.xr-svg[data-s="1"] .xr-sludge{opacity:0;transition:opacity 1.2s ease 2s}
.xr-svg[data-s="2"] .xr-sheet{stroke-dashoffset:0;transition-delay:1.3s}
.xr-svg[data-s="2"] .xr-moist{opacity:0;transition:opacity 1.2s ease 2.6s}
.xr-svg[data-s="3"] .xr-guard{opacity:1;transition:opacity 1s ease 1.8s}
.xr-svg[data-s="3"] .xr-term{opacity:0;transition:opacity 1s ease 2.7s}

/* ============================================================
   3つの専門サービス
   ============================================================ */
.sv-grid{display:grid;gap:18px}
.sv{display:flex;flex-direction:column;background:#fff;border:1px solid var(--t-line);border-radius:14px;overflow:hidden;color:inherit;transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease}
.sv-ph{aspect-ratio:16/10;overflow:hidden;background:var(--sky)}
.sv-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.7,.2,1)}
.sv-bd{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.sv-no{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--blue)}
.sv h3{margin:4px 0 8px;font-size:19px;font-weight:700;line-height:1.5;color:var(--navy)}
.sv-tx{margin:0;font-size:14.5px;line-height:1.85}
.sv-sg{margin:14px 0 0;padding:12px 0 0;list-style:none;border-top:1px solid var(--t-line)}
.sv-sg li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.9;color:var(--t-muted)}
.sv-sg li::before{content:"";position:absolute;left:2px;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--aqua)}
.sv-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-size:14px;font-weight:700;color:var(--blue)}
.sv-more svg{width:16px;height:16px;transition:transform .25s ease}
@media (hover:hover){
  .sv:hover{border-color:#BFD8E6;box-shadow:0 22px 44px -30px rgba(11,58,91,.45);transform:translateY(-3px)}
  .sv:hover .sv-ph img{transform:scale(1.05)}
  .sv:hover .sv-more svg{transform:translateX(3px)}
}
.sv-etc{margin:22px 0 0;font-size:14px;color:var(--t-muted)}

/* ============================================================
   選ばれる理由
   ============================================================ */
.rs-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.rs{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-items:start;padding:18px 18px 16px;border-radius:14px;background:#fff}
.rs .rs-ic{grid-row:span 2}
.rs-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--sky);color:var(--blue)}
.rs-ic svg{width:24px;height:24px}
.rs h3{margin:2px 0 2px;font-size:15.5px;font-weight:700;line-height:1.55;color:var(--navy)}
.rs p{margin:0;font-size:13px;line-height:1.8;color:var(--t-muted)}

/* ============================================================
   現場のようす
   ============================================================ */
.phs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:0 var(--gut) 8px;scrollbar-width:none}
.phs::-webkit-scrollbar{display:none}
.ph{flex:0 0 78%;margin:0;scroll-snap-align:start}
.ph-im{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--sky)}
.ph-im img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.7,.2,1)}
.ph figcaption{margin-top:10px;font-size:14px;font-weight:500;line-height:1.6;color:var(--t-text)}
@media (hover:hover){.ph:hover .ph-im img{transform:scale(1.04)}}

/* ============================================================
   家の形の窓から広がる写真
   ============================================================ */
.t-home{position:relative;height:clamp(320px,58vh,600px);overflow:hidden;background:var(--sky-2)}
.t-home__fig{position:absolute;inset:0;margin:0;transition:clip-path 1.5s cubic-bezier(.65,0,.35,1)}
.t-home__fig img{width:100%;height:100%;object-fit:cover}
.t-home__fig::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,58,91,.7),rgba(11,58,91,0) 55%)}
.t-home__tx{position:absolute;left:0;right:0;bottom:11%;z-index:2;padding:0 var(--gut);text-align:center;color:#fff;opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.t-home__tx.is-on{opacity:1;transform:none}
.t-home__tx p{margin:0;font-size:clamp(1.3rem,4.8vw,2.2rem);font-weight:700;letter-spacing:.06em;text-shadow:0 4px 24px rgba(0,0,0,.35)}

/* ============================================================
   ご依頼の流れ
   ============================================================ */
.fl{position:relative;margin:0;padding:0;list-style:none;max-width:640px;margin-inline:auto}
.fl::before{content:"";position:absolute;left:21px;top:12px;bottom:12px;width:2px;background:#C9DEEA}
.fl-st{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:0 0 14px}
.fl-st:last-child{padding-bottom:0}
.fl-no{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-size:16px;font-weight:700}
.fl-st > div{padding:10px 16px 12px;border-radius:12px;background:#fff}
.fl-st h3{margin:0;font-size:16.5px;font-weight:700;line-height:1.55;color:var(--navy)}
.fl-st p{margin:2px 0 0;font-size:13.5px;line-height:1.75;color:var(--t-muted)}

/* ============================================================
   対応エリア・会社概要
   ============================================================ */
.co{display:grid;gap:56px}
.co h2{margin-bottom:24px!important}
.t-tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,64px);gap:8px;max-width:420px;
  grid-template-areas:"hyogo kyoto shiga" "hyogo osaka nara" ". wakayama wakayama"}
.t-tile{display:grid;place-items:center;border-radius:12px;background:var(--sky);border:1px solid #CFE3EE;color:var(--navy);font-weight:700;font-size:15px;letter-spacing:.06em}
.t-tile--hyogo{grid-area:hyogo}.t-tile--kyoto{grid-area:kyoto}.t-tile--shiga{grid-area:shiga}
.t-tile--osaka{grid-area:osaka}.t-tile--nara{grid-area:nara}.t-tile--wakayama{grid-area:wakayama}
.co-note{margin:14px 0 0;font-size:14px;color:var(--t-muted)}
.co-dl{margin:0;border-top:1px solid var(--t-line)}
.co-dl > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--t-line)}
.co-dl dt{font-size:13px;font-weight:700;color:var(--blue);line-height:1.85}
.co-dl dd{margin:0;font-size:14.5px;line-height:1.85}
.co-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;font-weight:700;color:var(--blue);font-size:14.5px}
.co-more svg{width:16px;height:16px}

/* ============================================================
   無料相談（紺＋写真）
   ============================================================ */
.cl{position:relative;overflow:hidden;padding:clamp(80px,12vw,130px) 0;color:#fff;background:var(--navy);text-align:center}
.cl-ph{position:absolute;inset:0}
.cl-ph img{width:100%;height:100%;object-fit:cover}
.cl-ph::after{content:"";position:absolute;inset:0;background:rgba(11,58,91,.86)}
.cl-in{position:relative}
.cl h2{margin:0;font-size:clamp(1.5rem,5.8vw,2.4rem);font-weight:700;line-height:1.55;letter-spacing:.04em;color:#fff}
.cl p{margin:14px 0 26px;font-size:15px;color:#D2E4EE}
.cl-pt{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:22px 0 0;padding:0;list-style:none}
.cl-pt li{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#E3EEF5}
.cl-pt svg{width:16px;height:16px;color:#6FD3A0}

/* ============================================================
   スマホの細部
   ============================================================ */
@media(max-width:520px){
  .hv-cta{flex-direction:column;align-items:stretch}
  .hv-link{justify-content:center}
}
@media(max-width:999px){
  .xr-mk__lb{display:none}
  .xr-mk__dot,.xr-mk__pulse{r:16px}
  .xr-mk__n{font-size:17px;transform:translateY(2px)}
}

/* ============================================================
   タブレット・PC
   ============================================================ */
@media(min-width:760px){
  .ph{flex-basis:44%}
  .rs-list{grid-template-columns:1fr 1fr;gap:16px}
  .rs{padding:22px 22px 20px}
  .co-dl > div{grid-template-columns:120px minmax(0,1fr)}
}
@media(min-width:900px){
  .sv-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .rs-list{grid-template-columns:repeat(4,1fr)}
  .rs{grid-template-columns:1fr;padding:26px 22px}
  .rs .rs-ic{grid-row:auto}
  .rs h3{margin:14px 0 4px}
  .phs{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:auto auto;gap:22px 18px;max-width:1320px;margin-inline:auto;overflow:visible;padding-bottom:0}
  .ph--big{grid-row:span 2;display:flex;flex-direction:column}
  .ph--big .ph-im{aspect-ratio:auto;flex:1;min-height:300px}
  .fl{max-width:none;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
  .fl::before{left:10%;right:10%;top:22px;bottom:auto;width:auto;height:2px}
  .fl-st{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;padding:0}
  .fl-st > div{width:100%;padding:16px 14px}
  .co{grid-template-columns:1fr 1.1fr;gap:80px;align-items:start}
  .sv-etc{text-align:center}
}
@media(min-width:1000px){
  .hv{padding:calc(var(--header-h) + 56px) 0 80px}
  .hv-bg::after{background:linear-gradient(90deg,rgba(8,40,64,.9) 0%,rgba(11,58,91,.66) 45%,rgba(11,58,91,.35) 100%)}
  .hv-in{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hv h1{font-size:clamp(1.9rem,2.5vw,2.5rem)}
  .hv-fig{justify-self:end}
}

/* ---- 動きを減らす設定 ---- */
@media (prefers-reduced-motion:reduce){
  .hv-tx > *,.hv-fig{opacity:1;transform:none;transition:none}
  .xr-scene{transition:none}
  .xr-water path,.xr-drop,.xr-ant,.xr-mk__pulse{animation:none}
  .t-home__fig{clip-path:none!important}
  .t-home__tx{opacity:1;transform:none}
}