@charset "utf-8";
/* CSS Document */


/* アニメーション設定 */
.scr-target {
    /* アニメーション開始から終了までの所要時間 */
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    /* アニメーションが開始するまでの遅延時間 */
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    /* アニメーションのループ回数 - infiniteで無限ループ */
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    /* キーフレームアニメーションで指定したプロパティをアニメーション開始前、終了後に適用するかどうか */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.scr-target[class*='fadeIn'],
.scr-target[class*='zoom'] {
    opacity: 0;
}

/* フェードイン */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
.anime__fadeIn.is-active {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

/* フェードイン(上から) */
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.anime__fadeInDown.is-active {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

/* フェードイン(下から) */
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.anime__fadeInUp.is-active {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/* フェードイン(左から) */
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.anime__fadeInLeft.is-active {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

/* フェードイン(右から) */
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInRight {
	

    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.anime__fadeInRight.is-active {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
	
	
	animation-delay: 0.6s, 180ms;
}

/* ズームイン */
@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    100% {
        opacity: 1;
    }
}
@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    100% {
        opacity: 1;
    }
}
.anime__zoomIn.is-active {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

/* ズームアウト */
@-webkit-keyframes zoomOut {
    from {
        opacity: 0;
        -webkit-transform: scale3d(1.6, 1.6, 1.6);
        transform: scale3d(1.6, 1.6, 1.6);
    }
    100% {
        opacity: 1;
    }
}
@keyframes zoomOut {
    from {
        opacity: 0;
        -webkit-transform: scale3d(1.6, 1.6, 1.6);
        transform: scale3d(1.6, 1.6, 1.6);
    }
    100% {
        opacity: 1;
    }
}
.anime__zoomOut.is-active {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}