@charset "UTF-8";

/* fadeUp アニメーション */
.fadeUp {
  opacity: 0;
}
.fadeUp.active {
  animation: fadeUpAnime 0.7s forwards;
}

/* 個別設定 */
.how-list li:nth-child(1) {
  animation-delay: 1.0s;
}
.how-list li:nth-child(2) {
  animation-delay: 1.6s;
}
.how-list li:nth-child(3) {
  animation-delay: 1.3s;
}
.how-list li:nth-child(1) .how-list-title {
  animation-delay: 1.2s;
}
.how-list li:nth-child(2) .how-list-title {
  animation-delay: 1.8s;
}
.how-list li:nth-child(3) .how-list-title {
  animation-delay: 1.5s;
}

.know-list li:nth-child(1) {
  animation-delay: 0.2s;
}
.know-list li:nth-child(2) {
  animation-delay: 0.4s;
}
.know-list li:nth-child(3) {
  animation-delay: 0.6s;
}
.know-list li:nth-child(4) {
  animation-delay: 0.8s;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 1200px) {
  .how-list li:nth-child(1) {
    animation-delay: 0s;
  }
  .how-list li:nth-child(2) {
    animation-delay: 0s;
  }
  .how-list li:nth-child(3) {
    animation-delay: 0s;
  }
  .how-list li:nth-child(1) .how-list-title {
    animation-delay: 0.2s;
  }
  .how-list li:nth-child(2) .how-list-title {
    animation-delay: 0.2s;
  }
  .how-list li:nth-child(3) .how-list-title {
    animation-delay: 0.2s;
  }
}
@media screen and (max-width: 768px) {
  .know-list li:nth-child(1) {
    animation-delay: 0s;
  }
  .know-list li:nth-child(2) {
    animation-delay: 0s;
  }
  .know-list li:nth-child(3) {
    animation-delay: 0s;
  }
  .know-list li:nth-child(4) {
    animation-delay: 0s;
  }
}