@charset "UTF-8";

/* ==========================================================================
   製品一覧ページ固有スタイル
   共通スタイル（common.css）・下層ページ共通ヘッダー／見出し（lower.css）は
   別ファイル。このファイルは common.css → lower.css の後に読み込むこと。
   ========================================================================== */

.lower-hero-banner.product_img img {
    object-position: center 80%;
}
/* 製品カードグリッド（暮らしの中のブラシ／プロ・職人向けのブラシ共通） */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.product-card {
  background: var(--panel);
  border: 1px solid var(--line);
}
.product-card .product-photo {
  width: 100%;
  height: 180px;
}
.product-card .product-photo.imperial {
  width: 100%;
  height: 300px;
}
.product-card .product-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card .product-photo.imperial.bottom img{
  object-position: center 85%;
}
.product-card .product-body {
  padding: 20px 22px 24px;
}
.product-card .label-caps {
  display: block;
  margin-bottom: 8px;
  font-size: 0.62rem;
}
.product-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}
.product-card p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--sub);
}

/* オーダーメイドブラシ：控えめな案内ブロック */
.order-panel {
  max-width: 680px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 52px 56px;
  text-align: center;
}
.order-panel .label-caps { display: block; margin-bottom: 14px; }
.order-panel h3 {
  font-size: 1.2rem;
  margin-bottom: 16px;
}
.order-panel p {
  max-width: 480px;
  margin: 0 auto 26px;
  font-size: 0.85rem;
  color: var(--sub);
}

/* レスポンシブ: 製品グリッド／オーダーメイド (max-width: 860px) */
@media (max-width: 860px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .order-panel { padding: 40px 28px; }
}
@media (max-width: 500px) {
  .product-grid { grid-template-columns: repeat(1, 1fr); }
  .order-panel { padding: 40px 28px; }
}