/* ==========================================================================
   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: 5%;
  padding-right: 5%;
}

@media (min-width: 1600px) {
  .container {
    padding-left: 3%;
    padding-right: 3%;
  }
}

.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);
}

/* フルブリードコンテナ（FV等。左右余白を画面幅基準=12分割1カラムで確保）
   SP時の左右余白は responsive.css で --container-padding に切り替える */
.container-fluid {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8.33333vw;
  padding-right: 8.33333vw;
}

/* --------------------------------------------------------------------------
   セクション余白
   -------------------------------------------------------------------------- */
.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;
}

/* --------------------------------------------------------------------------
   レイアウトユーティリティ
   -------------------------------------------------------------------------- */
/* テキスト+画像などの横並び。
   SP（768px以下）では縦積みになり「画像が上 → テキストが下」に並ぶ。
   ※ HTMLでは画像側（.media-row-media）を先に記述すること */
.media-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* PCで画像を右に置きたい場合（HTMLは画像が先のまま、SPでは画像が上になる） */
.media-row--reverse {
  flex-direction: row-reverse;
}

.media-row-media,
.media-row-body {
  flex: 1 1 0;
  min-width: 0;
}

/* テーブル/表の横スクロール。
   コンテンツ幅に無理に収めず、見やすい幅を保ったまま横スクロールさせる。
   使い方: <div class="table-wrap"><table>...</table></div>
   min-width はプロジェクトの表内容に合わせて調整してよい */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap > table {
  width: 100%;
  min-width: 600px;
}

/* --------------------------------------------------------------------------
   フォーム共通
   -------------------------------------------------------------------------- */
/* 同意文（プライバシーポリシー・利用規約等）内のリンク。
   デフォルトで下線を引き、ホバーで下線を消す。 */
.form-consent a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.form-consent a:hover {
  text-decoration: none;
  opacity: 1;
}