@charset "UTF-8";

/* =====================
  u-mv
===================== */
.u-mv {
  @media only screen and (width <= 768px) {
    padding-inline-start: 1vw;
  }
}

/* =====================
  c-article
===================== */
.c-article {
  padding-block: 91px 96px;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 91 * 1vw) calc((100 / 390) * 96 * 1vw);

    .u-inner {
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    @media (width > 768px) {
      margin-inline: auto;
      translate: -13px 0;
    }

    @media only screen and (width <= 768px) {
      margin-inline: calc((100 / 390) * 16 * 1vw);
    }
  }
}

/* =====================
  service
===================== */
.service {
  padding-block: 115px 96px;
  background: var(--grey03);

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 80 * 1vw) calc((100 / 390) * 64 * 1vw);
  }

  /* ==== list ==== */
  .list {
    display: block grid;
    margin-block-start: 66px;
    counter-reset: number;

    @media only screen and (width <= 768px) {
      margin-block-start: 12.4vw;
    }

    /* ==== li ==== */
    & > li {
      display: block grid;
      grid-template-rows: auto;
      gap: 15px 80px;
      align-items: flex-start;
      padding-block: 56px 58.1px;
      padding-inline: 80px;
      border-block-start: 1px solid var(--grey02);
      border-block-end: 1px solid transparent;

      @media only screen and (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: calc((100 / 390) * 17.1 * 1vw);
        padding-block: 8vw 7.4vw;
        padding-inline: 0;
        border-block-start: calc((100 / 390) * 2 * 1vw) solid var(--grey02);
        border-block-end: calc((100 / 390) * 2 * 1vw) solid transparent;
      }

      &:last-child {
        border-block-end-color: var(--grey02);
      }

      /* ==== thumb ==== */
      .thumb {
        border-radius: 20px;

        @media only screen and (width <= 768px) {
          border-radius: calc((100 / 390) * 20 * 1vw);
        }

        @media (width > 768px) {
          block-size: 210px;
        }

        @media only screen and (width <= 768px) {
          display: block flow;
          inline-size: calc((100 / 390) * 228 * 1vw);
          margin-inline: auto;
          border-radius: calc((100 / 390) * 20 * 1vw);
        }
      }

      /* ==== head ==== */
      .head {
        display: block flex;
        gap: 25px;
        align-items: center;
        align-self: flex-end;
        font-size: 24px;
        font-weight: 500;
        line-height: 1;
        color: var(--main);

        @media (width > 768px) {
          translate: 0 -5.6px;
        }

        @media only screen and (width <= 768px) {
          gap: 4.3vw;
          align-items: flex-start;
          align-self: flex-start;
          justify-content: flex-start;
          margin-block-start: 0.9vw;
          font-size: calc((100 / 390) * 16 * 1vw);
        }

        &::before {
          font-size: 20px;
          font-weight: 500;
          line-height: 1;
          color: var(--grey);
          text-transform: uppercase;
          content: 'service ' counter(number);
          counter-increment: number;
          translate: 0 2px;
        }

        @media only screen and (width <= 768px) {
          &::before {
            font-size: calc((100 / 390) * 14 * 1vw);
            translate: 0 0.6vw;
          }
        }
      }

      /* ==== body ==== */
      .body {
        align-self: flex-start;
        padding-inline-end: 40px;
        font-size: 18px;
        line-height: 2;
        color: var(--black);

        @media only screen and (width <= 768px) {
          padding-inline-end: 0;
          font-size: calc((100 / 390) * 15 * 1vw);
          line-height: 1.8;
        }
      }
    }

    /* ==== grid ==== */
    & > li:nth-child(odd) {
      grid-template-columns: 300px auto;

      .head {
        grid-area: 1 / 2 / 2 / 3;
      }

      .thumb {
        grid-area: 1 / 1 / 3 / 2;
      }

      .body {
        grid-area: 2 / 2 / 3 / 3;
      }

      .picture {
        display: block flow;
        grid-area: 3 / 2 / 4 / 3;
        align-self: flex-start;
        margin-inline: auto;

        @media (width > 768px) {
          translate: -6px -15px;
        }

        @media only screen and (width <= 768px) {
          padding-inline: calc((100 / 390) * 16 * 1vw);
          margin-block-start: 5.8vw;
        }
      }
    }

    & > li:nth-child(even) {
      gap: 15px 57px;

      .head {
        grid-area: 1 / 1 / 2 / 2;
      }

      .thumb {
        grid-area: 1 / 2 / 3 / 3;

        @media (width > 768px) {
          translate: -40px 0;
        }
      }

      .body {
        grid-area: 2 / 1 / 3 / 2;

        @media (width > 768px) {
          padding-inline-end: 80px;
        }
      }

      .picture {
        grid-area: 3 / 1 / 4 / 2;
      }
    }

    /* ==== wrap ==== */
    .wrap {
      grid-column: 1 / span 2;
      margin-block-start: 33px;

      @media only screen and (width <= 768px) {
        margin-block-start: 2.3vw;
      }

      /* ==== section ==== */
      & section {
        inline-size: 100%;
        counter-reset: number;
        background: var(--white);
        border: 2px solid var(--grey);
        border-radius: 30px;

        @media only screen and (width <= 768px) {
          border-radius: calc((100 / 390) * 30 * 1vw);
        }
      }

      /* ==== li ==== */
      & li {
        display: block grid;
        gap: 16px;

        @media only screen and (width <= 768px) {
          gap: 2.8vw;
        }
      }

      /* h4 */
      & h4 {
        display: block flex;
        gap: 18.8px;
        align-items: center;
        font-size: 24px;
        font-weight: 500;
        line-height: 1;
        color: var(--blue);

        @media only screen and (width <= 768px) {
          gap: 2.9vw;
          font-size: calc((100 / 390) * 16 * 1vw);
        }

        &::before {
          font-size: 18px;
          font-weight: 500;
          line-height: 1;
          color: var(--grey);
          content: attr(data-text);
          counter-increment: number;
        }

        @media only screen and (width <= 768px) {
          &::before {
            font-size: calc((100 / 390) * 14 * 1vw);
          }
        }
      }

      /* p */
      & p {
        padding-inline-start: 72px;
        font-size: 18px;
        line-height: 2;
        color: var(--black);

        @media only screen and (width <= 768px) {
          padding-inline-start: 0;
          font-size: calc((100 / 390) * 15 * 1vw);
          line-height: 1.8;
        }
      }

      /* ==== col2 ==== */
      &:has(> section:nth-child(2)) {
        display: block flex;
        gap: 20px;

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 24 * 1vw);
        }

        & section {
          padding-block: 47px 38px;
          padding-inline: 38px;
          border-radius: 20px;

          @media only screen and (width <= 768px) {
            padding-block: 8.5vw 7.8vw;
            padding-inline: 3.5vw;
            border-radius: calc((100 / 390) * 30 * 1vw);
          }
        }
      }

      /* wrap[data-type="single"] */
      &[data-type='single'] {
        @media only screen and (width <= 768px) {
          inline-size: 100%;
        }

        & section {
          padding-block: 72px 63px;
          padding-inline: 60px;

          @media only screen and (width <= 768px) {
            padding-block: 8.5vw 7.7vw;
            padding-inline: 3.5vw;
          }

          & ol {
            display: block grid;
            grid-template-rows: repeat(3, max-content);
            grid-auto-rows: auto;
            grid-auto-columns: max-content;
            grid-auto-flow: column;
            gap: 7px 72px;
            align-items: flex-start;

            @media only screen and (width <= 768px) {
              display: block flex;
              flex-direction: column;
              gap: 6.9vw;
            }

            @media (width > 768px) {
              & li:nth-child(2) {
                margin-block-end: 36.3px;
              }

              & li:nth-child(5) {
                translate: 0 36px;
              }
            }
          }
        }
      }

      /* wrap[data-type="column"] */
      &[data-type='column'] {
        margin-block-start: 15px;

        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 23 * 1vw);
        }

        @media only screen and (width <= 768px) {
          display: block flex;
          flex-direction: column;
        }

        /* h4 */
        & h4 {
          gap: 18px;

          @media only screen and (width <= 768px) {
            gap: calc((100 / 390) * 9 * 1vw);
          }
        }

        & p {
          padding-inline: 0;
          margin-block-start: 25px;
          font-size: 18px;
          line-height: 2;

          @media only screen and (width <= 768px) {
            margin-block-start: calc((100 / 390) * 18 * 1vw);
            font-size: calc((100 / 390) * 15 * 1vw);
            line-height: 1.8;
          }
        }

        /* figure */
        & figure {
          display: block grid;
          gap: 16px;
          justify-content: center;
          margin-block-start: 25px;
          color: var(--black);
          text-align: center;

          @media only screen and (width <= 768px) {
            gap: calc((100 / 390) * 8 * 1vw);
            margin-block-start: calc((100 / 390) * 16 * 1vw);
            font-size: calc((100 / 390) * 14 * 1vw);
          }
        }
      }
    }
  }
}

/* =====================
  process
===================== */
.process {
  padding-block: 90px 96px;
  background: #f1fcff;

  @media only screen and (width <= 768px) {
    padding-block: 16.4vw;

    .u-hgroup {
      margin-inline: auto;
    }
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 64px;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 23.4 * 1vw);
    }

    /* p */
    .body {
      max-inline-size: 770px;
      margin-inline: auto;
      font-size: 18px;
      line-height: 2;
      color: var(--black);

      @media only screen and (width <= 768px) {
        max-inline-size: unset;
        font-size: calc((100 / 390) * 15 * 1vw);
        line-height: 1.8;
      }
    }

    /* ==== list ==== */
    .list {
      display: block grid;
      gap: 56px;
      inline-size: 100%;
      max-inline-size: 1120px;
      padding-block: 80px;
      padding-inline: 100px;
      margin-block-start: 1px;
      margin-inline: auto;
      counter-reset: number;
      background: white;

      @media only screen and (width <= 768px) {
        gap: 8.1vw;
        inline-size: 100%;
        max-inline-size: unset;
        padding-block: 12.5vw 12.2vw;
        padding-inline: calc((100 / 390) * 16 * 1vw);
        margin-block-start: unset;
      }

      /* ==== li ==== */
      & li {
        position: relative;
        display: block grid;
        grid-template-columns: 115px 70px auto;
        gap: 7px 64px;
        align-items: center;

        @media only screen and (width <= 768px) {
          display: block grid;
          grid-template-columns: calc((100 / 390) * 70 * 1vw) auto;
          gap: calc((100 / 390) * 1.8 * 1vw) calc((100 / 390) * 24 * 1vw);
          align-items: flex-start;
        }

        &[data-id='2'] {
          @media only screen and (width <= 768px) {
            gap: calc((100 / 390) * 1.7 * 1vw) calc((100 / 390) * 24 * 1vw);

            & h3 {
              margin-block-start: 3vw;
            }
          }
        }

        &[data-id='3'] {
          @media only screen and (width <= 768px) {
            gap: calc((100 / 390) * 1.7 * 1vw) calc((100 / 390) * 24 * 1vw);

            & h3 {
              margin-block-start: 2.2vw;
            }
          }
        }

        &[data-id='4'] {
          @media only screen and (width <= 768px) {
            gap: calc((100 / 390) * 2.3 * 1vw) calc((100 / 390) * 24 * 1vw);

            & h3 {
              margin-block-start: 5.2vw;
            }
          }
        }

        &[data-id='5'] {
          @media only screen and (width <= 768px) {
            gap: calc((100 / 390) * 2.5 * 1vw) calc((100 / 390) * 24 * 1vw);

            & h3 {
              margin-block-start: 2.7vw;
            }
          }
        }

        &[data-id='6'] {
          @media only screen and (width <= 768px) {
            gap: calc((100 / 390) * 1.1 * 1vw) calc((100 / 390) * 24 * 1vw);

            & h3 {
              margin-block-start: 8vw;
            }
          }
        }

        @media only screen and (width <= 768px) {
          &:not(:last-child) {
            &::before {
              position: absolute;
              inset-block: calc(0% + calc((100 / 390) * 70 * 1vw)) 0;
              inset-inline-start: calc(((100 / 390) * 70 * 1vw) / 2);
              inline-size: calc((100 / 390) * 2 * 1vw);
              block-size: 100%;
              content: '';
              background: var(--grey02);
            }
          }
        }
      }

      /* ==== step ==== */
      .step {
        position: relative;
        display: block grid;
        grid-area: 1 / 1 / 3 / 2;
        gap: 9px;
        place-content: center;
        align-items: center;
        inline-size: 115px;
        aspect-ratio: 1 / 1;
        color: var(--blue);
        text-align: center;
        background: var(--grey02);
        border-radius: calc(infinity * 1px);

        @media only screen and (width <= 768px) {
          grid-area: 1 / 1 / 4 / 2;
          gap: 0.9vw;
          inline-size: calc((100 / 390) * 70 * 1vw);
        }

        & span {
          font-weight: 500;
          line-height: 1;

          @media only screen and (width <= 768px) {
            font-size: calc((100 / 390) * 14 * 1vw);
          }

          & + span {
            font-size: 24px;
            font-weight: 400;

            @media only screen and (width <= 768px) {
              font-size: calc((100 / 390) * 15 * 1vw);
            }
          }
        }

        &::before {
          position: absolute;
          inset-block-end: -100%;
          inset-inline-start: 50%;
          inline-size: 4px;
          block-size: 100%;
          content: '';
          background: var(--grey02);
          translate: -50% 0;
        }

        @media only screen and (width <= 768px) {
          &::before {
            display: none;
          }
        }
      }

      & li:last-child .step::before {
        display: none;
      }

      /* ==== icon ==== */
      .icon {
        display: block flow;
        grid-area: 1 / 2 / 3 / 3;
        margin-inline: auto;

        @media only screen and (width <= 768px) {
          grid-area: 1 / 2 / 2 / 3;
          inline-size: calc((100 / 390) * 50 * 1vw);
          aspect-ratio: 1 / 1;
          margin-block-start: 3vw;
          margin-inline: unset;
          margin-inline-start: 0;
        }
      }

      @media only screen and (width <= 768px) {
        & li[data-id='1'] .icon {
          inline-size: calc((100 / 390) * 41.43 * 1vw);
          block-size: calc((100 / 390) * 41.429 * 1vw);
          translate: 1.1vw 0.2vw;
        }

        & li[data-id='2'] .icon {
          inline-size: calc((100 / 390) * 48.72 * 1vw);
          block-size: calc((100 / 390) * 48.12 * 1vw);
        }

        & li[data-id='3'] .icon {
          inline-size: calc((100 / 390) * 32.65 * 1vw);
          block-size: calc((100 / 390) * 49.04 * 1vw);
          translate: 2.3vw -1vw;
        }

        & li[data-id='4'] .icon {
          inline-size: calc((100 / 390) * 46.55 * 1vw);
          block-size: calc((100 / 390) * 37.14 * 1vw);
          translate: 0.2vw 0.7vw;
        }

        & li[data-id='5'] .icon {
          inline-size: calc((100 / 390) * 48.6 * 1vw);
          block-size: calc((100 / 390) * 47.17 * 1vw);
          translate: 0.3vw -0.9vw;
        }

        & li[data-id='6'] .icon {
          inline-size: calc((100 / 390) * 45.89 * 1vw);
          block-size: calc((100 / 390) * 27.86 * 1vw);
          translate: 0 2.1vw;
        }
      }

      /* ==== h3 ==== */
      & h3 {
        grid-area: 1 / 3 / 2 / 4;
        font-size: 24px;
        font-weight: 500;
        line-height: 1;
        color: var(--main);

        @media only screen and (width <= 768px) {
          grid-area: 2 / 2 / 3 / 3;
          margin-block-start: 4.2vw;
          font-size: calc((100 / 390) * 16 * 1vw);
          line-height: 1.8;
        }
      }

      /* ==== p ==== */
      & p {
        grid-area: 2 / 3 / 3 / 4;
        align-self: flex-start;
        font-size: 18px;
        font-weight: 400;
        line-height: 2;
        color: var(--black);

        @media only screen and (width <= 768px) {
          grid-area: 3 / 2 / 4 / 3;

          /* margin-block-end: 8vw; */
          font-size: calc((100 / 390) * 15 * 1vw);
          line-height: 1.8;
        }
      }
    }
  }
}

/* =====================
  case
===================== */
.case {
  background: var(--grey03);

  @media only screen and (width <= 768px) {
    padding-block: 16.4vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 64.6px;

    @media only screen and (width <= 768px) {
      gap: 6.3vw;
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    @media (width > 768px) {
      translate: -13px 0;
    }

    @media only screen and (width <= 768px) {
      margin-inline: auto;
    }
  }

  /* ==== body ==== */
  .body {
    inline-size: fit-content;
    margin-inline: auto;
    font-size: 18px;
    line-height: 2;
    color: var(--black);

    @media (width > 768px) {
      translate: -2px -1px;
    }

    @media only screen and (width <= 768px) {
      font-size: calc((100 / 390) * 15 * 1vw);
      line-height: 1.8;
      text-indent: calc((100 / 390) * 4.2 * 1vw);
    }
  }

  /* ==== list ==== */
  .list {
    display: block flex;
    gap: 19.8px;
    justify-content: center;
    inline-size: 100%;
    max-inline-size: 1120px;
    margin-inline: auto;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 5.3vw;
      max-inline-size: unset;
    }

    & li {
      display: block grid;
      gap: 15px;
      padding-block: 37px 39px;
      padding-inline: 40px;
      background: white;
      border: 2px solid var(--grey);
      border-radius: 20px;

      @media only screen and (width <= 768px) {
        gap: 4.2vw;
        padding-block: 7.7vw 7.5vw;
        padding-inline: calc((100 / 390) * 14 * 1vw);
        background: white;
        border: calc((100 / 390) * 2 * 1vw) solid var(--grey);
        border-radius: calc((100 / 390) * 20 * 1vw);
      }

      & h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--grey);
        text-align: center;

        @media only screen and (width <= 768px) {
          font-size: calc((100 / 390) * 16 * 1vw);
        }
      }

      .picture {
        margin-inline: auto;
        object-fit: contain;

        @media (width > 768px) {
          block-size: 357px;
        }
      }

      &:nth-child(2) {
        @media (width > 768px) {
          padding-inline: 44px;
        }
      }
    }
  }
}

/* =====================
  fee
===================== */
.fee {
  padding-block: 91px 98px;

  @media only screen and (width <= 768px) {
    padding-block: 16.4vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 65px;

    @media only screen and (width <= 768px) {
      gap: 6.1vw;

      .u-hgroup {
        margin-inline: auto;
      }
    }
  }

  /* ==== body ==== */
  .body {
    inline-size: fit-content;
    margin-inline: auto;
    font-size: 18px;
    line-height: 2;
    color: var(--black);

    @media only screen and (width <= 768px) {
      font-size: calc((100 / 390) * 15 * 1vw);
      line-height: 1.8;
      text-align: center;
    }
  }

  /* ==== table ==== */
  .table {
    display: block grid;
    gap: 40px;
    inline-size: 100%;
    max-inline-size: 960px;
    margin-inline: auto;
    color: var(--black);

    & table {
      table-layout: fixed;
      border-inline: 1px solid var(--main);
    }

    & :where(th, td) {
      padding-block: 11px 11.8px;
      padding-inline: 39px;
      font-size: 18px;

      @media only screen and (width <= 768px) {
        padding-block: 3.2vw 2.5vw;
        padding-inline: 3.7vw;
        font-size: calc((100 / 390) * 15 * 1vw);
      }
    }

    & thead th {
      color: white;
      background: var(--main);

      &:first-child {
        @media (width > 768px) {
          inline-size: 260px;
        }

        @media only screen and (width <= 768px) {
          inline-size: 21vw;
        }
      }

      &:last-child {
        @media (width > 768px) {
          inline-size: 439px;
        }

        @media only screen and (width <= 768px) {
          inline-size: 50.3vw;
        }
      }
    }

    & tbody td {
      border-block-end: 1px solid var(--main);
    }

    /* ==== caption ==== */
    .caption {
      display: block grid;
      gap: 4px;
      inline-size: fit-content;
      padding-inline: 38px;
      color: var(--black);

      @media only screen and (width <= 768px) {
        gap: 0;
        padding-inline: 0;

        & p {
          font-size: calc((100 / 390) * 15 * 1vw);
          line-height: 2;
        }
      }
    }
  }
}