/* =============================================================
 * サービスマップのスタイル
 * -------------------------------------------------------------
 * 旧マップ（.pmap-*／v1.37.0〜v1.66.1）は v1.82.0 で削除した。
 * 現在使っているのは下の .svc-map / .sm-* だけ。
 * ============================================================= */
/* =============================================================
 * v1.72.0  新しいサービスマップ
 * -------------------------------------------------------------
 * 工程（5列）× 実行主体（BPO／CONSULTING）の表。
 * TOP と /service/ で共用する（inc/solution-map.php の
 * pm_service_map_render()）。
 *
 * 旧マップ（.pmap-*）のスタイルは上に残してある。
 * 旧マップを使わなくなったら、まとめて削除できる。
 * ============================================================= */
/* =============================================================
 * top-2026.css  —  TOP 構成変更（v1.72.0）
 * -------------------------------------------------------------
 * 長谷川さんのレビューに付いていたプレビューHTMLの構成に合わせて
 * TOP を組み替えた際の、新しいセクション用のスタイル。
 *
 *   .concept / .cc-*        … CONCEPT セクション（新設）
 *   .asset-banners / .ab-*  … TRACTION5・AI の2バナー（STRENGTH下から独立）
 *   .svc-map / .sm-*        … 新しいサービスマップ（BPO／CONSULTING）
 *   .svc-entry / .sc-*      … 支援領域ごとの入口カード4枚
 *   .challenge-lead         … 課題セクションのリード文（新規）
 *
 * プレビューHTMLのCSSから、上記のクラスに関する指定だけを移したもの。
 * 既存クラス（.challenge / .coverage など）には手を入れていない。
 * ============================================================= */

/* ===========================================
   02. CONCEPT セクション
   assets/css/top-mock.css の末尾に追記
   =========================================== */
.pm-mock .concept{position:relative;padding:96px 0 88px;overflow:hidden;
  /* v1.73.1：白のままだと STRENGTH と地続きに見え、背景の大英字（白）も
     背景に溶けて見えなかった。他のtint面のセクションと同じ扱いに戻す。 */
  background:var(--tint,#F4F7FB);
  border-top:1px solid var(--line,#E2E8F1);
  border-bottom:1px solid var(--line,#E2E8F1)}
/* ===========================================
   サービスマップ
   =========================================== */
.pm-mock .svc-map{margin:34px 0 30px}
.pm-mock .svc-map .sm-title{font-size:17px;font-weight:700;color:var(--navy,#0F2C52);margin:0 0 8px}
.pm-mock .svc-map .sm-lead{font-size:13px;color:var(--gy,#5A6B80);line-height:1.85;margin:0 0 18px}
/* グリッド：ラベル / 獲得(広) / 商談化 / クロージング / 定着(狭) / 拡販(狭) */
.pm-mock .sm-grid{
  display:grid;
  grid-template-columns:120px 2.5fr 1.15fr 1.15fr .92fr .92fr;
  gap:6px;align-items:stretch
}
.pm-mock .sm-h{
  background:var(--navy,#0F2C52);color:#fff;font-size:12px;font-weight:700;
  text-align:center;padding:9px 6px;border-radius:2px;line-height:1.45;
  display:flex;flex-direction:column;justify-content:center
}
.pm-mock .sm-h small{display:block;font-size:10px;font-weight:400;color:#9FC6EA;margin-top:3px}
.pm-mock .sm-h--rh{background:transparent}
.pm-mock .sm-h--n{font-size:11.5px}
.pm-mock .sm-lb--bpo{grid-row:2 / 4}
.pm-mock .sm-lb--con{grid-row:4}
.pm-mock .sm-lb{
  background:var(--bg,#F5F8FB);border:1px solid var(--bd,#DFE5EC);border-radius:2px;
  padding:12px 8px;text-align:center;
  display:flex;flex-direction:column;justify-content:center
}
.pm-mock .sm-lb b{display:block;font-size:13px;font-weight:700;color:var(--navy,#0F2C52);line-height:1.4}
.pm-mock .sm-lb b.en{font-family:"Inter",sans-serif;font-size:14px;letter-spacing:.05em}
.pm-mock .sm-lb small{display:block;font-size:9.5px;color:var(--mu,#8090A2);margin-top:6px;line-height:1.55}
.pm-mock .sm-lb--blank{background:transparent;border:none;padding:0}
/* セル共通 */
.pm-mock .sm-cell{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--bd,#DFE5EC);border-radius:2px;
  padding:13px 14px;text-decoration:none;transition:.15s
}
.pm-mock .sm-cell:hover{border-color:var(--blue,#1B7FD4);box-shadow:0 2px 10px rgba(27,127,212,.10)}
.pm-mock .sm-cell .sm-tag{
  display:inline-block;align-self:flex-start;font-size:9.5px;font-weight:700;
  color:var(--blue,#1B7FD4);background:#EEF4FA;padding:2px 7px;border-radius:2px;margin-bottom:7px
}
.pm-mock .sm-cell b{font-size:12.5px;font-weight:700;color:var(--navy,#0F2C52);line-height:1.45;margin-bottom:6px}
.pm-mock .sm-cell p{font-size:11px;color:var(--gy,#5A6B80);line-height:1.7;margin:0}
.pm-mock .sm-cell--n b{font-size:12px}
.pm-mock .sm-cell--n p{font-size:10.5px;line-height:1.65}
.pm-mock .sm-more{
  display:block;margin-top:auto;padding-top:8px;
  font-size:10.5px;font-weight:700;color:var(--blue,#1B7FD4)
}
.pm-mock .sm-cell:hover .sm-more{text-decoration:underline}
/* リード・アポ獲得：2×2＋横長 */
.pm-mock .sm-c--lead{display:flex;flex-direction:column;gap:5px}
.pm-mock .sm-c--lead2{grid-row:2 / 4}
.pm-mock .sm-gl{
  display:block;background:#E3ECF5;border-radius:2px;padding:4px 10px;
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:#12325C
}
.pm-mock .sm-lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pm-mock .sm-lead-grid .sm-cell{padding:11px 12px}
.pm-mock .sm-cell--wide{padding:11px 12px}
/* CRM/SFA：横帯 */
.pm-mock .sm-crm{
  grid-column:3 / -1;grid-row:3;display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 10px;
  background:var(--bg,#F5F8FB);border:1px solid var(--bd,#DFE5EC);border-radius:2px;
  padding:13px 15px;text-decoration:none;transition:.15s;flex-direction:row
}
.pm-mock .sm-crm:hover{border-color:var(--blue,#1B7FD4)}
.pm-mock .sm-crm .sm-tag{
  flex:0 0 auto;font-size:9.5px;font-weight:700;color:var(--blue,#1B7FD4);
  background:#fff;border:1px solid #BFD6EC;padding:3px 8px;border-radius:2px
}
.pm-mock .sm-crm b{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--navy,#0F2C52)}
.pm-mock .sm-crm-d{flex:1 1 100%;font-size:11px;color:var(--gy,#5A6B80);line-height:1.75}
.pm-mock .sm-crm .sm-more{margin-top:auto;padding-top:4px;flex:0 0 100%}
/* CONSULTING */
.pm-mock .sm-c--con1{grid-column:2 / 4;grid-row:4}
.pm-mock .sm-c--con2{grid-column:4 / -1;grid-row:4}
/* AI 帯 */
.pm-mock .sm-ai{
  display:block;margin-top:6px;background:var(--navy,#0F2C52);border-radius:2px;
  padding:14px 20px;text-decoration:none;transition:.15s
}
.pm-mock .sm-ai:hover{background:#12325C}
.pm-mock .sm-ai-label{
  display:inline-block;font-family:"Inter",sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.12em;color:#9FC6EA;margin-bottom:5px
}
.pm-mock .sm-ai b{display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:5px}
.pm-mock .sm-ai-detail{display:block;font-size:11.5px;color:#D6E4F2;line-height:1.6}
.pm-mock .svc-map .sm-note{font-size:11px;color:var(--mu,#8090A2);margin:12px 0 0;line-height:1.7}
/* 横スクロールの案内（スマホだけ出す） */
.pm-mock .svc-map .sm-swipe{display:none}

/* =============================================================
 * サービスマップ：スマホ（v1.73.3）
 * -------------------------------------------------------------
 * 縦積みに組み替えるのをやめ、PCと同じ表のまま
 * 横スクロールで見せる方式にした（ご指示）。
 * ============================================================= */
@media(max-width:900px){
.pm-mock .svc-map{margin:24px 0 22px}
.pm-mock .svc-map .sm-title{font-size:15px;line-height:1.6}
.pm-mock .svc-map .sm-lead{font-size:12.5px}

/* 案内 */
.pm-mock .svc-map .sm-swipe{
  display:block;margin:0 0 6px;
  font-size:11px;font-weight:700;color:var(--blue,#1B7FD4)
}

/* 表そのものはPCと同じ。器だけ横スクロールさせる */
/* 画面の端まで使えるように、.container の左右余白ぶん外に出す
   （余白は 1060px以下=32px／640px以下=20px。下の @media で合わせている） */
.pm-mock .sm-scroll{
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  margin:0 -32px;padding:0 32px 10px
}
.pm-mock .sm-grid{
  min-width:1240px;
  grid-template-columns:120px 2.5fr 1.15fr 1.15fr .92fr .92fr;
  gap:6px
}
/* PCと同じ見せ方に戻す（前バージョンで消していたもの） */
.pm-mock .sm-h{display:flex}
.pm-mock .sm-lb{
  text-align:center;padding:12px 8px;
  background:var(--bg,#F5F8FB);border:1px solid var(--bd,#DFE5EC);
  flex-direction:column;margin-top:0
}
.pm-mock .sm-lb b,.pm-mock .sm-lb b.en{color:var(--navy,#0F2C52)}
.pm-mock .sm-lb small{color:var(--mu,#8090A2);margin-top:6px}
.pm-mock .sm-lb--blank{display:none}
.pm-mock .sm-lead-grid{grid-template-columns:1fr 1fr;gap:5px}
.pm-mock .sm-crm{grid-column:3 / -1;grid-row:3}
.pm-mock .sm-c--con1{grid-column:2 / 4;grid-row:4}
.pm-mock .sm-c--con2{grid-column:4 / -1;grid-row:4}
.pm-mock .sm-lb--bpo,.pm-mock .sm-c--lead2{grid-row:2 / 4}
.pm-mock .sm-lb--con{grid-row:4}

.pm-mock .sm-ai{padding:14px 16px;margin-top:10px}
.pm-mock .sm-ai b{font-size:13px;line-height:1.6}
.pm-mock .sm-ai-detail{font-size:11px;line-height:1.75}
.pm-mock .svc-map .sm-note{font-size:10.5px}
}
@media(max-width:640px){
  .pm-mock .sm-scroll{ margin:0 -20px;padding:0 20px 10px }
}

/* サービスマップ：リンクなしセル */
.pm-mock .sm-cell--nolink{cursor:default}
.pm-mock .sm-cell--nolink:hover{border-color:var(--bd,#DFE5EC);box-shadow:none}

/* =============================================================
 * v1.82.0  サービスマップ：文字サイズの統一と BPO／CONSULTING の区切り
 * -------------------------------------------------------------
 * 長谷川さんレビュー
 *   ・説明文・キャプションが小さすぎて読めない
 *   ・BPO とコンサルティングの枠がはっきりするようにしたい
 *
 * 文言は inc/solution-map.php 側で要約済み（1セル 35〜45字）。
 * ここではサイズと、行の塗り分けだけを扱う。
 * 表なので本文 16px が上限。ページ標準（18px）よりは小さいが、
 * 拡大前（11px）との差は解消している。
 *
 * ※ 行全体を枠で囲む案は、グリッドに敷き紙（::before）を足すと
 *   自動配置が総崩れになるため採らなかった。行ラベルの塗り分けと
 *   行間の余白、セルの面の色で区切りを出している。
 * ============================================================= */

/* 列幅：文字を大きくしたぶん、狭い2列（定着／拡販）を広げて配分し直す */
.pm-mock .sm-grid{
  grid-template-columns:152px 2.28fr 1.22fr 1.22fr 1.05fr 1.05fr;
  gap:7px;
}

/* --- BPO／CONSULTING の区切り ---------------------------------- */
/* 行ラベルは2つとも白地。枠線を太くして、そこだけ目立たせる */
.pm-mock .sm-lb{ padding:16px 10px; border-radius:4px; }
.pm-mock .sm-lb--bpo,
.pm-mock .sm-lb--con{
  background:#fff; border:2px solid var(--navy,#1B224C);
}
.pm-mock .sm-lb--bpo b.en,
.pm-mock .sm-lb--con b.en{ color:var(--navy,#1B224C); }
.pm-mock .sm-lb--bpo small,
.pm-mock .sm-lb--con small{ color:var(--gy,#5A6B80); }
.pm-mock .sm-lb b.en{ font-size:18px; letter-spacing:.01em; }
.pm-mock .sm-lb small{ font-size:13.5px; margin-top:8px; line-height:1.6; }

/* CONSULTING の行は面の色を変えて帯に見せる。間の余白は最小限に */
.pm-mock .sm-lb--con,
.pm-mock .sm-c--con1,
.pm-mock .sm-c--con2{ margin-top:10px; }
.pm-mock .sm-c--con1,
.pm-mock .sm-c--con2{ background:#F4F7FB; border-color:#CBD8E6; }

/* --- 文字サイズ ------------------------------------------------ */
.pm-mock .svc-map .sm-title{ font-size:21px; margin-bottom:10px; }
.pm-mock .svc-map .sm-lead{ font-size:18px; line-height:1.9; margin-bottom:22px; }
.pm-mock .sm-h{ font-size:16px; padding:13px 8px; }
.pm-mock .sm-h--n{ font-size:16px; }
.pm-mock .sm-gl{ font-size:13px; padding:6px 12px; }
.pm-mock .sm-cell{ padding:16px 17px; }
.pm-mock .sm-lead-grid .sm-cell,
.pm-mock .sm-cell--wide{ padding:15px 15px; }
.pm-mock .sm-cell .sm-tag{ font-size:13px; padding:3px 9px; margin-bottom:9px; }
.pm-mock .sm-cell b{ font-size:18px; line-height:1.5; margin-bottom:8px; }
.pm-mock .sm-cell p{ font-size:16px; line-height:1.8; }
.pm-mock .sm-cell--n b{ font-size:18px; }
.pm-mock .sm-cell--n p{ font-size:16px; line-height:1.8; }
.pm-mock .sm-more{ font-size:15px; padding-top:11px; }
.pm-mock .sm-crm{ padding:16px 18px; }
.pm-mock .sm-crm .sm-tag{ font-size:13px; padding:4px 10px; }
.pm-mock .sm-crm b{ font-size:18px; }
.pm-mock .sm-crm-d{ font-size:16px; line-height:1.8; }
/* 中身が少ないぶん縦に間延びしていたので、リンクを本文の直後に付ける */
.pm-mock .sm-crm .sm-more{ margin-top:2px; padding-top:0; }
.pm-mock .sm-ai{ padding:18px 24px; }
.pm-mock .sm-ai-label{ font-size:14px; margin-bottom:7px; }
.pm-mock .sm-ai b{ font-size:19px; margin-bottom:7px; }
.pm-mock .sm-ai-detail{ font-size:16px; line-height:1.7; }
.pm-mock .svc-map .sm-note{ font-size:15px; margin-top:14px; }

/* --- スマホ（横スクロールで見せる） ----------------------------- */
@media(max-width:900px){
  .pm-mock .svc-map .sm-title{ font-size:18px; }
  .pm-mock .svc-map .sm-lead{ font-size:16px; }
  .pm-mock .sm-lb b.en{ font-size:17px; }
  .pm-mock .sm-lb small{ font-size:12.5px; }
  .pm-mock .sm-h{ font-size:14.5px; }
  .pm-mock .sm-h--n{ font-size:14.5px; }
  .pm-mock .sm-cell b{ font-size:16px; }
  .pm-mock .sm-cell p{ font-size:14.5px; }
  .pm-mock .sm-cell--n b{ font-size:16px; }
  .pm-mock .sm-cell--n p{ font-size:14.5px; }
  .pm-mock .sm-crm b{ font-size:16px; }
  .pm-mock .sm-crm-d{ font-size:14.5px; }
  .pm-mock .sm-more{ font-size:14px; }
  .pm-mock .sm-ai b{ font-size:17px; }
  .pm-mock .sm-ai-detail{ font-size:14.5px; }
  .pm-mock .svc-map .sm-note{ font-size:13.5px; }
  .pm-mock .sm-lb--con,
  .pm-mock .sm-c--con1,
  .pm-mock .sm-c--con2{ margin-top:9px; }
  /* 文字を大きくしたぶん、横スクロール時の最低幅も広げる */
  .pm-mock .sm-grid{ min-width:1300px; }
}