/**
 * =====================================================
 * 求人詳細ページ：この求人の特徴
 * -----------------------------------------------------
 * ・求人に設定された特徴タグを表示
 * ・PC：3カラム
 * ・タブレット：2カラム
 * ・スマートフォン：1カラム
 * ・最大9項目を見やすく表示
 * =====================================================
 */

/* =====================================================
 * セクション全体
 * ===================================================== */

.mpj-job-highlights {
	width: 100%;
	padding: 8px 0 28px;
	box-sizing: border-box;
}

.mpj-job-highlights__inner {
	width: 100%;
	padding: 30px 32px;
	background: #ffffff;
	border: 1px solid #dcebe3;
	border-radius: 22px;
	box-shadow: 0 10px 28px rgba(47, 107, 79, 0.08);
	box-sizing: border-box;
}

/* =====================================================
 * 見出し
 * ===================================================== */

.mpj-job-highlights__heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
}

.mpj-job-highlights__heading-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	margin: 0;
	color: #ffffff;
	font-size: 19px;
	font-weight: 800;
	line-height: 1;
	background: #2f8f63;
	border-radius: 50%;
}

.mpj-job-highlights__title {
	margin: 0;
	color: #264c3b;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* =====================================================
 * 特徴タグ一覧
 * -----------------------------------------------------
 * PC：3カラム
 * ===================================================== */

.mpj-job-highlights__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

/* =====================================================
 * 各特徴タグ
 * ===================================================== */

.mpj-job-highlights__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 56px;
	margin: 0;
	padding: 13px 15px;
	background:
		linear-gradient(
			135deg,
			#f3fff8 0%,
			#fffdf3 100%
		);
	border: 1px solid #dcebe3;
	border-radius: 13px;
	box-sizing: border-box;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

/* =====================================================
 * PCのみ軽いホバー表現
 * ===================================================== */

@media (hover: hover) and (pointer: fine) {

	.mpj-job-highlights__item:hover {
		border-color: #bcdccb;
		box-shadow: 0 6px 16px rgba(47, 143, 99, 0.09);
		transform: translateY(-1px);
	}

}

/* =====================================================
 * チェックアイコン
 * ===================================================== */

.mpj-job-highlights__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	background: #2f8f63;
	border-radius: 50%;
}

/* =====================================================
 * 特徴タグ文字
 * ===================================================== */

.mpj-job-highlights__text {
	display: block;
	min-width: 0;
	margin: 0;
	color: #304d40;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* =====================================================
 * タブレット
 * -----------------------------------------------------
 * 2カラム
 * ===================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

	.mpj-job-highlights__inner {
		padding: 28px 24px;
		border-radius: 20px;
	}

	.mpj-job-highlights__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 13px 14px;
	}

	.mpj-job-highlights__item {
		min-height: 54px;
		padding: 13px 14px;
	}

	.mpj-job-highlights__text {
		font-size: 15px;
	}

}

/* =====================================================
 * スマートフォン
 * -----------------------------------------------------
 * 1カラム
 * ===================================================== */

@media (max-width: 767px) {

	.mpj-job-highlights {
		padding: 4px 0 22px;
	}

	.mpj-job-highlights__inner {
		padding: 22px 16px;
		border-radius: 16px;
	}

	.mpj-job-highlights__heading {
		gap: 10px;
		margin-bottom: 18px;
	}

	.mpj-job-highlights__heading-icon {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
		font-size: 16px;
	}

	.mpj-job-highlights__title {
		font-size: 20px;
		line-height: 1.4;
	}

	.mpj-job-highlights__list {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.mpj-job-highlights__item {
		min-height: 50px;
		padding: 12px 13px;
		border-radius: 12px;
	}

	.mpj-job-highlights__check {
		flex-basis: 21px;
		width: 21px;
		height: 21px;
		font-size: 11px;
	}

	.mpj-job-highlights__text {
		font-size: 14px;
		line-height: 1.5;
	}

}

/* =====================================================
 * 小型スマートフォン
 * ===================================================== */

@media (max-width: 430px) {

	.mpj-job-highlights__inner {
		padding: 20px 14px;
	}

	.mpj-job-highlights__title {
		font-size: 19px;
	}

}