@charset "UTF-8";

/*==================================================
背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend{
animation-name:bgextendAnimeBase;
animation-duration:1s;
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;
opacity: 0;
}

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

/*左から右*/
.bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
top:20%;
width: 100%;
height: 66%;
background-color:#0061ab;/*伸びる背景色の設定*/
overflow: hidden;
}
@keyframes bgLRextendAnime{
0% {
transform-origin:left;
transform:scaleX(0);
}
50% {
transform-origin:left;
transform:scaleX(1);
}
50.001% {
transform-origin:right;
}
100% {
transform-origin:right;
transform:scaleX(0);
}
}

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