/*============================
#features
============================*/
section#features {
  display: flex;
  padding: var(--scale-80, 80px) var(--padding-inline, 20px)
    var(--scale-40, 40px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--scale-56, 56px);
  background: url(../images/about-divider.svg) center top / 100% auto no-repeat,
    var(--surface-variant, #f9eee2);
}
section#features h2 {
  color: var(--on-surface, #423527);
  text-align: center;
  font-family: "Zen Maru Gothic";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
section#features div.features__items {
  display: flex;
  max-width: var(--width-md, 1080px);
  align-items: center;
  gap: var(--scale-40, 40px);
  align-self: stretch;
  margin-inline: auto;
}

section#features div.features__items div.items__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-24, 24px);
  flex: 1 0 0;
  position: relative;
}

section#features div.features__items div.items__item div.item__num {
  display: flex;
  padding: 0 var(--scale-16, 16px) var(--scale-16, 16px) 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  border-radius: 0 0 var(--scale-16, 16px) 0;
  left: 0;
  top: 0;
  background: var(--surface-variant, #f9eee2);
  color: var(--primary-variant, #e0732e);
  font-family: "Zen Maru Gothic";
  font-size: var(--scale-56, 56px);
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 56px */
}
section#features div.features__items div.items__item figure.item__image {
  padding-top: var(--scale-32);
}

@media screen and (max-width: 768px) {
  section#features div.features__items {
    flex-direction: column;
  }
  section#features div.features__items div.items__item {
    flex-direction: row;
  }
  section#features div.features__items div.items__item figure.item__image {
    flex: 0 0 40%;
  }
}

section#features div.features__items div.items__item figure.item__image img {
  aspect-ratio: 334/187.88;
  width: 100%;
  border-radius: var(--scale-16, 16px);
  object-fit: cover;
}
section#features div.features__items div.items__item div.item__text {
}
section#features div.features__items div.items__item div.item__text h3 {
  color: var(--primary-variant, #e0732e);
  text-align: center;
  font-family: "Zen Maru Gothic";
  font-size: var(--scale-32, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
section#features div.features__items div.items__item div.item__text p {
  color: var(--on-surface);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
}

/*============================
#warning
============================*/
section#warning {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--gap-row, 56px);
  align-self: stretch;
  background: url(../images/solution-divider.svg) center top /
    min(703px, 100vw / 375 * 293) auto no-repeat;
}
section#warning h2 {
  color: var(--highlight, #de1d0c);
  text-align: center;
  font-family: "Zen Maru Gothic";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
section#warning div.warning__body {
  color: var(--on-surface, #423527);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 200%; /* 40px */
}
section#warning div.warning__body span {
}
section#warning div.warning__body span.highlight {
  color: var(--highlight, #de1d0c);
}