/**
 * =====================================================
 * みつピタジョブ関西
 * トップページ求人検索
 * -----------------------------------------------------
 * 配置場所：
 * /wp-content/plugins/mitsupita-kansai/assets/front/css/search.css
 *
 * 役割：
 * ・希望条件から仕事を探す全体の装飾
 * ・検索カード共通部分の装飾
 * ・キーワード検索の装飾
 * ・勤務地検索の装飾
 * ・勤務地カード内の並び順の装飾
 * ・共通検索ボタンの装飾
 * ・PC／タブレット／スマートフォン対応
 *
 * 職種・働き方の入力欄：
 * ・search-options.cssで管理
 *
 * @package Mitsupita_Kansai
 * =====================================================
 */


/**
 * =====================================================
 * 基本設定
 * =====================================================
 */

.mitsupita-kansai-home-search,
.mitsupita-kansai-home-search *,
.mitsupita-kansai-home-search *::before,
.mitsupita-kansai-home-search *::after {
	box-sizing: border-box;
}


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

.mitsupita-kansai-home-search {
	width: 100%;
	margin: 0;
	padding: 64px 20px 72px;
	background: #f3fbf7;
}

.mitsupita-kansai-home-search__inner {
	width: min( 1120px, 100% );
	margin: 0 auto;
}


/**
 * =====================================================
 * セクション見出し
 * =====================================================
 */

.mitsupita-kansai-home-search__header {
	margin: 0 0 32px;
	text-align: center;
}

.mitsupita-kansai-home-search__label {
	margin: 0 0 8px;
	color: #12814d;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.12em;
}

.mitsupita-kansai-home-search__title {
	margin: 0;
	color: #24372f;
	font-size: clamp( 28px, 3vw, 40px );
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.mitsupita-kansai-home-search__description {
	margin: 14px 0 0;
	color: #617168;
	font-size: 15px;
	line-height: 1.8;
}


/**
 * =====================================================
 * 共通フォーム
 * =====================================================
 */

.mitsupita-kansai-home-search__form {
	display: grid;
	gap: 20px;
	width: 100%;
	margin: 0 auto;
}


/**
 * =====================================================
 * 検索カード共通
 * =====================================================
 */

.mitsupita-kansai-search-item {
	width: 100%;
	margin: 0;
	padding: 28px;
	background: #ffffff;
	border: 1px solid #dcece4;
	border-radius: 18px;
	box-shadow:
		0 8px 24px
		rgba( 23, 83, 57, 0.07 );
}

.mitsupita-kansai-search-item__heading {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 22px;
}

.mitsupita-kansai-search-item__number {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #ffffff;
	background: #12814d;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.mitsupita-kansai-search-item__heading-text {
	flex: 1 1 auto;
	min-width: 0;
}

.mitsupita-kansai-search-item__title {
	margin: 0;
	color: #24372f;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
}

.mitsupita-kansai-search-item__description {
	margin: 5px 0 0;
	color: #687870;
	font-size: 14px;
	line-height: 1.7;
}

.mitsupita-kansai-search-item__error {
	margin: 0;
	padding: 14px 16px;
	color: #8a2d2d;
	background: #fff3f3;
	border: 1px solid #f0cccc;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.7;
}


/**
 * =====================================================
 * キーワード検索
 * =====================================================
 */

.mitsupita-kansai-search-keyword__field {
	position: relative;
	width: 100%;
	min-width: 0;
}

.mitsupita-kansai-search-keyword__icon {
	position: absolute;
	top: 50%;
	left: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #12814d;
	transform: translateY( -50% );
	pointer-events: none;
}

.mitsupita-kansai-search-keyword__input {
	display: block;
	width: 100%;
	min-height: 58px;
	margin: 0;
	padding: 14px 18px 14px 50px;
	color: #24372f;
	background: #ffffff;
	border: 1px solid #cfe3d8;
	border-radius: 12px;
	font-size: 16px;
	line-height: 1.5;
	appearance: none;
	-webkit-appearance: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.mitsupita-kansai-search-keyword__input::placeholder {
	color: #98a59f;
}

.mitsupita-kansai-search-keyword__input:hover {
	border-color: #96c9ad;
}

.mitsupita-kansai-search-keyword__input:focus {
	background: #ffffff;
	border-color: #12814d;
	box-shadow:
		0 0 0 4px
		rgba( 18, 129, 77, 0.12 );
	outline: none;
}


/**
 * =====================================================
 * 勤務地検索
 * -----------------------------------------------------
 * PC：
 * 都道府県｜市区町村｜並び順
 * =====================================================
 */

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

.mitsupita-kansai-search-area__fields {
	display: grid;
	grid-template-columns:
		minmax( 0, 1fr )
		minmax( 0, 1fr )
		minmax( 160px, 0.55fr );
	align-items: end;
	gap: 16px;
	width: 100%;
}

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

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

.mitsupita-kansai-search-area__select {
	display: block;
	width: 100%;
	min-height: 58px;
	margin: 0;
	padding: 14px 44px 14px 16px;
	color: #24372f;
	background-color: #ffffff;
	border: 1px solid #cfe3d8;
	border-radius: 12px;
	font-size: 16px;
	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 ) 26px,
		calc( 100% - 14px ) 26px;
	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-area__select:hover:not( :disabled ) {
	border-color: #96c9ad;
}

.mitsupita-kansai-search-area__select:focus {
	border-color: #12814d;
	box-shadow:
		0 0 0 4px
		rgba( 18, 129, 77, 0.12 );
	outline: none;
}

.mitsupita-kansai-search-area__select:disabled {
	color: #8b9891;
	background-color: #f3f6f4;
	border-color: #dce5e0;
	cursor: not-allowed;
	opacity: 1;
}


/**
 * =====================================================
 * 勤務地カード内の並び順
 * =====================================================
 */

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

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

.mitsupita-kansai-search-order__value {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 58px;
	padding: 14px 16px;
	color: #24372f;
	background: #f5faf7;
	border: 1px solid #cfe3d8;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}


/**
 * =====================================================
 * 共通検索ボタン
 * =====================================================
 */

.mitsupita-kansai-home-search__submit {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 4px;
}

.mitsupita-kansai-search-keyword__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 280px;
	min-height: 58px;
	margin: 0;
	padding: 14px 30px;
	color: #ffffff;
	background: #12814d;
	border: 0;
	border-radius: 12px;
	box-shadow:
		0 7px 18px
		rgba( 18, 129, 77, 0.2 );
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.mitsupita-kansai-search-keyword__button:hover {
	color: #ffffff;
	background: #0d6d40;
	box-shadow:
		0 9px 22px
		rgba( 18, 129, 77, 0.27 );
	transform: translateY( -1px );
}

.mitsupita-kansai-search-keyword__button:active {
	transform: translateY( 0 );
}

.mitsupita-kansai-search-keyword__button:focus-visible {
	outline:
		3px solid
		rgba( 18, 129, 77, 0.25 );
	outline-offset: 3px;
}


/**
 * =====================================================
 * WordPressスクリーンリーダー
 * =====================================================
 */

.mitsupita-kansai-home-search .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}


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

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

	.mitsupita-kansai-home-search {
		padding: 52px 20px 60px;
	}

	.mitsupita-kansai-search-item {
		padding: 24px;
	}

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

	.mitsupita-kansai-search-area__field--order {
		grid-column: 1 / -1;
	}

}


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

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

	.mitsupita-kansai-home-search {
		padding: 38px 15px 46px;
	}

	.mitsupita-kansai-home-search__header {
		margin-bottom: 24px;
		text-align: left;
	}

	.mitsupita-kansai-home-search__label {
		font-size: 12px;
	}

	.mitsupita-kansai-home-search__title {
		font-size: 27px;
	}

	.mitsupita-kansai-home-search__description {
		margin-top: 10px;
		font-size: 14px;
		line-height: 1.7;
	}

	.mitsupita-kansai-home-search__form {
		gap: 16px;
	}

	.mitsupita-kansai-search-item {
		padding: 20px 16px;
		border-radius: 15px;
	}

	.mitsupita-kansai-search-item__heading {
		gap: 10px;
		margin-bottom: 18px;
	}

	.mitsupita-kansai-search-item__number {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	.mitsupita-kansai-search-item__title {
		font-size: 18px;
	}

	.mitsupita-kansai-search-item__description {
		font-size: 13px;
	}

	.mitsupita-kansai-search-keyword__input {
		min-height: 54px;
		padding-left: 46px;
		font-size: 16px;
	}

	.mitsupita-kansai-search-keyword__icon {
		left: 16px;
	}

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

	.mitsupita-kansai-search-area__field--order {
		grid-column: auto;
	}

	.mitsupita-kansai-search-area__select,
	.mitsupita-kansai-search-order__value {
		min-height: 54px;
		font-size: 16px;
	}

	.mitsupita-kansai-search-area__select {
		background-position:
			calc( 100% - 20px ) 24px,
			calc( 100% - 14px ) 24px;
	}

	.mitsupita-kansai-search-keyword__button {
		width: 100%;
		min-width: 0;
		min-height: 54px;
	}

}


/**
 * =====================================================
 * 小さいスマートフォン
 * =====================================================
 */

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

	.mitsupita-kansai-home-search {
		padding-right: 12px;
		padding-left: 12px;
	}

	.mitsupita-kansai-search-item {
		padding-right: 14px;
		padding-left: 14px;
	}

	.mitsupita-kansai-home-search__title {
		font-size: 24px;
	}

}