/* ===================================================
	★ 基本設定
=================================================== */

body {
	font-family: 'Yu Mincho', 'Arial', sans-serif;
	color: #ccc;
}

/* ===================================================
	★ エリア設定
=================================================== */

/* 全体的な配置 */
.layout {
	background-color: #000;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

/* ===================================================
	★ 画像設定
=================================================== */

.title {
	width: 10%;
	height: auto;
	border: none;
	margin: 0 auto;
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
}


.howto {
	width: 3%;
	height: auto;
	border: none;
	margin: 0 auto;
	position: absolute;
	top: 300px;
	right: 200px;
}

.access {
	width: 3%;
	height: auto;
	border: none;
	margin: 0 auto;
	position: absolute;
	top: 300px;
	right: 100px;
}

.rule {
	width: 3%;
	height: auto;
	border: none;
	margin: 0 auto;
	position: absolute;
	top: 300px;
	right: 300px;
}

.contact {
	width: 3%;
	height: auto;
	border: none;
	margin: 0 auto;
	position: absolute;
	top: 300px;
	right: 400px;
}

.back {
	width: 3%;
	height: auto;
	border: none;
	margin: 0 auto;
	position: absolute;
	top: 50px;
	left: 30px;
}

*/ .copyright {
	font-size: small;
	margin: 0 auto;
	bottom: 10px;
	text-align: center;
	vertical-align: bottom;
}

.sashimi {
	width: 20%;
	height: auto;
	border: none;
	margin: 0 auto;
	position: absolute;
	top: 100px;
	left: 100px;
	z-index: 10;
}

.drink {
	width: 20%;
	height: auto;
	border: none;
	margin: 0 auto;
	position: absolute;
	top: 300px;
	left: 50px;
	z-index: 2;
}

.karaoke {
	width: 20%;
	height: auto;
	border: none;
	margin: 0 auto;
	position: absolute;
	bottom: 250px;
	left: 300px;
	z-index: 3;
}

.copyright {
	width: 10%;
	height: auto;
	border: none;
	margin: 0 auto;
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
}

.server {
	position: absolute;
	bottom: 300px;
	right: 600px;
}

/* ===================================================
	★スマホ・タブレット画面用の配置（画面横幅が1000px以下の場合）
	=================================================== */
@media screen and (max-width: 1000px) {

	html,
	body {
		height: auto !important;
		/* 縦スクロールできるようにする */
		overflow-y: auto !important;
		box-sizing: border-box !important;
	}

	.t_area {
		display: flex !important;
		flex-direction: column !important;
		/* 上から下に縦並びにする */
		align-items: center !important;
		/* 中央寄せ */
		gap: 20px !important;
		/* 画像同士のすき間 */
		padding: 40px 20px !important;
		height: auto !important;
	}

	/* スマホ時は絶対配置をすべて解除して重なりを防ぐ */
	.title {
		position: static !important;
		transform: none !important;
		width: 30% !important;
		/* スマホ画面に収まるサイズ */
	}

	.howto,
	.access,
	.rule,
	.contact,
	.back {
		position: static !important;
		transform: none !important;
		max-width: 3% !important;
		width: 3% !important;
		/* スマホ画面に収まるサイズ */
	}

	.sashimi,
	.drink,
	.karaoke,
	.copyright,
	.server {
		display: none !important;
	}

	/* タイトル画像を一番上に表示したい場合の順序調整 */
	.title_img {
		order: -1 !important;
		width: 15% !important;
	}
}

/* ===================================================
	★ ふわっと切り替えるホバー効果の共通設定
=================================================== */

.howto,
.access,
.rule,
.contact,
.back {
	width: 3%;
	height: auto;
}

*/ .hover_btn {
	position: absolute;
	display: block;
	height: auto;
}

/* 2枚の画像をぴったり重ねる */
.hover_btn img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 0.5s ease;
	/* 0.5秒かけて変化 */
}

/* 2枚目の画像（ホバー用）を上に重ねて最初は透明にする */
.hover_btn .img_hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

/* マウスを乗せたときに1枚目を透明に、2枚目をくっきり表示 */
.hover_btn:hover .img_default {
	opacity: 0;
}

.hover_btn:hover .img_hover {
	opacity: 1;
}