@charset "UTF-8";
/* ================================================================
   header.css  –  ダイワ化成 コーポレートヘッダー
   依存: common.css (1rem=10px, Noto Sans JP)
   読込順: dk-colors の直後
   ================================================================ */

/* ----------------------------------------------------------------
   カスタムプロパティ
   ---------------------------------------------------------------- */
:root {
  --hdr-red:        #e24040;
  --hdr-red-dark:   #c43030;
  --hdr-text:       #222;
  --hdr-sub:        #666;
  --hdr-border:     rgba(0, 0, 0, .08);
  --hdr-bg:         #fff;
  --hdr-util-bg:    #f7f7f7;
  --hdr-util-h:     36px;
  --hdr-main-h:     72px;
  --hdr-main-h-sm:  60px;
  --hdr-shadow-sm:  0 1px 0 rgba(0, 0, 0, .07);
  --hdr-shadow-md:  0 4px 20px rgba(0, 0, 0, .1);
  --mega-shadow:    0 8px 32px rgba(0, 0, 0, .1);
  --hdr-radius:     4px;
  --hdr-trans:      0.25s ease;
  --hdr-z:          1000;
  --mega-z:         990;
  --hdr-bp:         900px;        /* PC/SP 切替ブレークポイント */
  --hdr-max-w:      1200px;
}

/* ----------------------------------------------------------------
   ヘッダー本体
   ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--hdr-z);
  background: var(--hdr-bg);
  /*
   * 赤ライン: box-shadow:inset は子要素の白背景で隠れるケースがあるため
   * border-bottom で確実に全幅表示する。
   * 既存 style.css の inset shadow も上書き。
   */
  box-shadow: none;
  border-bottom: 3px solid var(--hdr-red);
  /* ドロップシャドウは ::after で付与 */
  transition: box-shadow var(--hdr-trans);
}

/* スクロール時：shadow を追加 */
.site-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
}

/* 既存 .inside-header flex レイアウトを無効化 */
.site-header .inside-header {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* CLS 防止: ヘッダー総高さの空間を body に確保 */
:root {
  --header-height: calc(var(--hdr-util-h) + var(--hdr-main-h));
}
body {
  scroll-padding-top: var(--header-height);
}

/* ----------------------------------------------------------------
   ① Utility bar（PC のみ）
   ---------------------------------------------------------------- */
.header-util {
  /* background と border-bottom は不要のため削除 */
  overflow: hidden;
  height: var(--hdr-util-h);
  transition: height var(--hdr-trans), opacity var(--hdr-trans);
}

.site-header.is-scrolled .header-util {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.header-util__inner {
  max-width: var(--hdr-max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* util-links 削除後: CTA を右端に寄せる */
  gap: 16px;
}

/* ユーティリティ CTA */
.util-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ----------------------------------------------------------------
   ② Main bar
   ---------------------------------------------------------------- */
.header-main {
  position: relative; /* メガメニューの基点 */
}

.header-main__inner {
  max-width: var(--hdr-max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--hdr-main-h);
  display: flex;
  align-items: center;
  gap: 0;
  transition: height var(--hdr-trans);
}

.site-header.is-scrolled .header-main__inner {
  height: var(--hdr-main-h-sm);
}

/* ----------------------------------------------------------------
   ロゴ
   ---------------------------------------------------------------- */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 32px;
  text-decoration: none;
}

.site-logo img {
  height: 42px;
  width: auto;
  display: block;
  transition: height var(--hdr-trans);
}

.site-header.is-scrolled .site-logo img {
  height: 34px;
}

/* ----------------------------------------------------------------
   グローバルナビ（nav ラッパー）
   ---------------------------------------------------------------- */
.main-navigation {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* primary-menu リスト（PC） */
.primary-menu {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap !important; /* wrap 防止: CTA 表示時に折り返し禁止 */
  list-style: none;
  margin: 0;
  padding: 0;
  height: var(--hdr-main-h);
  transition: height var(--hdr-trans);
  overflow: visible; /* mega-menu のため overflow は visible 維持 */
}

.site-header.is-scrolled .primary-menu {
  height: var(--hdr-main-h-sm);
}

/* スクロール時: CTA ボタン表示で横幅が圧迫されるため文字/padding を縮小 */
.site-header.is-scrolled .primary-menu > .menu-item > a {
  padding: 0 10px;
  font-size: 1.35rem;
}

/* トップレベルの各 li */
.primary-menu > .menu-item {
  display: flex;
  align-items: stretch;
  position: static; /* メガメニューは .header-main 基点で展開 */
}

/* トップレベルのリンク */
.primary-menu > .menu-item > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 15px;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--hdr-text);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  letter-spacing: 0.02em;
  transition: color 0.18s;
}

/* ホバー下線アニメーション */
.primary-menu > .menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  background: var(--hdr-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}

.primary-menu > .menu-item > a:hover,
.primary-menu > .menu-item-has-children:hover > a,
.primary-menu > .menu-item > a:focus-visible {
  color: var(--hdr-red);
  text-decoration: none;
}

.primary-menu > .menu-item > a:hover::after,
.primary-menu > .menu-item-has-children:hover > a::after,
.primary-menu > .menu-item > a:focus-visible::after {
  transform: scaleX(1);
}

/* カレントページ */
.primary-menu > .current-menu-item > a,
.primary-menu > .current-menu-ancestor > a,
.primary-menu > .current_page_parent > a {
  color: var(--hdr-red);
}

.primary-menu > .current-menu-item > a::after,
.primary-menu > .current-menu-ancestor > a::after,
.primary-menu > .current_page_parent > a::after {
  transform: scaleX(1);
}

/* ▼ 矢印（nav-arrow）*/
.nav-arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.primary-menu > .menu-item-has-children:hover .nav-arrow,
.primary-menu > .menu-item-has-children:focus-within .nav-arrow {
  transform: rotate(-135deg) translate(-1px, 2px);
}

/* ----------------------------------------------------------------
   GeneratePress 競合リセット（最重要）
   ----------------------------------------------------------------
   GP main.css の以下ルールが .mega-menu__list / .mega-menu__sub を
   完全に潰してしまうため、!important で強制上書きする。

   問題の GP ルール（main.css:629）:
     .main-navigation ul ul {
       display:block; height:0; overflow:hidden;
       position:absolute; left:-99999px; opacity:0;
       pointer-events:none; float:left; width:200px;
       box-shadow:…; transition:…;
     }
   ---------------------------------------------------------------- */
.main-navigation .mega-menu__list,
.main-navigation .mega-menu__sub {
  /* GP が付与するドロップダウン用スタイルを全リセット */
  position:       static   !important;
  left:           auto     !important;
  top:            auto     !important;
  height:         auto     !important;
  min-height:     0        !important;
  overflow:       visible  !important;
  opacity:        1        !important;
  visibility:     visible  !important;  /* .toggled 時の visibility:hidden を上書き */
  pointer-events: auto     !important;
  float:          none     !important;
  width:          auto     !important;
  box-shadow:     none     !important;
  transition:     none     !important;
  text-align:     left     !important;
  z-index:        auto     !important;
  animation:      none     !important;
}

/* 意図した display を再適用 */
.main-navigation .mega-menu__list {
  display:     flex        !important;
  flex-wrap:   wrap        !important;
  gap:         0 48px      !important;
  align-items: flex-start  !important;
}

.main-navigation .mega-menu__sub {
  display:     block       !important;
}

/* GP の ul ul a { display:block } も打ち消す */
.main-navigation .mega-menu__sub > .menu-item > a,
.main-navigation .mega-menu__list > .menu-item:not(.menu-item-has-children) > a {
  display: flex !important;
}

/* カラム幅: GP の .main-navigation li が干渉しないよう !important で固定 */
.main-navigation .mega-menu__list > .menu-item {
  flex: 1 0 200px !important;
  min-width: 0    !important;
}

/* ----------------------------------------------------------------
   メガメニュー（PC）
   ---------------------------------------------------------------- */
.mega-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* GP の --base (#f0f0f0) と同色で統一。変数未定義時は #f0f0f0 にフォールバック */
  background: var(--base, #f0f0f0);
  box-shadow: var(--mega-shadow);
  border-top: 1px solid var(--hdr-border);
  z-index: var(--mega-z);
  animation: megaSlideIn 0.22s ease forwards;
}

@keyframes megaSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ホバー / フォーカスで表示 */
.primary-menu > .menu-item-has-children:hover .mega-menu,
.primary-menu > .menu-item-has-children:focus-within .mega-menu {
  display: block;
}

.mega-menu__inner {
  max-width: var(--hdr-max-w);
  margin: 0 auto;
  padding: 28px 24px 32px;
}

/* メガメニュー内のリスト（グループ列） */
.mega-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 48px;
  align-items: flex-start; /* 各カラムを独立した高さに */
}

/*
 * カラム幅の明示:
 * display:list-item の flex-basis:auto は width:auto (= ブロック幅いっぱい) に
 * なるため、3 カラムが縦積みになってしまう。
 * flex: 1 0 200px を与えて、コンテナ幅 (≈1152px) に
 * 3 列 + gap 2 つ = 200×3 + 48×2 = 696px < 1152px が同一行に入るようにする。
 */
.mega-menu__list > .menu-item {
  flex: 1 0 200px;
  min-width: 0; /* flex shrink 可能に */
}

/* ─ Level-1：子あり → カラムヘッダー ─ */
.mega-menu__list > .menu-item-has-children > a {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--hdr-sub);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--hdr-border);
  text-decoration: none;
  cursor: default;
  pointer-events: none; /* ヘッダーはリンクとして機能しない場合 */
}

/* カラムヘッダーがリンクとして有効な場合はポインター解除を外す */
.mega-menu__list > .menu-item-has-children > a[href]:not([href="#"]) {
  pointer-events: auto;
  cursor: pointer;
  transition: color 0.18s;
}

.mega-menu__list > .menu-item-has-children > a[href]:not([href="#"]):hover {
  color: var(--hdr-red);
}

/* ─ Level-1：子なし → 通常リンク ─ */
.mega-menu__list > .menu-item:not(.menu-item-has-children) > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--hdr-text);
  text-decoration: none;
  transition: color 0.18s, gap 0.15s;
}

.mega-menu__list > .menu-item:not(.menu-item-has-children) > a::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--hdr-red);
  border-bottom: 1.5px solid var(--hdr-red);
  transform: rotate(-45deg);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.mega-menu__list > .menu-item:not(.menu-item-has-children) > a:hover {
  color: var(--hdr-red);
  gap: 9px;
  text-decoration: none;
}

/* ─ Level-2（.mega-menu__sub）─ */
.mega-menu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu__sub > .menu-item > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 1.4rem;
  color: var(--hdr-text);
  text-decoration: none;
  transition: color 0.18s, gap 0.15s;
}

.mega-menu__sub > .menu-item > a::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--hdr-red);
  border-bottom: 1.5px solid var(--hdr-red);
  transform: rotate(-45deg);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.mega-menu__sub > .menu-item > a:hover {
  color: var(--hdr-red);
  gap: 9px;
  text-decoration: none;
}

.mega-menu__sub > .menu-item > a:hover::before {
  opacity: 1;
}

/* ----------------------------------------------------------------
   PC インライン CTA（nav 右横）
   ----------------------------------------------------------------
   通常時: util-cta（上部バー）が表示中のため非表示にして二重表示を防ぐ。
   is-scrolled 時: util バーが height:0 で消えるため、ここで CTA を出す。
   ---------------------------------------------------------------- */
.header-cta {
  display: none;            /* デフォルト非表示 */
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  flex-shrink: 0;
}

.site-header.is-scrolled .header-cta {
  display: flex !important; /* スクロール後に表示 */
}

/* ----------------------------------------------------------------
   共通ヘッダーボタン
   ---------------------------------------------------------------- */
.hdr-btn {
  display: inline-flex !important; /* GP: .main-navigation a{display:block} (0-1-1) を上書き */
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--hdr-radius);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;
  line-height: 1;
  border: 1.5px solid transparent;
}

/* アウトライン（カタログ請求） */
.hdr-btn--outline {
  border-color: #bbb;
  color: var(--hdr-text);
  background: transparent;
}

.hdr-btn--outline:hover {
  border-color: var(--hdr-red);
  color: var(--hdr-red);
  text-decoration: none;
}

/* 塗り（お問い合わせ） */
.hdr-btn--fill {
  background: var(--hdr-red);
  color: #fff;
  border-color: var(--hdr-red);
}

.hdr-btn--fill:hover {
  background: var(--hdr-red-dark);
  border-color: var(--hdr-red-dark);
  text-decoration: none;
}

/* ブロック幅（SP ドロワー用） */
.hdr-btn--block {
  display: flex !important; /* inline-flex → block-level flex（幅いっぱいに伸ばす） */
  width: 100%;
  height: 46px;
  font-size: 1.4rem;
}

/* ----------------------------------------------------------------
   ハンバーガーボタン（既存クラス互換維持）
   ---------------------------------------------------------------- */
.menu-toggle {
  display: none; /* PC は非表示 */
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hdr-text);
  flex-shrink: 0;
  /* 既存スタイルの上書き */
  line-height: 1;
  min-width: 0;
  min-height: 0;
}

/* 三本線コンテナ */
.menu-toggle__bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  pointer-events: none;
}

/* 各バー */
.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.32s cubic-bezier(0.77, 0, 0.175, 1),
    opacity   0.28s ease,
    width     0.28s ease;
  transform-origin: center;
}

/* 開いた状態（×）*/
#site-navigation.toggled .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#site-navigation.toggled .menu-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#site-navigation.toggled .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----------------------------------------------------------------
   SP ドロワー（≤ hdr-bp）
   ---------------------------------------------------------------- */
@media (max-width: 899px) {

  /* Utility bar 非表示 */
  .header-util {
    display: none !important;
  }

  /* Main bar 高さを SP 用に */
  .header-main__inner {
    padding: 0 16px;
    height: 60px;
  }

  .site-header.is-scrolled .header-main__inner {
    height: 56px;
  }

  /* ロゴ */
  .site-logo {
    margin-right: 0;
  }
  .site-logo img { height: 36px; }
  .site-header.is-scrolled .site-logo img { height: 32px; }

  /* ハンバーガー表示・右端固定 */

  /* ① GP が .main-navigation の flex-grow を潰す場合の保険 */
  .main-navigation {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* ② ロゴの後ろ・右端へ押し出す (flex コンテナ内で唯一のインフロー要素)
   * GP が .menu-toggle に flex:1 0 auto (flex-grow:1) を設定するため
   * ボタンがナビ全幅に伸びて中央表示になる。flex:0 0 auto で成長を止める。 */
  .menu-toggle {
    display: flex !important;
    flex: 0 0 auto !important; /* GP の flex-grow:1 を打ち消す → 右端へ */
    margin-left: auto;          /* auto margin で右端へ押し出す */
    width: 48px !important;
    height: 48px !important;
  }

  /* ナビパネルをドロワー化 */
  .main-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(320px, 88vw) !important;
    background: var(--hdr-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.34s ease;
    z-index: calc(var(--hdr-z) + 10);
    padding-bottom: 32px;
  }

  #site-navigation.toggled .main-nav {
    transform: translateX(0);
    box-shadow: -6px 0 24px rgba(0, 0, 0, .15);
  }

  /* ドロワー上部バー */
  .drawer-top {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    min-height: 60px;
    border-bottom: 1px solid var(--hdr-border);
    position: sticky;
    top: 0;
    background: var(--hdr-bg);
    z-index: 1;
  }

  .drawer-logo img {
    height: 32px;
    width: auto;
  }

  /* ✕ 閉じるボタン */
  .drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hdr-text);
    padding: 0;
    flex-shrink: 0;
  }

  .drawer-close__x {
    display: block;
    width: 22px;
    height: 22px;
    position: relative;
  }

  .drawer-close__x::before,
  .drawer-close__x::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }

  .drawer-close__x::before { transform: translate(-50%, -50%) rotate(45deg); }
  .drawer-close__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }

  /* primary-menu をブロック化 */
  .primary-menu {
    display: block !important;
    height: auto !important;
  }

  /* li を flex-row にして a + submenu-toggle を横並び。
   * mega-menu は flex:0 0 100% で下段に折返す。
   * position:relative は不要になるが一応維持。 */
  .primary-menu > .menu-item {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--hdr-border);
    position: relative;
  }

  /* トップレベルリンク: flex:1 で残幅を埋める */
  .primary-menu > .menu-item > a {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    padding: 15px 20px;
    font-size: 1.5rem;
    font-weight: 600;
  }

  /* PC 用下線アニメーションを非表示 */
  .primary-menu > .menu-item > a::after {
    display: none;
  }

  /* nav-arrow は SP では submenu-toggle が代替するため非表示 */
  .primary-menu > .menu-item > a .nav-arrow {
    display: none;
  }

  /* メガメニュー → アコーディオン化
   * li が flex-wrap:wrap のため flex:0 0 100% で全幅の下段に折返す */
  .mega-menu {
    position: static !important;
    box-shadow: none !important;
    border-top: none !important;
    background: #f9f9f9;
    animation: none !important;
    display: none !important;
    padding: 0;
    flex: 0 0 100%;   /* flex-row の下段に全幅で折返し */
    width: 100%;
  }

  /* ※ .submenu-open 展開ルールはメディアクエリ外に移動 → 下部を参照 */

  /* submenu-toggle ボタン（mobile-drawer.js が生成）
   * position:absolute を使うと li が accordion 展開で tall になったとき
   * top:50% が li 全体の中央（mega-menu 内）になってしまう。
   * flex item として a の右横に並べることで位置ずれを解消。 */
  .submenu-toggle {
    display: flex;
    flex: 0 0 auto;       /* flex item として固定幅 */
    position: static;     /* absolute を解除 */
    transform: none;
    top: auto;
    right: auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--hdr-sub);
  }

  /* メガメニュー内部（SP 縦並び） */
  .mega-menu__inner {
    padding: 4px 0 8px;
  }

  .mega-menu__list {
    flex-direction: column;
    gap: 0;
  }

  /* PC compat: flex:1 0 200px !important → SP では content 高さに戻す
   * グローバルルールが .main-navigation .mega-menu__list > .menu-item (0-3-0) で
   * !important を持つため、同詳細度のセレクターで後勝ちさせる。 */
  .main-navigation .mega-menu__list > .menu-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Level-1 カラムヘッダー */
  .mega-menu__list > .menu-item-has-children > a {
    display: block;
    padding: 10px 28px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--hdr-sub);
    letter-spacing: 0.06em;
    pointer-events: none;
    border-bottom: none;
    margin-bottom: 0;
  }

  /* Level-1 通常リンク */
  .mega-menu__list > .menu-item:not(.menu-item-has-children) > a {
    padding: 12px 28px;
    font-size: 1.4rem;
    border-bottom: 1px solid var(--hdr-border);
  }

  .mega-menu__list > .menu-item:not(.menu-item-has-children) > a::before {
    display: none;
  }

  /* Level-2 */
  .mega-menu__sub > .menu-item > a {
    padding: 10px 40px;
    font-size: 1.35rem;
    color: var(--hdr-sub);
    border-bottom: 1px solid var(--hdr-border);
  }

  .mega-menu__sub > .menu-item > a::before {
    display: none;
  }

  /* PC CTA を SP で非表示
   * グローバルに .site-header.is-scrolled .header-cta { display:flex !important }
   * (詳細度 0-3-0) があるため、同詳細度のセレクターをこのメディアクエリ内に
   * 置いてソース順（後勝ち）で上書きする。 */
  .header-cta,
  .site-header.is-scrolled .header-cta {
    display: none !important;
  }

  /* ドロワー内 CTA */
  .drawer-cta {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 24px 16px;
  }

}

/* ----------------------------------------------------------------
   PC ナビ（≥ hdr-bp）
   ---------------------------------------------------------------- */
@media (min-width: 900px) {

  /* SP 専用要素を非表示 */
  .drawer-top {
    display: none !important;
  }

  .drawer-cta {
    display: none !important;
  }

  .menu-toggle {
    display: none !important;
  }

  .submenu-toggle {
    display: none !important;
  }

  /* ナビパネルを inline flex */
  .main-nav {
    display: flex;
    align-items: stretch;
    height: 100%;
    transform: none !important; /* SP の translateX を打ち消す */
    position: static !important;
    width: auto !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  /* ヘッダー CTA:
     通常時は非表示（util-cta が代わりに表示）、
     is-scrolled 時のみ表示（グローバルルールで制御済み）  */
  .header-cta {
    /* display はグローバルの .header-cta / .is-scrolled .header-cta ルールに委任 */
    align-items: center;
    gap: 8px;
    margin-left: 20px;
    flex-shrink: 0;
  }

}

/* ----------------------------------------------------------------
   アクセシビリティ補助
   ---------------------------------------------------------------- */

/* focus-visible はブラウザデフォルトを尊重 */
.primary-menu > .menu-item > a:focus-visible,
.hdr-btn:focus-visible,
.menu-toggle:focus-visible,
.drawer-close:focus-visible {
  outline: 2px solid var(--hdr-red);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   アコーディオン: .submenu-open でメガメニューを展開
   ----------------------------------------------------------------
   メディアクエリ外に置くことで sp.css 等の !important ルールによる
   カスケード上書きを回避。PC では .submenu-toggle が非表示なので
   .submenu-open が付くことはなく PC 表示に影響しない。
   JS (mobile-drawer.js) も直接 style.display を操作するため二重保険。
   ---------------------------------------------------------------- */
.primary-menu > .menu-item.submenu-open > .mega-menu {
  display: block !important;
}

/* ----------------------------------------------------------------
   GP main.css の visibility 上書き
   ----------------------------------------------------------------
   GP: .main-navigation.toggled .main-nav ul ul { visibility: hidden }
   ドロワー展開時、ul ul（孫 ul）を全て非表示にする GP の設計だが、
   .mega-menu 内の ul.mega-menu__list / ul.mega-menu__sub は
   アコーディオン展開時に表示する必要があるため上書きする。
   詳細度: 0-4-1 > GP の 0-3-2 → 確実に勝つ。
   ---------------------------------------------------------------- */
.main-navigation.toggled .main-nav .mega-menu ul {
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* ----------------------------------------------------------------
   mobile-drawer.js が生成する #drawer-overlay との共存
   ----------------------------------------------------------------
   【重要】#site-header は position:sticky + z-index:1000 で
   stacking context を形成するため、内部の .main-nav (z-index:1010) も
   root stacking context 上では 1000 扱いとなる。
   overlay を 1005 にすると header 全体（drawer 含む）を覆ってしまう。
   → overlay を header(1000) より低い 999 に設定することで
     ドロワーパネルが overlay より上に描画されるようにする。
   ---------------------------------------------------------------- */
#drawer-overlay {
  z-index: calc(var(--hdr-z) - 1); /* 999: ヘッダー stacking context の下 */
}