:root {
	--header-height: 116px;
}

.site-header-filler {
	height: var(--header-height);
	width: 100%;
}

.site-header {
	height: var(--header-height);
	position: fixed;
	z-index: 999999;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(6px);
	box-shadow: rgba(33, 35, 38, 0.1) 0 8px 8px -8px;
}

.site-header-row {
	height: calc((var(--header-height) - 24px) / 2);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	& > * {
		flex: 1;
	}
}

.site-header-row:first-child {
	margin-bottom: 8px;
}


.header-logos {
	display: flex;
	align-items: center;
	gap: 16px;

	& img {
		width: auto;
		height: 28px;
	}
}

.header-search-form, .header-search-form-mobile {

	& .search-form-field {
		display: flex;
		line-height: 24px;
		align-items: center;
		position: relative;
		width: 100%;
	}

	& svg {
		position: absolute;
		left: 1rem;
		color: #888;
		width: 1rem;
		height: 1rem;
		pointer-events: none;
		z-index: 1;
	}

	& input {
		width: 100%;
		height: 36px;
		padding-left: 2.5rem;
		box-shadow: 0 0 0 1px #d1d1d1, 0 0 24px -16px #000;
		border: 0;
		border-radius: 12px;
		background-color: #ffffff;
		outline: none;
		color: #333;
		transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
		cursor: text;
		z-index: 0;
	}

	& input::placeholder {
		color: #999;
	}

	& input:hover {
		box-shadow: 0 0 0 2px #c4c4c4, 0 0 24px -16px #aaa;
	}

	& input:active {
		transform: scale(0.95);
	}

	& input:focus {
		box-shadow: 0 0 0 2px #b0b0b0;
	}
}

.header-search-form {
	@media (max-width: 1024px) {
		display: none;
	}
}

.header-search-form-mobile {
	@media (min-width: 1023px) {
		display: none;
	}
}

.link-sns24-container {
	display: flex;
	align-items: center;
	justify-content: end;
	transition: transform 0.3s ease;

	&:hover {
		transform: scale(0.95);
	}

	& img {
		height: 28px;
		width: auto;
	}

	@media (max-width: 1024px) {
		display: none;
	}
}

.menu-toggle {
	margin-right: auto;
	border: none;
	background-color: transparent;

	@media (min-width: 1023px) {
		display: none;
	}
}

/* Mobile menu base state */
#primary-menu {
	@media (max-width: 1024px) {
		visibility: hidden;
		opacity: 0;
		transform: translateX(100%);
		position: fixed;
		top: 0;
		right: 0;
		width: calc(100vw - 64px);
		height: 100vh;
		background-color: white;
		transition: transform 0.3s ease, opacity 0.3s ease;
		z-index: 9998;
		display: flex;
		flex-direction: column;
		padding: 72px 32px 32px 32px;
	}

	& .menu-item-has-children {
		@media (max-width: 1024px) {
			flex-direction: column;
		}
	}
}

#primary-menu.is-open {
	@media (max-width: 1024px) {
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
	}
}

#primary-menu .sub-menu {
	@media (max-width: 1024px) {
		position: relative;
		display: none;
		top: unset;
		width: unset;
		box-shadow: rgba(17, 17, 26, 0.1) 0 1px 0;
		border-radius: 0;
	}
}

#primary-menu .sub-menu.is-open {
	@media (max-width: 1024px) {
		display: flex;
	}
}

/* Show close button only when menu is open */
.close-menu {
	padding: 8px;
	position: fixed;
	top: 32px;
	right: 32px;
	background: transparent;
	border: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	z-index: 9999;
}

#primary-menu.is-open + .close-menu {
	opacity: 1;
	visibility: visible;
}

/* Hide toggle button on desktop */
.menu-toggle {
	display: block;
	background: transparent;
	border: none;
}

@media (min-width: 1024px) {
	.menu-toggle,
	.close-menu {
		display: none;
	}
	#primary-menu {
		visibility: visible !important;
		opacity: 1 !important;
		position: static;
		transform: none;
		height: auto;
		flex-direction: row;
	}
}

.main-navigation {
	display: flex;
	justify-content: center;
	align-items: center;

	& li {
		display: flex;
		width: 100%;
	}

	& a[href="#"] {
		pointer-events: none;
	}

	& a {
		transition: color;
		border-radius: 6px;
		text-wrap: nowrap;
	}

	& ul {
		z-index: 999;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		gap: 4px;

		& a {
			padding: 8px 16px;
			color: #000;
			font-weight: normal;
		}

		.menu-item-has-children {
			position: relative;
		}

		.menu-item-has-children a {
			position: relative;
			padding-right: 32px !important;
		}

		.menu-item-has-children > a::after {
			content: "";
			position: absolute;
			right: 0.75rem;
			top: 50%;
			transform: translateY(-50%);
			width: 1rem;
			height: 1rem;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: center;
			transition: transform 0.2s ease;
		}

		.menu-item-has-children:hover > a::after {
			transform: translateY(-50%) rotate(180deg);
		}

		.menu-item-has-children:hover .sub-menu {
			display: flex;
		}
	}

	& .sub-menu {
		box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0;
		z-index: 999;
		width: max-content;
		left: 0;
		top: 100%;
		position: absolute;
		background-color: white;
		padding: 12px;
		display: none;
		flex-direction: column;
		border-radius: 12px;
		gap: 12px;

		& a {
			width: 100%;
			padding: 8px 16px;
		}

		& a:hover {
			background-color: #efefef;
		}
	}
}