@charset "utf-8";
/*
Theme Name: トップページのアニメーション用
Description: 
*/

/*左から右*/
.slideIn{
	animation: slideIn 1s ease .5s 1 normal backwards;
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*右から左*/
.slideIn2{animation: slideIn2 1s ease .5s 1 normal backwards;}
@keyframes slideIn2 {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*上から下*/
.slideUp{animation: slideUp 1s ease forwards;opacity: 0;}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*下から上*/
.slideDown{animation: slideDown 1s ease forwards;opacity: 0;}
@keyframes slideDown{
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.anime_up{
  opacity: 0;
}

.slideUp{
  animation: slideUp2 .8s ease forwards;
}

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


  .slideUp.anime01{animation-delay: .1s;}
  .slideUp.anime02{animation-delay: .2s;}
  .slideUp.anime03{animation-delay: .3s;}
  .slideUp.anime04{animation-delay: .4s;}
	.slideUp.anime05{animation-delay: .5s;}
  .slideUp.anime06{animation-delay: .6s;}
  .slideUp.anime07{animation-delay: .7s;}
  .slideUp.anime08{animation-delay: .8s;}
@media screen and (min-width: 481px){
}