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

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

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

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

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

      .section {
        position: relative;

        & + .section {
          margin-block-start: 81px;

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

        .wrap {
          display: block flex;
          align-items: center;
          gap: 60px;

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

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

            @media (width <= 768px) {
              width: 100%;
            }
          }

          .unit {
            .title {
              position: relative;
              display: block flex;
              align-items: center;
              justify-content: space-between;
              font-family: var(--serif);
              font-size: 20px;
              font-weight: 500;
              padding-block-end: 7px;

              @media (width <= 768px) {
                flex-direction: column-reverse;
                align-items: start;
                font-size: calc((100 / 390) * 16 * 1vw);
                padding-block-end: calc((100 / 390) * 8 * 1vw);
              }
              &::before {
                content: '';
                position: absolute;
                inline-size: 100%;
                block-size: 1px;
                background: linear-gradient(180deg, #1990bc 0%, #4ae296 100%);
                bottom: 0;
                left: 0;
              }

              &::after {
                content: attr(data-text);
                background: linear-gradient(180deg, #1990bc 0%, #4ae296 100%);
                font-family: var(--title);
                font-size: 16px;
                line-height: 1.1;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                text-align: right;
              }

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

            .description {
              margin-block-start: 24px;
              padding-inline-end: 40px;

              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 16 * 1vw);
                padding-inline-end: 0;
              }
            }
          }
        }
        & + .section {
          margin-block-start: 80px;

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