@charset "UTF-8";

/* =========================================================
l-mnav
========================================================= */
.l-mnav {
	background-color: var(--base-color02);
	position: fixed;
	top: 0;
	right: 0;
	max-width: 500px;
	width: 100%;
	height: 100vh;
	z-index: 1000;
	opacity: 0;
	overflow-y: scroll;
	visibility: hidden;
	transform: translateY(10px);
	background-color: var(--base-color03);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	&.__open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
	}
}

.l-mnavInner {
	display: flex;
	flex-direction: column;
	gap: var(--gap05);
	padding: var(--gap05);
}

.l-mnavLogo {
	display: flex;
	align-items: center;
	justify-content: center;
}
.l-mnavFunc {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
	gap: var(--gap00);
}
.l-mnavFunc__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-basis: 50%;
	gap: var(--gap00);
	border-radius: var(--radius01);
	background-color: var(--base-color02);
	padding: var(--gap04) var(--gap01);
	color: var(--text-color01);
	font-size: var(--fs-postp);
	cursor: pointer;
	transition: all 0.3s ease;
	min-width: 0;
	&:hover {
		background-color: var(--base-color04);
	}

	&.__elaerning {
		grid-column: 1 / -1; 
	}
}
.l-mnavFunc__itemIcon {
	color: var(--accent-color02);
}

/* =========================================================
l-mnavCourse
========================================================= */
.l-mnavCourses {
	display: flex;
	flex-direction: column;
}
.l-mnavCourses__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--gap03) 0;
	border-bottom: 1px solid var(--base-color02);

	font-size: var(--fs-postp);
	font-weight: bold;
	color: var(--text-color01);

	transition: transform 0.3s ease;

	&:first-child {
		border-top: 1px solid var(--base-color02);
	}

	&:hover {
		&::after {
			transform: translateX(-5px);
			filter: grayscale(0) brightness(1.2);
		}
	}

	&::after {
		content: "\e315";
		font-family: "Material Symbols Outlined";

		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: var(--gradient-button01);
		aspect-ratio: 1 / 1;

		font-size: var(--fs-min);
		color: var(--text-color04);
		transition: transform 0.3s, filter 0.3s;

		filter: grayscale(1);
	}

	&.__external {
		&::after {
			content: "\e89e";
			font-family: "Material Symbols Outlined";
		}
	}
}
.l-mnavCta {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: var(--gap04);
	padding: var(--gap03);
}
.l-mnavCta__img {
	aspect-ratio: 1 / 1;
	width: 100px;
	object-fit: cover;
	object-position: center;
}
.l-mnavCta__info {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
}
.l-mnavCta__infoTitle {
	font-size: var(--fs-postp);
}
.l-mnavCta__infoText {
	font-weight: normal;
	font-size: var(--fs-min);
}

.l-mnavFooter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap06) var(--gap01);
}
.l-mnavFooter__unit {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	position: relative;
	padding-top: var(--gap04);

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--gradient-line01);
	  }
}
.l-mnavFooter__item {
	font-size: var(--fs-mid);
	font-weight: normal;
}

.l-mnav__close {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-min);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);

	position: absolute;
    bottom: var(--gap00);
    right: var(--gap00);
    padding: var(--gap05) var(--gap02);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;

	&:hover {
		filter: brightness(1.2);
	}
}

.l-mnav.__open .l-mnav__close {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.3s ease 0.5s, transform 0.3s ease 0.5s, visibility 0s 0.5s;
}