/**
 * メニューページのポップアップ（core/plugins/menu-popup.php / assets/js/menu-popup.js）
 * top.css の .c-modal はメニューページで読み込まれないため独立したクラスで組むが、
 * 見た目と開閉の演出（フェード・カードのスライド・閉じるボタン）は TOP のポップアップ（.c-modal）に揃える。
 */
.menu-popup {
  --duration: 300ms;
  --delay: 150ms;
  background: transparent;
  border: 0;
  color: var(--color-white);
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2em;
  position: fixed;
  transition: opacity var(--duration) var(--delay) ease allow-discrete;
  width: 100%;
  z-index: var(--zindex-modal);
}
.menu-popup[open] {
  align-items: center;
  display: flex;
  justify-content: center;
  opacity: 1;
}
@starting-style {
  .menu-popup[open] {
    opacity: 0;
  }
}
.menu-popup[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .menu-popup[open]::backdrop {
    opacity: 0;
  }
}
.menu-popup.is-closing {
  pointer-events: none;
}
.menu-popup.is-closing,
.menu-popup.is-closing::backdrop {
  opacity: 0;
  transition-delay: 0s;
}
.menu-popup::backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgb(var(--color-black-rgb) / 70%);
  inset: 0;
  position: fixed;
  transition: opacity var(--duration) var(--delay) ease;
}

/* 縦長の画像でも「しばらくの間は表示しない」（SP は閉じるボタンも）まで1画面に収まるよう、画面の高さ × 画像の縦横比で幅を抑える */
.menu-popup-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (min-width: 768px) {
  .menu-popup-content {
    width: min(max(96rem, 1px), max((100svh - 4em - max(8rem, 70px)) * var(--menu-popup-ratio, 1.6667), 24rem));
  }
}
@media screen and (max-width: 767px) {
  .menu-popup-content {
    width: min(max(36rem, 1px), max((100svh - 4em - max(17rem, 160px)) * var(--menu-popup-ratio, 1.6667), 20rem));
  }
}

.menu-popup-body {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  transition: transform calc(var(--duration) + 0.2s) var(--delay) cubic-bezier(0.19, 1, 0.22, 1);
  width: 100%;
}
@media screen and (min-width: 768px) {
  .menu-popup-body {
    box-shadow:
      0 max(15rem, 1px) max(4.2rem, 1px) 0 rgb(var(--color-beige-deepest-rgb) / 0),
      0 max(9.6rem, 1px) max(3.8rem, 1px) 0 rgb(var(--color-beige-deepest-rgb) / 2%),
      0 max(5.4rem, 1px) max(3.2rem, 1px) 0 rgb(var(--color-beige-deepest-rgb) / 8%),
      0 max(2.4rem, 1px) max(2.4rem, 1px) 0 rgb(var(--color-beige-deepest-rgb) / 13%),
      0 max(0.6rem, 1px) max(1.3rem, 1px) 0 rgb(var(--color-beige-deepest-rgb) / 15%);
  }
}
@media screen and (max-width: 767px) {
  .menu-popup-body {
    box-shadow:
      0 max(5.6rem, 1px) max(1.6rem, 1px) 0 rgb(var(--color-beige-deepest-rgb) / 0),
      0 max(3.6rem, 1px) max(1.4rem, 1px) 0 rgb(var(--color-beige-deepest-rgb) / 2%),
      0 max(2rem, 1px) max(1.2rem, 1px) 0 rgb(var(--color-beige-deepest-rgb) / 8%),
      0 max(0.9rem, 1px) max(0.9rem, 1px) 0 rgb(var(--color-beige-deepest-rgb) / 13%),
      0 max(0.2rem, 1px) max(0.5rem, 1px) 0 rgb(var(--color-beige-deepest-rgb) / 15%);
  }
}
[open] .menu-popup-body {
  transform: translate3d(0, 0, 0);
}
@starting-style {
  [open] .menu-popup-body {
    transform: translate3d(0, -10%, 0);
  }
}
.is-closing .menu-popup-body {
  transform: translate3d(0, 10%, 0);
  transition-delay: 0s;
}

.menu-popup-link {
  display: block;
}
.menu-popup-img img {
  display: block;
  height: auto;
  width: 100%;
}

.menu-popup-optout {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: var(--font-weight-bold);
  gap: 0.5em;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .menu-popup-optout {
    font-size: max(1.6rem, 12px);
    margin-top: max(2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .menu-popup-optout {
    font-size: max(1.5rem, 12px);
    margin-top: max(1.6rem, 1px);
  }
}
/* common.css のリセットで appearance: none になるため、チェックボックスを自前で描く */
.menu-popup .menu-popup-optout-input {
  appearance: none;
  background: transparent center / 80% no-repeat;
  border: 2px solid var(--color-white);
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
  height: 1.25em;
  margin: 0;
  width: 1.25em;
}
.menu-popup .menu-popup-optout-input:checked {
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23e60012' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.menu-popup-optout-input:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* 閉じるボタン（TOP の .c-modal-close と同じ。PC は画面右上、SP はカードの下） */
.menu-popup-close {
  align-items: center;
  appearance: none;
  aspect-ratio: 1 / 1;
  background-color: rgb(var(--color-black-rgb) / 50%);
  border: 0 solid rgb(var(--color-white-rgb) / 20%);
  border-radius: var(--border-radius-full);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  padding: 0;
  transition:
    transform 0.3s var(--ease-power1-out),
    background 0.3s var(--ease-power1-out);
}
@media screen and (min-width: 768px) {
  .menu-popup-close {
    border-width: max(0.1rem, 1px);
    position: absolute;
    right: max(4.8rem, 1px);
    top: max(4.8rem, 1px);
    width: max(9.6rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .menu-popup[open] {
    flex-direction: column;
  }
  .menu-popup-close {
    border-width: max(0.1rem, 1px);
    margin-top: max(2.4rem, 1px);
    width: max(9.6rem, 1px);
  }
}
.menu-popup-close:focus-visible {
  outline: 0;
}
.menu-popup-close:hover {
  background-color: #ffffff14;
  transform: scale(0.95);
}
.menu-popup-close .c-icon {
  aspect-ratio: 1 / 1;
  line-height: var(--leading-none);
  width: max(2.4rem, 1px);
}
.menu-popup-close .c-icon svg {
  display: block;
  height: 100%;
  width: 100%;
}