/** @format */

@charset "utf-8";
/*  recruit.css
---------------------------------------------- */

/*  pc
---------------------------------------------- */
#recruit .cont_wrap {
	margin-top: 70px;
	padding-bottom: 70px;
}

/*  description
---------------------------------------------- */
#description {
	margin-top: 100px;
	position: relative;
}
#description .bg {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 960px;
	height: 610px;
}
#description .bg img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#description .bg::after,
#description .bg::before {
	content: "";
	position: absolute;
	width: 290px;
	height: 370px;
}
#description .bg::before {
	top: 20px;
	left: -115px;
	background: url(../img/recruit/parts_desc01.png) no-repeat center / contain;
}
#description .bg::after {
	bottom: 50px;
	right: -130px;
	background: url(../img/recruit/parts_desc02.png) no-repeat center / contain;
}
#description .txt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-weight: 500;
	color: var(--color_brown);
	line-height: 2.5;
}

/*  guideline
---------------------------------------------- */
#guideline .gl_list li {
	padding: 20px 30px;
	display: flex;
	align-items: baseline;
	border-top: 1px solid var(--color_brown);
}
#guideline .gl_list li:last-child {
	border-bottom: 1px solid var(--color_brown);
}
#guideline .gl_list li .term {
	width: 330px;
	color: var(--color_brown);
	font-weight: 600;
	font-size: 2rem;
}
#guideline .gl_list li .desc {
	line-height: 2.2;
}

/*  mobile & smart phone
---------------------------------------------- */
@media only screen and (max-width: 959px) {
	#recruit .cont_wrap {
		margin-top: 70px;
		padding-bottom: 70px;
	}

	/*  description
	---------------------------------------------- */
	#description {
		margin-top: 140px;
	}
	#description .bg {
		width: 100%;
		max-width: 960px;
		height: 700px;
	}
	#description .bg img {
		object-fit: cover;
	}
	#description .bg::after,
	#description .bg::before {
		content: "";
		position: absolute;
		width: 150px;
		height: 250px;
	}
	#description .bg::before {
		top: -85px;
		left: -30px;
	}
	#description .bg::after {
		bottom: -90px;
		right: -60px;
	}
	#description .txt {
		width: 90%;
		font-size: 18px;
		line-height: 2;
	}

	/*  guideline
	---------------------------------------------- */
	#guideline .gl_list li {
		padding: 10px 20px;
		gap: 20px;
	}
	#guideline .gl_list li > p {
		font-size: 20px !important;
	}
	#guideline .gl_list li .term {
		width: 130px;
	}
	#guideline .gl_list li .desc {
		width: calc(100% - 130px);
		line-height: 1.6;
	}
}
