:root {
  --font-size-base: 16;
  --rem-ratio: calc(1.6rem / var(--font-size-base));
  --leading-trim: calc((1em - 1lh) / 2);
  --contents-width: 1240px;
  --color-base: #fff;
  --color-text: #333;
  --color-bg: #f7f5f0;
  --color-bg2: #ededed;
  --color-bg3: #efebe2;
  --color-bg4: #f7efda;
  --color-bg5: #fff6f5;
  --color-bg6: #ffe4e0;
  --color-bg7: #d0ffc4;
  --color-link: #257722;
  --color-link2: #87e871;
  --color-line: #d5d2c8;
  --color-line2: #707070;
  --color-line3: #fb6f62;
  --color-line4: #fee4e0;
  --color-line5: #c6bca7;
  --color-line6: #c6bfb3;
  --color-line7: #bebebe;
  --color-line8: #ff6f61;
  --color-line9: #c1b69b;
  --color-line10: #afaeae;
  --c_theme: #4f4a9c;
}

:is(.bl-modalExternal, .bl-modalConfirmation) {
  & .modaal-inner-wrapper {
    @media (max-width: 767px) {
      & {
        padding-inline: calc((20 / 390) * 100%);
      }
    }
  }

  & .modaal-container {
    max-width: 900px;
    border-radius: 20px;
    border: 1px solid #adadad;
    position: relative;
  }

  & .modaal-content-container {
    padding-block: 70px;

    @media (max-width: 767px) {
      & {
        padding-inline: calc((17 / 390) * 100%);
        padding-block: 40px 50px;
      }
    }
  }

  & .modaal-close {
    width: 56px;
    height: 56px;
    border: 1px solid #adadad;
    background: var(--color-base);
    top: -30px;
    right: -30px;
    position: absolute;

    @media (max-width: 955px) {
      & {
        right: max(-20px, calc((20 / 390) * -100%));
      }
    }
  }

  & .modaal-close:after,
  & .modaal-close:before {
    width: 3px;
    height: 22px;
    border-radius: 0;
    background: #707070;
    top: 16px;
    left: 25px;
  }

  .bl-modalExternal_titleWrapper {
    max-width: 600px;
    margin-inline: auto;

    @media (max-width: 767px) {
      & {
        max-width: unset;
      }
    }
  }

  & .bl-modalExternal_title {
    font-size: calc(22 * var(--rem-ratio));
    font-weight: bold;
  }

  & .bl-modalExternal_text {
    font-size: calc(18 * var(--rem-ratio));

    &.--center {
      @media (min-width: 768px) {
        text-align: center;
      }
    }
  }

  & .bl-modalExternal_btnWrapper {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
    margin-block-start: calc(50px + var(--leading-trim));

    @media (max-width: 767px) {
      grid-auto-flow: row;
      justify-content: unset;
      gap: 36px;
      margin-block-start: calc(40px + var(--leading-trim));
    }
  }

  & .bl-modalExternal_link {
    display: grid;
    align-items: center;
    width: fit-content;
    min-width: 248px;
    min-height: 68px;
    font-size: calc(20 * var(--rem-ratio));
    font-weight: 500;
    line-height: 1;
    color: var(--color-base);
    text-align: center;
    border-radius: calc(infinity * 1px);
    border: 2px solid var(--color-link);
    background: var(--color-link);
    padding: 10px 20px;
    position: relative;

    &.--jc-center {
      justify-content: center;
    }

    &.--lg {
      @media (min-width: 768px) {
        min-width: 390px;
      }
      @media (max-width: 767px) {
        height: 68px;
      }
    }

    @media (max-width: 767px) {
      & {
        width: unset;
      }
    }

    &.--invert {
      color: var(--color-link);
      background: var(--color-base);
    }

    & .bl-modalConfirmation_btnIcon {
      margin-block: auto;
      position: absolute;
      inset: 0 20px 0 auto;

      &.--relative {
        position: relative;
        inset: unset;
      }
    }

    @media (any-hover: hover) {
      &:where(:hover) {
        background-color: var(--color-base);
        color: var(--color-link);

        .bl-modalExternal_external {
          background-image: url(/assets/images/external02.svg);
        }
      }

      &.--invert:where(:hover) {
        background-color: var(--color-link);
        color: var(--color-base);
      }
    }
  }

  .bl-modalExternal_external {
    background-image: url(/assets/images/external03.svg);
    background-repeat: no-repeat;
    background-position: top 50% right 0;
    line-height: 1.4;

    @media (min-width: 768px) {
      padding-right: 29px;
      background-size: 23px;
    }

    @media (max-width: 767px) {
      font-size: calc(16 * var(--rem-ratio));
      padding-right: 25px;
      background-size: 19px;
    }
  }
}

.bl-modalConfirmation {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 2;
  & .bl-modalConfirmation_text {
    font-size: calc(20 * var(--rem-ratio));
    text-align: left;
  }

  & .bl-modalConfirmation_text2 {
    font-size: calc(22 * var(--rem-ratio));
    font-weight: 500;
    line-height: calc(38 / 22);
    text-align: center;
    text-wrap: balance;
    margin-block-start: 24px;
  }

  & .bl-modalConfirmation_btnWrapper {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
    margin-block-start: calc(50px + var(--leading-trim));

    @media (max-width: 767px) {
      grid-auto-flow: row;
      justify-content: unset;
      gap: 36px;
      margin-block-start: calc(40px + var(--leading-trim));
    }
  }

  & .bl-modalConfirmation_btn {
    width: fit-content;
    min-width: 248px;
    min-height: 68px;
    font-size: calc(20 * var(--rem-ratio));
    font-weight: 500;
    line-height: 1;
    color: var(--color-base);
    text-align: center;
    border-radius: calc(infinity * 1px);
    border: 2px solid var(--c_theme);
    background: var(--c_theme);
    padding: 10px 20px;
    position: relative;
    cursor: pointer;

    @media (max-width: 767px) {
      & {
        width: unset;
      }
    }

    &.--invert {
      color: var(--c_theme);
      background: var(--color-base);
    }

    & .bl-modalConfirmation_btnIcon {
      margin-block: auto;
      position: absolute;
      inset: 0 20px 0 auto;
    }

    @media (any-hover: hover) {
      &:where(:hover) {
        background-color: var(--color-base);
        color: var(--c_theme);
      }

      &.--invert:where(:hover) {
        background-color: var(--c_theme);
        color: var(--color-base);
      }
    }
  }
}