@charset "UTF-8";

/* ============================================================
   BIKE PARK+ 駐車場検索結果ページ
   白基調 + 黒(#16181a) + 水色(#4fa3d1 / #6bbde0)
   角はシャープに（border-radius は基本使わない）
   ============================================================ */

@font-face {
	font-family: 'N4 Techno Polaris';
	src: url('../fonts/N4_TECHNO_POLARIS.otf') format('opentype');
	font-display: swap;
}

.bps {
	--bps-white: #ffffff;
	--bps-black: #16181a;
	--bps-gray: #eef1f3;
	--bps-accent: #6bbde0;
	--bps-link: #4fa3d1;
	--bps-link-hover: #3d84ac;
	--bps-border: #dde1e5;
	--bps-border-chip: #c7ced3;
	--bps-text-sub: #8b9299;
	--bps-text-chip: #4a5058;
	--bps-font: 'Zen Kaku Gothic New', sans-serif;
	--bps-font-en: 'Inter', sans-serif;
	--bps-font-logo: 'N4 Techno Polaris', 'Inter', sans-serif;
	--bps-header-h: 64px;
	--bps-max: 1200px;

	margin: 0;
	background: var(--bps-white);
	color: var(--bps-black);
	font-family: var(--bps-font);
	font-size: 14px;
	line-height: 1.7;
}

.bps *, .bps *::before, .bps *::after { box-sizing: border-box; }
.bps button { font-family: inherit; cursor: pointer; }

/* ------------------------------------------------------------
   ヘッダー
   ------------------------------------------------------------ */

.bps-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bps-black);
	color: var(--bps-white);
}

.bps-header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: var(--bps-max);
	height: var(--bps-header-h);
	margin: 0 auto;
	padding: 0 24px;
}

.bps-logo {
	font-family: var(--bps-font-logo);
	font-size: 22px;
	letter-spacing: 0.06em;
	color: var(--bps-white);
	text-decoration: none;
	white-space: nowrap;
}

.bps-logo-mark { color: var(--bps-accent); }

/* 検索バー */

.bps-searchwrap {
	position: relative;
	flex: 1;
	max-width: 560px;
	margin: 0 auto;
}

.bps-searchbar {
	display: flex;
	align-items: center;
	margin: 0;
	background: #212428;
	border: 1px solid #3a3f45;
}

.bps-searchbar:focus-within { border-color: var(--bps-accent); }

.bps-search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	color: #a7adb3;
}

.bps-search-submit:hover { color: var(--bps-white); }

.bps-search-submit svg,
.bps-filter-toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.bps-search-input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 4px;
	background: none;
	border: none;
	color: var(--bps-white);
	font-family: inherit;
	font-size: 14px;
}

.bps-search-input::placeholder { color: #6e757c; }
.bps-search-input:focus { outline: none; }

.bps-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	border-left: 1px solid #3a3f45;
	color: #a7adb3;
}

.bps-filter-toggle:hover { color: var(--bps-white); }
.bps-filter-toggle.is-open { color: var(--bps-accent); }

/* お問い合わせボタン（白枠 → ホバーで反転） */

.bps-contact-btn {
	padding: 9px 22px;
	border: 1px solid var(--bps-white);
	color: var(--bps-white);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s, color .2s;
}

.bps-contact-btn:hover {
	background: var(--bps-white);
	color: var(--bps-black);
}

/* ------------------------------------------------------------
   絞り込みパネル（検索バー直下のドロップダウン）
   ------------------------------------------------------------ */

.bps-filter-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 110;
	max-height: 70vh;
	overflow-y: auto;
	padding: 20px;
	background: var(--bps-white);
	color: var(--bps-black);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.bps-filter-group { margin-bottom: 16px; }

.bps-filter-group-label {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--bps-text-sub);
}

.bps-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* チップ型トグル */

.bps-chip {
	padding: 6px 14px;
	background: var(--bps-white);
	border: 1px solid var(--bps-border-chip);
	color: var(--bps-text-chip);
	font-size: 12.5px;
	transition: background .15s, color .15s, border-color .15s;
}

.bps-chip:hover { border-color: var(--bps-link); color: var(--bps-link); }

.bps-chip.is-on {
	background: var(--bps-link);
	border-color: var(--bps-link);
	color: var(--bps-white);
}

.bps-filter-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--bps-border);
}

.bps-filter-clear {
	padding: 10px 20px;
	background: var(--bps-white);
	border: 1px solid var(--bps-border-chip);
	color: var(--bps-text-chip);
	font-size: 13px;
}

.bps-filter-clear:hover { border-color: var(--bps-text-chip); }

.bps-filter-apply {
	padding: 10px 28px;
	background: var(--bps-black);
	border: 1px solid var(--bps-black);
	color: var(--bps-white);
	font-size: 13px;
	font-weight: 700;
	transition: background .2s, border-color .2s;
}

.bps-filter-apply:hover {
	background: var(--bps-link);
	border-color: var(--bps-link);
}

/* ------------------------------------------------------------
   選択中の条件チップ（ヘッダー下部）
   ------------------------------------------------------------ */

.bps-chipbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	/* 背景・border は全幅のまま、中身だけ 1200px に揃える */
	padding: 8px max(24px, calc((100% - var(--bps-max)) / 2 + 24px)) 10px;
	border-top: 1px solid #2a2d30;
}

.bps-active-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px 4px 12px;
	background: var(--bps-link);
	border: none;
	color: var(--bps-white);
	font-size: 12px;
}

.bps-active-chip .bps-x {
	font-family: var(--bps-font-en);
	font-size: 13px;
	line-height: 1;
	opacity: 0.8;
}

.bps-active-chip:hover .bps-x { opacity: 1; }

.bps-chipbar-clear {
	margin-left: 4px;
	padding: 0;
	background: none;
	border: none;
	color: #a7adb3;
	font-size: 12px;
	text-decoration: underline;
}

.bps-chipbar-clear:hover { color: var(--bps-white); }

/* ------------------------------------------------------------
   メイン（リスト 6 : マップ 4）
   ------------------------------------------------------------ */

.bps-main {
	display: grid;
	grid-template-columns: 6fr 4fr;
	align-items: start;
	max-width: var(--bps-max);
	margin: 0 auto;
}

.bps-list-col {
	padding: 24px;
	background: var(--bps-white);
}

.bps-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.bps-result-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.bps-result-title .bps-count {
	font-family: var(--bps-font-en);
	font-size: 20px;
	color: var(--bps-link);
}

.bps-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.bps-sort-label { font-size: 12px; color: var(--bps-text-sub); }

.bps-sort select {
	padding: 7px 10px;
	background: var(--bps-white);
	border: 1px solid var(--bps-border-chip);
	color: var(--bps-black);
	font-family: inherit;
	font-size: 13px;
}

/* ------------------------------------------------------------
   駐車場カード
   ------------------------------------------------------------ */

.bps-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bps-card {
	display: grid;
	grid-template-columns: 220px 1fr;
	background: var(--bps-white);
	border: 1px solid var(--bps-border);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	cursor: pointer;
	transition: border-color .2s, background .2s, box-shadow .2s;
}

.bps-card:hover {
	border-color: var(--bps-accent);
	background: #f4fafd;
	box-shadow: 0 4px 16px rgba(79, 163, 209, 0.25);
}

/* 写真プレースホルダー */

.bps-card-photo {
	position: relative;
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(-45deg, #e4e8eb 0 12px, #eef1f3 12px 24px);
	color: #b9bfc6;
	font-family: var(--bps-font-en);
	font-size: 11px;
	letter-spacing: 0.2em;
}

.bps-badge-new {
	position: absolute;
	top: 0;
	left: 0;
	padding: 3px 10px;
	background: var(--bps-link);
	color: var(--bps-white);
	font-family: var(--bps-font-en);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.bps-card-body { padding: 14px 16px; }

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

.bps-card-name {
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
}

.bps-card-access {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--bps-text-sub);
}

/* 空き状況バッジ */

.bps-availability {
	flex-shrink: 0;
	padding: 3px 10px;
	border: 1px solid;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

.bps-availability--available { color: #1d8a4e; border-color: #6ec49a; background: #ecf8f1; }
.bps-availability--few       { color: #a07a1a; border-color: #d9b85c; background: #fbf5e4; }
.bps-availability--full      { color: #6b7178; border-color: #b9bfc6; background: #f1f3f5; }

/* 月額料金 */

.bps-card-price { margin: 10px 0 8px; }

.bps-card-price .bps-price-num {
	font-family: var(--bps-font-en);
	font-size: 22px;
	font-weight: 700;
	color: var(--bps-link);
}

.bps-card-price .bps-price-unit {
	margin-left: 4px;
	font-size: 12px;
	color: var(--bps-text-chip);
}

/* タグ行 */

.bps-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bps-tag {
	padding: 2px 8px;
	font-size: 11px;
	line-height: 1.6;
}

.bps-tag--type { background: var(--bps-black); color: var(--bps-white); }
.bps-tag--size { background: var(--bps-gray); color: var(--bps-text-chip); }
.bps-tag--feature { background: var(--bps-white); border: 1px solid var(--bps-border-chip); color: var(--bps-text-chip); }

/* 設備・特徴で絞り込み中、条件に該当するタグを強調 */
.bps-tag--feature.is-hit {
	background: #e3f2fb;
	border-color: var(--bps-link);
	color: var(--bps-link-hover);
	font-weight: 700;
}

/* 0件メッセージ / さらに表示 */

.bps-empty {
	margin: 60px 0;
	text-align: center;
	color: var(--bps-text-sub);
}

.bps-more-wrap { margin-top: 20px; text-align: center; }

.bps-more {
	padding: 12px 60px;
	background: var(--bps-white);
	border: 1px solid var(--bps-border-chip);
	color: var(--bps-text-chip);
	font-size: 13px;
	font-weight: 500;
	transition: border-color .2s, color .2s;
}

.bps-more:hover { border-color: var(--bps-link); color: var(--bps-link); }

/* ------------------------------------------------------------
   マップ（Google Maps embed + ダミーピンのオーバーレイ）
   ------------------------------------------------------------ */

.bps-map-col {
	position: sticky;
	top: var(--bps-header-h);
	/* リスト側と同じ24pxの余白で上端を並び替え行と揃える */
	padding: 24px 24px 24px 0;
}

.bps-map {
	position: relative;
	height: min(560px, calc(100vh - var(--bps-header-h) - 48px));
	overflow: hidden;
	background: #eef1f3;
	border: 1px solid var(--bps-border);
}

.bps-map-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.bps-map-label {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--bps-border);
	color: var(--bps-text-sub);
	font-size: 11px;
}

/* ピンのオーバーレイ層。層自体はクリックを透過し、ピンだけ受け付ける */

#bpsPins {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
}

#bpsPins .bps-pin { pointer-events: auto; }

.bps-research {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	padding: 8px 18px;
	background: var(--bps-white);
	border: 1px solid var(--bps-link);
	color: var(--bps-link);
	font-size: 12.5px;
	font-weight: 500;
	transition: background .2s, color .2s;
}

.bps-research:hover { background: var(--bps-link); color: var(--bps-white); }

/* 価格ピン */

.bps-pin {
	position: absolute;
	transform: translate(-50%, -100%);
	z-index: 10;
	padding: 0;
	background: none;
	border: none;
}

.bps-pin-label {
	display: block;
	padding: 4px 10px;
	background: var(--bps-black);
	color: var(--bps-white);
	font-family: var(--bps-font-en);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: background .15s;
}

/* 足棒 */
.bps-pin::after {
	content: '';
	display: block;
	width: 2px;
	height: 10px;
	margin: 0 auto;
	background: var(--bps-black);
	transition: background .15s;
}

.bps-pin:hover .bps-pin-label,
.bps-pin.is-active .bps-pin-label { background: var(--bps-link); }
.bps-pin:hover::after,
.bps-pin.is-active::after { background: var(--bps-link); }

.bps-pin.is-active {
	z-index: 30;
	animation: bps-pin-pulse 1.2s ease-out infinite;
}

@keyframes bps-pin-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(79, 163, 209, 0.5); }
	100% { box-shadow: 0 0 0 14px rgba(79, 163, 209, 0); }
}

/* 情報ウィンドウ（マップ下部） */

.bps-infowin {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 40;
	padding: 16px;
	background: var(--bps-white);
	border: 1px solid var(--bps-border);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.bps-infowin-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: none;
	color: var(--bps-text-sub);
	font-family: var(--bps-font-en);
	font-size: 16px;
	line-height: 1;
}

.bps-infowin-close:hover { color: var(--bps-black); }

.bps-infowin-name {
	margin: 0 24px 6px 0;
	font-size: 15px;
	font-weight: 700;
}

.bps-infowin-price {
	font-family: var(--bps-font-en);
	font-size: 19px;
	font-weight: 700;
	color: var(--bps-link);
}

.bps-infowin-price small {
	margin-left: 4px;
	font-family: var(--bps-font);
	font-size: 11.5px;
	font-weight: 400;
	color: var(--bps-text-chip);
}

.bps-infowin-meta {
	margin: 6px 0 12px;
	font-size: 12px;
	color: var(--bps-text-chip);
}

.bps-infowin-meta > div { margin-top: 2px; }

.bps-infowin-detail {
	display: inline-block;
	padding: 9px 24px;
	background: var(--bps-black);
	border: 1px solid var(--bps-black);
	color: var(--bps-white);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s, border-color .2s;
}

.bps-infowin-detail:hover { background: var(--bps-link); border-color: var(--bps-link); }

/* ------------------------------------------------------------
   フッター
   ------------------------------------------------------------ */

.bps-footer {
	padding: 36px 24px;
	background: var(--bps-black);
	color: var(--bps-white);
	text-align: center;
}

.bps-footer-logo {
	font-family: var(--bps-font-logo);
	font-size: 20px;
	letter-spacing: 0.06em;
}

.bps-copyright {
	margin-top: 10px;
	font-size: 11px;
	color: #a7adb3;
}

/* ------------------------------------------------------------
   レスポンシブ（900px以下: マップ上・リスト下の1カラム）
   ------------------------------------------------------------ */

@media (max-width: 900px) {
	.bps-header-inner {
		flex-wrap: wrap;
		height: auto;
		padding: 10px 16px;
		gap: 12px;
	}

	.bps-searchwrap { order: 3; flex-basis: 100%; max-width: none; }
	.bps-contact-btn { margin-left: auto; padding: 7px 14px; }
	.bps-chipbar { padding: 8px 16px 10px; }

	.bps-main { display: block; }

	.bps-map-col {
		position: static;
		padding: 16px 16px 0;
	}

	.bps-map { height: 40vh; }

	.bps-list-col { padding: 16px; }

	.bps-card { grid-template-columns: 1fr; }
	.bps-card-photo { min-height: 120px; }
}