/* Geographic source artwork and real destination photos. */
.area-map{--map-ink:#27496E;--map-accent:#3677BE;--map-border:#CCD9E9;--map-dot:#EDB853;padding:0;overflow:hidden;border:1px solid var(--map-border)}
html[data-hero-theme="halloween"] .area-map{--map-ink:#442252;--map-accent:#724497;--map-border:#DBCBE5;padding:0}
.area-map-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.area-map-title{position:absolute;z-index:1;left:24px;top:24px;display:flex;flex-direction:column;gap:5px;color:var(--map-ink)}
.area-map-title span{font-family:var(--font-eyebrow);font-size:15px;letter-spacing:.16em}
.area-map-title b{font-size:17px}
.area-map .pin{position:absolute;z-index:2;left:var(--x);top:var(--y);transform:translate(-19px,-50%);display:flex;align-items:center;gap:10px;min-height:48px;padding:8px;border:0;border-radius:12px;background:transparent;color:var(--map-ink);box-shadow:none;text-align:left}
.area-map .pin--left{flex-direction:row-reverse;transform:translate(calc(-100% + 19px),-50%);text-align:right}
.area-map .pin-dot{width:22px;height:22px;border:3px solid #fff;border-radius:50%;background:var(--map-dot);box-shadow:0 2px 6px rgba(60,30,85,.14);flex:none;transition:background .18s,box-shadow .18s}
.area-map .pin-label{display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.area-map .pin-label b{font-size:16px;line-height:1.3;font-weight:700}
.area-map .pin-label small{font-size:12px;line-height:1.4;color:#756481}
.area-map .pin-label{text-shadow:0 1px 2px rgba(255,255,255,.65)}
.area-map .pin.on,.area-map .pin:hover{background:transparent;color:var(--map-ink);box-shadow:none}
.area-map .pin.on .pin-dot,.area-map .pin:hover .pin-dot{background:var(--map-accent);box-shadow:0 0 0 5px rgba(123,78,163,.12),0 2px 8px rgba(60,30,85,.12)}
.area-map .pin:focus-visible{outline:3px solid var(--map-accent);outline-offset:3px}
.area-map-note{position:absolute;bottom:11px;left:16px;right:16px;text-align:right;font-size:11px;color:#786487;pointer-events:none}
.area-list .th{width:100px;height:76px;border-radius:11px;box-shadow:none;object-fit:cover}
.area-list .th,.area-banner img[src*="/img/areas/area-"]{object-position:50% 50%}
.area-list a{grid-template-columns:34px 100px minmax(0,1fr) auto;gap:14px}
html[data-hero-theme="halloween"] .area-list a{grid-template-columns:34px 100px minmax(0,1fr) auto;gap:14px}
.area-banner img{width:184px;height:120px;object-fit:cover}
.area-photo-credits{font-size:12px;color:#74617D;margin-top:18px;line-height:1.7}
.area-photo-credits summary{width:fit-content;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.area-photo-credits ul{margin:8px 0 0;padding-left:18px;display:grid;gap:5px}
.area-photo-credits a{text-decoration:underline;text-underline-offset:2px}
footer .area-photo-credits{color:#D3C7DE;padding:14px 0 20px;margin-top:0}
@media(max-width:560px){
  .area-map-title{left:18px;top:16px;gap:2px}
  .area-map-title span{font-size:12px}
  .area-map-title b{font-size:14px}
  .area-map .pin{min-height:44px;padding:6px;gap:7px;transform:translate(-16px,-50%)}
  .area-map .pin--left{transform:translate(calc(-100% + 16px),-50%)}
  .area-map .pin-dot{width:20px;height:20px}
  .area-map .pin-label b{font-size:14px}
  .area-map .pin-label small{font-size:11px}
  .area-map-note{font-size:10px;bottom:8px}
  .area-map .pin--ishigaki,.area-map .pin--miyako{top:84%}
  .area-list .th{width:80px;height:62px}
  .area-list a,html[data-hero-theme="halloween"] .area-list a{grid-template-columns:22px 80px minmax(0,1fr) auto;gap:9px}
  .area-banner img,html[data-hero-theme="halloween"] .area-banner img{width:112px;height:84px}
}
@media(max-width:360px){
  .area-map .pin--ishigaki,.area-map .pin--miyako{top:82.5%}
  .area-map-title span{font-size:11px}
  .area-map-title b{font-size:13px}
  .area-list .th{width:70px;height:58px}
  .area-list a,html[data-hero-theme="halloween"] .area-list a{grid-template-columns:18px 70px minmax(0,1fr) auto;gap:7px}
  .area-list .no{font-size:20px}
  .area-list .num{font-size:18px}
  .area-list .num span{display:block;font-size:10px;margin:0}
}