@charset "utf-8";

/* -----------------------------------------------------------
    採用情報
-------------------------------------------------------------- */
#recruit {
}

#recruit .comingsoon {
  padding: 120px 0;
}

.recruit-area {
    position: relative;
    padding: 80px 0;
}  

.recruit-area > .inner {
  padding: 0 80px 120px 0;
  position: relative;
  z-index: 1;
}

.recruit-area .job-block {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 auto;
    padding-left: calc( (100% - 1200px) /2);
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.recruit-area .job-block:first-of-type {
    margin: 0 0 130px;
}

.recruit-area .job-block.writer {
    flex-direction: row-reverse;
    margin: 0 auto 0 0;
    padding-right: calc( (100% - 1200px) /2);
    padding-left: 0;
}

.recruit-area .job-img {
    width: 50%;
    border-radius: 30px 0 0 30px;
    overflow: hidden;
    max-height: 500px;
}

.recruit-area .job-block.writer .job-img {
    border-radius: 0 30px 30px 0;
}

.recruit-area .job-img img {
    object-fit: cover;
    width: 100%;
}

.recruit-area .job-txt {
    width: 46%;
}

.recruit-area .job-name {
    font-size: 3.0rem;
    font-weight: bold;
    color: var(--blue);
    padding: 0 0 30px;
    border-bottom: 1px solid #ccc;
    line-height: 1.3;
    letter-spacing: .1rem;
}

.recruit-area .job-name img {
    display: inline-block;
    margin: 0 10px 0 0;
}

.recruit-area .job-table {
    border-collapse: collapse;
    width: 100%;
}

.recruit-area .job-table th {
    width: 18%;
    text-align: left;
    padding: 30px 0;
    line-height: 1.6;
    border-bottom: 1px solid #ccc;
    vertical-align: text-top;
}

.recruit-area .job-table td {
    width: 82%;
    text-align: left;
    padding: 30px 0;
    line-height: 1.6;
    border-bottom: 1px solid #ccc;
}

.recruit-area .btn-more {
	margin: 100px 0 0;
}

.recruit-area .btn-more a {
	padding: 25px 50px;
}

@media screen and (max-width: 767px) {
  #recruit .comingsoon {
    padding: 60px 0;
  }

  .recruit-area {
    position: relative;
    padding: 60px 0 0;
}
    
	.recruit-area .job-block:first-of-type {
		margin: 0 0 50px;
	}

	.recruit-area .job-block {
		margin: 0 auto;
		padding-left: 0;
		flex-wrap: wrap;
		padding: 0 20px;
	}

	.recruit-area .job-block.writer {
		padding-right: 0;
		padding: 0 20px;
	}

	.recruit-area .job-txt {
		width: 100%;
		display: contents;
	}

	.recruit-area .job-name {
		order: 1;
		font-size: 2.4rem;
		width: 100%;
		padding: 0 0 15px 30px;
		text-indent: -40px;
		border-bottom: none;
		letter-spacing: .1rem;
		line-height: 1.2;
		/*font-feature-settings: "palt";*/
	}

	.recruit-area .job-name img {
		width: 32px;
		margin: 0 8px 0 0;
		vertical-align: middle;
	}

	.recruit-area .job-img {
		width: 100%;
		border-radius: 20px;
		max-height: initial;
		order: 2;
		height: initial;
		aspect-ratio: 7 / 4;
		min-height: 40%;
	}

	.recruit-area .job-block.writer .job-img {
		border-radius: 20px;
	}

	.recruit-area .job-img img {
		max-width: initial;
	}

	.recruit-area .job-table {
		order: 3;
	}

	.recruit-area .job-table th {
		width: 100%;
		display: block;
		padding: 20px 0 0;
		border-bottom: none;
	}

	.recruit-area .job-table td {
		width: 100%;
		display: block;
		padding: 10px 0 20px;
	}

	.recruit-area > .inner {
		padding: 60px 40px 60px 20px;
	}

	.recruit-area .section-catch {
		font-size: 2.2rem;
		margin: 0;
		padding: 0 0 20px;
	}
	
	.recruit-area .btn-more {
		margin: 40px 0 0;
	}
	
	.recruit-area .btn-more a {
		width: 320px;
	}

}

/*    セクション名
-------------------------------------------------------------- */

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