/*////////////////////////////////////////////////////////////////////////////*/

/*! gmenu.css */

/*////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	グローバルナビゲーション

------------------------------------------------------------------------------*/


/*	コンテナー
------------------------------------------------------------------------------*/

.site-header-menu {
	display: none;/* JS制御 */
	/**/
	overflow: auto;
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	/**/
	opacity: 0;
}

.site-header-menu > * {
	z-index: 2;
}


/*	グローバルメニューOPEN時
------------------------------------------------------------------------------*/

/* 通常時 */
body {
	overflow-y: auto;
}

/* メニュー表示中は背景をロック＋右側にスクロールバー幅ぶんの余白を確保 */
body.menu-open {
	overflow: hidden;
	padding-right: var(--body-scrollbar-width, 0px);
}

/**/

.menu-open .site-header {
	position: absolute;
	z-index: 9999;
	/**/
	height: 100dvh;
}

.menu-open .site-header-menu {
	--gmenu-bg-color: rgb(var(--gmenu-bg-color-rgb, var(--menu-bg-color-rgb, 255 255 255)));
	--gmenu-text-color: rgb(var(--gmenu-text-color-rgb, var(--menu-text-color-rgb, 0 0 0)));
	/**/
	display: grid;
	place-items: center;
	/**/
	background-color: rgb(var(--gmenu-bg-color-rgb, var(--menu-bg-color-rgb, 255 255 255)) / var(--gmenu-bg-color-a, var(--menu-bg-color-a, 1)));
	color: rgb(var(--gmenu-text-color-rgb, var(--menu-text-color-rgb, 0 0 0)) / var(--gmenu-text-color-a, var(--menu-text-color-a, 1)));
	/**/
	-webkit-backdrop-filter: var(--gmenu-bg-blur, none);
	backdrop-filter: var(--gmenu-bg-blur, none);
	/**/
	animation: showMenu var(--gmenu-bg-duration, .5s) forwards;
}

@keyframes showMenu {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/*	グローバルメニューOPEN時　その他制御
------------------------------------------------------------------------------*/

.menu-open > *:not(.site-header) {
	pointer-events: none;
}

.menu-open .site-header > *:not(.site-header-menu) {
	display: none;
}


/*	サイトマップ
------------------------------------------------------------------------------*/

.site-header-menu > .sitemap {
	--sitemap-bg-color-rgb: var(--gmenu-bg-color-rgb, var(--menu-bg-color-rgb, 255 255 255));
	--sitemap-bg-color-a:  var(--gmenu-bg-color-a, var(--menu-bg-color-a, 1));
	--sitemap-bg-color: rgb(var(--gmenu-bg-color-rgb) / var(--gmenu-bg-color-a));
	--sitemap-text-color-rgb: var(--gmenu-text-color-rgb, var(--menu-text-color-rgb, 255 255 255));
	--sitemap-text-color-a: var(--gmenu-text-color-a, var(--menu-text-color-a, 1));
	--sitemap-text-color: rgb(var(--gmenu-text-color-rgb) / var(--gmenu-text-color-a));
}

.menu-open .site-header-menu .sitemap {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
	height: auto;
	vertical-align: middle;
}


/*------------------------------------------------------------------------------

	CLOSEボタン

------------------------------------------------------------------------------*/


/*	ボタンコンテナ
------------------------------------------------------------------------------*/

.menu-close-button {
	--close-button-bg-color: rgb(var(--sitemap-text-color-rgb));
	--close-button-border-color: rgb(var(--sitemap-text-color-rgb));
	--close-button-text-color: rgb(var(--sitemap-bg-color-rgb));
	/**/
	--close-button-bg-invert-color: rgb(var(--sitemap-bg-color-rgb));
	--close-button-border-invert-color: rgb(var(--sitemap-bg-color-rgb));
	--close-button-text-invert-color: rgb(var(--sitemap-text-color-rgb));
	/**/
	position: absolute;
	z-index: 9999;
	right: var(--gmenu-button-right, 0px);
	top: var(--gmenu-button-top, 0px);
	/**/
	overflow: hidden;
	background: var(--close-button-bg-color);
	border: var(--btn-border-width) solid var(--close-button-border-color);
	color: var(--close-button-text-color);
	/**/
	transition: right .5s ease-out,
	            opacity 1s ease-out,
	            background-color .2s ease-out;
	opacity: 0;
}

.menu-close-button.active {
	right: 0;
	opacity: 1;
}


/*	アイコン
------------------------------------------------------------------------------*/

.menu-button-icon.close::before,
.menu-button-icon.close::after {
	--sqrt2: 1.41421356237;
	/**/
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--menu-icon-width) * var(--sqrt2));
	height: var(--menu-burger-width);
	background: var(--close-button-text-color);
}

.menu-button-icon.close::before {
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.menu-button-icon.close::after {
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}


/*	HOVER
------------------------------------------------------------------------------*/

@media (any-hover: hover) {

	.menu-close-button:hover {
		cursor: pointer;
		background-color: var(--close-button-bg-invert-color);
		border-color: var(--close-button-border-invert-color);
		color: var(--close-button-text-invert-color);
	}

	.menu-close-button:hover .menu-button-icon.close::before,
	.menu-close-button:hover .menu-button-icon.close::after {
		background: var(--close-button-text-invert-color);
	}

/**/}
@media (any-hover: none) {

	.menu-close-button:active {
		background-color: var(--close-button-bg-invert-color);
		border-color: var(--close-button-border-invert-color);
		color: var(--close-button-text-invert-color);
	}

	.menu-close-button:active .menu-button-icon.close::before,
	.menu-close-button:active .menu-button-icon.close::after {
		background: var(--close-button-text-invert-color);
	}

/**/}