@charset "utf-8";

@media (min-width: $lg-min) {
	body.device-mobile .vk-mobile-nav-menu-btn {
		display: none;
	}
}

/*-------------------------------------------*/
/*	PCとタッチデバイスでのプルダウンボタンなどの表示切り替え処理
/*-------------------------------------------*/
.global-nav-list {
	& > li {
		// PC端末の場合 ////
		.device-pc & {
			// 第一階層メニューのみ下階層展開ボタンを隠す
			& > .acc-btn {
				display: none;
			}

			// a タグに対して展開メニューボタン分の余白をつける
			& > a {
				overflow: hidden;
				text-align: center;
				position: relative;
				height:100%;
				
				// flex-direction: column; // 縦書きレイアウトで崩れるためコメントアウト

				// PC端末時は下階層展開ボタンを表示しないので左右余白小さめ
				@media ( min-width: $lg-min ) { // media指定がないと vk-menu-acc 指定の余白に負けるため指定
					padding: $menu_padding_vertical 1.5em;
				}

			}

			//タブレットサイズで、メニューが多い場合にメニューに画像を入れた時に画像の幅が無くなるため折り返しの指定を追加
			//PCサイズで折り返してしまうと、メニューが意図しないところで段落ちしてしまう人がいると思うので、タブレットサイズのみ折り返す
			// → ナビ貫通レイアウトの時にタブレットで１項目ずつ改行されてしまうのでコメントアウト
			// .device-mobile & {
			// 	flex-wrap:wrap;
			// }

		}

		// モバイル端末の場合 /////
		// li タグに対して余白をつける
		// モバイル端末の場合は下階層展開ボタンを表示するので、
		// 展開ボタンの押し間違えですぐにページ遷移してしまうため、
		// liに余白をつけて、リンク対象は文字部分だけにする
		.device-mobile & {
			padding: $menu_padding_vertical 2.6em;
			.global-nav-name {
				font-size: 12px;
			}
			//PC端末でaタグにつけていた余白がモバイル端末で出現するので打ち消し&inline-block化
			& > a {
				display: inline-block;
				padding:0;	
			}
			// これがないよ mobile-nav が出してくる余白に負ける
			&.menu-item-has-children>a {
				padding:0;
			}
			.acc-btn {
				border-width:1px;
				border-style: solid;
			}
		}
	}

	/* only second */
	& > li > ul.sub-menu {
		// PCの場合はリンク範囲が広いが、モバイルでは文字部分だけにするので、
		// 第一階層文字下の余白分をmarginで確保しなくてはならない
		.device-mobile & {
			margin-top: $menu_padding_vertical;
		}
	} // / only second
}