.main-header {
  position: fixed;
  inset: 0 0 auto 0;
  transition: box-shadow 0.5s ease;
  z-index: 999;
}

.main-header--top {
  top: 1rem;
  transition: top 0.5s ease-in-out;
}
.main-header--not-top {
  top: -200px;
  transition: top 0.8s ease-in-out;
}
.main-header--pinned {
  top: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.main-header--not-pinned {
  top: -200px;
}

/* magazine style header メニュー反転 */
.header-books-top.main-header--pinned,
.header-books-style.main-header--pinned {
  top: 0;
  box-shadow: none;
}
.header-books-top:not(.has-modal-open .header-books-style),
.header-books-style:not(.has-modal-open .header-books-style) {
  color: #ffffff;
  /* mix-blend-mode: difference; */
}
.header-books-top.main-header--pinned .wp-block-navigation__responsive-container-open,
.header-books-top .wp-block-navigation__responsive-container-open,
.header-books-style.main-header--pinned .wp-block-navigation__responsive-container-open,
.header-books-style .wp-block-navigation__responsive-container-open {
  background-color: var(--wp--preset--color--brand-secondary) !important;
  /* mix-blend-mode: difference; */
  padding: 0.35rem;
  border-radius: 50%;
  border: solid 2px #fffffb;
}

/* ==========================================================================
   カスタム投稿用ヘッダー専用のアニメーション制御（JavaScript不要）
   ========================================================================== */

/* 1. 基本状態（上スクロールで戻ってくるときなど） */
.header-books-style {
  /* Peek.js標準のアニメーション（もしすでにあれば不要ですが、念のため定義） */
  transform: translateY(0);
  transition:
    transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out !important;
  opacity: 1;
}

/* 2. 下スクロールでヘッダーが隠れるとき（Peek.js標準の動きを維持） */
.header-books-style.main-header--unpinned {
  transform: translateY(-100%);
  opacity: 0;
}

/* 3. 上スクロールでヘッダーがフワッと降りてくるとき（Peek.js標準の動きを維持） */
.header-books-style.main-header--pinned {
  transform: translateY(0);
  opacity: 1;
}

/* 4. 【最重要】ページ最上部（200px未満のエリア）にいるときの強制ステルス */
/* Peek.jsが「top」クラスをつけている間は、絶対に見えないようにCSSで封印します */
.header-books-style.main-header--top {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ★ここを追加★ 
   メニューが開いている状態（例: bodyにクラスがつく、またはheader自体につく場合）は、
   強制的に位置を 0（画面内）に戻し、透明度も 1 にします。 */
.has-modal-open .header-books-style.main-header--top,
.header-books-style.has-modal-open.main-header--top {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* オーバーレイ用追加CSS */
.has-modal-open .header-books-style .wp-block-navigation__responsive-container {
  height: 100vh;
  width: 100% !important; /* 横幅を画面いっぱいに強制 */
  left: 0 !important; /* 親のズレがあっても必ず左端から配置 */
}