@charset "utf-8";
/* CSS Document */

/*
  Respnsive Navigation
*/

* {
	padding: 0;
	margin: 0;
	
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#gNavi nav ul {
	list-style: none;
	overflow: hidden;
	margin-bottom: 0;
}

#gNavi nav li a {
	background: #9F9B84;
	border-right: 1px solid #fff;
	color: #fff;
	display: block;
	float: left;
	font: 500 13px/1.1 'メイリオ', Helvetica, Verdana, Arial, sans-serif;
	padding: 6px;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	width: 25%;
	
	/*TRANSISTIONS
	-webkit-transition: background 0.8s ease;
	   -moz-transition: background 0.8s ease;
	     -o-transition: background 0.8s ease;
	    -ms-transition: background 0.8s ease;
	        transition: background 0.8s ease;*/
}
#gNavi nav li img {
	float: left;
	padding-left: 8%;
}

#gNavi nav li#gn01 a {
		border-left: 1px solid #fff;
}
#gNavi nav li#gn04 a {
		border-right: 1px solid #fff;
}


/*HOVER*/
#gNavi nav li a:hover {
	background: #C48D4A;
}

/*SMALL*/
#gNavi nav small {
	font: 100 8px/1 Helvetica, Verdana, Arial, sans-serif;
	text-transform: none;
	color: #565047;
}

/*BORDER FIX*/
#gNavi nav li:last-child a {
	border: none;
}

/*BLUE MENU*/
#gNavi nav .blue {
	margin-top: 50px;
}

.blue li a {
	background: #75b1de;
}

.blue small {
	color: white;
}

.blue li a:hover {
	background: #444;
}

/*RED MENU*/

#gNav nav .red {
	margin-top: 50px;
}

.red li a {
	background: #5C0002;
}

.red small {
	color: white;
}

.red li a:hover {
	background: #a60306;
}


/* MEDIA QUERIES*/
@media only screen and (max-width : 1101px),
only screen and (max-device-width : 1101px){
	#gNavi nav {
		width: 980px;
		margin: 0 auto;
		overflow: hidden;	
	}
	#gNavi nav li a {
		font: 400 13px/1.1 'メイリオ', Helvetica, Verdana, Arial, sans-serif;
	}
	
	#gNav nav small {
		font: 100 8px/1 Helvetica, Verdana, Arial, sans-serif;
	}
}

@media only screen and (min-width : 980px){
	#gNavi nav {
		width: 980px;
		margin: 0 auto;
		overflow: hidden;	
	}
	
}
@media only screen and (max-width : 979px),
only screen and (max-device-width : 979px){
	#gNavi nav {
		width: 95%;
		margin: 0 auto;
		overflow: hidden;	
	}	
}	
@media only screen and (max-width : 700px),
only screen and (max-device-width : 700px){
	#gNavi nav li a {
		width: 25%;
		border-bottom: 1px solid #fff;
		/*border-bottom: none;*/
		font: 400 12px/1.4 'メイリオ', Helvetica, Verdana, Arial, sans-serif;
	}
	
	#gNavi nav li:last-child a, #gNavi nav li:nth-child(4) a {
		border-right: none;
	}
	
	#gNavi nav li:nth-child(5) a, #gNavi nav li:nth-child(6) a, #gNavi nav li:nth-child(7) a, #gNavi nav li:nth-child(8) a {
		border-bottom: none;
	}
}

@media only screen and (max-width : 460px),
only screen and (max-device-width : 460px){
	#gNavi nav {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;	
	}
	#gNavi nav li a {
		width: 50%;
		font: 400 12px/1.2 'メイリオ', Helvetica, Verdana, Arial, sans-serif;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	#gNavi nav li#gn01 a, #gNavi nav li#gn02 a, #gNavi nav li#gn04 a  {
		border-bottom: 1px solid #fff;
	}
	#gNavi nav li#gn03 a {
		border-left: 1px solid #fff;
		}
	#gNavi nav li#gn02 a {
		border-right: 1px solid #fff;
		}
	
	#gNavi nav li img {
		float: left;
		padding-left: 2%;
	}
	#gNavi nav li:nth-child(even) a {
		border-right: none;
	}
	#gNav navi li:nth-child(5) a, #gNavi nav li:nth-child(6) a {
		/*border-bottom: 1px solid #fff;*/
		border-bottom: none;
	}

}
@media only screen and (max-width : 460px){

	
}	
/*@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	#gNavi nav li a {
		font: 400 13px/1.4 'メイリオ', Helvetica, Verdana, Arial, sans-serif;
	}
}*/