#page-recruit {
	.recruit_header {
		background-image: url("../images/recruit/header.webp");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		aspect-ratio: 1443 / 868;
		box-sizing: border-box;
		padding-inline: 1em;
		.wrap {
			max-width: 92vw;
			margin-inline: auto;
			box-sizing: border-box;
			padding-right: 40%;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			align-items: flex-start;
			height: 100%;
			gap: 2em;
		}
		.title {
			font-size: 4vw;
			margin: 0;
		}
		.text {
			font-size: 1.3vw;
			line-height: 1.8em;
			margin: 0;
		}
	}
	#section-charm {
		.section_title-charm {
			text-align: center;
			color: var(--accent_color2);
			font-size: calc(48 * var(--px));
			letter-spacing: 0.2em;
			rt {
				margin-bottom: -1em;
			}
		}
		.charm_point {
			max-width: var(--content_width);
			margin-inline: auto;
			padding-inline: 1em;
			display: flex;
			flex-direction: column;
			gap: 1em;
			color: #fff;
			section {
				flex: 1;
				display: flex;
				gap: 1px;
				&::before {
					content: 'The charm of working at our company.';
					writing-mode: vertical-lr;
					background-color: #8CB4FF;
					padding: 2em;
					border-radius: 1em 0.3em 0.3em 1em;
					font-weight: bold;
				}
				&:nth-of-type(2n) {
					&::before {
						background-color: #6C80A6;
					}
					.content {
						background-color: #6C80A6;
					}
				}
				&:nth-of-type(2) {
					.content::before {
						content: "02";
					}
				}
				&:nth-of-type(3) {
					.content::before {
						content: "03";
					}
				}
			}
			.content {
				display: flex;
				gap: 2em;
				background-color: #8CB4FF;
				padding: 2em;
				border-radius: 0.3em 1em 1em 0.3em;
				position: relative;
				overflow: hidden;
				&::before {
					position: absolute;
					left: 0.25em;
					bottom: 0;
					opacity: 0.4;
					content: '01';
					font-size: calc(130 * var(--px));
					font-family: "Jost";
					font-weight: 500;
					line-height: 0.7em;
				}
			}
			.text {
				flex: 1;
				position: relative;
				z-index: 2;
			}
			.image {
				margin: 0;
				flex: 1;
				img {
					width: 100%;
					height: auto;
				}
			}
			.title {
				font-size: calc(32 * var(--px));
				margin-top: 0;
				border-bottom: 1px dotted #fff;
				padding-bottom: 1em;
			}
			.description {
				line-height: 1.8em;
			}
		}
	}
	.section_title {
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		.en {
			font-size: calc(48 * var(--px));
			color: var(--accent_color2);
			font-family: "Jost";
			font-weight: 500;
			margin: 0;
		}
		.jp {
			font-size: calc(16 * var(--px));
			margin: 0;
		}
	}
	#section-description {
		margin-top: 5em;
		background-image: url("../images/recruit/description-bg.svg");
		padding: 5em 1em;
		background-size: 100%;
		background-position: left center;
		background-repeat: no-repeat;
		.content {
			display: flex;
			gap: 1em;
			margin-top: 3em;
			max-width: var(--content_width);
			margin-inline: auto;
		}
		section {
			flex: 1;
		}
		a {
			background-color: #fff;
			border: 1px solid #4F5B9E;
			border-radius: 0.5em;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			box-sizing: border-box;
			padding: 2em;
			text-decoration: none;
			color: #000;
			box-shadow: 4px 4px 6px 0 rgba(0,0,0,0.25);
			&::after {
				width: 2.5em;
				height: 2.5em;
				background-color: #4F5B9E;
				border-radius: 50%;
				content: "▶";
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: auto;
				margin-top: 0.5em;
			}
		}
		.text_wrap {
			display: flex;
			flex-direction: column;
			gap: 1em;
		}
		.title {
			margin: 0;
			text-align: center;
			font-size: calc(24 * var(--px));
		}
		.text {
			margin: 0;
			line-height: 1.8em;
		}
	}
	#section-benefits {
		margin-top: 5em;
		padding-inline: 1em;
		ul {
			list-style-type: none;
			padding-left: 0;
			margin-top: 3em;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 2em;
			max-width: var(--content_width);
			margin-inline: auto;
		}
		li {
			display: flex;
			align-items: center;
			gap: 1em;
		}
		.image {
			flex: 1;
			margin: 0;
			img {
				width: 100%;
				height: auto;
			}
		}
		.name {
			margin: 0;
			flex: 1.5;
		}
	}
	#section-voice {
		margin-top: 5em;
		background-image: url("../images/recruit/voice-bg.svg");
		padding: 5em 1em;
		background-size: 100%;
		background-position: right center;
		background-repeat: no-repeat;
		ul {
			margin-inline: auto;
			max-width: var(--content_width);
			list-style-type: none;
			padding-left: 0;
			margin-top: 3em;
			display: flex;
			gap: 2em 2%;
			justify-content: center;
			flex-wrap: wrap;
		}
		li {
			width: 32%;
			background-color: #fff;
			border: 1px solid #4F5B9E;
			border-radius: 0.5em;
			display: flex;
			gap: 1em;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 2em;
			text-decoration: none;
			color: #000;
			box-shadow: 4px 4px 6px 0 rgba(0,0,0,0.25);
		}
		.image {
			width: 7.5em;
			height: 7.5em;
			margin: 0;
			margin-inline: auto;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.name {
			margin: 0;
			text-align: center;
			font-size: calc(24 * var(--px));
		}
		.text {
			margin: 0;
			line-height: 1.8em;
		}
	}
	#section-culture {
		background-image: url("../images/recruit/culture-bg.avif");
		padding: 5em 1em;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(1, 78, 152, 0.6);
		}
		.wrap {
			position: relative;
			z-index: 2;
			max-width: var(--content_width);
			margin-inline: auto;
		}
		.section_title {
			text-align: left;
			.jp {
				color: #fff;
			}
			.en {
				color: #fff;
			}
		}
		.points {
			color: #fff;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 0.5em;
			list-style-type: none;
			padding-left: 0;
			margin-top: 3em;
			li {
				display: flex;
				align-items: center;
				padding: 0 0.5em;
				box-sizing: border-box;
				min-height: 3.5em;
				border: 1px solid #fff;
				border-radius: 9999px;
				gap: 0.5em;
				&::before {
					content: '';
					width: 2em;
					height: 2em;
					background-color: #FBB03B;
					background-image: url("../images/recruit/culture-point.svg");
					background-size: 1em 1em;
					background-repeat: no-repeat;
					background-position: center;
					border-radius: 50%;
				}
			}
		}
		.person {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			gap: 2em;
			color: #fff;
			margin-top: 2em;
			.title {
				font-size: calc(36 * var(--px));
				padding-bottom: 0.5em;
				border-bottom: 1px solid #fff;
				padding-right: 1em;
				margin: 0;
			}
			ul {
				list-style-type: none;
				padding-left: 0;
				display: flex;
				flex-direction: column;
				gap: 1em;
				margin: 0;
			}
			li {
				font-size: calc(28 * var(--px));
				font-weight: bold;
				display: flex;
				align-items: center;
				gap: 0.1em;
				&::before {
					content: '';
					width: 1em;
					height: 1em;
					background-image: url("../images/recruit/culture-check.svg");
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
				}
				span {
					flex: 1;
				}
			}
		}
	}
	.entry_form {
		background-color: #5F8AC0;
		padding: 3em 1em;
		.wrap {
			max-width: 950px;
			margin-inline: auto;
			display: flex;
			color: #fff;
			gap: 3em;
		}
		.section_title {
			text-align: left;
			.en {
				color: #fff;
			}
			.jp {
				color: #fff;
			}
		}
		.intro {
			flex: 1;
			.text {
				line-height: 1.8em;
			}
		}
		.intro, .entry_link {
			padding-top: 1em;
			padding-bottom: 1em;
		}
		.entry_link {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 2em;
			padding-left: 3em;
			box-sizing: border-box;
			border-left: 4px solid #fff;
			section {
				display: flex;
				flex-direction: column;
				gap: 0.5em;
				text-align: center;
			}
			.title {
				font-size: calc(16 * var(--px));
				margin: 0;
			}
			.link {
				margin: 0;
				a {
					color: #fff;
					text-decoration: none;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.tel {
			.link {
				font-size: calc(55 * var(--px));
				font-weight: bold;
				a {
					&::before {
						content: '';
						width: 1em;
						height: 1em;
						background-image: url("../images/recruit/entry-phone.svg");
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
					}
				}
			}
		}
		.mail {
			.link {
				display: flex;
				padding: 0.5em 1em;
				border: 1px solid #fff;
				font-size: calc(24 * var(--px));
				gap: 0.5em;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				&::before {
					content: '';
					width: 1em;
					height: 1em;
					background-image: url("../images/recruit/entry-mail.svg");
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
				}
			}
		}
	}
	#section-faq {
		background-color: #E7F1F7;
		padding: 5em 1em;
		.questions {
			max-width: 924px;
			margin-inline: auto;
			display: flex;
			flex-direction: column;
			gap: 1em;
			margin-top: 2em;
		}
		section {
			background-color: #F9F6F0;
			padding: 1em;
			display: flex;
			flex-direction: column;
			gap: 1em;
		}
		.question {
			margin: 0;
			font-size: calc(20 * var(--px));
			display: flex;
			gap: 1em;
			line-height: 1.8em;
			&::before {
				content: 'Q';
			}
		}
		.answer {
			margin: 0;
			display: flex;
			gap: 1em;
			line-height: 1.8em;
			&::before {
				content: 'A';
				color: #F7414D;
				font-weight: bold;
			}
		}
	}
}

footer {
	margin-top: 0;
}