/* ===== 共通デザイン：見出し設定 ===== */
h1 {
  font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 600;
  color: #0f2a3a;   /* 信頼感のある深いブルー */
  text-align: center;
  letter-spacing: 0.05em;
  margin: 1.2em 0;
}

/* ===== 小見出し（h2） ===== */
h2 {
  font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 500;
  color: #5a4a72;   /* 音楽や文化の温かみを感じる紫がかったグレー */
  margin: 1.2em 0 0.6em;
  border-bottom: 2px solid #e4e4e4;
  padding-bottom: 0.3em;
}

/* ===== 本文テキスト ===== */
p {
  font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  line-height: 1.9;
  font-size: 1.05rem;
  color: #333;
  margin: 1em 0;
}

/* ===== リンクカラー（共通） ===== */
a {
  color: #2b6ea6;
  text-decoration: none;
  transition: 0.3s;
}
a:hover {
  color: #b45f06;
  text-decoration: underline;
}

/* ===== 画像下の余白統一 ===== */
img {
  margin-bottom: 1.2em;
  border-radius: 6px;
}

/* ===== スマホ表示調整 ===== */
@media screen and (max-width: 600px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  p  { font-size: 1rem; }
}

/* ===== スマホ時のヘッダー重なり修正 ===== */
@media screen and (max-width: 768px) {

  /* テンプレ標準ナビとヒーロー画像の重なりを調整 */
  .navbar, .global-navi, .menu {
    position: relative !important;
    z-index: 999;
  }

  /* 独自ヘッダー（ヒーロー帯）を少し下げる */
  .vk-hero, .hero, header img {
    margin-top: 60px !important;
  }

  /* 背景画像上の文字がつぶれないよう影を追加 */
  h1, h2 {
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }

  /* レスポンシブ見出し調整 */
  h1 {
    font-size: 1.4rem !important;
    line-height: 1.4;
  }
}

/* 余白崩れ防止 */
body { overflow-x: hidden; }