body, html {
	margin: 0; padding: 0;
	height: 100%; overflow: hidden;
}

/* オープニング動画 */
#intro {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 1s ease;
}
#intro.fade-out {
	opacity: 0;
	pointer-events: none;
}
#intro video {
	width: 100%; height: 100%;
	object-fit: cover;
}

/* スキップボタン */
#skipBtn {
	position: absolute;
	top: 90%; right: 50px left: 50%;
	padding:  5px 20px;
	background: rgba(255, 255, 255, 0.8);
	border: none;
	border-radius: 20px;
	cursor: pointer;
	font-weight: 700;
	z-index: 10000;
}
#skipBtn:hover { background: rgba(255, 255, 255, 1); }


@media ( 670px <= width <= 1279px ) {
	#skipBtn { font-size: 15px; }
}

@media ( 1280px <= width ), print {
	#skipBtn { font-size: 20px; }
}

/* 本コンテンツ */
#main {
	opacity: 0;
	display: none;
	transition: opacity 1s ease;
}
#main.show {
	display: block;
	opacity: 1;
}