// グローバルメニュー
// #gnav は PCの #header の中。

.c-gnavWrap {
	height: 100%;

	.l-header__body & {
		position: relative;
		z-index: 1;
	}
}

.c-gnav,
.c-gnav .sub-menu {

	@extend %reset_list;
}


.c-gnav {
	height: 100%;
	font-size: .9rem;
	text-align: center;

	.__mainText {
		display: block;
		color: inherit;
		font-size: inherit;
		line-height: 1;
	}

	.__subText {
		position: relative;
		top: 4px;
		display: block;
		color: inherit;
		font-size: 10px;
		line-height: 1;
		opacity: .6;
	}
}

.c-gnav__a {
	font-size: 1em; //em: .c-gnav のサイズを引き継ぐ
	text-decoration: none;
	// outline-offset: -2px; // 開閉リストが overflow: hidden; でアウトラインが見えなくなるを防ぐ
}

// .c-gnav 直下の li
.c-gnav__li {
	position: relative;
	height: 100%;

	// さらにその直下の a
	> .c-gnav__a {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		padding: 16px 12px;
		color: inherit;
		white-space: nowrap;
		transition: color .25s;
	}

	// メニューのホバーエフェクト
	&.-current,
	&.focus, // ← :focusじゃなくて クラス なのはミスじゃない
	&:hover {
		color: var(--ark-color--main);
	}
}

// 子リスト共通
.c-gnav .sub-menu {
	color: #fff;
	text-align: left;
	background: var(--ark-color--main);
	visibility: hidden;

	> .menu-item:not(:last-child) {
		border-bottom: 1px solid var(--ark-color--border);
	}

	.c-gnav__a {

		@extend %menu_list__a;

		&::before {

			@extend %absLayer;
			background-color: transparent;
			content: "";
			// transition: background-color .2s;
		}

		&:hover::before {
			background-color: rgba(255, 255, 255, .1);
		}
	}
}

// 直下の子ul
.c-gnav__depth1 {
	--ark-color--border: rgba(255, 255, 255, .2);
	--ark-nav-padding--Y: 1rem;
	--ark-nav-padding--R: .75rem;
	--ark-nav-padding--L: .75rem;
	--ark-nav_fz: .9em;

	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 1;
	width: 100%;
	min-width: 240px;
	box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .15);
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	transition: opacity .5s, visibility .35s;

	// サブメニュー表示
	.c-gnav__li:hover > &,
	.c-gnav__li.focus > & {
		visibility: visible;
		opacity: 1;
	}


	// ▲ の部分
	&::before {
		position: absolute;
		bottom: 100%;
		left: calc(50% - .5em);
		z-index: 1;
		width: 1em;
		height: 1em;
		background-color: var(--ark-color--main);
		content: "";
		clip-path: polygon(0% 100%, 100% 100%, 50% 60%);
	}
}