@import "./style.css";

:where(.p-top) {
	.p-section {
		overflow-x: clip;
	}
}

.p-top-mv {
	background-color: var(--color-white);
	background-image: url("../img/top/mv-top-sp.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	container: mv-container / inline-size;
	display: block grid;
	inline-size: 100%;
	isolation: isolate;
	min-block-size: 664px;
	justify-items: center;
	position: relative;
	@media (width >= 768px) {
		min-block-size: 1046px;
		background-image: url("../img/top/mv-top-pc.webp");
	}
}

.p-top-mv__img-wrapper {
	inset: 0;
	position: absolute;
}

.p-top-mv__img {
	block-size: 100%;
	object-fit: cover;
	inline-size: 100%;
}

.p-top-mv__title {
	block-size: 41%;
	inline-size: auto;
	position: relative;
	margin-block-start: calc(80 * var(--rem));
	@media (width >= 992px) {
		margin-block-start: calc(144 * var(--rem));
	}
}

.p-top-mv__title-img {
	will-change: filter;
	animation-duration: 1s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
	animation-name: fadeInBlur;
	animation-timing-function: ease-in-out;
	filter: blur(8px) drop-shadow(0 0 12px #72a1e6);
	inline-size: 86px;
	@media (width >= 992px) {
		inline-size: 127px;
	}
}

@keyframes fadeInBlur {
	0% {
		filter: blur(10px) drop-shadow(0 0 12px #72a1e6);
	}
	100% {
		filter: blur(0) drop-shadow(0 0 12px #72a1e6);
	}
}

/* top-lead */
.p-top-lead {
	padding-block: var(--block-section-space);
	transition-duration: 1s;
	@media (width >=992px) {
		padding-inline: var(--inline-content-space) var(--inline-content-space);
		padding-block: calc(146 * var(--rem)) calc(100 * var(--rem));
	}
}

:where(.p-top-lead) {
	.c-level2-heading .img {
		@media (width < 992px) {
			max-inline-size: 223px;
		}
	}
}

body.toggle-on .p-top-lead {
	background-color: var(--color-gray04);
	color: var(--color-white);
}

.p-top-lead__inner {
	display: block grid;
	grid-template-columns: var(--inline-content-space) 1fr var(
			--inline-content-space
		);
	grid-template-rows: auto 4em auto 2.857em auto;
	grid-template-areas:
		". title    . "
		". .        . "
		". contents ."
		". .        . "
		"imgs imgs imgs";
	@media (width >= 992px) {
		grid-template-columns: calc(40 / 1180 * 100%) calc(358 / 1180 * 100%) 1fr calc(
				601 / 1180 * 100%
			);
		grid-template-rows: auto 1fr;
		grid-template-areas: revert;
		row-gap: calc(109 * var(--rem));
		grid-template-areas:
			". title    . imgs "
			". contents . imgs";
	}
}

.p-top-lead__title {
	grid-area: title;
}

.p-top-lead__contents {
	display: grid;
	gap: 1em;
	grid-area: contents;
	@media (width >= 992px) {
		align-self: start;
	}
}

.p-top-lead__imgs {
	aspect-ratio: 601/649;
	display: grid;
	grid-area: imgs;
	grid-template-columns: repeat(30, 1fr);
	grid-template-rows: repeat(63, 1fr);
	isolation: isolate;
	@media (width >= 992px) {
		margin-block-start: calc(64 * var(--rem));
	}
}

.p-top-lead__img-wrapper {
	clip-path: inset(0 100% 0 0);
	opacity: 0;
	transition: opacity 1.5s ease, -webkit-clip-path 1.3s cubic-bezier(1, 0, 0, 1);
	transition: opacity 1.5s ease, clip-path 1.3s cubic-bezier(1, 0, 0, 1);
	transition: opacity 1.5s ease, clip-path 1.3s cubic-bezier(1, 0, 0, 1),
		-webkit-clip-path 1.3s cubic-bezier(1, 0, 0, 1);
}

.js-trigger.on .p-top-lead__img-wrapper {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

.p-top-lead__img-wrapper:nth-child(1) {
	grid-column: 4/13;
	grid-row: 1/12;
	position: relative;
	z-index: 1;
}

.p-top-lead__img-wrapper:nth-child(2) {
	grid-column: -8/-21;
	grid-row: 9/26;
}

.p-top-lead__img-wrapper:nth-child(3) {
	grid-column: 1/15;
	grid-row: -1/-35;
}

.p-top-lead__img-wrapper:nth-child(4) {
	grid-column: -1/-13;
	grid-row: -16/-32;
}

.p-top-lead__img-wrapper:nth-child(5) {
	grid-column: -6/-12;
	grid-row: -5/-13;
}

.p-top-lead__img {
	block-size: auto;
	max-inline-size: 100%;
	inline-size: 100%;
}

/* career story */
.p-top-career {
	transition-duration: 1s;
	display: block grid;
	grid-template-columns: var(--inline-content-space) 1fr var(
			--inline-content-space
		);
	grid-template-rows: auto 5.14em auto 4em auto 5.14em auto;
	grid-template-areas:
		". title ."
		". . ."
		". text ."
		". . ."
		"cards cards cards"
		". . ."
		". button .";
	isolation: isolate;
	padding-block: var(--block-section-space);
	position: relative;
	@media (width >=992px) {
		grid-template-columns:
			var(--inline-content-space) calc(40 / 1340 * 100%) calc(470 / 1340 * 100%)
			1fr calc(558 / 1340 * 100%)
			var(--inline-content-space);
		grid-template-rows: auto 6.375em auto 6em auto;
		grid-template-areas:
			". . title . text ."
			". . . . . ."
			"cards cards cards cards cards cards"
			". . . . . ."
			". button button button button .";
		padding-block: calc(168 * var(--rem)) calc(128 * var(--rem));
	}
}

:where(.p-top-career) {
	.c-level2-heading .img {
		@media (width < 992px) {
			max-inline-size: 304px;
		}
	}
}

body.toggle-on .p-top-career {
	background-color: var(--color-gray04);
	color: var(--color-white);
	.p-top-career__title .c-level2-heading::after {
		z-index: 0;
	}
	.p-top-career__title-img {
		opacity: 0;
		visibility: hidden;
	}
}

.p-top-career__title {
	align-self: center;
	grid-area: title;
	.c-level2-heading {
		position: relative;
	}
	.c-level2-heading::after {
		background-image: url(../img/top/text-top-career-story-title-change.svg);
		background-position: left;
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: block;
		inset: 0;
		position: absolute;
		transition-duration: 1s;
		z-index: -1;
	}
}

.c-level2-heading .img {
	inline-size: 100%;
}

.p-top-career__title-img {
	block-size: auto;
	inline-size: 100%;
	transition-duration: 1s;
}

.p-top-career .c-section-sub-heading {
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.p-top-career__text {
	grid-area: text;
	display: block grid;
	letter-spacing: 0.04em;
	row-gap: 2.285em;
	inline-size: calc(267 / 342 * 100%);
	@media (width >= 768px) {
		align-self: end;
		row-gap: 2.5em;
		inline-size: 100%;
	}
}

.p-swiper-cards {
	grid-area: cards;
	padding: 0;
	overflow: hidden;
}

.p-swiper-card {
	align-content: start;
	display: block grid;
	container: card-container / inline-size;
	flex-shrink: 0;
	row-gap: calc(20 * var(--rem));
	width: 295px;
	@media (width >= 768px) {
		width: 341px;
	}
}

.p-swiper-card__img-wrapper {
	aspect-ratio: 340/400;
	inline-size: 100%;
	overflow: hidden;
	position: relative;
}

.p-swiper-card__img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

.p-swiper-card__caption {
	--clamp-min: 15;
	--clamp-max: 18;
	display: grid;
	grid-auto-flow: column;
	position: absolute;
	right: 0;
	top: 0;
	writing-mode: vertical-rl;
	text-orientation: upright;
	.label {
		--clamp-min: 15;
		--clamp-max: 18;
		align-items: center;
		background-color: var(--color-black01);
		color: var(--color-white);
		display: grid;
		line-height: 1;
		padding: 0.8em 0.53em;
	}
	.text {
		--clamp-min: 14;
		--clamp-max: 15;
		align-items: center;
		background-color: color-mix(in srgb, var(--color-white) 70%, transparent);
		color: var(--color-black01);
		display: grid;
		line-height: 1.2;
		padding: 0.8em 0.53em;
	}
}

.p-swiper-card__body {
	display: block grid;
	grid-template-rows: auto calc(16 * var(--rem)) auto auto;
	grid-template-areas:
		"text"
		"."
		"status"
		"name";
}

.p-swiper-card__text {
	--clamp-min: 18;
	--clamp-max: 20;
	font-weight: 500;
	grid-area: text;
	line-height: 1.8;
}

.p-swiper-card__status {
	--clamp-min: 10;
	--clamp-max: 12;
	color: var(--color-gray01);
	grid-area: status;
	line-height: 1.6;
}

.p-swiper-card__name {
	--clamp-min: 16;
	--clamp-max: 18;
	color: var(--color-gray01);
	grid-area: name;
}

.p-top-career__button {
	grid-area: button;
	justify-self: center;
}

/* cross talk */
.p-top-cross-talk {
	background-image: url(../img/top/bkg-top-cross-talk.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode: normal;
	padding-block: var(--block-section-space);
	position: relative;
	@media (width >=992px) {
		padding-block: calc(168 * var(--rem)) calc(144 * var(--rem));
	}
}

:where(.p-top-cross-talk) {
	.c-level2-heading .img {
		@media (width < 992px) {
			max-inline-size: 500px;
		}
	}
}

.p-top-cross-talk__inner {
	display: block grid;
	grid-template-columns: var(--inline-content-space) 1fr var(
			--inline-content-space
		);
	grid-template-rows: auto 5.14em auto 7.42em auto;
	grid-template-areas:
		". title    . "
		". .        . "
		". contents ."
		". .         ."
		". button .";
	justify-items: end;
	isolation: isolate;
}

.p-top-cross-talk .c-section-sub-heading {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.p-top-cross-talk__title {
	grid-area: title;
	justify-self: stretch;
	.img {
		margin-inline: auto 0;
		@media (width >=992px) {
			left: revert;
			max-inline-size: 751px;
		}
	}
}

.p-top-cross-talk__contents {
	color: var(--color-white);
	grid-area: contents;
}

.p-top-cross-talk__text {
	letter-spacing: 0.04em;
}

.p-top-cross-talk__text + .p-top-cross-talk__text {
	margin-top: 2.5em;
}

.p-top-cross-talk__button {
	grid-area: button;
}

/* environment */
.p-top-environment {
	display: block grid;
	grid-template-columns: 1.5rem 1fr 1.5rem;
	grid-template-rows: auto 5.14em auto 5.14em auto 6.85em auto 6.85em auto;
	grid-template-areas:
		". title ."
		". . ."
		". contents ."
		". . ."
		". button-sm ."
		". . ."
		"gallery gallery gallery"
		". . ."
		". button-lg .";
	padding-block: var(--block-section-space);
	position: relative;
	@media (width >=992px) {
		grid-template-columns: 5rem 11fr 10% 17fr 10% 20fr 5rem;
		grid-template-rows: 10.5em min-content 4.5em auto 7.5em 7.5em auto;
		grid-template-areas:
			"gallery gallery . . . . ."
			"gallery gallery . title . contents ."
			"gallery gallery . . . . ."
			"gallery gallery . . . button-sm ."
			"gallery gallery . . . . ."
			". . . . . . ."
			". button-lg button-lg button-lg button-lg button-lg .";
		padding-block: 0 calc(200 * var(--rem));
		isolation: isolate;
	}
}

.p-top-environment__title {
	align-self: center;
	grid-area: title;
}

.p-top-environment__title-img {
	block-size: auto;
	inline-size: 100%;
}

.p-top-environment .c-section-sub-heading {
	color: var(--color-gray02);
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	@media (width >= 992px) {
		left: 30%;
		right: auto;
		top: 0;
	}
}

.p-top-environment__contents {
	grid-area: contents;
	display: block grid;
	letter-spacing: 0.04em;
	row-gap: 2.285em;
	@media (width >= 768px) {
		row-gap: 2.5em;
	}
}

.p-top-environment__text {
	letter-spacing: 0.04;
}

.p-top-environment__list {
	display: block grid;
	row-gap: 0.857em;
	@media (width >= 768px) {
		row-gap: 0.75em;
	}
}

.p-top-environment__item {
	.text {
		--clamp-min: 14;
		--clamp-max: 15;
		background-image: linear-gradient(
			var(--color-white) 0%,
			var(--color-white) 100%
		);
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		display: inline;
		font-weight: bold;
		padding: 0.35em 0.57em;
	}
}

.p-top-environment__imgs {
	grid-area: gallery;
	inline-size: 100%;
	overflow-x: hidden;
	position: relative;
	@media (width >=992px) {
		overflow-x: revert;
		overflow-y: hidden;
		&::after {
			background-image: linear-gradient(transparent 0%, #efedec);
			block-size: 50%;
			bottom: 0;
			content: "";
			display: block;
			inline-size: 100%;
			left: 0;
			position: absolute;
		}
	}
}

.p-top-environment__img-wrapper {
	-webkit-animation: horizontalScloll 20s linear infinite;
	animation: horizontalScloll 20s linear infinite;
	display: flex;
	gap: calc(10 * var(--rem));
	inline-size: max-content;
	will-change: transform;
	@media (width >=992px) {
		animation: verticalScroll 20s linear infinite;
		flex-direction: column;
		position: absolute;
		inline-size: 100%;
	}
}

.p-top-environment__img {
	block-size: 191px;
	inline-size: auto;
	flex-shrink: 0;
	@media (width >=992px) {
		block-size: auto;
		inline-size: 100%;
	}
}

@keyframes horizontalScloll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}
@keyframes verticalScroll {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-50%);
	}
}

.p-top-environment__environment-button {
	grid-area: button-sm;
}

.p-top-environment__requirements-button {
	grid-area: button-lg;
}

/* CTA */
.p-cta {
	background-color: var(--color-gray01);
	display: block;
	padding-block: var(--block-section-space);
	position: relative;
	&::after {
		background: linear-gradient(var(--color-gray01), var(--color-white));
		content: "";
		display: block;
		inset: 0;
		opacity: 0;
		position: absolute;
		transition-duration: 0.2s;
		z-index: -1;
	}
	&:focus-visible {
		.p-cta__button {
			color: var(--color-blue01);
		}
		.p-cta__button::after {
			translate: 0.3em;
		}
	}
	&:focus-visible::after {
		opacity: 1;
		z-index: 0;
	}
	&:where(:any-link, :enabled):hover {
		@media (any-hover: hover) {
			&::after {
				opacity: 1;
				z-index: 0;
			}
			.p-cta__button {
				color: var(--color-blue01);
			}
			.p-cta__button::after {
				translate: 0.3em;
			}
		}
	}
}
.p-cta__inner {
	display: block grid;
	grid-template-rows: auto 2.85em auto 3.42em;
	justify-items: center;
	grid-template-areas:
		"title"
		"."
		"text"
		"."
		"button";
	position: relative;
	z-index: 1;
	@media (width >= 768px) {
		grid-template-rows: auto 2em auto 3.5em;
	}
}

.p-cta__button__title {
	grid-area: title;
}

.p-cta__title-img {
	max-inline-size: 865px;
	width: 100%;
}

.p-cta__text {
	font-size: calc(16 * var(--rem));
	grid-area: text;
	letter-spacing: 0.04;
	text-align: center;
}

.p-cta__button {
	align-items: center;
	column-gap: 1em;
	color: var(--color-black01);
	display: inline grid;
	grid-area: button;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, auto);
	justify-items: center;
	inline-size: 100%;
	letter-spacing: 0.04em;
	line-height: 1.8;
	text-wrap: pretty;
	transition-duration: 0.2s;
	transition-property: color;
	vertical-align: middle;
	@media (width >= 768px) {
		grid-template-columns: 1fr auto 1fr;
	}
	.text {
		--clamp-min: 12;
		--clamp-max: 18;
	}
	.text:lang(en) {
		--clamp-min: 112;
		--clamp-max: 168;
		font-family: var(--font-bar);
		font-weight: 600;
		line-height: 1;
	}
	.text:lang(ja) {
		font-weight: bold;
		@media (width >= 768px) {
			grid-column: 2;
		}
	}
}

.p-cta__button::before {
	block-size: calc(12 * var(--rem));
	content: "";
	grid-row: 3;
	@media (width >= 768px) {
		block-size: revert;
		grid-row: revert;
	}
}

.p-cta__button::after {
	background-color: currentColor;
	content: "";
	-webkit-mask-image: url("../img/common/icon-arrow.svg");
	mask-image: url("../img/common/icon-arrow.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	inline-size: 4.57em;
	aspect-ratio: 1;
	transition: translate 0.2s;
	@media (width >= 768px) {
		grid-row: 1 / 3;
		grid-column: 3;
		inline-size: 6.5em;
	}
}