@charset "UTF-8";
.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    .u-inner {
      &::before {
        background-image: url('../img/business/mv.png');
      }
      @media (width <= 768px) {
        &::before {
          background-image: url('../img/business/mv_2x.png');
        }
      }
    }
  }

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

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

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

      .list {
        position: relative;
        margin-block-start: 80px;
        counter-reset: number 0;

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

        .item {
          display: block grid;
          grid-template-columns: 526px max-content;
          justify-content: space-between;

          @media (width <= 768px) {
            grid-template-columns: 1fr;
          }

          .title {
            margin-block-start: 64px;
            grid-area: 1/1/2/2;
            position: relative;
            background-image: linear-gradient(139deg, #22327e 35%, #5d69a1 54%, #0f1b53 80%);
            font-family: var(--shippori);
            font-size: 28px;
            line-height: 1;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: block flex;
            align-items: center;
            gap: 24px;

            @media (width <= 768px) {
              grid-area: 1/1/2/2;
              font-size: calc((100 / 390) * 24 * 1vw);
              margin-block-start: 0;
              gap: calc((100 / 390) * 16 * 1vw);
            }

            &::before {
              counter-increment: number;
              content: '0' counter(number);
              background-image: linear-gradient(129deg, #22327e 35%, #5d69a1 56%, #0f1b53 84%);
              font-family: var(--title);
              font-size: 56px;
              font-weight: 500;
              line-height: 1;
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }

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

          .catch {
            grid-area: 2/1/3/2;
            background-image: linear-gradient(94deg, #22327e 34%, #5d69a1 54%, #0f1b53 79%);
            font-family: var(--shippori);
            font-size: 24px;
            line-height: 1.3;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-block-start: 48px;

            @media (width <= 768px) {
              grid-area: 3/1/4/2;
              font-size: calc((100 / 390) * 20 * 1vw);
              margin-block-start: calc((100 / 390) * 41 * 1vw);
            }
          }

          .description {
            grid-area: 3/1/4/2;
            margin-block-start: 32px;
            line-height: 1.9;

            @media (width <= 768px) {
              grid-area: 4/1/5/2;
              line-height: 1.88;
              margin-block-start: calc((100 / 390) * 38 * 1vw);
            }
          }

          .img {
            grid-area: 1/2/4/3;

            @media (width <= 768px) {
              grid-area: 2/1/3/2;
              display: block flow;
              text-align: center;
              margin-block-start: calc((100 / 390) * 22 * 1vw);

              & img {
                inline-size: calc((100 / 390) * 325.25 * 1vw);
                block-size: calc((100 / 390) * 266.7 * 1vw);
              }
            }
          }

          &[data-id='2'] {
            margin-block-start: 120px;
            grid-template-columns: max-content 526px;

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

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

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

            .catch {
              grid-area: 2/2/3/3;

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

            .description {
              grid-area: 3/2/4/3;

              @media (width <= 768px) {
                grid-area: 4/1/5/2;
              }
            }
            .img {
              grid-area: 1/1/4/2;

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