/* オーディオの買取屋さん（taste で作り直した画面）。部品はラボル（taste-raboru.css）を借り、色・県の答え・品目の棒だけ足す。
   楽器の買取屋さん（ワインの赤）と見分けられるよう、深い青緑。白い文字との差は 7.6:1。 */
.rt.rt-audio {
  --bg: #eef1f0;
  --accent: #0f5c55;
  --accent-deep: #0a403b;
  --c2: #dcece9;
  --c3: #e4e8e7;
  --c5: #0f5c55;
}
.rt-audio .rt-last .rt-cta a:hover { background: #dcece9; }
.rt-audio .rt-slot img { object-position: 50% 30%; }

/* 1画面目の「あなたの県に、来てもらえる？」。白い面1枚。選ぶ前は案内、選ぶと答えと最近の出張の例 */
.rt-area { max-width: 560px; margin: 24px 0 32px; padding: 24px; background: #fff; }
.rt-area__q { display: block; font-family: var(--font-display); font-size: var(--s2); line-height: 1.4; margin-bottom: 16px; }
.rt-area__sel { display: block; width: 100%; min-height: 48px; padding: 8px 16px; font: inherit; font-size: var(--s2); color: var(--ink); background: var(--c2); border: 0; border-radius: 0; cursor: pointer; }
.rt-area__sel:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rt-area__out { margin-top: 16px; }
.rt-area__out p + p, .rt-area__out p + ul, .rt-area__out ul + p { margin-top: 8px; }
.rt-area__out b { color: var(--accent); }
.rt-area__ans { font-family: var(--font-display); font-size: var(--s2); line-height: 1.4; }
.rt-area__ans--no { color: #8a2a12; }
.rt-area__ex { list-style: none; padding: 0; display: grid; gap: 8px; }
.rt-area__ex li { padding: 8px 16px; background: var(--c2); }
.rt-area__ex span { display: block; font-size: var(--s1); }
.rt-area__niigo { margin-top: 16px; }
.rt .rt-cta--sub a { font-size: var(--s1); padding: 16px 48px 16px 24px; }
.rt-area__out.is-new { animation: rt-au-in .4s var(--ease); }
@keyframes rt-au-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[data-ad-gate].is-off { display: none; }

/* どんな物が売れている？：公式の買取実績を品目ごとに横の棒で。棒は見えたときに伸びる */
.rt-bars { list-style: none; padding: 0; display: grid; gap: 16px; }
.rt-bars li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; }
.rt-bars b { font-variant-numeric: tabular-nums; }
.rt-bars i { grid-column: 1 / 3; display: block; width: var(--w); height: 16px; margin-top: 4px; background: var(--accent-ink); transform-origin: left; }
.rt-js .rt-bars i { transform: scaleX(0); transition: transform .9s var(--ease) calc(var(--i) * 80ms); }
.rt-js .is-in .rt-bars i { transform: none; }

/* ニーゴ・リユースとの違いの表（楽器の福ちゃんとの表と同じ形）。文字は本文の16px以上、線は行の下だけ */
.rt .rt-vs { grid-column: 1 / 9; border-collapse: collapse; width: 100%; max-width: 640px; margin: 0 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); }
/* 違いの表と2つの面の出典は、面の下に横いっぱいで（ラボルの格子では細い列に落ちる） */
.rt-audio #fit > .rt-src { grid-column: 1 / 13; margin-top: 16px; }
@media (max-width: 760px) {
  .rt .rt-vs { grid-column: 1 / 13; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-js .rt-bars i { transition: none; }
  .rt-area__out.is-new { animation: none; }
}
@media (max-width: 760px) {
  .rt-area { padding: 16px; }
}