@keyframes fadeInAnimePc {
  0% {
    transform: translateY(-74px);
  }
  100% {
    transform: translateY(0);
  }
}
.pc #page .l-header.is-fixed {
  position: fixed !important;
  animation-name: fadeInAnimePc !important;
  animation-fill-mode: backwards !important;
  animation-duration: 0.45s !important;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation-direction: normal !important;
}

@keyframes fadeInAnimeSp {
  0% {
    transform: translateY(-72px);
  }
  100% {
    transform: translateY(0);
  }
}
.sp #page .l-header.is-fixed {
  position: fixed !important;
  animation-name: fadeInAnimeSp !important;
  animation-fill-mode: backwards !important;
  animation-duration: 0.45s !important;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation-direction: normal !important;
}

/* 管理バー表示中（ログイン中）にSPで固定ヘッダーが管理バーの分ズレるのを防ぐ。
   /campaign/2026/annual-plan-campaign/ 専用CSSにあった上書きを全ページに適用する。 */
@media screen and (max-width: 782px) {
  .admin-bar #page .l-header.is-fixed {
    top: 0 !important;
  }
}

/* SPのヘッダー高さは全ページ共通で 64px（上下の余白 12px + 中身 40px） */
.sp #page .l-header {
  box-sizing: border-box;
  height: 64px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.sp #page .l-header.is-fixed {
  animation-name: fadeInAnimeSp64 !important;
}
@keyframes fadeInAnimeSp64 {
  0% {
    transform: translateY(-64px);
  }
  100% {
    transform: translateY(0);
  }
}