/* サンシスコン（taste で作った画面）。部品はラボル（taste-raboru.css）を借り、色・「6か月でいくら？」の仕掛け・払い方の棒だけ足す。
   通信サイト（mobile）とほかの taste ページ（ラボルの青・キミスカの紺）を見分けられるよう、深い青緑1色。
   青緑 #0d5f56 と白の文字の差は 7.6:1。 */
.rt.rt-sunsyscon {
  --bg: #eef3f2;
  --accent: #0d5f56;
  --accent-deep: #08433d;
  --c2: #d9ebe8;
  --c3: #e3e9e8;
  --c5: #0d5f56;
}
.rt-sunsyscon .rt-last .rt-cta a:hover { background: #d9ebe8; }
.rt-sunsyscon .rt-slot img { object-position: 50% 50%; }

/* 1画面目の「6か月で、いくら払う？」。白い面1枚。選ぶたびに大きな数字が変わる */
.rt-pf { max-width: 600px; margin: 24px 0 32px; padding: 24px; background: #fff; }
.rt .rt-pf__q { font-weight: 700; font-size: var(--s2); line-height: 1.4; margin-bottom: 16px; }
.rt-pf__list { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rt-pf__list label { margin: 0; cursor: pointer; }
.rt-pf__list input { position: absolute; opacity: 0; }
.rt-pf__list span { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; background: var(--c2); transition: background-color .18s, color .18s, transform .14s var(--ease); }
.rt-pf__list input:checked + span { background: var(--accent); color: #fff; font-weight: 700; }
.rt-pf__list input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.rt-pf__list span:active { transform: translateY(2px); }
.rt-pf__out { margin: 24px 0 16px; }
.rt .rt-pf__big { font-size: var(--s2); font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.rt-pf__big b { display: inline-block; margin: 0 4px; font-family: var(--font-display); font-weight: 400; font-size: var(--s3); color: var(--accent); font-variant-numeric: tabular-nums; }
.rt-pf__big b.is-bump { animation: rt-ss-bump .35s var(--ease); }
@keyframes rt-ss-bump { from { transform: scale(1.12); } to { transform: none; } }
.rt .rt-pf__src { margin-top: 16px; font-size: var(--s1); }
.rt-sunsyscon .rt-side p, .rt-sunsyscon .rt-fit li { max-width: 60ch; }

/* データ容量の select と支払い方法のラジオを1行に（狭い画面では折り返す） */
.rt-calc__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.rt-calc__row > label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.rt .rt-calc__row select { height: 48px; min-width: 7em; padding: 0 16px; margin: 0; font: 700 var(--s1) var(--font-text); color: var(--ink); background: var(--c2); border: 0; border-radius: 0; }
.rt .rt-calc__row select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 支払い方法で、6か月に約8,000円違う：払い方ごとの合計を横の棒で。棒は見えたときに伸びる */
.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; }

@media (prefers-reduced-motion: reduce) {
  .rt-pf__big b.is-bump { animation: none; }
  .rt-pf__list span { transition: none; }
  .rt-js .rt-bars i { transition: none; }
}
@media (max-width: 760px) {
  .rt-pf { padding: 16px; }
}