@charset "utf-8";
/* ==========================================================================
   ヘッダー スクロール連動 表示/非表示（PC専用）
   - 下スクロール：ヘッダーを隠す
   - 上スクロール：ヘッダーを再表示
   .header は position:fixed のまま、transform でスライドさせる。
   #notification / #notification2 は .header の内側にあるため、
   translateY(-100%) でヘッダー全体（通知バー含む）が一緒にスライドする。
   ========================================================================== */

/* PCレイアウト（コンテンツ幅1000px固定）でのみ有効化 */
@media screen and (min-width: 1001px) {

  .header {
    /* スライドアニメーション */
    transition: transform 0.35s ease;
    will-change: transform;
  }

  /* 下スクロール時に付与されるクラス：ヘッダーを上方向へ退避 */
  /* translateY(-100%) は自身の高さ基準のため、通知バーの動的な高さ変化にも追従する */
  .header.is-hidden {
    transform: translateY(-100%);
  }
}