/* スマホの4列表示を整える */
@media (max-width: 767px) {
  /* 新着商品とオススメ商品のリスト全体 */
  .arrival-list.row,
  .recommend-list.row {
    margin-left: -5px !important;
    margin-right: -5px !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* 各アイテムの調整 */
  .arrival-list__unit,
  .recommend-list__unit {
    width: 25% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-bottom: 15px !important;
  }

  /* 商品名と価格の調整 */
  .product-list__name, 
  .product-list__price {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .product-list__name {
    display: block;
    height: 8em !important; /* 先ほど調整した4em */
    overflow: hidden;
    margin-bottom: 5px !important;
  }

    /* 商品説明（短い説明文）は4列だと入り切らないのでスマホでは隠すのがおすすめ */
  .product-list__expl {
    display: none !important;
  }
}

  /* 「もっと見る」ボタンの色をサイトカラーに変更 */
.more__prd.btn-primary {
  background-color: #000000 !important; /* 背景色 */
  border-color: #000000 !important;     /* 枠線の色 */
  color: #ffffff !important;            /* 文字の色（白） */
  font-weight: bold;                    /* 文字を少し太く */
  border-radius: 4px;                   /* 少し角を丸くする場合 */
}