/* ===== 記事ページ スマホ固定フッターバナー 20261024 ===== */
/* 承認（2026-10-24 大浦さん）：Image2.5 の方向決め3案から B「人がいる」＋ボタンにアイコン。
   帯＝生成り #F9F3F0（承認画像の実測）・上に 1px #DDDDDD・高さ 60px。左端に町人の線画（元イラスト「全体戦略」を切り出し・白い円の上・帯の上にはみ出す）。
   見出し＝明朝（.serif と同じ書体）「Web集客の」黒＋「無料相談」朱赤。添え書き＝ゴシック 10px グレー。
   ボタン＝標準CTAのピル（主：朱赤地に白／副：白地に朱赤の枠と文字）。アイコンは Lucide（message-circle／award）。
   実装での調整：承認画像はボタン2つが横並びだが、SP 375〜430px では町人＋見出し＋2ボタンが横に収まらない（375 で見出しの幅が 40px 不足）ため、
   ボタンは右端に**縦2段**（各 26px・間 4px）で置く。見出し・添え書き・ボタンの文言と色は承認どおり。
   出す条件は mg-footer-banner.js（SP 幅・25%スクロール・フォームが見えたら隠す・拡大表示中は隠す）。767px より広い画面では出さない。
   2026-10-24 本番反映後の調整：全ページに出す（スマホの旧フロートバナーは隠す）／見出しとボタンを近づける／隠すときに町人の頭が残らないようにする。 */
.mg-fb {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;   /* 見出し→ボタン。2026-10-24 大浦さん「左右の余白をもう少し」→ 候補A〜Dから C（22／22）。375px で文字が切れない上限 */
  box-sizing: border-box;
  height: 60px;
  padding: 0 10px 0 98px;   /* 町人（左端 6px＋幅 76px）→見出し 22px */
  background: #F9F3F0;
  border-top: 1px solid #DDDDDD;
  transform: translateY(calc(100% + 40px));   /* 隠すときは町人のはみ出し（36px）ごと画面の外へ。100% だけだと頭が画面下に残る（2026-10-24 実機で「頭のみ表示」） */
  transition: transform .35s ease;
  pointer-events: none;
}
.mg-fb.is-on {
  transform: translateY(0);
  pointer-events: auto;
}
.mg-fb__fig {
  position: absolute;
  left: 6px;
  bottom: 0;
  width: 80px;
  height: 96px;
  margin: 0;
}
.mg-fb__fig::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
}
.mg-fb__fig img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76px;
  height: auto;
  display: block;
}
.mg-fb__text {
  flex: 0 1 auto;   /* 見出しとボタンを離さない（2026-10-24 大浦さん「余白があるから近づけて」）。幅が足りないときだけ縮む */
  min-width: 0;
  line-height: 1.2;
}
.mg-fb__ttl {
  display: block;
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mg-fb__ttl b { color: #E24B4B; font-weight: 700; }
.mg-fb__sub {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mg-fb__btns {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.mg-fb a.mg-fb__btn,
.mg-fb a.mg-fb__btn:link,
.mg-fb a.mg-fb__btn:visited {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;   /* 2つのボタンは同じ幅。中央寄せだと文字の短い「相談する」のアイコンが右にずれる（2026-10-24 大浦さん指摘）ので左そろえにし、アイコンの左端を同じ x にする */
  gap: 4px;
  height: 26px;
  padding: 0 10px 0 10px;
  border-radius: 999px;
  border: 1px solid #E24B4B;
  background: #E24B4B;
  color: #fff;
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.mg-fb a.mg-fb__btn--line,
.mg-fb a.mg-fb__btn--line:link,
.mg-fb a.mg-fb__btn--line:visited {
  background: #fff;
  color: #E24B4B;
}
.mg-fb a.mg-fb__btn:hover { opacity: .85; }
.mg-fb__btn svg { width: 12px; height: 12px; flex: none; display: block; position: relative; top: 1px; }   /* 明朝の字面は箱の中心より約1px下に見えるので、アイコンを1px下げて字と中心を揃える（2026-10-24 大浦さん指摘・3倍キャプチャで実測） */
@media (max-width: 399px) {
  .mg-fb__sub-2 { display: none; }   /* 狭い端末では「・売り込みはしません」を省く（切れた文より短い完文） */
}
@media (min-width: 768px) {
  .mg-fb { display: none; }
}
/* 全ページに出すため（2026-10-24 大浦さん「今回のバナーを全ページにして（SPのみ）」）、スマホでは従来の右下フロートバナー（footer.php #float_banner_wrap）を出さない。PC は従来どおり */
@media (max-width: 767px) {
  #float_banner_wrap { display: none; }
}