.kv {
  padding-bottom: calc(35vw - 3.5rem);
}
@media screen and (max-width: 767px) {
  .kv {
    padding-bottom: calc(72vw - 2rem);
  }
}
@media screen and (min-width: 1714px) {
  .kv {
    padding-bottom: calc(600px - 3.5rem);
  }
}

.kv-bg {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kv-base-layer {
  flex: 1 1 auto;
  min-height: 0;
  background-color: #faf9f7;
  background-image: radial-gradient(rgba(92, 64, 51, 0.05) 0.4px, transparent 0.4px);
  background-size: 2px 2px;
}

.kv-photo-layer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 35vw;
}

@media screen and (max-width: 767px) {
  .kv-photo-layer {
    height: 60vw;
  }
}
@media screen and (min-width: 1714px) {
  .kv-photo-layer {
    height: 600px;
  }
}

.kv-photo-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kv-photo-slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
}

.kv-photo-slide--1 {
  background-image: url("../kv/kv_pic-01.jpg");
  animation: kv-slide-1 18s ease-in-out infinite;
}

.kv-photo-slide--2 {
  background-image: url("../kv/kv_pic-02.jpg");
  animation: kv-slide-2 18s ease-in-out infinite;
}

.kv-photo-slide--3 {
  background-image: url("../kv/kv_pic-03.jpg");
  animation: kv-slide-3 18s ease-in-out infinite;
}

.kv-yukimasa {
  position: absolute;
  z-index: 1;
  width: 124px;
  right: 117px;
  top: -84px;
}

.kv-yukimasa img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .kv-yukimasa {
    width: 96px;
    top: -64px;
    right: 124px;
  }
}

@media screen and (max-width: 639px) {
  .kv-yukimasa {
    right: 50%;
    transform: translateX(50%);
  }
}

@keyframes kv-slide-1 {
  0%,
  23% {
    opacity: 1;
  }
  33%,
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes kv-slide-2 {
  0%,
  23% {
    opacity: 0;
  }
  33%,
  56% {
    opacity: 1;
  }
  66%,
  100% {
    opacity: 0;
  }
}

@keyframes kv-slide-3 {
  0%,
  56% {
    opacity: 0;
  }
  66%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ==========================================================================
   ページ読み込み時アニメーション
   ========================================================================== */

@keyframes kv-entrance {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kv-bg-entrance {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kv-stagger {
  opacity: 0;
  animation: kv-entrance 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.kv-stagger-1 { animation-delay: 0.1s; }
.kv-stagger-2 { animation-delay: 0.25s; }
.kv-stagger-3 { animation-delay: 0.4s; }
.kv-stagger-4 { animation-delay: 0.55s; }
.kv-stagger-5 { animation-delay: 0.7s; }

.kv-bg {
  opacity: 0;
  animation: kv-bg-entrance 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .kv-photo-slide {
    animation: none;
    opacity: 0;
  }

  .kv-photo-slide--1 {
    opacity: 1;
  }

  .kv-stagger,
  .kv-bg {
    opacity: 1;
    animation: none;
    transform: none;
  }
}