#twenty-anniv-kv {
  width: 100%;
  aspect-ratio: 2/1;
  position: relative;
  overflow: hidden;
  margin-bottom: 11rem;
}
#twenty-anniv-kv .mv-head {
  position: absolute;
  inset: 0;
  z-index: 20;
  margin: 0;
  pointer-events: none;
}
#twenty-anniv-kv .mv-head__h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#twenty-anniv-kv .mv-head__logo,
#twenty-anniv-kv .mv-head__title {
  position: absolute;
  display: block;
  z-index: 10;
}
#twenty-anniv-kv .mv-head__logo img,
#twenty-anniv-kv .mv-head__title img {
  display: block;
  width: 100%;
  height: auto;
}
#twenty-anniv-kv .mv-head__logo {
  top: 9%;
  left: 8%;
  width: clamp(120px, 14vw, 220px);
}
#twenty-anniv-kv .mv-head__title {
  right: 5%;
  bottom: 6%;
  width: clamp(220px, 40vw, 583px);
}
#twenty-anniv-kv .kv__image {
  height: 100%;
  background: #d7d1cf;
  display: grid;
  place-items: center;
  padding: 0;
}
#twenty-anniv-kv .mv-collage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
#twenty-anniv-kv .collage {
  position: relative;
  aspect-ratio: 2/1;
  height: min(920px, 100%);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
#twenty-anniv-kv .collage .photo.fade-in {
  transition-delay: 0s;
}
#twenty-anniv-kv .collage .photo.fade-in:nth-of-type(1) {
  transition-delay: 0.72s;
}
#twenty-anniv-kv .collage .photo.fade-in:nth-of-type(2) {
  transition-delay: 0.4s;
}
#twenty-anniv-kv .collage .photo.fade-in:nth-of-type(3) {
  transition-delay: 0.28s;
}
#twenty-anniv-kv .collage .photo.fade-in:nth-of-type(4) {
  transition-delay: 0.43s;
}
#twenty-anniv-kv .collage .photo.fade-in:nth-of-type(5) {
  transition-delay: 0.57s;
}
#twenty-anniv-kv .collage .photo.fade-in:nth-of-type(6) {
  transition-delay: 0.36s;
}
#twenty-anniv-kv .collage .photo.fade-in:nth-of-type(7) {
  transition-delay: 0.86s;
}
#twenty-anniv-kv .collage .photo.fade-in:nth-of-type(8) {
  transition-delay: 0.68s;
}
#twenty-anniv-kv .collage .photo.fade-in:nth-of-type(9) {
  transition-delay: 0.35s;
}
#twenty-anniv-kv .collage .photo.fade-in:nth-of-type(10) {
  transition-delay: 0.48s;
}
#twenty-anniv-kv .photo {
  --img-scale: 1;
  --img-origin: 50% 50%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  z-index: var(--z);
  box-sizing: border-box;
  overflow: hidden;
  aspect-ratio: var(--ar, 3/2);
  transform: translate(-50%, -50%) rotate(var(--r));
  background: #fff;
  padding: 5px;
  border-radius: 2px;
}
#twenty-anniv-kv .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 8px solid #fff;
  border-radius: 2px;
  pointer-events: none;
}
#twenty-anniv-kv .photo img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(var(--img-scale));
  transform-origin: var(--img-origin);
}
#twenty-anniv-kv .photo:nth-of-type(1) {
  --x: 28%;
  --y: 49%;
  --w: 22%;
  --r: 7.93deg;
  --z: 5;
  --ar: 3 / 2;
  --img-scale: 1;
  --img-origin: 50% 50%;
}
#twenty-anniv-kv .photo:nth-of-type(2) {
  --x: 61%;
  --y: 26%;
  --w: 15%;
  --r: 2.96deg;
  --z: 5;
  --ar: 2 / 2.8;
  --img-scale: 1.2;
  --img-origin: 50% 0%;
}
#twenty-anniv-kv .photo:nth-of-type(3) {
  --x: 83%;
  --y: 25%;
  --w: 20%;
  --r: -20.38deg;
  --z: 3;
  --ar: 3 / 2;
  --img-scale: 1.4;
  --img-origin: 50% 50%;
}
#twenty-anniv-kv .photo:nth-of-type(4) {
  --x: 14%;
  --y: 71%;
  --w: 15%;
  --r: -12.3deg;
  --z: 6;
  --ar: 2 / 2.8;
  --img-scale: 1.4;
  --img-origin: 30% 50%;
}
#twenty-anniv-kv .photo:nth-of-type(5) {
  --x: 38%;
  --y: 24%;
  --w: 21%;
  --r: -7.03deg;
  --z: 5;
  --ar: 3 / 2;
  --img-scale: 1.4;
  --img-origin: 70% 10%;
}
#twenty-anniv-kv .photo:nth-of-type(6) {
  --x: 76%;
  --y: 54%;
  --w: 20%;
  --r: 20deg;
  --z: 5;
  --ar: 3 / 2;
  --img-scale: 1.2;
  --img-origin: 50% 50%;
}
#twenty-anniv-kv .photo:nth-of-type(7) {
  --x: 33%;
  --y: 79%;
  --w: 21%;
  --r: -13.3deg;
  --z: 5;
  --ar: 3 / 2;
  --img-scale: 1.8;
  --img-origin: 30% 50%;
}
#twenty-anniv-kv .photo:nth-of-type(8) {
  --x: 50%;
  --y: 58%;
  --w: 14%;
  --r: 11.37deg;
  --z: 6;
  --ar: 2 / 3;
  --img-scale: 2.2;
  --img-origin: 35% 67%;
}
#twenty-anniv-kv .photo:nth-of-type(9) {
  --x: 62%;
  --y: 84%;
  --w: 19%;
  --r: 7.93deg;
  --z: 5;
  --ar: 3 / 2;
  --img-scale: 1.5;
  --img-origin: 25% 73%;
}
#twenty-anniv-kv .photo:nth-of-type(10) {
  --x: 84%;
  --y: 78%;
  --w: 20%;
  --r: -26.3deg;
  --z: 4;
  --ar: 3 / 2;
  --img-scale: 1.5;
  --img-origin: 50% 50%;
}

@media (max-width: 767px) {
  #twenty-anniv-kv {
    margin-bottom: 3.2rem;
    aspect-ratio: 9/10;
  }
  #twenty-anniv-kv .mv-head__logo {
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(60vw, 95px);
  }
  #twenty-anniv-kv .mv-head__title {
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
    width: min(70vw, 400px);
  }
  #twenty-anniv-kv .collage {
    width: 100%;
    height: auto;
    aspect-ratio: 25/28;
  }
  #twenty-anniv-kv .photo::after {
    border: 4px solid #fff;
  }
  #twenty-anniv-kv .photo:nth-of-type(1) {
    --x: 20%;
    --y: 18%;
    --w: 36%;
    --r: 7.93deg;
    --z: 5;
    --ar: 3 / 2;
    --img-scale: 1;
    --img-origin: 50% 50%;
  }
  #twenty-anniv-kv .photo:nth-of-type(2) {
    --x: 53%;
    --y: 22%;
    --w: 25%;
    --r: 2.96deg;
    --z: 3;
    --ar: 2 / 2.8;
    --img-scale: 1.3;
    --img-origin: 50% 0%;
  }
  #twenty-anniv-kv .photo:nth-of-type(3) {
    --x: 83%;
    --y: 25%;
    --w: 35%;
    --r: -12.38deg;
    --z: 6;
    --ar: 3 / 2;
    --img-scale: 1.7;
    --img-origin: 63% 50%;
  }
  #twenty-anniv-kv .photo:nth-of-type(4) {
    --x: 15%;
    --y: 59%;
    --w: 23%;
    --r: -15.3deg;
    --z: 6;
    --ar: 2 / 2.8;
    --img-scale: 1.6;
    --img-origin: 30% 50%;
  }
  #twenty-anniv-kv .photo:nth-of-type(5) {
    --x: 26%;
    --y: 34%;
    --w: 34%;
    --r: -7.03deg;
    --z: 5;
    --ar: 3 / 2;
    --img-scale: 1.6;
    --img-origin: 70% 32%;
  }
  #twenty-anniv-kv .photo:nth-of-type(6) {
    --x: 83%;
    --y: 49%;
    --w: 34%;
    --r: 20deg;
    --z: 5;
    --ar: 3 / 2;
    --img-scale: 1.2;
    --img-origin: 50% 50%;
  }
  #twenty-anniv-kv .photo:nth-of-type(7) {
    --x: 18%;
    --y: 81%;
    --w: 34%;
    --r: -13.3deg;
    --z: 6;
    --ar: 3 / 2;
    --img-scale: 1.8;
    --img-origin: 30% 50%;
  }
  #twenty-anniv-kv .photo:nth-of-type(8) {
    --x: 42%;
    --y: 71%;
    --w: 22%;
    --r: 11.37deg;
    --z: 7;
    --ar: 2 / 3;
    --img-scale: 2.2;
    --img-origin: 35% 67%;
  }
  #twenty-anniv-kv .photo:nth-of-type(9) {
    --x: 58%;
    --y: 82%;
    --w: 35%;
    --r: 7.93deg;
    --z: 5;
    --ar: 3 / 2;
    --img-scale: 1.5;
    --img-origin: 25% 73%;
  }
  #twenty-anniv-kv .photo:nth-of-type(10) {
    --x: 81%;
    --y: 70%;
    --w: 35%;
    --r: -26.3deg;
    --z: 4;
    --ar: 3 / 2;
    --img-scale: 1.5;
    --img-origin: 50% 50%;
  }
}