.vcr-map-home {
	background: #f7f8f8;
	min-height: 70vh;
}

.vcr-map-toolbar {
	background: #ffffff;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
	position: relative;
	z-index: 20;
}

.vcr-map-toolbar__inner {
	margin: 0 auto;
	max-width: 1480px;
	padding: 14px 20px;
}

.vcr-map-search {
	align-items: end;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(220px, 1.3fr) minmax(220px, 1fr) minmax(180px, 0.75fr);
}

.vcr-map-search__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.vcr-map-search__field label {
	color: #5f6b6d;
	font-size: 12px;
	font-weight: 700;
}

.vcr-map-search input,
.vcr-map-search select {
	background: #ffffff;
	border: 1px solid #cfd7d8;
	border-radius: 9px;
	color: #172326;
	font-size: 14px;
	height: 44px;
	padding: 0 12px;
	width: 100%;
}

.vcr-map-search__button {
	background: var(--color-accent, #0f8b8d);
	border: 0;
	border-radius: 9px;
	color: #ffffff;
	cursor: pointer;
	font-weight: 700;
	height: 44px;
	padding: 0 24px;
}

.vcr-map-mobile-switch {
	display: none;
}

.vcr-map-layout {
	display: grid;
	grid-template-columns: minmax(430px, 46%) 1fr;
	height: calc(100vh - 150px);
	min-height: 640px;
}

.vcr-map-list-panel {
	background: #ffffff;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vcr-map-list-head {
	align-items: center;
	border-bottom: 1px solid #e6ebec;
	display: flex;
	justify-content: space-between;
	padding: 20px 22px 14px;
}

/* 1.7.27: Home一覧の並び順を地図とページングを含めて切り替える。 */
.vcr-map-list-head__controls {
	align-items: center;
	display: flex;
	gap: 10px;
	min-width: 0;
}

.vcr-map-sort {
	align-items: center;
	color: #526276;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 8px;
	white-space: nowrap;
}

.vcr-map-sort select {
	appearance: auto;
	background: #ffffff;
	border: 1px solid #cdd8dd;
	border-radius: 6px;
	color: #263b4c;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	max-width: 100%;
	min-height: 34px;
	padding: 5px 7px;
}

.vcr-map-sort select:focus-visible {
	border-color: #0f8b8d;
	outline: 2px solid #a3dfda;
	outline-offset: 1px;
}

@media (max-width: 560px) {
	.vcr-map-list-head {
		column-gap: 8px;
		flex-wrap: wrap;
		row-gap: 10px;
	}
	.vcr-map-list-head__controls {
		margin-left: auto;
	}
	.vcr-map-sort span {
		display: none;
	}
	.vcr-map-sort select {
		max-width: 174px;
	}
}

.vcr-map-list-head h1 {
	color: #172326;
	font-size: 22px;
	margin: 0 0 3px;
}

.vcr-map-list-head p {
	color: #758184;
	font-size: 13px;
	margin: 0;
}

.vcr-map-reset {
	background: transparent;
	border: 1px solid #ccd5d6;
	border-radius: 999px;
	color: #334244;
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 12px;
}

.vcr-map-list {
	display: grid;
	gap: 0;
	overflow-y: auto;
}

.vcr-map-card {
	background: #ffffff;
	border-bottom: 1px solid #e8eded;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.vcr-map-card.is-highlighted {
	background: #eef9f8;
	box-shadow: inset 4px 0 0 var(--color-accent, #0f8b8d);
}

.vcr-map-card[hidden] {
	display: none;
}

.vcr-map-card__link {
	color: inherit;
	display: grid;
	gap: 16px;
	grid-template-columns: 190px minmax(0, 1fr);
	padding: 16px 20px;
	text-decoration: none;
}

.vcr-map-card__media {
	aspect-ratio: 4 / 3;
	background: #e7ecec;
	border-radius: 12px;
	overflow: hidden;
}

.vcr-map-card__media img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.vcr-map-card__placeholder {
	align-items: center;
	color: #819092;
	display: flex;
	font-size: 12px;
	font-weight: 700;
	height: 100%;
	justify-content: center;
	letter-spacing: 0.04em;
}

.vcr-map-card__body {
	min-width: 0;
	padding: 3px 0;
}

.vcr-map-card__topline {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 8px;
}

.vcr-map-card__category {
	background: #edf4f4;
	border-radius: 999px;
	color: #425355;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px;
}

.vcr-map-card__approx {
	color: #8a9596;
	font-size: 10px;
}

.vcr-map-card h2 {
	color: #172326;
	font-size: 17px;
	line-height: 1.35;
	margin: 0 0 8px;
}

.vcr-map-card__location {
	color: #667376;
	font-size: 13px;
	margin: 0 0 10px;
}

.vcr-map-card__price {
	color: #172326;
	font-size: 16px;
	font-weight: 800;
	margin: 0;
}

.vcr-map-panel {
	min-height: 0;
	position: relative;
}

.vcr-map-canvas {
	height: 100%;
	width: 100%;
}

/*
 * Home地図の背景はOpenStreetMap Standardを維持する。
 * OSM特有の強めの色を少し抑え、旧VancityRoomのGoogle Mapに近い
 * 明るく落ち着いた見え方へ寄せる。
 *
 * マーカー、Popup、文字にはフィルターをかけず、
 * 背景タイルだけに適用する。
 */
.vcr-map-canvas .leaflet-tile-pane {
	filter: brightness(1.04) contrast(0.94) saturate(0.72);
}

.vcr-map-canvas .leaflet-tile {
	image-rendering: auto;
}

/*
 * Leaflet標準のズームコントロールを少し軽くし、
 * 背景地図の見た目になじませる。
 */
.vcr-map-canvas .leaflet-bar {
	border: 0;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.vcr-map-canvas .leaflet-bar a {
	border-bottom-color: rgba(15, 23, 42, 0.08);
	color: #344247;
}

.vcr-map-canvas .leaflet-bar a:hover,
.vcr-map-canvas .leaflet-bar a:focus {
	background: #f7f8f8;
}

.vcr-map-status {
	background: rgba(255, 255, 255, 0.94);
	border-radius: 999px;
	bottom: 16px;
	box-shadow: 0 5px 18px rgba(15, 23, 42, 0.15);
	display: flex;
	gap: 10px;
	left: 50%;
	padding: 8px 13px;
	position: absolute;
	transform: translateX(-50%);
	z-index: 500;
}

.vcr-map-status span {
	color: #526063;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.vcr-price-marker {
	background: transparent;
	border: 0;
}

.vcr-price-marker__label {
	background: #3f7277;
	border: 1px solid rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	box-shadow: 0 3px 10px rgba(15, 23, 42, 0.24);
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	padding: 6px 9px;
	transform: translateX(-50%);
	transform-origin: center center;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}

.vcr-price-marker.is-hovered .vcr-price-marker__label {
	background: #e35166;
	border-color: #e35166;
	box-shadow: 0 0 0 4px rgba(227, 81, 102, 0.20), 0 4px 12px rgba(15, 23, 42, 0.26);
	color: #ffffff;
	transform: translateX(-50%) scale(1.08);
}

.vcr-map-popup {
	min-width: 220px;
}

.vcr-map-popup img {
	border-radius: 8px;
	height: 110px;
	object-fit: cover;
	width: 100%;
}

.vcr-map-popup h3 {
	font-size: 14px;
	line-height: 1.35;
	margin: 9px 0 4px;
}

.vcr-map-popup p {
	color: #657376;
	font-size: 12px;
	margin: 0 0 5px;
}

.vcr-map-popup strong {
	color: #172326;
	font-size: 14px;
}

.vcr-map-empty {
	color: #667376;
	padding: 28px 22px;
}

@media (max-width: 900px) {
	.vcr-map-toolbar__inner {
		padding: 10px 12px;
	}

	.vcr-map-search {
		grid-template-columns: 1fr 1fr;
	}

	.vcr-map-search__field:first-child {
		grid-column: 1 / -1;
	}



	.vcr-map-mobile-switch {
		background: #eef2f2;
		border-radius: 10px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-top: 10px;
		padding: 3px;
	}

	.vcr-map-mobile-switch button {
		background: transparent;
		border: 0;
		border-radius: 8px;
		color: #566366;
		cursor: pointer;
		font-weight: 700;
		padding: 8px;
	}

	.vcr-map-mobile-switch button.is-active {
		background: #ffffff;
		box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
		color: #172326;
	}

	.vcr-map-layout {
		display: block;
		height: auto;
		min-height: 0;
	}

	.vcr-map-list-panel {
		height: auto;
		min-height: 0;
	}

	.vcr-map-list {
		overflow: visible;
	}

	.vcr-map-panel {
		height: calc(100dvh - 178px);
		min-height: 520px;
	}

	.vcr-map-layout.is-list .vcr-map-panel {
		display: none;
	}

	.vcr-map-layout.is-map .vcr-map-list-panel {
		display: none;
	}

	.vcr-map-card__link {
		grid-template-columns: 130px minmax(0, 1fr);
		padding: 13px 14px;
	}

	.vcr-map-list-head {
		padding: 14px;
	}
}

@media (max-width: 560px) {
	.vcr-map-search {
		grid-template-columns: 1fr;
	}

	.vcr-map-search__field:nth-child(2) {
		display: flex;
	}

	.vcr-map-card__link {
		gap: 12px;
		grid-template-columns: 110px minmax(0, 1fr);
	}

	.vcr-map-card h2 {
		font-size: 15px;
	}
}




.vcr-map-loading {
	color: #0f8b8d;
	font-weight: 700;
	margin-left: 6px;
}

.vcr-map-home.is-loading .vcr-map-list {
	opacity: 0.58;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.vcr-map-search input,
.vcr-map-search select {
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vcr-map-search input:focus,
.vcr-map-search select:focus {
	border-color: var(--color-accent, #0f8b8d);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent, #0f8b8d) 16%, transparent);
}

/*
 * Home再設計
 * 地図はランキング上位100件までを保持し、一覧のみ20件ずつ追加表示する。
 */
.vcr-map-layout {
	grid-template-columns: 46% 1fr;
	isolation: isolate;
	position: relative;
	transition: grid-template-columns 0.24s ease;
	z-index: 0;
}

.vcr-map-list-panel {
	overflow: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.vcr-map-list {
	flex: 1 1 auto;
	min-height: 0;
}

.vcr-map-layout.is-list-collapsed {
	grid-template-columns: 0 1fr;
}

.vcr-map-layout.is-list-collapsed .vcr-map-list-panel {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.vcr-map-collapse {
	align-items: center;
	background: var(--color-accent, #0f8b8d);
	border: 0;
	border-radius: 0 8px 8px 0;
	box-shadow: none;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	height: 46px;
	justify-content: center;
	left: 46%;
	padding: 0;
	position: absolute;
	top: 14px;
	transition: left 0.24s ease, background-color 0.15s ease;
	width: 36px;
	z-index: 700;
}

.vcr-map-collapse span {
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	margin-top: -2px;
}

.vcr-map-collapse:hover,
.vcr-map-collapse:focus-visible {
	background: #0b7779;
}

.vcr-map-layout.is-list-collapsed .vcr-map-collapse {
	left: 0;
}

.vcr-map-more {
	align-items: center;
	color: #748184;
	display: flex;
	font-size: 12px;
	font-weight: 700;
	justify-content: center;
	min-height: 64px;
	padding: 18px;
}

.vcr-map-more.is-loading span::after {
	animation: vcr-map-dots 1.1s steps(4, end) infinite;
	content: '...';
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	width: 0;
}

@keyframes vcr-map-dots {
	to {
		width: 18px;
	}
}


/*
 * 広域では近い料金マーカーを件数でまとめる。
 * ズームに応じてクラスタが分解され、従来の料金マーカーへ戻る。
 */
.vcr-cluster-marker {
	align-items: center;
	background: var(--color-accent, #0f8b8d);
	border: 3px solid #ffffff;
	border-radius: 999px;
	box-shadow: 0 3px 12px rgba(15, 23, 42, 0.28);
	color: #ffffff;
	display: flex;
	font-size: 12px;
	font-weight: 900;
	justify-content: center;
}

.vcr-cluster-marker span {
	align-items: center;
	background: inherit;
	border-radius: 999px;
	display: flex;
	height: 100%;
	justify-content: center;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	width: 100%;
}

/*
 * リスト上で物件にhoverした時、その物件がcluster内に隠れている場合は
 * clusterの件数マーカー自体を強調し、地図上の位置が分かるようにする。
 * Leaflet本体のposition用transformを壊さないため、内側spanだけを拡大する。
 */
.vcr-cluster-marker.is-hovered span {
	background: #e35166;
	box-shadow: 0 0 0 5px rgba(227, 81, 102, 0.22), 0 4px 14px rgba(15, 23, 42, 0.30);
	transform: scale(1.13);
}

/*
 * マーカークリック時の物件カード。
 * Leaflet標準の余白を外し、写真を大きく見せる。
 */
.vcr-listing-popup .leaflet-popup-content-wrapper {
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.24);
	overflow: hidden;
	padding: 0;
}

.vcr-listing-popup .leaflet-popup-content {
	margin: 0;
	width: 280px !important;
}

/*
 * 写真の明暗に左右されず閉じるボタンが見えるよう、
 * Leaflet標準より詳細度の高いselectorで白い円形背景を固定する。
 * ボタン自体の24pxサイズはLeaflet標準のまま維持し、枠から半分だけ外へ出す。
 */
.leaflet-container .vcr-listing-popup a.leaflet-popup-close-button {
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 5px rgba(15, 23, 42, 0.22);
	color: #172326;
	right: -8px;
	top: -8px;
	z-index: 2;
}

.vcr-map-popup {
	min-width: 0;
}

.vcr-map-popup__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.vcr-map-popup__media {
	aspect-ratio: 16 / 9;
	background: #e7ecec;
	overflow: hidden;
	width: 100%;
}

.vcr-map-popup__media img {
	border-radius: 0;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.vcr-map-popup__media--empty {
	align-items: center;
	color: #819092;
	display: flex;
	font-size: 13px;
	font-weight: 800;
	justify-content: center;
}

.vcr-map-popup__body {
	padding: 10px 12px 12px;
}

.vcr-map-popup__top {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin-bottom: 6px;
}

.vcr-map-popup__category {
	color: var(--color-accent, #0f8b8d);
	font-size: 11px;
	font-weight: 800;
	text-transform: none;
}

.vcr-map-popup__top strong {
	color: #172326;
	font-size: 15px;
	font-weight: 900;
	white-space: nowrap;
}

.vcr-map-popup h3 {
	color: #172326;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.32;
	margin: 0 0 5px;
}

.vcr-map-popup__location {
	color: #687679;
	font-size: 11px;
	margin: 0;
}

@media (max-width: 900px) {
	.vcr-map-collapse {
		display: none;
	}

	.vcr-map-layout.is-list-collapsed .vcr-map-list-panel {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}

	.vcr-listing-popup .leaflet-popup-content {
		max-width: calc(100vw - 44px);
		width: 270px !important;
	}
}

/*
 * 1.5.1
 * hidden属性は独自のdisplay指定より優先させる。
 * これがないと、読み込み対象が0件でも .vcr-map-more の display:flex が勝ち、
 * 「さらに読み込み...」が表示されたままになるブラウザがある。
 */
.vcr-map-more[hidden] {
	display: none !important;
}

/*
 * PCの一覧カードをSpacelistのような横長・低めの比率へ寄せる。
 * 一覧を1画面に多く表示しつつ、写真の視認性は維持する。
 */
@media (min-width: 901px) {
	.vcr-map-card__link {
		gap: 14px;
		grid-template-columns: 205px minmax(0, 1fr);
		padding: 9px 14px;
	}

	.vcr-map-card__media {
		aspect-ratio: auto;
		border-radius: 10px;
		height: 118px;
	}

	.vcr-map-card__body {
		padding: 0;
	}

	.vcr-map-card__topline {
		gap: 6px;
		margin-bottom: 4px;
	}

	.vcr-map-card__category {
		font-size: 10px;
		padding: 3px 7px;
	}

	.vcr-map-card h2 {
		font-size: 16px;
		line-height: 1.28;
		margin: 0 0 5px;
	}

	.vcr-map-card__location {
		font-size: 12px;
		margin: 0 0 5px;
	}

	.vcr-map-card__price {
		font-size: 15px;
	}
}

@media (max-width: 900px) {
	.vcr-map-card__media {
		aspect-ratio: auto;
		height: 98px;
	}
}

@media (max-width: 560px) {
	.vcr-map-card__media {
		height: 84px;
	}
}


/*
 * 1.5.2
 * 一覧件数が少ない時にCSS Gridのauto行が余った縦スペースを分配し、
 * 各カードが縦に大きく引き伸ばされていた問題を修正。
 *
 * カード、読み込み表示、過去のお部屋リンクは内容分の高さだけを使い、
 * 残りの余白は一覧の下側に残す。
 */
.vcr-map-list {
	align-content: start;
	grid-auto-rows: max-content;
}


/*
 * 1.5.3
 * 一覧カードのhoverでは文字にUnderlineを付けず、
 * カード全体の背景色を少し変えてクリック可能であることを示す。
 */
.vcr-map-card__link,
.vcr-map-card__link:hover,
.vcr-map-card__link:focus,
.vcr-map-card__link:active,
.vcr-map-card__link:hover *,
.vcr-map-card__link:focus * {
	text-decoration: none !important;
}

@media (hover: hover) and (pointer: fine) {
	.vcr-map-card:hover {
		background: #f3f8f7;
	}
}

.vcr-map-card:focus-within {
	background: #f3f8f7;
}

.vcr-map-card__link:focus-visible {
	outline: 2px solid var(--color-accent, #0f8b8d);
	outline-offset: -2px;
}

/*
 * 種類、部屋タイプ、入居可能日は1行に近いコンパクトな情報欄として表示する。
 * 幅が足りない場合だけ自然に折り返す。
 */
.vcr-map-card__meta {
	align-items: center;
	color: #586668;
	display: flex;
	flex-wrap: wrap;
	font-size: 11px;
	gap: 4px 12px;
	line-height: 1.35;
	margin: 0 0 5px;
}

.vcr-map-card__meta span {
	align-items: baseline;
	display: inline-flex;
	gap: 4px;
	white-space: nowrap;
}

.vcr-map-card__meta b {
	color: #869193;
	font-size: 10px;
	font-weight: 700;
}

@media (max-width: 560px) {
	.vcr-map-card__meta {
		font-size: 10px;
		gap: 3px 9px;
	}

	.vcr-map-card__meta b {
		font-size: 9px;
	}
}


/*
 * 1.5.4
 * 「種類」「部屋タイプ」は説明ラベルを付けず、
 * カード上部に直接テキストを楕円ラベルとして表示する。
 */
.vcr-map-card__category--type {
	background: #e4f4f1;
	color: #27655f;
}

.vcr-map-card__category--room {
	background: #eef1f6;
	color: #465568;
}


/*
 * 1.5.5
 * リスト開閉タブのz-indexはLeaflet地図内では高く保つ必要があるが、
 * そのままだとサイトヘッダーなど地図外の要素より前面へ出ることがある。
 *
 * .vcr-map-layout 自体を独立したstacking contextにすることで、
 * タブの z-index:700 は地図レイアウト内だけで有効になり、
 * ヘッダーや他セクションの上へ飛び出さない。
 */


/*
 * 1.5.6
 * 種類・部屋タイプは左上、入居可能日はラベルを付けず右上へ配置する。
 * 日付は少し目立つように暖色系の薄い背景を付ける。
 */
.vcr-map-card__topline {
	justify-content: space-between;
}

.vcr-map-card__badges {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	min-width: 0;
}

.vcr-map-card__featured {
	align-items: center;
	color: #f1bb14;
	display: inline-flex;
	filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 1px 1px rgba(40, 34, 9, .5));
	height: 23px;
	justify-content: center;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 23px;
	z-index: 3;
}

.vcr-map-card__featured svg {
	display: block;
	fill: none;
	height: 20px;
	width: 20px;
}

/* 注目の星は写真上だけ淡い黄色に塗り、投稿管理画面のアイコンには影響させない。 */
.vcr-map-card__featured svg path {
	fill: #ffe08a;
}

@media (max-width: 560px) {
	.vcr-map-card__featured {
		height: 21px;
		right: 6px;
		top: 6px;
		width: 21px;
	}

	.vcr-map-card__featured svg {
		height: 18px;
		width: 18px;
	}
}

.vcr-map-card__available {
	background: #ffffff;
	border: 1px solid #d6e0df;
	border-left: 4px solid #169d95;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	color: #263638;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.15;
	margin-left: auto;
	padding: 5px 8px 5px 7px;
	white-space: nowrap;
}

.vcr-map-card__topline .vcr-map-card__approx {
	flex-basis: 100%;
}

/*
 * 登録時の「料金単位」カスタムフィールド price-period を
 * $800／月、$300／週、$80／日のように表示する。
 */
.vcr-map-card__price-unit {
	font-size: 0.82em;
	font-weight: 700;
	margin-left: 1px;
}

.vcr-map-popup__price-unit {
	font-size: 0.8em;
	font-weight: 700;
}

@media (max-width: 560px) {
	.vcr-map-card__available {
		font-size: 11px;
		padding: 4px 7px 4px 6px;
	}
}


/*
 * 1.5.7
 * 入居可能日は種類・部屋タイプの楕円ラベルと混同しないよう、
 * 白背景＋左アクセント線の小さな日付カードとして表示する。
 * 文字色とサイズも強めにして視認性を改善。
 */


/*
 * 1.5.8
 * 物件詳細ページの地図をHomeと同じデザインへ統一。
 * Storefront標準のクリック式mapは使わず、最初から表示する。
 */
.sf-map {
	background: #eef2f1;
	border: 1px solid #d8dfde;
	border-radius: 10px;
	overflow: hidden;
}

.sf-map__load {
	display: none !important;
}

.sf-map__canvas,
.vcr-item-map-canvas {
	display: block !important;
	height: 360px;
	min-height: 360px;
	width: 100%;
}

/*
 * Home地図と同じ色調。
 * フィルター対象は背景タイルのみなので料金マーカーや文字色は変わらない。
 */
.vcr-item-map-canvas .leaflet-tile-pane {
	filter: brightness(1.04) contrast(0.94) saturate(0.72);
}

.vcr-item-map-canvas .leaflet-tile {
	image-rendering: auto;
}

/*
 * Leaflet.TileLayer.NoGapのcanvasにも同じ見た目を適用。
 * タイル画像の境界に1pxの隙間が見える問題を避ける。
 */
.vcr-item-map-canvas canvas.leaflet-tile-container {
	image-rendering: auto;
}

.vcr-item-map-canvas .leaflet-bar {
	border: 0;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.vcr-item-map-canvas .leaflet-bar a {
	border-bottom-color: rgba(15, 23, 42, 0.08);
	color: #344247;
}

.vcr-item-map-canvas .leaflet-bar a:hover,
.vcr-item-map-canvas .leaflet-bar a:focus {
	background: #f7f8f8;
}

.vcr-item-map-canvas .leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.82);
}

@media (max-width: 640px) {
	.sf-map__canvas,
	.vcr-item-map-canvas {
		height: 300px;
		min-height: 300px;
	}
}


/*
 * 1.5.10
 * 物件詳細ページでは価格マーカーを使わず、位置表示専用の半透明circleMarkerを使用する。
 * Homeの価格マーカーCSSには影響を与えない。
 */


/*
 * 1.5.11
 * Home地図の物件Popupはカード全体がリンクになっている。
 * 親テーマ側のa:hoverスタイルでタイトル等にUnderlineが付かないよう、
 * Popup内では通常時・hover・focus・activeの全状態でUnderlineを無効にする。
 */
.vcr-map-popup__link,
.vcr-map-popup__link:hover,
.vcr-map-popup__link:focus,
.vcr-map-popup__link:active,
.vcr-map-popup__link:hover *,
.vcr-map-popup__link:focus *,
.vcr-map-popup__link:active * {
	text-decoration: none !important;
}


/*
 * 1.5.12
 * Home地図:
 * - 現在の地図範囲内にある物件だけをリストへ表示
 * - 地図drag/zoom完了後に一覧を更新
 * - 価格マーカーを濃色背景＋白文字へ変更
 * - cluster内の物件hover時はcluster自体を強調
 * - Leafletズームコントロールは右上へ移動
 */


/*
 * 1.5.13
 * リスト開閉タブの影が左側まで回り込み、
 * 白いリストパネルとの境界に隙間があるように見えていたため修正。
 *
 * 影は地図側（右側）にだけ感じる方向へ寄せ、
 * タブ左辺はリストパネルと完全につながって見えるようにする。
 */


/*
 * 1.5.14
 * 開閉タブをリストパネルの一部として見せるため、
 * drop-shadowを完全に削除し、境界を3pxだけリスト側へ重ねる。
 *
 * 右側の角丸だけを残すことで、白いパネルから直接生えている
 * 一体型のタブに見えるようにする。
 */


/*
 * 1.5.15
 * 前版ではタブをリスト側へ3px重ねていたが、
 * その重なり自体が左フレームへ被って見えるため撤回。
 * タブ左端をリスト / 地図の境界（46%）にぴったり合わせる。
 */


/* 1.5.64
 * Home一覧カードを詳細ページに近い情報設計へ寄せる。
 * 入居可能日は画像上の小さなラベルカード、料金単位は色付きの丸バッジ、
 * 性別条件はSVGアイコン付きチップで表示する。
 */
.vcr-map-card__media {
	position: relative;
}

.vcr-map-card__available-card {
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid rgba(210, 218, 220, 0.95);
	border-radius: 9px;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
	left: 10px;
	max-width: calc(100% - 20px);
	padding: 6px 8px;
	position: absolute;
	top: 10px;
}

.vcr-map-card__available-label {
	color: #6f7c80;
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.1;
	margin-bottom: 3px;
}

.vcr-map-card__available-value {
	color: #253437;
	display: block;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.vcr-map-card__topline {
	align-items: flex-start;
	gap: 8px 10px;
	justify-content: space-between;
	margin-bottom: 6px;
}

.vcr-map-card__badges {
	gap: 6px;
}

.vcr-map-card__gender {
	align-items: center;
	border: 1px solid #d7dfe2;
	border-radius: 999px;
	color: #405356;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	gap: 5px;
	line-height: 1.15;
	padding: 4px 8px;
	white-space: nowrap;
}

.vcr-map-card__gender-icon {
	display: inline-flex;
	height: 16px;
	width: 16px;
}

.vcr-map-card__gender-icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

.vcr-map-card__gender--male {
	background: #eaf3ff;
	border-color: #c8daf8;
	color: #2d5ea6;
}

.vcr-map-card__gender--female {
	background: #fcebf2;
	border-color: #f2cfe0;
	color: #b04e79;
}

.vcr-map-card__gender--any,
.vcr-map-card__gender--other {
	background: #f2f4f7;
	border-color: #d9dee4;
	color: #56666d;
}

.vcr-map-card__location {
	margin-bottom: 7px;
}

.vcr-map-card__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	justify-content: space-between;
}

.vcr-map-card__price {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vcr-map-card__price-unit,
.vcr-map-card__available {
	display: none !important;
}

.vcr-map-card__price-unit-badge {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 10px;
	font-weight: 800;
	height: 22px;
	justify-content: center;
	line-height: 1;
	min-width: 22px;
	padding: 0 7px;
}

.vcr-map-card__price-unit-badge--day {
	background: #fde7df;
	color: #b55233;
}

.vcr-map-card__price-unit-badge--week {
	background: #e2f0ff;
	color: #2866a7;
}

.vcr-map-card__price-unit-badge--month {
	background: #e6f3e7;
	color: #2f6d3a;
}

.vcr-map-card__price-unit-badge--default {
	background: #eef2f4;
	color: #536367;
}

.vcr-map-card__approx {
	font-size: 10px;
	margin-left: auto;
}

@media (max-width: 900px) {
	.vcr-map-card__available-card {
		left: 8px;
		top: 8px;
	}
}

@media (max-width: 560px) {
	.vcr-map-card__available-card {
		padding: 5px 7px;
	}

	.vcr-map-card__available-label {
		font-size: 9px;
	}

	.vcr-map-card__available-value {
		font-size: 11px;
	}

	.vcr-map-card__gender {
		font-size: 10px;
		padding: 3px 7px;
	}

	.vcr-map-card__price-unit-badge {
		height: 20px;
		min-width: 20px;
	}
}


/* 1.5.65
 * 入居可能日は写真へ重ねず、カード本文の先頭に置く。
 * 性別条件の男女アイコンは別SVGで明確に表示し、料金単位は真円にする。
 */
.vcr-map-card__available-card {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	gap: 7px;
	left: auto;
	margin: 0 0 6px;
	max-width: 100%;
	padding: 0;
	position: static;
	top: auto;
}

.vcr-map-card__available-label {
	background: #e8f5f3;
	border-radius: 999px;
	color: #2d6f69;
	display: inline-flex;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
	margin: 0;
	padding: 4px 6px;
	white-space: nowrap;
}

.vcr-map-card__available-value {
	color: #354548;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.vcr-map-card__gender-icon {
	align-items: center;
	display: inline-flex;
	gap: 1px;
	height: 17px;
	width: auto;
}

.vcr-map-card__gender-icon .vcr-gender-svg {
	display: block;
	height: 17px;
	width: 17px;
}

.vcr-map-card__gender--any .vcr-gender-svg--male {
	color: #3a6da8;
}

.vcr-map-card__gender--any .vcr-gender-svg--female {
	color: #b4577b;
}

.vcr-map-card__price-unit-badge--day,
.vcr-map-card__price-unit-badge--week,
.vcr-map-card__price-unit-badge--month {
	border-radius: 50%;
	height: 22px;
	min-width: 22px;
	padding: 0;
	width: 22px;
}

@media (max-width: 560px) {
	.vcr-map-card__available-card {
		gap: 5px;
		margin-bottom: 5px;
	}

	.vcr-map-card__available-label {
		font-size: 8px;
		padding: 3px 5px;
	}

	.vcr-map-card__available-value {
		font-size: 10px;
	}

	.vcr-map-card__gender-icon .vcr-gender-svg {
		height: 15px;
		width: 15px;
	}

	.vcr-map-card__price-unit-badge--day,
	.vcr-map-card__price-unit-badge--week,
	.vcr-map-card__price-unit-badge--month {
		height: 20px;
		min-width: 20px;
		width: 20px;
	}
}


/* 1.5.66
 * 入居可能日はカード右上へ戻し、詳細ページの入居可能日と同じ配色にする。
 * 性別条件は料金行の右側に置き、ラベルを明示する。
 */
.vcr-map-card__topline {
	align-items: center;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.vcr-map-card__badges {
	flex: 1 1 auto;
}

.vcr-map-card__available-card {
	align-items: center;
	background: color-mix(in srgb, var(--color-accent, #0f8b8d) 10%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--color-accent, #0f8b8d) 34%, #d8dfde);
	border-radius: 999px;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 5px;
	margin: 0 0 0 8px;
	padding: 4px 8px;
}

.vcr-map-card__available-label {
	background: transparent;
	border-radius: 0;
	color: var(--color-accent, #0f8b8d);
	font-size: 8px;
	font-weight: 700;
	padding: 0;
}

.vcr-map-card__available-value {
	color: var(--color-accent, #0f8b8d);
	font-size: 10px;
	font-weight: 800;
}

.vcr-map-card__gender {
	gap: 4px;
	padding: 4px 7px;
}

.vcr-map-card__gender-label {
	color: #7a878b;
	font-size: 9px;
	font-weight: 700;
}

.vcr-map-card__gender-text {
	font-weight: 800;
}

@media (max-width: 560px) {
	.vcr-map-card__topline {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.vcr-map-card__available-card {
		margin-left: auto;
		padding: 3px 6px;
	}

	.vcr-map-card__available-label {
		font-size: 8px;
	}

	.vcr-map-card__available-value {
		font-size: 9px;
	}

	.vcr-map-card__gender-label {
		font-size: 8px;
	}
}


/* 1.5.67
 * 物件形態・部屋タイプは詳細ページのカテゴリチップと同じ配色へ完全統一。
 * 性別条件は3つ目の情報チップとして上段に必ず表示する。
 */
.vcr-map-card__category--type,
.vcr-map-card__category--room {
	background: color-mix(in srgb, #c53c1e 10%, var(--color-surface, #ffffff));
	border: 1px solid color-mix(in srgb, #c53c1e 38%, var(--color-divider, #d8dfde));
	border-radius: var(--radius-md, 8px);
	color: #8f2d17;
	font-weight: 750;
}

.vcr-map-card__gender {
	background: #f4f6f7;
	border: 1px solid #d8dfe2;
	border-radius: var(--radius-md, 8px);
	color: #46565b;
	font-size: 9px;
	font-weight: 700;
	padding: 3px 6px;
}

.vcr-map-card__gender-label {
	color: #758286;
	font-size: 8px;
	font-weight: 700;
}

.vcr-map-card__gender-icon {
	height: 14px;
}

.vcr-map-card__gender-icon .vcr-gender-svg {
	height: 14px;
	width: 14px;
}

.vcr-map-card__gender-text {
	font-size: 9px;
	font-weight: 800;
}

.vcr-map-card__topline {
	align-items: flex-start;
}

.vcr-map-card__badges {
	align-items: center;
}

@media (max-width: 560px) {
	.vcr-map-card__gender {
		padding: 3px 5px;
	}

	.vcr-map-card__gender-label {
		font-size: 7px;
	}

	.vcr-map-card__gender-text {
		font-size: 8px;
	}
}


/* 1.5.68
 * 物件形態 > 部屋タイプを詳細ページと同じ階層表示にする。
 * 性別条件は家賃と同じ行の右端へ配置する。
 */
.vcr-map-card__badges {
	align-items: center;
	gap: 5px;
}

.vcr-map-card__category-separator {
	align-items: center;
	color: #a3452e;
	display: inline-flex;
	flex: 0 0 auto;
	height: 14px;
	justify-content: center;
	width: 14px;
}

.vcr-map-card__category-separator svg {
	display: block;
	height: 100%;
	width: 100%;
}

.vcr-map-card__footer {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.vcr-map-card__footer .vcr-map-card__gender {
	margin-left: auto;
}

@media (max-width: 560px) {
	.vcr-map-card__category-separator {
		height: 12px;
		width: 12px;
	}

	.vcr-map-card__footer {
		gap: 6px;
	}

	.vcr-map-card__footer .vcr-map-card__gender {
		margin-left: auto;
	}
}


/* 1.5.69
 * 一覧カード: 入居可能日はラベルなしでカレンダーアイコン + 日付。
 * 性別条件は家賃行右にアイコン + テキストで表示し、title で説明を補助する。
 */
.vcr-map-card__available-card {
	align-items: center;
	background: color-mix(in srgb, var(--color-accent, #0f8b8d) 10%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--color-accent, #0f8b8d) 34%, #d8dfde);
	border-radius: 999px;
	color: var(--color-accent, #0f8b8d);
	display: inline-flex;
	gap: 6px;
	padding: 7px 12px;
}

.vcr-map-card__available-label {
	display: none !important;
}

.vcr-map-card__available-icon {
	display: inline-flex;
	flex: 0 0 auto;
	height: 16px;
	width: 16px;
}

.vcr-map-card__available-icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

.vcr-map-card__available-value {
	color: var(--color-accent, #0f8b8d);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
}

.vcr-map-card__gender {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: #46565b;
	gap: 6px;
	padding: 0;
}

.vcr-map-card__gender-label {
	display: none !important;
}

.vcr-map-card__gender-icon {
	align-items: center;
	display: inline-flex;
	height: 16px;
	justify-content: center;
	min-width: 18px;
}

.vcr-map-card__gender-icon .vcr-gender-svg {
	height: 15px;
	width: 15px;
}

.vcr-map-card__gender-text {
	color: #495a60;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

@media (max-width: 560px) {
	.vcr-map-card__available-card {
		gap: 5px;
		padding: 6px 10px;
	}
	.vcr-map-card__available-icon {
		height: 14px;
		width: 14px;
	}
	.vcr-map-card__available-value,
	.vcr-map-card__gender-text {
		font-size: 12px;
	}
	.vcr-map-card__gender-icon .vcr-gender-svg {
		height: 14px;
		width: 14px;
	}
}


/* 1.5.70 */
.vcr-map-card__features {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 0 0 9px;
}

.vcr-map-card__feature {
	align-items: center;
	color: #536367;
	display: inline-flex;
	gap: 6px;
	line-height: 1.2;
}

.vcr-map-card__feature-icon {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	min-width: 16px;
}

.vcr-map-card__feature-icon .vcr-card-feature-svg {
	display: block;
	height: 15px;
	width: 15px;
}

.vcr-map-card__feature--furniture .vcr-map-card__feature-icon {
	color: #2f6d66;
}

.vcr-map-card__feature--utilities .vcr-map-card__feature-icon {
	color: #b0742f;
}

.vcr-map-card__feature-text {
	font-size: 12px;
	font-weight: 650;
}

.vcr-map-card__price-separator {
	color: #718085;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 560px) {
	.vcr-map-card__features {
		gap: 6px 10px;
		margin-bottom: 8px;
	}

	.vcr-map-card__feature-icon .vcr-card-feature-svg {
		height: 14px;
		width: 14px;
	}

	.vcr-map-card__feature-text {
		font-size: 11px;
	}
}


/* 1.5.72
 * 家具・光熱費・性別条件を同じ行へまとめる。
 */
.vcr-map-card__meta-row {
	align-items: center;
	display: flex;
	gap: 14px;
	justify-content: space-between;
	margin: 0 0 10px;
}

.vcr-map-card__meta-row .vcr-map-card__features {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

.vcr-map-card__meta-row .vcr-map-card__gender {
	flex: 0 0 auto;
	margin-left: auto;
	white-space: nowrap;
}

.vcr-map-card__footer {
	justify-content: flex-start;
}

@media (max-width: 768px) {
	.vcr-map-card__meta-row {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.vcr-map-card__meta-row .vcr-map-card__gender {
		margin-left: 0;
	}
}


/* 1.5.73
 * 家具・光熱費・性別条件を3等分で配置する。
 * カード内部を薄いグレー線で大きく区切り、家賃を少し強調する。
 */
.vcr-map-card__meta-row {
	align-items: center;
	border-top: 1px solid #e7ebed;
	display: flex;
	gap: 0;
	justify-content: stretch;
	margin: 3px 0 0;
	padding: 8px 0;
}

.vcr-map-card__meta-row > .vcr-map-card__feature,
.vcr-map-card__meta-row > .vcr-map-card__gender {
	box-sizing: border-box;
	flex: 1 1 0;
	justify-content: center;
	margin: 0;
	min-width: 0;
	padding: 0 6px;
	white-space: nowrap;
}

.vcr-map-card__meta-row > .vcr-map-card__feature + .vcr-map-card__feature,
.vcr-map-card__meta-row > .vcr-map-card__gender {
	border-left: 1px solid #edf0f1;
}

.vcr-map-card__footer {
	border-top: 1px solid #e7ebed;
	margin-top: 0;
	padding-top: 8px;
}

.vcr-map-card__price {
	font-size: 17px;
	font-weight: 850;
}

@media (min-width: 901px) {
	.vcr-map-card__body {
		border-left: 1px solid #e7ebed;
		padding-left: 14px;
	}

	.vcr-map-card__price {
		font-size: 17px;
	}
}

@media (max-width: 900px) {
	.vcr-map-card__price {
		font-size: 16px;
	}
}

@media (max-width: 560px) {
	.vcr-map-card__meta-row {
		gap: 0;
		padding: 7px 0;
	}

	.vcr-map-card__meta-row > .vcr-map-card__feature,
	.vcr-map-card__meta-row > .vcr-map-card__gender {
		flex: 1 1 33.333%;
		padding: 0 4px;
	}

	.vcr-map-card__feature-text,
	.vcr-map-card__gender-text {
		font-size: 10px;
	}
}


/* 1.5.74
 * 家賃を画像左上へ重ねてカードの縦幅を縮める。
 * カテゴリチップと入居可能日の内側余白を少し小さくする。
 */
.vcr-map-card__category {
	padding: 3px 7px;
}

.vcr-map-card__available-card {
	gap: 5px;
	padding: 5px 9px;
}

.vcr-map-card__available-icon {
	height: 15px;
	width: 15px;
}

.vcr-map-card__media {
	position: relative;
}

.vcr-map-card__price-overlay {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(215, 222, 224, 0.95);
	border-radius: 9px;
	box-shadow: 0 3px 9px rgba(18, 32, 38, 0.12);
	display: inline-flex;
	gap: 5px;
	left: 9px;
	padding: 6px 8px;
	position: absolute;
	top: 9px;
	z-index: 2;
}

.vcr-map-card__price-overlay-value {
	color: #172326;
	font-size: 17px;
	font-weight: 850;
	line-height: 1;
}

.vcr-map-card__price-overlay .vcr-map-card__price-separator {
	font-size: 12px;
}

.vcr-map-card__price-overlay .vcr-map-card__price-unit-badge {
	height: 20px;
	min-width: 20px;
	width: 20px;
}

.vcr-map-card__meta-row {
	margin-bottom: 0;
}

.vcr-map-card__footer {
	display: none !important;
}

@media (max-width: 560px) {
	.vcr-map-card__category {
		padding: 3px 6px;
	}

	.vcr-map-card__available-card {
		padding: 4px 8px;
	}

	.vcr-map-card__price-overlay {
		left: 7px;
		padding: 5px 7px;
		top: 7px;
	}

	.vcr-map-card__price-overlay-value {
		font-size: 16px;
	}
}


/* 1.5.76
 * 画像にマウスを乗せた時は、下部の画像切替矢印を見やすくするため
 * 左上の家賃オーバーレイを一時的に薄くする。
 */
.vcr-map-card__price-overlay {
	transition: opacity 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.vcr-map-card__media:hover .vcr-map-card__price-overlay {
		opacity: 0.38;
	}
}


/* 1.5.77
 * 地図Popupを一覧カードと同じデザイン言語へ寄せる。
 * カテゴリは小さく、家具・光熱費・性別は3等分のコンパクト表示にする。
 */
.vcr-listing-popup .leaflet-popup-content {
	width: 290px !important;
}

.vcr-map-popup__media {
	position: relative;
}

.vcr-map-popup__price-overlay {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(215, 222, 224, 0.95);
	border-radius: 8px;
	box-shadow: 0 3px 9px rgba(18, 32, 38, 0.12);
	display: inline-flex;
	gap: 4px;
	left: 8px;
	padding: 5px 7px;
	position: absolute;
	top: 8px;
	transition: opacity 140ms ease;
	z-index: 3;
}

.vcr-map-popup__price-value {
	color: #172326;
	font-size: 15px;
	font-weight: 850;
	line-height: 1;
}

.vcr-map-popup__price-separator,
.vcr-map-popup__price-unit {
	color: #5f6d71;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

.vcr-map-popup__gallery-arrow {
	align-items: center;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(209, 217, 220, 0.95);
	border-radius: 999px;
	bottom: 6px;
	box-shadow: 0 2px 6px rgba(18, 32, 38, 0.10);
	color: #425355;
	cursor: pointer;
	display: inline-flex;
	height: 28px;
	justify-content: center;
	opacity: 0;
	position: absolute;
	transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
	width: 28px;
	z-index: 4;
}

.vcr-map-popup__gallery-arrow--prev {
	left: 6px;
}

.vcr-map-popup__gallery-arrow--next {
	right: 6px;
}

.vcr-map-popup__gallery-arrow svg {
	display: block;
	height: 14px;
	width: 14px;
}

.vcr-map-popup__media:hover .vcr-map-popup__gallery-arrow,
.vcr-map-popup__gallery-arrow:focus-visible {
	opacity: 1;
}

.vcr-map-popup__gallery-arrow:hover,
.vcr-map-popup__gallery-arrow:focus-visible {
	background: rgba(255, 255, 255, 0.97);
	outline: none;
	transform: scale(1.04);
}

@media (hover: hover) and (pointer: fine) {
	.vcr-map-popup__media:hover .vcr-map-popup__price-overlay {
		opacity: 0.38;
	}
}

.vcr-map-popup__body {
	padding: 9px 11px 10px;
}

.vcr-map-popup__summary {
	align-items: flex-start;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin-bottom: 6px;
	min-width: 0;
	width: 100%;
}

.vcr-map-popup__categories {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: 3px;
	min-height: 16px;
	min-width: 0;
}

.vcr-map-popup__category {
	background: color-mix(in srgb, #c53c1e 8%, #ffffff);
	border: 1px solid color-mix(in srgb, #c53c1e 26%, #e0e5e6);
	border-radius: 6px;
	color: #91402d;
	font-size: 9px;
	font-weight: 750;
	line-height: 1;
	padding: 2px 5px;
	text-transform: none;
}

.vcr-map-popup__category-separator {
	color: #aa6959;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.vcr-map-popup h3 {
	font-size: 14px;
	line-height: 1.28;
	margin: 0 0 4px;
}

.vcr-map-popup__location {
	font-size: 10.5px;
	line-height: 1.3;
	margin: 0;
}

.vcr-map-popup__compact-info {
	align-items: stretch;
	border-top: 1px solid #e7ebed;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 8px;
	padding-top: 7px;
}

.vcr-map-popup__compact-item {
	align-items: center;
	display: flex;
	gap: 5px;
	justify-content: center;
	min-width: 0;
	padding: 1px 5px;
}

.vcr-map-popup__compact-item + .vcr-map-popup__compact-item {
	border-left: 1px solid #edf0f1;
}

.vcr-map-popup__compact-icon {
	align-items: center;
	color: #536367;
	display: inline-flex;
	gap: 1px;
	justify-content: center;
	min-width: 17px;
}

.vcr-map-popup__compact-icon .vcr-card-feature-svg,
.vcr-map-popup__compact-icon .vcr-gender-svg {
	display: block;
	height: 14px;
	width: 14px;
}

.vcr-map-popup__compact-item--gender .vcr-gender-svg--male {
	color: #3a6da8;
}

.vcr-map-popup__compact-item--gender .vcr-gender-svg--female {
	color: #b4577b;
}

.vcr-map-popup__status {
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
}

.vcr-map-popup__status--yes {
	color: #3d7b52;
}

.vcr-map-popup__status--partial {
	color: #aa7728;
}

.vcr-map-popup__status--no {
	color: #9b4b44;
}

@media (hover: none), (pointer: coarse) {
	.vcr-map-popup__gallery-arrow {
		opacity: 0.88;
	}
}


/*
 * 1.6.06
 * Home一覧画像はOriginalを優先し、画像枠そのものをcoverする。
 * スマホでは写真をカード幅いっぱいに広げ、写真周辺の余白をなくす。
 */
.vcr-map-home .vcr-map-card__media {
	background: #e7ecec;
	overflow: hidden;
}

.vcr-map-home .vcr-map-card__media > img {
	display: block;
	height: 100%;
	max-height: none;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	width: 100%;
}

@media (max-width: 560px) {
	.vcr-map-home .vcr-map-card__link {
		display: block;
		padding: 0;
	}

	.vcr-map-home .vcr-map-card__media {
		aspect-ratio: 16 / 9;
		border-radius: 0;
		height: auto;
		min-height: 0;
		width: 100%;
	}

	.vcr-map-home .vcr-map-card__body {
		padding: 10px 12px 12px;
	}
}


/*
 * 1.6.07
 * HomeのPC一覧は写真周辺の余白を詰め、画像領域を広げる。
 * 1.6.06のモバイル全幅表示は変更しない。
 */
@media (min-width: 901px) {
	.vcr-map-home .vcr-map-card__link {
		gap: 10px;
		grid-template-columns: 220px minmax(0, 1fr);
		padding: 5px 8px;
	}

	.vcr-map-home .vcr-map-card__media {
		height: 128px;
	}
}


/*
 * 1.6.08
 * HomeのPC一覧は画像を左側の領域いっぱいに使う。
 * カード外周の画像側paddingをなくし、画像を行の高さいっぱいまでstretchする。
 * 1.6.06のモバイル全幅表示は変更しない。
 */
@media (min-width: 901px) {
	.vcr-map-home .vcr-map-card__link {
		gap: 0;
		grid-template-columns: 240px minmax(0, 1fr);
		padding: 0;
	}

	.vcr-map-home .vcr-map-card__media {
		align-self: stretch;
		border-radius: 0;
		height: auto;
		min-height: 142px;
	}

	.vcr-map-home .vcr-map-card__body {
		padding: 10px 12px 9px 16px;
	}
}


/*
 * 1.6.09
 * HomeのPC一覧では家具・光熱費・性別条件の情報行をカード下端へ固定する。
 * タイトルや所在地の行数が違っても、各カードの情報行の位置を揃える。
 * モバイル表示は1.6.06以降のレイアウトをそのまま維持する。
 */
@media (min-width: 901px) {
	.vcr-map-home .vcr-map-card__body {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.vcr-map-home .vcr-map-card__meta-row {
		margin-top: auto;
	}
}


/*
 * 1.6.10
 * Home一覧のタイトル下へ建物タイプ・階・広さを追加する。
 * 住所公開時は住所 + 市名、非公開時は市名だけを表示する。
 * 最下段の家具・光熱費・性別条件は1.6.09どおり下端固定を維持する。
 */
.vcr-map-home .vcr-map-card__property-line {
	align-items: center;
	color: #48575a;
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 3px 12px;
	line-height: 1.3;
	margin: 0 0 4px;
}

.vcr-map-home .vcr-map-card__building {
	font-weight: 750;
}

.vcr-map-home .vcr-map-card__area {
	color: #667376;
	font-weight: 650;
}

@media (min-width: 901px) {
	.vcr-map-home .vcr-map-card h2 {
		margin-bottom: 4px;
	}

	.vcr-map-home .vcr-map-card__property-line {
		font-size: 11.5px;
		margin-bottom: 3px;
	}

	.vcr-map-home .vcr-map-card__location {
		margin-bottom: 4px;
	}
}

@media (max-width: 560px) {
	.vcr-map-home .vcr-map-card__property-line {
		font-size: 12px;
		gap: 3px 10px;
		margin-bottom: 4px;
	}
}


/*
 * 1.6.11
 * モバイルのHome一覧画像は左右スワイプで画像切替する。
 * 縦方向のページスクロールはブラウザ標準動作へ渡す。
 */
@media (max-width: 900px) {
	.vcr-map-home .vcr-map-card__media[data-vcr-gallery] {
		touch-action: pan-y;
	}
}

/*
 * 1.6.12
 * モバイルのHome一覧画像は指の移動量に追従して実際に横へスライドする。
 * 隣の画像も同時に画面内へ入り、指を離した時に切替または元位置へ戻す。
 */
@media (max-width: 900px) {
	.vcr-map-home .vcr-map-card__media[data-vcr-gallery] > img {
		position: relative;
		z-index: 1;
		will-change: transform;
	}

	.vcr-map-home .vcr-map-card__media[data-vcr-gallery] > img.vcr-map-card__swipe-image {
		inset: 0;
		pointer-events: none;
		position: absolute;
	}
}



/*
 * 1.6.13
 * モバイル画像スワイプの描画をGPUレイヤーへ寄せ、指追従と切替アニメーションを滑らかにする。
 */
@media (max-width: 900px) {
	.vcr-map-home .vcr-map-card__media[data-vcr-gallery] > img {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		pointer-events: none;
		transform: translate3d(0, 0, 0);
		-webkit-user-drag: none;
		-webkit-user-select: none;
		user-select: none;
	}
}

/*
 * 1.6.15
 * Home地図はモバイルのみ1本指ドラッグをロックする。
 * 1本指の縦操作はページスクロール、2本指はLeafletのピンチ操作へ渡す。
 * PCの地図操作には影響させない。
 */
@media (max-width: 900px) {
	.vcr-map-canvas.vcr-map-canvas--mobile-gesture-lock {
		touch-action: pan-y pinch-zoom;
	}
}

/*
 * 1.6.19
 * 通常の家賃マーカーは白背景のまま維持し、一覧カードhover時はクラスタの緑と区別できる赤系の色へ変化させる。
 * モバイルでは1本指で地図を動かそうとした時に2本指操作の案内を一時表示する。
 */
.vcr-price-marker__label {
	background: #ffffff;
	border-color: rgba(52, 66, 71, 0.20);
	color: #344247;
}

.vcr-price-marker.is-hovered .vcr-price-marker__label {
	background: #e35166;
	border-color: #e35166;
	box-shadow: 0 0 0 4px rgba(227, 81, 102, 0.20), 0 4px 12px rgba(15, 23, 42, 0.26);
	color: #ffffff;
}

.vcr-map-gesture-hint {
	background: rgba(23, 35, 38, 0.86);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	left: 50%;
	line-height: 1.35;
	max-width: calc(100% - 48px);
	opacity: 0;
	padding: 10px 14px;
	pointer-events: none;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.16s ease;
	white-space: nowrap;
	z-index: 1200;
}

.vcr-map-gesture-hint.is-visible {
	opacity: 1;
}

@media (min-width: 901px) {
	.vcr-map-gesture-hint {
		display: none !important;
	}
}

/*
 * 1.6.39
 * 10m以内の同一地点グループ用一覧Popup。
 * 各物件をカードで囲まず、薄い区切り線だけで整理する。
 */
.vcr-location-group-popup .leaflet-popup-content {
	width: 300px !important;
}

.vcr-location-group {
	background: #ffffff;
	max-height: 310px;
	overflow-y: auto;
	padding: 2px 12px;
}

.vcr-location-group__item {
	align-items: center;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #e6ebec;
	border-radius: 0;
	box-shadow: none;
	color: #172326;
	cursor: pointer;
	display: flex;
	gap: 14px;
	justify-content: space-between;
	min-height: 58px;
	padding: 12px 2px;
	text-align: left;
	transition: background-color 120ms ease;
	width: 100%;
}

.vcr-location-group__item:last-child {
	border-bottom: 0;
}

.vcr-location-group__item:hover,
.vcr-location-group__item:focus-visible {
	background: #f8fbfb;
	box-shadow: none;
	outline: none;
	transform: none;
}

.vcr-location-group__details {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.vcr-location-group__types {
	align-items: center;
	display: flex;
	font-size: 13px;
	font-weight: 400;
	gap: 4px;
	line-height: 1.3;
	min-width: 0;
}

.vcr-location-group__type {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vcr-location-group__separator {
	color: #9aa6a8;
	flex: 0 0 auto;
}

.vcr-location-group__available {
	align-items: center;
	color: #6d7a7c;
	display: flex;
	font-size: 11px;
	gap: 5px;
	line-height: 1.2;
}

.vcr-location-group__available-icon {
	color: #869193;
	display: inline-flex;
	flex: 0 0 auto;
	height: 13px;
	width: 13px;
}

.vcr-location-group__available-icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

.vcr-location-group__available-value {
	color: #6d7a7c;
	font-weight: 500;
}

.vcr-location-group__price {
	color: var(--color-accent, #0f8b8d);
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.vcr-location-group__unit {
	color: #697678;
	font-size: 10px;
	font-weight: 600;
}

/* 地図上の通常Popupも、種類・タイプと同じ行の右側へ入居可能日を置く。 */
.vcr-map-popup__available {
	align-items: center;
	color: #68777a;
	display: flex;
	flex: 0 0 auto;
	font-size: 10.5px;
	gap: 5px;
	justify-content: flex-start;
	line-height: 1.2;
	margin-left: auto;
	text-align: left;
}

.vcr-map-popup__available-icon {
	color: #748487;
	display: inline-flex;
	flex: 0 0 auto;
	height: 13px;
	width: 13px;
}

.vcr-map-popup__available-icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

.vcr-map-popup__available-value {
	font-weight: 650;
}

@media (max-width: 900px) {
	.vcr-location-group-popup .leaflet-popup-content {
		max-width: calc(100vw - 44px);
		width: 280px !important;
	}
}

/*
 * 1.6.47
 * Homeのモバイル一覧では物件同士の境界が分かりやすいよう、
 * Facebookのフィードに近い太めのグレー区切り線をカード間だけに表示する。
 */
@media (max-width: 900px) {
	.vcr-map-card {
		border-bottom: 0;
	}

	.vcr-map-card + .vcr-map-card {
		border-top: 4px solid #aeb1b5;
	}
}

/* 1.6.78
 * 強調表示は淡いブルーの背景と1px枠で目立たせる。
 * モバイルの4pxグレー区切り線はarticleのborder-topに残す。
 * 写真と本文を含むリンクだけを外側の枠で囲み、カードの大きさは変えない。
 */
article.vcr-map-card.vcr-map-card--paid-highlight {
	position: relative;
	background: #e8f3ff;
	box-shadow: 0 2px 8px rgba(59, 105, 147, 0.09);
	z-index: 1;
}

article.vcr-map-card.vcr-map-card--paid-highlight > .vcr-map-card__link {
	position: relative;
	box-shadow: 0 0 0 1px #b8d4f0;
	z-index: 1;
}

article.vcr-map-card.vcr-map-card--paid-highlight.is-highlighted {
	background: #e1efff;
	box-shadow: 0 2px 8px rgba(59, 105, 147, 0.12);
}

/* 1.6.79: 強調表示中のタイトル前に16pxの青いキラキラを表示する。 */
.vcr-highlight-title-icon {
	color: #478bc5;
	display: inline-block;
	height: 16px;
	margin-right: 5px;
	vertical-align: -2px;
	width: 16px;
}

.vcr-highlight-title-icon svg {
	display: block;
	height: 100%;
	width: 100%;
}


/* 1.6.81
 * PCのHomeカードはすべて同じ高さに固定する。
 * 写真が縦長の場合も画像の縦横比に引っ張られてカードが伸びないようにする。
 * スマホの全幅・16:9画像レイアウトには影響させない。
 */
@media (min-width: 901px) {
	.vcr-map-home .vcr-map-card {
		height: 192px;
		min-height: 0;
	}

	.vcr-map-home .vcr-map-card__link {
		box-sizing: border-box;
		height: 100%;
		min-height: 0;
	}

	.vcr-map-home .vcr-map-card__media {
		height: 100%;
		min-height: 0;
		max-height: 100%;
	}

	.vcr-map-home .vcr-map-card__body {
		min-height: 0;
		overflow: hidden;
	}
}

/* 1.6.83: 100件単位のAjaxページング。カードの幅・縦幅には触れない。 */
.vcr-map-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	padding: 18px 12px 28px;
}
.vcr-map-pagination:empty {
	display: none;
}
.vcr-map-pagination button {
	background: #ffffff;
	border: 1px solid #cad4d8;
	border-radius: 7px;
	color: #34464f;
	cursor: pointer;
	font-size: 13px;
	min-height: 34px;
	min-width: 34px;
	padding: 6px 10px;
}
.vcr-map-pagination button.is-current {
	background: var(--color-accent, #0f8b8d);
	border-color: var(--color-accent, #0f8b8d);
	color: #ffffff;
	font-weight: 700;
}
.vcr-map-pagination button:disabled {
	cursor: default;
	opacity: 0.4;
}
.vcr-map-pagination__ellipsis {
	color: #718084;
	padding: 0 2px;
}
.vcr-map-panel__limit-note {
	background: rgba(255,255,255,0.95);
	border-radius: 6px;
	bottom: 40px;
	font-size: 11px;
	left: 10px;
	padding: 5px 9px;
	position: absolute;
	z-index: 600;
}
.vcr-map-panel__limit-note[hidden] {
	display: none;
}

/* 1.6.89: 料金単位と上限を同じ検索欄内に収める。カードと地図の寸法は変更しない。 */
.vcr-map-search__field:has(.vcr-rent-filter) {
	min-width: 0;
}

.vcr-rent-filter {
	position: relative;
	width: 100%;
}

.vcr-rent-filter__summary {
	align-items: center;
	background: #fff;
	border: 1px solid #cfd7d8;
	border-radius: 9px;
	color: #172326;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	gap: 8px;
	height: 44px;
	justify-content: space-between;
	list-style: none;
	min-width: 0;
	padding: 0 12px;
	white-space: nowrap;
}

.vcr-rent-filter__summary::-webkit-details-marker {
	display: none;
}

.vcr-rent-filter__summary > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

.vcr-rent-filter__summary:focus-visible {
	border-color: var(--color-accent, #0f8b8d);
	outline: 2px solid color-mix(in srgb, var(--color-accent, #0f8b8d) 22%, transparent);
	outline-offset: 1px;
}

.vcr-rent-filter__arrow {
	border-bottom: 1.8px solid #526064;
	border-right: 1.8px solid #526064;
	flex: none;
	height: 7px;
	margin-right: 2px;
	transform: rotate(45deg) translateY(-2px);
	width: 7px;
}

.vcr-rent-filter[open] .vcr-rent-filter__arrow {
	transform: rotate(225deg) translateY(-1px);
}

.vcr-rent-filter__panel {
	background: #fff;
	border: 1px solid #d7e0e1;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
	box-sizing: border-box;
	min-width: 270px;
	padding: 14px;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	width: max(100%, 300px);
	z-index: 90;
}

.vcr-rent-filter__units {
	border: 0;
	margin: 0 0 12px;
	min-width: 0;
	padding: 0;
}

.vcr-rent-filter__units legend,
.vcr-rent-filter__amount-label {
	color: #526064;
	display: block;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 7px;
}

.vcr-rent-filter__choices {
	background: #eef2f2;
	border-radius: 8px;
	display: grid;
	gap: 3px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: 3px;
}

.vcr-rent-filter__choice {
	cursor: pointer;
	min-width: 0;
	position: relative;
}

.vcr-rent-filter__choice input[type="radio"] {
	cursor: pointer;
	height: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
}

.vcr-rent-filter__choice span {
	border-radius: 6px;
	color: #405052;
	display: block;
	font-size: 12px;
	font-weight: 700;
	padding: 9px 2px;
	text-align: center;
	white-space: nowrap;
}

.vcr-rent-filter__choice input:checked + span {
	background: #fff;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.13);
	color: #172326;
}

.vcr-rent-filter__choice input:focus-visible + span {
	outline: 2px solid var(--color-accent, #0f8b8d);
	outline-offset: -1px;
}

.vcr-rent-filter__panel select:disabled {
	background: #f4f5f5;
	color: #909a9c;
	cursor: not-allowed;
}

@media (max-width: 560px) {
	.vcr-rent-filter__panel {
		min-width: 0;
		width: 100%;
	}
}

/* 1.6.93: 物件形態の階層は、iOSネイティブselectではなくCSSで制御する。 */
.vcr-category-filter {
	position: relative;
	width: 100%;
}

.vcr-category-filter.is-enhanced > select {
	display: none;
}

.vcr-category-filter__custom[hidden] {
	display: none;
}

.vcr-category-filter__summary {
	align-items: center;
	background: #fff;
	border: 1px solid #cfd7d8;
	border-radius: 9px;
	box-sizing: border-box;
	color: #172326;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	gap: 10px;
	height: 44px;
	justify-content: space-between;
	list-style: none;
	min-width: 0;
	padding: 0 12px;
	width: 100%;
}

.vcr-category-filter__summary::-webkit-details-marker {
	display: none;
}

.vcr-category-filter__summary > span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vcr-category-filter__summary:focus-visible {
	outline: 2px solid var(--color-accent, #0f8b8d);
	outline-offset: 2px;
}

.vcr-category-filter__arrow {
	border-bottom: 1.8px solid #526064;
	border-right: 1.8px solid #526064;
	flex: none;
	height: 7px;
	margin-right: 2px;
	transform: rotate(45deg) translateY(-2px);
	width: 7px;
}

.vcr-category-filter__custom[open] .vcr-category-filter__arrow {
	transform: rotate(225deg) translateY(-1px);
}

.vcr-category-filter__panel {
	background: #fff;
	border: 1px solid #d7e0e1;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
	box-sizing: border-box;
	left: 0;
	max-height: min(60dvh, 440px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 7px;
	position: absolute;
	top: calc(100% + 6px);
	width: 100%;
	z-index: 95;
	-webkit-overflow-scrolling: touch;
}

.vcr-category-filter__group {
	margin-top: 7px;
	padding-top: 5px;
}

.vcr-category-filter__heading {
	border-bottom: 1px solid #e5e9eb;
	color: #969fa3;
	font-size: 13px;
	font-weight: 700;
	margin: 0 10px 5px;
	padding: 9px 0 4px;
}

/* 物件形態の見出しは左揃え、選択肢は約1文字分だけインデントする。 */
.vcr-category-filter__group > .vcr-category-filter__option {
	padding-left: 22px;
}

.vcr-category-filter__option {
	background: transparent;
	border: 0;
	border-radius: 7px;
	box-sizing: border-box;
	color: #172326;
	cursor: pointer;
	display: block;
	font-size: 14px;
	min-height: 44px;
	padding: 10px 12px;
	text-align: left;
	width: 100%;
}

.vcr-category-filter__option:hover,
.vcr-category-filter__option:focus-visible {
	background: #f0f7f7;
}

.vcr-category-filter__option[aria-pressed="true"] {
	background: #e8f5f4;
	color: #087e80;
	font-weight: 700;
}

@media (max-width: 560px) {
	.vcr-category-filter__panel {
		max-height: min(55dvh, 400px);
	}
}

/* 1.7.01: 公開物件が多い上位3市の地図ズームショートカット。 */
.vcr-map-city-shortcuts {
	align-items: center;
	display: flex;
	gap: 7px;
	left: 58px;
	max-width: calc(100% - 120px);
	overflow-x: auto;
	padding: 2px 0 6px;
	pointer-events: none;
	position: absolute;
	right: 62px;
	scrollbar-width: none;
	top: 10px;
	white-space: nowrap;
	z-index: 1100;
}

.vcr-map-city-shortcuts::-webkit-scrollbar {
	display: none;
}

.vcr-map-city-shortcuts__button {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid #cbd7d8;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.13);
	color: #344c50;
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	padding: 8px 12px;
	pointer-events: auto;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.vcr-map-city-shortcuts__button:hover,
.vcr-map-city-shortcuts__button:focus-visible {
	background: #eaf8f7;
	border-color: #0f9d9b;
	color: #087f7c;
}

@media (max-width: 900px) {
	.vcr-map-city-shortcuts {
		left: 12px;
		max-width: calc(100% - 68px);
		right: 56px;
	}

	.vcr-map-city-shortcuts__button {
		font-size: 12px;
		padding: 8px 10px;
	}
}

/* 地名検索中は同じ市のボタンを連打しない。 */
.vcr-map-city-shortcuts__button:disabled {
	cursor: wait;
	opacity: 0.65;
}

/* 1.7.25: 地図マーカーは有料機能の種類に応じた色。通常の白／件数マーカーは変更しない。 */
.vcr-price-marker.vcr-marker--featured .vcr-price-marker__label {
	background: #f2c94c;
	border-color: #d9a922;
	color: #283747;
}

.vcr-price-marker.vcr-marker--highlight .vcr-price-marker__label {
	background: #347fb9;
	border-color: #286a9c;
	color: #ffffff;
}

.vcr-price-marker.vcr-marker--both .vcr-price-marker__label {
	background: #347fb9;
	border: 2px solid #f2c94c;
	color: #ffffff;
}

/* Hover時も有料マーカー本来の色を維持し、外周だけ少し強調する。 */
.vcr-price-marker.vcr-marker--featured.is-hovered .vcr-price-marker__label {
	background: #f2c94c;
	border-color: #d9a922;
	box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.30), 0 4px 12px rgba(15, 23, 42, 0.26);
	color: #283747;
}

.vcr-price-marker.vcr-marker--highlight.is-hovered .vcr-price-marker__label {
	background: #347fb9;
	border-color: #286a9c;
	box-shadow: 0 0 0 4px rgba(52, 127, 185, 0.25), 0 4px 12px rgba(15, 23, 42, 0.26);
	color: #ffffff;
}

.vcr-price-marker.vcr-marker--both.is-hovered .vcr-price-marker__label {
	background: #347fb9;
	border: 2px solid #f2c94c;
	box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.30), 0 4px 12px rgba(15, 23, 42, 0.26);
	color: #ffffff;
}

/* 同じ住所とズームアウト時の件数マーカーも、含まれる有料物件を枠色で示す。 */
.vcr-cluster-marker.vcr-marker--featured {
	background: #fff4d3;
	border-color: #d9a922;
	color: #76560a;
}

.vcr-cluster-marker.vcr-marker--highlight {
	background: #e8f3ff;
	border-color: #347fb9;
	color: #24537a;
}

.vcr-cluster-marker.vcr-marker--both {
	background: #e8f3ff;
	border-color: #d9a922;
	color: #24537a;
}

.vcr-cluster-marker.vcr-marker--featured.is-hovered span,
.vcr-cluster-marker.vcr-marker--highlight.is-hovered span,
.vcr-cluster-marker.vcr-marker--both.is-hovered span {
	background: inherit;
	box-shadow: 0 0 0 4px rgba(52, 127, 185, 0.22), 0 4px 14px rgba(15, 23, 42, 0.25);
}

.vcr-cluster-marker.vcr-marker--featured.is-hovered span,
.vcr-cluster-marker.vcr-marker--both.is-hovered span {
	box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.29), 0 4px 14px rgba(15, 23, 42, 0.25);
}

/* 同一住所の一覧は該当物件にだけ小さな注目・強調アイコンを付ける。 */
.vcr-location-group__paid-icons {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 3px;
	margin-right: 2px;
}

.vcr-location-group__paid-icon {
	display: inline-flex;
	height: 13px;
	width: 13px;
}

.vcr-location-group__paid-icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

.vcr-location-group__paid-icon--featured { color: #c99917; }
.vcr-location-group__paid-icon--highlight { color: #347fb9; }

/* 強調表示中のHomeカードと地図ポップアップのタイトルのみ濃い青に変更。 */
article.vcr-map-card.vcr-map-card--paid-highlight h2,
.vcr-map-popup h3.vcr-map-popup__title--paid-highlight {
	color: #24527b;
}

/* 1.7.64: Animate Home arrow navigation on desktop too. Mobile swipe CSS stays intact. */
@media (min-width: 901px) {
	.vcr-map-home .vcr-map-card__media[data-vcr-gallery] > img { position: relative; z-index: 1; }
	.vcr-map-home .vcr-map-card__media[data-vcr-gallery] > img.vcr-map-card__swipe-image {
		position: absolute; inset: 0; pointer-events: none;
	}
}
.vcr-map-home .vcr-map-card__media.vcr-gallery--animating > img { will-change: transform; }

/* SkyTrain network overlay; keep listing price markers visually above every transit layer. */
.vcr-skytrain-control {
	margin-top: 7px !important;
	margin-right: 10px !important;
}
.vcr-skytrain-toggle {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 35px;
	padding: 6px 10px;
	border: 1px solid #d4dce4;
	border-radius: 7px;
	background: #fff;
	color: #22384f;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 2px 7px rgb(0 0 0 / 16%);
	cursor: pointer;
}
.vcr-skytrain-toggle[aria-pressed="false"] {
	opacity: .65;
	background: #f5f6f8;
}
.vcr-skytrain-toggle__lines {
	display: flex;
	align-items: center;
	gap: 2px;
}
.vcr-skytrain-toggle__lines i {
	display: block;
	width: 4px;
	height: 15px;
	border-radius: 3px;
}
.vcr-skytrain-toggle__lines i:nth-child(1) { background: #116bb2; }
.vcr-skytrain-toggle__lines i:nth-child(2) { background: #ddaa00; }
.vcr-skytrain-toggle__lines i:nth-child(3) { background: #00a4cc; }
.vcr-skytrain-station-label {
	pointer-events: none !important;
	white-space: nowrap;
}
.vcr-skytrain-station-label span {
	display: inline-block;
	padding: 2px 5px;
	border-radius: 4px;
	border: 1px solid rgb(204 215 226 / 82%);
	background: rgb(255 255 255 / 90%);
	color: #27394b;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.15;
	box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
}
@media (max-width: 640px) {
	.vcr-skytrain-control { margin-right: 8px !important; }
	.vcr-skytrain-toggle { padding: 6px 8px; }
}

/* Home listing: enlarge furniture, utilities and gender icons/labels without changing row layout. */
.vcr-map-home .vcr-map-card__meta-row .vcr-map-card__feature-text,
.vcr-map-home .vcr-map-card__meta-row .vcr-map-card__gender-text {
	font-size: 14px;
}

.vcr-map-home .vcr-map-card__meta-row .vcr-map-card__feature-icon .vcr-card-feature-svg,
.vcr-map-home .vcr-map-card__meta-row .vcr-map-card__gender-icon .vcr-gender-svg {
	height: 18px;
	width: 18px;
}

@media (max-width: 560px) {
	.vcr-map-home .vcr-map-card__meta-row .vcr-map-card__feature-text,
	.vcr-map-home .vcr-map-card__meta-row .vcr-map-card__gender-text {
		font-size: 12px;
	}

	.vcr-map-home .vcr-map-card__meta-row .vcr-map-card__feature-icon .vcr-card-feature-svg,
	.vcr-map-home .vcr-map-card__meta-row .vcr-map-card__gender-icon .vcr-gender-svg {
		height: 17px;
		width: 17px;
	}
}