@charset "utf-8";

@media screen and (max-width:640px){

/*		Contents
---------------------------------------------------------------------------

	HOME										[ index.html ]

------------------------------------------------------------------------ */


/* ========================================================================
		Common
======================================================================== */
body{
	background:#f6f7f9;
}

#container{
	width:320px;
	margin:0 auto;
	background:url(../../img/bg.jpg) no-repeat center bottom;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}

a:hover{
	text-decoration:none;
}

img{
	max-width:100%;
	height:auto;
}


/* ========================================================================
		header
======================================================================== */
header{
	padding:0 0 20px 0;
}

header h1{
	padding:10px;
}


/* nav
----------------------------------- */
header nav ul{
	overflow:hidden;
}

header nav ul li{
	float:left;
	padding:0 0 0 1px;
}

header nav ul li:first-child{
	padding-left:0;
}

header nav ul li a{
	display:block;
	width:106px;
	height:40px;
	line-height:40px;
	background:#37bbbd;
	text-align:center;
	font-size:107.7%;
}


/* ========================================================================
		contents
======================================================================== */
#contents{
	padding:0 0 20px 0;
}

#contents h2{
	height:40px;
	line-height:40px;
	background:url(../../img/bg_h2.gif) no-repeat 267px center #0d888d;
	padding:0 0 0 14px;
	font-size:230.8%;
	font-weight:bold;
	color:#ffffff;
	position:relative;
	z-index:1;
}

#contents h2 span{
	font-size:60%;
}


/* -----------------------------------
	block
----------------------------------- */
#contents .block p{
	padding:0 20px 10px;
}

#contents .block p.equipment{
	background:#000000;
	margin:0 0 10px 0;
	padding:8px;
	text-align:right;
	font-size:107.7%;
	color:#ffffff;
	line-height:1;
}

#contents .block p.equipment img{
	display:block;
	margin:0 0 10px 0;
}

#contents .block dl{
	overflow:hidden;
	background:url(../../img/bg_white.png);
	margin:0 0 10px 0;
	padding:8px;
}

#contents .block dl dt{
	float:left;
	width:144px;
	font-size:107.7%;
}

#contents .block dl dt img{
	width:30px;
	vertical-align:middle;
	margin:0 8px 0 0;
}

#contents .block dl dd{
	float:right;
	width:160px;
	height:30px;
	line-height:30px;
	background:#ffffff;
	padding:0 6px;
	text-align:right;
	font-size:138.5%;
	font-weight:bold;
}

#contents .block dl dd span{
	font-size:77.8%;
}


/* -----------------------------------
	graph
----------------------------------- */
#contents .scroll{
	width:320px;
	overflow-x:scroll;
}

/* scrollbar */
#contents .scroll::-webkit-scrollbar{ width:10px;height:10px; }
#contents .scroll::-webkit-scrollbar-track{ background:#eeeeee; }
#contents .scroll::-webkit-scrollbar-thumb{ background:#0d888d; }

#contents .graph{
	width:1100px;
	height:492px;
	margin:0 auto;
	background:url(../../img/bg_year.gif) no-repeat left top #fefeff;
	position:relative;
}

#contents #month{ background-image:url(../../img/bg_month.gif); }
#contents #day{ background-image:url(../../img/bg_day.gif); }

#contents .graph canvas{
	width:974px;
	height:446px;
	margin:0 auto;
	position:absolute;
	bottom:18px;
	left:72px;
}

#contents #year canvas#line{ left:112px; }
#contents #month canvas#line{ left:88px; }
#contents #day canvas#line{ left:76px; }
#contents #day canvas#bar{ bottom:19px; }


/* ========================================================================
		footer
======================================================================== */
footer p{
	background:url(../../img/bg_footer.png);
	text-align:center;
	font-size:92.3%;
	color:#ffffff;
	line-height:25px;
}


}