/* -----------------------------------------------

brands

----------------------------------------------- */
.lp_wrap .brands {
  background: url(../images/brands_bg.png) no-repeat top center/ 100%;
}

.lp_wrap .brands .box {
  z-index: auto;
}

.lp_wrap .brands_02_logo01 {
  position: absolute;
  top: min(calc(226 / 750 * 100vw), 226px);
  width: min(calc(375 / 750 * 100vw), 375px);
  height: min(calc(129 / 750 * 100vw), 129px);
  left: 0;
  mix-blend-mode: lighten;
}

.lp_wrap .brands_02_logo02 {
  position: absolute;
  top: min(calc(124 / 750 * 100vw), 124px);
  width: min(calc(186 / 750 * 100vw), 186px);
  right: min(calc(95 / 750 * 100vw), 95px);
}

.brands_02_logo01,
.brands_02_logo02 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.brands_02_logo01::after,
.brands_02_logo02::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0.3) 45%,
      rgba(255, 255, 255, 0.8) 49%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.8) 51%,
      rgba(255, 255, 255, 0.3) 55%,
      rgba(255, 255, 255, 0) 65%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: shine 2.5s infinite;
  pointer-events: none;
  mask-image: url('../images/brands_02_logo01_mask.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mix-blend-mode: overlay;
}

.brands_02_logo02::after {
  mask-image: url('../images/brands_02_logo02.png');
}

@keyframes shine {
  0% {
    background-position: 200% -200%;
  }

  100% {
    background-position: -200% 200%;
  }
}