/* --- 売れ筋商品ランキングのレイアウト --- */

/* リスト全体の設定（横並びにする） */
.ranking-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC表示：横に3列均等に並べる */
  gap: 20px; /* 商品と商品の間の余白 */
  list-style: none; /* リストの黒丸（・）を消す */
  padding: 0;
  margin: 0;
}

/* 商品画像のサイズ調整 */
.ranking-item img {
  width: 100%; /* 枠の幅に合わせて画像を縮小・拡大 */
  height: auto; /* 縦横比を維持する */
}

/* スマホ表示時の設定（画面幅が600px以下の場合） */
@media screen and (max-width: 600px) {
  .ranking-list {
    grid-template-columns: repeat(2, 1fr); /* スマホ表示：横に2列にする */
    gap: 10px; /* スマホ表示：余白を少し狭める */
  }
}

/* --- 売れ筋商品ランキングの見出し（パターン2） --- */
.ranking-section h2 {
  font-size: 20px; /* 文字の大きさ */
  color: #555555; /* 文字の色 */
  background-color: #faf7f7; /* 薄いグレーピンクの背景色 */
  padding: 15px 20px; /* 内側の余白（上下 左右） */
  margin-bottom: 30px; /* 見出しと商品の間の余白 */
  border-left: 6px solid #ffb6c1; /* 左側のピンクの線 */
  border-radius: 3px; /* 角をほんの少し丸くする */
}

/* --- 順位バッジのデザイン --- */

/* バッジを画像の上に重ねるための準備 */
.ranking-item {
  position: relative;
  margin-top: 15px; /* バッジがはみ出す分の余白を上部に確保 */
}

/* バッジの基本デザイン（4位以下） */
.rank-badge {
  position: absolute;
  top: -15px;  /* 画像より少し上にずらす */
  left: -10px; /* 画像より少し左にずらす */
  width: 40px;
  height: 40px;
  background-color: #999999; /* 4位以下の背景色（グレー） */
  color: #ffffff; /* 文字色（白） */
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  line-height: 40px; /* 丸の高さと同じにして文字を上下中央に */
  border-radius: 50%; /* まん丸にする */
  z-index: 10; /* 画像の上に重ねる */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* ふんわり影をつける */
}

/* 1位のデザイン（ゴールドで少し大きく） */
.ranking-item:nth-child(1) .rank-badge {
  background-color: #d4af37;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  top: -20px;
  left: -15px;
}

/* 2位のデザイン（シルバー） */
.ranking-item:nth-child(2) .rank-badge {
  background-color: #c0c0c0;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 14px;
}

/* 3位のデザイン（ブロンズ） */
.ranking-item:nth-child(3) .rank-badge {
  background-color: #c47222;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 14px;
}

/* --- 売れ筋商品の最後（下部）の境目 --- */
.ranking-section {
  padding-bottom: 20px; /* 商品群と区切り線の間のスペース */
  margin-bottom: 20px; /* 区切り線と次のバナー等とのスペース */
  border-bottom: 4px double #ffb6c1; /* 優しいピンクの二重線 */
}