body{
	width:820px;
	margin:0 auto;
	font-family: "Comic Sans MS", sans-serif;
}
h1,header p{
	text-align:center;
}
header{
	margin:10px;
	padding:10px;
}
main{
	margin-left:20px;
	width:370px;
	position:relative;
	display:inline-block;
}
#gamebox,#spinfo,#next,#mainbox{
	touch-action:none;
	user-select:none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
#gamebox{
	margin:0 auto;
	display:block;
}
#startbtn,#gameover{
	border:2px solid silver;
	border-radius:16px;
	width:220px;
	height:42px;
	padding:6px;
	text-align:center;
	font-weight:bold;
	font-size:28px;
	position:absolute;
		left:70px;
		top:220px;
	background-color:snow;
	user-select:none;
	cursor:pointer;
	display:block;
}
.blink{
	animation: animation_blink 2s infinite;
}
.blink2{
	animation: animation_blink2 1.2s infinite;
}
	/*点滅アニメーション*/
	@keyframes animation_blink{
		30%,100% { opacity: 1; }
		50% { opacity: 0; }
	}
	/*点滅アニメーション*/
	@keyframes animation_blink2{
		0%,100% { opacity: 0.9; }
		50% { opacity: 0.2; }
	}
	#footer{
		text-align:center;
		width:360px;
		color:snow;
		position:absolute;
		top:428px;
		left: 190px;
		transform: translateX(-50%);
		z-index:1;
	}
	#footer a{
		color:snow;
	}
	#footer p{
		margin:4px;
	}
	#footer a:hover{
		font-weight:bold;
	}
hr{
	width:98%;
	border:black solid 2px;
	border-top:none;
	border-left:none;
	border-right:none;
}
#spinfo{
		margin:0;
		padding:0;
		display:block;
		font-family: 'Consolas';
		margin:0 auto;
		padding:12px;
		width:340px;
		text-align:center;
		position:absolute;
		top:0px;
		left:3px;
		color:gold;
		opacity:0.9;
		user-select:none;
}
#p1,#p2,#syouhai{
	font-weight:bold;
	display:inline-block;
}
#syouhai{
	color:white;
	text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
	margin-left:12px;
	margin-right:12px;
}
#p1,#p2{
	color:white;
	border:dimgrey solid 3px;
	width:108px;
}
#p1{
	background-color:deeppink;
}
#p2{
	background-color:deepskyblue;
}

#sptitle{
	user-select:none;
		position:absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		top:110px;
		left:96px;
		color:snow;
		font-weight:bold;
		font-size:48px;
}
#spmenu{
		position:absolute;
		border:2px solid silver;
		border-radius:16px;
		width:120px;
		height:24px;
		padding:6px;
		text-align:center;
		font-weight:bold;
		font-size:20px;
		background-color:snow;
		user-select:none;
		cursor:pointer;
		justify-content: center;
		align-items: center;
		top:350px;
		left:120px;
}
.peke{
	display:inline-block;
	width:28px;
	height:28px;
	padding:2px;
	text-align:center;
	margin-right:12px;
	padding-bottom:8px;
	font-size:24px;
}
.peke:hover{
	background-color:lightgrey;
	cursor:pointer;
}
#howtobox{
	display:none;
}
	#howtoWindow{
		font-size:16px;
		background-color:oldlace;
		width:360px;
		text-align:right;
		position:absolute;
		top:4px;
		left:4px;
		padding-bottom:10px;
		border:1px solid black;
		border-radius:8px;
		z-index:2;
	}
	#howtoWindow h2{
		margin:1px;
		text-align:center;
		font-size:20px;
	}
	#howtoWindow p{
		text-align:left;
		font-size:16px;
		padding:0px 20px 0px 20px;
		margin:10px 0px 10px 0px;
	}
#next{
	user-select:none;
	position:absolute;
		top:100px;
		left:332px;
	width:30px;
	height:48px;
	border:1px solid grey;
	border-radius:6px;
	background-color:snow;
	opacity:0.8;
}
#nextimg{
	margin:0 auto;
	width:28px;
	height:28px;
	/*background-image:url("img/number_0.webp");*/
	background-size: contain;
	background-repeat: no-repeat;
}
#nextmsg{
	text-decoration:underline;
	margin:0px;
	padding:0px;
	font-size:12px;
	text-align:center;
}
nav{
	border:dimgrey solid 2px;
	background-color:lavender;
	margin:10px;
	border-radius:10px;
	text-align:center;
}
.navi{
	background-color:snow;
	font-size:20px;
	width:120px;
	padding:4px;
	margin:8px;
	display:inline-block;
	border:2px solid dimgrey;
	border-radius:8px;
}
.navi:hover{
	border-color:dodgerblue;
}
	#infoWindow{
		position:absolute;
		width:160px;
		top:88px;
		left:8px;
		color:white;
		text-align:center;
		padding-left:3px;
		opacity:1;
		text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
	}
	.answer{
		text-align:center;
		position:absolute;
		color:snow;
		text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
		width:100px;
		z-index:100;
	}
	#side{
		border:1px solid black;
		display:inline-block;
		height:252px;
		width:302px;
		vertical-align:top;
		text-align:center;
		margin-left:20px;
	}
/*以下モバイル用*/
@media screen and (max-width: 480px)
{
	body{
		width:100%;
		padding:0px;
		padding-top:8px;
		margin:0 auto;
	}
	main{
		display:block;
		margin:0 auto;
		width:370px;
	}
	#side{
		display:block;
		margin:0 auto;
		margin-top:16px;
		width:370px;
	}
	header{
		display:none;
		
	}
	#gamebox{
		margin:0 auto;
		display:block;
	}
}