/* ════════════════════════════════════════════════
   SOUND セクション専用スタイル
   - tour2026/css/style_v2.css の :root トークン・.section / .wrap を前提に上乗せ
   - WOVN対策はこのファイル末尾に自己完結で記述（CLAUDE.md 準拠）
   - gap 不使用 / display:grid 不使用 / flex コンテナは末尾で font-size:0
   - 図版（SVG）を主役に大きく扱うレイアウト
   ════════════════════════════════════════════════ */

.section--sound {
  background: var(--band);
}

/* ── リード（見出し） ───────────────────────── */
.sound-lead {
  margin-top: 8px;
}
.sound-logo {
  display: block;
  width: clamp(160px, 30vw, 320px);
  margin: 0 0 24px;
}
.sound-head {
  font-size: clamp(1.15rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--fg);
  margin: 0;
}
.sound-lead-text {
  max-width: 900px;
  margin: 28px 0 0;
  font-size: 1rem;
  line-height: 2.1;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ── 配置図（主役・大きく） ──────────────────── */
.sound-figure--hero {
  margin: 64px 0 0;
}
.sound-fig-wrap {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

/* インラインSVG — アニメーションはGSAP(JS側)で制御 */
#sound-layout-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 本文（リード文と同じ幅・左揃え） ────────── */
.sound-text {
  max-width: 900px;
  margin: 64px 0 0;
}
.sound-text p {
  font-size: 1rem;
  line-height: 2.1;
  color: var(--muted);
  margin: 0 0 1.5em;
  letter-spacing: 0.02em;
}
.sound-text p:last-child {
  margin-bottom: 0;
}
.sound-text-end {
  color: var(--fg) !important;
  font-weight: 500;
}

/* ── レスポンシブ ─────────────────────────────── */
@media (max-width: 760px) {
  .sound-figure--hero {
    margin-top: 44px;
  }
  .sound-text {
    margin-top: 48px;
  }
  .sound-head {
    line-height: 1.8;
  }
}


/* ════════════════
   WOVN対策（必ず末尾に配置）
   - このセクションはラベルを図(SVG)に焼き込んでおり、翻訳対象のテキストノードを持つ
     flex コンテナが本文(.sound-text・通常フロー)のみのため、font-size:0 対策は不要。
   ════════════════ */