@charset "utf-8";
/* CSS Document */

/*アニメーションを遅らせる*/
.delay-time01 { animation-delay: 0.1s; }
.delay-time02 { animation-delay: 0.2s; }
.delay-time03 { animation-delay: 0.3s; }
.delay-time04 { animation-delay: 0.4s; }
.delay-time05 { animation-delay: 0.5s; }
.delay-time06 { animation-delay: 0.6s; }

/*delay*/
.delay01 { transition-delay:1s; }
.delay02 { transition-delay:1.1s; }
.delay03 { transition-delay:1.2s; }
.delay04 { transition-delay:1.3s; }
.delay05 { transition-delay:1.4s; }
.delay06 { transition-delay:1.5s; }

/* 中心から広がるように表示 */
.zoomInTrigger { opacity: 0; }
.zoomIn {
    animation-name: zoomInAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
	animation-timing-function: ease;
}
@keyframes zoomInAnime {
	0% {
		transform: scale(0.6);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.scrl-zoomIn { opacity: 0; }
.scrl-zoomIn.is-show {
    animation-name: zoomInAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
	animation-timing-function: ease;
}
@keyframes zoomInAnime {
	0% {
		transform: scale(0.6);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* テキスト　左から流れるように表示 */
.slide-in { overflow: hidden; display: inline-block; }
.slide-in_inner { display: inline-block; }

/*左右のアニメーション*/
.leftAnime{ opacity: 0;/*事前に透過0にして消しておく*/ }
.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	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:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

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

/*ふわっと表示*/
.fadeup {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1.0s,transform 1.0s;
}
.fadeup.is-show {
    opacity: 1;
    transform: translateY(0);
}

.fadeup02 {
	opacity: 0;
	animation-name:fadeup02;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
}
@keyframes fadeup02 {
  from {
	transform: translateY(100px); /*要素を左の枠外に移動*/
	opacity: 0;
  }

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