@charset "utf-8";

/* index_bg_group
====================================================================== */
.index_bg_group {
	background-color: var(--color-dark);
	color: #fff;
	&.-main {
		overflow: clip;
		@media screen and (min-width: 744px), print {
			padding-top: calc(var(--header-height) + var(--header-top));
			padding-bottom: 16rem;
		}
		@media screen and (max-width: 743px) {
			padding-bottom: 8rem;
		}
	}
}

/* index_main
====================================================================== */
.index_main {
	--height: max(calc(100svh - (var(--header-height) + var(--header-top))), calc(80rem - (var(--header-height) + var(--header-top))));
	position: relative;
	height: var(--height);
	margin-bottom: calc(15rem + max(0px, calc((146rem - var(--height)) / 2)));
	@media screen and (max-width: 743px) {
		--height: max(calc(100svh - (var(--header-height) + var(--header-top) + var(--footer-fix-btn-height))), calc(60rem - (var(--header-height) + var(--header-top) + var(--footer-fix-btn-height))));
		display: flex;
		flex-direction: column;
		justify-content: end;
		padding-bottom: 2rem;
		margin-bottom: calc(6rem + max(0px, calc((68rem - var(--height)) / 2)));
	}

	.bg-texts,
	.bg-circle {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 146rem;
		height: 146rem;
		transform: translate(-50%, -50%);
		pointer-events: none;
		user-select: none;
		@media screen and (max-width: 743px) {
			width: 68rem;
			height: 68rem;
		}
	}

	.bg-circle {
		background-color: #fff;
		mix-blend-mode: overlay;
		border-radius: 100%;
		opacity: 0.5;
	}
	.bg-texts {
		z-index: 2;
		.texts {
			.catch {
				position: absolute;
				left: 0;
				color: var(--color-dark);
				white-space: nowrap;
				will-change: transform;
				animation-name: catchMov;
				animation-timing-function: linear;
				animation-fill-mode: both;
				dt {
					display: flex;
					font-size: 2rem;
					line-height: 1;
					&::before {
						content: "Client /";
						margin-right: 0.7em;
						padding-top: 0.1em;
						font-family: var(--font-family-en);
						font-weight: var(--font-weight-medium);
						font-style: italic;
						font-size: 1.4rem;
						font-weight: 600;
					}
				}
				dd {
					margin-top: 1rem;
					font-weight: 900;
					line-height: 1.2;
					.punc {
						margin-right: -0.5em;
					}
				}
				&.-fz4 dd {
					font-size: 4rem;
				}
				&.-fz5 dd {
					font-size: 5rem;
				}
				&.-fz6 dd {
					font-size: 6rem;
				}
				&.-fz7 dd {
					font-size: 7rem;
				}
				&.-fz8 dd {
					font-size: 8rem;
				}
				&.-fz9 dd {
					font-size: 9rem;
				}
				&.-fz10 dd {
					font-size: 10rem;
				}
				@media screen and (max-width: 743px) {
					dt {
						font-size: 1rem;
						&::before {
							font-size: .7rem;
						}
					}
					dd {
						margin-top: .5rem;
					}
					&.-fz4 dd {
						font-size: 2rem;
					}
					&.-fz5 dd {
						font-size: 2.5rem;
					}
					&.-fz6 dd {
						font-size: 3rem;
					}
					&.-fz7 dd {
						font-size: 3.5rem;
					}
					&.-fz8 dd {
						font-size: 4rem;
					}
					&.-fz9 dd {
						font-size: 4.5rem;
					}
					&.-fz10 dd {
						font-size: 5rem;
					}
				}
			}
		}
		.logos {
			position: absolute;
			inset: 0;
			width: 50.8rem;
			height: 50.8rem;
			margin: auto;
			overflow: hidden;
			background-color: var(--color-dark);
			border-radius: 1.6rem;
			z-index: 2;
			.mov {
				height: 50.8rem;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				gap: 2rem;
				/* animation: logosMov .3s linear infinite; */
				opacity: 0.5;
				mix-blend-mode: overlay;
			}
			img {
				width: 18.2rem;
			}
			.center {
				position: absolute;
				inset: 0;
				margin: auto;
			}
		}
		@media screen and (max-width: 743px) {
			.logos {
				width: 20rem;
				height: 20rem;
				transform: translateY(-1rem);
				.mov {
					height: 20rem;
					gap: 1.4rem;
				}
				img {
					width: 12rem;
				}
			}
		}
	}

	.eng {
		font-weight: var(--font-weight-semi);
		white-space: nowrap;
		@media screen and (min-width: 744px), print {
			font-size: 20rem;
			line-height: 0.8;
			span {
				position: absolute;
				z-index: 5;
				&.eng1 {
					bottom: calc(50% + 17rem);
					bottom: min(calc(50% + 17rem), calc((410 + 170) / 820 * 100%));
					right: calc(50% - 9rem);
				}
				&.eng2 {
					top: calc(50% + 16rem);
					top: min(calc(50% + 16rem), calc((410 + 160) / 820 * 100%));
					left: calc(50% - 9rem);
				}
			}
		}
		@media screen and (max-width: 743px) {
			position: absolute;
			top: calc(45 / 714 * 100%);
			left: 0;
			right: 0;
			display: flex;
			flex-direction: column;
			gap: 1rem;
			font-size: 8rem;
			line-height: 0.8;
			z-index: 5;
			span {
				&.eng1 {
					margin-left: -0.2em;
				}
				&.eng2 {
					margin-left: 3rem;
				}
			}
		}
	}

	.copy {
		position: relative;
		z-index: 6;
		.main {
			display: flex;
			flex-direction: column;
			--ls: .01em;
			.box {
				position: relative;
				width: fit-content;
				padding-left: 2.6rem;
				padding-bottom: 0.15em;
				background-color: #fff;
				color: #00294C;
				font-size: 5.6rem;
				line-height: 1.2;
				font-weight: 900;
				.blue {
					color: #0258A3;
				}
				.typewriter-text {
					left: 2.6rem;
				}
			}
		}
		@media screen and (min-width: 744px), print {
			position: absolute;
			left: 0;
			top: calc(50% - 11rem);
			.sub {
				position: relative;
				--ls: .07em;
				display: flex;
				align-items: center;
				width: fit-content;
				height: 5rem;
				padding-inline: 2.6rem;
				background-color: var(--color-base);
				color: #fff;
				font-size: 1.7rem;
				font-weight: var(--font-weight-semi);
			}
		}
		@media screen and (max-width: 743px) {
			.main {
				.box {
					padding-left: 2rem;
					padding-bottom: 0.05em;
					font-size: 2.8rem;
					line-height: 1.4;
				}
			}
			.sub {
				display: flex;
				flex-direction: column;
				--ls: .01em;
				.sp_box {
					position: relative;
					width: fit-content;
					padding-inline: 2rem;
					padding-block: .2em;
					background-color: var(--color-base);
					color: #fff;
					font-size: 1.4rem;
					line-height: 1.5;
					font-weight: var(--font-weight-bold);
				}
			}
		}
	}

	.bnr {
		position: relative;
		z-index: 7;
		a {
			position: relative;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			background-color: #fff;
			box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
			text-decoration: none;
			.ph {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				.interview_title {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 10rem;
					height: 6rem;
					border: 1px solid #fff;
					color: #fff;
					text-align: center;
					font-size: 1.6rem;
					line-height: 1.2;
					z-index: 2;
				}
			}
			.summary {
				padding: 2.4rem 2rem;
				color: #000;
				font-size: 1.4rem;
				line-height: 1.7;
			}
			dl {
				position: relative;
				padding: 2rem 3rem;
				color: #000;
				font-size: 1.4rem;
				line-height: 1.7;
				dt {
					margin-bottom: 1rem;
					font-size: 1.8rem;
					font-weight: var(--font-weight-semi);
				}
				.category {
					display: block;
					font-size: 1.2rem;
					font-weight: var(--font-weight-reg);
				}
			}
			&::before {
				content: "";
				position: absolute;
				right: 1rem;
				bottom: 1rem;
				width: 2rem;
				height: 2rem;
				background: url(../img/ico-arrow.svg) no-repeat 50%;
				background-size: 100%;
			}
			@media (hover) {
				&::after {
					content: "";
					position: absolute;
					inset: 0;
					background-color: #fff;
					pointer-events: none;
					opacity: 0;
					z-index: 3;
				}
				&:hover::after {
					opacity: 0.3;
				}
			}
		}
		@media screen and (min-width: 744px), print {
			position: absolute;
			left: 1rem;
			bottom: 1rem;
			a {
				width: 44rem;
				height: 14rem;
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
			margin-inline: 2rem;
			a {
				height: 8rem;
				.ph {
					.interview_title {
						width: 9rem;
						height: 5rem;
						font-size: 1.4rem;
					}
				}
				.summary {
					display: flex;
					align-items: center;
					padding: 0.5rem 1.5rem;
					font-size: 1.1rem;
				}
				dl {
					padding: 1rem 2rem 0;
					font-size: 1.2rem;
					dt {
						margin-bottom: 0;
						font-size: 1.4rem;
					}
					.category {
						font-size: 1rem;
					}
				}
				&::before {
					right: 0.8rem;
					bottom: 0.8rem;
					width: 1.6rem;
					height: 1.6rem;
				}
			}
		}
	}

	.scroll {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		text-align: center;
		font-size: 1.4rem;
		line-height: 1;
		z-index: 10;
		.line {
			overflow: hidden;
			position: relative;
			display: block;
			height: 3rem;
			width: 2px;
			margin: 1rem auto 0;
			&::after {
				content: "";
				position: absolute;
				inset: 0;
				background-color: var(--color-blue);
				animation: scrollAnim 1.5s ease-in-out infinite;
			}
		}
		@media screen and (max-width: 743px) {
			display: none;
		}
	}
}
@keyframes catchMov {
	from {
		transform: translateX(var(--start-x)) translateX(var(--extra-x));
	}
	to {
		transform: translateX(-200rem);
	}
}
@keyframes logosMov {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(calc((219 * 18.2) / 1300 * 1rem + 2rem));
	}
}
@media screen and (max-width: 743px) {
	@keyframes logosMov {
		from {
			transform: translateY(0);
		}
		to {
			transform: translateY(calc((219 * 12) / 1300 * 1rem + 1.4rem));
		}
	}
}
@keyframes scrollAnim {
	0% {
		transform: translateY(-100%);
	}
	20%, 80% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100%);
	}
}
@keyframes cursorBlink {
	0%,49% { opacity: 1; }
	50%,100% { opacity: 0; }
}


.js-typewriter,
.js-typewriter-in {
	position: relative;
	.typewriter-base {
		visibility: hidden;
	}
	.typewriter-text {
		position: absolute;
		left: 0;
		top: 0;
	}
	.c_hide {
		position: relative;
		display: inline-block;
		opacity: 0;
		&::after {
			content: "";
			position: absolute;
			top: .2em;
			bottom: 0;
			height: 1em;
			right: -.2em;
			margin-block: auto;
			border-right: 3px solid;
		}
	}
	.c_show {
		transition: opacity 0s var(--delay) linear;
		opacity: 1;
		&::after {
			transition: opacity .1s var(--delay) linear;
			opacity: 0;
		}
	}
}



@media screen {
	.index_main {
		.eng {
			span {
				opacity: 0;
				&.eng1 {
					transform: translateX(-10rem);
				}
				&.eng2 {
					transform: translateX(10rem);
				}
			}
		}
		.copy {
			.box {
				clip-path: inset(-1px 100% -1px 0);
				&:has(.c_show) {
					transition: clip-path .5s cubic-bezier(0.33, 1, 0.68, 1);
					clip-path: inset(-1px 0);
				}
			}
			.-line1 {
				--delay: 2s;
				&:has(.c_show) {
					transition-delay: 1.8s;
				}
			}
			.-line2 {
				--delay: 3.2s;
				&:has(.c_show) {
					transition-delay: 3s;
				}
			}
			.sub {
				clip-path: inset(-1px 100% -1px 0);
				.txt {
					display: inline-block;
					opacity: 0;
				}
			}
			&:has(.c_show) {
				.sub {
					transition: clip-path .5s 4s cubic-bezier(0.33, 1, 0.68, 1);
					clip-path: inset(-1px 0);
					.txt {
						transition: opacity .3s 4.4s linear;
						opacity: 1;
					}
				}
			}
		}
		.bnr {
			transform: translateX(-110%);
		}
		.bg-texts {
			.texts {
				opacity: 0;
			}
			.logos {
				.mov {
					opacity: 0;
				}
				.center {
					clip-path: inset(0 100% 0 0);
				}
			}
		}
		.bg-circle {
			opacity: 0;
			transform: translate(-50%,-50%) scale(0);
		}
		.scroll {
			opacity: 0;
		}
		&.-start {
			.bg-texts {
				.logos {
					.center {
						transition: clip-path .2s ease-out;
						clip-path: inset(0);
					}
				}
			}
		}
		&.-start {
			.bg-texts .texts {
				transition: opacity 1s 1s linear;
				opacity: 1;
			}
			.bg-texts .logos .mov {
				transition: opacity 1s 1s linear;
				opacity: .5;
			}
			.bg-circle {
				transition: opacity 1s 1s linear,  transform 1s 1s cubic-bezier(0.33, 1, 0.68, 1);
				transform: translate(-50%,-50%) scale(1);
				opacity: .5;
			}
		}
		&.-start {
			.eng {
				span {
					transition: opacity .8s 1.2s linear, transform .8s 1.2s cubic-bezier(0.33, 1, 0.68, 1);
					opacity: 1;
					transform: translateX(0);
				}
			}
		}
		&.-start {
			.bnr {
				transition: transform .8s 5s cubic-bezier(0.33, 1, 0.68, 1);
				transform: translateX(0%);
			}
			.scroll {
				transition: opacity .8s 5s cubic-bezier(0.33, 1, 0.68, 1);
				opacity: 1;
			}
		}
	}
}

/* index_vision
====================================================================== */
.index_vision {
	position: relative;
	.lead {
		font-size: 3rem;
		font-weight: var(--font-weight-bold);
		line-height: 1.4;
	}
	.copy {
		margin-block: 5rem 6rem;
		.main {
			display: flex;
			flex-direction: column;
			--ls: .01em;
			.box {
				position: relative;
				width: fit-content;
				white-space: nowrap;
				padding-inline: 1.6rem;
				padding-bottom: 0.15em;
				background-color: #fff;
				color: #00294C;
				font-size: 5.6rem;
				line-height: 1.2;
				font-weight: 900;
				.no1 {
					margin-inline: 1.5rem;
					color: #0258A3;
					font-size: 7rem;
					font-weight: var(--font-weight-bold);
					line-height: 0.7;
					vertical-align: -.05em;
				}
				&.-line1 {
					--delay: .4s;
					&:has(.c_show) {
						transition-delay: .2s;
					}
				}
				&.-line2 {
					--delay: 1s;
					&:has(.c_show) {
						transition-delay: 0.8s;
					}
				}
				.typewriter-text {
					left: 1.6rem;
				}
			}
		}
		.eng {
			--ls: .07em;
			display: flex;
			align-items: center;
			width: fit-content;
			height: 6rem;
			padding-inline: 3rem;
			background-color: var(--color-base);
			color: #fff;
			font-size: 2.4rem;
		}
		@media screen and (min-width: 744px), print {
		}
	}
	.txt {
		font-family: "Zen Kaku Gothic New";
		font-size: 2.5rem;
		font-weight: var(--font-weight-bold);
		line-height: 2.2;
	}

	@media screen and (min-width: 744px), print {
		max-width: var(--base-width);
		margin-inline: auto;
		.eng_title {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
		.contents {
			position: relative;
			margin-left: 64rem;
			z-index: 2;
		}
	}
	@media screen and (max-width: 743px) {
		.lead {
			font-size: 1.8rem;
		}
		.copy {
			margin-block: 3rem 4rem;
			.main {
				--ls: 0;
				.box {
					padding-inline: 1.5rem;
					padding-bottom: 0.05em;
					font-size: 2.6rem;
					line-height: 1.4;
					.no1 {
						margin-inline: 1rem;
						font-size: 3.2rem;
					}
				}
			}
			.eng {
				height: 3.6rem;
				padding-inline: 1.5rem;
				font-size: 1.5rem;
			}
			@media screen and (min-width: 744px), print {
			}
		}
		.txt {
			font-size: 1.4rem;
		}
	}
}

/* index_message
====================================================================== */
.index_message {
	--ph-span-width-min: 70rem;
	--ph-span-height-min: 70rem;
	--ph-span-radius-min: 1rem;
	--ph-padding-top-min: calc(var(--header-height) + var(--header-top));
	--ph-img-top-min: -8.7rem;
	--ph-img-right-min: 0;
	--ph-img-bottom-min: -11.3rem;
	--ph-img-left-min: -33rem;
	--ph-img-left-max: 0;
	position: relative;
	background-color: var(--color-dark);
	margin-top: 12rem;
	z-index: 1;
	& > .line {
		position: absolute;
		/* top: 11rem; */
		top: calc(21.9rem + 100vh);
		top: 0;
		/* max-height: calc(100% - (21.9rem + 100vh) - 6rem); */
		max-height: 100%;
		left: 0;
		right: 0;
		width: 14rem;
		margin-inline: auto;
		background-color: #fff;
		mix-blend-mode: overlay;
		opacity: 0.5;
		transition: height .2s ease-out;
		z-index: -1;
	}
	.head_logo {
		position: relative;
		width: 130rem;
		margin-inline: auto;
		/* margin-bottom: 12rem;
		margin-bottom: 30rem; */
		z-index: 2;
		img {
			transform: translateY(50%);
		}
	}
	.eng_title_wrap {
		position: relative;
		height: 260rem;
		.eng_title {
			position: sticky;
			top: calc(var(--header-height) + var(--header-top) + 4rem);
			margin-bottom: 0;
			height: calc(100vh - (var(--header-height) + var(--header-top) + 4rem));
		}
	}
	.ph {
		position: sticky;
		overflow: hidden;
		top: 0;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.9;
		z-index: -1;
		/* transform: translateY(50vh); */
		.ph_inner {
			overflow: hidden;
			width: 70rem;
			height: 70rem;
			/* top: -8.7rem;
			bottom: -11.3rem;
			right: 0;
			left: -33rem; */
			width: 100%;
			height: 100%;
			border-radius: 0;
			.ph_inner_in {
				position: absolute;
				inset: 0;
			}
		}
	}
	.lead {
		position: sticky;
		top: var(--ph-padding-top-min);
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(100vh - var(--ph-padding-top-min));
		text-align: center;
		font-size: 3rem;
		font-weight: var(--font-weight-bold);
		line-height: 2.2;
		margin-top: calc(((100vh - var(--ph-padding-top-min)) / 2 + (100vh - (var(--header-height) + var(--header-top) + 4rem)) / 2) * -1);
	}
	.txt {
		max-width: 70rem;
		margin-inline: auto;
		line-height: 2.4;
		.signature {
			text-align: right;
			.name {
				display: block;
				font-size: 2rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		--ph-span-width-min: 28rem;
		--ph-span-height-min: 28rem;
		--ph-span-radius-min: 1rem;
		--ph-padding-top-min: calc(var(--header-height) + var(--header-top));
		--ph-img-top-min: -3.48rem;
		--ph-img-right-min: 0;
		--ph-img-bottom-min: -4.52rem;
		--ph-img-left-min: -13.2rem;
		--ph-img-left-max: -30rem;
		margin-top: 6rem;
		z-index: 1;
		& > .line {
			bottom: 6rem;
			width: 10rem;
		}
		.head_logo {
			width: 100%;
			margin-inline: auto;
		}
		.eng_title_wrap {
			height: 200rem;
			margin-bottom: calc((100vh - var(--ph-span-height-min)) / 2 * -.7);
			.eng_title {
				padding-bottom: calc(100vh - 9.5rem - (var(--header-height) + var(--header-top) + 4rem));
			}
		}
		.lead {
			font-size: 1.8rem;
		}
		.txt {
			.signature {
				.name {
					font-size: 1.6rem;
				}
			}
		}
	}
}

/* index_workstyle
====================================================================== */
.index_workstyle {
	position: relative;
	overflow: hidden;
	margin-top: 16rem;
	z-index: 1;
	._w::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 300rem;
		height: 70rem;
		background-color: #fff;
		border-radius: 1rem;
		z-index: -1;
	}
	.catch {
		position: relative;
		display: flex;
		justify-content: space-between;
		padding-block: 10rem;
		color: #000;
		.item {
			.eng {
				display: block;
				font-size: 11rem;
				line-height: 1;
				font-weight: var(--font-weight-semi);
			}
			.ja {
				position: relative;
				width: fit-content;
				display: block;
				margin-top: 3rem;
				padding-inline: 5.6rem;
				span {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 40rem;
					height: 5rem;
					background-color: #005FAF;
					font-size: 2.6rem;
					font-weight: var(--font-weight-bold);
					color: #fff;
					&::before,
					&::after {
						content: "“";
						position: absolute;
						font-size: 8rem;
						line-height: 1;
						font-family: var(--font-family-en);
						font-weight: var(--font-weight-medium);
						font-style: italic;
						color: #005FAF;
					}
					&::before {
						left: 0;
						top: -1rem;
					}
					&::after {
						right: 0;
						top: -5rem;
						transform: rotate(180deg);
					}
				}
			}
			&.-challenge {
				margin-top: 12rem;
				.ja {
					margin-left: auto;
				}
			}
		}
		.cross {
			position: absolute;
			width: 28.4rem;
			height: 28.4rem;
			top: 9rem;
			left: calc(50% - 12.2rem);
			z-index: -1;
			&::before,
			&::after {
				content: "";
				position: absolute;
				border-top: 2px solid #00294C;
			}
			&::before {
				bottom: 0;
				left: 0;
				width: calc(100% * 1.4142);
				transform-origin: 0 100%;
				transform: rotate(-45deg);
			}
			&::after {
				top: 13.1rem;
				left: 5.4rem;
				width: 12.44451rem;
				transform-origin: 0 0;
				transform: rotate(45deg);
			}
		}
	}
	.contents {
		max-width: var(--base-width-a);
		margin-inline: auto;
	}
	.workstyle_title {
		color: #00294C;
		font-size: 2.2rem;
		.eng {
			margin-bottom: 0.5rem;
			font-size: 4.2rem;
			line-height: 1.6;
			color: #253E71;
			font-weight: var(--font-weight-semi);
		}
	}
	.workstyle_list {
		position: relative;
		padding: 7rem 0 7rem 8rem;
		color: #fff;
		font-size: 2rem;
		font-weight: var(--font-weight-bold);
		&::before {
			content: "";
			position: absolute;
			inset: 0 auto 0 0;
			width: 300rem;
			background-color: #005FAF;
			border-radius: 1rem;
			opacity: 0.98;
			z-index: -1;
		}
		ul {
			display: flex;
			flex-direction: column;
			gap: 2.8rem;
			li {
				position: relative;
				padding-left: 4.6rem;
				.num {
					position: absolute;
					top: 0;
					left: 0;
					font-family: var(--font-family-outfit);
					font-weight: 500;
					text-decoration-line: underline;
					text-decoration-style: solid;
					text-decoration-thickness: 1px;
					text-underline-offset: .2em;
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.catch {
			width: 122rem;
			margin-inline: auto;
		}
		.contents {
			display: flex;
		}
		.workstyle_list {
			width: 89rem;
			margin-left: auto;
			display: grid;
			grid-template-columns: max-content max-content;
			gap: 8rem;
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		padding-inline: var(--sp-base-padding);
		._w::before {
			height: auto;
			bottom: 20rem;
		}
		.catch {
			flex-direction: column;
			padding-block: 4rem;
			padding-right: var(--sp-base-padding);
			.item {
				.eng {
					font-size: calc(11rem * .4);
				}
				.ja {
					margin-top: 1rem;
					padding-inline: calc(5.6rem * .4);
					span {
						width: calc(40rem * .4);
						height: calc(5rem * .4);
						font-size: calc(2.6rem * .4);
						&::before,
						&::after {
							font-size: calc(8rem * .4);
						}
						&::before {
							top: calc(-1rem * .4);
						}
						&::after {
							top: calc(-5rem * .4);
						}
					}
				}
				&.-challenge {
					margin-top: 11rem;
					text-align: right;
				}
			}
			.cross {
				top: 1rem;
				left: calc(50% - 13.8rem);
				transform: scale(.5);
			}
		}
		.workstyle_title {
			margin-bottom: 2rem;
			font-size: 1.5rem;
			.eng {
				margin-bottom: 0.2rem;
				font-size: 2.6rem;
			}
		}
		.workstyle_list {
			padding: 3rem 0 3rem 2rem;
			font-size: 1.5rem;
			ul {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				li {
					padding-left: 4rem;
				}
				& + ul {
					margin-top: 1rem;
				}
			}
		}
	}
}


/* index_interview
====================================================================== */
.index_interview {
	position: relative;
	z-index: 2;
	.a_box {
		position: relative;
		display: block;
		margin-inline: auto;
		border: .4rem solid #fff;
		text-align: center;
		text-decoration: none;
		color: #fff;
		.eng {
			margin-bottom: 2rem;
			font-size: 8rem;
			line-height: 1.2;
			font-weight: var(--font-weight-semi);
		}
		.ja {
			font-size: 2.4rem;
			line-height: 1.8;
			--ls: .05em;
		}
		.more {
			position: absolute;
			left: 50%;
			bottom: 2rem;
			padding-right: 2.6rem;
			font-size: 2rem;
			line-height: 1;
			transform: translateX(-50%);
			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: 2rem;
				height: 2rem;
				margin-block: auto;
				background: url(../img/ico-arrow.svg) no-repeat 50%;
				background-size: 100%;
			}
		}
		@media (hover) {
			&::before {
				content: "";
				position: absolute;
				inset: 0;
				opacity: 0;
				background-color: color-mix(in srgb, var(--color-dark) 50%, transparent);
				transition: opacity var(--transition);
				z-index: -1;
			}
			&:hover&::before {
				opacity: 1;
			}
		}
	}
	.catch {
		.copy {
			--ls: .05em;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			span {
				width: fit-content;
				padding-inline: 2rem;
				background-color: #fff;
				color: #000;
				font-size: 2rem;
				font-weight: var(--font-weight-bold);
				line-height: 2;
			}
		}
		.name {
			margin-top: 3rem;
			font-size: 2rem;
			line-height: 1.2;
			color: #fff;
		}
	}
	.interview_title {
		--ls: .05em;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		span {
			width: fit-content;
			padding-inline: 2rem 1rem;
			background-color: #fff;
			color: #000;
			font-size: 4rem;
			font-weight: var(--font-weight-bold);
			line-height: 1.5;
		}
	}
	@media screen and (min-width: 744px), print {
		height: 90rem;
		display: flex;
		justify-content: center;
		padding-top: 24rem;
		.a_box {
			width: 50rem;
			height: 36rem;
			padding-top: 4rem;
		}
		.catch {
			position: absolute;
			&.-left {
				left: 0;
				top: 20rem;
			}
			&.-right {
				right: 0;
				top: 8rem;
			}
		}
		.interview_title {
			position: absolute;
			left: 0;
			bottom: 10rem;
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 12rem 8rem;
		.a_box {
			margin-inline: 7rem;
			padding-block: 2rem 5rem;
			.eng {
				margin-bottom: 1.5rem;
				font-size: 4.4rem;
			}
			.ja {
				font-size: 1.8rem;
			}
			.more {
				bottom: 1.5rem;
				padding-right: 2.6rem;
				font-size: 1.5rem;
				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					width: 2rem;
					height: 2rem;
					margin-block: auto;
					background: url(../img/ico-arrow.svg) no-repeat 50%;
					background-size: 100%;
				}
			}
		}
		.catch {
			margin-top: 2rem;
			.copy {
				gap: 0.2rem;
				span {
					padding-inline: 1rem;
					font-size: 1.5rem;
				}
			}
			.name {
				margin-top: 1.5rem;
				font-size: 1.5rem;
			}
			&.-right {
				margin-top: -2rem;
				width: fit-content;
				margin-left: auto;
			}
		}
		.interview_title {
			width: fit-content;
			margin-top: 3rem;
			margin-inline: auto;
			gap: 0.7rem;
			span {
				padding-inline: 1rem .5rem;
				font-size: 1.8rem;
			}
		}
	}
}


/* index_business
====================================================================== */
.index_business {
	.lead {
		line-height: 2.4;
		color: #000;
	}
	.business_cycle {
		position: relative;
		margin-top: 8rem;
		background-color: var(--bg-base);
		z-index: 2;
		.business_cycle_inner {
			position: relative;
			display: grid;
			align-items: center;
			grid-template-columns: 1fr 100rem 1fr;
		}
		.user {
			text-align: center;
			font-size: 2.4rem;
			line-height: 1.8;
			font-weight: var(--font-weight-bold);
		}
		.main {
			position: relative;
			height: 100rem;
			display: flex;
			justify-content: center;
			align-items: center;
			&::before,
			&::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: 100%;
				background-color: #000;
			}
			&::before {
				opacity: 0.08;
				clip-path: inset(50% 0 0);
			}
			&::after {
				opacity: 0.06;
			}
			.logo {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30rem;
				height: 30rem;
				background-color: #fff;
				border-radius: 1rem;
				z-index: 5;
				img {
					width: 17.8rem;
				}
			}
			.businesses,
			.businesses_bg {
				position: absolute;
				inset: 0;
				width: 70rem;
				height: 70rem;
				margin: auto;
			}
			.businesses_bg {
				background-color: var(--color-dark);
				border-radius: 100%;
				mix-blend-mode: multiply;
				z-index: 2;
			}
			.businesses {
				z-index: 3;
				&::before,
				&::after {
					content: "";
					position: absolute;
					top: calc(50% - 2.6rem / 2);
					width: 2.2rem;
					height: 2.6rem;
					background-color: var(--color-base);
					clip-path: polygon(0 0, 100% 50%, 0 100%);
				}
				&::before {
					right: calc(100% + 6.6rem);
					transform: scaleX(-1);
				}
				&::after {
					left: calc(100% + 6.6rem);
				}
				dt {
					position: absolute;
					right: 0;
					left: 0;
					text-align: center;
					font-size: 2.2rem;
					line-height: 1.2;
					z-index: 2;
				}
				li {
					--rotate: calc((360deg / 10) * var(--position));
					position: absolute;
					right: 0;
					left: 0;
					bottom: 50%;
					width: 16rem;
					height: 43rem;
					margin-inline: auto;
					transform-origin: 50% 100%;
					transform: rotate(var(--rotate));
					z-index: 3;
					& > span {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 16rem;
						height: 16rem;
						border-radius: 100%;
						color: #fff;
						font-size: 1.6rem;
						line-height: 1.6;
						text-align: center;
						--ls: .05em;
						transform: rotate(calc(var(--rotate) * -1));
					}
				}
				.-advertising {
					dt {
						color: #008CFF;
						bottom: calc(50% + 20rem);
					}
					li span {
						background-color: #008CFF;
					}
				}
				.-regional {
					dt {
						color: #0063BA;
						top: calc(50% + 20rem);
					}
					li span {
						background-color: var(--color-blue2);
					}
				}
				.txt {
					position: absolute;
					bottom: calc(50% + 20.5rem);
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30rem;
					height: 2lh;
					text-align: center;
					font-size: 1.8rem;
					line-height: 1.8;
					font-weight: var(--font-weight-bold);
					--ls: .05em;
					&.-txt1 {
						left: -15rem;
					}
					&.-txt2 {
						right: -15rem;
					}
				}
			}
		}
		.logos {
			--logo-width: 130rem;
			--logo-gap: 20rem;
			position: absolute;
			inset: 50% 0 auto;
			overflow: hidden;
			pointer-events: none;
			transform: translateY(-50%);
			z-index: -1;
			.loop {
				width: calc((var(--logo-width) + var(--logo-gap)) * 4);
				display: flex;
				animation: slide-loop 20s linear infinite;
				img {
					width: var(--logo-width);
					margin-right: var(--logo-gap);
				}
			}
		}
		@media screen and (min-width: 744px), print {
			.scroll-hint-icon-wrap {
				display: none !important;
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
			.business_cycle_slide {
				overflow-x: auto;
			}
			.business_cycle_wrap {
				width: calc(var(--base-width) * .6);
				height: calc(100rem * .6);
			}
			.business_cycle_inner {
				width: calc(var(--base-width));
				transform: scale(.6);
				transform-origin: 0 0;
			}
			.main {
				.businesses_bg {
					opacity: 0.9;
				}
			}
			.logos {
				--logo-width: 65rem;
				--logo-gap: 10rem;
				.loop {
					animation-duration: 10s;
				}
			}
			.scroll-hint-icon-wrap {
				.scroll-hint-icon {
					height: 94px;
					top: calc(50% - 94px / 2);
				}
			}
		}
	}

	.business_jobs {
		margin-top: 10rem;
		padding-top: 10rem;
		.job {
			border-bottom: 1px solid var(--color-dark);
			&:not(:last-child) {
				margin-bottom: 4rem;
			}
			header {
				position: relative;
				cursor: pointer;
				.eng {
					font-size: 5rem;
					line-height: 1.2;
					color: #253E71;
					transition: color var(--transition);
				}
				.ja {
					font-size: 2rem;
					line-height: 1.2;
					font-weight: var(--font-weight-bold);
					color: #000;
					transition: color var(--transition);
				}
				.ico {
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					margin-block: auto;
					width: 4.6rem;
					height: 4.6rem;
					background-color: #F5F5F5;
					border-radius: 100%;
					transition: background var(--transition);
					&::before,
					&::after {
						content: "";
						position: absolute;
						top: calc(50% - 1px);
						right: 0;
						left: 0;
						width: 2.2rem;
						margin-inline: auto;
						border-top: 2px solid var(--color-dark);
						transition: border var(--transition), transform var(--transition);
					}
					&::after {
						transform: rotate(90deg);
					}
				}
				&.-open {
					.eng,
					.ja {
						color: var(--color-blue2);
					}
					.ico {
						background-color: var(--color-blue2);
						&::before,
						&::after {
							border-color: #fff;
						}
						&::after {
							transform: rotate(0deg);
						}
					}
				}
				@media (hover) {
					&:hover {
						.eng,
						.ja {
							color: var(--color-blue2);
						}
						.ico {
							background-color: var(--color-blue2);
							&::before,
							&::after {
								border-color: #fff;
							}
						}
					}
				}
			}
			.job_contents {
				padding-top: 3rem;
				section {
					position: relative;
					padding-bottom: 8rem;
					color: #000;
					line-height: 2.4;
					& + section {
						padding-top: 8rem;
						&::before {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							height: 1px;
							background: repeating-linear-gradient(
								to right,
								#ACACAC 0,
								#ACACAC 2px,
								transparent 2px,
								transparent 6px
							);
						}
					}
					h4 {
						margin-bottom: 3rem;
						font-size: 2.6rem;
						font-weight: var(--font-weight-bold);
						line-height: 1.8;
						--ls: .05em;
					}
					.category {
						margin-bottom: 2rem;
						margin-top: 4rem;
						font-size: 2.6rem;
						line-height: 1.2;
						color: #253E71;
					}
					.job_type {
						margin-top: 5rem;
						& > dt {
							margin-bottom: 3rem;
							font-size: 1.8rem;
							line-height: 1.5;
							font-weight: var(--font-weight-bold);
							&::before {
								content: "［ ";
							}
							&::after {
								content: " ］";
							}
						}
						dl {
							&:not(:last-child) {
								margin-bottom: 3rem;
							}
							dt {
								position: relative;
								margin-bottom: 1rem;
								padding-left: 3rem;
								font-size: 1.8rem;
								line-height: 1.5;
								font-weight: var(--font-weight-bold);
								&::before {
									content: "";
									position: absolute;
									left: 0;
									top: calc(50% - 1px);
									width: 1.5rem;
									border-top: 2px solid var(--color-blue2);
								}
							}
							dd {
								padding-left: 3rem;
								font-size: 1.4rem;
								line-height: 2;
							}
						}
					}
				}
			}
		}
		@media screen and (min-width: 744px), print {
			.job {
				header {
					display: flex;
					align-items: end;
					gap: 3.8rem;
					height: 11rem;
					padding-bottom: 2.5rem;
					.ja {
						padding-bottom: 1rem;
					}
				}
				.job_contents {
					section {
						display: flex;
						flex-direction: row-reverse;
						justify-content: space-between;
						.ph {
							width: 46rem;
						}
						.contents {
							width: 65rem;
						}
					}
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
			padding-top: 1rem;
			.job {
				&:not(:last-child) {
					margin-bottom: 1rem;
				}
				header {
					padding-block: 2rem;
					.eng {
						font-size: 2.5rem;
					}
					.ja {
						margin-top: .3rem;
						font-size: 1.6rem;
					}
					.ico {
						width: 3rem;
						height: 3rem;
						&::before,
						&::after {
							width: 1.5rem;
						}
					}
				}
				.job_contents {
					padding-top: 0;
					section {
						padding-bottom: 4rem;
						line-height: 2;
						& + section {
							padding-top: 4rem;
						}
						.ph {
							margin-bottom: 2rem;
						}
						h4 {
							margin-bottom: 2rem;
							font-size: 1.8rem;
							line-height: 1.6;
						}
						.category {
							margin-bottom: 1.5rem;
							margin-top: 2rem;
							font-size: 2rem;
						}
						.job_type {
							margin-top: 3rem;
							& > dt {
								margin-bottom: 2rem;
								font-size: 1.5rem;
							}
							dl {
								&:not(:last-child) {
									margin-bottom: 2rem;
								}
								dt {
									padding-left: 2rem;
									font-size: 1.5rem;
									&::before {
										width: 1.2rem;
									}
								}
								dd {
									padding-left: 2rem;
									font-size: 1.2rem;
								}
							}
						}
					}
				}
			}
		}
	}
}
@keyframes slide-loop {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
@keyframes slide-loop-reverse {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}


/* index_works
====================================================================== */
.index_works {
	background-color: #012849;
	color: #fff;

	.works_list {
		--item-width: 40rem;
		--item-gap: 1rem;
		display: flex;
		margin-top: var(--item-gap);
		overflow: hidden;
		ul {
			width: calc((var(--item-width) + var(--item-gap)) * 8 * 2);
			display: flex;
			animation: slide-loop 40s linear infinite;
			li {
				width: var(--item-width);
				margin-right: var(--item-gap);
			}
			&.-reverse {
				animation-name: slide-loop-reverse;
			}
		}
		a {
			position: relative;
			display: block;
			aspect-ratio: 1;
			color: #fff;
			text-decoration: none;
			.cover {
				position: absolute;
				display: flex;
				flex-direction: column;
				justify-content: end;
				padding: 3rem 4rem;
				background-color: rgba(0,0,0,0.4);
				inset: 0;
				font-size: 1.4rem;
				line-height: 1.6;
				.title {
					margin-block: 1rem;
					font-size: 3.6rem;
					line-height: 1.28;
					font-weight: var(--font-weight-semi);
				}
			}
			@media (hover) {
				.cover {
					transition: background var(--transition);
				}
				&:hover .cover {
					background-color: rgba(0,0,0,0.7);
				}
			}
		}
		@media screen and (max-width: 743px) {
			--item-width: 16rem;
			a {
				.cover {
					padding: .6rem 1rem;
					font-size: 1rem;
					.title {
						margin-block: 0.4rem;
						font-size: 2rem;
						line-height: 1.1;
					}
				}
			}
		}
	}
}

.gslide-inline {
	width: 160rem !important;
	height: 90rem !important;
	max-width: calc(100vw - 10rem) !important;
	max-height: calc(100vh - 10rem) !important;
	box-shadow: none !important;
	background: none !important;
	@media screen and (max-width: 743px) {
		height: auto !important;
		max-width: calc(100vw - 4rem) !important;
		max-height: calc(100vh - 4rem) !important;
	}
}
.glightbox-lenis {
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
#glightbox-body {
	.gclose {
		width: 5.4rem;
		height: 5.4rem;
		background-color: #fff;
		border-radius: 100%;
		opacity: 1;
		svg {
			display: none;
		}
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: calc(50% - 1px);
			right: 0;
			left: 0;
			width: 2.6rem;
			margin-inline: auto;
			border-top: 2px solid var(--color-dark);
			transform: rotate(45deg);
		}
		&::after {
			transform: rotate(-45deg);
		}
	}
	.gprev,
	.gnext {
		top: calc(50% - 4.4rem / 2);
		width: 4.4rem;
		height: 4.4rem;
		background: transparent !important;
		svg {
			width: 100%;
		}
		&.disabled {
			pointer-events: none;
		}
	}
	@media screen and (min-width: 744px), print {
		.gclose {
			top: auto;
			right: auto;
			bottom: calc(50% + min(90rem, calc(100vh - 10rem)) / 2 - 8rem);
			left: calc(50% + min(160rem, calc(100vw - 10rem)) / 2 - 8rem);
		}
		.gprev {
			left: auto;
			right: calc(50% + min(160rem, calc(100vw - 10rem)) / 2 - 6rem);
		}
		.gnext {
			right: auto;
			left: calc(50% + min(160rem, calc(100vw - 10rem)) / 2 - 6rem);
		}
	}
	@media screen and (max-width: 743px) {
		.gclose {
			top: 1rem;
			right: 1rem;
			width: 4rem;
			height: 4rem;
			&::before,
			&::after {
				width: 2rem;
			}
		}
		.gprev,
		.gnext {
			top: calc(50% - 3.6rem / 2);
			width: 3.6rem;
			height: 3.6rem;
		}
		.gprev {
			left: 0;
		}
		.gnext {
			right: 0;
		}
	}
}
.works_modal {
	display: none;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	padding: 0 !important;
	background: rgba(1, 40, 73, 0.9);
	.works_modal_contents {
		height: 100%;
		.ph {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-inline: 4rem;
			&::before {
				content: "";
				position: absolute;
				inset: 0;
				background: rgba(0, 54, 100, 0.80);
				mix-blend-mode: multiply;
			}
			img {
				width: auto;
				max-height: 100%;
			}
			& > * {
				position: relative;
				z-index: 2;
			}
			&.-h {
				img {
					width: 100%;
					max-width: 60rem;
				}
			}
			&.-v {
				img {
					max-width: 40rem;
				}
			}
			&.-multi {
				flex-direction: column;
				li {
					height: 25%;
				}
				img {
					height: 100%;
				}
			}
		}
		.contents {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 1.4rem;
			line-height: 2;
			--ls: .05em;
			.works_title {
				display: flex;
				align-items: end;
				gap: 2rem;
				margin-bottom: 3rem;
				padding-bottom: 2rem;
				border-bottom: 1px solid var(--color-blue2);
				img {
					width: 14rem;
				}
				.eng {
					font-size: 2.2rem;
					line-height: 0.8;
				}
			}
			h3 {
				margin-bottom: 2rem;
				font-size: 3.6rem;
				font-weight: var(--font-weight-bold);
				line-height: 1.6;
				--ls: .05em;
			}
			a {
				--a-color: #fff;
			}
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			& > * {
				flex-shrink: 0;
				width: 50%;
			}
			.contents_inner {
				width: 100%;
				padding: 6rem 4rem;
				max-height: 100%;
				overflow-y: auto;
				overscroll-behavior-y: contain;
			}
			.contents_inner > * {
				max-width: 52rem;
				margin-inline: auto;
			}
		}
		@media screen and (max-width: 743px) {
			.ph {
				padding: 0;
				&::before {
					content: "";
					position: absolute;
					inset: 0;
					background: rgba(0, 54, 100, 0.80);
					mix-blend-mode: multiply;
				}
				&.-h {
					img {
						width: 100%;
						max-width: 100%;
					}
				}
				&.-v {
					img {
						width: 60%;
					}
				}
				&.-multi {
					flex-direction: row;
					flex-wrap: wrap;
					align-content: center;
					li {
						width: 50%;
						height: auto;
					}
					img {
						width: 100%;
						height: auto;
					}
				}
			}
			.contents {
				display: block;
				padding: 4rem 3rem;
				font-size: 1.2rem;
				.works_title {
					gap: 1rem;
					margin-bottom: 2rem;
					padding-bottom: 1.5rem;
					img {
						width: 10rem;
					}
					.eng {
						font-size: 1.6rem;
					}
				}
				h3 {
					font-size: 2.2rem;
				}
			}
		}
	}
}

/* index_staff
====================================================================== */
.index_staff {
	.staff_contents {
		overflow: clip;
		.staff {
			padding-bottom: 4rem;
			border-bottom: 1px solid var(--color-dark);
			&:not(:last-child) {
				margin-bottom: 8rem;
			}
			header {
				position: relative;
				font-size: 1.6rem;
				color: #000;
				font-weight: var(--font-weight-bold);
				cursor: pointer;
				p, h3 {
					transition: color var(--transition);
				}
				.num {
					position: absolute;
					top: 0;
					left: 0;
					writing-mode: vertical-rl;
					font-size: 1.8rem;
					font-weight: var(--font-weight-semi);
					line-height: 1;
					color: var(--color-dark);
				}
				.ph {
					--protrude: -0.7rem;
					--width: 10rem;
					position: relative;
					z-index: 2;
					img {
						filter: grayscale(1);
						transition: filter var(--transition);
					}
					&::before,
					&::after {
						content: "";
						position: absolute;
						width: var(--width);
						height: var(--width);
						background-color: #E9E9E9;
						transition: background var(--transition);
						z-index: -1;
					}
					&::before {
						top: var(--protrude);
						right: var(--protrude);
					}
					&::after {
						bottom: var(--protrude);
						left: var(--protrude);
					}
				}
				h3 {
					margin-bottom: 4rem;
					font-size: 3.6rem;
					line-height: 1.6;
					font-weight: var(--font-weight-bold);
				}
				.post {
					margin-bottom: 1rem;
					font-size: 1.8rem;
					font-weight: var(--font-weight-semi);
					color: var(--color-dark);
				}
				.ico {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 4.6rem;
					height: 4.6rem;
					background-color: #F5F5F5;
					border-radius: 100%;
					transition: background var(--transition);
					&::before,
					&::after {
						content: "";
						position: absolute;
						top: calc(50% - 1px);
						right: 0;
						left: 0;
						width: 2.2rem;
						margin-inline: auto;
						border-top: 2px solid var(--color-dark);
						transition: border var(--transition), transform var(--transition);
					}
					&::after {
						transform: rotate(90deg);
					}
				}
				&.-open {
					p, h3 {
						color: var(--color-blue2);
					}
					.ico {
						background-color: var(--color-blue2);
						&::before,
						&::after {
							border-color: #fff;
						}
						&::after {
							transform: rotate(0deg);
						}
					}
					.ph {
						img {
							filter: grayscale(0);
						}
						&::before,
						&::after {
							background-color: var(--color-blue2);
						}
					}
				}
				@media (hover) {
					&:hover {
						p, h3 {
							color: var(--color-blue2);
						}
						.ico {
							background-color: var(--color-blue2);
							&::before,
							&::after {
								border-color: #fff;
							}
						}
						.ph {
							img {
								filter: grayscale(0);
							}
							&::before,
							&::after {
								background-color: var(--color-blue2);
							}
						}
					}
				}
			}
			._acc {
				margin-inline: -10rem;
				padding-inline: 10rem;
			}
			.staff_body {
				padding-top: 8rem;
				color: #000;
				line-height: 2.4;
				.qa {
					margin-bottom: 8rem;
					h4 {
						position: relative;
						padding-left: 5rem;
						font-size: 2rem;
						line-height: 2;
						font-weight: var(--font-weight-bold);
						&::before {
							content: "Q.";
							position: absolute;
							left: 0;
							top: 0;
							font-size: 2.6rem;
							line-height: 1.6;
							font-family: var(--font-family-en);
							font-weight: var(--font-weight-medium);
							font-style: italic;
							color: var(--color-dark);
						}
					}
					.lead {
						margin-bottom: 2.6rem;
						font-size: 2.6rem;
						line-height: 1.6;
						font-weight: var(--font-weight-bold);
						color: var(--color-base);
					}
					.ph {
						margin-top: 6rem;
						&.-wide {
							margin-right: -10rem;
						}
					}
				}
				.favorite {
					text-align: center;
					&::before {
						content: "";
						display: block;
						width: 0;
						height: 3rem;
						margin-inline: auto;
						margin-bottom: 4rem;
						border-left: 2px solid var(--color-dark);
					}
					h4 {
						font-size: 2.2rem;
						line-height: 1.5;
						font-weight: var(--font-weight-semi);
						color: var(--color-dark);
					}
					.ans {
						margin-block: 1.5rem;
						font-weight: var(--font-weight-bold);
						font-size: 3.6rem;
						line-height: 1.6;
						--ls: .05em;
					}
				}
				.introduction {
					margin-top: 11rem;
					line-height: 2.4;
					h4 {
						margin-bottom: 2rem;
						font-size: 3.4rem;
						line-height: 1;
						color: var(--color-dark);
					}
					.link {
						margin-top: 2rem;
					}
				}
			}
			@media screen and (min-width: 744px), print {
				header {
					display: flex;
					gap: 7rem;
					padding-left: 6rem;
					.ph {
						flex-shrink: 0;
						width: 44rem;
					}
					.text {
						flex-grow: 1;
					}
				}
				.staff_body {
					.qa {
						display: flex;
						flex-wrap: wrap;
						h4 {
							width: 40rem;
						}
					}
					.contents {
						width: calc(100% - 40rem);
					}
					.introduction {
						display: flex;
						gap: 8rem;
						.ph {
							flex-shrink: 0;
							width: 32rem;
						}
					}
				}
			}
			@media screen and (max-width: 743px) {
				padding-bottom: 2rem;
				&:not(:last-child) {
					margin-bottom: 4rem;
				}
				header {
					padding-left: 3rem;
					font-size: 1.2rem;
					.num {
						font-size: 1.5rem;
					}
					.ph {
						--protrude: -0.6rem;
						--width: 5rem;
					}
					h3 {
						margin-top: 1.5rem;
						margin-bottom: 1rem;
						font-size: 2rem;
					}
					.post {
						margin-bottom: 0;
						font-size: 1.5rem;
					}
					.ico {
						width: 3rem;
						height: 3rem;
						&::before,
						&::after {
							width: 1.5rem;
						}
					}
				}
				._acc {
					margin-inline: calc(var(--sp-base-padding) * -1);
					padding-inline: var(--sp-base-padding);
				}
				.staff_body {
					padding-top: 4rem;
					line-height: 2;
					.qa {
						margin-bottom: 4rem;
						h4 {
							margin-bottom: 2rem;
							padding-left: 3rem;
							font-size: 1.6rem;
							line-height: 1.8;
							&::before {
								font-size: 2rem;
							}
						}
						.lead {
							margin-bottom: 1.5rem;
							font-size: 1.8rem;
						}
						.ph {
							margin-top: 3rem;
							&.-wide {
								margin-right: -2rem;
								margin-left: -2rem;
							}
						}
					}
					.favorite {
						&::before {
							height: 2rem;
							margin-bottom: 2rem;
						}
						h4 {
							font-size: 1.6rem;
						}
						.ans {
							margin-block: 1.5rem;
							font-size: 2.2rem;
						}
					}
					.introduction {
						margin-top: 6rem;
						line-height: 2;
						.ph {
							width: 20rem;
							margin-inline: auto;
							margin-bottom: 1.5rem;
						}
						h4 {
							margin-bottom: 2rem;
							font-size: 2rem;
							text-align: center;
						}
						.link {
							margin-top: 2rem;
						}
					}
				}
			}
		}
	}
}

/* index_environment
====================================================================== */
.index_environment {
	.environment_ph {
		position: relative;
		overflow: hidden;
		display: flex;
		margin-block: 9rem 10rem;
		ul {
			animation: environment-loop 60s linear infinite;
			display: flex;
			li {
				width: 50rem;
				margin-right: 4rem;
				.caption {
					display: block;
					margin-top: 2rem;
					font-size: 1.4rem;
					line-height: 2;
				}
			}
		}
	}
	.environment_contents {
		& > section + section {
			margin-top: 14rem;
		}
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		.environment_ph {
			margin-block: 4rem 5rem;
			ul {
				display: flex;
				li {
					width: 25rem;
					margin-right: 2rem;
					.caption {
						margin-top: 1.2rem;
						font-size: 1.2rem;
					}
				}
			}
		}
		.environment_contents {
			& > section + section {
				margin-top: 4rem;
			}
		}
	}
}
@keyframes environment-loop {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc((50rem + 4rem) * 13 * -1));
	}
}
@media screen and (max-width: 743px) {
	@keyframes environment-loop {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(calc((25rem + 2rem) * 13 * -1));
		}
	}
}

/* index_challenge
====================================================================== */
.index_challenge {
	.challenge_contents {
		margin-top: 14rem;
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		.challenge_contents {
			margin-top: 6rem;
		}
	}
}

/* index_career-up
====================================================================== */
.index_career-up {
	padding-bottom: 0;
	.tab {
		display: flex;
		gap: 1.3rem;
		li {
			position: relative;
			width: calc((100% - 1.3rem * 3) / 4);
			padding-block: 2rem;
			font-weight: var(--font-weight-bold);
			font-size: 2.2rem;
			line-height: 1.3;
			color: #fff;
			border-bottom: .4rem solid;
			text-align: center;
			cursor: pointer;
			transition: color var(--transition);
			&::after {
				content: "";
				position: absolute;
				top: 100%;
				right: 0;
				left: 0;
				margin-inline: auto;
				width: 1.6rem;
				height: 1.2rem;
				background-color: #fff;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				opacity: 0;
				pointer-events: none;
				transition: background var(--transition), opacity var(--transition);
			}
			.s {
				display: block;
				margin-bottom: 1rem;
				font-size: 1.4rem;
				line-height: 1.8;
				font-weight: var(--font-weight-medium);
			}
			&.is-active {
				color: var(--color-blue);
				&::after {
					background-color: var(--color-blue);
					opacity: 1;
				}
			}
			@media (hover) {
				&:hover {
					color: var(--color-blue);
					&::after {
						background-color: var(--color-blue);
					}
				}
			}
		}
	}
	.career-up_item {
		padding-bottom: 16rem;
		section {
			display: flex;
			flex-direction: column-reverse;
			padding-top: 9rem;
			h3 {
				text-align: center;
				font-size: 2rem;
				line-height: 1.2;
				--ls: .05em;
			}
			.box {
				position: relative;
				padding: 6.4rem 4rem 4rem;
				font-size: 1.4rem;
				line-height: 2;
				--ls: .05em;
				z-index: 2;
				&::before {
					content: "";
					position: absolute;
					inset: 0;
					background-color: var(--color-blue);
					border-radius: 1rem;
					opacity: 0.5;
					z-index: -1;
				}
				dt {
					margin-bottom: 1.5rem;
					text-align: center;
					font-size: 2rem;
					font-weight: var(--font-weight-bold);
					line-height: 1.8;
					.ico {
						position: absolute;
						top: -4rem;
						right: 0;
						left: 0;
						width: 8rem;
						margin-inline: auto;
					}
				}
			}
		}
	}
	.career-up_arrow {
		position: absolute;
		top: calc(55% - 16rem / 2);
		width: 5rem;
		height: 5rem;
		cursor: pointer;
		z-index: 3;
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 1rem;
			width: 3rem;
			height: 3rem;
			border-top: .3rem solid #fff;
			border-right: .3rem solid #fff;
			transform-origin: 100% 0;
			transform: rotate(45deg);
		}
		&.-l {
			right: calc(50% + 120rem / 2 + 2rem);
			transform: scaleX(-1);
		}
		&.-r {
			left: calc(50% + 120rem / 2 + 2rem);
		}
		@media (hover) {
			transition: opacity var(--transition);
			&:hover {
				opacity: 0.5;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.tab {
			width: 120rem;
			margin-inline: auto;
		}
		.career-up_item {
			width: 120rem;
			margin-inline: auto;
			display: flex;
			gap: 3rem;
			section {
				width: calc((100% - 3rem * 2) / 3);
				&:nth-child(1) {
					padding-top: calc(9rem + 4rem * 2);
				}
				&:nth-child(2) {
					padding-top: calc(9rem + 4rem * 1);
				}
				h3 {
					height: 5rem;
					padding-top: 3rem;
					line-height: 1;
				}
				.box {
					height: calc(100% - 5rem);
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		.tab {
			flex-wrap: wrap;
			gap: 1rem;
			padding-inline: var(--sp-base-padding);
			li {
				width: calc((100% - 1rem * 1) / 2);
				padding-block: 1.5rem;
				font-size: 1.6rem;
				border-width: .3rem;
				.s {
					margin-bottom: .2rem;
					font-size: 1.1rem;
				}
			}
		}
		.career-up_item {
			padding-inline: 4rem;
			padding-bottom: 8rem;
			padding-top: 2rem;
			section {
				flex-direction: column;
				padding-top: 3rem;
				h3 {
					margin-bottom: 1rem;
					font-size: 1.4rem;
					text-align: left;
				}
				.box {
					padding: 4.2rem 2rem 2rem 1rem;
					font-size: 1.2rem;
					dt {
						margin-bottom: 1rem;
						font-size: 1.6rem;
						.ico {
							top: -3rem;
							width: 6rem;
						}
					}
				}
			}
		}
		.career-up_arrow {
			top: calc(50% - 5rem / 2);
			&.-l {
				right: auto;
				left: 0;
			}
			&.-r {
				left: auto;
				right: 0;
			}
		}
	}
}

/* index_recruitment
====================================================================== */
.index_recruitment {
	.recruitment_contents {
		padding-top: 7rem;
		.recruitment {
			padding-bottom: 2rem;
			border-bottom: 1px solid var(--color-dark);
			&:not(:last-child) {
				margin-bottom: 4rem;
			}
			.header {
				position: relative;
				display: block;
				padding-block: 1rem;
				padding-left: 2rem;
				text-decoration: none;
				transition: color var(--transition);
				cursor: pointer;
				.num {
					position: absolute;
					top: 1rem;
					left: 0;
					font-size: 2.4rem;
					line-height: 1.4;
				}
				.category {
					margin-bottom: 2rem;
					font-size: 2rem;
					font-weight: var(--font-weight-bold);
					line-height: 1.6;
				}
				h3 {
					font-size: 2.8rem;
					font-weight: var(--font-weight-bold);
					line-height: 1.6;
				}
				.ico {
					position: absolute;
					right: 0;
					bottom: 1rem;
					width: 4.6rem;
					height: 4.6rem;
					background-color: #F5F5F5;
					border-radius: 100%;
					transition: background var(--transition);
					&::before,
					&::after {
						content: "";
						position: absolute;
						top: calc(50% - 1px);
						right: 0;
						left: 0;
						width: 2.2rem;
						margin-inline: auto;
						border-top: 2px solid var(--color-dark);
						transition: border var(--transition), transform var(--transition);
					}
					&::after {
						transform: rotate(90deg);
					}
				}
				.mymavi {
					position: absolute;
					right: 0;
					bottom: .8rem;
					display: flex;
					align-items: center;
					width: 19rem;
					height: 5rem;
					padding-left: 1.5rem;
					border: 1px solid var(--color-dark);
					img {
						width: 12rem;
					}
					&::after {
						content: "";
						position: absolute;
						right: 1.6rem;
						top: 0;
						bottom: 0;
						margin-block: auto;
						width: 1.6rem;
						height: 1.6rem;
						background: url(../img/ico-blank.svg) no-repeat 50%;
						background-size: 100%;
					}
				}
				&.-open {
					color: var(--color-blue2);
					.ico {
						background-color: var(--color-blue2);
						&::before,
						&::after {
							border-color: #fff;
						}
						&::after {
							transform: rotate(0deg);
						}
					}
				}
				@media (hover) {
					.mymavi {
						transition: border var(--transition);
					}
					&:hover {
						color: var(--color-blue2);
						.ico {
							background-color: var(--color-blue2);
							&::before,
							&::after {
								border-color: #fff;
							}
						}
						.mymavi {
							border-color: var(--color-blue);
						}
					}
				}
			}
			.recruitment_list {
				padding-bottom: 1rem;
				font-size: 1.4rem;
				line-height: 1.8;
				& > dl {
					position: relative;
					& + dl {
						margin-top: 2rem;
						padding-top: 3rem;
						&::before {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							height: 1px;
							background: repeating-linear-gradient(
								to right,
								#ACACAC 0,
								#ACACAC 2px,
								transparent 2px,
								transparent 6px
							);
						}
					}
					& > dt {
						font-weight: var(--font-weight-bold);
					}
				}

				.more {
					margin-top: 7rem;
					display: flex;
					justify-content: center;
					gap: 2rem;
					li {
						width: 38rem;
					}
				}
			}
		}
		@media screen and (min-width: 744px), print {
			.recruitment {
				.recruitment_list {
					padding-top: 4rem;
					padding-left: 2rem;
					& > dl {
						display: flex;
						& > dt {
							width: 15rem;
							flex-shrink: 0;
						}
					}
				}
			}
		}
		@media screen and (max-width: 743px) {
			padding-top: 3rem;
			.recruitment {
				padding-bottom: 0;
				&:not(:last-child) {
					margin-bottom: 2rem;
				}
				.header {
					padding-left: 0;
					.num {
						font-size: 1.4rem;
					}
					.category {
						margin-bottom: 1rem;
						font-size: 1.2rem;
						line-height: 1.4;
					}
					h3 {
						font-size: 1.7rem;
					}
					&:has(.ico) h3 {
						padding-right: 4rem;
					}
					.ico {
						width: 3rem;
						height: 3rem;
						&::before,
						&::after {
							width: 1.5rem;
						}
					}
					.mymavi {
						position: block;
						position: relative;
						bottom: 0;
						height: 4rem;
						margin-top: 1rem;
						margin-bottom: 1rem;
						margin-inline: auto;
					}
				}
				.recruitment_list {
					padding-top: 2rem;
					padding-bottom: 2rem;
					font-size: 1.2rem;
					& > dl {
						& + dl {
							padding-top: 2rem;
						}
						& > dt {
							font-size: 1.3rem;
							margin-bottom: 1em;
						}
					}

					.more {
						margin-top: 3rem;
						flex-direction: column;
						gap: 1rem;
						li {
							width: 100%;
						}
					}
				}
			}
		}
	}
}




/* mov show
====================================================================== */
@media screen {
	._mov_fadein {
		opacity: 0;
	}
	._mov_fadein._mov_showed {
		transition: opacity 1s linear;
		opacity: 1;
	}

	._mov_fadeup {
		opacity: 0;
		transform: translateY(6rem);
	}
	._mov_fadeup._mov_showed {
		transition: transform 1s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		opacity: 1;
		transform: translateY(0);
	}

	._mov_fadeup_b {
		opacity: 0;
		transform: translateY(5rem);
	}
	._mov_fadeup_b._mov_showed {
		transition: transform .7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .7s linear;
		opacity: 1;
		transform: translateY(0);
	}

	._mov_fadeleft {
		opacity: 0;
		transform: translateX(-3rem);
	}
	._mov_fadeleft._mov_showed {
		transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		opacity: 1;
		transform: translateX(0);
	}

	._mov_faderight {
		opacity: 0;
		transform: translateX(3rem);
	}
	._mov_faderight._mov_showed {
		transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		opacity: 1;
		transform: translateX(0);
	}

	._mov_zoomin {
		opacity: 0;
		transform: scale(.2);
	}
	._mov_zoomin.-zomms {
		transform: scale(.6);
	}
	._mov_zoomin._mov_showed {
		transition: transform .6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .6s linear;
		opacity: 1;
		transform: scale(1);
	}

	._mov_zoomout {
		opacity: 0;
		transform: scale(3);
		display: inline-block;
	}
	._mov_zoomout._mov_showed {
		transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		opacity: 1;
		transform: scale(1);
	}

	._mov_delay1 {
		transition-delay: .2s !important;
	}
	._mov_delay2 {
		transition-delay: .4s !important;
	}
	._mov_delay3 {
		transition-delay: .6s !important;
	}
	._mov_delay4 {
		transition-delay: .8s !important;
	}
	._mov_delay5 {
		transition-delay: 1s !important;
	}
	._mov_delay6 {
		transition-delay: .2s !important;
	}
	._mov_delay1s {
		transition-delay: .1s !important;
	}
	._mov_delay2s {
		transition-delay: .2s !important;
	}
	._mov_delay3s {
		transition-delay: .3s !important;
	}
	._mov_delay4s {
		transition-delay: .4s !important;
	}
	._mov_delay5s {
		transition-delay: .5s !important;
	}
	._mov_delay6s {
		transition-delay: .6s !important;
	}
	@media screen and (min-width: 768px), print {
		._mov_pc_delay1 {
			transition-delay: .2s !important;
		}
		._mov_fadeup.-sp-mov_show {
			opacity: 1;
			transform: translateY(0);
		}
	}
	._mov_showed + ._mov_fadeup._mov_before {
		transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		transition-delay: .4s !important;
		opacity: 1;
		transform: translateY(0);
	}

	.index_workstyle .catch {
		.item {
			opacity: 0;
			&.-think {
				transform: translateX(-5rem);
			}
			&.-challenge {
				transform: translateX(5rem);
			}
		}
		.cross {
			opacity: 0;
			transform: scale(1.5);
		}
		&:has(._mov_showed) {
			.item {
				transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
				transform: translateX(0);
				opacity: 1;
				&.-challenge {
					transition-delay: .1s;
				}
			}
			.cross {
				opacity: 1;
				transform: scale(1);
				transition: transform .6s .2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .6s .2s linear;
			}
		}
	}

	.js-typewriter-in {
		clip-path: inset(-1px 100% -1px 0);
		&:has(.c_show) {
			transition: clip-path .5s cubic-bezier(0.33, 1, 0.68, 1);
			clip-path: inset(-1px 0);
		}
	}
	.index_vision {
		.copy {
			.eng {
				clip-path: inset(-1px 100% -1px 0);
				.txt {
					display: inline-block;
					opacity: 0;
				}
			}
			&:has(.c_show) {
				.eng {
					transition: clip-path .5s 1.6s cubic-bezier(0.33, 1, 0.68, 1);
					clip-path: inset(-1px 0);
					.txt {
						transition: opacity .3s 2s linear;
						opacity: 1;
					}
				}
			}
		}
	}
}