/* ************************************
　KV画像のフェードイン
*************************************** */
.bgextend{
    animation-name:bgextendAnimeBase;
    animation-duration:1s;
    animation-fill-mode:forwards;
    -webkit-animation-name:bgextendAnimeBase;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
    position: relative;
    overflow: hidden;
    opacity:0;
}
@keyframes bgextendAnimeBase{
    from {
        opacity:0;
    }
    to {
        opacity:1;  
    }
}
/*中の要素*/
.bgappear{
    animation-name:bgextendAnimeSecond;
    animation-duration:1s;
    animation-delay: 0.6s;
    animation-fill-mode:forwards;
    -webkit-animation-name:bgextendAnimeSecond;
    -webkit-animation-duration:1s;
    -webkit-animation-delay: 0.6s;
    -webkit-animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes bgextendAnimeSecond{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
}
/*上から下*/
.bgUDextend::before{
    animation-name:bgUDextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    -webkit-animation-name:bgUDextendAnime;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #203864
}
@keyframes bgUDextendAnime{
    0% {
        transform-origin:top;
        transform:scaleY(0);
        -webkit-transform-origin:top;
        -webkit-transform:scaleY(0);
    }
    50% {
        transform-origin:top;
        transform:scaleY(1);
        -webkit-transform-origin:top;
        -webkit-transform:scaleY(1);
    }
    50.001% {
        transform-origin:bottom;
        -webkit-transform-origin:bottom;
    }
    100% {
        transform-origin:bottom;
        transform:scaleY(0);
        -webkit-transform-origin:bottom;
        -webkit-transform:scaleY(0);
    }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger{
    opacity: 0;
}

/* ************************************
　スクロールしたら要素をフェードイン
*************************************** */
.jsFade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}