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

#Container .mix{
  display: none;
}

.filter{
  background-color: #ffdd66;
  padding: 8px 10px 8px 10px;
  line-height: 3.5;
  border:solid 2px #fff;
  font-size: 80%;

  border-radius: 5px;    /* CSS3草案 */
  -webkit-border-radius: 5px;  /* Safari,Google Chrome用 */
  -moz-border-radius: 5px; /* Firefox用 */

  display: inline;
  cursor : pointer;
  }

.filter.yl{
  background-color: #ffdd66;
}

.filter.g{
  background-color: #d39d39;
}

.filter.lq{
  background-color: #d6a344;
}

.filter.all{
  background-color: #ff9366;
}

.filter.purc{
  background-color: #ff701e;
}

.filter.soldout{
  background-color: #ccc;
}

.item{

}

/*山崎追加*/

#shelf .mix{
  display: none;
}

#shelf{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sort-nav{
  width: 80%;
  margin: 48px auto;
  display: flex;
  flex-wrap: wrap;
}
.sort-nav .filter{
  box-sizing: border-box;
  line-height: 1.75;
  margin: 4px;
}
@media screen and(768px){
  .sort-nav{
  width: 80%;
  margin: 48px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content:
  space-between;
}
}