﻿@charset "utf-8";



#four{
	width:100%;
	font-size:0;
    background:rgba(51, 51, 51, 0.6);
	display:none;
}

#four li{
	width:25%;
	display:inline-block;
	font-size:16px;
	text-align:center;
	font-family: 'Montserrat', sans-serif;
	/*border-right:1px solid rgba(252, 252, 252, 0.3);*/
}

#four li a{
	display:block;
	padding:15px 0;
	color:#fff;
}

#four li a:hover{
	text-decoration:none;
    background:rgba(51, 51, 51, 0.7);
}

#four li a.on{
    background:rgba(51, 51, 51, 0.7);
}



#four li:last-child{
	border:none;
}









h1#logo{
	width:26%;
	position:absolute;
	max-width:115px;
	z-index:1000;
	top:25px;
	left:3%;
}

h1#logo img{
	width:100%;
	padding:5px 10px;
}

#header{
	width:100%;
	height:80px;
	/**/position:absolute;
	z-index:6000;
	text-align:center;
    background:rgba(51, 51, 51, 0.9);
	border-top:1px solid rgba(252, 252, 252, 0.3);
	font-family: 'Montserrat', sans-serif;
}



/* ------------------------------
   #menuList
------------------------------ */
#menuList {
	position: relative;
	z-index: 10;
	font-size:15px;
	text-align:right;
	vertical-align:middle;
	top:-10px;
}


#menuList ul {
	width:95%;
	margin: 0 auto;
	position:absolute;
  	right:2%;
	top:10px;
	display:inline-block;
	text-align:right;
}

#menuList ul li {
	display:inline-block;
}

#menuList ul li a {
	transition: all 0.2s linear;
	color:#fff;
	text-decoration:none;
	padding:10px 10px;
}

#menuList dl {
	display:inline-block;
}

#menuList dl dt{
	display:inline-block;
	width:22px;
	vertical-align:middle;
	margin-left:5px !important;
}

#menuList dl img{
	width:100%;
}

#trans{
	display:inline-block;
	margin:30px 0 0 15px;
	text-align:right;
}

#translate-this a{
	font-size:0;
}



/*#header #translation2{
	width:330px;
	height:auto;
	float:right;
	margin:10px 0 0 0px;
}


#header #translate-this{
	width:185px;
	float:left;
	margin:3px 5px 0 0;
}*/



/* ------------------------------
   MEDIAQUERIES LAYOUT
------------------------------ */
/*@media only screen and (max-width: 1000px) {
	#menuList ul {
		width: 100%;
	}

	#menuList ul li {
		width: 20%;
	}

}*/

/* ------------------------------
   MEDIAQUERIES[SP]LAYOUT
------------------------------ */
@media only screen and (max-width: 1180px) {
		#rwdMenuWrap img:nth-of-type(2n){
			display:none !important;
		}
	
		#rwdMenuWrap img:nth-of-type(2n+1){
			display:inline-block !important;
		}

	#logo{
		width:50%;
		/*display:inline-block;*/
		/*width:62%;
		margin:0 0 0 18%;*/
	}
	#menuList {
		display: none;
	}

	#menuOverlay {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.6);
		display: none;
		position: fixed;
		z-index: 9997;
	}

	#switchBtnArea {
		width: 100%;
		position: relative;
		top:0px;
		display:inline-block;
	}

	#switchBtnArea #switchBtn {
		top: 18px;
		right: 10px;
		width: 38px;
		height: 46px;
		display: block;
		position: absolute;
		z-index: 9998;
	}

	#switchBtnArea #switchBtn span {
		/*right: 20%;*/
		width: 100%;
		height: 5px;
		display: block;
		position: absolute;
		background-color: #fff;
		transition: all 0.2s linear;
	}
	#switchBtnArea #switchBtn span:nth-of-type(1) {top:12px;transform: rotate(0);}
	/*#switchBtnArea #switchBtn span:nth-of-type(2) {top:18px;transform: scale(1);}*/
	#switchBtnArea #switchBtn span:nth-of-type(2) {bottom:12px;transform: rotate(0);}

	#switchBtnArea #switchBtn.btnClose {background: transparent;}
	#switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {top:21px;transform: rotate(-45deg); background:#fff;}
	/*#switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {transform: scale(0);}*/
	#switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {bottom:21px;transform: rotate(45deg); background:#fff;}

	#rwdMenuWrap {
		top: 0;
		right: -240px;
		width: 240px;
		height: 100%;
		background:rgba(13, 11, 15, .8);
		overflow: auto;
		position: fixed;
		z-index: 9999;
	font-family: 'Montserrat', sans-serif;
	}

	#rwdMenuWrap ul {
		width: 100%;
		font-size:16px;
	}

	#rwdMenuWrap ul li {
		width: 100%;
	}

	#rwdMenuWrap ul li a {
		padding: 10px 0 10px 10px;
		text-align: left;
		display: block;
		color:#fff;
	}

	#rwdMenuWrap ul li a:hover {
		text-decoration:none;
	}

		#rwdMenuWrap dl{
			width:80%;
	display:inline-block;
	margin:0 auto 0;
		}

#rwdMenuWrap dl dt{
	display:inline-block;
	width:30px;
	vertical-align:middle;
	margin:15px 0 0 20px;
}

#rwdMenuWrap dl img{
	width:100%;
}
		
		#rwdMenuWrap #trans{
			display:none;
		}

	
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
#menuList > ul:before,
#menuList > ul:after {
	content: " ";
	display: table;
}
#menuList > ul:after {clear: both;}
#menuList > ul {*zoom: 1;}



@media only screen and (max-width: 768px) { 
#four li{
	font-size:11px;
}
}



@media only screen and (max-width: 680px) { 

#menuList .sp{
	display:block !important;
}

}


@media only screen and (max-width: 550px) { 
#four li{
	width:50%;
	font-size:12px;
}

#four li:nth-of-type(1){
	border-bottom:1px solid rgba(51, 51, 51, 0.7);
	border-left:1px solid rgba(51, 51, 51, 0.7);
	box-sizing: border-box;
}

#four li:nth-of-type(2){
	border-bottom:1px solid rgba(51, 51, 51, 0.7);
	box-sizing: border-box;
}

#four li:nth-of-type(3){
	border-right:1px solid rgba(51, 51, 51, 0.7);
	box-sizing: border-box;
}

}






