/* =========================================================================
   ダンプステーションマップ 2026 — 道路標識の青
   スマホを基準に書き、720px・1024px 以上で広げる。
   ========================================================================= */

:root {
	--white: #ffffff;
	--bg2: #f1f5f9;
	--line: #d3dce7;
	--line2: #b8c6db;
	--sign: #1351a6;
	--sign-d: #0b3a7a;
	--sign-t: #dbe9fc;
	--yellow: #f9cc21; /* キーボード操作の枠（フォーカス）だけに使う */
	/* 立ち寄りOKの色（2026年10月1日。GPT再々レビューの第一候補「オレンジ＋白」。B案の麦色はくすんで閉鎖した施設のように見えるため不採用）
	   鮮やかな色は小さな面だけに使う：地図のピン・札の丸い印・紹介枠の上辺（4px）。大きな面は白、文字は濃い色。
	   色を変えるときは --ok-* だけを変える（比較した候補：アンバー #ffbe0b・札 #fff2c2／ターコイズ #00b8a9・札 #ddf8f1） */
	--ok-accent: #ff9f1c;
	--ok-surface: #ffffff;
	--ok-surface-line: #d3dce7;
	--ok-badge: #edf5fc; /* 立ち寄りOKの札：淡い青（10月7日 統合修正依頼。以前は淡いオレンジ #fff0d6） */
	--ok-badge-line: #c4d9eb;
	--ok-ink: #18334d;
	--ok-pin: #c65313; /* 地図の立ち寄りOKのピン（10月7日 クリアブルー案。以前は #ff9f1c） */
	--ok-pin-ink: #ffffff;
	--ok-pin-line: #ffffff;
	--ink: #171d26;
	--ink2: #515865;
	--road: #3c4046;
	--ok-bg: #f3f6fa; /* 一覧・料金表の「立ち寄り」欄（札と同じ淡い色。鮮やかなオレンジでは塗らない） */
	--use-bg: #eef4fd;
	--gray-x: #8a93a0;
	--warn: #7a4a00;
	--warn-bg: #fff4d0;
	/* 日本語は端末の標準の文字（読み込まない）。Windows は BIZ UDPゴシック、Mac・iPhone はヒラギノ、Android は Noto */
	--jp: "BIZ UDPGothic", "BIZ UDPゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif;
	--en: "Overpass", "BIZ UDPGothic", "BIZ UDPゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif;
	--radius: 14px;
	--gutter: 16px;
	--header-h: 56px;
}

@media (min-width: 1024px) {
	:root {
		--gutter: 40px;
		--header-h: 72px;
	}
}

/* ---------- base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--jp);
	font-size: 15px;
	line-height: 1.75;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}

img,
svg,
iframe,
video {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--sign);
}

a:hover {
	color: var(--sign-d);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/*
 * キーボード操作のフォーカス枠。白い背景では青（白との明度比 7.6:1）、青い標識や濃い背景の上では黄色（5:1）。
 * 以前は全部黄色で、白地では 1.5:1 と見えなかった（2026年10月2日のセルフレビュー）。
 */
:focus-visible {
	outline: 3px solid var(--sign);
	outline-offset: 2px;
}

.c-sign :focus-visible,
.c-road :focus-visible,
.c-btn--primary:focus-visible,
.c-chip[aria-pressed="true"]:focus-visible,
.c-tab[aria-pressed="true"]:focus-visible {
	outline-color: var(--yellow);
}

h1,
h2,
h3 {
	text-wrap: balance;
}

[hidden] {
	display: none !important;
}

.ds-icon {
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

.ds-arrow {
	flex-shrink: 0;
	display: block;
	fill: currentColor;
}

.ds-camper {
	flex-shrink: 0;
	display: block;
}

.ds-camper .fg {
	fill: var(--sign);
}

.ds-camper .bg {
	fill: var(--white);
}

.ib {
	display: inline-block;
}

.u-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.u-skip {
	position: absolute;
	left: 8px;
	top: -60px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--ink);
	color: var(--white);
	font-weight: 700;
}

.u-skip:focus {
	top: 8px;
	color: var(--white);
}

.u-pc {
	display: none !important;
}

@media (min-width: 1024px) {
	.u-pc {
		display: flex !important;
	}

	.u-sp {
		display: none !important;
	}
}

.l-wrap {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------- header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	border-bottom: 1px solid var(--line);
}

.admin-bar .site-header {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .site-header {
		top: 32px;
	}
}

.site-header__in {
	position: relative;
	height: var(--header-h);
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 6px 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-header__logo {
	height: 44px;
	display: flex;
	align-items: center;
}

.site-header__logo img {
	width: 163px;
	height: auto;
	display: block;
}

.site-header__tools {
	margin-left: auto;
	display: flex;
}

.site-header__btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sign);
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-header__btn .is-open,
.site-header__btn[aria-expanded="true"] .is-closed {
	display: none;
}

.site-header__btn[aria-expanded="true"] .is-open {
	display: block;
}

.site-nav,
.site-header__search {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 12px 20px rgba(23, 29, 38, 0.08);
}

.site-nav.is-open,
.site-header__search.is-open {
	display: block;
}

.site-nav {
	padding: 4px 16px 18px;
}

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	min-height: 52px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.site-nav__provide {
	margin-top: 14px;
	min-height: 48px;
	border: 2px solid var(--sign);
	border-radius: 10px;
	color: var(--sign);
	font-weight: 700;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.site-header__search {
	padding: 10px 16px 12px;
}

@media (min-width: 1180px) {
	.site-header__in {
		padding: 0 32px 0 40px;
		gap: 28px;
	}

	.site-header__logo img {
		width: 188px;
	}

	.site-header__tools {
		display: none;
	}

	.site-nav,
	.site-header__search {
		position: static;
		display: flex;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
	}

	.site-header__search {
		flex: 0 1 320px;
		min-width: 220px;
	}

	.site-nav {
		margin-left: auto;
		align-items: center;
		gap: 2px;
	}

	.site-nav__list {
		display: flex;
		gap: 2px;
	}

	.site-nav__list a {
		min-height: 44px;
		padding: 0 12px;
		border: 0;
		font-size: 15px;
		white-space: nowrap;
	}

	.site-nav__list a:hover {
		color: var(--sign);
	}

	.site-nav__provide {
		margin: 0 0 0 8px;
		min-height: 44px;
		padding: 0 16px;
		font-size: 15px;
		white-space: nowrap;
	}

	.site-nav__provide:hover {
		background: var(--sign-t);
	}
}

/* ---------- search box ---------- */
.c-search {
	position: relative;
	width: 100%;
}

.c-search__input {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0 16px 0 46px;
	border: 2px solid var(--sign);
	border-radius: 12px;
	background: var(--white);
	color: var(--ink);
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

.c-search__input::placeholder {
	color: #6a7180;
}

.c-search__icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--sign);
	pointer-events: none;
}

/* ヘッダーの検索：虫眼鏡が「検索」ボタン（10月7日 再チェック U02） */
.c-search__iconbtn {
	left: 2px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: none;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	cursor: pointer;
}

.c-search__iconbtn:hover {
	background: var(--sign-t);
}

.c-search__iconbtn:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 0;
}

/* 見える「検索」ボタン（入力欄の右端。10月6日 F05） */
.c-search--go .c-search__input {
	padding-right: 84px;
}

.c-search__go {
	position: absolute;
	top: 6px;
	right: 6px;
	bottom: 6px;
	min-width: 68px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: var(--sign);
	color: var(--white);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.c-search__go:hover {
	background: var(--sign-d);
}

.c-search__go:focus-visible {
	outline: 3px solid var(--ok-pin);
	outline-offset: 2px;
}

.c-search--header .c-search__input {
	height: 46px;
	border-color: var(--line);
	background: var(--bg2);
}

@media (min-width: 1180px) {
	.c-search--header .c-search__input {
		height: 44px;
		font-size: 14px;
		border-radius: 10px;
	}
}

/* ---------- buttons ---------- */
.c-btn {
	min-height: 54px;
	padding: 0 16px;
	border: 2px solid var(--sign);
	border-radius: 12px;
	background: var(--white);
	color: var(--sign);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background-color 0.15s, filter 0.15s;
}

/* オレンジは「立ち寄りOK」だけに使う。いちばん押してほしいボタンは青 */
.c-btn--primary {
	border-color: var(--sign);
	background: var(--sign);
	color: var(--white);
}

.c-btn--primary:hover {
	border-color: var(--sign-d);
	background: var(--sign-d);
	color: var(--white);
}

.c-btn--blue {
	border-color: var(--sign);
	background: var(--sign);
	color: var(--white);
}

.c-btn--blue:hover {
	background: var(--sign-d);
	color: var(--white);
}

.c-btn--outline:hover {
	background: var(--sign-t);
}

.c-btn--soft {
	min-height: 46px;
	border: 1.5px solid var(--line);
	color: var(--ink);
	font-size: 13px;
}

.c-btn--soft .ds-icon {
	color: var(--sign);
}

.c-btn--soft:hover {
	border-color: var(--sign);
	color: var(--ink);
}

.c-btn--dark {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

.c-btn--dark:hover {
	background: #2a3240;
	color: var(--white);
}

.c-btn--arrow {
	justify-content: space-between;
	padding: 0 18px;
}

.c-btn--arrow .c-btn__label {
	flex-grow: 1;
	text-align: left;
}

.c-btn--sm {
	min-height: 46px;
	font-size: 14px;
}

.c-textbtn {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sign);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 4px;
}

.c-iconbtn {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	background: var(--white);
	color: var(--sign);
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-iconbtn.is-done {
	border-color: var(--sign);
	background: var(--sign-t);
}

/* ---------- chips / tabs ---------- */
.c-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.c-chip {
	flex-shrink: 0;
	height: 44px;
	padding: 0 15px;
	border: 2px solid var(--line2);
	border-radius: 10px;
	background: var(--white);
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.c-chip .ds-icon {
	display: none;
}

.c-chip[aria-pressed="true"] {
	padding-left: 12px;
	border-color: var(--sign);
	background: var(--sign);
	color: var(--white);
}

.c-chip[aria-pressed="true"] .ds-icon {
	display: block;
}

.c-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.c-tab {
	height: 44px;
	padding: 0 16px;
	border: 2px solid var(--line2);
	border-radius: 22px;
	background: var(--white);
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
}

.c-tab[aria-pressed="true"] {
	border-color: var(--sign);
	background: var(--sign);
	color: var(--white);
}

.c-tab:disabled {
	opacity: 0.5;
	cursor: default;
}

/* 絞り込みのボタンの下：「立ち寄りOK」の意味 */
.c-chips__note {
	margin: 8px 0 0;
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.6;
}

.c-chips__note-key {
	margin-right: 6px;
	padding: 1px 7px;
	border-radius: 5px;
	background: var(--ok-badge);
	color: var(--ok-ink);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.c-chips__note-key::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px; /* 地図の立ち寄りOKのピン（角丸の四角）と同じ形 */
	background: var(--ok-pin);
}

/* ---------- tags ---------- */
.c-tag {
	min-height: 26px;
	padding: 2px 9px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.c-tag--ok {
	border: 1.5px solid var(--ok-badge-line);
	background: var(--ok-badge);
	color: var(--ok-ink);
}

/* 立ち寄りOKの札の印：地図のピンと同じ色・同じ紺のふちの小さな丸（一覧と地図を色で結びつける） */
.c-tag--ok .ds-icon {
	display: none;
}

.c-tag--ok::before,
.area-card__ok::before,
.list-head__ok::before,
.dropin-panel__eyebrow::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 2.5px; /* 地図の立ち寄りOKのピン（角丸の四角）と同じ形 */
	background: var(--ok-pin);
	display: inline-block;
	flex-shrink: 0;
}

.area-card__ok::before,
.list-head__ok::before,
.dropin-panel__eyebrow::before {
	margin-right: 6px;
}

.c-tag--stay,
.c-tag--gray {
	border: 1px solid var(--line);
	background: var(--bg2);
	color: var(--ink2);
}

.c-tag--info {
	border: 1px solid #bcd3f5;
	background: var(--sign-t);
	color: var(--sign-d);
}

.c-tag--new {
	background: var(--sign);
	color: var(--white);
	font-family: var(--en);
	letter-spacing: 0.06em;
}

.c-tag--cat {
	background: var(--sign-t);
	color: var(--sign-d);
}

.c-tag--area {
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink2);
}

.c-tag--warn {
	border: 1px solid #e6c36a;
	background: var(--warn-bg);
	color: var(--warn);
}

/* ---------- sign (road sign panel) ---------- */
.c-sign {
	background: var(--sign);
	border-radius: 14px;
	padding: 5px;
}

.c-sign__in {
	border: 2.5px solid var(--white);
	border-radius: 10px;
	padding: 14px 14px 16px;
	color: var(--white);
}

.c-sign--flat {
	border-radius: 0;
}

.c-signicon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: 2px solid var(--white);
	border-radius: 7px;
	background: var(--sign);
	box-shadow: 0 0 0 2px var(--sign);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-signicon .ds-icon {
	width: 18px;
	height: 18px;
}

.c-signicon .ds-arrow {
	width: 13px;
	height: 16px;
}

.c-sechead {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.c-sechead__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.c-sechead__title {
	margin: 0;
	flex-grow: 1;
	font-size: 21px;
	line-height: 1.4;
	font-weight: 700;
}

.c-sechead__sub {
	margin: 0;
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.7;
}

@media (min-width: 1024px) {
	.c-sechead__title {
		font-size: 26px;
	}

	.c-signicon {
		width: 38px;
		height: 38px;
		border-radius: 8px;
	}

	.c-signicon .ds-icon {
		width: 21px;
		height: 21px;
	}

	.c-sechead__sub {
		font-size: 15px;
	}
}

/* ---------- distance plate ---------- */
.c-plate {
	width: 60px;
	height: 50px;
	flex-shrink: 0;
	padding: 3px;
	border-radius: 9px;
	background: var(--sign);
	display: flex;
}

.c-plate__in {
	flex-grow: 1;
	border: 1.5px solid var(--white);
	border-radius: 6px;
	color: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
}

.c-plate__num {
	font-family: var(--en);
	font-size: 19px;
	font-weight: 800;
	line-height: 1;
}

.c-plate__unit {
	font-family: var(--en);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* ---------- panels / lists ---------- */
.c-panel {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.c-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.c-row {
	border-bottom: 1px solid var(--line);
	background: var(--white);
}

.c-row[hidden] {
	display: none;
}

.c-row__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 16px;
	align-items: center;
	gap: 12px;
	padding: 14px 14px 14px 16px;
	color: var(--ink);
	text-decoration: none;
}

.c-row--plate .c-row__link {
	grid-template-columns: 60px minmax(0, 1fr) 16px;
	padding: 12px 14px;
}

.c-row__link:hover {
	background: #f8fafc;
	color: var(--ink);
}

.c-row__plate {
	display: flex;
}

.c-row__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.c-row__name {
	font-size: 15px;
	line-height: 1.45;
	font-weight: 700;
}

.c-row__place {
	color: var(--ink2);
	font-size: 12px;
	line-height: 1.5;
}

.c-row__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.c-row__tags .c-tag {
	min-height: 24px;
	font-size: 11px;
}

.c-row__chev {
	color: var(--sign);
}

.c-rows--card {
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

/*
 * 施設の一覧の1行（1列表示）：名前・区分・種類・住所と、使える範囲の○×（立ち寄り・宿泊 × ブラック・グレー）。
 * スマホ：名前などの下に○×。PC：右側に○×を並べ、行をまたいで縦にそろえる。
 */
.c-row--spot .c-row__link {
	grid-template-columns: minmax(0, 1fr) 16px;
	grid-template-areas: "body chev" "use use";
	row-gap: 10px;
	padding: 14px 14px 14px 16px;
}

.c-row--spot.c-row--plate .c-row__link {
	grid-template-columns: 60px minmax(0, 1fr) 16px;
	grid-template-areas: "plate body chev" "use use use";
}

.c-row--spot .c-row__plate {
	grid-area: plate;
	align-self: start;
}

.c-row--spot .c-row__body {
	grid-area: body;
	gap: 6px;
}

.c-row--spot .c-row__use {
	grid-area: use;
	min-width: 0;
}

.c-row--spot .c-row__chev {
	grid-area: chev;
}

.c-row--spot .c-row__name {
	font-size: 16px;
	line-height: 1.45;
}

.c-row--spot .c-row__addr {
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.55;
}

.c-use {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.c-use__group {
	min-width: 0;
	padding: 6px 10px 7px;
	border-radius: 8px;
	background: #f3f6fa;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 12px;
	font-size: 12px;
	line-height: 1.4;
}

/* 色を付けるのは立ち寄りOK（ブラックも使える）の行だけ */
.c-use__group--drop.is-on {
	background: #f3f6fa; /* 立ち寄りと宿泊を同じ強さで（10月7日 統合修正依頼。以前は立ち寄りだけ淡いオレンジ） */
}

/* 営業状況を確認中の施設：「確認前の情報」として、過去形の文字を添える（10月7日 R01） */
.c-use--prior {
	position: relative;
}

.c-use__prior {
	grid-column: 1 / -1;
	color: #6d460c;
	font-size: 11px;
	font-weight: 700;
}

.c-use--prior .c-use__item {
	color: #52677b;
	font-weight: 400;
}

.c-use__word {
	margin-left: 2px;
	font-size: 11px;
}

.c-use--prior .c-check {
	opacity: 0.55;
}

.c-use__label {
	width: 100%;
	color: var(--ink2);
	font-size: 11px;
	font-weight: 700;
}

.c-use__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	white-space: nowrap;
}

.c-use__item .c-check {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.c-use__item.is-no,
.c-use__item.is-unknown {
	color: var(--ink2);
	font-weight: 400;
}

.c-row--result .c-row__link {
	grid-template-areas: "plate body" ". use";
	row-gap: 10px;
}

.c-row--result .c-row__plate {
	grid-area: plate;
	align-self: start;
}

.c-row--result .c-row__body {
	grid-area: body;
}

.c-row--result .c-row__use {
	grid-area: use;
	min-width: 0;
}

/*
 * 行を横並び（名前など｜○×｜＞）にするかは、画面の幅ではなく一覧の幅で決める。
 * 施設ページの横の「近くのダンプステーション」のように狭い場所では、PCでも縦に積む。
 */
.c-rows {
	container: rows / inline-size;
}

@container rows (min-width: 640px) {
	.c-row--spot .c-row__link {
		grid-template-columns: minmax(0, 1fr) auto 16px;
		grid-template-areas: "body use chev";
		column-gap: 20px;
		padding: 16px 18px 16px 20px;
	}

	.c-row--spot.c-row--plate .c-row__link {
		grid-template-columns: 60px minmax(0, 1fr) auto 16px;
		grid-template-areas: "plate body use chev";
	}

	.c-row--spot .c-use {
		grid-template-columns: repeat(2, 156px);
	}
}

.c-rows--card .c-row:last-child {
	border-bottom: 0;
}

.c-dl {
	margin: 0;
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.c-dl > div {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	padding: 13px 14px;
	border-bottom: 1px solid var(--line);
}

.c-dl > div:last-child {
	border-bottom: 0;
}

.c-dl dt {
	color: var(--ink2);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
}

.c-dl dd {
	margin: 0;
	min-width: 0;
	font-size: 14px;
	line-height: 1.7;
}

.c-dl__tel {
	font-weight: 700;
}

.c-dl__rich p {
	margin: 0 0 0.4em;
}

.c-dl__rich p:last-child {
	margin-bottom: 0;
}

.c-dl__links {
	display: flex;
	flex-direction: column;
}

.c-extlink {
	min-height: 32px;
	color: var(--sign);
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.c-extlink:hover {
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.c-dl > div {
		grid-template-columns: 136px minmax(0, 1fr);
		padding: 14px 20px;
	}

	.c-dl dd {
		font-size: 15px;
	}
}

.c-notice {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1.5px solid #e6c36a;
	border-radius: 10px;
	background: var(--warn-bg);
	color: var(--warn);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.c-notice .ds-icon {
	margin-top: 2px;
}

.c-notice--info {
	margin-top: 16px;
	border-color: var(--sign);
	background: var(--sign-t);
	color: var(--ink);
	font-weight: 400;
}

.c-notice--info .ds-icon {
	color: var(--sign);
	flex: none;
}

.c-notice--info a {
	font-weight: 700;
}

/* ---------- breadcrumb ---------- */
.c-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	min-height: 44px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 6px;
	color: var(--ink2);
	font-size: 12px;
	line-height: 1.5;
}

.c-crumbs li + li::before {
	content: "›";
	margin-right: 6px;
	color: var(--ink2);
}

.c-crumbs a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

@media (min-width: 1024px) {
	.c-crumbs ol {
		min-height: 52px;
		font-size: 13px;
	}
}

/* ---------- click-to-load frames and embeds ---------- */
.c-lazyframe {
	position: relative;
	min-height: 190px;
	border: 1.5px dashed var(--line2);
	border-radius: 12px;
	background: var(--bg2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
}

.c-lazyframe__btn {
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--sign);
	border-radius: 10px;
	background: var(--white);
	color: var(--sign);
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}

.c-lazyframe__note {
	color: var(--ink2);
	font-size: 12px;
}

.c-lazyframe.is-loaded {
	border: 0;
}

.c-lazyframe iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.c-embed {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.c-embed__head {
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.c-embed__icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--bg2);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-embed__title {
	flex-grow: 1;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.c-embed__body {
	position: relative;
	min-height: 150px;
	margin: 0 14px 14px;
	border-radius: 10px;
	background: var(--bg2);
	overflow: hidden;
}

.c-embed__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.c-embed__loading {
	min-height: 150px;
	padding: 14px;
	color: var(--ink2);
	font-size: 12px;
	line-height: 1.7;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.c-embed__body.is-loaded {
	margin: 0;
	padding: 0 14px 14px;
	border-radius: 0;
	background: none;
	min-height: 0;
}

/* YouTubeは横長の枠に合わせる。Instagram・X・TikTokは、それぞれの埋め込みが高さを決める */
.c-embed--youtube .c-embed__body.is-loaded iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
}

.c-embed__body.is-loaded iframe {
	max-width: 100%;
}

.c-embed__body.is-loaded blockquote {
	margin: 0 !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.c-embed__link {
	margin: -4px 14px 14px auto;
	min-height: 32px;
	color: var(--sign);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.c-embed__link:hover {
	text-decoration: underline;
}

/* ---------- road band and footer ---------- */
.c-road {
	position: relative;
	height: 84px;
	margin-top: 0;
	background: var(--road);
	overflow: hidden;
}

.c-road__line {
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--white);
}

.c-road__line--1 {
	top: 12px;
}

.c-road__line--2 {
	top: 39px;
	background: repeating-linear-gradient(90deg, var(--white) 0 36px, transparent 36px 64px);
}

.c-road__line--3 {
	top: 67px;
}

.c-road__car {
	position: absolute;
	left: 72%;
	top: 44px;
}

.c-road .ds-camper {
	width: 32px;
	height: 21px;
}

.c-road .ds-camper .fg {
	fill: var(--white);
}

.c-road .ds-camper .bg {
	fill: var(--road);
}

.site-footer {
	padding: 26px 16px 30px;
	background: var(--white);
}

.site-footer__in {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.site-footer__brand img {
	width: 163px;
	display: block;
}

.site-footer__brand p {
	margin: 0;
	color: var(--ink2);
	font-size: 12px;
	line-height: 1.6;
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
}

.site-footer__links a {
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--ink);
	font-size: 13px;
	text-decoration: none;
}

.site-footer__links a:hover {
	color: var(--sign);
	text-decoration: underline;
}

.site-footer__copy {
	max-width: 1200px;
	margin: 12px auto 0;
	color: var(--ink2);
	font-size: 11px;
}

@media (min-width: 1024px) {
	.c-road {
		height: 96px;
	}

	.c-road__line--1 {
		top: 13px;
	}

	.c-road__line--2 {
		top: 45px;
	}

	.c-road__line--3 {
		top: 77px;
	}

	.c-road__car {
		left: 15%;
		top: 51px;
	}

	.c-road .ds-camper {
		width: 38px;
		height: 25px;
	}

	.site-footer {
		padding: 40px var(--gutter) 36px;
	}

	.site-footer__in {
		flex-direction: row;
		justify-content: space-between;
		gap: 48px;
	}

	.site-footer__brand img {
		width: 188px;
	}

	.site-footer__brand p {
		font-size: 13px;
	}

	.site-footer__links {
		grid-template-columns: repeat(4, auto);
		column-gap: 40px;
	}

	.site-footer__links a {
		font-size: 14px;
	}

	.site-footer__copy {
		margin-top: 28px;
		font-size: 12px;
	}
}

/* =========================================================================
   施設ページ
   ========================================================================= */
.spot__crumbs {
	padding-top: 0;
}

/* media: photos */
.spot-gallery {
	position: relative;
	height: 220px;
}

.spot-gallery__item {
	display: none;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: var(--bg2);
	overflow: hidden;
	cursor: zoom-in;
}

.spot-gallery__item--0 {
	display: block;
}

.spot-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.spot-gallery__all {
	position: absolute;
	right: 12px;
	bottom: 12px;
	min-height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: rgba(23, 29, 38, 0.74);
	color: var(--white);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* media: map (no photos) */
.spot-mapview__map {
	position: relative;
	height: 220px;
	background: #d5e8f4; /* 地図が出るまでの色（サイトの地図の海の色） */
}

.spot-mapview__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.spot-mapview__none {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink2);
	font-size: 14px;
}

.spot-mapview__col {
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/*
 * 地図の下の帯（10月7日。埋め込みの地図はそのままで、まわりをクリアブルー案に合わせる）：
 * トップ・地域ページの地図と同じ印でこの施設の区分を示し、スマホではストリートビューへの移動もここに置く。
 */
.spot-mapbar {
	min-height: 48px;
	padding: 6px 10px 6px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: #21384e;
}

/* 区分の行とストリートビューのボタンを1行目に、「事前に…」は2行目に幅いっぱいで（スマホで文が細切れにならないように） */
.spot-mapbar {
	flex-wrap: wrap;
	row-gap: 0;
}

.spot-mapbar__text {
	display: contents;
}

.spot-mapbar__kind {
	order: 1;
	flex: 1;
	padding: 4px 0;
}

.spot-mapbar__sv {
	order: 2;
}

.spot-mapbar__call {
	order: 3;
	flex-basis: 100%;
	margin: 0 0 4px 26px; /* 印の幅のぶん下げて、「この施設」とそろえる */
	color: #21384e;
	font-size: 12px;
	line-height: 1.5;
}

.spot-mapbar__kind {
	min-width: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
}

.spot-mapbar__label {
	color: #526a7c;
	font-size: 12px;
	white-space: nowrap;
}

.spot-mapbar__kind b {
	font-weight: 700;
}

.spot-mapbar__sv {
	min-height: 40px;
	padding: 0 12px;
	border: 1.5px solid #1856a4;
	border-radius: 10px;
	background: var(--white);
	color: #1856a4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.spot-mapbar__sv:hover {
	background: #edf2f7;
}

/* 休業中・確認中の施設の印（灰色の丸） */
.ds-mark--off {
	width: 13px;
	height: 13px;
	margin: 0 2.5px;
	border: 2px solid var(--white);
	border-radius: 50%;
	background: var(--gray-x);
	box-shadow: 0 0 0 1px rgba(23, 29, 38, 0.2);
}

.spot-mapview__side {
	display: none;
}

.spot-mapview__nophoto {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	border: 1.5px solid var(--line);
	background: var(--white);
	font-size: 14px;
	font-weight: 700;
}

.spot-mapview__camera {
	width: 44px;
	height: 44px;
	border-radius: 22px;
	background: var(--sign-t);
	color: var(--sign);
	display: flex;
	align-items: center;
	justify-content: center;
}

.spot-mapview__nophoto .c-btn {
	padding: 0 18px;
	min-height: 44px;
}

/* 施設の写真がないとき：利用者が投稿した写真（スマホは地図の下、PCは地図の右。10月8日） */
.spot-mapview__side--user {
	display: block;
	padding: 12px 16px 0;
}

.spot-mapview__side--user .c-lazyframe {
	display: none;
}

.spot-userphoto {
	margin: 0;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	background: var(--white);
	overflow: hidden;
}

.spot-userphoto__img {
	position: relative;
	display: block;
	background: var(--bg2);
}

.spot-userphoto__img img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
}

.spot-userphoto__badge {
	position: absolute;
	left: 8px;
	top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(23, 29, 38, 0.78);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.spot-userphoto__cap {
	padding: 8px 12px 10px;
	color: var(--ink2);
	font-size: 12.5px;
	line-height: 1.6;
}

.comment-photo-note {
	margin: 4px 0 0;
	color: var(--ink2);
	font-size: 12px;
}

.comments .says {
	display: none;
}

/* body (mobile: one column in reading order) */
.spot__body {
	display: flex;
	flex-direction: column;
}

.spot__main,
.spot__aside {
	display: contents;
}

.spot__body section,
.spot__sec--actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.spot__sec--title {
	order: 1;
	margin: 0 calc(var(--gutter) * -1);
	padding: 18px var(--gutter);
	border-bottom: 1px solid var(--line);
	gap: 10px !important;
}

.spot__sec--answer {
	order: 2;
	margin-top: 16px;
}

.spot__sec--actions {
	order: 3;
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.spot__sec--actions .c-btn {
	min-height: 52px;
	font-size: 15px;
}

.spot__sec--actions .c-btn:only-child {
	grid-column: 1 / -1;
}

.spot__sec--info {
	order: 4;
	margin-top: 44px;
}

.spot__sec--photos {
	order: 5;
	margin-top: 44px;
}

.spot__sec--place {
	order: 6;
	margin-top: 44px;
}

.spot__sec--posts {
	order: 7;
	margin-top: 44px;
}

.spot__sec--comments {
	order: 8;
	margin-top: 44px;
}

.spot__sec--near {
	order: 9;
	margin-top: 44px;
}

.spot__sec--update {
	order: 10;
	margin-top: 44px;
}

/* title */
.spot-title__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.spot-title__name {
	margin: 0;
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
}

.spot-title__addr {
	margin: 0;
	color: var(--ink2);
	font-size: 14px;
	line-height: 1.6;
}

.spot-title__meta {
	margin: 0;
	color: var(--ink2);
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.spot-title__meta .ds-icon {
	color: var(--sign);
}

/* 利用条件の見出し（10月7日 統合修正依頼：通常は淡い青、確認中は淡いアンバー、休業中は淡い赤） */
.spot-usage {
	border-bottom: 1px solid #ccd9e5;
	color: #18334d;
}

.spot-usage__head {
	padding: 16px 18px 0;
}

.spot-usage__title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.spot-usage__icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: 1px solid #c4d9eb;
	border-radius: 8px;
	background: var(--white);
	color: #245f99;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.spot-usage__icon .ds-icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.spot-usage__body {
	padding: 8px 18px 16px;
}

.spot-usage__state {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
}

.spot-usage__state b {
	margin-right: 4px;
}

.spot-usage__note {
	margin: 10px 0 0;
	padding: 10px 12px;
	border: 1px solid #e6d3a8;
	border-radius: 8px;
	background: var(--white);
	font-size: 14px;
	line-height: 1.7;
}

.spot-usage__call {
	margin: 8px 0 0;
	color: #2d516f;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	display: flex;
	align-items: flex-start;
	gap: 7px;
}

.spot-usage__call .ds-icon {
	flex-shrink: 0;
	margin-top: 3px;
}

.spot-usage--normal {
	background: #edf5fc;
}

.spot-usage--checking .spot-usage__head {
	padding-bottom: 12px;
	border-bottom: 1px solid #ecd9ae;
	background: #fff8e9;
	color: #6d460c;
}

.spot-usage--checking .spot-usage__icon {
	border-color: #e6d3a8;
	color: #6d460c;
}

.spot-usage--closed .spot-usage__head {
	padding-bottom: 12px;
	border-bottom: 1px solid #efc9c9;
	background: #fff2f2;
	color: #8c3030;
}

.spot-usage--closed .spot-usage__icon {
	border-color: #efc9c9;
	color: #8c3030;
}

.spot-usage--checking .spot-usage__body,
.spot-usage--closed .spot-usage__body {
	padding-top: 12px;
	background: var(--white);
}

.spot-usage--closed .spot-usage__note {
	border-color: #efc9c9;
}

.spot-near__sea {
	margin: 0 0 12px;
	color: #52677b;
	font-size: 13px;
	line-height: 1.6;
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.spot-near__sea .ds-icon {
	flex-shrink: 0;
	margin-top: 3px;
}

.spot-answer__help {
	margin: 4px 0 0;
	font-size: 13px;
}

/* answer card */
.spot-answer {
	gap: 0 !important;
	background: var(--white);
	border: 1.5px solid #ccd9e5;
	border-radius: 16px;
	overflow: hidden;
}

.spot-answer__head {
	padding: 14px 16px 16px;
}

.spot-answer__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.spot-answer__picto {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 7px;
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.spot-answer__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.35;
	font-weight: 700;
}

.spot-answer__text {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.8;
}

.spot-answer__note {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 14px;
	line-height: 1.7;
}

.spot-answer__call {
	margin: 8px 0 0;
	padding-top: 8px;
	border-top: 1.5px solid rgba(255, 255, 255, 0.4);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * 使える範囲と料金の表。行ごとに罫線を通し、セルはまとめない（以前は同じ料金をまとめたため、行がずれて見えた）。
 * 立ち寄りの列は薄いオレンジ、宿泊の列は薄い青。料金は下の行に1回だけ出す。
 */
.usetable-wrap {
	overflow-x: auto;
}

.usetable {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}

.usetable__corner {
	width: 30%;
}

.usetable thead th {
	padding: 12px 12px 10px;
	text-align: left;
	vertical-align: bottom;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.usetable thead small {
	display: block;
	margin-top: 1px;
	color: var(--ink2);
	font-size: 11px;
	font-weight: 400;
}

.usetable tbody th,
.usetable tfoot th {
	padding: 12px 8px 12px 14px;
	border-top: 1px solid var(--line);
	text-align: left;
	vertical-align: middle;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
	word-break: keep-all;
}

.usetable td {
	padding: 11px 12px;
	border-top: 1px solid var(--line);
	vertical-align: middle;
}

/* 立ち寄りと宿泊を同じ強さで比べられるように、見出しは両列とも淡いグレー、データは両列とも白（10月7日 統合修正依頼。以前は片方の列だけ色を付けていた） */
.usetable thead th {
	background: #f3f6fa;
	color: #18334d;
}

.usetable thead small {
	color: #52677b;
}

.usetable th,
.usetable td {
	border-color: #ccd9e5;
}

.usetable__mark {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	white-space: nowrap;
}

.usetable__mark .c-check {
	flex-shrink: 0;
}

/* 320pxなど狭い画面：「使えなかった」など長い言葉は折り返す（となりの欄に重なっていた。10月7日 再チェック R02） */
@media (max-width: 379px) {
	.usetable__mark {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
	}
}

.usetable td.is-no .usetable__mark,
.usetable td.is-unknown .usetable__mark {
	color: var(--ink2);
	font-weight: 400;
}

.usetable tfoot th,
.usetable tfoot td {
	border-top: 2px solid var(--line);
	vertical-align: top;
}

.usetable__price {
	display: block;
	font-size: 14px;
	line-height: 1.5;
}

.usetable__price + .usetable__price {
	margin-top: 8px;
}

.usetable__price b {
	display: block;
	font-size: 16px;
	font-weight: 700;
}

.usetable__price small {
	display: block;
	margin-top: 2px;
	color: var(--ink2);
	font-size: 12px;
	line-height: 1.5;
}

.usetable__for {
	display: block;
	color: var(--ink2);
	font-size: 11px;
	font-weight: 700;
}

.usetable__none {
	color: var(--ink2);
}

.c-check circle {
	fill: var(--sign);
}

.c-check path {
	fill: none;
	stroke: var(--white);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.c-check--no circle,
.c-check--unknown circle {
	fill: var(--white);
	stroke: var(--gray-x);
	stroke-width: 1.5;
}

.c-check--no path,
.c-check--unknown path {
	stroke: #5d6572;
	stroke-width: 1.8;
}

.spot-answer__notes {
	padding: 12px 14px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	line-height: 1.7;
}

.spot-answer__notes p {
	margin: 0 0 4px;
}

.spot-answer__notes .spot-answer__facility {
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--ink);
}

.spot-answer__std {
	color: var(--ink2);
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 12.5px;
}

.spot-answer__std .ds-icon {
	margin-top: 3px;
	color: var(--sign);
}

.spot-answer__nearest {
	min-height: 44px;
	padding: 12px 14px;
	border-top: 1px solid var(--line);
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
}

.spot-answer__nearest span {
	flex-grow: 1;
}

.spot-answer__nearest small {
	display: block;
	color: var(--ink2);
	font-size: 12px;
	font-weight: 400;
}

.spot-answer__nearest .ds-icon {
	color: var(--sign);
}

/*
 * 休業中・営業状況を確認中の施設（2026年10月6日 F01・F02）。
 * 答えの札を青（使える案内の色）から変え、表は「休業前／確認前の情報」として色を付けずに出す。
 */
.c-sign--closed {
	background: #4b5563;
}

.c-sign--checking {
	background: var(--warn);
}

.c-sign--closed .spot-answer__picto {
	color: #4b5563;
}

.c-sign--checking .spot-answer__picto {
	color: var(--warn);
}

.spot-answer__prior {
	margin: 0;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--warn-bg);
	color: var(--warn);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.spot-answer__prior .ds-icon {
	flex-shrink: 0;
	margin-top: 3px;
}

.usetable--prior td.is-yes .usetable__mark {
	color: var(--ink2);
}

/* info */
.spot-info__prior {
	margin: 0 0 6px;
	color: var(--warn);
	font-size: 13px;
	font-weight: 700;
}

.spot-info__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
}

.spot-info__desc p {
	margin: 0 0 0.8em;
}

.spot-info__desc p:last-child {
	margin-bottom: 0;
}

/* photos (mobile) */
.spot-photos__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.spot-photos__item {
	position: relative;
	height: 120px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--bg2);
	cursor: zoom-in;
}

.spot-photos__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.spot-photos__more {
	position: absolute;
	inset: 0;
	background: rgba(11, 58, 122, 0.62);
	color: var(--white);
	font-family: var(--en);
	font-size: 22px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* place */
.spot-place__map {
	width: 100%;
	height: 218px;
	border: 0;
	background: #d5e8f4;
	display: block;
}

.spot-place__sv {
	margin: 12px 12px 0;
}

.spot-place__body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spot-place__addr {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.spot-place__addr p {
	margin: 0;
	flex-grow: 1;
	font-size: 14px;
	line-height: 1.7;
}

.spot-place__acts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.spot-place__acts .c-btn:not(.c-btn--soft) {
	min-height: 50px;
	font-size: 15px;
}

.spot-place__soft {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/*
 * 「ストリートビュー」の最後の1文字だけが次の行に落ちていた（10月6日 F06）。文字は改行させず、
 * 2つ並べると入りきらない幅では、1つずつ縦に並べる（Googleマップ・ストリートビューの順）。
 */
.spot-place__soft {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
}

.spot-place__soft .c-btn {
	padding: 0 10px;
	gap: 6px;
	white-space: nowrap;
}

/* Googleマップとストリートビューの2つがそろわないときは、ボタンを横いっぱいに（Appleマップのボタンは iPhone だけに出るので、数では判定しない） */
.spot-place__soft--one .c-btn {
	grid-column: 1 / -1;
}

/* iPhone・iPad だけに出すもの（Appleマップのボタン。site.js が body に is-ios を付ける） */
.u-ios {
	display: none !important;
}

body.is-ios .u-ios {
	display: flex !important;
}

/* Googleマップ・ストリートビューの下の Appleマップ（3つ目）は横いっぱいに */
.spot-place__soft .c-btn:nth-child(3) {
	grid-column: 1 / -1;
}

/* posts */
.spot-posts__grid {
	display: grid;
	gap: 16px;
}

.spot-posts__ask {
	padding: 16px 14px;
	border-radius: var(--radius);
	background: var(--bg2);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spot-posts__ask h3 {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.spot-posts__ask p {
	margin: 4px 0 0;
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.7;
}

.spot-posts__askbtns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/* nearby */
.spot-near .c-btn {
	min-height: 50px;
	font-size: 15px;
}

/* update */
.spot-update__panel {
	padding: 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spot-update__panel p {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
}

.spot-update__panel hr {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--line);
}

.spot-update__panel h3 {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.spot-update__date {
	display: flex;
	align-items: center;
	gap: 12px;
}

.spot-update__date strong {
	display: block;
	font-size: 15px;
	line-height: 1.4;
}

.spot-update__date small {
	display: block;
	color: var(--ink2);
	font-size: 12px;
	line-height: 1.5;
}

.spot-update__date small a {
	color: var(--sign);
	font-weight: 700;
}

.spot-update__icon {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 21px;
	background: var(--sign-t);
	color: var(--sign);
	display: flex;
	align-items: center;
	justify-content: center;
}

.spot-update__btns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.spot-update__btn {
	min-height: 44px;
	padding: 8px 10px;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	background: var(--bg2);
	color: var(--ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spot-update__btn:hover {
	border-color: var(--sign);
	color: var(--sign);
}

.spot-update__panel .spot-update__small {
	color: var(--ink2);
	font-size: 12px;
	line-height: 1.6;
}

.spot__comments {
	margin-top: 44px;
}

.spot__provide {
	margin-top: 44px;
	margin-bottom: 48px;
}

/* provide band */
.provide-band .c-btn--primary {
	border-color: var(--white);
	background: var(--white);
	color: var(--sign);
}

.provide-band .c-btn--primary:hover {
	background: var(--sign-t);
	color: var(--sign-d);
}

.provide-band__in {
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.provide-band__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.45;
}

.provide-band__text p {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.8;
}

/* sticky actions (mobile) */
.spot-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--white);
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 20px rgba(23, 29, 38, 0.1);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.spot-sticky[hidden] {
	display: none;
}

.spot-sticky .c-btn {
	min-height: 52px;
	font-size: 15px;
}

.spot-sticky .c-btn:only-child {
	grid-column: 1 / -1;
}

/* gallery dialog */
.c-gallery {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--white);
}

/* <dialog> に対応していないブラウザー向け（site.js が is-fallback を付けて open にする） */
.c-gallery.is-fallback[open] {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: block;
	overflow: auto;
}

.c-gallery::backdrop {
	background: rgba(11, 20, 34, 0.8);
}

.c-gallery__bar {
	position: sticky;
	top: 0;
	z-index: 1;
	min-height: 56px;
	padding: 6px 6px 6px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--white);
	display: flex;
	align-items: center;
	gap: 8px;
}

.c-gallery__title {
	flex-grow: 1;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.c-gallery__close {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sign);
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-gallery__list {
	list-style: none;
	margin: 0;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.c-gallery__list img {
	width: 100%;
	border-radius: 10px;
	display: block;
}

.c-gallery__list p {
	margin: 6px 0 0;
	color: var(--ink2);
	font-size: 13px;
}

@media (min-width: 720px) {
	.spot-gallery,
	.spot-mapview__map {
		height: 320px;
	}

	/*
	 * 写真・SNSの投稿（2列）：カードを同じ高さに引き伸ばさない（低いカードの中が空白になるため。10月1日 オーナーの指摘）。
	 * JS が使えるときは is-masonry：行を4pxにして、低いカードの下に次のカードを詰める（assets/js/site.js）。
	 */
	.spot-posts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.spot-posts__grid.is-masonry {
		grid-auto-rows: 4px;
		row-gap: 0;
		margin-bottom: -16px;
	}

	.spot-posts__grid.is-masonry > .c-embed {
		margin-bottom: 16px;
	}

	.spot-update__btns {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.c-gallery {
		width: min(960px, calc(100% - 48px));
		height: auto;
		max-height: calc(100% - 48px);
		margin: auto;
		border-radius: var(--radius);
	}
}

@media (min-width: 1024px) {
	.spot__crumbs {
		max-width: 1280px;
	}

	.spot__media {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 var(--gutter);
	}

	.spot-gallery {
		height: auto;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: 206px 206px;
		gap: 8px;
	}

	.spot-gallery__item {
		display: block;
	}

	.spot-gallery__item--0 {
		grid-column: span 2;
		grid-row: span 2;
		border-radius: 14px 0 0 14px;
	}

	.spot-gallery__item--1 {
		border-radius: 0 14px 0 0;
	}

	.spot-gallery__item--2 {
		border-radius: 0 0 14px 0;
	}

	/* 写真が1枚・2枚のとき（無料掲載フォームからの登録では起きる）：空いた枠を作らない */
	.spot-gallery--1 .spot-gallery__item--0 {
		grid-column: span 3;
		border-radius: 14px;
	}

	.spot-gallery--2 .spot-gallery__item--1 {
		grid-row: span 2;
		border-radius: 0 14px 14px 0;
	}

	.spot-gallery__all {
		min-height: 40px;
		border: 2px solid var(--sign);
		background: var(--white);
		color: var(--sign);
		font-size: 13px;
	}

	.spot-mapview {
		height: 420px;
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 8px;
	}

	.spot-mapview__col {
		border: 1.5px solid var(--line);
		border-radius: 14px 0 0 14px;
		overflow: hidden;
	}

	.spot-mapview__map {
		height: auto;
		flex: 1;
	}

	.spot-mapview__col .spot-mapbar {
		border-top: 1px solid var(--line);
		border-bottom: 0;
	}

	/* PCのストリートビューは右の欄にあるので、帯には出さない */
	.spot-mapbar__sv {
		display: none;
	}

	.spot-mapview__side {
		display: grid;
		grid-auto-rows: minmax(0, 1fr);
		gap: 8px;
	}

	.spot-mapview__side .c-lazyframe {
		min-height: 0;
		border: 1.5px solid var(--line);
		border-radius: 0 14px 0 0;
		background: #f2f5f7; /* 地図の陸の色にそろえる */
	}

	.spot-mapview__nophoto {
		border-radius: 0 0 14px 0;
	}

	.spot-mapview__side > :only-child {
		border-radius: 0 14px 14px 0;
	}

	.spot-mapview__side--user {
		display: grid;
		grid-template-rows: minmax(0, 0.6fr) minmax(0, 1.4fr);
		min-height: 0;
		padding: 0;
	}

	.spot-mapview__side--user > :only-child {
		grid-row: 1 / -1;
	}

	.spot-mapview__side--user .c-lazyframe {
		display: flex;
	}

	.spot-mapview__side--user .spot-userphoto {
		display: flex;
		flex-direction: column;
		min-height: 0;
		border-radius: 0 0 14px 0;
	}

	.spot-mapview__side--user > .spot-userphoto:only-child {
		border-radius: 0 14px 14px 0;
	}

	.spot-mapview__side--user .spot-userphoto__img {
		flex: 1 1 auto;
		min-height: 0;
	}

	.spot-mapview__side--user .spot-userphoto__img img {
		height: 100%;
		max-height: none;
		object-fit: cover;
	}

	.spot__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 352px;
		align-items: start;
		gap: 48px;
		padding-top: 40px;
	}

	.spot__main,
	.spot__aside {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.spot__main {
		gap: 56px;
	}

	.spot__aside {
		gap: 40px;
	}

	.spot__body section {
		margin-top: 0 !important;
		gap: 16px;
	}

	.spot__sec--title {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.spot__sec--actions,
	.spot__sec--photos {
		display: none !important;
	}

	.spot-title__name {
		font-size: 36px;
	}

	.spot-title__addr {
		font-size: 15px;
	}

	.spot-answer__head {
		padding: 18px 22px 20px;
	}

	.spot-answer__title {
		font-size: 26px;
	}

	.spot-usage__head {
		padding: 18px 22px 0;
	}

	.spot-usage__title {
		font-size: 22px;
	}

	.spot-usage__body {
		padding: 8px 22px 18px;
	}

	.spot-usage__state {
		font-size: 15px;
	}

	.spot-answer__text,
	.spot-info__desc {
		font-size: 15px;
	}

	.usetable__corner {
		width: 170px;
	}

	.usetable tbody th,
	.usetable tfoot th {
		padding-left: 20px;
	}

	.usetable td,
	.usetable thead th {
		padding-left: 16px;
		padding-right: 16px;
	}

	.spot-place__sv {
		display: none !important;
	}

	.spot-answer__notes,
	.spot-answer__nearest {
		padding-left: 20px;
		padding-right: 20px;
	}

	.spot-place .c-sechead {
		display: none;
	}

	.spot-place__card {
		box-shadow: 0 6px 18px rgba(23, 29, 38, 0.08);
	}

	.spot-place__map {
		height: 232px;
	}

	.spot-near .c-sechead__title {
		font-size: 22px;
	}

	.spot-near .c-signicon {
		width: 34px;
		height: 34px;
	}

	.spot-posts__ask {
		padding: 18px 20px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	.spot-posts__askbtns {
		flex-shrink: 0;
		width: 320px;
	}

	.spot-update__panel {
		padding: 20px 22px;
	}

	.spot-sticky {
		display: none !important;
	}

	.spot__provide {
		margin-top: 72px;
		margin-bottom: 80px;
	}

	.provide-band__in {
		padding: 26px 32px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.provide-band__title {
		font-size: 24px;
	}

	.provide-band .c-btn {
		flex-shrink: 0;
		min-width: 220px;
	}
}

/* =========================================================================
   地図の部品（クリアブルー。10月7日 オーナーが選定。assets/js/maps.js の makeMap）
   ピン・上の切り替え・凡例・施設のカード・読み込めないとき
   ========================================================================= */
.ds-gmap {
	--map-brand: #1856a4;
	--map-ok: #c65313;
	--map-ink: #21384e;
	--map-label: #526a7c;
	--map-line: #dbe3ea;
	background: #d5e8f4;
}

/* ピン：見た目は小さく、押せる範囲は指で44px（マウスでは30px） */
.ds-pins {
	position: absolute;
	left: 0;
	top: 0;
}

.ds-pin {
	position: absolute;
	z-index: 1;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	padding: 0;
	border: 0;
	border-radius: 50%; /* 押せる範囲は丸（となりのピンの範囲と四角の角で重ならないように） */
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* マウスで操作するPCだけ30px（スマホ幅の画面では、マウスでも44px。10月7日 再チェック U01） */
@media (pointer: fine) and (min-width: 720px) {
	.ds-pin {
		width: 30px;
		height: 30px;
		margin: -15px 0 0 -15px;
	}
}

.ds-pin[hidden] {
	display: none;
}

.ds-pin__dot {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ffffff;
	box-shadow: 0 1px 3px rgba(20, 40, 60, 0.45);
	color: #ffffff;
	font-family: var(--jp);
	font-weight: 700;
	line-height: 1;
	transition: transform 0.12s ease;
}

.ds-pin--other .ds-pin__dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--map-brand);
}

.ds-pin--ok {
	z-index: 2;
}

/* 営業状況を確認中：濃いアンバーの丸に「?」（立ち寄りOK・その他と区別。10月7日 R01） */
.ds-pin--checking .ds-pin__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #8a5a12;
	font-family: var(--en);
	font-size: 11px;
	font-weight: 800;
}

.is-far .ds-pin--checking .ds-pin__dot {
	width: 15px;
	height: 15px;
	border-width: 1.5px;
	font-size: 9px;
}

.is-tiny .ds-pin--checking .ds-pin__dot {
	width: 11px;
	height: 11px;
	border-width: 1.5px;
	font-size: 0;
}

.ds-pin--checking.is-selected .ds-pin__dot {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #8a5a12, 0 3px 8px rgba(20, 40, 60, 0.4);
}

.ds-mark--checking {
	width: 15px;
	height: 15px;
	margin: 0 1.5px;
	border-radius: 50%;
	background: #8a5a12;
	font-family: var(--en);
	font-size: 10px;
	font-weight: 800;
}

.ds-pin--ok .ds-pin__dot {
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: var(--map-ok);
	font-size: 13px;
}

/* 全国・地方を見ているとき（ズーム6以下）はピンを小さく（重なりを減らす） */
.is-far .ds-pin--other .ds-pin__dot {
	width: 12px;
	height: 12px;
	border-width: 1.5px;
}

.is-far .ds-pin--ok .ds-pin__dot {
	width: 20px;
	height: 20px;
	border-width: 1.5px;
	border-radius: 6px;
	font-size: 11px;
}

/* 全国を見ているとき（ズーム5以下）：小さな四角と丸だけ（「立」の文字は隠す。ピンが重なりすぎないように） */
.is-tiny .ds-pin--other .ds-pin__dot {
	width: 9px;
	height: 9px;
	border-width: 1.5px;
}

.is-tiny .ds-pin--ok .ds-pin__dot {
	width: 14px;
	height: 14px;
	border-width: 1.5px;
	border-radius: 4px;
	font-size: 0;
}

/* 近い順の地図：番号つき（立ち寄りOKは角丸の四角、ほかは丸） */
.ds-pins .ds-pin--num .ds-pin__dot {
	width: 26px;
	height: 26px;
	border-width: 2px;
	font-family: var(--en);
	font-size: 12px;
	font-weight: 900;
}

.ds-pins .ds-pin--num.ds-pin--ok .ds-pin__dot {
	border-radius: 8px;
}

.ds-pin:hover .ds-pin__dot {
	transform: scale(1.15);
}

/* 選んでいるピン：白と色の二重の輪で囲む */
.ds-pin.is-selected {
	z-index: 5;
}

.ds-pin.is-selected .ds-pin__dot {
	transform: scale(1.2);
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--map-brand), 0 3px 8px rgba(20, 40, 60, 0.4);
}

.ds-pin--ok.is-selected .ds-pin__dot {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--map-ok), 0 3px 8px rgba(20, 40, 60, 0.4);
}

.ds-pin:focus {
	outline: none;
}

.ds-pin:focus-visible .ds-pin__dot {
	outline: 3px solid var(--yellow);
	outline-offset: 3px;
}

/* 現在地 */
.ds-here {
	position: absolute;
	z-index: 3;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 3px solid #ffffff;
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--map-brand);
	box-shadow: 0 0 0 6px rgba(24, 86, 164, 0.22);
	pointer-events: none;
}

/* ピンと同じ形の小さな印（切り替え・凡例・カード） */
.ds-mark {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #ffffff;
	font-family: var(--jp);
	font-weight: 700;
	line-height: 1;
}

.ds-mark--ok {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: var(--map-ok, #c65313);
	font-size: 11px;
}

.ds-mark--other {
	width: 13px;
	height: 13px;
	margin: 0 2.5px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: var(--map-brand, #1856a4);
	box-shadow: 0 0 0 1px rgba(24, 86, 164, 0.35);
}

/* 上の切り替え（すべて／立ち寄りOK）と件数 */
.ds-mapbar {
	margin: 10px;
	padding: 3px;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(33, 56, 78, 0.2);
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: var(--jp);
	color: var(--map-ink);
}

.ds-seg {
	display: flex;
	gap: 2px;
}

.ds-seg__btn {
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--map-ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--jp);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.ds-seg__btn:hover {
	background: #edf2f7;
}

.ds-seg__btn[aria-pressed="true"] {
	background: var(--map-brand);
	color: #ffffff;
}

.ds-seg__btn--ok[aria-pressed="true"] {
	background: var(--map-ok);
}

.ds-seg__btn--ok[aria-pressed="true"] .ds-mark--ok {
	background: #ffffff;
	color: var(--map-ok);
}

.ds-seg__btn:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 1px;
}

.ds-mapbar__count {
	padding: 0 12px 0 6px;
	font-size: 13px;
	white-space: nowrap;
}

.ds-mapbar__count b {
	margin-right: 1px;
	font-family: var(--en);
	font-size: 16px;
	font-weight: 800;
}

/* 凡例（左下。カードを出している間は隠す） */
.ds-maplegend {
	margin: 0 0 4px 10px;
	padding: 7px 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 6px rgba(33, 56, 78, 0.18);
	display: grid;
	gap: 4px;
	color: var(--map-ink);
	font-family: var(--jp);
	font-size: 12px;
	line-height: 1.4;
	pointer-events: none;
}

.ds-maplegend__row {
	display: flex;
	align-items: center;
	gap: 7px;
}

.ds-maplegend b {
	font-weight: 700;
}

.ds-maplegend small {
	margin-left: 2px;
	color: var(--map-label);
	font-size: 11px;
}

.ds-maplegend__note {
	max-width: 15em;
	color: var(--map-label);
	font-size: 11px;
	line-height: 1.45;
}

.ds-mapcard__call {
	margin: 8px 0 0;
	color: var(--map-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

.ds-maplegend__count {
	display: none;
	font-size: 12px;
}

.ds-maplegend__count b {
	margin-right: 1px;
	font-family: var(--en);
	font-size: 14px;
	font-weight: 800;
}

/* 地図の幅が狭いとき：件数は上の切り替えから凡例へ（右上の全画面ボタンと重ならないように） */
.is-narrow .ds-mapbar__count {
	display: none;
}

.is-narrow .ds-maplegend__count {
	display: block;
}

.is-narrow .ds-seg__btn {
	padding: 0 11px;
	font-size: 13px;
}

.ds-mapcard__tag--checking {
	background: #fff8e9;
	color: #6d460c;
}

.ds-maplegend__row[hidden] {
	display: none;
}

.has-card .ds-maplegend {
	visibility: hidden;
}

@media (max-width: 719px) {
	.ds-maplegend {
		padding: 5px 8px;
		gap: 2px;
		background: rgba(255, 255, 255, 0.9);
		font-size: 11px;
	}

	.ds-maplegend small {
		font-size: 10px;
	}

	.ds-maplegend .ds-mark--ok {
		width: 16px;
		height: 16px;
		font-size: 10px;
	}
}

/* 施設のカード（地図の下。Googleのロゴと利用規約の表示にはかぶせない） */
.ds-mapcard {
	position: absolute;
	z-index: 10;
	left: 10px;
	right: 10px;
	bottom: 30px;
	max-height: calc(100% - 82px);
	overflow-y: auto;
	padding: 12px 14px;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 6px 24px rgba(33, 56, 78, 0.28);
	box-sizing: border-box;
	color: var(--map-ink);
	font-family: var(--jp);
	text-align: left;
}

.ds-mapcard[hidden] {
	display: none;
}

.ds-mapcard:focus {
	outline: none;
}

@media (min-width: 720px) {
	.ds-mapcard {
		right: auto;
		width: 360px;
	}
}

.ds-mapcard__close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--map-label);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.ds-mapcard__close:hover {
	background: #edf2f7;
}

.ds-mapcard__kind {
	margin: 0 40px 6px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	line-height: 1;
}

.ds-mapcard__tag {
	padding: 3px 8px 3px 4px;
	border-radius: 6px;
	background: #e7eef7;
	color: var(--map-brand);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
}

.ds-mapcard__tag--ok {
	background: #edf5fc;
	color: #18334d;
}

.ds-mapcard__tag .ds-mark--ok {
	width: 16px;
	height: 16px;
	font-size: 10px;
}

.ds-mapcard__tag .ds-mark--other {
	width: 12px;
	height: 12px;
}

.ds-mapcard__genre {
	padding: 3px 8px;
	border: 1px solid var(--map-line);
	border-radius: 6px;
	color: var(--map-label);
	display: inline-flex;
	align-items: center;
}

.ds-mapcard__name {
	display: block;
	margin-right: 34px;
	color: var(--map-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.ds-mapcard__name:hover {
	text-decoration: underline;
}

.ds-mapcard__addr {
	margin: 2px 0 8px;
	overflow: hidden;
	color: var(--map-label);
	font-size: 13px;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ds-mapcard__use .c-use__group {
	padding: 4px 8px 5px;
}

.ds-mapcard__acts {
	margin-top: 10px;
	display: flex;
	gap: 8px;
}

.ds-mapcard__go,
.ds-mapcard__navi {
	min-height: 44px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.ds-mapcard__go {
	flex: 1;
	background: var(--map-brand);
	color: #ffffff;
}

.ds-mapcard__go .ds-icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
}

.ds-mapcard__go:hover {
	background: #124585;
	color: #ffffff;
}

.ds-mapcard__navi {
	padding: 0 18px;
	border: 1.5px solid var(--map-brand);
	background: #ffffff;
	color: var(--map-brand);
}

.ds-mapcard__go:focus-visible,
.ds-mapcard__navi:focus-visible,
.ds-mapcard__name:focus-visible,
.ds-mapcard__close:focus-visible,
.ds-mapcard__pick:focus-visible,
.ds-mapcard__zoom:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 2px;
}

/* スマホの近い順：地図の下20pxに一覧の板が重なるので、カードはその上に */
@media (max-width: 1023px) {
	.top-results__map .ds-mapcard {
		bottom: 50px;
		max-height: calc(100% - 102px);
	}
}

/* 重なって見えるピンを押したとき：近くの施設を並べて選べるようにする */
.ds-mapcard__head {
	margin: 0 40px 4px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ds-mapcard__head p {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.ds-mapcard__zoom {
	min-height: 36px;
	padding: 0 14px;
	border: 1.5px solid var(--map-brand);
	border-radius: 999px;
	background: #ffffff;
	color: var(--map-brand);
	font-family: var(--jp);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.ds-mapcard__list {
	max-height: 168px; /* 3件ほど。多いときは中でスクロール（地図を隠しすぎない） */
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.ds-mapcard__pick {
	width: 100%;
	min-height: 52px;
	padding: 6px 0;
	border: 0;
	border-top: 1px solid var(--map-line);
	background: none;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--map-ink);
	font-family: var(--jp);
	text-align: left;
	cursor: pointer;
}

.ds-mapcard__pick:hover {
	background: #f4f7fa;
}

.ds-mapcard__pick .ds-mark--ok,
.ds-mapcard__pick .ds-mark--other:not(:empty) {
	width: 22px;
	height: 22px;
	font-size: 11px;
}

.ds-mapcard__pick .ds-mark--other:not(:empty) {
	margin: 0;
	border-width: 1.5px;
	font-family: var(--en);
	font-weight: 900;
}

.ds-mapcard__pick .ds-mark--ok:not(:only-child) {
	font-family: var(--en);
}

.ds-mapcard__pickbody {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ds-mapcard__pickname {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.ds-mapcard__picksub {
	color: var(--map-label);
	font-size: 12px;
	line-height: 1.4;
}

.ds-mapcard__pick .ds-icon {
	flex-shrink: 0;
	fill: none;
	stroke: var(--map-label);
	stroke-width: 2.2;
}

.c-mapnote {
	height: 100%;
	min-height: 160px;
	padding: 24px;
	background-color: #e8eef5;
	background-image: linear-gradient(rgba(19, 81, 166, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 81, 166, 0.06) 1px, transparent 1px);
	background-size: 32px 32px;
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 読み込み中（地図を描くまでの表示）。ピンのアイコンがゆっくり点滅する */
.c-mapnote--loading span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sign);
	font-weight: 700;
}

.c-mapnote--loading .ds-icon {
	animation: ds-blink 1.6s ease-in-out infinite;
}

@keyframes ds-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
	.c-mapnote--loading .ds-icon {
		animation: none;
	}
}

/* =========================================================================
   トップページ
   ========================================================================= */
.top-hero {
	padding: 16px 16px 0;
	display: flex;
	flex-direction: column;
	scroll-margin-top: var(--header-h);
}

.top-hero__map {
	display: none;
}

.top-hero__sign .c-sign__in {
	padding: 12px 14px 14px;
}

.top-hero__signrow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.top-hero__picto {
	width: 42px;
	height: 42px;
	border-radius: 7px;
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-hero__signrow .ds-arrow {
	fill: var(--white);
	width: 30px;
	height: 36px;
}

.top-hero__h1 {
	margin: 10px 0 0;
	font-size: 27px;
	line-height: 1.38;
	font-weight: 700;
}

.top-hero__h1 span {
	display: block;
}

.top-hero__en {
	margin: 6px 0 0;
	font-family: var(--en);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.top-hero__card {
	display: flex;
	flex-direction: column;
}

.top-hero__lead {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.8;
}

.top-hero__cta {
	margin-top: 14px;
	min-height: 58px;
	width: 100%;
}

.top-hero__cta.is-busy {
	opacity: 0.7;
	cursor: progress;
}

.top-hero__card .c-search {
	margin-top: 12px;
}

.top-hero__note {
	margin: 10px 0 0;
	color: var(--ink2);
	font-size: 12px;
	line-height: 1.6;
}

.top-chips {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.top-chips__title {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
}

.top-chips__result {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	font-size: 14px;
	font-weight: 700;
}

.top-chips__result a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.top-stats {
	margin-top: 22px;
}

.top-stats__in {
	padding: 4px 14px;
	display: flex;
	flex-direction: column;
}

.top-stats__row {
	padding: 7px 0;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
}

.top-stats__row:last-child {
	border-bottom: 0;
}

.top-stats__row--pc {
	display: none;
}

.top-stats__label {
	flex-grow: 1;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.top-stats__num {
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-size: 12px;
	font-weight: 700;
}

.top-stats__num b {
	font-family: var(--en);
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
}

.top-stats__dot {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border-radius: 7px;
}

.top-stats__dot--ok {
	border: 2px solid var(--white);
	border-radius: 4px;
	background: var(--ok-pin);
}

.top-stats__dot--stay {
	border: 2px solid var(--white);
	background: var(--sign);
}

/* results */
.top-results {
	margin-top: 24px;
	border-top: 1px solid var(--line);
	scroll-margin-top: var(--header-h);
}

.top-results[hidden] {
	display: none;
}

.top-results__bar {
	min-height: 56px;
	padding: 0 4px 0 16px;
	border-bottom: 1px solid var(--line);
	background: var(--bg2);
	display: flex;
	align-items: center;
	gap: 10px;
}

.top-results__here {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border: 3px solid var(--white);
	border-radius: 7px;
	background: var(--sign);
	box-shadow: 0 0 0 3px rgba(19, 81, 166, 0.25);
}

.top-results__place {
	flex-grow: 1;
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.top-results__change {
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	background: none;
	color: var(--sign);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.top-results__form {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	display: grid;
	gap: 8px;
}

.top-results__form[hidden] {
	display: none;
}

.top-results__form .c-search__input {
	padding-left: 16px;
}

.top-results__form .c-btn {
	min-height: 48px;
	font-size: 15px;
}

/* 地名の候補（同じ名前の場所がいくつもあるとき） */
.top-results__cands {
	padding: 4px 16px 12px;
	border-bottom: 1px solid var(--line);
}

.top-results__cands[hidden],
.top-results__pick[hidden],
.top-results__alt[hidden] {
	display: none;
}

.top-results__alt {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sign);
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.top-results__note {
	margin: 8px 0 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.top-results__candlist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.top-results__cand {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--line2);
	border-radius: 10px;
	background: var(--white);
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
}

.top-results__cand:hover {
	border-color: var(--sign);
	background: var(--use-bg);
}

.top-results__chips {
	padding: 10px 16px;
	flex-wrap: nowrap;
	overflow-x: auto;
}

.top-results__map {
	position: relative;
	height: 360px; /* 下に施設のカードを重ねるので、以前の300pxより高く */
	background: #e8eef5;
}

.top-results__sheet {
	position: relative;
	margin-top: -20px;
	border-radius: 20px 20px 0 0;
	background: var(--white);
	box-shadow: 0 -3px 14px rgba(23, 29, 38, 0.14);
	padding-top: 8px;
}

.top-results__sheet::before {
	content: "";
	display: block;
	width: 40px;
	height: 5px;
	margin: 0 auto;
	border-radius: 3px;
	background: var(--line);
}

.top-results__head {
	padding: 8px 16px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.top-results__title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.top-results__title .c-signicon {
	width: 28px;
	height: 28px;
}

.top-results__title h2 {
	margin: 0;
	font-size: 17px;
	line-height: 1.4;
}

.top-results__unit {
	color: var(--ink2);
	font-size: 12px;
}

.top-results__status {
	margin: 0;
	padding: 0 16px;
	color: var(--ink2);
	font-size: 14px;
}

.top-results__status:empty {
	display: none;
}

.top-results__more {
	width: calc(100% - 32px);
	margin: 14px 16px 0;
	min-height: 48px;
	font-size: 15px;
}

.c-row--result {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-right: 14px;
}

.c-row--result .c-row__link {
	flex-grow: 1;
	min-width: 0;
	grid-template-columns: 60px minmax(0, 1fr);
	padding: 14px 0 12px 16px;
}

.c-row--result .c-row__plate {
	position: relative;
}

.c-rank {
	position: absolute;
	left: -7px;
	top: -7px;
	width: 22px;
	height: 22px;
	border: 2px solid var(--sign);
	border-radius: 11px;
	background: var(--white);
	color: var(--sign);
	font-family: var(--en);
	font-size: 12px;
	font-weight: 900;
	line-height: 18px;
	text-align: center;
}

.c-row__nav {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border: 2px solid var(--sign);
	border-radius: 12px;
	color: var(--sign);
	font-size: 10px;
	font-weight: 700;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.c-row__nav:hover {
	background: var(--sign-t);
}

/* areas */
/* トップのお知らせ（リニューアルの記事へのリンク。エリアから探すの上） */
.top-news {
	margin-top: 28px;
}

.top-news__link {
	min-height: 52px;
	padding: 10px 14px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: var(--white);
	color: var(--ink);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	text-decoration: none;
}

.top-news__link:hover {
	border-color: var(--sign);
	background: #f7fafd;
}

.top-news__label {
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--sign);
	color: var(--white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
}

.top-news__date {
	color: var(--ink2);
	font-family: var(--en);
	font-size: 13px;
}

.top-news__text {
	flex: 1;
	min-width: 12em;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.top-news__chev {
	flex-shrink: 0;
	margin-left: auto;
	color: var(--sign);
}

.top-news + .top-area {
	margin-top: 20px;
}

.top-area {
	margin-top: 32px;
	padding: 26px 0 32px;
	background: var(--bg2);
	scroll-margin-top: var(--header-h);
}

.top-area .l-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.top-area__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.area-card {
	min-height: 136px;
	padding: 4px;
	border-radius: 12px;
	background: var(--sign);
	color: var(--white);
	text-decoration: none;
	display: flex;
}

.area-card:hover {
	background: var(--sign-d);
	color: var(--white);
}

.area-card__in {
	flex-grow: 1;
	padding: 10px 11px 11px;
	border: 2px solid var(--white);
	border-radius: 9px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.area-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px;
}

.area-card__name {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.area-card__en {
	font-family: var(--en);
	font-size: 11px;
	line-height: 1.3;
}

.area-card__arrow {
	margin: 3px 1px 0 0;
	fill: var(--white);
}

.area-card__num {
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-size: 12px;
	font-weight: 700;
}

.area-card__num b {
	font-family: var(--en);
	font-size: 30px;
	font-weight: 800;
	line-height: 0.9;
}

/* 数字（Overpass）は日本語と上下の基準がちがうので、中央ぞろえではなく文字の並びの線（ベースライン）でそろえる */
.area-card__ok {
	align-self: flex-start;
	padding: 3px 8px;
	border: 1.5px solid var(--ok-badge-line);
	border-radius: 6px;
	background: var(--ok-badge);
	color: var(--ok-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 17px;
	white-space: nowrap;
	display: inline-block;
}

.area-card__ok b {
	margin-left: 5px;
	font-family: var(--en);
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
}

.area-card--pref {
	padding: 12px;
	border: 3px solid var(--sign);
	background: var(--white);
	color: var(--sign);
	font-size: 14px;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.area-card--pref:hover {
	background: var(--sign-t);
	color: var(--sign);
}

.area-card--pref .ds-arrow {
	fill: var(--sign);
}

/* map */
.top-map {
	padding: 40px 0 0;
	scroll-margin-top: var(--header-h);
}

.top-map .l-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.top-map__box {
	position: relative;
	height: 395px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: #e8eef5;
}

.top-map__map {
	height: 100%;
}

.top-map .c-btn {
	min-height: 52px;
	font-size: 15px;
}

/* drop-in */
.top-dropin {
	padding: 56px 0 0;
}

.top-dropin__grid {
	display: grid;
	gap: 32px;
}

.dropin-panel {
	position: relative;
	padding: 22px 18px 20px;
	border: 1.5px solid var(--ok-surface-line);
	border-top: 4px solid var(--ok-accent);
	border-radius: 16px;
	background: var(--ok-surface);
	color: var(--ok-ink);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dropin-panel__plate {
	position: absolute;
	right: 16px;
	top: -18px;
	padding: 4px;
	border-radius: 10px;
	background: var(--sign);
	display: flex;
}

.dropin-panel__plate > span {
	padding: 6px 9px;
	border: 2px solid var(--white);
	border-radius: 7px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.dropin-panel__plate .ds-arrow {
	width: 17px;
	height: 20px;
	fill: var(--white);
}

.dropin-panel__picto {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dropin-panel__eyebrow {
	font-family: var(--en);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.dropin-panel__title {
	margin: 0;
	padding-right: 96px;
	font-size: 22px;
	line-height: 1.45;
}

.dropin-panel__title b {
	margin: 0 2px;
	font-family: var(--en);
	font-size: 44px;
	font-weight: 900;
	line-height: 1;
}

.dropin-panel p {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
}

.dropin-panel .c-btn {
	margin-top: 6px;
	min-height: 52px;
	font-size: 15px;
}

.checklist {
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.checklist h3 {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.checklist ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.checklist li {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.checklist__n {
	width: 30px;
	height: 30px;
	border: 2px solid var(--white);
	border-radius: 7px;
	background: var(--sign);
	box-shadow: 0 0 0 1.5px var(--sign);
	color: var(--white);
	font-family: var(--en);
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.checklist b {
	display: block;
	font-size: 15px;
	line-height: 1.5;
}

.checklist small {
	display: block;
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.6;
}

/* guide / new */
.top-two {
	display: grid;
	gap: 48px;
	padding-top: 48px;
}

.top-guide,
.top-new {
	display: flex;
	flex-direction: column;
	gap: 16px;
	scroll-margin-top: var(--header-h);
}

.tanks {
	padding: 16px 16px 18px;
	border-radius: var(--radius);
	background: var(--bg2);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tanks h3 {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.tanks__img {
	width: 100%;
	height: auto;
	display: block;
}

.tanks__cap {
	margin: 6px 0 12px;
	color: var(--ink2);
	font-size: 12px;
	text-align: center;
}

.tanks__note {
	margin: 12px 0 0;
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.7;
}

.tanks__legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	line-height: 1.6;
}

.tanks__legend li {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
}

.tanks__k {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	transform: translateY(1px);
}

.tanks__k--black {
	background: var(--ink);
}

.tanks__k--gray {
	background: #8f99a6;
}

.tanks__k--dump {
	border: 1.5px dashed var(--sign);
	background: var(--white);
}

.articles,
.newlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.articles li + li,
.newlist li + li {
	border-top: 1px solid var(--line);
}

.articles a {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 12px;
	padding: 14px;
	color: var(--ink);
	text-decoration: none;
}

.articles a:hover,
.newlist a:hover {
	background: #f8fafc;
	color: var(--ink);
}

.articles__icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--sign-t);
	color: var(--sign);
	display: flex;
	align-items: center;
	justify-content: center;
}

.articles__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.articles__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.articles__meta {
	color: var(--ink2);
	font-size: 12px;
}

.articles__chev,
.newlist__chev {
	color: var(--sign);
}

.newlist a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 16px;
	align-items: center;
	gap: 12px;
	padding: 14px 14px 14px 16px;
	color: var(--ink);
	text-decoration: none;
}

.newlist__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.newlist__date {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ink2);
	font-size: 12px;
}

.newlist__date .c-tag {
	min-height: 22px;
	font-size: 11px;
}

.newlist__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
}

.newlist__place {
	color: var(--ink2);
	font-size: 12px;
	line-height: 1.5;
}

.newlist__tags {
	display: flex;
}

.newlist__tags .c-tag {
	min-height: 24px;
	font-size: 11px;
}

/* help */
.top-help {
	margin-top: 56px;
	padding: 34px 0 40px;
	background: var(--bg2);
}

.top-help .l-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.top-help__grid {
	display: grid;
	gap: 16px;
}

.help-card {
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.help-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.help-card__head h3 {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
}

.help-card__icon {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--sign-t);
	color: var(--sign);
	display: flex;
	align-items: center;
	justify-content: center;
}

.help-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
}

.help-card .c-btn {
	margin-top: 4px;
	min-height: 48px;
	font-size: 15px;
}

@media (min-width: 720px) {
	.top-area__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.top-help__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	/*
	 * PC：ページの幅に収めた2列（左に探すためのパネル、右に地図）。
	 * 以前は地図を画面の幅いっぱいに敷いていたが、視線が左右に散って見にくかったため。
	 * 掲載数と色の説明は、地図のすぐ下に帯で置く（凡例をかねる）。
	 */
	.top-hero {
		position: relative;
		max-width: 1280px;
		margin: 0 auto;
		padding: 28px var(--gutter) 0;
		display: grid;
		grid-template-columns: 420px minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
		grid-template-areas: "panel map" "panel stats";
		column-gap: 24px;
		align-items: stretch;
	}

	.top-hero__map {
		grid-area: map;
		position: relative;
		display: block;
		min-height: 600px;
		border: 1.5px solid var(--line);
		border-bottom: 0;
		border-radius: var(--radius) var(--radius) 0 0;
		overflow: hidden;
		background: #cde0f2;
	}

	.top-hero__map .c-mapnote {
		height: 100%;
		padding: 24px;
		justify-content: center;
	}

	.top-hero__panel {
		grid-area: panel;
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.top-hero__sign .c-sign__in {
		padding: 18px 22px 20px;
	}

	.top-hero__picto {
		width: 52px;
		height: 52px;
	}

	.top-hero__picto .ds-camper {
		width: 41px;
		height: 27px;
	}

	.top-hero__signrow .ds-arrow {
		width: 38px;
		height: 46px;
	}

	.top-hero__h1 {
		font-size: 32px;
	}

	.top-hero__en {
		font-size: 16px;
	}

	.top-hero__card {
		flex-grow: 1;
		padding: 20px 22px 22px;
		border: 1.5px solid var(--line);
		border-radius: var(--radius);
		background: var(--white);
	}

	.top-hero__lead {
		margin: 0;
		font-size: 15px;
	}

	.top-hero__cta {
		min-height: 60px;
	}

	.top-hero__card .c-search__input {
		height: 54px;
	}

	.top-chips {
		margin-top: 18px;
	}

	.top-chips__title {
		font-size: 15px;
	}

	.top-stats {
		grid-area: stats;
		margin: 0;
		border-radius: 0 0 var(--radius) var(--radius);
	}

	.top-stats__in {
		padding: 6px 18px;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 28px;
	}

	.top-stats__row {
		padding: 4px 0;
		border-bottom: 0;
	}

	.top-stats__row--pc {
		display: flex;
	}

	.top-stats__row:last-child {
		display: none;
	}

	.top-stats__label {
		flex-grow: 0;
		font-size: 14px;
	}

	.top-stats__num b {
		font-size: 24px;
	}

	.top-results {
		max-width: 1280px;
		margin: 32px auto 0;
		padding: 0 var(--gutter);
		border: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 440px;
		grid-template-areas: "bar bar" "form form" "cands cands" "chips chips" "map sheet";
		column-gap: 24px;
	}

	.top-results__bar {
		grid-area: bar;
		border: 1px solid var(--line);
		border-radius: 12px 12px 0 0;
	}

	.top-results__form {
		grid-area: form;
		grid-template-columns: minmax(0, 1fr) 200px;
	}

	.top-results__cands {
		grid-area: cands;
		border: 1px solid var(--line);
		border-top: 0;
	}

	.top-results__candlist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.top-results__chips {
		grid-area: chips;
		padding: 12px 0;
	}

	.top-results__map {
		grid-area: map;
		height: 560px;
		border-radius: var(--radius);
		overflow: hidden;
	}

	.top-results__sheet {
		grid-area: sheet;
		margin: 0;
		max-height: 560px;
		overflow-y: auto;
		border: 1.5px solid var(--line);
		border-radius: var(--radius);
		box-shadow: none;
		padding: 0 0 14px;
	}

	.top-results__sheet::before {
		display: none;
	}

	.top-results__head {
		position: sticky;
		top: 0;
		z-index: 1;
		padding: 14px 16px 10px;
		background: var(--white);
	}

	.top-area {
		margin-top: 0;
		padding: 56px 0 64px;
	}

	.top-area .l-wrap {
		gap: 28px;
	}

	.top-area .c-sechead__title {
		font-size: 30px;
	}

	.top-area .c-signicon {
		width: 44px;
		height: 44px;
	}

	.top-area__grid {
		gap: 18px;
	}

	.area-card {
		min-height: 168px;
		padding: 5px;
		border-radius: 14px;
	}

	.area-card__in {
		padding: 14px 16px 16px;
		border-width: 2.5px;
		border-radius: 10px;
		gap: 10px;
	}

	.area-card__name {
		font-size: 22px;
		line-height: 1.3;
	}

	.area-card__en {
		font-size: 13px;
	}

	.area-card__arrow {
		width: 20px;
		height: 24px;
	}

	.area-card__num {
		margin-top: auto;
		font-size: 13px;
	}

	.area-card__num b {
		font-size: 42px;
	}

	.area-card--pref {
		font-size: 17px;
		border-radius: 14px;
	}

	.top-map {
		display: none;
	}

	.top-dropin {
		padding-top: 88px;
	}

	.top-dropin__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.dropin-panel {
		padding: 34px 36px;
	}

	.dropin-panel__plate {
		right: 24px;
		top: -22px;
	}

	.dropin-panel__plate > span {
		padding: 8px 12px;
	}

	.dropin-panel__picto {
		width: 40px;
		height: 40px;
	}

	.dropin-panel__plate .ds-arrow {
		width: 22px;
		height: 26px;
	}

	.dropin-panel__eyebrow {
		font-size: 14px;
	}

	.dropin-panel__title {
		padding-right: 150px;
		font-size: 30px;
	}

	.dropin-panel__title b {
		font-size: 56px;
	}

	.dropin-panel p {
		font-size: 15px;
	}

	.dropin-panel .c-btn {
		align-self: flex-start;
		min-height: 54px;
		padding: 0 24px;
	}

	.checklist {
		padding: 24px 26px;
	}

	.checklist h3 {
		font-size: 18px;
	}

	.top-two {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: start;
		gap: 32px;
		padding-top: 72px;
	}

	/* PCはイラストを枠の幅いっぱいに（約600px）。説明はその下 */
	.tanks {
		padding: 20px 22px 22px;
		gap: 14px;
	}

	.tanks h3 {
		font-size: 17px;
	}

	.top-help {
		margin-top: 80px;
		padding: 56px 0 64px;
	}

	.top-help .l-wrap {
		gap: 24px;
	}

	.top-help__grid {
		gap: 24px;
	}

	.help-card {
		padding: 22px 24px;
	}

	.help-card .c-btn {
		margin-top: auto;
		align-self: flex-start;
		min-width: 240px;
	}
}

/* =========================================================================
   施設の一覧・地域・検索
   ========================================================================= */
.list-page {
	padding-bottom: 8px;
}

.list-head {
	padding: 8px 0 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.list-head__title {
	margin: 0;
	font-size: 26px;
	line-height: 1.35;
}

.list-head__lead {
	margin: 0;
	color: var(--ink2);
	font-size: 14px;
	line-height: 1.7;
}

/* スマホでは区切りごとに改行して、行数を固定する（フォントが切り替わったときに、下の一覧がずれないように） */
@media (max-width: 519px) {
	.list-head__lead .ib {
		display: block;
	}
}

.list-head__sign .c-sign__in {
	padding: 16px 16px 14px;
}

.list-head--area .list-head__title {
	font-size: 24px;
}

.list-intro {
	margin: 0 0 18px;
	color: var(--ink2);
	font-size: 14px;
	line-height: 1.8;
}

.list-head__stats {
	margin: 10px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	font-size: 13px;
	font-weight: 700;
}

.list-head__stats b {
	margin-right: 2px;
	font-family: var(--en);
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
}

.list-head__ok {
	padding: 3px 9px;
	border: 1.5px solid var(--ok-badge-line);
	border-radius: 6px;
	background: var(--ok-badge);
	color: var(--ok-ink);
	line-height: 20px;
	display: inline-block;
}

.list-head__ok b {
	margin: 0 0 0 6px;
	font-size: 16px;
	font-weight: 900;
}

.list-map {
	position: relative;
	height: 380px; /* 下に施設のカードを重ねるので、以前の320pxより高く */
	margin-bottom: 20px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: #e8eef5;
}

.list-map__map {
	height: 100%;
}

.list-search {
	margin-bottom: 16px;
}

.list-tools {
	padding-bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.list-tools__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.list-tools__q .c-search__input {
	height: 48px;
	border-color: var(--line2);
}

.list-tools__near {
	min-height: 48px;
	font-size: 15px;
}

.list-tools__near.is-busy {
	opacity: 0.7;
}

.list-tools__near:disabled {
	border-color: var(--line);
	color: var(--ink2);
	cursor: default;
	background: var(--bg2);
}

.list-tools__count {
	margin: 0;
	color: var(--ink2);
	font-size: 13px;
}

.list-tools__count b {
	margin-right: 2px;
	color: var(--ink);
	font-family: var(--en);
	font-size: 20px;
}

.list-body {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.spot-list {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.spot-list__flat:empty {
	display: none;
}

.spot-list.is-sorted .spot-list__flat {
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.spot-list__area {
	display: flex;
	flex-direction: column;
	gap: 18px;
	scroll-margin-top: calc(var(--header-h) + 8px);
}

.spot-list__areatitle {
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--sign);
	font-size: 21px;
	line-height: 1.4;
}

.spot-list__areatitle a {
	color: var(--ink);
	text-decoration: none;
}

.spot-list__areatitle a:hover {
	color: var(--sign);
}

.spot-list__pref {
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-margin-top: calc(var(--header-h) + 8px);
}

.spot-list__preftitle {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 17px;
	line-height: 1.4;
}

.spot-list__preftitle span {
	color: var(--ink2);
	font-size: 13px;
	font-weight: 400;
}

/*
 * 地域ページ：都道府県の地図（番号つきのピン）と、同じ番号の一覧。
 * スマホ：地図が上・一覧が下。PC：一覧が左・地図が右（一覧をスクロールしても地図が見えるように固定）。
 * 地図の色：海は薄い青、まわりの都道府県は薄い灰色、その都道府県は白。ピンは立ち寄りOKがオレンジ、ほかは青（Googleマップのピンと同じ）。
 */
.pref-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pref-map {
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: #e3eefb;
}

.pref-map__svg {
	display: block;
	width: 100%;
	height: auto;
}

.pref-map__sea {
	fill: #e3eefb;
}

.pref-map__nb {
	fill: #f3f5f8;
	stroke: #c3cedb;
	stroke-width: 1px;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.pref-map__me {
	fill: var(--white);
	stroke: var(--sign);
	stroke-width: 1.6px;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.pref-map__lead {
	stroke: var(--ink);
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
}

.pref-map__dot {
	fill: var(--ink);
}

.pref-map__pin {
	cursor: pointer;
}

.pref-map__pin circle,
.pref-map__pin rect {
	fill: var(--sign);
	stroke: var(--white);
	stroke-width: 1.6px;
	vector-effect: non-scaling-stroke;
}

.pref-map__pin text {
	fill: var(--white);
	font-family: var(--en);
	font-weight: 900;
	text-anchor: middle;
	pointer-events: none;
}

.pref-map__pin--ok rect {
	fill: var(--ok-pin);
	stroke: var(--ok-pin-line);
}

.pref-map__pin--ok text {
	fill: var(--ok-pin-ink);
}

.pref-map__pin--checking circle {
	fill: #8a5a12;
}

/* 一覧の行にマウスを乗せたとき、地図のピンを目立たせる（逆も同じ） */
.pref-map__pinwrap.is-hl .pref-map__pin circle,
.pref-map__pinwrap.is-hl .pref-map__pin rect {
	stroke: var(--sign-d);
	stroke-width: 4px;
}

.pref-map__pinwrap.is-hl .pref-map__pin--ok rect {
	stroke: #7a2f08;
}

.pref-map__pinwrap.is-off {
	display: none;
}

/* 番号と名前：名前が2行になっても、番号は1行目の左に置く */
.c-row__name--num {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.c-row__num {
	flex-shrink: 0;
	min-width: 22px;
	height: 22px;
	margin-top: 1px;
	padding: 1px 5px 0;
	border-radius: 11px;
	background: var(--sign);
	color: var(--white);
	font-family: var(--en);
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.c-row__num--checking {
	background: #8a5a12;
	color: #ffffff;
}

.c-row__num--ok {
	border-radius: 6px; /* 地図の立ち寄りOKのピンと同じ角丸の四角 */
	background: var(--ok-pin);
	color: var(--ok-pin-ink);
	box-shadow: inset 0 0 0 1.5px var(--ok-pin-line);
}

.spot-list.is-sorted .c-row__num {
	display: none;
}

.c-row.is-hl .c-row__link {
	background: #f3f7fd;
}

/* 地図のピンから移動してきた行 */
.c-row:target .c-row__link,
.c-row.is-flash .c-row__link {
	animation: ds-row-flash 2.4s ease-out;
}

@keyframes ds-row-flash {
	0%,
	30% {
		background: var(--sign-t);
	}

	100% {
		background: var(--white);
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-row:target .c-row__link,
	.c-row.is-flash .c-row__link {
		animation: none;
		background: var(--use-bg);
	}
}

/*
 * スマホでは県の地図を低くする（1か所しかない県でも画面いっぱいの地図が出て、関東のページが画面10枚分になっていた。
 * 2026年10月2日のレビュー 改善案9）。地図は縦横の比率を保って中央に出る（まわりは海の色）。
 */
@media (max-width: 719px) {
	.pref-map__svg {
		max-height: 240px;
	}
}

@media (min-width: 720px) {
	.pref-map {
		max-width: 520px;
	}
}

/*
 * スマホ・タブレットでは県の見出しを画面の上に固定する（長い一覧のどこを見ているか分かるように）。
 * ピンを押して行へ移動するときは、maps.js が見出しの分だけ下にずらして止める。
 */
@media (max-width: 1023px) {
	.spot-list__preftitle {
		position: sticky;
		top: var(--header-h);
		z-index: 5;
		margin: 0 calc(-1 * var(--gutter));
		padding: 8px var(--gutter);
		background: var(--white);
		box-shadow: 0 1px 0 var(--line);
	}

	.admin-bar .spot-list__preftitle {
		top: calc(var(--header-h) + 46px);
	}
}

@media (min-width: 783px) and (max-width: 1023px) {
	.admin-bar .spot-list__preftitle {
		top: calc(var(--header-h) + 32px);
	}
}

@media (min-width: 1024px) {
	.pref-block {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		grid-template-areas: "rows map";
		align-items: start;
		gap: 24px;
	}

	.pref-block > .c-rows {
		grid-area: rows;
	}

	.pref-map {
		grid-area: map;
		max-width: none;
		position: sticky;
		top: calc(var(--header-h) + 16px);
	}
}

.spot-list__empty,
.list-none p {
	margin: 0;
	color: var(--ink2);
	font-size: 14px;
}

.list-none {
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pref-index {
	padding: 16px;
	border-radius: var(--radius);
	background: var(--bg2);
	scroll-margin-top: calc(var(--header-h) + 8px);
}

.pref-index__title {
	margin: 0 0 12px;
	font-size: 17px;
}

.pref-index__grid {
	display: grid;
	gap: 14px;
}

.pref-index__areaname {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.pref-index ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pref-index li a {
	min-height: 36px;
	padding: 0 10px;
	border: 1.5px solid var(--line);
	border-radius: 8px;
	background: var(--white);
	color: var(--sign);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pref-index li a span {
	color: var(--ink2);
	font-family: var(--en);
	font-size: 12px;
}

.pref-index li a:hover {
	border-color: var(--sign);
}

/* 一覧ページ：都道府県から探す の日本地図（10月8日）。スマホは札の上、PCは札の左 */
.pref-index__body {
	display: grid;
	gap: 16px;
}

.pref-jmap {
	margin: 0 auto;
	width: 100%;
	max-width: 460px;
}

.pref-jmap__svg {
	display: block;
	width: 100%;
	height: auto;
}

.pref-jmap rect {
	fill: #dde4ec;
	transition: fill .15s;
}

.pref-jmap text {
	fill: #8a96a3;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
}

.pref-jmap__pref {
	cursor: pointer;
}

.pref-jmap__pref[data-on="1"] rect {
	fill: #1856a4;
}

.pref-jmap__pref[data-on="1"] text {
	fill: #fff;
}

.pref-jmap__pref[data-on="0"] {
	pointer-events: none;
}

.pref-jmap__pref[data-on="1"]:hover rect,
.pref-jmap__pref[data-on="1"].is-hot rect {
	fill: #0d3a73;
}

.pref-index li.is-hot a {
	border-color: var(--sign);
	background: #edf5fc;
}

.pref-jmap__legend {
	margin: 8px 0 0;
	color: var(--ink2);
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 6px;
}

.pref-jmap__key {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	margin-left: 8px;
	background: #dde4ec;
}

.pref-jmap__key[data-on="1"] {
	margin-left: 0;
	background: #1856a4;
}

/* 絞り込みで該当0件になった県（とすべて0件の地域）は隠す（maps.js） */
.pref-index[hidden],
.pref-index [hidden] {
	display: none;
}

/* 地域ページ：都道府県へのジャンプ（件数つきの札を横に並べる。一覧の上） */
.pref-index--chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-top: 14px;
	padding: 12px 14px;
}

.pref-index--chips .pref-index__title {
	margin: 0;
	font-size: 13px;
	color: var(--ink2);
}

.pref-index--chips ul {
	flex: 1 1 auto;
}

.pref-index__note {
	margin: -4px 0 12px;
	color: var(--ink2);
	font-size: 13px;
}

.pref-index__note[hidden] {
	display: none;
}

.area-links {
	padding-top: 8px;
}

.area-links__title {
	margin: 0 0 10px;
	font-size: 17px;
}

.area-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.area-links a {
	min-height: 44px;
	padding: 0 14px;
	border: 2px solid var(--sign);
	border-radius: 10px;
	color: var(--sign);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.area-links a:hover {
	background: var(--sign-t);
}

.area-links .ds-arrow {
	fill: var(--sign);
}

.search-posts {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.list-provide {
	margin-top: 48px;
	margin-bottom: 48px;
}

@media (min-width: 720px) {
	.list-tools__row {
		flex-direction: row;
	}

	.list-tools__q {
		flex: 1 1 auto;
	}

	.list-tools__near {
		flex: 0 0 auto;
		padding: 0 20px;
	}

	.pref-index__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.list-head {
		padding: 8px 0 24px;
	}

	.list-head__title {
		font-size: 34px;
	}

	.list-head--area .list-head__title {
		font-size: 30px;
	}

	.list-head__sign .c-sign__in {
		padding: 22px 26px 20px;
	}

	.list-map {
		height: 420px;
	}

	.list-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	/* 一覧は1列（以前は2列だったが、1行の情報を増やしたため） */

	.pref-index__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-content: start;
	}

	.pref-index__body {
		grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
		align-items: start;
		gap: 28px;
	}

	.list-provide {
		margin-top: 72px;
		margin-bottom: 80px;
	}
}

/* =========================================================================
   ブログ・固定ページ
   ========================================================================= */
.post-cards {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 16px;
}

.post-card a {
	height: 100%;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--ink);
	text-decoration: none;
	display: flex;
	flex-direction: column;
}

.post-card a:hover {
	border-color: var(--sign);
	color: var(--ink);
}

.post-card__img {
	aspect-ratio: 1200 / 630;
	background: var(--bg2);
	display: block;
}

.post-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-card__noimg {
	height: 100%;
	color: var(--sign);
	display: flex;
	align-items: center;
	justify-content: center;
}

.post-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.post-card__meta {
	color: var(--ink2);
	font-size: 12px;
}

.post-card__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

.post-card__excerpt {
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.7;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nav-links .page-numbers {
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	color: var(--sign);
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nav-links .page-numbers.current {
	border-color: var(--sign);
	background: var(--sign);
	color: var(--white);
}

.article__wrap {
	max-width: 800px;
}

.article__head {
	padding: 8px 0 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.article__meta {
	margin: 0;
	color: var(--ink2);
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.article__meta .c-tag {
	text-decoration: none;
}

.article__title {
	margin: 0;
	font-size: 26px;
	line-height: 1.45;
}

.article__eyecatch {
	margin: 0 0 24px;
}

.article__eyecatch img {
	width: 100%;
	border-radius: var(--radius);
	display: block;
}

.article__nav {
	margin-top: 40px;
	display: grid;
	gap: 10px;
}

.article__navlink {
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}

.article__navlink small {
	display: block;
	color: var(--ink2);
	font-size: 12px;
	font-weight: 400;
}

.article__navlink:hover {
	border-color: var(--sign);
}

.article__back {
	margin: 20px 0 0;
	text-align: center;
}

@media (min-width: 720px) {
	.article__back .c-btn {
		display: inline-flex;
		width: auto;
		min-width: 260px;
	}
}

.article--page .article__wrap {
	padding-bottom: 56px;
}

/* 本文 */
.prose {
	font-size: 16px;
	line-height: 1.95;
}

.prose > * {
	margin-top: 0;
	margin-bottom: 1.2em;
}

.prose h2 {
	margin: 2.2em 0 0.9em;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--sign);
	color: var(--white);
	font-size: 21px;
	line-height: 1.5;
}

.prose h3 {
	margin: 2em 0 0.8em;
	padding: 0 0 8px;
	border-bottom: 3px solid var(--sign);
	font-size: 19px;
	line-height: 1.5;
}

/*
 * プライバシーポリシー・免責事項の各節の見出し（parts/page-text/*.html）。
 * 見出しの順（h1 → h2）を正しくして、見た目はこれまでの h3 と同じにする（10月6日 F12）。
 */
.prose h2.prose__sec {
	margin: 2em 0 0.8em;
	padding: 0 0 8px;
	border-bottom: 3px solid var(--sign);
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-size: 19px;
	line-height: 1.5;
}

.prose h4 {
	margin: 1.8em 0 0.6em;
	padding-left: 12px;
	border-left: 4px solid var(--sign);
	font-size: 17px;
	line-height: 1.5;
}

.prose ul,
.prose ol {
	padding-left: 1.4em;
}

.prose li + li {
	margin-top: 0.3em;
}

.prose img {
	border-radius: 10px;
}

.prose figure {
	margin-left: 0;
	margin-right: 0;
}

.prose figcaption,
.prose .wp-element-caption {
	margin-top: 6px;
	color: var(--ink2);
	font-size: 13px;
	text-align: center;
}

/* ブログ記事のブロック（WordPress 標準の CSS は読み込まないので、使っている分だけここで）：段落・見出しの配置、画像ブロック */
.prose .has-text-align-center {
	text-align: center;
}

.prose .has-text-align-right {
	text-align: right;
}

.prose .has-text-align-left {
	text-align: left;
}

.prose .wp-block-image {
	margin: 0 0 1.2em; /* WordPress 標準の CSS（global-styles）が付けていた値と同じ */
}

.prose .wp-block-image img {
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.prose .wp-block-image.aligncenter,
.prose .wp-block-image .aligncenter {
	text-align: center;
}

.prose .wp-block-image.alignleft,
.prose .wp-block-image .alignleft {
	float: left;
	margin: 0.5em 1em 0.5em 0;
}

.prose .wp-block-image.alignright,
.prose .wp-block-image .alignright {
	float: right;
	margin: 0.5em 0 0.5em 1em;
}

.prose blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 12px 16px;
	border-left: 4px solid var(--line2);
	background: var(--bg2);
	border-radius: 0 10px 10px 0;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	display: block;
	overflow-x: auto;
}

.prose th,
.prose td {
	padding: 8px 10px;
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.prose th {
	background: var(--bg2);
}

.prose .cap_box,
.prose .swell-block-capbox {
	border: 2px solid var(--sign);
	border-radius: 12px;
	overflow: hidden;
}

.prose .cap_box_ttl {
	padding: 8px 14px;
	background: var(--sign);
	color: var(--white);
	font-weight: 700;
}

.prose .cap_box_content {
	padding: 12px 14px;
}

.prose .cap_box_content > :last-child {
	margin-bottom: 0;
}

@media (min-width: 720px) {
	.post-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.article__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.article__navlink--next {
		grid-column: 2;
		text-align: right;
	}
}

@media (min-width: 1024px) {
	.post-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.article__title {
		font-size: 34px;
	}

	.prose h2 {
		font-size: 24px;
	}
}

/* =========================================================================
   フォーム（Contact Form 7）
   ========================================================================= */
.wpcf7 .form__item-block {
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wpcf7 .form__item-block:last-child {
	border-bottom: 0;
}

.wpcf7 .form__item {
	display: block; /* テーマが <label> に置き換える（inc/setup.php）。以前の <div> と同じ並びにする */
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.wpcf7 .form__item span {
	margin-left: 6px;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--sign-t);
	color: var(--sign-d);
	font-size: 11px;
	vertical-align: 2px;
	display: inline-block; /* 「※」と「必須」を別の行に分けない（10月6日 F07） */
	white-space: nowrap;
	line-height: 1.4;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
	width: 100%;
	min-height: 50px;
	padding: 10px 14px;
	border: 2px solid var(--line2);
	border-radius: 10px;
	background: var(--white);
	color: var(--ink);
	font-size: 16px;
}

.wpcf7 textarea {
	min-height: 160px;
	line-height: 1.7;
}

.wpcf7 select,
.wpcf7 input[type="date"] {
	width: 100%;
	min-height: 50px;
	padding: 10px 14px;
	border: 2px solid var(--line2);
	border-radius: 10px;
	background-color: var(--white);
	color: var(--ink);
	font: inherit;
	font-size: 16px;
}

.wpcf7 select:focus,
.wpcf7 input[type="date"]:focus {
	border-color: var(--sign);
	outline: 3px solid var(--sign-t);
	outline-offset: 0;
}

/* 一般のお問い合わせの「オーナー・施設の方の場合」など、場合によって隠す欄 */
.wpcf7 .form__item-block[hidden] {
	display: none;
}

/* ---------- 報告専用のフォーム（inc/forms.php） ---------- */
/* 報告が役に立つことを伝える枠（イラストの背景は枠と同じ #f1f5f9 で作る） */
.ds-report__why {
	margin: 0 0 16px;
	padding: 16px;
	border-radius: var(--radius);
	background: var(--bg2);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ds-report__why-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.ds-report__why-body p {
	margin: 0;
}

.ds-report__why-title {
	color: var(--sign-d);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

.ds-report__why-text {
	margin-top: 6px !important;
	font-size: 15px;
	line-height: 1.8;
}

@media (min-width: 720px) {
	.ds-report__why.has-img {
		flex-direction: row;
		align-items: center;
		gap: 20px;
	}

	.ds-report__why-img {
		width: 360px;
		flex-shrink: 0;
	}
}

.ds-report__summary {
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--bg2);
	display: grid;
	gap: 8px;
}

.ds-report__summary div {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
}

.ds-report__summary dt {
	color: var(--ink2);
	font-size: 13px;
	font-weight: 700;
}

.ds-report__summary dd {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.ds-report__lead {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
}

.ds-report__note,
.ds-report__other {
	color: var(--ink2);
	font-size: 14px;
	line-height: 1.7;
}

/* 施設ページから来たときは、施設名を上に出すので入力欄は隠す（「いまの状態」は押したボタンの内容を選んだまま見せる） */
.ds-report--preset .ds-report__facility {
	display: none;
}

.ds-report__back {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 700;
}

/* 無料掲載の申し込み・写真のURL受付の案内 */
.ds-formintro {
	margin-bottom: 8px;
	padding: 16px 18px;
	border-left: 4px solid var(--sign);
	border-radius: 0 12px 12px 0;
	background: var(--bg2);
	font-size: 16px;
	line-height: 1.8;
}

.ds-formintro p {
	margin: 0;
}

.ds-formintro .ds-formintro__small {
	margin-top: 8px;
	color: var(--ink2);
	font-size: 14px;
}

/* ---------- 無料掲載の申し込みフォーム（inc/listing.php） ---------- */
.ds-listing__draft {
	margin: 12px 0 0;
}

.ds-listing__draft[hidden] {
	display: none;
}

.ds-listing__draft .c-textbtn {
	min-height: 0;
	margin-left: 6px;
	text-align: left;
	white-space: normal;
}

.ds-listing-form .ds-listing__h,
.prose .ds-listing-form h2.ds-listing__h {
	margin: 32px 0 0;
	padding: 0 0 10px;
	border-bottom: 2px solid var(--sign);
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-size: 18px;
	line-height: 1.5;
}

.ds-listing-form .ds-listing__h:first-child {
	margin-top: 16px;
}

.ds-listing-form .ds-listing__h small {
	margin-left: 10px;
	color: var(--ink2);
	font-size: 13px;
	font-weight: 400;
}

.ds-listing-form .ds-listing__h small.ds-listing__req {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--sign-t);
	color: var(--sign-d);
	font-size: 11px;
	font-weight: 700;
	vertical-align: 2px;
}

.ds-listing-form .ds-listing__lead {
	margin: 12px 0 0;
	color: var(--ink2);
	font-size: 14px;
	line-height: 1.7;
}

.ds-listing-form .ds-listing__help {
	margin-top: 6px;
	display: block;
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.6;
}

/* 宿泊・立ち寄り × ブラック・グレー・給水 */
.ds-listing__dumprow {
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 12px;
}

.ds-listing__dumpname {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.ds-listing__dumpname small {
	margin-left: 8px;
	color: var(--ink2);
	font-size: 13px;
	font-weight: 400;
}

.wpcf7 .ds-listing__dumprow .form__item-block {
	padding: 0;
	border-bottom: 0;
	gap: 4px;
}

.wpcf7 .ds-listing__dumprow .form__item {
	color: var(--ink2);
	font-size: 13px;
}

.wpcf7 input[type="file"] {
	width: 100%;
	min-height: 50px;
	padding: 10px;
	border: 2px dashed var(--line2);
	border-radius: 10px;
	background: var(--white);
	font-size: 14px;
}

.wpcf7 input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	accent-color: var(--sign);
}

.wpcf7 .ds-listing__accept .wpcf7-list-item label {
	padding: 12px 14px;
	align-items: flex-start;
	font-weight: 400;
	line-height: 1.6;
}

.ds-listing-form textarea {
	min-height: 120px;
}

@media (min-width: 720px) {
	.ds-listing__row2,
	.ds-listing__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
	}

	/* 2列に並べた欄は、最後の欄にも下の線を引く（列の線の高さをそろえる） */
	.wpcf7 .ds-listing__row2 .form__item-block:last-child,
	.wpcf7 .ds-listing__grid .form__item-block:last-child {
		border-bottom: 1px solid var(--line);
	}

	.ds-listing__dumprow {
		grid-template-columns: 12em repeat(2, minmax(0, 1fr));
		align-items: end;
	}

	.ds-listing__dumpname {
		grid-column: auto;
		align-self: center;
	}
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--sign);
	outline: 3px solid var(--sign-t);
	outline-offset: 0;
}

.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px; /* チェックボックスもボタンどうしを離す（10月7日 オーナーの指摘：くっついていた） */
}

.wpcf7 .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-list-item label {
	min-height: 44px;
	padding: 0 14px 0 10px;
	border: 2px solid var(--line2);
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.wpcf7 .wpcf7-list-item label:has(input:checked) {
	border-color: var(--sign);
	background: var(--sign-t);
}

.wpcf7 input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--sign);
}

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	width: 100%;
	min-height: 56px;
	padding: 0 24px;
	border: 2px solid var(--sign);
	border-radius: 12px;
	background: var(--sign);
	color: var(--white);
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--sign-d);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #b3261e;
	font-size: 13px;
	font-weight: 700;
}

.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
}

@media (min-width: 720px) {
	.wpcf7 input[type="submit"],
	.wpcf7 .wpcf7-submit {
		width: auto;
		min-width: 280px;
	}
}

/* =========================================================================
   コメント・404
   ========================================================================= */
.comments {
	margin-top: 44px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.comments__title {
	margin: 0;
	font-size: 20px;
}

.comments__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.comments__list .comment-body {
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	font-size: 14px;
}

.comments__list .avatar {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 8px;
}

.comments__list .comment-meta {
	color: var(--ink2);
	font-size: 12px;
}

.comment-respond {
	padding: 16px;
	border-radius: var(--radius);
	background: var(--bg2);
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100%;
	padding: 10px 12px;
	border: 2px solid var(--line2);
	border-radius: 10px;
	font-size: 16px;
}

.comment-respond .submit {
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--sign);
	border-radius: 10px;
	background: var(--sign);
	color: var(--white);
	font-weight: 700;
}

.comments__note {
	color: var(--ink2);
	font-size: 13px;
}

.comments__none {
	margin: 0;
	color: var(--ink2);
	font-size: 14px;
}

button.comments__open {
	width: 100%;
	cursor: pointer;
	font-family: inherit;
}

/* 施設ページの「施設の状況をクチコミする」（クチコミを書くページへ） */
.review__btn {
	width: 100%;
}

/* クチコミを書くページ（parts/spot-review.php） */
.review-page .comment-respond {
	padding: 0;
	background: none;
}

.review-page .comment-reply-title {
	display: none;
}

.review-page .comment-respond .submit {
	width: 100%;
	min-height: 56px;
	font-size: 17px;
}

@media (min-width: 720px) {
	.review-page .comment-respond .submit {
		width: auto;
		min-width: 280px;
	}
}

.comment-respond p {
	margin: 0 0 14px;
}

.comment-respond label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
}

.comment-respond .required {
	margin-left: 4px;
	color: var(--sign);
	font-size: 12px;
}

.comment-respond .comment-reply-title {
	margin: 0 0 8px;
	font-size: 17px;
}

/* 写真の添付（プラグイン DCO Comment Attachment の欄） */
.comment-form-attachment {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--ink2);
	font-size: 12.5px;
	line-height: 1.6;
}

.comment-form-attachment__input {
	max-width: 100%;
	padding: 10px;
	border: 2px dashed var(--line2);
	border-radius: 10px;
	background: var(--white);
	font-size: 14px;
}

/* 写真を付けるときの掲載への同意（10月8日） */
.comment-form-photo-consent label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--bg2);
	font-size: 13px;
	line-height: 1.7;
	cursor: pointer;
}

.comment-form-photo-consent input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
}

.comment-form-photo-consent__more {
	display: block;
	margin: 4px 0 0 2px;
	color: var(--ink2);
	font-size: 12px;
}


@media (min-width: 1024px) {
	button.comments__open {
		width: auto;
		align-self: flex-start;
		padding: 0 28px;
	}
}

.notfound {
	padding-top: 32px;
	padding-bottom: 64px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 760px;
}

.notfound__code {
	margin: 0;
	font-family: var(--en);
	font-size: 44px;
	font-weight: 900;
	line-height: 1;
}

.notfound__title {
	margin: 8px 0 6px;
	font-size: 24px;
}

.notfound__sign p:last-child {
	margin: 0;
	font-size: 14px;
}

.notfound__links {
	display: grid;
	gap: 10px;
}

@media (min-width: 720px) {
	.notfound__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.list-placebtn {
	margin-bottom: 16px;
	min-height: 48px;
	font-size: 15px;
}

@media (min-width: 720px) {
	.list-placebtn {
		align-self: flex-start;
		display: inline-flex;
		padding: 0 20px;
	}
}

#respond {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

/* reCAPTCHA（お問い合わせ・情報提供フォーム）：右下のマークはスマホで入力欄に重なるので隠し、フォームの下に表示を入れる */
.grecaptcha-badge {
	visibility: hidden;
}

.c-recaptcha-note {
	margin-top: 16px;
	color: var(--ink2);
	font-size: 12px;
	line-height: 1.6;
}

/*
 * 以前のテーマ（SWELL）で書いたブログの蛍光ペン（swl-marker mark_yellow・mark_blue）。
 * このテーマには指定がなく太字だけになっていた（10月6日の再チェック）。文字の下半分に色を敷く。
 */
.prose .swl-marker {
	padding: 0 2px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.prose .swl-marker.mark_yellow {
	background: linear-gradient(transparent 55%, #fff1a8 55%);
}

.prose .swl-marker.mark_blue {
	background: linear-gradient(transparent 55%, #d6e8ff 55%);
}

/* 写真の一覧で、選んだ写真の上が見出しの帯（高さ56px）に隠れないようにする（10月6日の再チェック） */
.c-gallery__list li {
	scroll-margin-top: 72px;
}

/* 休業中・確認中の表（休業前・確認前の情報）は、丸を灰色にする */
.usetable--prior .c-check circle {
	fill: var(--gray-x);
}

/* 現在地を取得できず地図を出していないときは、一覧を横いっぱいに（PC。10月6日の再チェック） */
@media (min-width: 1024px) {
	.top-results.is-nomap .top-results__sheet {
		grid-column: 1 / -1;
	}
}

/* 都道府県のページ（10月6日） */
.spot-list__preftitle a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--sign);
	text-underline-offset: 4px;
}

.spot-list__preftitle a:hover {
	color: var(--sign);
	text-decoration-color: var(--sign);
}

.pref-near {
	margin: 8px 0 32px;
}

.pref-near .c-rows {
	margin-top: 4px;
}

.area-links ul + .area-links__title {
	margin-top: 24px;
}

/*
 * 都道府県のページ（PC）：県の地図を一覧の上に大きく出す（10月7日 オーナーの指示）。
 * 地方のページは今までどおり「一覧が左・地図が右」。地図は横いっぱい、高さは画面に合わせて 380〜560px（まわりは海の色）。
 */
@media (min-width: 1024px) {
	.list-page--pref .pref-block {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.list-page--pref .pref-block > .c-rows {
		width: 100%;
	}

	.list-page--pref .pref-map {
		position: static;
		max-width: none;
	}

	.list-page--pref .pref-map__svg {
		height: clamp(380px, 62vh, 560px);
	}
}

/* 無料掲載の申し込み：任意の項目（公式SNS・写真）は折りたたむ（10月7日の比較レビュー UX-F01） */
.ds-listing__more {
	margin-top: 12px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: var(--white);
}

.ds-listing__more > summary {
	min-height: 48px;
	padding: 12px 16px;
	color: var(--sign);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ds-listing__more > summary::-webkit-details-marker {
	display: none;
}

.ds-listing__more > summary::before {
	content: "＋";
	width: 20px;
	text-align: center;
}

.ds-listing__more[open] > summary::before {
	content: "－";
}

.ds-listing__more > .ds-listing__grid {
	padding: 0 16px 8px;
}

/* 0件のときの案内（「条件をすべて外す」ボタンつき） */
.spot-list__empty {
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.spot-list__empty p {
	margin: 0;
}

/* 料金などの報告ページ（スマホ）：イラストを小さくして、入力欄を上に（10月7日の比較レビュー UX-F03） */
@media (max-width: 719px) {
	.ds-report__why-img {
		max-height: 110px;
		object-fit: contain;
		object-position: left center;
	}

	.ds-report__why {
		padding: 12px 14px;
		gap: 8px;
	}

	.ds-report__why-text {
		font-size: 14px;
		line-height: 1.7;
	}
}

/*
 * 状況報告のフォーム：必須と任意を見分けやすく（10月7日 オーナーの指摘）。
 * 必須は青い「※必須」、任意は灰色の枠の「任意」。必須の項目のあとに「ここから下は任意です」の区切り。
 */
.wpcf7 .form__item span.is-optional {
	border: 1px solid var(--line2);
	background: var(--white);
	color: var(--ink2);
	font-weight: 400;
}

.ds-report__optional {
	margin: 24px 0 0 !important;
	padding: 14px 0 0;
	border-top: 2px dashed var(--line2);
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.6;
}

.ds-report__optional span {
	margin-right: 8px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
}

.ds-report__help {
	margin: 6px 0 0 !important;
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.6;
}

.wpcf7 input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--sign);
}

/* 日付の欄：曜日つきの表示を重ねる（assets/js/site.js。Windows の Chrome の「2026/10/21()」の代わり） */
.ds-date {
	position: relative;
	display: block;
}

.ds-date input[type="date"] {
	color: transparent;
}

.ds-date input[type="date"]::-webkit-datetime-edit {
	color: transparent;
}

.ds-date__text {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink);
	font-size: 16px;
	pointer-events: none;
	white-space: nowrap;
}

.ds-date:not(.has-value) .ds-date__text {
	color: #6a7180;
}

/* 情報提供のフォーム：区切りの見出し（施設について／あなたについて）と、欄の下の補足（inc/setup.php ds_cf7_provision_layout） */
.wpcf7 .ds-form-sec {
	margin: 32px 0 0 !important; /* 無料掲載の申し込みフォームの見出し（.ds-listing__h）とそろえる */
	padding: 0 0 10px;
	border-bottom: 2px solid var(--sign);
	color: var(--ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.wpcf7 .ds-form-sec small {
	margin-left: 10px;
	color: var(--ink2);
	font-size: 13px;
	font-weight: 400;
}

.wpcf7 .ds-form-help {
	display: block;
	margin-top: 6px;
	color: var(--ink2);
	font-size: 13px;
	line-height: 1.6;
}

/* 日付の欄にカーソルがあるときの、見えない年・月・日の選択の色を消す（重ねた表示の上に青い四角が出ていた） */
.ds-date input[type="date"]::-webkit-datetime-edit-year-field:focus,
.ds-date input[type="date"]::-webkit-datetime-edit-month-field:focus,
.ds-date input[type="date"]::-webkit-datetime-edit-day-field:focus {
	background: transparent;
	color: transparent;
}
.spot-userphoto__img.js-gallery-open{width:100%;padding:0;border:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
@media (max-width:1023px){.spot-userphoto--spot .spot-userphoto__img img{max-height:200px;object-fit:cover}}