@charset "utf-8";

/* ===============================================
   ヘッダー・メニュー（SP）
   =============================================== */
@media (max-width: 991.98px) {

	/* ヘッダー */
	/* メニュー（2000）より手前、ボタン（2100）より奥 */
	body.header_scrolled .site-header,
	.site-header {
		z-index: 2050;
		background: var(--white);
		box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	}
	/* スクロール時に Lightning が PC のメニューを出さないように */
	body.header_scrolled .site-header .global-nav {
		display: none;
	}
	#site-header-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		max-width: none;
		min-height: 62px;
		padding: 14px 20px;
	}
	.site-header-logo {
		margin: 0;
		padding: 0;
		text-align: left;
	}
	.site-header-logo img {
		width: auto;
		height: 34px;
		max-height: none;
	}

	/* メニューボタン */
	#vk-mobile-nav-menu-btn {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);
		right: 15px;
		left: auto;
		width: 40px;
		height: 30px;
		border: 0;
		border-radius: 0;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath fill='%2340277A' d='M0 0h30v2H0zM0 9h30v2H0zM0 18h30v2H0z'/%3E%3C/svg%3E") center / 30px auto no-repeat transparent;
	}
	#vk-mobile-nav-menu-btn.menu-open {
		position: fixed;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%2340277A' stroke-width='2' d='M3 3l18 18M21 3L3 21'/%3E%3C/svg%3E") center / 20px no-repeat transparent;
	}

	/* メニュー */
	#vk-mobile-nav {
		padding: 62px 0 0;
		border: 0;
		background: var(--blue);
	}
	#vk-mobile-nav .vk-mobile-nav-menu-outer {
		margin: 0;
	}
	#vk-mobile-nav nav > ul {
		display: flex;
		flex-direction: column;
		border-top: 0;
	}
	#vk-mobile-nav nav ul li a {
		display: flex;
		align-items: center;
		min-height: 70px;
		padding: 0 20px;
		border-bottom: 1px solid var(--white);
		color: var(--white);
		font-size: 18px;
		font-weight: 600;
		line-height: 21px;
	}

	/* 子ページ */
	#vk-mobile-nav nav ul li li a {
		min-height: 56px;
		padding-left: 36px;
		border-bottom-color: rgba(255, 255, 255, .3);
		background: rgba(255, 255, 255, .06);
		font-size: 16px;
		font-weight: 500;
	}

	/* 開閉ボタン：行全体 */
	#vk-mobile-nav .acc-btn {
		top: 0;
		left: 0;
		right: 0;
		width: auto;
		height: 70px;
		border: 0;
		border-radius: 0;
		background: none;
		cursor: pointer;
	}
	/* 開閉の矢印 */
	#vk-mobile-nav .acc-btn::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 20px;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M6 3l5 5-5 5'/%3E%3C/svg%3E") center / 16px no-repeat;
		transition: transform .2s;
	}
	#vk-mobile-nav .acc-btn.acc-btn-close::after {
		transform: rotate(90deg);
	}

	/* 並び：項目 → 検索 → EN / JP → Contact */
	#vk-mobile-nav nav ul li.cst-nav-utils {
		order: 20;
	}
	#vk-mobile-nav nav ul li.cst-lang {
		order: 21;
	}
	#vk-mobile-nav nav ul li.cst-nav-cta {
		order: 22;
	}

	/* 検索 */
	#vk-mobile-nav nav ul li.cst-nav-utils {
		padding: 32px 24px 0;
	}
	#vk-mobile-nav .cst-search {
		gap: 8px;
		height: 56px;
		padding: 0 20px;
		border-radius: 1000px;
		background: var(--white);
	}
	#vk-mobile-nav .cst-search .cst-search__input {
		flex: 1 1 auto;
		width: auto;
		padding: 0;
		border: 0;
		background: transparent;
		font-size: 16px;
		color: #333;
	}
	#vk-mobile-nav .cst-search .cst-search__btn {
		color: var(--blue);
		font-size: 22px;
	}

	/* EN / JP */
	#vk-mobile-nav nav ul li.cst-lang {
		justify-content: center;
		gap: 8px;
		padding: 16px 24px;
		font-size: 15px;
		line-height: 16px;
		color: var(--white);
	}
	#vk-mobile-nav nav ul li.cst-lang a,
	#vk-mobile-nav nav ul li.cst-lang .cst-lang__sep {
		display: inline;
		min-height: 0;
		padding: 0;
		border: 0;
		color: var(--white);
		font-size: inherit;
		font-weight: 500;
		line-height: inherit;
	}
	/* EN・JP は指で押しやすい大きさに */
	#vk-mobile-nav nav ul li.cst-lang a.cst-lang__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 56px;
		min-height: 44px;
	}
	/* 今いる方の言語 */
	#vk-mobile-nav nav ul li.cst-lang a.cst-lang__link.hd-is-current {
		color: var(--gold);
	}

	/* Contact */
	#vk-mobile-nav nav ul li.cst-nav-cta {
		padding: 8px 24px 40px;
	}
	#vk-mobile-nav nav ul li.cst-nav-cta > a {
		justify-content: center;
		gap: 6px;
		min-height: 54px;
		padding: 0 40px;
		border: 0;
		border-radius: 4px;
		background: var(--gold);
		font-size: 18px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: .52px;
	}
	/* Privacy Policy・Cookie Policy（Contact の下） */
	#vk-mobile-nav nav ul li.cst-nav-cta:has(~ li.cst-legal) {
		padding-bottom: 8px;
	}
	#vk-mobile-nav nav ul li.cst-legal {
		order: 23;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 8px 24px 32px;
	}
	#vk-mobile-nav nav ul li.cst-legal a.cst-legal__link {
		position: relative;
		display: inline-flex;
		min-height: 44px;
		padding: 0 16px;
		border: 0;
		color: rgba(255, 255, 255, .8);
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
	}
	/* 区切りの縦線 */
	#vk-mobile-nav nav ul li.cst-legal a.cst-legal__link + a.cst-legal__link::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 1px;
		height: 14px;
		margin-top: -7px;
		background: rgba(255, 255, 255, .4);
	}
}