@charset "utf-8";

/**
 * ともに支える、地域の仲間たちページ /partners/ 専用スタイル
 *
 * 共通CSS（import.css / new-style.css）の後に読み込まれる。
 * 既存ページへ漏れないよう、セレクタはすべて .p-partners 配下に閉じる。
 *
 * 配色・挙動はプロトタイプ map.html を正として移植。
 * ※ 色の最終値は既存ブランドカラーへの寄せで微調整する。
 *
 * @package makecare
 */

.p-partners {
	padding: 100px 0 0;
	/* 地図の塗り分け（3値のみ） */
	--partner-map-base: #e7dcc9; /* 連携先のいない都道府県 */
	--partner-map-stroke: #f8f3ea; /* 県境線（背景色系の細線） */
	--partner-green: #4e9174; /* 連携先のいる都道府県 */
	--partner-green-deep: #3b7a5f;
	--partner-green-pale: #e3efe8;
	--partner-orange: #e7743a; /* くるみ本拠地（大阪府） */
	--partner-orange-deep: #c06b38;
	--partner-orange-pale: #f9e8dc;

	--partner-ink: #4a3f35;
	--partner-ink-soft: #8a7a68;
	--partner-line: #e2d6c2;
	--partner-white: #fff;
	--partner-radius: 14px;

	/* カテゴリ色
	   カード左端の色帯とカテゴリ見出しにのみ使用。地図の塗りには使わない。 */
	--partner-cat-visit: #4e9174; /* 訪問看護ステーション */
	--partner-cat-hospital: #4a7c9e; /* 病院 */
	--partner-cat-clinic: #7d6b9e; /* クリニック */
	--partner-cat-support: #a98b4f; /* 相談支援事業所 */
}

/* ==================================================================
 * リードセクション
 * ================================================================== */
.p-partners__top-sec {
    padding-bottom: 100px;
}
.p-partners__top-lead {
    max-width: 900px;
    margin: 0 auto;
}
.p-partners__top-lead__ttl {
    text-align: center;
    color: #734026;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 60px;
}

/* ==================================================================
 * 地図セクション
 * ================================================================== */
.p-partners__map-sec {
	background: #fafaf0;
    padding: 100px 0;
}
.p-partners__map-layout {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 40px;
	align-items: start;
	margin-top: 80px;
}

.p-partners__map-wrap {
	position: relative;
}

.p-partners .jp-map {
	display: block;
	width: 100%;
	height: auto;
}

/* PC / SP の出し分け */
.p-partners #kurumi-map-sp {
	display: none;
}

/* ------------------------------------------------------------------
 * 都道府県の塗り
 *
 * fill は <g class="prefecture"> に当てる（子の path へ継承させる）。
 * プロトタイプと同じ当て方。path 側に fill 属性が無いことが前提。
 * ------------------------------------------------------------------ */

.p-partners .jp-map .prefecture {
	fill: var(--partner-map-base);
	stroke: var(--partner-map-stroke);
	stroke-width: 1.2;
	transition: fill 0.2s ease;
}

/* 連携先のいる都道府県 */
.p-partners .jp-map .prefecture.has-partner {
	fill: var(--partner-green);
	cursor: pointer;
}

.p-partners .jp-map .prefecture.has-partner:hover,
.p-partners .jp-map .prefecture.has-partner:focus {
	fill: var(--partner-green-deep);
}

/* くるみ本拠地（大阪府）。集計結果に関わらず常時オレンジ */
.p-partners .jp-map .prefecture.hq {
	fill: var(--partner-orange);
}

.p-partners .jp-map .prefecture.hq:hover,
.p-partners .jp-map .prefecture.hq:focus {
	fill: var(--partner-orange-deep);
}

.p-partners .jp-map .prefecture:focus-visible {
	outline: 2px solid var(--partner-green-deep);
	outline-offset: 2px;
}

.p-partners .jp-map line,
.p-partners .jp-map .boundary-line line {
	stroke: #cfc2aa;
	stroke-width: 2;
}

/* ------------------------------------------------------------------
 * 件数バッジ（JSが getBBox()/getCTM() で自動配置）
 * ------------------------------------------------------------------ */

.p-partners .jp-map .badge-circle {
	fill: var(--partner-white);
	stroke: var(--partner-green-deep);
	stroke-width: 2.5;
	pointer-events: none;
}

.p-partners .jp-map .badge-circle.hq-badge {
	stroke: var(--partner-orange-deep);
}

.p-partners .jp-map .badge-text {
	fill: var(--partner-green-deep);
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
}

.p-partners .jp-map .badge-text.hq-text {
	fill: var(--partner-orange-deep);
}

.p-partners .jp-map .hq-label {
	fill: var(--partner-orange-deep);
	font-weight: 700;
	text-anchor: middle;
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * 凡例・注記・クレジット
 * ------------------------------------------------------------------ */

.p-partners__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: center;
	margin-top: 20px;
	font-size: 1.3rem;
	color: var(--partner-ink-soft);
	list-style: none;
	padding: 0;
}

.p-partners__legend li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.p-partners__legend .sw {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
}

.p-partners__legend .sw--home {
	background: var(--partner-orange);
}

.p-partners__legend .sw--active {
	background: var(--partner-green);
}

.p-partners__legend .sw--badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 2px solid var(--partner-green-deep);
	border-radius: 50%;
	background: var(--partner-white);
	color: var(--partner-green-deep);
	font-size: 1rem;
	font-weight: 700;
}

.p-partners__note {
	margin-top: 30px;
	text-align: center;
	font-size: 1.2rem;
	color: var(--partner-ink-soft);
}

/* Geolonia素材のGFDLクレジット */
.p-partners__credit {
	margin-top: 8px;
	text-align: center;
	font-size: 1.1rem;
	color: var(--partner-ink-soft);
}

.p-partners__credit a {
	color: inherit;
}

/* ==================================================================
 * 都道府県別アコーディオン
 * ================================================================== */

.p-partners__acc-ttl {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--partner-ink);
}

.p-partners__acc-ttl::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--partner-green);
}

.p-partners__acc {
	border-top: 1px solid var(--partner-line);
}

.p-partners__acc .acc-item {
	border-bottom: 1px solid var(--partner-line);
}

.p-partners__acc .acc-head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 15px 6px;
	border: none;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 1.5rem;
	color: var(--partner-ink);
	text-align: left;
}

.p-partners__acc .acc-head:focus-visible {
	outline: 2px solid var(--partner-green);
	outline-offset: 2px;
	border-radius: 6px;
}

.p-partners__acc .pref-name {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.p-partners__acc .hq-chip {
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--partner-orange-pale);
	color: var(--partner-orange-deep);
	font-size: 1.1rem;
	font-weight: 500;
}

.p-partners__acc .count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	margin-left: auto;
	border: 2px solid var(--partner-green-deep);
	border-radius: 50%;
	background: var(--partner-white);
	color: var(--partner-green-deep);
	font-size: 1.2rem;
	font-weight: 700;
}

.p-partners__acc .acc-item.is-hq .count {
	border-color: var(--partner-orange-deep);
	color: var(--partner-orange-deep);
}

.p-partners__acc .chev {
	flex: none;
	width: 10px;
	height: 10px;
	margin-left: 4px;
	border-right: 2px solid var(--partner-ink-soft);
	border-bottom: 2px solid var(--partner-ink-soft);
	transform: rotate(45deg);
	transition: transform 0.25s;
}

.p-partners__acc .acc-item.open .chev {
	transform: rotate(-135deg);
}

.p-partners__acc .acc-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.p-partners__acc .acc-item.open .acc-body {
	grid-template-rows: 1fr;
}

.p-partners__acc .acc-body-in {
	overflow: hidden;
}

.p-partners__acc .acc-body ul {
	list-style: none;
	padding: 0 6px 14px;
}

.p-partners__acc .acc-body li {
	margin-bottom: 6px;
}

.p-partners__acc .place-link {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 14px;
	border: 1px solid var(--partner-line);
	border-radius: 10px;
	background: var(--partner-white);
	color: var(--partner-ink);
	font-size: 1.4rem;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s;
}

.p-partners__acc .place-link:hover {
	border-color: var(--partner-green);
	background: var(--partner-green-pale);
}

.p-partners__acc .place-link .city {
	flex: none;
	margin-left: auto;
	color: var(--partner-ink-soft);
	font-size: 1.2rem;
}

/* ==================================================================
 * 連携先カード（1店舗1カード）
 * ================================================================== */
.p-partners__list-sec {
	background: #fff0e6;
    padding: 100px 0;
}
.p-partners__cat {
	margin-bottom: 48px;
}

.p-partners__cat-ttl {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
    border-left: 7px solid var(--partner-cat, var(--partner-green));
    padding-left: 12px;
}

.p-partners__cat--visit {
	--partner-cat: var(--partner-cat-visit);
	margin-top: 80px;
}

.p-partners__cat--hospital {
	--partner-cat: var(--partner-cat-hospital);
}

.p-partners__cat--clinic {
	--partner-cat: var(--partner-cat-clinic);
}

.p-partners__cat--support {
	--partner-cat: var(--partner-cat-support);
}

.p-partners__pref-ttl {
	margin: 24px 0 12px;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--partner-ink-soft);
	letter-spacing: 0.06em;
}

/* 掲載準備中枠（投稿0件のカテゴリ） */
.p-partners__pending {
	padding: 28px 24px;
	border: 1px dashed var(--partner-line);
	border-radius: var(--partner-radius);
	text-align: center;
	color: var(--partner-ink-soft);
	font-size: 1.35rem;
}

.p-partners__card {
	position: relative;
	margin-bottom: 18px;
	padding: 22px 24px;
	border-radius: var(--partner-radius);
	border-left: 6px solid var(--partner-cat, var(--partner-green));
	background: var(--partner-white);
	box-shadow: 1px 1px 10px #ffdbc3;
	transition: box-shadow 0.3s;
	scroll-margin-top: 100px;
}

/* アコーディオンから着地したときの約1.5秒ハイライト */
.p-partners__card.flash {
	--flash-color: var(--partner-green);
	--flash-shadow: rgba(78, 145, 116, 0.25);
	animation: partner-flash 1.6s ease;
}
.p-partners__cat--hospital .p-partners__card.flash {
	--flash-color: var(--partner-cat-hospital);
	--flash-shadow: rgba(74, 124, 158, 0.25);
}
.p-partners__cat--clinic .p-partners__card.flash {
	--flash-color: var(--partner-cat-clinic);
	--flash-shadow: rgba(125, 107, 158, 0.25);
}
.p-partners__cat--support .p-partners__card.flash {
	--flash-color: var(--partner-cat-support);
	--flash-shadow: rgba(169, 139, 79, 0.25);
}

@keyframes partner-flash {
	0%,
	60% {
		box-shadow: 0 0 0 3px var(--flash-color),
			0 4px 18px var(--flash-shadow);
	}
	100% {
		box-shadow: 0 2px 10px rgba(74, 63, 53, 0.05);
	}
}

.p-partners__card-top {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.p-partners__card-logo {
	flex: none;
	width: 58px;
	height: 58px;
	border-radius: 12px;
	object-fit: contain;
}

.p-partners__card-name {
	font-size: 1.8rem;
	font-weight: 700;
}

.p-partners__card-corp {
	font-size: 1.2rem;
	color: var(--partner-ink-soft);
}

/* 複数タイプバッジ：スペース区切りで分割した span を横並び＋折り返し（間隔は gap） */
.p-partners__type-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-top: 6px;
}

.p-partners__type-badge {
	display: inline-block;
	padding: 2px 12px;
	border-radius: 999px;
	background: var(--partner-green-pale);
	color: var(--partner-green-deep);
	font-size: 1.1rem;
	font-weight: 500;
}

.p-partners__card-loc {
	margin-top: 10px;
	font-size: 1.4rem;
	color: var(--partner-ink-soft);
}

.p-partners__card-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 2px;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--partner-cat, var(--partner-green));
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 700;
}

.p-partners__card-toggle:focus-visible {
	outline: 2px solid var(--partner-cat, var(--partner-green));
	outline-offset: 2px;
	border-radius: 4px;
}

.p-partners__card-detail {
	display: none;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--partner-line);
	font-size: 1.4rem;
}

.p-partners__card.is-open .p-partners__card-detail {
	display: block;
}

.p-partners__card-detail dt {
	margin-top: 8px;
	font-size: 1.2rem;
	color: var(--partner-ink-soft);
}

.p-partners__card-detail dd {
	margin-left: 0;
	font-size: 1.5rem;
}

.p-partners__card-detail-link {
	font-size: 1.5rem;
	color: var(--partner-green-deep);
	margin-top: 10px;
    overflow-wrap: break-word;
}

/* ==================================================================
 * FAQ
 * ================================================================== */
.p-partners__faq-sec {
    padding: 100px 0;
}

/* ==================================================================
 * SP（768px以下）
 * ================================================================== */

@media screen and (max-width: 768px) {
	.p-partners__top-lead__ttl {
		margin-bottom: 50px;
	}
	.p-partners__top-sec {
	    padding-bottom: 60px;
	}
	.p-partners__map-sec, 
	.p-partners__list-sec, 
	.p-partners__faq-sec {
		padding: 60px 0;
	}
	
	.p-partners__map-layout {
		grid-template-columns: 1fr;
		gap: 60px;
		margin-top: 50px;
	}

	.p-partners #kurumi-map-pc {
		display: none;
	}

	.p-partners #kurumi-map-sp {
		display: block;
		max-width: 420px;
		margin: 0 auto;
	}

	.p-partners__legend {
		font-size: 1.2rem;
		gap: 6px 16px;
	}
	
	.p-partners__note, 
	.p-partners__credit {
		text-align: left;
	}
	.p-partners__credit {
		font-size: .8rem;
	}
	
	.p-partners__cat-ttl, 
	.p-partners__card-name {
		font-size: 1.6rem;
	}
	
	.p-partners__pref-ttl {
		font-size: 1.4rem;
	}
	
	.p-partners__cat--visit {
		margin-top: 50px;
	}
}

/* ==================================================================
 * アニメーション抑制
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.p-partners *,
	.p-partners *::before,
	.p-partners *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}