.ranking-neo-pickup {
    max-width: 480px;
    margin: 28px auto;
    background: #fffdfa;
    border-radius: 18px;
    box-shadow: 0 6px 24px #f1e5d0, 0 1.5px 0 #f7d791;
    padding: 28px 32px 22px;
    font-family: "Segoe UI", "Meiryo", sans-serif;
    position: relative;
  }
  .pickup-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
  }
  .pickup-rank-badge {
    display: flex;
    align-items: center;
    justify-content: center; /* アイコンとテキストを中央揃え */
    font-size: 1.3em; /* バッジ全体の基準フォントサイズを少し調整 */
    font-weight: bold;
    color: #fff;
    background: linear-gradient(90deg, #e89d5b 0%, #df5d3c 100%);
    border-radius: 20px; /* 角丸を少し調整 */
    padding: 8px 16px; /* 上下左右のパディングを調整 */
    box-shadow: 0 2px 8px #f9e6c1bb;
    min-width: 75px; /* バッジが潰れないように最小幅を設定（値は適宜調整） */
    text-align: center; /* テキスト中央揃え */
  }
  .pickup-rank-icon {
    margin-right: 4px; /* アイコンとテキストの間隔を少し詰める */
    font-size: 1em; /* アイコンサイズをバッジのフォントサイズに合わせる */
    line-height: 1; /* アイコンの縦位置のずれを補正 */
  }
  .pickup-rank-num {
    color: #fffde3;
    font-size: 1.05em; /* テキストサイズを少し調整して収まりを良くする */
    font-weight: 800;
    letter-spacing: 0.01em; /* 文字間隔を少し詰める */
    white-space: nowrap; /* テキストが改行されるのを防ぐ */
  }
  .pickup-score-badge {
    /* background: #ffe7b9; */
    color: #ce8b29;
    font-weight: bold;
    font-size: 1.15em;
    padding: 6px 9px;
    border-radius: 4px;
    box-shadow: 0 1px 0 #fbe39a;
    letter-spacing: 0.01em;
    text-align: center;
  }
  .pickup-main {
    display: flex;
    flex-direction: column; /* PCでも画像と情報が縦に並ぶように変更 */
    gap: 12px; /* 画像と情報エリアの間のスペース */
    align-items: center; /* 画像を中央に配置 */
    margin-bottom: 12px;
  }
  .pickup-img img {
    border-radius: 11px;
    border: 2px solid #ffe2b2;
    box-shadow: 0 2px 12px #ffe4b2;
    background: #fff;
    width: 106px;
    height: 106px;
    object-fit: cover;
    display: block;
  }
  .pickup-info {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%; /* 情報エリアはコンテナの幅いっぱいに */
  }
  .pickup-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #4a2c00;
    margin-bottom: 7px;
    line-height: 1.32;
  }
  .pickup-meta-area {
    font-size: 1.08em;
    color: #c28e2d;
    margin: 8px 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center; /* 購入数とレビューを中央揃えにする場合 */
    flex-wrap: nowrap; /* PCでは折り返さないようにする */
    gap: 8px; /* 要素間のスペースを少し広げる */
  }
  .pickup-meta-label {
    color: #b09a4d;
    font-weight: 500;
    margin-right: 2px;
  }
  .pickup-review-value, .pickup-sales-value {
    color: #e09221;
    font-weight: bold;
    font-size: 1.09em;
    margin-right: 2px;
  }
  .pickup-meta-divider {
    color: #ecd6ac;
    margin: 0 4px;
    font-weight: normal;
    font-size: 1.06em;
  }
  .pickup-point-area {
    background: #fff6df;
    border-radius: 6px;
    padding: 8px 9px 8px 9px;
    font-size: 0.96em;
    color: #7b4b14;
    line-height: 1.55;
  }
  .pickup-point-label {
    font-weight: bold;
    color: #e2a93b;
    margin-right: 5px;
  }
  .pickup-explanation-area {
    padding: 12px 0;
    font-size: 1.05em;
    color: #6b4a00;
    margin-top: 12px;
    line-height: 1.6;
    font-weight: 500;
  }
  .pickup-explanation-area strong {
    color: #d4840a;
    font-weight: 700;
  }
  .pickup-footer {
    margin-top: 0px;
  }
  @media (max-width: 600px) {
    .ranking-neo-pickup { 
      padding: 15px 10px;
    }
    .pickup-main {
      gap: 10px;
      align-items: center;
    }
    .pickup-img img {
      margin: 0 auto;
      width: 100px;
      height: 100px;
    }
    .pickup-meta-area {
      font-size: 1em; /* フォントサイズを少し小さく調整 */
      color: #c28e2d;
      margin-bottom: 0px;
      display: flex;
      flex-direction: row; /* 横並びに変更 */
      justify-content: center; /* 中央揃え */
      align-items: center; /* 縦方向も中央揃え */
      flex-wrap: nowrap; /* 折り返しを防ぐ */
      gap: 2px; /* 間隔を調整 */
    }
    .pickup-meta-divider {
      display: block; /* 区切り線を表示 */
      color: #ecd6ac;
      margin: 0 0; /* 左右の余白を調整 */
    }
    .pickup-footer { 
      gap: 7px; 
      flex-direction: column; 
      align-items: flex-start;
    }
    .pickup-explanation-area {
      font-size: 1em;
      padding: 10px 0;
      margin-top: 10px;
    }
    .pickup-explanation-area strong {
      font-size: 1.05em;
    }
  }
  .pickup-meta-rank {
    font-size: 0.9em; /* 少し小さくする */
    color: #777; /* 少し薄い色にする */
    margin-left: 4px; /* 左側に少し余白 */
  }

/* 総合スコアの注釈 */
.pickup-score-note {
  display: block; /* 点数の下に表示されるようにブロック要素にする */
  font-size: 0.75em;
  color: #757575; /* 少し薄めの色 */
  font-weight: normal; /* 通常の太さ */
  margin-top: 4px; /* 点数との間に少し余白 */
  text-align: center; /* 注釈も中央揃えにする場合 */
}

/* 新規追加: 総合スコアとメタ情報をまとめるためのスタイル */
.pickup-score-and-meta-wrapper {
  background-color: #fff8f0; /* 例: 薄い背景色でグループ化 */
  border: 1px solid #fce8c9; /* 例: 枠線 */
  border-radius: 8px; /* 角丸 */
  padding: 10px; /* パディングを少し調整 */
  margin-top: 8px; /* タイトルとの間に少しマージン */
  margin-bottom: 12px; /* ポイントエリアとの間にマージン */
}

/* 総合スコアバッジ内の順位表示の微調整 (必要な場合) */
.pickup-score-badge .pickup-meta-rank {
  margin-left: 5px; /* 点数との間に少しスペース */
  font-size: 0.9em; /* 他の順位表示と合わせる */
}