@charset "utf-8";



.category {
  width: 100%;
  max-width: 916px;
  margin: 0 auto;
}

@media screen and (max-width:978px) {
  .category {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.category ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
}

.category li {
  width: 20%;
  height: 35px;
  background: #f6efe7;
  box-sizing: content-box;
  padding: 30px 20px;
  display: flex;
  margin-bottom: 5px;
  margin-left:5px;
  align-items: center;
}

.category li a {
  display: block;
  width: 100%;
}



@media screen and (max-width:968px) {
  .category li {
    width: 44%;
    box-sizing: content-box;
    margin-bottom: 20px;
  }
}

@media screen and (max-width:768px) {
  .category li {
    width: 100%;
    margin-bottom: 20px;
  }
}

.category li a {
  color: #444444;
  text-decoration: none;
  padding-left: 30px;
  position: relative;
  display: block;
  transition: .2s;
  /* line-height: 1rem; */
}

.category li a::before {
  content: '';
  display: block;
  width: 50px;
  height: 30px;
  position: absolute;
  /* line-height: 95px; */
}


/* エコ洗剤 */
.category .eco a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-ecosenzai.png");
  background-repeat: no-repeat;
  top: -6px;
  left: 0;
}

/* 浴用化粧品 */
.category li.bath a {
  padding-left: 40px;
}
.category .bath a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-yokuyokesho.png");
  background-repeat: no-repeat;
  top: -6px;
  left: -5px;
}

/* 医薬部外品 */
.category .nonmedicinal a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-nonmedicinal.png");
  background-repeat: no-repeat;
  top: -6px;
  left: -5px;
}

/* 雑貨 */
.category li.zakka a {
  padding-left: 40px;
}

.category .zakka a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-sundries.png");
  background-repeat: no-repeat;
  top: -6px;
  left: -5px;
}

/* 食物繊維 */
.category .fiber a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-fiber.png");
  background-repeat: no-repeat;
  top: -6px;
  left: -10px;
}

/* 不溶性食物繊維 */
.category .insoluble-fiber a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-insoluble-fiber.png");
  background-repeat: no-repeat;
  top: -6px;
  left: -5px;
}

/* 粒（打錠） */
.category li.tablet a {
  padding-left: 40px;
}
.category .tablet a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-tablet.png");
  background-repeat: no-repeat;
  top: 5px;
  left: -15px;
}

/*スーパーフード */
.category .superfood a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-superfood.png");
  background-repeat: no-repeat;
  top: 0px;
  left: -10px;
}

/*美容 */
.category li.beauty a{
  padding-left: 40px;
}

.category .beauty a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-beauty.png");
  background-repeat: no-repeat;
  top: -5px;
  left: -15px;
}

/*健康茶 */
.category .healthy-tea a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-healthy-tea.png");
  background-repeat: no-repeat;
  top: 0px;
  left: -15px;
}

/*インスタントティー */
.category li.instant-tea a {
  padding-left: 22px;
}
.category .instant-tea a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-instant-tea.png");
  background-repeat: no-repeat;
  top: 0px;
  left: -15px;
}

/* オリゴ糖・すっきりサポート */
.category li.oligo a {
  padding-left: 20px;
  font-size: 14px;
}

.category li.oligo span {
  top: 20px;
}

.category .oligo a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-oligo.png");
  background-repeat: no-repeat;
  padding-left: 30px;
  left: -10px;
  top: 6px;
}


/*アミノ酸 */
.category .amino a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-amino.png");
  background-repeat: no-repeat;
  top: 0px;
  left: -15px;
}

/* ビタミン・ミネラル */
.category li.vitamine a {
  padding-left: 40px;
}

.category li.vitamine span {
  top: 20px;
}

.category .vitamine a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-vitamin.png");
  background-repeat: no-repeat;
  left: -10px;
  top: 10px;
}

/*甘味料 */
.category li.kanmi a {
  padding-left: 40px;
}

.category .kanmi a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-kanmi.png");
  background-repeat: no-repeat;
  top: 5px;
  left: -15px;
}

/*しょうが */
.category .ginger a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-ginger.png");
  background-repeat: no-repeat;
  top: 0px;
  left: -15px;
}

/*スポーツ */
.category .sports a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-sports.png");
  background-repeat: no-repeat;
  top: 0px;
  left: -15px;
}


/*大豆プロテイン */
.category li.soy-protein a {
  padding-left: 35px;
}

.category .soy-protein a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-soy-protein.png");
  background-repeat: no-repeat;
  top: 0px;
  left: -15px;
}


/*ホエイプロテインWPC */
.category li.side-icon-whey-wpc a {
  padding-left: 35px;
}

.category li.whey-wpc span {
  top: 20px;
}

.category .whey-wpc a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-whey-wpc.png");
  background-repeat: no-repeat;
  top: 10px;
  left: -15px;
}

/*ホエイプロテインWPI */
.category li.whey-wpi span{
  top: 20px;
}

.category li.whey-wpi a {
  padding-left: 35px;
}

.category .whey-wpi a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-whey-wpi.png");
  background-repeat: no-repeat;
  top: 10px;
  left: -15px;
}

/*その他プロテイン */
.category li.casein a {
  padding-left: 35px;
}

.category .casein a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-casein.png");
  background-repeat: no-repeat;
  top: 0;
  left: -10px;
}

/* 食品添加物 */
.category .additive a {
  padding-left: 50px;
}

.category .additive a::before {
  background: url("https://www.garlic.co.jp/dshop/_images/_common/side-icon-additive.png");
  background-repeat: no-repeat;
  padding-left: 60px;
  top: -6px;
  left: -10px;
}


.arrow {
  position: absolute;
  right: 0;
  top: 10px;
  display: inline-block;
  padding: 0 0 0 16px;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
  transition: all .4s;
}

.category li a:hover .arrow {
  right: -5px;
}

.arrow::before,
.arrow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}



.right::before {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #e07611;
}

.right::after {
  left: 5px;
  width: 5px;
  height: 5px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}