/*
.base_items_list {
    display: flex;
    width: auto;
    max-width: 100%;
    flex-flow: wrap;
    margin: 0 auto;
    padding: 0;
    justify-content: space-between;
  }
  .base_items_list::after{
    content: "";
    display: block;
    width: calc(100% / 3);
  }
  .base_item {
    list-style: none;
    flex-basis: calc(100% / 3);
    margin-bottom: 2em;
  }
  .base_item dt {
    margin: 0 0 .5em 0;
  }
  .base_item dd {
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }
  .base_item_title {
    font-size: 16px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc((100vw / 3) - 20px);
  }
  .base_item_price {
    font-size: 16px;
  }
  */
  .base_items_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCでは4列 */
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.base_item {
  text-align: center;
}

/* 画像を正方形にトリミング（中央寄せ） */
.base_item img {
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形にする */
  object-fit: cover; /* 縦横比を保ちながら中央をトリミング */
  border-radius: 8px;
  display: block;
}

/* タイトルと価格 */
.base_item_title {
  display: block;
  font-weight: bold;
  margin-top: 8px;
}

.base_item_price {
  display: block;
  color: #333;
  margin-top: 4px;
}

/* スマホ表示（768px以下）のとき2列に変更 */
@media (max-width: 768px) {
  .base_items_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}