@charset "utf-8";

/*==========================================
[スクロールしたら背景色が伸びて出現（左から）]
===========================================*/
/* pagetitle
-------------------------------------------*/
/*全共通*/
.pagetitle_wrapp .bgextend{
	animation-name:pagetitle_bgextendAnimeBase;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes pagetitle_bgextendAnimeBase{
  from {
    opacity:0;
  }
  to {
    opacity:1;  
}
}

/*中の要素*/
.pagetitle_wrapp .bgappear{
	animation-name:pagetitle_bgextendAnimeSecond;
	animation-duration:1.0s;
	animation-delay:1.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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

/*左から右*/
.pagetitle_wrapp .bgLRextend::before{
	animation-name:pagetitle_bgLRextendAnime;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;    
    background-color: #94214d;/*伸びる背景色の設定*/
}
@keyframes pagetitle_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を指定　*/
.pagetitle_wrapp .bgappearTrigger,
.pagetitle_wrapp .bgLRextendTrigger{
    opacity: 0;
}



/*==========================================
[流れるテキスト]
===========================================*/
.read_inner h2,
.read-sub_wrapp h2{
	overflow: hidden;/*左右アニメーションで画面からはみ出る際に出る横スクロールバーを隠す*/
}

/*全共通*/
.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}





/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

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

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

/* 上から */
.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

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

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.9s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

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

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.9s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

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

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






/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}
.delay-time075{  
  animation-delay: 0.75s;
}
.delay-time1{  
  animation-delay: 1s;
}
.delay-time125{  
  animation-delay: 1.25s;
}
.delay-time15{  
  animation-delay: 1.5s;
}
.delay-time175{  
  animation-delay: 1.75s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time025{  
  animation-duration: 0.25s;
}

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}