/* カンタン概算見積もりシミュレーター
   — エリアページの一括見積もり(roof-repair-diagnosis)のブルーのデザインに統一。
   ティール #42A9BB 基調 / 選択肢はティールグラデ / オレンジ #F37E00 ボタン / 青見出し #2c5aa0 / FAアイコン不使用。 */

.yane-section--simulator { margin-bottom: 40px; }

.rs-wrap {
  font-family: inherit; color: #333; background: #fff;
  border: 1px solid #42A9BB; border-radius: 10px; padding: 0 20px 24px;
}
.rs-wrap > * { box-sizing: border-box; }
/* CTA・戻る・結果見出しのFAアイコンは使わない(選択肢のアイコンは表示する) */
.rs-back > i, .rs-estimate__recap-title > i,
.rs-estimate__note > i, .rs-mitsumori-cta > i { display: none; }

/* タイトル帯(一括見積もりの form-title と同じ薄ティールのグラデ＋同じ文字組み) */
.rs-titlebar {
  background: linear-gradient(to bottom, #e8f6f8, #d4eff3);
  margin: 0 -20px 12px; padding: 14px 20px; border-radius: 9px 9px 0 0;
  text-align: center;
}
.rs-title-text {
  display: inline-block; font-weight: bold; color: #333; line-height: 1.5;
  -webkit-text-stroke: 5px #fff; paint-order: stroke fill;
}
.rs-title-text .t-strong { font-size: clamp(20px, 5vw, 28px); }
.rs-title-text .t-accent { font-size: clamp(26px, 7vw, 36px); }
.rs-title-text .t-sub    { font-size: clamp(15px, 4vw, 20px); }
.rs-title-text .t-orange { color: #F37E00; }
.rs-title-text .t-marker { background: linear-gradient(transparent 55%, #ffff6f 55%); padding: 0 4px; }
.rs-subhead { text-align: center; color: #666; font-size: 13.5px; margin: 0 0 18px; }

/* プログレスバー */
.rs-progress { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 22px; }
.rs-progress__step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.rs-progress__circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e0e0e0; color: #999; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s, transform .3s;
}
.rs-progress__label { font-size: 10.5px; color: #999; white-space: nowrap; transition: color .3s; }
.rs-progress__line { flex: 1; height: 3px; background: #e0e0e0; min-width: 10px; max-width: 56px; margin-top: 15px; transition: background .3s; }
.rs-progress__step.is-active .rs-progress__circle { background: #42A9BB; color: #fff; transform: scale(1.1); }
.rs-progress__step.is-active .rs-progress__label { color: #369fb1; font-weight: 700; }
.rs-progress__step.is-done .rs-progress__circle { background: #42A9BB; color: #fff; font-size: 0; }
.rs-progress__step.is-done .rs-progress__circle::before { content: '✓'; font-size: 15px; }
.rs-progress__step.is-done + .rs-progress__line { background: linear-gradient(90deg, #42A9BB, #369fb1); }

/* ステップ */
.rs-step { display: none; animation: rsFadeIn .3s ease; }
.rs-step.is-active { display: block; }
@keyframes rsFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.rs-step__title { font-size: clamp(18px, 3vw, 22px); color: #2c5aa0; font-weight: bold; text-align: center; margin: 0 0 8px; line-height: 1.4; }
.rs-step__sub { text-align: center; color: #666; font-size: 14px; margin: 0 0 18px; }

/* 選択カード(一括見積もりの .option と同じ。選択でティールグラデ) */
.rs-cards { display: grid; gap: 12px; margin-bottom: 16px; }
.rs-cards--3col { grid-template-columns: repeat(3, 1fr); }
.rs-cards--2col { grid-template-columns: repeat(2, 1fr); }
.rs-card {
  padding: 15px 12px; border: 2px solid #e0e0e0; border-radius: 12px; background: #fff;
  cursor: pointer; text-align: center; font-family: inherit; font-size: 14px; font-weight: 600; color: #333; line-height: 1.4;
  transition: border-color .2s, transform .15s, box-shadow .2s, background .2s, color .2s;
}
.rs-card span { display: block; }
.rs-card > i { display: block; font-size: 30px; color: #42A9BB; margin-bottom: 8px; transition: transform .2s, color .2s; }
.rs-card:hover > i { transform: scale(1.1); }
.rs-card.is-selected > i { color: #fff; }
.rs-card:hover { border-color: #42A9BB; transform: translateY(-2px); box-shadow: 0 3px 10px rgba(66,169,187,.15); }
.rs-card.is-selected {
  border-color: #42A9BB; background: linear-gradient(135deg, #42A9BB, #369fb1); color: #fff;
  transform: translateY(-1px) scale(1.02); box-shadow: 0 3px 10px rgba(66,169,187,.25);
}

/* 戻る */
.rs-back { display: inline-block; background: none; border: none; color: #6c757d; font-size: 13px; cursor: pointer; padding: 4px 2px; font-family: inherit; }
.rs-back:hover { color: #42A9BB; text-decoration: underline; }

/* 概算結果 */
.rs-estimate { display: grid; gap: 14px; margin-bottom: 20px; }
@media (min-width: 640px) { .rs-estimate { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.rs-estimate__recap, .rs-estimate__figures { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 12px; padding: 18px; }
.rs-estimate__recap-title { font-size: 13px; font-weight: 700; color: #2c5aa0; margin: 0 0 10px; }
.rs-estimate__recap-list { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.6; }
.rs-estimate__recap-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e0e0e0; }
.rs-estimate__recap-list li:last-child { border-bottom: none; padding-bottom: 0; }
.rs-estimate__k { color: #888; flex-shrink: 0; }
.rs-estimate__v { font-weight: 700; color: #333; text-align: right; }
.rs-estimate__label { font-size: 13px; color: #666; margin: 0 0 12px; font-weight: 700; }
.rs-estimate__dual { display: flex; flex-direction: column; gap: 10px; }
.rs-estimate__dual-row { display: flex; align-items: center; gap: 10px; }
.rs-estimate__dual-badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 4px; white-space: nowrap; color: #fff; }
.rs-estimate__dual-badge--partial { background: #42A9BB; }
.rs-estimate__dual-badge--extensive { background: #F37E00; }
.rs-estimate__range { font-size: clamp(17px, 3vw, 22px); font-weight: 800; color: #2c5aa0; margin: 0; }
.rs-estimate__visit { font-size: 13px; color: #d8161e; margin: 12px 0 0; }
.rs-estimate__visit > i { color: #d8161e; margin-right: 4px; }
.rs-estimate__visit > strong { color: #d8161e; font-weight: 700; }
.rs-estimate__note { font-size: 12px; color: #777; margin: 10px 0 0; line-height: 1.6; }

/* CTAボタン直下の下矢印(ボタン→画像への視線誘導) */
.rs-cta-arrow { text-align: center; color: #F37E00; font-size: 22px; line-height: 1; margin: -2px 0 8px; }

/* キャッシュバックのキャンペーンバナー(CTAボタン＋下矢印の下) */
.rs-cashback { margin: 0 0 12px; text-align: center; }
.rs-cashback img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }

/* キャンペーンの注意書き(赤系ボックス) */
.rs-cashback-note {
  font-size: 12.5px; line-height: 1.7; color: #c0282d;
  background: #fdeaea; border: 1px solid #f3c0c2; border-radius: 6px;
  padding: 10px 12px; margin: 0 0 12px;
}

/* /mitsumori への誘導CTA(一括見積もりの btn-submit-orange と同じオレンジ) */
.rs-form-lead { text-align: center; margin: 4px 0 12px; }
.rs-form-lead__title { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: #2c5aa0; }
.rs-form-lead__text { font-size: 13px; color: #666; margin: 0; line-height: 1.7; }
.rs-mitsumori-cta {
  display: block; width: auto; max-width: 360px; text-align: center; background: #F37E00; color: #fff !important;
  font-weight: 700; font-size: 16px; text-decoration: none; padding: 15px 24px; border-radius: 8px;
  margin: 0 auto 12px; box-shadow: 0 3px 10px rgba(243,126,0,.25); transition: background .15s;
}
.rs-mitsumori-cta:hover { background: #E06D00; text-decoration: none; }

@media (max-width: 600px) {
  .rs-wrap { padding: 0 14px 18px; }
  .rs-titlebar { margin: 0 -14px 10px; }
  .rs-cards--3col { grid-template-columns: repeat(2, 1fr); }
  .rs-estimate__dual-row { flex-wrap: wrap; }
  /* プログレスバーを中央に詰める(横に広がりすぎないよう小さく) */
  .rs-progress { margin-bottom: 18px; }
  .rs-progress__step { gap: 4px; }
  .rs-progress__circle { width: 25px; height: 25px; font-size: 11px; }
  .rs-progress__step.is-done .rs-progress__circle::before { font-size: 12px; }
  .rs-progress__label { font-size: 9px; }
  .rs-progress__line { min-width: 5px; max-width: 22px; margin-top: 12px; }
}