/* ═══════════════════════════════════════════════════
   hero.css  –  ミュージックヒーロービジュアル
   3ページ共通: index / chord-list / scale-list
═══════════════════════════════════════════════════ */

/* ── ベース ────────────────────────────────────── */
.hero-music {
  background:
    linear-gradient(135deg, #09152a 0%, #0c2220 50%, #111827 100%);
  position: relative;
  overflow: hidden;
}

/* ── 五線譜パターン（全面） ─────────────────────── */
.hero-music::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 5本線を80pxピッチで繰り返す */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='80'%3E%3Cline x1='0' y1='12' x2='400' y2='12' stroke='white' stroke-width='1' stroke-opacity='0.09'/%3E%3Cline x1='0' y1='24' x2='400' y2='24' stroke='white' stroke-width='1' stroke-opacity='0.09'/%3E%3Cline x1='0' y1='36' x2='400' y2='36' stroke='white' stroke-width='1' stroke-opacity='0.09'/%3E%3Cline x1='0' y1='48' x2='400' y2='48' stroke='white' stroke-width='1' stroke-opacity='0.09'/%3E%3Cline x1='0' y1='60' x2='400' y2='60' stroke='white' stroke-width='1' stroke-opacity='0.09'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 400px 80px;
  pointer-events: none;
  z-index: 0;
}

/* ── 下端フェードアウト ──────────────────────────── */
.hero-music::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(transparent, rgba(17, 24, 39, 0.55));
  pointer-events: none;
  z-index: 0;
}

/* ── 大きな装飾記号（右） ───────────────────────── */
.hero-deco {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(5rem, 17vw, 15rem);
  color: #3ecfb2;
  opacity: 0.07;
  pointer-events: none;
  line-height: 1;
  user-select: none;
  z-index: 0;
}

/* ── 小さな装飾記号（左） ───────────────────────── */
.hero-deco-left {
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(2.5rem, 7vw, 6rem);
  color: #3ecfb2;
  opacity: 0.045;
  pointer-events: none;
  line-height: 1;
  user-select: none;
  z-index: 0;
}

/* ── コンテンツを前面へ ──────────────────────────── */
.hero-music .hero-body {
  position: relative;
  z-index: 1;
}

/* ── テキスト ────────────────────────────────────── */
.hero-music .title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.01em;
}
.hero-music .subtitle {
  color: #8ecfc4 !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* ── モバイル：高さを抑える ──────────────────────── */
@media (max-width: 768px) {
  .hero-music .hero-body {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .hero-music .title {
    font-size: 1.6rem !important;
  }
  .hero-music .subtitle {
    font-size: 0.95rem !important;
  }
  .hero-deco      { font-size: 5rem; opacity: 0.05; }
  .hero-deco-left { display: none; }
}