@charset "UTF-8";

/* リンクを右下に固定 */
#page-top {
	/* ボタンのサイズ */
	/* width: 25%; */
	/* width: 35%; */
	width: 300px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	/*はじめは非表示*/
	opacity: 0;
	transform: translateY(200px);
	/* transition: 0.5s; */
}
@media (max-width: 600px) {
	#page-top {
		/* ボタンのサイズ */
		width: 30%;
		width: 90%;
		right: 5%;
	}
}
#page-top:hover a {
	opacity: 0.8;
}

/* 上がる動き */
#page-top.UpMove {
	animation: UpAnime 1s forwards, balloon 3s ease infinite;
}
@keyframes UpAnime {
	from {
		opacity: 0;
		transform: translateY(200px);
	}
	to {
		opacity: 1;
		transform: translateY(-15px);
	}
}

/* 下がる動き */
#page-top.DownMove {
	animation: DownAnime 1s forwards;
}
@keyframes DownAnime {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(200px);
	}
}

@keyframes balloon {
	0% {
		transform: translateY(-15px);
	}
	25% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-15px);
	}
	75% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-15px);
	}
}