@charset "utf-8";

.cm-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  &.is-active {
    opacity: 1;
    pointer-events: auto;
  }
}
.cm-modal-inner {
  width: min(calc(1100em/16), calc(1100/934*100vh));
  @media screen and (max-width: 1150px) {
    width: calc(1100/1150*90vw);
  }
  @media screen and (max-width: 1150px) and (max-height: 700px) {
    width: calc(1100/700*85vh);
  }
  @media screen and (max-width: 768px) {
    width: 100%;
    padding-bottom: calc(166/400*100%);
  }
}
.cm-modal-inner {
  @media screen and (max-width: 768px) {
    position: relative;
  }
}
.cm-modal__close {
  position: absolute;
  top: min(calc(80em/16), calc(80/934*100vh));
  right: min(calc(90em/16), calc(90/934*100vh));
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(78em/16);
  height: calc(78em/16);
  background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
  border: calc(4em/16) solid;
  border-radius: calc(34em/16);
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: calc(5em/16) solid #fff;
    border-radius: calc(30em/16);
  }
  @media screen and (max-width: 880px) {
    top: calc(-56em/16);
    right: calc(21em/16);
    font-size: .5em;
  }
}
.cm-modal__closeIcon {
  width: calc(22em/16);
  height: calc(22em/16);
}
.cm-modal__video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  & iframe {
    width: 100%;
    height: 100%;
  }
}
.cm-modal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0/.8);
}