.page_features main {
  counter-reset: count 0;
}

.features_content {
  margin-bottom: 6rem;

  .inner {
    .features_title {
      font-size: var(--fs-sec-title);
      @media (min-width:768px) {
        display: flex;
      }

      &::before {
        display: block;
        counter-increment: count 1;
        content: "Point"counter(count);
        color: #FFF;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        padding: 0.7em 0;
        @media (min-width:768px) {
          display: flex;
          align-items: center;
          padding: 0 2em;
        }
      }
      & span {
        display: block;
        padding: 0.7em 1em;
      }
    }
    .content_block {
      padding: 3rem 2rem 5rem;
      border: 3px solid;
      border-top: none;
      @media (min-width:768px) {
        padding: 4rem 2.5rem 6rem;
      }
    }
  }
}
#features_point1 {
  .inner {
    .features_title {
      background: var(--pale-pink);

      &::before {
        background: var(--accent-pink);
      }
    }
    .content_block {
      border-color: var(--accent-pink);
    }
  }
}
#features_point2 {
  .inner {
    .features_title {
      background: var(--pale-orange);

      &::before {
        background: var(--accent-orange);
      }
    }
    .content_block {
      border-color: var(--accent-orange);
    }
  }
}
#features_point3 {
  @media (min-width:768px) {
    margin-bottom: 15rem;
  }

  .inner {
    .features_title {
      background: var(--pale-green);

      &::before {
        background: var(--accent-green);
      }
    }
    .content_block {
      border-color: var(--accent-green);
    }
  }
}
.text_first {
  font-size: clamp(1.6rem,calc(1.4285714285714285rem + 0.4761904761904762vw),2rem);
  font-weight: 700;
  line-height: 1.68;
  margin-bottom: 5rem;
  @media (min-width:768px) {
    line-height: 2;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: center;
    max-width: 36em;
    margin: 0 auto 5rem;
  }
}
.text_middle {
  font-weight: 700;
  line-height: 1.68;
  margin-bottom: 3rem;
  @media (min-width:768px) {
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: center;
    max-width: 67rem;
    margin: 0 auto 3rem;
  }
}
.point_list {
  margin-bottom: 2rem;
  @media (min-width:768px) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 103rem;
    margin: 0 auto 2rem;
    gap: 0 7%;
    position: relative;
  }
  > li {
    margin-bottom: 3rem;
    @media (min-width:768px) {
      width: calc(93% / 2);
    }
    & p {
      font-size: clamp( 1.4rem,calc(1.3142857142857142rem + 0.2380952380952381vw),1.6rem);
      font-weight: 700;
      width: fit-content;
      margin: 0.5em auto 0;
    }
  }
}
#features_point1 .point_list > li > p {
  font-size: 115%;
}
#features_point1 .point_list > li:nth-child(1)::after {
  display: block;
  content: "＋";
  color: var(--accent-pink);
  font-weight: 700;
  font-size: 3rem;
  text-align: center;
  margin: 2.5rem auto;
  @media (min-width:768px) {
    position: absolute;
    top: 24%;
    left: 48%;
  }
}
#features_point2 .point_list {
  display: block;

  > li {
    @media (min-width:768px) {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 7%;
    }

    .img_wrap {
      @media (min-width:768px) {
        width: calc(93% / 2);
      }
    }
    .text_wrap {
      @media (min-width:768px) {
        width: calc(93% / 2);
      }
    }
  }
}
.skill_mark {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  gap: 1.5rem;
}
.skill_up {
  text-align: center;
  line-height: 2;

  & span {
    font-size: clamp( 2rem, calc( 1.653846153846154rem + 0.9615384615384616vw ), 3rem );
    font-weight: 700;
    word-break: keep-all;
    overflow-wrap: anywhere;
    background: linear-gradient(transparent 60%,#FCFC30 60%);
  }
}
#features_point1 .skill_up::before {
  display: block;
  content: url("/assets/img/features_point1_arow.png");
  text-align: center;
}
#features_point3 .skill_up::before {
  display: block;
  content: url("/assets/img/features_point3_arow.png");
  text-align: center;
}
#features_point2 .skill_up {
  margin-top: 4rem;
}
.merit_list {
  & dt {
    color: var(--accent-orange);
    font-size: clamp( 1.4rem,calc(1.3142857142857142rem + 0.2380952380952381vw),1.6rem);
    margin: 1.5em 0 0.5em;

    &::before {
      content: "【";
    }
    &::after {
      content: "】";
    }
  }
  & dd {
    display: flex;
    font-size: clamp( 1.4rem,calc(1.3142857142857142rem + 0.2380952380952381vw),1.6rem);
    font-weight: 700;
    line-height: 1.68;
    margin-bottom: 0.3em;
    &::before {
      display: inline-block;
      content: "●";
      color: var(--accent-orange);
      font-size: 75%;
      line-height: 2.2;
      margin-right: 0.5em;
    }
  }
}