/* DEKIDESIGN の地図。差し色は --ddmap-accent（本体の印と同じ色）。
   枠の縦横の比は、静止画と同じ（--ddmap-ar-pc / --ddmap-ar-sp）。 */
.ddmap { margin: 0; --ddmap-accent: #26808B; --ddmap-ink: #4A4A46; --ddmap-mute: #8C8C86;
  --ddmap-line: #DADAD4; --ddmap-paper: rgba(255,255,255,.92); --ddmap-earth: #F2F2EF;
  --ddmap-ease: cubic-bezier(.33,0,.15,1); }
.ddmap[data-theme="dark"] { --ddmap-ink: #D6D6D6; --ddmap-mute: #8A8A8A; --ddmap-line: #2E2E2E;
  --ddmap-paper: rgba(18,18,18,.88); --ddmap-earth: #121212; }
.ddmap__frame { position: relative; overflow: hidden; aspect-ratio: var(--ddmap-ar-pc, 15 / 8);
  background: var(--ddmap-earth); }
@media (max-width: 767px) { .ddmap__frame { aspect-ratio: var(--ddmap-ar-sp, 3 / 4); } }
.ddmap__still, .ddmap__still img { display: block; width: 100%; height: 100%; }
.ddmap__still img { object-fit: cover; object-position: 50% 50%; }
.ddmap__map { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ddmap-ease); }
.ddmap.is-live .ddmap__map { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ddmap__map { transition: none; } }

/* 字は地図でもサイトの書体 */
.ddmap .maplibregl-map { font: inherit; }

/* ＋−のボタン：細い線の小さな四角。触れると差し色に */
.ddmap .maplibregl-ctrl-bottom-right { margin: 0 14px 14px 0; }
.ddmap .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0; }
.ddmap .maplibregl-ctrl-group { background: var(--ddmap-paper); border: 1px solid var(--ddmap-line);
  border-radius: 2px; box-shadow: none; }
.ddmap .maplibregl-ctrl-group button { width: 32px; height: 32px; position: relative; }
.ddmap .maplibregl-ctrl-group button + button { border-top: 1px solid var(--ddmap-line); }
.ddmap .maplibregl-ctrl-group button .maplibregl-ctrl-icon { background-image: none !important; }
.ddmap .maplibregl-ctrl-group button .maplibregl-ctrl-icon::before,
.ddmap .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1px; margin: -.5px 0 0 -5px; background: var(--ddmap-ink); transition: background-color .5s var(--ddmap-ease); }
.ddmap .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::after { width: 1px; height: 10px; margin: -5px 0 0 -.5px; }
.ddmap .maplibregl-ctrl-group button:focus-visible { outline: 2px solid var(--ddmap-accent); outline-offset: -2px; box-shadow: none; }
.ddmap .maplibregl-ctrl-group button:disabled .maplibregl-ctrl-icon::before,
.ddmap .maplibregl-ctrl-group button:disabled .maplibregl-ctrl-icon::after { background: var(--ddmap-line); }
@media (hover: hover) {
  .ddmap .maplibregl-ctrl-group button:not(:disabled):hover { background-color: transparent; }
  .ddmap .maplibregl-ctrl-group button:not(:disabled):hover .maplibregl-ctrl-icon::before,
  .ddmap .maplibregl-ctrl-group button:not(:disabled):hover .maplibregl-ctrl-icon::after { background: var(--ddmap-accent); }
}

/* 出典（© OpenStreetMap）：隅に小さく */
.ddmap .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib { margin: 0; padding: 3px 8px; background: var(--ddmap-paper);
  font-size: 10px; line-height: 1.4; letter-spacing: .06em; color: var(--ddmap-mute); }
.ddmap .maplibregl-ctrl-attrib a { color: inherit; text-decoration: none; transition: color .5s var(--ddmap-ease); }
@media (hover: hover) { .ddmap .maplibregl-ctrl-attrib a:hover { color: var(--ddmap-accent); text-decoration: none; } }
.ddmap .maplibregl-ctrl-logo { display: none !important; }

/* ホイールで拡大しないときの案内：白（黒）を薄くかけて、小さな字で */
.ddmap .maplibregl-cooperative-gesture-screen { background: var(--ddmap-paper); color: var(--ddmap-ink);
  font-size: 13px; letter-spacing: .08em; padding: 1em; transition: opacity .5s var(--ddmap-ease) 0s; }
.ddmap .maplibregl-cooperative-gesture-screen.maplibregl-show { opacity: .94; transition: opacity .25s var(--ddmap-ease); }
@media (prefers-reduced-motion: reduce) { .ddmap .maplibregl-cooperative-gesture-screen { transition: none !important; } }

/* 下の文字のリンク（道順は Google マップで） */
.ddmap__foot { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline;
  font-size: 13px; letter-spacing: .08em; color: var(--ddmap-mute); }
.ddmap__gmap { position: relative; color: var(--ddmap-ink); text-decoration: none; padding-bottom: 3px;
  transition: color .5s var(--ddmap-ease); }
.ddmap__gmap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  opacity: .45; transform-origin: left center; transition: transform .5s var(--ddmap-ease), opacity .5s var(--ddmap-ease); }
.ddmap__gmap span { display: inline-block; margin-left: .5em; transition: transform .5s var(--ddmap-ease); }
@media (hover: hover) {
  .ddmap__gmap:hover { color: var(--ddmap-accent); }
  .ddmap__gmap:hover::after { opacity: 1; }
  .ddmap__gmap:hover span { transform: translate(2px, -2px); }
}
.ddmap__gmap:focus-visible { outline: 2px solid var(--ddmap-accent); outline-offset: 3px; }