/* =====================================================================
 * 汎用ユーティリティクラス（サイト全体で使用）
 *   ホームページのどのページでも使える共通クラス。
 *   テーマの全ページで読み込む（functions.php の boatrace_kentei_utilities_css）。
 *
 *   .white         … 白抜き背景パネル（kentei-hanyo-panel と同系の意匠）
 *   .white_center  … .white と同じ＋中央寄せ
 *
 *   ※ 衝突調査（2026-06-22）：オフィシャルweb 内に既存の .white / .white_center
 *      および class="white" の使用は無い（新規定義）。
 * ===================================================================== */

.white,
.white_center {
  background: #fff;
  border: 1px solid rgba(81, 81, 202, 0.15);
  border-radius: 12px;
  box-shadow:
    0 3px 12px rgba(41, 38, 104, 0.12),
    0 6px 18px rgba(81, 81, 202, 0.08);
  padding: 20px 24px;
  /* 上下に等間隔のマージン。隣接時はマージン相殺で 16px に揃う（親をまたいでも一定に保つ） */
  margin: 16px 0;
}

.white_center {
  text-align: center;
}

/* =====================================================================
 * 色変わりタイトル（.boat-title）── 全ページ共通の見出し
 *   左の縦バーを「ボート6色（1〜6号艇＝白 黒 赤 青 黄 緑）」で、ページ上から順に着色する。
 *   着色は functions.php の boatrace_kentei_title_bar_colors() が担当（borderLeftColor を上書き）。
 *   .news-heading / .page-content-title とは別グループなので、.boat-title だけで白から数え直す。
 *   使い方：<h2 class="boat-title">見出し文言</h2> と書くだけ（色は自動）。
 *   ※ 既定のバー色は白（#d1d5db）。JS未実行でも見出しとして成立する。
 *   ※ 上マージンは下より広め（セクションの区切りを見せるため）。
 * ===================================================================== */
.boat-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  line-height: 1.3;
  color: #292668;
  margin: 2em 0 0.6em; /* 上は下より広く（セクションの区切り）。下は詰めて直下の箱と繋げる */
  padding-left: 16px;
  border-left: 8px solid #d1d5db; /* 既定＝白。JSが白→黒→赤→青→黄→緑で上書き */
}
/* ※ かつて .boat-title:first-child { margin-top:0 } を置いていたが、
   ラッパー（例 .bk-sales）の最初の子になると上マージンがゼロ化され「上だけ詰まる」不具合になったため撤去。
   先頭に来ても上マージンを保つ方が、セクション区切りとして一貫する。 */

/* =====================================================================
 * レスポンスタイトル（.response-title）── 全ページ共通の大見出し
 *   画面幅に応じてフォントが伸縮する（clamp）。スマホでも大きすぎて折り返しすぎない大タイトル用。
 *   使い方：<h2 class="response-title">文言</h2>（改行したい所は <br>）。
 *   文字寄せ（左/中央）は付けない＝置いた場所（親の text-align）に従う。
 *   ※ exam（WordPress外）でも同名クラスを自己完結CSSで複製して使用（exam_start.php）。
 * ===================================================================== */
.response-title {
  font-weight: bold;
  font-size: clamp(1.3rem, 5.8vw, 33px); /* スマホは縮小・PCは33px（従来の大タイトルの1.5倍） */
  line-height: 1.4;
  color: #292668;
  margin: 8px 0 14px;
}