@charset "utf-8";
/* 共通 */
.head3 {
  font-size: 22px;
  line-height: calc(33 / 22);
  font-weight: 500;
  color: #676464;
  text-align: center;
  position: relative;
  @media  screen and (max-width: 768px) {
    font-size: 16px;
    line-height: calc(33 / 16);
    
  }
}

.head3 span {
  z-index: 2;
  position: relative;
}

.head3::before {
  content: '';
  display: block;
  width: 370px;
  height: 146px;
  background-image: url(../img/kaishu/bg-title.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
}
@media screen and (max-width: 768px) {
    .head3 {
      font-size: 16px;
      line-height: calc(24 / 16);
    }

    .head3 span {
      font-size: 12px;
      line-height: calc(24 / 12);
    }

    .head3::before {
      width: 310px;
      height: 119px;
    }
  }

  .head3.--green:before {
    background-image: url(../img/kaishu/bg-title-green.png);
  }

  .head2 {
    font-size: 28px;
    line-height: calc(60  /28);
    font-weight: 700;
    color: #676464;
    text-align: center;
    span {
      position: relative;
      display: inline-block;
    }
  }
  .head2 span::before {
    content: '';
    background: url(../img/common/dec_sub.svg) center center no-repeat;
    background-size: contain;
    width: 34px;
    height: 35px;
    position: absolute;
    left: 0;
    top: 0;
    translate: -100% 0;
    z-index: 0;
  }
  @media screen and (max-width: 768px) {
    .head2 {
      font-size: 24px;
      line-height: calc(33 / 22);
      text-align: left;
      span {
        padding-left: 50px;
        padding-top: 20px;

      }
    }
    .head2 span::before {
      width: 38px;
      height: 32px;
      left: 20px;
      top: 10px;
      translate: 0 0;
    }
  }

  .title {
    font-size: 28px;
    line-height: calc(60 / 28);
    font-weight: 500;
    color: #676464;
    text-align: center;
  }
  .title span {
    font-size: 40px;
    line-height: calc(60 / 40);
  }
  @media screen and (max-width: 768px) {
    .title {
      font-size: 22px;
      line-height: calc(33 / 22);
    }
    .title span {
      font-size: 28px;
      line-height: calc(33 / 28);
    }
  }

  .title2 {
    font-size: 28px;
    line-height: calc(48 / 28);
    font-weight: 700;
    color: #676464;
    padding-bottom: 20px;
    border-bottom: 1px dashed #676464;
  }
  @media screen and (max-width: 768px) {
    .title2 {
      font-size: 22px;
      line-height: calc(33 / 22);
    }
  }

  .text {
    font-size: 16px;
    line-height: calc(28 / 16);
  }

  .label {
    display: inline-block;
    min-width: 80px;
    font-size: 12px;
    line-height: calc(22 / 12);
    font-weight: 700;
    text-align: center;
    color: #4B9379;
    background-color: #CDEBDE;
    padding: 5px;
    border-radius: 20px;
    &.--brown {
      color: #676464;
      border: 1px solid #676464;
      background-color: transparent;
    }
  }

/* fv */
.teaser_used  .teaser_box{
  background-image: url(../img/kaishu/fv-used.jpg);
}

/* problrem */
.problem__title {
  margin-top: 70px;
}
@media screen and (max-width: 768px) {
  .problem__title {
    margin-top: 40px;
  }
}

.problem__list {
  padding: 60px 64px;
  background-color: #CDEBDE;
  border-radius: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 30px;
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .problem__list {
    padding: 40px 20px;
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}

.problem__item {
  font-size: 18px;
  line-height: calc(27 / 18);
  font-weight: 700;
  position: relative;
  padding-left: 34px;
}
.problem__item:before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-image: url(../img/kaishu/icon-check.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  translate: 0 3px;
}

/* works */
.works {
  margin-top: 150px;
}
@media screen and (max-width: 768px) {
  .works {
    margin-top: 110px;
  }
}

.spsb_anchor {
  margin-top: 100px;
  padding: 80px 0 160px;
}
@media (max-width: 767px) {
  .spsb_anchor {
      margin: 40px 0 0;
      padding: 40px 0 80px;
  }
}

.spsb_anchor .anchor_box .anchor_item {
  padding: 20px 10px;
  font-size: 18px;
}
@media (max-width: 767px) {
  .spsb_anchor .anchor_box {
      padding: 10px 20px 0;
      column-gap: 10px;
      flex-wrap: wrap;
  }
}
.anchor_box .anchor_item {
  background: #fff;
  width: 210px;
  height: 190px;
  padding: 20px 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #676464;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  position: relative;
}
@media (max-width: 767px) {
  .spsb_anchor .anchor_box .anchor_item {
      width: calc((100% - 10px) / 2);
      padding: 10px 5px;
      font-size: min(20px, 5.1vw);
      height: 160px;
      margin-bottom: 40px;
  }
}

.works__title {
  margin-top: 70px;
}
@media screen and (max-width: 768px) {
  .works__title {
    margin-top: 60px;
  }
}

.works__contentWrap {
  padding-top: 78px;
  margin-top: -78px;
  background-color: #fff;
  border-radius: 40px 40px 0 0;
}
@media screen and (max-width: 768px) {
  .works__contentWrap {
    padding-top: 40px;
    margin-top: -40px;
  }
}


.works__contents {

}
@media  screen and (max-width: 768px) {
  .works__contents {
    margin-top: 20px;
  }
}

.works__content {
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .works__content {
    margin-top: 40px;
  }
} 


.works__titleSm {
  font-size: 28px;
  line-height: calc(42 / 28);
  font-weight: 500;
  color: #676464;
}
@media screen and (max-width: 768px) {
  .works__titleSm {
    font-size: 22px;
    line-height: calc(33 / 22);
  }
}

.works__catch {
  font-size: 22px;
  line-height: calc(33 / 22);
  font-weight: 700;
  color: #676464;
}
@media screen and (max-width: 768px) {
  .works__catch {
    margin-top: 40px;
  }
}

.works__contentInner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
  .works__contentInner {
    margin-top: 20px;
    display: block;
  }
}

.works__img {
  width: 570px;
  flex-shrink: 0;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    aspect-ratio: 570 / 340;
  }
}
@media screen and (max-width: 768px) {
  .works__img {
    width: 100%;
    img {
      border-radius: 10px;
      aspect-ratio: 350 / 209;
    }
  }
}

@media screen and (max-width: 768px) {
  .works__body {
    margin-top: 40px;
  }
}

.works__wrap {
  padding-top: 20px;
  border-top: 1px dashed #676464;
}

.works__label {
  display: block;
  width: 210px;
  text-align: center;
  padding: 15px 20px;
  background-color: #CDEBDE;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #4B9379;
  position: relative;
  margin-bottom: 30px;
}
.works__label:after {
  content: '';
  display: block;
  width: 22px;
  height: 18px;
  background-image: url(../img/kaishu/icon-square.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  right: 30px;
  translate: 0 50%;
  /* z-index: -1; */
}
@media  screen and (max-width: 768px) {
  .works__label {
    width: 202px;
    padding: 5px;
    font-size: 10px;
    margin-bottom: 30px;
    margin-inline: auto;
    z-index: 2;
    font-size: 14px;
    line-height: calc(22 / 14);
  }
  .works__label:after {
    background-image: url(../img/kaishu/icon-square-sp.svg);
    width: 19px;
    height: 18px;
    right: initial;
    left: 50%;
    translate: -50% 50%;
    z-index: -1;
  }
}

.works-case {
  padding: 50px 40px;
  background: #F8F8F8;
  border-radius: 15px;
}
@media screen and (max-width: 768px) {
  .works-case {
    padding: 30px 20px;
  }
}

.works__desc {
  padding-bottom: 40px;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .works__desc {
    padding-bottom: 30px;
    margin-top: 20px;
  }
}

.works-case {
  margin-top: 67px;
  position: relative;
}

.works-case::before {
  content: '';
  display: block;
  width: 87px;
  height: 41px;
  background-image: url(../img/kaishu/icon-square2.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -100%;
}
@media screen and (max-width: 768px) {
  .works-case {
    margin-top: 44px;
  }
  .works-case::before {
    width: 49px;
    height: 23px;
  }
}

.works-case__title {
  font-size: 28px;
  line-height: calc(56 / 28);
  font-weight: 500;
  color: #676464;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .works-case__title {
    font-size: 22px;
    line-height: calc(33 / 22);
  }
}

.works-case__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 20px;
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .works-case__list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    column-gap: 15px;
    margin-top: 30px;
  }
}

.works-case__img {
  border-radius: 15px;
  object-fit: cover;
}

.works-case__desc {
  display: block;
  font-size: 16px;
  line-height: calc(24 / 16);
  text-align: center;
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .works-case__desc {
    font-size: 14px;
    line-height: calc(21 / 14);
  }
}



/* feature */
.feature {
  margin-top: 110px;
}
@media screen and (max-width: 768px) {
  .feature {
    margin-top: 90px;
  }
}

.feature__head {
  position: relative;
  z-index: 1;
  translate: 0 50%;
}

.feature__wrap {
  background: #F8F8F8;
  border-radius: 15px;
  
}

.feature__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-top: 143px;
  padding-bottom: 40px;
  max-width: 815px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .feature__list {
    padding-inline: 20px;
    grid-template-columns: 1fr;
    row-gap: 30px;
    padding-top: 100px;
    translate: 0 -20px;
    padding-inline: 35px;
  }
}

.feature__item {
  text-align: center;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
}

.feature__icon {
  display: block;
  width: 154px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .feature__icon {
    width: 140px;
  }
}

.feature__title {
  font-size: 22px;
  line-height: calc(33 / 22);
  font-weight: 700;
  color: #676464;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen {
  .feature__title {
    font-size: 18px;
    line-height: calc(33 / 18);
  }
}

.feature__num {
  display: block;
  font-size: 22px;
  line-height: calc(33 / 22);
  font-weight: 700;
  color: #676464;
  span {
    display: inline-block;
    font-size: 80px;
    line-height: calc(90 / 80);
    color: #4B9379;
    font-weight: 700;
  }
}
@media screen and (max-width: 768px) {
  .feature__num {
    font-size: 18px;
    line-height: calc(27 / 18);
  }
}

.feature__desc {
  font-size: 12px;
  line-height: calc(18  / 12);
  font-weight: 700;
  color: #676464;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}

/* cta */

.cta {
  margin-top: 123px;
}
@media screen and (max-width: 768px) {
  .cta {
    margin-top: 100px;
  }
}

.cta__inner {
  background-color: #F8F8F8;
  padding-block: 48px;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .cta__inner {
    padding: 40px 20px;
  }
}

.cta__head {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  span {
    display: inline-block;
    position: relative;
    font-size: 16px;
    line-height: calc(42 / 16);
    font-weight: 700;
    color: #676464;
  }
}
.cta__head span:before {
  content: '';
  display: block;
  width: 11px;
  height: 21px;
  background-image: url(../img/kaishu/line-title-left.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: -5px;
  top: 50%;
  translate: -100% -50%;
}
.cta__head span:after {
  content: '';
  display: block;
  width: 11px;
  height: 21px;
  background-image: url(../img/kaishu/line-title-right.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: -5px;
  top: 50%;
  translate: 100% -50%;
}

.cta_btn {
  display: flex;
  justify-content: center;
}

/* case */

.case {
  padding-top: 60px;
  padding-bottom: 157px;
  background-color: #F0EAE4;
  border-radius: 40px 40px 0 0;
  margin-top: 80px;

}
@media screen and (max-width: 768px) {
  .case {
    padding-top: 57px;
    padding-bottom: 117px;
  }
}

.case__list {
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .case__list {
    margin-top: 40px;
  }
}

.case__item {
  &:nth-child(n + 2) {
    margin-top: 80px;
  }
}
@media screen and (max-width: 768px) {
  .case__item {
    &:nth-child(n + 2) {
      margin-top: 60px;
    }
  }
}

.case__itemaSm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  margin-top: 30px;
  .case__wrap {
    margin-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .case__itemaSm {
    display: block;
    .case__wrap {
      grid-template-columns: 1fr 1fr;
    }
  }
}

.case__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 20px;
  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.case__title {
  font-size: 28px;
  line-height: calc(60 / 28);
  font-weight: 500;
  color: #676464;
  padding: 20px 40px;
  background-color: #fff;
  border-radius: 15px;
}
@media screen and (max-width: 768px) {
  .case__title {
    font-size: 22px;
    line-height: calc(33 / 22);
    padding: 14px 10px;
  }
}


.case__tagWrap {
  display: flex;
  gap: 20px;
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .case__tagWrap {
    display: block;
    margin-top: 30px;
  }
}

.case__label {
  font-size: 18px;
  line-height: calc(48 / 18);
  font-weight: 700;
  color: #4B9379;
}

.case__tags {
  display: flex;
  align-items: center;
  gap: 10px;
  span {
    display: inline-block;
    min-width: 68px;
    text-align: center;
    font-size: 12px;
    line-height: calc(22 / 12);
    font-weight: 700;
    color: #4B9379;
    background-color:#CDEBDE;
    border-radius: 20px;
    padding: 5px 10px;
  }
}
@media screen and (max-width: 768px) {
  .case__tags {
    margin-top: 10px;
  }
}


.case__desc {
  margin-top: 20px;
}

.case .cta_btn {
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .case .cta_btn {
    margin-top: 60px;
  }
}

.case .cta_btn .btn_customer {
  font-size: 16px;
  line-height: calc(30 / 16);
  font-weight: 700;
}

.case-cta {
  margin-top: 110px;
  background-color: #F8F8F8;
  border-radius: 20px;
  padding-top: 123px;
  padding-bottom: 60px;
  padding-inline: 100px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .case-cta {
    margin-top: 120px;
    padding-top: 100px;
    padding-bottom: 40px;
    padding-inline: 20px;
  }
}

.case-cta__head {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
}

.case-cta__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  &.--lower {
    margin-top: 30px;
  }
}
@media screen and (max-width: 960px) {
  .case-cta__body {
    display: block;
  }
  .case-cta__body.--lower {
      display: block;
      margin-top: 20px;
  }
}

.case-cta__img {
  width: 38.2%;
  @media screen and (max-width: 960px) {
    width: 100%;
  }
    img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    aspect-ratio: 370 / 330;
  }
}

.case-cta__text {
  max-width: 480px;
  font-size: 14px;
  line-height: calc(28 / 14);
  @media screen and (max-width: 960px) {
    margin-inline: auto;
    max-width: initial;
    margin-top: 20px;
    
  }
  @media screen and (max-width: 768px) {
    max-width: initial;
  }
}



.case-cta__box {
  margin-top: 40px;
  border: 2px solid #CDEBDE;
  border-radius: 15px;
  padding: 30px 55px;

  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .case-cta__box {
    padding: 40px 25px;
  }
}

.case-cta__title {
  font-size: 22px;
  line-height: calc(33 / 22);
  font-weight: 700;
  color: #676464;
  text-align: center;
}
@media  screen and (max-width: 768px) {
  .case-cta__title {
    text-align: left;
  }
}

.case .case-cta .cta_btn {
  margin-top: 0;
}
@media  screen and (max-width: 960px) {
  .case .case-cta .cta_btn {
    margin-top: 30px;
  }
}

/* about */

.about {
  margin-top: 80px;
  background-color: #fff;
  border-radius: 40px 40px 0 0;
  padding-top: 77px;
  margin-top: -77px;
}
@media screen and (max-width: 768px) {
  .about {
    margin-top: 60px;
    padding-top: 57px;
    margin-top: -57px;
  }
}

.about__inner.inner {
  @media screen and (max-width: 768px) {
    padding-inline: 18px;
  }
}

.about__contents {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .about__contents {
    margin-top: 40px;
  }
}

.about__text {
  margin-top: 40px;
}

.about__box {
  padding: 40px calc(158 / 1440 * 100vw);
  background-color: #fff;
  border: 2px solid #CDEBDE;
  border-radius: 15px;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .about__box {
    padding: 40px 20px;
    overflow-x: auto;
  }
}

.about__img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .about__img {
    width: 858px;
    margin-top: 20px;
  }
}

.about__desc {
  font-size: 12px;
  line-height: calc(24 / 12);
  margin-top: 30px;
}

.text-scroll {
  font-size: 14px;
  line-height: calc(32 / 14);
  font-weight: 700;
  color: #676464;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  &:after {
    content: '';
    display: block;
    width: 20px;
    height: 5px;
    background-image: url(../img/kaishu/icon-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
}
@media screen and (min-width: 769px) {
  .text-scroll {
    display: none;
  }
}

.about__box2 {
  margin-top: 40px;
  padding-top: 56px;
  background-color: #F8F8F8;
  border-radius: 15px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5%;
}
@media screen and (max-width: 768px) {
  .about__box2 {
    padding-top: 40px;
    padding-inline: 20px;
    display: block;
  }
}

.about__list {
  margin-top: 30px;
  padding-bottom: 56px;
}
@media screen and (max-width: 768px) {
  .about__list {
    padding-bottom: 0;
  }
}

.about__item {
  position: relative;
  text-align: center;
  &:nth-child(n + 2) {
    margin-top: 55px;
  }
  &:not(:last-child) {
    &:after {
      content: '';
      display: block;
      width: 31px;
      height: 42px;
      background-image: url(../img/kaishu/icon-arrow2.svg);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      bottom: -12px;
      left: 50%;
      translate: -50% 100%;
    }
  }
  span:not(.label) {
    font-size: 22px;
    line-height: calc(33 / 22);
    color: #4B9379;
    font-weight: 700;
  }
}
@media screen and (max-width: 768px) {
  .about__item {
    text-align: center;
    &:nth-child(n + 2) {
      margin-top: 40px;
    }
  }
}
.about__title {
  font-size: 22px;
  line-height: calc(33 / 22);
  font-weight: 700;
  color: #676464;
  text-align: center;
  span {
    color: #4B9379;
  }
}

.about__item .text {
  font-weight: 500;
}

.about__item:nth-child(1) .text {
  @media screen and (min-width: 769px) {
    text-align: left;
    /* display: flex;
    justify-content: center; */
  }
}

.about__tags {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .about__tags {
    flex-wrap: wrap;
    justify-content: center;
    p {
      width: 100%;
      text-align: center;
    }
  }
}

.about__icon {
  width: 237px;
}
@media screen and (max-width: 768px) {
  .about__icon {
    display: block;
    width: 143px;
    margin-inline: auto;
    margin-top: 20px;
  }
}

.flow {
  margin-top: 80px;
  padding-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .flow {
    margin-top: 60px;
  }
}

.p-flow__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  gap: 40px;
  @media  screen and (max-width: 1000px) {
    /* display: block; */
  }
}
@media screen and (max-width: 768px) {
  .p-flow__wrap {
    display: none;
  }
}

.flow__text {
  /* min-width: 270px; */
}

.flow__box {
  padding: 30px 5rem;
  border: 2px solid #CDEBDE;
  border-radius: 15px;
}
@media screen and (max-width: 1130px) {
  .flow__box {
    padding: 30px 40px;
    margin-top: 20px;
    flex-shrink: 0;
  }
}
/* @media screen and (max-width: 1000px) {
  .flow__box {
    max-width: 480px;
  }
} */

.flow__list {
  margin-top: 20px;
}

.flow__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  padding-left: 22px;
  &:before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: #82B9A5;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 0;
  }
  &:nth-child(n + 2) {
    margin-top: 10px;
  }
}
@media screen and (max-width: 768px) {
  .flow__item {
    grid-template-columns: 1fr 1fr;
    &:before {
      width: 8px;
      height: 8px;
      top: 4px;
    }
  }
}

.num {
  font-size: 16px;
  line-height: calc(21 / 16);
  font-weight: 700;
  color: #676464;
  display: flex;
  align-items: center;
  gap: 4px;
  span {
    font-family: "Verdana", sans-serif;
    font-size: 30px;
    /* line-height: calc(21 / 30); */
    line-height: 1;
    font-weight: 500;
    display: inline-block;
  }
  &:nth-child(2) {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 1130px) {
  .num {
    font-size: 14px;
    line-height: calc(21 / 14);
    span {
      font-size: 24px;
    }
  }
}

.flow-ex {
  margin-top: 40px;
}

.flow-ex__label {
  font-size: 16px;
  line-height: calc(21 / 16);
  font-weight: 700;
  color: #4B9379;
}

.flow-ex__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 20px;
  @media screen and (max-width: 1050px) {
    grid-template-columns: 1fr;
    
  }
}

.flow-ex__item {
  display: flex;
  counter-increment: num;
  @media screen and (max-width: 768px) {
    display: block;
  }
}

.flow__img {
  display: block;
  width: calc(195 / 570 * 100%);
  border-radius: 15px 0 0 15px;
  flex-shrink: 0;
  @media screen and (max-width: 768px) {
    width: 100%;
    
  }
  img {
    height: 100%;
    border-radius: 15px 0 0 15px;
    aspect-ratio: 195 / 240;
    object-fit: cover;
    @media screen and (max-width: 768px) {
      border-radius: 15px 15px 0 0;
      aspect-ratio: 350 / 130;
    }
  }
}

.flow-ex__body {
  background: #F8F8F8;
  border-radius: 0 15px 15px 0;
  padding-left: 43px;
  padding-right: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  @media screen and (max-width: 768px) {
    padding: 20px 20px 30px 20px;
    border-radius: 0 0 15px 15px;
  }
}

.flow-ex__title {
  font-size: 20px;
  line-height: calc(30 / 20);
  font-weight: 700;
  color: #676464;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.flow-ex__num {
  display: block;
  font-size: 10px;
  line-height: calc(19 / 10);
  font-weight: 500;
  font-family: "Verdana", sans-serif;
  width: 50px;
  height: 50px;
  border: 1px solid #676464;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &:after {
    content: counter(num);
    display: block;
    font-size: 20px;
    line-height: calc(19 / 20);
    translate: 0 -2px;
  }
}

.flow__desc.text {
  margin-top: 20px;
  line-height: calc(25 / 16);
}


/*  */
.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block; 
  }
}

.pc {
  display: block;
}
@media  screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

body {
  overflow-x: hidden;
}

/*20251017追加*/
.common-bg-green.kaishu {
  width: 100vw;
  margin-top: 30px;
  margin-left: calc(-1 * (50vw - 585px));
  padding: 30px 0;
}
.common-bg-green.kaishu a {
  width: 370px;
}
.common-bg-green.kaishu a.anchor_item::before {
  top: auto;
  transform: rotate(90deg) translateY(-50%);
}
.common-bg-green.kaishu a.anchor_item:hover::before {
  right: 20px;
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .common-bg-green.kaishu {
    margin-left: -20px;
    width: 100vw;
  }
  .common-bg-green.kaishu a {
    max-width: 310px;
    width: 80%;
  }
}