/* ====== Category Ranking Tabs（白黒モノトーン版） ====== */
.category-ranking-tabs {
  display: flex;
  gap: 0.75em;
  font-size: 0.95em;
  margin-bottom: 1.2em;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 15px;
}

.category-ranking-tab {
  padding: 6px 18px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
  transition: all .25s ease;
  font-weight: 500;
}

.category-ranking-tab:hover {
  background: #f5f5f5;
  color: #000;
}

.category-ranking-tab.active {
  background: #fff;
  color: #111;
  border-color: #111;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.category-ranking-title {
  font-size: 1em;
  font-weight: 700;
  color: #333;
  margin-bottom: .6em;
}


/* 商品カードと同じ間隔（gap:18px）に統一 */
.category-ranking-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0px}

.category-ranking-item{position:relative;border:1px solid #eee;border-radius:6px;padding:.8em;text-align:left;transition:box-shadow .2s ease}
.category-ranking-item:hover{box-shadow:0 2px 6px rgba(0,0,0,.1)}
.category-ranking-item img{width:100%;height:60px;object-fit:contain}

/* 商品名：配色・余白・ホバーを商品カード準拠に */
.category-ranking-item .name{
  font-weight:700;font-size:12px;line-height:1.4;color:#222;
  margin:2px 2px 4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden
}
.category-ranking-item .name a{color:#222;text-decoration:none;transition:color .2s}
.category-ranking-item .name a:hover{color:#4CAF50}

/* 価格：寄せ・配色・余白を商品カード準拠に */
.category-ranking-item .price{margin:0 3px 6px;font-weight:700;font-size:.95em;color:#222}
.category-ranking-item .price .normal-price{color:#222}
.category-ranking-item .price .sale-price{color:#d00;font-weight:700}
.category-ranking-item .price .original-price{font-size:.85em;color:#888;text-decoration:line-through;margin-left:.5em}


.soldout-text{color:#999;font-weight:700}
.category-ranking-box{max-width:100%;box-sizing:border-box}
@media screen and (max-width:768px){.category-ranking-box{padding-left:1em;padding-right:1em}}

/* =========================================================
   📦 Sub Category Grid（4列→3列, 左揃え・幅100%）
   ========================================================= */
.p-sub-category {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC: 4列 */
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0 auto 24px;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  background: #fff;
}

@media (max-width: 768px) {
  .p-sub-category {
    margin-bottom: 30px !important; /* ← これでランキングや次要素と離す */
  }
}

.p-sub-category__item {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  text-align: left;
  line-height: 1.4;
  transition: background-color .2s ease, color .2s ease;
}

.p-sub-category__item a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.p-sub-category__item:hover {
  background: #f8f8f8;
  color: #d36c6c;
}

/* ====== Subcategory Heading ====== */
.subcategory-heading {
font-size: 1em;
    font-weight: 700;
    color: #333;
    margin-top: 15px;
    margin-bottom: .5em;
    text-align: left;
}

/* =========================================================
   📱 スマホ時（3列・左右に10px余白）
   ========================================================= */
@media (max-width: 768px) {
  .subcategory-heading {
    padding-left: 10px;   /* ← 左右に余白を追加 */
    padding-right: 10px;
  }

  .p-sub-category {
    grid-template-columns: repeat(3, 1fr);
    width: calc(100% - 20px); /* 両側に10pxずつ余白を確保 */
    margin: 0 auto;           /* 中央寄せ */
  }

  .p-sub-category__item {
    font-size: 13px;
    padding: 10px 12px;
  }
}
/* ====== Sub Category Navigation ====== */
.p-sub-category__item.current {
  background: #f5f5f5;
  font-weight: 700;
  color: #d36c6c;
}
.p-sub-category__item.current a {
  pointer-events: none;
  cursor: default;
}

/* ======================================================
   🧭 ソートバー全体のスタイル（PC & モバイル共通）
   ====================================================== */

/* コンテナ全体を固定幅で中央揃え */
.c-product-sort {
  display: flex;
  align-items: center;               /* ← 縦方向中央揃え */
  justify-content: space-between;    /* ← 左右端を分離 */
  flex-wrap: nowrap;
  max-width: 1200px;
  margin: 5px auto 20px;
  padding: 5px 10px 15px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  gap: 10px;
}

/* 左側（全○○商品） */
.c-product-sort__total {
  flex-shrink: 0;                   /* テキストを固定幅扱いに */
  white-space: nowrap;
  font-size: 14px;
  color: #555;
  display: flex;                    /* ← 内部も中央寄せ */
  align-items: center;
  height: 44px;                     /* ← select と同じ高さ */
}

.c-product-sort__total span {
  font-weight: 700;
  font-size: 35px;
  color: #111;
  margin: 0 4px;
  line-height: 1;
  display: inline-block;
}

/* 右側（セレクトボックス） */
.c-product-sort__switch {
  position: relative;
  display: flex;                    /* ← ここでselectを中央揃え */
  align-items: center;              /* ← ▼アイコンと垂直中央 */
  justify-content: flex-end;
  flex-shrink: 0;
  width: 180px;                     /* ← はみ出し防止 */
}

/* セレクトボックス本体 */
.c-product-sort__switch select {
  all: unset;
  display: block;
  width: 100%;
  height: 44px;                     /* ← 高さを固定 */
  font-size: 15px;
  color: #222;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;           /* ← 明示的指定（背景が抜ける端末対策） */
  background-image: none;           /* ← Android既定矢印削除 */
  padding: 10px 40px 10px 12px;
  line-height: 1.5;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  overflow: hidden;                 /* ← 折返し禁止 */
  white-space: nowrap;              /* ← 強制1行 */
  vertical-align: middle;           /* ← 微妙なズレ修正 */
}

.c-product-sort__switch select:hover {
  border-color: #888;
}

.c-product-sort__switch select:focus {
  border-color: #555;
  outline: none;
}

/* ▼ アイコン（擬似要素で中央揃え） */
.c-product-sort__switch::after {
  content: "\25BE"; /* ▼ */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 1em;
  pointer-events: none;
}



/* ====== 見出し（現状維持） ====== */
.c-section__heading--sub-title{font-family:Montserrat,sans-serif;font-size:36px;color:#000;padding-bottom:20px}
@media (max-width:768px){.c-section__heading--sub-title{font-size:24px}}

/* ====== Natural Ranking（既存のまま） ====== */
.natural-ranking-wrapper{padding:0}
.natural-ranking-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;padding:0;list-style:none;background:#fff;justify-content:center}
.natural-ranking-item{background:#fff;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.1);overflow:hidden;position:relative;transition:transform .2s ease,box-shadow .2s ease}
.natural-ranking-item:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.15)}
.natural-ranking-imagewrap{display:flex;justify-content:center;align-items:center;height:180px;background:#fff;padding:10px}
.natural-ranking-item img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:6px;background:#fff}
.natural-ranking-category{font-size:12px;color:#777;margin:8px 10px 2px;font-weight:500}
.natural-ranking-name{font-weight:700;font-size:15px;line-height:1.4;margin:2px 10px 4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.natural-ranking-name a{color:#222;text-decoration:none;transition:color .2s ease}
.natural-ranking-name a:hover{color:#4CAF50}
.natural-ranking-stars{display:inline-flex;gap:1px;font-size:12px;color:#f5a623;margin:0 10px 6px}
.natural-ranking-stars .star{color:#ccc}
.natural-ranking-stars .star.filled,.natural-ranking-stars .star.half{color:#f5a623}
.natural-ranking-desc{font-size:13px;color:#666;margin:0 10px 8px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.natural-ranking-price{margin:0 10px 15px;font-weight:700;color:#222}
.natural-ranking-price .discount{
  color: #d00;
    margin-right: 6px;
    font-size: 1.6em;
}
.natural-ranking-price .natural-ranking-regular{color:#888;text-decoration:line-through;font-weight:500}
.natural-ranking-low{display:inline-block;background:#f6c343;color:#222;font-weight:600;font-size:12px;padding:3px 8px;border-radius:6px;margin:0 10px 6px}
.natural-ranking-soldout{display:inline-block;background:#d32f2f;color:#fff;font-weight:700;font-size:12px;padding:3px 8px;border-radius:6px;margin:0 10px 6px;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.natural-ranking-review-bubble{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:start;margin:6px 10px 6px}
.natural-ranking-review-bubble-body{background:#f8fafc;border:1px solid #e6ecf2;border-radius:10px;padding:8px 10px;color:#334155;line-height:1.6;font-size:13px}
.natural-ranking-review-bubble-text{margin:0}
.natural-ranking-review-avatar{display:flex;flex-direction:column;align-items:center;gap:5px;width:40px;padding-top:0}
.natural-ranking-review-avatar i{font-size:18px;color:#64748b;opacity:.8}
.natural-helpful-button{background:none;border:none;cursor:pointer;color:#4CAF50;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;transition:transform .15s ease,color .2s ease}
.natural-helpful-button:hover{transform:scale(1.1);color:#2e7d32}
.natural-helpful-button.voted{color:#94a3b8;cursor:not-allowed}
.natural-helpful-count{font-size:12px;font-weight:600;color:#475569}
@media (max-width:768px){.natural-ranking-wrapper{padding:0 8px}.natural-ranking-list{grid-template-columns:1fr;gap:14px}.natural-ranking-imagewrap{height:150px;padding:8px}}
.natural-ranking-index{position:absolute;top:6px;left:6px;background:#555;color:#fff;font-size:14px;font-weight:700;padding:2px 8px;border-radius:5px}
.natural-ranking-index--1{background:linear-gradient(45deg,#ffd700,#f0c000)}
.natural-ranking-index--2{background:linear-gradient(45deg,#c0c0c0,#b0b0b0)}
.natural-ranking-index--3{background:linear-gradient(45deg,#cd7f32,#b8742a)}
.skeleton{background:#f6f6f6;border-radius:8px;padding:10px;animation:pulse 1.5s infinite ease-in-out}
.skeleton-img{width:100%;height:180px;background:#ddd;border-radius:6px;margin-bottom:8px}
.skeleton-line{height:12px;background:#e0e0e0;margin:4px 0;border-radius:3px}
.skeleton-line.short{width:50%}
.skeleton-line.medium{width:70%}
.skeleton-line.long{width:90%}
@keyframes pulse{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}
.natural-ranking-item .natural-ranking-review-bubble{margin:4px 10px 6px!important;gap:6px!important}
.natural-ranking-item .natural-ranking-review-avatar{padding-top:0!important;gap:3px!important}
.natural-ranking-item .natural-ranking-review-bubble-body{padding:6px 8px!important;line-height:1.45!important}
.natural-ranking-item .natural-ranking-review-bubble-body p,.natural-ranking-item .natural-ranking-review-bubble-text{margin:0!important}
@media (max-width:480px){.natural-ranking-item .natural-ranking-review-bubble{margin:2px 8px 4px!important;gap:5px!important}.natural-ranking-item .natural-ranking-review-bubble-body{padding:5px 7px!important}}

/* 店長アイコンのサイズ（未定義なら） */
.natural-ranking-review-avatar .admin-icon{
  width:32px; height:32px; border-radius:50%;
  object-fit:cover; border:1px solid #d1e7d1;
}

.natural-ranking-stars-wrap {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  margin: 0 8px 8px 8px;
}

.natural-ranking-stars-base {
  color: #ddd;
}

.natural-ranking-stars-fill {
  color: #f2b600;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}