/* =====================================================
/* root
===================================================== */
:root {
  --color-black: #333333;
  --color-white: #ffffff;
  --color-gray: #f3f3f3;
  --color-dark-gray: #888888;
  --color-blue: #0070c0;
  --color-light-blue: #daf9ff;
  --color-red: #ab0000;
  --color-yellow: #f9d005;
  --color-theme-color: #00a9c9;
  --color-focus-bg: #e1f0f8;
  --color-focus-outline: #83c0de;
  --color-navy: #003a57;
}

/* =====================================================
/* Modal Styles
===================================================== */
.modal {
  display: none;

  &.is-open {
    display: block;
  }

  & .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;

    & .inner {
      background-color: var(--color-white);
      padding: 15px;
      max-inline-size: 800px;
      max-block-size: 100vh;
      border-radius: 3px;

      & .modalContent {
        color: var(--color-black);
        margin-block: 0 15px;
        padding-block: 0 10px;
        line-height: 1.5;
        border-block-end: solid 1px var(--color-black);
        text-align: center;

        & .swiper-slide img {
          display: block;
          margin: 0 auto;
        }

        & .swiper-button-next,
        & .swiper-button-prev {
          inline-size: 50px;
          block-size: 50px;
          color: var(--color-white);
          background: var(--color-navy);
          border-radius: 50%;

          &:after,
          &:after {
            font-size: 22px;
          }
        }

        & .swiper-button-prev {
          left: 0;
          right: auto;
        }

        & .swiper-button-next {
          right: 0;
          left: auto;
        }
      }
    }
  }
}

.modalBtn {
  inline-size: 100%;
  padding: 10px;
  color: var(--color-white);
  background-color: var(--color-navy);
  border-radius: 5px;
  cursor: pointer;
  text-transform: none;
  overflow: visible;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out；;
}

@media screen and (width <=768px) {
  .modal {
    & .overlay {
      & .inner {
        background-color: var(--color-white);
        padding: 20px;
        inline-size: 300px;
        block-size: auto;

        & .modalContent {
          position: relative;

          & .swiper-button-next,
          & .swiper-button-prev {
            inline-size: 35px;
            block-size: 35px;

            &:after,
            &:after {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.micromodal-slide[aria-hidden="false"] .overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .inner,
.micromodal-slide .overlay {
  will-change: transform;
}