/* ========================================================================== 
   Page: Recruitment KV
   ========================================================================== */

.recruit-page {
	--recruit-section-space: 150px;
}

@media (max-width: 1200px) {
	.recruit-page {
		--recruit-section-space: min(12.5vw, 150px);
	}
}

@media (max-width: 600px) {
	.recruit-page {
		--recruit-section-space: 70px;
	}
}

.recruit-kv {
	--lower-kv-visual-left: 0px;
	--lower-kv-visual-height: calc(100vh - var(--site-header-height) - var(--recruit-kv-admin-bar-height));
	--lower-kv-title-height: 140px;
	--lower-kv-title-overflow: 0px;
	--lower-kv-title-padding-left: 70px;
	--lower-kv-title-padding-right: 70px;
	--lower-kv-copy-top: 45px;
	--lower-kv-copy-width: 160px;
	--lower-kv-copy-ratio: 2.6894;
	--lower-kv-heading-title-size: 60px;
	--lower-kv-heading-label-size: 30px;
	--lower-kv-heading-line-width: 80px;
	--recruit-kv-admin-bar-height: 0px;
	--recruit-kv-copy-left: 11.9792vw;
	--recruit-kv-image-overscan: 38.5px;
	--recruit-kv-link-bottom: 40px;
	--recruit-kv-link-right: 50px;
	--recruit-kv-link-width: 260px;
	--recruit-kv-link-height: 60px;
	--recruit-kv-link-gap: 20px;
	--recruit-kv-link-font-size: 16px;
	--recruit-kv-link-icon-size: 30px;
	--recruit-kv-link-icon-right: 20px;

	overflow: hidden;
}

body.admin-bar .recruit-kv {
	--recruit-kv-admin-bar-height: 32px;
}

.recruit-kv__image img {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(100% + (var(--recruit-kv-image-overscan) * 2));
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transform: translateX(-50%);
	transform-origin: center top;
}

.recruit-kv__copy {
	right: auto;
	left: var(--recruit-kv-copy-left);
	filter: drop-shadow(8px 10px 6px rgba(12, 32, 59, 0.28));
}

.recruit-kv__heading-panel {
	border-radius: 0 10px 0 0;
}

.recruit-kv__links {
	position: absolute;
	z-index: 2;
	right: var(--recruit-kv-link-right);
	bottom: var(--recruit-kv-link-bottom);
	display: flex;
	gap: var(--recruit-kv-link-gap);
}

.recruit-kv__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--recruit-kv-link-width);
	height: var(--recruit-kv-link-height);
	color: #fff;
	font-size: var(--recruit-kv-link-font-size);
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.45s ease;
}

.recruit-kv__link--requirements {
	background: var(--color-link-blue);
}

.recruit-kv__link--entry {
	background: #e36f9c;
}

.recruit-kv__link-icon {
	position: absolute;
	right: var(--recruit-kv-link-icon-right);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--recruit-kv-link-icon-size);
	height: var(--recruit-kv-link-icon-size);
	border-radius: 50%;
	color: var(--color-link-blue);
	font-size: 12px;
	font-weight: 500;
	background: #fff;
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		color 0.45s ease,
		background-color 0.45s ease;
	will-change: transform;
}

.recruit-kv__link--entry .recruit-kv__link-icon {
	color: #e36f9c;
}

.recruit-kv__link--requirements:hover,
.recruit-kv__link--requirements:focus-visible {
	background-color: #045996;
}

.recruit-kv__link--entry:hover,
.recruit-kv__link--entry:focus-visible {
	background-color: #c85f88;
}

.recruit-kv__link:hover .recruit-kv__link-icon,
.recruit-kv__link:focus-visible .recruit-kv__link-icon {
	color: #fff;
	background-color: #1d1d1d;
	transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
	.recruit-kv__link-icon {
		transition:
			color 0.2s ease,
			background-color 0.2s ease;
	}

	.recruit-kv__link:hover .recruit-kv__link-icon,
	.recruit-kv__link:focus-visible .recruit-kv__link-icon {
		transform: none;
	}
}

/* ==========================================================================
   Responsive: 601px to below 1200px
   ========================================================================== */

@media (min-width: 601px) and (max-width: 1199px) {
	.recruit-kv {
		--lower-kv-visual-height: min(
			calc(100vh - var(--site-header-height) - var(--recruit-kv-admin-bar-height)),
			clamp(280px, calc(-400px + 113.3333vw), 960px)
		);
		--lower-kv-title-height: clamp(52px, calc(-36px + 14.6667vw), 140px);
		--lower-kv-title-padding-left: clamp(20px, calc(-30px + 8.3333vw), 70px);
		--lower-kv-title-padding-right: var(--lower-kv-title-padding-left);
		--lower-kv-copy-top: clamp(20px, calc(-5px + 4.1667vw), 45px);
		--lower-kv-copy-width: clamp(70px, calc(-20px + 15vw), 160px);
		--lower-kv-heading-title-size: clamp(26px, calc(-8px + 5.6667vw), 60px);
		--lower-kv-heading-label-size: clamp(13px, calc(-4px + 2.8333vw), 30px);
		--lower-kv-heading-line-width: clamp(38px, calc(-4px + 7vw), 80px);
		--recruit-kv-copy-left: clamp(15px, calc(-113.75px + 21.4583vw), 143.75px);
		--recruit-kv-image-overscan: clamp(0px, calc(-38.5px + 6.4167vw), 38.5px);
		--recruit-kv-link-bottom: min(3.3333vw, 40px);
		--recruit-kv-link-right: min(4.1667vw, 50px);
		--recruit-kv-link-width: min(21.6667vw, 260px);
		--recruit-kv-link-height: min(5vw, 60px);
		--recruit-kv-link-gap: min(1.6667vw, 20px);
		--recruit-kv-link-font-size: clamp(12px, 1.3333vw, 16px);
		--recruit-kv-link-icon-size: min(2.5vw, 30px);
		--recruit-kv-link-icon-right: min(1.6667vw, 20px);
	}
}

/* ==========================================================================
   Responsive: 600px and below
   ========================================================================== */

@media (max-width: 600px) {
	.recruit-kv {
		--lower-kv-visual-height: 280px;
		--lower-kv-title-height: 52px;
		--lower-kv-title-padding-left: 20px;
		--lower-kv-title-padding-right: 20px;
		--lower-kv-copy-top: 20px;
		--lower-kv-copy-width: 70px;
		--lower-kv-heading-title-size: 26px;
		--lower-kv-heading-label-size: 13px;
		--lower-kv-heading-line-width: 38px;
		--recruit-kv-copy-left: 15px;
		--recruit-kv-image-overscan: 0px;
	}

	.recruit-kv__image img {
		width: auto;
		min-width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.recruit-kv__copy {
		filter: drop-shadow(4px 5px 4px rgba(12, 32, 59, 0.28));
	}

	.recruit-kv__links {
		display: none;
	}
}

@media (max-width: 782px) {
	body.admin-bar .recruit-kv {
		--recruit-kv-admin-bar-height: 46px;
	}
}

/* ==========================================================================
   Recruitment Message
   ========================================================================== */

.recruit-message {
	--recruit-message-height: 1080px;
	--recruit-message-board-top: 350px;
	--recruit-message-board-side-margin: 40px;
	--recruit-message-board-width: min(1300px, calc(100% - (var(--recruit-message-board-side-margin) * 2)));
	--recruit-message-board-height: 436px;
	--recruit-message-people-top: -78.4443px;
	--recruit-message-people-left: 103px;
	--recruit-message-people-width: 275px;
	--recruit-message-title-top: 57px;
	--recruit-message-description-position: 117px;
	--recruit-message-text-left: 416px;
	--recruit-message-text-right: 20px;
	--recruit-message-text-width: calc(100% - var(--recruit-message-text-left) - var(--recruit-message-text-right));
	--recruit-message-title-size: 32px;
	--recruit-message-description-size: 20px;
	--recruit-message-description-leading: 36px;

	position: relative;
	isolation: isolate;
	overflow: clip;
	background-image: url("../images/recruit-bg02.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

.recruit-message::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	content: "";
	background: rgba(0, 31, 70, 0.5);
}

.recruit-message__content {
	position: relative;
	z-index: 1;
	min-height: var(--recruit-message-height);
}

.recruit-message__stage {
	position: absolute;
	top: var(--recruit-message-board-top);
	left: 50%;
	width: var(--recruit-message-board-width);
	height: var(--recruit-message-board-height);
	transform: translateX(-50%);
}

.recruit-message__board {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.recruit-message__board img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recruit-message__people {
	position: absolute;
	z-index: 1;
	top: var(--recruit-message-people-top);
	left: var(--recruit-message-people-left);
	width: var(--recruit-message-people-width);
	height: auto;
}

.recruit-message__text {
	position: absolute;
	z-index: 1;
	top: 0;
	left: var(--recruit-message-text-left);
	width: var(--recruit-message-text-width);
	height: var(--recruit-message-board-height);
}

.recruit-message__title {
	position: absolute;
	top: var(--recruit-message-title-top);
	left: 0;
	margin: 0;
	color: #056db9;
	font-size: var(--recruit-message-title-size);
	font-weight: 700;
	line-height: 1.45;
	font-feature-settings: "palt";
}

.recruit-message__title-break {
	display: none;
}

.recruit-message__description {
	position: absolute;
	top: var(--recruit-message-description-position);
	left: 0;
	width: 100%;
	margin: 0;
	color: #0c203b;
	font-size: var(--recruit-message-description-size);
	font-weight: 700;
	line-height: var(--recruit-message-description-leading);
}

.recruit-message__description span {
	display: block;
}

.recruit-message__description--sp {
	display: none;
}

/* ==========================================================================
   Responsive: 601px to below 1200px
   ========================================================================== */

@media (min-width: 601px) and (max-width: 1199px) {
	.recruit-message {
		--recruit-message-height: calc(400px + 56.6667vw);
		--recruit-message-board-top: calc(-110px + 38.3333vw);
		--recruit-message-board-height: calc(718px - 23.5vw);
		--recruit-message-people-top: calc(327.1693px - 33.8011vw);
		--recruit-message-people-left: calc(-108.5789px + 17.6316vw);
		--recruit-message-people-width: calc(164.4737px + 9.2105vw);
		--recruit-message-title-top: calc(192px - 11.25vw);
		--recruit-message-description-position: calc(281px - 13.6667vw);
		--recruit-message-text-left: calc(37.0526px + 31.5789vw);
		--recruit-message-title-size: calc(12px + 1.6667vw);
		--recruit-message-description-size: calc(12px + 0.6667vw);
		--recruit-message-description-leading: calc(15.2px + 1.7333vw);
	}

	.recruit-message__text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		transform: translateY(min(0px, calc(49.6316px - 6.0526vw)));
	}

	.recruit-message__title,
	.recruit-message__description {
		position: static;
	}

	.recruit-message__description {
		margin-top: calc(71.6px - 4.8333vw);
	}
}

/* ==========================================================================
   Responsive: 600px and below
   ========================================================================== */

@media (max-width: 600px) {
	.recruit-message {
		--recruit-message-height: 740px;
		--recruit-message-board-top: 120px;
		--recruit-message-board-width: 289px;
		--recruit-message-board-height: 577px;
		--recruit-message-people-top: -78.4028px;
		--recruit-message-people-left: 83.25px;
		--recruit-message-people-width: 122.5px;
		--recruit-message-title-top: 124.5px;
		--recruit-message-description-position: 199px;
		--recruit-message-text-left: 22px;
		--recruit-message-text-width: 245px;
		--recruit-message-title-size: 22px;
		--recruit-message-description-size: 16px;
		--recruit-message-description-leading: 25.6px;
	}

	.recruit-message__title {
		line-height: 32px;
	}

	.recruit-message__title-break {
		display: block;
	}

	.recruit-message__description--pc {
		display: none;
	}

	.recruit-message__description--sp {
		display: block;
	}
}

/* ==========================================================================
   Recruitment Jobs
   ========================================================================== */

.recruit-jobs {
	--recruit-jobs-inner-width: 1200px;
	--recruit-jobs-side-gutter: 0px;
	--recruit-jobs-padding-top: 160px;
	--recruit-jobs-padding-bottom: 115px;
	--recruit-jobs-overview-height: 367px;
	--recruit-jobs-heading-number-size: 140px;
	--recruit-jobs-heading-gap: 50px;
	--recruit-jobs-title-size: 180px;
	--recruit-jobs-title-leading: 1.0556;
	--recruit-jobs-lead-title-size: 32px;
	--recruit-jobs-lead-text-size: 16px;
	--recruit-jobs-lead-text-top: 14px;
	--recruit-jobs-illust-width: 195px;
	--recruit-jobs-list-top: 50px;
	--recruit-jobs-list-gap: 30px;
	--recruit-jobs-item-label-height: 40px;
	--recruit-jobs-item-label-gap: 8px;
	--recruit-jobs-item-label-size: 20px;
	--recruit-jobs-item-icon-size: 22px;
	--recruit-jobs-item-icon-font-size: 9px;

	padding: var(--recruit-jobs-padding-top) 0 var(--recruit-jobs-padding-bottom);
	background: #fff url("../images/recruit-paper-bg.webp") center top / cover no-repeat;
}

.recruit-jobs__inner {
	width: min(calc(100% - (var(--recruit-jobs-side-gutter) * 2)), var(--recruit-jobs-inner-width));
	margin-inline: auto;
}

.recruit-jobs__overview {
	position: relative;
	display: grid;
	grid-template-columns: 570px minmax(0, 1fr);
	column-gap: var(--recruit-jobs-list-gap);
	min-height: var(--recruit-jobs-overview-height);
}

.recruit-jobs__heading {
	position: relative;
	z-index: 1;
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: flex-start;
	column-gap: var(--recruit-jobs-heading-gap);
}

.recruit-jobs__number {
	flex: 0 0 var(--recruit-jobs-heading-number-size);
	color: rgba(5, 109, 185, 0.5);
	font-family: var(--font-en);
	font-size: var(--recruit-jobs-heading-number-size);
	font-weight: 600;
	line-height: 1;
}

.recruit-jobs__title {
	margin: 0;
	color: #056db9;
	font-size: var(--recruit-jobs-title-size);
	font-weight: 900;
	line-height: var(--recruit-jobs-title-leading);
	font-feature-settings: "palt";
}

.recruit-jobs__lead {
	position: relative;
	z-index: 2;
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	min-width: 0;
}

.recruit-jobs__lead-title {
	margin: 0;
	color: #056db9;
	font-size: var(--recruit-jobs-lead-title-size);
	font-weight: 700;
	line-height: 1.45;
	font-feature-settings: "palt";
}

.recruit-jobs__lead-text {
	max-width: 440px;
	margin: var(--recruit-jobs-lead-text-top) 0 0;
	color: #1d1d1d;
	font-size: var(--recruit-jobs-lead-text-size);
	font-weight: 400;
	line-height: 1.8;
	white-space: normal;
	overflow-wrap: anywhere;
}

.recruit-jobs__illust {
	position: absolute;
	right: 0;
	bottom: -15px;
	z-index: 2;
	display: block;
	width: var(--recruit-jobs-illust-width);
	height: auto;
}

.recruit-jobs__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--recruit-jobs-list-gap);
	margin-top: var(--recruit-jobs-list-top);
}

.recruit-jobs__item {
	display: block;
	min-width: 0;
	color: #1d1d1d;
}

.recruit-jobs__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 19 / 17;
	object-fit: cover;
}

.recruit-jobs__item-label {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: var(--recruit-jobs-item-label-gap);
	min-height: var(--recruit-jobs-item-label-height);
	font-size: var(--recruit-jobs-item-label-size);
	font-weight: 700;
	line-height: 1;
	transition: color 0.45s ease;
}

.recruit-jobs__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--recruit-jobs-item-icon-size);
	height: var(--recruit-jobs-item-icon-size);
	border-radius: 50%;
	color: #fff;
	font-size: var(--recruit-jobs-item-icon-font-size);
	font-weight: 500;
	line-height: 1;
	background: #056db9;
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		color 0.45s ease,
		background-color 0.45s ease;
	will-change: transform;
}

.recruit-jobs__item:hover .recruit-jobs__item-label,
.recruit-jobs__item:focus-visible .recruit-jobs__item-label {
	color: var(--color-accent);
}

.recruit-jobs__item:hover .recruit-jobs__item-icon,
.recruit-jobs__item:focus-visible .recruit-jobs__item-icon {
	color: #fff;
	background-color: #1d1d1d;
	transform: translateX(6px);
}

/* ==========================================================================
   Responsive: Recruitment Jobs, 1200px and below
   ========================================================================== */

@media (max-width: 1200px) {
	.recruit-jobs {
		--recruit-jobs-side-gutter: min(4.1667vw, 50px);
		--recruit-jobs-padding-top: clamp(70px, calc(-20px + 15vw), 160px);
		--recruit-jobs-padding-bottom: min(9.5833vw, 115px);
		--recruit-jobs-overview-height: min(30.5833vw, 367px);
		--recruit-jobs-heading-number-size: clamp(60px, calc(-20px + 13.3333vw), 140px);
		--recruit-jobs-heading-gap: min(4.1667vw, 50px);
		--recruit-jobs-title-size: clamp(80px, calc(-20px + 16.6667vw), 180px);
		--recruit-jobs-lead-title-size: clamp(22px, calc(12px + 1.6667vw), 32px);
		--recruit-jobs-lead-text-size: clamp(14px, calc(12px + 0.3333vw), 16px);
		--recruit-jobs-lead-text-top: min(1.1667vw, 14px);
		--recruit-jobs-illust-width: min(16.25vw, 195px);
		--recruit-jobs-list-top: min(4.1667vw, 50px);
		--recruit-jobs-list-gap: min(2.5vw, 30px);
		--recruit-jobs-item-label-height: min(3.3333vw, 40px);
		--recruit-jobs-item-label-gap: min(0.6667vw, 8px);
		--recruit-jobs-item-label-size: min(1.6667vw, 20px);
		--recruit-jobs-item-icon-size: min(1.8333vw, 22px);
		--recruit-jobs-item-icon-font-size: min(0.75vw, 9px);
	}

	.recruit-jobs__overview {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--recruit-jobs-list-top);
		padding-right: calc(var(--recruit-jobs-illust-width) + var(--recruit-jobs-list-gap));
		min-height: 0;
	}

	.recruit-jobs__heading {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.recruit-jobs__lead {
		grid-column: 1;
		grid-row: 2;
	}

	.recruit-jobs__illust {
		bottom: 0;
	}
}

/* ==========================================================================
   Responsive: Recruitment Jobs, 600px and below
   ========================================================================== */

@media (max-width: 600px) {
	.recruit-jobs {
		--recruit-jobs-side-gutter: 20px;
		--recruit-jobs-padding-top: 70px;
		--recruit-jobs-padding-bottom: 53px;
		--recruit-jobs-overview-height: auto;
		--recruit-jobs-heading-number-size: 60px;
		--recruit-jobs-heading-gap: 14px;
		--recruit-jobs-title-size: 80px;
		--recruit-jobs-title-leading: 1.0625;
		--recruit-jobs-lead-title-size: 22px;
		--recruit-jobs-lead-text-size: 14px;
		--recruit-jobs-lead-text-top: 12px;
		--recruit-jobs-illust-width: 158px;
		--recruit-jobs-list-top: 33px;
		--recruit-jobs-list-gap: 23px;
		--recruit-jobs-item-label-height: 40px;
		--recruit-jobs-item-label-gap: 8px;
		--recruit-jobs-item-label-size: 16px;
		--recruit-jobs-item-icon-size: 18px;
		--recruit-jobs-item-icon-font-size: 7px;

		background-size: auto 1080px;
		background-repeat: repeat-y;
	}

	.recruit-jobs__inner {
		max-width: 500px;
	}

	.recruit-jobs__overview {
		display: block;
		padding-right: 0;
	}

	.recruit-jobs__heading {
		display: flex;
	}

	.recruit-jobs__lead {
		margin-top: 30px;
	}

	.recruit-jobs__illust {
		position: relative;
		right: auto;
		bottom: auto;
		width: var(--recruit-jobs-illust-width);
		margin: 0 auto;
	}

	.recruit-jobs__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Recruitment Company
   ========================================================================== */

.recruit-company {
	--recruit-company-inner-width: 1200px;
	--recruit-company-side-gutter: 0px;
	--recruit-company-heading-number-size: 140px;
	--recruit-company-heading-gap: 60px;
	--recruit-company-title-size: 180px;
	--recruit-company-title-leading: 1;
	--recruit-company-lead-top: 70px;
	--recruit-company-lead-title-size: 32px;
	--recruit-company-lead-text-size: 16px;
	--recruit-company-lead-text-leading: 1.8;
	--recruit-company-lead-text-top: 14px;
	--recruit-company-list-top: 70px;
	--recruit-company-list-gap: 40px;
	--recruit-company-label-height: 40px;
	--recruit-company-label-gap: 8px;
	--recruit-company-label-size: 20px;
	--recruit-company-icon-size: 22px;
	--recruit-company-icon-font-size: 9px;

	position: relative;
	isolation: isolate;
	padding-block: var(--recruit-section-space);
	box-sizing: border-box;
	overflow: hidden;
	color: #fff;
	background: url("../images/recruit-bg03.webp") center / cover no-repeat fixed;
}

.recruit-company::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	content: "";
	background: rgba(0, 31, 70, 0.5);
}

.recruit-company__inner {
	width: min(calc(100% - (var(--recruit-company-side-gutter) * 2)), var(--recruit-company-inner-width));
	margin-inline: auto;
}

.recruit-company__heading {
	display: flex;
	align-items: center;
	column-gap: var(--recruit-company-heading-gap);
}

.recruit-company__number {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--font-en);
	font-size: var(--recruit-company-heading-number-size);
	font-weight: 600;
	line-height: 1;
}

.recruit-company__title {
	margin: 0;
	color: #fff;
	font-size: var(--recruit-company-title-size);
	font-weight: 900;
	line-height: var(--recruit-company-title-leading);
	white-space: nowrap;
	font-feature-settings: "palt";
}

.recruit-company__title-break {
	display: none;
}

.recruit-company__lead {
	margin-top: var(--recruit-company-lead-top);
}

.recruit-company__lead-title {
	margin: 0;
	font-size: var(--recruit-company-lead-title-size);
	font-weight: 700;
	line-height: 1.45;
	font-feature-settings: "palt";
}

.recruit-company__lead-text {
	max-width: 640px;
	margin: var(--recruit-company-lead-text-top) 0 0;
	font-size: var(--recruit-company-lead-text-size);
	font-weight: 400;
	line-height: var(--recruit-company-lead-text-leading);
}

.recruit-company__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--recruit-company-list-gap);
	margin-top: var(--recruit-company-list-top);
}

.recruit-company__item {
	display: block;
	min-width: 0;
	color: #fff;
}

.recruit-company__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 8;
	object-fit: cover;
}

.recruit-company__item-label {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: var(--recruit-company-label-gap);
	min-height: var(--recruit-company-label-height);
	font-size: var(--recruit-company-label-size);
	font-weight: 700;
	line-height: 1;
	font-feature-settings: "palt";
	transition: color 0.45s ease;
}

.recruit-company__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--recruit-company-icon-size);
	height: var(--recruit-company-icon-size);
	border-radius: 50%;
	color: #fff;
	font-size: var(--recruit-company-icon-font-size);
	font-weight: 500;
	line-height: 1;
	background: #056db9;
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		color 0.45s ease,
		background-color 0.45s ease;
	will-change: transform;
}

.recruit-company__item:hover .recruit-company__item-label,
.recruit-company__item:focus-visible .recruit-company__item-label {
	color: var(--color-accent);
}

.recruit-company__item:hover .recruit-company__item-icon,
.recruit-company__item:focus-visible .recruit-company__item-icon {
	color: #fff;
	background-color: #1d1d1d;
	transform: translateX(6px);
}

/* ==========================================================================
   Responsive: Recruitment Company, 1200px and below
   ========================================================================== */

@media (max-width: 1200px) {
	.recruit-company {
		--recruit-company-side-gutter: min(4.1667vw, 50px);
		--recruit-company-heading-number-size: clamp(60px, calc(-20px + 13.3333vw), 140px);
		--recruit-company-heading-gap: min(5vw, 60px);
		--recruit-company-title-size: clamp(80px, calc(-20px + 16.6667vw), 180px);
		--recruit-company-lead-top: min(5.8333vw, 70px);
		--recruit-company-lead-title-size: clamp(22px, calc(12px + 1.6667vw), 32px);
		--recruit-company-lead-text-size: clamp(14px, calc(12px + 0.3333vw), 16px);
		--recruit-company-lead-text-top: min(1.1667vw, 14px);
		--recruit-company-list-top: min(5.8333vw, 70px);
		--recruit-company-list-gap: min(3.3333vw, 40px);
		--recruit-company-label-height: min(3.3333vw, 40px);
		--recruit-company-label-gap: min(0.6667vw, 8px);
		--recruit-company-label-size: min(1.6667vw, 20px);
		--recruit-company-icon-size: min(1.8333vw, 22px);
		--recruit-company-icon-font-size: min(0.75vw, 9px);
	}
}

/* ==========================================================================
   Responsive: Recruitment Company, 600px and below
   ========================================================================== */

@media (max-width: 600px) {
	.recruit-company {
		--recruit-company-side-gutter: 20px;
		--recruit-company-heading-number-size: 60px;
		--recruit-company-heading-gap: 14px;
		--recruit-company-title-size: 80px;
		--recruit-company-title-leading: 1.0625;
		--recruit-company-lead-top: 60px;
		--recruit-company-lead-title-size: 22px;
		--recruit-company-lead-text-size: 14px;
		--recruit-company-lead-text-leading: 1.6;
		--recruit-company-lead-text-top: 14px;
		--recruit-company-list-top: 34px;
		--recruit-company-list-gap: 23px;
		--recruit-company-label-height: 40px;
		--recruit-company-label-gap: 8px;
		--recruit-company-label-size: 16px;
		--recruit-company-icon-size: 18px;
		--recruit-company-icon-font-size: 7px;
	}

	.recruit-company__inner {
		max-width: 500px;
	}

	.recruit-company__heading {
		align-items: flex-start;
	}

	.recruit-company__title-break {
		display: inline;
	}

	.recruit-company__lead-text br {
		display: none;
	}

	.recruit-company__list {
		grid-template-columns: 270px;
		justify-content: center;
	}
}

/* ==========================================================================
   Recruitment Before Applying
   ========================================================================== */

.recruit-before {
	--recruit-before-inner-width: 1200px;
	--recruit-before-side-gutter: 50px;
	--recruit-before-heading-top: 120px;
	--recruit-before-number-size: 140px;
	--recruit-before-title-size: 180px;
	--recruit-before-illust-width: 214px;
	--recruit-before-lead-top: 55px;
	--recruit-before-lead-title-size: 32px;
	--recruit-before-text-size: 16px;
	--recruit-before-text-top: 14px;
	--recruit-before-list-top: 26px;
	--recruit-before-list-gap-x: 40px;
	--recruit-before-list-gap-y: 40px;
	--recruit-before-label-height: 40px;
	--recruit-before-label-gap: 8px;
	--recruit-before-label-size: 20px;
	--recruit-before-icon-size: 22px;
	--recruit-before-icon-font-size: 9px;
	box-sizing: border-box;
	padding-block: var(--recruit-section-space);
	background: #fff url("../images/recruit-paper-bg.webp") center top / cover no-repeat;
}

.recruit-before__inner {
	display: grid;
	grid-template-columns:
		minmax(0, 230fr)
		minmax(0, 310fr)
		minmax(0, 580fr);
	column-gap: 40px;
	width: min(calc(100% - (var(--recruit-before-side-gutter) * 2)), var(--recruit-before-inner-width));
	margin-inline: auto;
}

.recruit-before__heading,
.recruit-before__content,
.recruit-before__list {
	grid-row: 1;
}

.recruit-before__heading {
	grid-column: 1;
	margin-top: var(--recruit-before-heading-top);
}

.recruit-before__number {
	display: block;
	color: rgba(5, 109, 185, 0.5);
	font-family: var(--font-en);
	font-size: var(--recruit-before-number-size);
	font-weight: 600;
	line-height: 1;
}

.recruit-before__title {
	margin: 20px 0 0;
	color: #056db9;
	font-size: var(--recruit-before-title-size);
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
	font-feature-settings: "palt";
}

.recruit-before__title-sp {
	display: none;
}

.recruit-before__content {
	display: flex;
	grid-column: 2;
	flex-direction: column;
	align-items: flex-start;
}

.recruit-before__illust {
	display: block;
	width: var(--recruit-before-illust-width);
	height: auto;
}

.recruit-before__lead {
	margin-top: var(--recruit-before-lead-top);
}

.recruit-before__lead-title {
	margin: 0;
	color: #056db9;
	font-size: var(--recruit-before-lead-title-size);
	font-weight: 700;
	line-height: 1.45;
	font-feature-settings: "palt";
}

.recruit-before__lead-text {
	margin: var(--recruit-before-text-top) 0 0;
	font-size: var(--recruit-before-text-size);
	font-weight: 400;
	line-height: 1.8;
}

.recruit-before__list {
	display: grid;
	grid-column: 3;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--recruit-before-list-gap-y) var(--recruit-before-list-gap-x);
	align-self: start;
	margin-top: var(--recruit-before-list-top);
}

.recruit-before__item {
	display: block;
	min-width: 0;
	color: #1d1d1d;
}

.recruit-before__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 8;
	object-fit: cover;
}

.recruit-before__item-label {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: var(--recruit-before-label-gap);
	min-height: var(--recruit-before-label-height);
	font-size: var(--recruit-before-label-size);
	font-weight: 700;
	line-height: 1;
	font-feature-settings: "palt";
	transition: color 0.45s ease;
}

.recruit-before__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--recruit-before-icon-size);
	height: var(--recruit-before-icon-size);
	border-radius: 50%;
	color: #fff;
	font-size: var(--recruit-before-icon-font-size);
	font-weight: 500;
	line-height: 1;
	background: #056db9;
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		color 0.45s ease,
		background-color 0.45s ease;
	will-change: transform;
}

.recruit-before__item:hover .recruit-before__item-label,
.recruit-before__item:focus-visible .recruit-before__item-label {
	color: var(--color-accent);
}

.recruit-before__item:hover .recruit-before__item-icon,
.recruit-before__item:focus-visible .recruit-before__item-icon {
	color: #fff;
	background-color: #1d1d1d;
	transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
	.recruit-jobs__item-icon,
	.recruit-company__item-icon,
	.recruit-before__item-icon {
		transition:
			color 0.2s ease,
			background-color 0.2s ease;
	}

	.recruit-jobs__item:hover .recruit-jobs__item-icon,
	.recruit-jobs__item:focus-visible .recruit-jobs__item-icon,
	.recruit-company__item:hover .recruit-company__item-icon,
	.recruit-company__item:focus-visible .recruit-company__item-icon,
	.recruit-before__item:hover .recruit-before__item-icon,
	.recruit-before__item:focus-visible .recruit-before__item-icon {
		transform: none;
	}
}

/* ==========================================================================
   Responsive: Recruitment Before Applying, 1200px and below
   ========================================================================== */

@media (max-width: 1200px) {
	.recruit-before {
		--recruit-before-side-gutter: min(4.1667vw, 50px);
		--recruit-before-heading-top: clamp(120px, calc(330px - 17.5vw), 190px);
		--recruit-before-number-size: clamp(60px, calc(-20px + 13.3333vw), 140px);
		--recruit-before-title-size: clamp(80px, calc(-20px + 16.6667vw), 180px);
		--recruit-before-illust-width: min(17.8333vw, 214px);
		--recruit-before-lead-top: min(4.5833vw, 55px);
		--recruit-before-lead-title-size: clamp(22px, calc(12px + 1.6667vw), 32px);
		--recruit-before-text-size: clamp(14px, calc(12px + 0.3333vw), 16px);
		--recruit-before-text-top: clamp(12px, calc(10px + 0.3333vw), 14px);
		--recruit-before-list-top: min(2.1667vw, 26px);
		--recruit-before-list-gap-x: min(3.3333vw, 40px);
		--recruit-before-list-gap-y: min(3.3333vw, 40px);
		--recruit-before-label-height: min(3.3333vw, 40px);
		--recruit-before-label-gap: min(0.6667vw, 8px);
		--recruit-before-label-size: min(1.6667vw, 20px);
		--recruit-before-icon-size: min(1.8333vw, 22px);
		--recruit-before-icon-font-size: min(0.75vw, 9px);
	}

	.recruit-before__inner {
		grid-template-columns:
			minmax(100px, 19.1667fr)
			minmax(190px, 25.8333fr)
			minmax(220px, 48.3333fr);
		column-gap: 3.3333%;
	}

	.recruit-before__title {
		margin-top: min(1.6667vw, 20px);
	}
}

/* ==========================================================================
   Responsive: Recruitment Before Applying, 600px and below
   ========================================================================== */

@media (max-width: 600px) {
	.recruit-before {
		--recruit-before-side-gutter: 20px;
		--recruit-before-number-size: 60px;
		--recruit-before-title-size: 80px;
		--recruit-before-illust-width: 184px;
		--recruit-before-lead-top: 30px;
		--recruit-before-lead-title-size: 22px;
		--recruit-before-text-size: 14px;
		--recruit-before-text-top: 12px;
		--recruit-before-list-gap-y: 25px;
		--recruit-before-label-height: 35px;
		--recruit-before-label-gap: 8px;
		--recruit-before-label-size: 16px;
		--recruit-before-icon-size: 18px;
		--recruit-before-icon-font-size: 7px;
	}

	.recruit-before__inner {
		display: block;
		max-width: 500px;
	}

	.recruit-before__heading {
		display: flex;
		align-items: flex-start;
		column-gap: 26px;
		margin-top: 0;
	}

	.recruit-before__title {
		margin-top: 0;
		line-height: 1.0625;
	}

	.recruit-before__title-pc {
		display: none;
	}

	.recruit-before__title-sp {
		display: inline;
	}

	.recruit-before__content {
		display: flex;
		flex-direction: column;
	}

	.recruit-before__lead {
		order: 1;
		margin-top: var(--recruit-before-lead-top);
	}

	.recruit-before__lead-title br {
		display: none;
	}

	.recruit-before__lead-text {
		line-height: 1.6;
	}

	.recruit-before__lead-text br {
		display: none;
	}

	.recruit-before__illust {
		order: 2;
		margin: 40px auto 0;
	}

	.recruit-before__list {
		grid-template-columns: 270px;
		justify-content: center;
		gap: var(--recruit-before-list-gap-y);
		margin-top: 30px;
	}
}

/* ==========================================================================
   Recruitment Actions
   ========================================================================== */

.recruit-actions {
	--recruit-actions-inner-width: 1280px;
	--recruit-actions-side-gutter: 120px;
	--recruit-actions-padding-block: 140px;
	--recruit-actions-gap: 80px;
	--recruit-actions-link-height: 150px;
	--recruit-actions-title-size: 44px;
	--recruit-actions-label-size: 20px;
	--recruit-actions-text-gap: 12px;

	position: relative;
	isolation: isolate;
	padding-block: var(--recruit-actions-padding-block);
	background: url("../images/recruit-bg01.webp") center / cover no-repeat fixed;
}

.recruit-actions::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	content: "";
	background: rgba(0, 31, 70, 0.5);
}

.recruit-actions__inner {
	display: flex;
	justify-content: center;
	gap: var(--recruit-actions-gap);
	width: min(calc(100% - (var(--recruit-actions-side-gutter) * 2)), var(--recruit-actions-inner-width));
	margin-inline: auto;
}

.recruit-actions__link {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	flex-direction: column;
	row-gap: var(--recruit-actions-text-gap);
	min-width: 0;
	max-width: 600px;
	height: var(--recruit-actions-link-height);
	color: #fff;
	text-align: center;
	transition: background-color 0.45s ease;
}

.recruit-actions__link--requirements {
	background: #056db9;
}

.recruit-actions__link--entry {
	background: #e36f9c;
}

.recruit-actions__link--requirements:hover,
.recruit-actions__link--requirements:focus-visible {
	background-color: #045996;
}

.recruit-actions__link--entry:hover,
.recruit-actions__link--entry:focus-visible {
	background-color: #c85f88;
}

.recruit-actions__title {
	font-size: var(--recruit-actions-title-size);
	font-weight: 700;
	line-height: 1.2;
	font-feature-settings: "palt";
}

.recruit-actions__label {
	font-family: var(--font-en);
	font-size: var(--recruit-actions-label-size);
	font-weight: 600;
	line-height: 1.2;
}

/* ========================================================================== 
   Responsive: Recruitment Actions, 1920px and below
   ========================================================================== */

@media (max-width: 1920px) {
	.recruit-actions {
		--recruit-actions-side-gutter: min(6.25vw, 120px);
		--recruit-actions-padding-block: min(7.2917vw, 140px);
		--recruit-actions-gap: min(4.1667vw, 80px);
		--recruit-actions-link-height: min(10.4167vw, 150px);
		--recruit-actions-title-size: min(2.2917vw, 44px);
		--recruit-actions-label-size: min(1.0417vw, 20px);
		--recruit-actions-text-gap: min(0.625vw, 12px);
	}
}

/* ========================================================================== 
   Responsive: Recruitment Actions, 600px and below
   ========================================================================== */

@media (max-width: 600px) {
	.recruit-actions {
		--recruit-actions-inner-width: 500px;
		--recruit-actions-side-gutter: 30px;
		--recruit-actions-padding-block: 60px;
		--recruit-actions-gap: 30px;
		--recruit-actions-link-height: 120px;
		--recruit-actions-title-size: 28px;
		--recruit-actions-label-size: 14px;
		--recruit-actions-text-gap: 8px;
	}

	.recruit-actions__inner {
		flex-direction: column;
	}

	.recruit-actions__link {
		flex: none;
		width: 100%;
	}
}
