/* 記事1つずつの行デザイン */
.wp-block-query .wp-block-post {
  display: flex;
  align-items: center;
  gap: 10px;              /* 日付・タグ・タイトルの間隔を広げる */
  padding: 4px 10px;     /* 上下の余白を広げて「ゆとり」を出す */
  margin-left: -10px;      /* その分、外側（左）に引っ張り出す */
  border-bottom: 1px solid #e0e0e0; /* 薄いグレーの線だけで区切る */
  transition: all 0.3s ease; /* ふわっと動く設定 */
  position: relative;     /* 矢印配置用 */
  border-radius: 4px;      /* ホバー時の角を少し丸く */
}

/* ホバー時に背景を少しグレーにして、全体リンクっぽく見せる */
.wp-block-query .wp-block-post:hover {
  background-color: #f9f9f9;
  padding-left: 10px; /* 右に少しズレる動き */
}

/* 日付のデザイン */
.wp-block-post-date {
  order: 1;           /* 左端に */
  width: 110px;
  color: #888;
  font-size: 0.9rem;
}

/* カテゴリーラベル（Tailoredなタグに） */
.wp-block-post-terms {
  order: 2;           /* 日付の右に */
  font-size: 0.75rem;
  color: #ff6600;     /* ブランドカラーのオレンジ */
  background: #fff;
  border: 1px solid #ff6600; /* 枠線だけにする（ヘッダーボタンと統一） */
  border-radius: 99px;
  padding: 4px 4px;
  line-height: 1;
  min-width: 40px;    /* 幅を揃える */
}

/* タイトル */
.wp-block-post-title {
  order: 3;
  flex: 1;            /* 残りの幅いっぱい */
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
}

.wp-block-post-title a {
  color: #333;
  display: block;      /* クリック範囲を広げる */
}

/* ホバー時のタイトル色変化 */
.wp-block-query .wp-block-post:hover .wp-block-post-title a {
  color: #ff6600;
}

/* 右端に矢印（＞）を出現させる装飾 */
.wp-block-query .wp-block-post::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #ff6600;
  border-right: 2px solid #ff6600;
  transform: rotate(45deg); /* 斜めにして矢印を作る */
  opacity: 0;               /* 最初は隠す */
  transition: all 0.3s ease;
  margin-left: auto;        /* 右端に寄せる */
}

/* ホバー時に矢印を表示 */
.wp-block-query .wp-block-post:hover::after {
  opacity: 1;
  margin-right: 10px;
}


/* --- ページネーション（モダンに） --- */
.wp-block-query-pagination {
  display: flex;
  justify-content: center;
align-items: center;    /* 上下中央揃え */
  gap: 10px;
  margin-top: 2rem;
}

.wp-block-query-pagination-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  color: #555;
  height: 20px;           /* ボタンの高さを統一 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s;
  background-color: transparent; /* 背景なし */
}

.wp-block-query-pagination-numbers {
  display: flex;  /* これがないとgapが効きません */
  gap: 10px;       /* ここで「1」と「2」の間隔を調整！ */
}

/* 「次のページ」「前のページ」だけの設定：横長にする */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  width: auto;            /* ← 幅固定を解除（これで文字が潰れません！） */
  padding: 0 16px;        /* 横に余白を持たせる */
  border-radius: 99px;    /* カプセル型にする */
  white-space: nowrap;    /* ← 強制的に改行禁止 */
}

/* 数字の背景はなしで、今のページやホバーだけ色をつける */
.wp-block-query-pagination a:hover {
  border-color: #ff6600;
  color: #ff6600;
  background: #fff;
}