@charset "utf-8";

/*
  参考（ベーシックスタイル）
  https://gist.github.com/ghosh/4f94cf497d7090359a5c9f81caf60699
*/

.micromodal {
  display: none;
}
.micromodal.is-open {
  display: block;
}
.micromodal_container {
  position: relative;
  width: 100%;
  max-width: 820px;
  max-height: 100vh;
  background-color: #fff;
}
.micromodal .micromodal_container,
.micromodal .micromodal_overlay {
  will-change: transform;
}
.micromodal_overlay {
  position: fixed;
  z-index: 100010;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(var(--color-primary-rgb) / 0.9);
  padding: 0 23px;
}
.micromodal[aria-hidden='false'] .micromodal_overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal[aria-hidden='true'] .micromodal_overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.micromodal_close {
  --hover-opacity: 0.9;
  position: absolute;
  z-index: 10;
  top: -14px;
  right: -14px;
  width: 50px;
  min-width: 0;
  aspect-ratio: 1;
  background-color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  appearance: none !important;
  transition: opacity 0.3s ease-out;
}
.micromodal_close:focus-visible {
  opacity: var(--hover-opacity);
}
@media (any-hover: hover) {
  .micromodal_close:hover {
    opacity: var(--hover-opacity);
  }
}
.micromodal_close::before,
.micromodal_close::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 30px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 9999px;
  margin: auto;
}
.micromodal_close::before {
  transform: rotate(45deg);
}
.micromodal_close::after {
  transform: rotate(-45deg);
}