/* ===================================
   フェードインアニメーション
   =================================== */

/* 基本設定 */
.fadein {
  opacity: 0;
  transition: all 1s ease;
}

/* アニメーション実行時のクラス */
.fadein--active {
  opacity: 1;
}

/* ===================================
   上からフェードイン
   =================================== */
.fadein--top {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease;
}

.fadein--top.fadein--active {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================
   右からフェードイン
   =================================== */
.fadein--right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 1s ease;
}

.fadein--right.fadein--active {
  opacity: 1;
  transform: translateX(0);
}

/* ===================================
   左からフェードイン
   =================================== */
.fadein--left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 1s ease;
}

.fadein--left.fadein--active {
  opacity: 1;
  transform: translateX(0);
}

/* ===================================
   下からフェードイン
   =================================== */
.fadein--bottom {
  opacity: 0;
  transform: translateY(-50px);
  transition: all 1s ease;
}

.fadein--bottom.fadein--active {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================
   その場でフェードイン
   =================================== */
.fadein--center {
  opacity: 0;
  transition: opacity 1s ease;
}

.fadein--center.fadein--active {
  opacity: 1;
}

/* ===================================
   横並び順次フェードイン
   =================================== */

/* 個別アイテムの基本設定 */
.fadein--sequence-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease;
  flex: 1;
}

/* 順次アニメーション実行時のクラス */
.fadein--sequence-item.fadein--active {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延時間の設定 */
.fadein--sequence-item:nth-child(1) {
  transition-delay: 0s;
}

.fadein--sequence-item:nth-child(2) {
  transition-delay: 0.3s;
}

.fadein--sequence-item:nth-child(3) {
  transition-delay: 0.6s;
}

.fadein--sequence-item:nth-child(4) {
  transition-delay: 0.9s;
}

.fadein--sequence-item:nth-child(5) {
  transition-delay: 1.2s;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {

  .fadein--sequence-item {
    min-width: 100%;
    max-width: 100%;
  }
  /* 遅延時間の設定 */
  .fadein--sequence-item:nth-child(1),
  .fadein--sequence-item:nth-child(2),
  .fadein--sequence-item:nth-child(3),
  .fadein--sequence-item:nth-child(4),
  .fadein--sequence-item:nth-child(5) {
    transition-delay: 0s;
  }
}