@charset "UTF-8";

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

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

    /* ==== lead ==== */
    .lead {
      display: block grid;
      gap: 22px;
      margin-block-end: 22px;
      font-family: var(--yumin);
      font-size: 40px;
      font-weight: 600;
      text-align: center;

      @media (width <= 768px) {
        gap: 1vw;
        margin-block-end: calc((100 / 390) * 16 * 1vw);
        font-size: calc((100 / 390) * 28 * 1vw);
      }

      &::before {
        display: block;
        inline-size: 70px;
        aspect-ratio: 1 / 1;
        margin-inline: auto;
        content: '';
        background-image: url('../img/business/illust.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }

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

    /* ==== description ==== */
    .description {
      margin-block-start: 16px;

      @media (width <= 768px) {
        margin-block-start: 0;
      }
    }
  }

  /* =====================
    business-list
  ===================== */
  .business-list {
    padding-block: 0 160px;

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

    /* ==== section ==== */
    & section {
      position: relative;

      &::before {
        position: absolute;
        inset-block-end: 80px;
        inset-inline-end: 0;
        z-index: 1;
        inline-size: 40%;
        min-inline-size: 570px;
        block-size: 320px;
        content: '';
        background-color: var(--bg);
      }

      @media (width <= 768px) {
        background: var(--bg);

        &::before {
          display: none;
        }
      }

      /* ==== inner ==== */
      .u-inner {
        position: relative;
        z-index: 2;
        display: block grid;
        grid-template-columns: 610px auto;
        gap: 0 60px;
        align-items: flex-start;
        padding-block: 80px;
        border-block-end: 1px solid #c9c9c9;

        @media (width <= 768px) {
          display: block flex;
          flex-direction: column;
          gap: 4.7vw;
          padding-block: 9.5vw;
          border-block-end: unset;
        }
      }

      /* title */
      .title {
        grid-area: 1 / 1 / 2 / 2;
        padding-block-start: 7px;
        margin-block: calc((1em - 1lh) / 2) 23px;
        font-family: var(--yumin);
        font-size: 26px;
        font-weight: 600;
        color: var(--primary);

        @media (width <= 768px) {
          margin-block: calc((1em - 1lh) / 2);
          font-size: calc((100 / 390) * 24 * 1vw);
        }
      }

      /* ==== body ==== */
      .body {
        grid-area: 2 / 1 / 3 / 2;
        align-self: flex-start;
      }

      /* ==== picture ==== */
      .picture {
        grid-area: 1 / 2 / 5 / 3;
        padding-block-end: 40px;

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

      /* ==== anchor ==== */
      .u-anchor {
        grid-area: 4 / 1 / 5 / 2;
        align-self: flex-end;

        @media (width <= 768px) {
          align-self: center;
        }
      }
    }

    /* ==== even section ==== */
    & section:nth-child(even) {
      @media (width <= 768px) {
        background: white;
      }

      &::before {
        inset-inline: 0 auto;
      }

      .u-inner {
        grid-template-columns: auto 610px;
      }

      /* title */
      .title {
        grid-column: 2 / 3;
      }

      /* ==== body ==== */
      .body {
        grid-column: 2 / 3;
      }

      /* ==== picture ==== */
      .picture {
        grid-column: 1 / 2;
      }

      /* ==== anchor ==== */
      .u-anchor {
        grid-column: 2 / 3;
      }
    }
  }
}