.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  padding: 24px;
}
.modal-overlay.is-open {
  display: flex;
}

.modal {
  position: relative;
  overflow: scroll;
  max-height: 420px;
}
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: var(--color-red);
  color: var(--color-white);
  font-weight: bold;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    cursor: pointer;
  }
}

.modal h2 {
  font-size: var(--fs-l);
  text-align: center;
  margin-bottom: var(--space-ms);
}
.modal dl {
  list-style: none;
  display: flex;
  align-items: stretch;
  border-top: 2px dotted var(--color-line);
  padding: var(--space-s) 0;
  &:last-child {
    border-bottom: 2px dotted var(--color-line);
  }
  dt {
    font-weight: bold;
    color: var(--color-red);
    font-size: var(--fs-m);
    width: 15%;
    text-align: center;
  }
  dd {
    font-size: var(--fs-m);
    width: 85%;
    ul {
      list-style: none;
      li {
        display: block;
        margin-right: 0.5rem;
      }
    }
  }
}

/* 北海道 */
#modal-hokkaido {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
  cursor: pointer;
}
#modal-hokkaido.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal-hokkaido .modal {
  width: min(520px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
  cursor: default;
}
#modal-hokkaido.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}

/* 東北 */
#modal-tohoku {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
  cursor: pointer;
}
#modal-tohoku.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal-tohoku .modal {
  width: min(520px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
  cursor: default;
}
#modal-tohoku.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}

/* 関東 */
#modal-kanto {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
  cursor: pointer;
}
#modal-kanto.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal-kanto .modal {
  width: min(520px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
  cursor: default;
}
#modal-kanto.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}

/* 中部 */
#modal-chubu {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
  cursor: pointer;
}
#modal-chubu.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal-chubu .modal {
  width: min(520px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
  cursor: default;
}
#modal-chubu.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}

/* 近畿 */
#modal-kinki {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
  cursor: pointer;
}
#modal-kinki.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal-kinki .modal {
  width: min(520px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
  cursor: default;
}
#modal-kinki.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}

/* 中四国 */
#modal-chu-shikoku {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
  cursor: pointer;
}
#modal-chu-shikoku.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal-chu-shikoku .modal {
  width: min(520px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
  cursor: default;
}
#modal-chu-shikoku.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}

/* 九州 */
#modal-kyusyu {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
  cursor: pointer;
}
#modal-kyusyu.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal-kyusyu .modal {
  width: min(520px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
  cursor: default;
}
#modal-kyusyu.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}

/* 広域エリア */
#modal-wide-area {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
  cursor: pointer;
}
#modal-wide-area.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal-wide-area .modal {
  width: min(520px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
  cursor: default;
}
#modal-wide-area.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}

/* ネットショップ */
#modal-ec {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
  cursor: pointer;
}
#modal-ec.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal-ec .modal {
  width: min(520px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
  cursor: default;
}
#modal-ec.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}

@keyframes overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes zoom {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.svg-map__area {
  opacity: 1;
  transition: 0.3s;
  &:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width: 480px) {
  .modal__close {
    top: 15px;
    right: 15px;
    width: 24px;
    height: 24px;
  }

  #modal-hokkaido .modal {
    padding: var(--space-ms);
  }
  #modal-tohoku .modal {
    padding: var(--space-ms);
  }
  #modal-kanto .modal {
    padding: var(--space-ms);
  }
  #modal-chubu .modal {
    padding: var(--space-ms);
  }
  #modal-kinki .modal {
    padding: var(--space-ms);
  }
  /*
  #modal-chugoku .modal {
    padding: var(--space-ms);
  }*/
  #modal-chu-shikoku .modal {
    padding: var(--space-ms);
  }
  #modal-kyusyu .modal {
    padding: var(--space-ms);
  }
  #modal-ec .modal {
    padding: var(--space-ms);
  }
  #modal-wide-area .modal {
    padding: var(--space-ms);
  }
}