@charset "UTF-8";
html{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	text-align:center;
	font-family:"游ゴシック", YuGothic, "Hiragino Maru Gothic W4 JIS2004", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#333;
}
html *{
	margin:0;
	padding:0;
}
body{
	height:100%;
}
img{
	vertical-align:bottom;
	max-width:100%;
}
ul{
	list-style:none;
}

header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0 4vw;
	height:10vh;
	background:#6ae;
}
header h1{
	float:left;
	padding:1vh 0;
	width:8vh;
	height:8vh;
}
header h2{
	padding:1vh 0 0;
	text-align:right;
	font-size:2vh;
	line-height:120%;
	font-weight:bold;
	color:#fff;
}
header + svg{
	display:none;
}
#Answer{
	display:flex;
	margin:40px 4vw 0;
	padding:10px;
	max-height:30vh;
	overflow:scroll;
	box-shadow:1px 1px 4px 0 rgba(0,0,0,0.2);
	text-align:left;
}
#Answer pre{
	width:calc(100% - 80px);
}
#Answer button{
	width:80px;
	border:none;
	background:#369;
	cursor:pointer;
	text-align:center;
	font-size:16px;
	line-height:220%;
	color:#fff;
}
#Answer button:hover{
	background:#147;
}
#Answer button + p{
	margin:30px 0 0;
	text-align:center;
	font-size:14px;
	line-height:120%;
}
#Answer button + p span{
	font-weight:bold;
}

#Content{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	padding:20px 1vw 0;
}
#Content form{
	margin:2vw 0.5vw 0;
	padding:15px;
	width:90vw;
	max-width:400px;
	box-shadow:1px 1px 4px 0 rgba(0,0,0,0.2);
	font-size:18px;
	line-height:130%;
}
#Content form h3{
	font-size:20px;
	line-height:120%;
}
#Content form h3 +  p{
	margin:6px 0 0;
	font-size:16px;
	line-height:120%;
}
#Content form input[type="text"],
#Content form textarea{
	border:1px solid #d5d5d5;
	margin:8px 0 0;
	padding:4px;
	width:calc(100% - 8px);
	background:#f3f3f3;
	font-size:16px;
	line-height:120%;
}	
#Content form input[type="text"]{
	font-size:20px;
	line-height:120%;
}
#Content form textarea{
	height:300px;
}
#Content form input[type="text"]:focus,
#Content form textarea:focus{
	border:1px solid #aab;
	background:#fff;
}
#Content form input[type="submit"],
button#Chenge{
	border:none;
	margin:12px 0 0;
	width:100%;
	background:#369;
	font-size:15px;
	font-weight:bold;
	line-height:200%;
	color:#fff;
}
#Content form input[type="submit"]:hover,
button#Chenge:hover{
	background:#147;
}
#Content form label{
	display:inline-block;
	margin:6px 6px 0;
}
#Content form table{
	margin:20px 0 0 52%;
	width:48%;
}
#Content form input + table{
	margin:20px 0 0 0;
	float:left;
}
#Content form table th{
	font-size:14px;
	font-weight:normal;
	line-height:120%;
	color:#999;
}
#Content form table td{
	font-size:14px;
	line-height:120%;
}
body >  p{
	margin:50px auto 0;
	text-align:center;
	font-size:14px;
	line-height:130%;
}

nav{
	margin:60px auto 0;
	overflow:hidden;
}
nav ul{
	display:flex;
	justify-content:center;
}
nav ul li{
		padding:0 5px;
}
nav ul li a{
	display:block;
	border:1px solid #89a;
	padding:0 8px;
	text-decoration:none;
	transition:all 0.1s ease;
	background:#fff;
	font-family:'Roboto',arial,sans-serif;
	letter-spacing:0.1em;
	font-size:18px;
	line-height:24px;
	color:#89a;
}
nav ul li a:hover{
	border:1px solid #69c;
	background:#69c;
	color:#fff;
}
footer{
	margin:20px auto 0;
	padding:10px 0;
	text-align:center;
	font-size:14px;
	line-height:120%;
}