@charset "utf-8";

/*
************************************************************************
* ヘッダー
* @copyright Revolme Inc.
************************************************************************
*/
#header.show
{
	position:absolute;
}
#header .mobile-menu
{
	display:none;
}

#header.show + #body
{
	margin-top:15vw;
}
#header.show .mobile-menu
{
	display:block;
	
	position:absolute;
	top:100%;
	
	padding-bottom:2em;
}

/* == パソコンフォンサイズ ==========================================================*/
#pcHeader
{
	overflow:hidden;
	
	padding:1em;
	
	line-height:1.2;
	
}
#pcHeader .logo
{
	width:100%;
	padding-top:66.666%;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}

#pcHeader .caption
{
	margin-top:1em;
}
#pcHeader .navi
{
	margin-top:1.5em;
	margin-bottom:1.5em;
}
#pcHeader .navi ul
{
	overflow:hidden;
	
	display:block;
	
	margin:0;
	padding:0em;
	
	list-style:none;
}
#pcHeader .navi ul li
{
	display:block;
	margin:0;
	padding:0;
	
	border-bottom:1px solid;
}
#pcHeader .navi ul li:last-child
{
	border-bottom:0px solid;
}
#pcHeader .navi ul li a
{
	display:block;
	padding:0.7em 0.8em;
	border-left:0.2em solid transparent;
}
#pcHeader .navi ul li a:after
{
	content:"";
	
	display:block;
	position:absolute;
	right:0.5em;
	top:50%;
	
	transform:translateY(-50%);
	
	width:0.8em;
	height:0.8em;
	
	background-image:url(../../../_img/icons/navi-icon.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
#pcHeader .sns
{
	margin:0;
	padding:0em;
	list-style:none;
	
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-around;
	
	padding:0.8em;
}
#pcHeader .sns li
{
	margin:0;
	padding:0em;
}
#pcHeader .sns li a img
{
	width:2em;
	height:2em;
}


/* == タブレットサイズ ==========================================================*/
#tabHeader
{
	height:80px;
	
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
}
#tabHeader .logo
{
	padding:15px;
}
#tabHeader .btn-ext,
#tabHeader .btn-menu
{
	padding:20px;
}
#tabHeader .btn-ext a,
#tabHeader .logo a,
#tabHeader .btn-menu a
{
	display:block;
	
	width:100%;
	height:100%;
}
#tabHeader .logo
{
	flex-grow: 5;
	height:80px;
	
	border-left:1px solid;
	border-right:1px solid;
}
#tabHeader .logo a
{
	background-image:url(../../../_img/logo-sp.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
#tabHeader .btn-menu
{
	width:80px;
	height:80px;
}
#tabHeader .btn-menu a
{
	background-image:url(../../../_img/icons/menu.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
#tabHeader .btn-ext
{
	width:80px;
	height:80px;
}
#tabHeader .btn-ext a
{
	background-image:url(../../../_img/icons/header-ext.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
/* == スマートフォンサイズ ==========================================================*/
#spHeader
{
	height:15vw;
	
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
}
#spHeader .logo
{
	padding:1.5vw;
}
#spHeader .btn-ext,
#spHeader .btn-menu
{
	padding:3.0vw;
}
#spHeader .btn-ext a,
#spHeader .logo a,
#spHeader .btn-menu a
{
	display:block;
	
	width:100%;
	height:100%;
}
#spHeader .btn-ext
{
	width:15vw;
	height:15vw;
}
#spHeader .logo
{
	width:70vw;
	height:15vw;
	
	border-left:1px solid;
	border-right:1px solid;
}
#spHeader .logo a
{
	background-image:url(../../../_img/logo-sp.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
#spHeader .btn-menu
{
	width:15vw;
	height:15vw;
}
#spHeader .btn-menu a
{
	background-image:url(../../../_img/icons/menu.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
#spHeader .btn-ext
{
	width:15vw;
	height:15vw;
}
#spHeader .btn-ext a
{
	background-image:url(../../../_img/icons/header-ext.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}

/*
************************************************************************
 モバイルメニュー
************************************************************************
*/
#mobileMenu
{
	display:none;
	position:absolute;
	
	width:100%;
	
	padding:3%;
	padding-bottom:5%;
}
#mobileMenu .caption
{
	margin-top:1em;
}
#mobileMenu .navi
{
	margin-top:1.5em;
	margin-bottom:1.5em;
}
#mobileMenu .navi ul
{
	overflow:hidden;
	
	display:block;
	
	margin:0;
	padding:0em;
	
	list-style:none;
}
#mobileMenu .navi ul li
{
	display:block;
	margin:0;
	padding:0;
	
	border-bottom:1px solid;
}
#mobileMenu .navi ul li:last-child
{
	border-bottom:0px solid;
}
#mobileMenu .navi ul li a
{
	display:block;
	padding:0.7em 0.8em;
	border-left:0.2em solid transparent;
}
#mobileMenu .navi ul li a:after
{
	content:"";
	
	display:block;
	position:absolute;
	right:0.5em;
	top:50%;
	
	transform:translateY(-50%);
	
	width:0.8em;
	height:0.8em;
	
	background-image:url(../../../_img/icons/navi-icon.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
#mobileMenu .sns
{
	margin:0;
	padding:0em;
	list-style:none;
	
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-around;
	
	padding:0.8em;
}
#mobileMenu .sns li
{
	margin:0;
	padding:0em;
}
#mobileMenu .sns li a img
{
	width:3em;
	height:3em;
}
/* == タブレットサイズ ==========================================================*/
@media screen and (max-width: 1200px) {
	#mobileMenu
	{
		top:80px;
	}
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 640px) {
	#mobileMenu
	{
		top:15vw;
	}
}

/*
************************************************************************
 グローバルナビ
************************************************************************
*/
/* == タブレットサイズ ==========================================================*/
@media screen and (max-width: 1200px) {
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 640px) {
}