/* ============================================================
   header-fade.css  (全ページ共通)

   PC表示 (>=768px) のみ:
   - 固定ヘッダー内の3要素を .header-fade-target として個別に
     フェード制御
   - .is-faded が付いた時は opacity 0
   - モバイル(<768px) は影響なし
   ============================================================ */

@media (min-width: 768px){

  /* フェード対象（個別の3要素 + ヘッダー本体）の transition */
  .header-fade-target{
    transition: opacity .3s ease !important;
    will-change: opacity;
  }

  /* フェード状態 — 3要素すべて同時に opacity 0 */
  .header-fade-target.is-faded{
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .3s ease !important;
  }

  /* 保険: 個別要素にも is-faded が付いた時の強制非表示
     (page固有CSSで上書きされても opacity 0 を保証) */
  .header.is-faded,
  .header.is-faded .brand,
  .header.is-faded .pc-nav,
  .header.is-faded .pc-nav a,
  .header.is-faded .menu-btn,
  .header .brand.is-faded,
  .header .pc-nav.is-faded,
  .header .pc-nav.is-faded a,
  .header .menu-btn.is-faded{
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* past-hero の brand 強制非表示を、is-faded ではない時だけ打ち消す
     (is-faded が付いている時は opacity 0 を維持させる)
     色はページごとに違うのでここでは強制しない（旧 color:#fff !important は削除） */
  .header.past-hero:not(.is-faded) .brand:not(.is-faded){
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}