* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --width: 1440;
  /* セクション外余白：1440px で 5rem、大画面 max 6rem（5 / 1440 ≈ 5.556vw） */
  --space-section-y: clamp(2rem, 5.556vw, 6rem);
  /* 白ブロックオフセット・section-lg（段階指定は base.css MQ） */
  --space-section-inset: 2rem;
  --text-5xl: clamp(3rem, 5.56vw, 5rem);
  --text-4xl: clamp(2.5rem, 4.44vw, 4rem);
  --text-3xl: clamp(2rem, 3.33vw, 3rem);
  --text-2xl: clamp(1.5rem, 2.22vw, 2rem);
  /* 固定ページ h1：SP 24px 前後 → タブ〜PC はなめらかに、最大 44px */
  --text-page-title: clamp(1.5rem, 1.2rem + 1.2vw, 2.75rem);
  --text-xl: clamp(1.25rem, 1.67vw, 1.5rem);
  --text-lg: clamp(1.125rem, 1.39vw, 1.25rem);
  --text-base: clamp(1rem, 1.11vw, 1.0625rem);
  --text-sm: clamp(0.875rem, 0.97vw, 0.9375rem);
  --text-xs: clamp(0.75rem, 0.83vw, 0.8125rem);
  --text-black: #444;
  --text-muted: #666;
  --text-white: #fff;
  --bg-white: #fff;
  --bg-black: #000;
  --webgl-bottom-color: #ef8d6c;
  --webgl-gradient-fallback: linear-gradient(
    145deg,
    #223862 0%,
    #314f8c 38%,
    #6c6383 70%,
    var(--webgl-bottom-color) 100%
  );
  --body-gradient: linear-gradient(
    180deg,
    #2e4e8c 0%,
    rgba(107, 98, 130, 0.94) 50%,
    rgba(240, 141, 109, 0.8) 100%
  );
  --text-gradation: var(
    --gradation,
    linear-gradient(
      180deg,
      #2e4e8c -57.35%,
      #314f8b -14.7%,
      rgba(60, 82, 137, 0.98) 13.01%,
      rgba(80, 89, 134, 0.96) 34.33%,
      rgba(107, 98, 130, 0.94) 53.52%,
      rgba(143, 109, 124, 0.9) 72.71%,
      rgba(186, 123, 117, 0.86) 89.77%,
      rgba(240, 141, 109, 0.8) 106.82%
    )
  );
}

@media (min-width: 900px) {
  :root {
    --space-section-inset: 3rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --space-section-inset: 4rem;
  }
}

/* SP本文：15〜16px（元の13〜14pxより少し大きいまま） */
@media (max-width: 768px) {
  :root {
    --space-section-y: 2rem;
    --text-sm: clamp(0.9375rem, 1.9vw, 1rem);
    --text-base: clamp(0.9375rem, 1.9vw, 1rem);
  }
}

html {
  /* デフォルトはグラデ上端色（その他テンプレ用） */
  background-color: #2e4e8c;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

/* トップ：バウンスは html / body 下地の白が見える */
html.is-front-page,
html:has(body.home) {
  color-scheme: light;
  background-color: var(--bg-white);
  background-image: none;
}

html:has(body.page:not(.home)) {
  background-color: #2e4e8c;
  background-image: var(--body-gradient);
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text-black);
  background-color: #2e4e8c;
  overflow-x: hidden;
  max-width: 100%;
  touch-action: pan-y;
}

body.page:not(.home) {
  background-color: #2e4e8c;
  background-image: var(--body-gradient);
}

/* トップ：グラデはスクロール連動。下地だけ白（バウンス隙間用・グラデは上に重なる） */
body.home {
  background-color: var(--bg-white);
  background-image: var(--body-gradient);
}