@charset "utf-8";
/*------------------------
1.common
------------------------*/
/* reset */
html,body,header,section,footer,h1,p,nav,ul,li{
	margin:0;
	padding:0;
	font-size:100%;
	font-weight:normal;
}

html,body{
	height:100%;
}
body{
	font-family: sans-serif;
	background:#fbfbfb;
}
#wrapper{
	width:100%;
	position:relative;
	height:auto !important;
    height:100%;
    min-height:100%;
}

/*------------------------
2.header
------------------------*/
header{
	width:100%;
	padding:50px 0;
	border-bottom:2px solid #ececec;
	background:#fff;
}
h1{
	width:120px;
	margin:0 auto;
}
h1 img{
	width:120px;
}
header p{
	margin:20px auto 0;
	padding:0 20px;
	font-size:2.2em;
	line-height:1.3em;
	text-align:center;
}

/*------------------------
3.section
------------------------*/
section{
	width:100%;
	min-height:544px;
	padding-bottom:56px;
	background:url(../img/back.png) no-repeat top center;
}
/* nav */
nav ul{
	width:466px;
	margin:0 auto;
	padding:80px 0 50px;
	list-style:none;
	overflow:hidden;
}
nav ul li{
	float:left;
	width:218px;
	margin:0 30px 30px 0;
	border-radius:5px;
	background:rgba(0,0,0,0.75);
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
	color:#fff;
}
nav ul li:nth-of-type(2n){
	margin:0 0 30px;
}
nav ul li:nth-child(odd):last-child{
	clear:both;
	float:none;
	margin:0 auto;
}
nav ul li:hover{
	opacity:0.5;
}
nav ul li a{
	display:block;
	padding:20px 0;
	color:#fff;
	text-decoration:none;
}
nav ul li a:visited{
	color:#fff;
	text-decoration:none;
}

/*------------------------
4.footer
------------------------*/
footer{
	width:100%;
	height:56px;
	position:absolute;
	bottom:0;
	background:#f0f0f0;
}
footer div{
	padding:10px 0;
	text-align:center;
}
footer div img{
	width:221px;
}
footer div img:hover{
	opacity:0.5;
}


/*==============================
Smartphone
==============================*/
@media screen and (max-width:768px){

/*------------------------
2.header
------------------------*/
header{
	padding:30px 0;
}
header p{
	margin:10px auto 0;
	padding:0 10px;
}

/*------------------------
3.section
------------------------*/
/* nav */
nav ul li:hover{
	opacity:inherit;
}

/*------------------------
4.footer
------------------------*/
footer div img:hover{
	opacity:inherit;
}

}


/*==============================
Smartphone
==============================*/
@media screen and (max-width:640px){

/*------------------------
2.header
------------------------*/
h1{
	width:70px;
	margin:0 auto;
}
h1 img{
	width:70px;
}
header p{
	font-size:1.8em;
}

/*------------------------
3.section
------------------------*/
section{
	min-height:0;
	padding-bottom:35px;
	background-size:auto 280px;
}
/* nav */
nav ul{
	width:100%;
	padding:35px 0 40px;
	list-style:none;
}
nav ul li{
	float:none;
	width:95%;
	margin:0 auto 15px;
	font-size:1em;
}
nav ul li:nth-of-type(2n){
	float:none;
	margin:0 auto 15px;
}
nav ul li a{
	padding:12px 0;
}

/*------------------------
4.footer
------------------------*/
footer{
	height:35px;
}
footer div{
	padding:5px 0;
}
footer div img{
	width:154px;
}

}