@charset "utf-8";

/* ↓↓↓ .contents ↓↓↓ */
.contents {
  background: url(../img/benefits/benefits-fv-bg_pc.jpg) no-repeat;
  background-size: cover;
  background-position: center top;
  padding: min(6.588579795vw, 90px) 0 min(4.392387vw, 60px);
  margin-top: min(6.588579795vw, 90px);
  overflow-x: clip;
}

@media (max-width: 768px) {
  .contents {
    padding: 60px 0 80px;
    margin-top: 0;
    background: url(../img/benefits/benefits-fv-bg_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center top;
  }
}

.contents .sec_inner .sec_ttl {
  position: relative;
}

@media (max-width: 768px) {
  .contents .sec_inner .sec_ttl {
    padding-top: 60px;
  }
}

.contents .sec_inner .sec_ttl .title {
  font-family: var(--text-fif);
  font-size: min(3.07467057101vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .contents .sec_inner .sec_ttl .title {
    font-size: 3.2rem;
  }
}

.contents .sec_inner .sec_ttl .cap {
  font-size: min(1.024890190336vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

@media (max-width: 768px) {
  .contents .sec_inner .sec_ttl .cap {
    font-size: 1.4rem;
  }
}

.contents .sec_inner .contents_read {
  font-size: min(1.464129vw, 20px);
  font-weight: 700;
  margin-top: min(3.29429vw, 45px);
}

@media (max-width: 768px) {
  .contents .sec_inner .contents_read {
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    margin-top: 15px;
    line-height: 2;
  }
}

/* ↑↑↑ .contents ↑↑↑ */

/* ↓↓↓ block ↓↓↓ */
.contents .block {
  margin-top: min(4.758418740849195vw, 65px);

  + .block {
    margin-top: min(11.71303074670571vw, 160px);
  }

  .block_ttl {
    font-size: min(2.1961932650073206vw, 3.0rem);
    font-weight: 700;
  }

  .container {
    width: 100%;
    margin-top: min(1.0980966325036603vw, 15px);
    display: flex;
    flex-wrap: wrap;
    gap: min(1.3177159590043925vw, 18px);

    .card {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: min(19.106881405563687vw, 261px);
      aspect-ratio: 261 / 314;
      padding: 4px 4px min(2.342606149341142vw, 32px);
      background: #45B035;
      position: relative;
      z-index: 0;

      &::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 100%;
        height: 100%;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        background-color: #fff;
        z-index: -1;
      }

      .icon {
        width: min(6.881405563689605vw, 94px);
        margin-top: min(2.9282576866764276vw, 40px);
      }

      .head {
        width: fit-content;
        font-size: min(1.610541727672035vw, 2.2rem);
        font-weight: 700;
        text-align: center;
        margin-top: min(2.049780380673499vw, 2.8rem);
        line-height: 1.4;
      }

      .btn {
        display: block;
        width: min(9.736456808199122vw, 133px);
        aspect-ratio: 133 / 33;
        margin-top: auto;
        padding-right: min(1.0980966325036603vw, 15px);
        font-size: min(1.0248901903367496vw, 14px);
        font-weight: bold;
        letter-spacing: 0.05em;
        line-height: 1;
        color: #fff;
        text-align: right;
        border: none;
        border-radius: 40px;
        background-color: #000;
        position: relative;
        cursor: pointer;
        transition: opacity 300ms 0s ease;

        @media (min-width: 769px) {
          &:hover {
            opacity: 0.7;
          }
        }

        &::before {
          content: '';
          position: absolute;
          top: min(0.7320644216691069vw, 10px);
          left: min(1.8301610541727673vw, 25px);
          width: min(1.6837481698389458vw, 23px);
          aspect-ratio: 23 / 8;
          background: url(../img/about_more_arrow.svg) no-repeat;
        }
      }
    }
  }

  .wrap {
    margin-top: min(1.0980966325036603vw, 15px);

    .deco {
      width: 100%;
    }

    .list_group {
      display: flex;
      gap: min(0.951683748169839vw, 13px);
      margin-top: min(0.7320644216691069vw, 10px);

      .list {
        display: flex;
        flex-direction: column;
        gap: min(0.6588579795021963vw, 9px);
        width: min(19.39970717423133vw, 265px);
        aspect-ratio: 265 / 308;
        padding: min(1.171303074670571vw, 16px) min(0.8784773060029283vw, 12px);
        background-color: #fff;

        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: min(0.7320644216691069vw, 10px) min(0.5124450951683748vw, 7px) min(0.7320644216691069vw, 10px) min(0.7320644216691069vw, 10px);
          background-color: #dcdddd;

          .text {
            font-size: min(1.0248901903367496vw, 1.4rem);
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.3;

            .-small {
              font-size: min(0.8784773060029283vw, 1.2rem);
            }
          }

          .icon {
            width: min(1.4641288433382138vw, 20px);

            &.two {
              width: min(3.294289897510981vw, 45px);
            }
          }
        }

        &:nth-of-type(4) {
          gap: min(0.36603221083455345vw, 5px);

          .item {
            padding: min(0.5124450951683748vw, 7px) min(0.5124450951683748vw, 7px) min(0.5124450951683748vw, 7px) min(0.7320644216691069vw, 10px);
          }
        }
      }
    }
  }

  .num_group {
    display: flex;
    justify-content: space-between;
    margin-top: min(6.222547584187408vw, 85px);

    .card {
      width: min(25.402635431918007vw, 347px);
      aspect-ratio: 347 / 294;
      display: flex;
      flex-direction: column;
      padding: 2px;
      background: #ea0001;
      background: linear-gradient(90deg, #ea0001 0%, #d8027f 100%);
      position: relative;
      z-index: 0;
      padding-block: min(2.1961932650073206vw, 30px) min(2.9282576866764276vw, 40px);

      &::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        background-color: #fff;
        z-index: -1;
      }

      .icon {
        width: min(6.588579795021962vw, 90px);
        margin: 0 auto;
      }

      .head {
        font-size: min(1.8301610541727673vw, 25px);
        font-weight: 700;
        text-align: center;
        margin-top: min(1.4641288433382138vw, 20px);
      }

      .num_text {
        width: 100%;
        margin-top: auto;
      }
    }
  }
}


@media (max-width: 768px) {
  .contents .block {
    margin-top: 40px;

    + .block {
      margin-top: 70px;
    }

    .block_ttl {
      font-size: 2.2rem;
    }

    .container {
      width: 100%;
      margin-top: 8px;
      gap: 13px;

      .card {
        width: calc((100% - 13px) / 2);
        height: 174px;
        aspect-ratio: unset;
        padding: 4px 4px 16px;

        &::before {
          content: '';
          position: absolute;
          top: 2px;
          left: 2px;
          width: 100%;
          height: 100%;
          width: calc(100% - 4px);
          height: calc(100% - 4px);
          background-color: #fff;
          z-index: -1;
        }

        .icon {
          width: 50px;
          margin-top: 23px;
        }

        .head {
          font-size: 1.3rem;
          margin-top: 12px;
        }

        .btn {
          display: block;
          width: 85px;
          aspect-ratio: 85 / 22;
          margin-top: auto;
          padding-right: 10px;
          font-size: 1.0rem;

          &::before {
            content: '';
            position: absolute;
            top: 9px;
            left: 11px;
            width: 12px;
            height: 4px;
            background: url(../img/about_more_arrow.svg) no-repeat;
          }
        }
      }
    }

    .scroll_wrap {
      width: calc(100% + 33px);
      overflow-x: scroll;

      .wrap {
        width: 915px;
        margin-top: 8px;
        padding-right: 33px;

        .deco {
          width: 100%;
        }

        .list_group {
          display: flex;
          gap: 0;
          justify-content: space-between;
          margin-top: 8px;

          .list {
            display: flex;
            flex-direction: column;
            gap: 7px;
            width: 212px;
            aspect-ratio: 212 / 246;
            padding: 12px 11px;
            background-color: #fff;

            .item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 8px 9px;

              .text {
                font-size: 1.1rem;

                .-small {
                  font-size: 1.0rem;
                }
              }

              .icon {
                width: 16px;

                &.two {
                  width: 36px;
                }
              }
            }

            &:nth-of-type(4) {
              gap: 5px;

              .item {
                padding: 5px 9px;
              }
            }
          }
        }
      }
    }

    .num_group {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-top: 48px;

      .card {
        width: 100%;
        aspect-ratio: unset;
        height: 258px;
        background: #ea0001;
        padding-block: 25px 35px;

        .icon {
          width: 79px;
        }

        .head {
          font-size: 2.2rem;
          margin-top: 15px;
        }

        .num_text {
          width: 301px;
          margin: auto auto 0;
        }
      }
    }
  }
}

/* ↑↑↑ container ↑↑↑ */

/* ↓↓↓ other ↓↓↓ */
.other {
  background: url(../img/benefits/other-fv-bg_pc.jpg) no-repeat;
  background-size: cover;
  background-position: center top;
  padding: min(12.445095168374817vw, 170px) 0 min(11.346998535871156vw, 155px);
  overflow-x: clip;
}

@media (max-width: 768px) {
  .other {
    background: url(../img/benefits/other-fv-bg_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 70px 0 50px;
    overflow-x: clip;
  }
}

.other .other_ttl {
  font-size: min(2.1961932650073206vw, 30px);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 768px) {
  .other .other_ttl {
    font-size: 2.0rem;
    line-height: 1.7;
  }
}

.other .other_read {
  font-size: min(1.4641288433382138vw, 20px);
  color: #fff;
  margin-top: min(2.1961932650073206vw, 30px);
  line-height: 2.1;
  text-align: justify;
  word-break: break-all;
}

@media (max-width: 768px) {
  .other .other_read {
    font-size: 1.3rem;
    margin-top: 20px;
    line-height: 2.0;
    letter-spacing: 0;
  }
}

.other .other_image {
  width: 100%;
  margin-top: min(4.026354319180088vw, 55px);
}

@media (max-width: 768px) {
  .other .other_image {
    margin-top: 20px;
  }
}

.other .action {
  margin-top: min(11.71303074670571vw, 160px);

  .action_ttl {
    display: flex;
    align-items: baseline;
    color: #fff;

    .title {
      font-size: min(2.4890190336749636vw, 3.4rem);
      font-family: var(--text-fif);
      font-weight: 700;
    }

    .cap {
      margin-left: 1.3em;
      font-size: min(1.0981vw, 1.5rem);
    }
  }

  .container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: min(1.0980966325036603vw, 15px);

    .card {
      display: flex;
      flex-direction: column;
      width: min(25.402635431918007vw, 347px);
      aspect-ratio: 347/370;
      background: linear-gradient(135deg, #d70000 0%, #5c0100 100%);
      padding: min(2.342606149341142vw, 32px);

      .card_image {
        width: 100%;
      }

      .head {
        font-size: min(1.4641288433382138vw, 2.0rem);
        font-weight: 700;
        color: #fff;
        line-height: 1.5;
        margin-top: min(1.7569546120058566vw, 24px);
      }

      .btn {
        display: block;
        width: min(9.736456808199122vw, 133px);
        aspect-ratio: 133 / 33;
        margin-top: auto;
        padding-right: min(1.0980966325036603vw, 15px);
        font-size: min(1.0248901903367496vw, 14px);
        font-weight: bold;
        letter-spacing: 0.05em;
        line-height: 1;
        text-align: right;
        color: #000;
        border: none;
        border-radius: 40px;
        background-color: #fff;
        position: relative;
        cursor: pointer;
        transition: opacity 300ms 0s ease;

        @media (max-width: 768px) {
          width: 117px;
          padding-right: 12px;
          font-size: 13px;
        }

        @media (min-width: 769px) {
          &:hover {
            opacity: 0.7;
          }
        }

        &::before {
          content: '';
          position: absolute;
          top: min(0.7320644216691069vw, 10px);
          left: min(1.8301610541727673vw, 25px);
          width: min(1.6837481698389458vw, 23px);
          aspect-ratio: 23 / 8;
          mask-image: url(../img/about_more_arrow.svg);
          mask-repeat: no-repeat;
          mask-size: cover;
          background-color: #000;

          @media (max-width: 768px) {
            top: 9px;
            left: 23px;
            width: 20px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .other .action {
    margin-top: 65px;

    .action_ttl {
      .title {
        font-size: 3.1rem;
      }

      .cap {
        font-size: 1.4rem;
      }
    }

    .container {
      width: 100%;
      flex-direction: column;
      gap: 20px;

      .card {
        width: 100%;
        aspect-ratio: unset;
        padding: 28px;

        .head {
          font-size: 1.8rem;
          margin-top: 20px;
        }

        .btn {
          width: 117px;
          padding-right: 12px;
          font-size: 13px;
          margin-top: 27px;

          &::before {
            top: 9px;
            left: 23px;
            width: 20px;
          }
        }
      }
    }
  }
}

.other .sports {
  margin-top: min(11.71303074670571vw, 160px);

  .sports_ttl {
    display: flex;
    align-items: center;
    color: #fff;

    .title {
      font-size: min(2.4890190336749636vw, 3.4rem);
      font-family: var(--text-fif);
      font-weight: 700;
    }

    .cap {
      margin-left: 1.3em;
      font-size: min(1.0981vw, 1.5rem);
    }
  }

  .container {
    display: flex;
    flex-wrap: wrap;
    gap: min(4.026354319180088vw, 55px) min(2.12298682284041vw, 29px);
    width: 100%;
    margin-top: min(1.0980966325036603vw, 15px);

    .card {
      width: min(25.402635431918007vw, 347px);

      .card_image {
        width: 100%;
      }

      .head {
        font-size: min(1.3177159590043925vw, 1.8rem);
        font-weight: 700;
        color: #fff;
        margin-top: min(0.7320644216691069vw, 10px);
      }
    }
  }
}

@media (max-width: 768px) {
  .other .sports {
    margin-top: 65px;

    .sports_ttl {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;

      .title {
        font-size: 3.1rem;
        letter-spacing: 0;
      }

      .cap {
        font-size: 1.4rem;
        margin-left: 0;
      }
    }

    .container {
      flex-direction: column;
      gap: 30px;
      margin-top: 20px;

      .card {
        width: 100%;

        .head {
          font-size: 1.8rem;
          margin-top: 10px;
        }
      }
    }
  }
}

/* ↑↑↑ other ↑↑↑ */

/* ↓↓↓ sns_link_group ↓↓↓ */
.sns_link_group {
  width: fit-content;
  display: flex;
  gap: min(1.0248901903367496vw, 14px);
  margin: min(6.58858vw, 90px) auto 0;

  .sns_link {
    display: block;
    width: min(3.6603221083455346vw, 50px);
  }
}

@media (max-width: 768px) {
  .sns_link_group {
    gap: 12px;
    margin: 75px auto 0;

    .sns_link {
      display: block;
      width: 38px;
    }
  }
}

/* ↑↑↑ sns_link_group ↑↑↑ */

/* ↓↓↓ modal ↓↓↓ */
.js-modal.benefits .modal__content {
  background: linear-gradient(90deg, rgba(69, 176, 53, 1) 0%, rgba(0, 64, 152, 1) 100%);

  .wrap {
    padding: min(4.758418740849195vw, 65px) min(5.856515373352855vw, 80px);

    .icon {
      width: min(6.881405563689605vw, 94px);
    }

    .modal_ttl {
      font-size: min(2.9282576866764276vw, 4.0rem);
      font-weight: 700;
      margin-top: min(2.9282576866764276vw, 40px);
    }

    .text {
      font-size: min(1.4641288433382138vw, 2.0rem);
      margin-top: min(2.562225475841874vw, 35px);
    }
  }
}

@media (max-width: 768px) {
  .js-modal.benefits .modal__content {
    background: linear-gradient(90deg, rgba(69, 176, 53, 1) 0%, rgba(0, 64, 152, 1) 100%);

    .wrap {
      padding: 70px 30px 30px;

      .icon {
        width: 50px;
        margin: 0 auto;
      }

      .modal_ttl {
        font-size: 2.0rem;
        margin-top: 25px;
        text-align: center;
      }

      .text {
        font-size: 1.2rem;
        margin-top: 25px;
      }
    }
  }
}

.js-modal.action .modal__content {
  background: linear-gradient(135deg, #d70000 0%, #5c0100 100%);

  .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: min(2.049780380673499vw, 28px);
    padding: min(4.392386530014641vw, 60px) min(5.856515373352855vw, 80px) min(5.856515373352855vw, 80px);

    .modal_ttl {
      width: 100%;
      font-size: min(2.4890190336749636vw, 3.4rem);
      font-weight: 700;
      margin-top: min(1.7569546120058566vw, 24px);
    }

    .text_wrap {
      width: min(40.33674963396779vw, 551px);

      .text {
        font-size: min(1.2445095168374818vw, 1.7rem);
        line-height: 2.11764;
        text-align: justify;
        word-break: break-all;
        letter-spacing: 0.05em;
      }
    }

    .block_image {
      width: min(23.352855051244507vw, 319px);
      margin-top: min(0.7320644216691069vw, 10px);
    }
  }
}

@media (max-width: 768px) {
  .js-modal.action .modal__content {
    background: linear-gradient(135deg, #d70000 0%, #5c0100 100%);

    .wrap {
      flex-direction: column;
      align-items: center;
      gap: 0;
      padding: 48px 30px 35px;

      .modal_ttl {
        width: 100%;
        font-size: 2.0rem;
        font-weight: 700;
        margin-top: 10px;
        text-align: center;
        order: 2;
      }

      .text_wrap {
        width: 100%;
        order: 3;

        .text {
          font-size: 1.2rem;
          margin-top: 10px;
        }
      }

      .block_image {
        width: 100%;
        margin-top: 0;
        order: 1;
      }
    }
  }
}


/* ↑↑↑ modal ↑↑↑ */