/* ========================================
   横山製作所 - サブタイトル統一ルール
   ======================================== */

/* 📝 section-subtitle 統一ルール
   ================================
   1. マージン: 下部に calc(var(--space-2xl) * 1.5) 固定
   2. 最大幅: 800px で中央寄せ
   3. テキスト: 中央寄せ
   4. このルールは全ページで絶対遵守
   ================================ */

.section-subtitle {
  /* 基本スタイル */
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.6;
  color: var(--auxiliary-text);
  
  /* 統一ルール: マージン・配置 */
  width: 100%;
  max-width: 800px;
  margin: 0 auto calc(var(--space-2xl) * 1.5); /* 固定下部マージン: 72px */
  padding: 0 var(--space-lg);
  text-align: center;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .section-subtitle {
    padding: 0 var(--space-md);
    margin-bottom: calc(var(--space-xl) * 1.5); /* モバイルでは少し狭く: 48px */
  }
}

/* 特別なケース: 複数行サブタイトル */
.section-subtitle.multi-line {
  line-height: 1.8;
}

/* 🔒 重要: このルールは絶対に変更しないこと
   ================================
   全ページでの統一感を保つため、以下の値は固定:
   - PC: margin-bottom: calc(var(--space-2xl) * 1.5) = 72px
   - Mobile: margin-bottom: calc(var(--space-xl) * 1.5) = 48px
   - max-width: 800px
   - text-align: center
   ================================ */