@charset "UTF-8";

.story-title {
	margin-bottom: 2.7rem;
	font-style: normal;
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 1;
	letter-spacing: 0.08em;
	color: #0d2d74;
	background: #e2f3ff;
	display: block;
	padding: 0.6rem 1.4rem 0.6rem 2.4rem;
	box-sizing: border-box;
	position: relative;
	@media screen and (max-width: 767px) {
		margin-bottom: 2rem;
		font-size: 1.8rem;
		padding: 0.6rem 1.4rem 0.6rem 2rem;
	}
	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 0.8rem;
		background-color: #0d2d74;
		@media screen and (max-width: 767px) {
			width: 0.6rem;
		}
	}
}

#candidate {
	padding-top: 7rem;
	padding-bottom: 11rem;
	@media screen and (max-width: 767px) {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
	.content-flex {
		width: 100%;
		display: flex;
		/* align-items: flex-end; */
		gap: 9.5rem;
		@media screen and (max-width: 767px) {
			gap: 1.4rem;
			flex-direction: column;
		}
		.text-contents {
			width: 58.9rem;
			@media screen and (max-width: 767px) {
				width: 100%;
			}
			.text-list {
				display: flex;
				flex-direction: column;
				gap: 4.5rem;
				@media screen and (max-width: 767px) {
					gap: 1rem;
				}
				.block {
					.label {
						font-style: normal;
						font-weight: 700;
						font-size: 2.4rem;
						line-height: 1;
						letter-spacing: 0.06em;
						font-feature-settings: "palt" on;
						color: #ffffff;
						background-color: #336ceb;
						padding: 0.9rem 1.6rem;
						box-sizing: border-box;
						border-radius: 2.1rem;
						margin-bottom: 2rem;
						display: table;
						@media screen and (max-width: 767px) {
							padding: 0.6rem 1rem;
							font-size: 1.4rem;
							margin-bottom: 1rem;
						}
					}
					.block-title {
						font-style: normal;
						font-weight: 700;
						font-size: 2.6rem;
						line-height: 1.2;
						letter-spacing: 0.06em;
						font-feature-settings: "palt" on;
						color: #0d2d74;
						margin-bottom: 2rem;
						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
							margin-bottom: 1rem;
							line-height: 1.5;
						}
					}
					.description {
						font-style: normal;
						font-weight: 400;
						font-size: 1.8rem;
						line-height: 178%;
						letter-spacing: 0.06em;
						font-feature-settings: "palt" on;
						color: #000000;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
							line-height: 162%;
						}
					}
				}
			}
		}
		.img-contents {
			width: 51.7rem;
			@media screen and (max-width: 767px) {
				width: 100%;
			}
			& img {
				width: 100%;
				vertical-align: bottom;
			}
		}
	}
}

#guidelines {
	.company-info-table {
		width: 100%;
		& table {
			width: 100%;
			border: #cecece 1px solid;
			margin-bottom: 10rem;
			@media screen and (max-width: 767px) {
				margin-bottom: 6rem;
			}
			& tr {
				border-bottom: #cecece 1px solid;
				& th {
					font-style: normal;
					font-weight: 700;
					font-size: 1.8rem;
					line-height: 1;
					text-align: center;
					letter-spacing: 0.08em;
					color: #ffffff;
					background-color: #0d2d74;
					padding-top: 2.1rem;
					padding-bottom: 2.1rem;
					width: 27.1rem;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
						padding-top: 1.2rem;
						padding-bottom: 1.2rem;
						width: 100%;
						display: block;
						text-align: left;
						padding-left: 2rem;
					}
				}
				& td {
					background-color: #fff;
					width: calc(100% - 27.1rem);
					padding-left: 4rem;
					box-sizing: border-box;
					font-style: normal;
					font-weight: 400;
					font-size: 1.6rem;
					line-height: 162%;
					letter-spacing: 0.08em;
					color: #000000;
					padding-top: 1.7rem;
					padding-bottom: 1.7rem;
					@media screen and (max-width: 767px) {
						width: 100%;
						font-size: 1.4rem;
						padding-top: 1.2rem;
						padding-bottom: 1.2rem;
						width: 100%;
						display: block;
						padding-left: 2rem;
						padding-right: 2rem;
					}
				}
			}
		}
	}
}

#selection {
	padding-bottom: 11rem;
	@media screen and (max-width: 767px) {
		padding-bottom: 6rem;
	}
	.flex-steps {
		width: 100%;
		display: flex;
		gap: 8rem;
		margin-bottom: 8.1rem;
		@media screen and (max-width: 767px) {
			gap: 6rem;
			margin-bottom: 4rem;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.step {
			width: 100%;
			flex: 1;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			@media screen and (max-width: 767px) {
				max-width: 22rem;
			}
			&::after {
				position: absolute;
				content: "";
				right: -5.5rem;
				top: 10.3rem;
				width: 2.2rem;
				height: 2.6rem;
				background: url("../../img/page/application/arrow-step.png") no-repeat center / contain;
				@media screen and (max-width: 767px) {
					right: unset;
					top: unset;
					bottom: -4rem;
					left: 50%;
					transform: translateX(-50%) rotate(90deg);
					width: 2rem;
					height: 2.4rem;
				}
			}
			.step-thumbnail {
				width: 100%;
				margin-bottom: 2.4rem;
				@media screen and (max-width: 767px) {
					margin-bottom: 1rem;
				}
				& img {
					width: 100%;
					vertical-align: top;
				}
			}
			.text {
				.blue-text {
					font-style: normal;
					font-weight: 700;
					font-size: 2rem;
					line-height: 1;
					text-align: center;
					letter-spacing: 0.08em;
					font-feature-settings: "palt" on;
					color: #0d2d74;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
					}
				}
				.black-text {
					margin-top: 1.8rem;
					font-style: normal;
					font-weight: 500;
					font-size: 1.6rem;
					line-height: 112%;
					text-align: center;
					letter-spacing: 0.08em;
					font-feature-settings: "palt" on;
					color: #000000;
					@media screen and (max-width: 767px) {
						margin-top: 1rem;
						font-size: 1.4rem;
					}
				}
				.yellow-highlight {
					display: flex;
					flex-direction: column;
					align-items: center;
					& span {
						font-style: normal;
						font-weight: 700;
						font-size: 2.2rem;
						line-height: 127%;
						text-align: center;
						letter-spacing: 0.08em;
						font-feature-settings: "palt" on;
						color: #0d2d74;
						position: relative;
						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
						}
						&::before {
							content: "";
							position: absolute;
							z-index: -1;
							width: 100%;
							height: 1.9rem;
							left: 0;
							bottom: 0;
							background-color: #ffe07b;
							@media screen and (max-width: 767px) {
								height: 1.2rem;
							}
						}
					}
				}
			}
		}
		.step:last-child {
			&::after {
				display: none;
			}
		}
	}
	.contact-card {
		display: block;
		width: 65.3rem;
		margin: 0 auto;
		transition: all 0.3s ease-in;
		&:hover {
			opacity: 0.75;
		}
		@media screen and (max-width: 767px) {
			width: 100%;
		}
		& img {
			width: 100%;
			vertical-align: top;
		}
	}
}