@charset "UTF-8";
.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    &::after {
      background-image: url('../img/business/mv.png');
    }
  }

  /* =====================
    Business
  ===================== */
  .business {
    padding-block-start: 120px;
    padding-block-end: 120px;

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

    @scope (.u-inner) to (.section) {
      .description {
        text-align: center;

        @media (width <= 768px) {
          text-align: left;
        }
      }
    }

    .u-inner {
      padding-inline: 40px;

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

      .section {
        margin-block-start: 80px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 40 * 1vw);
        }
        .title {
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          background-image: url('../img/business/title_bg.png');
          inline-size: 100%;
          min-block-size: 59px;
          display: block grid;
          align-items: center;
          font-size: 24px;
          font-weight: 500;
          color: #e8f6e7;
          padding-inline: 40px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 16 * 1vw);
            padding-inline: calc((100 / 390) * 16 * 1vw);
            padding-block: calc((100 / 390) * 8 * 1vw);
          }
        }
        .wrap {
          display: block flex;
          align-items: center;
          gap: 60px;
          padding-inline: 80px;
          padding-block: 40px;

          @media (width <= 768px) {
            flex-direction: column-reverse;
            gap: calc((100 / 390) * 24 * 1vw);
            padding-inline: calc((100 / 390) * 16 * 1vw);
            padding-block: calc((100 / 390) * 32 * 1vw);
          }

          .img {
            display: block flow;
            flex-shrink: 0;

            @media (width <= 768px) {
              width: 100%;
            }
          }
        }
        & + .section {
          margin-block-start: 40px;

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