.cg_freespace_01 {
  margin-bottom: 10px;
}

.cg_freespace_02 {
  margin-bottom: 10px;
}

/* productlist */
.productlist_heading {
  margin-bottom: 20px;
}
.productlist_lists {
  margin-top: 20px;
  font-size: 12px;
}
.productlist_list {
  display: inline-block;
  float: none;
  margin-bottom: 40px;
  text-align: center;
  vertical-align: top;
  position: relative;
}

@media screen and (max-width: 768px) {
  .productlist_list {
    width: calc(100% / 2 - 2px);
  }
}

@media screen and (min-width: 769px) {
  .productlist_list {
    width: calc(100% / 4 - 4px);
  }

  .productlist_list a {
    display: block;
    padding: 5px;
    background: linear-gradient(180deg, #eee, #fff);
  }

  .productlist_list a::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 92%;
    height:100%;
    background-color: #ddd;
    transform:translate(-50%, -50%);
    transition: 0.3s;
    opacity: 0;
  }

  .productlist_list a:hover::before {
    opacity: 1;
  }

  .productlist_list a img {
    position: relative;
  }

  .productlist_list a span {
    position: relative;
    color: #333;
  }

}

.subcategorylist_lists {
  font-size: 12px;
  margin-bottom: 40px;
}
ul.subcategorylist_lists > li {
  margin-bottom: 10px;
}
.subcategorylist_list {
}
.subcategorylist_list_img {
}

.productlist_number {
  float: left;
  line-height: 1.4;
}
.productlist_number span {
  font-size: 18px;
  padding: 0 5px;
}
.productlist_sort {
  float: right;
}
.productlist_sort a {
  padding: 0 5px 4px 5px;
}

/* 表示中のソート強調　開始　*/

.productlist_sort span{
  padding: 0 5px 2px 5px;
  font-weight:bold;
  border-bottom: 2px solid #000;
  display: inline-block;
}

/* 表示中のソート強調　終了　*/
/* アイコン置換用　開始　*/

.yoyakuicon{
 border: solid 1px #005133;
 background-color: #005133;
 border-radius: 0 5px 5px 0;
 margin:0;
 position: absolute;
 width: 3.5rem;
 left: -5px;
 top: -25px;
}

.wazukaicon,.zaikoicon{
 border: solid 1px #800000;
 background-color: #800000;
 border-radius: 0 5px 5px 0;
 margin:0;
 position: absolute;
 width: 3.5rem;
 left: -5px;
 top: -25px;
}

.newicon{  
 border: solid 1px #696969;
 border-radius: 0 5px 5px 0;
 margin:0;
 position: absolute;
 width: 3rem;
 left: -5px;
 top: -25px;
}

.hiticon{
 border: solid 1px #696969;
 background-color:  #696969;  
 border-radius: 0 5px 5px 0;
 margin:0;
 position: absolute;
 width: 3rem;
 left: -5px;
 top: -25px;
}

.limiticon{
 border: solid 1px #221002;
 background-color:  #221002;  
 border-radius: 0 5px 5px 0;
 margin:0;
 position: absolute;
 width: 3rem;
 left: -5px;
 top: -25px;
}

.yoyakuicon > p {
 margin: 0;
 color:#ffffff !important;
 text-align:center;
}

.wazukaicon > p, .zaikoicon > p {
 margin: 0;
 color:#ffffff !important;
 text-align:center;
}

.newicon > p { 
  margin: 0; 
  color:#696969;
  text-align: center;
}

.hiticon > p {
  margin: 0;
  color:#ffffff !important;
  text-align: center;
}

.limiticon > p {
  margin: 0;
  color:#ffffff !important;
  text-align: center;
}

@media (max-width: 768px) {
  .yoyakuicon,.wazukaicon,.zaikoicon,.newicon,.limiticon,.hiticon{
    left: 0;
    top:150px;
  }
}

/* アイコン置換用 終了　*/

/* pagerlist */
.pagerlist {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.pagerlist ul {
  text-align: center;
  padding-top: 15px;
}
.pagerlist li {
  text-align: center;
  line-height: 26px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.pagerlist li a,
.pagerlist li span {
  display: block;
  float: left;
  min-width: 26px;
  height: 26px;
  box-sizing: border-box;
  padding: 0 .5em;
}
.pagerlist li a {
  border: 1px solid #333;
  background-color: #fff;
  color: #333;
  text-decoration: none;
}
.pagerlist li a:hover {
  border: 1px solid #333;
  background-color: #333;
  color: #fff;
}
.pagerlist li span {
  border: 1px solid #ccc;
  background-color: #fff;
  color: #ccc;
}

.pagerlist_sp {
  text-align: center;
}
.pagerlist_sp_top {
  margin: 20px 0 10px 0;
}
.pagerlist_sp_btm {
  margin: -20px 0 60px;
}
.pagerlist_sp ul {
  margin: 0;
}
.pagerlist_sp li {
  display: inline;
  margin: 0 5px;
}
.pagerlist_pos {
  font-size: 12px;
  margin: 10px 0;
}
.pagerlist_pos span {
  font-size: 14px;
  padding: 0 5px;
}

@media (max-width: 768px) {
  .cg_freespace_02 {
    font-size: 12px;
    margin-bottom: 60px;
  }

  .productlist_noitem {
    padding: 0 10px 20px;
  }

  .productlist_sort {
    font-size: 12px;
    float: none;
    text-align: center;
  }
}