/* ==========================================================================
   【ホームプロダクト専用】広告バナー・格子状の主な取扱商品リスト
   ========================================================================== */
/* --- 1. 広告バナー広告エリア --- */
.banner-area { padding-top: 10px; padding-bottom: 40px; }
.banner-wrapper { display: flex; flex-direction: column; gap: 15px; }
.banner-item { width: 100%; }
.banner-item a { display: block; line-height: 0; }
.banner-item img { width: 100%; height: auto; border: 1px solid #e0ded7; border-radius: 4px; transition: transform 0.3s, box-shadow 0.3s; }
.banner-item img:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

/* --- 2. 主な取扱商品セクション --- */
.products-list-section {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  margin-bottom: 40px; background: #ffffff; padding: 40px 20px; border-top: 3px solid var(--primary-color); box-sizing: border-box;
}
.products-list-content { width: 100%; max-width: 650px; }
.products-list-content h3 { font-size: 19px; color: var(--primary-color); margin: 0 auto 25px auto; text-align: center; position: relative; padding-bottom: 8px; display: inline-block; }
.products-list-content h3::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 3px; border-top: 1px solid var(--accent-color); border-bottom: 1px solid var(--accent-color); }
.products-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 15px; text-align: left; }
.products-grid li { font-size: 14px; line-height: 1.5; padding-left: 15px; position: relative; color: var(--text-color); }
.products-grid li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background-color: var(--accent-color); border-radius: 50%; }
.products-grid li.etc::before { display: none; } .products-grid li.etc { color: #777; padding-left: 0; }

/* PC大画面レスポンシブ（横幅769px以上） */
@media screen and (min-width: 769px) {
  .banner-wrapper { flex-direction: row; justify-content: space-between; align-items: center; overflow-x: visible; gap: 20px; }
  .banner-item { flex: 1; width: auto; max-width: calc((100% - 40px) / 3); }

  .products-list-section { flex-direction: row; align-items: flex-start; justify-content: center; gap: 50px; padding: 60px 40px; }
  .products-list-content h3 { text-align: left; font-size: 24px; margin: 0 0 25px 0; }
  .products-grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px 20px; max-width: 600px; }
}