/* ============================================================
   北上電工 施工事例ページ 共通スタイル
   - BiND非依存。index.css の意匠（Noto Sans JP / Zen Kaku Gothic・
     白カード・濃色ヘッダ・オレンジアクセント）に合わせた自前CSS。
   - 全 /works/*.html で共有。変更時は各HTMLのキャッシュバスター
     （works.css?YYYYMMDD?）を必ず更新する。
   ============================================================ */
:root{
  --kw-ink:#2b2b2b;      /* 本文 */
  --kw-sub:#5a5a5a;      /* 補助テキスト */
  --kw-line:#e5e5e5;     /* 罫線 */
  --kw-soft:#f6f6f4;     /* 薄い背景 */
  --kw-accent:#d8541f;   /* 北上電工オレンジ系アクセント */
  --kw-dark:#0a0a0f;     /* 濃色（ヘッダ/フッタ/CTA） */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--kw-ink);background:#fff;line-height:1.85;
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
  animation:kwIn .5s ease-out both;
}
@keyframes kwIn{from{opacity:0}to{opacity:1}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.kw-wrap{max-width:960px;margin:0 auto;padding:0 20px}

/* ---- ヘッダ（濃色・追従） ---- */
.kw-header{position:sticky;top:0;z-index:50;background:rgba(10,10,15,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kw-bar{display:flex;align-items:center;justify-content:space-between;
  max-width:1100px;margin:0 auto;padding:12px 20px;gap:16px}
.kw-logo{font-weight:700;letter-spacing:1px;color:#fff;text-decoration:none;
  font-size:15px;white-space:nowrap}
.kw-nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.kw-nav a{color:#eaeaea;text-decoration:none;font-size:13.5px;letter-spacing:.5px}
.kw-nav a:hover{color:var(--kw-accent)}
.kw-cta-sm{background:var(--kw-accent);color:#fff !important;padding:8px 16px;
  border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap}
@media (max-width:641px){.kw-nav-link{display:none}}

/* ---- パンくず ---- */
.kw-crumbs{font-size:12.5px;color:var(--kw-sub);padding:18px 0 0}
.kw-crumbs a{color:var(--kw-sub);text-decoration:none}
.kw-crumbs a:hover{text-decoration:underline}
.kw-crumbs i{font-style:normal;margin:0 7px;color:#c2c2c2}

/* ---- タイトル/ヒーロー ---- */
.kw-cat{display:inline-block;font-size:12.5px;font-weight:700;
  color:var(--kw-accent);letter-spacing:1.5px;margin:26px 0 8px}
.kw-title{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  font-size:28px;font-weight:900;line-height:1.5;letter-spacing:1px;margin:0 0 22px}
.kw-hero{border-radius:0;overflow:hidden;border:1px solid var(--kw-line);margin:0 0 26px}
.kw-hero img{width:100%}
.kw-lead{font-size:15.5px;color:var(--kw-ink);margin:0 0 38px}
@media (max-width:641px){.kw-title{font-size:21px}}

/* ---- セクション ---- */
.kw-sec{margin:0 0 40px}
.kw-h2{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  font-size:19px;font-weight:700;letter-spacing:1px;margin:0 0 16px;
  padding-left:14px;border-left:4px solid var(--kw-accent)}
.kw-sec p{margin:0 0 14px;font-size:14.5px;color:var(--kw-sub)}

/* ---- 工事概要テーブル ---- */
.kw-table{width:100%;border-collapse:collapse;font-size:14px}
.kw-table th,.kw-table td{text-align:left;padding:13px 16px;
  border-bottom:1px solid var(--kw-line);vertical-align:top}
.kw-table th{width:34%;background:var(--kw-soft);font-weight:700;
  color:var(--kw-ink);white-space:nowrap}
@media (max-width:641px){.kw-table th{width:42%}.kw-table th,.kw-table td{padding:11px 12px}}
/* 未確定（要提供）プレースホルダ。本番反映前に必ず実値へ差し替える */
.kw-todo{color:#9a6b34;background:#fff7ec;border:1px dashed #e3b98a;
  border-radius:4px;padding:1px 9px;font-size:12.5px}

/* ---- 関連サービスのチップ ---- */
.kw-chips{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0}
.kw-chips a{font-size:13px;background:var(--kw-soft);border:1px solid var(--kw-line);
  border-radius:999px;padding:7px 15px;text-decoration:none;color:var(--kw-ink)}
.kw-chips a:hover{border-color:var(--kw-accent);color:var(--kw-accent)}

/* ---- 主な施工設備リスト ---- */
.kw-eqlist{columns:2;column-gap:30px;margin:4px 0 0;padding:0;list-style:none}
.kw-eqlist li{font-size:13.5px;color:var(--kw-sub);line-height:1.6;padding:7px 0 7px 18px;
  position:relative;break-inside:avoid;border-bottom:1px solid var(--kw-line)}
.kw-eqlist li::before{content:"▪";color:var(--kw-accent);position:absolute;left:0;top:7px}
@media (max-width:641px){.kw-eqlist{columns:1}}

/* ---- CTA ---- */
.kw-cta{background:var(--kw-dark);color:#fff;border-radius:14px;
  padding:32px 28px;text-align:center;margin:44px 0}
.kw-cta h3{font-size:18px;margin:0 0 6px;font-weight:700}
.kw-cta .sub{font-size:13.5px;color:#cfcfcf;margin:0 0 18px}
.kw-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.kw-btn{display:inline-block;padding:13px 26px;border-radius:999px;
  font-weight:700;text-decoration:none;font-size:14.5px}
.kw-btn-primary{background:var(--kw-accent);color:#fff}
.kw-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.kw-tel{font-size:23px;font-weight:700;letter-spacing:1px;color:#fff;
  text-decoration:none;display:block;margin-top:14px}
.kw-tel small{display:block;font-size:11px;letter-spacing:2px;color:#9a9a9a;font-weight:400;margin-bottom:2px}

/* ---- 戻る ---- */
.kw-back{display:inline-block;margin:4px 0 54px;font-size:14px;
  color:var(--kw-accent);text-decoration:none}
.kw-back:hover{text-decoration:underline}

/* ---- フッタ ---- */
.kw-footer{background:var(--kw-dark);color:#bdbdbd;font-size:12.5px;
  line-height:1.95;padding:36px 20px;text-align:center}
.kw-footer strong{display:inline-block;color:#fff;font-size:14px;
  letter-spacing:1px;margin-bottom:6px}
.kw-footer a{color:#bdbdbd;text-decoration:none}
.kw-footer .copy{display:block;margin-top:14px;color:#7d7d7d;font-size:11px;letter-spacing:1px}