.filter-section {
  margin-bottom: 10px;
}

.filter-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-buttons button {
  border: 1px solid #c5c5c5;
  border-radius: 10px;
  padding: 5px 10px;
  background-color: #fff;
  color: #000;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  transition: background-color .3s ease, border-color .3s ease;
}

.filter-buttons button.active {
  background: #fff462;
  border: 2px solid #008641;
}

#itemlist_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin-top: 10px;
  gap: 30px;
}

.card {
  width: 43vw;
  padding: 10px 0;
  transition: transform .3s;
}

.card:hover {
  transform: translate(0, -5px);
}

.card_ph img {
  width: 43vw;
  height: 28.6vw;
  object-fit: cover;
  border-radius: 10px;
}

.card-info p {
  margin: 5px 0;
  font-size: 9px;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  padding-bottom: 7px;
}

/* 商品メーカー名／商品名／価格サイズ */
.card-info .maker {
  border: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.card-info .product {
  font-size: 14px;
  margin-top: 0;
}

.itemlist_figure {
  font-size: 15px;
}

.itemlist_figure2 {
  font-size: 13px;
}

.itemlist_figure3 {
  font-size: 14px;
}

/* ===== 価格行＋カート（共通） ===== */
.card-info .list_cart {
  position: relative;
  line-height: 1.3;
  margin: 7px 0;
  padding-right: 40px;     /* アイコン分の余白（SP） */
  min-height: 30px;        /* アイコン高さ（SP） */
  /* p と同じ見た目を div にも適用して統一 */
  font-size: 9px;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  padding-bottom: 7px;
}

/* カートの form ごと右端・縦中央に固定 */
.card-info .list_cart > form {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  line-height: 0;
  z-index: 1;
}

/* アイコン（SPデフォルトサイズ） */
.cart-icon {
  cursor: pointer;
  width: 30px;
  height: 30px;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

.card-info .list_cart span.red {
  color: #d32f2f;
  font-weight: bold;
}

/* アコーディオン */
.accordion-header {
  display: flex;
  gap: 10px;
  padding: 10px 0 0;
  justify-content: space-between;
}

.accordion-button {
  background: #a2cd85;
  color: #fff;
  border: none;
  padding: 10px 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  flex: 1;
  position: relative;
  line-height: 1;
  display: table-cell;
  text-align: center;
}

.accordion-button.active {
  background: #008641;
}

.accordion-button.active:after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 15px;
  background: url("https://protta.jp/img-ij/itemlist_check.png") no-repeat left bottom / 12px;
  margin-left: 8px;
  vertical-align: bottom;
}

.accordion-content {
  padding: 10px;
  border: 1px solid #008641;
}

.accordion-content.hidden {
  display: none;
}

/* 表示ボタン */
#display-button {
  background: #008641;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 8px 30px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  transition: background-color .3s ease;
}

#display-button:hover {
  background: #218838;
}

#display-button:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin: 0 10px 2px 0;
}

/* ホバー時の効果 */
.toggle-filter {
  color: #008641;
  cursor: pointer;
  transition: color .3s ease;
}

.toggle-filter:hover {
  text-decoration: underline;
}

/* 非表示／フェード */
.hidden {
  display: none;
}

.fade {
  transition: opacity .3s ease;
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

/* 20250126add */
.filter-inner {
  display: flex;
  align-items: center;
}

.filter-inner h4 {
  flex-basis: 8em;
  font-size: 13px;
  line-height: 1.2;
}

#genre-content {
  text-align: center;
}

#genre-buttons-2 button {
  padding: 5px 10px;
  width: calc(50% - 5px);
}

#manufacturer-buttons {
  gap: 5px;
}

#manufacturer-buttons button {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
}

/* ================= PC(>=701px) ================= */
@media screen and (min-width: 701px) {
  .accordion-header {
    justify-content: start;
  }

  .accordion-button {
    padding: 12px 20px 13px;
    font-size: 16px;
    flex: 0;
    flex-basis: 326px;
  }

  .accordion-button.active {
    padding: 7px 20px 14px;
  }

  .accordion-button.active:after {
    width: 19px;
    height: 24px;
    background-size: 19px;
    margin-left: 16px;
  }

  .accordion-content {
    padding: 15px;
    border: 2px solid #008641;
  }

  .filter-inner h4 {
    font-size: 14px;
    flex-basis: 11em;
  }

  .filter-buttons {
    gap: 10px;
  }

  .filter-buttons button {
    padding: 5px 15px;
    font-size: 14px;
  }

  #toggle-refine {
    font-size: 14px;
  }

  #genre-buttons-2 button {
    padding: 5px 10px;
    width: 158px;
  }

  #manufacturer-buttons {
    gap: 10px;
  }

  #manufacturer-buttons button {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  #itemlist_content {
    margin-top: 20px;
    gap: 0 30px;
  }

  #display-button {
    border-radius: 10px;
    padding: 10px 40px;
    font-size: 14px;
  }

  .card {
    width: 216px;
    padding: 10px 0 35px;
  }

  .card_ph img {
    width: 216px;
    height: 162px;
    border-radius: 17px;
  }

  .card-info p {
    margin: 5px 0;
    font-size: 12px;
  }

  .card-info .product {
    font-size: 17px;
  }

  .itemlist_figure {
    font-size: 18px;
  }

  /* 価格行＋カート（PC上書き） */
  .card-info .list_cart {
    padding-right: 44px;    /* 33px アイコン＋余白 */
    min-height: 33px;
    font-size: 12px;        /* p と同じサイズに統一 */
  }

  .cart-icon {
    width: 33px;
    height: 33px;
  }
}