.decision {
  & .decision-content {
    background-color: #fff;
    width: calc(100% - 64px);
    max-width: 1100px;
    padding: 100px 145px 60px;
    margin: 0 auto;
  }

  & .decision-body {padding: 400px 15px 120px;}

  & .decision-cont {width: 100%; max-width: 1400px; margin: 0 auto; background-color: #fff; padding: 120px clamp(30px, 5vw, 120px) 50px;
    h1 {font-size: clamp(60px, 9vw, 110px); font-weight: bold; color: #fc1921; margin-bottom: 120px;}
  }

  & .decision-box {border: solid 1px #fc1921; padding: 80px clamp(30px, 5vw, 70px); color: #000; margin-bottom: 28px;
    h2 {font-size: clamp(24px, 5vw, 44px); font-weight: bold; margin-bottom: 70px;}
    img {width: 100%; max-width: 436px; height: auto; aspect-ratio: 218 / 91; margin-bottom: 70px;}
    p {line-height: 1.8; font-size: clamp(16px, 5vw, 28px);}
  }

  & .decision-logo {
    img {width: 100%; max-width: 240px; height: auto; aspect-ratio: 120 / 127;}
  }

  & .decision-footer {background-color: #fff; padding-top: 5px; padding-bottom: 20px; text-align: right; max-width: 1100px; margin: 0 auto;}
}

@media only screen and (max-width: 769px) {
  .decision {
    & .decision-body {padding-top: 100px; padding-bottom: 60px;}

    & .decision-cont {padding-top: 60px;
      h1 {font-size: 36px; margin-bottom: 60px;}
    }

    & .decision-box {padding: 40px 20px;
      h2 {font-size: 18px; margin-bottom: 30px;}
      img {margin-bottom: 30px;}
      p {font-size: 14px;}
    }

    & .decision-logo {
      img {max-width: 120px;}
    }
  }
}

/* New page Content */
.decision {position: relative; z-index: 1;
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../assets/img/bg.png);
    background-position: top center;
    background-repeat: repeat-y;
    background-size: 100% auto;
    opacity: 0.35;
    pointer-events: none;
    z-index: -1;
  }

  & .decision-introduction {
    --space: 16px;
    padding: 124px 16px 64px;
    background: linear-gradient(90deg, #2c2863 0%, #712782 25%, #ce2743 50%, #ee781f 75%, #e7b02c 100%);
    position: relative;
    z-index: 2;

    &:after {
      content: "";
      width: calc(100% - (var(--space)*2));
      height: calc(100% - (var(--space)*2));
      position: absolute;
      top: var(--space);
      left: var(--space);
      background: url(../../common/img/common/column_bg.png), #fff;
      background-position: center center;
      background-repeat: repeat;
      background-size: auto;
      border-radius: 16px;
      z-index: -1;
    }

    & .decision-introduction__logo {
      margin-bottom: 60px;

      svg {width: 100%; height: auto;}

      #DrawYourVoice_sp {display: none;}
    }

    & .decision-introduction__desc {
      font-size: 20px;
      line-height: 2;
      letter-spacing: 1px;
      margin-bottom: 30px;
    }

    & .decision-introduction__inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 100px;
    }

    & .decision-introduction__footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      & .decision-introduction__footer-sign {
        font-size: 15px;
      }
  
      & .decision-introduction__footer-right {
        display: flex;
        align-items: flex-end;
        text-align: right;

        .decision-logo {flex-shrink: 0;
          img {width: 118px; height: auto; margin-bottom: -7px;}
        }
      }

      & .decision-introduction__footer-note {
        font-size: 12px;

        h3 {font-size: 18px; font-weight: bold; padding-bottom: 10px; margin-bottom: 10px; border-bottom: solid 1px;}
      }
    }
  }

  & .decision-content {
    & .decision-content__tit {margin-bottom: 30px; display: flex; align-items: center; gap: 10px;
      svg {width: 80px; height: auto; flex-shrink: 0;}
      h2 {font-size: 28px; color: #2c2863; font-weight: bold; line-height: 1.4; margin: 0;}
    }
  }

  & .decision-content__block {
    &:not(:last-child) {margin-bottom: 60px;}

    & .decision-content__block-tit {
      color: #fff;
      font-size: 21px;
      padding: 7px 25px;
      border-radius: 999px;
      background: linear-gradient(90deg, #2c2863 0%, #712782 25%, #ce2743 50%, #ee781f 75%, #e7b02c 100%);
      margin-bottom: 20px;
    }

    & .decision-content__block-desc {font-size: 16px; color: #000;}

    & .decision-content__block-video {margin-top: 20px;
      iframe, video {width: 100%; aspect-ratio: 16/9;}
    }

    &.--picture {
      h2 {font-size: 28px; color: #2c2863; font-weight: bold; line-height: 1.4; margin-bottom: 20px;
        &:before {content: "▼";}
      }

      & .decision-content__block-pic {
        img {width: 100%; height: auto;}
      }

      & .btn-zoomPic {display: flex; justify-content: flex-end; align-items: center; margin-top: 20px;
        &:before {
          content: "";
          display: block;
          width: 16px;
          height: 16px;
          mask-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.38 19.1'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %232c2863; stroke-miterlimit: 10; stroke-width: 2.83px; %7D %3C/style%3E%3C/defs%3E%3Cg id='_レイヤー_20' data-name='レイヤー 20'%3E%3Cg%3E%3Ccircle class='cls-1' cx='10.47' cy='7.91' r='6.49'/%3E%3Cline class='cls-1' x1='1' y1='18.09' x2='6.05' y2='13.05'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
          mask-repeat: no-repeat no-repeat;
          mask-position: center center;
          mask-size: 100% auto;
          background-color: #2c2863;
          transition: 0.35s;
        }
        button {color: #2c2863; font-size: 16px; font-weight: bold; background-color: transparent; border: none;}

        &:hover:before {width: 20px; height: 20px;}
      }
    }
  }
}

.decisionPage #footer {margin-top: 0;
  & > .r-container {display: none;}
}

@media only screen and (min-width: 767.98px) {
  .decision {padding-top: 57px !important;}
  .md-hidden {display: none;}
}


.img-modal {position: fixed; inset: 0; z-index: 9999;
  .img-modal__overlay {position: absolute; inset: 0; background: rgba(0,0,0,0.8);}

  .img-modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    max-width: 90%;
    max-height: 90%;

    img {width: 100%; height: auto; display: block;}
  }

  .img-modal__close {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 30px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
  }
}

.hidden {overflow: hidden !important;}

@media only screen and (max-width: 768px) {
  .decision {padding-top: 128px !important;
    & .decision-introduction {padding-top: 90px; padding-bottom: 60px;
      & .decision-introduction__inner {padding-left: 16px; padding-right: 16px;}

      & .decision-introduction__logo {margin: 0 auto 40px; max-width: calc(100% - 64px);
        #DrawYourVoice {display: none;}
        #DrawYourVoice_sp {display: block;}
      }

      & .decision-introduction__desc {font-size: 14px; letter-spacing: 0.5px;}

      & .decision-introduction__footer {display: block;
        & .decision-introduction__footer-sign {font-size: 12px; margin-bottom: 20px;}
        & .decision-introduction__footer-right {justify-content: flex-end;}
        & .decision-introduction__footer-note {
          h3 {font-size: 16px;}
        }
        & .decision-logo img {width: 90px;}
      }
    }

    & .decision-content {padding: 40px 16px;
      & .decision-content__tit {display: block;
        svg {margin: 0 auto 15px; display: block;}
        h2 {font-size: 20px;}
      }
    }

    & .decision-content__block {
      & .decision-content__block-tit {font-size: 16px;}
      & .decision-content__block-desc {font-size: 14px;}

      &.--picture {
        h2 {font-size: 16px;}
      }
    }

    & .decision-content {max-width: calc(100% - 48px); width: 100%;}

    & .decision-footer {max-width: calc(100% - 48px);
      & .r-container {font-size: 12px;}
    }
  }
}
header, iframe {transform: translateZ(0);}