@charset "utf-8";
/*
************************************************************************
 グローバルナビ
************************************************************************
*/
#global-navi
{
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	background-color:var(--navi-background-color);
	border-bottom:1px solid var(--navi-frame-color);
	
	width:100%;
}
#global-navi .page-title
{
	flex:1 1 auto;
	line-height:1.2;
	padding:1.0em;
}
#global-navi .page-title > .sub
{
	display: block;
	font-size: 0.8em;
	line-height:1.4;
	color:var(--navi-font-color-light);

	margin-bottom:0.5em;
}
#global-navi .page-title > .main
{
	font-size:1.5em;
	font-weight:bold;
	color:var(--navi-font-color);
}

/* ナビボタン */
#global-navi .btnMenu
{
	display:none;
}

/* ナビメニュー */
#global-navi .global-navi-menu
{
	flex:0 1 auto;
	display: block;
}
#global-navi .global-navi-menu > ul
{
	display: flex;
	align-items: center;
	align-content: center;
	
	margin:0;
	padding:0;
	list-style:none;
}
#global-navi .global-navi-menu > ul > li.navi-menu-main
{
	margin:0;
	padding:0;
	list-style:none;
}
#global-navi .global-navi-menu > ul > li.navi-menu-main > a
{
	display: flex;
	align-items: center;
	align-content: center;
	
	padding:0.8em 0.5em;
	
	line-height:1;
	
	color:var(--body-font-color);
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
#global-navi .global-navi-menu > ul > li.navi-menu-main > a > i
{
	font-size:1.5em !important;
	margin-right:0.25em;
	/* color:var(--navi-font-color-light); */
	color:transparent;
}
#global-navi .global-navi-menu > ul > li.navi-menu-main > a > .label
{
	color:var(--navi-font-color);
}
#global-navi .global-navi-menu > ul > li.navi-menu-main > a > .label > .main
{
	display:block;
	color:var(--navi-font-color);
}
#global-navi .global-navi-menu > ul > li.navi-menu-main > a > .label > .sub
{
	display:block;
	font-size:0.5em;
	margin-top:0.5em;
	padding-left:0.25em;
	color:var(--navi-font-color-light);
}
#global-navi .global-navi-menu > ul > li.navi-menu-main > a:hover,
#global-navi .global-navi-menu > ul > li.navi-menu-main > a.active
{
	/* background-color:var(--navi-icon-color-light); */
}
#global-navi .global-navi-menu > ul > li.navi-menu-main > a:hover > i,
#global-navi .global-navi-menu > ul > li.navi-menu-main > a.active > i
{
	color:var(--navi-icon-color);
}
#global-navi .global-navi-menu > ul > li.navi-menu-main > a:hover > .label > .main,
#global-navi .global-navi-menu > ul > li.navi-menu-main > a.active > .label > .main
{
	color:var(--navi-font-color);
}
#global-navi .global-navi-menu > ul > li.navi-menu-main > a:hover > .label > .sub,
#global-navi .global-navi-menu > ul > li.navi-menu-main > a.active > .label > .sub
{
	color:var(--navi-icon-color);
}
#global-navi .global-navi-menu > ul.sub
{
	width:100%;
	justify-content: flex-end;
}
#global-navi .global-navi-menu > ul > li.navi-menu-sub
{
	margin:0;
	padding:0;
	list-style:none;
}
#global-navi .global-navi-menu > ul > li.navi-menu-sub > a
{
	display: flex;
	align-items: center;
	align-content: center;
	
	padding:0.5em 0.5em 0.25em 0.5em;
	
	line-height:1;
	
	color:var(--navi-font-color-light);
}
#global-navi .global-navi-menu > ul > li.navi-menu-sub > a > i
{
	font-size:1.2em !important;
	margin-right:0.25em;
	color:var(--navi-font-color-light);
}
#global-navi .global-navi-menu > ul > li.navi-menu-sub > a > .label > .main
{
	display:block;
	font-size:0.8em;
	color:var(--navi-font-color-light);
}
#global-navi .global-navi-menu > ul > li.navi-menu-sub > a:hover > .label > .main
{
	text-decoration:underline;
}




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

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	/* ナビボタン */
	#global-navi .btnMenu
	{
		display:block;
		
		flex:0 0 5em;
		width:5em;
		height:5em;
		cursor:pointer;
	}
	#global-navi .btnMenu > span.border
	{
		display:block;
		position:absolute;
		
		left:20%;
		right:20%;
		
		width:60%;
		height:0px;
		
		border-bottom:2px solid var(--navi-icon-color);
		
		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}
	#global-navi .btnMenu > span.border:nth-child(1){top:20%;}
	#global-navi .btnMenu > span.border:nth-child(2){top:40%;}
	#global-navi .btnMenu > span.border:nth-child(3){top:60%;}
	#global-navi .btnMenu > span.label
	{
		display:block;
		position:absolute;
		
		top:70%;
		left:0%;
		right:0%;
		
		width:100%;
		height:0px;
		
		text-align:center;
		
		font-size:0.5em;
		color:var(--navi-font-color);
	}
	#global-navi .btnMenu > span.label > .close{display:block;}
	#global-navi .btnMenu > span.label > .open{display:none;}

	#global-navi.show .btnMenu > span.border:nth-child(1){
		transform:rotate(45deg);
		top:40%;
	}
	#global-navi.show .btnMenu > span.border:nth-child(2){
		opacity: 0.0;
	}
	#global-navi.show .btnMenu > span.border:nth-child(3){
		transform:rotate(-45deg);
		top:40%;
	}
	#global-navi.show .btnMenu > span.label > .close{display:none;}
	#global-navi.show .btnMenu > span.label > .open{display:block;}

	/* ナビメニュー */
	#global-navi .global-navi-menu
	{
		display:none;
		opacity:0.0;
		
		position:absolute;
		top:calc(100% + 0.5em);
		right:0.5em;
		
		background-color:var(--body-background-color);
		border-radius:var(--border-radius);
		border:1px solid var(--body-frame-color);
		box-shadow: 2px 2px 3px 0px var(--color-gray-light);
		
		padding:0.5em;
		width:300px;

		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}
	#global-navi.show  .global-navi-menu
	{
		display: flex;
		flex-wrap: wrap;
		
		opacity:1.0;
	}
	#global-navi .global-navi-menu:before,
	#global-navi .global-navi-menu:after
	{
		content:'';
		position:absolute;
		right:calc(1.0em + var(--border-radius) / 2);
		
		width:0;
		height:0;
		overflow:hidden;
		
		border:1.0em solid transparent;
	}
	#global-navi .global-navi-menu:before
	{
		top:-2.0em;
		border-bottom:1.0em solid var(--body-frame-color);
	}
	#global-navi .global-navi-menu:after
	{
		top:calc(-2.0em + 1px);
		border-bottom:1.0em solid var(--body-background-color);
	}
	#global-navi .global-navi-menu > ul
	{
		border-radius:var(--border-radius);
		overflow: hidden;
	}
	#global-navi .global-navi-menu > ul.sub
	{
		border-radius:0;
	}


	#global-navi .global-navi-menu > ul,
	#global-navi .global-navi-menu > ul > li
	{
		margin:0;
		padding:0;
		list-style:none;
	}
	#global-navi .global-navi-menu > ul
	{
		display: flex;
		flex-wrap: wrap;
		
		width:100%;
		order:0;
	}
	#global-navi .global-navi-menu > ul.sub
	{
		order:1;
		display:block;
		margin-top:0.5em;
		padding-top:0.5em;
		border-top:1px dashed var(--body-border-color);
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-main
	{
		flex:0 0 100%;
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-sub
	{
		flex:0 0 100%;
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a
	{
		display: flex;
		align-items: center;
		align-content: center;
		
		padding:0.8em 0.5em;
		
		line-height:1;
		
		color:var(--body-font-color);
		
		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a > i
	{
		font-size:1.5em !important;
		margin-right:0.25em;
		color:var(--body-font-color-light);
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a > .label
	{
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a > .label > .main
	{
		display:block;
		color:var(--body-font-color);
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a > .label > .sub
	{
		display:block;
		font-size:0.5em;
		margin-top:0.5em;
		padding-left:0.25em;
		color:var(--body-font-color-light);
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a:hover,
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a.active
	{
		background-color:var(--body-icon-color-light);
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a:hover > i,
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a.active > i
	{
		color:var(--body-icon-color);
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a:hover > .label > .main,
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a.active > .label > .main
	{
		color:var(--body-font-color);
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a:hover > .label > .sub,
	#global-navi .global-navi-menu > ul > li.navi-menu-main > a.active > .label > .sub
	{
		color:var(--body-icon-color);
	}

	#global-navi .global-navi-menu > ul > li.navi-menu-sub > a
	{
		display: flex;
		align-items: center;
		align-content: center;
		
		padding:0.5em 0.5em;
		
		line-height:1;
		
		color:var(--body-font-color-light);
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-sub > a > i
	{
		font-size:1.2em !important;
		margin-right:0.25em;
		color:var(--body-font-color-light);
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-sub > a > .label > .main
	{
		display:block;
		font-size:0.8em;
		color:var(--body-font-color-light);
	}
	#global-navi .global-navi-menu > ul > li.navi-menu-sub > a:hover > .label > .main
	{
		text-decoration:underline;
	}
}