/**
 * =====================================================
 * みつピタジョブ関西
 * トップ検索：職種・働き方
 * -----------------------------------------------------
 * 配置場所：
 * /wp-content/plugins/mitsupita-kansai/assets/front/css/search-options.css
 *
 * 役割：
 * ・職種カテゴリーを整える
 * ・詳しい職種を整える
 * ・雇用形態を同じカード内で整える
 * ・PCでは3項目を横一列にする
 * ・スマホでは縦並びにする
 *
 * @package Mitsupita_Kansai
 * =====================================================
 */


/**
 * =====================================================
 * 職種・働き方カード
 * =====================================================
 */

.mitsupita-kansai-search-occupation {
	width: 100%;
}

.mitsupita-kansai-search-occupation__fields {
	display: grid;
	grid-template-columns:
		repeat(
			3,
			minmax( 0, 1fr )
		);
	gap: 16px;
	width: 100%;
}

.mitsupita-kansai-search-occupation__field {
	min-width: 0;
}

.mitsupita-kansai-search-occupation__label {
	display: block;
	margin: 0 0 8px;
	color: #33453c;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}


/**
 * =====================================================
 * セレクトボックス共通
 * =====================================================
 */

.mitsupita-kansai-search-occupation__select {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 0 44px 0 16px;
	border: 1px solid #d9e4de;
	border-radius: 10px;
	background-color: #ffffff;
	color: #24332c;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image:
		linear-gradient(
			45deg,
			transparent 50%,
			#47705a 50%
		),
		linear-gradient(
			135deg,
			#47705a 50%,
			transparent 50%
		);
	background-position:
		calc( 100% - 20px ) 22px,
		calc( 100% - 14px ) 22px;
	background-repeat: no-repeat;
	background-size:
		6px 6px,
		6px 6px;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.mitsupita-kansai-search-occupation__select:hover {
	border-color: #9fcdb5;
}

.mitsupita-kansai-search-occupation__select:focus {
	border-color: #16864b;
	box-shadow:
		0 0 0 3px
		rgba( 22, 134, 75, 0.12 );
	outline: none;
}

.mitsupita-kansai-search-occupation__select:disabled {
	border-color: #e1e7e4;
	background-color: #f3f6f4;
	color: #8a9790;
	cursor: not-allowed;
}


/**
 * =====================================================
 * PC
 * =====================================================
 */

@media screen and ( min-width: 769px ) {

	.mitsupita-kansai-search-occupation__fields {
		align-items: end;
	}

}


/**
 * =====================================================
 * タブレット
 * =====================================================
 */

@media screen and ( min-width: 769px )
	and ( max-width: 1024px ) {

	.mitsupita-kansai-search-occupation__fields {
		grid-template-columns:
			repeat(
				2,
				minmax( 0, 1fr )
			);
	}

	.mitsupita-kansai-search-occupation__field:last-child {
		grid-column:
			1 / -1;
	}

}


/**
 * =====================================================
 * スマホ
 * =====================================================
 */

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

	.mitsupita-kansai-search-occupation__fields {
		grid-template-columns:
			minmax( 0, 1fr );
		gap: 14px;
	}

	.mitsupita-kansai-search-occupation__select {
		min-height: 50px;
		font-size: 16px;
	}

}