@charset "utf-8";
:root {
	--trance_move_time: 2s;
	--trance_fade_start: 1s;
	--trance_fade_wait: 0.2s;
}
/* iv_***がクラス名、***styleが実行するアクション名 */t

/* up,down,left,right,transform1,rollの共通設定 */
.iv_up,
.iv_down,
.iv_left,
.iv_right,
.iv_expand,
.iv_roll {
	position: relative;
	opacity: 0;
}
.upstyle,
.downstyle,
.leftstyle,
.rightstyle,
.expandstyle,
.rollstyle {
	opacity: 1;
	transition: .8s .4s;
}

/* 下から上にフェードイン */
.iv_up {
	opacity: 0;
	transform: translateY(50%);
	/* transition: 2s; */
	transition: var(--trance_move_time);
	/* bottom: -100px; */
}
.upstyle {
	opacity: 1;
	transform: translateY(0);
	/* bottom: 0px; */
}

/* 上から下にフェードイン */
.iv_down {
	opacity: 0;
	transform: translateY(-50%);
	/* transition: 2s; */
	transition: var(--trance_move_time);
	/* top: -100px; */
}
.downstyle {
	opacity: 1;
	transform: translateY(0);
	/* top: 0px; */
}

/* 左からフェードイン */
.iv_left {
	opacity: 0;
	transform: translateX(-50%);
	/* transition: 2s; */
	transition: var(--trance_move_time);
	/* left: -200px; */
}
.leftstyle {
	opacity: 1;
	transform: translateX(0);
	/* left: 0px; */
}

/* 右からフェードイン */
/* @memo 移動した分の余白ができる＞opacityが効いてない？ */
.iv_right {
	opacity: 0;
	transform: translateX(50%);
	/* transition: 2s; */
	transition: var(--trance_move_time);
	/* right: -200px; */
}
.rightstyle {
	opacity: 1;
	transform: translateX(0);
	/* right: 0px; */
}

/* 中央から広がる */
.iv_expand {
	transform: scaleX(0);
	/*幅を0%でスタート*/
}
.expandstyle {
	transform: scaleX(1);
	/*幅を100%に戻す*/
}

/* 縦に起き上がる */
.iv_roll {
	transform: perspective(400px) translateZ(-70px) rotateX(50deg);
}
.rollstyle {
	transform: perspective(400px) translateZ(0px) rotateX(0deg);
}


/* ぼかしで出現 */
.iv_fade {
	opacity: 0;
	filter: blur(30px);
	/* transform: scale(0.9); */
	transform: scale(1);
}
.fadestyle {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	/* transition: 1s 0.3s; */
	transition: var(--trance_fade_start) var(--trance_fade_wait);
}


/* 拡大 */
/*キーフレーム（アニメーション）設定*/
@keyframes zoom {
	0% {
		transform: scale(0);
	}
	60% {
		transform: scale(1);
	}
	80% {
		transform: scale(0.99);
	}
	100% {
		transform: scale(1);
	}
}

.iv_zoom {
	transform: scale(0);
}
.zoomstyle {
	animation: zoom 0.8s ease-out 0.5s both;
}


/* クラッカーアニメーション */
/*画像への指定。共通。*/
.crackerstyle img {
	width: 150px;
	position: absolute;
	bottom: 0px;
}

/* 左側（１つ目のimgタグ）の画像への追加指定 */
.crackerstyle img:nth-of-type(1) {
	left: 0px;
}

/* 右側（２つ目のimgタグ）の画像への追加指定 */
.crackerstyle img:nth-of-type(2) {
	right: 0px;
	transform: scale(-1, 1);
	/*画像を左右逆向きにする*/
}

@media screen and (min-width:600px) {
	.crackerstyle img {
		width: 200px;
	}
}

@media screen and (min-width:900px) {
	.crackerstyle img {
		width: 300px;
	}
}