:root {
    --animate-delay: 0.5s;
 }
/* fadeIn */
.fadeIn{
    animation-name: fadeInAnime;
    animation-duration:3.5s;
    animation-fill-mode:forwards;
    opacity:0;
}
    
@keyframes fadeInAnime{
    from {
    opacity: 0;
    }

    to {
    opacity: 1;
    }
}
/* fadeUp */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
    
@keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(50px);
    }

    to {
    opacity: 1;
    transform: translateY(0);
    }
}

/* fadeLeft */

.fadeLeft{
    animation-name: fadeLeftAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
        
    @keyframes fadeLeftAnime{
        from {
        opacity: 0;
        transform: translateX(-50px);
        }
    
        to {
        opacity: 1;
        transform: translateX(0);
        }
}

/* fadeRight */

.fadeRight{
    animation-name: fadeRightAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
        
    @keyframes fadeRightAnime{
        from {
        opacity: 0;
        transform: translateX(50px);
        }
    
        to {
        opacity: 1;
        transform: translateX(0);
        }
}

/* fadeDown */
    
.fadeDown{
animation-name: fadeDownAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
    from {
    opacity: 0;
    transform: translateY(-50px);
    }

    to {
    opacity: 1;
    transform: translateY(0);
    }
}

.blur {
    animation-name: blurAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes blurAnime{
    from {
    filter: blur(10px);
    transform: scale(1.02);
        opacity: 0;
    }

    to {
    filter: blur(0);
    transform: scale(1);
        opacity: 1;
    }
}

    
/* flipLeftTop */
.flipLeftTop{
    animation-name: flipLeftTopAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes flipLeftTopAnime{
    from {
    transform: translate(-20px,80px) rotate(-15deg);
        opacity: 0;
    }

    to {
    transform: translate(0,0) rotate(0deg);
    opacity: 1;
    }
}

/* flipRightTop */
.flipRightTop{
    animation-name: flipRightTopAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes flipRightTopAnime{
    from {
    transform: translate(20px,80px) rotate(-15deg);
        opacity: 0;
    }

    to {
    transform: translate(0,0) rotate(0deg);
    opacity: 1;
    }
}
    

    
/* zoomIn */
.zoomIn{
    animation-name: zoomInAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
    from {
    transform: scale(0.6);
    opacity: 0;
    }

    to {
    transform: scale(1);
    opacity: 1;
    }
}
    
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomInTrigger,
.flipLeftTopTrigger,
.flipRightTopTrigger,
.fadeInTrigger,
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.fadeDownTrigger,
.blurTrigger{
    opacity: 0;
}
    
    
.slide-in {
    overflow: hidden;
    transform: translate(-100%, 0%) matrix(1, 0, 0, 1, 0, 0);
    display: inline-block;
}

.slide-in_inner {
    display: inline-block;
    transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);
        
}

.slideAnimeLeftRight {
    animation-name: slideText-100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;

}

@keyframes slideText-100 {
    from {
    transform: translateX(-100%);
    }

    to {
    transform: translateX(0);
    }
}

.slideAnimeRightLeft {
    animation-name: slideText100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
}

@keyframes slideText100 {
    from {
    transform: translateX(100%);
    }

    to {
    transform: translateX(0);
    }
}