.feature .heading-component {
  @media (min-width: 769px) {
    padding-top: 0;
  }
  .english {
    font-size: min(calc(100vw * (180 / 1280)), 180px);
    @media (max-width: 768px) {
      font-size: calc(100vw * (88 / 375));
    }
  }
}

#feature {
  padding-block: 62px 0;
  padding-inline: 40px;
  position: relative;
  background: linear-gradient(180deg, #fbfbfd 0%, #f2f4f7 100%);
  z-index: 1;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-inline: calc(50% - 50vw);
    z-index: -1;
    background: url(../../img/feature/bg.png) no-repeat center top / contain;
    mix-blend-mode: hard-light;
  }

  @media (max-width: 768px) {
    width: 100%;
    padding: calc(100vw * (49 / 375)) calc(100vw * (16 / 375)) 0;
  }

  .card-container {
    display: grid;
    grid-template-rows: auto;
    justify-content: center;

    &.three {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;

      @media (max-width: 768px) {
        grid-template-columns: auto;
        grid-template-rows: repeat(3, auto);
      }
    }

    &.two {
      width: 74.6%;
      margin-inline: auto;
      grid-template-columns: 1fr 1.046fr;
      gap: 40px;

      @media (max-width: 768px) {
        width: 100%;
        grid-template-columns: auto;
        grid-template-rows: repeat(2, auto);
      }
    }

    .card {
      background-color: #fff;
      position: relative;
      padding: 54px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 8px;
        border: 2px solid transparent;
        background: linear-gradient(90deg, #953bbb 0%, #48a9e8 100%) border-box border-box;
        mask:
          linear-gradient(#fff 0 0) padding-box,
          linear-gradient(#fff 0 0) border-box;
        mask-composite: exclude;
      }

      @media (max-width: 768px) {
        padding: calc(100vw * (24 / 375));
      }

      .number {
        border-radius: 8px 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 40px;
        font-weight: bold;
        font-family: 'futura-pt', sans-serif;
        line-height: 1;
        color: #ffffff;
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(319deg, #48a9e8 0%, #953bbb 97.22%) border-box border-box;

        @media (max-width: 768px) {
          font-size: calc(100vw * (36 / 375));
          width: calc(100vw * (60 / 375));
          height: calc(100vw * (60 / 375));
        }
      }

      .heading {
        font-size: 2.2rem;
        font-weight: bold;
        line-height: 1.6em;
        letter-spacing: 0;
        color: #1a1a1a;
        text-align: center;

        @media (max-width: 768px) {
          font-size: calc(100vw * (23 / 375));
        }

        .pc_only {
          @media (max-width: 768px) {
            display: none;
          }
        }
      }

      .image {
        max-width: 194px;
        margin-inline: auto;
      }

      .text {
        font-size: 1.6rem;
        line-height: 1.6em;
        letter-spacing: 0;
        color: #1a1a1a;
        text-align: left;

        @media (max-width: 768px) {
          font-size: calc(100vw * (14 / 375));
        }
      }

      .note {
        font-size: 1.2rem;
        line-height: 1.5em;
        letter-spacing: 0;
        color: #949494;
        text-align: center;

        /* @media (max-width: 768px) {
					font-size: 3.2vw;
				} */

        & > a {
          text-decoration: underline;
        }
      }
    }
  }
}