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

/* ------------------------------------------------------------------
   本文（管理画面で入力したコンテンツ）
   ------------------------------------------------------------------ */

/* 箇条書きは1列。複数列に流し込むのは市町村リスト（買取対象地域のトグル内）だけで、
   文章を箇条書きで書いているケースは横に分割せず1行を広く使う。
   → 複数列の指定は .page-branch .area-toggle > ul 側にのみ持たせている。 */
.page-branch .custom-content-body ul {
	list-style: none !important;
	padding-left: 1em;
	margin-top: 1em;
	margin-bottom: 2.5em;
}

.page-branch .custom-content-body ul li {
	position: relative;
	padding-left: 1.2em;
	margin-bottom: 0.45em;
	font-size: 18px;
	line-height: 1.6;
	/* 各項目が列をまたいで分断されないようにする */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

.page-branch .custom-content-body ul li::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 5px;
	height: 5px;
	background-color: #333;
	border-radius: 50%;
}

/* 番号付きリスト（本文中の箇条書き）。
   テーマのリセット（* { margin: 0; padding: 0 }）で ol の字下げと余白が消えるため、
   番号が本文の外へはみ出し、前後の段落や項目同士の間隔もなくなる。さらに li には
   font-size 指定がなく 16px のまま（本文段落は 18px）で行間も詰まって見える。
   編集画面と同じ字下げ・行間に揃える。
   ※Gutenberg では項目ごとに別の ol ブロックへ分かれることがあるため、項目間の余白は
     ol に持たせる（隣接する ol のマージンは相殺され、項目間は 1em になる）。 */
.page-branch .custom-content-body ol {
	list-style-type: decimal;
	padding-left: 60px;
	margin: 1em 0;
}

.page-branch .custom-content-body ol > li {
	font-size: 18px;
	line-height: 1.8;
}

/* 1つの ol に複数項目が入っている場合の項目間 */
.page-branch .custom-content-body ol > li + li {
	margin-top: 0.8em;
}

/* 番号付きリストの直後の説明段落は、項目テキストと左端を揃える（ol の padding-left と同値）。
   Gutenberg では「番号付きリスト1項目 → 説明の段落」が交互に並ぶため、隣接セレクタで拾える。
   #eachtarget p:not(.balloon) の padding-left: 1em を上書きするので、!important ではなく
   セレクタに #eachtarget を含めて詳細度を上げている。 */
.page-branch #eachtarget .custom-content-body ol + p {
	padding-left: 60px;
}

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

	/* スマホでは本文の字下げが 0 になるため、マーカー分だけ確保する */
	.page-branch .custom-content-body ol {
		padding-left: 34px;
	}

	.page-branch #eachtarget .custom-content-body ol + p {
		padding-left: 34px;
	}

}

/* 買取対象地域：都道府県ごとに開閉（初期は閉じる）。県名クリックで市区町村一覧を表示 */
.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: #32BA7C;
}

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

/* 開いたときの市区町村リスト。上下余白を調整し、画面幅に応じて自動的に複数列へ
   流し込んで縦長を防ぐ（列数は列幅と画面幅から自動決定。短い市町村名が多数並ぶ想定） */
.page-branch .area-toggle > ul {
	margin-top: 0.5em;
	padding-bottom: 0.8em;
	-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;
}

/* ------------------------------------------------------------------
   レイアウト（本文コンテナ・見出し）
   ------------------------------------------------------------------ */

/* 本文の左右に余白を追加（コンテナが 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;
	}
}

/* ------------------------------------------------------------------
   買取実績例ブロック（parts/purchase-record-list.php）
   ※ カード自体のレイアウトは for-otherpage-purchase-record.css を使用。
     ここでは支所ページ用の余白・高さ揃えのみ調整する。
   ------------------------------------------------------------------ */

.page-branch #eachtarget .group.group-purchase-record {
	margin-bottom: 3em;
}

.page-branch #eachtarget .group.group-purchase-record h2.content-head {
	margin-bottom: 1.25em;
}

.page-branch #eachtarget .group.group-purchase-record .purchase-record ul {
	padding: 0 5% 1em;
}

.page-branch #eachtarget .group.group-purchase-record .purchase-record ul li {
	margin-bottom: 1em;
}

@media screen and (max-width: 480px) {
	.page-branch #eachtarget .group.group-purchase-record .purchase-record ul {
		padding: 0 2.5% 1em;
	}
}

/* 表示件数が5件未満のときは中央寄せ・均等配置ではなく左寄せにする */
.page-branch #eachtarget .purchase-record ul.purchase-record-list--align-left {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	gap: 1.875%;
}

/* タイトルは最大4行で切り詰め、カードの高さを揃える */
.page-branch #eachtarget li.each-purchase .title-category p.title {
	font-size: 14px !important;
	line-height: 1.4;
	height: 5.6em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	word-break: break-all;
	margin-top: 5px;
}