@charset "UTF-8";

:root {
	--swiper-navigation-size: 25px;
}

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

.mainv {
	position: relative;

	.center {
		position: absolute;
		top: min(235px, 18vw);
		right: calc(50% - min(460px, 45vw));
		width: 100%;
		z-index: 5;

		.col {
			text-align: center;
			display: flex;
			align-items: flex-start;
			justify-content: flex-end;
			gap: 50px;
		}

		.text {
			width: 395px;
			color: #fff;

			em {
				/* font-size: 5.0rem; */
				font-size: min(5.0rem, 3.5vw);
				font-weight: 600;
				font-family: var(--font-noto_serif);
				writing-mode: vertical-rl;
				text-orientation: mixed;
				letter-spacing: 0.13em;
				line-height: 1.5;
				margin-left: 30px;

				text-align: left;
			}

			p {
				margin-block: 40px;
				text-align: left;
			}
		}

		.image {
			padding-block-start: 20em;
		}

		.btn-type01 {
			a {
				min-width: 180px;
				font-size: 1.7rem;
				padding-block: 8px;
			}
		}

	}

	.upper {
		position: relative;
		background: url(../images/home/mainv/image-desc02.jpg)no-repeat center /cover;

		&::after,
		&::before {
			position: absolute;
			content: '';
		}

		&:after {
			background: linear-gradient(0deg, var(--color-blue) 30%, transparent 80%);
			width: 100%;
			height: 180px;
			left: 0;
			bottom: -30px;
			z-index: 2;
		}

		&:before {
			background: linear-gradient(90deg, var(--color-blue) 0, transparent 100%);
			mix-blend-mode: multiply;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 1;
		}
	}

	.lower {
		max-height: 668px;
		overflow: hidden;

		img {
			width: fit-content;
		}
	}

	@media (width <=767px) {
		margin-bottom: 50px;

		.upper {
			&:after {
				background: linear-gradient(0deg, var(--color-blue) 0%, transparent 100%);
				height: 50px;
				bottom: -10px;
			}
		}

		.center {
			position: static;
			transform: none;
			width: 100%;


			.col {
				/* flex-direction: column; */
				gap: 0px;
			}

			.text {
				width: 100%;
				padding-inline: 20px;

				em {
					font-size: min(5.0rem, 5.5vw);
					position: absolute;
					top: 17%;
					right: 50px;
					z-index: 6;
				}

				p {
					margin-block: 25px;
					color: var(--color-body);
				}
			}

			.image {
				position: absolute;
				top: 20%;
				right: 32%;
				padding-block-start: 0;
				z-index: 5;
			}
		}

		.lower {
			/* display: none; */
		}
	}
}



.home-message {
	background: url(../images/home/img-message_desc.jpg)no-repeat center bottom /100% auto;

	.container-inner {
		padding-bottom: 27.5%;
		margin-bottom: 30px;
		padding-top: 80px;

		.title-level01 {
			.en {
				margin-block-start: -8px;
			}
		}
	}

	.col-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: min(125px, 6.4vw);
		margin-block: -130px 0px;

		.col {
			width: 300px;
			order: 1;

			&:last-of-type {
				order: 3;
			}

			p {
				font-size: 1.5rem;
			}

			.name {
				text-align: center;
				margin-bottom: 15px;

				.name-ja {
					font-family: var(--font-noto_serif);
					font-size: 3.0rem;
					display: block;
					line-height: 2.0;
				}

				.name-en {
					font-size: 1.3rem;
				}
			}
		}

		.btn-type01 {
			min-width: 125px;
			order: 2;
			padding-top: 53px;
		}
	}

	@media (width <=767px) {
		background-size: 180% auto;
		background-position: right 42% bottom;

		.container-inner {
			padding-bottom: 50%;
			margin-bottom: 20px;
			background: url(../images/home/img-message_desc02.png)no-repeat center top /100% auto;
		}

		.title-level01 {
			margin-bottom: 10px;
		}

		.col-wrap {
			flex-direction: column;
			gap: 35px;
			margin-block: 0px;

			.col {
				width: auto;

				.name {
					margin-bottom: 10px;

					.name-ja {
						font-size: 2.2rem;
					}

				}
			}



			.btn-type01 {
				order: 1;
				padding-top: 0px;
			}
		}
	}
}

.home-news {
	.col-wrap {
		display: flex;
		justify-content: space-between;
		gap: 50px;

		.col {
			width: calc(50% - 25px);
			position: relative;
		}

		.title-level02 {
			color: var(--color-body);
			font-size: 3.0rem;
			display: block;
			margin-bottom: 25px;
			text-align: left;
		}

		.btn-type01 {
			position: absolute;
			right: 0;
			top: 5px;
		}
	}

	.activity-list {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 35px 30px;

		li {
			width: 47%;
			transition: 0.3s;

			&:hover {
				opacity: 0.85;

				h3 {
					font-weight: bold;
					color: var(--color-primary);
				}

				.image {
					img {
						transition: 0.3s;
						transform: scale(1.2);
					}
				}
			}

			.image {
				width: 238px;
				height: 152px;
				overflow: hidden;

				img {
					transition: 0.3s;
					object-fit: cover;
					width: 100%;
				}
			}

			.text {
				margin-top: 15px;
			}

			h3 {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	@media (width <=767px) {
		.col-wrap {
			flex-direction: column;
			gap: 60px;

			.col {
				width: 100%;
			}

			.title-level02 {
				text-align: center;
				font-size: 2.4rem;
			}

			.btn-type01 {
				position: static;
				text-align: center;
				margin-top: 25px;
			}
		}

		.activity-list {
			gap: 30px min(30px, 5vw);

			li {
				width: 47%;

				.image {
					width: 100%;
				}
			}
		}
	}
}

.home-video {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	background-color: var(--color-primary);
	padding-block: 50px;

	.title-level01 {
		width: 260px;
		margin-bottom: 0;

		.ja {
			font-size: 3.6rem;
		}

		.en {
			font-size: 2.0rem;
		}
	}

	.btn-type01 {
		margin-bottom: 20px;
	}

	.video-box {
		width: 76%;
		overflow: hidden;
		padding-inline: 40px;

		.video-slider {
			position: relative;
			text-align: center;

			.swiper-button-next,
			.swiper-button-prev {
				width: var(--swiper-navigation-size);
				top: 40%;
			}

			.swiper-button-next {
				right: -40px;

				svg path {
					fill: #fff;
				}
			}

			.swiper-button-prev {
				left: -40px;

				svg path {
					fill: #fff;
				}
			}

			p {
				margin-top: 20px;
				color: #fff;
				text-align: left;
				transition: 0.3s;
			}
		}
	}

	.swiper-slide {
		width: 254px;
		transition: 0.3s;

		&:hover {
			cursor: pointer;

			p {
				color: var(--color-secondary);
			}

			.custom-play {
				background: rgba(251, 12, 12, 0.8);
				transition: 0.3s;
			}
		}
	}

	.video-wrap {
		position: relative;
		display: inline-block;

		.custom-play {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 80px;
			height: 80px;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: 0.3s;

			&::after {
				content: '';
				border-style: solid;
				border-width: 12px 0 12px 20px;
				border-color: transparent transparent transparent white;
				margin-left: 5px;
			}
		}

	}



	@media (width <=767px) {
		flex-direction: column;
		gap: 50px;
		padding-block: 50px;

		.title-level01 {
			margin-bottom: 0;

			.ja {
				font-size: 2.4rem;
				writing-mode: horizontal-tb;
			}

			.en {
				font-size: 1.8rem;
			}
		}

		.btn-type01 {
			margin-bottom: 0px;
		}

		.video-box {
			display: flex;
			flex-direction: column-reverse;
			justify-content: center;
			margin: 0;
			padding-inline: 35px;
			width: 100%;

			.video-slider {
				position: relative;
				text-align: center;
				margin-bottom: 35px;

				.swiper-button-next,
				.swiper-button-prev {
					width: var(--swiper-navigation-size);
					top: 40%;
				}

				.swiper-button-next {
					right: -35px;
				}

				.swiper-button-prev {
					left: -35px;
				}

				p {
					margin-top: 20px;
					color: #fff;
				}
			}


		}
	}
}

.swiper-slide img {
	height: auto;
	width: 100%;

	@media (width <=767px) {}
}

.home-teen {
	width: min(1280px, 100%);
	margin: auto;
	padding-block: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 60px;

	.image {
		width: 50%;
	}

	.text {
		width: min(375px, 100%);

		.title-level01 {
			align-items: flex-start;
			margin-bottom: 0;
		}

		em {
			font-family: var(--font-noto_serif);
			font-size: 2.9rem;
			line-height: 1.3;
			display: inline-block;
			padding-block: 12px;
		}
	}

	@media (width <=767px) {
		gap: 20px;
		padding: 40px 20px;
		flex-direction: column-reverse;

		.image {
			width: 100%;
			text-align: center;
		}

		.text {
			width: auto;

			.title-level01 {
				align-items: center;
			}

			em {
				font-size: 2.4rem;
			}

			p {
				margin-bottom: 20px;
			}
		}
	}
}

.home-staff {
	position: relative;

	.image {
		img {
			width: fit-content;
		}
	}

	.title-level01 {
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
	}

	.btn-type01 {
		position: absolute;
		top: 130px;
		left: 50%;
		transform: translateX(-50%);
	}

	@media (width <=767px) {
		background-size: 110% auto;

		.title-level01 {
			top: 8%;
		}

		.btn-type01 {
			top: auto;
			bottom: 20px;
		}
	}
}

/* INDEX */