@charset "utf-8";



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

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

@keyframes fadeInAnime {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* fadeUp */

.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 */

.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 */

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

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

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

/* fadeRight */

.fadeRight {
	animation-name: fadeRightAnime;
	animation-duration: 0.5s;
	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;
}

/*==================================================
ぱたっ
===================================*/


/* flipDown */
.flipDown {
	animation-name: flipDownAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes flipDownAnime {
	from {
		transform: perspective(2500px) rotateX(100deg);
		opacity: 0;
	}

	to {
		transform: perspective(2500px) rotateX(0);
		opacity: 1;
	}
}


/* flipLeft */
.flipLeft {
	animation-name: flipLeftAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	perspective-origin: left center;
	opacity: 0;
}

@keyframes flipLeftAnime {
	from {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
		opacity: 0;
	}

	to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
	}
}


/* flipLeftTop */
.flipLeftTop {
	animation-name: flipLeftTopAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes flipLeftTopAnime {
	from {
		transform: translate(-20px, 80px) rotate(-15deg);
		opacity: 0;
	}

	to {
		transform: translate(0, 0) rotate(0deg);
		opacity: 1;
	}
}

/* flipRight */
.flipRight {
	animation-name: flipRightAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	perspective-origin: right center;
	opacity: 0;
}

@keyframes flipRightAnime {
	from {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
		opacity: 0;
	}

	to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
	}
}

/* flipRightTop */
.flipRightTop {
	animation-name: flipRightTopAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes flipRightTopAnime {
	from {
		transform: translate(-20px, 80px) rotate(25deg);
		opacity: 0;
	}

	to {
		transform: translate(0, 1) rotate(0deg);
		opacity: 1;
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
	opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* rotateX */
.rotateX {
	animation-name: rotateXAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes rotateXAnime {
	from {
		transform: rotateX(0);
		opacity: 0;
	}

	to {
		transform: rotateX(-360deg);
		opacity: 1;
	}
}

/* rotateY */
.rotateY {
	animation-name: rotateYAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes rotateYAnime {
	from {
		transform: rotateY(0);
		opacity: 0;
	}

	to {
		transform: rotateY(-360deg);
		opacity: 1;
	}
}

/* rotateLeftZ */
.rotateLeftZ {
	animation-name: rotateLeftZAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes rotateLeftZAnime {
	from {
		transform: rotateZ(0);
		opacity: 0;
	}

	to {
		transform: rotateZ(-360deg);
		opacity: 1;
	}
}

/* rotateRightZ */
.rotateRightZ {
	animation-name: rotateRightZAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes rotateRightZAnime {
	from {
		transform: rotateZ(0);
		opacity: 0;
	}

	to {
		transform: rotateZ(360deg);
		opacity: 1;
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
	opacity: 0;
}

/*==================================================
ぶわっ、ぽんっ、どどんっ
===================================*/

/* zoomIn */
.zoomIn {
	animation-name: zoomInAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
	from {
		transform: scale(0.6);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* zoomOut */
.zoomOut {
	animation-name: zoomOutAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes zoomOutAnime {
	from {
		transform: scale(1.2);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.zoomInTrigger,
.zoomOutTrigger {
	opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* blur */
.blur {
	animation-name: blurAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes blurAnime {
	from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}

	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.blurTrigger {
	opacity: 0;
}

/*==================================================
にょろっ
===================================*/

/* smooth */
.smooth {
	animation-name: smoothAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	transform-origin: left;
	opacity: 0;
}

@keyframes smoothAnime {
	from {
		transform: translate3d(0, 100%, 0) skewY(12deg);
		opacity: 0;
	}

	to {
		transform: translate3d(0, 0, 0) skewY(0);
		opacity: 1;
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.smoothTrigger {
	opacity: 0;
}

/*==================================================
背景色が伸びて出現
===================================*/

.bgextend {
	animation-name: bgextendAnimeBase;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	position: relative;
	overflow: hidden;
	/*　はみ出た色要素を隠す　*/
	opacity: 0;
}

@keyframes bgextendAnimeBase {
	from {
		opacity: 0;
	}

	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: #000;
	/*伸びる背景色の設定*/
	top: 0;
	left: 0;
}

@keyframes 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);
	}
}

/*右から左*/
.bgRLextend::before {
	animation-name: bgRLextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	/*伸びる背景色の設定*/
	top: 0;
	right: 0;
}

@keyframes bgRLextendAnime {
	0% {
		transform-origin: right;
		transform: scaleX(0);
	}

	50% {
		transform-origin: right;
		transform: scaleX(1);
	}

	50.001% {
		transform-origin: left;
	}

	100% {
		transform-origin: left;
		transform: scaleX(0);
	}
}

/*下から上*/
.bgDUextend::before {
	animation-name: bgDUextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	/*伸びる背景色の設定*/
	top: 0;
	left: 0;
}

@keyframes bgDUextendAnime {
	0% {
		transform-origin: bottom;
		transform: scaleY(0);
	}

	50% {
		transform-origin: bottom;
		transform: scaleY(1);
	}

	50.001% {
		transform-origin: top;
	}

	100% {
		transform-origin: top;
		transform: scaleY(0);
	}
}

/*上から下*/
.bgUDextend::before {
	animation-name: bgUDextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	/*伸びる背景色の設定*/
	top: 0;
	left: 0;
}

@keyframes bgUDextendAnime {
	0% {
		transform-origin: top;
		transform: scaleY(0);
	}

	50% {
		transform-origin: top;
		transform: scaleY(1);
	}

	50.001% {
		transform-origin: bottom;
	}

	100% {
		transform-origin: bottom;
		transform: scaleY(0);
	}
}

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

/*==================================================
枠線が伸びて出現
===================================*/

/*枠線が伸びて出現*/

.lineTrigger {
	position: relative;
	/* 枠線が書かれる基点*/
	opacity: 0;
}

.lineTrigger.lineanime {
	animation-name: lineAnimeBase;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes lineAnimeBase {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after {
	position: absolute;
	content: '';
	width: 0;
	height: 1px;
	background: #333;
	/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after {
	position: absolute;
	content: '';
	width: 1px;
	height: 0;
	background: #333;
	/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
	top: 0;
	left: 0;
}

.lineTrigger.lineanime::before {
	animation: lineAnime .5s linear 0s forwards;
	/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before {
	top: 0;
	right: 0;
}

.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .5s linear .5s forwards;
	/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after {
	bottom: 0;
	right: 0;
}

.lineTrigger.lineanime::after {
	animation: lineAnime .5s linear 1s forwards;
	/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after {
	bottom: 0;
	left: 0;
}

.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .5s linear 1.5s forwards;
	/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

@keyframes lineAnime2 {
	0% {
		height: 0%;
	}

	100% {
		height: 100%;
	}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear {
	animation: lineInnerAnime .5s linear 1.5s forwards;
	/*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0;
	/*初期値を透過0にする*/
}

@keyframes lineInnerAnime {
	0% {
		opacity: 0;
	}

	100% {
		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;
  }
}

/*==================================================
上から落ちて潰れてバウンド
===================================*/
.poyonTrigger {
  opacity: 0;
}

.poyon {
  animation-name: poyon;
  animation-duration: 1.1s;
  animation-fill-mode: forwards;
}


@keyframes poyon {
  0% {
    opacity: 0;
    transform: scale(0.8, 1.4) translate(0%, -100%);
  }

  10% {
    opacity: 1;
    transform: scale(0.8, 1.4) translate(0%, -15%);
  }

  20% {
    transform: scale(1.4, 0.6) translate(0%, 30%);
  }

  30% {
    transform: scale(0.9, 1.1) translate(0%, -10%);
  }

  40% {
    transform: scale(0.95, 1.2) translate(0%, -30%);
  }

  50% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
  }

  60% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }

  70% {
    transform: scale(1.0, 1.0) translate(0%, 0%);
  }

  100% {
    transform: scale(1.0, 1.0) translate(0%, 0%);
    opacity: 1;
  }
}


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

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

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

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

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

.delay-time05 {
	animation-delay: 0.5s;
}

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

.delay-time15 {
	animation-delay: 1.5s;
}

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

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

.delay-time3 {
	animation-delay: 3s;
}

.delay-time35 {
	animation-delay: 3.5s;
}

.delay-time4 {
	animation-delay: 4s;
}

.delay-time45 {
	animation-delay: 4.5s;
}

.delay-time5 {
	animation-delay: 5s;
}

.delay-time55 {
	animation-delay: 5.5s;
}

.delay-time6 {
	animation-delay: 6s;
}

.delay-time65 {
	animation-delay: 6.5s;
}

.delay-time7 {
	animation-delay: 7s;
}

.delay-time75 {
	animation-delay: 7.5s;
}

.delay-time8 {
	animation-delay: 8s;
}

.delay-time_reset {
	animation-delay: inherit !important;
}


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

.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;
}