@charset "UTF-8";

/* テキスト */
/* -------------------------------------------------- */

/*ランダム*/
.txtAnime1 {
	position: relative;
	transform: matrix(1, -1, -1, 2, 0, 1);
	transform-origin: left top 0px;
	opacity: 0;
	transition: all 1.5s ease-in-out 1s;
}

.txtAnime1.active {
	transform: matrix(1, 0, 0, 1, 0, 0);
	transform-origin: left top 0px;
	opacity: 1;
}

.txtAnime2 {
	position: relative;
	transform: matrix(1, -1, 1, 2, 0, 0);
	transform-origin: left top 0px;
	opacity: 0;
	transition: all 1.5s ease-in-out 1s;
}

.txtAnime2.active {
	transform: matrix(1, 0, 0, 1, 0, 0);
	transform-origin: left top 0px;
	opacity: 1;
}

.txtAnime3 {
	position: relative;
	transform: matrix(1, -1, 1, 0, 0, 0);
	transform-origin: left top 0px;
	opacity: 0;
	transition: all 1.5s ease-in-out 1s;
}

.txtAnime3.active {
	transform: matrix(1, 0, 0, 1, 0, 0);
	transform-origin: left top 0px;
	opacity: 1;
}


/*スライドタイトル*/
.slideTxt {
	display: block;
	overflow: hidden;
	opacity: 0;
	position: relative;
	z-index: 2;
	-webkit-transform: translate3d(0px, 100px, 0px);
	transform: translate3d(0px, 100px, 0px);
	-webkit-transition: opacity 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: opacity 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.slideTxt.active {
	opacity: 1;
	-webkit-transform: translate3d(0px, 0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	-webkit-transition: opacity 0.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 1s cubic-bezier(0.37, 0.16, 0.12, 1);
	transition: opacity 0.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 1s cubic-bezier(0.37, 0.16, 0.12, 1);
}

/* コンテンツ */
/* -------------------------------------------------- */
/*ななめからスライドイン*/
.boxAnime .inner {
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
	opacity: 0;
	will-change: transform;
	-webkit-transform: translate3d(0,200%,0) rotateX(-100deg) rotateY(50deg) scale(.5);
	transform: translate3d(0,200%,0) rotateX(-100deg) rotateY(50deg) scale(.5);
	transition: opacity 1000ms ease 0s, transform 1000ms cubic-bezier(0, 0.7, 0.29, 0.97) 0s;
}

.boxAnime .inner.active {
	opacity: 1;
	-webkit-transform: translateZ(0) rotateX(0) rotateY(0) scale(1);
	transform: translateZ(0) rotateX(0) rotateY(0) scale(1);
	transform-origin: 100% 100%;
}

/*スライドボックス*/
.slideBox {
	display: block;
	overflow: hidden;
	opacity: 0;
	position: relative;
	z-index: 2;
	-webkit-transform: translate3d(0px, 100px, 20px) scale3d(1.03, 1.03, 1.03);
	transform: translate3d(0px, 100px, 0px) scale3d(1.03, 1.03, 1.03);
	-webkit-transition: opacity 1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: opacity 1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.slideBox.active {
	opacity: 1;
	-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
	transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
	-webkit-transition: opacity 1s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 1.2s cubic-bezier(0.37, 0.16, 0.12, 1);
	transition: opacity 1s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 1.2s cubic-bezier(0.37, 0.16, 0.12, 1);
}

/* バウンドイン */
@keyframes bounceIn {

	0%,
	20%,
	40%,
	60%,
	80%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		-ms-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		-ms-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		-ms-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9);
	}

	60% {
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		-ms-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		-ms-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
}

.boundIn {
	opacity: 0;
}

.boundIn.active {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
	opacity: 1;
}


/* 縮小しながらフェードイン */
.smallfadeIn {
	opacity: 0;
	-webkit-transform: scale3d(1.2, 1.2, 1.2);
	-ms-transform: scale3d(1.2, 1.2, 1.2);
	transform: scale3d(1.2, 1.2, 1.2);
	transition: opacity 1000ms ease 0s, transform 1000ms cubic-bezier(0, 0.7, 0.29, 0.97) 0s;
}

.smallfadeIn.active {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	-ms-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

/* 白ベタスライドして表示*/
.slideView:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: #FFF;
	transition: all 0.7s cubic-bezier(.84,.25,.17,.89) 0s;
	z-index: 1000;
}

.slideView.active:before {
	width: 0%;
}