/* =============================================================
   地域記事 FV の訴求「交通事故にあったら・・・」 (tmp/region-fv-appeal.php)
   Figma: 事故治療ナビ 202609 10037:19399 (SP 351px) / 10036:30086 (PC 672px)
   ============================================================= */
.p-rfv,
.p-rfv * {
  box-sizing: border-box;
}
.p-rfv {
  position: relative;
  /* 親 (.p-clinic-fv) が align-items:center の flex なので幅を明示する (診断フォームと同じ) */
  width: 100%;
  margin: 16px 0 24px;
  padding: 0 0 15px;
  overflow: hidden;
  background: #fffeed;
  color: #2a2929;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.322;
}

/* --- 見出し帯 --- */
.p-rfv__head {
  padding: 8px 7px;
  background: #0584dc;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.322;
  text-align: center;
  /* Figma: 黒の外側ストローク0.5px。1pxの中央線の内側半分を塗りで隠す */
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
}

/* --- ①②③ --- */
.p-rfv__steps {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 4px 0 9px 6px;
  list-style: none;
}
.p-rfv__step {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  list-style: none;
}
.p-rfv__step::before,
.p-rfv__step::marker {
  content: none;
}
.p-rfv__step.is-1 {
  height: 34px;
}
.p-rfv__step.is-2 {
  height: 36px;
}
.p-rfv__step.is-3 {
  height: 29px;
  gap: 0;
}
.p-rfv__num {
  font-weight: 700;
  font-size: 22px;
}
.p-rfv__txt {
  font-weight: 700;
  font-size: 16px;
}
/* 強調語 + 黄色マーカー (高さ5px・文字の下端から1px上) */
.p-rfv__em {
  background: linear-gradient(#fff338, #fff338) no-repeat 0 calc(100% - 1px) / 100% 5px;
  color: #dc8a05;
  font-weight: 900;
  font-size: 20px;
}
.p-rfv__step.is-3 .p-rfv__em {
  font-size: 22px;
}
.p-rfv__step.is-3 .p-rfv__em .is-sm {
  font-size: 14px;
}
.p-rfv__txt .is-pc {
  display: none;
}

/* --- オペレーター写真 (SPのみ。楕円 62x85 / 帯の下から8px・右端から3px) --- */
.p-rfv__photo {
  position: absolute;
  top: 46px;
  right: 3px;
  display: block;
  width: 62px;
  height: 85px;
}

/* 幅370px以下の端末では①②の文言と写真が重なるため写真を出さない (デザインは375px幅) */
@media (max-width: 370px) {
  .p-rfv__photo {
    display: none;
  }
}

/* 幅340px以下では③「最大20,000円贈呈！」が右端で切れるため、①②③の文字と左余白を少し詰める
   (320px幅で③の行が約304pxに対し、使える幅は約298px) */
@media (max-width: 340px) {
  .p-rfv__steps {
    padding-left: 4px;
  }
  .p-rfv__num {
    font-size: 20px;
  }
  .p-rfv__txt {
    font-size: 15px;
  }
  .p-rfv__em {
    font-size: 18px;
  }
  .p-rfv__step.is-3 .p-rfv__em {
    font-size: 20px;
  }
  .p-rfv__step.is-3 .p-rfv__em .is-sm {
    font-size: 13px;
  }
}

/* --- 電話 / LINE ボタン --- */
.p-rfv__btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 13px;
}
.p-rfv__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 6px 0;
  border-radius: 10px;
  text-decoration: none;
}
.p-rfv__btn:hover {
  opacity: 0.85;
  text-decoration: none;
}
.p-rfv__btn--tel {
  background: linear-gradient(to top, #ff4000 37.5%, rgba(255, 81, 0, 0.6));
  box-shadow: 0 4px 0 #a30303;
}
.p-rfv__btn--line {
  background: linear-gradient(to top, #00b91f 37.5%, rgba(57, 255, 76, 0.6));
  box-shadow: 0 4px 0 #009218;
}
.p-rfv__btn-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
}
.p-rfv__btn--tel .p-rfv__btn-ico {
  height: 39px;
}
.p-rfv__btn-ico img {
  display: block;
  max-width: none;
}
.p-rfv__btn-body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 218px;
}
.p-rfv__btn-label {
  display: block;
  width: 100%;
  padding: 4px 6px;
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  line-height: 1.322;
  text-align: center;
  white-space: nowrap;
}
.p-rfv__btn--tel .p-rfv__btn-label {
  color: #ff4001;
  font-size: 14px;
}
.p-rfv__btn--tel .p-rfv__btn-label .is-sm {
  font-size: 10px;
}
.p-rfv__btn--line .p-rfv__btn-label {
  color: #009218;
  font-size: 16px;
}
/* 「――　24時間対応・無料　――」 (Figma は全角スペースの取り消し線。両側の線は各約48px) */
.p-rfv__btn-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.322;
  white-space: nowrap;
}
.p-rfv__btn-sub::before,
.p-rfv__btn-sub::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: #fff;
}

/* --- PC: 帯の下で ①②③ (左) と ボタン (右 293px) を横並び --- */
@media (min-width: 769px) {
  .p-rfv {
    display: grid;
    grid-template-columns: auto 293px;
    grid-template-areas:
      "head head"
      "steps btns";
    justify-content: space-between;
    column-gap: 8px;
    padding: 0 8px 8px;
  }
  .p-rfv__head {
    grid-area: head;
    margin: 0 -8px;
    padding: 6px 30px;
    font-size: 20px;
  }
  .p-rfv__steps {
    grid-area: steps;
    align-self: start;
    padding: 14px 0 9px;
  }
  .p-rfv__step.is-3 {
    height: 32px;
  }
  .p-rfv__num {
    font-size: 24px;
  }
  .p-rfv__step.is-1 .p-rfv__num {
    font-size: 26px;
  }
  .p-rfv__txt {
    font-size: 15px;
  }
  .p-rfv__em,
  .p-rfv__step.is-3 .p-rfv__em {
    font-size: 19px;
  }
  .p-rfv__step.is-3 .p-rfv__em .is-sm {
    font-size: 11px;
  }
  .p-rfv__txt .is-pc {
    display: inline;
  }
  .p-rfv__photo {
    display: none;
  }
  .p-rfv__btns {
    grid-area: btns;
    align-self: end;
    padding: 0 1px;
  }
}