@charset "utf-8";

/*

************************************************************************

 グローバルナビ

************************************************************************

*/

#global-navi

{

	display: flex;

	align-items: center;

	align-content: center;

	justify-content: flex-start;


	background-image: url(../../img/header/bg-navi-board.jpg);
	background-position: 50% 0;
	background-repeat: repeat-x;

	width:100%;
	padding: 1em;
}

#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;

	margin: 0 auto;

	width: 1100px;

}

#global-navi .global-navi-menu > ul

{

	display: flex;

	align-items: center;

	align-content: center;

	justify-content: space-between;

	margin:0;

	padding:0;

	list-style:none;

}

#global-navi .global-navi-menu > ul > li.navi-menu-main
{
	margin:0;
	padding:3px;
	list-style:none;
	background-color: #fffb00;

}

#global-navi .global-navi-menu > ul > li.navi-menu-main:hover a::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;

	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;


	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;

	background-image: url(../../img/header/navigation/home.png);
}



#global-navi .global-navi-menu > ul > li.navi-menu-main.navi-home {
	background-color :#fffb00;
}
#global-navi .global-navi-menu > ul > li.navi-menu-main.navi-home:hover ::before {
	background-image: url(../../img/header/navigation/home.png);
}





#global-navi .global-navi-menu > ul > li.navi-menu-main.navi-about {
	background-color :#1ce88a;
}


#global-navi .global-navi-menu > ul > li.navi-menu-main.navi-stage {
	background-color :#f499aa;
}
#global-navi .global-navi-menu > ul > li.navi-menu-main.navi-shop {
	background-color :#21ddee;
}
#global-navi .global-navi-menu > ul > li.navi-menu-main.navi-archive {
	background-color :#cba8f0;
}
#global-navi .global-navi-menu > ul > li.navi-menu-main.navi-contact {
	background-color :#fcbe5c;
}









#global-navi .global-navi-menu > ul > li.navi-menu-main > a

{

	display: flex;

	align-items: center;

	align-content: center;



	padding:1em 1em 0.75em 1em;



	line-height:1;



	color:var(--body-font-color);


	border-color: #471b07;
	border:3px solid;


	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);
	font-size: 2em;
	letter-spacing: 0;
}

#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 {
		padding: 0;
		height: 100%;
		background-image: url(../../img/header/bg-header-board.png);
	}
	/* ナビボタン */

	#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;


		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;

	}

}