/*============================
#about
============================*/
section#about {
  display: flex;
  padding-bottom: var(--padding-block, 80px);
  padding-inline: var(--padding-inline);
  flex-direction: column;
  align-items: center;
  gap: var(--gap-row, 56px);
  background: url(../images/about-divider.svg) center top / 100% auto no-repeat,
    url(../images/about-bg.png) right top / min(100vw/ 375 * 136, 407px) auto
      no-repeat,
    var(--surface-variant, #f9eee2);
}
section#about div.about__bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--scale-32, 32px);
  margin-top: -1em;
}
section#about div.about__bridge span {
  display: flex;
  padding: var(--scale-8, 8px) var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  border-radius: 1000px;
  background: var(--on-surface, #423527);
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
section#about div.about__bridge svg {
  width: var(--scale-20, 20px);
  height: 8px;
  aspect-ratio: 5/2;
  margin-top: -1px;
}
section#about div.about__heading {
}
section#about div.about__heading 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: 170%; /* 68px */
}
section#about div.about__heading h2 span.highlight {
  color: var(--highlight, #de1d0c);
}
section#about div.about__service {
  display: flex;
  max-width: var(--width-md, 1080px);
  padding: var(--scale-40, 40px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-40, 40px);
  align-self: stretch;
  border-radius: var(--scale-16, 16px);
  background: var(--surface, #fff);
  margin-inline: auto;
}

section#about div.about__service h3 {
  color: var(--primary-variant, #e0732e);
  text-align: center;
  font-family: "Zen Maru Gothic";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
section#about div.about__service div.service__body {
  display: flex;
  align-items: center;
  gap: var(--gap-column, 40px);
  align-self: stretch;
}

section#about div.about__service div.service__body div.body__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--scale-20, 20px);
}
section#about div.about__service div.service__body div.body__text p {
  color: var(--on-surface);
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 200%; /* 40px */
}
section#about div.about__service div.service__body figure {
  flex: 1 0 0;
  align-self: stretch;
}
section#about div.about__service div.service__body figure img {
  border-radius: var(--scale-16, 16px);
}
@media screen and (max-width: 960px) {
  section#about div.about__service div.service__body {
    flex-direction: column;
  }
  section#about div.about__service div.service__body figure img {
    width: 100%;
    height: calc(100vw / 375 * 160);
    object-fit: cover;
  }
}

/*============================
#solution
============================*/
section#solution {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 20px);
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: url(../images/solution-divider.svg) center top /
    min(703px, 100vw / 375 * 293) auto no-repeat;
  gap: var(--scale-40);
}
section#solution div.solution__bridge {
  padding: var(--scale-4, 4px) var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  border-radius: 1000px;
  background: var(--primary, #f0813b);
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Zen Maru Gothic";
  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
section#solution div.solution__body {
  display: flex;
  max-width: var(--width-md, 1080px);
  align-items: center;
  gap: var(--scale-20, 20px);
  align-self: stretch;
  margin-inline: auto;
}

section#solution div.solution__body div.body__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-16, 16px);
  flex: 1 0 580px;
}

section#solution div.solution__body div.body__text h2 {
  flex: 1 0 0;
  color: var(--on-surface, #423527);
  font-family: "Zen Maru Gothic";
  font-size: var(--scale-32, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
section#solution div.solution__body div.body__text p {
  align-self: stretch;
  color: var(--on-surface, #423527);
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 200%; /* 40px */
}
section#solution div.solution__body figure {
  flex: 1 1 400px;
}
section#solution div.solution__body figure img {
}
@media screen and (max-width: 880px) {
  section#solution div.solution__body {
    flex-direction: column;
  }
  section#solution div.solution__body div.body__text {
    flex: 1 0 0;
  }
  section#solution div.solution__body figure {
    flex: 1 0 0;
  }
  section#solution div.solution__body div.body__text h2 {
    text-align: center;
  }
}