/* =========================================
   Lightning ヘッダー：常時ダーク化（スクロール時も含む）
   ========================================= */
:root{
  --header-bg: #333333;
  --header-text: #ffffff;
}

/* 背景を常に黒に固定（通常/スクロール/light/transparent すべて） */
header.siteHeader,
.header_scrolled header.siteHeader,
.header_scrolled .siteHeader,
.vk-header-color--light header.siteHeader,
.vk-header-transparent header.siteHeader,
.siteHeader.scrolled {
  background: var(--header-bg) !important;
  box-shadow: none !important;
}

/* ナビの器にも黒を強制（Lightningの構造に合わせて） */
.header_scrolled #gMenu_outer,
#gMenu_outer.gMenu_outer {
  background: transparent !important;
}

/* 文字・リンクを常に白 */
header.siteHeader a,
header.siteHeader .global-nav-list .global-nav-name,
header.siteHeader .siteHeader_logo a,
.header_scrolled header.siteHeader a,
.header_scrolled header.siteHeader .global-nav-list .global-nav-name,
.header_scrolled header.siteHeader .siteHeader_logo a {
  color: var(--header-text) !important;
}
header.siteHeader a:hover { color: var(--header-text) !important; opacity:.9; }

/* ドロップダウンも黒基調に */
header.siteHeader .dropdown-menu,
.header_scrolled header.siteHeader .dropdown-menu {
  background: var(--header-bg) !important;
  border: none !important;
}
header.siteHeader .dropdown-menu a { color: var(--header-text) !important; }

/* 以前の幅はみ出し対策がある場合は打ち消し（120% を無効に） */
.header_scrolled .site-header,
.header_scrolled .siteHeader {
  width: auto !important;
  max-width: 100% !important;
}

/* PCサイズでの調整（あなたの既存指定もここへ統合） */
@media (min-width: 992px) {
  header.siteHeader .navbar-header .siteHeader_logo a {
    font-size: 20px; line-height: 1.2;
  }
  header.siteHeader #gMenu_outer{
    flex: 1 1 auto;
    min-width: 70%;
    justify-content: flex-end;
  }
}

/* SPのロゴサイズ（必要なら） */
@media (max-width: 768px){
  .siteHeader_logo { font-size: 17px; line-height: 1.8; }
}

/* --- 簡単見積もりボタン（スクロール前） --- */
header.siteHeader .global-nav-list > li:last-child a {
  background-color: #f5c400 !important;  /* 黄色背景 */
  color: #000 !important;
  font-weight: bold;
  border-radius: 4px;
  padding: 10px 16px;
  transition: all 0.3s ease;
}

header.siteHeader .global-nav-list > li:last-child a:hover {
  opacity: 0.85;
}

/* --- スクロール時はボタン背景も黒と統一 --- */
.header_scrolled .global-nav-list > li:last-child a {
  background-color: #333333 !important;  /* ヘッダー背景と合わせる */
  color: #fff !important;
  border: 1px solid #fff !important;
}

/* --- スクロール後に透過が残る箇所を完全黒で上書き --- */
.header_scrolled .siteHeader,
.header_scrolled .siteHeaderContainer,
.header_scrolled .navbar-header,
.header_scrolled .vk-header-transparent,
.header_scrolled #gMenu_outer {
  background: #333333 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

/* PCヘッダー：右端メニュー（簡単見積もり）を黄色に */
@media (min-width: 992px){
  /* 右端 <li> の <a> を直接指定（Lightningの構造に合わせて） */
  #gMenu_outer .gMenu > li:last-child > a,
  header.siteHeader .gMenu > li:last-child > a,
  header.siteHeader .global-nav-list > li:last-child > a {
    background-color: #f5c400 !important; /* 黄色 */
    color: #000 !important;               /* 黒文字 */
    border: none !important;
    border-radius: 0px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    position: relative;                    /* 下線や擬似要素より前面に */
    z-index: 1;
  }

  /* テキスト本体が <strong class="gMenu_name"> の場合も黒に統一 */
  #gMenu_outer .gMenu > li:last-child > a .gMenu_name {
    color: #000 !important;
  }

  /* テーマの装飾が被る場合は無効化（下線などの擬似要素） */
  #gMenu_outer .gMenu > li:last-child > a::before,
  #gMenu_outer .gMenu > li:last-child > a::after {
    display: none !important;
  }

}

 /* PCサイズのみ狙い撃ち */
@media (min-width: 992px){

  /* ===== 通常時：右端ボタンを li 幅いっぱいに ===== */
  #gMenu_outer .gMenu > li:last-child{
    padding: 0 !important;          /* li の左右余白を消す */
    border-right: none !important;   /* 罫線があれば消す */
    margin: 0 !important;
  }
  #gMenu_outer .gMenu > li:last-child > a{
    display: block !important;       /* インライン→ブロック化 */
    width: 100% !important;          /* li の幅いっぱい */
    box-sizing: border-box;
    background: #f5c400 !important;  /* 黄色 */
    color: #000 !important;
    padding: 14px 18px !important;   /* ボタン内余白は a 側で管理 */
    border: none !important;
  }
  #gMenu_outer .gMenu > li:last-child > a .gMenu_name{
    color:#000 !important;           /* テキスト黒 */
  }

  /* ===== スクロール時も同じ見た目を維持 ===== */
  .header_scrolled #gMenu_outer .gMenu > li:last-child{
    padding: 0 !important;
    border-right: none !important;   /* Lightning が足す罫線を打消し */
    margin: 0 !important;
  }
  .header_scrolled #gMenu_outer .gMenu > li:last-child > a{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    background: #f5c400 !important;
    color: #000 !important;
    padding: 14px 18px !important;
    border: none !important;
  }
  .header_scrolled #gMenu_outer .gMenu > li:last-child > a .gMenu_name{
    color:#000 !important;
  }

  /* 万一、擬似要素の下線などが被っていたら無効化 */
  #gMenu_outer .gMenu > li:last-child > a::before,
  #gMenu_outer .gMenu > li:last-child > a::after{
    display:none !important;
  }
}
 
/* =========================
   PC（992px以上）ヘッダーCTA
   ========================= */
@media (min-width: 992px) {

  /* CTA2つは li 自体の余白/罫線を殺す */
  #gMenu_outer .gMenu > li.menu-item-estimate,
  #gMenu_outer .gMenu > li.menu-item-phone {
    padding: 0 !important;
    margin: 0 !important;
    border-right: none !important;
  }

  /* 「簡単見積もり」：黄色 */
  #gMenu_outer .gMenu > li.menu-item-estimate > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    background: #f5c400 !important;
    color: #000 !important;
    font-weight: 700;
    padding: 14px 18px !important;
    border-radius: 4px;
    border: none !important;
  }
  #gMenu_outer .gMenu > li.menu-item-estimate > a:hover {
    background: #e0b800 !important;
    color: #000 !important;
  }

  /* 「電話でのお問合せ」：グリーン（色はお好みで） */
  #gMenu_outer .gMenu > li.menu-item-phone {
    margin-left: 12px !important;   /* 2ボタンの間隔 */
  }
  #gMenu_outer .gMenu > li.menu-item-phone > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    background: #20b36d !important; /* 例: グリーン */
    color: #fff !important;
    font-weight: 700;
    padding: 14px 18px !important;
    border-radius: 4px;
    border: none !important;
  }
  #gMenu_outer .gMenu > li.menu-item-phone > a:hover {
    background: #1ca061 !important;
    color: #fff !important;
  }

  /* スクロール時も同じ見た目を維持 */
  .header_scrolled #gMenu_outer .gMenu > li.menu-item-estimate > a,
  .header_scrolled #gMenu_outer .gMenu > li.menu-item-phone > a {
    padding: 14px 18px !important;
    border: none !important;
  }

  /* アイコン入りラベル用の余白 */
  #gMenu_outer .gMenu > li.menu-item-estimate > a i,
  #gMenu_outer .gMenu > li.menu-item-phone > a i {
    margin-right: .5em;
  }

  /* テーマの擬似要素（下線など）が邪魔なら消す */
  #gMenu_outer .gMenu > li.menu-item-estimate > a::before,
  #gMenu_outer .gMenu > li.menu-item-estimate > a::after,
  #gMenu_outer .gMenu > li.menu-item-phone > a::before,
  #gMenu_outer .gMenu > li.menu-item-phone > a::after {
    display: none !important;
  }
}

/* =========================
   スマホのハンバーガー内（任意）
   ========================= */
@media (max-width: 991px){
  /* Lightning のモバイルメニュー側クラスに合わせて調整 */
  .vk-mobile-nav .menu > li.menu-item-estimate > a {
    background: #f5c400 !important; color:#000 !important; font-weight:700;
  }
  .vk-mobile-nav .menu > li.menu-item-phone > a {
    background: #20b36d !important; color:#fff !important; font-weight:700;
  }
}