/**
 * アニメーション
 */

/* 初期化 */
[data-animate] {
    visibility: hidden;
}

/* リスト */
@media screen and (min-width:768px) {
    [data-animate-list][data-animate-col="2"] [data-animate]:nth-child(2n) { animation-delay: .3s; }
    [data-animate-list][data-animate-col="3"] [data-animate]:nth-child(3n-1) { animation-delay: .3s; }
    [data-animate-list][data-animate-col="3"] [data-animate]:nth-child(3n) { animation-delay: .6s; }
    [data-animate-list][data-animate-col="4"] [data-animate]:nth-child(4n-2) { animation-delay: .3s; }
    [data-animate-list][data-animate-col="4"] [data-animate]:nth-child(4n-1) { animation-delay: .6s; }
    [data-animate-list][data-animate-col="4"] [data-animate]:nth-child(4n) { animation-delay: .9s; }
    [data-animate-list][data-animate-col="5"] [data-animate]:nth-child(5n-3) { animation-delay: .3s; }
    [data-animate-list][data-animate-col="5"] [data-animate]:nth-child(5n-2) { animation-delay: .6s; }
    [data-animate-list][data-animate-col="5"] [data-animate]:nth-child(5n-1) { animation-delay: .9s; }
    [data-animate-list][data-animate-col="5"] [data-animate]:nth-child(5n) { animation-delay: 1.2s; }
}


/* fadeIn */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.animate__fadeIn {
    animation-duration: 1s;
    animation-name: fadeIn;
    animation-fill-mode: both;
}

/* fadeInUp */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(30px)
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0)
    }
}

.animate__fadeInUp {
    animation-duration: 1s;
    animation-name: fadeInUp;
    animation-fill-mode: both;
}

/* fadeInLeft */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(30px) translateY(0)
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0)
    }
}

.animate__fadeInLeft {
    animation-duration: 1s;
    animation-name: fadeInLeft;
    animation-fill-mode: both;
}

/* fadeInRight */
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-30px) translateY(0)
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0)
    }
}

.animate__fadeInRight {
    animation-duration: 1s;
    animation-name: fadeInRight;
    animation-fill-mode: both;
}

/* rotateInUp */
@keyframes rotateInUp {
    0% {
        opacity: 0;
        transform: translate(0,150px) rotate(-15deg);
        transform-origin: 100% 0;
        
    }
    100% {
        opacity: 1;
        transform: translate(0,0) rotate(0);
        
    }
}

.animate__rotateInUp {
    animation-duration: 1s;
    animation-name: rotateInUp;
    animation-fill-mode: both;
}

/* slideInDown */
@keyframes slideInDown {
    0% {
        transform: translateX(0) translateY(-100vh)
    }
    100% {
        transform: translateX(0) translateY(0)
    }
}

.animate__slideInDown {
    animation-duration: 1s;
    animation-name: slideInDown;
    animation-fill-mode: both;
}

/* slideInUp */
@keyframes slideInUp {
    0% {
        transform: translateX(0) translateY(100vh)
    }
    100% {
        transform: translateX(0) translateY(0)
    }
}

.animate__slideInUp {
    animation-duration: 1s;
    animation-name: slideInUp;
    animation-fill-mode: both;
}

/* slideInLeft */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100vw) translateY(0)
    }
    100% {
        transform: translateX(0) translateY(0)
    }
}

.animate__slideInLeft {
    animation-duration: 1s;
    animation-name: slideInLeft;
    animation-fill-mode: both;
}

/* slideInRight */
@keyframes slideInRight {
    0% {
        transform: translateX(100vw) translateY(0)
    }
    100% {
        transform: translateX(0) translateY(0)
    }
}

.animate__slideInRight {
    animation-duration: 1s;
    animation-name: slideInRight;
    animation-fill-mode: both;
}

.animate__textSlideOpen {
    animation-duration: 1s;
    animation-name: textSlideOpen;
    animation-fill-mode: both;
}

/* textBlur */
@keyframes textBlur {
    0% {
        filter: blur(3rem);
        opacity: 0;
    }
    15% {
        filter: blur(2.5rem);
    }
    80%{

        opacity: .5;
    }
    100% {
        filter: blur(0);
        opacity: 1;
    }
}

.animate__textBlur {
    animation-duration: 1s;
    animation-name: textBlur;
    animation-fill-mode: both;
}

/* textBlurBlack */
@keyframes textBlurBlack {
    0% {
        text-shadow: 0 0 100px #000;
        opacity: 0;
    }
    15% {
        text-shadow: 0 0 90px #000;
    }
    100% {
        text-shadow: 0 0 0px #000;
        opacity: 1;
    }
}

.animate__textBlurBlack {
    color: transparent;
    animation-duration: 1s;
    animation-name: textBlurBlack;
    animation-fill-mode: both;
}

/* textBlurWhite */
@keyframes textBlurWhite {
    0% {
        text-shadow: 0 0 100px #fff;
        opacity: 0;
    }
    15% {
        text-shadow: 0 0 90px #fff;
    }
    100% {
        text-shadow: 0 0 0px #fff;
        opacity: 1;
    }
}

.animate__textBlurWhite {
    color: transparent;
    animation-duration: 1s;
    animation-name: textBlurWhite;
    animation-fill-mode: both;
}

/* textSlideOpen */
@keyframes textSlideOpen {
    0% {
        transform: translate(-100%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.animate__textSlideOpen {
    overflow: hidden;
    animation-duration: 2s;
    animation-name: textSlideOpen;
    animation-fill-mode: both;
}

@keyframes textSlideOpenS {
    0% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.animate__textSlideOpen span{
    display: block;
    animation-duration: 2s;
    animation-name: textSlideOpenS;
    animation-fill-mode: both;
}


/* textSwingOpen */
@keyframes textSwingOpen {
    0% {
        transform: scaleX(0);
        transform-origin: 0 0;
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.animate__textSwingOpen {
    animation-duration: 1s;
    animation-name: textSwingOpen;
    animation-fill-mode: both;
}

/* textRiseOpen */
@keyframes textRiseOpen {
    0% {
        transform: scaleY(0);
        transform-origin: 0 100%;
        opacity: 0;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.animate__textRiseOpen {
    animation-duration: 1s;
    animation-name: textRiseOpen;
    animation-fill-mode: both;
}

/* textZoomOpen */
@keyframes textZoomOpen {
    0% {
        transform: scale(0) translateX(-50%);
        transform-origin: 0 0;
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate__textZoomOpen {
    animation-duration: 1s;
    animation-name: textZoomOpen;
    animation-fill-mode: both;
}

/* textAddLine */
@keyframes textAddLine {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.animate__textAddLine {
    position: relative;
    display: inline-block;
}

.animate__textAddLine:after {
    position: absolute;
    content: '';
    left: 0;
    bottom: -10px;
    height: 8px;
    background: #aaa;
    animation-duration: 1s;
    animation-name: textAddLine;
    animation-fill-mode: both;
}

/* text */
@keyframes textKnock {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(10px);
    }
    30% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}

.animate__textKnock {
    animation-duration: 1s;
    animation-name: textKnock;
    animation-fill-mode: both;
}