@charset "UTF-8";

.main {
  /* =====================
    introduction
  ===================== */
  .introduction {
    padding-block: 120px;

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

    .body[data-id='1'] {
      margin-block-end: 120px;

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

    .other {
      margin-block-end: 40px;
      text-align: center;

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

  /* =====================
    machine-list
  ===================== */
  .machine-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 40px;
    margin-block-end: 120px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: calc((100 / 390) * 24 * 1vw);
      margin-block-end: 8vw;
    }

    /* ==== section ==== */
    & section {
      display: block grid;
      gap: 25px;

      @media (width <= 768px) {
        gap: 4vw;
        padding-block: 6.2vw;
        border-block-end: 1px solid #c9c9c9;
      }
    }

    /* ==== title ==== */
    .title {
      font-family: var(--yumin);
      font-size: 26px;
      font-weight: 600;
      color: var(--primary);

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

    /* ==== list ==== */
    .list {
      padding-inline: 10px;

      @media (width <= 768px) {
        padding-block: calc((100 / 390) * 16 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        background: #f3f3f3;
        border-radius: calc((100 / 390) * 8 * 1vw);
      }

      & li {
        padding-inline-start: 1em;
        text-indent: -1em;

        &::before {
          position: relative;
          display: inline grid;
          inline-size: 4px;
          block-size: 4.32px;
          aspect-ratio: 4 / 4.32;
          margin-inline-end: 10px;
          content: '';
          background: currentcolor;
          border-radius: calc(infinity * 1px);
          translate: 0 -50%;
        }

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