@charset "utf-8";
/*
************************************************************************
 グローバルヘッダー
************************************************************************
*/
#header
{
	border-bottom:1px solid #CCCCCC;
}
#header-contents
{
	background-color: var(--bg-color-01);
}
#header-contents > .navi
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
}
#header-contents > .navi > .space
{
	flex:1 0 auto;
}
#header-contents > .navi > .navi-item
{
	flex:0 0 auto;
	padding:1.0em 1.0em;
	
	display: inline-flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	
	line-height:1;

	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
#header-contents > .navi > .navi-item > i
{
	font-size: 2.0em !important;
	color:#666666;
}
#header-contents > .navi > .navi-item > .label
{
	font-size: 0.8em;
	margin-top: 0.25em;
}
#header-contents > .navi > .navi-item.active > i,
#header-contents > .navi > .navi-item:hover > i
{
	color:var(--main-color-01);
}

#header-contents > .navi > .navi-item.navi-item-small
{
	padding:0.8em 1.0em;
	font-size:0.9em;
}
#header-contents > .navi > .navi-item.navi-item-small > .label
{
	font-size: 0.8em;
	color:#666666;
}
#header-contents > .navi > .navi-item.navi-item-small > i
{
	margin-right:0.25em;
}


/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1200px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	#header-contents > .navi
	{
		/*display: none;*/
	}
	#header-contents.show > .navi
	{
		/*display: flex;*/
	}
	#header-contents > .info
	{
		display: flex;
		align-items: center;
		align-content: center;
	}
	#header-contents > .info > div
	{
		flex: 1 0 auto;
	}
	#header-contents > .info > div.mobile
	{
		display:block;
		flex: 0 0 12vw;
		height:12vw;
		margin-left: 1.0em;
		background-color:transparent;
		border:1px solid transparent;
		padding:0;
	}
	#header-contents > .info > div.mobile > button.btnMenu
	{
		width:12vw;
		height:12vw;
		
		background-color:transparent;
		border:1px solid transparent;
	}
	#header-contents > .info > div.mobile > button.btnMenu > span
	{
		display:block;
		position:absolute;
		
		left:10%;
		right:10%;
		
		width:80%;
		height:0px;
		
		border-bottom:2px solid #000000;;
		
		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}
	#header-contents > .info > div.mobile > button.btnMenu > span:nth-child(1){top:25%;}
	#header-contents > .info > div.mobile > button.btnMenu > span:nth-child(2){top:50%;}
	#header-contents > .info > div.mobile > button.btnMenu > span:nth-child(3){top:75%;}
	
	#header-contents.show > .info > div.mobile > button.btnMenu > span:nth-child(1){
		transform:rotate(45deg);
		top:45%;
	}
	#header-contents.show > .info > div.mobile > button.btnMenu > span:nth-child(2){
		opacity: 0.0;
	}
	#header-contents.show > .info > div.mobile > button.btnMenu > span:nth-child(3){
		transform:rotate(-45deg);
		top:45%;
	}
}