.okmap{
	--okm-ink:#04384c;
	--okm-ink-2:#0b4f66;
	--okm-text:#1d2a30;
	--okm-muted:#4b5b63;
	--okm-line:#d6e0e4;
	--okm-soft:#f3f7f8;
	--okm-paper:#ffffff;
	--okm-pick:#0d6b75;
	--okm-pick-soft:#e5f2f3;
	--okm-ring:#0d6b75;
	--okm-r:16px;
	container-type:inline-size;
	position:relative;
	margin:32px 0;
	padding:24px 16px 16px;
	border:1px solid var(--okm-line);
	border-radius:var(--okm-r);
	background:linear-gradient(180deg,var(--okm-soft) 0,var(--okm-paper) 160px);
	color:var(--okm-text);
	font-size:16px;
	line-height:1.7;
	letter-spacing:.02em;
}
.okmap *,.okmap *::before,.okmap *::after{box-sizing:border-box}
.okmap p{margin:0;padding:0}
.okmap-head{margin:0 0 24px}
.okmap-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;line-height:1.3;color:var(--okm-pick);letter-spacing:.08em}
.okmap-eyebrow::before{content:"";width:24px;height:2px;background:currentColor;border-radius:2px}
.okmap .okmap-ttl{margin:8px 0 8px;font-size:22px;font-weight:700;line-height:1.4;color:var(--okm-ink);letter-spacing:.02em;font-feature-settings:"palt";text-wrap:balance;word-break:auto-phrase}
.okmap-br{display:none}
.okmap-lead{color:var(--okm-muted)}

.okmap-tools{display:grid;gap:16px;margin:0 0 16px}
.okmap-filter{display:flex;flex-wrap:wrap;gap:8px}
.okmap-chip,.okmap-nearbtn,.okmap-act{
	-webkit-appearance:none;appearance:none;
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:44px;min-width:44px;padding:8px 16px;
	border:1px solid var(--okm-line);border-radius:999px;
	background:var(--okm-paper);color:var(--okm-ink);
	font:inherit;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:.02em;
	text-decoration:none;cursor:pointer;
	transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.okmap-chip:hover,.okmap-act:hover,.okmap-nearbtn:hover{border-color:var(--okm-ink-2);box-shadow:0 1px 0 rgba(4,56,76,.08)}
.okmap-chip{padding:8px 12px 8px 16px}
.okmap-chip[aria-pressed="true"]{background:var(--okm-ink);border-color:var(--okm-ink);color:#fff}
.okmap-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--okm-soft);color:var(--okm-ink);font-size:14px;line-height:1}
.okmap-chip[aria-pressed="true"] .okmap-count{background:rgba(255,255,255,.18);color:#fff}
.okmap-near{display:grid;gap:8px;justify-items:start}
.okmap-nearbtn{border-color:var(--okm-pick);color:var(--okm-pick);background:var(--okm-paper)}
.okmap-nearbtn[aria-busy="true"]{cursor:progress;opacity:.85}
.okmap-nearbtn[aria-busy="true"] svg{animation:okm-pulse 1.2s ease-in-out infinite}
.okmap-note{font-size:14px;line-height:1.7;color:var(--okm-muted)}
:where(.okmap) :is(button,a):focus-visible{outline:3px solid var(--okm-ring);outline-offset:2px}

.okmap-body{display:grid;gap:16px}
.okmap-mapwrap{position:relative;isolation:isolate;z-index:0;border-radius:12px;overflow:hidden;border:1px solid var(--okm-line);background:#e8eef0}
.okmap-map{height:320px;width:100%}
.okmap-map:focus-visible{outline:3px solid var(--okm-ring);outline-offset:-3px}

.okmap-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:none}
.okmap .okmap-list{margin:0!important;padding:0!important;list-style:none!important}
.okmap .okmap-list>li{margin:0!important;list-style:none!important}
.okmap .okmap-list>li::before{content:none;display:none}
.okmap-item{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;padding:16px!important;border:1px solid var(--okm-line);border-radius:12px;background:var(--okm-paper);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.okmap-item[hidden]{display:none}
.okmap-item[aria-current="true"]{border-color:var(--okm-pick);background:var(--okm-pick-soft);box-shadow:inset 4px 0 0 var(--okm-pick)}
.okmap-no{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--okm-ink);color:#fff;font-weight:700;font-size:16px;line-height:1;font-variant-numeric:tabular-nums}
.okmap-item[aria-current="true"] .okmap-no{background:var(--okm-pick)}
.okmap-txt{min-width:0}
.okmap-name{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:18px;font-weight:700;line-height:1.4;color:var(--okm-ink)}
.okmap-pref{display:inline-block;padding:0 8px;border:1px solid var(--okm-line);border-radius:999px;font-size:14px;font-weight:400;line-height:1.7;color:var(--okm-muted)}
.okmap-addr{margin-top:4px!important;color:var(--okm-text);overflow-wrap:anywhere}
.okmap-dist{margin-top:4px!important;font-size:14px;font-weight:700;color:var(--okm-pick)}
.okmap-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.okmap-act{font-size:15px;padding:8px 16px}
.okmap-act[hidden]{display:none}
.okmap-act--ghost{background:transparent;border-color:transparent;color:var(--okm-ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;padding-inline:8px}
.okmap-act--ghost:hover{box-shadow:none;border-color:transparent;text-decoration-thickness:2px}

.okmap-src{display:grid;gap:8px;margin-top:24px;padding-top:16px;border-top:1px solid var(--okm-line)}
.okmap-src p{font-size:14px;line-height:1.7;color:var(--okm-muted)}
.okmap-src a{color:var(--okm-ink-2);text-underline-offset:3px}
.okmap-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}

/* 地図の点 */
.okmap .okm-pin{background:none;border:0}
.okmap .okm-pin b{display:grid;place-items:center;width:32px;height:32px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:var(--okm-ink);border:2px solid #fff;box-shadow:0 2px 6px rgba(4,56,76,.35);transition:background-color .2s ease,transform .2s ease}
.okmap .okm-pin i{transform:rotate(45deg);font-style:normal;font-weight:700;font-size:14px;line-height:1;color:#fff}
.okmap .okm-pin.is-on b{background:var(--okm-pick);transform:rotate(-45deg) scale(1.15)}
.okmap .okm-me{width:16px;height:16px;border-radius:50%;background:#1a73e8;border:3px solid #fff;box-shadow:0 0 0 6px rgba(26,115,232,.2)}
.okmap .leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 8px 24px rgba(4,56,76,.18)}
.okmap .leaflet-popup-content{margin:12px 16px;font-size:14px;line-height:1.7;color:var(--okm-text)}
.okmap .leaflet-popup-content strong{display:block;font-size:16px;color:var(--okm-ink)}
.okmap .leaflet-control-attribution{font-size:14px;line-height:1.3}
.okmap .leaflet-control-zoom a{width:44px;height:44px;line-height:44px;font-size:20px;color:var(--okm-ink)}
.okmap .leaflet-container{font:inherit}
.okmap .leaflet-container a.leaflet-popup-close-button{width:32px;height:32px;font-size:20px}

@keyframes okm-pulse{50%{opacity:.35}}

@container (min-width:560px){
	.okmap-br{display:inline}
	.okmap .okmap-ttl{font-size:24px}
	.okmap-tools{grid-template-columns:1fr auto;align-items:start}
	.okmap-near{justify-items:end;max-width:320px}
	.okmap-near .okmap-note{text-align:right}
	.okmap-list{grid-template-columns:1fr 1fr}
	.okmap-map{height:380px}
}
@container (min-width:900px){
	.okmap-body{grid-template-columns:1.2fr 1fr;align-items:start}
	.okmap-mapwrap{position:sticky;top:96px}
	.okmap-map{height:520px}
	.okmap-list{grid-template-columns:1fr}
}
@media (min-width:600px){
	.okmap{padding:32px 24px 24px}
}
@media (prefers-reduced-motion:reduce){
	.okmap *{transition:none!important;animation:none!important}
}