/* ハンバーガーメニュー：段階（ブレークポイント）で切り替えるのをやめて、
   画面の幅に応じてなめらかに大きさが変わるようにする（2026-11-14改定）。

   前回（2026-11-14）は「769〜1200pxのときだけ」という範囲指定で直したが、
   今回はその考え方をやめ、狭い画面（480px以下）〜広い画面（1600px以上）の
   間を、途中で急に変わる場所がないようになめらかに繋ぐ。
   480px以下はスマホと同じ見た目、1600px以上は元のPCと同じ見た目になる。

   style.css 自体（191行目・圧縮済み）は触らない決まりのため、
   このファイルを style.css の後に読み込んで上書きする。 */

#menuBody #pagemenu_bg,
.overRideRight {
  /* 480pxで画面いっぱい(100%)、1200pxで画面の1/4(25%)になるように、
     その間はなめらかに変化する（2026-11-14 改定：50%だと文字に対して
     余白が広すぎてバランスが悪いとの指摘を受け1/4に変更。さらに、
     1600pxを基準にすると1024px等のノートパソコン幅でまだ余白が
     広すぎたため、1/4に達する基準を1200pxに早めた） */
  width: clamp(25%, calc(600px - 25vw), 100%) !important;
}
/* 開いている間（#wrapにmenu_onが付いている間）だけ、PC用の濃さ(0.87)より
   濃くする（写真が透けて文字と重なって見えることがあるため）。
   開いている間だけに限定するのは、常に強制すると「閉じるときに透明にして
   消す」アニメーション（main.js）を邪魔してガクつく原因になるため
   （閉じ始めた瞬間に #wrap から menu_on が外れるので、このCSSは外れて
   アニメーションの邪魔をしなくなる）。 */
#wrap.menu_on #menuBody #pagemenu_bg {
  opacity: 0.95 !important;
}
/* 開いたときの位置を、画面の幅に関わらず常にCSSで固定する（2026-11-14 再改定）。
   以前は768px以下（スマホ）だけに限定していた。理由は「768pxより広いとき
   （パソコン表示）は、位置をJS（main.js・GSAP）がアニメーションで動かす
   ので、ここで常に位置を固定すると、そのアニメーション（特に閉じるときの
   スライド）を邪魔してガクつく原因になる」というものだった（2026-11-14に発覚）。

   その後、閉じるときのアニメーションは「位置を動かす」方式から「透明に
   して消す」方式（main.js）に変更したため、位置を動かす処理とはもう競合
   しない。一方で、パソコン表示でJSのアニメーションが（実機のSafariでのみ
   起きる、原因未特定の理由により）途中で止まり、位置が「閉じているとき
   のまま（画面の外）」に固定されてしまう不具合が実機で確認された
   （利用者の方に開発者ツールで直接確認していただいて判明）。
   JSの成否に関わらず確実に正しい位置にするため、幅の限定をやめ、
   開いている間（#wrapにmenu_onが付いている間）は常にCSSで位置を強制する。 */
#wrap.menu_on #menuBody #pagemenu_bg {
  transform: translateY(0%) translateX(0%) !important;
}

#menuWrap .menuBtn .menu-trigger {
  /* 480pxで4rem（スマホと同じ大きさ）、1600pxで3.4rem（PCと同じ大きさ） */
  width: clamp(3.4rem, calc(4.257rem - 0.857vw), 4rem);
  height: clamp(3.4rem, calc(4.257rem - 0.857vw), 4rem);
}
#menuWrap {
  /* ボタンの位置も同じように、480pxでスマホの位置、1600pxでPCの位置へ */
  right: clamp(2rem, calc(-2.286rem + 14.286vw), 12rem);
  top: clamp(2rem, calc(1.571rem + 1.4286vw), 3rem);
}

/* 画面を半分にしたとき（幅736px前後。スマホ表示に切り替わる768px以下の中では広い方）だけ、
   パネル幅と閉じるボタンをさらに狭くする（2026-11-14）。
   768px以下は元の style.css が文字サイズ・パネル幅とも「スマホと同じ」扱いで固定していたが、
   768px以下の中でも文字・ボタンの大きさは画面幅に関わらずほぼ同じ（html の文字サイズの基準値が
   幅に応じて変わる作りのため）一方、幅736pxはスマホの実機（375〜480px幅）より画面そのものが
   広いため、パネルがいっぱいに広がって余白が目立ち、ボタンも大きく見える。
   480px（実機スマホ）はそのまま、768pxに近づくほど狭くなるようにする。 */
@media only screen and (max-width: 768px) {
  /* 「パネル幅の何倍か」を表す1つの数字（1＝幅いっぱい、0.33＝約1/3）を
     ここで1回だけ決め、閉じるボタン・SNSアイコン・左の余白も同じ数字を
     使って縮むようにする（2026-11-14）。
     以前はパネル幅・ボタンの大きさをそれぞれ別の数式で決めていたが、
     「ボタンもSNSアイコンも左の余白も、パネルに対して大きさがバラバラで
     バランスが悪い。固定サイズではなく、パネルが縮めば一緒に縮むように
     できないか」との指摘を受け、1つの数字に揃えた。 */
  :root {
    /* パネルがまだ狭いとの指摘（2026-11-14）を受け、下限を33%→38%に上げた */
    --menu-scale: clamp(0.38, calc((855.6px - 78.25vw) / 100vw), 1);
    /* 丸全体を --menu-scale どおりに縮めると、中の✕が丸に対して小さく見えすぎる
       との指摘（2026-11-14）。✕だけは、丸ほど縮めない別の比率にする。
       （最初は下限0.55にしたら今度は逆に大きすぎたため、0.4まで下げ直した） */
    --menu-icon-scale: clamp(0.4, calc(0.134 + 0.866 * var(--menu-scale)), 1);
  }
  #menuBody #pagemenu_bg,
  .overRideRight {
    /* 480pxでそのまま100%、736pxで画面幅の約1/3（33%）になるように、なめらかに変化する */
    width: calc(100% * var(--menu-scale)) !important;
  }
  /* パネルを狭くすると、いちばん長い項目（子育て支援センターみどりのひ・ろ・ば）が
     折り返さずパネルの外へはみ出す不具合が出た（2026-11-14）。
     原因：.menu_inner が横並び（flex）の中の1項目として「min-width:auto」のままだと、
     ブラウザは中身（折り返さなかった場合の最大の幅）を下回って縮められない決まりになっている。
     min-width:0 にして、折り返しを許可する（実機スマホの幅ではこの指定があっても
     もともと折り返さずに収まっていたため、見た目は変わらない）。
     あわせて、文字がパネルの左端にぴったりつく（左の余白がない）との指摘を受け、
     左の余白もパネルが縮むほど狭くはなるが、完全には0にならないようにする。 */
  .overRideRight .overTop .menu_inner {
    min-width: 0;
    /* 余白が足りないとの指摘（2026-11-14）を受けて広げた。さらにもう少し
       ほしいとの指摘を受け、左だけでなく右（パネルの端）にも余白を付けた。
       その後もまだ左の余白が欲しいとの指摘を受け、もう一段広げた。
       最後に「文字を1文字分くらい右にずらしたい」との指摘を受け、
       文字の大きさ（15px）ぶんをそのまま足した */
    padding-left: calc(1.6rem + 2rem * var(--menu-scale) + 15px);
    padding-right: calc(0.6rem + 0.9rem * var(--menu-scale));
  }
  #menuWrap {
    /* 幅・高さの数値そのものは変えない。丸い白地の中の3本線（開くと✕の形に
       回転する）は、ボタンの大きさとは別の固定値（rem）で位置が決まっているため、
       幅・高さだけを数値で小さくすると、線の位置がボタンからはみ出したりずれたり
       して✕ではなく矢印のような形に崩れてしまった（2026-11-14に発覚）。
       かわりに丸い白地ごと「縮小して表示するだけ」（transform:scale）にすると、
       中の線も含めてそのままの比率で縮むので、✕の形を保ったまま、丸ごと小さくできる。 */
    /* main.js・top.js が読み込み時にこのボタンへ transform を直接指定することがあり、
       !important を付けないとそちらに負けて縮小が効かなくなる（2026-11-14 確認）。 */
    transform: scale(var(--menu-scale)) !important;
  }
  /* ✕（.menu-trigger）は丸（#menuWrap）の内側にあるので、丸がすでに
     --menu-scale 倍に縮んでいる。そこへさらに (--menu-icon-scale ÷ --menu-scale) 倍を
     掛けることで、✕だけ最終的に --menu-icon-scale 倍（丸より縮み方をゆるくした分）
     になるようにする。 */
  #menuWrap .menuBtn .menu-trigger {
    transform: scale(calc(var(--menu-icon-scale) / var(--menu-scale))) !important;
  }
  /* 下のSNSアイコン（Instagram・TikTok・YouTube）も、パネルと同じ比率で
     縮む。今まで大きさが幅に関わらずほぼ一定だったため、パネルを狭くしたとき
     だけアイコン同士がくっついて余白がなく見えていた（2026-11-14） */
  .overRideRight .overTop .leftMenu .menuInSNS ul li a svg {
    width: calc(5.3rem * var(--menu-scale));
  }
  .overRideRight .overTop .leftMenu .menuInSNS ul li {
    margin-right: calc(3rem * var(--menu-scale));
  }
}

/* スマホを横向きにしたときなど、縦の高さが低いと、メニューの項目が
   画面の上下にはみ出し、スクロールもできず一部しか見えなくなる不具合の対策
   （2026-11-14。これは幅に関係なく、元々あった問題）。
   はみ出した分をスクロールして見られるようにする。 */
@media only screen and (max-height: 500px) {
  #menuBody #pagemenu_bg,
  .overRideRight .overTop {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .overRideRight .overTop {
    align-items: flex-start;
    padding: 2rem 0;
  }
}