@charset "UTF-8";
/* 電気工事.nagoya CSSデザイン試作 v3 2026-10-29
   既存HTML/文章/画像/リンクを変更せず、末尾から重ねる専用CSS。
   PC/スマホ表示切替・Nivo Sliderの機能には干渉しない。 */
:root{--dn-navy:#0b2546;--dn-deep:#071d38;--dn-blue:#1169b9;--dn-pale:#edf5fd;--dn-text:#24354a;--dn-border:#dbe5ef}
html{scroll-behavior:smooth}
body{margin:0;background:#f6f9fc!important;color:var(--dn-text);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
#header,#main,#footer{max-width:1200px;margin-left:auto;margin-right:auto}
#header{background:#fff;box-shadow:0 6px 30px rgba(8,38,73,.08)}
#header>h1{margin:0!important;padding:18px 24px!important;background:#fff;font-size:inherit}
#header>h1 img{display:block;max-width:100%;height:auto}
/* グローバルメニュー：既存のドロップダウン階層は維持 */
#header>nav:not(.index){position:relative;background:var(--dn-navy)!important;z-index:30}
#header>nav:not(.index)>ul{display:flex;flex-wrap:wrap;justify-content:center;margin:0!important;padding:0 8px!important;list-style:none}
#header>nav:not(.index)>ul>li{position:relative;float:none!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;background:transparent!important;list-style:none}
#header>nav:not(.index)>ul>li>a{display:block!important;width:auto!important;height:auto!important;padding:15px 13px!important;border:0!important;background:transparent!important;color:#fff!important;font-size:14px!important;font-weight:700;text-decoration:none;line-height:1.45!important;white-space:nowrap}
#header>nav:not(.index)>ul>li>a:hover,#header>nav:not(.index)>ul>li>a:focus-visible{background:#146bbb!important;color:#fff!important}
#header>nav:not(.index)>ul>li>ul{display:none;position:absolute;top:100%;left:0;min-width:180px;margin:0!important;padding:7px!important;background:var(--dn-navy)!important;border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 24px rgba(0,0,0,.15);z-index:40}
#header>nav:not(.index)>ul>li:hover>ul,#header>nav:not(.index)>ul>li:focus-within>ul{display:block}
#header>nav:not(.index)>ul>li>ul li{float:none!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important}
#header>nav:not(.index)>ul>li>ul a{display:block!important;padding:11px 12px!important;color:#fff!important;background:transparent!important;font-size:14px!important;text-decoration:none;white-space:nowrap}
#header>nav:not(.index)>ul>li>ul a:hover{background:#146bbb!important}
/* メインスライダー：Nivo Slider自身のレイアウトは保持 */
#header .theme-tmp{margin:0!important;background:var(--dn-deep)}
#header #slider{max-width:100%;margin:auto}
#header .nivo-caption{background:rgba(7,29,56,.82);font-size:15px;line-height:1.6;padding:13px 20px}
/* トップ下部の5カテゴリー */
#header nav.index{background:#eaf3fc!important;padding:12px 14px!important}
#header nav.index>ul{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:0!important;padding:0!important}
#header nav.index>ul>li{float:none!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;background:transparent!important;flex:1 1 165px;list-style:none}
#header nav.index>ul>li>a{display:block!important;width:100%!important;height:auto!important;min-height:46px;padding:12px 10px!important;background:#fff!important;border:1px solid #c9dff1!important;border-radius:7px;color:var(--dn-navy)!important;font-size:14px!important;font-weight:700;text-align:center;text-decoration:none;line-height:1.5!important;box-shadow:0 2px 8px rgba(10,35,70,.05)}
#header nav.index>ul>li>a:hover{background:var(--dn-blue)!important;color:#fff!important}
/* 既存の表示切替ボタンはJSを維持 */
#swViewDevice{padding:6px 14px;background:#eaf3fc}
#main{padding:26px 20px 52px!important;background:#fff;min-width:0}
#main>section{margin:0 0 24px!important;padding:0!important}
#main section.col1-2-4{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;clear:both}
#main section.col1-2-4>div:not(:has(>article)){min-width:0}
#main section.col1-2-4>div{float:none!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important}
#main section.col1-2-4>article{float:none!important;flex:1 1 calc(25% - 20px);min-width:215px;width:auto!important;height:auto!important;margin:0!important;padding:0 0 18px!important;background:#fff!important;border:1px solid var(--dn-border)!important;border-radius:10px;box-shadow:0 3px 14px rgba(8,38,73,.09);overflow:hidden}
#main section.col1-2-4>article>img,#main section.col1-2-4>article>a>img{width:100%!important;height:155px!important;max-width:100%;object-fit:cover;display:block}
#main section.col1-2-4>article>div{padding:15px 16px 0!important;margin:0!important;width:auto!important;float:none!important}
#main section.col1-2-4>article h2,#main section.col1-2-4>article .kasen2{margin:0 0 9px!important;padding:0!important;background:none!important;border:0!important;font-size:18px!important;line-height:1.45!important;color:var(--dn-navy)!important;font-weight:700!important}
#main section.col1-2-4>article h2 a{color:var(--dn-navy)!important;text-decoration:none}
#main section.col1-2-4>article h2 a:hover{color:var(--dn-blue)!important}
#main section.col1-2-4>article p{font-size:14px;line-height:1.8;margin:0 0 9px!important}
#main h2.kasen2:not(article h2){margin:25px 0 16px!important;padding:12px 16px!important;background:linear-gradient(90deg,var(--dn-pale),#fff)!important;border-left:5px solid var(--dn-blue)!important;border-bottom:1px solid var(--dn-border)!important;color:var(--dn-navy)!important;font-size:clamp(19px,2.3vw,27px)!important;font-weight:700!important;line-height:1.45!important;height:auto!important}
#main section>div>p,#main>p{margin:12px 0 20px!important;font-size:15px;line-height:1.95}
#main a{color:#0c61ad}
#main a:hover{color:#063b70}
#main img{max-width:100%;height:auto}
#main article ul{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0!important;padding:0!important;list-style:none}
#main article ul li{float:none!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;list-style:none}
#main article ul li a{display:inline-block;border:1px solid #d7e5f1;border-radius:4px;background:#f3f8fc;padding:3px 8px;font-size:12px;line-height:1.5;text-decoration:none}
#main table{width:100%;border-collapse:collapse;background:#fff}
#main th,#main td{padding:12px!important;border:1px solid var(--dn-border)!important;vertical-align:top}
#main th{background:var(--dn-navy)!important;color:#fff!important;font-weight:700}
#main p[align="center"]{padding:14px!important;background:#f0f6fd;border:1px solid #d1e5f6;border-radius:8px;text-align:center}
#main a[href^="tel:"]{color:#07589f!important;font-weight:800}
#footer{background:var(--dn-deep);color:#fff;padding:22px 18px}
#footer a{color:#fff}
@media(max-width:900px){#main section.col1-2-4>article{flex-basis:calc(50% - 12px);min-width:200px}#header>nav:not(.index)>ul>li>a{padding:12px 10px!important}}
@media(max-width:600px){body{font-size:15px}#header>h1{padding:12px!important}#header>nav:not(.index)>ul{justify-content:flex-start}#header>nav:not(.index)>ul>li{flex:1 1 33.33%}#header>nav:not(.index)>ul>li>a{padding:11px 5px!important;text-align:center;font-size:12px!important;white-space:normal}#header>nav:not(.index)>ul>li>ul{left:auto;right:0;min-width:155px}#header nav.index{padding:9px!important}#header nav.index>ul>li{flex:1 1 44%}#header nav.index>ul>li>a{font-size:12px!important;padding:10px 7px!important}#main{padding:16px 12px 30px!important}#main section.col1-2-4{gap:12px}#main section.col1-2-4>article{flex:1 1 100%;min-width:0}#main section.col1-2-4>article>img,#main section.col1-2-4>article>a>img{height:185px!important}#main h2.kasen2:not(article h2){margin-top:18px!important;font-size:19px!important}#main section>div>p{font-size:14px}#main table{font-size:12px}#main th,#main td{padding:8px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* v3: ページ全体の中央寄せ（pc.css の body:930px と v2 の margin:0 を調整） */
html { background: #eaf0f6; }
body {
  width: 100%;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 999px) {
  body { width: 100%; max-width: none; }
}
/* ヘッダー・本文・フッターを body の中央幅に揃える */
#header, #main, #footer {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* =====================================================
   v6: トップページ5列ボタン / ヘッダー電話番号
   CSSの追加読み込みはSEO版 index.html のhead末尾
   ===================================================== */
@media screen and (min-width: 1000px) {
  #header nav.index > ul {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    float: none;
    border: none;
  }
  #header nav.index > ul > li {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  #header nav.index > ul > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 8px !important;
    line-height: 1.5 !important;
    text-align: center;
    white-space: nowrap;
  }
}

/* ロゴと電話窓口。既存ヘッダーのナビ・スライダーは変更しない */
#header > h1 {
  float: left;
  width: 46%;
  min-width: 0;
  margin: 0 !important;
  padding: 19px 24px !important;
  background: #fff !important;
}
#header > h1 img {
  display: block;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
}
#header > .header-contact {
  float: right;
  width: 54%;
  padding: 15px 28px 14px 8px;
  text-align: right;
  background: #fff;
  color: #24354a;
}
#header .header-contact-label {
  margin: 0 0 2px !important;
  color: #42566f;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
#header .header-tel-main {
  display: block;
  color: #0c376b !important;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: .01em;
  text-decoration: none !important;
  white-space: nowrap;
}
#header .header-tel-main:hover,
#header .header-tel-sub a:hover { text-decoration: underline !important; }
#header .header-tel-free {
  display: block;
  font-size: 12px;
  line-height: 1.25;
}
#header .header-tel-sub {
  margin: 5px 0 0 !important;
  font-size: 14px;
  line-height: 1.5;
}
#header .header-tel-sub a {
  color: #0c376b !important;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
}
#header > nav:not(.index) { clear: both; }
@media (max-width: 767px) {
  #header > h1 {
    float: none;
    width: 100%;
    padding: 14px 16px 4px !important;
  }
  #header > .header-contact {
    float: none;
    width: 100%;
    padding: 5px 16px 16px;
    text-align: center;
  }
  #header .header-tel-main { font-size: clamp(24px, 7vw, 33px); }
  #header .header-tel-sub { font-size: 13px; }
}
@media (min-width: 768px) and (max-width: 999px) {
  #header > h1 { padding: 22px 16px !important; }
  #header > .header-contact { padding: 12px 16px 12px 6px; }
  #header .header-tel-main { font-size: 26px; }
  #header .header-tel-sub { font-size: 12px; }
}


/* =====================================================
   v7: ロゴと電話番号を専用グリッドに配置
   既存ヘッダー内のナビゲーション・スライダーには影響させない
   ===================================================== */
#header > .dn-header-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 140px;
  margin: 0 !important;
  padding: 16px 28px !important;
  background: #fff !important;
  clear: both;
}
#header > .dn-header-top > h1 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  min-width: 0;
}
#header > .dn-header-top > h1 img {
  display: block !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
}
#header > .dn-header-top > .header-contact {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  background: transparent !important;
  min-width: 0;
}
#header > .dn-header-top .header-contact-label {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 3px !important;
  color: #42566f !important;
}
#header > .dn-header-top .header-tel-main {
  display: block !important;
  color: #0c376b !important;
  font-size: clamp(25px, 2.7vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  text-decoration: none !important;
}
#header > .dn-header-top .header-tel-free {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
#header > .dn-header-top .header-tel-sub {
  margin: 5px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
#header > .dn-header-top .header-tel-sub a {
  font-weight: 700 !important;
  color: #0c376b !important;
  text-decoration: none !important;
}
@media (max-width: 767px) {
  #header > .dn-header-top {
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
    min-height: 0;
    padding: 14px 16px !important;
  }
  #header > .dn-header-top > .header-contact { text-align: center !important; }
  #header > .dn-header-top .header-tel-main { font-size: clamp(24px, 6.5vw, 32px) !important; }
}
@media (min-width: 768px) and (max-width: 999px) {
  #header > .dn-header-top { grid-template-columns: minmax(0,1fr) minmax(310px,1fr); gap: 12px; padding: 14px 18px !important; }
  #header > .dn-header-top .header-tel-main { font-size: 25px !important; }
}
/* 電気工事.nagoya スマートフォン2列メニュー追加CSS v9
   既存の denki-nagoya-preview.css の末尾に追加してください。
   PC表示、HTML、リンク先を変更しません。 */
@media screen and (max-width: 767px) {
  /* ページ全幅のモバイルメニュー */
  body > #header > nav:not(.index) {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin: 0;
    padding: 0 12px 12px;
    background: #0d2747;
    border: 0;
    z-index: 20;
  }

  /* 従来のハンバーガー（common.jsが生成）を残す */
  body > #header > nav:not(.index) > h2 {
    float: right;
    margin: 8px 0;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }

  /* JSの表示・非表示を尊重: !importantは使わない */
  body > #header > nav:not(.index) > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    float: none;
    clear: both;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 8px 0 0;
    border: 0;
    background: transparent;
  }

  body > #header > nav:not(.index) > ul > li {
    float: none;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    background: #183a60;
    border: 1px solid #426184;
    border-radius: 8px;
    overflow: visible;
    text-align: center;
  }

  body > #header > nav:not(.index) > ul > li > a {
    display: flex;
    min-height: 56px;
    justify-content: center;
    align-items: center;
    padding: 12px 5px;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
  }

  body > #header > nav:not(.index) > ul > li > a:hover,
  body > #header > nav:not(.index) > ul > li > a:focus-visible {
    background: #176ab6;
    border-radius: 8px;
  }

  /* 既存の矢印クリック用spanをカード右上に配置 */
  body > #header > nav:not(.index) > ul > li > a.parent {
    margin-right: 30px;
    border: 0;
  }
  body > #header > nav:not(.index) > ul > li > a.parent + span {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    border-left: 1px solid #426184;
    cursor: pointer;
  }

  /* 開いたサブメニューはカードの下へ。画面に重ねない */
  body > #header > nav:not(.index) > ul > li > ul {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 4px;
    border: 0;
    background: #102f53;
    box-shadow: none;
    z-index: auto;
  }
  body > #header > nav:not(.index) > ul > li > ul > li {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 0;
    background: transparent;
  }
  body > #header > nav:not(.index) > ul > li > ul > li > a {
    display: block;
    padding: 11px 5px;
    font-size: 12px;
    line-height: 1.4;
    color: #102b50;
    text-align: center;
    background: #fff;
    border: 0;
    border-radius: 4px;
    overflow-wrap: anywhere;
  }
  body > #header > nav:not(.index) > ul > li > ul > li > a:hover {
    background: #dbeafe;
    color: #102b50;
  }

  /* 2列ボタン用: 元の横位置・擬似要素の影響を軽減 */
  body > #header > nav:not(.index) > ul > li::before,
  body > #header > nav:not(.index) > ul > li::after {
    pointer-events: none;
  }
}


/* ==============================================================
   v10 スマホメニュー修正版：既存v3-v9の上書き
   - 過去の flex !important / hover submenu の競合を解消
   - JSの dn-open / dn-expanded クラスと連動
   ============================================================== */
@media screen and (max-width: 767px) {
  body > #header > nav:not(.index).dn-mobile-ready {
    width: 100% !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    padding: 10px 12px 12px !important;
    margin: 0 !important;
    background: #0d2747 !important;
    clear: both;
  }
  body > #header > nav:not(.index).dn-mobile-ready > h2 {
    float: right !important;
    display: block !important;
    width: 48px;
    height: 44px;
    margin: 0 0 8px !important;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    z-index: 2;
  }
  body > #header > nav:not(.index).dn-mobile-ready > ul {
    display: none !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready.dn-open > ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready > ul > li {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #416284 !important;
    border-radius: 8px !important;
    background: #183a60 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 55px !important;
    height: auto !important;
    padding: 10px 5px !important;
    margin: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready > ul > li > a.parent {
    width: calc(100% - 34px) !important;
    margin-right: 34px !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready > ul > li > a.parent + span {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 34px !important;
    height: 55px !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 1px solid #416284 !important;
    color: #fff !important;
    cursor: pointer;
  }
  /* 既存の hover/focus-within の絶対配置を上書きする */
  body > #header > nav:not(.index).dn-mobile-ready > ul > li > ul,
  body > #header > nav:not(.index).dn-mobile-ready > ul > li:hover > ul,
  body > #header > nav:not(.index).dn-mobile-ready > ul > li:focus-within > ul {
    display: none !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #102f53 !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready > ul > li.dn-expanded > ul,
  body > #header > nav:not(.index).dn-mobile-ready > ul > li.dn-expanded:hover > ul,
  body > #header > nav:not(.index).dn-mobile-ready > ul > li.dn-expanded:focus-within > ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready > ul > li > ul > li {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready > ul > li > ul > li > a {
    display: block !important;
    padding: 10px 5px !important;
    background: #fff !important;
    color: #102b50 !important;
    border-radius: 5px !important;
    border: 0 !important;
    font-size: 13px !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* v11: ロゴと電話窓口を確実に表示。v10スマホメニューは維持 */
#header > .dn-header-top {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(350px,1fr);
  gap: 20px;
  align-items: center;
  min-height: 0;
  padding: 18px 26px !important;
  background: #fff !important;
}
#header > .dn-header-top > h1 {
  display: block !important;
  float: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  min-width: 0;
}
#header > .dn-header-top > .header-contact {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  float: none !important;
  width: auto !important;
  text-align: right !important;
  padding: 0 !important;
  color: #24354a !important;
}
#header > .dn-header-top .header-tel-main {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #0c376b !important;
  font-weight: 800 !important;
  font-size: clamp(23px,2.7vw,36px) !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}
#header > .dn-header-top .header-tel-sub a {color: #0c376b !important; font-weight: 700 !important;}
@media screen and (max-width: 767px) {
  #header > .dn-header-top {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }
  #header > .dn-header-top > .header-contact {
    text-align: center !important;
    border-top: 1px solid #dbe5ef;
    padding-top: 10px !important;
  }
  #header > .dn-header-top .header-tel-main {
    font-size: clamp(23px,6.3vw,32px) !important;
    white-space: normal !important;
  }
  #header > .dn-header-top .header-tel-sub {font-size: 13px !important;}
}
@media screen and (min-width:768px) and (max-width:999px) {
  #header > .dn-header-top {grid-template-columns:minmax(0,1fr) minmax(290px,1fr) !important; gap:12px !important;}
  #header > .dn-header-top .header-tel-main {font-size:25px !important;}
}

/* =====================================================
   v12: モバイル固定お問い合わせバー
   PC/タブレット表示には干渉しない
===================================================== */
.dn-mobile-cta { display: none; }
@media screen and (max-width: 767px) {
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
  .dn-mobile-cta {
    position: fixed;
    z-index: 99990;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.98);
    border-top: 1px solid #dbe5ef;
    box-shadow: 0 -4px 18px rgba(7,29,56,.13);
  }
  .dn-mobile-cta a {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 62px;
    padding: 7px 4px;
    color: #fff !important;
    border-radius: 9px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }
  .dn-mobile-cta-phone { background: #087849; }
  .dn-mobile-cta-mail { background: #1269b9; }
  .dn-mobile-cta a:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
  .dn-mobile-cta a:active { filter: brightness(.92); }
  .dn-mobile-cta .dn-cta-icon { flex: none; font-size: 22px; line-height: 1; }
  .dn-mobile-cta small {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
  }
}


/* =============================================================
 v13: コンパクト固定ヘッダー＋固定グローバルナビ
 #header 内のスライダーは固定しない。PC / mobile 両対応。
 ============================================================= */
:root { --dn-head-h: 86px; --dn-nav-h: 54px; }
body {
  padding-top: calc(var(--dn-head-h) + var(--dn-nav-h)) !important;
}
#header > .dn-header-top {
  position: fixed !important;
  z-index: 10020 !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(100%,1200px) !important;
  height: var(--dn-head-h) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 18px !important;
  padding: 9px 22px !important;
  align-items: center !important;
  background: #fff !important;
  box-shadow: 0 1px 8px rgba(7,29,56,.08) !important;
}
#header > .dn-header-top > .dn-brand { min-width: 0; }
#header > .dn-header-top > .dn-brand > h1 {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 16px !important;
}
#header > .dn-header-top > .dn-brand > h1 img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 37px !important;
  height: auto !important;
}
#header > .dn-header-top .dn-company-name {
  color: #334e69 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin: 2px 0 0 !important;
  line-height: 1.3 !important;
}
#header > .dn-header-top > .header-contact {
  text-align: right !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#header > .dn-header-top .header-contact-label {
  font-size: 11px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}
#header > .dn-header-top .header-tel-main {
  font-size: clamp(21px,2.5vw,30px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
}
#header > .dn-header-top .header-tel-free {
  font-size: 11px !important;
  line-height: 1.2 !important;
}
#header > .dn-header-top .header-tel-sub {
  margin: 1px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}
#header > nav:not(.index) {
  position: fixed !important;
  top: var(--dn-head-h) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(100%,1200px) !important;
  height: var(--dn-nav-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10010 !important;
  background: #0b2546 !important;
}
#header > nav:not(.index) > ul {
  height: 100%;
  align-items: center;
}
#header > nav:not(.index) > ul > li > a {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}
/* CSS が機能していない場合に気づきやすいよう汎用 nav ではなく直下だけ指定 */
@media (min-width:768px) and (max-width:999px) {
  :root { --dn-head-h: 82px; --dn-nav-h: 52px; }
  #header > .dn-header-top { gap: 10px !important; padding: 8px 12px !important; }
  #header > .dn-header-top .header-tel-main { font-size: 24px !important; }
}
@media (max-width:767px) {
  :root { --dn-head-h: 112px; --dn-nav-h: 60px; }
  body { padding-top: calc(var(--dn-head-h) + var(--dn-nav-h)) !important; }
  body.touchDevice > #header { padding-top: 0 !important; }
  #header > .dn-header-top {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 2px !important;
    padding: 6px 12px !important;
    height: var(--dn-head-h) !important;
    text-align: center !important;
  }
  #header > .dn-header-top > .dn-brand > h1 img {
    max-height: 26px !important;
    margin: 0 auto !important;
  }
  #header > .dn-header-top .dn-company-name {
    font-size: 10px !important;
    margin: 1px 0 0 !important;
  }
  #header > .dn-header-top > .header-contact {
    border: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  #header > .dn-header-top .header-contact-label { display:none !important; }
  #header > .dn-header-top .header-tel-main {
    font-size: 22px !important;
    white-space: nowrap !important;
  }
  #header > .dn-header-top .header-tel-free { font-size: 10px !important; }
  #header > .dn-header-top .header-tel-sub { font-size: 10px !important; }
  #header > nav:not(.index),
  body > #header > nav:not(.index).dn-mobile-ready {
    position: fixed !important;
    top: var(--dn-head-h) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: var(--dn-nav-h) !important;
    min-height: 0 !important;
    padding: 7px 12px !important;
    z-index: 10010 !important;
    overflow: visible !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready > h2 {
    margin: 0 !important;
    height: 46px !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready > ul,
  body > #header > nav:not(.index).dn-mobile-ready.dn-open > ul {
    position: absolute !important;
    top: var(--dn-nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - var(--dn-head-h) - var(--dn-nav-h) - 90px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    margin: 0 !important;
    padding: 12px !important;
    background: #0d2747 !important;
    box-shadow: 0 16px 22px rgba(0,0,0,.2) !important;
  }
  body > #header > nav:not(.index).dn-mobile-ready > ul { display:none !important; }
  body > #header > nav:not(.index).dn-mobile-ready.dn-open > ul {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:start !important;
  }
  #swViewDevice { z-index: 1 !important; }
}

/* v14: 固定ヘッダーのさらなるコンパクト化・メニュー安定化 */
@media (min-width: 1000px) {
  :root { --dn-head-h: 76px; --dn-nav-h: 49px; }
  #header > .dn-header-top { padding: 6px 20px !important; gap: 12px !important; }
  #header > .dn-header-top > .dn-brand > h1 img { max-height: 32px !important; }
  #header > .dn-header-top .dn-company-name { font-size: 12px !important; margin-top: 1px !important; }
  #header > nav:not(.index) > ul > li > a { padding-top: 10px !important; padding-bottom: 10px !important; }
}
@media (min-width: 768px) and (max-width: 999px) {
  :root { --dn-head-h: 76px; --dn-nav-h: 50px; }
}
@media (max-width: 767px) {
  :root { --dn-head-h: 105px; --dn-nav-h: 54px; }
  #header > .dn-header-top { padding: 5px 10px !important; }
  #header > nav:not(.index),
  body > #header > nav:not(.index).dn-mobile-ready { padding: 4px 12px !important; }
  body > #header > nav:not(.index).dn-mobile-ready > h2 { height: 45px !important; }
}


/* v17: 下層ページ共通ヘッダー・非文字アイコン */
#header .dn-icon-phone {
 display:inline-block; width:22px;height:22px;margin-right:7px;
 vertical-align:-3px;background:currentColor;
 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01z'/%3E%3C/svg%3E") center/contain no-repeat;
 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#header .header-tel-free {display:none!important}
#header .header-contact-label {font-size:11px!important; margin:0 0 2px!important; line-height:1.3!important;}
#header .header-tel-main {font-size:clamp(22px,2.5vw,30px)!important; line-height:1.2!important;}
#header .header-tel-sub {font-size:11px!important; margin:2px 0 0!important; line-height:1.3!important;}
.dn-mobile-cta .dn-footer-icon { position:relative; display:inline-block; flex:0 0 20px;width:20px;height:20px; }
.dn-footer-phone { background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01z'/%3E%3C/svg%3E") center/contain no-repeat; }
.dn-footer-mail { border:2px solid currentColor; border-radius:3px; height:16px!important; }
.dn-footer-mail::before { content:"";position:absolute;width:10px;height:10px;left:3px;top:-5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg); }
@media(max-width:767px){#header .header-contact-label {font-size:10px!important;white-space:normal;} }


/* v20 工事種別ナビ：レガシー nav CSS の影響を排除 */
.dn-service-nav {display:block!important;position:relative!important;float:none!important;clear:both!important;box-sizing:border-box!important;width:100%!important;max-width:1200px!important;height:auto!important;margin:0 auto 20px!important;padding:12px!important;background:#eaf4ff!important;overflow:visible!important;}
.dn-service-nav>ul {display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;list-style:none!important;}
.dn-service-nav>ul>li {display:block!important;position:static!important;float:none!important;clear:none!important;box-sizing:border-box!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;list-style:none!important;}
.dn-service-nav>ul>li>a {display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;width:100%!important;height:54px!important;min-height:54px!important;padding:8px!important;border:1px solid #cbdff3!important;border-radius:7px!important;background:#fff!important;color:#092849!important;font-size:13px!important;font-weight:700!important;line-height:1.4!important;text-align:center!important;text-decoration:none!important;box-shadow:0 2px 6px rgba(0,40,80,.06);}
.dn-service-nav>ul>li>a:hover,.dn-service-nav>ul>li>a:focus-visible {background:#dceeff!important;border-color:#7aaddc!important;}
@media screen and (max-width:767px) {.dn-service-nav {padding:10px!important;margin-bottom:16px!important;} .dn-service-nav>ul {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;} .dn-service-nav>ul>li>a {height:auto!important;min-height:48px!important;font-size:12px!important;} .dn-service-nav>ul>li:last-child {grid-column:1/-1;}}