@charset "UTF-8";
/* ページトップ（ロケット）の設定 */
#page-top {										/* スクロールボタンの配置位置 */
	position: fixed;
	right: 0;
	bottom:40px;
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);				/* ウィンドウの枠外に隠しておく */
}
#page-top a:hover{
	opacity: 0.6;
}
#page-top a.rocket-wrapper {					/* ロケット枠領域 */
	display: block;
	text-decoration: none;
	transition: all 0.3s;
	position: relative;
}
#page-top div img,
#page-top a.rocket-wrapper div img {
	width: 80px;
	vertical-align: top;
}
#page-top div.rocket-flame {					/* 炎（最初は非表示） */
	display: none; 
    margin-top: -20px;
}
#page-top a.rocket-wrapper div.arrow {	/* 'TOP PAGE'文字 */
	position: absolute;
	right: 24px;
	top: 70px;
	font-size: 12px;
	line-height: 1.2;
	color: #999;
	text-align: center;
}
@keyframes anime-up {							/* スクロールボタンを上に上げるアニメーション */
	from {
		opacity: 0;
		transform: translateY(160px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#page-top.move-up {
	animation: anime-up 0.5s forwards;
}
@keyframes anime-down {							/* スクロールボタンを下に下げるアニメーション */
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(160px);
	}
}
#page-top.move-down {
	animation: anime-down 0.5s forwards;
}
#page-top.rocket-launch {						/* ロケット発射 */
	animation: anime-launch 1s forwards ease-in;
}
@keyframes anime-launch {
	from {
		opacity: 1;
		bottom: 71px;
	}
	to {
		opacity: 0;
		bottom: calc(100vh + 100px);
	}
}
#page-top.rocket-launch div.rocket-flame {		/* 炎を表示 */
	display: block;
}

/* ▲▲▲ CSS（ここまで） ▲▲▲ */