.delay-time01{
  animation-delay: 1s;
  }

.delay-time02{
  animation-delay: 1.2s;
  }
  
  .delay-time04{
  animation-delay: 1.4s;
  }
 

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

/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:.7s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(30px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
  animation-name:fadeDownAnime;
  animation-duration:0.7s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeDownAnime{
    from {
      opacity: 0;
    transform: translateY(-20px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }

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

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

@keyframes bgextendAnimeBase{
  from {
    opacity:1;
  }

  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;
    width: 100%;
    height: 100%;
    background-color: #ffffff;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

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