/* =============================================================
 * agency 刷新 (Phase 5) 追加スタイル — 改訂版
 *
 * 設計方針:
 *  - サイト本来のトーン (温かみのあるピンク〜オレンジ系) に統一
 *  - 警告色や巨大文字は避ける
 *  - 利用者が「重い」「怖い」と感じない控えめなデザイン
 *  - 緊急バナーは折りたたみ式で、必要な人だけ開く
 * ============================================================= */

/* --- 共通カラー変数 (グローバル定義: agency 関連すべての子要素で利用可) --- */
:root {
	--c-base:        #fff;
	--c-bg-soft:     #fff8f3;       /* サイト共通の薄オレンジ */
	--c-bg-card:     #fff;
	--c-border:      #f3d9c5;       /* 薄いオレンジ系ボーダー */
	--c-border-soft: #f0e6dc;
	--c-text:        #3a3a3a;
	--c-text-sub:    #7a7a7a;
	--c-accent:      #f08c4b;       /* オレンジ */
	--c-accent-soft: #fcebd9;
	--c-pink:        #f7b9b9;
	--c-pink-soft:   #fdecec;
	--radius:        12px;
}

/* =============================================================
 * 1. 「今すぐ話したい方へ」折りたたみブロック
 * ============================================================= */
.agency-quick-help {
	margin: 16px 0 24px;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
}
.agency-quick-help__summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	cursor: pointer;
	font-weight: bold;
	color: var(--c-text);
	user-select: none;
	transition: background 0.15s;
}
.agency-quick-help__summary::-webkit-details-marker { display: none; }
.agency-quick-help__summary:hover { background: rgba(240, 140, 75, 0.06); }
.agency-quick-help__icon {
	color: var(--c-pink);
	font-size: 22px !important;
}
.agency-quick-help__title { flex: 1; font-size: 15px; }
.agency-quick-help__meta {
	font-size: 12px;
	color: var(--c-accent);
	background: var(--c-accent-soft);
	padding: 3px 10px;
	border-radius: 12px;
	font-weight: bold;
}
.agency-quick-help__chevron {
	transition: transform 0.2s;
	color: var(--c-text-sub);
}
.agency-quick-help[open] .agency-quick-help__chevron { transform: rotate(180deg); }
.agency-quick-help__body {
	padding: 4px 16px 16px;
	border-top: 1px dashed var(--c-border);
	background: var(--c-base);
}
.agency-quick-help__lead {
	margin: 12px 0 12px;
	font-size: 13px;
	color: var(--c-text-sub);
	line-height: 1.6;
}
.agency-quick-help__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.agency-quick-help__link {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	gap: 2px 12px;
	padding: 12px 14px;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-border);
	border-radius: 10px;
	text-decoration: none;
	color: var(--c-text);
	transition: background 0.15s;
}
.agency-quick-help__link:hover {
	background: var(--c-accent-soft);
	text-decoration: none;
}
.agency-quick-help__name {
	font-weight: bold;
	font-size: 14px;
	color: var(--c-text);
}
.agency-quick-help__num {
	grid-row: 1 / 3;
	grid-column: 2;
	align-self: center;
	font-size: 18px;
	font-weight: bold;
	color: var(--c-accent);
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.agency-quick-help__note {
	font-size: 12px;
	color: var(--c-text-sub);
}
.agency-quick-help__link--police .agency-quick-help__num {
	color: #5a7a9c;
}

/* =============================================================
 * 2. 気持ちから探すカード(トリアージ)
 * ============================================================= */
.agency-triage {
	margin: 24px 0 32px;
}
.agency-triage__head {
	margin-bottom: 16px;
}
.agency-triage__heading {
	display: inline-block;
	font-size: 20px;
	margin: 0 0 6px;
	color: var(--c-text);
	padding-bottom: 4px;
	border-bottom: 3px solid var(--c-accent-soft);
}
.agency-triage__lead {
	margin: 0;
	font-size: 13px;
	color: var(--c-text-sub);
	line-height: 1.7;
}
.agency-triage__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.agency-triage__details {
	border: 1px solid var(--c-border-soft);
	border-radius: var(--radius);
	background: var(--c-base);
	overflow: hidden;
	transition: border-color 0.15s;
}
.agency-triage__details[open] {
	border-color: var(--c-border);
	box-shadow: 0 4px 12px rgba(240, 140, 75, 0.10);
}
.agency-triage__card {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--c-base);
	text-decoration: none;
	color: var(--c-text);
	cursor: pointer;
	user-select: none;
	transition: background 0.15s;
}
.agency-triage__card::-webkit-details-marker { display: none; }
.agency-triage__details[open] .agency-triage__card {
	background: var(--c-bg-soft);
	border-bottom: 1px solid var(--c-border-soft);
}
.agency-triage__card:hover {
	background: var(--c-bg-soft);
}
.agency-triage__chevron {
	color: var(--c-text-sub);
	transition: transform 0.2s;
}
.agency-triage__details[open] .agency-triage__chevron { transform: rotate(180deg); }

/* 展開コンテンツ */
.agency-triage__body {
	padding: 14px 16px 16px;
	background: var(--c-base);
}
.agency-triage__intro {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--c-text);
	background: var(--c-accent-soft);
	padding: 8px 12px;
	border-radius: 6px;
}
.agency-triage__intro .material-icons-round {
	font-size: 16px !important;
	color: var(--c-accent);
}
.agency-triage__intro strong { color: var(--c-accent); }
.agency-triage-pick__tags li.is-strong {
	background: var(--c-accent);
	color: #fff;
	border-color: var(--c-accent);
	font-weight: bold;
}
.agency-triage__picks {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.agency-triage-pick__link {
	display: block;
	padding: 12px 14px;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-border-soft);
	border-radius: 8px;
	text-decoration: none;
	color: var(--c-text);
	transition: all 0.15s;
}
.agency-triage-pick__link:hover {
	background: var(--c-accent-soft);
	border-color: var(--c-border);
	text-decoration: none;
}
.agency-triage-pick__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}
.agency-triage-pick__title {
	font-weight: bold;
	font-size: 14px;
	flex: 1;
	min-width: 0;
}
.agency-triage-pick__badge {
	font-size: 11px;
	color: var(--c-accent);
	background: #fff;
	border: 1px solid var(--c-accent);
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
}
.agency-triage-pick__badge--emergency {
	color: #fff;
	background: var(--c-accent);
}
.agency-triage-pick__desc {
	margin: 4px 0 6px;
	font-size: 12px;
	color: var(--c-text-sub);
	line-height: 1.6;
}
.agency-triage-pick__tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.agency-triage-pick__tags li {
	font-size: 11px;
	padding: 2px 7px;
	background: #fff;
	border: 1px solid var(--c-border-soft);
	color: var(--c-text-sub);
	border-radius: 8px;
}
.agency-triage__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 15px auto 4px;
	padding: 10px 20px;
	min-width: 220px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	border: 1px solid var(--c-accent);
	background: var(--c-accent);
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.15s;
}
.agency-triage__more:hover {
	background: #d97534;
	color: #fff;
	text-decoration: none;
}
.agency-triage__more .material-icons-round {
	font-size: 16px !important;
}
/* 「すべて見る」ボタンを中央配置するため、親 body の中で block 化 */
.agency-triage__body > .agency-triage__more {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}
.agency-triage__empty {
	margin: 0;
	padding: 12px;
	color: var(--c-text-sub);
	font-size: 13px;
	text-align: center;
}
.agency-triage__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-accent-soft);
	color: var(--c-accent);
	border-radius: 50%;
	font-size: 22px !important;
}
.agency-triage__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.agency-triage__title {
	font-weight: bold;
	font-size: 15px;
	line-height: 1.4;
}
.agency-triage__sub {
	font-size: 12px;
	color: var(--c-text-sub);
	line-height: 1.4;
}
.agency-triage__count,
.agency-triage__count-tag {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--c-accent);
	background: var(--c-accent-soft);
	padding: 3px 8px;
	border-radius: 10px;
	font-weight: bold;
	white-space: nowrap;
}
.agency-triage__children {
	margin-top: 18px;
	margin-bottom: 8px;
	padding-top: 12px;
	border-top: 1px dashed var(--c-border-soft);
}
.agency-triage__children-heading {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--c-text-sub);
	font-weight: bold;
}
.agency-triage__children-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.agency-triage__children-list li a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: #fff;
	border: 1px solid var(--c-border-soft);
	border-radius: 12px;
	font-size: 12px;
	color: var(--c-text);
	text-decoration: none;
	transition: all 0.15s;
}
.agency-triage__children-list li a:hover {
	background: var(--c-accent-soft);
	border-color: var(--c-border);
	text-decoration: none;
}
.agency-triage__children-list .cnt {
	font-size: 10px;
	color: var(--c-text-sub);
}

/* =============================================================
 * 3. 特性バッジ (詳細ページ用) — 一覧の .agency-loop-badges と統一
 *  ルール: 標準 = 薄オレンジ背景 (--c-bg-soft) / 標準文字色
 *          強調 (is-strong) = もう少し濃い薄オレンジ (--c-accent-soft) / 標準文字色 / 太字
 *  文字色や枠色は変えず、背景の濃淡だけで強弱を表現
 * ============================================================= */
.agency-feature-badges {
	list-style: none;
	margin: 12px 0 8px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.agency-feature-badges__item {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 10px;
	border-radius: 14px;
	font-size: 11px;
	background: var(--c-bg-soft);
	color: var(--c-text);
	border: 1px solid var(--c-border-soft);
	white-space: nowrap;
}
.agency-feature-badges__item .material-icons-round {
	font-size: 13px !important;
	color: var(--c-text-sub);
}
.agency-feature-badges__item.is-strong {
	background: var(--c-accent-soft);
	color: var(--c-text);
	border-color: var(--c-border);
	font-weight: bold;
}
.agency-feature-badges--sm .agency-feature-badges__item {
	font-size: 10px;
	padding: 2px 8px;
}
/* Phase G: 緊急/全国対応バッジ (タイトル直下) の下にもマージン */
.agency-pickup-badges + .agency-feature-badges {
	margin-top: 10px;
}
/* 「最終更新日」表示の上下にマージン */
.agency-feature-badges + .post-info,
.post-info.topic-info {
	margin: 18px 0 14px !important;
}

/* =============================================================
 * 4. FAQ アコーディオン
 * ============================================================= */
.agency-faq {
	margin: 32px 0;
}
/* 個別ページのセクション見出し (概要 / 基本情報 / よくある質問) を統一
   オレンジ色テキスト・大きめフォント・共通CSSの装飾を打ち消す */
.article__type-box h2.agency-section-heading,
h2.agency-section-heading,
section.agency-faq h2.agency-faq__heading,
.agency-faq h2.agency-faq__heading,
h2.agency-faq__heading {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: 22px !important;
	font-weight: bold !important;
	margin: 32px 0 16px !important;
	padding: 0 !important;
	border: none !important;
	border-bottom: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--c-accent) !important;          /* オレンジ色 */
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
}
h2.agency-section-heading::before,
h2.agency-section-heading::after,
h2.agency-faq__heading::before,
h2.agency-faq__heading::after {
	display: none !important;
	content: none !important;
	background: none !important;
}
h2.agency-section-heading .material-icons-round,
h2.agency-faq__heading .material-icons-round {
	color: var(--c-accent) !important;
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	font-size: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	line-height: 1 !important;
}
/* 概要本文 (テーブル外) — フォントサイズは指定せず標準のまま */
.agency-section-content {
	margin: 0 0 24px;
}
/* 最下部に移動した状況・地域タグ */
.agency-info.agency-info--bottom {
	margin-top: 48px;
}
.agency-faq__list { margin: 0; padding: 0; }
.agency-faq__item {
	border: 1px solid var(--c-border-soft);
	border-radius: 10px;
	margin-bottom: 8px;
	overflow: hidden;
	background: var(--c-base);
}
.agency-faq__q { margin: 0; }
.agency-faq__toggle {
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: var(--c-base);
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--c-text);
	transition: background 0.15s;
}
.agency-faq__toggle:hover { background: var(--c-bg-soft); }
.agency-faq__q-mark {
	display: inline-block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background: var(--c-accent);
	color: #fff;
	border-radius: 4px;
	text-align: center;
	font-weight: bold;
	line-height: 22px;
	font-size: 13px;
}
.agency-faq__q-text { flex: 1; font-weight: bold; font-size: 14px; line-height: 1.5; }
.agency-faq__q-icon { transition: transform 0.2s; color: var(--c-text-sub); }
.agency-faq__item.is-open .agency-faq__q-icon { transform: rotate(180deg); }
.agency-faq__a {
	display: none;
	padding: 0 16px 14px 50px;
	background: #fff;
	color: var(--c-text);
	font-size: 13px;
	line-height: 1.7;
}
.agency-faq__item.is-open .agency-faq__a { display: block; padding-top: 12px; }
.agency-faq__a-mark { display: none; }
.agency-faq__a-text { margin: 0; }

/* =============================================================
 * 5. 拡張フィルタ
 * ============================================================= */
.filter-agency-extended {
	margin: 12px 0;
}
.filter-agency-extended__details {
	background: var(--c-bg-soft);
	border: 1px solid var(--c-border-soft);
	border-radius: var(--radius);
	padding: 12px 16px;
}
.filter-agency-extended__summary {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-weight: bold;
	font-size: 14px;
	color: var(--c-accent);
	user-select: none;
}
.filter-agency-extended__group {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
}
.filter-agency-extended__group legend {
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 6px;
	color: var(--c-text);
}
.filter-agency-extended__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.filter-agency-extended__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	background: var(--c-base);
	border: 1px solid var(--c-border-soft);
	border-radius: 16px;
	font-size: 13px;
	cursor: pointer;
	color: var(--c-text);
	transition: all 0.1s;
}
.filter-agency-extended__chip input { display: none; }
.filter-agency-extended__chip:hover {
	background: var(--c-accent-soft);
	border-color: var(--c-accent);
}
.filter-agency-extended__chip.is-checked {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
}
.filter-agency-extended__chip .count {
	font-size: 11px;
	opacity: 0.7;
}
.filter-agency-extended__actions {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	align-items: center;
}
.filter-agency-extended__submit {
	background: var(--c-accent);
	color: #fff;
	border: 0;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
}
.filter-agency-extended__submit:hover { background: #d97534; }
.filter-agency-extended__reset {
	color: var(--c-text-sub);
	font-size: 13px;
}

/* =============================================================
 * 6. カテゴリーから探すタブ (Phase A-1: 4軸タクソノミー)
 * ============================================================= */
.agency-cat-grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 16px 0 8px;
}
.agency-cat-section {
	background: var(--c-base);
	border: 1px solid var(--c-border-soft);
	border-radius: var(--radius);
	padding: 16px;
}
.agency-cat-section__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	margin: 0 0 4px;
	color: var(--c-text);
}
.agency-cat-section__heading .material-icons-round {
	color: var(--c-accent);
	font-size: 20px !important;
}
.agency-cat-section__desc {
	margin: 0 0 12px;
	font-size: 12px;
	color: var(--c-text-sub);
}
.agency-cat-section__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.agency-cat-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-border);
	border-radius: 16px;
	font-size: 13px;
	color: var(--c-text);
	text-decoration: none;
	transition: all 0.15s;
}
.agency-cat-chip:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
	text-decoration: none;
}
.agency-cat-chip__count {
	font-size: 11px;
	opacity: 0.7;
}

/* listing-tabs 見出しとヒント */
.listing-tabs__heading {
	font-size: 18px;
	margin: 32px 0 8px;
	color: var(--c-text);
}
.listing-tabs__hint {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px;
	margin: 16px 0;
	background: var(--c-bg-soft);
	border-radius: 8px;
	color: var(--c-text-sub);
	font-size: 13px;
}
.listing-tabs__hint .material-icons-round {
	font-size: 18px !important;
	color: var(--c-accent);
}

/* =============================================================
 * 7. 個別ページ強化 (Phase G-1/G-2)
 * ============================================================= */
/* 詳細ページの 緊急窓口 / 全国対応 バッジ
   一覧の .agency-loop-badges と同ルール (薄オレンジ強調) */
.agency-pickup-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 8px 0 12px;
}
.agency-pickup-badges__item {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 10px;
	border-radius: 14px;
	font-size: 11px;
	font-weight: bold;
	background: var(--c-accent-soft);
	color: var(--c-text);
	border: 1px solid var(--c-border);
	white-space: nowrap;
}
.agency-pickup-badges__item.is-emergency,
.agency-pickup-badges__item.is-recommended {
	background: var(--c-accent-soft);
	color: var(--c-text);
	border-color: var(--c-border);
}
.agency-pickup-badges__item .material-icons-round {
	font-size: 13px !important;
	color: var(--c-text-sub);
}

/* =============================================================
 * 8. 一覧ページの特性バッジ (Phase G-3)
 *   ルール: 全バッジ統一トーン (白背景・薄グレー枠) を基本とし、
 *          重要なもの (is-strong / is-pickup) だけ
 *          ほんのり薄オレンジ背景でわずかに強調する。
 *          文字色・枠色は変えず、過剰な装飾は避ける。
 * ============================================================= */
.agency-loop-badges {
	list-style: none;
	margin: 6px 0 10px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.agency-loop-badges__item {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px 10px;
	font-size: 11px;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-border-soft);
	color: var(--c-text);
	border-radius: 12px;
}
.agency-loop-badges__item .material-icons-round {
	font-size: 12px !important;
}
/* 強調 (緊急窓口 / 24時間 / 全国対応 等):
   背景を少しだけ濃い薄オレンジに変えるだけ。文字色も枠色も標準のまま。
   (「無料」は全相談窓口が無料前提のためバッジ表示しない) */
.agency-loop-badges__item.is-strong,
.agency-loop-badges__item.is-pickup {
	background: var(--c-accent-soft);
	border-color: var(--c-border);
	color: var(--c-text);
	font-weight: bold;
}
/* 説明文との間に余白を確保 */
.agency-list .agency-loop-badges + .description,
.agency-list li .description {
	margin-top: 12px !important;
}

@media (min-width: 601px) {
	.filter-agency-box--field-parent .filter-main {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		justify-content: stretch;
	}
	.filter-agency-box--field-parent .filter-main:after {
		display: none;
	}
	.filter-agency-box--field-parent .filter-main select,
	.filter-agency-box--field-parent .filter-main input {
		width: 100%;
	}
}

/* =============================================================
 * 9. レスポンシブ
 * ============================================================= */
@media (max-width: 600px) {
	.agency-triage__list { grid-template-columns: 1fr; }
	.agency-quick-help__link {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}
	.agency-quick-help__num {
		grid-row: 2;
		grid-column: 1;
		font-size: 16px;
	}
	.agency-quick-help__note {
		grid-row: 3;
		grid-column: 1;
	}
	.agency-faq__toggle { padding: 12px; }
	.agency-faq__a { padding: 0 12px 12px 42px; }
}