/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.recruitFadeTrigger1,
.recruitFadeTrigger2
{opacity: 0;}

/* 下からふわっと */
.fadeUp {
    animation: fadeUpAnime 0.7s both;
    opacity: 0;
}
@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左から */
.fadeLeft {
    animation: fadeLeftAnime 0.7s forwards;
    opacity: 0;
}
@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右から */
.fadeRight{
    animation:fadeRightAnime 0.7s forwards;
    opacity:0;
}
@keyframes fadeRightAnime{
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}