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

animation

////////////////////////////////////////////////////////*/
/* common
------------------------- */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		display: none;
	}
}
@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeDown {
	0% {
		opacity: 0;
		transform: translateY(-30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeLeft {
	0% {
		opacity: 0;
		transform: translateX(30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes fadeRight {
	0% {
		opacity: 0;
		transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes fadeStamp {
	0% {
		opacity: 0;
		transform: scale(2.3, 2.3);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
@keyframes fadeDecrease {
	0% {
		opacity: 0;
		transform: scale(1, 1) translateY(20px);
	}
	40% {
		opacity: 1;
		transform: scale(1, 1) translateY(0);
	}
	52% {
		opacity: 1;
		transform: scale(1, 1) translateY(0);
	}
	100% {
		opacity: 1;
		transform: scale(0.5, 0.5) translateY(0);
	}
}
@keyframes fadeFuki {
	0% {
		opacity: 0;
		transform: scale(.3, .3);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
@keyframes fadeFit {
	0% {
		max-height: 300px;
	}
	100% {
		max-height: 140px;
	}
}
@keyframes balloon {
	0% {
		opacity: 0;
		transform: scale(2.3, 2.3);
	}
	50% {
		transform: scale(1, 1);
	}
	60% {
		transform: scale(1.08, 1.08);
	}
	70% {
		transform: scale(1, 1);
	}
	80% {
		transform: scale(1.03, 1.03);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
@keyframes slideLeftRight {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slideRightLeft {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
[class*='fade_'], [class*='balloon'], [class*='fade_stamp'] {
	opacity: 0;
}
[class*='fade_in'].active {
	animation: fadeIn 1.7s forwards;
}
[class*='fade_out'] {
	opacity: 1;
}
[class*='fade_out'].active {
	animation: fadeOut 1.7s forwards;
}
[class*='fade_up'].active {
	animation: fadeUp 1s forwards;
}
[class*='fade_down'].active {
	animation: fadeDown 1s forwards;
}
[class*='fade_left'].active {
	animation: fadeLeft 1s forwards;
}
[class*='fade_right'].active {
	animation: fadeRight 1s forwards;
}
[class*='fade_stamp'].active {
	animation: fadeStamp .5s forwards;
}
[class*='fade_decrease'].active {
	animation: fadeDecrease 1.75s forwards;
}
[class*='fade_fuki'].active {
	animation: fadeFuki .7s forwards;
}
[class*='fade_fit'].active {
	animation: fadeFit .9s forwards;
}
[class*='balloon'].active {
	animation: balloon .7s forwards;
}
[class*='slide_RightLeft'] {
	opacity: 0;
	animation: slideRightLeft 1.5s forwards;
}
[class*='slide_LeftRight'] {
	opacity: 0;
	animation: slideLeftRight 1.5s forwards;
}
/* result
------------------------- */
@keyframes moveLarge {
	0% {
		transform: scale(1, 1);
	}
	23% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(5, 5);
	}
}
@keyframes moveRightLeft {
	0% {
		transform: translateX(0) scale(1, 1);
	}
	100% {
		transform: translate(-22.5%, -9.5%) scale(2, 2);
	}
}
@keyframes moveLeft {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-91%);
	}
}
@keyframes moveRight {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(91%);
	}
}
@keyframes zoom {
	0% {
		transform: scale(0.9, 0.9);
	}
	100% {
		transform: scale(1.4, 1.4);
	}
}
@keyframes zoomOut {
	0% {
		transform: scale(2, 2);
	}
	100% {
		transform: scale(1, 1);
	}
}
@keyframes scaling {
	0% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(1.2, 1.2);
	}
	100% {
		transform: scale(1, 1);
	}
}
.move_large.active {
	animation: moveLarge 4.5s forwards;
	animation-delay: .5s;
}
.move_RightLeft.active {
	animation: moveRightLeft 6.5s forwards;
	animation-delay: .5s;
}
.move_left.active {
	animation: moveLeft 2s forwards;
}
.move_right.active {
	animation: moveRight 2s forwards;
}
[class^='zoom'].active {
	animation: zoom 4s forwards linear;
}
[class^='zoom_out'].active {
	animation: zoomOut 4s forwards linear;
}
[class*='scaling'] {
	animation: scaling 1.5s infinite linear;
}
/*----- 共通結果 -----*/
/* overlay */
@keyframes cmnZoom {
	0% {
		opacity: 0;
		transform: scale(0, 0);
	}
	25% {
		opacity: 1;
		transform: scale(4, 4);
	}
	80% {
		opacity: 1;
		transform: scale(4, 4);
	}
	100% {
		opacity: 0;
		transform: scale(4, 4);
	}
}
.cmn_zoom.active {
	animation: cmnZoom 3s forwards linear;
	animation-delay: .8s;
}
/* chart */
@keyframes cmnZoom2 {
	0% {
		opacity: 0;
		transform: scale(0, 0) translateY(30px);
	}
	25% {
		opacity: 1;
		transform: scale(1.2, 1.2) translateY(30px);
	}
	52% {
		opacity: 1;
		transform: scale(1.2, 1.2) translateY(0);
	}
	80% {
		opacity: 1;
		transform: scale(1.2, 1.2) translateY(0);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1) translateY(0);
	}
}
.cmn_zoom2.active {
	animation: cmnZoom2 3s forwards linear;
	animation-delay: .8s;
}
.shadow.active {
	animation: shadow .5s forwards;
	animation-delay: 1.5s;
}
/* star */
@keyframes shadow {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/*----- komi_juyo -----*/
/* symbol */
@keyframes juyoZoom {
	0% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(8, 8);
	}
}
.juyo_zoom.active {
	animation: juyoZoom 1.7s forwards linear;
	animation-delay: .5s;
}
/*----- komi_phone -----*/
/* スマホ */
@keyframes spZoom {
	0% {
		top: 70px;
		transform: scale(.3, .3);
	}
	12% {
		top: -40px;
		transform: scale(1.5, 1.5);
	}
	85% {
		top: -40px;
		transform: scale(1.5, 1.5);
	}
	100% {
		top: 15px;
		transform: scale(1, 1);
	}
}
.sp_zoom.active {
	animation: spZoom 5s forwards linear;
	animation-delay: .7s;
}
/* bg高さ */
@keyframes spShort {
	0% {
		height: 500px;
	}
	92% {
		height: 500px;
	}
	100% {
		height: 270px;
	}
}
.sp_short.active {
	animation: spShort 6s forwards linear;
}
/* メッセ */
@keyframes spDisp {
	0% {
		opacity: 0;
		height: 0;
		margin: 0;
		padding: 0;
		transform: scale(0, 0) translateY(-30px);
	}
	100% {
		opacity: 1;
		height: auto;
		margin: 0 0 5px;
		padding: 28px 10px 8px;
		transform: scale(1, 1) translateY(0);
	}
}
[class*="sp_disp"].active {
	animation: spDisp .4s forwards linear;
}
.sp_disp1.active {
	animation-delay: .5s;
}
.sp_disp2.active {
	animation-delay: 1.3s;
}