/* =====================================================
   page.php 専用スタイル (固定ページ用)
   ※ front-page.php には触れず、page.php を使う
     固定ページにだけ適用される独立CSSです。
   ===================================================== */

/* ---------------------------------------------------
   1. ヘッダーとの重なり対策
   front-page.php には先頭にバナー画像(#fh5co-home)があり
   その下に固定ヘッダーが乗る前提のデザインになっています。
   page.php にはそのバナーが無いため、ヘッダーの高さぶん
   本文を下げて重なりを解消します。
   ※ ヘッダーの実際の高さに合わせて 100px の数値を調整してください。
--------------------------------------------------- */
#fh5co-page {
  padding-top: 100px;
}

@media (max-width: 768px) {
  #fh5co-page {
    padding-top: 70px; /* スマホ表示のヘッダーが低い場合はここを調整 */
  }
}

/* ---------------------------------------------------
   2. 文字色をデフォルトの茶色っぽい色から
   落ち着いた黒に近いグレーへ変更
--------------------------------------------------- */
#fh5co-page,
#fh5co-page p,
#fh5co-page li,
#fh5co-page span,
#fh5co-page .page-content {
  color: #333333;
}

#fh5co-page .page-content {
  line-height: 1.9;
  font-size: 16px;
}

#fh5co-page .page-content p {
  margin-bottom: 1.4em;
}

/* ---------------------------------------------------
   3. 見出し(h1 / h2 / h3)のデザイン
   左に太いボーダーラインを入れたシンプルなスタイル
   アクセントカラーはサイトのロゴ・ボタン等に合わせて
   下記の --accent-color を変更してください。
--------------------------------------------------- */
#fh5co-page {
  --accent-color: #3aa0a0; /* ここをサイトのメインカラーに合わせて変更可 */
}

#fh5co-page .page-content h1 {
  font-size: 26px;
  font-weight: 700;
  color: #222222;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--accent-color);
}

#fh5co-page .page-content h2 {
  font-size: 21px;
  font-weight: 700;
  color: #222222;
  margin: 40px 0 18px;
  padding: 8px 0 8px 16px;
  border-left: 6px solid var(--accent-color);
  background: #f7f9f9;
}

#fh5co-page .page-content h3 {
  font-size: 17px;
  font-weight: 700;
  color: #333333;
  margin: 28px 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--accent-color);
}

/* 見出し直後の余白調整 */
#fh5co-page .page-content h1 + p,
#fh5co-page .page-content h2 + p,
#fh5co-page .page-content h3 + p {
  margin-top: 0;
}