/* =========================================================
   dark.css (cleaned)
   - theme.min.css の「後」に読み込む
   - ダーク判定: html[data-theme="dark"] / html[data-bs-theme="dark"]
   ========================================================= */

/* =========================
   Light: link color (exclude buttons/go-to)
========================= */
:root:not([data-theme="dark"]):not([data-bs-theme="dark"]) a:not(.btn):not(.go-to):not(.nav-link):not(.dropdown-item){
  color:#07853a;
  text-decoration:none;
}
:root:not([data-theme="dark"]):not([data-bs-theme="dark"]) a:not(.btn):not(.go-to):not(.nav-link):not(.dropdown-item):hover{
  color:#07853a;
}

/* =========================
   Dark tokens
========================= */
:root[data-theme="dark"],
:root[data-bs-theme="dark"]{
  color-scheme: dark;

  --c-bg: #0b0f14;
  --c-surface: #111827;
  --c-surface-2: #0f172a;
  --c-text: #e5e7eb;
  --c-heading: #f3f4f6;
  --c-muted: #9ca3af;
  --c-border: rgba(255,255,255,.14);

  --c-link: #93c5fd;
  --c-link-hover: #bfdbfe;

  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-text);
  --bs-border-color: var(--c-border);
  --bs-secondary-color: var(--c-muted);
  --bs-link-color: var(--c-link);
  --bs-link-hover-color: var(--c-link-hover);
  --bs-tertiary-bg: var(--c-surface);
}

/* =========================
   Dark base
========================= */
:root[data-theme="dark"] body,
:root[data-bs-theme="dark"] body{
  background-color: var(--c-bg) !important;
  color: var(--c-text) !important;
}

/* 白背景ユーティリティをダークに置換 */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-soft-light,
:root[data-theme="dark"] .bg-gray-100,
:root[data-theme="dark"] .bg-body,
:root[data-theme="dark"] .bg-body-tertiary,
:root[data-bs-theme="dark"] .bg-white,
:root[data-bs-theme="dark"] .bg-light,
:root[data-bs-theme="dark"] .bg-soft-light,
:root[data-bs-theme="dark"] .bg-gray-100,
:root[data-bs-theme="dark"] .bg-body,
:root[data-bs-theme="dark"] .bg-body-tertiary{
  background-color: var(--c-surface) !important;
}

/* 見出し・本文色（#2d374b の直書き対策をここに集約） */
:root[data-theme="dark"] blockquote,
:root[data-theme="dark"] figcaption,
:root[data-theme="dark"] .text-body,
:root[data-theme="dark"] .list-checked-item,
:root[data-theme="dark"] .list-unchecked-item,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .h1,
:root[data-theme="dark"] .h2,
:root[data-theme="dark"] .h3,
:root[data-theme="dark"] .h4,
:root[data-theme="dark"] .h5,
:root[data-theme="dark"] .h6,
:root[data-bs-theme="dark"] h1,
:root[data-bs-theme="dark"] h2,
:root[data-bs-theme="dark"] h3,
:root[data-bs-theme="dark"] h4,
:root[data-bs-theme="dark"] h5,
:root[data-bs-theme="dark"] h6,
:root[data-bs-theme="dark"] .h1,
:root[data-bs-theme="dark"] .h2,
:root[data-bs-theme="dark"] .h3,
:root[data-bs-theme="dark"] .h4,
:root[data-bs-theme="dark"] .h5,
:root[data-bs-theme="dark"] .h6{
  color: var(--c-heading) !important;
}
:root[data-theme="dark"] p,
:root[data-theme="dark"] ul,
:root[data-theme="dark"] dt,
:root[data-bs-theme="dark"] p,
:root[data-bs-theme="dark"] ul,
:root[data-bs-theme="dark"] dt{
  color: var(--c-text) !important;
}

/* =========================
   Components
========================= */
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .card,
:root[data-bs-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .offcanvas,
:root[data-bs-theme="dark"] .list-group-item,
:root[data-bs-theme="dark"] .modal-content,
:root[data-bs-theme="dark"] .offcanvas{
  background-color: var(--c-surface) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
}
:root[data-theme="dark"] .card.card-transition-zoom,
:root[data-bs-theme="dark"] .card.card-transition-zoom {
  background-color: transparent !important;
}
/* フォーム */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select{
  background-color: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
}
:root[data-theme="dark"] .form-control::placeholder,
:root[data-bs-theme="dark"] .form-control::placeholder{
  color: rgba(229,231,235,.65) !important;
}

/* dropdown */
:root[data-theme="dark"] .dropdown-menu,
:root[data-bs-theme="dark"] .dropdown-menu{
  background-color: var(--c-surface) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
}
:root[data-theme="dark"] .dropdown-item,
:root[data-bs-theme="dark"] .dropdown-item{
  color: var(--c-text) !important;
}
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus,
:root[data-bs-theme="dark"] .dropdown-item:hover,
:root[data-bs-theme="dark"] .dropdown-item:focus{
  background-color: rgba(255,255,255,.06) !important;
}
:root[data-theme="dark"] .dropdown-header,
:root[data-bs-theme="dark"] .dropdown-header{
  color: var(--c-muted) !important;
}
:root[data-theme="dark"] .dropdown-item-text,
:root[data-bs-theme="dark"] .dropdown-item-text{
  color: var(--c-text) !important;
}
:root[data-theme="dark"] .dropdown-divider,
:root[data-bs-theme="dark"] .dropdown-divider{
  border-top-color: var(--c-border) !important;
}

/* text-dark をダークで潰す */
:root[data-theme="dark"] .text-dark,
:root[data-bs-theme="dark"] .text-dark{
  color: var(--c-text) !important;
}

/* ダーク時リンク（ボタン/ go-to は除外して見た目を壊さない） */
:root[data-theme="dark"] a:not(.btn):not(.go-to),
:root[data-bs-theme="dark"] a:not(.btn):not(.go-to){
  color: var(--c-link);
}
:root[data-theme="dark"] a:not(.btn):not(.go-to):hover,
:root[data-bs-theme="dark"] a:not(.btn):not(.go-to):hover{
  color: var(--c-link-hover);
}

/* ヘッダ（スクロールで白くなる対策） */
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] header,
:root[data-bs-theme="dark"] .navbar,
:root[data-bs-theme="dark"] header{
  background-color: rgba(11,15,20,.92) !important;
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 .375rem 1.5rem rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
:root[data-theme="dark"] .navbar.navbar-scrolled.navbar-light,
:root[data-bs-theme="dark"] .navbar.navbar-scrolled.navbar-light{
  background-color: rgba(11,15,20,.92) !important;
}
:root[data-theme="dark"] .navbar[style*="background-color"],
:root[data-bs-theme="dark"] .navbar[style*="background-color"]{
  background-color: rgba(11,15,20,.92) !important;
}

/* ヘッダリンクを白寄りに */
:root[data-theme="dark"] .navbar a,
:root[data-theme="dark"] .navbar .nav-link,
:root[data-theme="dark"] .navbar .dropdown-toggle,
:root[data-bs-theme="dark"] .navbar a,
:root[data-bs-theme="dark"] .navbar .nav-link,
:root[data-bs-theme="dark"] .navbar .dropdown-toggle{
  color: rgba(255,255,255,.88) !important;
}
:root[data-theme="dark"] .navbar a:hover,
:root[data-theme="dark"] .navbar .nav-link:hover,
:root[data-theme="dark"] .navbar .dropdown-toggle:hover,
:root[data-bs-theme="dark"] .navbar a:hover,
:root[data-bs-theme="dark"] .navbar .nav-link:hover,
:root[data-bs-theme="dark"] .navbar .dropdown-toggle:hover{
  color: #fff !important;
}

/* 追加で色固定が必要な個別要素 */
:root[data-theme="dark"] .breadcrumb .breadcrumb-item,
:root[data-bs-theme="dark"] .breadcrumb .breadcrumb-item{
  color: var(--c-muted) !important;
}
:root[data-theme="dark"] .navbar-dropdown-menu-media-title,
:root[data-bs-theme="dark"] .navbar-dropdown-menu-media-title{
  color: var(--c-text) !important;
}

/* ボタンはリンク色を継承させない（両モード） */
a.btn:not(.btn-link){
  text-decoration:none;
  color: var(--bs-btn-color, inherit) !important;
}
a.btn:not(.btn-link):hover{
  color: var(--bs-btn-hover-color, var(--bs-btn-color, inherit)) !important;
}

/* Light: footer(bg-dark) 内リンクは白系（btn / go-to 除外） */
:root:not([data-theme="dark"]):not([data-bs-theme="dark"]) footer.bg-dark a:not(.btn):not(.go-to){
  color: rgba(255,255,255,.88) !important;
  text-decoration: none;
}
:root:not([data-theme="dark"]):not([data-bs-theme="dark"]) footer.bg-dark a:not(.btn):not(.go-to):hover,
:root:not([data-theme="dark"]):not([data-bs-theme="dark"]) footer.bg-dark a:not(.btn):not(.go-to):focus{
  color: #fff !important;
  text-decoration: none;
}
:root:not([data-theme="dark"]):not([data-bs-theme="dark"]) footer.bg-dark a:not(.btn):not(.go-to):visited{
  color: rgba(255,255,255,.84) !important;
}

/* footer 等の濃い背景でボタン文字が沈む対策 */
a.btn.btn-primary,
button.btn.btn-primary{
  color: #fff !important;
}
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
button.btn.btn-primary:hover,
button.btn.btn-primary:focus{
  color: #fff !important;
}
a.btn.btn-primary i,
a.btn.btn-primary svg{
  color: inherit !important;
  fill: currentColor !important;
}
footer.bg-dark a.btn.btn-ghost-light{
  color: rgba(255,255,255,.90) !important;
  border-color: rgba(255,255,255,.30) !important;
}
footer.bg-dark a.btn.btn-ghost-light:hover,
footer.bg-dark a.btn.btn-ghost-light:focus{
  color: #fff !important;
  background-color: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.45) !important;
}
/* =========================
   nav-segment (carrier tabs) contrast fix
   - UA button styles reset
========================= */

/* 0) ボタンのUA背景を無効化（まずこれが重要） */
ul.nav-segment .nav-link{
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* 1) ライトモード：薄いグレー背景＋濃い文字、activeは白寄り */
:root:not([data-theme="dark"]):not([data-bs-theme="dark"]) ul.nav-segment .nav-link{
  background-color: rgb(240,240,240) !important;
  color: #2d374b !important;
  border-radius: .5rem;
}
:root:not([data-theme="dark"]):not([data-bs-theme="dark"]) ul.nav-segment .nav-link.active{
  background-color: #fff !important;
  color: #2d374b !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}

/* 2) ダークモード：非activeは暗い面＋明るい文字、activeは明るい面＋暗い文字 */
:root[data-theme="dark"] ul.nav-segment .nav-link,
:root[data-bs-theme="dark"] ul.nav-segment .nav-link{
  background-color: rgba(255,255,255,.12) !important;   /* 近い色問題を回避 */
/*  color: rgba(255,255,255,.88) !important;*/
  border-radius: .5rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}

:root[data-theme="dark"] ul.nav-segment .nav-link.active,
:root[data-bs-theme="dark"] ul.nav-segment .nav-link.active{
  background-color: rgba(255,255,255,.92) !important;   /* activeは明確に明るく */
  color: #111827 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
}

/* 3) バッジはそのままでもOKだが、暗い背景で埋もれるなら少し強調 */
:root[data-theme="dark"] ul.nav-segment .badge,
:root[data-bs-theme="dark"] ul.nav-segment .badge{
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
/* =========================
   Dark: nav-segment base color = #b1b1b1
========================= */
:root[data-theme="dark"] .nav-segment,
:root[data-bs-theme="dark"] .nav-segment{
  background-color: #b1b1b1 !important;
  border-radius: .75rem;
  padding: .25rem;
}

/* UAボタン背景を無効化 */
:root[data-theme="dark"] .nav-segment .nav-link,
:root[data-bs-theme="dark"] .nav-segment .nav-link{
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
}

/* 明るい土台なので、非activeはやや暗い面＋暗い文字 */
:root[data-theme="dark"] .nav-segment .nav-link,
:root[data-bs-theme="dark"] .nav-segment .nav-link{
  background-color: rgba(0,0,0,.10) !important;
  color: #111827 !important;
  border-radius: .6rem;
}

/* activeは白で浮かせる */
:root[data-theme="dark"] .nav-segment .nav-link.active,
:root[data-bs-theme="dark"] .nav-segment .nav-link.active{
  background-color: rgba(255,255,255,.92) !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
/* =========================
   Dark: u-line highlight
========================= */
:root[data-theme="dark"] .u-line,
:root[data-bs-theme="dark"] .u-line{
  background: linear-gradient(transparent 85%, #ffc90075 60%) !important;
}
:root[data-theme="dark"] .u-line-s,
:root[data-bs-theme="dark"] .u-line-s{
  background: linear-gradient(#00000000 85%, #ff23007a 30%) !important;
}
/* =========================
   Dark: featuresTab (nav-pills) active has light bg
   -> active text should be dark (not white)
========================= */

/* ベース：pill の見た目 */
:root[data-theme="dark"] #featuresTab .nav-link,
:root[data-bs-theme="dark"] #featuresTab .nav-link{
  border-radius: .75rem;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.10);
}

/* hover */
:root[data-theme="dark"] #featuresTab .nav-link:hover,
:root[data-bs-theme="dark"] #featuresTab .nav-link:hover{
  background: rgba(255,255,255,.10);
  color: #fff;
}

/* active：背景が白になる前提で、文字は黒寄りに */
:root[data-theme="dark"] #featuresTab .nav-link.active,
:root[data-bs-theme="dark"] #featuresTab .nav-link.active{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: #111827 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* active 内の “固定色クラス” を上書き（これが肝） */
:root[data-theme="dark"] #featuresTab .nav-link.active .text-body,
:root[data-bs-theme="dark"] #featuresTab .nav-link.active .text-body{
  color: rgba(17,24,39,.88) !important;
}

:root[data-theme="dark"] #featuresTab .nav-link.active .text-success,
:root[data-bs-theme="dark"] #featuresTab .nav-link.active .text-success{
  color: #07853a !important; /* 白背景上で沈まない濃い緑 */
}

/* active 内の見出し/段落もまとめてコントラスト確保 */
:root[data-theme="dark"] #featuresTab .nav-link.active h3,
:root[data-bs-theme="dark"] #featuresTab .nav-link.active h3{
  color: #0a7a37 !important;
}
:root[data-theme="dark"] #featuresTab .nav-link.active p,
:root[data-bs-theme="dark"] #featuresTab .nav-link.active p{
  color: rgba(17,24,39,.82) !important;
}

/* 非active 側は text-body が暗くならないよう明るめに */
:root[data-theme="dark"] #featuresTab .nav-link:not(.active) .text-body,
:root[data-bs-theme="dark"] #featuresTab .nav-link:not(.active) .text-body{
  color: rgba(255,255,255,.78) !important;
}
/* =========================
   Dark: mid-nav tabs
   - active: blue-ish
   - inactive: white-ish
========================= */

/* 非active（白系） */
:root[data-theme="dark"] .nav-tabs .nav-link.mid-nav,
:root[data-bs-theme="dark"] .nav-tabs .nav-link.mid-nav{
  background: transparent !important;
  color: rgba(255,255,255,.86) !important;
  border-color: rgba(255,255,255,.14) !important;
}

:root[data-theme="dark"] .nav-tabs .nav-link.mid-nav:hover,
:root[data-bs-theme="dark"] .nav-tabs .nav-link.mid-nav:hover{
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* active（青っぽい） */
:root[data-theme="dark"] .nav-tabs .nav-link.mid-nav.active,
:root[data-theme="dark"] .nav-tabs .nav-item.show .nav-link.mid-nav,
:root[data-bs-theme="dark"] .nav-tabs .nav-link.mid-nav.active,
:root[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link.mid-nav{
  color: #fff !important;
  background-color: #334AC0 !important;  /* 既存の --bs-info(51,74,192) 相当 */
  border-color: #334AC0 !important;
}

/* 下線（nav-tabs のボーダー）を暗めに */
:root[data-theme="dark"] .nav-tabs,
:root[data-bs-theme="dark"] .nav-tabs{
  border-bottom-color: rgba(255,255,255,.14) !important;
}

:root[data-theme="dark"] .popover .popover-header,
:root[data-bs-theme="dark"] .popover .popover-header{
  /* 背景が白系なら、文字は濃く */
  color: #111827 !important;
}

:root[data-theme="dark"] .popover .popover-header .popover-title-text,
:root[data-bs-theme="dark"] .popover .popover-header .popover-title-text{
  color: #111827 !important;
}
/* =========================
   Pricing compare table (dark)
========================= */
:root[data-theme="dark"] .pricing-compare .table,
:root[data-bs-theme="dark"] .pricing-compare .table{
  /* Bootstrap table variables を上書き */
  --bs-table-color: var(--c-text);
  --bs-table-bg: transparent;
  --bs-table-striped-color: var(--c-text);
  --bs-table-striped-bg: rgba(255,255,255,.06); /* ←白帯の原因をここで潰す */
  --bs-table-hover-color: var(--c-text);
  --bs-table-hover-bg: rgba(255,255,255,.08);
  --bs-table-border-color: rgba(255,255,255,.12);

  background-color: var(--c-surface) !important;
  border-radius: 12px;
  overflow: hidden; /* 角丸に合わせる */
}

/* 文字色を確実に（th/td） */
:root[data-theme="dark"] .pricing-compare .table th,
:root[data-bs-theme="dark"] .pricing-compare .table th,
:root[data-theme="dark"] .pricing-compare .table td,
:root[data-bs-theme="dark"] .pricing-compare .table td{
  color: var(--c-text) !important;
}

/* セクション見出し行（"費用・サポート" / "ツールの機能"）を少し浮かせる */
:root[data-theme="dark"] .pricing-compare tbody > tr > th.h6,
:root[data-bs-theme="dark"] .pricing-compare tbody > tr > th.h6{
  background: rgba(255,255,255,.05) !important;
  color: var(--c-heading) !important;
}

/* ヘッダの bg-soft-primary をダーク用に */
:root[data-theme="dark"] .pricing-compare .bg-soft-primary,
:root[data-bs-theme="dark"] .pricing-compare .bg-soft-primary{
  background-color: rgba(10,191,83,.14) !important; /* primary(緑)のソフト */
  color: var(--c-heading) !important;
}

/* 罫線（border-white 等で白く強すぎる場合の調整） */
:root[data-theme="dark"] .pricing-compare .border-white,
:root[data-bs-theme="dark"] .pricing-compare .border-white{
  border-color: rgba(255,255,255,.18) !important;
}

/* 行の区切りを少し足す（見やすさ） */
:root[data-theme="dark"] .pricing-compare tbody tr + tr > * ,
:root[data-bs-theme="dark"] .pricing-compare tbody tr + tr > *{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* mark.text-dark がダークで事故るので、この表だけ上書き */
/*
:root[data-theme="dark"] .pricing-compare mark.text-dark,
:root[data-bs-theme="dark"] .pricing-compare mark.text-dark{
  color: var(--c-heading) !important;
  background: rgba(255,201,0,.18) !important;
}
*/

/* dash アイコンが薄い/見えない場合 */
:root[data-theme="dark"] .pricing-compare .bi-dash.text-body,
:root[data-bs-theme="dark"] .pricing-compare .bi-dash.text-body{
  color: rgba(229,231,235,.75) !important;
}
/* =========================
   HubSpot chat: prevent color-scheme dark affecting widget
========================= */
:root[data-theme="dark"] #hubspot-messages-iframe-container,
:root[data-bs-theme="dark"] #hubspot-messages-iframe-container{
  /* UAがdarkスキーム前提で描画しないようにする */
  color-scheme: light !important;

  /* 外側の白い面が出るケースを潰す */
  background: transparent !important;
  box-shadow: none !important;
}

/* HubSpotが入れる影/下地が白いケース */
:root[data-theme="dark"] #hubspot-messages-iframe-container .hs-shadow-container,
:root[data-bs-theme="dark"] #hubspot-messages-iframe-container .hs-shadow-container{
  background: transparent !important;
  box-shadow: none !important;
}

/* iframe自体にも保険（効く環境だけ効く） */
:root[data-theme="dark"] #hubspot-messages-iframe-container iframe,
:root[data-bs-theme="dark"] #hubspot-messages-iframe-container iframe{
  background: transparent !important;
  color-scheme: light !important;
}
/* =========================================================
   Mobile navbar collapse (dark)
   - スマホ展開メニューが白くなる問題の対策
   - 影響範囲を #navbarNavDropdown に限定
========================================================= */
@media (max-width: 991.98px){

  :root[data-theme="dark"] #navbarNavDropdown,
  :root[data-bs-theme="dark"] #navbarNavDropdown{
    background-color: rgba(11,15,20,.96) !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
  }

  /* もし scroller 側が白背景を持っていた場合の保険 */
  :root[data-theme="dark"] #navbarNavDropdown .navbar-absolute-top-scroller,
  :root[data-bs-theme="dark"] #navbarNavDropdown .navbar-absolute-top-scroller{
    background-color: transparent !important;
  }

  /* モバイルの nav 本体 */
  :root[data-theme="dark"] #navbarNavDropdown .navbar-nav,
  :root[data-bs-theme="dark"] #navbarNavDropdown .navbar-nav{
    background-color: transparent !important;
  }

  /* モバイルのリンク色（白寄り） */
  :root[data-theme="dark"] #navbarNavDropdown .nav-link,
  :root[data-bs-theme="dark"] #navbarNavDropdown .nav-link{
    color: rgba(255,255,255,.88) !important;
  }
  :root[data-theme="dark"] #navbarNavDropdown .nav-link:hover,
  :root[data-bs-theme="dark"] #navbarNavDropdown .nav-link:hover{
    color: #fff !important;
  }

  /* メガメニュー（dropdown-menu）が白い場合の対策 */
  :root[data-theme="dark"] #navbarNavDropdown .dropdown-menu,
  :root[data-bs-theme="dark"] #navbarNavDropdown .dropdown-menu{
    background-color: var(--c-surface) !important;
    border-color: rgba(255,255,255,.14) !important;
  }

  /* メガメニュー内の「bg-light ブロック」が白い場合の対策（少し段差を付ける） */
  :root[data-theme="dark"] #navbarNavDropdown .dropdown-menu .bg-light,
  :root[data-bs-theme="dark"] #navbarNavDropdown .dropdown-menu .bg-light{
    background-color: var(--c-surface-2) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  /* link-dark が残って暗い文字になるケースの対策 */
  :root[data-theme="dark"] #navbarNavDropdown .link-dark,
  :root[data-bs-theme="dark"] #navbarNavDropdown .link-dark{
    color: var(--c-link) !important;
  }
  :root[data-theme="dark"] #navbarNavDropdown .link-dark:hover,
  :root[data-bs-theme="dark"] #navbarNavDropdown .link-dark:hover{
    color: var(--c-link-hover) !important;
  }
}
/* =========================
   Dark: footer share buttons (btn-white -> dark)
========================= */
:root[data-theme="dark"] footer.bg-dark .btn.btn-white,
:root[data-bs-theme="dark"] footer.bg-dark .btn.btn-white{
  background-color: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] footer.bg-dark .btn.btn-white:hover,
:root[data-theme="dark"] footer.bg-dark .btn.btn-white:focus,
:root[data-bs-theme="dark"] footer.bg-dark .btn.btn-white:hover,
:root[data-bs-theme="dark"] footer.bg-dark .btn.btn-white:focus{
  background-color: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}

/* アイコン色も確実に追随（bi-* は currentColor で効くことが多いが保険） */
:root[data-theme="dark"] footer.bg-dark .btn.btn-white i,
:root[data-bs-theme="dark"] footer.bg-dark .btn.btn-white i{
  color: inherit !important;
}