/* critical.css - ページの初期表示に必須のスタイル */

body {
  margin: 0;
  /* ▼▼▼ font-family をシステムフォントスタックに変更 ▼▼▼ */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.6;
  color: #333;
  padding: 40px 0; /* bodyにpaddingがあると背景画像との兼ね合いで意図通りにならない場合があります。mainに移すことも検討してください */
  
  /* パフォーマンスのため、重い背景画像はstyle.cssに移し、ここでは代替の背景色を指定します */
  background-color: #f0f0f0; /* 例: 背景画像が読み込まれるまでの仮の背景色 */
}

main {
  padding: 0 16px;
  max-width: 800px;
  margin: 0 auto;
}

/* --- ヘッダー関連 --- */
/* ヘッダー全体の背景やパディング */
.header-style-1 {
  background-color: #851530;
  padding: 0; /* タイトルとコンテナで個別にpaddingを設定 */
  border-bottom: 1px solid #eee;
}

/* ナビゲーションと検索が入るコンテナ (中央揃え) */
.header-style-1 .container {
  display: flex;           /* 中身を横並びにする */
  justify-content: center; /* ★中身全体を中央に寄せる★ (または space-between など) */
  align-items: center;     /* 中身を垂直方向中央に */
  max-width: 1200px;
  margin: 0 auto;          /* コンテナ自体を中央揃え */
  padding: 20px;           /* コンテナの内側の余白 */
}

.header-style-1 .logo a {
  font-size: 1.5em;
  font-weight: bold;
  color: white;
  text-decoration: none;
  /* "font-display: swap;" は @font-face の中で使うルールのため、ここでは無効です */
}

/* ナビゲーション自体のスタイル (変更なし) */
.header-style-1 nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.header-style-1 nav ul li {
  margin: 0 15px; /* 少し狭く調整 */
}

.header-style-1 nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: 500;
}

/* 注: この .large-title-header-1 がトップページや特定のカテゴリでしか使われない場合、
  「コンテンツごとのCSS」に移動するのが、より最適な方針です。
  全ページで共通の可能性もあるため、一旦ここ（critical）に残します。
*/
/* 大きなタイトル部分 */
.large-title-header-1 {
  background-color: #F5F5DC;
  padding: 50px 20px; /* 左右にもpadding */
  text-align: center;
  border-bottom: 1px solid #eee; /* 必要なら */
  font-family: "游ゴシック", "Yu Gothic", sans-serif; /* 例 */
}

.large-title-header-1 h1 {
  font-size: 3em;
  font-weight: bold;
  color: black;
  margin: 0;
  max-width: 1200px; /* コンテナと同じ幅で中央揃えする場合 */
  margin-left: auto;
  margin-right: auto;
}


/* --- 広告プレースホルダー --- */
/* 注: もしこの広告がヘッダーなど、常にファーストビューに表示される場合は、レイアウト崩れを防ぐためcritical.cssに移すことを検討してください */
#ad-placeholder {
 width: 300px;
  height: 100px; /* または実際の広告サイズ */
  min-height: 100px;
  background-color: #f0f0f0; /* 薄いグレーなど */
  display: flex; /* テキスト中央揃えのため */
  justify-content: center;
  align-items: center;
  text-align: center; /* 一応 */
  border: 1px dashed #ccc; /* 境界線を点線にするなど */
}
.ad-placeholder-text {
  color: #999; /* 薄い文字色 */
  font-size: 0.9em;
  margin: 0; /* 余計なマージンを削除 */
}

/*常にスクロールバーを表示することでレイアウトのぶれを防ぐ*/

html { overflow-y: scroll; }