@charset "UTF-8";



/* ------------------------------
	.people
------------------------------ */
body{
	padding-top: 0;
}
.header_wrap{
	background: transparent;
}
.people{
	padding: 100px 0;
}

.people .wrap{
	max-width: 960px;
}

/* 絞り込みフィルター */
.people_filter{
	margin-bottom: 60px;
}

.people_filter_section{
	margin-bottom: 30px;
}

.people_filter_section:last-child{
	margin-bottom: 0;
}

.people_filter_ttl{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 0 20px;
	font-size: 2rem;
	font-weight: bold;
	line-height: 150%;
	color: #464C60;
}

.people_filter_note{
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 150%;
	color: #464C60;
}

.people_filter_btns{
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
}

.people_filter_btn{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 20px 15px 50px;
	border-radius: 999px;
	background: #fff;
	font-size: 1.4rem;
	color: #333;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	position: relative;
	border: 1px solid #ABC5D0;
}

.people_filter_btn::before{
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	background-color: #F3F9FB;
	background-image: none;
	background-repeat: no-repeat;
	background-position: center 60%;
	background-size: 15px auto;
	border-radius: 50px;
}

.people_filter_btn:hover{
	opacity: 1;
}

.people_filter_btn.is_active{
	border-color: #464C60;
	background-color: #464C60;
	color: #FFF;
}

.people_filter_btn.is_active::before{
	background-color: #F3F9FB;
	box-shadow: none;
	background-image: url(../images/people/people_ico_check.png);
}

.people_box.is_hidden{
	display: none !important;
}

.people .str_ttl{
	margin-bottom: 75px;
}

.people .btn{
	margin-top: 60px;
}

.people_list{
	display: flex;
	flex-wrap: wrap;
}

.people_list_empty{
	display: none;
	width: 100%;
	text-align: center;
	padding: 60px 20px;
	font-size: 1.6rem;
	color: #464c60;
}

.people_box{
	width: 29.167%;
}

@media screen and (min-width: 769px) {
	.people_list{
		column-gap: 6.2495%;
		row-gap: 60px;
	}
	/* 検索結果数に関わらずPCは常に3カラム */
	.people_box{
		width: 29.167%;
	}
}

.people_box a{
	display: block;
}

.people_box .img{
	width: 100%;
	margin-bottom: 30px;
}

.people_box .ico_txt{
	display: inline-block;
	padding: 10px 15px 10px 40px;
	margin-bottom: 15px;
	background: #fff;
	border-radius: 30px;
	font-weight: bold;
	color: #eb8020;
	background-size: 16px 16px;
	background-position: 15px center;
	background-repeat: no-repeat;
}
/*  元旅行系  */
.people_box .ico01{
	background-color: #FBF6F6;
	background-image: url(../images/people/people_ico01.svg);
	color: #F55555;
}
/*  元小売系  */
.people_box .ico02{
	background-color: #F9F7F5;
	background-image: url(../images/people/people_ico02.svg);
	color: #F76638;
}
/*  元食品メーカー系  */
.people_box .ico03{
	background-color: #F9F8F5;
	background-image: url(../images/people/people_ico03.svg);
	color: #F79B38;
}
/*  元飲食系  */
.people_box .ico04{
	background-color: #F7F7ED;
	background-image: url(../images/people/people_ico04.svg);
	color: #DCB800;
}
/*  元航空系  */
.people_box .ico05{
	background-color: #F6F9F5;
	background-image: url(../images/people/people_ico05.svg);
	color: #4AC539;
}
/*  元不動産系  */
.people_box .ico06{
	background-color: #F3FAF8;
	background-image: url(../images/people/people_ico06.svg);
	color: #3FAF89;
}
/*  元宿泊施設系  */
.people_box .ico07{
	background-color: #F3FAF9;
	background-image: url(../images/people/people_ico07.svg);
	color: #35929D;
}
/*  元アパレル系  */
.people_box .ico08{
	background-color: #F0F9FA;
	background-image: url(../images/people/people_ico08.svg);
	color: #1DB9EA;
}
/*  元アスリート系  */
.people_box .ico09{
	background-color: #F3F9FD;
	background-image: url(../images/people/people_ico09.svg);
	color: #6796C2;
}
/*  元教育系  */
.people_box .ico10{
	background-color: #F5F6F9;
	background-image: url(../images/people/people_ico10.svg);
	color: #557AFF;
}
/*  元金融系  */
.people_box .ico11{
	background-color: #F7F5F8;
	background-image: url(../images/people/people_ico11.svg);
	color: #9678F9;
}
/*  元事務系  */
.people_box .ico12{
	background-color: #F8F5F9;
	background-image: url(../images/people/people_ico12.svg);
	color: #C55BE0;
}
/*  元ブライダル系  */
.people_box .ico13{
	background-color: #FAF4F9;
	background-image: url(../images/people/people_ico13.svg);
	color: #E66EC4;
}
/*  元美容系  */
.people_box .ico14{
	background-color: #FCF5F8;
	background-image: url(../images/people/people_ico14.svg);
	color: #F9628B;
}

.people_box .txt{
	font-weight: bold;
	font-size: 2.0rem;
	line-height: 1.6;
}

.people_box .name_box{
	margin-top: 20px;
}

.people_box .name_ttl{
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 1.3;
}

.people_box .name_txt{
	margin-top: 10px;
	font-size: 1.4rem;
	line-height: 1.3;
}


@media screen and (max-width: 768px) {
	.people{
		padding: 50px 0;
	}

	.people_filter{
		margin-bottom: 40px;
	}

	.people_filter_section{
		margin-bottom: 24px;
	}

	.people_filter_ttl{
		font-size: 1.6rem;
		margin-bottom: 12px;
	}

	.people_filter_note{
		font-size: 1.1rem;
	}

	.people_filter_btn{
		padding: 8px 16px 8px 32px;
		font-size: 1.3rem;
	}

	.people_filter_btn::before{
		left: 12px;
		width: 10px;
		height: 10px;
	}

	.people .str_ttl{
		margin-bottom: 45px;
	}

	.people .btn{
		margin-top: 45px;
	}

	.people_list{
		column-gap: 4%;
		row-gap: 30px;
	}

	/* 検索結果数に関わらずSPは常に2カラム */
	.people_box{
		width: 48%;
	}

	.people_box .img{
		margin-bottom: 15px;
	}

	.people_box .ico_txt{
		padding: 6px 8px 6px 20px;
		margin-bottom: 10px;
		font-size: 1.1rem;
		background-size: 10px;
		background-position: 8px center;
	}

	/* .people_box .ico01{
		background-size: 9px;
		background-position: 8px center;
	}
	.people_box .ico02{
		background-size: 10px;
		background-position: 8px center;
	}
	.people_box .ico03{
		background-size: 8px;
		background-position: 9px center;
	}
	.people_box .ico04{
		background-size: 10px;
		background-position: 8px center;
	}
	.people_box .ico05{
		background-size: 10px;
		background-position: 8px center;
	}
	.people_box .ico06{
		background-size: 10px;
		background-position: 8px center;
	}
	.people_box .ico07{
		background-size: 9px;
		background-position: 8px center;
	}
	.people_box .ico08{
		background-size: 12px;
		background-position: 6px center;
	}
	.people_box .ico09{
		background-size: 10px;
		background-position: 8px center;
	}
	.people_box .ico10{
		background-size: 7px;
		background-position: 10px center;
	}
	.people_box .ico11{
		background-size: 10px;
		background-position: 8px center;
	}
	.people_box .ico12{
		background-size: 8px;
		background-position: 8px center;
	}
	.people_box .ico13{
		background-size: 10px;
		background-position: 8px center;
	} */

	.people_box .txt{
		font-size: 1.3rem;
	}

	.people_box .name_box{
		margin-top: 10px;
	}

	.people_box .name_ttl{
		font-size: 1.2rem;
	}

	.people_box .name_txt{
		margin-top: 5px;
		font-size: 1.0rem;
	}
}