/* 店舗別の買取実績（store-record）— 2026-10-01 作成・2026-10-03 見た目を見直し（カード・余白・ボタン。店舗の節／一覧／詳細で同じ部品） */
.main.shop { --sr-navy: #14355D; --sr-pink: #F41782; --sr-line: #d9e3ef; }

/* カードを並べる節の地は淡いグレー（カードの白を浮かせる） */
.main.shop .part.sr-section,
.main.shop .part.sr-list-section,
.main.shop .part.sr-related { background: #F4F7FB; }

/* カードの並び：スマホ 2 列・PC 4 列。カードどうしの間 12px（PC 16px） */
.main.shop .sr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }

/* カード（全体が詳細へのリンク）：囲みは外側の 1 つだけ（白地・ごく薄い影・角丸 8px）。中は余白と文字の強弱で分ける
   写真 → 日付（灰色の小さな文字）→「買取金額」（灰色の小さな文字）と金額（ピンク）→ 商品名 2 行 →（店舗名）→ 右下に「詳細を見る ›」。高さはそろえる */
.main.shop a.sr-card { display: flex; flex-direction: column; height: 100%; padding: 12px; background: #fff; border: 0; border-radius: 8px; box-shadow: 0 1px 3px rgba(20, 53, 93, .08); color: inherit; text-decoration: none; }
.main.shop a.sr-card:hover { box-shadow: 0 2px 8px rgba(20, 53, 93, .14); }
.main.shop .sr-card-fig { position: relative; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; background: #edf2f8; }
.main.shop .sr-card-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.main.shop .sr-card-date { margin: 10px 0 0; color: #6b7a8c; font-size: 11px; line-height: 1.4; }
.main.shop .sr-card-price { margin: 4px 0 0; line-height: 1.25; }
.main.shop .sr-card-plabel { display: block; color: #6b7a8c; font-size: 11px; font-weight: normal; }
.main.shop .sr-card-amount { display: block; color: var(--sr-pink); font-size: 12px; font-weight: bold; }
.main.shop .sr-card-amount span { font-size: 20px; }
.main.shop .sr-card-name { margin: 6px 0 0; height: 3em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--sr-navy); font-size: 12px; font-weight: bold; line-height: 1.5; overflow-wrap: anywhere; }
.main.shop .sr-card-shop { margin: 4px 0 0; color: #6b7a8c; font-size: 11px; line-height: 1.5; }
.main.shop .sr-card-more { margin-top: auto; padding-top: 8px; align-self: flex-end; color: var(--sr-navy); font-size: 13px; font-weight: bold; line-height: 1.4; }

/* 画像なし：専用画像を出す（文字「画像なし」は読み上げ用に残す） */
.main.shop .sr-card-fig .sr-noimg,
.main.shop .sr-detail-fig .sr-noimg { position: absolute; inset: 0; display: block; color: transparent; font-size: 12px; overflow: hidden; background: #fff url(../images/sr-noimage.webp) center / cover no-repeat; }

/* 商品名：括弧の部分（（中古品）など）は途中で割らない */
.main.shop .sr-nw { white-space: nowrap; }

/* すべて見る・一覧へのボタン：全幅・中央。件数はボタンの中に小さく（1 行に入らなければ件数だけ 2 行目）。注意書きは注記の大きさで、ボタンとの間を空ける */
.main.shop .sr-more { display: flex; flex-direction: column; align-items: center; margin: 20px auto 0; }
.main.shop .sr-more a.button.full { width: 100%; max-width: none; padding-left: 16px; padding-right: 16px; font-size: clamp(13px, 3.6vw, 15px); }
.main.shop .sr-more-in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 6px; min-width: 0; }
.main.shop .sr-more-label { white-space: nowrap; }
.main.shop .sr-more-count { white-space: nowrap; font-size: 11px; font-weight: normal; }
.main.shop .sr-disclaimer { margin: 10px 0 0; color: var(--color13); font-size: 11px; line-height: 1.6; }
.main.shop .sr-section .sr-disclaimer { margin-top: 16px; text-align: center; }
/* 一覧・詳細：「店舗ページへ戻る」「一覧へ」のボタンと、すぐ下の相談の帯との間 */
.main.shop.sr-detail .part.sr-detail-section,
.main.shop.sr-listpage .part.sr-list-section { padding-bottom: 28px; }

/* 一覧 */
.sr-page .sr-h1 { font-size: 18px; line-height: 1.4; }
.sr-page .sr-lead { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--color14); }
.sr-page .sr-controls { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 16px; }
.sr-page .sr-control { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 0; }
.sr-page .sr-control label { font-size: 12px; font-weight: bold; color: var(--sr-navy); }
.sr-page .sr-control select { width: 100%; max-width: 100%; padding: 10px 8px; font-size: 14px; color: var(--color14); border: 1px solid var(--sr-line); border-radius: 6px; background: #fff; }
.sr-page .sr-count { margin-top: 14px; font-size: 12px; color: var(--color13); }
.sr-page .sr-count + .sr-grid { margin-top: 8px; }
.sr-page .sr-pager { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sr-page .sr-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--sr-line); border-radius: 999px; color: var(--color9); background: #fff; font-size: 14px; }
.sr-page .sr-pager .page-numbers.current { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; font-weight: bold; }
.sr-page .sr-pager .page-numbers.dots { border: 0; min-width: 20px; }
.sr-page .sr-breadcrumb .breadcrumb { flex-wrap: wrap; row-gap: 4px; }

/* 詳細 */
.sr-detail .sr-detail-section { padding-top: 20px; }
.sr-detail .sr-detail-h1 { font-size: 20px; line-height: 1.45; font-weight: bold; color: var(--sr-navy); overflow-wrap: anywhere; }
.sr-detail .sr-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 12px; }
.sr-detail .sr-chip { display: inline-block; padding: 1px 10px; border-radius: 4px; background: var(--sr-navy); color: #fff; line-height: 1.7; }
.sr-detail .sr-chip-sub { background: #edf2f8; color: var(--sr-navy); }
.sr-detail .sr-detail-body { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.sr-detail .sr-detail-fig { position: relative; width: 100%; max-width: 420px; margin: 0 auto; border-radius: 6px; overflow: hidden; background: #edf2f8; aspect-ratio: 1 / 1; }
.sr-detail .sr-detail-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 金額欄：カードと同じ型（帯・枠線なし。囲みは淡い面 1 枚だけ。「買取金額」は灰色の小さな文字、金額はピンクの大きな数字、注意書きは金額の下に注記の大きさ） */
.sr-detail .sr-price { padding: 14px 16px; border: 0; border-radius: 8px; background: #F4F7FB; text-align: left; }
.sr-detail .sr-price-label { display: block; padding: 0; background: none; color: #6b7a8c; font-size: 12px; font-weight: normal; line-height: 1.4; }
.sr-detail .sr-price-num { margin-top: 2px; padding: 0; color: var(--sr-pink); font-weight: bold; font-size: 14px; line-height: 1.2; }
.sr-detail .sr-price-num span { font-size: 32px; line-height: 1.2; }
.sr-detail .sr-price .sr-disclaimer { margin: 8px 0 0; padding: 0; text-align: left; }
.sr-detail .sr-subttl { margin-top: 24px; padding-bottom: 6px; border-bottom: 2px solid var(--sr-navy); font-size: 16px; font-weight: bold; color: var(--sr-navy); }
.sr-detail .sr-detail-main .sr-subttl { margin-top: 20px; }
.sr-detail .sr-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.sr-detail .sr-table th,
.sr-detail .sr-table td { padding: 10px 8px; border-bottom: 1px solid var(--sr-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.sr-detail .sr-table th { width: 32%; background: #edf2f8; color: var(--sr-navy); font-weight: bold; }
.sr-detail .sr-table a { color: var(--color9); text-decoration: underline !important; }
.sr-detail .sr-comment { margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--color14); }
.sr-detail .sr-related { padding-top: 10px; }

@media (min-width: 751px) {
  .main.shop .sr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .main.shop .sr-card-name { font-size: 13px; }
  .main.shop .sr-card-amount span { font-size: 22px; }
  .main.shop .sr-more a.button.full { max-width: 400px; font-size: 15px; }
  .main.shop .sr-disclaimer { font-size: 12px; }
  .sr-page .sr-h1 { font-size: 22px; }
  .sr-page .sr-controls { max-width: 560px; }
  .sr-detail .sr-detail-h1 { font-size: 26px; }
  .sr-detail .sr-detail-body { flex-direction: row; align-items: flex-start; gap: 32px; }
  .sr-detail .sr-detail-fig { flex: 0 0 360px; margin: 0; }
  .sr-detail .sr-detail-main { flex: 1 1 auto; min-width: 0; }
}