@charset "UTF-8";

.bgextend{
	width: 100%;
	padding: 0px;
	box-sizing:border-box;
}

/*========= 背景色の動きのCSS ===============*/

/*背景色が伸びて出現 共通*/
.bgextend{
animation-name:bgextendAnimeBase;
animation-duration:1s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden;/*　はみ出た色要素を隠す　*/
opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:1;
  }

  to {
    opacity:1;  
}
}

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

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

/*--------- 左から --------*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:0.75s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	
	25% {
		transform-origin:left;
		transform:scaleX(0.95);
	}
	
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	
	50.001% {
		transform-origin:right;
	}
	
	75% {
		transform-origin:right;
		transform:scaleX(0.05);
	}
	
	
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*----------挙動がおかしい時に親要素へ追加----------*/

#main_v{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}