.map-wrap {
  position: relative;
}
.map-wrap svg {
  box-sizing: border-box;
  width: 80%;
  width: 100%;
  height: 100%;
}
.map-wrap .area {
  stroke: none;
  cursor: pointer;
  transition: 0.2s;
}
.map-wrap .area path {
  transition: 0.2s;
}
.map-wrap .area.hover,
.map-wrap .area:hover path {
  fill: #65BA7B;
}
.map-wrap #map-popup {
  position: absolute;
  display: none;
  padding: 1.2rem 4.8rem 1.2rem 1.6rem;
  font-size: 1.6rem;
  background: #fff;
  border: 0.2rem solid #005E3C;
  border-radius: 0.8rem;
  pointer-events: none;
}
.map-wrap #map-popup::after {
  right: 1rem;
}
.map-wrap #map-popup::before {
  position: absolute;
  content: "";
  bottom: -1.2em;
  left: 50%;
  transform: translateX(-50%);
  width: 2.4rem;
  height: 1.2rem;
  background-color: #005E3C;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.map-wrap #map-popup.top::before {
  position: absolute;
  content: "";
  top: -1.2em;
  bottom: unset;
  left: 50%;
  transform: translateX(-50%);
  width: 2.4rem;
  height: 1.2rem;
  background-color: #005E3C;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
}