/* ========================================
   トップページ専用CSS（style_top.css）
   - index.html でのみ読み込む
   - style_new.css の後に読み込むこと
   - 既存CSSは変更せず、上書き・追加のみ
   ======================================== */

/* ----------------------------------------
   キャッチコピー（サイト紹介）
   - 青グラデーションバーではなく、目立つ導入エリアに
   ---------------------------------------- */
.top-catch {
  background-color: #f0f5fa;
  border: 2px solid #003366;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 30px;
}

.top-catch h2 {
  color: #003366;
  font-size: 1.3rem;
  margin-bottom: 15px;
  padding: 0;
  background: none;
  border-radius: 0;
}

.top-catch p {
  color: #333;
  line-height: 1.8;
  margin: 0;
}

/* ----------------------------------------
   はじめての方へ（おすすめ3記事）
   - 黄色系の目立つボックスで「ここから読んで」感を出す
   ---------------------------------------- */
.top-beginner {
  background-color: #fffde6;
  border: 2px solid #e6c619;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.top-beginner h2 {
  color: #8a7200;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 0;
  background: none;
  border-radius: 0;
}

.top-beginner p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

/* ----------------------------------------
   お悩み別ガイド（目的別ナビゲーション）
   - グレー背景のシンプルなナビ
   ---------------------------------------- */
.top-navi {
  background-color: #f5f5f5;
  border-left: 5px solid #cc3300;
  border-radius: 0 8px 8px 0;
  padding: 20px;
  margin-bottom: 30px;
}

.top-navi h2 {
  color: #cc3300;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* ----------------------------------------
   よく読まれている記事（人気ランキング）
   - 番号付きで特別感を出す
   ---------------------------------------- */
.top-ranking {
  margin-bottom: 30px;
}

.top-ranking h2 {
  background: linear-gradient(to right, #cc5500, #ff8800);
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

/* ----------------------------------------
   レスポンシブ対応
   ---------------------------------------- */
@media screen and (max-width: 480px) {
  .top-catch {
    padding: 15px;
  }

  .top-catch h2 {
    font-size: 1.1rem;
  }

  .top-beginner,
  .top-navi {
    padding: 15px;
  }
}