/* Google Fonts例（明朝系） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');

.section-title {
  font-family: 'Noto Serif JP', serif; /* 明朝系 */
  font-weight: 700;
  font-size: 20px;              /* スマホ用サイズ調整 */
  background-color: #3b3b3b;    /* 背景色（画像のグレー） */
  color: #d8b97d;               /* 文字色（画像の黄みベージュ） */
  padding: 8px 14px;            /* 上下左右余白 */
  margin: 16px 0 16px;          /* 下余白だけ確保 */
  line-height: 1.4;
}
.main-visual { 
  margin: 0 0 6px;
  height: clamp(160px, 45vh, 260px); /* 端末に合わせて高さを制御 */
  background: #fafafa;              /* 余白が出る場合の背景 */
}

.main-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 画像を切らずに収める */
}

.catch-block {
  padding: 6px 4px;
  margin-left: 8px;
  margin-right: 8px;
}

.main-catch {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  margin-top: 6px;
}

.sub-catch {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  font-weight: 400;
  color: #666;
  margin: 0 0 8px;
}

.description {
  font-size: 14px;
  line-height: 1.75;
  color: #555;
}


.lineup {
  margin-top: 16px;
  margin-left: 8px;   /* ← ここを 8px に変更 */
  margin-right: 8px;  /* ← 同上 */
}

.product-card {
  margin-bottom: 24px; /* 商品と商品間の余白を統一 */
  background-color: #fff; /* 白背景で浮かないようにする */
  border-radius: 6px;  /* 角丸で柔らかく */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ほんのり影 */
}

.product-card__img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 160px; /* 高さを制限（例：160px） */
  object-fit: contain; /* 切らずに全体表示 */
  background-color: #fafafa; /* 余白部分の背景色（任意） */
}
.product-card__img {
  margin: 8px 0;
}
.product-card__body {
  padding: 12px;
}

.product-card__name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}

.product-card__desc {
  font-size: 14px;
  color: #555;
  margin: 0 0 10px;
  line-height: 1.6;
}

.product-spec {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.product-spec th {
  background-color: #f8f4e6; /* 薄いベージュ（高政の雰囲気に合う色） */
  color: #333;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
  width: 35%;
}

.product-spec td {
  background-color: #fffdf8; /* 少しだけ色味のある白 */
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
}

.product-card__catch {
  font-family: 'Noto Serif JP', serif; /* PC版と同じ明朝系 */
  font-size: 16px;                      /* PC版が16pxならそのまま */
  font-weight: 500;
  color: #a67c00; /* PC版の強調色を適用 */
  margin: 0 0 6px;
}

.product-card__name {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px; /* PC版が18pxなら同じに */
  font-weight: 700;
  margin: 0 0 6px;
}

.product-card__desc {
  font-family: 'Noto Sans JP', sans-serif; /* PC版の説明文用フォント */
  font-size: 14px; /* PC版と同じ or スマホ読みやすく調整 */
  color: #333;
  margin: 0 0 10px;
  line-height: 1.7;
}

.lineup__btn {
  margin-top: 20px;     /* 上余白 */
  margin-bottom: 30px;  /* 下ブロックとの間に余白 */
}

.buy-btn {
  margin-left: 5px;
  margin-right: 5px;
  display: block;
  width: calc(100% - 10px); /* 左右マージン分を引く */
  background-color: #cc0000;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 14px 0;
  border-radius: 0;
  position: relative;
}

.buy-btn .arrow {
  margin-left: 8px;
  font-size: 14px;
}

.buy-btn:hover {
  background-color: #b30000; /* PC版のホバー色 */
}

.catch-block {
  margin: 0 10px; /* 左右に10pxの余白を追加（スマホ用） */
}

@media screen and (max-width: 768px) {
  .pd-item {
    margin-left: 8px;
    margin-right: 8px;
  }
}