@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: 5px;
  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_pwr { background-image: url(/images/pc/filter/filter_icon_degree_pc.svg); }
.filter_tit_period { background-image: url(/images/pc/filter/filter_icon_period_pc.svg); }
.filter_tit_cate { background-image: url(/images/pc/filter/filter_icon_type_pc.svg); }
.filter_tit_color { background-image: url(/images/pc/filter/filter_icon_color_pc.svg); }
.filter_tit_bc { background-image: url(/images/pc/filter/filter_icon_bc_pc.svg); }
.filter_tit_dia { background-image: url(/images/pc/filter/filter_icon_dia_pc.svg); }
.filter_tit_gdia { background-image: url(/images/pc/filter/filter_icon_gdia_pc.svg); }
.filter_tit_lwc { background-image: url(/images/pc/filter/filter_icon_water_content_pc.svg); }
.filter_tit_feature { 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: #ccc solid 1px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  place-items: center;
  cursor: pointer;
  margin: 12px 8px 0 0;
  padding: 0 16px;
}

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

.filter_btn_brown::before,
.filter_btn_black::before,
.filter_btn_hazel::before,
.filter_btn_olive::before,
.filter_btn_gray::before,
.filter_btn_blue::before,
.filter_btn_green::before,
.filter_btn_pink::before,
.filter_btn_red::before,
.filter_btn_violet::before,
.filter_btn_yellow::before,
.filter_btn_white::before,
.filter_btn_clear::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: block;
  margin-right: 8px;
}
.filter_btn_brown::before { background: #876348; }
.filter_btn_black::before { background: #3f3f3f; }
.filter_btn_hazel::before { background: #c4B88a; }
.filter_btn_olive::before { background: #818d6b; }
.filter_btn_gray::before { background: #888888; }
.filter_btn_blue::before { background: #35acff; }
.filter_btn_green::before { background: #34c98d; }
.filter_btn_pink::before { background: #fc96bb; }
.filter_btn_red::before { background: #e85959; }
.filter_btn_violet::before { background: #9e62da; }
.filter_btn_yellow::before { background: #fed433; }
.filter_btn_white::before { background: #fff; border: #ddd solid 1px; }
.filter_btn_clear::before { background: #e6f6fa; }

.hit_numbar_wrap {
  width: 80px;
  height: 68px;
  background: #f85993;
  border-radius: 5px;
  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;
}