/* =========================================================
   HQ Background: Style
   key: ren-hero-fullscreen
   name: LG ラウンジ蓮
   group: set
   type: Style
   layer: hero
   value:
   selector:
   ========================================================= */

.p-hero {
  margin-top: 80px;
  min-height: calc(100svh - 80px);
  background-color: #c6d6f0;
}

.p-hero__bg--1 {
  opacity: 1;
  background-image: url("../img/slide_pc1.webp");
}

.p-hero__bg--2 {
  background-image: url("../img/slide_pc2.webp");
}

.p-hero__inner {
  position: relative;
  z-index: 2;
}

.p-hero__logo {
  background: rgba(61, 73, 121, 0.5) url("../img/overlay_border.png");
}

.p-hero__logo img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.p-hero__scroll {
  color: #fff;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.1em;
  font-family: "Smythe", "Noto Sans JP", sans;
}

.p-hero__scroll::after {
  background: #fff;
}

@keyframes p-hero-scroll-line {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.p-hero__scroll::after {
  animation: p-hero-scroll-line 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@media (max-width: 767px) {
  .p-hero {
    margin-top: 70px;
    min-height: calc(100svh - 70px);
  }

  .p-hero__bg--1 {
    background-image: url("../img/slide_sp1.webp");
  }

  .p-hero__bg--2 {
    background-image: url("../img/slide_sp2.webp");
  }

  .p-hero__scroll {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-hero__scroll::after {
    animation: none;
  }
}