:root { --header-h: 0px; } /* JSでヘッダー高さを代入 */

/* ===== ヘッダー ===== */
#header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 14000; /* ヘッダーを最前面に */
  background: transparent;
  transition: background 0.3s ease;
}
#header.is-scrolled {
  background: rgba(0,0,0,0.90);
}

/* ===== ドロワー（右からスライドイン） ===== */
#sp_nav{
  position: fixed;
  top: var(--header-h);                  /* ヘッダーの下から開始 */
  right: 0;
  width: 70vw;                           /* 幅80% */
  height: calc(100vh - var(--header-h)); /* ヘッダーを除いた高さ */
	background: #000;
  z-index: 13000;                        /* ヘッダーより下 */
  overflow-y: auto;
  display: block;                        /* base.cssのdisplay:noneを打ち消す */
  transform: translateX(100%);           /* 右画面外へ退避 */
  transition: transform .28s ease;
  will-change: transform;
}
#sp_nav.is-open{
  transform: translateX(0);              /* 表示状態 */
}

/* ===== オーバーレイ ===== */
#modal_gray_layer{
  position: fixed;
  top: var(--header-h);                   /* ヘッダーを覆わない */
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-h));  /* ヘッダーを除いた高さ */
  background: rgba(0,0,0,.75);             /* 薄黒 */
  z-index: 12000;                         /* ドロワーより下、ヘッダーより下 */
  display: none;
}

/* ===== メニュー内要素 ===== */
#sp_nav > ul,
#sp_nav .sp_nav_close{
  position: relative;
  z-index: 1;
}

/* ===== ハンバーガーアイコン ===== */
#sp_nav_trg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  cursor: pointer;
  transition: transform .2s ease;
}
#sp_nav_trg.is-open{ transform: rotate(90deg); }

@media print, screen and (min-width: 980px){
  #sp_nav_trg{ display:none; }
}

/* ===== 既存のメニュースタイル（必要に応じて変更） ===== */
#sp_nav ul{
  clear: both;
  border-top: 1px solid rgb(255 255 255 / 22%);
  margin-bottom: 2rem;
}
#sp_nav li{ border-bottom: 1px solid rgb(255 255 255 / 22%); }
#sp_nav li a{ display:block; padding:1rem; }
#sp_nav_close_bottom{
  max-width: 60%;
  margin: 0 a