@charset "utf-8";

/*-------------------
タテフェードイン
-------------------*/

/* 画面外にいる状態 */
.fadeUp {
    opacity : 0;
    transform : translate(0, 30px);
    transition : all 800ms;
    }
 
/* 画面内に入った状態 */
.fadeUp.appear {
    opacity : 1;
    transform : translate(0, 0);
    }

/*-------------------
フェードイン
-------------------*/

/* 画面外にいる状態 */
.fadeIn{
    opacity : 0;
    transition : all 800ms;
    }
 
/* 画面内に入った状態 */
.fadeIn.appear {
    opacity : 1;
    }


-webkit-@keyframes scroll {
    0% {
        -webkit-transform : translate(0, 0);
        transform : translate(0, 0);
        opacity: 0;
    }

    20% {
        -webkit-transform : translate(0, 0);
        transform : translate(0, 0);
        opacity: 1;
    }

    80% {
        -webkit-transform : translate(0, 20%);
        transform : translate(0, 20%);
        opacity: 1;
    }

    100% {
        -webkit-transform : translate(0, 20%);
        transform : translate(0, 20%);
        opacity: 0;
    }
}
@keyframes scroll {
    0% {
        -webkit-transform : translate(0, 0);
        transform : translate(0, 0);
        opacity: 0;
    }

    20% {
        -webkit-transform : translate(0, 0);
        transform : translate(0, 0);
        opacity: 1;
    }

    80% {
        -webkit-transform : translate(0, 20%);
        transform : translate(0, 20%);
        opacity: 1;
    }

    100% {
        -webkit-transform : translate(0, 20%);
        transform : translate(0, 20%);
        opacity: 0;
    }
}


-webkit-@keyframes arrow {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    60% {
        -webkit-transform: translate3d(-50%, 100px, 0);
        transform: translate3d(-50%, 100px, 0);
    }

    100% {
        -webkit-transform: translate3d(-50%, 200px, 0);
        transform: translate3d(-50%, 200px, 0);
    }
}
@keyframes arrow {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    60% {
        -webkit-transform: translate3d(-50%, 100px, 0);
        transform: translate3d(-50%, 100px, 0);
    }

    100% {
        -webkit-transform: translate3d(-50%, 200px, 0);
        transform: translate3d(-50%, 200px, 0);
    }
}


-webkit-@keyframes pageTop {
    0%   { bottom: -100%; }
    10%   { bottom: -100%; }
    100% { bottom: 100%; }
}
@keyframes pageTop {
    0%   { bottom: -100%; }
    10%   { bottom: -100%; }
    100% { bottom: 100%; }
}