/* —— 初期状態 —— */
#flyout-open {
  display: none;
}
#flyout-content {
  /* off-screen で隠す */
  position: fixed;
  top: 0;
  right: -81%;
  width: 80%;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 6px rgba(0,0,0,0.3);
  transition: right .3s ease;
  overflow-y: auto;
  z-index: 999;
  padding-top: 64px;
}
#flyout-close {
  display: none;
}

/* —— タブレット以下（768px以下）で表示・動作 —— */
@media (max-width: 768px) {
  /* ハンバーガーアイコンを表示 */
  #flyout-open {
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: #0055A4;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
  }

  /* フライアウト本体を block に */
  #flyout-content {
    display: block;
  }

  /* open クラスで画面内にスライドイン */
  #flyout-menu.open #flyout-content {
    right: 0;
  }

  /* 閉じるボタンを表示 */
  #flyout-close {
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #333;
  }
}
/* ─────────────────────────────────────────
   メニューを開いたときだけ「開くボタンを隠す」
───────────────────────────────────────── */
#flyout-menu.open #flyout-open {
  display: none;
}

/* ─────────────────────────────────────────
   メニュー本体を開くボタンより手前に
───────────────────────────────────────── */
#flyout-content {
  z-index: 1001;  /* もともと 999 */
}

/* ─────────────────────────────────────────
   閉じるボタンをさらに前面に
───────────────────────────────────────── */
#flyout-close {
  z-index: 1002;  /* 確実にクリックできるように */
}