/**
 * functions.css - ヘッダー追従など機能系スタイル
 * 全ページでスクロール2000px以降に画面上部で固定・上からフェードイン
 */

.header.is-sticky-visible {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 10000 !important;
  width: 100%;
  height: var(--header-height, var(--fluid-80));
  min-height: var(--header-height, var(--fluid-80));
  background: #fff;
  box-sizing: border-box;
  overflow: visible;
  pointer-events: auto;
  animation: header-sticky-fade-in 0.35s ease forwards;
}

.header.is-sticky-visible.is-anim-done {
  animation: none;
  transform: none;
}

@keyframes header-sticky-fade-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

body.header-sticky-active {
  padding-top: var(--header-height, var(--fluid-80));
}