@charset "utf-8";
:root {
	--radius-base: 10px;
}

#sec_voice_under > .content{
	max-width: 1400px;
}

#sec_voice_under{
	background: url("../img/bg_border.png");
}

#sec_voice_under .topContainer{
	position: relative;
	z-index: 1;
}

#sec_voice_under .topContainer .figBox span{
	display: block;
	aspect-ratio: 590/370;
	max-width: 295px;
	position: absolute;
	width: 24%;
	transform: rotate(0);
}
#sec_voice_under .topContainer .figBox .fig1{
	background: url("../img/img_recruiter_01.webp") no-repeat center / contain;
	top: 102px;
	left: 0;
}
#sec_voice_under .topContainer .figBox .fig2{
	background: url("../img/img_recruiter_02.webp") no-repeat center / contain;
	bottom: 20px;
	left: 6%;
}
#sec_voice_under .topContainer .figBox .fig3{
	background: url("../img/img_recruiter_03.webp") no-repeat center / contain;
	aspect-ratio: 600/380;
	max-width: 300px;
	width: 25%;
	top: calc(100% / 2 - 95px);
	right: 0;
}

.topContainer .telBox{
	background: #fff;
	border: solid 4px #63b8b1;
	border-radius: 10px;
	color: #000;
	max-width: 420px;
	margin: 35px auto 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-size: 18px;
	font-weight: 900;
}
	.topContainer .telBox a{
		color: #000;
		font-family: "Poppins", "M PLUS Rounded 1c",sans-serif;
		display: block;
		padding: 9px 10px;
		width: 100%;
	}
		.topContainer .telBox .num{
			font-size: 2em;
			font-weight: 600;
			margin-left: 20px;
		}

#sec_voice_under .lead + .lead{
	margin-top: 1em;
}

.tabBtn{
	margin-top: 100px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 11px;
}

.tabBtn li{
	cursor: pointer;
	background: #fff;
	line-height: 50px;
	color: #00aeef;
	font-size: 18px;
	border-radius: 25px;
	padding: 0 20px;
}
.tabBtn li.active{
	color: #fff;
	background: #00aeef;
}

.tabWrapper{
	margin-top: 80px;
}

.js-tab-list .container{
	display: none;
}
.js-tab-list .container.active{
	display: block;
}

.tabWrapper .container .ttl{
	font-size: 24px;
	font-weight: 500;
	max-width: fit-content;
	background: #66ccc5;
	padding: 0 15px;
	line-height: 71px;
	border-top-right-radius: var(--radius-base);
	border-top-left-radius: var(--radius-base);
	border: solid 1px #000;
	border-bottom-color: #66ccc5;
	transform: translateY(1px);
	position: relative;
	z-index: 10;
	min-width: 280px;
}

.tabWrapper .container ul{
	background: #66ccc5;
	border: solid 1px #000;
	border-radius: var(--radius-base);
	border-top-left-radius: 0;
	padding: 30px;
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 40px 20px;
}
	.tabWrapper .recruiter-card{
		width: calc(100% / 4 - 15px);
	}

.tabWrapper .recruiter-card figure{
	border-radius: var(--radius-base);
	overflow: hidden;
	aspect-ratio: 320/200;
	width: 100%;
}
	.tabWrapper .recruiter-card figure img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.tabWrapper .recruiter-card .txtBox{
	background: #fff;
	border: solid 1px #000;
	border-radius: var(--radius-base);
	text-align: justify;
	text-justify: auto;
	line-height: 1.889;
	margin-top: 20px;
	padding: 30px;
	position: relative;
	z-index: 1;
}
.tabWrapper .recruiter-card .txtBox::before,
.tabWrapper .recruiter-card .txtBox::after{
	content: "";
	display: block;
	position: absolute;
	border-style: solid;
}
.tabWrapper .recruiter-card .txtBox::before{
	border-width: 0 7px 17px 7px;
	border-color: transparent transparent #000 transparent;
	bottom: 100%;
	left: calc(100% / 2 - 8px);
}
.tabWrapper .recruiter-card .txtBox::after{
	border-width: 0 6px 16px 6px;
	border-color: transparent transparent #fff transparent;
	bottom: 100%;
	left: calc(100% / 2 - 7px);
}

.tabWrapper .recruiter-card .label{
	margin-top: 9px;
	font-size: 18px;
}


@media screen and (max-width: 1023px){
	#sec_voice_under .topContainer .figBox::before{
		content: "";
		display: block;
		background: url("../img/img_recruiter_01_sp.webp") no-repeat center / contain;
		max-width: 670px;
		aspect-ratio: 1340/862;
		width: 100%;
		margin: 0 auto 35px;
	}
	#sec_voice_under .topContainer .figBox span{
		display: none;
	}
	.tabWrapper .recruiter-card{
		width: calc(100% / 3 - 14px);
	}
}
@media screen and (max-width: 768px){
	:root {
		--radius-base: 5px;
	}
	#sec_voice_under{
		background-size: 9px;
	}
	#sec_voice_under .page_title{
		font-size: clamp(20px,11vw,45px);
	}
	.topContainer .telBox{
		background: #000;
		border: none;
		border-radius: 50px;
		font-size: clamp(12px,4vw,18px);
	}
		.topContainer .telBox a{
			color: #fff;
			border-radius: 10%;
		}
	
	.tabBtn{
		margin-top: 60px;
	}
	
	.tabWrapper{
		margin-top: 60px;
	}
	.tabWrapper .container ul{
		padding: 20px;
		gap: 30px 20px;
	}
	.tabWrapper .recruiter-card{
		width: calc(100% / 2 - 10px);
	}
	
	.tabWrapper .recruiter-card .txtBox{
		font-size: 15px;
		line-height: 1.5;
		padding: 20px;
	}
	.tabWrapper .recruiter-card .label{
		font-size: 15px;
	}
}
@media screen and (max-width: 767px){
	.tabBtn{
		gap: 6px;
	}
	.tabBtn li{
		font-size: clamp(12px,5vw,18px);
		padding: 0 10px;
		width: calc(100% / 2 - 3px);
	}
	.tabBtn li.wid100p{
		width: 100%;
	}
	
	.tabWrapper .container .ttl{
		font-size: 18px;
		min-width: 190px;
		line-height: 41px;
		padding-top: 3px;
	}
}
@media screen and (max-width: 500px){
	.tabWrapper .recruiter-card{
		width: 100%;
	}
}