@charset "utf-8";
/*
Theme Name: Route
Version: 1.0
*/

/* === SPメニュー（ハンバーガー） =================================== */
/* 1) まずは非表示。open時に .is-open を付けて表示させる想定 */
.spmenu{
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; の省略形 */
  display: none;            /* 初期は隠す */
  z-index: 9999;

}

/* 2) 開いた状態 */
.spmenu.is-open{ display: block; }

/* 3) 右側に出る白いパネル本体（メニュー全体が入る） */
.spmenu .spwrapper{
  position: absolute;
  top: 0;
  right: 0;
  width: 75vw;              /* 右パネルの幅（お好みで 70–90vw） */
  max-width: 520px;         /* タブレットで広がりすぎないように */
  height: 50vh;            /* 画面全高＝メニュー全体が入る箱 */
  background: #fff;         /* ← これが白い背景 */
  box-shadow: -8px 0 24px rgba(0,0,0,.12);
  padding: 28px 24px;
  overflow: hidden;         /* スクロールさせない */
  display: flex;            /* 中身を縦中央揃えにする準備 */
  flex-direction: column;
  justify-content: center;  /* ここでメニュー全体を縦中央表示 */
}

/* 4) ULを縦並び・等間隔に。高さを100%にして「全部見える」レイアウト */
.spmenu .spwrapper ul{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  /* 高さ一杯を使って縦に配置。項目が7～8個なら全て収まる想定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;                /* 行間 */
}

/* 5) 各リンクの体裁 */
.spmenu .spwrapper a{
  display: block;
  text-decoration: none;
  color: #111;
  font-weight: 700;
  line-height: 1.4;
  font-size: clamp(16px, 2.8vw, 20px); /* 画面に合わせて縮む */
  padding: 6px 0;
}

/* 6) メニュー表示中はページ本体のスクロールを止めたい場合（任意） */
body.menu-open{ overflow: hidden; }

/* 7) もし縦が極端に短い端末で収まりきらない時の保険（文字と行間を小さめに） */
@media (max-height: 640px){
  .spmenu .spwrapper ul{ gap: 12px; }
  .spmenu .spwrapper a{ font-size: clamp(15px, 2.4vw, 18px); }
  .spmenu .spwrapper{ padding: 20px 18px; }
}