@charset "UTF-8";
/* CSS Document */

#products_search {
  width: 1000px;
  margin: 0 auto;
  padding-bottom: 95px;
}

#products_search .tab_navi {
  display: flex;
  justify-content: space-between;
  padding: 0 1.5%;
}

#products_search .tab_navi li {
  width: calc(50% - 4px);
  margin: 0 2px;
}

#products_search .tab_navi li a {
  display: block;
  height: 52px;
  padding-top: 17px;
  background: #1b365d url(../img_v2/search_arrow_w.png) right 20px top 48% no-repeat;
  background-size: 17px;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  transition: background-color 0.4s, color 0.4s;
  backface-visibility: hidden;
}

#products_search .tab_navi li a:hover {
  background-color: #4580ae;
  opacity: 1;
}

#products_search .tab_navi li.select a {
  background: #e2f6ff;
  color: #000;
}

#products_search .cnt_frame {
  width: 100%;
  background-color: #e2f6ff;
  overflow: hidden;
}

#products_search .cnt_frame .cnt_inner {
  display: flex;
  width: 200%;
  transition: transform 0.5s;
  backface-visibility: hidden;
}

#products_search .mode_result .cnt_inner {
  transform: translateX(-50%);
}

#products_search .cnt_frame .cnt_inner > div {
  width: 50%;
  box-sizing: border-box;
}

/* search_tags */
#products_search .search_tags .tag_list {
  padding: 64px 45px 44px 60px;
}

#products_search .search_tags .tag_list li {
  display: inline-block;
}

#products_search .search_tags .tag_list a {
  display: inline-block;
  padding: 11px 25px;
  margin: 0 13px 20px 0;
  background-color: #fff;
  border-radius: 50px;
  color: #000;
  font-size: 18px;
  line-height: 1;
  transition-duration: 0.2s;
}

#products_search .search_tags .tag_list a:hover {
  background-color: #1b365d;
  color: #fff;
  opacity: 1;
}

/* search_result */
.search_result .result_header {
  position: relative;
  margin-top: 55px;
  text-align: center;
}

.search_result .result_header .current_tag {
  display: inline-block;
  padding: 11px 25px;
  background-color: #fff;
  border-radius: 50px;
  color: #000;
  font-size: 20px;
  line-height: 1;
}

.search_result .btn_back_list a {
  padding: 2px 0 0 20px;
  background: url(../img_v2/search_close.png) 0 center no-repeat;
  background-size: 14px;
}

.search_result .result_footer {
  padding: 5px 0 40px 36px;
  text-align: center;
}

.search_result ul{
  display:flex;
  flex-wrap:wrap;
  margin: 40px 0 0 36px;
}

.search_result ul li{
  width: 280px;
  padding: 10px 8px 16px;
  background: #fff;
  margin: 0 20px 20px 0;
  display: none;
}

.search_result ul li a{
  display: block;
  position: relative;
}

.search_result ul li.icon_new > a::after {
  content: "";
  position: absolute;
  top: -18px;
  right: -24px;
  width: 52px;
  height: 52px;
  background: url(../product/img/top/icon_new.png) 0 0 no-repeat;
  background-size: 100%;
}

.search_result ul li.icon_new_agg > a::after {
  content: "";
  position: absolute;
  top: -18px;
  right: -24px;
  width: 52px;
  height: 52px;
  background: url(../product/img/top/icon_new_agg.png) 0 0 no-repeat;
  background-size: 100%;
}

@media print, screen and ( min-width : 769px ) {

  .search_result ul li:nth-child(3n) {
    margin: 0 0 20px 0;
  }

}

.search_result ul li img{
  width: 100%;
}

.search_result ul li .grade{
  height: 30px;
  line-height: 30px;
  color: #fff;
  text-align: center;
}

.search_result ul li .grade.premium{
  background: rgb(190,176,128);
  background: linear-gradient(90deg, rgba(190,176,128,1) 0%, rgba(212,199,152,1) 50%, rgba(190,176,128,1) 100%);
}

.search_result ul li .grade.highgrade{
  background: #0076a5;
}

.search_result ul li .grade.light{
  background: #61bbc4;
}

.search_result ul li .grade.universal{
  background: #c9e2f0;
  color: #434343;
}

.search_result ul li .grade.other{
  background: #dcdddd;
  color: #000;
}

.search_result ul li .grade.highgrade_plus{
  background: #929292;
  color: #fff;
}

.search_result ul li .series{
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  color: #000;
  margin-top: 10px;
}

.search_result ul li .txt{
  color: #000;
  padding-left: 5px;
}

.search_result ul li .txt span{
  font-size: 12px;
}

.search_result .txt_gas{
  font-size: 28px;
  text-align: center;
  color: #004e8c;
  padding-top: 20px;
}

.search_result ul li .series_tag {
  display: block;
  padding: 18px 0 0;
  margin: 0;
}

.search_result ul li .series_tag li {
  display: inline-block;
  width: auto;
  padding: 0;
  margin: 0;
}

.search_result ul li .series_tag a {
  display: inline-block;
  padding: 9px 15px;
  margin: 0 0 10px 0;
  background-color: #eee;
  border-radius: 50px;
  color: #000;
  font-size: 14px;
  line-height: 1;
  transition-duration: 0.2s;
}

.search_result ul li .series_tag a:hover {
  background-color: #004f91;
  color: #fff;
  opacity: 1;
}


@media print, screen and ( max-width : 768px ) {

  #products_search {
    width: auto;
    margin: 4% -4.35% 0;
    padding: 8% 0 0;
  }

  #products_search .tab_navi li a {
    height: 46px;
    padding-top: 15px;
    background-position: right 8px top 48%;
    background-size: 12px;
    font-size: 15px;
  }

  #products_search .tab_navi li a:hover {
    background-color: #004f91;
  }

  #products_search .tab_navi li.select a {
    background: #e2f6ff;
    color: #000;
  }

  /* search_tags */
  #products_search .search_tags .tag_list {
    padding: 8% 3% 6% 4%;
  }

  #products_search .search_tags .tag_list a {
    padding: 11px 12px;
    margin: 0 2px 10px 0;
    font-size: 13px;
  }

  #products_search .search_tags .tag_list a:hover {
    background-color: #fff;
    color: #000;
    opacity: 1;
  }

  /* search_result */
  .search_result .result_header {
    margin-top: 8%;
  }

  .search_result .result_header .current_tag {
    padding: 11px 20px;
    margin-bottom: 5%;
    font-size: 17px;
  }

  .search_result .btn_back_list {
    padding-left: 4%;
  }

  .search_result .btn_back_list a {
    padding: 2px 0 0 16px;
    background-size: 8px;
  }

  .search_result .result_footer {
    padding: 2% 0 8%;
  }

  .search_result ul{
    display:flex;
    flex-wrap:wrap;
    column-gap: 4%;
    margin: 4% 4% 0;
  }

  .search_result ul li{
    width: 48%;
    padding: 8px 8px 10px;
    margin: 0 0 4%;
    box-sizing: border-box;
  }

  .search_result .series_list li.icon_new a::after {
    top: -14px;
    right: -20px;
    width: 30px;
    height: 30px;
  }

  .search_result .series_list li.icon_new_agg a::after {
    top: -14px;
    right: -22px;
    width: 38px;
    height: 38px;
  }

  .search_result ul li .txt{
    line-height: 1.5;
    font-size: 14px;
    padding-left: 2px;
  }

  .search_result .txt_gas{
    font-size: 20px;
  }

  .search_result ul li .grade.highgrade_plus{
    font-size: 13px;
  }

  .search_result ul li .series_tag {
    margin-right: -4px;
    padding-top: 12px;
  }

  .search_result ul li .series_tag a {
    padding: 9px 8px;
    margin: 0 0 6px 0;
    font-size: 10px;
  }

  .search_result ul li .series_tag a:hover {
    background-color: #eee;
    color: #000;
  }

}