/* ==========================================================================
   base.css — リセットと地の文の既定値
   DESIGN.md 3.1 / 3.4 / 3.5 / 4.0 / 4.6 / 5.3 に従う
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 根要素の背景はキャンバスとして最下層に描かれる。z-index: -10 の .page-bg は
   その上に来るので地図を隠さない。body を透明にしたぶんの地をここで持つ。 */
html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--top-page-bg);
}

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--size-body-sp);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--top-text);
  /* 修正12：背景は .page-bg の固定レイヤーが担う。body に地を敷くと隠れる */
  background-color: transparent;
  text-wrap: pretty;
  line-break: strict;
  /* カンプは Figma の palt（プロポーショナルメトリクス）が効いた状態で組まれている。
     ページ全体へ継承させ、約物の送りをカンプに合わせる。 */
  font-feature-settings: "palt" 1;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: var(--leading-heading);
  text-wrap: balance;
  line-break: strict;
}

p {
  margin: 0;
  text-wrap: pretty;
  line-break: strict;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: var(--color-primary-dark);
}

a:hover {
  color: var(--color-primary-default);
}

button {
  font: inherit;
  color: inherit;
}

input {
  font-family: inherit;
}

/* DESIGN.md 4.6：フォーカスリングを削除しない */
:focus-visible {
  outline: var(--stroke-control) solid var(--color-accent-default);
  outline-offset: 2px;
}

/* 視覚的に隠すが読み上げには残す（4.10 のラベル） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 開いたメニューの背後をスクロールさせない */
body.is-menu-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .site-footer {
    margin-top: auto;
  }
}

/* --------------------------------------------------------------------------
   ページ全体の背景（固定レイヤー）
   ビューポート全面を覆う position: fixed の層に img を敷き、object-fit で拡縮する。
   -------------------------------------------------------------------------- */

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -10;
  pointer-events: none;
}

.page-bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

@media (prefers-reduced-motion: no-preference) {
  .page-bg {
    height: calc(100vh + 48px);
  }
}