/* ==========================================================
   デジタル支援 共通MV
   ========================================================== */

.zp-digital-mv {
  --zp-digital-mv-clip: polygon(0 0, 85% 0, 75% 100%, 0 100%);
  --zp-digital-mv-before-width: 95%;
  --zp-digital-mv-after-width: 98%;
  position: relative;
  isolation: isolate;
  margin-bottom: 26px;
  min-height: clamp(126px, 14vw, 172px);
}

.zp-digital-mv::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--zp-digital-mv-before-width);
  z-index: 1;
  clip-path: var(--zp-digital-mv-clip);
  background-image: linear-gradient(0deg, rgba(161, 212, 66, 0.28), rgba(161, 212, 66, 0.28)), url(../../images/digital-mv_bg.webp);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
}

.zp-digital-mv::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--zp-digital-mv-after-width);
  z-index: 0;
  transform: translateY(50px);
  clip-path: var(--zp-digital-mv-clip);
  background: linear-gradient(150deg, #9bcf49 0%, #7fbe35 55%, #72b630 100%);
  mix-blend-mode: multiply;
}

.zp-digital-mv .l-inner {
  padding-block: 80px;
}

.zp-digital-mv__inner {
  position: relative;
  z-index: 2;
  min-height: clamp(126px, 14vw, 172px);
  display: flex;
  align-items: center;
  padding-left: clamp(20px, 3.2vw, 46px);
}

.zp-digital-mv__title {
  margin: 0;
  font-size: clamp(var(--fs-fluid-36), 4.2vw, var(--fs-promo-download-title));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-white);
}

.zp-digital-mv__title small {
  display: block;
  margin-top: 8px;
  font-size: clamp(var(--fs-body), 1.6vw, var(--fs-services-card-title));
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.95;
}

@media (max-width: 767px) {
  .zp-digital-mv {
    --zp-digital-mv-clip: polygon(0 0, 94% 0, 84% 100%, 0 100%);
    --zp-digital-mv-before-width: 90%;
    --zp-digital-mv-after-width: 98%;
    margin-bottom: 18px;
  }

  .zp-digital-mv .l-inner {
    padding-block: 40px;
  }

  .zp-digital-mv__inner {
    min-height: 110px;
    padding-left: 18px;
  }

  .zp-digital-mv::after {
    transform: translateY(20px);
    width: 92%;
  }
}