/*全共通*/

.bgextend_title{
	animation-name:bgextendAnimeBaseTitle;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
	height: 100%;
  display: inline-block;
}

@keyframes bgextendAnimeBaseTitle{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

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

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

/*左から右*/
.bgLRextend_title::before{
	animation-name:bgLRextendAnimeTitle;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0f345b;/*伸びる背景色の設定*/
    left: 0;
}
@keyframes bgLRextendAnimeTitle{
	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_title,
.bgLRextendTrigger_title{
    opacity: 0;
}