@charset "UTF-8";

#anchor1,
#anchor2,
#anchor3 {
	scroll-margin-top: 100px;
	@media screen and (max-width:767px){
	scroll-margin-top: 50px;
	}
}


.page_title_top {
	&::after {
		background-image: url("../../img/page/job/banner.png");
	}
	.common-title.type01 {
		max-width: 52rem;
	}
}

#contents {
	padding-bottom: 10rem;
	@media screen and (max-width: 767px) {
		padding-bottom: 0rem;
	}
}

.block {
	padding-bottom: 10rem;
	@media screen and (max-width: 767px) {
		padding-bottom: 6rem;
	}
	.main-description {
		font-family: "Noto Sans JP", sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 1.8rem;
		line-height: 1.56;
		text-align: center;
		letter-spacing: 0.08em;
		font-feature-settings: "palt" on;
		color: #000000;
		margin-bottom: 4rem;
		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			margin-bottom: 2rem;
		}
	}
	.common-btn-blue {
		margin: 0 auto 5rem;
		@media screen and (max-width: 767px) {
			margin: 0 auto 2rem;
		}
	}
	.main-img {
		width: 100%;
		margin-bottom: 8rem;
		@media screen and (max-width: 767px) {
			margin-bottom: 4rem;
		}
		& img {
			width: 100%;
		}
	}
	.blue-card {
		background-color: #f0f6fa;
		width: 100%;
		border-radius: 2rem;
		padding: 6rem 5.8rem;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		margin-bottom: 9rem;
		@media screen and (max-width: 767px) {
			padding: 3rem 2rem;
			margin-bottom: 4rem;
		}
		&::before {
			content: "";
			position: absolute;
			top: 7.5rem;
			left: 50%;
			transform: translateX(-50%);
			width: calc(100% - 11.6rem);
			height: 0.2rem;
			background-color: #267bca;
			z-index: 0;
			@media screen and (max-width: 767px) {
				width: calc(100% - 4rem);
				top: 4rem;
			}
		}

		.card-title {
			background-color: #f0f6fa;
			display: table;
			font-family: "Zen Kaku Gothic New", sans-serif;
			font-style: normal;
			font-weight: 700;
			font-size: 3rem;
			line-height: 1;
			letter-spacing: 0.08em;
			color: #267bca;
			margin: 0 auto 3rem;
			position: relative;
			text-align: center;
			padding: 0 2.6rem 0 2.8rem;
			box-sizing: border-box;
			z-index: 2;
			@media screen and (max-width: 767px) {
				font-size: 1.8rem;
				padding: 0 1rem;
				margin: 0 auto 2rem;
			}
		}
		.flex-wrap {
			display: flex;
			flex-wrap: wrap;
			gap: 4rem;
			justify-content: center;
			.card {
				width: 33.4rem;
				.thumbnail {
					width: 100%;
					margin-bottom: 2.6rem;
					@media screen and (max-width: 767px) {
						margin-bottom: 1rem;
					}
					& img {
						width: 100%;
					}
				}
				.title {
					font-family: "Noto Sans JP", sans-serif;
					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: #267bca;
					margin-bottom: 1.8rem;
					@media screen and (max-width: 767px) {
						font-size: 1.6rem;
						margin-bottom: 1rem;
					}
				}
				.description {
					font-family: "Noto Sans JP", sans-serif;
					font-style: normal;
					font-weight: 400;
					font-size: 1.6rem;
					line-height: 1.62;
					letter-spacing: 0.08em;
					font-feature-settings: "palt" on;
					color: #000000;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
					}
				}
			}
		}
		.flex-wrap.pairs {
			max-width: 71rem;
			margin: 0 auto;
		}
		.white-pill {
			width: 100%;
			max-width: 100rem;
			background-color: #ffffff;
			border-radius: 9.35rem;
			padding: 3.4rem 9.5rem;
			box-sizing: border-box;
			margin: 5rem auto 0;
			@media screen and (max-width: 767px) {
				padding: 3rem 2rem;
				margin: 2rem auto 0;
				border-radius: 2rem;
			}
			.title {
				font-family: "Noto Sans JP", sans-serif;
				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: #267bca;
				margin-bottom: 2rem;
				@media screen and (max-width: 767px) {
					font-size: 1.6rem;
					margin-bottom: 1rem;
				}
			}
			.description {
				font-family: "Noto Sans JP", sans-serif;
				font-style: normal;
				font-weight: 400;
				font-size: 1.6rem;
				line-height: 1.62;
				letter-spacing: 0.08em;
				font-feature-settings: "palt" on;
				color: #000000;
			}
		}
	}
	.open-and-close-contents {
		.open-and-close-block {
			margin-bottom: 10rem;
			@media screen and (max-width: 767px) {
				margin-bottom: 4rem;
			}
			.open-btn {
				cursor: pointer;
				width: 100%;
				background-color: #267bca;
				border-radius: 3.1rem;
				height: 6.2rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 4rem;
				padding-right: 2.4rem;
				@media screen and (max-width: 767px) {
					padding-left: 2rem;
					padding-right: 2rem;
				}
				& span {
					font-family: "Noto Sans JP", sans-serif;
					font-style: normal;
					font-weight: 700;
					font-size: 2rem;
					line-height: 1;
					display: flex;
					align-items: center;
					color: #ffffff;
					@media screen and (max-width: 767px) {
						font-size: 1.5rem;
						line-height: 1.2;
					}
				}
				& img {
					width: 1.9rem;
					transform: rotate(-180deg);
					@media screen and (max-width: 767px) {
						width: 1.2rem;
					}
				}
			}
			.content {
				display: none;
				padding-top: 5.3rem;
				@media screen and (max-width: 767px) {
					padding-top: 2rem;
				}
				.chart-wrapper {
					width: 100%;
					max-width: 90.2rem;
					margin: 0 auto;
					& img {
						width: 100%;
					}
				}
				.bubble {
					background-color: #f0f6fa;
					border-radius: 2rem;
					padding: 2.3rem 6.95rem;
					box-sizing: border-box;
					position: relative;
					font-family: "Noto Sans JP", sans-serif;
					font-style: normal;
					font-weight: 400;
					font-size: 1.6rem;
					line-height: 1.62;
					letter-spacing: 0.08em;
					font-feature-settings: "palt" on;
					color: #000000;
					width: 100%;
					max-width: 90.2rem;
					margin: 4.7rem auto 10rem;
					@media screen and (max-width: 767px) {
						margin: 4.7rem auto 6rem;
						padding: 2.3rem 2rem;
						font-size: 1.4rem;
						margin: 3rem auto;
					}
					&::before {
						content: "";
						position: absolute;
						top: -2rem;
						left: 50%;
						transform: translateX(-50%);
						width: 0;
						height: 0;
						border-left: 1.8rem solid transparent;
						border-right: 1.8rem solid transparent;
						border-bottom: 3.6rem solid #f0f6fa;
						@media screen and (max-width: 767px) {
							top: -1.4rem;
						}
					}
				}
				.schedule {
					width: 100%;
					display: flex;
					@media screen and (max-width: 767px) {
						flex-direction: column;
					}
					.time {
						width: 12rem;
						position: relative;
						font-family: "Poppins", sans-serif;
						font-style: normal;
						font-weight: 700;
						font-size: 2.6rem;
						line-height: 1;
						letter-spacing: 0.08em;
						text-transform: capitalize;
						color: #267bca;
						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
							margin-bottom: 1rem;
							width: 100%;
						}
						&::before {
							content: "";
							position: absolute;
							top: 0.8rem;
							right: 0;
							width: 0.2rem;
							height: 100%;
							background-color: #267bca;
							@media screen and (max-width: 767px) {
								display: none;
							}
						}
						&::after {
							content: "";
							position: absolute;
							top: 0.8rem;
							right: -0.5rem;
							width: 1.2rem;
							height: 1.2rem;
							border-radius: 1.2rem;
							background-color: #267bca;
							@media screen and (max-width: 767px) {
								display: none;
							}
						}
					}
					.flex-block {
						padding-left: 7.6rem;
						display: flex;
						gap: 6.2rem;
						@media screen and (max-width: 767px) {
							padding-left: 0;
							gap: 1rem;
							flex-direction: column;
						}
						.text-contents {
							width: 60.1rem;
							@media screen and (max-width: 767px) {
								width: 100%;
							}
							.title {
								margin-bottom: 1.6rem;
								font-family: "Noto Sans JP", sans-serif;
								font-style: normal;
								font-weight: 700;
								font-size: 2rem;
								line-height: 1;
								letter-spacing: 0.08em;
								font-feature-settings: "palt" on;
								color: #000000;
								@media screen and (max-width: 767px) {
									margin-bottom: 1rem;
									font-size: 1.6rem;
								}
							}
							.description {
								font-family: "Noto Sans JP", sans-serif;
								font-style: normal;
								font-weight: 400;
								font-size: 1.6rem;
								line-height: 1.62;
								letter-spacing: 0.08em;
								font-feature-settings: "palt" on;
								color: #000000;
								@media screen and (max-width: 767px) {
									font-size: 1.4rem;
								}
							}
						}
						.img-contents {
							width: 34.2rem;
							min-height: 16rem;
							padding-bottom: 4rem;
							flex: 1;
							@media screen and (max-width: 767px) {
								width: 100%;
								padding-bottom: 3rem;
								min-height: unset;
							}
							& img {
								width: 100%;
							}
						}
					}
				}
				.schedule:last-child {
					.time {
						&::before {
							display: none;
						}
					}
					.img-contents {
						padding-bottom: 0;
					}
				}
			}
		}
		.open-and-close-block.open {
			.content {
				display: block;
			}

			.open-btn {
				& img {
					transform: rotate(0);
				}
			}
		}
		.open-and-close-block:last-child {
			margin-bottom: 0;
		}
	}
}