:root {
	--logo_m-t: 30px;
	--logo_m-lr: 15px;
}

.header-wrapper {
	/* mix-blend-mode: difference; */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	color: var(--wh);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);

	/* position: relative; */
	@media screen and (min-width:1000px) {
		/* position: absolute; */
		color: var(--wh);
		padding: 0 5%;
		/* background: linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 100%); */
		background: rgba(0, 0, 0, 0.4);
	}
}

.header {
	display: inline-block;
	width: 100%;

	@media screen and (min-width:1000px) {
		flex-basis: 30%;
	}

	.header-inner {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 100%;
		width: 100%;

		.header__head {
			/* margin: var(--logo_m-t) 0 0 var(--logo_m-lr); */
			margin: 0 0 0 var(--logo_m-lr);

			@media screen and (min-width:1000px) {
				margin: 0;
			}

		}

		.header__logo {
			.header_title {
				display: flex;
				align-items: center;

				& a {
					display: inline-flex;
				}

				& img {
					width: clamp(125px, 13vw, 250px);
				}
			}
		}

		.burgerMenu {
			position: relative;
			width: 50px;
			height: 50px;
			border-radius: 5px;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			border: solid 0.5px var(--wh);
			transition: var(--transition);
			margin: 10px var(--logo_m-lr) 10px 0;
			font-size: 10px;

			&.boder_gy {
				border: solid 0.5px var(--gy);
			}

			@media screen and (min-width: 1000px) {
				display: none;
			}

			& span.line {
				transition-duration: var(--transition);
				position: absolute;
				background-color: var(--gy);
				width: 20px;
				height: 1px;
				display: inline-block;
				top: 50%;
				left: 50%;
				transform: translate(-50%, 50%);
				border-radius: 6px;
				z-index: 999;
				opacity: 0;
				visibility: hidden;

				&:nth-child(2) {
					top: calc(50% - 12.5px);
				}

				&:nth-child(3) {
					top: calc(50% + 12.5px);
				}
			}

			&.active {
				border-radius: 50%;
				border: solid 0.5px var(--gy);
				transition: var(--transition);

				.text {
					opacity: 0;
					visibility: hidden;
					transition: var(--transition);
				}



				& span.line:not(:last-child) {
					transition-duration: var(--transition);
					display: inline-block;
					opacity: 1;
					visibility: visible;

					&:nth-child(1) {
						opacity: 0;
						visibility: hidden;
					}

					&:nth-child(2) {
						transform: rotate(45deg);
						top: 50%;
						left: calc(50% - 10px);
					}

					&:nth-child(3) {
						transform: rotate(-45deg);
						top: 50%;
						left: calc(50% - 10px);

					}
				}
			}
		}
	}
}

& input#burgerMenu-check {
	display: none;
}

.header__menu {
	opacity: 1;
	visibility: visible;
	transition-duration: var(--transition);
	position: fixed;
	z-index: 998;
	top: 0%;
	left: -120%;
	width: 100%;
	height: 100vh;
	background-color: var(--wh);
	text-align: center;

	.logo {
		display: flex;
		width: clamp(125px, 13vw, 250px);
		margin-left: var(--logo_m-lr);
		margin-top: var(--logo_m-t);

		@media screen and (min-width:1000px) {
			display: none;
		}

		.header_title {
			display: flex;
		}

		& a {
			display: inline-flex;
		}

		& img {
			width: 100%;
		}
	}



	&.panelactive {
		top: 0%;
		left: 0;
		box-shadow: 0px 5px 1px 5px rgba(0, 0, 0, 0.1);


		.header__list {
			padding-top: 10vh;

			.nav-open {
				color: #fff;
				font-size: 20px;
				position: relative;


			}

			.menu-item {
				border-bottom: solid 1px var(--mainColor);
				color: var(--mainColor);
				font-size: var(--s_28_half);
				padding-left: 5%;

				@media screen and (min-width:1000px) {
					margin-left: 5%;
					margin-right: 20%;
				}

				& a {
					color: var(--mainColor);
					font-size: var(--s_28_half);
					margin-left: 5%;
					margin-right: 20%;
				}

				&:has(.sub-menu) {
					.sub-menu {
						display: none;
						margin-left: 3%;

						.sub-item {
							& a {
								position: relative;


								&::before {
									content: "-";
									width: 20px;
									height: 20px;
									position: absolute;
									left: -10px;
									top: 50%;
									transform: translateY(-50%);
									color: var(--mainColor);
								}

								&::after {
									display: none;
								}
							}
						}
					}

					&.active {
						width: 100%;
						padding-left: 5%;

						.label::after {
							transform: rotate(0deg);
						}

						.sub-menu {
							@media screen and (min-width:1000px) {
								background-color: var(--mainColor);
							}
						}
					}

					.label {
						position: relative;
						display: block;

						&::before {
							content: '';
							position: absolute;
							display: block;
							top: 50%;
							/* right: 50px; */
							right: 7%;
							/* top: auto;
								bottom: auto;
								right: auto;
								left: 20px; */

							width: 20px;
							height: 1px;
							margin: auto;
							background: var(--mainColor);
							z-index: 9;
						}

						&::after {
							content: '';
							position: absolute;
							display: block;
							top: 50%;
							/* right: 50px; */
							right: 7%;
							/* top: auto;
								bottom: auto;
								left: auto;
								right: auto; */
							width: 20px;
							height: 1px;
							margin: auto;
							background: var(--mainColor);
							transform: rotate(-90deg);
							transition: var(--transition);
							z-index: 10;
						}
					}



					& input {
						&:checked~.sub-menu {
							transition: var(--transition);
							height: auto;
							opacity: 1;
							width: 100%;
						}

						&:checked~.label::before {
							transform: rotate(-180deg);
							/* transform-origin: left center; */


						}
					}
				}

				& input {
					display: none;
				}
			}
		}
	}

	/* /.panelactive */
	/* pc */
	@media screen and (min-width: 1000px) {
		background-color: transparent;
		display: flex;
		position: unset;
		/* top: 0; */
		height: 100%;
		width: auto;
	}

	.header__list {
		/* width: 90%; */
		/* margin: 0 auto; */
		display: flex;
		margin-bottom: 25px;
		flex-direction: column;
		padding-top: 26px;

		@media screen and (min-width:1000px) {
			padding-top: 0;
			width: 100%;
			flex-direction: row;
			margin: 0 auto;
		}

		@media screen and (min-width: 1000px) {
			.sub-menu {
				opacity: 0;
				transition: var(--transition02);
				visibility: hidden;
				display: flex;
				justify-content: center;
				position: absolute;
				top: 100%;
				left: 50%;
				width: 100%;
				transform: translateX(-50%);
				background: var(--gradation);
				padding: 15px 20px;
			}
		}

		>.menu-item,
		>.menu-item.active {
			padding: 20px 0;
			/* position: relative; */
			text-align: left;

			@media screen and (min-width:1000px) {
				/* font-size: var(--s_20-24); */
				font-size: var(--s_12-16);
				padding: 15px 5px;
				margin: 0 30px;

				&:has(.sub-menu) {
					.label {
						position: relative;
						padding: 15px 0px;

						@media screen and (min-width:1000px) {}

						&::before {
							content: "";
							width: 50%;
							height: 2px;
							background: var(--gradation);
							position: absolute;
							bottom: 10%;
							right: 50%;
							transform: translateX(50%);
							opacity: 0;
							transition: var(--transition);
						}
					}
				}

				&:hover {
					.label {
						&::before {
							opacity: 1;
							transition: var(--transition03);
						}
					}


					.sub-menu {
						opacity: 1;
						visibility: visible;
						transition: var(--transition03);
						width: 100%;

						& a {
							@media screen and (min-width:1000px) {
								color: var(--wh);
							}
						}
					}
				}
			}

			& a {
				padding: 10px 0;
				display: block;
				text-align: left;
				border-top: var(--bk);
				position: relative;

				@media screen and (min-width:1000px) {
					padding: 15px 20px;
					border: none;
				}
			}
		}
	}
}