.lead-text{
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.lead-text span{
  font-size:10px;
}

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCデフォルトでは3列 */
  gap: 10px;
  }

.product-item {
  position:relative;
  padding: 20px;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  border-color: transparent black black transparent;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.product-item img{
  max-width: 300px;
  width: 100%;
}

.product-order {
  position: absolute;
  top: 0;
  left: 0; /* 必要に応じて調整 */
  width: 50px; /* 円形にするための幅 */
  height: 50px; /* 幅と高さを同じにして円形にする */
  background-color: #f4f4f4; /* 円形の背景色（薄いグレー） */
  border-radius: 50%; /* 完全に丸くする */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px; /* 少し大きめのフォントサイズ */
  font-weight: bold; /* フォントを太く */
  color: #333; /* テキストの色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽いシャドウで立体感を追加 */
}

.product-order p{
  margin:0;
}

.product-image{
  text-align:center;
}

.product-title{
  min-height:35px;
  margin-bottom:16px;
}

.product-title h4{
  color : #000000;
  font-size:16px;
  line-height: 1.1;
  margin-bottom:0px;
  text-align:center;
}

.product-detail{
  max-height: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  margin-bottom:10px;
}

.product-detail p{
  font-size:13px;
}

.product-stock{
  text-align:center;
}
.product-stock span{
  font-size:13px;
}

.product-stock__info{
  font-weight: bold;
  color: #ff4500;
  background-color: #ffeeba;
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-block;
}

.product-link{
  text-align:center;
}
.product-link button{
  display: inline-block;
  padding: 10px 15px;
  background-color: #000000;
  font-size: 16px;
  border:none;
  transition: background-color 0.3s ease, color 0.3s ease; /* ホバー時のアニメーション */
}
.product-link button a{
  font-size:14px;
  color: #ffffff;
  text-decoration: none; /* 下線を削除 */
}

.product-link button:hover {
  background-color: #000000c7;
  color: #ffffff;
}


.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  margin-bottom:50px;
}

.pagination a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pagination a:hover {
  background-color: #000000;
  color: white;
}

.pagination a.active {
  background-color: #000000;
  color: white;
  font-weight: bold;
}

.pagination a[rel="prev"],
.pagination a[rel="next"] {
  font-weight: normal;
  background-color: #e0e0e0;
}

.pagination a[rel="prev"]:hover,
.pagination a[rel="next"]:hover {
  background-color: #333;
  color: white;
}

  @media (max-width: 767px) {
    .products {
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* モバイルでは2列 */
    }
    .product-title {
      min-height:45px;
    }
    .product-item {
      padding: 20px 7px;
    }
    .product-item h4{
      font-size:14px;
    }
}
  }