/* ========================
  Himeji Jumbo
  ========================= */

.himeji-jumbo-wrapper {
  background-color: #942C32;
  width: 100%;
  height: auto;
  aspect-ratio: 10/9;
  position: relative;
}

.himeji-1 {
  width: 11vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 15vw;
  left: 24vw;
  z-index: 9;
}

.himeji-2 {
  width: 3vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 26vw;
  left: 42vw;
  z-index: 9;
}

.himeji-3 {
  width: 9vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 16vw;
  left: 45vw;
  z-index: 9;
}

.himeji-4 {
  width: 6vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 23vw;
  left: 53vw;
  z-index: 9;
}

.himeji-5 {
  width: 4vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 33vw;
  left: 53vw;
  z-index: 9;
}

.himeji-6 {
  width: 2.8vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 34.5vw;
  left: 58vw;
  z-index: 9;
}

.himeji-7 {
  width: 13vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 21vw;
  left: 5vw;
  z-index: 16;
}

.himeji-8 {
  width: 20vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 39vw;
  left: 2vw;
  z-index: 15;
}

.himeji-9 {
  width: 20vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 9vw;
  left: 5vw;
  z-index: 1;
}

.himeji-10 {
  width: 35vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 35vw;
  left: 13vw;
  z-index: 14;
}

.himeji-11 {
  width: 17vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 46vw;
  left: 17vw;
  z-index: 17;
}

.himeji-12 {
  width: 17vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 57vw;
  left: 12vw;
  z-index: 18;
}

.himeji-13 {
  width: 12vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 49vw;
  left: 32vw;
  z-index: 20;
}

.himeji-14 {
  width: 36vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 40vw;
  left: 41vw;
  z-index: 19;
}

.himeji-15 {
  width: 13vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 29vw;
  left: 58vw;
  z-index: 16;
}

.himeji-16 {
  width: 34vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 12vw;
  left: 32vw;
  z-index: 1;
}

.himeji-17 {
  width: 55vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 12vw;
  left: 10vw;
  z-index: 1;
}

.himeji-18 {
  width: 16vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 19vw;
  left: 14vw;
  z-index: 20;
}

.himeji-19 {
  width: 72vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 22vw;
  left: 18vw;
  z-index: 10;
}

.himeji-text-1 {
  width: 52vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0vw;
  left: 27vw;
  z-index: 9;
}

.himeji-text-2 {
  width: 7.5vw;
  height: auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 55vw;
  left: 69.5vw;
  z-index: 9;
}


/* ========================
    Himeji Jumbo - Animation
    ========================= */

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.himeji-1,
.himeji-2,
.himeji-3,
.himeji-4,
.himeji-5,
.himeji-6,
.himeji-7,
.himeji-8,
.himeji-9,
.himeji-10,
.himeji-11,
.himeji-12,
.himeji-13,
.himeji-14,
.himeji-15,
.himeji-16,
.himeji-17,
.himeji-18,
.himeji-19,
.himeji-text-1,
.himeji-text-2 {
  opacity: 0;
}

.jumbo-wrapper-visible .himeji-1,
.jumbo-wrapper-visible .himeji-2,
.jumbo-wrapper-visible .himeji-3,
.jumbo-wrapper-visible .himeji-4,
.jumbo-wrapper-visible .himeji-5,
.jumbo-wrapper-visible .himeji-6,
.jumbo-wrapper-visible .himeji-7,
.jumbo-wrapper-visible .himeji-8,
.jumbo-wrapper-visible .himeji-9,
.jumbo-wrapper-visible .himeji-10,
.jumbo-wrapper-visible .himeji-11,
.jumbo-wrapper-visible .himeji-12,
.jumbo-wrapper-visible .himeji-13,
.jumbo-wrapper-visible .himeji-14,
.jumbo-wrapper-visible .himeji-15,
.jumbo-wrapper-visible .himeji-16,
.jumbo-wrapper-visible .himeji-17,
.jumbo-wrapper-visible .himeji-18,
.jumbo-wrapper-visible .himeji-19,
.jumbo-wrapper-visible .himeji-text-1,
.jumbo-wrapper-visible .himeji-text-2 {
  animation: fadeInUp 1s ease forwards;
}

.jumbo-wrapper-visible .himeji-text-1 {
  animation-delay: 0s;
}

.jumbo-wrapper-visible .himeji-1 {
  animation-delay: 0.4s;
}

.jumbo-wrapper-visible .himeji-2 {
  animation-delay: 0.6s;
}

.jumbo-wrapper-visible .himeji-3 {
  animation-delay: 0.8s;
}

.jumbo-wrapper-visible .himeji-4 {
  animation-delay: 1.0s;
}

.jumbo-wrapper-visible .himeji-5 {
  animation-delay: 1.2s;
}

.jumbo-wrapper-visible .himeji-6 {
  animation-delay: 1.4s;
}

.jumbo-wrapper-visible .himeji-7 {
  animation-delay: 1.6s;
}

.jumbo-wrapper-visible .himeji-8 {
  animation-delay: 1.8s;
}

.jumbo-wrapper-visible .himeji-9 {
  animation-delay: 2.0s;
}

.jumbo-wrapper-visible .himeji-10 {
  animation-delay: 2.2s;
}

.jumbo-wrapper-visible .himeji-11 {
  animation-delay: 2.4s;
}

.jumbo-wrapper-visible .himeji-12 {
  animation-delay: 2.6s;
}

.jumbo-wrapper-visible .himeji-13 {
  animation-delay: 2.8s;
}

.jumbo-wrapper-visible .himeji-14 {
  animation-delay: 3.0s;
}

.jumbo-wrapper-visible .himeji-15 {
  animation-delay: 3.2s;
}

.jumbo-wrapper-visible .himeji-16 {
  animation-delay: 3.4s;
}

.jumbo-wrapper-visible .himeji-17 {
  animation-delay: 3.6s;
}

.jumbo-wrapper-visible .himeji-18 {
  animation-delay: 3.8s;
}

.jumbo-wrapper-visible .himeji-19 {
  animation-delay: 4.0s;
}

.jumbo-wrapper-visible .himeji-text-2 {
  animation-delay: 4.2s;
}

@media screen and (max-width: 767px) {

  .himeji-jumbo-wrapper {
    zoom: 1.2;
    overflow: hidden;
    aspect-ratio: 1/1;
    position: relative;
  }


  .himeji-text-1 {
    width: 86%;
    height: auto;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 7%;
    z-index: 9;
  }

  .himeji-text-2 {
    display: none;
  }

  .himeji-1 {
    top: 25vw;
  }

  .himeji-2 {
    top: 36vw;
  }


  .himeji-3 {
    top: 26vw;
  }

  .himeji-4 {
    top: 33vw;
  }

  .himeji-5 {
    top: 43vw;
  }

  .himeji-6 {
    top: 44.5vw;
  }

  .himeji-7 {
    top: 31vw;
  }

  .himeji-8 {
    top: 49vw;
  }

  .himeji-9 {
    top: 19vw;
  }

  .himeji-10 {
    top: 45vw;
  }

  .himeji-11 {
    top: 56vw;
  }

  .himeji-12 {
    top: 67vw;
  }

  .himeji-13 {
    top: 59vw;
  }

  .himeji-14 {
    top: 50vw;
  }

  .himeji-15 {
    top: 39vw;
  }

  .himeji-16 {
    top: 22vw;
  }

  .himeji-17 {
    top: 22vw;
  }

  .himeji-18 {
    top: 29vw;
  }

  .himeji-19 {
    top: 32vw;
  }

}