/* ===================================================================
   ベーススタイル（全ページ共通の土台）
   ※ reset は ress.min.css が先に読み込まれる前提
=================================================================== */
html {
  /* レスポンシブな rem 基準。ルートの font-size を画面幅で可変にし、
     「1 rem = 16px 相当（基準幅時）」になるようにする（既存の rem 値はそのまま使える）。
     PC: Figma 1728px 基準 → 100vw / 108 で 1728px のとき 16px。
       ・1728px 以上 … 16px で固定（clamp 上限。際限なく拡大しない）
       ・1512px 以下 … 14px で下限（clamp 下限。可読性を確保） */
  font-size: clamp(14px, 100vw / 108, 16px);
  scroll-behavior: smooth;
  min-height: 100%;
}

@media (max-width: 1023px) {
  html {
    /* SP: Figma 390px 基準 → 100vw / 24.375 で 390px のとき 16px。
       ・390px 超 … 19px で頭打ち（min 上限。タブレット縦等での肥大化を防ぐ）
       ・390px 以下 … vw 比例で縮小（小型端末は自然に小さくなる） */
    font-size: min(100vw / 24.375, 19px);
  }
}

body {
  font-family: var(--font-ja);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip は横はみ出しを抑えつつスクロールコンテナを作らない（MV の position:sticky を阻害しない） */
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#main {
  flex: 1 0 auto;
  width: 100%;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* --- PC / SP 出し分けユーティリティ --- */
.u-pc {
  display: block;
}

.u-sp {
  display: none;
}

@media (max-width: 1023px) {
  .u-pc {
    display: none;
  }

  .u-sp {
    display: block;
  }
}

/* SPのみ改行（brタグ用） */
br.sp-only {
  display: none;
}

@media (max-width: 1023px) {
  br.sp-only {
    display: inline;
  }
}

/* --- ドロワー展開中はスクロール固定 --- */
body.is-drawer-open {
  overflow: hidden;
}

/* --- スクロールフェードイン --- */
.js-fade {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}