@charset "utf-8";

/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 500px);/*0, 150px*/
    transition : all 800ms;
}

.fadeinLarge {
    opacity : 0.1;
    transform : translate(0, 40px) scale(0.6, 0.6);/*0, 150px*/
    transition : all 500ms;
}


.fadeinZoom {
    opacity : 0;
    transform : translate(0, 0) scale(0.8, 0.8);
    transition : all 500ms;
}

.fadeinLeft {
    opacity : 0;
    transform : translate(-200px, 0);
    transition : all 500ms;
}

.fadeinRight {
    opacity : 0;
    transform : translate(80px, 0);
    transition : all 500ms;
}
 
/* 画面内に入った状態 */
.fadein.scrollin,
.fadeinLarge.scrollin,
.fadeinZoom.scrollin,
.fadeinLeft.scrollin ,
.fadeinRight.scrollin  {
    opacity : 1;
    transform : translate(0, 0);
}


@media screen and (max-width: 767.98px){ /*768-992*/



/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 150px);/*0, 150px*/
    transition : all 500ms;
}

.fadeinLarge {
    opacity : 1;
    transform : translate(0, 0) scale(1, 1);/
    transition : all 500ms;
}


.fadeinZoom {
    opacity : 0.3;
    transform : translate(0, 0) scale(0.65, 0.65);
    transition : all 200ms;
}

.fadeinLeft {
    opacity : 1;
    transform : translate(0, 0);
    transition : all 500ms;
}

.fadeinRight {
    opacity : 1;
    transform : translate(0, 0);
    transition : all 500ms;
}

}