/* さくら木工務店（架空・hiro工房 制作見本）「実写ワイド・企業信頼型」共通CSS */
:root{
  --navy:#14263a; --navy2:#1d3550; --navy3:#0e1b29;
  --orange:#d2691e; --orange2:#b95a15;
  --bg:#f4f6f8; --white:#fff; --ink:#1a2129; --text:#3d4752; --muted:#78838f;
  --line:#dde3e9;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  color:var(--text);background:var(--white);line-height:1.85;overflow-x:hidden;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.en{font-family:Georgia,'Times New Roman',serif;letter-spacing:.22em;color:var(--orange);font-size:12px;font-weight:700}

/* サンプル帯 */
.sample{background:var(--navy3);color:#e8eef4;text-align:center;font-size:12px;line-height:1.7;padding:9px 14px}
.sample small{display:block;font-size:10.5px;opacity:.85}
.sample a{text-decoration:underline;font-weight:700}

/* 案の切替バー */
.dsw2{background:#eef2f6;border-bottom:1px solid var(--line);text-align:center;font-size:11.5px;padding:8px 6px;line-height:1.9}
.dsw2 b{color:var(--navy);display:block;margin-bottom:2px}
.dsw2 a{display:inline-block;margin:2px 4px;padding:5px 16px;border:1px solid #c3ced9;border-radius:999px;color:var(--navy);background:#fff}
.dsw2 span.cur{display:inline-block;margin:2px 4px;padding:5px 16px;border-radius:999px;background:var(--navy);color:#fff;font-weight:800}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(6px)}
.hd-in{max-width:1080px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:18px}
.hd-name{font-weight:800;color:var(--ink);font-size:17px;letter-spacing:.04em;line-height:1.3}
.hd-name small{display:block;font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.08em}
.hd-nav{margin-left:auto;display:flex;gap:20px;font-size:13.5px;font-weight:700;color:var(--navy)}
.hd-tel{background:var(--orange);color:#fff;font-weight:800;padding:9px 18px;border-radius:6px;font-size:13.5px;white-space:nowrap}
@media(max-width:860px){.hd-nav{display:none}.hd-in{padding:10px 16px}.hd-tel{padding:8px 13px;font-size:12.5px}}

/* ヒーロー */
.hero{position:relative;min-height:74vh;display:flex;align-items:center;overflow:hidden;background:var(--navy)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 覆いは「文字が乗る左側だけ濃く」。写真で見せる型なので、右側は写真をはっきり残す */
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,27,41,.88) 0%,rgba(14,27,41,.62) 38%,rgba(14,27,41,.12) 72%,rgba(14,27,41,.04) 100%)}
.hero-in{position:relative;z-index:2;color:#fff;padding:64px 22px}
.hero h1{font-size:clamp(30px,5.6vw,56px);font-weight:900;line-height:1.32;letter-spacing:.02em;margin-bottom:20px;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.hero p{font-size:clamp(13.5px,1.5vw,16px);line-height:2;max-width:30em;opacity:.96;margin-bottom:26px}
.hero .tag{display:inline-block;border-left:3px solid var(--orange);padding-left:12px;font-size:12px;letter-spacing:.2em;font-weight:700;margin-bottom:22px}
.btn{display:inline-block;background:var(--orange);color:#fff;font-weight:800;padding:14px 30px;border-radius:6px;font-size:14.5px}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.75);margin-left:10px}
.hero-side{position:absolute;right:26px;bottom:30px;z-index:2;color:#fff;text-align:right;font-size:11.5px;letter-spacing:.18em;opacity:.9}
.hero-side b{display:block;font-size:15px;font-weight:700;letter-spacing:.06em;margin-bottom:4px}
@media(max-width:860px){.hero{min-height:auto}.hero-in{padding:52px 22px 74px}.hero-side{display:none}
  .hero .btn{display:block;width:fit-content}.hero .btn.ghost{margin:12px 0 0}}

/* 共通セクション */
.sec{padding:74px 0}
.sec.gray{background:var(--bg)}
.sec-h{margin-bottom:36px}
.sec-h h2{font-size:clamp(21px,3vw,30px);font-weight:900;color:var(--ink);line-height:1.5;margin-top:8px}
.sec-h p{color:var(--muted);font-size:14px;margin-top:10px}

/* サービス3枚 */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-c{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.svc-c figure{aspect-ratio:16/10;overflow:hidden;background:#dfe5eb}
.svc-c figure img{width:100%;height:100%;object-fit:cover}
.svc-b{padding:20px 20px 24px}
.svc-b h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:3px}
.svc-b .e{font-size:10.5px;letter-spacing:.16em;color:var(--orange);font-weight:700;font-family:Georgia,serif;display:block;margin-bottom:9px}
.svc-b p{font-size:13.5px;line-height:1.9}
@media(max-width:860px){.svc{grid-template-columns:1fr;gap:16px}}

/* 言い切り3つ（見本の「数字」欄の置き換え） */
.facts{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.facts-list{display:flex;flex-direction:column;gap:20px}
.f-item{display:flex;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:18px}
.f-item:last-child{border-bottom:0}
.f-big{font-size:clamp(26px,4vw,38px);font-weight:900;color:var(--navy);line-height:1.15;white-space:nowrap}
.f-big span{font-size:15px;font-weight:800}
.f-txt{padding-top:5px}
.f-txt b{display:block;font-size:15px;color:var(--ink);font-weight:800;margin-bottom:2px}
.f-txt p{font-size:13.5px;color:var(--text);line-height:1.85}
.facts figure{border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.facts figure img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.facts{grid-template-columns:1fr;gap:28px}.facts figure{order:-1}}

/* 人 */
.people{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.people-grid{display:grid;grid-template-columns:1fr 1fr;min-height:400px}
.people-ph{position:relative}
.people-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.people-tx{padding:60px 44px}
.people-tx .en{color:#f0a061}
.people-tx h2{font-size:clamp(20px,2.8vw,28px);font-weight:900;line-height:1.55;margin:8px 0 18px}
.people-tx p{font-size:14px;line-height:2;opacity:.92;margin-bottom:24px}
@media(max-width:860px){.people-grid{grid-template-columns:1fr}.people-ph{height:230px}.people-tx{padding:40px 22px}}

/* 流れ */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fl{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 20px}
.fl .n{font-family:Georgia,serif;font-size:26px;font-weight:700;color:var(--orange);line-height:1;margin-bottom:10px}
.fl h4{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:6px}
.fl p{font-size:13px;line-height:1.85}
@media(max-width:860px){.flow{grid-template-columns:1fr}}

/* 会社概要 */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:14px 8px;text-align:left;vertical-align:top}
.tbl th{width:8em;color:var(--navy);font-weight:800;white-space:nowrap}
.note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.8}

/* CTA */
.cta{background:var(--navy);color:#fff;text-align:center;padding:62px 22px}
.cta h2{font-size:clamp(20px,3vw,28px);font-weight:900;margin-bottom:12px}
.cta p{font-size:14px;opacity:.9;margin-bottom:26px}
.cta .tel{font-size:clamp(26px,5vw,40px);font-weight:900;font-family:Georgia,serif;letter-spacing:.04em;display:inline-block;margin-bottom:6px}

/* フッター */
.ft{background:var(--navy3);color:#aab6c2;padding:36px 22px;font-size:12.5px;text-align:center;line-height:2}
.ft b{color:#fff;font-size:14px;display:block;margin-bottom:6px}
.ft a{text-decoration:underline}
.disc{background:#0a121b;color:#8b98a6;font-size:11px;line-height:1.9;padding:18px 22px;text-align:center}

/* ---- 現在ページの強調 ---- */
.hd-nav a.on{color:var(--orange);border-bottom:2px solid var(--orange);padding-bottom:2px}

/* ---- 下層ページ共通：ページ見出し帯 ---- */
.ph{background:var(--navy);color:#fff;padding:54px 0 46px}
.ph .en{color:#f0a061}
.ph h1{font-size:clamp(26px,4vw,40px);font-weight:900;margin:6px 0 10px;line-height:1.3}
.ph p{font-size:14px;opacity:.9;max-width:38em}
.crumb{font-size:12px;color:var(--muted);padding:12px 0}
.crumb a{text-decoration:underline}

/* ---- 施工実績 ---- */
.notice{background:#fff7ee;border:1.5px solid #f0c9a3;border-left:6px solid var(--orange);border-radius:8px;padding:18px 22px;margin:26px 0 6px}
.notice b{display:block;color:var(--orange2);font-size:15px;margin-bottom:6px}
.notice p{font-size:13.5px;line-height:1.9;color:var(--text)}
.ba{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ba figure{position:relative;aspect-ratio:16/9;background:#dfe5eb}
.ba figure img{width:100%;height:100%;object-fit:cover}
.ba .lb{position:absolute;top:12px;font-size:12px;font-weight:900;letter-spacing:.1em;padding:5px 12px;border-radius:4px;color:#fff}
.ba .lb.before{left:12px;background:rgba(20,38,58,.85)}
.ba .lb.after{right:12px;background:var(--orange)}
.ba .mid{position:absolute;left:50%;top:0;bottom:0;width:3px;background:#fff;transform:translateX(-50%);opacity:.9}
.ba-b{padding:22px 24px 26px}
.ba-b h3{font-size:19px;font-weight:900;color:var(--ink);margin-bottom:6px}
.ba-b p{font-size:14px;line-height:1.9}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:4px;color:#fff;background:var(--navy);margin-right:6px;vertical-align:middle}
.tag.o{background:var(--orange)}
.tag.g{background:#3f6b4f}
.tag.s{background:#8b98a6}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.wk{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.wk figure{aspect-ratio:16/10;overflow:hidden;background:#dfe5eb;position:relative}
.wk figure img{width:100%;height:100%;object-fit:cover}
.wk figure .sm{position:absolute;right:10px;bottom:10px;font-size:10.5px;font-weight:800;background:rgba(255,255,255,.92);color:var(--muted);padding:3px 8px;border-radius:3px}
.wk-b{padding:18px 20px 22px}
.wk-b h3{font-size:16px;font-weight:800;color:var(--ink);margin:8px 0 6px;line-height:1.5}
.wk-b p{font-size:13.5px;line-height:1.85}
.wk-b .pt{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted)}
.wk-b .pt b{color:var(--navy)}
@media(max-width:860px){.works{grid-template-columns:1fr;gap:16px}}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:st}
.st{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 20px;position:relative}
.st::before{counter-increment:st;content:counter(st,decimal-leading-zero);font-family:Georgia,serif;font-size:24px;font-weight:700;color:var(--orange);display:block;margin-bottom:8px}
.st h4{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:6px}
.st p{font-size:13px;line-height:1.85}
@media(max-width:860px){.steps3{grid-template-columns:1fr}}