@charset "Shift_JIS";

* {
	margin: 0;
	padding: 0;
	/*全要素のマージン・パディングをリセット*/
}

html,
body {
	width: 100%;
	height: 100%;
	background-color: black;
	overflow: hidden;
}

canvas {
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	width: 100vw;
	height: 100vh;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background-color: black;
	/* iPhoneのノッチ等のセーフエリアを考慮する場合 */
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	box-sizing: border-box;
}

@media (max-width : 599px) {
	/* モバイル向けに必要があれば個別の調整をここに記述 */
}

.resizeimage * {
	width: 100%;
}

/* Glyph Animation */
/*
@keyframes glyph-blink {
	0% {
		background-color: rgba(0, 255, 255, 0);
	}

	50% {
		background-color: rgba(0, 255, 255, 0.6);
	}

	100% {
		background-color: rgba(0, 255, 255, 0);
	}
}

.animate-glyph {
	animation: glyph-blink 1.5s ease-in-out infinite;
	*/
@keyframes glyph-hop {

	0%,
	100% {
		transform: translateY(0);
		/* 開始と終了は元の位置 */
	}

	50% {
		transform: translateY(-2px);
		/* 中間地点で2px上に移動 */
	}
}

.animate-glyph {
	display: inline-block;
	/* transformを有効にするために必要 */
	animation: glyph-hop 1.0s steps(2, start) infinite;
}