@charset "utf-8";

/*
************************************************************************
* ヘッダー
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
#header
{
}
#header-contents
{
}

/*
************************************************************************
 ナビゲーションラッパー
************************************************************************
*/
#header .navigation-wrapper
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
#header .navigation-wrapper > *
{
	flex:0 0 100%;
	padding:1.0em;
}
#header .navigation-wrapper .logo
{
	
}
#header .navigation-wrapper .logo .title
{
	font-size:2.0em;
	font-weight:bold;
	
	line-height:1;
	text-align:center;
}
#header .navigation-wrapper .logo .description
{
	font-size:0.9em;
	line-height:1.4;
	margin-top:1.0em;
}

#header .navigation-wrapper .navigation > ul
{
	margin:0;
	padding:0;
	list-style:none;
}
#header .navigation-wrapper .navigation > ul > li
{
	margin:0;
	padding:0;
	list-style:none;
}
#header .navigation-wrapper .navigation > ul > li > a
{
	display: flex;
	align-items: center;
	
	padding:0.8em 0.5em;
}
#header .navigation-wrapper .navigation > ul > li > a > .label
{
	display:block;
	line-height:1;
	margin-left:0.5em;
}
#header .navigation-wrapper .navigation > ul > li > a > .label > .main
{
	display:block;
	
	font-size:1.0em;
	font-weight:bold;
}
#header .navigation-wrapper .navigation > ul > li > a > .label > .sub
{
	display:block;
	
	font-size:0.8em;
	
	margin-top:0.5em;
}
#header .navigation-wrapper .navigation > ul > li > .navigation-child
{
	display:none;
	
	margin:0;
	padding:0;
	list-style:none;
	
	padding:0.5em;
	padding-left:1.0em;
}

#header .navigation-wrapper .navigation > ul > li > a.on > i
{
	transform:rotate(90deg);
}
#header .navigation-wrapper .navigation > ul > li > .navigation-child.on
{
	display:block;
}
#header .navigation-wrapper .navigation > ul > li > .navigation-child> li > a
{
	display: flex;
	align-items: center;
}
#header .navigation-wrapper .navigation > ul > li > .navigation-child> li > a:hover > .label
{
	border-bottom:1px dashed;
}
#header .navigation-wrapper .btnMenu
{
	display:none;
	width:4em;
	height:4em;
}
#header .navigation-wrapper .btnMenu > .border
{
	display:block;
	position:absolute;
	
	left:15%;
	right:15%;
	
	width:70%;
	height:0px;
	
	border-bottom:2px solid;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
#header .navigation-wrapper  .btnMenu > .border:nth-child(1){top:20%;}
#header .navigation-wrapper  .btnMenu > .border:nth-child(2){top:40%;}
#header .navigation-wrapper  .btnMenu > .border:nth-child(3){top:60%;}
#header .navigation-wrapper  .btnMenu > .label
{
	display:block;
	position:absolute;
	
	left:0%;
	right:0%;
	top:70%;
	
	width:100%;
	
	line-height:1;
}
#header .navigation-wrapper  .btnMenu > .label.close
{
	display:none;
}
#header.showMenu .navigation-wrapper  .btnMenu > .label.close
{
	display:block;
}
#header.showMenu .navigation-wrapper  .btnMenu > .label.menu
{
	display:none;
}
#header.showMenu .navigation-wrapper  .btnMenu > .border:nth-child(1)
{
	transform:rotate(45deg);
	top:40%;
}
#header.showMenu .navigation-wrapper  .btnMenu > .border:nth-child(2)
{
	filter:alpha(opacity=0);
	-moz-opacity: 0.0;
	opacity: 0.0;
}
#header.showMenu .navigation-wrapper  .btnMenu > .border:nth-child(3)
{
	transform:rotate(-45deg);
	top:40%;
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1200px) {
	#header .navigation-wrapper
	{
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	#header .navigation-wrapper .logo
	{
		flex:1 1 auto;
	}
	#header .navigation-wrapper .logo .title
	{
		text-align:left;
	}
	#header .navigation-wrapper .navigation
	{
		display:none;
		
		position:absolute;
		top:100%;
		left:0;
		right:0;
		
		width:100%;
		height:auto;
	}
	#header.showMenu .navigation-wrapper .navigation
	{
		display:block;
	}

	#header .navigation-wrapper .btnMenu
	{
		display:block;
		flex:0 0 auto;
	}
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
}