.p-principle {
  margin-block: clamp(6rem, 10vw, 10rem);
}
.p-principle__title {
  color: #000;
  font-weight: 700;
  line-height: calc(72 / 30);
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: 0.07em;
  @media (max-width: 767.98px) {
    font-size: 2rem;
  }
}
.p-principle__text {
  line-height: calc(34 / 18);
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}
.p-principle__text--lead {
  margin-top: 20px;
}
.p-principle__text--note {
  margin-top: 20px;
}
.p-principle__box {
  margin-top: clamp(4rem, 8vw, 8rem);
  padding-block: clamp(30px, 6.5vw, 65px);
  padding-inline: clamp(15px, 4vw, 70px);
  background-color: #F8F8F8;
}
.p-principle__list {
  display: grid;
  grid-auto-columns: minmax(0, auto);
  row-gap: clamp(20px, 4vw, 40px);
  padding-left: 1.5em;
  list-style-type: decimal;
}
.p-principle__item {
  line-height: 2;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
  &::marker {
    color: #0075C2;
  }
}