@charset "UTF-8";


/* コンテンツ */
.contents_wrap { margin: 32px 16px 48px; }


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

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

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

.filter_tit_pwr { background-image: url(/images/sp/filter/filter_icon_degree_sp.svg); }
.filter_tit_period { background-image: url(/images/sp/filter/filter_icon_period_sp.svg); }
.filter_tit_cate { background-image: url(/images/sp/filter/filter_icon_type_sp.svg); }
.filter_tit_color { background-image: url(/images/sp/filter/filter_icon_color_sp.svg); }
.filter_tit_bc { background-image: url(/images/sp/filter/filter_icon_bc_sp.svg); }
.filter_tit_dia { background-image: url(/images/sp/filter/filter_icon_dia_sp.svg); }
.filter_tit_gdia { background-image: url(/images/sp/filter/filter_icon_gdia_sp.svg); }
.filter_tit_lwc { background-image: url(/images/sp/filter/filter_icon_water_content_sp.svg); }
.filter_tit_feature { background-image: url(/images/sp/filter/filter_icon_function_sp.svg); }


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

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

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

.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: 14px;
  height: 14px;
  border-radius: 3px;
  display: block;
  margin-right: 6px;
}
.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: 64px;
  height: 54px;
  background: #dd2f69;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 84px;
  right: 8px;
  z-index: 10;
}

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