/**
 * modal global styles
 */
.l-global-modal {
  --zindex-behind: -1;
  --zindex-base: 1;
  --zindex-front: 10;
  --zindex-floating-element: 20;
  --zindex-absolutiong-floating-element: 10000;
  --size-modal-close-button: 20px;
  position: fixed;
  display: grid;
  place-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-inline: 20px;
  background-color: rgba(0, 0, 0, .25);
  visibility: var(--visibility, hidden);
  opacity: var(--opacity, 0);
  z-index: var(--z-index, var(--zindex-behind));
  transition: all .5s ease;
}
.l-global-modal img {
  max-width: 100%;
  height: auto;
}
.l-global-modal.is-show {
  --visibility: visible;
  --opacity: 1;
  --z-index: var(--zindex-absolutiong-floating-element);
}
.m-global-modal__container {
  position: relative;
  max-width: 800px;
  width: 100%;
}
.c-global-modal__close-button {
  position: absolute;
  top: calc(var(--size-modal-close-button) / 2 * -1);
  right: calc(var(--size-modal-close-button) / 2 * -1);
  width: var(--size-modal-close-button);
  height: var(--size-modal-close-button);
  background: initial;
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  z-index: var(--zindex-front);
}

/* --- for small viewport --- */
@media only screen and (max-width: 767px) {}

/* --- for large viewport --- */
@media only screen and (min-width: 768px) {}

/**
 * call affiliate interstitial modal
 */
.m-interstitial-modal__container {
  --interstitial-modal-container-rate: calc(100cqi / 850);
  container-type: inline-size;
  container-name: container;
  /* aspect-ratio: 850 / 1240; */
  /* min-height: calc(1240 * var(--interstitial-modal-container-rate)); */
}
.m-interstitial-modal__container[data-benefits="otakaraya_1"] {
  --modal-background-image: url(../../../the-thor/img/call-affiliate/modal/otakaraya_1.webp);
}
.m-interstitial-modal__container[data-benefits="otakaraya_2"] {
  --modal-background-image: url(../../../the-thor/img/call-affiliate/modal/otakaraya_2.webp);
}
.m-interstitial-modal__container[data-benefits="kaitori-daikichi_1"] {
  --modal-background-image: url(../../../the-thor/img/call-affiliate/modal/kaitori-daikichi_1.webp);
}
.m-interstitial-modal__container[data-benefits="kaitori-daikichi_2"] {
  --modal-background-image: url(../../../the-thor/img/call-affiliate/modal/kaitori-daikichi_1.webp);
}
.m-interstitial-modal__shell {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr;
  height: 100%;
  max-height: 85svh;
  background-color: #fff;
  overflow: auto;
}
.c-interstitial-modal__heading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.m-interstitial-modal__description {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  background-image: var(--modal-background-image);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #fff;
}
.m-interstitial-modal__description:not(:has(.c-interstitial-modal__notes)) {
  padding-block-end: calc(125 * var(--interstitial-modal-container-rate));
}
.m-interstitial-modal__description:has(.c-interstitial-modal__notes) {
  padding-block-end: calc(60 * var(--interstitial-modal-container-rate));
}
.c-interstitial-modal__cta-button {
  width: calc(695 * var(--interstitial-modal-container-rate));
  /* margin-block-start: auto; */
  margin-block-start: calc(750 * var(--interstitial-modal-container-rate));
}
.c-interstitial-modal__footer {
  width: calc(768 * var(--interstitial-modal-container-rate));
  margin-block-start: calc(20 * var(--interstitial-modal-container-rate));
}
.c-interstitial-modal__notes {
  margin-block-start: 1.5em;
  padding-inline: 2em;
  font-size: 12px;
  line-height: 1.5;
  text-align: justify;
}
/* --- for small viewport --- */
@media only screen and (max-width: 767px) {}

/* --- for large viewport --- */
@media only screen and (min-width: 768px) {}