@charset "UTF-8";

.main {
  /* =====================
    u-mv
  ===================== */
  .u-mv {
    & img {
      @media (width <= 768px) {
        object-position: center;
      }
    }
  }

  /* =====================
    process
  ===================== */
  .process {
    padding-block: 113px 159px;

    @media (width > 768px) {
      overflow: hidden;
    }

    @media (width <= 768px) {
      padding-block: 16vw 22.8vw;
    }

    /* ==== u-head ==== */
    .u-head {
      margin-block-end: 62px;

      @media (width <= 768px) {
        margin-block-end: 8vw;
      }
    }

    /* ==== lead ==== */
    .lead[data-id='1'] {
      margin-block-end: 62px;
      font-family: var(--yumin);
      font-size: 30px;
      font-weight: 600;
      text-align: center;

      @media (width <= 768px) {
        margin-block-end: 8vw;
        font-size: 3.7vw;
      }
    }

    /* ==== picture ==== */
    .picture {
      display: block flow;
      width: 100vw;
      margin-inline: calc(50% - 50vw);
      text-align: center;

      @media (width <= 768px) {
        width: 100%;
        margin-inline: auto;
      }
    }
  }

  /* =====================
    construction
  ===================== */
  .construction-list {
    display: block grid;
    gap: 40px;
    padding-block-start: 118px;
    counter-reset: number;

    @media (width <= 768px) {
      gap: calc((100 / 390) * 35 * 1vw);
      padding-block-start: 16vw;
    }

    /* ==== li ==== */
    & > li {
      position: relative;
      display: block grid;
      gap: 15px;
      padding-block: 33px 40px;
      padding-inline: 40px;
      border: 1px solid #e1e1e1;
      box-shadow: 0 0 18px 0 rgb(0 0 0 / 10%);

      @media (width <= 768px) {
        gap: 3vw;
        padding-block: calc((100 / 390) * 16 * 1vw);
        padding-inline: calc((100 / 390) * 24 * 1vw);
        box-shadow: 0 0 18px 0 rgb(0 0 0 / 10%);
      }

      /* ==== arrow ==== */
      &:not(:last-child) {
        &::after {
          position: absolute;
          inset-block-end: -1px;
          inset-inline: 0;
          display: block flow;
          inline-size: 60px;
          aspect-ratio: 6 / 3;
          margin-inline: auto;
          content: '';
          background: var(--primary);
          clip-path: polygon(0 0, 100% 0%, 50% 100%);
          translate: 0 100%;
        }

        @media (width <= 768px) {
          &::after {
            inset-block-end: -3.1vw;
            inline-size: calc((100 / 390) * 30 * 1vw);
            opacity: 0.6;
          }
        }
      }

      /* ==== icon ==== */
      .icon {
        position: absolute;
        inset-block-start: 38px;
        inset-inline-end: 40px;

        @media (width <= 768px) {
          inset-block-start: 4vw;
          inset-inline-end: 6vw;
          inline-size: calc((100 / 390) * 35 * 1vw);
          opacity: 0.5;
        }
      }
    }

    /* ==== title ==== */
    .title {
      display: block flex;
      gap: 10px;
      align-items: center;
      padding-inline-end: 100px;
      font-family: var(--yumin);
      font-size: 26px;
      font-weight: 600;
      color: var(--primary);

      @media (width <= 768px) {
        padding-inline-end: 0;
        font-size: calc((100 / 390) * 18 * 1vw);
      }

      &::before {
        display: inline grid;
        place-items: center;
        aspect-ratio: 1 / 1;
        padding-inline: 10px;
        line-height: 1;
        color: white;
        content: counter(number);
        counter-increment: number;
        background: var(--primary);
        border-radius: 3px;
      }

      @media (width <= 768px) {
        &::before {
          padding-inline: 3vw;
          font-size: calc((100 / 390) * 12 * 1vw);
        }
      }
    }

    /* ==== description ==== */
    .description {
      padding-inline-end: 100px;

      @media (width <= 768px) {
        padding-inline-end: 0;
      }
    }

    /* ==== ul ==== */
    & ul {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 40px;
      margin-block-start: 14px;
      text-align: center;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: calc((100 / 390) * 16 * 1vw);
        align-items: center;
        justify-content: center;
        margin-block-start: 2vw;
      }

      & li {
        position: relative;
        display: block grid;
        gap: 5px;
        font-size: 14px;

        @media (width <= 768px) {
          max-inline-size: calc((100 / 390) * 250 * 1vw);
          font-size: calc((100 / 390) * 12 * 1vw);
        }

        /* ==== arrow ==== */
        &:not(:last-child) {
          &::after {
            position: absolute;
            inset-block: 38%;
            inset-inline-end: -14px;
            display: block flow;
            inline-size: 12px;
            aspect-ratio: 12 / 24;
            margin-inline: auto;
            content: '';
            background: #c8c8c8;
            clip-path: polygon(0 0, 0 100%, 100% 50%);
            translate: 100% -50%;
          }

          @media (width <= 768px) {
            &::after {
              display: none;
            }
          }
        }
      }
    }
  }
}