@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/business/mv.png');

    @media (width <= 768px) {
      background-image: url('../img/business/mv_2x.png');
    }
  }
  /* =====================
    business
  ===================== */
  .business {
    position: relative;
    padding-block-start: 104px;
    padding-block-end: 128px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 72 * 1vw);
      padding-block-end: calc((100 / 390) * 80 * 1vw);
    }
    .business-list {
      counter-reset: number;

      .bg-rg {
        display: block grid;
        grid-template-columns: max-content 1fr;
        row-gap: 48px;
        column-gap: 64px;
        align-items: center;
        padding-inline: 64px;
        padding-block: 64px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          row-gap: calc((100 / 390) * 30 * 1vw);
          column-gap: 0;
          padding-inline: calc((100 / 390) * 24 * 1vw);
          padding-block: calc((100 / 390) * 40 * 1vw);
        }

        .picture {
          display: block flow;
          grid-area: 1/1/2/2;

          @media (width <= 768px) {
            grid-area: 1/1/2/2;
            & img {
              inline-size: calc((100 / 390) * 310 * 1vw);
            }
          }
        }

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

          @media (width <= 768px) {
            grid-area: 2/1/3/2;
          }

          .title {
            position: relative;
            font-family: var(--yumin);
            font-size: 20px;
            font-weight: 600;
            line-height: 1;
            border-bottom: solid 1px #b8b8b8;
            display: block flex;
            align-items: center;
            gap: 16px;
            padding-block-end: 14px;

            &::before {
              counter-increment: number;
              content: '0' counter(number);
              display: block flow;
              font-family: var(--yumin);
              font-weight: 400;
              font-size: 28px;
              color: var(--primary);
            }

            @media only screen and (width <= 768px) {
              font-size: calc((100 / 390) * 18 * 1vw);
              gap: calc((100 / 390) * 16 * 1vw);
              padding-block-end: calc((100 / 390) * 10 * 1vw);

              &::before {
                font-size: calc((100 / 390) * 26 * 1vw);
              }
            }
          }

          .description {
            margin-block-start: 21px;

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

        .ex-list {
          grid-area: 2/1/3/3;
          background-color: #fff;
          padding-inline: 40px;
          padding-block: 40px;

          @media (width <= 768px) {
            grid-area: 3/1/4/2;
            padding-inline: calc((100 / 390) * 24 * 1vw);
            padding-block: calc((100 / 390) * 28 * 1vw);
          }

          .u-list {
            grid-template-columns: repeat(3, 1fr);
            border: none;
            padding-block: 0;
            padding-inline: 0;
            margin-block-start: 24px;

            @media (width <= 768px) {
              grid-template-columns: 1fr;
              margin-block-start: calc((100 / 390) * 16 * 1vw);
            }
          }

          .title {
            position: relative;
            font-weight: 500;
            color: var(--primary);
            display: block flex;
            align-items: center;
            gap: 16px;

            &::before {
              content: '';
              display: block flow;
              inline-size: 80px;
              block-size: 1px;
              background-color: var(--primary);
            }

            @media (width <= 768px) {
              gap: calc((100 / 390) * 16 * 1vw);

              &::before {
                inline-size: calc((100 / 390) * 64 * 1vw);
              }
            }
          }
        }
        & + .bg-rg {
          margin-block-start: 80px;

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