@charset "UTF-8";

.page-banner {
	.inner {
		.common-title.type01 {
			padding-bottom: 10rem;

			@media screen and (max-width: 767px) {
				padding-bottom: 6rem !important;
			}
		}
	}
}

#new_grad {
	padding-top: 16rem;
	padding-bottom: 25rem;
	width: 100%;

	@media screen and (max-width: 767px) {
		padding-top: 0;
		padding-bottom: 6rem;
	}

	.gray-container {
		background-color: #f3f5f6;
		width: 100%;
		padding: 16rem;
		margin-bottom: 12rem;
		box-sizing: border-box;
		border-radius: 5rem;

		@media screen and (max-width: 767px) {
			padding: 4rem 2rem;
			margin-bottom: 6rem;
			border-radius: 2rem;
		}

		.table-list {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 5.6rem;

			@media screen and (max-width: 767px) {
				gap: 3rem;
			}

			transition: all 0.3s ease-in;

			& li {
				transition: all 0.3s ease-in;

				.table-button {
					width: 100%;
					height: 9.6rem;
					display: flex;
					align-items: center;
					padding-left: 6.4rem;
					background-color: #fff;
					border: 2px solid #e60012;
					border-radius: 24rem;
					position: relative;
					cursor: pointer;

					@media screen and (max-width: 767px) {
						height: 6rem;
						padding-left: 2rem;
						height: auto;
						padding-top: 1.2rem;
						padding-bottom: 1.2rem;
					}

					.common_h3 {
						line-height: 1;
						margin-bottom: 0;
						@media screen and (max-width: 767px) {
							width: 100%;
							flex: 1;
							padding-right: 4rem;
							box-sizing: border-box;
							line-height: 1.2;
						}
					}

					.arrow {
						position: absolute;
						width: 2.2rem;
						right: 5.3rem;
						top: 50%;
						transition: all 0.3s ease-in-out;
						transform: translateY(-50%);

						@media screen and (max-width: 767px) {
							width: 2rem;
							right: 2rem;
							/* top: 2.2rem; */
							/* transform: unset; */
						}

						& img {
							width: 100%;
							vertical-align: top;
						}
					}
				}

				.table-button.open {
					.arrow {
						transform: scaleY(-1);
					}
				}

				.table-wrapper {
					display: none;
					width: 100%;

					&.open {
						padding-top: 2.4rem;
					}
				}

				& table {
					width: 100%;

					& tr {
						border-bottom: #cccccc 1px solid;

						& th,
						& td {
							padding-top: 3.3rem;
							padding-bottom: 3.3rem;

							@media screen and (max-width: 767px) {
								padding-top: 1.2rem;
								padding-bottom: 1.2rem;
							}
						}

						& th {
							width: 25rem;
							font-family: var(--zen);
							font-style: normal;
							font-weight: 700;
							font-size: 2rem;
							line-height: 150%;
							letter-spacing: 0.1em;
							color: #e60012;
							text-align: left;
							vertical-align: top;

							@media screen and (max-width: 767px) {
								display: block;
								width: 100%;
								font-size: 1.4rem;
							}
						}

						& td {
							width: calc(25rem - 100%);
							font-family: var(--zen);
							font-style: normal;
							font-weight: 500;
							font-size: 1.8rem;
							line-height: 150%;
							letter-spacing: 0.1em;
							color: #000000;

							@media screen and (max-width: 767px) {
								padding-top: 0 !important;
								display: block;
								width: 100%;
								font-size: 1.4rem;
							}
						}
					}
					& tr:last-child {
						& td {
							@media screen and (max-width: 767px) {
								& br {
									display: none;
								}
							}
						}
					}
				}
			}
		}

		.step-container {
			display: flex;
			flex-direction: column;
			gap: 3.2rem;

			@media screen and (max-width: 767px) {
				gap: 4rem;
			}

			.steps {
				display: flex;
				gap: 8.5rem;

				@media screen and (max-width: 767px) {
					gap: 4rem;
					flex-direction: column;
				}

				.step {
					border: #e60012 0.3rem solid;
					border-radius: 1.6rem;
					width: 28.8rem;
					height: 24rem;
					background-color: #fff;
					padding: 3.2rem 1.6rem;
					box-sizing: border-box;
					position: relative;

					@media screen and (max-width: 767px) {
						width: 100%;
						height: 17rem;
					}

					.title {
						font-family: var(--overpass);
						font-style: normal;
						font-weight: 700;
						font-size: 2.4rem;
						line-height: 150%;
						text-align: center;
						letter-spacing: 0.05em;
						text-transform: uppercase;
						color: #e60012;
						margin-bottom: 0.7rem;

						@media screen and (max-width: 767px) {
							font-size: 1.8rem;
						}
					}

					& p {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 700;
						font-size: 2.2rem;
						line-height: 150%;
						text-align: center;
						letter-spacing: 0.05em;
						color: #000000;
						min-height: 13.3rem;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
							min-height: 7rem;
						}
					}
				}

				.step-1 {
					border: #e60012 0.3rem solid;
					border-radius: 1.6rem;
					width: 28.8rem;
					height: 24rem;
					background-color: #fff;
					padding: 3.2rem 1.6rem;
					box-sizing: border-box;
					position: relative;

					@media screen and (max-width: 767px) {
						width: 100%;
						height: 17rem;
					}

					.note,
					& p {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 700;
						font-size: 2.2rem;
						line-height: 150%;
						text-align: center;
						letter-spacing: 0.05em;
						color: #000000;

						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}

					.note {
						margin-top: 3rem;

						@media screen and (max-width: 767px) {
							margin-top: 2rem;
						}
					}
				}
			}

			.steps-row1 {
				.step-1,
				.step {
					&:after {
						content: "";
						position: absolute;
						right: -5.9rem;
						width: 2.1rem;
						height: 5.8rem;
						top: 50%;
						transform: translateY(-50%);
						background: url("../../img/page/new_graduate_recruitment/step-arrow.png") no-repeat center / 100% auto;

						@media screen and (max-width: 767px) {
							right: unset;
							bottom: -4.5rem;
							width: 1.6rem;
							top: unset;
							left: 50%;
							height: 2.8rem;
							transform: rotate(90deg) translateX(-50%);
						}
					}
				}
			}

			.steps-row2 {
				align-self: flex-end;

				@media screen and (max-width: 767px) {
					align-self: unset;
				}

				.step {
					&:after {
						content: "";
						position: absolute;
						left: -5.9rem;
						width: 2.1rem;
						height: 5.8rem;
						top: 50%;
						transform: translateY(-50%);
						background: url("../../img/page/new_graduate_recruitment/step-arrow.png") no-repeat center / 100% auto;

						@media screen and (max-width: 767px) {
							right: unset;
							bottom: -4.5rem;
							width: 1.6rem;
							top: unset;
							left: 50%;
							height: 2.8rem;
							transform: rotate(90deg) translateX(-50%);
						}
					}
				}

				.step:last-child {
					&:after {
						@media screen and (max-width: 767px) {
							display: none;
						}
					}
				}
			}
		}
	}

	#faq {
		.faq-list {
			display: flex;
			flex-direction: column;
			gap: 2.4rem;
			margin-bottom: 4.8rem;

			@media screen and (max-width: 767px) {
				margin-bottom: 4rem;
			}

			.faq {
				padding-bottom: 2.4rem;
				border-bottom: 1px solid #cccccc;

				@media screen and (max-width: 767px) {
					padding-bottom: 2rem;
				}

				.question {
					display: flex;
					gap: 1.6rem;
					width: 100%;
					position: relative;
					cursor: pointer;
					padding-right: 6rem;

					@media screen and (max-width: 767px) {
						gap: 1rem;
						padding-right: 3rem;
						align-items: baseline;
					}

					.q {
						font-family: var(--overpass);
						font-style: normal;
						font-weight: 700;
						font-size: 2.8rem;
						line-height: 110%;
						text-align: center;
						letter-spacing: 0.05em;
						text-transform: uppercase;
						color: #e60012;
						white-space: nowrap;
						@media screen and (max-width: 767px) {
							font-size: 1.8rem;
						}
					}

					& span {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 700;
						font-size: 1.8rem;
						line-height: 2.6rem;
						letter-spacing: 0.2em;
						color: #000000;

						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
							line-height: 1.6;
						}
					}

					.plus {
						position: absolute;
						right: 0;
						top: 0.1rem;
						width: 2.8rem;
						height: 2.8rem;

						@media screen and (max-width: 767px) {
							width: 2rem;
							height: 2rem;
						}

						&:before,
						&:after {
							content: "";
							position: absolute;
							left: 50%;
							top: 50%;
							width: 2.8rem;
							height: 0.3rem;
							background-color: #e60012;
							transform: translate(-50%, -50%);

							@media screen and (max-width: 767px) {
								width: 2rem;
								height: 0.2rem;
							}
						}

						&:before {
							transform: translate(-50%, -50%);
						}

						&:after {
							transform: translate(-50%, -50%) rotate(90deg);
							transition: all 0.3s ease-in;
						}
					}
				}

				.answer {
					display: grid;
					grid-template-rows: 0fr;
					transition: grid-template-rows 0.3s ease-out;
				}

				.answer-inner {
					overflow: hidden;
					display: flex;
					gap: 1.6rem;
					padding-right: 6rem;
					padding-top: 2.6rem;
					opacity: 0;
					margin-top: 0;
					min-height: 0;
					transition: opacity 0.3s ease-out;

					@media screen and (max-width: 767px) {
						gap: 1rem;
						align-items: baseline;
						padding-right: 0;
						padding-top: 2rem;
					}

					.a {
						font-family: var(--overpass);
						font-style: normal;
						font-weight: 700;
						font-size: 2.8rem;
						line-height: 110%;
						letter-spacing: 0.05em;
						text-transform: uppercase;
						color: #000000;
						white-space: nowrap;
						@media screen and (max-width: 767px) {
							font-size: 1.8rem;
						}
					}

					& span {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 500;
						font-size: 1.8rem;
						line-height: 2.6rem;
						letter-spacing: 0.2em;
						color: #000000;

						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
							line-height: 1.6;
						}
					}
				}
			}

			.faq.open {
				.question {
					.plus {
						&:after {
							transform: translate(-50%, -50%) rotate(0) !important;
							opacity: 0;
						}
					}
				}

				.answer {
					grid-template-rows: 1fr;
				}

				.answer-inner {
					opacity: 1;
				}
			}
		}
	}
}

.common_h3 {
	margin-bottom: 3rem;
	@media screen and (max-width: 767px) {
		margin-bottom: 2rem;
	}
}