@charset "UTF-8";


/*中の要素*/
.bgappear{
animation-name:bgextendAnimeSecond;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes bgextendAnimeSecond{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*下から上*/
.bgDUextend::before{
animation-name:bgDUextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
0% {
transform-origin:bottom;
transform:scaleY(0);
}
50% {
transform-origin:bottom;
transform:scaleY(1);
}
50.001% {
transform-origin:top;
}
100% {
transform-origin:top;
transform:scaleY(0);
}
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgDUextendTrigger{
opacity: 0;
}