@charset "utf-8";
/* ============================================================
   温泉マイル提携施設一覧 エリアタブ切り替え見本用CSS
   （onsen_list_pc_tab.php / onsenlist3_pc_tab.php 専用）
   list_pc.css を読み込んだ上で追加適用します
   既存ページには読み込まれません
   ============================================================ */

/* タブ版ではエリアは1つずつ表示（初期は非表示、JSでアクティブを表示） */
#list-bun-pc .area-block {
	display: none;
}

/* タブ版ではエリア内のアンカーメニューは使わない */
#list-bun-pc .ivent {
	display: none;
}

/* エリア見出しと直下テーブルの赤線が重ならないよう余白を確保 */
#list-bun-pc .amenu {
	margin-bottom: 20px;
}

/* ------------------------------------------------------------
   エリアタブ
   ------------------------------------------------------------ */
.area-tabs {
	display: flex;
	margin: 20px 0;
	border-bottom: 1px solid #ccc;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.area-tab {
	flex: 1 0 auto;
	padding: 14px 12px;
	border: none;
	border-bottom: 3px solid transparent;
	background: none;
	color: #333;
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
}

.area-tab:hover {
	color: #bb0000;
}

.area-tab.active {
	color: #bb0000;
	font-weight: bold;
	border-bottom-color: #bb0000;
}

/* ------------------------------------------------------------
   スマホ：タブは4列×2段で全エリアを表示（横スクロールしない）
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
	.area-tabs {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow: visible;
		margin: 15px 0;
	}

	.area-tab {
		padding: 10px 2px;
		font-size: 13px;
		line-height: 1.3;
		white-space: normal;
	}
}