@charset "utf-8";

@media (max-width: 991px) {
	.site-header-container--mobile-width--full{
		max-width:100%;
	}
	.site-header-logo--mobile-position{
		&--left{
			img {
				margin-left:0;
			}
		}
	}
}

/*-------------------------------------------*/
/*	.global-nav--text-layout--vertical
/*-------------------------------------------*/
$tate_bottom_padding: 3em;
$tate_horizontal_padding: 1em;
@media (min-width: 992px) {
	.global-nav--text-layout--vertical {
		body:not(.header_scrolled) & {
			.global-nav-list > li {
				& > a {
					display: flex; // これがないとタッチデバイス時に負ける
					align-items: flex-start;
					flex-wrap:nowrap;
				}
				.global-nav-name,
				.global-nav-description{
					writing-mode: vertical-rl;
					flex-shrink: 0;
					width: 1.5em;
				}
				.global-nav-description{
					padding-left:5px;
					padding-top:1px;
				}
			}
		}

		///// Mobile Only
		.device-mobile:not(.header_scrolled) & {
			.global-nav-list > li {
				padding: 14px $tate_horizontal_padding $tate_bottom_padding;
				& > a {
					height:100%;
				}
				& > .acc-btn{
					top:unset;
					right:50%;
					transform: translateX(50%);
					bottom:0.5em;
					z-index: 1100;
				}
				& > ul.sub-menu {
					margin-top:$tate_bottom_padding;
				}
			}
		}
		///// PC Only
		.device-pc:not(.header_scrolled) & {
			.global-nav-list > li > a {
				padding: 20px $tate_horizontal_padding;
			}
		}
	}
}

/*-------------------------------------------*/
/*	.header_scrolled 
/*-------------------------------------------*/
@media (min-width: 992px) {
:root{
	--vk-width-container-padding:15px;
}
#global-nav > .customize-partial-edit-shortcut{
	top:4em;
	left:4em;
}

.header_scrolled {
	.global-nav--scrolled--nav-center {
		width:auto;
		.global-nav-list {
			justify-content: center;
		}
	}
	.global-nav--layout--penetration {
		.global-nav-list>li{
			width:auto;
		}
		.global-nav-list>li {
			border-right: none;
		}
		.global-nav-list>li:first-child {
			border-left: none;
		}
	}
	// ナビのみコンテナサイズにフィット
	.global-nav--scrolled--nav-container{
		.global-nav-list {
			width:calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 );
			display: flex;
			margin-left:auto;
			margin-right:auto;
			& > li {
				width: 100%;
				border-right:1px solid var(--vk-color-border-hr);
				&:first-child{
					border-left:1px solid var(--vk-color-border-hr);
				}
			}
		}
	}
	.site-header-container--scrolled--logo-and-nav-container,
	.site-header-container--scrolled--logo-and-nav-full{
		display: flex;
		flex-direction: row;
		/*
		ロゴ部分は、ちゃんとリンクも効くようにするために位置指定して配置しているが、
		スクロール時のロゴを差し替えられるという余計な機能のためにjsで画像ファイル自体を入れ替えるのはやりたくないので、
		背景で指定して、imgは透過で見えなくしている。
		*/
		.site-header-logo{
			width:100%;
			display: block;
			margin:10px 0;
			padding:0;
			z-index: 1000;
			// 背景画像はスクロール時の代替画像用で必要
			background-image: var(--vk-header-logo-url);
			background-repeat: no-repeat;
			background-size: contain;

			display: flex;
			align-items: center;
			img{
				max-height:40px;
				opacity: 0;
			}
		}
		.global-nav {
			float:right;
			clear:none;
			border-top:none;
			&-list {
				width:auto;
				-webkit-box-pack: end;
				-ms-flex-pack: end;
				justify-content: flex-end;
			}
		}
	}
	.site-header-container--scrolled--logo-and-nav-full {
		width:100%;
		max-width:100%;
		.global-nav-list{
			width:auto;
		}
	}
}

}
