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

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

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

a:link,
a:visited {
	color: #f00;
	text-decoration: none;
}

a:hover,
a:active {
	color: #f90;
	text-decoration: none;
}

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

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

.con_area {
	width: 80%;
	height: auto;
	margin: 30px auto;
	border-radius: 10px;
	padding: 30px;
	background: rgba(255, 255, 255, 0.3);
	font-size: 16px;
	line-height: 2;
}

.link_area {
	width: 80%;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	border: 3px solid #999;
	border-radius: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	line-height: 2;
	font-weight: bold;
}

/* ===================================================
	★ 文章・文字設定
=================================================== */

h1 {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}

h2 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	clear: both;
}

.text_c {
	text-align: center;
}

.text_l {
	text-align: left;
}

.text_r {
	text-align: right;
}

.online {
	color: #32cd32;
}

.tabou {
	color: #f4a460;
}

.riseki {
	color: #ff0000;
}

.hide {
	color: #808080;
}

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

.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;
}

.ss {
	width: 320px;
	height: auto;
	border: none;
	margin: 10px;
	float: left;
	padding-right: 30px;
}

.ss_2 {
	width: 160px;
	height: auto;
	border: none;
	margin: 10px;
	float: left;
	padding-right: 30px;
}

/* ===================================================
	★ 装飾設定
=================================================== */

.padding_30 {
	padding-left: 30px;
}

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

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

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

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

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

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

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

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

.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;
}