/* ===== mobile_menu_fix.css (2025-09) =====
   ハンバーガーメニューをスマホで確実に開閉できるようにする強制上書き。
   既存の common.css の #menu li{ float:left; } 等を打ち消します。
*/

/* ハンバーガーボタンの見た目（任意で調整可） */
#menuToggle {
  display: none;
  background: #7B8200;
  color: #fff;
  border: none;
  font-size: 20px;
  padding: 10px 12px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* スマホ：メニューを閉じた状態をデフォルトにし、開いた時だけ表示 */
@media (max-width: 768px) {
  /* 既存の横並び指定を解除 */
  #menu ul,
  #menu li,
  #menu a {
    float: none !important;
  }

  /* ULはデフォルト非表示、開いた時だけ表示 */
  #menu ul {
    display: none !important;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  #menu ul.is-open {
    display: block !important;
  }

  /* LIは縦積み、タップしやすく全幅化 */
  #menu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #menu li a {
    display: block !important;
    padding: 14px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }

  /* ボタンを表示 */
  #menuToggle { display: block; }
}
/* ハンバーガーの初期非表示/開閉 */
#menuToggle { display: none; }

@media (max-width: 768px) {
  /* 既存の float 横並びを無効化 */
  #menu ul, #menu li, #menu a { float: none !important; }

  /* 閉じた状態はULを非表示、開いたら表示 */
  #menu ul { display: none !important; list-style: none; margin: 0; padding: 0; width: 100%; }
  #menu ul.is-open { display: block !important; }

  #menu li { width: 100%; margin: 0; padding: 0; text-align: left; }
  #menu li a { display: block; padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,0.25); }

  /* ボタンを表示 */
  #menuToggle { display: block; width: 100%; padding: 10px 12px; font-size: 20px; background:#7B8200; color:#fff; border:0; text-align:left; }
}
/* スマホでMENUを常に最上部に固定 */
@media (max-width: 768px) {
  #menu {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    /* 背景と影はお好みで */
    background: #7B8200;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  }
  /* 固定ヘッダ下に内容が潜り込まないよう、本文側に上余白を付ける（JSで高さを計算） */
  body {
    padding-top: var(--menu-offset, 56px); /* 初期値は保険 */
  }

  /* 展開時のリストは幅いっぱいに */
  #menu ul {
    width: 100%;
  }
}
/* ===== 固定ヘッダ + ドロップダウンを上に重ねて確実に表示 ===== */
@media (max-width: 768px) {
  /* 固定バー（すでに指定済みならそのままでOK） */
  #menu {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;            /* 後ろに潜らないように */
    background: #7B8200;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  }
  /* ボタンは常に最前面に */
  #menuToggle {
    position: relative;
    z-index: 1002;
  }

  /* ▼ ここがポイント：開くULを固定バー直下に"固定配置"して最前面に */
  #globalNav {
    position: fixed;          /* 画面に対して固定 */
    top: var(--menu-offset, 56px); /* ボタンの高さ分だけ下に表示（JSで自動計算してるならそのまま） */
    left: 0;
    right: 0;
    display: none !important; /* 初期は非表示 */
    background: #7B8200;      /* バーと同色。必要なら変更 */
    z-index: 1001;            /* ボタンのすぐ下/コンテンツの上 */
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 70vh;         /* 長い場合に画面内でスクロール */
    overflow-y: auto;
  }
  #globalNav.is-open {
    display: block !important;  /* 開いた時だけ見せる（強制） */
  }

  #globalNav li { width: 100%; }
  #globalNav li a {
    display: block;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }

  /* 本文が固定バーの下に潜り込まないように上余白を確保 */
  body {
    padding-top: var(--menu-offset, 56px);
  }

  /* 既存のfloat横並びは無効化（保険） */
  #menu ul, #menu li, #menu a { float: none !important; }
}