@charset "UTF-8";

/* ----------------------------------------------------
 * TOP
 * ---------------------------------------------------- */
.top__kv-container {
	position: relative;

	.kv-main {

	}

	.kv-switch {
		width: 10%;
		position: absolute;
		top: 0;
		left: 0;

		@media (max-width: 750px) {
			width: 25%;
		}
	}

	.kv-title {
		width: 43.2%;
		position: absolute;
		top: 39.2%;
		left: 26.6%;
		transform: translate(-50%, -50%);

		@media (max-width: 750px) {
			width: 89%;
			top: 74.3%;
			left: 50%;
		}
	}

	.kv-title-sub {
		width: 30%;
		position: absolute;
		top: 63%;
		left: 25%;
		transform: translate(-50%, -50%);
		display: none;

		@media (max-width: 750px) {
			width: 46%;
			top: 92.3%;
			left: 30%;
		}
	}

	.kv-gentei {
		width: 23%;
		position: absolute;
		top: 82.6%;
		left: 25.6%;
		transform: translate(-50%, -50%);

		@media (max-width: 750px) {
			width: 39%;
			top: 92%;
			left: 75%;
		}
	}
}

/* ----------------------------------------------------
 * イントロダクション
 * ---------------------------------------------------- */
.top__introduction-container {
	width: 75%;
	margin: 5% auto 5%;

	@media (max-width: 750px) {
		width: 90%;
	}

	.top__introduction-title {
		margin: 0 auto 7%;

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

	p {
		font-size: calc(39 * 100vw / 1920);
		text-align: center;
		color: var(--text-color2);

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

/* ----------------------------------------------------
 * MOVIE
 * ---------------------------------------------------- */
.top__movie-container {
	width: 87%;
	margin: 0 auto 5%;
	position: relative;
	cursor: pointer;

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

.top__movie-btn {
	width: 74%;
	display: flex;
	margin: 0 auto;
	gap: 6vw;

	@media (max-width: 750px) {
		flex-direction: column;
		gap: 4vw;
		width: 59%;
	}
}

/* ----------------------------------------------------
 * NEWS
 * ---------------------------------------------------- */
.top__news-container {
	background: rgb(255 255 255 / 35%);
	box-shadow: 0 -8px 10px 1px rgba(0, 0, 0, 0.2), 0 8px 10px 6px rgba(0, 0, 0, 0.2);
	padding: 5% 0;
	margin: 9% 0 8%;
}

.top__news-title {
	width: 27%;
	margin: 0 auto 5%;

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

.top__news-body {
	width: 87%;
	margin: auto;
}

.news-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.news-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1.5%;
	font-size: calc(40 * 100vw / 1920);
	line-height: 1.4;
	color: var(--text-color1);
	gap: 6vw;

	@media (max-width: 750px) {
		flex-direction: column;
		gap: 0.3vw;
		font-size: calc(26 * 100vw / 750);
		margin-bottom: 4vw;
	}
}
.news-date {
	color: #e83d55;
	width: 15%;

	@media (max-width: 750px) {
		width: 100%;
	}
}
.news-content {
	color: var(--text-color2);
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;

	@media (max-width: 750px) {
		-webkit-line-clamp: 2;
	}

	a {
		color: var(--text-color2);
	}
	a:hover {
		color: #a7944f;
	}
}

.top__news-button {
	width: 22%;
	margin: 5% auto 0;

	@media (max-width: 750px) {
		width: 39%;
	}
}

/* ----------------------------------------------------
 * あらすじ
 * ---------------------------------------------------- */
.rounded-box-outer {
	border: 3px solid #b7eaf5;
	border-radius: 16px;
	padding: 5px;
	background-color: #dcf5f552;
	width: 87%;
	margin: 0 auto 10%;

	@media (max-width: 750px) {
		border: 5px solid #b7eaf5;
		border-radius: 35px;
		width: 88%;
	}
}

.rounded-box-inner {
	border: 1px solid #b7eaf5;
	border-radius: 11px;
	padding: 2% 2% 5%;
	text-align: center;
	color: var(--text-color2);
	font-size: calc(36 * 100vw / 1920);
	letter-spacing: 0.04em;

	@media (max-width: 750px) {
		border-radius: 30px;
		font-size: calc(24 * 100vw / 750);
		padding: 1% 1% 6%;
	}

	h2 {
		font-size: calc(60 * 100vw / 1920);
		font-weight: 600;

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


.blur {
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

	opacity: 0;
	filter: blur(1em);
	scale: 1.1;

	&.isActive {
		opacity: 1;
		filter: blur(0);
		scale: 1;
		transition:
		scale 1s var(--ease-out-quart),
		opacity 1s var(--ease-out-quart),
		filter 1.4s var(--ease-out-quart);
	}
}


/* ----------------------------------------------------
 * いんすとらくたー
 * ---------------------------------------------------- */
.top__instructor-container {
	margin-bottom: 10%;
}

.top__instructor-title {
	width: 45%;
	margin: 0 auto 4%;

	@media (max-width: 750px) {
		width: 63%;
	}
}

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

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

.top__instructor-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;
	}
}

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

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

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


.top__instructor-button {
	width: 30%;
	margin: 0 auto 5%;

	@media (max-width: 750px) {
		width: 57%;
	}
}


/* ----------------------------------------------------
 * 特装版
 * ---------------------------------------------------- */
.top__specialEdition-container {
	background: rgb(255 255 255 / 35%);
	box-shadow: 0 -8px 10px 1px rgba(0, 0, 0, 0.2), 0 8px 10px 6px rgba(0, 0, 0, 0.2);
	padding: 5% 0;
	margin: 9% 0 8%;

	.top__specialEdition-title {
		width: 38%;
		margin: 0 auto 3%;

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

	.top__specialEdition-image {
		width: 87%;
		margin: 0 auto 2%;
	}

	.top__specialEdition-info {
		width: 87%;
		margin: 0 auto 5%;

		.title {
			font-size: calc(43 * 100vw / 1920);
			text-align: center;
			font-weight: 700;

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

		.contents {
			font-size: calc(41 * 100vw / 1920);
			padding-left: 3%;

			@media (max-width: 750px) {
				padding-left: 1%;
				font-size: calc(24 * 100vw / 750);
			}
		}

		.price {
			font-size: calc(37 * 100vw / 1920);
			text-align: right;
			letter-spacing: 0.03em;

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


	.top__specialEdition-button1 {
		width: 87%;
		margin: 0 auto 8%;
		position: relative;

		a {
#			background: #8a2be26e;
			position: absolute;
			top: 69.5%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 77%;
			height: 32%;
		}
	}

	.top__specialEdition-button2 {
		width: 50%;
		margin: 0 auto 8%;
	}
}


/* ----------------------------------------------------
 * Switch2紹介
 * ---------------------------------------------------- */
.top__switch-container {
	width: 88%;
	margin: 0 auto 10%;

	@media (max-width: 750px) {
		width: 87%;
	}

	.top__switch-title {
		width: 80%;
		margin: 0 auto 6%;

		@media (max-width: 750px) {
			width: 100%;
		}
	}

	p {
		text-align: center;
		font-size: calc(38 * 100vw / 1920);
		margin-bottom: 7%;
		letter-spacing: 0.04em;

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

	.top__switch-pl {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: calc(30 * 100vw / 1920);
		text-align: center;

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

		span {
			width: 45%;
		}
	}
}

/* ----------------------------------------------------
 * 
 * ---------------------------------------------------- */


/* ----------------------------------------------------
 * 
 * ---------------------------------------------------- */