/* ポップアップ */
.popup {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #fff;
  border-radius: calc(var(--base-border-radius));
  margin-left: calc(var(--base-spacing-width)*1/2);
  margin-right: calc(var(--base-spacing-width)*1/2);
  text-align: center;
  max-height: 90vh;
  overflow-y: auto;
}

.popup-page {
  padding:
    calc(var(--base-spacing-height))
    calc(var(--base-spacing-width));
}

.popup-page-title {
  font-size: calc(var(--base-font-size)*1.3);
  line-height: calc(var(--base-line-height));
}

.popup-page-body { }

.popup-page-button-container {
  padding-top: calc(var(--base-spacing-height)*2/3);
  width: 100%;
  text-align: center;
}

@media screen and (min-width: 1024px),
print {

  /* ポップアップ */
  .popup-content {
    margin-left: auto;
    margin-right: auto;
    width: calc(var(--base-desktop-page-width));
  }
}