@charset "UTF-8";

.p-modal__bg {
  background: var(--bg-modal);
}

.p-modal__contents {
  background: var(--white);
}

.p-modal__contents.p-modal__contents--narrow {
  padding: 0;
  background: transparent;
}

.p-modal__contents.p-modal__contents--tin {
  padding: 0;
  background: transparent;
}

.p-modal__close {
  width: 1em;
  height: 1em;
  overflow: hidden;
  color: var(--white);
  background: transparent;
}

.p-modal__close:is(div) {
  cursor: pointer;
}

.p-modal__close::before,
.p-modal__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1414em;
  height: 1px;
  content: '';
  background: currentColor;
}

.p-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.p-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.p-modal[aria-hidden='false'] .p-modal__bg {
  animation: modal-bg-in 0.9s ease-out backwards;
}

.p-modal[aria-hidden='true'] .p-modal__bg {
  animation: modal-bg-out 0.6s ease-out backwards;
}

.p-modal[aria-hidden='false'] .p-modal__container {
  animation: modal-contents-in 0.9s ease-out 0.6s backwards;
}

.p-modal[aria-hidden='true'] .p-modal__container {
  animation: modal-contents-out 0.6s ease-out backwards;
}

/* --------------------------------------------------------------

  smart phone

-------------------------------------------------------------- */
@media (max-width: 750px) {
  .p-modal__container {
    padding-top: calc(30 * 100vw / var(--design-sp));
  }

  .p-modal__contents {
    padding: calc(30 * 100vw / var(--design-sp))
      calc(var(--gutter-sp) * 100vw / var(--design-sp))
      calc(40 * 100vw / var(--design-sp));
    border-radius: calc(10 * 100vw / var(--design-sp));
  }

  .p-modal__close {
    font-size: calc(20 * 100vw / var(--design-sp));
  }
}

/* --------------------------------------------------------------

  pc

-------------------------------------------------------------- */
@media (min-width: 751px) {
  .p-modal__container {
    padding-top: calc(30 * var(--fs));
  }

  .p-modal__contents {
    padding: var(--gutter-pc);
    border-radius: calc(10 * var(--fs));
  }

  .p-modal__close {
    font-size: calc(20 * var(--fs));
  }
}

@media (orientation: landscape) {
  .mobile .p-modal__container:has(.c-youtube--vertical) {
    padding-right: calc(20 * var(--fs));
    padding-left: calc(20 * var(--fs));
  }
}