@charset "UTF-8";

#contents {
	&.recruit {
		margin-top: 120px;
		@media screen and (max-width: 767px) {
			margin-top: 96px;
		}
		.inner {
			width: 1020px;
			padding: 0 40px;
			margin: 0 auto;
			@media screen and (max-width: 767px) {
				padding: 0 20px;
				width: 100%;
			}
		}
		a {
			text-decoration: none;
			color: #000;
		}
	}
}
.recruit {
	width: 100%;
  .ttl_main {
		width: 100%;
		background: url(../../imgs/recruit/mv.jpg) no-repeat center / cover;
		height: 329px;
		min-width: 1020px;
		@media screen and (max-width: 767px) {
			min-width: inherit;
			width: 100%;
			height: fit-content;
			height: 210px;
			background: url(../../imgs/recruit/mv_sp.jpg) no-repeat center / cover;
		}
		.inner {
			height: 100%;
			h2 {
				width: fit-content;
				text-align: left;
				display: flex;
				align-items: center;
				height: 100%;
				font-family: 'Barlow Condensed', sans-serif;
				color: #003365;
				font-size: 38px;
				@media screen and (max-width: 767px) {
					font-size: 30px;
				}
			}
		}
  }
	.recruit-cont {
		width: 1020px;
		padding: 75px 0 160px;
		margin: 0 auto;
		@media screen and (max-width: 767px) {
			width: 100%;
			padding: 50px 0 80px;
		}
		.intro {
			padding-bottom: 70px;
			height: 100%;
			display: block;
			@media screen and (max-width: 767px) {
				padding-bottom: 50px;
			}
			.ttl {
				font-size: 32px;
				letter-spacing: 0.1rem;
				@media screen and (max-width: 767px) {
					font-size: 24px;
				}
				.ib {
					display: inline-block;
				}
				+p {
					margin-top: 40px;
					letter-spacing: 0.05rem;
					@media screen and (max-width: 767px) {
						margin-top: 25px;
						line-height: 1.8rem;
					}
				}
			}
		}
		.cont {
			margin-top: 100px;
			display: flex;
			@media screen and (max-width: 767px) {
				display: block;
				margin-top: 0;
			}
			.txt-box {
				order: 1;
				padding: 43px 50px 30px 22px;
				background-color: #FFF7FA;
				position: relative;
				z-index: 1;
				width: 100%;
				max-width: 450px;
				position: relative;
				@media screen and (max-width: 767px) {
					width: calc(100% - 20px);
					margin-top: -20px;
					display: block;
				}
				.ttl {
					font-size: 18px;
					font-weight: 500;
					position: relative;
					width: fit-content;
					display: block;
					padding-bottom: 28px;
					letter-spacing: 0.05rem;
					&::before {
						content: "";
						position: absolute;
						bottom: 0;
						left: -24px;
						background: url(../../imgs/recruit/line.jpg) no-repeat center / cover;
						height: 4px;
						width: 180px;
					}
				}
				p {
					margin-top: 15px;
					font-weight: 400;
					line-height: 1.8rem;
					font-size: 14px;
					letter-spacing: 0.05rem;
				}
				p+p {
					margin: 10px 0 50px;
				}
				.btn-wrap {
					position: absolute;
					right: 0;
					bottom: 27px;
					@media screen and (max-width: 767px) {
						bottom: 18px;
					}
					.btn {
						background-color: #fff;
						padding: 10px 15px 12px;
						display: block;
						width: 164px;
						position: relative;
						font-weight: 400;
						@media screen and (max-width: 767px) {
							width: 230px;
							text-align: center;
							height: 40px;
						}
						&::before {
							position: absolute;
							content: "";
							width: 7px;
							height: 7px;
							border-top: 2px solid #000;
							border-right: 2px solid #000;
							right: 20px;
							top: 0;
							bottom: 0;
							margin: auto;
							transform: rotate(45deg);
						}
					}
				}
			}
			.img-box {
				order: 2;
				margin-top: -94px;
				margin-left: -36px;
				@media screen and (max-width: 767px) {
					margin: 0;
				}
				img {
					max-width: 610px;
					width: 100%;
					display: block;
					@media screen and (max-width: 767px) {
						width: calc(100% - 40px);
						display: block;
						margin-right: 0;
						margin-left: auto;
					}
				}
			}
			+.cont {
				margin-top: 170px;
				@media screen and (max-width: 767px) {
					margin-top: 63px;
				}
				.txt-box {
					background-color: #EDF6FC;
				}
			}
		}
	}
}