* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #6da6dc; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
img { display: block; max-width: 100%; }

.hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  height: max(760px, 100svh);
  overflow: hidden;
  color: #000;
  isolation: isolate;
}
.hero-photo {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover; object-position: 52% center;
}
.hero-shade {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(
    180deg,
    rgba(33,91,145,.04) 0%,
    transparent 50%,
    rgba(0,0,0,.10) 72%,
    rgba(0,0,0,.35) 100%
  );
}
.hero-title {
  position: absolute; top: 9%; left: 50%; transform: translateX(-50%);
  width: min(800px, 70vw); text-align: center;
}
.hero-title h1 { margin: 0; }
.hero-title h1 img { width: 100%; height: auto; }
.release { width: clamp(180px, 25vw, 300px); margin: 24px auto 0; }
.tagline {
  position: absolute; right: 4.5%; top: 12%;
  width: clamp(72px, 7vw, 118px); max-height: 52vh;
}
.hero-credits {
  position: absolute; left: 5%; bottom: 5%;
	font-size: clamp(.85rem, 1vw, 1rem); line-height: 1.65; letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.3);
}
.hero-credits p { margin: 0; }
.recommend {
  position: absolute; right: 5%; bottom: 5.5%; margin: 0;
	font-size: clamp(.85rem, 1vw, 1rem);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.3);
}
.sns-links {
  position: absolute; right: 4.8%; top: 4%;
  display: flex; gap: 13px; z-index: 2;
}
.sns {
  display: grid; place-items: center; width: 30px; height: 30px;
  color: #fff; opacity: .95; transition: opacity .2s ease, transform .2s ease;
}
.sns:hover { opacity: .7; transform: translateY(-1px); }
.sns svg { width: 24px; height: 24px; fill: currentColor; }

@media (max-width: 800px) {
  .hero { min-height: 680px; height: 100svh; }
  .hero-photo { object-position: 58% center; }
  .hero-title { top: 13%; width: 70vw; }
  .release { width: min(210px, 48vw); margin-top: 16px; }
  .tagline { right: 4%; top: 12%; width: clamp(58px, 12vw, 82px); max-height: 43vh; }
  .hero-credits { left: 20px; bottom: 8%; font-size: .8rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 5px rgba(0,0,0,.4); }
  .recommend { left: 20px; right: auto; bottom: 3.8%; font-size: .8rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 5px rgba(0,0,0,.4); }
  .sns-links { right: 16px; top: 18px; gap: 9px; }
  .sns { width: 28px; height: 28px; }
  .sns svg { width: 21px; height: 21px; }
}
@media (max-width: 480px) {
  .hero-photo { object-position: 62% center; }
  .hero-title { width: 60vw; }
  .tagline { right: 3%; }
  .hero-credits { bottom: 10%; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 5px rgba(0,0,0,.4); }
  .recommend { bottom: 4.5%; color: #fff;}
}