/* ===========================================
 * FEATURE
 * ======================================== */

.feature {
  padding: 0 5% 6rem;
  .inner {
    background-color: var(--bg-gray);
    padding: 2.4rem 2rem;
  }
  .feature-detail {
    background-color: transparent;
    > .line-title {
      display: flex;
      align-items: center;
      gap: 2rem;
      color: var(--text-main);
    }
    > .line-title::before,
    > .line-title::after {
      content: "";
      flex: 1;
      border-top: 1px solid currentColor;
    }
    > .line-title > h2 {
      color: var(--text-main);
      font-size: 1.8rem;
    }
    > .line-title + ul {
      margin-top: 4rem;
    }
    > ul {
      display: flex;
      flex-direction: column;
      gap: 2.8rem;
    }
    > ul > li > h3 {
      font-size: 1.8rem;
    }
    > ul > li > p {
      line-height: 2;
    }
    > ul > li > h3 + p {
      margin-top: 1.6rem;
    }
  }
  .lead, 
  .title {
    text-align: left;
  }
  .img {
    margin-top: 1.6rem;
  }
  .text {
    margin-top: 1.6rem;
  }
  .text .strong {
      color: var(--text-main);
      text-decoration: underline;
      font-weight: var(--text-bold);
  }
}

@media screen and (min-width:769px) {
  .feature {
    .inner {
      padding: 6.4rem;
    }
    .feature-detail {
      > ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
      }
      > ul > li {
        width: calc((100% - 2rem) / 2);
      }
    }
  }
}

@media screen and (min-width:960px) {
  .feature {
    padding-bottom: 10rem;
    .inner {
      width: 100%;
    }
    .feature-summary {
      min-height: 50rem;
      background: calc(100%) bottom / 48% no-repeat url(../images/feature-pc.png);
      background-color: var(--bg-gray);
    }
    .title__area {
      width: 58%;
      max-width: 48rem;
    }
    .img {
      display: none;
    }
    .text {
      width: 58%;
      max-width: 48rem;
    }
  }
}

@media screen and (min-width:1024px) {
  .feature {
    .inner {
      padding: 6.4rem 10rem;
    }
    .feature-summary {
      background: calc(100% - 2rem) bottom / 44% no-repeat url(../images/feature-pc.png);
      background-color: var(--bg-gray);
    }
    .feature-detail {
      > ul {
        gap: 4rem;
      }
      > ul > li {
        width: calc((100% - 8rem) / 3);
      }
      > ul > li > h3 {
        font-size: 2.4rem;
      }
    }
    .feature-summary + .feature-detail {
      margin-top: 2px;
    }
  }
}

@media screen and (min-width:1280px) {
  .feature {
    .inner {
      max-width: 120rem;
      margin: 0 auto;
    }
    .feature-summary {
      background: calc(100% - 7rem) bottom / 40% no-repeat url(../images/feature-pc.png);
      background-color: var(--bg-gray);
    }
  }
}