/*
Theme Name: 堀防水工事 WF（WordPress）
Theme URI: https://hori-san-company.yojitu.com/
Author: yojitu / 山田
Description: 有限会社堀防水工事 toBリニューアル。明朝見出し×ゴシック本文・モノクロ＋濃紺の差し色で、BtoBの上質な設計言語を作り込んだ情報構成WF（PC/SP対応・本番相当の挙動）。
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: horibousui
*/

/* =========================================================
   トークン
   ========================================================= */
:root{
  --ink:#1a1a1a;          /* 本文 */
  --ink-soft:#3a3a3a;
  --muted:#6f6f6f;        /* 補足 */
  --navy:#16294d;         /* 差し色（濃紺・仮） */
  --navy-d:#0e1c38;
  --navy-soft:#41527a;
  --line:#e4e3de;         /* ヘアライン */
  --line-d:#cfcec8;
  --paper:#ffffff;
  --paper-2:#f6f5f1;      /* 薄い地色 */
  --paper-3:#efeee9;
  --max:1080px;
  --serif:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
*{box-sizing:border-box;}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.95;letter-spacing:.02em;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;vertical-align:bottom;}
a{color:var(--navy);text-decoration:none;transition:color .2s, opacity .2s, background-color .2s, border-color .2s;}
a:hover{color:var(--navy-soft);}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.45;letter-spacing:.04em;color:var(--ink);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
main{display:block;}

/* WF注意（開発用・スリム） */
.wf-flag{background:var(--navy-d);color:#d8def0;font-size:11px;text-align:center;padding:6px 10px;letter-spacing:.06em;font-weight:500;}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;}
.logo{line-height:0;}
.logo img,.logo .custom-logo{height:44px !important;width:auto !important;max-width:240px;display:block;}
.logo .custom-logo-link{display:inline-block;line-height:0;}
.logo-text{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.06em;color:var(--ink);line-height:1.2;}
.bar-right{display:flex;align-items:center;gap:18px;}
.tel{margin:0;text-align:right;line-height:1.3;font-family:var(--sans);}
.tel .tel-note{display:block;font-size:11px;color:var(--muted);letter-spacing:.04em;}
.tel a{color:var(--ink);}
.tel strong{font-size:20px;letter-spacing:.02em;font-weight:700;}
.btn-head{background:var(--navy);color:#fff;font-size:13px;padding:11px 20px;letter-spacing:.06em;font-weight:500;white-space:nowrap;}
.btn-head:hover{background:var(--navy-d);color:#fff;}
.nav-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-d);background:#fff;padding:10px 16px;font-size:13px;letter-spacing:.08em;line-height:1;cursor:pointer;color:var(--ink);font-family:var(--sans);font-weight:500;}
.nav-toggle:hover{background:var(--paper-2);}

/* グローバルナビ（全画面オーバーレイ：PC/SP共通・松尾型） */
body.nav-open{overflow:hidden;}
.gnav{position:fixed;inset:0;z-index:300;background:var(--navy-d);color:#fff;visibility:hidden;opacity:0;transition:opacity .3s ease, visibility .3s ease;overflow-y:auto;border:none;}
.gnav.open{visibility:visible;opacity:1;}
.gnav-head{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.gnav-logo{font-family:var(--serif);font-size:18px;letter-spacing:.06em;color:#fff;}
.nav-close{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;width:46px;height:46px;font-size:24px;line-height:1;cursor:pointer;transition:background .2s;}
.nav-close:hover{background:rgba(255,255,255,.12);}
.gnav-body{padding:36px 24px 64px;}
.gnav ul.menu{list-style:none;margin:0 auto;padding:0;max-width:var(--max);}
.gnav ul.menu>li{position:relative;border-bottom:1px solid rgba(255,255,255,.12);}
.gnav ul.menu>li>a{display:block;padding:20px 40px 20px 4px;font-family:var(--serif);font-size:22px;letter-spacing:.06em;color:#fff;font-weight:500;}
.gnav ul.menu>li>a:hover{color:#c9d0e2;}
.gnav .is-current>a,.gnav .current-menu-item>a,.gnav .current_page_item>a{color:#aeb9d6;}
.gnav li.has-child>a::after,.gnav li.menu-item-has-children>a::after{content:"＋";position:absolute;right:6px;top:22px;font-size:20px;font-family:var(--sans);font-weight:300;color:#9aa6c4;}
.gnav li.open.has-child>a::after,.gnav li.open.menu-item-has-children>a::after{content:"−";}
.gnav .dropdown,.gnav .sub-menu{list-style:none;margin:0;padding:0 0 12px 16px;display:none;}
.gnav li.open>.dropdown,.gnav li.open>.sub-menu{display:block;}
.gnav .dropdown a,.gnav .sub-menu a{display:block;padding:11px 4px;font-family:var(--sans);font-size:15px;color:#c9d0e2;letter-spacing:.04em;}
.gnav .dropdown a:hover,.gnav .sub-menu a:hover{color:#fff;}
.gnav-sub-links{list-style:none;margin:28px auto 0;padding:0;max-width:var(--max);display:flex;flex-wrap:wrap;gap:10px 26px;}
.gnav-sub-links a{color:#9aa6c4;font-size:14px;letter-spacing:.04em;}
.gnav-sub-links a:hover{color:#fff;}
.gnav-contact{max-width:var(--max);margin:30px auto 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);}
.gnav-tel{font-family:var(--serif);font-size:27px;color:#fff;letter-spacing:.02em;}
.gnav-contact .note{color:#9aa6c4;margin:4px 0 16px;}
.gnav-contact .btn.primary{background:#fff;color:var(--navy-d);border-color:#fff;}
.gnav-contact .btn.primary:hover{background:var(--paper-3);color:var(--navy-d);}

/* パンくず */
.breadcrumb{font-size:12px;color:var(--muted);padding:14px 0;margin:0;letter-spacing:.03em;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--navy);}

/* =========================================================
   ページ見出し
   ========================================================= */
.page-head{padding:54px 0 46px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--paper-2),var(--paper));}
.page-head h1{margin:0;font-size:32px;letter-spacing:.08em;}
.page-head .en{display:block;font-family:var(--sans);font-size:11px;color:var(--navy-soft);letter-spacing:.28em;margin-top:10px;font-weight:500;text-transform:uppercase;}
.page-head .lead{margin:16px 0 0;color:var(--ink-soft);font-size:15px;max-width:760px;}

/* =========================================================
   セクション
   ========================================================= */
section.wf{padding:60px 0;}
section.wf + section.wf{border-top:1px solid var(--line);}
.sec-note{display:inline-block;font-family:var(--sans);font-size:10.5px;color:var(--muted);letter-spacing:.12em;font-weight:500;border-left:2px solid var(--navy-soft);padding:1px 0 1px 8px;margin-bottom:18px;text-transform:uppercase;opacity:.85;}
section.wf h2{margin:.1em 0 1em;font-size:24px;letter-spacing:.06em;padding-left:16px;border-left:3px solid var(--navy);}
section.wf h3{font-size:17px;margin:1.4em 0 .5em;letter-spacing:.04em;}
section.wf p{color:var(--ink-soft);}

/* プレースホルダー */
.ph{
  border:1px dashed var(--line-d);color:var(--muted);background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:22px;font-size:12.5px;min-height:96px;letter-spacing:.03em;
}
.ph.lg{min-height:300px;}.ph.md{min-height:160px;}

/* 地図ファサード（クリックで読み込み＝パフォーマンス対策） */
.map-facade{border:1px dashed var(--line-d);background:var(--paper-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;cursor:pointer;color:var(--ink-soft);padding:22px;transition:background .2s;}
.map-facade:hover{background:var(--paper-3);}
.map-facade-cta strong{display:block;font-family:var(--serif);font-size:17px;color:var(--navy);letter-spacing:.04em;}

/* グリッド / カード */
.grid{display:grid;gap:22px;}
.grid.c2{grid-template-columns:repeat(2,1fr);}
.grid.c3{grid-template-columns:repeat(3,1fr);}
.grid.c4{grid-template-columns:repeat(4,1fr);}
.card{border:1px solid var(--line);padding:22px;background:var(--paper);transition:transform .25s, box-shadow .25s, border-color .25s;}
.card:hover{border-color:var(--line-d);box-shadow:0 14px 34px rgba(16,28,52,.07);transform:translateY(-2px);}
.card h3{margin-top:0;}
.card .ph{margin-bottom:14px;}
.card>a:not(.btn){display:inline-block;margin-top:6px;font-size:13px;letter-spacing:.04em;font-weight:500;}

/* フロー */
ol.flow{counter-reset:f;list-style:none;padding:0;margin:0;display:grid;gap:12px;}
ol.flow li{border:1px solid var(--line);padding:16px 18px 16px 58px;position:relative;background:var(--paper);}
ol.flow li::before{counter-increment:f;content:counter(f,decimal-leading-zero);position:absolute;left:18px;top:14px;font-family:var(--serif);color:var(--navy);font-size:16px;font-weight:600;letter-spacing:.04em;}

/* テーブル */
table.tbl{border-collapse:collapse;width:100%;font-size:14.5px;background:var(--paper);}
table.tbl th,table.tbl td{border:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top;line-height:1.8;}
table.tbl th{background:var(--paper-2);width:28%;white-space:nowrap;font-weight:600;font-family:var(--sans);letter-spacing:.03em;}
table.tbl.list th{width:auto;white-space:normal;}

/* CTA */
.cta{background:var(--navy);color:#fff;padding:48px 32px;text-align:center;}
.cta h2{color:#fff;border:none !important;padding:0 !important;font-size:24px;margin:0 0 10px;letter-spacing:.08em;}
.cta .note,.cta p{color:#c9d0e2;}
.cta .btn{margin:8px 6px 0;}
.btn{display:inline-block;background:var(--navy);color:#fff;border:1px solid var(--navy);padding:13px 30px;margin:6px;font-size:14px;letter-spacing:.06em;font-weight:500;cursor:pointer;font-family:var(--sans);}
.btn:hover{background:var(--navy-d);color:#fff;}
.btn.primary{background:#fff;color:var(--navy);border-color:#fff;}
.btn.primary:hover{background:var(--paper-3);color:var(--navy-d);}
section.wf .btn{background:var(--navy);color:#fff;border-color:var(--navy);}
section.wf .btn.primary{background:var(--navy);color:#fff;}
section.wf .btn:hover{background:var(--navy-d);}
.cta .btn{background:#fff;color:var(--navy);border-color:#fff;}
.cta .btn.primary{background:#fff;color:var(--navy);}
.cta .btn:hover{background:var(--paper-3);}

/* フォーム */
.form-row{display:grid;grid-template-columns:30% 1fr;gap:16px;border-bottom:1px solid var(--line);padding:18px 0;align-items:start;}
.form-row .lbl{font-size:14.5px;font-weight:600;padding-top:10px;letter-spacing:.03em;}
.req{background:var(--navy);color:#fff;font-size:10px;padding:2px 7px;margin-left:8px;vertical-align:middle;letter-spacing:.05em;border-radius:2px;}
.opt{color:var(--muted);font-size:11px;margin-left:8px;}
.field,input.field,select.field,textarea.field{border:1px solid var(--line-d);background:var(--paper-2);padding:12px 14px;color:var(--ink);font-size:14px;width:100%;font-family:inherit;transition:border-color .2s, background .2s;}
.field:focus{outline:none;border-color:var(--navy);background:#fff;}
textarea.field{min-height:120px;}
.form-confirm{display:none;}
form.is-confirm .form-edit{display:none;}
form.is-confirm .form-confirm{display:block;}
.err{color:var(--navy);font-size:12px;margin-top:6px;display:none;font-weight:500;}
.is-invalid .err{display:inline-block;}
.is-invalid .field{border-color:var(--navy);background:#fff;}

/* アコーディオン */
.acc{border:1px solid var(--line);margin-bottom:10px;background:var(--paper);}
.acc-q{margin:0;}
.acc-q button{width:100%;text-align:left;background:var(--paper);border:none;padding:18px 52px 18px 20px;font-size:15px;font-weight:600;cursor:pointer;position:relative;font-family:var(--serif);letter-spacing:.03em;color:var(--ink);transition:background .2s;}
.acc-q button:hover{background:var(--paper-2);}
.acc-q button::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translateY(-70%) rotate(45deg);transition:transform .25s;}
.acc.open .acc-q button::after{transform:translateY(-30%) rotate(225deg);}
.acc-a{display:none;padding:4px 20px 20px;font-size:14.5px;color:var(--ink-soft);}
.acc.open .acc-a{display:block;}

/* 絞り込み */
.filter-bar{margin:0 0 16px;font-size:14px;}
.filter-bar .flabel{font-weight:600;margin-right:10px;letter-spacing:.04em;}
.chip{display:inline-block;border:1px solid var(--line-d);font-size:12.5px;padding:7px 16px;margin:4px 6px 4px 0;background:#fff;color:var(--ink-soft);cursor:pointer;letter-spacing:.04em;transition:all .2s;}
.chip:hover{border-color:var(--navy-soft);color:var(--navy);}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.is-hidden{display:none !important;}
.tag{display:inline-block;border:1px solid var(--line-d);font-size:11px;padding:3px 9px;margin:2px 5px 2px 0;background:var(--paper-2);color:var(--muted);letter-spacing:.03em;}

/* 制作用ツリー */
pre.tree{border:1px solid var(--line-d);background:var(--paper-2);padding:18px 20px;margin:0;overflow-x:auto;font-family:"SFMono-Regular",Menlo,Consolas,monospace;font-size:13px;line-height:1.95;white-space:pre;color:var(--ink);}
.legend{font-size:12px;color:var(--muted);margin:10px 0 0;}
.count-badges{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 0;padding:0;list-style:none;}
.count-badges li{border:1px solid var(--line);padding:14px 18px;background:var(--paper);font-size:13px;color:var(--muted);letter-spacing:.03em;}
.count-badges strong{font-family:var(--serif);font-size:26px;display:block;color:var(--navy);line-height:1.1;margin-bottom:2px;}

/* =========================================================
   フッター（濃紺）
   ========================================================= */
.site-footer{margin-top:0;background:var(--navy-d);color:#c9d0e2;}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding:54px 24px;max-width:var(--max);margin:0 auto;}
.site-footer h4{font-family:var(--serif);font-size:15px;margin:0 0 14px;color:#fff;letter-spacing:.06em;font-weight:600;}
.site-footer .note{color:#9aa6c4;font-size:13px;line-height:1.9;}
.site-footer ul{list-style:none;margin:0;padding:0;font-size:13.5px;}
.site-footer li{padding:5px 0;}
.site-footer a{color:#c9d0e2;letter-spacing:.03em;}
.site-footer a:hover{color:#fff;}
.copyright{text-align:center;font-size:11.5px;color:#7f8cab;padding:16px 0;margin:0;border-top:1px solid rgba(255,255,255,.10);letter-spacing:.05em;}
.site-footer .center a{color:#9aa6c4;}

/* ユーティリティ */
.muted{color:var(--muted);}
.note{font-size:12.5px;color:var(--muted);line-height:1.85;}
.center{text-align:center;}
ul.plain{padding-left:1.3em;margin:.5em 0;}
ul.plain li{padding:4px 0;color:var(--ink-soft);}
.mt0{margin-top:0;}

/* =========================================================
   レスポンシブ（SP）
   ========================================================= */
@media(max-width:900px){
  .tel .tel-note{display:none;}
}
@media(max-width:760px){
  html{font-size:15px;}
  .site-header .bar{padding:10px 0;}
  .logo img,.logo .custom-logo{height:38px !important;}
  .btn-head{display:none;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .bar-right{gap:12px;}
  .tel strong{font-size:17px;}
  .gnav ul.menu>li>a{font-size:19px;padding:17px 36px 17px 4px;}
  .gnav li.has-child>a::after,.gnav li.menu-item-has-children>a::after{top:19px;}
  .gnav-body{padding:26px 20px 50px;}
  .gnav-sub-links{flex-direction:column;gap:0;}
  .gnav-sub-links li{border-bottom:1px solid rgba(255,255,255,.10);}
  .gnav-sub-links a{display:block;padding:12px 4px;}
  .gnav-tel{font-size:23px;}
  .page-head{padding:36px 0 30px;}
  .page-head h1{font-size:25px;}
  section.wf{padding:42px 0;}
  section.wf h2{font-size:21px;}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr;}
  .cta{padding:36px 22px;}
  .form-row{grid-template-columns:1fr;gap:8px;}
  .form-row .lbl{padding-top:0;}
  table.tbl th{width:34%;white-space:normal;}
  .site-footer .cols{grid-template-columns:1fr;gap:26px;padding:40px 24px;}
}
@media(max-width:520px){
  .grid.c4{grid-template-columns:1fr 1fr;}
}