/* ランキングページ専用スタイル(既存の style.css は変更しません) */
.rk { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; color: #3b2f26; line-height: 1.8; }
.rk h1 { font-size: 1.7rem; margin: 8px 0 16px; }
.rk h2 { font-size: 1.25rem; margin: 40px 0 14px; padding: 10px 14px; background: #f8f0e5; border-radius: 8px; }
.rk-pr { border: 2px solid #d9792b; background: #fdf3e8; border-radius: 10px; padding: 12px 16px; font-weight: 700; }
.rk-notice { border-left: 4px solid #d9792b; background: #fffaf3; padding: 10px 14px; }
.rk-updated, .rk-note { font-size: .85rem; color: #6b5a4c; }
.rk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.rk-item { display: grid; grid-template-columns: 56px 120px 1fr; gap: 14px; padding: 14px; border: 1px solid #eadfce; border-radius: 12px; background: #fff; }
.rk-rank { font-size: 1.8rem; font-weight: 800; color: #d9792b; text-align: center; line-height: 1.2; }
.rk-rank span { font-size: .8rem; }
.rk-img img { width: 120px; height: 120px; object-fit: contain; background: #fff; border-radius: 8px; }
.rk-name { margin: 0 0 2px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.rk-shop { margin: 0 0 8px; font-size: .8rem; color: #6b5a4c; }
.rk-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 0 0 10px; }
.rk-data div { display: flex; gap: 8px; font-size: .9rem; }
.rk-data dt { color: #6b5a4c; min-width: 4.5em; }
.rk-data dd { margin: 0; font-weight: 700; }
.rk-btn { display: inline-block; padding: 8px 18px; border-radius: 999px; background: #d9792b; color: #fff; text-decoration: none; font-weight: 700; }
.rk-btn:hover { opacity: .9; }
.rk-table-wrap { overflow-x: auto; }
.rk-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; }
.rk-table th, .rk-table td { border: 1px solid #eadfce; padding: 8px 10px; text-align: right; }
.rk-table th { background: #f8f0e5; text-align: center; }
.rk-table td { white-space: nowrap; }
.rk-table td:first-child { text-align: center; }
.rk-table .t-name { text-align: left; min-width: 240px; white-space: normal; }
.rk-note-list { font-size: .9rem; color: #6b5a4c; }
@media (max-width: 600px) {
  .rk-item { grid-template-columns: 44px 1fr; }
  .rk-img { grid-column: 2; }
  .rk-body { grid-column: 1 / -1; }
  .rk-data { grid-template-columns: 1fr; }
}