.gallery-hero {
  position: relative;
  aspect-ratio: 1920/737;
  overflow: hidden;
  background: #029b79;
}
.gallery-hero__page-label {
  position: absolute;
  top: clamp(10px, 2.7svh, 51px);
  right: clamp(20px, 5.21vw, 100px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.78vw, 15px);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
.gallery-hero__no-label {
  font-family: "Jost", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 1.04vw, 1.25rem);
  letter-spacing: -0.022em;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1;
}
.gallery-hero__jp-label {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 0.94vw, 1.125rem);
  letter-spacing: -0.044em;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1.5;
}
.gallery-hero__page-no {
  position: absolute;
  left: 0%;
  width: 100vw;
  text-align: center;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  font-family: "Jost", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3.75rem, 9.375vw, 11.25rem);
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.022em;
  white-space: nowrap;
  opacity: 0;
}
.gallery-hero__img-wrap {
  position: absolute;
  left: calc(var(--sidebar-w) + clamp(20px, 3vw, 60px));
  right: 5.21%;
  top: 12.48%;
  bottom: 9.77%;
  z-index: 1;
}
.gallery-hero__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.gallery-hero__frame rect {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.gallery-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
}
.gallery-hero__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #029b79;
  mix-blend-mode: multiply;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.gallery-hero.is-gal-ready .gallery-hero__frame rect {
  animation: kp-gal-draw 1.3s ease forwards;
}
.gallery-hero.is-gal-ready .gallery-hero__img {
  animation: kp-gal-fill 1.3s ease forwards;
}
.gallery-hero.is-gal-ready .gallery-hero__img-wrap::after {
  animation: kp-gal-mask 1.3s ease forwards;
}
.gallery-hero.is-gal-ready .gallery-hero__page-label {
  animation: kp-gal-fade 0.7s ease forwards 1.15s;
}
.gallery-hero.is-gal-ready .gallery-hero__page-no {
  animation: kp-gal-fade 0.9s ease forwards 1.1s;
}
@media screen and (max-width: 768px) {
  .gallery-hero {
    aspect-ratio: auto;
    padding: clamp(70px, 20vw, 110px) clamp(16px, 5vw, 30px) clamp(40px, 12vw, 70px);
  }
  .gallery-hero__img-wrap {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-height: none;
    aspect-ratio: 1/1;
  }
  .gallery-hero__page-label {
    top: 12px;
    right: 16px;
  }
  .gallery-hero__page-no {
    font-size: clamp(3rem, 18vw, 5.625rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-hero__page-label, .gallery-hero__page-no {
    opacity: 1;
  }
  .gallery-hero__img {
    opacity: 1;
  }
  .gallery-hero__img-wrap::after {
    opacity: 0.85;
  }
  .gallery-hero__frame rect {
    stroke-dashoffset: 0;
  }
}

@keyframes kp-gal-draw {
  0% {
    opacity: 1;
    stroke-dashoffset: 100;
  }
  35% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  60% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -100;
  }
}
@keyframes kp-gal-fill {
  0%, 45% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes kp-gal-mask {
  0%, 45% {
    opacity: 0;
  }
  100% {
    opacity: 0.85;
  }
}
@keyframes kp-gal-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.gallery-hero--menu .gallery-hero__panel {
  position: absolute;
  left: clamp(16px, 5.21vw, 100px);
  top: 0;
  bottom: 0;
  width: clamp(200px, 23.33vw, 360px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.gallery-hero--menu .gallery-hero__panel a {
  pointer-events: auto;
}
.gallery-hero--menu .mv-menu {
  padding: 0;
}
.gallery-hero--menu .gallery-hero__img-wrap {
  left: clamp(200px, 26vw, 470px);
}
@media (min-width: 769px) {
  .gallery-hero--menu {
    container-type: size;
  }
  .gallery-hero--menu .gallery-hero__panel {
    padding-block: clamp(8px, 6cqh, 50px);
  }
  .gallery-hero--menu .mv-menu__title {
    font-size: clamp(1rem, 4cqh, 1.875rem);
    margin-bottom: clamp(6px, 1.6cqh, 20px);
  }
  .gallery-hero--menu .mv-menu__list {
    gap: clamp(4px, 1.4cqh, 22px);
    margin-bottom: clamp(8px, 2cqh, 26px);
  }
  .gallery-hero--menu .mv-menu__list a {
    gap: clamp(6px, 1cqh, 15px);
  }
  .gallery-hero--menu .mv-menu__no {
    font-size: clamp(0.6875rem, 2.5cqh, 1.25rem);
  }
  .gallery-hero--menu .mv-menu__label {
    font-size: clamp(0.625rem, 2.3cqh, 1.125rem);
  }
  .gallery-hero--menu .mv-menu__vr {
    width: auto;
    min-width: clamp(140px, 40cqh, 250px);
    height: clamp(28px, 5.4cqh, 42px);
    font-size: clamp(1rem, 2.5cqh, 1.25rem);
  }
}
.gallery-hero--menu.is-gal-ready .gallery-hero__panel {
  animation: kp-gal-fade 0.8s ease forwards 1.05s;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-hero--menu .gallery-hero__panel {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .gallery-hero--menu .gallery-hero__panel {
    display: none;
  }
  .gallery-hero--menu .gallery-hero__img-wrap {
    left: auto;
  }
}