html {
  /* 1rem = 10px 換算。Figmaの設計値(px) ÷ 10 = rem として指定できるようにする */
  font-size: 62.5%;
}

/* ページ内リンクは、動きを許可している環境でのみスムーススクロールにする */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/*
 * Figma に中間幅のデザインが無いため、PC(1360px) / SP(390px) の設計値を
 * ルートの font-size で等比スケールさせて中間幅・狭幅を成立させる。
 * style.css は宣言部が全て rem（px 直書き 0 件）なので、ここ 1 箇所で全セクションが追従し、
 * ある幅での描画は「基準幅での描画をそのまま定数倍したもの」になる。
 *
 * calc の 17px はクラシックスクロールバーの実測最大幅。
 * 100vw はスクロールバーを含むが @media の評価幅は含まないため、差し引かないと
 * 縮小後の版面がスクロールバー分だけ溢れて横スクロールが再発する。
 * オーバーレイスクロールバー環境では左右に 8.5px ずつ余白が出るだけで、
 * 版面は margin: auto の中央寄せなので実害はない。
 */
@media (min-width: 768px) {
  html {
    /* min() の中に % を置けない環境向けのフォールバック */
    font-size: calc((100vw - 17px) / 136);
    /*
     * 1377px 以上では 62.5%（=10px）で頭打ちになり、現行の PC デザインがそのまま出る。
     * 上限を 10px 直値ではなく 62.5% のままにしているのは、ブラウザの既定フォントサイズ
     * 設定を尊重するため。既定が大きい環境では min() が「収まる方」を自動で選ぶ。
     */
    font-size: min(62.5%, calc((100vw - 17px) / 136));
  }
}

/*
 * SP は 390px フレーム基準。390px で 10px（現状と完全一致）、
 * 375px で 9.62px、360px で 9.23px、320px で 8.21px。
 * 767px 以下は実機がオーバーレイスクロールバーのため 17px は差し引かない
 * （差し引くと 390px 実機で 4.4% ぶんの余白が右側にだけ残る）。
 */
@media (max-width: 767px) {
  html {
    font-size: calc(100vw / 39);
  }
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-page-bg);
  font-size: 1.6rem;
  /* 最新SPフレーム終端（footer下端 + 78px）に合わせつつ、追従CTAから最終行を保護する */
  padding-bottom: 11rem;
}

@media (min-width: 768px) {
  body {
    /* 最新PCフレーム終端は footer 下端から120px（追従CTA 96px + 下端13pxを含む） */
    padding-bottom: 12rem;
  }
}

/* ホバー操作が可能な端末で、リンクとボタンに共通のフィードバックを付ける */
@media (hover: hover) {
  a,
  button {
    transition: opacity 0.2s ease;
  }

  a:hover,
  button:hover {
    opacity: 0.7;
  }
}

/* 動きを抑える設定では、透明度のみ即時に切り替える */
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  a,
  button {
    transition: none;
  }
}

/* SPでのみ非表示 */
@media (max-width: 767px) {
  .u-pc-only {
    display: none !important;
  }
}

/* PCでのみ非表示 */
@media (min-width: 768px) {
  .u-sp-only {
    display: none !important;
  }
}

/* ============ スクロールフェードイン ============ */
/*
 * 初期状態（非表示）は html.js-fade が付いているときだけ適用する。
 * .js-fade は <head> のインラインスクリプトで付与しているため、
 * JavaScript が無効・ブロックされた環境ではコンテンツがそのまま表示される。
 *
 * transform / opacity のみを使い、レイアウトを再計算させない。
 * 対象要素はいずれも position: relative か絶対配置の枠なので、
 * transform でスタッキングコンテキストが増えても既存の重なり順には影響しない。
 */
.js-fade [data-fade] {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-fade [data-fade].is-faded-in {
  opacity: 1;
  transform: none;
}

/* OS の「視差効果を減らす」設定時は動きを付けず即時表示する */
@media (prefers-reduced-motion: reduce) {
  .js-fade [data-fade],
  .js-fade [data-fade].is-faded-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * キーボード操作時のみフォーカス位置を明示する（:focus-visible なのでマウスクリックでは出ない）。
 * outline-offset で要素の外側に出すため、角丸のボタンでも形状を崩さない。
 */
a:focus-visible,
button:focus-visible {
  outline: 0.3rem solid var(--color-text);
  outline-offset: 0.2rem;
}

/* 視覚的には隠すがスクリーンリーダーには読み上げさせる（表のキャプション等） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}