:root {
  --header-h: 64px;
  --container-max: 1000px;
}

/* ===== Header base ===== */
.site-header {
  min-height: var(--header-h); /* 高さ可変に */
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  position: relative;
  z-index: 1000;
  color: #111;
}
@media (prefers-color-scheme: dark) {
  .site-header {
    color: #f6f7f8;
    background: #0b0b0b;
    border-bottom-color: #1f1f1f;
  }
}

.site-header__inner {
  inline-size: min(92vw, var(--container-max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px; /* ←行の高さ */
  padding-inline: 16px;
}

/* ===== 900px以下：ドロワー ===== */
@media (max-width: 900px) {
  .site-header__inner {
    flex-wrap: wrap;
    min-height: 56px;
  }

  /* ←ここを static ではなく relative に。z-index も付与 */
  .site-nav {
    position: relative; /* static → relative（フローには乗る） */
    z-index: 1001; /* overlay より上に */
    width: 100%;
    border-top: 1px solid #eee;
    max-height: 0;
    overflow: hidden; /* あるいは clip */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 0.2s ease, opacity 0.18s ease, visibility 0s linear 0.18s;
  }
  body.nav-open .site-nav {
    max-height: 80vh; /* 開いたときの高さ上限 */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* ハンバーガーはそのまま */

  /* オーバーレイは nav より下の層に */
  #nav-overlay {
    z-index: 900;
  }
}

/* ロゴ（SVGは currentColor を使う版じゃないので、imgの色は変わりません） */
.site-header__logo.brand {
  display: flex;
  align-items: center;
  color: #111; /* テキストカラー（必要ならダークで切替） */
  text-decoration: none;
  gap: 10px;
}
.site-header__logo.brand img {
  display: block;
  height: clamp(28px, 3.2vw, 44px); /* 28〜44pxで自動調整 */
  width: auto;
}
/* 画面幅で切替（任意） */
@media (max-width: 900px) {
  .site-header .site-header__logo.brand > img {
    height: 44px;
  }
}
@media (min-width: 1400px) {
  .site-header .site-header__logo.brand > img {
    height: 64px;
  }
}

/* ダークテーマ時（任意） */
@media (prefers-color-scheme: dark) {
  .site-header__logo.brand {
    color: #f6f7f8;
  }
}

/* PC: 通常ナビ表示、ハンバーガーは非表示 */
.site-nav {
  display: block;
  position: relative;
  z-index: 1001;
}
.site-nav__list {
  display: flex;
  gap: 22px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  color: currentColor;
  text-decoration: none;
  display: inline-block;
  padding: 8px 10px;
  border-radius: 8px;
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  background: color-mix(in oklab, currentColor 12%, transparent);
  outline: none;
}
.site-nav__list a[aria-current='page'] {
  font-weight: 700;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
}

.site-header__toggle {
  display: none;
} /* ← PCでは出さない */

/* ===== 900px以下：ハンバーガー＋フロー展開 ===== */
@media (max-width: 900px) {
  .site-header__inner {
    flex-wrap: wrap;
    min-height: 56px;
  }
  .site-header__logo.brand img {
    height: 32px;
  }
  .site-nav {
    position: static; /* ヘッダー内に流す */
    width: 100%;
    border-top: 1px solid #eee;
    /* 初期状態：閉じておく */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: max-height 0.18s ease, opacity 0.12s ease, visibility 0s linear 0.18s;
    z-index: 1001; /* ← overlay(900)より上に */
  }

  /* 開いたとき */
  body.nav-open .site-nav {
    /* まずはフォールバック（古い環境向け） */
    max-height: calc(100vh - var(--header-h));
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: auto; /* ← スクロール可に */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; /* iOSで慣性スクロール */
    transition-delay: 0s;
    padding-block-end: 12px; /* 下の余白（ホームインジケータ対策） */
  }

  /* 対応ブラウザでは 100dvh を優先して使う（アドレスバー起伏に強い） */
  @supports (height: 100dvh) {
    body.nav-open .site-nav {
      max-height: calc(100dvh - var(--header-h));
    }
  }
  /* オーバーレイは nav より下の層に */
  #nav-overlay {
    z-index: 900;
  }
  .site-nav__list {
    gap: 18px;
  }

  /* ハンバーガー表示 */
  .site-header__toggle {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    line-height: 0;
    appearance: none;
  }
  .site-header__toggle:focus-visible {
    outline: 3px solid #7aa7ff;
    outline-offset: 2px;
  }

  /* 三本線 */
  .site-header__toggle .burger,
  .site-header__toggle .burger::before,
  .site-header__toggle .burger::after {
    content: '';
    display: block;
    inline-size: 22px;
    block-size: 2px;
    background: #111;
    border-radius: 2px;
    transition: transform 0.2s ease;
    position: relative;
  }
  .site-header__toggle .burger::before {
    position: absolute;
    transform: translateY(-6px);
  }
  .site-header__toggle .burger::after {
    position: absolute;
    transform: translateY(6px);
  }

  /* X化 */
  body.nav-open .site-header__toggle .burger {
    background: transparent;
  }
  body.nav-open .site-header__toggle .burger::before {
    transform: translateY(0) rotate(45deg);
  }
  body.nav-open .site-header__toggle .burger::after {
    transform: translateY(0) rotate(-45deg);
  }

  /* ナビは “ヘッダー内の下段” に流す（position:static） */
  .site-nav {
    position: static;
    width: 100%;
    border-top: 1px solid #eee;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.16s ease, opacity 0.12s ease;
  }
  body.nav-open .site-nav {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
  }
  .site-nav__list a {
    padding: 14px 12px;
    border-radius: 10px;
  }
}

/* SR only */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
  margin: -1px;
  padding: 0;
}

/* オーバーレイ */
#nav-overlay[hidden] {
  display: none;
}
#nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 900; /* nav(1000)より下にしたいなら 999 に調整 */
}

/* スクロールロック（開いてる間は背面固定） */
.nav-locked {
  overflow: hidden;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav {
    transition: none !important;
  }
}
a,
button {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible {
  outline-color: #0ea5e9;
}