.top-image {
  width: 16.66%;
  transform: rotateY(90deg);
  animation: spin .4s ease-out forwards;
}

@keyframes spin {
  0%   { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); } /* 最後は正面に戻る */
}

.top-image:nth-child(1) { animation-delay: 0s;   }
.top-image:nth-child(2) { animation-delay: 0.1s; }
.top-image:nth-child(3) { animation-delay: 0.2s; }
.top-image:nth-child(4) { animation-delay: 0.3s; }
.top-image:nth-child(5) { animation-delay: 0.4s; }
.top-image:nth-child(6) { animation-delay: 0.5s; }
.top-image:nth-child(7) { animation-delay: 0.6s; }
.top-image:nth-child(8) { animation-delay: 0.7s; }
.top-image:nth-child(9) { animation-delay: 0.8s; }
.top-image:nth-child(10) { animation-delay: 0.9s; }
.top-image:nth-child(11) { animation-delay: 1.0s; }
.top-image:nth-child(12) { animation-delay: 1.1s; }

@keyframes zoomin {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1.0);
        opacity: 1;
    }
}

.zoom-in {
    animation-name: zoomin;
    animation-duration: .4s;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes zoomin-anime {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1.0);
        opacity: 1;
    }
}

.anime-zoom-in {
    animation-name: zoomin-anime;
    animation-duration: .4s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadein-up {

    0% {
        -webkit-transform: translateY(80px);
        transform: translateY(80px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

}

.anime-fadein-up {
    animation-name: fadein-up;
    animation-duration: .4s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadein-down {

    0% {
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

}

.anime-fadein-down {
    animation-name: fadein-down;
    animation-duration: .4s;
    animation-delay: .6s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadein-left {

    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

}

.anime-fadein-left {
    animation-name: fadein-left;
    animation-duration: .4s;
    animation-delay: .8s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadein-right {

    0% {
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

}

.anime-fadein-right {
    animation-name: fadein-right;
    animation-duration: .3s;
    animation-delay: .8s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    opacity: 0;
    transform: rotate(-5deg);
}

@keyframes fadein-anime{

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1
    }

}

.anime-fadein-in {
    animation-name: fadein-anime;
    animation-duration: .5s;
    animation-delay: 1.4s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.rotation_right {
    animation: 6s linear infinite rotation_right;
}

@keyframes rotation_right {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rotation_left {
    animation: 6s linear infinite rotation_left;
}

@keyframes rotation_left {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.anime-up-down {
    animation: 1s ease infinite up-down;
}

@keyframes up-down {

    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

}