.feature {
  padding: 87px 0 50px;
  position: relative;
  overflow-x: clip;
  @media screen and (min-width: 769px) {
    padding: 201px 0 90px;
  }
}
:where(.feature) {
  .link {
    display: grid;
    place-content: center;
    @media screen and (max-width: 768px) {
      gap: 60px;
      margin-bottom: 60px;
    }
    @media screen and (min-width: 769px) {
      grid-template-columns: min(357px, calc(var(--vw) * 357)) min(357px, calc(var(--vw) * 357)) min(357px, calc(var(--vw) * 357));
      margin-bottom: 90px;
      gap: min(15px, calc(var(--vw) * 15));
    }
  }
  .link__item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    &::after {
      content: "";
      display: inline;
      position: absolute;
      background-image: url("../../images/icon_arrow-down.svg");
      background-size: contain;
      background-repeat: no-repeat;
      bottom: -35px;
      left: 50%;
      transform: translateX(-50%);
      width: 21px;
      height: 21px;
    }
  }
  .link__image {
    width: calc(var(--vw) * 180);
    margin-bottom: 12px;
    @media screen and (min-width: 769px) {
      margin-bottom: 19px;
      width: min(240px, calc(var(--vw) * 240));
    }
  }
  .link__sub-text {
    font-weight: bold;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 1.3px;
    line-height: 20px;
    margin-bottom: 5px;
    @media screen and (min-width: 769px) {
      margin-bottom: 12px;
    }
  }
  .link__title {
    font-weight: bold;
    position: relative;
    font-size: calc(var(--rem) * 22);
    letter-spacing: 2.2px;
    padding-left: 30px;
    @media screen and (min-width: 769px) {
      padding-left: 30px;
    }
    &::before {
      content: "";
      display: inline;
      position: absolute;
      left: 0;
      background-image: url("../../images/icon_check-blue.svg");
      background-size: contain;
      background-repeat: no-repeat;
      top: 50%;
      transform: translateY(-50%);
      width: 21.7px;
      height: 21px;
    }
  }
  .section__head {
    color: #FFF;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    @media screen and (max-width: 768px) {
      background-image: url("../../images/feature/bg_feature-section-sp.webp");
      height: calc(var(--vw) * 259);
    }
    @media screen and (min-width: 769px) {
      background-image: url("../../images/feature/bg_feature-section.webp");
      height: calc(var(--vw) * 402);
    }
  }
  .section__sub-title {
    font-weight: bold;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 1.3px;
    margin-bottom: 7px;
    line-height: 24px;
    text-align: center;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 20);
      letter-spacing: 2px;
      margin-bottom: 15px;
    }
  }
  .section__title {
    font-weight: bold;
    position: relative;
    font-size: calc(var(--rem) * 20);
    letter-spacing: 2px;
    padding-left: 31px;
    margin-bottom: 17px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 38);
      letter-spacing: 3.8px;
      margin-bottom: 25px;
      padding-left: 54px;
    }
    &::before {
      content: "";
      display: inline;
      position: absolute;
      background-image: url("../../images/icon_check.svg");
      background-size: contain;
      background-repeat: no-repeat;
      top: 56%;
      left: 0%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      @media screen and (min-width: 769px) {
        width: 39px;
        height: 39px;
      }
    }
  }
  .section__lead {
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 1.3px;
    line-height: 26px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 1.4px;
      line-height: 28px;
    }
  }
  .section__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    @media screen and (max-width: 768px) {
      margin-bottom: 25px;
    }
  }
  .section__item {
    display: flex;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      padding: 47px 25px;
    }
    @media screen and (min-width: 769px) {
      padding: 70px 0;
      width: min(1200px, calc(var(--vw) * 1200));
      margin: 0 auto;
      justify-content: center;
      align-items: center;
      gap: min(44px, calc(var(--vw) * 44));
    }
    &.two-column {
      @media screen and (min-width: 769px) {
        flex-direction: column;
      }
      >div {
        width: 100%;
      }
      .section__item-image {
        @media screen and (min-width: 769px) {
          width: min(1062px, calc(var(--vw) * 1062));
        }
      }
    }
  }
  .section__item:not(.two-column):nth-child(even) {
    @media screen and (min-width: 769px) {
      flex-direction: row-reverse;
    }
  }
  .section__item + .section__item {
    border-top: dotted 1.93px #91C4DF;
  }
  .section__item-title {
    font-weight: bold;
    position: relative;
    font-size: calc(var(--rem) * 17);
    letter-spacing: 1.7px;
    line-height: 35px;
    padding-left: 32px;
    margin-bottom: 20px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 25);
      letter-spacing: 2.5px;
      line-height: 45px;
      padding-left: 39px;
      margin-bottom: 39px;
    }
    &::before {
      content: "";
      display: inline;
      position: absolute;
      left: 0;
      top: 10px;
      background-image: url("../../images/icon_check-blue.svg");
      background-size: contain;
      background-repeat: no-repeat;
      width: 21px;
      height: 21px;
      @media screen and (min-width: 769px) {
        width: 28px;
        height: 27px;
      }
    }
  }
  .section__item-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;
      padding-left: 39px;
    }
    .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, #FAFFC2, #FAFFC2);
      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);
      }
    }
  }
  .section__item-image {
    @media screen and (max-width: 768px) {
      margin-bottom: 20px;
    }
    @media screen and (min-width: 769px) {
      width: min(560px, calc(var(--vw) * 560));
    }
    &.coaching-3 {
      @media screen and (min-width: 769px) {
        width: min(485px, calc(var(--vw) * 485));
      }
    }
    &.coaching-4 {
      @media screen and (min-width: 769px) {
        width: min(525px, calc(var(--vw) * 525));
      }
    }
    &.pro-1, &.pro-3 {
      @media screen and (min-width: 769px) {
        width: min(510px, calc(var(--vw) * 510));
      }
    }
    &.pro-2 {
      @media screen and (min-width: 769px) {
        width: min(452px, calc(var(--vw) * 452));
      }
    }
  }

  .voice {
    background: rgba(3, 110, 182, 0.08);
    padding: 53px 0 20px;
    @media screen and (min-width: 769px) {
      padding: 56px 0 50px;
    }
  }
  .voice__slide {
    border: 1px solid #004F92;
    background: #FFF;
    display: flex;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      width: calc(var(--vw) * 300);
      align-items: center;
      gap: 20px;
      border-bottom: 9px solid #004F92;
      padding: 15px 15px 29px;
    }
    @media screen and (min-width: 769px) {
      padding: 40px 33px;
      border-bottom: 10px solid #004F92;
      width: min(595px, calc(var(--vw) * 595));
      align-items: flex-start;
      gap: 17px;
    }
  }
  .voice__icon {
    width: calc(var(--vw) * 105);
    @media screen and (min-width: 769px) {
      width: 118px;
    }
  }
  .voice__text {
    font-weight: bold;
    font-size: calc(var(--rem) * 13.5);
    letter-spacing: 1.35px;
    line-height: 24px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 1.5px;
      line-height: 30px;
    }
  }
  .voice-swiper {
    padding-bottom: 46px;
    @media screen and (min-width: 769px) {
      padding-bottom: 65px;
    }
  }
  .swiper .swiper-slide {
    height: auto;
  }

  .swiper .swiper-slide-item {
    height: 100%;
  }
  .swiper-pagination-bullet, .swiper-pagination-bullet-active {
    background: #D9D9D9 !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 12px !important;
    opacity: 1 !important;
    @media screen and (min-width: 769px) {
      width: 14px !important;
      height: 14px !important;
      margin: 0 12px !important;
    }
  }
  .swiper-pagination-bullet-active {
    background: #004F92 !important;
    width: 15px !important;
    height: 15px !important;
    @media screen and (min-width: 769px) {
      width: 16px !important;
      height: 16px !important;
      margin: 0 12px !important;
    }
  }
  .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .differnce {
    @media screen and (max-width: 768px) {
      margin-bottom: 67px;
    }
    @media screen and (min-width: 769px) {
      margin-top: 40px;
    }
  }
  .differnce__text {
    text-align: center;
    font-weight: bold;
    color: #454545;
    @media screen and (max-width: 768px) {
      line-height: 24px; 
      font-size: calc(var(--rem) * 13);
      letter-spacing: 1.3px;
      margin-bottom: 26px;
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 17);
      letter-spacing: 1.7px;
      margin-bottom: 49px;
    }
  }
  .differnce__image {
    width: calc(var(--vw) * 534);
    @media screen and (min-width: 769px) {
      margin: 0 auto 120px auto;
      width: min(1031px, calc(var(--vw) * 1031));
    }
  }
  .differnce__image-wrap {
    @media screen and (max-width: 768px) {
      overflow-x: scroll;
    }
  }
}