/* 白パラのホテル選び。色は既存のデザイン設定に追従する。 */
.hp-shiropara .sp-local-map { position:relative; min-width:0; margin:0 0 16px; scroll-margin-top:100px; }
.hp-shiropara .sp-local-map__canvas { height:380px; width:100%; border-radius:16px; z-index:0; background:var(--sp-hotel-bg2); font-family:inherit; }
.hp-shiropara .sp-local-map__canvas[hidden] { display:none; }
.hp-shiropara .sp-local-map__status { font-size:12px; margin:8px 0; color:var(--sp-text); }
.hp-shiropara .sp-local-map .leaflet-popup-content-wrapper,.hp-shiropara .sp-local-map .leaflet-popup-tip { background:var(--sp-hotel-bg); color:var(--sp-text); }
.hp-shiropara .sp-local-map .leaflet-control a { background:var(--sp-hotel-bg); color:var(--sp-text); }
.hp-shiropara .sp-local-map .leaflet-control-attribution { background:var(--sp-hotel-bg); color:var(--sp-text); }
.hp-shiropara .sp-local-map .leaflet-control-attribution a { color:var(--sp-link); }
.hp-shiropara .sp-shop-pin__body { width:104px; height:60px; box-sizing:border-box; padding:7px; display:flex; align-items:center; justify-content:center; background:var(--sp-hotel-bg); border:3px solid var(--sp-link); border-radius:12px; color:var(--sp-text); text-align:center; font-weight:bold; font-size:11px; }
.hp-shiropara .sp-shop-pin__body::after { content:''; position:absolute; left:44px; bottom:-5px; border:8px solid transparent; border-top-color:var(--sp-link); border-bottom:0; }
.hp-shiropara .sp-shop-pin img { width:100%; height:100%; object-fit:contain; }
.hp-shiropara .sp-hotel-pin { background:var(--sp-brown); color:var(--sp-heading-text); border:2px solid var(--sp-hotel-bg); border-radius:50% 50% 50% 0; transform-origin:center; box-sizing:border-box; text-align:center; line-height:26px; font-weight:bold; font-size:12px; }
.hp-shiropara .sp-hotel-pin:focus-visible,.hp-shiropara .sp-shop-pin:focus-visible { outline:3px solid var(--sp-link); outline-offset:4px; }
.hp-shiropara .sp-map-popup { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:220px; max-width:100%; }
.hp-shiropara .sp-map-popup strong { grid-column:1/-1; font-size:14px; padding-right:12px; overflow-wrap:anywhere; }
.hp-shiropara .sp-map-popup p { grid-column:1/-1; margin:0; font-size:13px; }
.hp-shiropara .sp-access__actions { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.hp-shiropara .sp-map-button { display:inline-flex; justify-content:center; align-items:center; min-height:40px; padding:8px 12px; box-sizing:border-box; border:1px solid var(--sp-link); border-radius:9px; color:var(--sp-link); background:var(--sp-hotel-bg); font-size:13px; line-height:1.4; text-decoration:none; text-align:center; }
.hp-shiropara .sp-map-button--primary { color:var(--sp-heading-text); background:var(--sp-brown); }
.hp-shiropara .sp-map-button:hover { text-decoration:underline; }
.hp-shiropara .sp-hotel-finder { margin:30px 0; color:var(--sp-text); }
.hp-shiropara .sp-hotel-finder__heading { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.hp-shiropara .sp-hotel-finder__heading .sp-h4 { margin-bottom:0; }
.hp-shiropara .sp-hotel-finder__heading>span { font-size:12px; color:var(--sp-hotel-no); }
.hp-shiropara .sp-hotel-finder__intro { margin:12px 0 18px; font-size:14px; }
.hp-shiropara .sp-hotel-finder__toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:16px; border-radius:12px; background:var(--sp-hotel-bg2); font-size:14px; }
.hp-shiropara .sp-hotel-finder__toolbar[hidden] { display:none; }
.hp-shiropara .sp-hotel-finder select { flex:1; min-width:0; max-width:100%; padding:10px 30px 10px 12px; border:1px solid var(--sp-hotel-no); border-radius:8px; background:var(--sp-hotel-bg); color:var(--sp-text); font:inherit; font-size:16px; }
.hp-shiropara .sp-hotel-finder select[hidden],.hp-shiropara .sp-hotel-finder__toolbar label[hidden] { display:none; }
.hp-shiropara .sp-hotel-finder__luxury { display:flex; align-items:center; gap:6px; cursor:pointer; }
.hp-shiropara .sp-hotel-finder__luxury input { width:18px; height:18px; accent-color:var(--sp-link); }
.hp-shiropara .sp-hotel-finder__help { font-size:12px; margin:12px 0; }
.hp-shiropara .sp-hotel-finder__status { font-size:13px; margin:16px 0; }
.hp-shiropara .sp-hotel-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hp-shiropara .sp-hotel-card { min-width:0; padding:18px; border:1px solid var(--sp-course-sub); border-radius:14px; background:var(--sp-hotel-bg); overflow-wrap:anywhere; }
.hp-shiropara .sp-hotel-card[hidden] { display:none; }
.hp-shiropara .sp-hotel-card__area { display:table; margin:0 0 12px; padding:5px 10px; border:1px solid currentColor; border-radius:6px; color:var(--sp-text); background:var(--sp-hotel-bg2); font-size:13px; font-weight:bold; }
.hp-shiropara .sp-hotel-card.is-selected { outline:2px solid var(--sp-link); outline-offset:1px; }
.hp-shiropara .sp-hotel-card__heading { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.hp-shiropara .sp-hotel-card h4 { margin:0; font-size:16px; flex:1; min-width:0; }
.hp-shiropara .sp-hotel-card h4 a { color:var(--sp-text); text-decoration:underline; text-underline-offset:3px; }
.hp-shiropara .sp-hotel-card__number { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--sp-hotel-bg2); color:var(--sp-hotel-no); font-size:12px; font-weight:bold; }
.hp-shiropara .sp-hotel-card__badge { font-size:11px; color:var(--sp-link); }
.hp-shiropara .sp-hotel-card__price { margin:16px 0 5px; color:var(--sp-brown); font-weight:bold; font-size:19px; }
.hp-shiropara .sp-hotel-price__duration { display:block; margin-bottom:3px; font-size:12px; font-weight:normal; }
.hp-shiropara .sp-hotel-price__amount { display:block; font-weight:bold; }
.hp-shiropara .sp-hotel-card__detail { margin:5px 0; font-size:12px; }
.hp-shiropara .sp-hotel-card__distance { margin:8px 0; font-size:13px; font-weight:bold; }
.hp-shiropara .sp-hotel-card__distance:empty { display:none; }
.hp-shiropara .sp-hotel-card__actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.hp-shiropara .sp-hotel-card__actions a { flex:1 1 auto; }
@media(max-width:600px) {
    .hp-shiropara .sp-local-map__canvas { height:320px; }
    .hp-shiropara .sp-hotel-cards { grid-template-columns:minmax(0,1fr); }
    .hp-shiropara .sp-hotel-finder__toolbar { gap:10px; padding:12px; }
    .hp-shiropara .sp-hotel-finder__toolbar>label:first-child { width:100%; }
    .hp-shiropara .sp-hotel-finder select { flex-basis:100%; width:100%; }
}

.hp-shiropara .sp-hotel-finder__luxury[hidden] { display:none; }

.hp-shiropara .sp-map-popup .sp-map-button { min-height:34px; padding:6px; font-size:12px; }
.hp-shiropara .sp-local-map .leaflet-popup-content { margin:14px; }
.hp-shiropara .sp-hotel-pin.is-selected { background:var(--sp-link); color:var(--sp-heading-text); border:3px solid var(--sp-brown); line-height:38px; font-size:17px; }
.hp-shiropara .sp-map-tools { display:flex; justify-content:flex-end; margin:10px 0; }
.hp-shiropara .sp-map-tools button { cursor:pointer; font-family:inherit; }
.hp-shiropara .sp-map-tools button[hidden] { display:none; }
/* 座標が未登録のカードは、色と文字の両方で区別する。配色はデザイン設定から変更できる。 */
.hp-shiropara .sp-hotel-card--unlocated {
    --sp-hotel-bg:var(--sp-hotel-unlocated-bg);
    --sp-text:var(--sp-hotel-unlocated-text);
    --sp-brown:var(--sp-hotel-unlocated-text);
    background:var(--sp-hotel-unlocated-bg);
    color:var(--sp-hotel-unlocated-text);
    border-color:var(--sp-hotel-unlocated-text);
}
.hp-shiropara .sp-hotel-card--unlocated .sp-map-button--primary,
.hp-shiropara .sp-hotel-card--unlocated .sp-hotel-card__number { background:var(--sp-hotel-unlocated-text); color:var(--sp-hotel-unlocated-bg); }
.hp-shiropara .sp-hotel-card__location-badge { padding:3px 7px; border:1px solid var(--sp-hotel-unlocated-text); border-radius:6px; color:var(--sp-hotel-unlocated-text); font-size:11px; }