.hero__mapSection {
  width: min(calc(100vw - 30px), 1500px, 100%);
  aspect-ratio: 344 / 528;
  margin-inline: auto;
  align-self: center;
  display: grid;
  flex: 0 0 auto;
  container-type: inline-size;
  --wajima-pin-left: 32%;
  --wajima-pin-top: 20%;
  --wajima-text-left: 20.5%;
  --wajima-text-top: 8%;
  background: #13b6f2;
  border-radius: 5.814% / 3.788%;
}

.mapStage {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.mapStage__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
  transition: opacity 360ms ease, transform 420ms ease;
}

.mapStage__layer.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.mapStage.is-zoomed .mapStage__layer--overview {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.mapStage.is-zoomed .mapStage__layer--zoom {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.mapStage__image,
.mapStage__picture>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.mapStage__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.mapStage__hotspot {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 0.8cqw, 0.6rem);
  padding: clamp(0.5rem, 1cqw, 0.8rem) clamp(0.8rem, 1.6cqw, 1.2rem);
  color: #ffffff;
  font-size: clamp(0.86rem, 2.1cqw, 1rem);
  line-height: 1.2;
  white-space: nowrap;
  font-weight: 400;
  /* 変化を0.5秒かけてスムーズにする*/
  transition: all 0.3s;
}

.mapStage__hotspot::before,
.mapStage__labelText::after {
  content: "";
  position: relative;
  /* top: 1px; */
  flex: 0 0 auto;
  width: clamp(8px, 1.2cqw, 10px);
  height: clamp(8px, 1.2cqw, 10px);
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.mapStage__hotspot::before {
  transform: rotate(-135deg);
}

.mapStage__hotspot:hover,
.mapStage__hotspot:focus-visible {
  color: #ffffffc3;
}

.mapStage__labelPin {
  position: absolute;
  left: var(--wajima-pin-left);
  top: var(--wajima-pin-top);
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mapStage__labelPinIcon {
  position: absolute;
  inset: 0;
  width: clamp(1.5rem, 4cqw, 2.8rem);
  height: auto;
}

.mapStage__labelText {
  position: absolute;
  left: var(--wajima-text-left);
  top: var(--wajima-text-top);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: clamp(100px, 16cqw, 146px);
  height: clamp(30px, 5cqw, 2.75rem);
  padding: 0 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-size: clamp(0.86rem, 2.2cqw, 1rem);
  line-height: 1.2;
  white-space: nowrap;
  font-weight: 700;
  /* 変化を0.5秒かけてスムーズにする*/
  transition: all 0.3s;
}

.mapStage__labelText::after {
  transform: rotate(45deg);
}

.mapStage__labelText:hover,
.mapStage__labelText:focus-visible {
  background: var(--accent);
  color: var(--surface);
}

.mapStage__labelPin:focus-visible,
.mapStage__labelText:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
}

.mapStage__points {
  position: absolute;
  inset: 0;
  font-weight: 700;
}

.mapPoint {
  --pointer-length: var(--pointer-sp-length);
  --pointer-attach: var(--pointer-sp-attach);
  --pointer-shift: var(--pointer-sp-shift);
  --pointer-dot-size: 20px;
  --pointer-line-width: 1px;
  position: absolute;
  left: var(--map-sp-x);
  top: var(--map-sp-y);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #003c84;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: clamp(14px, calc(0.4vw + 12.5px), 16px);
  line-height: 1.2;
  white-space: nowrap;
  /* 変化を0.5秒かけてスムーズにする*/
  transition: all 0.3s;
}

.mapPoint::before,
.mapPoint::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  background: var(--accent);
}

.mapPoint::after {
  width: var(--pointer-dot-size);
  height: var(--pointer-dot-size);
  border-radius: 50%;
}

.mapPoint[data-pointer-sp="down"] {
  transform: translate(var(--pointer-shift), calc(-100% - var(--pointer-length)));
}

.mapPoint[data-pointer-sp="down"]::before {
  right: auto;
  bottom: auto;
  left: var(--pointer-attach);
  top: 100%;
  width: var(--pointer-line-width);
  height: var(--pointer-length);
  transform: translateX(-50%);
}

.mapPoint[data-pointer-sp="down"]::after {
  right: auto;
  bottom: auto;
  left: var(--pointer-attach);
  top: calc(100% + var(--pointer-length));
  transform: translate(-50%, -50%);
}

.mapPoint[data-pointer-sp="up"] {
  transform: translate(var(--pointer-shift), var(--pointer-length));
}

.mapPoint[data-pointer-sp="up"]::before {
  right: auto;
  bottom: 100%;
  left: var(--pointer-attach);
  top: auto;
  width: var(--pointer-line-width);
  height: var(--pointer-length);
  transform: translateX(-50%);
}

.mapPoint[data-pointer-sp="up"]::after {
  right: auto;
  bottom: calc(100% + var(--pointer-length));
  left: var(--pointer-attach);
  top: auto;
  transform: translate(-50%, 50%);
}

.mapPoint:focus-visible,
/*選択中も現在のホバー色を維持*/
.mapPoint.is-selected {
  background: var(--accent);
  color: var(--surface);
}

/* PCなどホバー可能な端末 */
@media (hover: hover) and (pointer: fine) {
  .mapPoint:hover {
    background: var(--accent);
    color: var(--surface);
  }
}

/* スマホなどタッチ操作の端末 */
@media (hover: none) and (pointer: coarse) {
  .mapPoint {
    -webkit-tap-highlight-color: transparent;
  }

  .mapPoint:active {
    background: var(--accent);
    color: var(--surface);
  }
}

@media (min-width: 720px) {
  .hero__mapSection {
    border-radius: 3% / 5.114%;
  }

  .mapPoint {
    --pointer-length: var(--pointer-pc-length);
    --pointer-attach: var(--pointer-pc-attach);
    --pointer-shift: var(--pointer-pc-shift);
    left: var(--map-pc-x);
    top: var(--map-pc-y);
    height: 44px;
    padding-inline: 22px;
  }

  .mapPoint[data-pointer-pc="down"] {
    transform: translate(var(--pointer-shift), calc(-100% - var(--pointer-length)));
  }

  .mapPoint[data-pointer-pc="down"]::before {
    right: auto;
    bottom: auto;
    left: var(--pointer-attach);
    top: 100%;
    width: var(--pointer-line-width);
    height: var(--pointer-length);
    transform: translateX(-50%);
  }

  .mapPoint[data-pointer-pc="down"]::after {
    right: auto;
    bottom: auto;
    left: var(--pointer-attach);
    top: calc(100% + var(--pointer-length));
    transform: translate(-50%, -50%);
  }

  .mapPoint[data-pointer-pc="up"] {
    transform: translate(var(--pointer-shift), var(--pointer-length));
  }

  .mapPoint[data-pointer-pc="up"]::before {
    right: auto;
    bottom: 100%;
    left: var(--pointer-attach);
    top: auto;
    width: var(--pointer-line-width);
    height: var(--pointer-length);
    transform: translateX(-50%);
  }

  .mapPoint[data-pointer-pc="up"]::after {
    right: auto;
    bottom: calc(100% + var(--pointer-length));
    left: var(--pointer-attach);
    top: auto;
    transform: translate(-50%, 50%);
  }

  .mapPoint[data-pointer-pc="left"] {
    transform: translate(var(--pointer-length), var(--pointer-shift));
  }

  .mapPoint[data-pointer-pc="left"]::before {
    right: 100%;
    bottom: auto;
    left: auto;
    top: var(--pointer-attach);
    width: var(--pointer-length);
    height: var(--pointer-line-width);
    transform: translateY(-50%);
  }

  .mapPoint[data-pointer-pc="left"]::after {
    right: calc(100% + var(--pointer-length));
    bottom: auto;
    left: auto;
    top: var(--pointer-attach);
    transform: translate(50%, -50%);
  }

  .hero__mapSection {
    /* calc(100vw - 30px) が親要素の幅を超える場合あり。mapStage 全体が横方向に少しはみ出していた。
    100% を追加すると、min() が親要素の幅を上限として使うため、左右が均等になる。 */
    width: min(calc(100vw - 30px), 1200px, 100%);
    aspect-ratio: 1200 / 704;
    --wajima-pin-left: 37.2%;
    --wajima-pin-top: 24.3%;
    --wajima-text-left: 32.9%;
    --wajima-text-top: 11.7%;
  }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .mapPoint {
    --pointer-length: var(--pointer-tablet-length);
    --pointer-attach: var(--pointer-tablet-attach);
    --pointer-shift: var(--pointer-tablet-shift);
    --pointer-dot-size: 14px;
    left: var(--map-tablet-x);
    top: var(--map-tablet-y);
    height: 32px;
    padding-inline: 12px;
    font-size: 14px;
  }

  .mapPoint[data-pointer-tablet="down"] {
    transform: translate(var(--pointer-shift), calc(-100% - var(--pointer-length)));
  }

  .mapPoint[data-pointer-tablet="down"]::before {
    right: auto;
    bottom: auto;
    left: var(--pointer-attach);
    top: 100%;
    width: var(--pointer-line-width);
    height: var(--pointer-length);
    transform: translateX(-50%);
  }

  .mapPoint[data-pointer-tablet="down"]::after {
    right: auto;
    bottom: auto;
    left: var(--pointer-attach);
    top: calc(100% + var(--pointer-length));
    transform: translate(-50%, -50%);
  }

  .mapPoint[data-pointer-tablet="up"] {
    transform: translate(var(--pointer-shift), var(--pointer-length));
  }

  .mapPoint[data-pointer-tablet="up"]::before {
    right: auto;
    bottom: 100%;
    left: var(--pointer-attach);
    top: auto;
    width: var(--pointer-line-width);
    height: var(--pointer-length);
    transform: translateX(-50%);
  }

  .mapPoint[data-pointer-tablet="up"]::after {
    right: auto;
    bottom: calc(100% + var(--pointer-length));
    left: var(--pointer-attach);
    top: auto;
    transform: translate(-50%, 50%);
  }

  .mapPoint[data-pointer-tablet="left"] {
    transform: translate(var(--pointer-length), var(--pointer-shift));
  }

  .mapPoint[data-pointer-tablet="left"]::before {
    right: 100%;
    bottom: auto;
    left: auto;
    top: var(--pointer-attach);
    width: var(--pointer-length);
    height: var(--pointer-line-width);
    transform: translateY(-50%);
  }

  .mapPoint[data-pointer-tablet="left"]::after {
    right: calc(100% + var(--pointer-length));
    bottom: auto;
    left: auto;
    top: var(--pointer-attach);
    transform: translate(50%, -50%);
  }
}