/* header
---------------------------*/
.hdr {
	position: relative;
}

.hdr__wrap {
	position: fixed;
	top: 0;
	z-index: var(--z-index-header);
	width: 100vw;
	display: flex;
	justify-content: space-between;
	backdrop-filter: blur(60px);
	background: rgba(255, 255, 255, 1);
	padding: 24px;
}
.hdr__wrap_inner {
	width: 87.22vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hdr__nav--ul {
	display: flex;
	gap: 18px;
}

.hdr__nav--li {
	font-size: 0.875rem;
}

.hdr__logo {
	a {
		&:hover {
			filter: contrast(70%);
		}
	}
}

@media (min-width:768px) and (max-width:1280px) {
	.hdr__logo {
		width: 140px;
	}

	.hdr__nav--ul {
		gap: 7px;
	}
}

/* ハンバーガメニュー
---------------------------*/
.hamburger-button {
	z-index: 50;
	height: 3.2rem;
	width: 3.2rem;
	cursor: pointer;
	border-radius: .25rem;
	background: var(--green);
	position: fixed;
	top: 1rem;
	right: 1rem;

	&.active {
		background: #fff;
	}
}

.hamburger-lines {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 30px;
	-webkit-transition-duration: 300ms;
	transition-duration: 300ms;

	.line {
		display: block;
		height: 2px;
		background-color: #fff;
		-webkit-transition-duration: 300ms;
		transition-duration: 300ms;
	}

	&.active {
		.line {
			background-color: var(--green);
		}
	}
}

.hamburger-lines .line:nth-child(1) {
	width: 100%;
}

.hamburger-lines .line:nth-child(2) {
	margin-top: 8px;
}

.hamburger-lines.active .line:nth-child(2) {
	margin-top: -1px;
	width: 100%;
}

.hamburger-lines.rotate .line {
	top: 0px;
	bottom: 0px;
	width: 100%;
}

.hamburger-lines.rotate .line:nth-child(1) {
	--tw-rotate: 25deg;
	-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hamburger-lines.rotate .line:nth-child(2) {
	--tw-rotate: -25deg;
	-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* pcナビメニュー */
.nv-menu {
	inset: 0px;
	padding-top: 0px !important;
	position: fixed;
	top: 0px;
	right: 0px;
	/* z-index: var(--z-index-humberger); */
	z-index: 30;
	height: 100%;
	width: 100%;
	--tw-translate-x: 100%;
	-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	background: var(--green);

	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}

.nv-menu.active {
	--tw-translate-x: 0px;
	-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}



@media (max-width: 1023px) {
	.hdr__wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		background: transparent;
		padding: 26px 24px;
		border-radius: 0;
	}
	.hdr__wrap_inner {
		padding: 0;
	}
}


#js-header {
	top: -64px;
	left: 0;
	width: 100%;
	margin: 0 auto;
	overflow: scroll;
	position: fixed;
	opacity: 0;
	z-index: var(--z-index-header);

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

.mega-menu {
	position: absolute;
	top: calc(var(--header-height) - 34px);
	left: 0;
	z-index: var(--z-index-header);
	width: 87.22vw;
}

@media (max-width: 1023px) {
	.mega-menu {
		display: none;
	}
}

.hdr__nav--details summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding-right: 29px;
	color: var(--black);
	cursor: pointer;
}

.hdr__nav--details summary::-webkit-details-marker {
	display: none;
}

.hdr__nav--details summary::after {
	transform: translateY(-25%) rotate(45deg);
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border-bottom: 1px solid var(--black);
	border-right: 1px solid var(--black);
	content: '';
	transition: transform .3s;
	position: absolute;
	right: 1em;
}

.hdr__nav--details[open] summary::after {
	transform: translateY(25%) rotate(225deg);
}

/* ハンバーガー開閉時のアニメーション */
.hdr__nav--detail[open] summary::before {
	position: fixed;
	content: '';
	height: 100vh;
	width: 100vw;
	left: -4%;
	top: -8px;
	background: rgba(0, 0, 0, .4);
}

@media (min-width: 768px) and (max-width: 1280px) {
	.hdr__nav--detail[open] summary::before {
		left: -2%;
	}
}