@charset "UTF-8";

/*
 * TOP専用CSS（commonは作成しない）。
 * 基本幅：width 92.3076923077% / max-width 120rem。
 * html：1300px以上10px、1056.25pxまで比例縮小、768pxまで8.125px。
 * SP：767px以下で1rem = 10pxへリセット。
 * 区切り余白：PC 100px基準 / SP 80px。波の重なり分は各セクションで補正。
 */

/* ========================================
   基本設定・改行制御
   ======================================== */
html {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(8.125px, 0.7692307692vw, 10px);
  color: #3F3F3F;
  background: #fff;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ページ内リンク（#〜）はスムーススクロール。動きを減らす設定の端末では即時移動 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

body {
  margin: 0;
  font-size: 1.6rem;
}

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

h1, h2, p, figure {
  margin: 0;
}

.br-sp {
  display: none;
}


@media (max-width: 767px) {
  html {
    font-size: 10px;
  }

  .br-pc {
    display: none;
  }

  .br-sp {
    display: revert;
  }

}

/* URL支給前のダミーリンク。カード全体をクリック範囲にする。 */
.card__link { display: block; color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
a[data-dummy-link] { cursor: pointer; }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 3px solid #0281cd; outline-offset: 4px; }

/* ========================================
   アニメーション（汎用クラス）
   ----------------------------------------
   .fade-in         画面に入ったら、下から少し浮き上がりながら表示
   .fade-in-stagger 直下の子要素を順番に表示（.fade-in と同じ動き）
   .rise-stagger    直下の子要素を大きめに浮き上がらせる（カード向け・透明にはしない）
   .fade-only       .fade-in / .fade-in-stagger と併用。動かさず透明度だけ変える
   .load-fade       ページ読み込み時に表示（FV向け）
   開始を遅らせる：style="--anim-delay: .4s"（秒で指定）
   JSが動かない環境・動きを減らす設定では、最初から表示する。
   既存のhover用transitionを上書きしないよう、keyframesで動かす。
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
  .is-anim-ready .fade-in:not(.is-visible),
  .is-anim-ready .fade-in-stagger:not(.is-visible) > *,
  .is-anim-ready:not(.is-anim-loaded) .load-fade {
    opacity: 0;
  }

  .is-anim-ready .rise-stagger > :not(.is-visible) {
    translate: 0 7rem;
  }

  .is-anim-ready .fade-in.is-visible,
  .is-anim-ready .fade-in-stagger.is-visible > * {
    animation: anim-fade-up .8s cubic-bezier(.22, 1, .36, 1) var(--anim-delay, 0s) backwards;
  }

  .is-anim-ready .fade-in.fade-only.is-visible,
  .is-anim-ready .fade-in-stagger.fade-only.is-visible > * {
    animation-name: anim-fade;
  }

  .is-anim-ready .rise-stagger > .is-visible {
    animation: anim-rise 1s cubic-bezier(.22, 1, .36, 1) var(--anim-delay, 0s) backwards;
  }

  .is-anim-loaded .load-fade {
    animation: anim-fade 1.4s ease var(--anim-delay, 0s) backwards;
  }
}

@keyframes anim-fade-up {
  from {
    opacity: 0;
    translate: 0 2rem;
  }
}

@keyframes anim-fade {
  from {
    opacity: 0;
  }
}

@keyframes anim-rise {
  from {
    translate: 0 7rem;
  }
}