/* グローバルメニュー — 3 画面で共通 (#579 / 土屋指摘 2026-09-16)
 *
 * > メニューがランキングと、記録の申告画面にない。TOP と同じものがないと変じゃないか。
 *
 * #505 で LP に付けたものを、ランキングと申告画面でも使えるように切り出した。
 *
 * 🔴 **複製しない。** 3 か所に同じものを書くと、直すとき 3 か所になり、
 *    必ずどれかが取り残される。ここ 1 か所を直せば 3 画面に効く。
 *
 * 🔴 **各ページの色の変数に頼らない。** ページごとに名前が違う
 *    （LP は --sumi / --paper、ランキングは --white / --panel）。
 *    メニューは**自分の色を持つ**。どの画面でも同じ顔にする。
 *
 * 🔴 **コーポレートサイトの見た目を踏襲している** (#505 で実物を計測)。
 *    高さ 57px / sticky / 黒 70% / blur(16px) / 下境界線 / ハンバーガー 1 つ。
 *
 * 🔴 **PC でもスマホと同じハンバーガー**（コーポレートが画面幅で切り替えていない）。
 *    横並びのリンクを出すと、LP のファーストビュー (#503) で主役が 2 つになる。
 */
.gnav {
  /* この 3 つだけがメニューの色。ページの変数は使わない */
  --gnav-fg: #F5F5F5;
  --gnav-accent: #FF8C00;
  --gnav-font-en: 'Orbitron', sans-serif;

  position: sticky; top: 0; z-index: 50;
  height: 57px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(14px, 4vw, 48px);
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(245, 245, 245, .14);
}
.gnav .home {
  font-family: var(--gnav-font-en); font-weight: 900; font-size: 15px; letter-spacing: .18em;
  color: var(--gnav-fg); text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  min-height: 44px;   /* #557: 27px だった */
}
.gnav .home .sq { width: 9px; height: 9px; background: var(--gnav-accent); }

/* 押す的を 44px 以上にする（スマホの指 / #557） */
.gnav .burger {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--gnav-fg);
  padding: 0;
}
.gnav .burger span {
  display: block; width: 22px; height: 2px; background: currentColor;
  position: relative;
}
.gnav .burger span::before, .gnav .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
}
.gnav .burger span::before { top: -7px; }
.gnav .burger span::after { top: 7px; }
.gnav .burger[aria-expanded="true"] span { background: transparent; }
.gnav .burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.gnav .burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* 開くパネル。ヘッダーの直下から全幅で降りる */
.gnav-panel {
  position: fixed; left: 0; right: 0; top: 57px; z-index: 49;
  background: rgba(0, 0, 0, .95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: clamp(18px, 4vh, 40px) 20px calc(clamp(18px, 4vh, 40px) + env(safe-area-inset-bottom));
  display: grid; gap: 4px; justify-items: center;
  max-height: calc(100svh - 57px); overflow-y: auto;
}
.gnav-panel a {
  display: block; width: 100%; max-width: 420px; text-align: center;
  padding: 14px 10px; min-height: 48px;
  color: #F5F5F5; text-decoration: none; font-weight: 700; font-size: 16px;
}
.gnav-panel a:hover { color: #FF8C00; }
/* いま開いている画面。押しても動かないので、そう見せる */
.gnav-panel a[aria-current="page"] { color: #FF8C00; }
.gnav-panel .sep {
  width: 100%; max-width: 420px; margin: 10px 0 6px;
  border-top: 1px solid rgba(245, 245, 245, .16);
  padding-top: 12px;
  font-family: var(--gnav-font-en); font-size: 11px; letter-spacing: .24em;
  color: rgba(245, 245, 245, .55); text-align: center;
}