@charset "UTF-8";

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

    @media (width <= 768px) {
      background-image: url('../img/business/mv_sp.png');
    }
  }

  /* =====================
    business
  ===================== */
  .business {
    padding-block: 104px 14px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 65 * 1vw) calc((100 / 750) * 48 * 1vw);
    }

    .u-inner {
      position: relative;

      .description {
        line-height: 1.9;

        & + .description {
          margin-block-start: 1.8em;
        }

        @media (width <= 768px) {
          margin-block-start: calc((100 / 750) * 38 * 1vw);
        }
      }
      .left-in-catch[data-id='1'] {
        position: absolute;
        top: -10px;
        right: 170px;
        z-index: 5;

        @media (width <= 768px) {
          top: calc((100 / 750) * 686 * 1vw);
          right: calc((100 / 750) * 292 * 1vw);
        }
      }
      .left-in-catch[data-id='2'] {
        position: absolute;
        top: 14px;
        right: 0;
        z-index: 5;

        @media (width <= 768px) {
          top: calc((100 / 750) * 723 * 1vw);
          right: calc((100 / 750) * 38 * 1vw);
        }
      }

      .business-list {
        display: block grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40.5px 64px;
        margin-block-start: 64px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          gap: calc((100 / 750) * 40 * 1vw);
          margin-block-start: calc((100 / 750) * 195 * 1vw);

          & li {
            & picture {
              & img {
                inline-size: calc((100 / 750) * 670 * 1vw);
              }
            }
          }
        }
      }
    }
  }
}