アクセス

<div class="metal-grid" id="metal-grid">
  <div class="metal-card metal-gold">
    <div class="metal-title">24金（K24）</div>
    <div class="metal-price" data-key="K24"></div>
    <div class="metal-diff" data-key="K24_diff"></div>
  </div>

  <div class="metal-card metal-pt">
    <div class="metal-title">プラチナ（Pt1000）</div>
    <div class="metal-price" data-key="Pt1000"></div>
    <div class="metal-diff" data-key="Pt1000_diff"></div>
  </div>

  <div class="metal-card metal-sv">
    <div class="metal-title">シルバー（Sv1000）</div>
    <div class="metal-price" data-key="SV1000"></div>
    <div class="metal-diff" data-key="SV1000_diff"></div>
  </div>

  <div class="metal-card metal-pd">
    <div class="metal-title">パラジウム（Pd1000）</div>
    <div class="metal-price" data-key="Pd1000"></div>
    <div class="metal-diff" data-key="Pd1000_diff"></div>
  </div>
</div>

<style>
.metal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.metal-card {
  padding: 16px 20px;
  border-radius: 6px;
  color: #333;
  background: #f7f7f7;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.metal-title {
  font-size: 14px;
  margin-bottom: 8px;
}

.metal-price {
  font-size: 24px;
  font-weight: bold;
}

.metal-diff {
  font-size: 12px;
  margin-top: 4px;
}

/* 色分け（ここはお好みで変えてOK） */
.metal-gold  { background: #e2d28a; }
.metal-pt    { background: #92b6d5; }
.metal-sv    { background: #d3d3d3; }
.metal-pd    { background: #d7a2a7; }
</style>