/* HEADER ----------------------------------------------------------*/
.header {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	background-color: #6118104b;
	backdrop-filter: blur(10px);
}

.header__container {
	display: flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.header__logo {}

.logo {
	font-weight: 400;
	font-size: calc(18px + 18 * (100vw / 1560));
	line-height: 43px;
}

.logo:hover {}

.header__menu {}

.menu {}

.menu__icon {
	display: none;
}

.menu__body {}

.menu__list {}

.menu__list>li {
	margin: 0px 0px 0px 60px;
	margin-left: calc(10px + 50 * (100vw / 1560));
}

.menu__link {
	font-size: calc(14px + 4 * (100vw / 1560));
	line-height: 22px;
	color: var(--color-1);
	opacity: 1;
}

.menu__link:hover {
	color: #fff;
}

/* PC */
@media (min-width: 767px) {
	.menu__list {
		display: flex;
		align-items: center;
	}

	.menu__list>li {
		padding: 10px 0;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.header__container {
		justify-content: flex-end;
	}

	/* burger */
	.menu__list {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.menu__icon {
		z-index: 5;
		display: block;
		position: relative;
		width: 30px;
		height: 18px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.menu__icon:hover:before,
	.menu__icon:hover:after {
		background-color: var(--color-1);
	}

	.menu__icon span,
	.menu__icon::before,
	.menu__icon::after {
		left: 0;
		position: absolute;
		height: 15%;
		width: 60%;
		border-radius: 4px;
		transition: all 0.3s ease 0s;
		background-color: var(--color-1);
	}

	.menu__icon::before,
	.menu__icon::after {
		content: "";
		width: 100%;
	}

	.menu__icon::before {
		top: 0;
	}

	.menu__icon::after {
		bottom: 0;
	}

	.menu__icon span {
		top: 50%;
		transform: scale(1) translate(0px, -50%);
	}

	.menu__icon._active span {
		transform: scale(0) translate(0px, -50%);
	}

	.menu__icon._active::before {
		top: 50%;
		transform: rotate(-45deg) translate(0px, -50%);
	}

	.menu__icon._active::after {
		bottom: 50%;
		transform: rotate(45deg) translate(0px, 50%);
	}

	/**/
	.menu__body {
		position: fixed;
		overflow: auto;
		top: 0;
		left: 200%;
		width: 100%;
		min-height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(10px);
		padding: 100px 30px 30px 30px;
		transition: left 0.3s ease 0s;

	}

	.menu__body._active {
		left: 0;
	}

	.menu__list>li:not(:last-child) {
		margin-bottom: 30px;
	}

	.menu__link {
		font-size: 26px;
	}
}

.menu__icon {
	margin-right: 15px;
}