/* === ranking.css (starter) ===
   Place in: wp-content/themes/<child-theme>/assets/css/ranking.css
   Scope: single-ranking, archive-ranking, taxonomy-ranking_* pages
   Tip: classes are prefixed with .rank- to avoid conflicts.
*/

/* Quick Table (Top list digest) */
.rank-quick { margin: 24px 0 32px; }
.rank-quick h2 { font-size: clamp(18px, 3.2vw, 24px); margin-bottom: 12px; }
.rank-quick__table { width: 100%; border-collapse: collapse; }
.rank-quick__table th,
.rank-quick__table td { padding: .6rem .8rem; border-bottom: 1px solid #eee; vertical-align: middle; }
.rank-quick__table th { color: #666; font-weight: 600; }
.rank-quick__table img { max-height: 36px; width: auto; }
.rank-quick__link { text-decoration: underline; }
/* 早見表：小さく均一に見せる */
.rank-quick__img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  /* バナーでも潰れない */
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
}

@media (max-width: 768px){
  .rank-quick__table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Rank Item (1..10) */
.rank-item { margin: 48px 0; padding: 24px; border: 1px solid #eee; border-radius: 12px; background:#fff; }
.rank-item__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rank-item__no { display: inline-grid; place-items: center; width: 36px; height: 36px; background: #222; color: #fff; border-radius: 999px; font-weight: 700; }
.rank-item__title { font-size: clamp(18px,3.4vw,24px); margin: 0; }
.rank-item__rating { margin-left: auto; display:flex; align-items:center; gap:8px; }
.rank-item__rating .stars { letter-spacing: 2px; }
.rank-item__score { color:#666; font-weight:600; }

.rank-item__body { display: grid; grid-template-columns: 280px 1fr; gap: 24px; }
.rank-item__left { }
.rank-item__logo {
  width: 180px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 12px;
}
/* 詳細カード：バナー優先で大きめ */
.rank-item__promo {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 0 0 12px;
}
.rank-item__scores { width:100%; border-collapse: collapse; margin-bottom: 12px; }
.rank-item__scores th,
.rank-item__scores td { padding: .4rem .6rem; border-bottom: 1px dashed #eee; }
.rank-item__scores th { color:#666; text-align:left; width: 34%; }
.rank-item__right h3 { font-size: 1.1rem; margin: 0 0 8px; }

.rank-reviews { margin-top: 16px; }
.rank-reviews h3 { font-size: 1.05rem; margin: 0 0 8px; }
.review { padding: 12px 0; border-bottom: 1px dashed #ddd; }
.review:last-child { border-bottom: none; }
.review__meta { display:flex; align-items:center; gap:12px; color:#666; font-size:.95rem; }
.review__persona { font-weight: 600; }
.review__stars { letter-spacing: 1px; }
.review__text { margin:.3rem 0 0; }

/* 口コミ：左に丸アイコン（人シルエット）を自動表示 */
/* 口コミのレイアウト */
.review {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.review__body {
  flex: 1;
}

/* デフォルト：丸い人型（画像未設定時） */
.review__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e5e9ef;
  background: #f4f6f8 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239AA3AE'><path d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z'/></svg>") center/60% no-repeat;
}

/* 画像がある場合：写真を丸くカバー表示 */
.review__avatar.has-image {
  background: #fff center/cover no-repeat;
  /* SVGを上書き */
  border: 1px solid #ddd;
}

/* ---- 要素版 SVCじゃない場合

.review{ display:flex; gap:12px; align-items:flex-start; }
.review__avatar{
  flex: 0 0 44px; width:44px; height:44px; border-radius:50%;
  border:1px solid #e5e9ef; background:#f4f6f8
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239AA3AE'><path d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z'/></svg>")
    center/60% no-repeat;
}
.review__body{ flex:1; }*/

/* Buttons (inherits your theme styles if present) */
.apply-btnred { display:inline-block; padding:.65rem 1rem; border-radius:8px; background:#d64040; color:#fff; font-weight:700; text-align:center; }
.apply-btnred:hover { opacity:.9; color:#fff; }

/* Utility */
.stars { font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji"; }
@media (max-width: 900px){
  .rank-item__body { grid-template-columns: 1fr; }
  .rank-item__rating { margin-left: 0; }
}