@font-face {
	font-family: 'Sanari';
	src: url('/common/font/sanariFontB002.woff2') format('woff2'),url('/common/font/sanariFontB002.woff') format('woff');
}

/* フォント */
.caveat {
	font-family: "Caveat", cursive;
}
.sanari {
	font-family: "Sanari", cursive;
}
.mPlusRound {
  font-family: "M PLUS Rounded 1c", sans-serif;
	transform: rotateZ(0.03deg);
}
.medium {
	font-weight: 500;
}
.exbold {
	font-weight: 800;
}

/* コンテンツ */
figure {
	margin: 0;
  padding: 0;
}
.recruite-main {
	color: #444;
}
.recruiteFv {
	position: relative; 
}
.recruiteFv-img img {
	aspect-ratio: 4 / 1;
  object-fit: cover;
  width: 100%;
}
.recruiteFv-area {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #FFF;
	line-height: 1;
	padding-bottom: 4rem;
	box-sizing: border-box;
	text-shadow: 0 2px 2px rgba(255,255,255,0.25);
}
.recruiteFv-area-main {
	font-size: 9.6rem;
	margin-bottom:1.5rem;
}
.recruiteFv-area-sub {
	font-size: 3.2rem;
	font-weight: bold;
}

/* faq */
.recruite-faqQ{
	display: flex;
	column-gap: 1rem;
	font-size: 2rem;
	margin-bottom: 1rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid #ccc;
}
.recruite-faqQ:before{
	display: block;
	content: 'Q.';
	color: #369770;
}
.recruite-faqA{
	display: flex;
	column-gap: 1.2rem;
	line-height: 1.8;
}
.recruite-faqA:before{
	display: block;
	content: 'A.';
	color: #75AF82;
	margin-top: -0.6rem;
	font-size: 2rem;
	font-family: "M PLUS Rounded 1c", sans-serif;
	transform: rotateZ(0.03deg);
}

/* 1日の流れ */
.recruite-timetable{
	position: relative;
	z-index:1;
	display: flex;
	align-items: center;
	column-gap: 2rem;
}
.recruite-timetable:not(.-noline){
	padding-bottom: 2rem;
}
.recruite-timetable:not(.-noline):after{
	position: absolute;
	z-index:-1;
	content: '';
	bottom:0;
	left: 2.5rem;
	width: 1px;
	height: 100%;
	background-color: #CCC;
}
.recruite-timetable-time{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 5rem;
	color: #FFF;
	font-size: 1.2rem;
	border-radius: 100%;
	background-color: #75AF82;
}

.recruite-timetable-txt{
	width: calc(100% - 7rem);
	font-size: 1.8rem;
}

/* もっと知る */
.recruite-contents1{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 90rem;
	gap: 4rem;
	margin-left: auto;
	margin-right: auto;
}
.recruite-contents1-items{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	width: 27rem;
	height: 27rem;
	border-radius: 999px;
	background-color: #FFF;
}
.recruite-contents1-ttl{
	line-height: 1.1;
	font-size: 1.8rem;
}
.recruite-contents1-ttlMain{
	font-size: 2rem;
}
.recruite-contents1-ttlMain > .-large{
	font-size: 5.5rem;
}

/* 新卒採用情報 */
.recruite-contents2 {
	max-width: 170rem;
	width: 100%;
	margin-left: auto;
	box-sizing: border-box;
}
.recruite-contents2 .layout-wrapper {
	display: flex;
	gap: 2.5rem;
	align-items: start;
}
.recruite-contents2 .layout-wrapper .ph-area {
	width: 75%;
}
.recruite-contents2 .layout-wrapper .ph-area .image1 {
	display: flex;
}
.recruite-contents2 .layout-wrapper .ph-area .image1 div{
	width: calc(100% / 3);
}
.recruite-contents2 .layout-wrapper .ph-area .image1 img{
	width: 100%;
}
.recruite-contents2 .text-area {
	width: 25%;
	padding-left: 2rem;
}

/* エントリー */
.recruite-contents3 {
	position: relative;
}
.recruite-contents3 .recruite-contents3-img {
	position: relative;
}
.recruite-contents3 .recruite-contents3-img:before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}
.recruite-contents3 .recruite-contents3-img:after {
	position: absolute;
	content: '';
	top: 2rem;
	left: 2rem;
	width: calc(100% - 4rem);
	height: calc(100% - 4rem);
	border: 1px solid #FFF;
}
.recruite-contents3 .recruite-contents3-img img {
	aspect-ratio: 4 / 1;
  object-fit: cover;
  width: 100%;
}
.recruite-contents3 .recruite-contents3-content-outer {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.recruite-contents3 .recruite-contents3-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #FFF;
	width:100%;
	box-sizing: border-box;
	padding: 2rem;
	line-height: 1;
}
.recruite-contents3 .recruite-contents3-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap:wrap;
	gap: 4rem;
	width:50%;
	box-sizing: border-box;
}
.recruite-contents3-btn > a:first-child{
	margin-left: calc((100% - 19rem) / 2);
	margin-right: calc((100% - 19rem) / 2);
}

.recruite-flexBox{
	display: flex;
	flex-wrap: wrap;
	gap: 6rem;
}
.recruite-flexBox .recruite-flexBox-items{
	width: calc((100% - 12rem) / 3);
}

.bg-white{
	background-color: #FFF;
}
.bg-white.-pa{
	padding: 3rem 5rem;
}

.flex-box .f5-5 { width: 44.5%; }

.recruite-grayBg{
	padding: 2.5rem;
	border-radius: 1rem;
	background-color: #f5f5f5;
}

.qa-q{
	color: #444;
}

/* 見出し */
.recruiteTtl1 {
	position: relative;
	font-size: 3rem;
	padding-bottom: 1rem;
}
.recruiteTtl1:after {
	position: absolute;
	content: '';
	bottom: 0;
	left: calc(50% - 5rem);
	width: 10rem;
	height: 0;
	border-bottom: 5px dotted #75AF82;
}
.recruiteTtl1.-type2 {
	padding-bottom: 2.5rem;
}
.recruiteTtl1.-type2:after {
	left: calc(50% - 3rem);
	width: 6rem;
	border-bottom: 5px dotted #fff;
}

.recruiteTtl2 {
	font-size: 2rem;
	padding-left: 2.5rem;
	background:url('../img/icon/clock.svg') no-repeat center left / 2rem;
}

.recruiteTtl3 {
	font-size: 2rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid #75AF82;
}

/* テキスト */
.fs-17{
	font-size: 1.7rem;
}
.fs-18{
	font-size: 1.8rem;
}
.fs-20{
	font-size: 2rem;
}
.fs-28{
	font-size: 2.8rem;
}
.fs-30{
	font-size: 3rem;
}

/* 画像 */
.recruite-image1 {
	aspect-ratio: 57 / 38;
  object-fit: cover;
  width: 100%;
}

@media screen and ( max-width: 768px ) {
	.recruite-contents3 .recruite-contents3-img img {
		aspect-ratio: 117 / 100;
	}
	.recruite-contents3 .recruite-contents3-content {
		flex-direction: column;
		row-gap: 3rem;
	}
	.recruite-contents3-content .w50p{
		width: 100%;
	}
	.recruite-contents3 .recruite-contents3-btn {
		gap: 2rem;
		width:100%;
	}

	.recruite-flexBox{
		gap: 3rem;
	}
	.recruite-flexBox .recruite-flexBox-items{
		width: calc((100% - 3rem) / 2);
	}

	.fs-17{
		font-size: 1.4rem;
	}
	.fs-18{
		font-size: 1.5rem;
	}
	.fs-20{
		font-size: 1.5rem;
	}
	.fs-28{
		font-size: 2rem;
	}
	.fs-30{
		font-size: 2.2rem;
	}
}

@media screen and ( max-width: 600px ) { 
	/* コンテンツ */
	.recruiteFv-img img {
		aspect-ratio: 117 / 58;
	}
	.recruiteFv-area {
		padding-bottom: 0.5rem;
		text-shadow: 0 1px 1px rgba(255,255,255,0.25);
	}
	.recruiteFv-area-main {
		font-size: 4.6rem;
	}
	.recruiteFv-area-sub {
		margin-top: 0.3rem;
		font-size: 1.7rem;
	}

	.recruite-contents1{
		max-width: 100%;
		gap: 2rem;
	}
	.recruite-contents1-items{
		gap: 0.5rem;
		width: 18rem;
		height: 18rem;
	}
	.recruite-contents1-items > img{
		width:50%;
	}
	.recruite-contents1-ttl{
		font-size: 1.4rem;
	}
	.recruite-contents1-ttlMain{
		font-size: 1.4rem;
	}
	.recruite-contents1-ttlMain > .-large{
		font-size: 3rem;
	}
	.recruite-contents1-image{
		width: 60%;
	}
	.recruite-contents1-image.-type2{
		width: 25%;
	}
	.recruite-contents1-image.-type3{
		width: 20%;
	}
	.recruite-contents1-image > img{
		width: 100%;
	}

	.recruite-contents2 .layout-wrapper {
		flex-direction: column;
	}
	.recruite-contents2 .layout-wrapper .ph-area {
		width: 100%;
	}
	.recruite-contents2 .layout-wrapper .text-area {
		width: 100%;
		padding: 0 6rem;
		box-sizing: border-box;
	}

	.recruite-contents3-btn > a{
		width: 40%;
	}
	.recruite-contents3-btn > a:first-child{
		margin-left:20%;
		margin-right:20%;
	}
	.recruite-contents3-btn > a img{
		width: 100%;
	}

	.bg-white.-pa{
		padding: 2rem 4rem;
	}

	.recruite-flexBox{
		flex-direction: column;
		gap: 6rem;
	}
	.recruite-flexBox .recruite-flexBox-items{
		width: 100%;
	}

	.flex-box .f5-5.ssf12 { width: 100%; }

	.sp-overflowX{
		overflow-x: scroll;
	}
	.sp-overflowX *{
		width: 250% !important;
	}

	/* 見出し */
	.recruiteTtl1 {
		position: relative;
		font-size: 2rem;
	}
	.recruiteTtl1:after {
		left: calc(50% - 4rem);
		width: 8rem;
	}
}