@charset "utf-8";
/* =====================================================================
   支所（拠点）ページ専用スタイル
   対象テンプレート: page-branch.php（Template Name: 支所（拠点））
   ※ eachtarget.css は他ページと共用で編集不可のため、支所ページ固有の
     追記はこのファイルに `.page-branch` スコープで記述する。
   ===================================================================== */

/* 市町村リスト：画面幅に応じて自動的に複数列へ流し込み、縦長を防ぐ。
   （列数は列幅と画面幅から自動決定。短い市町村名が多数並ぶ想定） */
.page-branch .custom-content-body ul {
	-webkit-columns: 14em auto;
	-moz-columns: 14em auto;
	columns: 14em auto;
	-webkit-column-gap: 2.5em;
	-moz-column-gap: 2.5em;
	column-gap: 2.5em;
}

/* 各項目が列をまたいで分断されないようにする */
.page-branch .custom-content-body ul li {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	margin-bottom: 0.45em;
}

/* 買取対象地域：都道府県ごとに開閉（初期は閉じる）。県名クリックで市区町村一覧を表示 */
.page-branch .area-toggle {
	border-bottom: 1px solid #d7d8e0;
}

.page-branch .area-toggle > summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 0.7em 2em 0.7em 0;
	font-size: 20px;
	font-weight: 700;
}

/* デフォルトの開閉マーカーを消す（Chrome/Safari 等） */
.page-branch .area-toggle > summary::-webkit-details-marker {
	display: none;
}

/* 右端に開閉インジケーター（＋／－） */
.page-branch .area-toggle > summary::after {
	content: "＋";
	position: absolute;
	top: 50%;
	right: 0.2em;
	transform: translateY(-50%);
	font-weight: 700;
	color: var(--theme--b, #1b50a2);
}

.page-branch .area-toggle[open] > summary::after {
	content: "－";
}

/* 開いたときの市区町村リストの上下余白を調整 */
.page-branch .area-toggle > ul {
	margin-top: 0.5em;
	padding-bottom: 0.8em;
}

/* 本文の左右に余白を追加（コンテナが padding:0 で端に詰まって見えるため） */
.page-branch #eachtarget {
	padding-left: 24px;
	padding-right: 24px;
}

@media screen and (max-width: 767px) {
	.page-branch #eachtarget {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* セクション見出し（H2）同士の間隔を広げる。先頭だけは詰める */
.page-branch #eachtarget h2.content-head {
	margin-top: 48px;
}

.page-branch #eachtarget h2.content-head:first-child {
	margin-top: 0;
}

@media screen and (max-width: 767px) {
	.page-branch #eachtarget h2.content-head {
		margin-top: 32px;
	}
}