/* =============================================================
   layout.css — 1ページ完結型の骨組み（ヘッダー・セクション・フッター）
   ============================================================= */

/* ---- ヘッダー：ヒーロー（夜空）の上に重ねる ---- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: var(--color-on-night);
}

.site-header__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* 下層ページ用：白背景の通常ヘッダーに切り替える */
.site-header--solid {
  position: relative; /* static だと .nav__list（position:absolute）の基準が失われモバイルメニューがズレる */
  color: var(--color-ink);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

/* ---- セクション共通 ---- */
.section {
  padding: var(--space-section) var(--space-md) 0;
}

.section__inner {
  max-width: var(--width-content);
  margin: 0 auto;
}

/* 下層ページの本文枠 */
.page-body {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

/* ---- フッター ---- */
.site-footer {
  margin-top: var(--space-section);
  background-color: var(--color-night-deep);
  color: var(--color-on-night);
  padding: var(--space-xl) var(--space-md) var(--space-lg);
}

.site-footer__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  text-align: center;
}