@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500&family=Zen+Kaku+Gothic+New:wght@400&display=swap");

.hero-composed {
  position: relative;
  width: 100%;
  min-height: calc(100svh - 64px);
  aspect-ratio: 2048 / 1199;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #043514 url("assets/TOP.jpg") center center / cover no-repeat;
}
.hero-composed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 20, 7, .08);
  pointer-events: none;
}
.hero-composed .hero-brand-logo {
  position: absolute;
  left: 8.7%;
  top: 18%;
  width: clamp(210px, 20vw, 310px);
  height: auto;
}
.hero-statement {
  position: absolute;
  margin: 0;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .16);
}
.hero-statement-en {
  left: 9.3%;
  top: 63%;
  font-family: "Bodoni Moda", Didot, "Bodoni 72", serif;
  font-size: clamp(19px, 1.75vw, 27px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .005em;
}
.hero-statement-ja {
  left: 61.2%;
  top: 34%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 400;
  line-height: 3.15;
  letter-spacing: .01em;
  white-space: nowrap;
}
.mobile-introduction { display: none !important; }

@media (max-width: 900px) {
  .hero-composed {
    min-height: calc(100svh - 66px);
    aspect-ratio: auto;
    background-position: 50% center;
  }
  .hero-composed::after { background: rgba(0, 18, 6, .2); }
  .hero-composed .hero-brand-logo {
    left: 7vw;
    top: 8%;
    width: clamp(160px, 42vw, 230px);
  }
  .hero-statement-en {
    left: 7vw;
    top: 47%;
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.55;
  }
  .hero-statement-ja {
    left: 7vw;
    top: 68%;
    max-width: 86vw;
    font-size: clamp(14px, 3.8vw, 18px);
    line-height: 2.25;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .hero-composed { min-height: 740px; }
  .hero-composed .hero-brand-logo { top: 7%; }
  .hero-statement-en { top: 45%; }
  .hero-statement-ja { top: 67%; }
}