.hero{
  position:relative;
  width:100%;
  height:100vh;
  min-height:680px;
  overflow:hidden;
  background:#000;
}

.hero-slide{
  position:absolute;
  inset:-2%;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:0;
  transition:opacity 1.2s ease, transform 7s ease;
  transform:scale(1.04);
  will-change:opacity, transform;
}

.hero-slide.active{
  opacity:1;
  transform:scale(1.08);
}

.hero-slide.osaka{
  background-image:url('../img/top/top_slide_summer.png');
  background-position:center center;
}

.hero-slide.fuji{
  background-image:url('../img/top/top_slide_spling.jpg');
  background-position:center center;
}

.hero-slide.kyoto{
  background-image:url('../img/top/top_slide_autumn.png');
  background-position:center center;
}

.hero-slide.kaisendon{
  background-image:url('../img/top/top_slide_winter.png');
  background-position:center 58%;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 42%, rgba(0,0,0,0.18) 100%),
    linear-gradient(180deg,rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.20) 100%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:5;
  height:100%;
  display:flex;
  align-items:center;
}

.hero-copy{
  width:min(calc(100% - 60px),var(--container));
  margin:0 auto;
}

.hero-copy h1{
  color:#fff;
  /* font-size:clamp(2.4rem,4.5vw,5rem); */
  font-weight:500;
  letter-spacing:-0.04em;
  margin:0;
  line-height:1.15;
  max-width:720px;
  text-shadow:0 10px 28px rgba(0,0,0,0.22);
}

@media (max-width:900px){
  .hero{
    min-height:100svh;
  }

  .hero-copy{
    width:min(calc(100% - 32px),var(--container));
  }

  .hero-copy h1{
    font-size:clamp(2rem,7vw,3.5rem);
  }

  .hero-slide.osaka{
    background-position:56% center;
  }

  .hero-slide.fuji{
    background-position:center center;
  }

  .hero-slide.kyoto{
    background-position:58% center;
  }

  .hero-slide.kaisendon{
    background-position:center 52%;
  }
}

@media (max-width:640px){
  .hero-copy h1{
    font-size:clamp(1.8rem,9vw,3rem);
    line-height:1.24;
    max-width:92%;
  }

  .hero-slide{
    inset:-4%;
  }

  .hero-slide.osaka{
    background-position:60% center;
  }

  .hero-slide.fuji{
    background-position:54% center;
  }

  .hero-slide.kyoto{
    background-position:62% center;
  }

  .hero-slide.kaisendon{
    background-position:56% 52%;
  }
}