@charset "UTF-8";

.order-by__button:hover,
.order-by__button--disable:hover,
.order-by__button:active,
.order-by__button--disable:active,
.order-by__button:focus,
.order-by__button--disable:focus {
  /* リンクにホバーした時の輪郭線と内側の影 */
  /* color: #082746; */
  /* border: 1px solid #591400; */
  /* background-color: #5914005e; */
  opacity: 0.85;
}

/* #############################################################################
 * 並び替え
 * #############################################################################
 */
.order-by {
  /* margin: 16px 16px 20px 16px; */
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* table-layout: fixed; */
  /* border-collapse: separate; */
  width: 100%;
}

.order-by__button,
.order-by__button--disable {
  /* ---------------------------------------------------------------------------
   * ボタン
   * ---------------------------------------------------------------------------
   */
  /* display: table-cell; */
  /* width: 1%; */
  padding: 4px;
  border: solid 1px transparent;
  /* border-radius: 4px; */
  text-align: center;
  color: #591400;
  font-size: 1.6rem;
  line-height: 1.5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #ffffff;
}

.order-by__button.active,
.active.order-by__button--disable {
  /* .activeクラスと共存する時、強調表示 */
  color: #ffffff;
  /* border: solid 1px #591400; */
  background-color: #e45c7f;
}

.order-by__button--disable {
  /* リンクを無効にする */
  pointer-events: none;
}

.order-by__button--disable:hover.active,
.order-by__button--disable:active.active,
.order-by__button--disable:focus.active {
  border: solid 1px transparent;
  border-bottom-color: #591400;
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*# sourceMappingURL=order-by.css.map */