@charset "UTF-8";

.dot-list {
  margin-bottom: 0;

  li {
    list-style-type: none;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 10px;

    @media screen and (max-width: 600px) {
      font-size: 16px;
    }

    &:last-child {
      margin-bottom: 0;
    }

    &::before {
      content: "";
      background-color: #5eabd5;
      height: 10px;
      width: 10px;
      position: absolute;
      left: 0;
      top: 7px;
      border-radius: 100%;
    }

    span {
      font-weight: bold;
    }
  }
}

.flow-wrapper {
  .flow-page_lead {
    margin-top: 40px;

    @media screen and (max-width: 600px) {
      text-align: left;
    }
  }

  .flow-page_catch {
    display: block;
    font-size: clamp(1.5rem, calc(0.5rem + 2.667vw), 2.5rem);
    color: #1e1e1e;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 40px;

    @media screen and (max-width: 600px) {
      text-align: left;

      br {
        display: none;
      }
    }

    &::after {
      display: none;
    }
  }
}

.flow-page_read {
  position: relative;
  @media screen and (max-width: 600px) {
    p {
      text-align: left;
    }
  }
}

.flow-read-illust {
  margin-bottom: 0;
  margin-top: 50px;
  max-width: 600px;
  margin-inline: auto;
}

.flow-contents {
  margin-top: 180px;
  display: flex;
  flex-direction: column;

  @media screen and (max-width: 950px) {
    margin-top: 80px;
  }
}
.flow-item {
  position: relative;
  padding-bottom: 180px;

  @media screen and (max-width: 950px) {
    max-width: 600px;
    margin-inline: auto;
    width: 100%;
  }
  &::after {
    content: "";
    position: absolute;
  }

  > p {
    font-size: 16px;
  }
}
.flow-item_inner {
  display: flex;
  gap: 30px 20px;

  @media screen and (max-width: 950px) {
    flex-direction: column;
  }
}

.flow-heading {
  margin-bottom: 25px;
  position: relative;
  min-height: 80px;
  display: flex;
  align-items: center;
  column-gap: 10px;
  @media screen and (max-width: 600px) {
    min-height: auto;
  }

  &::before {
    content: "";
    width: 80px;
    height: 80px;
    display: block;

    @media screen and (max-width: 600px) {
      width: 60px;
      height: 60px;
    }
  }

  .flow-heading_title {
    color: #6baed6;
    font-size: 36px;
    font-weight: bold;
    width: fit-content;
    letter-spacing: 0.1em;
    margin-bottom: 0;

    @media screen and (max-width: 600px) {
      font-size: clamp(
        1.563rem,
        calc(0.875rem + 1.833vw),
        2.25rem
      ); /* min: 25px, max: 36px */
    }
  }
}

.step1 {
  @media screen and (max-width: 950px) {
    padding-bottom: 220px;
  }
  &::after {
    background: url(../img/flow/illust_flow2.svg) 0 0 no-repeat;
    background-size: 100%;
    width: 241px;
    height: 150px;
    right: 0;
    left: 0;
    bottom: 0;
    margin-inline: auto;
    @media screen and (max-width: 950px) {
      width: 210px;
      height: 130px;
      right: 0;
      left: 0;
      bottom: 50px;
      margin-inline: auto;
      rotate: 15deg;
    }
  }
  .flow-item_inner {
    flex-direction: column;
  }
  .flow-heading {
    &::before {
      background: url(../img/flow/icon_step01.svg) 0 0 no-repeat;
      background-size: 100%;
    }
  }

  .flow-item_desc {
    .flow-item_point {
      margin-left: auto;
      order: 1;
      position: absolute;
      top: -100px;
      left: 450px;

      @media screen and (max-width: 950px) {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 20px;
        margin-inline: auto;
      }
    }
  }
}
.step2 {
  padding-bottom: 190px;
  @media screen and (max-width: 950px) {
    padding-bottom: 250px;
  }
  &::after {
    background: url(../img/flow/illust_flow3.svg) 0 0 no-repeat;
    background-size: 100%;
    width: 250px;
    height: 190px;
    right: -100px;
    left: 0;
    bottom: 0;
    margin-inline: auto;

    @media screen and (max-width: 950px) {
      right: 0;
      left: -170px;
      bottom: 30px;
    }
    @media screen and (max-width: 600px) {
      left: 0;
    }
  }
  .flow-heading {
    &::before {
      background: url(../img/flow/icon_step02.svg) 0 0 no-repeat;
      background-size: 100%;
    }
  }
  .flow-item_inner {
    align-items: flex-start;
  }

  .flow-item_image {
    @media screen and (max-width: 950px) {
      max-width: 420px;
      margin-inline: auto;
    }
    .image {
      @media screen and (max-width: 950px) {
        &:nth-child(1) {
          margin-right: 0;
        }
      }
      &:nth-child(2) {
        margin-top: -30px;
        max-width: 250px;
        @media screen and (max-width: 950px) {
          margin-left: 0;
        }
      }
    }
  }
}
.step3 {
  padding-bottom: 200px;
  &::after {
    background: url(../img/flow/illust_flow4.svg) 0 0 no-repeat;
    background-size: 100%;
    width: 250px;
    height: 170px;
    right: 0;
    left: 0;
    bottom: 0;
    margin-inline: auto;
  }
  .flow-heading {
    &::before {
      background: url(../img/flow/icon_step03.svg) 0 0 no-repeat;
      background-size: 100%;
    }
  }
  .flow-item_inner {
    column-gap: 20px;
    background-color: #fff;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 30px;
    @media screen and (max-width: 600px) {
      padding: 30px;
      row-gap: 10px;
    }
  }
  > p {
    margin-bottom: 40px;
  }
  .flow-item_image {
    width: 50%;
    @media screen and (max-width: 950px) {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      order: 2;
      width: 100%;
    }
    @media screen and (max-width: 600px) {
      flex-direction: column;
      max-width: 330px;
      margin-inline: auto;
    }
    .image {
      margin-top: 20px;
      width: 100%;
      @media screen and (max-width: 950px) {
        width: 48%;
      }
      @media screen and (max-width: 600px) {
        max-width: 200px;
        width: 100%;
      }
      &:nth-child(1),
      &:nth-child(3) {
        margin-left: -60px;
        @media screen and (max-width: 950px) {
          margin-left: auto;
        }
        @media screen and (max-width: 600px) {
          margin-left: 0;
        }
      }
      &:nth-child(2) {
        text-align: right;
        margin-top: 6px;
        @media screen and (max-width: 600px) {
          margin-right: 0;
        }
      }
      &:nth-child(3) {
        margin-top: 30px;
        @media screen and (max-width: 600px) {
          margin-top: 15px;
        }
      }
    }
  }
  .flow-item_desc {
    > p {
      font-weight: bold;
    }
  }
  .flow-step3_point {
    margin-bottom: 0;
    padding-inline: 30px;
    font-weight: bold;
    font-size: 20px;
    max-width: 900px;
    margin-inline: auto;

    @media screen and (max-width: 600px) {
      padding-inline: 0;
      font-size: 18px;
    }
  }
}
.step4 {
  padding-bottom: 220px;
  &::after {
    background: url(../img/flow/illust_flow5.svg) 0 0 no-repeat;
    background-size: 100%;
    width: 115px;
    height: 215px;
    right: -150px;
    left: 0;
    bottom: 0;
    margin-inline: auto;
    rotate: 15deg;
    @media screen and (max-width: 950px) {
      width: 95px;
      height: 195px;
      rotate: none;
      right: 0;
    }
  }
  .flow-heading {
    &::before {
      background: url(../img/flow/icon_step04.svg) 0 0 no-repeat;
      background-size: 100%;
    }
  }
  .flow-item_image {
    margin-top: 12%;
    @media screen and (max-width: 950px) {
      margin-top: 0;
    }
  }
}
.step5 {
  padding-bottom: 0;
  .flow-heading {
    &::before {
      background: url(../img/flow/icon_step05.svg) 0 0 no-repeat;
      background-size: 100%;
    }
  }
  .flow-item_image {
    margin-top: 100px;
    position: relative;
    z-index: 1;

    @media screen and (max-width: 950px) {
      order: 4;
      margin-top: 20px;
    }
  }
  .flow-item_point {
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    left: 0;
    top: -300px;

    @media screen and (max-width: 950px) {
      position: relative;
      left: auto;
      top: auto;
      order: 5;
      margin-inline: auto;
      margin-top: 20px;
    }
  }
  @media screen and (max-width: 950px) {
    row-gap: 0;

    .flow-item_inner {
      row-gap: 0;
    }

    .flow-item_desc {
      display: contents;
    }
    .flow-heading {
      order: 1;
    }
    .flow-item_title {
      order: 2;
    }

    p {
      order: 3;
    }
  }
}

.flow-item_image {
  position: relative;
  width: 40%;
  @media screen and (max-width: 950px) {
    width: 100%;
  }
  .image {
    margin-bottom: 0;
    @media screen and (max-width: 950px) {
      max-width: 350px;
      margin-inline: auto;
      width: 100%;
    }
    @media screen and (max-width: 600px) {
      max-width: 250px;
    }
  }
}

.flow-item_desc {
  flex: 1;
}

.flow-item_desc_note {
  margin-top: 15px;
  border: 2px solid #5eabd5;
  border-radius: 16px;
  padding: 40px;
  background-color: #fff;
  @media screen and (max-width: 600px) {
    padding: 30px;
  }
  p {
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.flow-item_point {
  max-width: 420px;
  width: 100%;
  background-color: #fff;
  border-radius: 100%;
  padding: 30px 20px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 8px solid #5eabd5;

  @media screen and (max-width: 800px) {
    padding: 20px;
  }
  @media screen and (max-width: 600px) {
    aspect-ratio: auto;
    border-radius: 20px;
  }

  .point-sub-title {
    max-width: 200px;
    width: 100%;
    margin-bottom: 5px;
    img {
      height: auto;
      width: 100%;
    }
  }
  .point-title {
    font-size: 16px;
    position: relative;
    text-align: center;
    padding-bottom: 20px;

    &::after {
      content: "";
      background: url(../img/flow/illust_fukidashi.svg) 0 0 no-repeat;
      background-size: 100%;
      width: 100%;
      height: 25px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin-inline: auto;
    }
    > span {
      color: #5eabd5;
      font-size: 22px;
      padding-inline: 5px;
    }
  }
  .dot-list {
    color: #000;
    margin-bottom: 15px;
  }
  .point-note {
    margin-bottom: 0;
    font-size: 13px;
    text-align: center;
    @media screen and (max-width: 600px) {
      text-align: left;
      font-size: 14px;
    }
  }
  .point-link {
    @media screen and (max-width: 600px) {
      margin-top: 1rem;
    }
    a {
      font-size: 14px;
      color: #5eabd5;
      position: relative;
      padding-right: 30px;
      @media screen and (max-width: 600px) {
        font-size: 16px;
      }

      &:hover {
        text-decoration: none;
      }

      &::after {
        content: "";
        background: url(../img/flow/icon_arrow.svg) 0 0 no-repeat;
        background-size: 100%;
        width: 24px;
        height: 9px;
        position: absolute;
        right: 0;
        top: 5px;
      }
    }
  }
  .text_bold {
    font-weight: bold;
  }
}

.flow-item_title {
  font-size: 24px;
  margin-bottom: 15px;

  @media screen and (max-width: 600px) {
    font-size: 20px;
  }
}

.flow-item_desc p {
  margin-bottom: 0;
  line-height: 1.8;
  font-size: 16px;
}

.flow-item_process {
  margin-top: 20px;
  margin-bottom: 0;

  dt {
    font-size: 24px;
    color: #5eabd5;
    position: relative;
    padding-left: 43px;
    margin-bottom: 5px;
    @media screen and (max-width: 600px) {
      font-size: 22px;
      padding-left: 30px;
    }
    &::before {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg width='32' height='28' viewBox='0 0 32 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_643_1616)'%3E%3Cpath d='M23.2173 7.06314C24.0627 7.44192 24.7504 8.12521 25.1372 8.99418C25.2948 9.34325 25.6315 9.56606 25.9968 9.56606C26.1329 9.56606 26.2691 9.53635 26.398 9.47694C26.6272 9.36553 26.8063 9.165 26.8923 8.91991C26.9783 8.67481 26.9711 8.40744 26.8636 8.16977C26.2762 6.86261 25.2447 5.82282 23.9695 5.25837C23.5039 5.05041 22.9236 5.28808 22.7231 5.77826C22.6228 6.02336 22.6228 6.29073 22.7159 6.53582C22.809 6.78091 22.9881 6.97402 23.2245 7.078L23.2173 7.06314Z' fill='%231E1E1E'/%3E%3Cpath d='M21.7488 0C16.0967 0 11.4976 4.76817 11.4976 10.6281C11.4976 16.4881 16.0967 21.2562 21.7488 21.2562C27.4009 21.2562 32 16.4881 32 10.6281C32 4.76817 27.4009 0 21.7488 0ZM13.8473 10.6281C13.8473 8.44456 14.6711 6.38727 16.1612 4.84244C17.6512 3.29761 19.6355 2.4435 21.7416 2.4435C23.8477 2.4435 25.8321 3.29761 27.3221 4.84244C28.8121 6.38727 29.636 8.44456 29.636 10.6355C29.636 12.8191 28.8121 14.8764 27.3221 16.4212C25.8321 17.966 23.8477 18.8202 21.7416 18.8202C19.6355 18.8202 17.6512 17.966 16.1612 16.4212C14.6711 14.8764 13.8473 12.8191 13.8473 10.6355V10.6281Z' fill='%231E1E1E'/%3E%3Cpath d='M10.8242 7.49388C10.8242 4.3968 8.39576 1.88646 5.40852 1.87903C2.42845 1.87903 -3.05176e-05 4.3968 -3.05176e-05 7.49388C-3.05176e-05 10.5835 2.42845 13.1013 5.40852 13.1013C8.3886 13.1013 10.8171 10.5835 10.8242 7.49388ZM2.35681 7.49388C2.35681 6.6472 2.67201 5.8525 3.25226 5.25091C3.83252 4.64932 4.59903 4.32253 5.41569 4.32253C6.23234 4.32253 6.99885 4.64932 7.57911 5.25091C8.15936 5.8525 8.47456 6.6472 8.47456 7.49388C8.47456 8.34057 8.15936 9.13526 7.57911 9.73685C6.99885 10.3384 6.23234 10.6652 5.41569 10.6652C4.59903 10.6652 3.83252 10.3384 3.25226 9.73685C2.67201 9.13526 2.35681 8.34057 2.35681 7.49388Z' fill='%231E1E1E'/%3E%3Cpath d='M16.6554 21.5236L16.4334 21.4122L16.3832 21.6647C16.197 22.6006 15.7528 23.4547 15.1081 24.1305C14.2126 25.0515 13.0306 25.5639 11.7698 25.5639C10.509 25.5639 9.32702 25.0515 8.43157 24.1305C7.54328 23.2021 7.04899 21.9767 7.04899 20.6695C7.04899 19.3624 7.54328 18.1369 8.43157 17.2085C9.11928 16.4955 9.99324 16.0276 10.946 15.8494L11.1896 15.8048L11.0893 15.5746C10.8242 14.9581 10.6022 14.312 10.4446 13.6509L10.4016 13.4653L10.2225 13.5098C7.02033 14.2525 4.69931 17.2679 4.69931 20.6695C4.69931 24.7173 7.87281 28.0074 11.777 28.0074C15.0078 28.0074 17.8231 25.7422 18.6254 22.4966L18.6684 22.3109L18.4893 22.2589C17.8661 22.0732 17.2572 21.8281 16.6626 21.5311L16.6554 21.5236Z' fill='%231E1E1E'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_643_1616'%3E%3Crect width='32' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
      background-repeat: no-repeat;
      background-size: contain;
      width: 32px;
      height: 28px;
      position: absolute;
      left: 0;
      top: 5px;
      @media screen and (max-width: 600px) {
        width: 25px;
        height: 22px;
      }
    }
  }
  dd {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.8;

    &:last-of-type {
      margin-bottom: 0;
    }

    @media screen and (max-width: 800px) {
      margin-bottom: 40px;
    }
  }
}

.flow-message {
  position: relative;
  margin-top: 80px;
  max-width: 900px;
  margin-inline: auto;

  @media screen and (max-width: 600px) {
    margin-top: 60px;
  }
}