.secret {
  padding: 120px 0 60px;
  @media screen and (min-width: 769px) {
    padding: 259px 0 120px;
  }
}
:where(.secret) {
  .intro {
    display: flex;
    justify-content: center;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      margin-bottom: 30px;
    }
    @media screen and (min-width: 769px) {
      gap: min(89px, calc(var(--vw) * 89));
      margin-bottom: 80px;
      padding: 0 25px;
    }
  }
  .intro__title-wrap {
    @media screen and (max-width: 768px) {
      padding: 0 25px;
      margin-bottom: 40px;
    }
  }
  .intro__sub-title {
    font-weight: bold;
    color: #5FA8D9;
    font-size: calc(var(--rem) * 14);
    letter-spacing: 1.4px;
    margin-bottom: 17px;
    @media screen and (min-width: 769px) {
      margin-bottom: 15px;
    }
  }
  .intro__title {
    font-weight: bold;
    font-size: calc(var(--rem) * 21);
    letter-spacing: 2.1px;
    line-height: 42px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 30);
      letter-spacing: 3px;
      line-height: 60px;
    }
  }
  .intro__text {
    color: #454545;
    font-weight: bold;
    @media screen and (max-width: 768px) {
      padding: 0 25px;
      font-size: calc(var(--rem) * 13);
      letter-spacing: 1.3px;
      line-height: 25px;
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 1.4px;
      line-height: 30px;
    }
    .blue {
      color: #004F92;
    }
    .strong {
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 17);
        letter-spacing: 1.7px;
      }
    }
  }
  .engine {
    padding: 45px 25px;
    background-repeat: repeat;
    background-size: contain;
    background-position: top;
    background-image: url(../../images/bg_line.webp);
    @media screen and (min-width: 769px) {
      padding: 74px 25px;
    }
  }
  .engine__title {
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--rem) * 20);
    letter-spacing: 2px;
    line-height: 30px;
    margin-bottom: 17px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 30);
      letter-spacing: 3px;
      line-height: 52px;
      margin-bottom: 40px;
    }
  }
  .engine__item {
    padding: 95px 75px;
    background: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    @media screen and (min-width: 769px) {
      margin: 0 auto 80px auto;
      gap: 30px;
      width: min(1273px, calc(var(--vw) * 1273));
    }
    @media screen and (max-width: 903px) {
      flex-direction: column;
    }
    @media screen and (max-width: 768px) {
      margin: 0 auto 25px auto;
      padding: 65px 10px 40px;
    }
  }
  .engine__item:last-child {
    @media screen and (min-width: 769px) {
      margin: 0 auto 60px auto;
    }
  }
  .engine__item:nth-child(even) {
    flex-direction: row-reverse;
    @media screen and (max-width: 903px) {
      flex-direction: column;
    }
  }
  .engine__lead {
    font-weight: bold;
    position: relative;
    padding-left: 99px;
    font-size: calc(var(--rem) * 17);
    letter-spacing: 1.7px;
    line-height: 34px;
    margin-bottom: 25px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 23);
      letter-spacing: 2.3px;
      line-height: 46px;
      padding-left: 115px;
      margin-bottom: 27px;
    }
    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 85px;
      height: 85px;
      background-image: url("../../images/secret/image_secret-engine-num-1.webp");
      background-size: contain;
      background-repeat: no-repeat;
      @media screen and (min-width: 769px) {
        width: 90px;
        height: 90px;
      }
    }
  }
  .engine__lead:has(+ .engine__annotation) {
    margin-bottom: 8px;
  }
  .engine__item:nth-child(2) {
    .engine__lead {
      &::before {
        background-image: url("../../images/secret/image_secret-engine-num-2.webp");
      }
    }
    .engine__image {
      @media screen and (min-width: 769px) {
        width: min(567px, calc(var(--vw) * 567));
      }
    }
  }
  .engine__item:nth-child(3) {
    .engine__lead {
      &::before {
        background-image: url("../../images/secret/image_secret-engine-num-3.webp");
      }
    }
  }
  .engine__item:nth-child(4) {
    .engine__lead {
      &::before {
        background-image: url("../../images/secret/image_secret-engine-num-4.webp");
      }
    }
    .engine__image {
      @media screen and (min-width: 769px) {
        width: min(540px, calc(var(--vw) * 540));
      }
    }
  }
  .engine__item:nth-child(5) {
    .engine__lead {
      @media screen and (min-width: 769px) {
        margin-bottom: 49px;
      }
      &::before {
        background-image: url("../../images/secret/image_secret-engine-num-5.webp");
      }
    }
    .engine__image {
      @media screen and (min-width: 769px) {
        width: min(540px, calc(var(--vw) * 540));
      }
    }
  }
  .engine__text {
    color: #454545;
    font-weight: bold;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 1.3px;
    line-height: 25px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 1.4px;
      line-height: 28px;
    }
    .underline {
      position: relative;
      display: inline;
      overflow: hidden;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      --h: 1em;
      --time: .8s;
      background-image: linear-gradient(90deg, #FFE4E9, #FFE4E9);
      background-repeat: no-repeat;
      background-position: left calc(100%);
      background-size: 0% var(--h);
      transition: background-size var(--time) 
cubic-bezier(.35, 0, 0, 1), color var(--time) 
cubic-bezier(.35, 0, 0, 1);
      padding-bottom: 3px;
      &.is-shown {
        background-size: 100% var(--h);
      }
    }
    .small {
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 11);
        letter-spacing: 1.1px;
      }
    }
  }
  .engine__image {
    @media screen and (max-width: 768px) {
      margin-bottom: 20px;
    }
    @media screen and (min-width: 769px) {
      width: min(462px, calc(var(--vw) * 462));
    }
  }
  .engine__corner-right {
    position: absolute;
    width: calc(var(--vw) * 131);
    right: 11px;
    top: 14px;
    @media screen and (min-width: 769px) {
      right: 33px;
      top: 26px;
      width: min(163px, calc(var(--vw) * 163));
    }
  }
  .engine__corner-left {
    position: absolute;
    left: 33px;
    bottom: 26px;
    @media screen and (min-width: 769px) {
      width: min(163px, calc(var(--vw) * 163));
    }
  }
  .engine__annotation {
    font-weight: bold;
    display: block;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 1.3px;
    margin-bottom: 16px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 1.5px;
      padding-left: 115px;
      margin-bottom: 17px;
    }
  }

  .engine__youtube {
    background: #FFF;
    margin: 0 auto;
    @media screen and (min-width: 769px) {
      padding: 40px 0;
      width: min(1273px, calc(var(--vw) * 1273));
    }
    iframe {
      margin: 0 auto;
      @media screen and (max-width: 768px) {
        width: 100%;
        height: calc(var(--vw) * 167);
      }
    }
  }
  .check {
    padding: 30px 0;
    @media screen and (min-width: 769px) {
      padding: 50px 0;
    }
  }
  .check__title {
    font-weight: bold;
    text-align: center;
    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 20);
      letter-spacing: 2px;
      line-height: 35px;
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 24);
      letter-spacing: 2.4px;
      margin-bottom: 20px;
    }
  }
  .splide__track.note {
    padding: 30px 0;
    img {
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
    } 
  }
  .support {
    padding: 40px 0 0;
    @media screen and (min-width: 769px) {
      padding: 80px 0 0;
    }
  }
  .support__title {
    width: 303px;
    margin: 0 auto 28px auto;
    @media screen and (min-width: 769px) {
      margin: 0 auto 38px auto;
      width: 556px;
    }
  }
  .support__item {
    position: relative;
    padding-top: 30px;
    @media screen and (min-width: 769px) {
      width: 373px;
      padding-top: 40px;
    }
    &::before {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      content: "";
      display: inline-block;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top;
      background-image: url("../../images/icon_check-blue.svg");
      width: 24px;
      height: 24px;
    }
  }
  .support__list {
    display: flex;
    justify-content: center;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 40px;
    }
    @media screen and (min-width: 769px) {
      gap: min(10px, calc(var(--vw) * 10));
    }
  }
  .support__lead {
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--rem) * 18);
    letter-spacing: 1.8px;
    line-height: 27px;
    margin-bottom: 19px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 20);
      letter-spacing: 2px;
      line-height: 30px;
      margin-bottom: 25px;
    }
  }
  .support__image {
    width: calc(var(--vw) * 230);
    margin: 0 auto 20px;
    @media screen and (min-width: 769px) {
      margin: 0 auto 24px;
      width: min(220px, calc(var(--vw) * 220));
    }
  }
  .support__desc {
    font-weight: bold;
    text-align: center;
    color: #454545;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 1.3px;
    line-height: 20px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 1.4px;
      line-height: 25px;
    }
    .strong {
      color: #004F92;
    }
  }

  .system {
    background: #004F92;
    padding: 31px 13px;
    @media screen and (min-width: 769px) {
      padding: 65px 0;
    }
  }
  .system__inner {
    background: #FFF;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    @media screen and (min-width: 769px) {
      padding: 36px 15px;
      width: min(1200px, calc(var(--vw) * 1200));
      margin: 0 auto;
    }
  }
  .system__label {
    background: #5FA8D9;
    font-size: calc(var(--rem) * 15);
    letter-spacing: 1.5px;
    border-radius: 19.5px;
    font-weight: bold;
    color: #FFF;
    margin-bottom: 20px;
    padding: 7px 15px;
    @media screen and (min-width: 769px) {
      padding: 7px 25px;
      margin-bottom: 26px;
    }
  }
  .system__title {
    text-align: center;
    font-weight: bold;
    @media screen and (max-width: 768px) {
      line-height: 30px;
      font-size: calc(var(--rem) * 17);
      letter-spacing: 1.7px;
      margin-bottom: 20px;
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 24);
      letter-spacing: 2.4px;
      margin-bottom: 26px;
    }
  }
  .system__text {
    text-align: center;
    color: #454545;
    font-weight: bold;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 1.3px;
    line-height: 26px;
    margin-bottom: 15px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 1.5px;
      line-height: 30px;
      margin-bottom: 20px;
    }
  }
  .system__image {
    @media screen and (min-width: 769px) {
      margin: 0 auto;
      width: min(952px, calc(var(--vw) * 952));
    }
  }
}