/* リマケ専用チャットLP（/lp01/ta_rm_chat/）追加スタイル — ベースは area.css（al- デザインシステム） */

/* 「こんな方こそ、ご相談ください」チェックリスト */
.rm-check { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.rm-check li { position: relative; padding: 10px 12px 10px 40px; background: #FFFFFF; border: 1px solid var(--al-line); border-radius: 4px; font-size: 16px; line-height: 1.5; text-align: left; }
.rm-check li::before { content: "\2713"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--al-green); font-weight: 900; font-size: 19px; }
.rm-check b { color: var(--al-green); }

/* 導入帯：rm_chatでは直前セクション（FV／最終CTA）が下余白を持たないため上余白を足す
   （area.css の .al-webcta は padding-top:0。地域LPには影響させずここで上書き） */
.al-webcta { padding-top: 22px; }

/* セクション小見出し（現行リマケLPの p3-sec-sub 相当） */
.rm-sec-sub { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--al-orange); }
.rm-num { font-family: var(--al-font-num); font-size: 118%; font-weight: 700; position: relative; top: 1px; }

/* 先延ばしが損になる3つの理由（現行LPの p3-delay 相当を al- トーンで再構成） */
.rm-delay { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.rm-delay__card { background: #FFFFFF; border: 1px solid var(--al-line); border-left: 4px solid var(--al-orange); border-radius: 4px; padding: 14px 14px 12px; text-align: left; }
.rm-delay__label { display: inline-block; background: var(--al-orange); color: #FFFFFF; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 12px; margin-bottom: 8px; }
.rm-delay__title { font-size: 17px; font-weight: 900; color: var(--al-green); line-height: 1.4; margin-bottom: 6px; }
.rm-delay__body { font-size: 14px; line-height: 1.7; color: var(--al-text-2); }

/* お客様の声（現行LPの p3-voice のSPレイアウトを踏襲） */
.rm-voice { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.rm-voice__card { display: grid; grid-template-columns: 90px 1fr; gap: 10px; background: #FFFFFF; border: 1px solid var(--al-line); border-left: 4px solid var(--al-orange); border-radius: 4px; padding: 14px; text-align: left; }
.rm-voice__img { width: 90px; height: 90px; object-fit: cover; border-radius: 6px; }
.rm-voice__tag { display: inline-block; background: var(--al-orange); color: #FFFFFF; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 12px; margin-bottom: 6px; }
.rm-voice__text { font-size: 15px; font-weight: 800; color: var(--al-brown); line-height: 1.6; }
.rm-voice__sub { grid-column: 1 / -1; font-size: 13px; color: var(--al-text-3); line-height: 1.7; margin: 2px 0 0; }
/* 2026-10-14：PR #119 AI テスト。「トントン拍／子」「時／間」のように言葉の途中で折り返していた → 文節の切れ目（index.php の <wbr>）でだけ折り返す。入りきらない語は overflow-wrap で割る */
.rm-voice__text, .rm-voice__sub, .rm-delay__body, .rm-check--safety li { word-break: keep-all; overflow-wrap: anywhere; }   /* 先延ばしの 3 つの理由も同じ（AI テスト 5 回目） */

/* 5つの安心（rm-check流用・左寄せの太字見出し＋ダッシュ説明） */
.rm-check--safety li { font-size: 15px; }
.rm-check--safety b { font-size: 16px; }

@media (min-width: 641px) {
  .rm-check { width: 560px; margin: 0 auto 16px; }
  .rm-check li { font-size: 16px; }
  .rm-check--safety { width: 640px; }
  .rm-delay { flex-direction: row; gap: 14px; width: 100%; max-width: 960px; margin: 0 auto; }
  .rm-delay__card { flex: 1; padding: 18px 18px 16px; }
  .rm-delay__title { font-size: 18px; min-height: 3em; }
  .rm-voice { width: 100%; max-width: 800px; margin: 0 auto; }
  .rm-voice__card { grid-template-columns: 120px 1fr; gap: 16px; padding: 18px; }
  .rm-voice__img { width: 120px; height: 120px; }
  .rm-voice__text { font-size: 17px; }
  .rm-voice__sub { font-size: 14px; }
}

/* ===== PR #14 の共通修正の移植（area.css がPR #14マージで追いつくまでの前倒し。同値なので重複しても無害） =====
   対象：電話番号の両端赤・中央黒（最終CTA・モーダル）／PCヘッダー電話バナーのta_chat準拠／Step1エラー文言のスペース事前確保
   地図・ステーション・専用フォームはリマケLPに関係ないため移植しない */
.al-final__digits { color: var(--al-text-2); }
.al-final__digits b { font-weight: 700; color: var(--al-red); }
.al-telmodal__digits { color: var(--al-text-2); }
.al-telmodal__digits b { font-weight: 700; color: var(--al-red); }
.al-form__hint { display: block; visibility: hidden; margin: 6px 0 0; font-size: 12px; line-height: 1; min-height: 12px; }
.al-form__hint.is-on { visibility: visible; }
@media (min-width: 641px) {
  /* ta_chat の .header_telbanner に合わせる（9px/26px黒一色/10px・左揃え・ロゴ30px） */
  .al-header__tel { align-items: flex-start; gap: 2px; }
  .al-header__tel-cap { font-size: 9px; line-height: 0.8; }
  .al-header__tel-row { gap: 5px; }
  .al-header__tel-row img { width: 30px; margin-bottom: -3px; }
  .al-header__tel-num { font-weight: 700; color: var(--al-text-2); background: none; }   /* 2026-10-01：文字サイズは area.css（30px）に合わせる。26px の上書きでヘッダーが地域より 3px 低く、ヒーローの天地がずれていた */
  .al-header__tel-hours { font-size: 10px; line-height: 1; }
  .al-form__hint { margin: -6px 0; }   /* 親flexのgap(14px)を相殺 */
}

/* 2026-10-14：写真・フォーム見出しを押すと 3 択へ（JS が .al-tap-to-form を付ける）。押せることを指カーソルで示す */
.al-tap-to-form { cursor: pointer; -webkit-tap-highlight-color: rgba(246, 128, 20, .15); }

/* 2026-10-14：SP（360px 以下）で金額の「円」・ラベルの「（年商1億円超）」が 1 文字だけ次の行に落ちていた。
   金額は折り返さない（index.php の .al-nowrap）ので、金額の列を中身の幅にしてラベル側を狭める */
@media (max-width: 640px) {
  .al-price__row { grid-template-columns: minmax(0, 1fr) auto; }
  .al-price__row--head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 2026-10-14：PR #119 AI テスト 3 回目。幅 374px 以下で実績の「44万件突破※」が「44／万件突破※」と割れる → 地域 LP（area.css の body[data-area]）と同じく狭い幅だけ文字を縮めて 1 行に */
@media (max-width: 374px) {
  .al-metric { padding-left: 2px; padding-right: 2px; }
  .al-metric__label { font-size: 11.5px; white-space: nowrap; letter-spacing: -0.02em; }
  .al-metric__value { font-size: 21px; white-space: nowrap; }
  .al-metric__unit { font-size: 11.5px; }
  .al-metric__note { font-size: 11px; }   /* 「2022年4月時点」を 1 行に（320px で「時／点」と割れていた） */
}