/* 共通 */
#top.hero .slider .slide:is(.route-slide, .kv-split, .kv-zoom) {
  position: relative;
}

#top.hero .slider .slide:is(.kv-split, .kv-zoom) {
  overflow: hidden;
}

/* 1枚目 */
#top.hero .slider .slide.route-slide picture,
#top.hero .slider .slide.route-slide picture img {
  display: block;
  width: 100%;
  height: auto;
}

#top.hero .slider .slide.route-slide .route-slide__svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#top.hero .slider .slide.route-slide .route-slide__svg--sp {
  display: none;
}

.route-slide__mask {
  mask-type: alpha;
}

.route-slide__reveal {
  stroke-dasharray: var(--route-length, 664);
  stroke-dashoffset: var(--route-length, 664);
}

.route-slide.is-route-playing .route-slide__reveal {
  animation: route-draw 2.8s linear forwards;
}

@keyframes route-draw {
  from {
    stroke-dashoffset: var(--route-length, 664);
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* 2枚目 */
#top.hero .slider .slide.kv-split {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#top.hero .slider .slide.kv-split .kv-split__base {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1680 / 1000;
  overflow: hidden;
}

#top.hero .slider .slide.kv-split .kv-split__base img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}

#top.hero .slider .slide.kv-split .kv-split__upper,
#top.hero .slider .slide.kv-split .kv-split__lower {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#top.hero .slider .slide.kv-split .kv-split__upper {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

#top.hero .slider .slide.kv-split .kv-split__lower {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

#top.hero .slider .slide.kv-split .kv-split__upper img,
#top.hero .slider .slide.kv-split .kv-split__lower img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateX(0);
  will-change: transform;
}

#top.hero
  .slider
  .slick-slide:is(.slick-current, .is-kv-leaving)
  .kv-split__upper
  img {
  animation: kv-upper-move 6.5s linear both;
}

#top.hero
  .slider
  .slick-slide:is(.slick-current, .is-kv-leaving)
  .kv-split__lower
  img {
  animation: kv-lower-move 6.5s linear both;
}

@keyframes kv-upper-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(4%);
  }
}

@keyframes kv-lower-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-4%);
  }
}

#top.hero .slider .slide.kv-split .banner-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
}

@media (max-width: 768px) {
  #top.hero .slider .slide.kv-split .kv-split__base {
    aspect-ratio: 3 / 4;
  }
}

/* 3・4枚目 */
#top.hero .slider .slide.kv-zoom picture {
  display: block;
  width: 100%;
  overflow: hidden;
}

#top.hero .slider .slide.kv-zoom picture img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  will-change: transform;
}

/* SP */
@media (max-width: 768px) {
  #top.hero .slider .slide {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }

  #top.hero .slider .slide.route-slide picture,
  #top.hero .slider .slide.kv-split .kv-split__base,
  #top.hero .slider .slide.kv-zoom picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #top.hero .slider .slide.route-slide picture img,
  #top.hero .slider .slide.kv-split .kv-split__base img,
  #top.hero .slider .slide.kv-split .kv-split__upper img,
  #top.hero .slider .slide.kv-split .kv-split__lower img,
  #top.hero .slider .slide.kv-zoom picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  #top.hero .slider .slide.route-slide .route-slide__svg--pc {
    display: none;
  }

  #top.hero .slider .slide.route-slide .route-slide__svg--sp {
    display: block;
  }

  #top.hero .slider .slide.kv-split .kv-split__base {
    aspect-ratio: auto;
  }

  #top.hero .slider .slide.kv-split .kv-split__upper,
  #top.hero .slider .slide.kv-split .kv-split__lower {
    display: block;
  }
}

/* アニメーション軽減設定 */
/* @media (prefers-reduced-motion: reduce) {
  .route-slide.is-route-playing .route-slide__reveal {
    animation: none;
    stroke-dashoffset: 0;
  }

  #top.hero
    .slider
    .slick-slide:is(.slick-current, .is-kv-leaving)
    .kv-split__upper
    img,
  #top.hero
    .slider
    .slick-slide:is(.slick-current, .is-kv-leaving)
    .kv-split__lower
    img {
    animation: none;
  }
} */

#top.hero .slider .slick-slide {
  height: auto !important;
}

#top.hero .slider .slick-slide > div > .slide {
  display: block !important;
}

@media (min-width: 769px) {
  #top.hero .slider .slide.kv-split .kv-split__base {
    aspect-ratio: 1680 / 1000;
  }
}

/* KV 常設バッジ */
#top.hero .slider-container {
  position: relative;
}

#top.hero .slider-container .kv-time-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

#top.hero .slider-container .kv-time-overlay img {
  position: absolute;
  display: block;
  width: 42%;
  height: auto;
  right: 1.1%;
  bottom: 1.5%;
  max-width: none;
}

/* SP */
@media (max-width: 768px) {
  #top.hero .slider-container .kv-time-overlay img {
    width: 62%;
    right: 3.3%;
    bottom: 5.6%;
  }
}