@charset "UTF-8" ;

/* 基本設定 */
body {
	color: #331900;
	font-family: 'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;
	background-image: url('enoden303kabe.jpg');
	background-attachment:fixed;
	max-width:1200px;
	margin:auto;
	}
	
/* PC用 */
@media (min-width:801px) {

.container {
	display:grid;
	grid-template-columns: 1fr 210px;
	grid-template-areas:
	"title title"
	"nav nav"
	"main aside"
	"footer footer";
}
}
/* ヘッダー用 */
.titleimg {
	width:100%;
	height:auto;
	margin:0;
	position:0;	
	}
	
header {
	margin-bottom:0;
	grid-row:1;
	grid-column:1 /span 2;
}

/* ナビ用 */
nav {
	grid-row:2;
	grid-column:1 /span 2;
}
.navi  {
	list-style-type:none;
	display:flex;
	justify-content:center;
	flex-wrap:nowrap;
	margin-top:0;
	text-align:center;
	font-size:18px;
	font-weight:bold;
	color:#331900;
}

.navi a {
	height:100%;
	text-decoration:none;
	color:#331900;
}

.index {
	padding-top:5px;
	border-bottom-color:black;
	border-bottom-style:ridge;
	border-bottom-width:5px;
	flex:1;
}

.sound {
	padding-top:5px;
	border-bottom-color:red;
	border-bottom-style:ridge;
	border-bottom-width:5px;
	flex:1;
}

.view {
	padding-top:5px;
	border-bottom-color:green;
	border-bottom-style:ridge;
	border-bottom-width:5px;
	flex:1;
}

.game {
	padding-top:5px;
	border-bottom-color:blue;
	border-bottom-style:ridge;
	border-bottom-width:5px;
	flex:1;
}

.other {
	padding-top:5px;
	border-bottom-color:yellow;
	border-bottom-style:ridge;
	border-bottom-width:5px;
	flex:1;
}

/* メイン */
main {
	grid-row:3;
	grid-column: 1;
	margin-left:5px;
	margin-right:5px;
}

main a {
	color:#116600;
}

h2 {
	text-align:center;
}

#toyo2000 {
	font-size: x-large;
	font-weight: bold;
	vertical-align:top;
}

#saitama2000 {
	font-size: x-large;
	font-weight: bold;
	vertical-align:top;
}

main table {
	border-collapse:collapse;
	border:1px gray solid;
	border-spacing:0;
}

main td {
	border:1px gray solid;
}

.totop {
	text-align:right;
}

/* サイド */
aside {
	grid-row:3;
	grid-column: 2;
	margin-top:20px;
}

aside p {
		text-align:center;
}

.title2 {
	background-color:#fffdb3;
	text-align:center;
}

aside table {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	border:1px #331900 solid;
	border-radius:10px;
	width:200px;
}

/* サイドスマホ用 */
side {
	display:none;
}

	
/* フッター用 */
footer {
	text-align:center;
	grid-row:4;
	grid-column:1 /span 2;
}

footer a {
	color: #116600;
}

/* スマホ用 */
@media(max-width:800px){
.container {
	grid-template-columns: 1fr;
	grid-template-areas:
	"title"
	"nav"
	"main"
	"aside"
	"footer";
}

.navi {
	flex-direction:column;
}

.hidden {
	display:none;
}

.youtube {
	width:100%;
	aspect-ratio:16 / 9;
}

.youtube iframe {
	width:100%;
	height:100%;
}

.music td {
	display:block;
}

table.music {
	width:100%;
}

}