/* 楽器の買取屋さん（taste で作り直した画面）。部品はラボル（taste-raboru.css）を借り、色と「いくらになる？」の点の図だけ足す。
   買取サイトの1ページ目。仕事サイトの3社（藍・緑・橙）と見分けられるよう、ワインの赤。白い文字との差は 4.5 以上。 */
.rt.rt-gakki {
  --bg: #f0eeec;
  --accent: #8a1f3d;
  --accent-deep: #5f1229;
  --c2: #f3dfe4;
  --c3: #e6e3e0;
  --c5: #8a1f3d;
}
.rt-gakki .rt-last .rt-cta a:hover { background: #f3dfe4; }
/* 1画面目の「福ちゃんとの違い」の表（QuQuMo と同じ形）。文字は本文の16px以上、線は行の下だけ */
.rt .rt-vs { border-collapse: collapse; width: 100%; max-width: 560px; margin: 24px 0 32px; background: none; border: 0; font-size: var(--s1); }
.rt .rt-vs th, .rt .rt-vs td { text-align: left; padding: 8px 16px 8px 0; border: 0; border-bottom: 1px solid rgba(11, 12, 14, .25); background: none; color: inherit; vertical-align: top; }
.rt .rt-vs tr:first-child th { font-weight: 700; }
.rt .rt-vs td b { color: var(--accent); }
.rt .rt-vs th[scope=row] { white-space: nowrap; }

/* いくらになる？：楽器を選ぶと、公式の事例60件を点で並べる。帯＝真ん中の半分。目盛りは対数（3,000円〜70万円）で、種類を替えても同じ */
.rt-gakki .rt-slot img { object-position: 50% 45%; }
/* 楽器の選択は本文より大きく（小さいと見出しの上の飾りの札に見える） */
.rt-gk .rt-days legend { font-size: var(--s2); font-weight: 700; margin-bottom: 1rem; }
.rt-gk .rt-days span { padding: 12px 20px; font-size: var(--s2); }
.rt-dots { position: relative; height: 112px; margin: 8px 0 0; }
.rt-dots__band { position: absolute; top: 0; height: 72px; left: var(--a); width: calc(var(--b) - var(--a)); background: var(--accent-deep); transition: left .5s var(--ease), width .5s var(--ease); }
/* 点は4段にずらして重なりを減らす（--y は 0〜3） */
.rt-dots [data-gk-dots] i { position: absolute; top: calc(8px + var(--y, 0) * 16px); left: var(--x); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent-ink); opacity: .85; transition: left .5s var(--ease); }
.rt-dots__tick { position: absolute; top: 88px; left: var(--x); transform: translateX(-50%); font-size: var(--s1); white-space: nowrap; }
.rt-dots__tick::before { content: ""; position: absolute; left: 50%; top: -12px; width: 2px; height: 8px; background: var(--accent-ink); }
.rt-recent { list-style: none; padding: 0; display: grid; gap: 8px; }
.rt-recent li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 12px 16px; background: var(--accent-deep); }
.rt-recent b { font-variant-numeric: tabular-nums; }
.rt-recent span { grid-column: 1 / 3; font-size: var(--s1); opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .rt-dots__band, .rt-dots [data-gk-dots] i { transition: none; }
}
@media (max-width: 760px) {
  /* スマホ：7つの楽器が3段に収まるよう、札の内側だけ詰める（文字を小さくすると見出しの上の札に見える） */
  .rt-gk .rt-days span { padding: 8px 12px; }
  /* 「3万〜11.9万円」を1行に収める */
  .rt-gk .rt-get b { font-size: var(--s4); }
}