@charset "utf-8";
/* clearfix */
.cf {
	zoom: 1;
	clear:both;
}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}
.mt30{
	margin-top:30px;
}
.mt50{
	margin-top:50px;
}
.mb50{
	margin-bottom:50px;
}
.mb100{
	margin-bottom:100px;
}
a {
	text-decoration:none;
	color:#454747;
}
a:hover {
	opacity:0.7;
}
.clear {
	clear:both;
}
.red{
	color:#F00;	
}
.center{
	text-align: center;
	display: block;
}
p,
h2,h3,h4{
	line-height:1.7em;
}
p{
	font-size:16px;	
	padding:10px;
}
body {
	width: 100%;
	background-color: #fff;
	font-family:Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#container{
	width:97%;
	margin:0 auto;
	overflow:hidden;
}
/*Header*/
header {
	width:97%;
	overflow:hidden;
	margin:50px auto;
}
header .logo {
	width:273px;
	margin:0 auto;
}
header h1{
	text-align:center;
	font-weight:normal;
	margin:20px 0;
}
nav ul{
	text-align: center;
	margin: 50px auto 0px auto;
}
nav ul li{
display: inline-block;
margin: 0 10px;
font-weight: bold;
color: #1dbef9;
border: 2px solid #dddddd;
padding: 10px;
border-radius: 10px;
}
.current{
	background-color: #454747;
	color: #ffffff;
}
.current a{
	color: #ffffff;
}
footer{
	text-align:center;
	padding:5px 0;	
	clear:both;
}
@media screen and (min-width:768px) {
	#container,
	header{
		width:97%
	}
}
@media screen and (min-width:1080px) {
#container,
header{
	width:1080px;
}
}