@charset "utf-8";

/******************* 統一設定 *******************/
section[id^=sec] .button{
	margin:0 auto;
	padding:10px 40px;
	color:#4d99b5;
	background:#fff;
	border:solid 2px #4d99b5;
	border-radius:999px;
	display:block;
}


/******************* 各セクション *******************/
#sec01 h1::before{
	background:url("./../img/common/recruit.png") no-repeat center/contain;
}


#sec02{
	padding-bottom:50px;
	background:#d0eaf4;
}

#sec02 .recruit{
	width:90%;
	max-width:1092px;
	margin:max(-4%,-55px) auto 0;
}

#sec02 .recruit .textbox{
	width:100%;
	margin-top:20px;
	padding:30px;
	row-gap:20px;
	background:#fff url("./../img/recruit/picture/picture2.png") no-repeat right bottom/clamp(130px,15%,200px);
	text-align:center;
	border-radius:15px;
	box-shadow:0 0 15px rgb(0 0 0 / 30%);
	flex-direction:column;
	align-items:center;
}

#sec02 .recruit .textbox::after{
	content:"";
}

#sec02 .recruit .textbox img[alt="あなたに合った働き方ができます"]{
	max-width:600px;
}

#sec02 .recruit .textbox img:last-child{
	max-width:400px
}

#sec02 .recruit .line{
	margin-top:20px;
	column-gap:20px;
	justify-content:center;
}

#sec02 .recruit .line img.qr{
	width:96px;
}

#sec02 .recruit .line a{
	padding:0 25px;
	color:#fff;
	background:#4db57b;
	font-size:1.5em;
	border-radius:15px;
	align-items:center;
}

#sec02 .catchphrase{
	width:100%;
	margin:50px auto 0;
	padding:20px 10px;
	color:#337d98;
	background:#fff;
	text-align:center;
	font-size:1.5em;
}

@media (max-width:767px){
	#sec02 .recruit .textbox{
		background-image:none;
	}
	
	#sec02{
		row-gap:10px;
		column-gap:0;
		flex-direction:column;
	}
	
	#sec02 .img{
		width:100%;
	}

	#sec02 .img::after{
		display:none;
	}
	
	#sec02 .textbox{
		width:90%;
		margin:0 auto;
		padding:10px 15px;
	}

	#sec02 .textbox .button{
		margin:0 auto;
	}
		

	#sec04 .intro{
		row-gap:20px;
		column-gap:0;
		flex-direction:column;
	}

	#sec04 .intro .textbox{
		width:100%;
	}



	#sec05 .textbox .innerbox{
		row-gap:10px;
		column-gap:0;
		flex-direction:column;
	}

	#sec05 .textbox .innerbox img,#sec05 .textbox .innerbox .guide{
		width:100%;
	}

	#sec05 .textbox .innerbox .guide{
		padding:0 10px 10px;
	}

	#sec05 .tips br{
		display:block;
	}
}

@media (max-width:450px){
	#sec02 .recruit .line{
		column-gap:0;
		row-gap:15px;
		align-items:center;
		flex-direction:column;
	}

	#sec02 .recruit .line img.qr{
		margin:0 auto;
	}

	#sec02 .recruit .line a{
		padding:10px 15px;
		text-align:center;
	}
}