/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 22 2026 | 02:44:55 */
/* ==========================================================================
   Animation Components (Utility)
   ========================================================================== */
/*
  使い方：
  フェードインさせたい要素に「u-fade-in」クラスを付けるだけ。
  順番に出したい場合は「u-delay-100」などを併用してください。
*/
.u-fade-in {
  opacity: 0;
  /* CSS変数を使って、要素ごとの個別のtransformと衝突しないようにします */
  transform: translateY(var(--fade-translate, 30px));
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.u-fade-in.is-visible {
  opacity: 1;
  transform: translateY(var(--fade-target, 0));
}

/* ディレイ（遅延）用のユーティリティクラス */
.u-delay-100 { transition-delay: 0.1s; }
.u-delay-200 { transition-delay: 0.2s; }
.u-delay-300 { transition-delay: 0.3s; }
.u-delay-400 { transition-delay: 0.4s; }
.u-delay-500 { transition-delay: 0.5s; }
.u-delay-600 { transition-delay: 0.6s; }

/* ユーザーがOS設定でアニメーションを減らしている場合の配慮（アクセシビリティ対応） */
@media (prefers-reduced-motion: reduce) {
  .u-fade-in {
    transition: none;
    opacity: 1;
    transform: translateY(var(--fade-target, 0));
  }
}