body{
	width:1024px;
	margin:0 auto;
	padding:10px;
	font-family:Comic Sans MS, Meiryo;
}
#title{
	width:728px;
	font-size:34px;
	padding:20px;
	display:inline-block;
	margin-bottom:0;
}
#gameboard{
	margin:10px;
	padding:0px;
	position:relative;
	font-size:24px;
	border:1px grey solid;
	width:1000px;
	height:620px;
	text-shadow:1px 0 4px white, 0 1px 4px white, -1px 0 4px white, 0 -1px 4px white;
	overflow:hidden;
}
#p_hiscorepc{
	position:absolute;
	top:0px;
	left:50px;
	display:block;
}
#p_score{
	position:absolute;
	top:50px;
	left:50px;
}
#p_clear{
	position:absolute;
	top:0px;
	left:622px;
}
#p_timer{
	position:absolute;
	top:50px;
	left:790px;
}
#region{
	left:1%;
	width:98%;
	position:absolute;
	top:130px;
	font-size:36px;
	text-align:center;
	font-weight:bold;
	letter-spacing:10px;
	text-shadow:1px 0 4px white, 0 1px 4px white, -1px 0 4px white, 0 -1px 4px white;
}
#question{
	left:1%;
	width:98%;
	position:absolute;
	top:170px;
	font-size:60px;
	text-align:center;
	font-weight:bold;
	letter-spacing:10px;
	text-shadow:1px 0 4px white, 0 1px 4px white, -1px 0 4px white, 0 -1px 4px white;
}
#answer{
	left:1%;
	width:98%;
	position:absolute;
	top:280px;
	font-size:36px;
	text-align:center;
	font-weight:bold;
	letter-spacing:4px;
	text-shadow:1px 0 4px white, 0 1px 4px white, -1px 0 4px white, 0 -1px 4px white;
}
#kanabox{
	width:90%;
	height:44px;
	position:absolute;
	font-size:36px;
	text-align:center;
	font-weight:bold;
	letter-spacing:4px;
	top:400px;
	left:4%;
	overflow:hidden;
	resize:none;
	padding:10px;
	border:1px grey solid;
}
#subtitle{
	text-indent:1em;
}
nav{
	text-align:right;
	padding:14px;
	font-size:18px;
}

#bgimg{
	width:100%;
	height:100%;
	object-fit:contain;
}
.text{
	padding:12px;
}
.text li{
	line-height:30px;
}
footer{
	text-align:center;
	line-height:1.8em;
	padding:12px;
}
.effect2{
	font-size:24px;
	position:absolute;
	color:orange;
	text-shadow:1px 0 4px white, 0 1px 4px white, -1px 0 4px white, 0 -1px 4px white;
}
.effect3{
	font-size:48px;
	position:absolute;
	color:gold;
	text-shadow:1px 0 4px white, 0 1px 4px white, -1px 0 4px white, 0 -1px 4px white;
}
/* 以下タイピング版 */
#modeselect,#countselect{
	text-align:center;
	position:absolute;
	left:300px;
	top:20px;
	font-size:20px;
	user-select:none;
	text-shadow:none;
}
#countselect{
	left:300px;
	top:80px;
}
#modeselect label, #countselect label{
	padding:9px;
	border:black solid 1px;
	background-color:lightgrey;
	border-radius:12px;
	color:grey;
	display:inline-block;
	width:120px;
}
#modeselect label:hover , #countselect label:hover {
	cursor:pointer;
}
#modeselect input[type=radio]:checked + label{
	color:black;
	background-color:gold;
}
#countselect input[type=radio]:checked + label{
	color:black;
	background-color:skyblue;
}
input[type=radio] {
	display: none; /* 標準スタイルを非表示にする */
}
.already{
	color:red;
}
@media screen and (max-width: 480px)
{
	body{
		margin:0 auto;
		width:375px;
		padding:0px;
	}
	#title{
		width:96%;
		font-size:32px;
		padding:12px 0px 10px 10px;
		display:block;
		margin:0 auto;
	}
	#gameboard{
		margin:0 auto;
		padding:0px;
		width:373px;
		height:490px;
	}
	#p_hiscorepc{
		font-size:18px;
		top:0px;
		left:10px;
	}
	#p_score{
		font-size:18px;
		top:40px;
		left:10px;
	}
	#p_clear{
		width:160px;
		font-size:18px;
		top:40px;
		left:210px;
		text-align:center;
	}
	#p_timer{
		font-size:18px;
		top:0px;
		left:232px;
	}
	#title{
		display:block;
		margin-bottom:0;
		width:90%;
	}
	.text{
		width:96%;
		padding:10px;
		margin:0 auto;
	}
	#region{
		letter-spacing:4px;
		font-size:22px;
		top:170px;
	}
	#question{
		letter-spacing:6px;
		font-size:35px;
		top:260px;
	}
	#answer{
		font-size:20px;
		top:240px;
	}
	#kanabox{
		top:360px;
		font-size:26px;
		line-height:1.5em;
		height:84px;
		width:86%;
		padding:10px;
	}
	.text{
		width:360px;
		padding:6px;
	}
	.text li{
		width:300px;
	}
	.effect2{
		font-size:18px;
	}
	.effect3{
		font-size:28px;
	}
	h2,h3{
		text-indent:1em;
	}
	#modeselect{
		display:none;
	}
	#countselect{
		left:42px;
		top:122px;
	}
}