/* =============================================================
 * スマホ用の図版パーツ（v1.32.0）
 * -------------------------------------------------------------
 * スマホで「カードを縦に積む」のをやめ、図で見せるための部品集。
 * すべて .pm-sp と併記して使う（＝PCでは出ない・PCの表示は不変）。
 *
 *   <div class="spf-chips pm-sp"> … </div>
 *
 * ★ 数値は「素の px」で書いている。スマホでは mobile-tune.css の
 *   zoom:0.8 が掛かるので、実機での見え方は 0.8 倍になる。
 *   （例：29px → 実機 23px 相当）既存のスマホ用指定と同じ書き方。
 * ★ このファイルを外せば図版は消え、.pm-sp の短い本文だけが残る。
 *
 * 部品は5つ。
 *   1. spf-chips … 数字チップ（3枚並び）。HERO や導入部の要点に。
 *   2. spf-tiles … 番号タイル（2列）。一覧・インデックスに。
 *   3. spf-flow  … 縦フロー（線でつなぐ）。順序のあるステップに。
 *   4. spf-stats … 数字タイル（2列・ベタ塗り）。実績数値に。
 *   5. spf-tags  … 見出しだけのタグ列。列挙ものに。
 * ============================================================= */

/* ---- 1. 数字チップ -------------------------------------------
   <div class="spf-chips pm-sp">
     <div class="spf-chip"><b>7<em>つ</em></b><span>対応チャネル</span></div>
   </div>                                                        */
.pm-mock .spf-chips{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0;
}
.pm-mock .spf-chips .spf-chip{
  background:var(--sky-pale,#EAF4FB);padding:13px 8px 14px;text-align:center;
}
.pm-mock .spf-chips .spf-chip b{
  display:block;font-family:'Poppins',sans-serif;font-size:29px;font-weight:700;
  color:var(--sky,#1C93D2);line-height:1.1;
}
.pm-mock .spf-chips .spf-chip b em{font-style:normal;font-size:15px;font-weight:600;margin-left:1px;}
.pm-mock .spf-chips .spf-chip span{
  display:block;margin-top:5px;font-size:14.5px;font-weight:700;line-height:1.5;
  color:var(--navy,#1B224C);
}
/* 濃い面の上に置くとき */
.pm-mock .lpr-sec--dark .spf-chips .spf-chip,
.pm-mock .is-hero-dark .spf-chips .spf-chip{background:rgba(255,255,255,.10);}
.pm-mock .lpr-sec--dark .spf-chips .spf-chip b,
.pm-mock .is-hero-dark .spf-chips .spf-chip b{color:var(--sky-light,#5FB6E8);}
.pm-mock .lpr-sec--dark .spf-chips .spf-chip span,
.pm-mock .is-hero-dark .spf-chips .spf-chip span{color:#fff;}

/* ---- 2. 番号タイル -------------------------------------------
   <div class="spf-tiles pm-sp">
     <a href="#s1"><span class="n">01</span><b>全フェーズ対応</b></a>
     <a class="is-wide" href="#s7"><span class="n">07</span><b>…</b></a>
   </div>
   ・a でなく div でも同じ見た目になる（リンクでない一覧にも使える）  */
.pm-mock .spf-tiles{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:16px 0 0;
  background:var(--line,#E2E8F1);border:1px solid var(--line,#E2E8F1);
}
.pm-mock .spf-tiles > *{
  display:flex;align-items:flex-start;gap:9px;
  background:#fff;padding:15px 12px 16px;text-decoration:none;color:inherit;
}
.pm-mock .spf-tiles > .is-wide{grid-column:1/-1;}
.pm-mock .spf-tiles > * > .n{
  flex:0 0 auto;font-family:'Poppins',sans-serif;font-size:24px;font-weight:700;
  line-height:1;color:var(--sky,#1C93D2);
}
.pm-mock .spf-tiles > * > b{font-size:17.5px;font-weight:900;line-height:1.5;color:var(--navy,#1B224C);}
.pm-mock .spf-tiles > * > .arw{margin-left:auto;align-self:center;color:var(--sky,#1C93D2);font-size:16px;}

/* ---- 3. 縦フロー ---------------------------------------------
   <ol class="spf-flow pm-sp">
     <li data-n="01"><b>まずはアポ獲得から</b><span>インサイドセールス</span></li>
     <li class="is-key" data-n="06"><b>内製化するとき</b><span>…</span></li>
   </ol>                                                          */
.pm-mock .spf-flow{
  position:relative;list-style:none;margin:18px 0 0;padding:0 0 0 50px;
}
.pm-mock .spf-flow::before{
  content:"";position:absolute;left:19px;top:10px;bottom:18px;width:2px;
  background:linear-gradient(#BFDDF0,var(--sky,#1C93D2));
}
.pm-mock .spf-flow > li{position:relative;margin-bottom:18px;}
.pm-mock .spf-flow > li:last-child{margin-bottom:0;}
.pm-mock .spf-flow > li::before{
  content:attr(data-n);position:absolute;left:-50px;top:0;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:#fff;border:2px solid var(--sky,#1C93D2);color:var(--sky,#1C93D2);
  font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;
}
.pm-mock .spf-flow > li.is-key::before{background:var(--sky,#1C93D2);color:#fff;}
.pm-mock .spf-flow > li > b{
  display:block;margin:5px 0 4px;font-size:19px;font-weight:900;line-height:1.5;
  color:var(--navy,#1B224C);
}
.pm-mock .spf-flow > li > span{display:block;font-size:16px;line-height:1.8;color:var(--sub,#5C6B80);}
.pm-mock .lpr-sec--dark .spf-flow > li::before{background:transparent;}
.pm-mock .lpr-sec--dark .spf-flow > li > b{color:#fff;}
.pm-mock .lpr-sec--dark .spf-flow > li > span{color:rgba(255,255,255,.8);}

/* ---- 4. 数字タイル -------------------------------------------
   <div class="spf-stats pm-sp">
     <div class="spf-stat"><b>300<em>件超</em></b><span>支援実績</span></div>
   </div>                                                         */
.pm-mock .spf-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:16px 0 0;
  background:var(--sky,#1C93D2);border:1px solid var(--sky,#1C93D2);
}
.pm-mock .spf-stats .spf-stat{background:var(--sky,#1C93D2);color:#fff;padding:15px 12px 16px;text-align:center;}
.pm-mock .spf-stats .spf-stat:only-child{grid-column:1/-1;}
.pm-mock .spf-stats .spf-stat b{
  display:block;font-family:'Poppins',sans-serif;font-size:37px;font-weight:700;line-height:1.05;color:#fff;
}
.pm-mock .spf-stats .spf-stat b em{font-style:normal;font-size:16px;font-weight:600;}
.pm-mock .spf-stats .spf-stat span{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;opacity:.93;}

/* ---- 5. タグ列 -----------------------------------------------
   <div class="spf-tags pm-sp"><span>パイプラインの定量データ</span>…</div> */
.pm-mock .spf-tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0;}
.pm-mock .spf-tags > span{
  display:inline-block;padding:7px 11px;
  background:var(--tint,#F4F7FB);border:1px solid var(--line,#E2E8F1);
  font-size:15.5px;font-weight:700;line-height:1.5;color:var(--navy,#1B224C);
}
.pm-mock .lpr-sec--dark .spf-tags > span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;}

/* 図版のあとに「くわしく読む」が来るときの間隔 */
.pm-mock .spf-chips + .pm-more,
.pm-mock .spf-tiles + .pm-more,
.pm-mock .spf-flow + .pm-more,
.pm-mock .spf-stats + .pm-more,
.pm-mock .spf-tags + .pm-more{margin-top:18px;}

/* =============================================================
 * LP のカード部品の説明文を、スマホでは畳む（v1.35.1）
 * -------------------------------------------------------------
 * LP ページは描画エンジンがモックのカードを別の部品に組み直すため、
 * モック側で付けた pm-pc が残らない。ここで直接指定して畳む。
 * assets/js/sp-more.js が読み込み時に <html> へ .pm-cardhide を付け、
 * 本文に pm-pc を付け直したあとで外す。
 * （先に隠しておくことで、畳む本文が一瞬見えるのを防ぐ。
 *   外したあとは pm-pc が付いたものだけが隠れた状態になるので、
 *   見出し扱いの短い一文などは残る）
 * ============================================================= */
@media (max-width:640px){
  .pm-cardhide .pm-mock .lps-tabbox-body > p,
  .pm-cardhide .pm-mock .lps-iconrow-body > p,
  .pm-cardhide .pm-mock .lps-numring-body > p,
  .pm-cardhide .pm-mock .tso-trio-item > p,
  .pm-cardhide .pm-mock .tso-check-body > p,
  .pm-cardhide .pm-mock .tso-media-body > p,
  .pm-cardhide .pm-mock .lps-frame-cell > p,
  .pm-cardhide .pm-mock .tso-pair-body > p,
  .pm-cardhide .pm-mock .step-body > p,
  .pm-cardhide .pm-mock .lps-poster-cell > p,
  .pm-cardhide .pm-mock .tso-def-body > p,
  .pm-cardhide .pm-mock .rep-sample__b > p,
  .pm-cardhide .pm-mock .lps-more > p,
  .pm-cardhide .pm-mock .tso-more-i > p,
  .pm-cardhide .pm-mock .cause-card > p{display:none;}
  /* 課題別ページ（.chg）のカードは畳まない。飾りの数字で高さが決まっているため、
     本文を隠すと中身のない箱が残ってしまう（v1.85.2） */
  .pm-cardhide .pm-mock .chg .cause-card > p,
  .pm-cardhide .pm-mock .chg .step-body > p{display:block;}
}

/* =============================================================
 * 6. spf-fig … 図版（SVG）のスマホ版        v1.41.0
 * -------------------------------------------------------------
 * 課題ページの図版は viewBox 900px 固定で、スマホでは横スクロール
 * になっていた。inc/challenge-figs.php が SVG の <text> を読んで
 * 縦組みの HTML に組み直し、figure（.pm-pc）の直後に差し込む。
 * PC 側の図版はそのまま。ここはスマホでしか出ない。
 * ============================================================= */
.pm-mock .spf-fig{ margin:18px 0 0; }
.pm-mock .spf-fig-ttl{
  margin:0 0 14px; padding-left:11px; border-left:3px solid var(--sky,#1C93D2);
  font-size:17px; font-weight:900; line-height:1.55; color:var(--navy,#1B224C);
}
.pm-mock .spf-fig-note{
  margin:14px 0 0; padding:10px 12px; background:var(--tint,#F4F7FB);
  font-size:14px; line-height:1.75; color:var(--sub,#5C6B80);
}
.pm-mock .spf-fig .spf-flow{ margin-top:0; }

/* かたまりを2列のタイルに並べる。
   元の図で横に並んでいたものはタイル、単独で置かれていたものはフル幅。
   縦に積むだけだと、どの図も同じ見た目になって単調になるため。 */
.pm-mock .spf-blks{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:start; }
.pm-mock .spf-blk{
  padding:11px 12px; background:#fff; border:1px solid var(--line,#E2E8F1);
  border-left:3px solid #C9D6E6;
}
.pm-mock .spf-blk.is-full{ grid-column:1/-1; }
.pm-mock .spf-blk > i{
  display:block; margin-bottom:5px; font-style:normal;
  font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--sky,#1C93D2);
}
.pm-mock .spf-blk > b{
  display:block; font-size:14.5px; font-weight:900; line-height:1.5;
  color:var(--navy,#1B224C);
}
.pm-mock .spf-blk > span{
  display:block; margin-top:4px; font-size:12.5px; line-height:1.65;
  color:var(--sub,#5C6B80);
}
/* フル幅のものは少し大きく。読み物としての比重が高いので */
.pm-mock .spf-blk.is-full > b{ font-size:16px; }
.pm-mock .spf-blk.is-full > span{ font-size:14px; line-height:1.75; }
/* 見出しだけのかたまり（「構造的に起こる3つの限界」など）は仕切りとして扱う */
.pm-mock .spf-blk.is-lead{
  grid-column:1/-1; padding:0; background:none; border:0; margin-top:6px;
}
.pm-mock .spf-blk.is-lead > i{
  margin:0; font-size:14.5px; font-weight:900; color:var(--navy,#1B224C);
}

/* 2列の対比（原因 / 打ち手）。
   対比の図は左右に並べてこそ対比として読めるので、スマホでも列は畳まない。
   見出しは表の上に1回だけ。補足文は出さない（実質10pxまで落ちて読めないため）。*/
.pm-mock .spf-pairs{ border:1px solid var(--line,#E2E8F1); background:#fff; }
.pm-mock .spf-pairs-hd{ display:grid; grid-template-columns:1fr 1fr; }
.pm-mock .spf-pairs-hd > i{
  padding:6px 12px; font-style:normal; font-size:12.5px; font-weight:700;
  letter-spacing:.06em; line-height:1.7; color:#fff; background:#8FA3BC;
}
.pm-mock .spf-pairs-hd > i + i{ background:var(--sky,#1C93D2); }
.pm-mock .spf-pair{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line,#E2E8F1);
}
.pm-mock .spf-pairs-hd + .spf-pair{ border-top:0; }
.pm-mock .spf-pair-col{ padding:11px 12px; }
.pm-mock .spf-pair-col--b{
  background:var(--tint,#F4F7FB); border-left:1px solid var(--line,#E2E8F1);
}
.pm-mock .spf-pair-col > b{
  display:block; font-size:15px; font-weight:900; line-height:1.5;
  color:var(--navy,#1B224C);
}

/* =============================================================
 * 7. spf-fig の PC 表示（v1.85.3）
 * -------------------------------------------------------------
 * 課題ページの図版は SVG をやめ、この HTML 版に一本化した。
 * もともとスマホ幅を前提にした大きさなので、PC では列を増やし、
 * 文字も本文に合わせて少し大きくする。
 * ============================================================= */
@media (min-width:641px){
  .pm-mock .spf-fig{ margin:22px 0 4px; }
  .pm-mock .spf-fig-ttl{ font-size:19px; }
  /* 列数は図版ごとに決める（元の図で横に並んでいた数）。
     auto-fit だと、3つ並びの図が4列グリッドに入って右端が空く（v1.85.5） */
  .pm-mock .spf-blks{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .pm-mock .spf-blks[data-cols="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pm-mock .spf-blks[data-cols="4"]{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pm-mock .spf-blk{ padding:14px 16px; }
  .pm-mock .spf-blk > i{ font-size:13px; }
  .pm-mock .spf-blk > b{ font-size:16px; }
  .pm-mock .spf-blk > span{ font-size:14.5px; line-height:1.8; }
  .pm-mock .spf-blk.is-full > b{ font-size:17.5px; }
  .pm-mock .spf-blk.is-full > span{ font-size:15px; }
  .pm-mock .spf-flow > li > b{ font-size:17px; }
  .pm-mock .spf-flow > li > span{ font-size:15.5px; }
  .pm-mock .spf-fig-note{ font-size:14.5px; }
}

/* =============================================================
 * 8. 縦フローの型を3つに分ける  v1.85.5
 * -------------------------------------------------------------
 * 1ページに縦フローが何本も出るため、すべて同じ「丸番号＋縦線」だと
 * 単調になる。出てくる順に data-v="1|2|3" が付くので、2本目・3本目は
 * 別の見せ方にする。中身のHTMLは共通。
 *   v1 … 丸番号と縦線（既存）
 *   v2 … 左のレール＋小さな連番。線でつながず、段組みで読ませる
 *   v3 … 番号を角バッジにして、行ごとに薄い地色を敷く
 * ============================================================= */
/* ---- v2：レール ---- */
.pm-mock .spf-fig[data-v="2"] .spf-flow{ padding-left:0; }
.pm-mock .spf-fig[data-v="2"] .spf-flow::before{ display:none; }
.pm-mock .spf-fig[data-v="2"] .spf-flow > li{
  padding:0 0 0 16px; margin-bottom:14px;
  border-left:3px solid var(--sky-pale,#CFE6F5);
}
.pm-mock .spf-fig[data-v="2"] .spf-flow > li:last-child{ margin-bottom:0; }
.pm-mock .spf-fig[data-v="2"] .spf-flow > li::before{
  position:static; display:block; width:auto; height:auto;
  border:0; border-radius:0; background:none; margin:0 0 2px;
  font-size:12.5px; letter-spacing:.08em; color:var(--sky,#1C93D2);
}
.pm-mock .spf-fig[data-v="2"] .spf-flow > li > b{ margin:0 0 3px; }

/* ---- v3：角バッジ＋交互の地色 ---- */
.pm-mock .spf-fig[data-v="3"] .spf-flow{
  padding-left:0; border:1px solid var(--line,#E2E8F1); border-radius:8px; overflow:hidden;
}
.pm-mock .spf-fig[data-v="3"] .spf-flow::before{ display:none; }
.pm-mock .spf-fig[data-v="3"] .spf-flow > li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 14px;
  align-items:start; margin:0; padding:13px 16px;
}
.pm-mock .spf-fig[data-v="3"] .spf-flow > li:nth-child(odd){ background:var(--tint,#F4F7FB); }
.pm-mock .spf-fig[data-v="3"] .spf-flow > li::before{
  position:static; grid-row:1/span 2; width:30px; height:26px;
  border-radius:3px; border:0; background:var(--sky,#1C93D2); color:#fff;
  font-size:13px; letter-spacing:.02em;
}
.pm-mock .spf-fig[data-v="3"] .spf-flow > li > b{ grid-column:2; margin:0 0 2px; }
.pm-mock .spf-fig[data-v="3"] .spf-flow > li > span{ grid-column:2; }

/* =============================================================
 * v1.88.0  文字サイズの統一（typography.css の8段階に寄せる）
 * -------------------------------------------------------------
 * 見出し 28 / 22・リード 21・本文 18・ボックス内 16・注記/タグ 14。
 * 0.5px 刻みと 14px 未満をなくすための上書き。自動で役割を判定して
 * 生成しているので、元の指定は書き換えていない。
 * 見た目がおかしい箇所は、このブロックの該当行を消せば元に戻る。
 * ヘッダー・ナビ・ボタン・数値の強調・ヒーローは対象外。
 * ============================================================= */

.pm-mock .spf-chips .spf-chip b em{font-size:16px}
.pm-mock .spf-chips .spf-chip span{font-size:16px}
.pm-mock .spf-tiles > * > b{font-size:18px}
.pm-mock .spf-stats .spf-stat span{font-size:16px}
.pm-mock .spf-tags > span{font-size:16px}
.pm-mock .spf-fig-ttl{font-size:18px}
.pm-mock .spf-blk > i{font-size:14px}
.pm-mock .spf-blk > b{font-size:16px}
.pm-mock .spf-blk > span{font-size:14px}
.pm-mock .spf-blk.is-lead > i{font-size:16px}
.pm-mock .spf-pairs-hd > i{font-size:14px}
.pm-mock .spf-pair-col > b{font-size:16px}
.pm-mock .spf-fig[data-v="2"] .spf-flow > li::before{font-size:14px}
.pm-mock .spf-fig[data-v="3"] .spf-flow > li::before{font-size:14px}

@media (min-width:641px){
  .pm-mock .spf-fig-ttl{font-size:22px}
  .pm-mock .spf-blk > i{font-size:14px}
  .pm-mock .spf-blk > span{font-size:16px}
  .pm-mock .spf-blk.is-full > b{font-size:18px}
  .pm-mock .spf-blk.is-full > span{font-size:16px}
  .pm-mock .spf-flow > li > b{font-size:18px}
  .pm-mock .spf-flow > li > span{font-size:16px}
  .pm-mock .spf-fig-note{font-size:14px}
}

@media (max-width:900px){
  .pm-mock .spf-chips .spf-chip b em{font-size:14.5px}
  .pm-mock .spf-chips .spf-chip span{font-size:14.5px}
  .pm-mock .spf-tiles > * > b{font-size:16px}
  .pm-mock .spf-stats .spf-stat span{font-size:14.5px}
  .pm-mock .spf-tags > span{font-size:14.5px}
  .pm-mock .spf-fig-ttl{font-size:16px}
  .pm-mock .spf-blk > i{font-size:13px}
  .pm-mock .spf-blk > b{font-size:14.5px}
  .pm-mock .spf-blk > span{font-size:13px}
  .pm-mock .spf-blk.is-lead > i{font-size:14.5px}
  .pm-mock .spf-pairs-hd > i{font-size:13px}
  .pm-mock .spf-pair-col > b{font-size:14.5px}
  .pm-mock .spf-fig[data-v="2"] .spf-flow > li::before{font-size:13px}
  .pm-mock .spf-fig[data-v="3"] .spf-flow > li::before{font-size:13px}
}