/*--------------------------------
新川公式サイトお知らせ一覧CSS
---------------------------------*/

/* ========================================================
   全体・レイアウト設定（2つのエリアを横並びにする）
   ======================================================== */
.multi-archive-wrapper {
  display: flex;
  gap: 40px; /* 左右のエリア（お知らせとブログ）の間の余白 */
  width: 100%;
  margin-bottom: 40px;
}

.archive-box {
  flex: 1;
  min-width: 0; /* Flexbox特有の幅はみ出しバグを防止 */
}

/* 見出しのデザイン（下線を引いてスマートに） */
.archive-title {
  font-size: 1.25em;
  font-weight: bold;
  color: #333;
  border-bottom: 2px solid #0073aa; /* テーマカラーの下線 */
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* ========================================================
   記事リスト・2行レイアウト（1行目:日付+カテゴリ / 2行目:タイトル）
   ======================================================== */
.ajax-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 1記事全体の枠（上下に分割する設定） */
.ajax-post-item {
  display: flex;
  flex-direction: column; /* 要素を上下の縦並びにする */
  padding: 16px 0;
  border-bottom: 1px solid #eee; /* 記事ごとの区切り線 */
  gap: 8px; /* 1行目（日付・カテゴリ）と2行目（タイトル）の間の余白 */
}

/* 1行目：日付とカテゴリを横一列に並べるエリア */
.ajax-post-sub-row {
  display: flex;
  align-items: center;
  gap: 12px; /* 日付とカテゴリの間の余白 */
}

/* 日付の文字スタイル */
.ajax-post-date {
  font-size: 0.85em;
  color: #777;
  font-weight: 500;
  letter-spacing: 0.05em; /* 英数字のバタつきを抑える幅微調整 */
}

/* カテゴリバッジの見た目（枠線デザインですっきり見せる） */
.ajax-post-cat {
  font-size: 0.75em;
  border: 1px solid #edede2; /* カテゴリを囲む細い線 */
  color: #000000;            /* 文字の色 */
  background: #edede2;   /* 背景は透明（白） */
  padding: 2px 8px;
  border-radius: 3px;        /* 角を少し丸める */
  font-weight: 600;
  text-align: center;
}

/* 2行目：記事タイトル */
.ajax-post-title {
  margin: 0;
  font-size: 1.05em;
  line-height: 1.5; /* 行間を広げて読みやすく */
  font-weight: normal;
}

.ajax-post-title a {
  color: #333;
  text-decoration: none; /* 初期状態では下線を消す */
  transition: color 0.2s ease;
}

/* タイトルにマウスを乗せたときの動き */
.ajax-post-title a:hover {
  color: #0073aa;
  text-decoration: underline; /* マウスを乗せたら下線を表示 */
}

/* 読み込み中メッセージのスタイル */
.loading-msg {
  font-size: 0.9em;
  color: #999;
  text-align: center;
  padding: 20px 0;
}

/* ========================================================
   数字ページネーションのデザイン
   ======================================================== */
.pagination-numbers {
  display: flex;
  justify-content: center; /* 数字を中央揃えにする */
  gap: 6px;
  margin-top: 25px;
  flex-wrap: wrap; /* ボタンが増えてもはみ出さずに折り返す */
}

/* 数字ボタン単体のスタイル */
.page-num-btn {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #ccc;
  color: #444;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: bold;
  transition: all 0.2s ease;
}

.page-num-btn:hover {
  background: #f5f5f5;
  border-color: #999;
}

/* 現在表示しているページの数字スタイル */
.page-num-btn.active {
  background: #0073aa;
  color: #fff;
  border-color: #0073aa;
  cursor: default; /* クリック不可のカーソル */
}

/* ========================================================
   レスポンシブ対応（タブレット・スマホ用の調整）
   ======================================================== */
@media (max-width: 500px) {
  /* 画面幅が900px以下になったら左右並列を解除して縦並びにする */
  .multi-archive-wrapper {
    flex-direction: column;
    gap: 50px; /* 縦に並んだ際のお知らせとブログの間の余白 */
  }
}