@charset "UTF-8";

.pager__link:hover,
.pager__link--first:hover,
.pager__link--prev:hover,
.pager__link--active:hover,
.pager__link--next:hover,
.pager__link--last:hover,
.pager__link--sp-prev:hover,
.pager__link--sp-next:hover,
.pager__link:active,
.pager__link--first:active,
.pager__link--prev:active,
.pager__link--active:active,
.pager__link--next:active,
.pager__link--last:active,
.pager__link--sp-prev:active,
.pager__link--sp-next:active,
.pager__link:focus,
.pager__link--first:focus,
.pager__link--prev:focus,
.pager__link--active:focus,
.pager__link--next:focus,
.pager__link--last:focus,
.pager__link--sp-prev:focus,
.pager__link--sp-next:focus {
  /* リンクにホバーした時の輪郭線と内側の影 */
  color: #082746;
  border: 1px solid #591400;
  background-color: #5914005e;
}

/* #############################################################################
 * ページネーション
 * #############################################################################
 */
.pager {
  display: inline-block;
  padding-left: 0;
  margin: 0;
  width: 100%;
}

.pager__element {
  /* ---------------------------------------------------------------------------
   * 各要素
   * ---------------------------------------------------------------------------
   */
  display: inline;
}

.pager__link,
.pager__link.disable,
.pager__link--first,
.pager__link--prev,
.pager__link--active,
.pager__link--next,
.pager__link--last,
.pager__link--sp-prev,
.pager__link--sp-next {
  /* ---------------------------------------------------------------------------
   * リンク
   * ---------------------------------------------------------------------------
   */
  background-color: rgba(255, 255, 255, 0.7);
  float: left;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0.2rem 0;
  margin: 0.4rem 0;
  border: 1px solid transparent;
  border-left-color: #b3b3b3;
  line-height: 2;
  text-align: center;
  color: #666;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.disable.pager__link,
.disable.pager__link--first,
.disable.pager__link--prev,
.disable.pager__link--active,
.disable.pager__link--next,
.disable.pager__link--last,
.disable.pager__link--sp-prev,
.disable.pager__link--sp-next {
  /* .disableクラスと共存する時、無効状態 */
  color: #591400;
  pointer-events: none;
}

.disable.pager__link:hover,
.disable.pager__link--first:hover,
.disable.pager__link--prev:hover,
.disable.pager__link--active:hover,
.disable.pager__link--next:hover,
.disable.pager__link--last:hover,
.disable.pager__link--sp-prev:hover,
.disable.pager__link--sp-next:hover,
.disable.pager__link:active,
.disable.pager__link--first:active,
.disable.pager__link--prev:active,
.disable.pager__link--active:active,
.disable.pager__link--next:active,
.disable.pager__link--last:active,
.disable.pager__link--sp-prev:active,
.disable.pager__link--sp-next:active,
.disable.pager__link:focus,
.disable.pager__link--first:focus,
.disable.pager__link--prev:focus,
.disable.pager__link--active:focus,
.disable.pager__link--next:focus,
.disable.pager__link--last:focus,
.disable.pager__link--sp-prev:focus,
.disable.pager__link--sp-next:focus {
  color: #591400;
  border: 1px solid transparent;
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.pager__link--first {
  /* 最初 */
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left-color: transparent;
  width: 7.2rem;
}

.pager__link--prev {
  /* 前へ */
  width: 7.2rem;
}

.pager__link--active {
  /* 現在ページ */
  color: #082746;
  -webkit-filter: drop-shadow(#00aeff 0px 0px 3px);
  filter: drop-shadow(#00aeff 0px 0px 3px);
  border: 1px solid #591400;
  pointer-events: none;
}

.pager__link--next {
  /* 次へ */
  width: 7.2rem;
}

.pager__link--last {
  /* 最後 */
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  width: 7.2rem;
}

.pager__link--sp-prev {
  /* スマホ表示・前へ */
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left-color: transparent;
  width: 50%;
  color: #ffffff;
}

.pager__link--sp-next {
  /* スマホ表示・次へ */
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  width: 50%;
  color: #ffffff;
}

.pager__small {
  /* ---------------------------------------------------------------------------
   * 小さい文字 (数字5桁以上用)
   * ---------------------------------------------------------------------------
   */
  font-size: 10px;
  line-height: 28px;
}

/*# sourceMappingURL=pager.css.map */