/*====================================*/
/* top */
/*====================================*/
/*== kv-slide =======*/
.kv-slide {
  padding-top: clamp(28px, calc(26.5px + 0.25vw), 30px);
  a {
    display: block;
  }
}
/*== service =======*/
.service {
  padding-top: clamp(58px, calc(49px + 1.5vw), 70px);
  padding-bottom: clamp(56px, calc(41px + 2.5vw), 76px);

  .group {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, calc(2.5px + 6.25vw), 90px) 0;
    margin-top: clamp(27px, calc(7.5px + 3.25vw), 53px);
  }
  .group-item {
    grid-template-columns: 1.2fr 1fr;
    width: 100%;
    min-height: 570px;
    padding-block: clamp(33px, calc(20.25px + 2.125vw), 50px);
    padding-inline: clamp(32px, calc(8.75px + 3.875vw), 63px) clamp(32px, calc(8.75px + 3.875vw), 63px);
    border-radius: 20px;
  }
  .group-item_img {
    h3 {
      position: relative;
      line-height: 1.2;
      padding-left: 22px;
      margin-bottom: clamp(26px, calc(13.249999999999998px + 2.125vw), 43px);
    }
    h3::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 12px;
      height: 100%;
      border-left: 12px solid var(--color-border);
    }
    h3::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 12px;
      height: 14px;
      background-color: var(--color-dark-gray);
    }
    img {
      max-width: 570px;
      width: 100%;
    }
    @media (max-width: 768px) {
      img {
        margin-inline: auto;
      }
    }
  }
  @media (max-width: 768px) {
    .group-item_img {
      margin-bottom: 16px;
    }
  }
  .group-item_txt {
    padding-left: 28px;
    flex-direction: column;
    align-items: flex-start;

    .group-item_txt_group {
      max-width: 460px;
      width: 100%;
    }
    dl {
      color: var(--font-size-16-14);
      padding-block: clamp(10px, calc(7.75px + 0.375vw), 13px) clamp(12px, calc(9.75px + 0.375vw), 15px);
      padding-inline: clamp(15px, calc(10.5px + 0.75vw), 21px);
      margin-top: clamp(15px, calc(10.5px + 0.75vw), 21px);
      background-color: var(--color-white);
    }
    .btn-group {
      max-width: 460px;
      width: 100%;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 29px 0;
    }
  }
  @media (max-width: 768px) {
    .group-item_txt {
      padding-left: 24px;

      .btn-group {
        width: 100%;
        gap: 15px 0;
        margin-top: 30px;
      }
    }
  }
  @media (max-width: 576px) {
    .group-item_txt {
      padding-left: 0;
    }
  }
}
.service-drive {
  --color-border: #00a9be;
  background-color: var(--colA3);
}
.service-commute {
  --color-border: #9f9f29;
  background-color: var(--color-light-ivory);
}
.service-motorcycle {
  --color-border: #799500;
  background-color: var(--color-light-green);

  .icon-group {
    margin-bottom: clamp(10px, calc(6.25px + 0.625vw), 15px);
  }
  dl {
    display: block;
  }
  .group-item_txt .btn-group {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px 0;
  }
}