@charset "utf-8";

/*
************************************************************************
* ヘッダー
* @copyright Revolme Inc.
************************************************************************
*/
/* == パソコンフォンサイズ ==========================================================*/
#pcHeader
{
	overflow:hidden;
}
#pcHeader .logo
{
	display:block;
	margin:20px;
	margin-bottom:0px;
	
	font-size:2.0rem;
	font-weight:bold;
	text-align:center;
}
#pcHeader .logo a
{
	color:#FFFFFF;
}
#pcHeader .caption
{
	display:block;
	margin:20px;
	margin-top:0px;
	
	font-size:1.4rem;
	color:#000000;
}
#pcHeader .navi
{
	overflow:hidden;
	
	margin:15px 0px;
	
	border-top:1px solid #318445;
	border-bottom:1px solid #318445;
	
	background-color:#FFFFFF;
}
#pcHeader .navi h2
{
	padding:0.5em 1em;
	
	color:#FFFFFF;
	font-size:1.2rem;
	font-weight:bold;
	line-height:1;
	
	background-color:#318445;
}
#pcHeader .navi ul
{
	margin:10px 10px;
}
#pcHeader .navi ul li
{
	margin:0px;
	padding:0px;
}
#pcHeader .navi ul li a
{
	display:block;
	padding:0.3em 0px;
	color:#318445;
	line-height:1;
}
#pcHeader .navi ul li:last-child a
{
}
/* == タブレットサイズ ==========================================================*/
#tabHeader
{
	height:100px;
	line-height:1;
}
#tabHeader .logo
{
	position:absolute;
	left:10px;
	top:50%;
	-webkit-transform:translate(0%, -50%);
	    -moz-transform:translate(0%, -50%);
	     -ms-transform:translate(0%, -50%);
	         transform:translate(0%, -50%);
	font-size:2.0rem;
	font-weight:bold;
	text-align:center;
}
#tabHeader .logo a
{
	color:#FFFFFF;
}
#tabHeader .btnMenu
{
	position:absolute;
	top:50%;
	right:20px;
	
	-webkit-transform:translate(0%, -50%);
	    -moz-transform:translate(0%, -50%);
	     -ms-transform:translate(0%, -50%);
	         transform:translate(0%, -50%);
	
	width:50px;
	height:auto;
	
	cursor:pointer;
}
#tabHeader .btnMenu > span
{
	display:block;
	width:100%;
	height:4px;
	background-color:#FFFFFF;
}
#tabHeader .btnMenu > span:nth-child(1)
{
}
#tabHeader .btnMenu > span:nth-child(2)
{
	margin-top:15px;
}
#tabHeader .btnMenu > span:nth-child(3)
{
	margin-top:15px;
}
#tabHeader .btnMenu > span:nth-child(4)
{
	background-color:transparent;
	height:auto;
	
	margin-top:0.5em;
	
	color:#FFFFFF;
	font-size:1.0rem;
	text-align:center;
}

/* == スマートフォンサイズ ==========================================================*/
#spHeader
{
	height:18.75vw;
	line-height:1;
}
#spHeader .logo
{
	position:absolute;
	left:1.5625vw;
	top:50%;
	-webkit-transform:translate(0%, -50%);
	    -moz-transform:translate(0%, -50%);
	     -ms-transform:translate(0%, -50%);
	         transform:translate(0%, -50%);
	font-size:2.6rem;
	font-weight:bold;
	text-align:center;
}
#spHeader .logo a
{
	color:#FFFFFF;
}
#spHeader .btnMenu
{
	position:absolute;
	top:50%;
	right:6.25vw;
	
	-webkit-transform:translate(0%, -50%);
	    -moz-transform:translate(0%, -50%);
	     -ms-transform:translate(0%, -50%);
	         transform:translate(0%, -50%);
	         
	width:8.59375vw;
}
#spHeader .btnMenu > span
{
	display:block;
	width:100%;
	height:3px;
	background-color:#FFFFFF;
}
#spHeader .btnMenu > span:nth-child(1)
{
}
#spHeader .btnMenu > span:nth-child(2)
{
	margin-top:2.34375vw;
}
#spHeader .btnMenu > span:nth-child(3)
{
	margin-top:2.34375vw;
}
#spHeader .btnMenu > span:nth-child(4)
{
	background-color:transparent;
	height:auto;
	
	margin-top:0.5em;
	
	color:#FFFFFF;
	font-size:1.4rem;
	text-align:center;
}

/* == タブレットサイズ ==========================================================*/
@media screen and (max-width: 1400px) {
	#spNavi
	{
		line-height:1;
	}
	#spNavi,
	#spNavi a
	{
		color:#FFFFFF;
	}
	#spNavi .header
	{
		width:100%;
		height:100px;
	}
	#spNavi .header .navi-logo
	{
		position:absolute;
		left:10px;
		top:50%;
		-webkit-transform:translate(0%, -50%);
		    -moz-transform:translate(0%, -50%);
		     -ms-transform:translate(0%, -50%);
		         transform:translate(0%, -50%);
		font-size:2.0rem;
		font-weight:bold;
		text-align:center;
	}
	#spNavi .header .btnMenu
	{
		position:absolute;
		top:50%;
		right:20px;
		
		-webkit-transform:translate(0%, -50%);
		    -moz-transform:translate(0%, -50%);
		     -ms-transform:translate(0%, -50%);
		         transform:translate(0%, -50%);
		
		width:50px;
		height:auto;
		
		cursor:pointer;
	}
	#spNavi .header .btnMenu > span
	{
		position:absolute;
		display:block;
		width:100%;
		height:4px;
		background-color:#FFFFFF;
	}
	#spNavi .header .btnMenu > span:nth-child(1)
	{
		-webkit-transform:rotate(40deg);
		        transform:rotate(40deg);
	}
	#spNavi .header .btnMenu > span:nth-child(2)
	{
		-webkit-transform:rotate(-40deg);
		        transform:rotate(-40deg);
	}
	#spNavi .navi
	{
		overflow:hidden;
		
		margin:20px 0px;
		
		background-color:#FFFFFF;
	}
	#spNavi .navi h2
	{
		padding:0.5em 1em;
		
		color:#FFFFFF;
		font-size:1.2rem;
		font-weight:bold;
		line-height:1;
		
		background-color:#318445;
	}
	#spNavi .navi ul
	{
		margin:10px 20px;
	}
	#spNavi .navi ul li
	{
		margin:0px;
		padding:0px;
	}
	#spNavi .navi ul li a
	{
		display:block;
		padding:0.5em 0px;
		color:#318445;
		font-size:2.0rem;
		line-height:1;
	}
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 640px) {
	#spNavi
	{
		line-height:1;
	}
	#spNavi,
	#spNavi a
	{
		color:#FFFFFF;
	}
	#spNavi .header
	{
		width:100%;
		height:18.75vw;
	}
	#spNavi .header .navi-logo
	{
		position:absolute;
		left:1.5625vw;
		top:50%;
		-webkit-transform:translate(0%, -50%);
		    -moz-transform:translate(0%, -50%);
		     -ms-transform:translate(0%, -50%);
		         transform:translate(0%, -50%);
		font-size:2.6rem;
		font-weight:bold;
		text-align:center;
	}
	#spNavi .header .btnMenu
	{
		position:absolute;
		top:50%;
		right:6.25vw;
		
		-webkit-transform:translate(0%, -50%);
		    -moz-transform:translate(0%, -50%);
		     -ms-transform:translate(0%, -50%);
		         transform:translate(0%, -50%);
		
		width:8.59375vw;
		height:auto;
		
		cursor:pointer;
	}
	#spNavi .header .btnMenu > span
	{
		position:absolute;
		display:block;
		width:100%;
		height:3px;
		background-color:#FFFFFF;
	}
	#spNavi .header .btnMenu > span:nth-child(1)
	{
		-webkit-transform:rotate(40deg);
		        transform:rotate(40deg);
	}
	#spNavi .header .btnMenu > span:nth-child(2)
	{
		-webkit-transform:rotate(-40deg);
		        transform:rotate(-40deg);
	}
	#spNavi .navi
	{
		overflow:hidden;
		
		margin:3.125vw 0px;
		
		background-color:#FFFFFF;
	}
	#spNavi .navi h2
	{
		padding:0.5em 1em;
		
		color:#FFFFFF;
		font-size:2.2rem;
		font-weight:bold;
		line-height:1;
	}
	#spNavi .navi ul
	{
		margin:10px 20px;
	}
	#spNavi .navi ul li
	{
		margin:0px;
		padding:0px;
	}
	#spNavi .navi ul li a
	{
		display:block;
		padding:0.5em 0px;
		color:#318445;
		font-size:3.6rem;
		line-height:1;
	}
}