/* ==========================================================================
   Base Styles
   body, a, img 等のベース設定（CSS変数を使用）
   ========================================================================== */

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: var(--ls-md);
  color: var(--color-black);
  background-color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   リンク
   -------------------------------------------------------------------------- */
a {
  transition: color var(--transition-speed) var(--easing),
              opacity var(--transition-speed) var(--easing);
}

a:hover {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   画像
   -------------------------------------------------------------------------- */
img {
  vertical-align: bottom;
}

/* --------------------------------------------------------------------------
   共通レイアウト
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* --------------------------------------------------------------------------
   セクション余白
   -------------------------------------------------------------------------- */
.section-padding {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.section-padding-sm {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* --------------------------------------------------------------------------
   テキスト基本
   -------------------------------------------------------------------------- */
.text-en {
  font-family: var(--font-en);
}

.text-center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   表示制御
   -------------------------------------------------------------------------- */
.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

.sp-br {
  display: none;
}

/* --------------------------------------------------------------------------
   アニメーション基礎
   -------------------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow) var(--easing),
              transform var(--transition-slow) var(--easing);
}

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

/* 遅延クラス */
.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

.delay-400 {
  transition-delay: 0.4s;
}

.delay-500 {
  transition-delay: 0.5s;
}

/* --------------------------------------------------------------------------
   ファーストビュー専用の表示演出
   FV / FV2 のコンテンツは、じっくり読ませるためゆっくり・大きめのストローク＋
   余韻のあるイージング（easeOutExpo風）＋わずかなフォーカスイン（blur）で見せる。
   段差も標準より広く取り、視線が上から順に追える「読ませる」リズムにする。
   ※ .fade-up / .delay-* 自体は全セクション共通なので、ここでは .fv / .fv2 配下のみ上書き。
   -------------------------------------------------------------------------- */
.fv .fade-up,
.fv2 .fade-up {
  transform: translateY(40px);
  filter: blur(6px);
  transition-property: opacity, transform, filter;
  transition-duration: 1.1s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.fv .fade-up.is-visible,
.fv2 .fade-up.is-visible {
  transform: translateY(0);
  filter: blur(0);
}

/* FV/FV2 はストーリー性を持たせるため段差を標準より広く取る */
.fv .delay-100,
.fv2 .delay-100 {
  transition-delay: 0.2s;
}

.fv .delay-200,
.fv2 .delay-200 {
  transition-delay: 0.55s;
}

.fv .delay-300,
.fv2 .delay-300 {
  transition-delay: 0.9s;
}

.fv .delay-400,
.fv2 .delay-400 {
  transition-delay: 1.15s;
}

.fv .delay-500,
.fv2 .delay-500 {
  transition-delay: 1.4s;
}

/* モーション軽減設定のユーザーには演出を無効化して即時表示 */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fv .fade-up,
  .fv2 .fade-up {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}