/* The same mobile-header structure and dimensions used by katenavi.com. */
.katenavi-sp-header {
	display: none;
}

@media screen and (max-width: 768px) {
	body:not(.admin-bar) {
		padding-top: 62px !important;
	}

	/* Lightning's differently structured header/toggle are replaced only on SP. */
	#site-header,
	#vk-mobile-nav-menu-btn {
		display: none !important;
	}

	.katenavi-sp-header,
	.katenavi-sp-header * {
		box-sizing: border-box;
	}

	.katenavi-sp-header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10001;
		display: flex;
		width: 100%;
		height: 62px;
		min-height: 62px;
		margin: 0;
		padding: 0 0 0 10px;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -1px rgba(0, 0, 0, .03);
	}

	body.admin-bar .katenavi-sp-header {
		top: 46px;
	}

	/* OPEN: the blue menu starts at the viewport top; only × and MENU remain. */
	.katenavi-sp-header.is-menu-open {
		background-color: transparent;
		box-shadow: none;
		pointer-events: none;
	}

	.katenavi-sp-header.is-menu-open .head__ll__logo,
	.katenavi-sp-header.is-menu-open .header-list .note,
	.katenavi-sp-header.is-menu-open .header-list .login {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.katenavi-sp-header.is-menu-open .header-list .burger-btn {
		pointer-events: auto;
	}

	.katenavi-sp-header .head__ll__logo {
		display: block;
		width: 110px;
		max-width: 110px;
		height: 62px;
		margin: 0;
		padding: 0;
		flex: 0 0 110px;
	}

	.katenavi-sp-header .head__ll__logo a {
		display: flex;
		width: 110px;
		height: 62px;
		margin: 0;
		padding: 0;
		align-items: center;
	}

	.katenavi-sp-header .head__ll__logo img {
		display: block;
		width: 110px;
		max-width: 110px;
		height: auto;
		margin: 0;
		padding: 0;
	}

	.katenavi-sp-header .header-list {
		display: flex;
		width: auto;
		height: 62px;
		margin: 0 0 0 auto;
		padding: 0;
		align-items: center;
		justify-content: flex-end;
		gap: 0;
		list-style: none;
	}

	.katenavi-sp-header .header-list li {
		margin: 0;
		list-style: none;
	}

	.katenavi-sp-header .header-list a {
		margin: 0;
		text-decoration: none;
	}

	.katenavi-sp-header .header-list .note {
		display: flex;
		width: 60px;
		height: 62px;
		padding: 0;
		flex: 0 0 60px;
		align-items: center;
	}

	.katenavi-sp-header .header-list .note a {
		display: flex;
		width: 60px;
		height: 62px;
		padding: 0;
		align-items: center;
	}

	.katenavi-sp-header .header-list .note img {
		display: block;
		width: 60px;
		max-width: 60px;
		height: auto;
		margin: 0;
		padding: 0 5px 0 0;
	}

	.katenavi-sp-header .header-list .login {
		position: relative;
		display: flex;
		width: 55px;
		height: 62px;
		margin: 0 0 0 5px;
		padding: 10px 5px;
		flex: 0 0 55px;
		align-items: center;
		background-color: #0065af;
	}

	.katenavi-sp-header .header-list .login::before,
	.katenavi-sp-header .header-list .login::after {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #00afe3;
		content: "";
	}

	.katenavi-sp-header .header-list .login::before {
		top: 5px;
	}

	.katenavi-sp-header .header-list .login::after {
		bottom: 5px;
	}

	.katenavi-sp-header .header-list .login a {
		position: relative;
		z-index: 1;
		display: flex;
		width: 45px;
		height: 42px;
		padding: 0;
		align-items: center;
		justify-content: center;
	}

	.katenavi-sp-header .header-list .login img {
		display: block;
		width: 45px;
		max-width: 45px;
		height: auto;
		margin: 0;
		padding: 3px 0 0;
	}

	.katenavi-sp-header .header-list .burger-btn {
		position: relative;
		z-index: 2;
		display: block;
		width: 58px;
		height: 62px;
		margin: 0;
		padding: 4px 8px 0;
		flex: 0 0 58px;
		background-color: #003d69;
		--rotate: 0deg;
		--translate: 12px;
		--opacity: 1;
	}

	.katenavi-sp-header .header-list .burger-btn::after {
		position: absolute;
		bottom: 7px;
		left: 12px;
		color: #fff;
		font-size: 12px;
		font-weight: 400;
		line-height: 14px;
		text-align: center;
		content: "MENU";
	}

	.katenavi-sp-header .header-list .burger-btn.is-open {
		--rotate: 135deg;
		--translate: 0px;
		--opacity: 0;
	}

	.katenavi-sp-header .burger-btn button {
		display: grid;
		width: 42px;
		height: 42px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		align-items: center;
		background-color: #003d69;
		cursor: pointer;
	}

	.katenavi-sp-header .burger-btn span {
		display: block;
		width: 42px;
		height: 2px;
		margin: 0;
		padding: 0;
		grid-area: 1 / 1 / -1 / -1;
		background-color: #fff;
		opacity: var(--opacity);
		transform: translateY(0) rotate(0);
		transition: opacity .3s ease, transform .3s ease;
	}

	.katenavi-sp-header .burger-btn span:nth-child(1) {
		opacity: 1;
		transform: translateY(calc(var(--translate) * -1)) rotate(calc(var(--rotate) * -1));
	}

	.katenavi-sp-header .burger-btn span:nth-child(2) {
		opacity: var(--opacity);
	}

	.katenavi-sp-header .burger-btn span:nth-child(3) {
		opacity: 1;
		transform: translateY(var(--translate)) rotate(var(--rotate));
	}

	/* Keep Lightning's existing menu panel and all menu contents/links. */
	#vk-mobile-nav {
		z-index: 10000 !important;
	}

	#vk-mobile-nav.vk-mobile-nav-open {
		top: 0 !important;
		height: 100vh !important;
		height: 100dvh !important;
	}
}

@media screen and (max-width: 319px) {
	.katenavi-sp-header .head__ll__logo,
	.katenavi-sp-header .head__ll__logo a {
		width: 100px;
		max-width: 100px;
		flex-basis: 100px;
	}

	.katenavi-sp-header .head__ll__logo img {
		width: 100px;
		max-width: 100px;
	}
}