/* Meta広告用チャットLP（/lp01/ta_meta_chat/<slug>/）追加スタイル — ベースは area.css＋rm.css。専用セクション分のみ */

/* FV圧縮（SPのみ・Metaのアプリ内ブラウザ前提）：初期表示に「お申し込み方法（電話／Web の 2 カード）」を収める
   - ヒーロー写真を一回り小さく（230→200px）
   - 旧 Step1 用の圧縮（導入帯・黄色タグ・STEP バー）と電話 1 行導線（.meta-telline）は、案 A で上流から無くなったため削除（2026-09-18） */
@media (max-width: 640px) {
  .meta-lp .al-hero__photo img { max-width: 200px; }
  .meta-lp .al-hero__content { padding-bottom: 6px; }
}

/* 余白の圧縮（SP・9/7 ユーザー指示「無駄スペースを削除」）：セクション上下 24→16px、電話カード周り、注記の余白 */
@media (max-width: 640px) {
  .meta-lp .al-sec { padding: 16px 20px; }
  .meta-lp .al-sec__note { margin-bottom: 0; }
  .meta-lp .al-sec__inner { gap: 10px; }
}

/* 実績タイルは上流（.al-metrics・area.css）で 2 カード直下に置かれる（2026-09-18）。meta 側の移動 CSS は不要になった */

/* 業種別の紹介実績（meta_gyoshu）：rm-delay / rm-voice と同じカード作法（白地・左オレンジ罫・角丸4px） */
.meta-ind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-bottom: 12px; }
.meta-ind__card { display: flex; flex-direction: column; gap: 4px; background: #FFFFFF; border: 1px solid var(--al-line); border-left: 4px solid var(--al-orange); border-radius: 4px; padding: 10px 10px 10px 12px; text-align: left; }
.meta-ind__name { font-size: 15px; font-weight: 900; color: var(--al-green); line-height: 1.3; }
.meta-ind__desc { font-size: 12px; line-height: 1.6; color: var(--al-text-2); }

@media (min-width: 641px) {
  .meta-ind { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 960px; margin: 0 auto 14px; }
  .meta-ind--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }   /* 6 項目版（meta_iryou・2026-09-14）：5 列だと 2 段目に 1 枚だけ残るので 3×2 */
  .meta-ind__card { padding: 14px 12px 12px 14px; }
  .meta-ind__name { font-size: 16px; }
  .meta-ind__desc { font-size: 13px; }
}

/* ===== 2026-09-08 ヘッダー満足度バッジ（定数＋asof） ===== */
.al-header .al-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.al-header__sat { margin: 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 3px; line-height: 1.2; color: var(--al-text-2); }
.al-header__sat-label, .al-header__sat-tail { font-size: 11px; font-weight: 700; }
.al-header__sat-num { font-family: var(--al-font-tel); font-size: 20px; font-weight: 900; color: var(--al-red); line-height: 1; }
.al-header__sat-num small { font-size: 12px; font-weight: 900; }
.al-header__sat-sup { font-size: 9px; font-weight: 400; color: #666; vertical-align: top; margin: 0 1px; }
.al-header__sat-note { font-size: 9px; font-weight: 400; color: #666; line-height: 1.2; }
/* 注記はヒーロー写真の直下（初期表示内・強調表示と同一画面）。打消し表示の位置要件のため下部欄外には置かない */
.al-hero__satnote { margin: 2px 14px 0; font-size: 9px; line-height: 1.2; color: #666; text-align: right; }
@media (min-width: 641px) {
  .al-header .al-inner { flex-direction: row; justify-content: space-between; gap: 16px; }
  .al-header__sat { flex-direction: column; align-items: flex-start; gap: 0; margin-right: auto; margin-left: 16px; }
  .al-hero__satnote { text-align: left; margin: 0 0 4px; }
}
/* ===== 2026-09-09 公開前レビュー対応 ===== */
/* 禁則処理：Chrome の既定（auto）は「ー」や小書き仮名を行頭に許す。「良心的なサ／ービス」（PC・相場の読み方）の再発防止 */
.meta-lp { line-break: strict; }
/* FV「税理士紹介のパイオニア 31年の信頼と実績」：360〜375px で「パイオニ／ア」「実／績」と1文字行落ちしていた。
   語の途中で折らず、収まらないときは「31年の信頼と実績」ごと2行目へ */
@media (max-width: 375px) {
  .meta-lp .al-hero__pioneer { flex-wrap: wrap; row-gap: 0; }
  .meta-lp .al-hero__pioneer-label, .meta-lp .al-hero__pioneer-tail { white-space: nowrap; }
  .meta-lp .al-hero__pioneer-label { font-size: 14px; }
  .meta-lp .al-hero__pioneer-tail { font-size: 17px; }
}

/* ===== 2026-09-14 PC のヒーロー写真が右にずれる不具合 =====
   area.css は .al-hero__content{flex-grow:1} × .al-hero__title--pc{white-space:nowrap} × .al-hero__photo{flex-shrink:0}。
   見出しが長い訴求（gyoshu/setsuritsu/iryou/kensetsu）では本文ブロックの最小幅が 560px を超え、写真 400px が枠（960px）の外へ
   押し出されて .al-hero{overflow:hidden} で切れていた（1280px で医療は +294px・2 人が画面外）。
   本文ブロックを「枠 960 − 写真 400 = 560px」に固定し、見出しは variants.py の <br> で意図した位置で 2 行にする。
   写真の位置は /lp01/ta_chat/（枠の右端に写真の右端）と同じになる */
@media (min-width: 641px) {
  /* 2026-10-02 三代川さん指摘：flex:1 1 0 だと本文ブロックが枠いっぱいに伸び、文字の右に最大 130px の空きができて写真と離れる。
     地域・リマケと同じく文字の幅に縮め（0 1 auto）、文字と写真をまとめて中央に置く（間は area.css §24 の gap 48px） */
  .meta-lp .al-hero__content { flex: 0 1 auto; min-width: 0; }
  .meta-lp .al-hero__title--pc { white-space: normal; }
  .meta-lp .al-hero__title--pc .al-nowrap { white-space: nowrap; }
}

/* 2026-10-15 PR #131 AI テスト：
   ・320px でフォーム下の電話番号が「0120-610-／386」と割れる → 番号は 1 行のまま、狭い画面だけ一回り小さく
   ・PC の見直し事例で「防水・塗装工事・埼玉県（年商 約1.8億円）」がカードからはみ出す → 業種・地域は文節ごとに折り返す（variants.py の kp）*/
.meta-lp .al-inq-tel__digits { white-space: nowrap; }
@media (max-width: 359px) { .meta-lp .al-inq-tel__digits { font-size: 28px; } }
@media (min-width: 641px) { .meta-lp .al-case__who { white-space: normal; } }