/*
 * 里親の地図
 *
 * 数値は hp/design/DESIGN_SYSTEM.md の段階だけを使う。
 *   余白  4 8 12 16 24 32 40 48 64 80 96 160
 *   文字  .75 .875 1 1.125 1.25 1.5 2rem
 *   角丸  8 / 14 / 999
 *   影    カード 0 8px 24px rgba(26,26,26,.06)
 *   幅    〜767 / 768〜1023 / 1024〜
 * 色はテーマの変数(--wnl-v3-*)だけ。#72aaa4 を小さい文字に使わない。
 */

/*
 * テーマの .wnl-v3 { overflow: hidden } は、はみ出しを切るためのもの。
 * ただ hidden だと、詳細ページの写真を画面に残す(position: sticky)が効かない。
 * clip は同じように切りつつ、sticky を止めない。里親の地図のページだけ切り替える。
 */
.wnl-v3.wnl-family {
	overflow: clip;
}

/*
 * スマホで Astra の器(.ast-container)に左右約8pxの余白が残り、黒い帯の両脇に白いすき間が出ていた。
 * 下層ページ(テーマ側)と同じく、器の余白を消して帯を画面の端まで出す。
 */
body.wnl-v3-front-active #content > .ast-container {
	padding-left: 0;
	padding-right: 0;
}

.wnl-family-section {
	padding-block: clamp(48px, 6vw, 80px);
}
.wnl-family-section + .wnl-family-section {
	padding-top: 0;
}
.wnl-family-section--soft {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--wnl-v3-soft);
	border-top: 1px solid var(--wnl-v3-line);
}
.wnl-family-section + .wnl-family-section--soft {
	padding-top: clamp(48px, 6vw, 80px);
}

.wnl-family h2 {
	margin: 0 0 16px;
	font-size: 2rem;
	line-height: 1.25;
}
.wnl-family h3 {
	margin: 0 0 12px;
	font-size: 1.5rem;
	line-height: 1.4;
}
.wnl-family p {
	line-height: 1.9;
}

.wnl-family-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 24px;
}
.wnl-family-head h2 {
	margin: 0;
}
.wnl-family-total {
	margin: 0;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
}

.wnl-family-link {
	color: var(--wnl-v3-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wnl-family-prelaunch {
	margin: 0 0 24px;
	padding: 8px 0 8px 16px;
	border-left: 2px solid var(--wnl-v3-line);
	color: var(--wnl-v3-muted);
	font-size: .875rem;
}

.wnl-family-narrow {
	max-width: 760px;
}

/* ---------- 地図 ---------- */

/* スマホ・タブレット:見出し → 地図 → 結果 の縦並び。 */
.wnl-family-mapwrap {
	display: grid;
	gap: 24px;
}
.wnl-family-maphead h2 {
	margin: 0 0 8px;
}
.wnl-family-maphead p {
	margin: 0;
}
.wnl-family-maphead__total {
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
}
/* いちばん見せたいのは頭数。数字だけ大きくする。 */
.wnl-family-maphead__total strong {
	font-size: 2rem;
	line-height: 1.25;
}
/* 画面からは外し、読み上げには残す */
.wnl-family-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wnl-family-map {
	display: grid;
	grid-template-columns: repeat(13, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 4px;
	width: 100%;
	max-width: 760px;
}
.wnl-family-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 8px;
	background: var(--wnl-v3-paper);
	color: var(--wnl-v3-ink);
	min-width: 0;
	overflow: hidden;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	white-space: nowrap;
	text-decoration: none;
}
.wnl-family-tile.has-pets {
	border-color: var(--wnl-v3-dark);
	background: var(--wnl-v3-dark);
	color: var(--wnl-v3-paper);
}
.wnl-family-tile.is-off {
	border-style: dashed;
	background: var(--wnl-v3-soft);
	color: var(--wnl-v3-muted);
}
/* 選んだ県は、枠ではなく塗りの濃さで示す(黒い太枠は強すぎた)。 */
a.wnl-family-tile:hover {
	border-color: var(--wnl-v3-dark);
}
.wnl-family-tile.is-selected {
	border-color: var(--wnl-v3-accent-ink);
	background: var(--wnl-v3-accent-ink);
	color: var(--wnl-v3-paper);
}
/* 下の一覧で絞り込んでいる県は、枠だけ(塗りは「欄に出している県」にだけ使う)。 */
.wnl-family-tile.is-current:not(.is-selected) {
	border-color: var(--wnl-v3-accent-ink);
	box-shadow: inset 0 0 0 1px var(--wnl-v3-accent-ink);
}
/* キーボードで動かしたときの枠は残す。 */
a.wnl-family-tile:focus-visible {
	outline: 2px solid var(--wnl-v3-dark);
	outline-offset: 1px;
	z-index: 1;
}
.wnl-family-tile__count {
	font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
	/*
	 * 390px の画面では四角が 22px ほどになり、2文字(約24px)が入らない。
	 * すき間を 2px にして四角を広げる。320px のような狭い画面では、
	 * 地図だけを枠の中で横に動かせるようにする(ページ全体は横に動かさない)。
	 */
	.wnl-family-map {
		gap: 2px;
	}
	/* 数は地図の下の欄に出し、四角には「いる」印だけ付ける。 */
	.wnl-family-tile__count {
		display: none;
	}
	.wnl-family-tile.has-pets::after {
		content: "";
		position: absolute;
		top: 4px;
		right: 4px;
		width: 4px;
		height: 4px;
		border-radius: 999px;
		background: var(--wnl-v3-paper);
	}
	.wnl-family-tile.has-pets.is-selected::after {
		background: var(--wnl-v3-paper);
	}
}

/* スマホ・タブレットでも、地図の地に海の色を敷く(PCと見え方をそろえる)。 */
@media (max-width: 767px) {
	.wnl-family-map {
		padding: 8px;
		border-radius: 14px;
		background: var(--wnl-v3-soft);
	}
}

.wnl-family-panel {
	padding: 24px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: var(--wnl-v3-soft);
}
/* まだ選んでいないとき:塗らずに点線の枠だけ(結果が出る場所だと分かるように)。 */
.wnl-family-panel:has(> [data-default]:not([hidden])) {
	border: 1px dashed var(--wnl-v3-line);
	background: transparent;
	color: var(--wnl-v3-muted);
}
.wnl-family-panel p {
	margin: 0;
}
.wnl-family-panel__name {
	font-size: 1.25rem;
	font-weight: 700;
}
/* ボタンの display 指定に負けて、0匹の県でボタンが残らないように。 */
.wnl-family-panel__go[hidden] {
	display: none;
}
.wnl-family-panel .wnl-family-panel__count {
	margin-block: 4px 16px;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
}

/*
 * PC:地図を器の幅いっぱいに広げ、地図と同じ 13列×11行 の格子に
 * 見出し(左上の空き)と結果(右下の空き)をはめ込む。
 * 四角を正方形のままにすると 1180px 幅で地図の高さが約1000pxになり、
 * 1画面(1440×840 前後)に収まらないので、横長(4:3)にする。
 */
@media (min-width: 768px) {
	@supports (grid-template-columns: subgrid) {
		/* 地図の後ろに海の色を敷く。空いた所が「余り」ではなく「海」に見えるように。 */
		.wnl-family-mapwrap {
			grid-template-columns: repeat(13, minmax(0, 1fr));
			gap: 4px;
			padding: 24px;
			border-radius: 14px;
			background: var(--wnl-v3-soft);
		}
		.wnl-family-map {
			grid-column: 1 / -1;
			grid-row: 1 / 12;
			grid-template-columns: subgrid;
			grid-template-rows: subgrid;
			grid-auto-rows: auto;
			max-width: none;
		}
		.wnl-family-tile {
			aspect-ratio: 4 / 3;
			border-radius: 8px;
			font-size: 1rem;
		}
		.wnl-family-tile__count {
			font-size: .875rem;
		}
		/* 左上の空き(北海道・東北の左)に、頭数と選んだ結果をまとめる(本人 2026-09-25)。
		   1行目:頭数 / 2〜4行目:結果(1〜7列目。5行目の石川より上で止める) */
		.wnl-family-maphead {
			grid-column: 1 / 11;
			grid-row: 1 / 2;
			align-self: center;
			z-index: 2;
		}
		.wnl-family-panel {
			grid-column: 1 / 8;
			grid-row: 2 / 5;
			align-self: stretch;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin: 8px 0 16px;
			background: var(--wnl-v3-paper);
			box-shadow: 0 8px 24px rgba(26, 26, 26, .06);
			z-index: 2;
		}
		.wnl-family-panel:has(> [data-default]:not([hidden])) {
			box-shadow: none;
		}
		/*
		 * 名前・頭数を左、ボタンを右に並べて、欄を2行の高さに抑える。
		 * 縦に3段積むと、1024〜1200px 幅で右下の3行に収まらず、
		 * 地図の下の行(九州・四国)の間隔が広がってしまう。
		 */
		.wnl-family-panel__detail:not([hidden]) {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			gap: 0 16px;
		}
		.wnl-family-panel .wnl-family-panel__count {
			margin-block: 0;
		}
		/* 名前と頭数は左の列に固定する(0匹の県でボタンが無いときに、右へ回り込まないように)。 */
		.wnl-family-panel__name,
		.wnl-family-panel .wnl-family-panel__count {
			grid-column: 1;
		}
		.wnl-family-panel__go {
			grid-column: 2;
			grid-row: 1 / 3;
		}
	}
}

/*
 * いつでも押せる「この子を載せる」(本人の依頼 2026-09-25「右上に、もう少し主張を強く」)。
 * PC:帯のすぐ下の右上に置き、スクロールすると画面の右上についてくる。
 *     高さ0の入れ物を sticky にして、ボタンだけを見せる(中身を押し下げない)。
 * スマホ:右上は見出しとぶつかるので、右下に浮かせる。
 * 黒い帯の上でも白い地の上でも見えるよう、黒い丸に白い縁、その外に細い黒の線と影。
 */
.wnl-family-fabwrap {
	position: sticky;
	top: calc(16px + var(--wp-admin--admin-bar--height, 0px));
	z-index: 30;
	height: 0;
	pointer-events: none;
}
.wnl-family-fabwrap > .wnl-v3-shell {
	display: flex;
	justify-content: flex-end;
}
.wnl-family-fab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	margin-top: 24px;
	padding: 12px 28px 12px 12px;
	border: 3px solid var(--wnl-v3-paper);
	border-radius: 999px;
	background: var(--wnl-v3-dark);
	box-shadow: 0 0 0 1px var(--wnl-v3-dark), 0 12px 32px rgba(26, 26, 26, .32);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.25;
	white-space: nowrap;
	pointer-events: auto;
	transition: transform .2s ease, box-shadow .2s ease;
}
.wnl-family a.wnl-family-fab,
.wnl-family a.wnl-family-fab:hover,
.wnl-family a.wnl-family-fab:focus-visible,
.wnl-family a.wnl-family-fab:visited {
	/* テーマのリンクの色(黒・下線)より強く書く。黒い丸に白い字 */
	color: var(--wnl-v3-paper);
	text-decoration: none;
}
.wnl-family-fab:hover,
.wnl-family-fab:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px var(--wnl-v3-dark), 0 16px 40px rgba(26, 26, 26, .4);
}
.wnl-family-fab:focus-visible {
	outline: 2px solid var(--wnl-v3-accent-ink);
	outline-offset: 4px;
}
.wnl-family-fab__plus {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--wnl-v3-paper);
	color: var(--wnl-v3-dark);
	font-size: 1.25rem;
	line-height: 1;
}
@media (max-width: 767px) {
	.wnl-family-fabwrap {
		position: static;
	}
	.wnl-family-fab {
		position: fixed;
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		z-index: 30;
		margin: 0;
	}
	/* 最後までスクロールしたとき、足もとの文字をボタンで隠さない */
	.wnl-family:has(.wnl-family-fab) {
		padding-bottom: 96px;
	}
	/* 報告のフォームを開いているあいだは、「報告を送る」に重ならないよう引っ込める */
	.wnl-family:has(.wnl-family-report[open]) .wnl-family-fab {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wnl-family-fab {
		transition: none;
	}
}

/* ---------- 注意事項 ---------- */

/* 本文のページと同じく、見出しの下に中身を縦に積む。幅は本文と同じ760px */
.wnl-family-notes {
	display: grid;
	max-width: 760px;
	gap: 16px;
}
.wnl-family .wnl-family-notes h2 {
	margin: 0;
}
.wnl-family-notes__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding-left: 24px;
}
.wnl-family-notes__list li {
	margin: 0;
	line-height: 1.9;
}

/* ---------- 掲載の管理 ---------- */

.wnl-family-managegrid {
	display: grid;
	gap: 24px;
	align-items: start;
}
@media (min-width: 768px) {
	.wnl-family-managegrid {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		gap: 32px;
	}
}
.wnl-family-manageact {
	display: grid;
	gap: 16px;
	justify-items: start;
}
.wnl-family .wnl-family-manageact h2 {
	margin: 0;
	font-size: 1.5rem;
}
.wnl-family-manageact p {
	margin: 0;
}
.wnl-family-managefoot {
	margin-top: 32px;
}

/* ---------- 絞り込み ---------- */

.wnl-family-filter {
	display: grid;
	gap: 16px;
	margin-bottom: 32px;
	padding: 24px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 14px;
}
@media (min-width: 768px) {
	.wnl-family-filter {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.wnl-family-filter {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}
.wnl-family-filter__row {
	display: grid;
	gap: 4px;
}
.wnl-family-filter__row label {
	font-size: .875rem;
	font-weight: 700;
}
.wnl-family-filter__check,
.wnl-family-filter__actions {
	grid-column: 1 / -1;
}
.wnl-family-filter__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.wnl-family select,
.wnl-family input[type="text"],
.wnl-family input[type="email"],
.wnl-family input[type="url"],
.wnl-family input[type="number"],
.wnl-family textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 8px;
	background: var(--wnl-v3-paper);
	color: var(--wnl-v3-ink);
	font: inherit;
	font-size: 1rem;
}
.wnl-family textarea {
	min-height: 96px;
	line-height: 1.9;
}
.wnl-family input[type="file"] {
	width: 100%;
	padding: 16px;
	border: 1px dashed var(--wnl-v3-line);
	border-radius: 14px;
	background: var(--wnl-v3-soft);
	font-size: 1rem;
	cursor: pointer;
}
/* ブラウザ標準の灰色のボタンを、サイトの黒いボタンにそろえる */
.wnl-family input[type="file"]::file-selector-button {
	margin-right: 16px;
	padding: 8px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--wnl-v3-dark);
	color: var(--wnl-v3-paper);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.wnl-family :is(select, input, textarea):focus-visible {
	outline: 2px solid var(--wnl-v3-dark);
	outline-offset: 2px;
}

/* ---------- カード ---------- */

.wnl-family-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}
@media (min-width: 768px) {
	.wnl-family-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.wnl-family-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}
}
/* 1行4枚(本人決定 2026-09-25)。1枚が狭くなりすぎないよう、1200px以上だけ。1ページ12件で3行ちょうど */
@media (min-width: 1200px) {
	.wnl-family-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}
}
.wnl-family-card {
	height: 100%;
	border-radius: 14px;
	background: var(--wnl-v3-paper);
	box-shadow: 0 8px 24px rgba(26, 26, 26, .06);
	overflow: hidden;
	transition: box-shadow .2s ease;
}
.wnl-family-card:hover,
.wnl-family-card:focus-within {
	box-shadow: 0 10px 30px rgba(26, 26, 26, .045);
}
.wnl-family-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.wnl-family-card__link:focus-visible {
	outline: 2px solid var(--wnl-v3-dark);
	outline-offset: 2px;
}
.wnl-family-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	background: var(--wnl-v3-soft);
}
.wnl-family-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wnl-family-card__body {
	display: grid;
	gap: 8px;
	padding: 24px;
}
.wnl-family-card__where,
.wnl-family-card__date {
	margin: 0;
	color: var(--wnl-v3-muted);
	font-size: .875rem;
}
/* どこにいる子かは、会いに行けるかを決める情報。注記(14px)ではなく本文の大きさで読ませる(規則8)。 */
.wnl-family-card__where {
	font-size: 1rem;
}
.wnl-family .wnl-family-card__name {
	margin: 0;
	font-size: 1.25rem;
}
.wnl-family-card__link:hover .wnl-family-card__name {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wnl-family-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wnl-family-facts li {
	padding: 4px 12px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 999px;
	font-size: .875rem;
}

.wnl-family-badge {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--wnl-v3-dark);
	color: var(--wnl-v3-paper);
	font-size: .75rem;
	font-weight: 700;
}

.wnl-family-empty {
	padding: 32px;
	border-radius: 14px;
	background: var(--wnl-v3-soft);
}

.wnl-family-pages ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
.wnl-family-pages a,
.wnl-family-pages span {
	display: inline-flex;
	min-width: 48px;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 999px;
	color: var(--wnl-v3-ink);
}
.wnl-family-pages .current {
	background: var(--wnl-v3-dark);
	color: var(--wnl-v3-paper);
}


/* ---------- 詳細 ---------- */

.wnl-family-detail {
	display: grid;
	gap: 32px;
}
@media (min-width: 1024px) {
	.wnl-family-detail {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}
}
.wnl-family-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
/* PC:右の情報の方が長いので、写真を画面に残して、左の下が空いて見えないようにする。 */
@media (min-width: 1024px) {
	.wnl-family-gallery {
		position: sticky;
		top: 32px;
	}
}
.wnl-family-gallery__item {
	margin: 0;
	aspect-ratio: 1;
	max-width: 100%;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wnl-v3-soft);
}
.wnl-family-gallery__item.is-main {
	grid-column: 1 / -1;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
}
.wnl-family-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wnl-family-info {
	display: grid;
	gap: 24px;
}
.wnl-family .wnl-family-info__title {
	margin: 0;
	font-size: 1.5rem;
}
.wnl-family-state {
	justify-self: start;
	margin: 0;
	padding: 4px 16px;
	border: 1px solid var(--wnl-v3-dark);
	border-radius: 999px;
	font-weight: 700;
}
.wnl-family-state.is-found {
	background: var(--wnl-v3-dark);
	color: var(--wnl-v3-paper);
}
.wnl-family-dl {
	display: grid;
	margin: 0;
	border-top: 1px solid var(--wnl-v3-line);
}
.wnl-family-dl > div {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wnl-v3-line);
}
.wnl-family-dl dt {
	min-width: 8em;
	color: var(--wnl-v3-muted);
	font-weight: 700;
}
.wnl-family-dl dd {
	margin: 0;
}
/*
 * 768px以上:見出しの列を、いちばん長い見出し(「猫エイズ・猫白血病の検査」)に合わせて、
 * すべての行の値を同じ位置から始める。行ごとに列を作ると、長い見出しの行だけ値が右にずれる。
 */
@media (min-width: 768px) {
	@supports (grid-template-columns: subgrid) {
		.wnl-family-dl {
			grid-template-columns: auto minmax(0, 1fr);
		}
		.wnl-family-dl > div {
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
		}
	}
}
.wnl-family-note {
	margin: 0;
	color: var(--wnl-v3-muted);
	font-size: .875rem;
}
.wnl-family-muted {
	margin: 0;
	color: var(--wnl-v3-muted);
	font-size: .875rem;
}
/* 詳細ページで、いちばんしてほしいのは「連絡する」。地の色を少し付けて目立たせる。 */
.wnl-family-contact {
	display: grid;
	gap: 16px;
	padding: 24px;
	border-radius: 14px;
	background: var(--wnl-v3-soft);
}
.wnl-family-contact p {
	margin: 0;
}
.wnl-family-sns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wnl-family-texts {
	display: grid;
	gap: 24px;
	max-width: 760px;
	margin-block: 64px 32px;
}
.wnl-family-texts > h2 {
	margin: 0;
}
.wnl-family-text p {
	margin: 0;
}

.wnl-family-report {
	margin-block: 32px;
	padding: 24px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 14px;
	max-width: 760px;
}
.wnl-family-report summary {
	cursor: pointer;
	font-weight: 700;
}
.wnl-family-report form {
	display: grid;
	gap: 16px;
	margin-top: 16px;
}
/*
 * 報告の理由は、掲載フォームの設問と同じ作りだと縦に間延びする。
 * ここだけ見出しを小さくし、選択肢を詰めて、広い画面では2列にする。
 */
.wnl-family-report .wnl-family-fieldset {
	gap: 8px;
}
.wnl-family-report .wnl-family-fieldset legend {
	margin-bottom: 12px;
	font-size: 1rem;
}
.wnl-family-report .wnl-family-choice {
	margin: 0;
}
/* ボタンは中身の幅で。グリッドの列いっぱいに伸ばさない。 */
.wnl-family-report form > .wnl-v3-btn {
	justify-self: start;
}
@media (min-width: 768px) {
	.wnl-family-report .wnl-family-fieldset {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 24px;
	}
	.wnl-family-report .wnl-family-fieldset legend {
		grid-column: 1 / -1;
	}
}

/* ---------- 載せるフォーム ---------- */

.wnl-family-alert,
.wnl-family-rules,
.wnl-family-message,
.wnl-family-errors {
	margin-bottom: 32px;
	padding: 24px;
	border-radius: 14px;
}
/* 急ぐときの案内。黒い2本線は強すぎたので、地の色で示す(下の「載せる前に」と区別できる濃さ)。 */
.wnl-family-alert {
	border: 2px solid var(--wnl-v3-dark);
	background: var(--wnl-v3-paper);
}
.wnl-family-alert h2,
.wnl-family-rules h2 {
	font-size: 1.25rem;
	margin: 0 0 8px;
}
.wnl-family-alert p {
	margin: 0;
}
.wnl-family-rules {
	background: var(--wnl-v3-soft);
}
.wnl-family-rules ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding-left: 1.25em;
	line-height: 1.9;
}
.wnl-family-message {
	background: var(--wnl-v3-soft);
}
.wnl-family-message p {
	margin: 0;
}
.wnl-family-message p + p {
	margin-top: 16px;
}
.wnl-family-errors {
	border: 2px solid var(--wnl-v3-dark);
}
.wnl-family-errors p {
	margin: 0 0 8px;
}
.wnl-family-errors ul {
	margin: 0;
	padding-left: 1.25em;
}

.wnl-family-form {
	display: grid;
	gap: 40px;
}
.wnl-family-fieldset {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.wnl-family-fieldset legend {
	margin-bottom: 24px;
	padding: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
}
.wnl-family-field {
	display: grid;
	gap: 8px;
	margin: 0;
}
.wnl-family-field > label,
.wnl-family-label {
	font-weight: 700;
}
/* 選択肢は横に並べる。見出しと、病気の内容の欄だけは1行ぶん使う。 */
.wnl-family-field[role="radiogroup"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 24px;
	row-gap: 0;
}
.wnl-family-field[role="radiogroup"] > .wnl-family-label,
.wnl-family-field[role="radiogroup"] > .wnl-family-sublabel,
.wnl-family-field[role="radiogroup"] > textarea {
	flex-basis: 100%;
}
.wnl-family-field[role="radiogroup"] .wnl-family-choice {
	margin-right: 0;
}
.wnl-family-sublabel {
	margin-top: 8px;
	font-weight: 700;
}
.wnl-family-req {
	display: inline-block;
	margin-left: 8px;
	padding: 0 8px;
	border: 1px solid var(--wnl-v3-ink);
	border-radius: 999px;
	color: var(--wnl-v3-ink);
	font-size: .75rem;
	font-weight: 700;
	vertical-align: middle;
}
.wnl-family-help {
	color: var(--wnl-v3-muted);
	font-size: .875rem;
	line-height: 1.9;
}
.wnl-family-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	margin-right: 24px;
}
.wnl-family-choice--block {
	display: flex;
	margin-right: 0;
	min-height: 0;
	padding-block: 8px;
	line-height: 1.9;
}
.wnl-family-choice input,
.wnl-family-choice--block input {
	width: 24px;
	height: 24px;
	flex: none;
}
.wnl-family-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.wnl-family-inline input[type="number"] {
	width: 8em;
}
.wnl-family-inline select {
	width: auto;
}
.wnl-family-more {
	padding: 24px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 14px;
}
.wnl-family-more summary {
	cursor: pointer;
	font-weight: 700;
}
.wnl-family-more .wnl-family-fieldset {
	margin-top: 24px;
}
.wnl-family-submit {
	justify-self: start;
	font-size: 1rem;
}
.wnl-family-sns-error {
	margin: 0;
	font-weight: 700;
}

/* 選んだ写真を小さく並べて見せる */
.wnl-family-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.wnl-family-thumbs:empty {
	display: none;
}
.wnl-family-thumbs img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
}
.wnl-family-thumbs img:first-child {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.wnl-family-photo-error {
	font-weight: 700;
}

/* 受け付けたあとの「続けてもう1頭載せる」 */
.wnl-family-done-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}
.wnl-family-message:focus {
	outline: none;
}
/* 飛んできたとき、画面のふちに貼りつかないように */
#wnl-family-done,
#wnl-family-errors {
	scroll-margin-top: 24px;
}

/* 人ではない送信を見分ける隠し項目 */
.wnl-family-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * スマホでは、カスタマイザーの追加CSSで器の左右が広がり、使える幅は 390px の画面で約 329px。
 * 390px なら四角は約 23.5px で収まる。それより狭い画面(320px など)だけ、
 * 地図を枠の中で横に動かす。ページ全体は横に動かさない。
 */
@media (max-width: 359px) {
	/* 横に動かすのは地図だけ。見出しと結果の欄は画面の幅に収める。 */
	.wnl-family-map {
		grid-template-columns: repeat(13, 24px);
		min-width: 0;
		overflow-x: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wnl-family * {
		transition: none !important;
	}
}

/* ==================================================================
   温かみ(2026-09-29 本人「スタイリッシュだけど温かみがない。格好よさげで、温かくて、退屈しない」)

   方向:夕方の日だまり。白と黒は、生成りと温かい黒に置きかえる。
   差し色は「あめ色」1色だけ。子がいる県・数・肉球にだけ使う。
   地図のうしろに写真(日当たりのよい部屋)をぼかして敷き、地図は生成りの紙のように浮かせる。
   地方ごとに四角の色味を少しずつ変えて、同じ四角の羅列に見えないようにする。
   まずこのページで試し、よければサイト全体へ広げる。
   ================================================================== */

.wnl-family {
	--wf-paper: #fbf7f0;
	--wf-cream: #f5ecde;
	--wf-ink: #2b2521;
	--wf-muted: #6f6258;
	--wf-line: rgba(90, 64, 40, .16);
	--wf-amber: #c8752a;
	--wf-amber-deep: #9a531a;
	--wf-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='4.6' cy='10' rx='2.3' ry='2.9' transform='rotate(-18 4.6 10)'/%3E%3Cellipse cx='9' cy='5.2' rx='2.3' ry='3' transform='rotate(-6 9 5.2)'/%3E%3Cellipse cx='15' cy='5.2' rx='2.3' ry='3' transform='rotate(6 15 5.2)'/%3E%3Cellipse cx='19.4' cy='10' rx='2.3' ry='2.9' transform='rotate(18 19.4 10)'/%3E%3Cpath d='M12 10.6c-2.9 0-6.2 4.1-6.2 7.1 0 1.9 1.5 3 3.2 2.7 1.2-.2 2-.8 3-.8s1.8.6 3 .8c1.7.3 3.2-.8 3.2-2.7 0-3-3.3-7.1-6.2-7.1z'/%3E%3C/svg%3E");
	background: var(--wf-paper);
	color: var(--wf-ink);
}

/* 帯も温かい黒に */
.wnl-family .wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) {
	background: var(--wf-ink);
}

/* ---------- 地図:写真の上に、紙のように浮かせる ---------- */

.wnl-family-mapwrap.has-bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.wnl-family-mapwrap.has-bg::before,
.wnl-family-mapwrap.has-bg::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	pointer-events: none;
}

/* 写真は少しだけぼかす(何の写真か分かる程度に)。地図の四角は不透明なので文字は読める */
.wnl-family-mapwrap.has-bg::before {
	/* 写真は右下の隅にだけ置き、上と左へ向かって生成りに溶かす(動物が地図の四角に隠れないように) */
	inset: auto 0 0 auto;
	width: 58%;
	aspect-ratio: 3 / 2;
	background: var(--wnl-map-bg) right bottom / cover no-repeat;
	-webkit-mask-image: radial-gradient(120% 110% at 100% 100%, #000 45%, transparent 78%);
	mask-image: radial-gradient(120% 110% at 100% 100%, #000 45%, transparent 78%);
}

/* 左上(頭数と結果の欄・北の地方)は生成りを濃く重ねて地図を読ませ、
   右下(地図の空き)だけ写真を見せる。犬と猫はそこに来る(本人 2026-09-29「背景をもう少し薄く」「犬がいない」) */
.wnl-family-mapwrap.has-bg::after {
	background:
		radial-gradient(120% 90% at 85% 10%, rgba(255, 214, 160, .28), rgba(255, 214, 160, 0) 60%),
		linear-gradient(180deg, rgba(245, 236, 222, .15), rgba(245, 236, 222, 0));
}

@media (min-width: 768px) {
	@supports (grid-template-columns: subgrid) {
		.wnl-family .wnl-family-mapwrap {
			padding: 32px;
			border-radius: 20px;
			background: var(--wf-cream);
		}
	}
}

@media (max-width: 767px) {
	.wnl-family .wnl-family-mapwrap.has-bg {
		padding: 16px;
		border-radius: 18px;
		background: var(--wf-cream);
	}

	.wnl-family .wnl-family-map {
		background: rgba(251, 247, 240, .5);
	}
}

/* 頭数の文:数字をあめ色に */
.wnl-family .wnl-family-maphead__total {
	color: var(--wf-ink);
	font-weight: 700;
}

.wnl-family .wnl-family-maphead__total strong {
	color: var(--wf-amber-deep);
	font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
	font-size: 2.4rem;
	font-weight: 800;
}

/* ---------- 四角(都道府県) ---------- */

.wnl-family .wnl-family-tile {
	--wf-tile: #fffaf2;
	border: 1px solid var(--wf-line);
	border-radius: 10px;
	background: var(--wf-tile);
	color: var(--wf-ink);
	box-shadow: 0 1px 0 rgba(90, 64, 40, .08);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* 地方ごとの色味(ごく薄く。どれも生成りの仲間) */
.wnl-family .wnl-family-tile.is-r-hokkaido { --wf-tile: #f7f4ee; }
.wnl-family .wnl-family-tile.is-r-tohoku   { --wf-tile: #f8f1e6; }
.wnl-family .wnl-family-tile.is-r-kanto    { --wf-tile: #fdf3e4; }
.wnl-family .wnl-family-tile.is-r-chubu    { --wf-tile: #f7f3e2; }
.wnl-family .wnl-family-tile.is-r-kinki    { --wf-tile: #fcefe4; }
.wnl-family .wnl-family-tile.is-r-chugoku  { --wf-tile: #f9efe8; }
.wnl-family .wnl-family-tile.is-r-shikoku  { --wf-tile: #f6f1e3; }
.wnl-family .wnl-family-tile.is-r-kyushu   { --wf-tile: #fcece0; }

a.wnl-family-tile:hover,
a.wnl-family-tile:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(90, 64, 40, .16);
}

/* 子がいる県:温かい黒の地に、あめ色の肉球と数 */
.wnl-family .wnl-family-tile.has-pets {
	border-color: var(--wf-ink);
	background: var(--wf-ink);
	color: #fff;
}

.wnl-family .wnl-family-tile.has-pets .wnl-family-tile__count {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 2px;
	color: #ffc98a;
	font-weight: 800;
}

.wnl-family .wnl-family-tile.has-pets .wnl-family-tile__count::before {
	width: .9em;
	height: .9em;
	background: currentColor;
	-webkit-mask: var(--wf-paw) no-repeat center / contain;
	mask: var(--wf-paw) no-repeat center / contain;
	content: "";
}

/* 選んだ県・絞り込み中の県は、あめ色で */
.wnl-family .wnl-family-tile.is-selected {
	border-color: var(--wf-amber-deep);
	background: var(--wf-amber-deep);
	color: #fff;
}

.wnl-family .wnl-family-tile.is-current:not(.is-selected) {
	border-color: var(--wf-amber-deep);
	box-shadow: inset 0 0 0 1px var(--wf-amber-deep);
}

.wnl-family .wnl-family-tile.is-off {
	border-style: dashed;
	background: rgba(245, 236, 222, .6);
	color: var(--wf-muted);
}

/* スマホ:四角は約24px。数と肉球は出さず(地図の下の欄に出る)、「いる」印だけをあめ色に。
   角の丸みを小さく、枠を少し濃くして、写真の上でも四角に見えるように */
@media (max-width: 767px) {
	.wnl-family .wnl-family-tile {
		border-color: rgba(90, 64, 40, .3);
		border-radius: 4px;
		box-shadow: none;
	}

	.wnl-family .wnl-family-tile.has-pets .wnl-family-tile__count {
		display: none;
	}

	.wnl-family .wnl-family-tile.has-pets::after {
		background: #ffc98a;
	}

	a.wnl-family-tile:hover {
		transform: none;
	}
}

/* ---------- 選んだ結果の欄 ---------- */

.wnl-family .wnl-family-panel {
	border-radius: 16px;
	background: var(--wf-paper);
}

.wnl-family .wnl-family-panel:has(> [data-default]:not([hidden])) {
	border-color: rgba(90, 64, 40, .28);
	background: rgba(251, 247, 240, .6);
	color: var(--wf-muted);
}

.wnl-family .wnl-family-panel__go {
	border-color: var(--wf-amber-deep) !important;
	background: var(--wf-amber-deep) !important;
	color: #fff !important;
}

/* ---------- 一覧 ---------- */

.wnl-family .wnl-family-filter {
	border-color: var(--wf-line);
	border-radius: 16px;
	background: #fffdf8;
}

.wnl-family .wnl-family-filter select {
	border-color: var(--wf-line);
	border-radius: 10px;
	background-color: var(--wf-paper);
}

.wnl-family .wnl-family-card {
	border: 1px solid var(--wf-line);
	border-radius: 16px;
	background: #fffdf8;
	box-shadow: 0 10px 24px -14px rgba(90, 64, 40, .35);
	transition: transform .25s ease, box-shadow .25s ease;
}

.wnl-family .wnl-family-card:hover,
.wnl-family .wnl-family-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 16px 30px -14px rgba(90, 64, 40, .45);
}

.wnl-family .wnl-family-card__media {
	background: var(--wf-cream);
}

/* 「猫|愛知県 名古屋市」の犬・猫の前に肉球 */
.wnl-family .wnl-family-card__where {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--wf-muted);
}

.wnl-family .wnl-family-card__where::before {
	width: 14px;
	height: 14px;
	flex: none;
	background: var(--wf-amber);
	-webkit-mask: var(--wf-paw) no-repeat center / contain;
	mask: var(--wf-paw) no-repeat center / contain;
	transform: rotate(-14deg);
	content: "";
}

.wnl-family .wnl-family-facts li {
	border-color: transparent;
	background: var(--wf-cream);
	color: var(--wf-ink);
}

.wnl-family .wnl-family-card__date {
	color: var(--wf-muted);
}

/* 注意事項:生成りの紙に */
.wnl-family .wnl-family-notes {
	padding: clamp(24px, 3vw, 40px);
	border-radius: 18px;
	background: var(--wf-cream);
}

@media (prefers-reduced-motion: reduce) {
	.wnl-family .wnl-family-tile,
	.wnl-family .wnl-family-card {
		transition: none;
	}
}

/* 注意事項:760pxの箱が左に寄り、右が空いたうえに文が途中で折れていた(本人 2026-09-30「バランス悪い」)。
   器の幅いっぱいに広げ、1項目が1行に入るようにする。点は肉球に(一覧のカードと同じ) */
.wnl-family .wnl-family-notes {
	max-width: none;
	gap: 20px;
}

.wnl-family .wnl-family-notes__list {
	gap: 14px;
	padding-left: 0;
	list-style: none;
}

.wnl-family .wnl-family-notes__list li {
	position: relative;
	padding-left: 28px;
	word-break: auto-phrase;
}

.wnl-family .wnl-family-notes__list li::before {
	position: absolute;
	top: .5em;
	left: 0;
	width: 16px;
	height: 16px;
	background: var(--wf-amber);
	-webkit-mask: var(--wf-paw) no-repeat center / contain;
	mask: var(--wf-paw) no-repeat center / contain;
	transform: rotate(-14deg);
	content: "";
}

/* スマホ:枠が縦長なので、写真は枠のいちばん下に帯として置き、上へ向かって溶かす
   (右下の隅に置くと、結果の欄の裏に重なった) */
@media (max-width: 767px) {
	.wnl-family .wnl-family-mapwrap.has-bg {
		padding-bottom: calc(16px + 52vw);
	}

	.wnl-family-mapwrap.has-bg::before {
		width: 100%;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
	}
}

/* ---------- スマホ:地方 → 都道府県(2026-10-13 本人) ----------
   地図の四角は約24pxで押しにくかった。スマホでは地図の代わりに、地方の一覧を出す。
   地方を押すと、その中の都道府県が大きな札で開く。PC・タブレットは今までどおり地図。 */
.wnl-family .wnl-family-areas {
	display: none;
}

@media (max-width: 767px) {
	.wnl-family .wnl-family-map,
	.wnl-family .wnl-family-panel {
		display: none;
	}

	.wnl-family .wnl-family-areas {
		display: grid;
		gap: 8px;
	}

	.wnl-family .wnl-family-area {
		border: 1px solid var(--wf-line);
		border-radius: 12px;
		background: var(--wf-paper);
		overflow: hidden;
	}

	.wnl-family .wnl-family-area[open] {
		border-color: var(--wf-ink);
	}

	.wnl-family .wnl-family-area summary {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 52px;
		padding: 0 16px;
		color: var(--wf-ink);
		font-weight: 700;
		list-style: none;
		cursor: pointer;
	}

	.wnl-family .wnl-family-area summary::-webkit-details-marker {
		display: none;
	}

	/* 右端の「開く/閉じる」の印 */
	.wnl-family .wnl-family-area summary::after {
		width: 8px;
		height: 8px;
		margin-left: auto;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform .18s ease;
		content: "";
	}

	.wnl-family .wnl-family-area[open] summary::after {
		transform: translateY(2px) rotate(-135deg);
	}

	/* 子がいる地方は、あめ色の肉球と数 */
	.wnl-family .wnl-family-area__count {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		color: var(--wf-amber-deep);
		font-weight: 800;
	}

	.wnl-family .wnl-family-area__count::before {
		width: .95em;
		height: .95em;
		background: currentColor;
		-webkit-mask: var(--wf-paw) no-repeat center / contain;
		mask: var(--wf-paw) no-repeat center / contain;
		content: "";
	}

	.wnl-family .wnl-family-area__prefs {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		margin: 0;
		padding: 0 12px 14px;
		list-style: none;
	}

	.wnl-family .wnl-family-area__prefs li {
		margin: 0;
	}

	.wnl-family .wnl-family-pref {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		padding: 6px 4px;
		border: 1px solid var(--wf-line);
		border-radius: 10px;
		background: #fffaf2;
		color: var(--wf-ink);
		font-size: .9375rem;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		text-decoration: none;
	}

	.wnl-family .wnl-family-pref.has-pets {
		border-color: var(--wf-ink);
		background: var(--wf-ink);
		color: #fff;
	}

	.wnl-family .wnl-family-pref__count {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		color: #ffc98a;
		font-size: .8125rem;
		font-weight: 800;
	}

	.wnl-family .wnl-family-pref__count::before {
		width: .9em;
		height: .9em;
		background: currentColor;
		-webkit-mask: var(--wf-paw) no-repeat center / contain;
		mask: var(--wf-paw) no-repeat center / contain;
		content: "";
	}

	.wnl-family .wnl-family-pref.is-current {
		border-color: var(--wf-amber-deep);
		box-shadow: inset 0 0 0 1px var(--wf-amber-deep);
	}

	.wnl-family .wnl-family-pref.is-off {
		border-style: dashed;
		background: rgba(245, 236, 222, .6);
		color: var(--wf-muted);
		font-weight: 500;
	}
}

/* ---------- サイトの中でのやり取り(includes/talk.php・templates/talk.php。2026-10-31) ---------- */

.wnl-family-talkstart {
	margin: 40px 0 32px;
	padding: 24px;
	border: 2px solid var(--wnl-v3-dark);
	border-radius: 14px;
	background: var(--wnl-v3-paper);
}
.wnl-family-talkstart .wnl-family-form,
.wnl-family-talkstart .wnl-family-form > * {
	min-width: 0;
}
.wnl-family-talkstart .wnl-family-form {
	gap: 24px;
}
.wnl-family-talkstart h2 {
	margin: 0 0 12px;
	font-size: 1.25rem;
}
.wnl-family-talkstart ul.wnl-family-note {
	display: grid;
	gap: 8px;
	margin: 0 0 20px;
	padding-left: 1.25em;
}
.wnl-family-talk__title {
	margin: 32px 0 12px;
	font-size: 1.25rem;
}
.wnl-family-talk {
	display: grid;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.wnl-family-talk__item {
	max-width: 88%;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--wnl-v3-soft);
}
.wnl-family-talk__item.is-me {
	justify-self: end;
	border: 1px solid var(--wnl-v3-line);
	background: var(--wnl-v3-paper);
}
.wnl-family-talk__who {
	margin: 0 0 4px;
	font-size: .8125rem;
	font-weight: 700;
}
.wnl-family-talk__who time {
	margin-left: 8px;
	font-weight: 400;
	opacity: .7;
}
.wnl-family-talk__body {
	margin: 0;
	overflow-wrap: anywhere;
}
/* 運営に見せるメッセージを選ぶ欄。本文の頭を読むので、パソコン幅でも1列。 */
.wnl-family-report .wnl-family-pick {
	grid-template-columns: minmax(0, 1fr);
}
.wnl-family-pick .wnl-family-choice--block {
	align-items: flex-start;
	padding: 10px 12px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 10px;
	background: var(--wnl-v3-paper);
	overflow-wrap: anywhere;
}
.wnl-family-pick .wnl-family-choice--block span {
	min-width: 0;
}
.wnl-family-pick .wnl-family-note {
	margin: 0;
}
@media (min-width: 768px) {
	#wnl-family-talk-form > .wnl-v3-btn,
	.wnl-family-talkstart .wnl-family-form > .wnl-v3-btn {
		justify-self: start;
	}
}

/* ---------- 掲載が1件も無いあいだ(2026-11-02 本人OK) ----------
   「0匹」と空の地方・絞り込みは出さず、最初の1匹を載せてもらう入口を大きく出す。 */
.wnl-family .wnl-family-mapwrap.is-empty .wnl-family-panel,
.wnl-family .wnl-family-mapwrap.is-empty .wnl-family-areas {
	display: none;
}

.wnl-family .wnl-family-start {
	display: grid;
	gap: 18px;
	padding: clamp(28px, 5vw, 48px);
	border: 1px solid var(--wf-line);
	border-radius: 18px;
	background: var(--wf-cream);
	color: var(--wf-ink);
}

.wnl-family .wnl-family-start h2 {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1.4;
}

.wnl-family .wnl-family-start p {
	margin: 0;
	line-height: 1.9;
	word-break: auto-phrase;
}

.wnl-family .wnl-family-start__points {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
}

.wnl-family .wnl-family-start__points li {
	position: relative;
	padding-left: 28px;
	word-break: auto-phrase;
}

.wnl-family .wnl-family-start__points li::before {
	position: absolute;
	top: .5em;
	left: 0;
	width: 16px;
	height: 16px;
	background: var(--wf-amber);
	-webkit-mask: var(--wf-paw) no-repeat center / contain;
	mask: var(--wf-paw) no-repeat center / contain;
	transform: rotate(-14deg);
	content: "";
}

.wnl-family .wnl-family-start__go {
	justify-self: start;
	margin-top: 6px;
}

.wnl-family .wnl-family-start__follow {
	padding-top: 18px;
	border-top: 1px solid var(--wf-line);
	color: var(--wf-muted);
	font-size: .9375rem;
}

@media (max-width: 767px) {
	.wnl-family .wnl-family-start__go {
		justify-self: stretch;
		text-align: center;
	}
}