/* ============================================================
   一覧ページ共通タブUI
   ・自助会(support)、相談窓口(agency)、メンタルクリニック(clinic)、
     就労支援事業所(facility) の検索ページで共通利用
   ・タブ数は 2 or 3 を想定
   ・タブ内の検索フォーム・地域グリッド等は各CPT個別のCSSで装飾
   ============================================================ */

.listing-tabs__nav {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
	border-bottom: 2px solid #f80;
}
.listing-tabs__btn {
	flex: 1 1 auto;
	padding: 12px 20px;
	background-color: #f7f7f7;
	border: 1px solid #e0e0e0;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: #555;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background-color .15s, color .15s;
}
.listing-tabs__btn .material-icons-round {
	font-size: 20px;
	color: inherit;
}
.listing-tabs__btn:hover {
	background-color: #fff4e0;
	color: #f80;
}
.listing-tabs__btn.is-active {
	background-color: #f80;
	color: #fff;
	border-color: #f80;
}
.listing-tabs__panel {
	display: none;
}
.listing-tabs__panel.is-active {
	display: block;
}

@media screen and (max-width: 600px) {
	.listing-tabs__nav {
		gap: 2px;
	}
	.listing-tabs__btn {
		padding: 10px 8px;
		font-size: 12px;
		border-radius: 6px 6px 0 0;
	}
	.listing-tabs__btn .material-icons-round {
		font-size: 16px;
	}
}

/* セレクト非表示: PCでは visibility:hidden で隙間保持、スマホでは display:none で詰める */
.listing-filter__select-hidden {
	visibility: hidden;
}
@media (max-width: 767px) {
	.listing-filter__select-hidden {
		display: none;
	}
}