.logo__link {
	color: #ffff;
}
.header__list-link {
	color: #ffff;
}
.recruit {
	display: flex;
	align-items: flex-end;
	position: relative;
	background: url(./images/recruit-bg.png) no-repeat center bottom;
	background-size: cover;
	aspect-ratio: 16 / 9;
	padding-inline: clamp(1.25rem, 6cqi, 3.75rem);
	container: recruit / inline-size;

	.info {
		transform: translateY(-5cqi);

		h1 {
			font-size: clamp(2.5rem, 4.125vw, 5rem);
			color: #c7c7cc;
			margin-block-end: 1.5cqi;
		}

		p {
			font-size: min(3.75vw, 1.5rem);
		}
	}
}

.page-down {
	width: 12.5rem;
	height: 12.5rem;
	position: absolute;
	bottom: 1.75cqi;

	&.right {
		right: 3.75rem;
	}

	&.left {
		left: 7.5rem;
	}
}

.message {
	padding-block: 10rem;
	padding-inline: 12.3125rem;
	aspect-ratio: 16 / 9;
	background: linear-gradient(
			to bottom,
			rgba(37, 51, 41, 0) 0,
			rgba(37, 51, 41, 1) 92%,
			rgba(37, 51, 41, 1) 92%,
			rgba(37, 51, 41, 1) 92% 100%
		),
		url(./images/recruit-bg2.jpg) center bottom no-repeat;
	background-size: cover;

	.header {
		margin-block-end: 4rem;

		h5 {
			display: flex;
			align-items: center;
			gap: 0.75rem;

			&::before {
				content: "";
				display: inline-block;
				height: 0.5px;
				width: 1.5rem;
				background-color: var(--white);
			}
		}

		h1 {
			font-size: clamp(2rem, 12.125vw, 6.25rem);
			font-weight: 700;
			color: #c7c7cc;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;

		p {
			line-height: 1.8;
		}
	}
}

.attraction {
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 16 / 9;
	background: url(./images/recruit-bg-1.png) no-repeat right bottom;
	background-size: contain;

	.container {
		max-width: 46.875rem;

		.header {
			margin-block-end: 4rem;

			h5 {
				display: flex;
				align-items: center;
				gap: 0.75rem;

				&::before {
					content: "";
					display: inline-block;
					height: 0.5px;
					width: 1.5rem;
					background-color: var(--white);
				}
			}

			h1 {
				font-size: clamp(2rem, 12.125vw, 6.25rem);
				font-weight: 700;
				color: #525f56;
			}
		}
	}
}

.process {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #242725;
	padding-inline-start: 7.5rem;
	padding-inline-end: 3.75rem;

	& > div {
		max-height: 48.9375rem;
		overflow: hidden;
	}

	.left {
		max-width: 36.5625rem;

		.header {
			margin-block-end: 4rem;

			h5 {
				display: flex;
				align-items: center;
				gap: 0.75rem;

				&::before {
					content: "";
					display: inline-block;
					height: 0.5px;
					width: 1.5rem;
					background-color: var(--white);
				}
			}

			h1 {
				font-size: clamp(2rem, 12.125vw, 6.25rem);
				font-weight: 700;
				color: #525f56;
			}
		}

		.content {
			p {
				margin-block-end: 4rem;
			}

			a {
				color: var(--white);
			}
		}
	}

	.right {
		display: flex;
		justify-content: space-between;
		max-width: 37.1875rem;
		gap: 1.2rem;

		.slider {
			width: 100%;
			height: 48.9375rem;

			.swiper-wrapper {
				transition: transform 2s linear;

				.swiper-slide {
					max-height: 12rem;
				}
			}
		}

		.slider-sp {
			display: none;

			.swiper-wrapper {
				transition: transform 2s linear;
			}
		}
	}
}

.requirements {
	padding: 7.5rem;

	.header {
		margin-block-end: 4rem;

		h5 {
			display: flex;
			align-items: center;
			gap: 0.75rem;

			&::before {
				content: "";
				display: inline-block;
				height: 0.5px;
				width: 1.5rem;
				background-color: var(--white);
			}
		}

		h1 {
			font-size: clamp(2rem, 12.125vw, 6.25rem);
			font-weight: 700;
			color: #525f56;
		}
	}

	.content {
		.table-container {
			background-color: var(--white);
			padding-inline: 7.5rem;
			padding-block: 4rem;
			margin-block-end: 4rem;

			table {
				width: 100%;
				border-collapse: collapse;

				tr {
					&:not(:last-of-type) {
						border-bottom: 1px solid #838383;
					}

					&:first-child > * {
						padding-block-start: 0;
					}

					&:last-child > * {
						padding-block-end: 0;
					}

					& > * {
						padding-block: 2rem;
					}

					th {
						color: var(--black);
						text-align: left;
					}

					td {
						color: var(--black);
					}
				}
			}
		}

		.btn-container {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-block-end: 7.5rem;
		}
	}
}

.wrapper {
	background: linear-gradient(40deg, #424f45 6%, #1e2f23 97%);
}

@media screen and (max-width: 769px) {
    p {
        line-height: 1.8!important;
    }
	.recruit,
	.message {
		aspect-ratio: 1 / .8;
	}
	.info {
		transform: translateY(-60cqi) !important;
	}
	.message,
	.attraction,
	.requirements {
		padding-block: 4rem !important;
		padding-inline: 1.25rem !important;
	}
	.page-down {
		width: 8.75rem;
		height: 8.75rem;

		&.right {
			right: 6cqi;
		}
	}
	.attraction,
	.process {
		background: none;
	}
	.process {
		display: block;
		padding-block: 4rem !important;
		padding-inline: 0;

		.left {
            max-width: initial;
			padding-inline: 1.25rem;

			a {
				margin-inline: auto;
				margin-block-end: 2.5rem;
			}
		}
		.right {
            max-width: initial;
			flex-direction: column;

			.slider {
				display: none;
			}
			.slider-sp {
				display: block;

				.swiper-slide {
					width: calc((100% / 4) + 5vw);
					aspect-ratio: 1 / 1;
				}
			}
		}
	}
	.requirements {
		.table-container {
			padding-inline: 1.25rem !important;

			th {
				width: 40%;
			}
			th,
			td {
				vertical-align: top;
			}
		}
	}
	.contacts {
		padding-block-end: 0 !important;

		.image-container {
			aspect-ratio: 1 / 0.5;
		}
	}
}

@media (width = 768px) {
    .recruit,
	.message {
		aspect-ratio: 1 / 1.45;
	}
}

@media screen and (max-width: 426px) {
    .recruit,
	.message {
		aspect-ratio: 1 / 1.45;
	}
}

@media screen and (max-width: 376px) {
    .recruit,
	.message {
		aspect-ratio: 1 / 1.65;
	}
}

@media screen and (max-width: 321px) {
    .recruit,
	.message {
		aspect-ratio: 1 / 1.85;
	}
}