/* ============================================
   VJ物産 アフィリエイトブログ 商品カードCSS
   ============================================ */

/* --- 基本商品カード（既存・自社商品用） --- */
.vj-product-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin: 20px 0;
  background: #fafafa;
}
.vj-product-card img {
  flex-shrink: 0;
  border-radius: 4px;
}
.vj-product-card strong {
  font-size: 15px;
  color: #333;
}

/* --- コンパクトカード（キーリンググリッド用） --- */
.vj-product-card-compact {
  flex-direction: column;
  text-align: center;
  padding: 12px;
  gap: 8px;
}

/* --- 商品グリッド（6種キーリング表示用） --- */
.vj-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
@media (max-width: 600px) {
  .vj-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 基本ボタン（Amazon単体） --- */
.vj-pc-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 16px;
  background: #ff9900;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  transition: opacity 0.2s;
}
.vj-pc-btn:hover {
  opacity: 0.85;
  color: #fff !important;
}

/* ============================================
   マルチプラットフォーム商品カード（新規）
   ============================================ */

/* --- マルチカード（他社商品・複数プラットフォーム） --- */
.vj-multi-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin: 24px 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.vj-multi-card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
}
.vj-multi-card strong {
  font-size: 16px;
  color: #222;
  display: block;
  margin-bottom: 4px;
}
.vj-multi-card .vj-mc-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* --- プラットフォームボタン群 --- */
.vj-platform-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* --- 各プラットフォームボタン --- */
.vj-btn-amazon,
.vj-btn-rakuten,
.vj-btn-yahoo {
  display: inline-block;
  padding: 7px 18px;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 5px;
  font-size: 13px;
  font-weight: bold;
  transition: opacity 0.2s;
  text-align: center;
  min-width: 100px;
}
.vj-btn-amazon  { background: #ff9900; }
.vj-btn-rakuten { background: #BF0000; }
.vj-btn-yahoo   { background: #FF0033; }

.vj-btn-amazon:hover,
.vj-btn-rakuten:hover,
.vj-btn-yahoo:hover {
  opacity: 0.85;
  color: #fff !important;
}

/* スマホ対応：ボタン横並び→縦並び */
@media (max-width: 480px) {
  .vj-multi-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .vj-platform-buttons {
    justify-content: center;
  }
  .vj-btn-amazon,
  .vj-btn-rakuten,
  .vj-btn-yahoo {
    width: 100%;
  }
}

/* ============================================
   ランキングカード（おすすめ○選記事用）
   ============================================ */
.vj-ranking-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 1px solid #ddd;
  border-left: 4px solid #c8a84e;
  border-radius: 0 10px 10px 0;
  margin: 24px 0;
  background: #fff;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.vj-ranking-card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
}
.vj-ranking-card strong {
  font-size: 16px;
  color: #222;
  display: block;
  margin-bottom: 4px;
}

/* --- ランキングバッジ --- */
.vj-rank-badge {
  position: absolute;
  top: -12px;
  left: -4px;
  background: #c8a84e;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 4px 14px;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
/* 1位は金、2位は銀、3位は銅 */
.vj-ranking-card[data-rank="1"] .vj-rank-badge { background: #DAA520; }
.vj-ranking-card[data-rank="2"] .vj-rank-badge { background: #A0A0A0; }
.vj-ranking-card[data-rank="3"] .vj-rank-badge { background: #CD7F32; }
.vj-ranking-card[data-rank="1"] { border-left-color: #DAA520; }
.vj-ranking-card[data-rank="2"] { border-left-color: #A0A0A0; }
.vj-ranking-card[data-rank="3"] { border-left-color: #CD7F32; }

@media (max-width: 480px) {
  .vj-ranking-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================
   比較表（オプション）
   ============================================ */
.vj-comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
.vj-comparison-table th,
.vj-comparison-table td {
  border: 1px solid #ddd;
  padding: 10px 12px;
  text-align: center;
}
.vj-comparison-table th {
  background: #f5f0e6;
  font-weight: bold;
  color: #333;
}
.vj-comparison-table tr:nth-child(even) {
  background: #fafafa;
}

/* ============================================
   アフィリエイト開示文
   ============================================ */
.vj-affiliate-disclosure {
  font-size: 12px;
  color: #999;
  border-top: 1px solid #eee;
  padding-top: 16px;
  margin-top: 32px;
  line-height: 1.6;
}