/* ==========================================================================
   TOP メインビジュアルの脱毛バナー（医療脱毛／メンズ医療脱毛）2026-10-30 追加
   PC : メインビジュアル右上に横並び（左：医療脱毛、右：メンズ医療脱毛）
   SP : メインビジュアルの下に縦並び（上：医療脱毛、下：メンズ医療脱毛）
   ========================================================================== */
.p-renew-mv__banners {
  position: absolute;
  top: 3vw;
  right: 2.5vw;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 1.1vw;
}

.p-renew-mv__banners-item {
  display: block;
  height: max(9.5vw, 84px);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .28));
  transition: opacity .3s ease;
}

.p-renew-mv__banners-item img {
  display: block;
  width: auto;
  height: 100%;
  border-radius: 4px;
}

.p-renew-mv__banners-item:hover,
.p-renew-mv__banners-item:focus-visible {
  opacity: .85;
}

.p-renew-mv__banners-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .p-renew-mv__banners {
    display: none;
  }

  .p-renew-mv__banners-sp {
    display: flex;
    flex-direction: column;
    gap: 3.0769230769vw;
    width: 79.4871794872vw;
    margin: 4.1025641026vw auto .2564102564vw;
  }

  .p-renew-mv__banners-sp .p-renew-mv__banners-item {
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .18));
  }

  .p-renew-mv__banners-sp .p-renew-mv__banners-item img {
    width: 100%;
    height: auto;
  }
}