@charset "UTF-8";
/* c-menu-btn
---------------------------------------- */
:root {
	--c-menu-btn-width: 52px;
	--c-menu-btn-height: 52px;
}

@media (width >= 811px) {
	:root {
		--c-menu-btn-width: 60px;
		--c-menu-btn-height: 60px;
	}
}

.menu-btn {
	display: block;
	position: fixed;
	top: 2px;
	right: 8px;
	z-index: 10000;
	width: var(--c-menu-btn-width);
	height: var(--c-menu-btn-height);
	cursor: pointer;

	.menu-btn__icon {
		display: block;
		position: relative;
		width: 50%;
		margin-inline: auto;
		object-fit: contain;
	}

	.menu-btn__label {
		display: block;
		font-weight: 600;
		font-size: var(--font-size-xxs);
		line-height: 1.4;
		text-align: center;
	}

	.menu-btn__inner--close {
		display: none;
	}

	&.is-active {
		.menu-btn__inner--open {
			display: none;
		}

		.menu-btn__inner--close {
			display: block;
		}
	}
}

#main-nav {
	position: fixed;
	top: 0;
	left: 100%;
	z-index: 100;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	padding-block: 0 60px;
	background: linear-gradient(180deg, transparent var(--header-height), rgb(var(--bg-color-primary)) var(--header-height));
	transition: left 0.4s;

	&.is-open {
		left: 0;
	}

	.gnav__list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		width: 100%;
		max-width: 1360px;
		margin-inline: auto;
		padding-block: clamp(64px,17.8vw,96px) 0;
		font-size: var(--font-size-xs);
		text-align: center;
		list-style: none;

		.gnav__item {
			.gnav__link {
				display: inline-block;
				padding-block: var(--space-20);
				padding-inline: var(--space-20);
				font-weight: 600;
				line-height: 1;
				transition: opacity 0.3s ease;

				.gnav__illust {
					display: block;
					width: auto;
					height: 80px;
					margin-block: 0 12px;
					margin-inline: auto;
				}
			}
		}
	}
}

.header__action {
	.header__action-item {
		margin-block: var(--space-20) 0;

		.btn--shop,
		.btn--en {
			margin-inline: auto;
			font-size: var(--font-size-xs-fix);
		}
	}
}

@media (hover:hover) {
	#main-nav {
		.gnav__list {
			.gnav__item .gnav__link:hover {
				text-decoration: none;
				opacity: 0.8;

				.gnav__text {
					padding-block: 0 0.2em;
					border-bottom: 1px solid rgb(var(--color-secondary));
				}
			}
		}
	}
}

#main-nav {
	.gnav__list {
		.gnav__item .gnav__link:active {
			background: rgba(var(--c-menu-bg-color),.9);
			color: rgba(var(--color-primary),1);
			text-decoration: none;
			opacity: 0.8;

			.gnav__text {
				padding-block: 0 0.2em;
				border-bottom: 1px solid rgb(var(--color-secondary));
			}
		}
	}
}

@media (width >= 480px) {
	#main-nav {
		height: auto;

		&.is-open {
			height: auto;
		}

		.gnav__list {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--space-16);
			padding-inline: var(--space-24);

			.gnav__item {
				.gnav__link {
					.gnav__illust {
						height: 120px;
					}
				}
			}
		}
	}
}

@media (width >= 640px) {
	.menu-btn {
		right: 8px;
	}
}

@media (width >= 680px) {
	.header__action {
		display: flex;
		gap: 24px;
		align-items: center;
		position: fixed;
		top: 14px;
		right: calc(var(--c-menu-btn-width) + 28px);
		z-index: 500;

		.header__action-item {
			margin-block: 0;
		}
	}
}

@media (width >= 811px) {
	.header__action {
		top: 20px;
	}

	.menu-btn {
		top: 4px;
	}

	#main-nav {
		.gnav__list {
			grid-template-columns: repeat(4, 1fr);

			.gnav__item {
				.gnav__link {
					padding-inline: 0;

					.gnav__illust {
						height: 120px;
					}
				}
			}
		}
	}
}

@media (width >= 1360px) {
	.menu-btn {
		right: calc((100% - 1360px + 24px)/2);
	}

	.header__action {
		right: calc((100% - 1360px + var(--c-menu-btn-width) + 28px + 92px)/2);
	}
}