@charset "utf-8";

/* index_main
====================================================================== */
:root {
	--kvtransition: 1.0s;
	--kvcolor: #505050;
	--kvtxtcolor: #707070;
}

.index_main {
	background-color: #ffffff;
	position: relative;
	clip-path: inset(0);
	overflow: hidden;
	padding-block: 0 100svh;
	z-index: 10000;

	.spacer {
		height: 50lvh;
		margin-bottom: 50lvh;
		pointer-events: none;
	}
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.bg_wrap {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		height: 100lvh;
		z-index: -1;
		.catch {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			svg {
				width: 4.4rem;
				fill: var(--kvtxtcolor);
			}
		}
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -2;
			visibility: hidden;
			.illust {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: calc(-960px / 2);
				margin-left: calc(-1600px / 2);
				overflow: visible;
				&._sp {
					display: none;
				}
			}
			&.-bg0 {
			}
			&.-bg1 {
				--kvcolor: #ffffff;
				--kvtxtcolor: #ffffff;
			}
			&.-bg2 {
				--kvcolor: #ffffff;
				--kvtxtcolor: #ffffff;
			}
			&.-bg3 {
			}
			.-headeropen & {
				--kvcolor: #505050;
				--kvtxtcolor: #707070;
			}
		}
	}
	.txt {
		margin-left: calc(50% + 22rem);
		padding-block: 12rem;
		font-size: 2rem;
		line-height: 2.5;
		pointer-events: none;

		transition: color var(--kvtransition), filter 0.2s;
		color: #505050;
		.-headeropen & {
			filter: opacity(0%);
			pointer-events: none;
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 0;
		.bg_wrap {
			.catch {
				height: 50%;
				bottom: auto;
				padding-top: 1rem;
				svg {
					width: 2.7rem;
				}
			}
			.bg {
				&._pc {
					display: none;
				}
				&._sp {
					display: block;
				}
				.illust {
					margin-top: calc(-650px / 2);
					margin-left: calc(-320px / 2);
				}
			}
		}
		.txt {
			display: flex;
			justify-content: center;
			padding-top: 5rem;
			padding-bottom: 50svh;
			font-size: 1.3rem;
			margin-left: 0;
			line-height: calc(30 / 13);
			-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
			mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: 0 0;
			mask-position: 0 0;
		}
	}


	#header {
		.logo {
			a {
				svg {
					fill: var(--kvcolor);
				}
			}
		}
		nav {
			.gnav {
				a {
					color: var(--kvcolor);
				}
			}
			.sns {
				a {
					svg {
						fill: var(--kvcolor);
					}
				}
			}
		}

		.nav_btn {
			&::before,
			a::before,
			a::after {
				border-top-color: var(--kvcolor);
				transition: transform var(--transition), opacity var(--transition), border-top-color var(--kvtransition);
			}
		}
	}

	&.scene0 {
	}
	&.scene1 {
		.txt {
			color: #ffffff;
		}
	}
	&.scene2 {
		.txt {
			color: #ffffff;
		}
	}
	&.scene3 {
	}
}


/* index_block_nav
====================================================================== */
.index_block_nav {
	position: relative;
	padding-block: 12rem;
	.en {
		font-size: 6rem;
		line-height: 1;
	}
	h2 {
		font-size: 2.4rem;
		line-height: calc(44 / 24);
		font-weight: var(--font-weight-bold);
	}
	.img {
		overflow: hidden;
		border-radius: 1rem;
	}
	.btn {
		margin-top: 4rem;
	}
	@media screen and (min-width: 744px), print {
		overflow: hidden;
		.contents {
			position: relative;
			min-height: 43.8rem;
			padding-top: 2rem;
			.img {
				position: absolute;
				top: 0;
				width: 70rem;
			}
			&.-img-left {
				padding-left: calc(var(--base-width) / 2 + 10rem);
				.img {
					right: 50%;
				}
			}
			&.-img-right {
				padding-right: calc(var(--base-width) / 2 + 10rem);
				.img {
					left: 50%;
				}
			}
			.en {
				margin-bottom: 4rem;
			}
			h2 {
				margin-bottom: 3rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 6rem;
		padding-inline: 3rem;
		.en {
			margin-bottom: 3rem;
			font-size: 2.7rem;
			text-align: center;
		}
		.img {
			margin-bottom: 2.5rem;
			border-radius: .5rem;
		}
		h2 {
			margin-bottom: 1.5rem;
			font-size: 1.8rem;
		}
		h2, .summary {
			margin-right: -2rem;
		}
		.btn {
			margin-top: 2rem;
		}
	}
}

/* index_news
====================================================================== */
.index_news {
	padding-block: 11rem 12rem;
	text-align: center;
	.en {
		margin-bottom: 6rem;
		font-size: 6rem;
		line-height: 1;
	}
	.btn {
		margin-top: 6rem;
	}
	.news_list a .img.-noimage {
		border-width: 0;
	}
	@media screen and (max-width: 743px) {
		padding-block: 6rem;
		/* white-space: nowrap; */
		.en {
			margin-bottom: 3rem;
			font-size: 2.7rem;
			text-align: center;
		}
		.btn {
			margin-top: 4rem;
		}
	}
}

/* index_contanct
====================================================================== */
.index_contanct {
	padding-block: 13rem 12rem;
	background-color: var(--color-base);
	text-align: center;
	color: #fff;
	.en {
		margin-bottom: 4rem;
		font-size: 6rem;
		line-height: 1;
	}
	h2 {
		font-size: 2.4rem;
		line-height: calc(44 / 24);
		font-weight: var(--font-weight-bold);
	}
	.btn {
		margin-top: 4rem;
	}
	@media screen and (max-width: 743px) {
		padding-block: 7rem 6.5rem;
		.en {
			margin-bottom: 0.6rem;
			font-size: 2.7rem;
		}
		h2 {
			font-size: 1.8rem;
		}
		.btn {
			margin-top: 3rem;
			.txt {
				--line-width: 8rem;
			}
		}
	}
}

/* index_bnr
====================================================================== */
.index_bnr {
	padding-block: 12rem;
	a {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 23rem;
		border-radius: 1rem;
		color: #fff;
		text-decoration: none;
		overflow: hidden;
		.en {
			font-size: 3.5rem;
			line-height: 1;
			font-weight: var(--font-weight-semi);
		}
		@media (hover) {
			img {
				transition: transform 0.5s;
			}
			&:hover img {
				transform: scale(1.05);
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding: 4rem 2rem 6rem;
		a {
			height: 8rem;
			border-radius: .5rem;
			.en {
				font-size: 1.8rem;
			}
		}
	}
}