@charset "utf-8";

/* index_main
====================================================================== */
.index_main {
	position: relative;
	height: max(100svh, 70rem);
	.copy {
		& > span {
			position: absolute;
			inset: 1em 0 0;
			width: 15rem;
			height: 47.2rem;
			display: flex;
			align-items: center;
			margin: auto;
			white-space: nowrap;
			writing-mode: vertical-rl;
			font-size: 9rem;
			line-height: 1.8;
			font-weight: 900;
			z-index: 3;
			&.-cp1 {
				transform: translateX(1lh);
			}
			&.-cp3 {
				transform: translateX(-1lh);
			}
		}
	}
	.lead {
		position: absolute;
		right: 3rem;
		bottom: 3rem;
		font-size: 2.6rem;
		line-height: 1.5;
		font-weight: 900;
		z-index: 4;
	}
	.ico {
		position: absolute;
		mix-blend-mode: multiply;
		max-width: none;
		z-index: 2;
		&.-ico1 {
			width: 31.4rem;
			right: calc(50% + 23.8rem);
			bottom: calc(50% - 6.8rem);
		}
		&.-ico2 {
			width: 54.0rem;
			left: calc(50% + 31.6rem);
			top: calc(50% - 26.6rem);
		}
		&.-ico3 {
			width: 63.8rem;
			right: calc(50% + 20.6rem);
			top: calc(50% + 17rem);
		}
	}
	.-eng1 {
		top: 0;
		left: 0;
	}
	.-eng2 {
		top: calc(50% - var(--eng-height) / 2);
		right: 0;
	}
	.-eng3 {
		bottom: 0;
		left: 0;
	}
	@media screen and (min-width: 744px), print {
		.lead {
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				right: calc(100% + 1em);
				width: 10rem;
				border-top: 1px solid;
			}
		}
	}
	@media screen and (max-width: 743px) {
		height: max(100svh, 60rem);
		.copy {
			& > span {
				height: 26.2rem;
				inset: 0 0 5rem;
				font-size: 5rem;
			}
		}
		.lead {
			right: 0;
			left: 0;
			bottom: auto;
			top: calc(50% + 12rem);
			width: fit-content;
			margin-inline: auto;
			font-size: 2rem;
			text-align: center;
		}
		.ico {
			transform: scale(.5);
			&.-ico1 {
				right: 60%;
				bottom: 18%;
			}
			&.-ico2 {
				left: 20%;
				top: -35%;
			}
			&.-ico3 {
				right: -50%;
				top: 70%;
			}
		}
	}
}

@media screen {
	body {
		overflow-x: clip;
		overflow-y: scroll;
	}
	.index_main {
		pointer-events: none;
		user-select: none;
		.lead {
			opacity: 0;
			transform: translateY(2rem);
			will-change: transform, opacity;
		}
		.bg_eng {
			opacity: 0;
			&.-eng1 {
				transform: translateX(8rem);
			}
			&.-eng2 {
				transform: translateX(-8rem);
			}
			&.-eng3 {
				transform: translateX(8rem);
			}
		}
		.ico {
			opacity: 0;
			transform: scale(.3);
			will-change: transform, opacity;
		}
		.copy {
			& > span[class] {
				.txt {
					display: block;
					opacity: 0;
					will-change: opacity;
				}
			}
		}
	}
	html.hide-header {
		#header {
			transform: translateY(-110%);
		}
	}
	html.show-header {
		#header {
			transition: transform .5s 1s ease-out;
			transform: none;
		}
	}
	html.is-first {
		#footer {
			display: none;
		}
		#container {
			min-height: 100dvh;
		}
		.index_main ~ * {
			position: fixed;
			top: 1000rem;
			left: -1000rem;
			width: 100%;
		}
		.index_main {
			.copy {
				& > span {
					transform: translateX(0);
					.txt {
						transform: translateY(4rem);
						will-change: transform, opacity;
					}
					.in_ico {
						position: absolute;
						top: -11rem;
						right: 0;
						left: 0;
						width: 7rem;
						height: 9rem;
						margin-block: auto;
						display: flex;
						justify-content: center;
						align-items: center;
						opacity: 0;
						transform-origin: 50% 100%;
						transform: scale(0);
						opacity: 0;
						will-change: transform, opacity;
						img {
							width: auto;
							height: auto;
							max-width: 100%;
							max-height: 100%;
						}
					}
				}
			}
			.-eng_op {
				right: 0;
				left: 0;
				top: calc(50% + var(--eng-height) * -.5);
				text-align: center;
				transform: translateX(5rem);
				span {
					display: block;
					transform: translateX(8rem);
				}
				will-change: transform, opacity;
			}
			.copy > span.show {
				.txt {
					transform: translateY(0);
					opacity: 1;
					transition: transform .3s .2s cubic-bezier(0.33, 1, 0.68, 1), opacity .3s .2s cubic-bezier(0.33, 1, 0.68, 1);
				}
				.in_ico {
					transform: scale(1);
					opacity: 1;
					transition: transform .4s .3s cubic-bezier(0.34, 1.9, 0.64, 1), opacity .3s .3s cubic-bezier(0.33, 1, 0.68, 1);
				}
			}
			.copy > span.hide {
				opacity: 0;
				transform: translateY(-2rem);
				transition: transform .4s cubic-bezier(0.32, 0, 0.67, 0), opacity .4s cubic-bezier(0.32, 0, 0.67, 0);
			}
			.-eng_op.show {
				transform: translateX(0);
				opacity: 1;
				transition: transform .5s .3s cubic-bezier(0.33, 1, 0.68, 1), opacity .5s .3s linear;
				span {
					transform: translateX(-8rem);
					transition: transform 1.6s linear;
				}
			}
			.-eng_op.hide {
				transform: translateX(-5rem);
				opacity: 0;
				transition: transform .4s cubic-bezier(0.32, 0, 0.67, 0), opacity .4s cubic-bezier(0.32, 0, 0.67, 0);
			}
		}
	}
	.index_main.end_opening {
		.copy {
			& > span[class] {
				&.-cp1 {
					--char-index-col: 0;
				}
				&.-cp2 {
					--char-index-col: 8;
				}
				&.-cp3 {
					--char-index-col: 16;
				}
				.txt {
					opacity: 1;
					transform: none;
					span {
						display: inline-block;
						opacity: 0;
						/* transform: scale(.7); */
						will-change: transform, opacity;
						will-change: opacity;
						&.show {
							/* transform: scale(1); */
							opacity: 1;
							transition: transform .4s cubic-bezier(0.34, 1.9, 0.64, 1), opacity .3s cubic-bezier(0.33, 1, 0.68, 1);
							transition: opacity .5s linear;
							transition-delay: calc((var(--char-index) + var(--char-index-col)) * 0.05s);
						}
					}
				}
			}
		}
		.bg_eng {
			opacity: 1;
			transform: translateX(0) !important;
			transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1), opacity .8s cubic-bezier(0.33, 1, 0.68, 1);
			&.-eng2 {
				transition-delay: .1s;
			}
			&.-eng3 {
				transition-delay: .2s;
			}
		}
		.ico {
			opacity: 1;
			transform: scale(1);
			transition: transform .6s cubic-bezier(0.34, 1.9, 0.64, 1), opacity .5s cubic-bezier(0.33, 1, 0.68, 1);
			&.-ico1 {
				transition-delay: 0.9s;
			}
			&.-ico2 {
				transition-delay: 1s;
			}
			&.-ico3 {
				transition-delay: 1.1s;
			}
		}
		.lead {
			transform: translateY(0);
			opacity: 1;
			transition: transform .5s 2s cubic-bezier(0.33, 1, 0.68, 1), opacity .5s 2s cubic-bezier(0.33, 1, 0.68, 1);
		}
	}
	@media screen and (max-width: 743px) {
		html.is-first {
			.index_main {
				.copy {
					& > span {
						.in_ico {
							position: absolute;
							top: calc(5 / 9 * -11rem);
							width: calc(5 / 9 * 7rem);
							height: calc(5 / 9 * 9rem);
						}
					}
				}
				.-eng_op {
					span {
						transform: translateX(20rem);
					}
				}
				.-eng_op.show {
					span {
						transform: translateX(-20rem);
					}
				}
			}
		}
		.index_main.end_opening {
			.ico {
				transform: scale(.5);
			}
		}
	}
}


/* index_about
====================================================================== */
.index_about {
	position: relative;
	overflow: hidden;
	margin-top: 8rem;
	margin-bottom: 2rem;
	margin-inline: 2rem;
	padding-inline: var(--pc-base-padding);
	padding-block: 11rem 12rem;
	border-radius: 2rem;
	color: #fff;
	z-index: 3;
	.eng_title {
		position: relative;
		margin-bottom: 14rem;
		z-index: 3;
	}
	.about_list {
		position: relative;
		z-index: 3;
		li {
			border-bottom: 1px solid #fff;
		}
		a {
			position: relative;
			display: flex;
			align-items: end;
			padding-block: 2rem;
			color: #fff;
			text-decoration: none;
			font-size: 1.8rem;
			line-height: 1.6;
			font-weight: 700;
			.eng {
				font-size: 5rem;
				line-height: 1;
				.slash {
					font-weight: 300;
				}
			}
			.link_arrow {
				top: 2rem;
			}
			@media (hover) {
				&:hover {
					opacity: 0.5;
				}
			}
		}
	}
	.bg {
		position: absolute;
		inset: 0;
		opacity: 0;
		pointer-events: none;
		user-select: none;
		z-index: 0;
		&.is-current {
			transition: .2s opacity linear;
			opacity: 1;
			z-index: 2;
		}
		&.is-previous {
			opacity: 1;
			z-index: 1;
		}
		&:has(video)::before {
			content: "";
			position: absolute;
			inset: 0;
			background: #000;
			opacity: 0.2;
		}
	}
	@media screen and (min-width: 744px), print {
		.about_list {
			max-width: var(--base-width);
			margin-inline: auto;
			a {
				gap: 3rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		margin-inline: 1rem;
		padding-inline: var(--sp-base-padding);
		padding-block: 4rem 3rem;
		border-radius: 1rem;
		.eng_title {
			margin-bottom: 4rem;
		}
		.about_list {
			a {
				gap: 1rem;
				padding-block: 1.5rem;
				font-size: 1.3rem;
				.eng {
					font-size: 2.6rem;
				}
				.link_arrow {
					top: 1rem;
				}
			}
		}
		.bg img {
			object-position: 70%;
		}
	}
}

/* index_works
====================================================================== */
.index_works {
	--recently-link-bg: var(--bg-base);
	position: relative;
	margin-inline: 2rem;
	margin-bottom: 2rem;
	padding-inline: var(--pc-base-padding);
	padding-block: 11rem 9rem;
	background-color: #fff;
	border-radius: 2rem;
	.index_works_list {
		position: relative;
		left: 50%;
		margin-left: calc(-1 * ((60rem + 2rem * 2) * 3) / 2);
		margin-top: 10rem;
		overflow: visible;
		width: calc((60rem + 2rem * 2) * 3);
		.works_list_item {
			padding-inline: 2rem;
			.item_img {
				&.-noimage {
					background-color: var(--bg-base);
				}
			}
			.link_arrow {
				display: none;
			}
		}
	}
	.works_nav {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 4rem;
		margin-top: 5rem;
		.swiper-progress {
			position: relative;
			width: 100rem;
			height: 1rem;
			border-radius: 0.5rem;
			background-color: #e6e6e6;
		}
		.swiper-progress-bar {
			position: absolute;
			inset: 0 auto 0 0;
			background-color: var(--color-theme);
			border-radius: 0.5rem;
			transition: width 0.4s ease;
		}
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		margin-inline: 1rem;
		padding-inline: var(--sp-base-padding);
		padding-block: 4rem 4rem;
		border-radius: 1rem;
		.works_filter_wrap {
			margin-inline: 0;
		}
		.index_works_list {
			margin-left: calc(-1 * ((30rem + 1rem * 2) * 3) / 2);
			margin-top: 4rem;
			width: calc((30rem + 1rem * 2) * 3);
			.works_list_item {
				padding-inline: 1rem;
			}
		}
		.works_nav {
			gap: 2rem;
			margin-top: 3rem;
			.swiper-progress {
				width: 20rem;
			}
		}
	}
}

/* index_column
====================================================================== */
.index_column {
	position: relative;
	margin-top: 14rem;
	padding-inline: var(--pc-base-padding);
	padding-bottom: 17rem;
	.index_column_list {
		position: relative;
		margin-top: 8rem;
		margin-inline: calc(var(--pc-base-padding) * -1);
		.index_column_list_item {
			a {
				display: block;
				text-decoration: none;
				color: var(--color-base);
				.item_img {
					overflow: hidden;
					border-radius: 2rem;
					aspect-ratio: 780 / 540;
					&.-noimage {
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #fff;
						img {
							width: 50%;
						}
					}
				}
				.item_body {
					padding-block: 4rem;
					border-top: .6rem solid;
					border-bottom: .2rem solid;
					.item_title {
						font-size: 3.2rem;
						line-height: 1.8;
					}
					time, .item_tags {
						font-size: 1.6rem;
						line-height: 2;
					}
					.item_tags {
						display: flex;
						flex-wrap: wrap;
						gap: 0 1em;
					}
				}
			}
		}
	}
	.column_nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 3;
		.swiper-pagination {
			position: relative;
			inset: auto;
			width: auto;
			font-size: 2rem;
			line-height: 1;
			font-variant-numeric: tabular-nums;
			font-feature-settings: "tnum" 1;
		}
	}
	.more {
		margin-top: 2rem;
		max-width: var(--base-width);
		margin-inline: auto;
		display: flex;
		justify-content: end;
	}
	.-eng1 {
		top: 0;
		right: 0;
	}
	.-eng2 {
		top: calc(50% - var(--eng-height) / 2);
		left: 0;
	}
	.-eng3 {
		bottom: 0;
		right: 0;
	}
	@media screen and (min-width: 744px), print {
		.index_column_list {
			.index_column_list_item {
				a {
					width: var(--base-width);
					margin-inline: auto;
					display: flex;
					flex-direction: row-reverse;
					justify-content: space-between;
					align-items: flex-start;
					.item_img {
						width: 78rem;
					}
					.item_body {
						width: 43rem;
						min-height: 38rem;
						display: flex;
						flex-direction: column;
						time {
							margin-top: auto;
						}
					}
				}
			}
		}
		.column_nav {
			position: absolute;
			left: calc((100% - var(--base-width)) / 2);
			bottom: 0;
			width: 40rem;
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		padding-inline: var(--sp-base-padding);
		padding-bottom: 10rem;
		.index_column_list {
			margin-top: 4rem;
			margin-inline: calc(var(--sp-base-padding) * -1);
			.index_column_list_item {
				padding-inline: var(--sp-base-padding);
				a {
					.item_img {
						border-radius: 1rem;
					}
					.item_body {
						margin-top: 2rem;
						padding-block: 2rem;
						border-top-width: .3rem;
						.item_title {
							margin-bottom: 2rem;
							font-size: 2rem;
							line-height: 1.8;
						}
						time, .item_tags {
							font-size: 1.3rem;
						}
					}
				}
			}
		}
		.column_nav {
			margin: 2rem var(--sp-base-padding) 0;
			.swiper-pagination {
				font-size: 1.5rem;
			}
		}
		.more {
			margin-top: 2rem;
			justify-content: center;
		}
	}
}

/* index_recruit
====================================================================== */
.index_recruit {
	position: relative;
	margin-inline: 2rem;
	a {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column-reverse;
		text-decoration: none;
		border-radius: 2rem;
		.recruit_contents {
			width: 100%;
		}
		.index_recruit_item {
			position: relative;
			height: 50.6rem;
			z-index: 2;
			.txt {
				position: absolute;
				inset: auto 0 8rem;
				width: var(--base-width);
				max-width: calc(100% - var(--pc-base-padding) * 2);
				margin-inline: auto;
				.lead {
					margin-bottom: 2rem;
					span {
						display: block;
						width: fit-content;
						padding: .1em 2rem;
						background-color: #fff;
						color: var(--color-base);
						font-size: 4rem;
						line-height: 1.5;
						font-weight: var(--font-weight-bold);
					}
				}
				.post {
					color: #fff;
					font-size: 2rem;
					line-height: 1.5;
				}
			}
		}
		.recruit_title {
			position: relative;
			width: 100%;
			padding-block: 5rem 11rem;
			padding-inline: var(--pc-base-padding);
			background-color: var(--color-theme);
			.eng_title {
				margin-bottom: 0;
			}
			.eng_circle {
				position: absolute;
				inset: -6.2rem 0 auto 0;
				width: var(--base-width-l);
				max-width: calc(100% - var(--pc-base-padding) * 2);
				margin-inline: auto;
				display: flex;
				justify-content: end;
				z-index: 5;
				img {
					display: block;
					width: 12.4rem;
					animation: rotate-loop 10s linear infinite;
				}
			}
		}
		.more {
			.arrow_btn {
				color: #fff;
			}
		}
		@media (hover) {
			&:hover {
				opacity: 0.7;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		a {
			.more {
				position: absolute;
				inset: auto 0 11rem;
				width: var(--base-width);
				max-width: calc(100% - var(--pc-base-padding) * 2);
				margin-inline: auto;
				display: flex;
				justify-content: end;
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-inline: 1rem;
		a {
			flex-direction: column;
			padding-bottom: 3rem;
			border-radius: 1rem;
			&::before {
				content: "";
				position: absolute;
				inset: 70% 0 0;
				background-color: var(--color-theme);
				z-index: -1;
			}
			.index_recruit_item {
				height: 24rem;
				order: 1;
				.txt {
					position: absolute;
					inset: auto 0 2rem;
					max-width: calc(100% - var(--sp-base-padding) * 2);
					margin-inline: auto;
					.lead {
						margin-bottom: 1rem;
						span {
							padding: .1em 1rem;
							font-size: 1.8rem;
						}
					}
					.post {
						font-size: 1.4rem;
					}
				}
			}
			.recruit_title {
				order: 2;
				padding-block: 3rem 3rem;
				padding-inline: var(--sp-base-padding);
				.eng_circle {
					top: -3rem;
					max-width: calc(100% - var(--sp-base-padding) * 2);
					img {
						width: 6rem;
					}
				}
			}
			.more {
				order: 3;
			}
		}
	}
}

/* index_news
====================================================================== */
.index_news {
	position: relative;
	margin-top: 14rem;
	padding-inline: var(--pc-base-padding);
	padding-bottom: 16rem;
	.index_news_item {
		a {
			display: block;
			text-decoration: none;
			color: var(--color-base);
			.item_img {
				overflow: hidden;
				margin-bottom: 2rem;
				border-radius: 1rem;
				aspect-ratio: 360 / 200;
				&.-noimage {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #fff;
					img {
						width: 50%;
					}
				}
			}
			.news_title {
				font-weight: var(--font-weight-bold);
				line-height: 1.8;
			}
			.footer {
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 2rem;
				padding-top: 1rem;
				border-top: 1px solid;
				font-size: 1.4rem;
				.more {
					position: relative;
					display: flex;
					align-items: center;
					gap: 0.8rem;
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.eng_title {
			position: absolute;
			inset: 0 0 auto;
			width: calc(100% - var(--pc-base-padding) * 2);
			& > * {
				position: relative;
				width: fit-content;
				z-index: 3;
			}
		}
		.index_news_contents {
			position: relative;
			width: var(--base-width);
			margin-inline: auto;
			z-index: 2;
			.index_news_list {
				display: flex;
				flex-wrap: wrap;
				gap: 6rem;
				width: 78rem;
				margin-left: auto;
			}
			.index_news_item {
				width: 36rem;
			}
			.more_links {
				position: absolute;
				left: 0;
				bottom: 0;
				display: flex;
				flex-direction: column;
				gap: 8rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
		padding-inline: var(--sp-base-padding);
		padding-bottom: 6rem;
		.index_news_list {
			display: flex;
			flex-direction: column;
			gap: 4rem;
		}
		.more_links {
			margin-top: 4rem;
		}
	}
}