/* トップの主役・高さ・画像端の調整 / 制作：みろん */
.hero {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--header));
  padding: 42px 5% 76px;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  min-height: 0;
  width: 100%;
  padding-top: 0;
  gap: clamp(28px, 4vw, 60px);
}
.hero h1.hero-name {
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .025em;
  margin: 22px 0;
}
.hero h1.hero-name > span {
  display: block;
  color: var(--yellow);
  font: 13px/2 Arial, sans-serif;
  letter-spacing: .28em;
  margin-top: 10px;
}
.hero-tagline {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(25px, 2.3vw, 34px);
  line-height: 1.6;
  letter-spacing: .07em;
  margin: 20px 0;
}
.hero-description { margin: 18px 0 20px; font-size: 15px; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.hero-actions .button { gap: 42px; padding: 16px 24px; min-height: 54px; }
.hero-visual .hero-signature {
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: clamp(112px, 12vw, 160px);
  height: auto;
  opacity: .95;
  transform: rotate(-7deg);
  z-index: 3;
  pointer-events: none;
}
.hero-visual {
  width: 100%;
  height: clamp(420px, calc(100svh - var(--header) - 118px), 680px);
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.hero-art-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 左右と下端を別の要素でぼかし、複数マスクの合成差を避ける。 */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 94%, transparent);
}
.hero-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
  /* 左右と同様に上下も透過。中央を鮮明に保ち、両端を完全透明にする。 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 5%, #000 12%, #000 80%, rgba(0, 0, 0, .55) 91%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 5%, #000 12%, #000 80%, rgba(0, 0, 0, .55) 91%, transparent 100%);
  mask-composite: add;
}
.hero-visual .visual-tag { display: none; }
.hero-visual .sonar { opacity: .25; }
.hero-index { top: 20px; }
.dive-link { bottom: 48px; }
.hero-bottom { bottom: 18px; }

@media (min-width: 701px) and (max-width: 1000px) {
  .hero h1.hero-name { font-size: 35px; }
  .hero-tagline { font-size: 25px; }
  .hero-description { font-size: 14px; }
  .hero-actions { gap: 20px; }
  .hero-actions .button { padding-inline: 20px; gap: 28px; }
}

@media (max-width: 700px) {
  .hero { padding: 38px 5% 66px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hero-copy > .eyebrow { font-size: 11px; }
  .hero h1.hero-name { font-size: clamp(30px, 8.5vw, 48px); margin: 14px 0; }
  .hero h1.hero-name > span { font-size: 11px; margin-top: 5px; }
  .hero-tagline { font-size: clamp(21px, 5.8vw, 30px); margin: 12px 0; }
  .hero-description { font-size: 14px; line-height: 1.9; margin: 12px 0 14px; }
  .hero-actions { gap: 20px; }
  .hero-actions .button { min-height: 50px; gap: 32px; padding: 14px 22px; }
  .hero-visual .hero-signature { width: 108px; right: calc(5vw + 8px); bottom: 12px; }
  .hero-visual {
    width: calc(100% + 10vw);
    height: clamp(280px, 80vw, 410px);
    margin: 0 0 0 -5vw;
    padding: 0;
  }
  .hero-art { object-position: 50% 18%; }
  .hero-index { top: 15px; }
  .hero-bottom { font-size: 7px; }
  .dive-link { bottom: 43px; }
}

@media (max-width: 370px) {
  .hero h1.hero-name { font-size: 29px; }
  .hero-tagline { font-size: 20px; }
  .hero-actions { gap: 16px; }
}