@charset "UTF-8";

.fade {
	opacity: 0;
}

/* Fade In */
@keyframes fadeIn {
	0%,
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* 左からスライド */
@keyframes fadeLeft {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.left-in {
	animation-name: fadeLeft;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 右からスライド */
@keyframes fadeRight {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.right-in {
	animation-name: fadeRight;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 上からスライド */
@keyframes fadeTop {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.top-in {
	animation-name: fadeTop;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 下からスライド */
@keyframes fadeBottom {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.bottom-in {
	animation-name: fadeBottom;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 徐々に大きく */
@keyframes scale {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
.scale {
	animation-name: scale;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 大小のリピート */
@keyframes scaleRepeat {
	0% {
		transform: scale(0.96);
	}
	100% {
		transform: scale(1);
	}
}
.scale-repeat {
	animation-name: scaleRepeat;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 0.5s;
}

/* 跳ねる動き */
@keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
.bounce-in {
	animation-duration: 0.75s;
	animation-name: bounceIn;
}

/* 光るボタン */
@keyframes shiny {
	0% {
		transform: scale(0) rotate(45deg);
		opacity: 0;
	}
	80% {
		transform: scale(0) rotate(45deg);
		opacity: 0.5;
	}
	81% {
		transform: scale(4) rotate(45deg);
		opacity: 1;
	}
	100% {
		transform: scale(80) rotate(45deg);
		opacity: 0;
	}
}
.shiny {
	position: relative;
	overflow: hidden;
}
.shiny::before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: min(30px, 10%);
	height: 100%;
	background-color: #fff;
	animation-name: shiny;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}