@charset "UTF-8";

/* ページ送り（制作事例・ブログ）
   読み込み順は functions.php（後に読み込んだ指定が勝つので順番を変えない） */

/* --------------------------------------------------------------------- */
/* ページネーション　*/
/* --------------------------------------------------------------------- */

/* 真ん中に配置 */
.pagination {
  text-align: center;
}

/* 横並びにする */
.pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}

/* ページタブの共通スタイル */
.pagination .page-numbers a,
.pagination .current,
.pagination a.prev,
.pagination a.next,
.pagination .dots {
  font-size: 18px;
  font-weight: bold;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin-right: 25px;
}

/* ドット以外の共通スタイル */
.pagination .page-numbers a,
.pagination .current,
.pagination a.prev,
.pagination a.next {
  background-color: var(--color-bg-pink);
  border-radius: 50%;
}

/* ドットのスタイル */
.pagination .dots {
  color: var(--color-text-dots);
  width: 30px;
  height: 30px;
  font-size: 40px;
}

/* マウスが乗った時のボタンの背景の色と文字の色 */
.pagination .page-numbers a:hover {
  color: var(--color-white);
  background-color: var(--color-pink);
  border-radius: 50%;
}

/* 現在のページのタブ */
.pagination .current {
  color: var(--color-white);
  background-color: var(--color-pink);
  padding: 0;
}

/* スマホサイズ以下 */
@media (max-width: 767px) {
  /* ページタブの共通スタイル */
  .pagination .page-numbers a,
  .pagination .current,
  .pagination a.prev,
  .pagination a.next,
  .pagination .dots {
    font-size: var(--font-sp-body);
    width: 33.9px;
    height: 33.9px;
    line-height: 33.9px;
    margin-right: 15px;
  }

  /* ドットのスタイル */
  .pagination .dots {
    width: 20px;
    height: 20px;
  }
}