@charset "UTF-8";

body {
  margin:0;
    color:var(--fg);
    font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", Helvetica, Arial;
}

header{
    position:sticky; top:0; z-index:5;
    backdrop-filter: blur(10px);
    background: linear-gradient(
        180deg,
        rgba(252, 0, 147, 0.9),
        rgba(0, 0, 0, 0.65)
    );
    border-bottom: 2px solid rgba(252, 0, 147, 0.9);
  }
  
  .wrap{
    max-width:1200px; margin:0 auto;
    padding:12px 18px;
  }
  
  .toolbar{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  }
  
  h1{
    font-size:clamp(18px, 2.6vw, 28px);
    margin:0 8px 0 0;
    color:var(--fg);
    letter-spacing:0.03em;
  }
  
  .spacer{flex:1}

#map {
  width: 640px;
  height: 480px;
  margin: 20px auto;
  margin-top: 30px;
}

img {
  width: 100%;
}

/*ふきだしの背景色変更*/
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #000;
  color: #FFF;
}