@charset "UTF-8";

:root {
	--colorBk: #000;
	--colorWh: #fff;
	--colorNv: #343399;
}

body.recruit.index {
	#lnavi {
		padding: 100px 0;
		ul {
			padding: 0 6%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			li {
				width: calc(25% - 7%);
				margin: 0 7% 20px 0;
				a {
					color: var(--colorNv);
					text-decoration: none;
					padding: 10px 0;
					display: block;
					position: relative;
					&::before {
						content: "";
						width: 100%;
						height: 2px;
						background: var(--colorNv);
						position: absolute;
						bottom: 0;
						left: 0;
					}
					&::after {
						content: "";
						width: 0;
						height: 0;
						border-style: solid;
						border-width: 10px 0px 0px 20px;
						border-color: transparent transparent transparent var(--colorNv);
						display: inline-block;
						position: absolute;
						bottom: 0;
						right: -2px;
					}
				}
			}
		}
	}
	#sec1 {
		min-width: 1280px;
		background: url(../images/recruit/sec1_bg_01.jpg) no-repeat left top/100vw auto, linear-gradient(to bottom, #e7f5ff 0%,#cae9fb 100%);
		padding: 110px 0 120px;
		#message, #work, #voice, #day, #benefits {
			.subContents {
				border-bottom: solid 1px #c3e0f7;
				margin-bottom: 110px;
				padding-bottom: 110px;
			}
		}
		#message {
			.bl1 {
				.box {
					display: flex;
					justify-content: space-between;
					.fig {
						width: 50%;
						img {
							width: 100%;
						}
					}
					.text {
						width: 45%;
						p {
							margin-bottom: 1em;
						}
					}
				}
			}
		}
		#work {
			.bl1 {
				ol {
					display: flex;
					justify-content: space-between;
					> li {
						width: calc(calc(100% - 40px) / 2);
						background: #fff;
						border-radius: 20px;
						padding: 30px;
						.fig {
							width: 100%;
							img {
								width: 100%;
							}
						}
						.text {
							color: #636363;
							border-bottom: solid 1px #b9b9b9;
							margin-bottom: 20px;
							padding-bottom: 20px;
						}
					}
				}
			}
		}
		#voice {
			.bl1 {
				ol {
					li {
						background: #fff;
						border-radius: 20px;
						margin-bottom: 40px;
						padding: 30px;
						display: flex;
						.fig {
							width: 46%;
							margin-right: 5%;
							img {
								width: 100%;
							}
						}
						.right {
							width: 40%;
							.text {
								p {
									color: #636363;
									&.nen {
										color: var(--colorBk);
										margin-top: 1em;
									}
								}
							}
						}
					}
				}
			}
		}
		#day {
			.bl1 {
				margin: 0 250px;
				ul {
					li {
						padding-bottom: 20px;
						position: relative;
						display: flex;
						align-items: center;
						&::before {
							content: "";
							width: 1px;
							height: calc(100% - .1em);
							background: var(--colorNv);
							position: absolute;
							top: .4em;
							left: 5em;
						}
						&::after {
							content: "";
							width: 1em;
							height: 1em;
							background: var(--colorNv);
							border-radius: 1em;
							position: absolute;
							top: .2em;
							left: 4.5em;
						}
						&:last-child::before {
							content: none;
						}
						.time {
							color: var(--colorNv);
							width: 4em;
							text-align: right;
							margin-right: 4em;
						}
						.text {
							display: flex;
							align-items: center;
							.tit {
								color: var(--colorNv);
								width: 11em;
								margin-right: 1em;
							}
							.note {
								color: #5a5a5a;
							}
						}
					}
				}
			}
		}
		#benefits {
			.bl1 {
				ul {
					display: flex;
					justify-content: space-between;
					li {
						width: calc(calc(100% - 105px) / 4);
						text-align: center;
						background: #fff;
						border-radius: 15px;
						padding: 50px 20px;
						.fig {
							width: 80px;
							margin: 0 auto 20px;
							img {
								width: 100%;
							}
						}
						h3 {
							color: var(--colorNv);
						}
						p {
							color: #7d7b7b;
							line-height: 1.42;
						}
					}
				}
			}
		}
		#career {
			.bl1 {
				ol {
					display: flex;
					flex-wrap: wrap;
					gap: 100px;
					justify-content: flex-start;
					li {
						width: calc(calc(100% - 200px) / 3);
						text-align: center;
						background: #fff;
						border-radius: 15px;
						padding: 50px;
						position: relative;
						display: flex;
						flex-direction: column;
						&::after {
							content: "";
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 20px 0px 20px 34.6px;
							border-color: transparent transparent transparent var(--colorNv);
							display: inline-block;
							position: absolute;
							top: calc(50% - 20px);
							right: -70px;
						}
						&:nth-child(3n)::after,	&:last-child::after {
							content: none;
						}
						h3 {
							width: 70%;
							color: var(--colorWh);
							text-align: center;
							background: var(--colorNv);
							border-radius: 50vh;
							margin: 0 auto -1em;
							padding: .2em 0;
							position: relative;
							top: calc(-50px - 1em);
						}
						.tit {
							line-height: 2.2;
							&.line2 {
								line-height: 1.1;
							}
						}
						.text {
							color: #7d7b7b;
							line-height: 1.42;
							margin-bottom: 50px;
						}
						.carr {
							line-height: 2.2;
							border-top: solid 1px #9d9d9d;
							padding-top: 20px;
							margin-top: auto;
							&.line2 {
								line-height: 1.1;
							}
							&.get {
								color: #d52424;
							}
							&.take {
								color: var(--colorNv);
							}
						}
					}
				}
			}

		}
	}
	#numbers {
		color: var(--colorWh);
		min-width: 1280px;
		background: var(--colorNv);
		padding: 110px 0 140px;
		.bl1 {
			ul {
				display: flex;
				flex-wrap: wrap;
				gap: 30px;
				li {
					text-align: center;
					width: calc(calc(100% - 90px) / 4);
					background: #fff;
					border-radius: 15px;
					padding: 50px 10px;
					display: flex;
					flex-direction: column;
					.num {
						color: var(--colorBk);
						line-height: 1;
						span {
							color: var(--colorNv);
							font-size: clamp(3rem, 5.33vw, 6.25rem);
							margin-right: 15px;
						}
					}
					.fig {
						img {
							width: clamp(3.33rem, 4.5vw, 4.5rem);
						}
					}
					.add {
						color: #7d7b7b;
						margin-top: auto;
					}
				}
			}
		}
	}
	#requirements {
		min-width: 1280px;
		background: #f1f1f1;
		padding: 110px 0 120px;
		.bl1 {
			table {
				width: 100%;
				th, td {
					font-weight: normal;
					text-align: left;
					line-height: 1.2;
					border-bottom: solid 1px #8f8f8f;
					padding: 30px 0;
				}
				th {
					width: 18%;
				}
			}
		}
	}
	#faq {
		padding: 110px 0 120px;
		.bl1 {
			dl {
				dt, dd {
					padding-left: 80px;
					position: relative;
					&::before {
						font-weight: 700;
						font-size: clamp(1.33rem, 2.13vw, 2.5rem);
						position: absolute;
						top: -.2em;
						left: 0;
					}
				}
				dt {
					font-weight: 700;
					margin-bottom: 10px;
					&::before {
						content: "Q";
					}
				}
				dd {
					color: #747474;
					border-bottom: solid 1px #8f8f8f;
					margin-bottom: 30px;
					padding-bottom: 30px;
					&::before {
						content: "A";
					}
				}
			}
		}
	}
}

@media screen and (max-width:799px) {
	body.recruit.index {
		#recruitBl {
			.hgroup h2 {
				font-size: 2.2rem;
			}
		}
		#lnavi {
			padding: 13vw 0;
			ul {
				padding: 0;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				li {
					width: 45%;
					margin: 0 0 5vw;
				}
			}
		}
		#sec1 {
			min-width: initial;
			padding: 13vw 0;
			#message, #work, #voice, #day, #benefits {
				.subContents {
					margin-bottom: 10vw;
					padding-bottom: 10vw;
				}
			}
			#message {
				.hgroup h2 {
					font-size: 2.2rem;
				}
				.bl1 {
					.midashi {
						margin-bottom: 6vw!important;
					}
					.box {
						display: block;
						.fig {
							width: 70%;
							margin: 0 auto 6vw;
						}
						.text {
							width: 100%;
						}
					}
				}
			}
			#work {
				.bl1 {
					ol {
						display: block;
						> li {
							width: 100%;
							margin-bottom: 5vw;
							padding: 5vw;
							.text {
								margin-bottom: 3vw;
								padding-bottom: 3vw;
							}
						}
					}
				}
			}
			#voice {
				.bl1 {
					ol {
						li {
							margin-bottom: 5vw;
							padding: 5vw;
							display: block;
							.fig {
								width: 100%;
								margin-right: 0;
								margin-bottom: 5vw;
							}
							.right {
								width: 100%;
							}
						}
					}
				}
			}
			#day {
				.bl1 {
					margin: 0;
					ul {
						li {
							align-items: flex-start;
							.time {
							}
							.text {
								display: block;
								.tit {
									width: auto;
									margin-right: 0;
								}
							}
						}
					}
				}
			}
			#benefits {
				.bl1 {
					ul {
						justify-content: flex-start;
						flex-wrap: wrap;
						gap: 4vw;
						li {
							width: calc(calc(100% - 4vw) / 2);
							padding: 6vw 4vw;
							.fig {
								width: 30%;
								margin: 0 auto 5vw;
							}
							h3 {
								font-size: 1.3rem!important;
							}
						}
					}
				}
			}
			#career {
				.bl1 {
					ol {
						display: block;
						gap: 0;
						li {
							width: 100%;
							margin-bottom: 20vw;
							padding: 5vw 10vw;
							display: block;
							position: relative;
							&::after {
								content: ""!important;
								border-style: solid;
								border-width: 6vw 6vw 0px 6vw;
								border-color: #6980fe transparent transparent transparent;
								position: absolute;
								top: auto;
								bottom: -10vw;
								right: auto;
								left: calc(50% - 6vw);
							}
							&:last-child::after {
								content: none!important;
							}
							h3 {
								top: calc(-5vw - 1em);
							}
							.tit {
								line-height: 1.1;
							}
							.text {
								margin-bottom: 5vw;
							}
							.carr {
								line-height: 1.1;
								padding-top: 3vw;
							}
						}
					}
				}
			}
		}
		#numbers {
			min-width: initial;
			padding: 13vw 0;
			.bl1 {
				ul {
					gap: 5vw;
					li {
						width: calc(calc(100% - 5vw) / 2);
						padding: 8vw 10px;
						display: flex;
						flex-direction: column;
						.num {
							span {
								margin-right: 10px;
							}
						}
						.fig {
							img {
								width: 10vw;
							}
						}
					}
				}
			}
		}
		#requirements {
			min-width: initial;
			padding: 13vw 0;
			.bl1 {
				table {
					th, td {
						display: block;
					}
					th {
						width: 100%;
						font-weight: 700;
						border: none;
						padding: 5vw 0 3vw 0;
					}
					td {
						width: 100%;
						padding: 0 0 5vw 0;
					}
				}
			}
		}
		#faq {
			padding: 13vw 0;
			.bl1 {
				dl {
					dt, dd {
						padding-left: 10vw;
					}
					dd {
						margin-bottom: 5vw;
						padding-bottom: 5vw;
					}
				}
			}
		}
		#recruitBl2 {
			.hgroup h2 {
				font-size: 2.2rem;
			}
		}
	}
}


/* ------------------------　インタビュー ------------*/

body.recruit.interview {
	#mainv {
		color: var(--colorWh);
		min-width: 1280px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		padding: 110px 0 140px;
		dl {
			dt {
				float: left;
				clear: left;
			}
			dd {
				padding-left: 3em;
				&::before {
					content: "：　";
				}
			}
		}
	}
	&.interview01 {
		#mainv {
			background-image: url(../images/recruit/interview01/mainv_p_01.jpg);
		}
	}
	&.interview02 {
		#mainv {
			background-image: url(../images/recruit/interview02/mainv_p_01.jpg);
		}
	}
	#sec1 {
		background: url(../images/common/common_bg_02.jpg) no-repeat right top/100vw auto;
		padding: 260px 0 130px;
		.ivtext {
			margin-bottom: 100px;
			.question {
				border-bottom: solid 1px #c3e0f7;
				padding: 0 0 1em 2em;
				margin: 0 0 1em;
				position: relative;
				&::before {
					content: "Q";
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			.textBox {
				display: flex;
				justify-content: space-between;
				flex-direction: row-reverse;
				gap: 40px;
				&.imgl {
					flex-direction: row;
				}
				.fig {
					&.fig508 { width: 33.4%; }
					&.fig712 { width: 46.8%; }
					&.fig759 { width: 50%; }
					img {
						width: 100%;
					}
				}
				.honbun {
					flex: 1;
					p {
						margin-bottom: 1em;
					}
				}
			}
		}
		.ivTit {
			color: var(--colorNv);
			border-left: solid 6px var(--colorNv);
			margin-bottom: 100px;
			padding: 15px 0 15px 50px;
		}
		.day {
			h2 {
				color: #9b9b9d;
			}
			ul {
				li {
					padding-left: 2em;
					padding-bottom: 20px;
					position: relative;
					display: flex;
					align-items: center;
					&::before {
						content: "";
						width: 1px;
						height: calc(100% - .1em);
						background: var(--colorNv);
						position: absolute;
						top: .4em;
						left: .5em;
					}
					&::after {
						content: "";
						width: 1em;
						height: 1em;
						background: var(--colorNv);
						border-radius: 1em;
						position: absolute;
						top: .2em;
						left: 0;
					}
					&:last-child::before {
						content: none;
					}
					.time {
						color: var(--colorNv);
						width: 4em;
						text-align: left;
					}
					.tit {
						color: var(--colorNv);
						margin-right: 1em;
					}
				}
			}
		}
		.lnav {
			ul {
				display: flex;
				justify-content: space-between;
				li {
					color: var(--colorNv);
					width: calc(calc(100% - 40px) / 2);
					border: solid 1px var(--colorNv);
					border-radius: 20px;
					position: relative;
					padding: 80px 40px 40px;
					display: block;
					&::after {
						color: #7e7e7e;
						font-size: clamp(.8rem, 1.28vw, 1.5rem);
						position: absolute;
						top: 40px;
					}
					&:first-child::after {
						content: "← BACK";
						left: 40px;
					}
					&:last-child::after {
						content: "NEXT INTERVIEW →";
						right: 40px;
					}
				}
			}
		}
	}
}

@media screen and (max-width:799px) {

	body.recruit.interview {
		#mainv {
			min-width: initial;
			padding: 13vw 0;
		}
		&.interview01 {
			#mainv {
				background-size: 210vw auto;
				background-position: 60% center;
				.hgroup .midashiJa {
					font-size: 2rem;
				}
			}
		}
		&.interview02 {
			#mainv {
				background-size: 220vw auto;
				background-position: 20% center;
				.hgroup .midashiJa {
					font-size: 2rem;
				}
			}
		}
		#sec1 {
			padding: 13vw 0;
			.ivtext {
				margin-bottom: 13vw;
				.textBox {
					display: block;
					.fig {
						margin-bottom: 5vw;
						&.fig508 { width: 100%; }
						&.fig712 { width: 100%; }
						&.fig759 { width: 100%; }
					}
				}
			}
			.ivTit {
				margin-bottom: 13vw;
				padding: 1em 0 1em 2em;
			}
			.lnav {
				ul {
					display: block;
					li {
						width: 90%;
						margin: 0 auto 5vw;
						padding: 10vw 6vw 4vw;
						&::after {
							top: 4vw;
						}
						&:first-child::after {
							left: 4vw;
						}
						&:last-child::after {
							right: 4vw;
						}
					}
				}
			}
		}
	}
}




body.recruit.entry {
	#form {
		padding: 120px 0 120px;
		.bl1 {
			width: 805px;
			margin: 0 auto;
			dl {
				margin-bottom: 15px;
				dt {
					font-weight: 700;
					margin-bottom: 5px;
				}
				dd {
					margin-bottom: 30px;
				}
			}
		}
	}
}

@media screen and (max-width:799px) {
	body.recruit.entry {
		#form {
			padding: 13vw 0;
			.bl1 {
				width: 100%;
			}
		}
	}
}