.fadein {
    opacity : 0;
    transform : translate(0, 0);
    transition : all 1000ms;
}
.fadeup {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 600ms;
}
.fadedown {
    opacity : 0;
    transform : translate(0, -50px);
    transition : all 600ms;
}
.fadeleft {
    opacity : 0;
    transform : translate(50px, 0);
    transition : all 600ms;
}
.faderight {
    opacity : 0;
    transform : translate(-150px, 0);
    transition : all 600ms;
}
.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}
.fade-first {
    -moz-transition-delay:100ms;
    -webkit-transition-delay:100ms;
    -o-transition-delay:100ms;
    -ms-transition-delay:100ms;
}
/* 2つ目の要素にdelayをかける */
.fade-second {
    -moz-transition-delay:300ms;
    -webkit-transition-delay:300ms;
    -o-transition-delay:300ms;
    -ms-transition-delay:300ms;
}
/* 3つ目の要素にdelayをかける */
.fade-third {
    -moz-transition-delay:500ms;
    -webkit-transition-delay:500ms;
    -o-transition-delay:500ms;
    -ms-transition-delay:500ms;
}
/* 4つ目の要素にdelayをかける */
.fade-fourth {
    -moz-transition-delay:700ms;
    -webkit-transition-delay:700ms;
    -o-transition-delay:700ms;
    -ms-transition-delay:700ms;
}

@media screen and (max-width: 567px) {
/*　画面サイズが567px以下の場合、ここのスタイルを読み込む　*/
    
    .fadeup,
    .faderight,
    .fadedown,
    .fadeleft,
    .fadein
    {
        opacity : 1;
        transform : translate(0px, 0);
        transition : all 0ms;
    }
    
    .fade-first {
        -moz-transition-delay:0ms;
        -webkit-transition-delay:0ms;
        -o-transition-delay:0ms;
        -ms-transition-delay:0ms;
    }
    /* 2つ目の要素にdelayをかける */
    .fade-second {
        -moz-transition-delay:0ms;
        -webkit-transition-delay:0ms;
        -o-transition-delay:0ms;
        -ms-transition-delay:0ms;
    }
    /* 3つ目の要素にdelayをかける */
    .fade-third {
        -moz-transition-delay:0ms;
        -webkit-transition-delay:0ms;
        -o-transition-delay:0ms;
        -ms-transition-delay:0ms;
    }
    /* 4つ目の要素にdelayをかける */
    .fade-fourth {
        -moz-transition-delay:0ms;
        -webkit-transition-delay:0ms;
        -o-transition-delay:0ms;
        -ms-transition-delay:0ms;
    }   
    
}