/* ==========================================================================
   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;
}

.pc-br {
  display: block;
}

/* --------------------------------------------------------------------------
   アニメーション基礎
   -------------------------------------------------------------------------- */
.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;
}