@charset "utf-8";

/*-------------------------------------------*/
/*	.gMenu desigin
/*-------------------------------------------*/

.global-nav {
	@media (max-width: $md-max) {
		display: none;
	}
	// width:100%があるとスクロール時に 中央揃えにならない
	// width: 100%;
}

.global-nav {
	&-list{
		margin: 0 auto;
		padding: 0;
		display: flex;
		list-style: none;
		position: relative;
		width:min-content; // この指定がないと文字の左右に無駄に余白が発生するので、う迂闊に消さない事
		.header_scrolled & {
			height:100%; // スクロールメニューで必要
		}
		a {
			color: var(--vk-color-text-header);
		}
		li {
			margin: 0;
			list-style: none;
			line-height: 1.4;
			font-size: 12px;
			position: relative;
			img {
				// 画像を入れられた時に画像が見えなくなるのでとりあえず最小サイズ指定
				min-width:80px;
			}
		}
		/*-------------------------------------------*/
		/*	only first
		/*-------------------------------------------*/
		& > li {
			text-align: center;
			& > a {
				position: relative;

				// サブテキスト有無関係なく上下中央になるように
				display: flex;
				flex-wrap: wrap; // 要素が2つの場合があるので必要
				justify-content: center;
				align-items: center;

			}
			.global-nav-name {
				font-size: $g_nav_font_size;
				display: block;
				width:100%;
				/*
				メニューは
				・必要なら <br> でユーザーが改行指定できる
				・幅は自動調整される 
				ため nowrap 指定の方が表示が安定する
				本当は & > li にかけていたが、下階層にまでnowrapが効いてしまう現象が発生し、
				ドロップダウンメニューに被ってしまうため .gMenu_name に移動
				*/
				white-space: nowrap;
			}
			.global-nav-description {
				display: block;
				overflow: hidden;
				font-size: 10px;
				line-height: 14px;
				opacity: 0.6;
				text-align: center;
				white-space: nowrap;
			}
		}
		/*-------------------------------------------*/
		/*	2nd only
		/*-------------------------------------------*/
		& > li > ul.sub-menu {
			background-color: var(--vk-color-primary);
			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

			// 横位置
			// 親メニューに左右中央に寄せてからサブメニュー分を左にマイナスオフセット
			// ※ ul > li のpositionでleft:-50%指定すると ul は 本来 li がある横幅まで存在するので
			// 　余分なマウスオーバー反応エリアができてしまうため
			left: 50%;
			margin-left: -120px;
			width: 240px;
		}
		/*-------------------------------------------*/
		/*	2nd after
		/*-------------------------------------------*/
		.sub-menu {
			margin: 0;
			padding: 0;
			text-align: left;
			transition: all 0.3s ease-in;
			li {
				a,
				a:hover {
					color: #fff;
				}
				a {
					padding: $menu_padding_vertical $menu_padding_horizontal;
					border-bottom: 1px solid rgba(255, 255, 255, 0.15);
					display: block;
					&:hover {
						background-color: var(--vk-color-primary-vivid);
					}
				}
				&.menu-item-has-children > a {
					padding: $menu_padding_vertical 3.5em $menu_padding_vertical
						$menu_padding_horizontal;
				}
				@media (min-width: $lg-min) {
					ul.sub-menu li {
						a{ 
							padding-left: 2.2em;
						}
						li a {
							padding-left: 3.2em;
						}
					}
				}
			}
		}
	}
}