@charset "UTF-8";
/*anim1（fadeInDown）*/
.anim1 {
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/*anim2（ColorChange10秒間で変化）*/
.anim2 {
	animation: anim2 5s infinite;
}
@keyframes anim2 {
  0% { color: #e74c3c; }
  20% { color: #f1c40f; }
  40% { color: #1abc9c; }
  60% { color: #3498db; }
  80% { color: #9b59b6; }
  100% { color: #e74c3c; }
}



/*anim3（点滅パターン）*/
.anim3{
  animation: flash 2s linear infinite;
}

@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}


/*anim4（右から左へスライドしながらフェードイン）*/
.anim4 {
  padding: 0px;
  animation: fadeIn 5s ease 1s 1 normal backwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*anim5（左から右へスライドしながらフェードイン）*/
.anim5 {
  padding: 0px;
  animation: fadeIn 5s ease 1s 1 normal backwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}