@charset "UTF-8";


/* コンテンツ */
.contents_wrap {
  max-width: var(--maxWidth);
  margin: var(--maxWidthMargin);
  padding: var(--maxWidthPadding);
  padding-bottom: 80px;
}
.contents_wrap::before {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  display: block;
  margin-top: 32px;
}


/* 絞り込み
------------------------------------------------------------------------------------*/
.filter_wrap { position: relative; }

.filter_resetBtn {
  height: 26px;
  border: #222 solid 1px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  position: absolute;
  top: -24px;
  right: 0;
  cursor: pointer;
  padding: 0 12px;
}

.filter_tit {
  height: 24px;
  background-size: 28px 24px;
  background-position: 0 center;
  background-repeat: no-repeat;
  font-size: 1.8rem;
  font-weight: bold;
  display: grid;
  align-items: center;
  margin: 32px 0 -4px;
  padding-left: 32px;
}

.filter_tit_1 { background-image: url(/images/pc/filter/filter_icon_degree_pc.svg); }
.filter_tit_2 { background-image: url(/images/pc/filter/filter_icon_period_pc.svg); }
.filter_tit_3 { background-image: url(/images/pc/filter/filter_icon_type_pc.svg); }
.filter_tit_4 { background-image: url(/images/pc/filter/filter_icon_color_pc.svg); }
.filter_tit_5 { background-image: url(/images/pc/filter/filter_icon_bc_pc.svg); }
.filter_tit_6 { background-image: url(/images/pc/filter/filter_icon_dia_pc.svg); }
.filter_tit_7 { background-image: url(/images/pc/filter/filter_icon_gdia_pc.svg); }
.filter_tit_8 { background-image: url(/images/pc/filter/filter_icon_water_content_pc.svg); }
.filter_tit_10 { background-image: url(/images/pc/filter/filter_icon_design_pc.svg); }
.filter_tit_9 { background-image: url(/images/pc/filter/filter_icon_function_pc.svg); }


.filter_btn_wrap {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.filter_btn {
  min-width: 70px;
  height: 40px; /* 42px */
  border: #ddd solid 1px;
  border-radius: 100px;
  color: #707070;
  display: flex;
  justify-content: center;
  place-items: center;
  cursor: pointer;
  margin: 12px 8px 0 0;
  padding: 0 16px;
}

.filter_btn_on {
  border: #d5155b solid 1px;
  color: #d5155b;
}

.filter_btn_4_1::before,
.filter_btn_4_2::before,
.filter_btn_4_3::before,
.filter_btn_4_4::before,
.filter_btn_4_5::before,
.filter_btn_4_6::before,
.filter_btn_4_7::before,
.filter_btn_4_8::before,
.filter_btn_4_9::before,
.filter_btn_4_10::before,
.filter_btn_4_11::before,
.filter_btn_4_12::before,
.filter_btn_4_13::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: block;
  margin-right: 8px;
}
.filter_btn_4_1::before { background: #876348; }
.filter_btn_4_2::before { background: #3f3f3f; }
.filter_btn_4_3::before { background: #c4B88a; }
.filter_btn_4_4::before { background: #818d6b; }
.filter_btn_4_5::before { background: #888888; }
.filter_btn_4_6::before { background: #35acff; }
.filter_btn_4_7::before { background: #34c98d; }
.filter_btn_4_8::before { background: #fc96bb; }
.filter_btn_4_9::before { background: #e85959; }
.filter_btn_4_10::before { background: #9e62da; }
.filter_btn_4_11::before { background: #fed433; }
.filter_btn_4_12::before { background: #fff; border: #ddd solid 1px; }
.filter_btn_4_13::before { background: #e6f6fa; }

.hit_numbar_wrap {
  width: 80px;
  height: 68px;
  background: #dd2f69;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 239px;
  right: 16px;
  z-index: 10;
}

@media (min-width: 1280px) {
  .hit_numbar_wrap {
    left: calc(50% + 584px);
    right: 0;
    transform: translateX(-50%)
  }
}

.hit_numbar {
  color: #ffff62;
  font-size: 3rem;
  display: block;
  margin-top: 4px;
}