@charset "UTF-8";

/* fadeUp */

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

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


.fadeSlideRight{
    animation-name:fadeSlideRightAnime;
    animation-duration:0.6s;
    animation-fill-mode:forwards;
    opacity:0;
}
    
@keyframes fadeSlideRightAnime{
    from {
    opacity: 0;
    transform: translateX(100px);
    }

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

.fadeSlideLeft{
    animation-name:fadeSlideLeftAnime;
    animation-duration:0.6s;
    animation-fill-mode:forwards;
    opacity:0;
}
    
@keyframes fadeSlideLeftAnime{
    from {
    opacity: 0;
    transform: translateX(-100px);
    }

    to {
    opacity: 1;
    transform: translateX(0);
    }
}
    
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    
.fadeUpTrigger, 
.fadeSlideRightTrigger,
.fadeSlideLeftTrigger {
    opacity: 0;
}