@charset "UTF-8";

/* ----------------------------------------------------
 * instructors
 * ---------------------------------------------------- */
.instructor__container {
	margin: 5% 0 8%;

#	margin-bottom: 10%;
}

.instructor__container-title {
	width: 45%;
	margin: 5% auto 4%;

	@media (max-width: 750px) {
		width: 65%;
		margin: 10% auto 4%;
	}
}

.instructor__container-text {
	font-size: calc(36 * 100vw / 1920);
	text-align: center;
	margin-bottom: 3%;

	@media (max-width: 750px) {
		font-size: calc(27 * 100vw / 750);
	}
}

.instructor__container-box {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	place-items: center;
	width: 87%;
	margin: 0 auto 5%;
	gap: 1.5vw;

	@media (max-width: 750px) {
		grid-template-columns: repeat(3, 1fr);
		gap: 3vw;
	}
}

.instructor__container-item {
	text-align: center;
	font-size: calc(33 * 100vw / 1920);
	cursor: pointer;

	@media (max-width: 750px) {
		font-size: calc(26 * 100vw / 750);
	}
}

.instructor__container-item.active {
	cursor: unset;
}

.instructor__container-name {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.instructor__box-wrap {
	width: 83%;
	margin: 0 auto 5%;
	position: relative;
}
.instructor__box {
	display: flex;
	gap: 4vw;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition:all .5s ease-out;
	z-index: 0;

	@media (max-width: 750px) {
		flex-direction: column;
	}

	.instructor__box-image {
		width: 43%;

		@media (max-width: 750px) {
			width: 68%;
			margin: auto;
		}
	}

	.instructor__box-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 2vw;

		line-height: 1.4;

		.name {
			font-size: calc(50 * 100vw / 1920);

			@media (max-width: 750px) {
				font-size: calc(40 * 100vw / 750);
				text-align: center;
			}

			span {
				font-size: calc(40 * 100vw / 1920);

				@media (max-width: 750px) {
					font-size: calc(30 * 100vw / 750);
				}
			}
		}

		.text1 {
			color: var(--text-color2);
			font-size: calc(50 * 100vw / 1920);
			display: flex;
			flex-direction: column;

			@media (max-width: 750px) {
				text-align: center;
				font-size: calc(40 * 100vw / 750);
			}

			p {
				display: inline-block;
				padding: 0 0.5em;
				transform: skewX(-12deg);
			}
		}
		.text2 {
			font-size: calc(39.5 * 100vw / 1920);
			margin-bottom: auto;

			@media (max-width: 750px) {
				font-size: calc(27 * 100vw / 750);
				margin-bottom: 3%;
			}
		}

		.voice-image {
			width: 25%;

			@media (max-width: 750px) {
				width: 42%;
				margin-left: 1%;
			}
		}
	}
}

.instructor__box.active {
	position: relative;
	opacity: 1;
	z-index: 1;
}


.instructor__pv {
	width: 82%;
	margin: 0 auto 10%;

	@media (max-width: 750px) {
		margin: 0 auto 14%;
	}

	.instructor__pv-title {
		font-size: calc(35 * 100vw / 1920);
		text-align: center;

		@media (max-width: 750px) {
			font-size: calc(21 * 100vw / 750);
		}
	}

	.instructor__pv-image-wrap {
		position: relative;

	}

	.instructor__pv-image {
#		position: relative;
		cursor: pointer;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		transition:all .5s ease-out;
		z-index: 0;

		.movie-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 20%;
		}
	}

	.instructor__pv-image.active {
		position: relative;
		opacity: 1;
		z-index: 1;
	}
}