/* =========================================
   Global Menu Wrapper START
========================================= */

/* ヘッダー全体 */
.grm-global-menu{
	background:rgba(var(--grm-menu-bg-rgb), var(--grm-menu-bg-opacity));
	position:relative;
	z-index:9999;
	height:var(--grm-header-height-pc);

	transition:
		background-color .35s ease,
		background .35s ease;
}

/* ヘッダー内側 */
.grm-global-menu-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:100%;
	padding:0 30px;
	box-sizing:border-box;
}

/* ロゴ画像 */
.grm-global-menu-logo img{
	display:block;
	width:var(--grm-logo-width-pc);
	max-width:100%;
	height:auto;

	transition:
		opacity .25s ease;
}

/* =========================================
   Global Menu Wrapper END
========================================= */


/* =========================================
   PC Main Menu START
========================================= */

/* 1階層目リスト */
.grm-menu-list{
	display:flex;
	gap:20px;
	list-style:none;
	margin:0;
	padding:0;
}

/* 1階層目 li */
.grm-menu-list li{
	position:relative;
	list-style:none;
	/* hover切れ防止 */
	padding-bottom:0;
}

/* 1階層目リンク */
.grm-menu-list a{
	display:block;
	text-decoration:none;
	color:var(--grm-menu-text-color);
	font-size:var(--grm-menu-font-pc);
	font-weight:var(--grm-menu-font-weight);
	text-align:var(--grm-menu-text-align);
	line-height:1.4;

	transition:
		color .35s ease,
		background-color .35s ease;
}

/* =========================================
1階層目リンク
========================================= */
.grm-menu-list > li > a{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:var(--grm-menu-align-items);
	justify-content:center;
	height:72px;
}

/* 1階層目サブ文字 */
.grm-menu-list a span{
	display:block;
	flex:none;
	font-size:var(--grm-menu-font-small);
	line-height:1.2;
}

/* =========================================
子メニューありの▼
========================================= */
.grm-menu-list > .menu-item-has-children > a::after{

	content:"";

	position:absolute;

	left:50%;
	bottom:12px;

	width:7px;
	height:7px;

	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;

	transform:
		translateX(-50%)
		rotate(45deg);

	transition:
		color .35s ease,
		border-color .35s ease;

}


/* 1階層目 hover */
.grm-menu-list li:hover > a{
	color:var(--grm-menu-text-hover-color) !important;
	background:var(--grm-menu-hover-bg-color);
}

/* 1階層目 active */
.grm-menu-list .current-menu-item > a,
.grm-menu-list .current-menu-ancestor > a{
	color:var(--grm-menu-text-active-color);
	background:var(--grm-menu-active-bg-color);
}


/* =========================================
   PC Main Menu END
========================================= */


/* =========================================
   PC Sub Menu START
========================================= */

/* =========================================
   2階層目 START
========================================= */

/* 2階層目本体 */
.grm-menu-list > li > .sub-menu{
	display:none;

	position:fixed;

	/* ヘッダー高さの真下 */
	top:var(--grm-header-height-pc);

	/* 画面基準でメニュー位置へ */
	left:auto;

	background:rgba(
		var(--grm-submenu-bg-rgb),
		var(--grm-submenu-bg-opacity)
	);

	min-width:220px;

	list-style:none;

	margin:0;
	padding:14px 0;

	box-shadow:0 8px 20px rgba(0,0,0,.12);

	z-index:10000;
}

/* 2階層目表示 */
.grm-menu-list > li:hover > .sub-menu{
	display:block;
}

/* 1階層目から2階層目までの隙間でhoverが切れないようにする */
.grm-menu-list > li.menu-item-has-children::after{
	content:"";
	display:none;
	position:absolute;
	top:100%;
	left:0;
	width:220px;
	height:80px;
	background:transparent;
	z-index:9999;
}

/* 1階層目hover時だけ透明ブリッジを表示 */
.grm-menu-list > li.menu-item-has-children:hover::after{
	display:block;
}

/* 2階層目 li */
.grm-menu-list > li > .sub-menu > li{
	position:relative;

	list-style:none;

	margin:0;
	padding:0;
}

/* 2階層目リンク */
.grm-menu-list > li > .sub-menu > li > a{
	display:flex;

	align-items:center;
	justify-content:space-between;

	padding:10px 20px;

	color:var(--grm-submenu-text-color);

	background:transparent;

	white-space:nowrap;

	text-align:left;
}

/* 3階層目がある時の右矢印 */
.grm-menu-list > li > .sub-menu > li.menu-item-has-children > a::after{
	content:"›";

	font-size:18px;

	line-height:1;

	margin-left:20px;
}

/* 2階層目 hover */
.grm-menu-list > li > .sub-menu > li:hover > a{
	color:var(--grm-submenu-text-hover-color) !important;
}

/* 2階層目 active */
.grm-menu-list > li > .sub-menu > .current-menu-item > a,
.grm-menu-list > li > .sub-menu > .current-menu-ancestor > a{
	color:var(--grm-submenu-text-active-color);
}

/* =========================================
   2階層目 END
========================================= */


/* =========================================
   3階層目 START
========================================= */

/* 3階層目本体 */
.grm-menu-list > li > .sub-menu > li > .sub-menu{
	display:none;

	position:absolute;

	/* 2階層目と高さを揃える */
	top:-14px;

	/* 2階層目の右隣 */
	left:100%;

	background:rgba(
		var(--grm-thirdmenu-bg-rgb),
		var(--grm-thirdmenu-bg-opacity)
	);

	min-width:220px;

	list-style:none;

	margin:0;
	padding:14px 0;

	box-shadow:0 8px 20px rgba(0,0,0,.12);

	z-index:10001;
}

/* 3階層目表示 */
.grm-menu-list > li > .sub-menu > li:hover > .sub-menu{
	display:block;
}

/* 3階層目リンク */
.grm-menu-list > li > .sub-menu > li > .sub-menu > li > a{
	display:flex;

	align-items:center;
	justify-content:space-between;

	padding:10px 20px;

	color:var(--grm-thirdmenu-text-color);

	background:transparent;

	white-space:nowrap;

	text-align:left;
}

/* 4階層目がある時の右矢印 */
.grm-menu-list > li > .sub-menu > li > .sub-menu > li.menu-item-has-children > a::after{
	content:"›";

	font-size:18px;

	line-height:1;

	margin-left:20px;
}

/* 3階層目 hover */
.grm-menu-list > li > .sub-menu > li > .sub-menu > li:hover > a{
	color:var(--grm-thirdmenu-text-hover-color) !important;
}

/* 3階層目 active */
.grm-menu-list > li > .sub-menu > li > .sub-menu > .current-menu-item > a,
.grm-menu-list > li > .sub-menu > li > .sub-menu > .current-menu-ancestor > a{
	color:var(--grm-thirdmenu-text-active-color);
}

/* =========================================
   3階層目 END
========================================= */

/* =========================================
   PC Sub Menu END
========================================= */

/* =========================================
   Hamburger START
========================================= */

/* ハンバーガーボタン本体 */
.grm-hamburger{
	display:none;
	width:var(--grm-hamburger-width);
	height:var(--grm-hamburger-height);

	padding:0;

	border:none;
	background:transparent;

	cursor:pointer;

	margin-top:-5px;

	position:relative;
	z-index:100000;
}

/* ハンバーガー線 */
.grm-hamburger span{
	display:block;

	width:100%;
	height:var(--grm-hamburger-line-height);

	background:var(--grm-hamburger-color);

	margin:var(--grm-hamburger-line-gap) 0;

	transition:
	transform .3s ease,
	opacity .3s ease,
	background-color .35s ease;

	transform-origin:center;
}

/* X状態の線色 */
.grm-hamburger.is-active span{
	background:var(--grm-hamburger-close-color);
}

/* 1本目 */
.grm-hamburger.is-active span:nth-child(1){
	transform:
		translateY(
			calc(
				var(--grm-hamburger-line-gap) +
				var(--grm-hamburger-line-height)
			)
		)
		rotate(45deg);
}

/* 真ん中を消す */
.grm-hamburger.is-active span:nth-child(2){
	opacity:0;
}

/* 3本目 */
.grm-hamburger.is-active span:nth-child(3){
	transform:
		translateY(
			calc(
				(var(--grm-hamburger-line-gap) + var(--grm-hamburger-line-height)) * -1
			)
		)
		rotate(-45deg);
}

/* =========================================
   Hamburger END
========================================= */


/* =========================================
   Mobile Overlay START
========================================= */

/* 背景オーバーレイ */
.grm-mobile-overlay{
	position:fixed;
	inset:0;

	background:rgba(0,0,0,.45);

	opacity:0;
	visibility:hidden;

	z-index:99998;

	transition:.3s;
}

/* モバイルメニュー開いた時 */
body.grm-mobile-menu-open .grm-mobile-overlay{
	opacity:1;
	visibility:visible;
}

/* =========================================
   Mobile Overlay END
========================================= */


/* =========================================
   Mobile Menu START
========================================= */

/* モバイルメニュー本体 */
.grm-mobile-menu{
	position:fixed;

	top:0;

	width:320px;
	max-width:86vw;

	height:100vh;

	background:rgba(
		var(--grm-mobile-menu-bg-rgb),
		var(--grm-mobile-menu-bg-opacity)
	);

	z-index:99999;

	padding:70px 24px 24px;

	box-sizing:border-box;

	overflow-y:auto;

	transition:.3s;
}

/* 右展開 */
.grm-mobile-menu-right{
	right:0;
	transform:translateX(100%);
}

/* 左展開 */
.grm-mobile-menu-left{
	left:0;
	transform:translateX(-100%);
}

/* メニュー開いた状態 */
body.grm-mobile-menu-open .grm-mobile-menu-right,
body.grm-mobile-menu-open .grm-mobile-menu-left{
	transform:translateX(0);
}

/* モバイルメニュー ul */
.grm-mobile-menu-list,
.grm-mobile-menu-list ul{
	list-style:none;
	margin:0;
	padding:0;
}

/* モバイルメニュー li */
.grm-mobile-menu-list li{
	list-style:none;
	margin:0;
	padding:0;
}

/* モバイルメニューリンク */
.grm-mobile-menu-list a{
	display:block;

	padding:12px 0;

	color:var(--grm-mobile-menu-text-color);

	text-decoration:none;

	font-size:var(--grm-menu-font-sp);
	font-weight:var(--grm-menu-font-weight);

	text-align:var(--grm-mobile-menu-text-align);

	line-height:1.4;

	border-bottom:1px solid rgba(0,0,0,.08);
}

/* モバイルサブ文字 */
.grm-mobile-menu-list a span{
	display:block;
	font-size:var(--grm-menu-font-small);
	line-height:1.2;
}

/* モバイル hover */
.grm-mobile-menu-list li:hover > a{
	color:var(--grm-mobile-menu-text-hover-color) !important;
	background:var(--grm-menu-hover-bg-color);
}

/* モバイル active */
.grm-mobile-menu-list .current-menu-item > a,
.grm-mobile-menu-list .current-menu-ancestor > a{
	color:var(--grm-mobile-menu-text-active-color);
	background:var(--grm-menu-active-bg-color);
}

/* モバイル2階層目 */
.grm-mobile-menu-list .sub-menu{
	padding-left:16px;
}

/* =========================================
   Mobile Accordion START
========================================= */

/* 詳細コメント：スマホでは子メニューを初期非表示 */
.grm-mobile-menu-list .sub-menu{
	display:none;
	padding-left:16px;
}

/* 詳細コメント：開いている子メニューだけ表示 */
.grm-mobile-menu-list .menu-item-has-children.is-open > .sub-menu{
	display:block;
}

/* 詳細コメント：子を持つ項目はボタン配置用に相対位置 */
.grm-mobile-menu-list .menu-item-has-children{
	position:relative;
}

/* 詳細コメント：子メニュー開閉ボタン */
.grm-mobile-accordion-button{
	position:absolute;
	top:0;
	right:0;

	width:44px;
	height:44px;

	padding:0;

	border:none;
	background:transparent;

	cursor:pointer;
}

/* 詳細コメント：開閉ボタンの矢印 */
.grm-mobile-accordion-button span::before{
	content:"▼";

	display:block;

	font-size:12px;
	line-height:44px;

	color:var(--grm-mobile-menu-text-color);

	text-align:center;

	transition:.3s;
}

/* 詳細コメント：開いた時は矢印を上向きにする */
.grm-mobile-menu-list .menu-item-has-children.is-open > .grm-mobile-accordion-button span::before{
	transform:rotate(180deg);
}

/* 詳細コメント：ボタン分だけリンク右側を空ける */
.grm-mobile-menu-list .menu-item-has-children > a{
	padding-right:52px;
}

/* 詳細コメント：2階層目を1段右にずらす */
.grm-mobile-menu-list > li > .sub-menu > li > a{
	padding-left:1em;
}

/* 詳細コメント：3階層目を2段右にずらす */
.grm-mobile-menu-list > li > .sub-menu > li > .sub-menu > li > a{
	padding-left:2em;
}

/* =========================================
   Mobile Accordion END
========================================= */

/* =========================================
   Mobile Menu END
========================================= */


/* =========================================
   Responsive START
========================================= */

/*
 詳細コメント：スマホ切り替え幅は管理画面の「スマホ切り替え幅」設定を使うため、
 固定の @media は使用しません。
 実際のレスポンシブCSSは modules/menu/assets.php で動的出力します。
*/

/* =========================================
   Responsive END
========================================= */


/* =========================================
   Body Lock START
========================================= */

/* モバイルメニュー開いた時スクロール停止 */
body.grm-mobile-menu-open{
	overflow:hidden;
}

/* =========================================
   Body Lock END
========================================= */

/* =========================================
   Header Position START
========================================= */

/* 通常表示 */
.grm-global-menu.is-relative{
	position:relative;
}

/* 固定表示 */
.grm-global-menu.is-fixed{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:9999;
}

/* =========================================
   Header Position END
========================================= */

/* =========================================
   TOP Scroll Change START
========================================= */

.grm-global-menu.grm-scrolled{

	background-color:
	rgba(
		var(--grm-scroll-menu-bg-rgb),
		var(--grm-scroll-menu-bg-opacity)
	);

}

.grm-global-menu.grm-scrolled .grm-menu-list > li > a{
	color:var(--grm-scroll-menu-text-color);
}

.grm-global-menu.grm-scrolled .grm-menu-list > li > a:hover{
	color:var(--grm-scroll-menu-hover-color);
}

.grm-global-menu.grm-scrolled .current-menu-item > a,
.grm-global-menu.grm-scrolled .current-menu-ancestor > a{
	color:var(--grm-scroll-menu-active-color);
}

/* =========================================
   TOP Scroll Change END
========================================= */

/* =========================================
   Scroll Hamburger Color START
========================================= */

.grm-global-menu.grm-scrolled .grm-hamburger span{
	background:var(--grm-scroll-menu-text-color);
}

.grm-global-menu.grm-scrolled .grm-hamburger.is-active span{
	background:var(--grm-scroll-menu-text-color);
}

/* =========================================
   Scroll Hamburger Color END
========================================= */