@charset "UTF-8";

/* --- UsecaseSec --- */
.UsecaseSec {
  padding-block: 100px 35px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .UsecaseSec {
    padding-block: 60px 15px;
  }
}

.UsecaseSec .MainInner.TreatRight::after {
  top: 0;
  right: -255px;
}

@media screen and (max-width: 767px) {
  .UsecaseSec .MainInner.TreatLeft::after {
    display: none;
  }
}

.UsecaseSec .MainTitle + p {
  margin-top: 46px;
}

.UsecaseSec .MainTitle + .UsecaseList {
  margin-top: 60px;
}

@media screen and (max-width: 767px) {
  .UsecaseSec .MainTitle + p {
    margin-top: 40px;
  }

  .UsecaseSec .MainTitle + .UsecaseList {
    margin-top: 20px;
  }
}

.UsecaseSec p + .UsecaseFigure {
  margin-top: 36px;
}

@media screen and (max-width: 767px) {
  .UsecaseSec p + .UsecaseFigure {
    margin-top: 16px;
  }
}

.UsecaseItem {
  margin-top: 30px;
  padding-top: 30px;
}

.UsecaseItem.TreatRight::after {
  top: 12px;
  right: -255px;
}

@media screen and (max-width: 767px) {
  .UsecaseItem {
    margin-top: 22px;
    padding-top: 20px;
  }
  .UsecaseItem.TreatRight::after {
    display: none;
  }
}

.UsecaseItem + .UsecaseItem {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .UsecaseItem + .UsecaseItem {
    margin-top: 42px;
  }
}

.UsecaseItem + .MainTitle {
  margin-top: 100px;
}

@media screen and (max-width: 767px) {
  .UsecaseItem + .MainTitle {
    margin-top: 60px;
  }
}

@media screen and (max-width: 767px) {
  .UsecaseItem .SubTitle h3 {
    font-size: 20px;
  }
  .UsecaseItem .SubTitle p {
    line-height: calc(21/16);
  }
  .UsecaseItem p {
    line-height: calc(32/16);
  }
}

.UsecaseItem .SubTitle + p {
  margin-top: 15px;
}

.UsecaseFigure {
  max-width: 753px;
  margin-inline: auto;
}

.UsecaseFigure02 {
  max-width: 801px;
}

.UsecaseFigure + .AnnotationStyle {
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .UsecaseFigure + .AnnotationStyle {
    margin-top: 10px;
  }
}