#menu {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
	font-size:small;
}
#menu li{
	display: block;
	float: left;
	width: 12.5%;
	margin: 0;
	padding: 0;
}
#menu li a {
	display: block;
	padding: 8px 0 7px;
	background-color:#B09C7B;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	border:1px solid #fff;
}
#menu li.onhover a{
	background:#CDC274;
}
#menu li a:hover{
	background:#CDC274;
}
#toggle {
	display: none;
}
 
/* 逕ｻ髱｢繧ｵ繧､繧ｺ縺�768px莉･荳九�蝣ｴ蜷医↓驕ｩ逕ｨ */
@media only screen and (max-width: 768px) {
	#menu li {
		width: 25%;
		border-bottom: 1px solid #fff;
	}
}
 
/* 逕ｻ髱｢繧ｵ繧､繧ｺ縺�736px莉･荳九�蝣ｴ蜷医↓驕ｩ逕ｨ */
@media only screen and (max-width: 736px) {
.navi{
	background-image:none;
	height:0;
	padding:0;
}
	#menu {
		display: none;
	}
	#menu li {
		width: 100%;
	}
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #2a83a2;
	}
	#toggle a{
		display: block;
		position: relative;
		padding: 20px 0 20px;
		border-bottom: 1px solid #4baacb;
		color:#FFF;
		text-align: center;
		text-decoration: none;
	}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background: #FFF;
	}
	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 6px;
		background: #2a83a2;
	}
	#toggle a:before {
		margin-top:-9px;
	}
	#toggle a:after {
		margin-top: 3px;
	}
}