/* ============================================================================================
	NAVIGATION COMMON / PATTERN
============================================================================================ */
:root {
	--resola-navigation-default-height: 70px;
	--delay: .5s;
	--delay-plus: .2s;
}
@media screen and (min-width: 768px) {
	:root {
		--delay: 0;
		--delay-plus: 0;
	}
}

/* navigation fixed */
body:not(:has(.resola-header-front-sticky)) {
	padding-top: var(--resola-navigation-default-height)
}
@media screen and (min-width: 601px) {
	body.admin-bar:not(:has(.resola-header-front-sticky)) {
		padding-top: calc(var(--resola-navigation-default-height) + var(--admin-bar-height))
	}
}
.resola-navigation-default {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
	transition: .6s
}

.admin-bar .resola-navigation-default {
	top: 0
}
@media screen and (min-width: 601px) {
	.admin-bar .resola-navigation-default {
		top: var(--admin-bar-height)
	}
}
.resola-navigation-default-inner-row {
	gap: 0 20px !important;
	height: 100%
}
/* logo */
.resola-navigation-default-logo {
	height: var(--resola-navigation-default-height);
	padding: 8px 0;
}
.resola-navigation-default-logo img {
	width: auto;
	height: 100%
}

/* color */
.navigation-common,
.navigation-common a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--contrast) !important;
	transition: .6s
}

/* drawer button */
.mobile-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	margin-left: auto !important;
}
.resola-navigation-common .mobile-toggle-bar {
	background: var(--wp--preset--color--contrast)
}
.mobile-toggle-bar {
	display: block;
	height: 2px;
	width: 22px;
	background: currentColor;
}
.mobile-toggle-bar::before,
.mobile-toggle-bar::after {
	content: "";
	display: block;
	position: absolute;
	height: 2px;
	width: 22px;
	background: inherit;
}
.mobile-toggle-bar::before {
	margin-top: -8px;
}
.mobile-toggle-bar::after {
	margin-top: 8px;
}

/* スクロールロック機能 */
body.scroll-locked {
	position: fixed;
	top: calc(var(--scroll-y) * -1);
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* GTanslate翻訳機能のためtouch-actionを条件付きで設定 */
	touch-action: pan-y pinch-zoom;
	-webkit-overflow-scrolling: auto;
}

/* ドロワーオープン時の背景固定 */
body.drawer-open {
	overflow: hidden;
	padding-right: var(--scrollbar-width, 0px);
}

/* ブレイクポイントでの制御 */
@media screen and (min-width: 768px) {
	body.drawer-open {
		overflow: visible;
		padding-right: 0;
	}
}

/* 対応するモバイルトグルの処理 */
@media screen and (min-width: 768px) {
	.mobile-toggle {
		display: none; /* ブレイクポイント以上では非表示 */
	}
}

/* nav element navigation list */
nav.resola-navi-list {
	display: block !important;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1;
	display: block;
	width: 80%;
	max-width: 450px;
	height: 100vh;
	margin-left: auto !important;
	padding: 0 20px;
	overflow-y: auto;
	overflow-x: hidden; /* 横スクロールバーを非表示 */
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transform: translateX(100%);
	transition: transform .5s
}
.drawer-open nav.resola-navi-list {
	transform: translateX(0);
}
nav.resola-navi-list::before,
nav.resola-navi-list::after {
	content: "";
	display: block;
	width: 1px;
	height: 10vh
}
@media screen and (min-width: 768px) {
	nav.resola-navi-list {
		display: flex;
		position: static;
		align-items: center;
		gap: 0 20px;
		width: initial;
		height: initial;
		padding: 0;
		overflow: hidden;
		background: transparent;
		color: inherit;
		transform: none
	}
	nav.resola-navi-list::before,
	nav.resola-navi-list::after {
		content: none;
	}
}

/* ul element navigation list */
ul.resola-navi-list {
	display: flex;
	flex-direction: column;
	gap: 12px 0;
}
/* li element */
.resola-navi-list .wp-block-navigation-item {
	opacity: 0;
	width: 100%;
	transform: translateY(-15px);
	transition: opacity .4s var(--delay), transform .4s var(--delay);
}
.drawer-open .resola-navi-list .wp-block-navigation-item {
	opacity: 1;
	transform: translateY(0);
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(2) {
	transition-delay: calc(var(--delay) + var(--delay-plus))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(3) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 2))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(4) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 3))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(5) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 4))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(6) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 5))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(7) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 6))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(8) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 7))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(9) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 8))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(10) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 9))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(11) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 10))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(12) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 11))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(13) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 12))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(14) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 13))
}
.drawer-open .resola-navi-list .wp-block-navigation-item:nth-of-type(15) {
	transition-delay: calc(var(--delay) + calc(var(--delay-plus) * 14))
}
.resola-navi-list .wp-block-navigation-item.is__active {
	opacity: 1;
	transform: translateY(0);
}
/* a element */
.resola-navi-list .wp-block-navigation-item__content {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: var(--resola-navigation-default-height);
	padding: 0 .5em
}
/* reserve */
.resola-navigation-default-reserve-button {
	position: fixed;
	bottom: 20px;
	right: 10px;
	height: var(--resola-navigation-default-height);
	transition: opacity .3s ease-in-out
}
.resola-navigation-default-reserve-button .wp-element-button {
	box-shadow: 0 0 10px rgba(0,0,0,.1);
	background: rgba(121,183,183,.8);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small)
}
@media screen and (min-width: 768px) {
	.resola-navigation-default-reserve-button .wp-element-button {
		aspect-ratio: unset;
		border-radius: 2px;
		background: var(--wp--preset--color--blue)
	}
}

/* navigation overlay */
.navigation-overlay {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: -1;
	opacity: 0;
	transition: opacity .3s ease-in-out;
}

.resola-navigation-default.drawer-open .navigation-overlay {
	opacity: 1;
	visibility: visible;
	cursor: url(data:image/png;base64,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),auto
}
@media screen and (min-width: 768px) {
	ul.resola-navi-list {
		flex-direction: row;
		gap: 0 20px;
	}
	.resola-navi-list .wp-block-navigation-item {
		opacity: 1;
		width: initial;
		transform: none
	}
	.resola-navigation-default-reserve-button {
		opacity: 1;
		position: static
	}
	.navigation-overlay {
		display: none
	}
}

body:has(.resola-section-pull) .resola-navigation-default-reserve-button {
	display: none
}