/* スライダー */
/* 前へボタン */
.swiper-button-prev,
.swiper-button-next {
    width: 20px;   /* ボタン自体のサイズ */
    height: 20px;
    color: #FAFDD6 !important;     /* 矢印の色 */
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 20px !important;  /* 矢印の大きさ */
}



/* 新商品の紹介からランキングまで */
.product-block {
  margin-bottom: 80px;
  margin-top: 50px;
  text-align: center;
}

.product-block .title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-block .subtitle {
  font-size: 16px;
  margin-bottom: 20px;
}

.subtitle-1 {
  font-size: 14px;
  margin-bottom: 30px;
  margin-top: -15px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 -10px;
  list-style: none;
}

.product-item {
  margin-bottom: 30px;
  box-sizing: border-box;
  padding: 10px;
  width: 50%; /* スマホは2列 */
}

@media (min-width: 768px) {
  .product-item {
    width: 33%; /* PCは3列 */
  }
}

.product-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.product-name {
  margin: 5px 0;
  font-weight: bold;
}

.product-expl {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

.product-price {
  margin: 0;
  font-weight: normal; /* 通常文字で表示 */
}

.product-price .regular {
  text-decoration: line-through;
  margin-right: 5px;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  font-size: 1.6rem;
  font-weight: bold;
}

.title::before,
.title::after {
  content: "";
  flex: 1;               /* 線が自動で伸縮 */
  height: 1px;
  background: #ccc;      /* 線の色 */
  margin: 0 10px;        /* 文字との間隔 */
}

.title span {
  white-space: nowrap;   /* 長い文字でも改行しない */
}


/* =============================
   ランキング専用デザイン
============================= */
.ranking-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* PCは5列 */
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .ranking-list {
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
  }
}

.ranking-list .product-item {
  position: relative;
  text-align: center;
  overflow: hidden;
  border-radius: 8px;

  /* flexの幅をリセット */
  width: auto !important;
  padding: 0;
}

.ranking-list .product-item img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* 正方形 */
  object-fit: cover;     /* 中央をトリミング */
  display: block;
}


/* ランキング用商品 */
.ranking-list .product-item {
  position: relative; /* これで子要素を絶対配置できる */
  text-align: center;
  overflow: visible;  /* はみ出す部分を表示 */
  border-radius: 8px;
}

/* 画像 */
.ranking-list .product-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* 順位マーク */
.rank-mark {
  position: absolute;
  top: -16px;     /* 画像の上にはみ出す */
  left: -8px;    /* 画像の左にはみ出す */
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.rank-mark::after {
  content: "位";  /* 数字の後に自動で「位」を追加 */
  font-size: 0.7em; /* 少し小さめ */
}


/* 1位：金メダル */
.rank-1 {
  background: linear-gradient(145deg, #ffd700, #ffb700);
  border: 2px solid #fff;
  color: #000;
  font-size: 18px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 0 10px rgba(255,215,0,0.7), 0 2px 6px rgba(0,0,0,0.4);
}

/* 2位：銀メダル */
.rank-2 {
  background: linear-gradient(145deg, #e6e6e6, #bfbfbf); /* 明るめ〜暗めのグラデ */
  border: 2px solid #fff;
  color: #000;
  font-size: 16px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  box-shadow: 0 0 6px rgba(192,192,192,0.7), 0 2px 4px rgba(0,0,0,0.3);
}

/* 3位：銅メダル */
.rank-3 {
  background: linear-gradient(145deg, #d18b60, #a55a2c); /* 明るめ〜暗めの銅色 */
  border: 2px solid #fff;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  box-shadow: 0 0 6px rgba(205,127,50,0.7), 0 2px 4px rgba(0,0,0,0.3);
}

/* 4位・5位：控えめ */
.rank-4,
.rank-5 {
  background: #999;
  font-size: 14px;
  opacity: 0.9;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}