/****************:
    scroll magic
**********/

.animate-on-center {

}
/*最初は消えている状態opacity:0; ->表示opasity:1;*/
.animate-opacity {
  opacity: 0;
  -webkit-transition: opacity 0.8s ease-out;
  -moz-transition: opacity 0.8s ease-out;
  -o-transition: opacity 0.8s ease-out;
  transition: opacity 0.8s ease-out;
}
.animate-active {
    opacity: 1;
  }
/*zoom表示の指定*/
.animate-img-scale .animate-active {
    animation: img-zoomin 2s ease-out 0s 1 normal;
    -webkit-animation: img-zoomin 2s ease-out 0s 1 normal;
}

.animate-text-scale .animate-active {
    animation: text-zoomin 1s ease-out 0s 1 normal;
    -webkit-animation: text-zoomin 1s ease-out 0s 1 normal;
}

/*表示順*/
.animate-delay-0 {
  transition-delay: 0s;
}
.animate-delay-1 {
  transition-delay: 0.3s;
}
.animate-delay-2 {
  transition-delay: 0.6s;
}
.animate-delay-3 {
  transition-delay: 0.9s;
}
.animate-delay-4 {
  transition-delay: 1.2s;
}
.animate-delay-5 {
  transition-delay: 1.5s;
}
.animate-delay-6 {
  transition-delay: 1.8s;
}
.animate-delay-7 {
  transition-delay: 2.1s;
}
.animate-delay-8 {
  transition-delay: 2.4s;
}
.animate-delay-9 {
  transition-delay: 2.7s;
}


@keyframes img-zoomin {
  0% {transform: scale(1.2, 1.2);}
  100% {transform: none;}
}

@-webkit-keyframes img-zoomin {
  0% {transform: scale(1.2, 1.2);}
  100% {transform: none;}
}

@keyframes text-zoomin {
  0% {transform: scale(1.1, 1.1);}
  100% {transform: none;}
}

@-webkit-keyframes text-zoomin {
  0% {transform: scale(1.1, 1.1);}
  100% {transform: none;}
}

@media only screen and (max-width: 768px) {
.animate-delay-0 {
  transition-delay: 0s;
}
.animate-delay-1 {
  transition-delay: 0.1s;
}
.animate-delay-2 {
  transition-delay: 0.3s;
}
.animate-delay-3 {
  transition-delay: 0.5s;
}
.animate-delay-4 {
  transition-delay: 0.7s;
}
.animate-delay-5 {
  transition-delay: 0.9s;
}
.animate-delay-6 {
  transition-delay: 1.1s;
}
.animate-delay-7 {
  transition-delay: 1.3s;
}
.animate-delay-8 {
  transition-delay: 1.5s;
}
.animate-delay-9 {
  transition-delay: 1.7s;
}
}