@charset "UTF-8";
:root {
  --inner-scale: 1;
  --vw-base: calc(1600 / var(--inner-scale));
  --inner: 1260;
  --inner-1600: 1600px;
}
@media screen and (max-width: 767px) {
  :root {
    --vw-base: 375;
    --inner-scale: 1;
    --inner: 315;
  }
}

/* ===============================
  ご契約までの流れ
=============================== */
.flow__sections {
  padding-top: calc(120 * 100vw / var(--vw-base));
  margin-bottom: calc(250 * 100vw / var(--vw-base));
}
@media (max-width: 767px) {
  .flow__sections {
    padding-top: calc(60 * 100vw / var(--vw-base));
    margin-bottom: calc(125 * 100vw / var(--vw-base));
  }
}

.flow__section--02 {
  margin-top: calc(160 * 100vw / var(--vw-base));
}
.flow__section--02 .flow__item-number {
  background: url(../img/flow/label-bg02.png) no-repeat center center/cover;
}
.flow__section--02 .flow__item:nth-child(n+2)::before {
  background-color: #f5a800;
}
@media (max-width: 767px) {
  .flow__section--02 {
    margin-top: calc(80 * 100vw / var(--vw-base));
  }
}

.flow__section {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .flow__section {
    display: block;
  }
}

.flow__heading {
  width: calc(378 / var(--inner) * 100%);
}
@media (max-width: 767px) {
  .flow__heading {
    width: calc(200 / var(--inner) * 100%);
    margin: 0 auto;
  }
}

.flow__heading-text {
  display: block;
  font-size: calc(25 * 100vw / var(--vw-base));
  font-weight: 400;
  text-align: center;
}

.flow__content {
  width: calc(760 / var(--inner) * 100%);
}
@media (max-width: 767px) {
  .flow__content {
    width: 100%;
    margin-top: calc(40 / var(--inner) * 100%);
  }
}

.flow__message {
  font-size: calc(20 * 100vw / var(--vw-base));
  font-weight: 400;
  padding-bottom: 3em;
}
@media (max-width: 767px) {
  .flow__message {
    font-size: calc(14 * 100vw / var(--vw-base));
    line-height: 2.2;
    padding-bottom: 1em;
  }
}

.flow__item {
  display: flex;
  align-items: flex-start;
  padding: calc(47 * 100vw / var(--vw-base)) 0;
  border-bottom: 1px dashed #595757;
  border-top: 1px dashed #595757;
}
.flow__item:nth-child(n+2) {
  margin-top: calc(140 * 100vw / var(--vw-base));
  position: relative;
}
.flow__item:nth-child(n+2)::before {
  content: "";
  position: absolute;
  top: calc(-70 * 100vw / var(--vw-base));
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-mask-image: url(../img/icon_arrow03.svg);
          mask-image: url(../img/icon_arrow03.svg);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: #80b44b;
  width: calc(60 * 100vw / var(--vw-base));
  aspect-ratio: 60/50;
}
@media (max-width: 767px) {
  .flow__item {
    padding: calc(20 * 100vw / var(--vw-base)) 0;
  }
  .flow__item:nth-child(n+2) {
    margin-top: calc(70 * 100vw / var(--vw-base));
  }
  .flow__item:nth-child(n+2)::before {
    top: calc(-35 * 100vw / var(--vw-base));
    width: calc(30 * 100vw / var(--vw-base));
  }
}

.flow__item--2 {
  position: relative;
}
.flow__item--2::after {
  content: "";
  position: absolute;
  background: url(../img/flow/img01.png) no-repeat center center/100%;
  aspect-ratio: 480/602;
  transform: translate(-50%, 0%);
  width: 31%;
  left: 83.3%;
  bottom: 0%;
}

.flow__item--4 {
  position: relative;
}
.flow__item--4::after {
  content: "";
  position: absolute;
  background: url(../img/flow/img02.png) no-repeat center center/100%;
  aspect-ratio: 333/403;
  transform: translate(-50%, 0%);
  width: 31%;
  left: 83.3%;
  bottom: 0%;
}
@media (max-width: 767px) {
  .flow__item--4::after {
    width: 25%;
    left: 93.3%;
  }
}

.flow__item--6 {
  position: relative;
}
.flow__item--6::after {
  content: "";
  position: absolute;
  background: url(../img/flow/img03.png) no-repeat center center/100%;
  aspect-ratio: 334/441;
  transform: translate(-50%, -16%);
  width: 22%;
  left: 83.9%;
  bottom: 0%;
}

.flow__item-number {
  display: inline-block;
  font-size: calc(14 * 100vw / var(--vw-base));
  font-weight: 400;
  color: #fff;
  text-align: center;
  background: url(../img/flow/label-bg01.png) no-repeat center center/cover;
  width: calc(97 * 100vw / var(--vw-base));
  aspect-ratio: 96/120;
  padding-top: 1em;
  padding-right: 1em;
}
.flow__item-number strong {
  display: block;
  font-size: calc(33 * 100vw / var(--vw-base));
  margin-bottom: 0.2em;
}
@media (max-width: 767px) {
  .flow__item-number {
    width: calc(40 / var(--inner) * 100%);
    font-size: calc(6 * 100vw / var(--vw-base));
  }
  .flow__item-number strong {
    font-size: calc(12 * 100vw / var(--vw-base));
  }
}

.flow__item-body {
  width: calc(100% - (97 * 100vw / var(--vw-base)));
  color: #595757;
  padding-left: calc(45 * 100vw / var(--vw-base));
}
@media (max-width: 767px) {
  .flow__item-body {
    width: calc(100% - (40 * 100vw / var(--vw-base)));
    padding-left: calc(20 * 100vw / var(--vw-base));
  }
}

.flow__item-body-t1 {
  padding-right: 32%;
}

.flow__item-title {
  font-size: calc(30 * 100vw / var(--vw-base));
  font-weight: 500;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  .flow__item-title {
    font-size: calc(16 * 100vw / var(--vw-base));
  }
}

.flow__item-description {
  font-size: calc(20 * 100vw / var(--vw-base));
  font-weight: 400;
  line-height: 2.2;
  margin-top: 1.5em;
}
@media (max-width: 767px) {
  .flow__item-description {
    font-size: calc(12 * 100vw / var(--vw-base));
  }
}
/*# sourceMappingURL=flow.css.map */