@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 {
    padding-block-start: 120px;

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

    .business-list {
      counter-reset: number 0;
      & > li {
        display: block flex;
        align-items: center;
        gap: 64px;

        @media (width <= 768px) {
          flex-direction: column-reverse;
          align-items: flex-start;
          gap: calc((100 / 390) * 40 * 1vw);
        }

        &:nth-child(even) {
          flex-direction: row-reverse;

          @media (width <= 768px) {
            flex-direction: column-reverse;
          }
        }
        & + li {
          margin-block-start: 128px;

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

        .wrap {
          position: relative;
          padding-inline: 80px;
          padding-block: 54px 71px;
          border-radius: 20px;

          &::before {
            counter-increment: number;
            content: '0' counter(number);
            font-family: var(--title);
            font-size: 56px;
            color: #549fd6;
            position: absolute;
            top: -54px;
            left: 32px;
          }

          @media (width <= 768px) {
            padding-inline: calc((100 / 390) * 24 * 1vw);
            padding-block: calc((100 / 390) * 48 * 1vw) calc((100 / 390) * 40 * 1vw);
            border-radius: calc((100 / 390) * 10 * 1vw);

            &::before {
              font-size: calc((100 / 390) * 48 * 1vw);
              top: calc((100 / 390) * -45 * 1vw);
              left: calc((100 / 390) * 24 * 1vw);
            }
          }

          .title_wrap {
            .title {
              font-family: var(--yumin);
              font-size: 20px;
              font-weight: 600;
              letter-spacing: 0.6px;
              color: #1b57af;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 18 * 1vw);
                letter-spacing: calc((100 / 390) * 0.54 * 1vw);
              }
            }

            .title_en {
              display: block flow;
              font-family: var(--title);
              color: #cfcfcf;
              line-height: 1;
            }
          }
          .description {
            margin-block-start: 37px;

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

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

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

          .support_wrap {
            padding-block: 18px 16px;
            padding-inline: 40px;
            border-radius: 10px;
            background-color: #fff;
            margin-block-start: 40px;

            @media (width <= 768px) {
              padding-block: calc((100 / 390) * 18 * 1vw) calc((100 / 390) * 16 * 1vw);
              padding-inline: calc((100 / 390) * 24 * 1vw);
              margin-block-start: calc((100 / 390) * 31 * 1vw);
              border-radius: calc((100 / 390) * 10 * 1vw);
            }

            .support_title {
              font-family: var(--yumin);
              font-weight: 600;
              color: #1b57af;
            }
            .support {
              display: block flex;
              flex-wrap: wrap;
              column-gap: 16px;
              margin-block-start: 5px;

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

        .picture {
          flex-shrink: 0;

          @media (width <= 768px) {
            & img {
              width: calc((100 / 390) * 342 * 1vw);
            }
          }
        }
      }
    }
  }
}