@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: "Chubby /";

						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: #2B3A4E;

				font-size: 5.6rem;

				line-height: 1.2;

				font-weight: 900;

				.blue {

					color: #E07B00;

				}

				.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: #2B3A4E;

				font-size: 5.6rem;

				line-height: 1.2;

				font-weight: 900;

				.no1 {

					margin-inline: 1.5rem;

					color: #E07B00;

					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: "Noto Sans JP";

		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: #E07B00;

					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: #E07B00;

					}

					&::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 #2B3A4E;

			}

			&::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: #2B3A4E;

		font-size: 2.2rem;

		.eng {

			margin-bottom: 0.5rem;

			font-size: 4.2rem;

			line-height: 1.6;

			color: #2B3A4E;

			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: #E07B00;

			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: #F7931E;

						bottom: calc(50% + 20rem);

					}

					li span {

						background-color: #F7931E;

					}

				}

				.-regional {

					dt {

						color: #2B3A4E;

						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: #2B3A4E;

					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: #2B3A4E;

					}

					.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: #2B3A4E;

	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(43, 58, 78, 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(43, 58, 78, 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(43, 58, 78, 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;

					}

				}

			}

		}

	}

}