@charset "utf-8";
/* =====================================================================
   lp-list.css  —  箇条書き専用の型（.pfg--ls*）
   ---------------------------------------------------------------------
   2026-09 作り直し。前案が「チープ」だった原因を潰した版。
     ・1項目の内側余白を 13〜15px → 26〜34px に広げる
     ・本文の行間を 1.6 → 1.9 に広げる（/inside_sales/ の .reasons に合わせる）
     ・小さな色チップのラベルをやめる。ラベルは角丸タブ・濃色の丸・無しのいずれか
     ・番号は大きく扱う（48px以上）か、背面の透かしにするか、置かない
     ・強調は太字ではなくマーカー（蛍光ペン風）
     ・直角の帯ばかりにしない。角丸を使う型を混ぜる
   配色は現行のまま。
   ===================================================================== */

.pm-mock .pfg[class*="pfg--ls"]{
  --ls-navy:#1B224C; --ls-ink:#1B224C; --ls-sky:#1C93D2; --ls-sky2:#4EA9CA;
  --ls-pale:#EAF4FB; --ls-tint:#F4F7FB; --ls-line:#E2E8F1; --ls-line2:#CBD6E4;
  --ls-gray:#EEF1F5; --ls-gray2:#D8DFE8; --ls-sub:#44536B;
  --ls-sky-l:#8FC9EA; --ls-sky-p:#C9E3F5; --ls-wash:#F2F8FD;
  /* 白文字を載せる面（#1C93D2 だと 3.4:1 で足りない） */
  --ls-skybg:#15719F;
  /* 明るい地に載せる小さめのスカイ文字 */
  --ls-skytext:#15719F;
  --ls-mark:rgba(146,205,240,.62);
}
.pm-mock .pfg[class*="pfg--ls"] .pfg-items{ margin-top:22px !important; }
.pm-mock .pfg[class*="pfg--ls"] .pfg-l li{ line-height:1.9 !important; }
.pm-mock .pfg[class*="pfg--ls"] .pfg-t{ line-height:1.58 !important; }
/* マーカー（蛍光ペン）。見出しの中の <b class="mk"> にだけ当てる。
   素の <b> は用語の強調に使われているので、マーカーは引かない */
.pm-mock .pfg[class*="pfg--ls"] .pfg-t b.mk{
  background:linear-gradient(transparent 56%, var(--ls-mark) 56%) !important;
  color:inherit !important; font-weight:inherit !important;
  padding:0 2px !important;
}

/* =====================================================================
   M2 lsbig — 大きな数字を並べる
   数字を 96px の薄いスカイで置き、その右に見出しと本文。枠は使わない。
   2〜4項目。順序がある／重みの順に並べたいとき。
   ===================================================================== */
.pm-mock .pfg--lsbig .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:30px 34px !important;
}
.pm-mock .pfg--lsbig[data-n="3"] .pfg-items{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.pm-mock .pfg--lsbig .pfg-i{
  display:grid !important; grid-template-columns:auto minmax(0,1fr);
  gap:4px 20px; align-items:start;
}
.pm-mock .pfg--lsbig .pfg-i::before{
  content:counter(pfg); grid-column:1; grid-row:1 / span 2; align-self:start;
  font-family:'Poppins',sans-serif; font-size:74px; font-weight:700;
  line-height:.82; letter-spacing:-.04em; color:var(--ls-sky); opacity:.55;
  margin-top:-4px;
}
.pm-mock .pfg--lsbig .pfg-t{ grid-column:2; font-size:20px !important; }
.pm-mock .pfg--lsbig .pfg-l{ grid-column:2; }
.pm-mock .pfg--lsbig .pfg-l li{ font-size:16px !important; color:var(--ls-sub) !important; }

/* =====================================================================
   M3 lsdot — 濃色の丸ラベル＋角丸パネル
   左に濃紺の丸（カテゴリ名）、右に角丸のパネル。項目はチェックで2列。
   カテゴリが2〜4つあり、それぞれに2〜6項目ぶら下がるとき。
   ===================================================================== */
.pm-mock .pfg--lsdot .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:16px !important;
}
.pm-mock .pfg--lsdot .pfg-i{
  display:grid !important; grid-template-columns:150px minmax(0,1fr);
  gap:0 20px; align-items:center;
}
.pm-mock .pfg--lsdot .pfg-t{
  grid-column:1; width:130px; height:130px; border-radius:50% !important;
  background:var(--ls-sky) !important; color:#fff !important;
  display:flex !important; align-items:center; justify-content:center; text-align:center;
  font-size:17px !important; padding:0 14px !important; justify-self:center;
}
.pm-mock .pfg--lsdot .pfg-l{
  grid-column:2; background:#fff !important; border:1.5px solid var(--ls-line2) !important; border-radius:22px !important;
  padding:26px 30px 28px !important;
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 26px !important;
}
.pm-mock .pfg--lsdot .pfg-l li{
  position:relative; padding-left:30px !important; font-size:16.5px !important;
  line-height:1.6 !important; color:var(--ls-ink) !important;
}
.pm-mock .pfg--lsdot .pfg-l li::before{
  content:"" !important; position:absolute; left:2px; top:.44em;
  width:14px; height:8px; border-left:2.6px solid var(--ls-sky) !important;
  border-bottom:2.6px solid var(--ls-sky) !important; transform:rotate(-45deg);
}

/* =====================================================================
   M4 lsghost — 背面の透かし番号
   角丸のグレー面。見出しは角丸の白いタブ。右下に POINT 01 を大きく薄く。
   2〜4項目。1項目あたりの説明が3〜5行あるとき。
   ===================================================================== */
.pm-mock .pfg--lsghost .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px !important;
}
.pm-mock .pfg--lsghost .pfg-i{
  position:relative; overflow:hidden; background:var(--ls-gray); border-radius:14px;
  padding:26px 30px 44px; gap:16px;
}
.pm-mock .pfg--lsghost .pfg-i::after{
  content:"POINT " counter(pfg,decimal-leading-zero);
  position:absolute; right:22px; bottom:8px; z-index:0;
  font-family:'Poppins',sans-serif; font-size:32px; font-weight:700; line-height:1;
  letter-spacing:.02em; color:#fff; opacity:.9;
}
.pm-mock .pfg--lsghost .pfg-i > *{ position:relative; z-index:1; }
.pm-mock .pfg--lsghost .pfg-t{
  align-self:flex-start; background:#fff !important; border-radius:999px !important;
  padding:11px 24px 12px !important; font-size:17px !important;
}
.pm-mock .pfg--lsghost .pfg-l li{ font-size:16px !important; }
.pm-mock .pfg--lsghost .pfg-l li:last-child{ color:var(--ls-skytext) !important; }

/* =====================================================================
   M5 lscircle — 円の中に収める
   短い語を円に入れて横に並べる。3〜5項目。1項目が8字以内のとき。
   ===================================================================== */
.pm-mock .pfg--lscircle .pfg-items{
  display:grid !important; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:20px !important; justify-items:center;
}
.pm-mock .pfg--lscircle .pfg-i{ align-items:center; text-align:center; gap:14px; }
.pm-mock .pfg--lscircle .pfg-t{
  width:158px; height:158px; border-radius:50% !important;
  background:var(--ls-sky) !important; color:#fff !important;
  display:flex !important; align-items:center; justify-content:center;
  font-size:18px !important; padding:0 18px !important; line-height:1.5 !important;
}
.pm-mock .pfg--lscircle .pfg-i:nth-child(even) .pfg-t{ background:#1C88CB !important; }
.pm-mock .pfg--lscircle .pfg-l li{
  font-size:15px !important; color:var(--ls-sub) !important; text-align:center;
  line-height:1.75 !important;
}

/* =====================================================================
   ここから 2026-09 追加分（M7〜）
   ---------------------------------------------------------------------
   ・濃紺のベタ面は使わない。地は 白／#F2F8FD／#EAF4FB／#EEF1F5 のいずれか
   ・濃紺は文字色と、ごく細いアクセント（罫・小さな丸）にとどめる
   ・実写を使う型を用意する（写真は縦横それぞれ用意があるものだけ）
   ===================================================================== */

/* ---- 写真の共通処理（箇条書きの型で使うぶん） ---------------------- */
.pm-mock .pfg[class*="pfg--ls"] .pfg-photo{
  position:relative; overflow:hidden; background:var(--ls-tint);
}
.pm-mock .pfg[class*="pfg--ls"] .pfg-photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%);
  filter:saturate(.72) contrast(1.02);
}

/* =====================================================================
   M7 lsphotodot — 丸い写真＋見出し＋項目
   淡水色のパネルの中に、丸く抜いた写真を置く。2〜4項目。
   ===================================================================== */
.pm-mock .pfg--lsphotodot .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important;
}
.pm-mock .pfg--lsphotodot[data-n="3"] .pfg-items,
.pm-mock .pfg--lsphotodot[data-n="4"] .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.pm-mock .pfg--lsphotodot .pfg-i{
  background:var(--ls-wash); border-radius:16px; padding:26px 28px 28px;
  display:grid !important; grid-template-columns:minmax(0,1fr) 112px;
  gap:10px 22px; align-items:start;
}
.pm-mock .pfg.pfg--lsphotodot .pfg-photo{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  width:112px; height:112px; border-radius:50%;
}
.pm-mock .pfg--lsphotodot .pfg-t{ grid-column:1; font-size:19px !important; }
.pm-mock .pfg--lsphotodot .pfg-l{ grid-column:1; gap:7px !important; }
.pm-mock .pfg--lsphotodot .pfg-l li{
  position:relative; padding-left:19px !important; font-size:16px !important;
  line-height:1.72 !important;
}
.pm-mock .pfg--lsphotodot .pfg-l li::before{
  content:"" !important; position:absolute; left:0; top:.66em;
  width:9px; height:9px; border-radius:50% !important; background:var(--ls-sky) !important;
}

/* =====================================================================
   M8 lsphotatop — 写真が上、見出しと本文が下
   3〜4列のカード。各項目に1枚ずつ写真があるとき。
   ===================================================================== */
.pm-mock .pfg--lsphototop .pfg-items{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
}
.pm-mock .pfg--lsphototop[data-n="3"] .pfg-items{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.pm-mock .pfg--lsphototop .pfg-i{
  background:#fff; border:1.5px solid var(--ls-line); border-radius:14px;
  overflow:hidden; gap:0;
}
.pm-mock .pfg.pfg--lsphototop .pfg-photo{ height:132px; border-radius:0; }
.pm-mock .pfg--lsphototop .pfg-t{
  padding:20px 22px 0 !important; font-size:18px !important;
}
.pm-mock .pfg--lsphototop .pfg-l{ padding:8px 22px 24px !important; }
.pm-mock .pfg--lsphototop .pfg-l li{ font-size:16px !important; color:var(--ls-sub) !important; }

/* =====================================================================
   M9 lsphotobg — ぼかした写真を背景に
   写真の上に文字を載せる。3〜4項目。印象づけたいとき。
   ===================================================================== */
.pm-mock .pfg--lsphotobg .pfg-items{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:4px !important;
}
.pm-mock .pfg--lsphotobg[data-n="3"] .pfg-items{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.pm-mock .pfg--lsphotobg .pfg-i{
  position:relative; overflow:hidden; border-radius:12px;
  min-height:184px; padding:26px 24px 28px; gap:9px; justify-content:flex-end;
}
.pm-mock .pfg.pfg--lsphotobg .pfg-photo{
  position:absolute; inset:0; z-index:0; border-radius:0;
}
.pm-mock .pfg.pfg--lsphotobg .pfg-photo img{ filter:blur(2.5px) saturate(.5) brightness(1.04); transform:scale(1.08); }
.pm-mock .pfg.pfg--lsphotobg .pfg-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(234,244,251,.96) 0%, rgba(234,244,251,.74) 58%, rgba(234,244,251,.42) 100%);
}
.pm-mock .pfg.pfg--lsphotobg .pfg-i > :not(.pfg-photo){ position:relative; z-index:1; }
.pm-mock .pfg--lsphotobg .pfg-t{ font-size:19px !important; }
.pm-mock .pfg--lsphotobg .pfg-l li{ font-size:16px !important; line-height:1.72 !important; }

/* =====================================================================
   M10 lsphotoside — 左に大きな写真、右に項目
   1枚の写真に対して、項目が4〜8個ぶら下がるとき。
   ===================================================================== */
.pm-mock .pfg--lsphotoside .pfg-items{
  display:grid !important; grid-template-columns:330px minmax(0,1fr) !important;
  gap:0 30px !important; align-items:center; grid-auto-rows:min-content;
}
.pm-mock .pfg.pfg--lsphotoside .pfg-photo{
  /* 暗黙の行だと 1/-1 が効かないので、余分に span して全段にまたがらせる */
  grid-column:1; grid-row:1 / span 20; border-radius:16px; align-self:stretch;
}
.pm-mock .pfg--lsphotoside .pfg-i{
  grid-column:2; padding:15px 0 16px; border-top:1px solid var(--ls-line);
  display:grid !important; grid-template-columns:auto minmax(0,1fr); gap:2px 16px; align-items:baseline;
}
.pm-mock .pfg--lsphotoside .pfg-i:first-of-type{ border-top:0; }
.pm-mock .pfg--lsphotoside .pfg-i::before{
  content:""; width:11px; height:11px; border-radius:50%;
  background:var(--ls-sky); align-self:center;
}
.pm-mock .pfg--lsphotoside .pfg-t{ font-size:18px !important; }
.pm-mock .pfg--lsphotoside .pfg-l{ grid-column:2; }
.pm-mock .pfg--lsphotoside .pfg-l li{ font-size:15.5px !important; color:var(--ls-sub) !important; }

/* =====================================================================
   M11 lsphotoband — 写真を帯に敷き、その上に項目を並べる
   セクションの導入として、短い項目を横に4つ置くとき。
   ===================================================================== */
.pm-mock .pfg--lsphotoband{ position:relative; }
.pm-mock .pfg--lsphotoband .pfg-items{
  position:relative; display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important; padding:30px 26px 32px; border-radius:16px; overflow:hidden;
}
.pm-mock .pfg--lsphotoband[data-n="3"] .pfg-items{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.pm-mock .pfg.pfg--lsphotoband .pfg-photo{
  position:absolute; inset:0; z-index:0; border-radius:0;
}
.pm-mock .pfg.pfg--lsphotoband .pfg-photo img{ filter:saturate(.35) brightness(1.06); }
.pm-mock .pfg.pfg--lsphotoband .pfg-photo::after{
  content:""; position:absolute; inset:0; background:rgba(234,244,251,.86);
}
.pm-mock .pfg--lsphotoband .pfg-i{
  position:relative; z-index:1; background:#fff; border-radius:12px;
  padding:22px 22px 24px; gap:8px;
}
.pm-mock .pfg--lsphotoband .pfg-t{ font-size:17.5px !important; }
.pm-mock .pfg--lsphotoband .pfg-l li{ font-size:15px !important; color:var(--ls-sub) !important; }

/* =====================================================================
   M12 lswedge — 薄水色の台形＋大きな数字
   横4〜5項目。上辺を斜めに切って並べる。短い見出し＋3〜5行。
   ===================================================================== */
.pm-mock .pfg--lswedge .pfg-items{
  display:grid !important; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:10px !important; align-items:start;
}
.pm-mock .pfg--lswedge .pfg-i{ gap:0; }
.pm-mock .pfg--lswedge .pfg-i::before{
  content:counter(pfg); display:block;
  background:var(--ls-sky-l); color:#fff;
  clip-path:polygon(0 18px, 100% 0, 100% 100%, 0 100%);
  padding:38px 22px 26px; text-align:center;
  font-family:'Poppins',sans-serif; font-size:46px; font-weight:700; line-height:1;
}
.pm-mock .pfg--lswedge .pfg-i:nth-child(even)::before{ background:#A6D4EE; }
.pm-mock .pfg--lswedge .pfg-t{
  display:block !important; text-align:center; padding:16px 16px 8px !important;
  font-size:19px !important; color:var(--ls-skytext) !important;
}
.pm-mock .pfg--lswedge .pfg-l{ padding:0 16px 18px !important; }
.pm-mock .pfg--lswedge .pfg-c{ display:block !important; padding:0 16px !important; margin:0 0 6px !important; }
.pm-mock .pfg--lswedge .pfg-l li{ font-size:15px !important; line-height:1.8 !important; }

/* =====================================================================
   M13 lsknot — 丸い番号から線を引いて本体へ
   縦2〜4項目。番号の丸と本文を、太い線でつなぐ。
   ===================================================================== */
.pm-mock .pfg--lsknot .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:18px !important;
}
.pm-mock .pfg--lsknot .pfg-i{
  display:grid !important; grid-template-columns:76px 40px minmax(0,1fr);
  gap:0; align-items:center;
}
.pm-mock .pfg--lsknot .pfg-i::before{
  content:counter(pfg,decimal-leading-zero);
  grid-column:1; grid-row:1; width:76px; height:76px; border-radius:50%;
  display:grid; place-items:center; line-height:1;
  background:var(--ls-pale); color:var(--ls-sky);
  font-family:'Poppins',sans-serif; font-size:30px; font-weight:700;
}
.pm-mock .pfg--lsknot .pfg-i::after{
  content:""; grid-column:2; grid-row:1; height:5px; width:100%;
  background:var(--ls-sky-p); align-self:center;
}
.pm-mock .pfg--lsknot .pfg-body{
  grid-column:3; grid-row:1; background:var(--ls-wash); border-radius:14px; padding:22px 28px 24px;
}
.pm-mock .pfg--lsknot .pfg-t{ font-size:19px !important; }
.pm-mock .pfg--lsknot .pfg-l li{ font-size:16px !important; }

/* =====================================================================
   M15 lstab — 角丸の白いタブ＋グレーのパネル
   1項目の説明が3〜5行。2〜4項目。番号は置かない。
   ===================================================================== */
.pm-mock .pfg--lstab .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important;
}
.pm-mock .pfg--lstab .pfg-i{
  background:var(--ls-gray); border-radius:14px; padding:24px 28px 28px; gap:15px;
}
.pm-mock .pfg--lstab .pfg-t{
  align-self:flex-start; background:#fff !important; border-radius:999px !important;
  padding:11px 24px 12px !important; font-size:17px !important;
}
.pm-mock .pfg--lstab .pfg-l li{ font-size:16px !important; }

/* =====================================================================
   M16 lshead — 上に細い見出し帯、その下にパネル
   カテゴリが2〜4つ、それぞれに2〜3項目。
   ===================================================================== */
.pm-mock .pfg--lshead .pfg-items{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
}
.pm-mock .pfg--lshead[data-n="2"] .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.pm-mock .pfg--lshead[data-n="4"] .pfg-items{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.pm-mock .pfg--lshead .pfg-i{ gap:0; }
.pm-mock .pfg--lshead .pfg-t{
  display:block !important; background:var(--ls-sky) !important; color:#fff !important;
  border-radius:10px 10px 0 0 !important; padding:13px 20px 14px !important; font-size:17px !important;
}
.pm-mock .pfg--lshead .pfg-l{
  background:var(--ls-wash) !important; border-radius:0 0 10px 10px !important;
  padding:20px 22px 22px !important; gap:10px !important;
}
.pm-mock .pfg--lshead .pfg-l li{
  position:relative; padding-left:19px !important; font-size:16px !important; line-height:1.72 !important;
}
.pm-mock .pfg--lshead .pfg-l li::before{
  content:"" !important; position:absolute; left:0; top:.66em;
  width:9px; height:9px; border-radius:50% !important; background:var(--ls-sky-l) !important;
}

/* =====================================================================
   M17 lsscript — 斜体のラベル＋淡い本文帯
   「課題1」「施策1」のように、通し番号のラベルを添えるとき。2〜4項目。
   ===================================================================== */
.pm-mock .pfg--lsscript .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:26px !important;
}
.pm-mock .pfg--lsscript .pfg-i{ position:relative; padding-top:6px; gap:0; }
.pm-mock .pfg--lsscript .pfg-k{
  display:inline-block !important; align-self:flex-start;
  font-family:'Poppins',sans-serif !important; font-style:italic;
  font-size:19px !important; font-weight:700 !important; letter-spacing:.01em;
  color:var(--ls-ink) !important; background:none !important;
  padding:0 6px 5px 2px !important; margin:0 0 4px !important;
  border-bottom:2.5px solid var(--ls-ink) !important;
  transform:rotate(-7deg); transform-origin:left bottom;
}
.pm-mock .pfg--lsscript .pfg-t{
  display:block !important; background:var(--ls-pale) !important;
  padding:10px 18px 11px !important; font-size:19px !important;
  align-self:flex-start;
}
.pm-mock .pfg--lsscript .pfg-l{
  background:var(--ls-gray) !important; padding:20px 24px 22px !important; margin-top:6px !important;
}
.pm-mock .pfg--lsscript .pfg-l li{ font-size:16px !important; }

/* =====================================================================
   M18 lsside — 左右で対比（濃紺を使わない版）
   片方が淡水色、片方がライトグレー。見出しの色で立場を出す。
   ===================================================================== */
.pm-mock .pfg--lsside .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important;
}
.pm-mock .pfg--lsside .pfg-i{ border-radius:14px; padding:26px 28px 28px; gap:14px; }
.pm-mock .pfg--lsside .pfg-i:nth-child(1){ background:var(--ls-pale); }
.pm-mock .pfg--lsside .pfg-i:nth-child(2){ background:var(--ls-gray); }
.pm-mock .pfg--lsside .pfg-t{ font-size:19px !important; }
.pm-mock .pfg--lsside .pfg-i:nth-child(1) .pfg-t{ color:var(--ls-skytext) !important; }
.pm-mock .pfg--lsside .pfg-i:nth-child(2) .pfg-t{ color:#7C8899 !important; }
.pm-mock .pfg--lsside .pfg-l{ gap:11px !important; }
.pm-mock .pfg--lsside .pfg-l li{
  position:relative; padding-left:26px !important; font-size:16px !important; line-height:1.74 !important;
}
.pm-mock .pfg--lsside .pfg-i:nth-child(1) .pfg-l li::before{
  content:"" !important; position:absolute; left:2px; top:.44em;
  width:13px; height:7px; border-left:2.4px solid var(--ls-sky) !important;
  border-bottom:2.4px solid var(--ls-sky) !important; transform:rotate(-45deg);
}
.pm-mock .pfg--lsside .pfg-i:nth-child(2) .pfg-l li::before{
  content:"" !important; position:absolute; left:2px; top:.82em;
  width:13px; height:2.4px; background:#A9B4C2 !important;
}

/* =====================================================================
   M19 lstier — 必須／歓迎（淡水色の濃淡で段を出す）
   2〜3段。段ごとに地色が薄くなる。
   ===================================================================== */
.pm-mock .pfg--lstier .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:12px !important;
}
.pm-mock .pfg--lstier .pfg-i{
  display:grid !important; grid-template-columns:minmax(150px,.18fr) minmax(0,1fr);
  gap:0 26px; align-items:start; border-radius:12px; padding:24px 28px 26px;
}
.pm-mock .pfg--lstier .pfg-i:nth-child(1){ background:var(--ls-pale); }
.pm-mock .pfg--lstier .pfg-i:nth-child(2){ background:var(--ls-wash); }
.pm-mock .pfg--lstier .pfg-i:nth-child(n+3){ background:var(--ls-gray); }
.pm-mock .pfg--lstier .pfg-t{
  font-size:18px !important; color:var(--ls-skytext) !important;
}
.pm-mock .pfg--lstier .pfg-i:nth-child(n+3) .pfg-t{ color:#7C8899 !important; }
.pm-mock .pfg--lstier .pfg-l{ gap:9px !important; }
.pm-mock .pfg--lstier .pfg-l li{
  position:relative; padding-left:19px !important; font-size:16px !important; line-height:1.74 !important;
}
.pm-mock .pfg--lstier .pfg-l li::before{
  content:"" !important; position:absolute; left:0; top:.68em;
  width:8px; height:8px; background:var(--ls-sky-l) !important;
}

/* =====================================================================
   M20 lspile — 積み上げ（淡水色の段）
   下が土台。3〜5段。
   ===================================================================== */
.pm-mock .pfg--lspile .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:6px !important;
  justify-items:center;
}
.pm-mock .pfg--lspile .pfg-i{
  width:100%; background:var(--ls-wash); border-radius:10px;
  padding:20px 28px 22px; border-bottom:5px solid var(--ls-sky-p);
  display:grid !important; grid-template-columns:auto minmax(0,1fr); gap:2px 20px; align-items:baseline;
}
.pm-mock .pfg--lspile .pfg-i:last-child{ background:var(--ls-pale); border-bottom-color:var(--ls-sky); }
.pm-mock .pfg--lspile[data-n="3"] .pfg-i:nth-child(1){ width:84%; }
.pm-mock .pfg--lspile[data-n="3"] .pfg-i:nth-child(2){ width:92%; }
.pm-mock .pfg--lspile[data-n="4"] .pfg-i:nth-child(1){ width:79%; }
.pm-mock .pfg--lspile[data-n="4"] .pfg-i:nth-child(2){ width:86%; }
.pm-mock .pfg--lspile[data-n="4"] .pfg-i:nth-child(3){ width:93%; }
.pm-mock .pfg--lspile .pfg-t{ font-size:18px !important; }
.pm-mock .pfg--lspile .pfg-l{ grid-column:2; }
.pm-mock .pfg--lspile .pfg-l li{ font-size:15.5px !important; color:var(--ls-sub) !important; }

/* =====================================================================
   M21 lspill — 淡水色のチップを詰めて並べる
   短い語の羅列。4〜10項目。
   ===================================================================== */
.pm-mock .pfg--lspill .pfg-items{
  display:flex !important; flex-wrap:wrap; gap:10px !important;
}
.pm-mock .pfg--lspill .pfg-i{
  background:var(--ls-pale); border-radius:999px; padding:13px 26px 14px;
}
.pm-mock .pfg--lspill .pfg-t{ font-size:16.5px !important; color:var(--ls-ink) !important; }

/* =====================================================================
   M22 lsplain — 4列の白いカード（細い区切りだけ）
   短い見出し＋2〜3行を、たくさん並べるとき。8〜12項目。
   ===================================================================== */
.pm-mock .pfg--lsplain .pfg-items{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:30px 26px !important;
}
.pm-mock .pfg--lsplain[data-n="3"] .pfg-items,
.pm-mock .pfg--lsplain[data-n="6"] .pfg-items,
.pm-mock .pfg--lsplain[data-n="9"] .pfg-items{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.pm-mock .pfg--lsplain .pfg-i{ gap:12px; }
.pm-mock .pfg--lsplain .pfg-t{
  display:block !important; text-align:center; font-size:17px !important;
  padding-bottom:12px !important; border-bottom:1.5px solid var(--ls-sky-p) !important;
}
.pm-mock .pfg--lsplain .pfg-l li{ font-size:15px !important; color:var(--ls-sub) !important; }

/* =====================================================================
   M23 lscheck — 2列のチェックリスト（枠なし）
   条件や提供物の列挙。6〜12項目。余白だけで読ませる。
   ===================================================================== */
.pm-mock .pfg--lscheck .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px 40px !important;
}
.pm-mock .pfg--lscheck .pfg-i{
  display:grid !important; grid-template-columns:30px minmax(0,1fr);
  gap:2px 12px; align-items:start;
  padding-bottom:16px; border-bottom:1px solid var(--ls-line);
}
.pm-mock .pfg--lscheck .pfg-i::before{
  content:""; grid-row:1 / span 2; justify-self:center; align-self:start; margin-top:.36em;
  width:16px; height:9px; border-left:2.8px solid var(--ls-sky);
  border-bottom:2.8px solid var(--ls-sky); transform:rotate(-45deg);
}
.pm-mock .pfg--lscheck .pfg-t{ grid-column:2; font-size:17px !important; }
.pm-mock .pfg--lscheck .pfg-l{ grid-column:2; }
.pm-mock .pfg--lscheck .pfg-l li{ font-size:15px !important; color:var(--ls-sub) !important; }

/* =====================================================================
   M24 lsgroup — グループ見出しを線で挟んで、その下に項目
   大分類が2〜3つ、各分類に2〜3項目。
   ===================================================================== */
.pm-mock .pfg--lsgroup .pfg-items{
  display:grid !important; gap:14px !important;
  /* 列数はグループ内の最大項目数に合わせる（style="--gc:2" で指定） */
  grid-template-columns:repeat(var(--gc,3),minmax(0,1fr)) !important;
}
.pm-mock .pfg--lsgroup .pfg-cap{
  grid-column:1 / -1; display:flex; align-items:center; gap:16px;
  font-size:15px; font-weight:700; color:var(--ls-sub); margin:6px 0 2px;
}
.pm-mock .pfg--lsgroup .pfg-cap:first-child{ margin-top:0; }
.pm-mock .pfg--lsgroup .pfg-cap::before,
.pm-mock .pfg--lsgroup .pfg-cap::after{ content:""; flex:1; height:1.5px; background:var(--ls-line2); }
.pm-mock .pfg--lsgroup .pfg-i{
  background:#fff; border:1.5px solid var(--ls-line); border-radius:12px;
  padding:22px 24px 24px; gap:11px;
}
.pm-mock .pfg--lsgroup .pfg-t{ font-size:16.5px !important; color:var(--ls-ink) !important; }
.pm-mock .pfg--lsgroup .pfg-l li{ font-size:15.5px !important; }

/* =====================================================================
   M25 lsfunnel — 項目を並べて、下の帯に結論を集約する
   3〜4項目の下に矢印を下ろし、まとめの帯で受ける。
   ===================================================================== */
.pm-mock .pfg--lsfunnel .pfg-items{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
}
.pm-mock .pfg--lsfunnel[data-n="4"] .pfg-items{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.pm-mock .pfg--lsfunnel .pfg-i{
  position:relative; background:var(--ls-wash); border-radius:12px;
  padding:22px 24px 24px; margin-bottom:34px; gap:10px;
}
.pm-mock .pfg--lsfunnel .pfg-i::after{
  content:""; position:absolute; left:50%; bottom:-27px; transform:translateX(-50%);
  width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent;
  border-top:17px solid var(--ls-sky-p);
}
.pm-mock .pfg--lsfunnel .pfg-t{ font-size:17.5px !important; }
.pm-mock .pfg--lsfunnel .pfg-l li{ font-size:15px !important; color:var(--ls-sub) !important; }
.pm-mock .pfg--lsfunnel .pfg-sum{
  grid-column:1 / -1; background:var(--ls-pale); border-radius:12px;
  padding:22px 28px 24px; text-align:center;
  font-size:19px; font-weight:700; line-height:1.7; color:var(--ls-ink);
}
.pm-mock .pfg--lsfunnel .pfg-sum b{
  font-family:'Poppins',sans-serif; font-size:30px; font-weight:700;
  color:var(--ls-sky); padding:0 4px; line-height:1;
}

/* =====================================================================
   M26 lsq — 「問い」と「答え」を交互に
   よくある質問の手前に置く、確認の箇条書き。3〜5項目。
   ===================================================================== */
.pm-mock .pfg--lsq .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:10px !important;
}
.pm-mock .pfg--lsq .pfg-i{
  background:var(--ls-wash); border-radius:12px; padding:22px 28px 24px;
  display:grid !important; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; align-items:baseline;
}
.pm-mock .pfg--lsq .pfg-i::before{
  content:"?"; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; line-height:1; align-self:start;
  background:var(--ls-sky); color:#fff;
  font-family:'Poppins',sans-serif; font-size:16px; font-weight:700;
}
.pm-mock .pfg--lsq .pfg-t{ grid-column:2; font-size:18px !important; }
.pm-mock .pfg--lsq .pfg-l{ grid-column:2; }
.pm-mock .pfg--lsq .pfg-l li{ font-size:16px !important; }

/* ═══ スマホ（追加分） ═══════════════════════════════════════ */
@media (max-width:820px){
  .pm-mock .pfg--lsphotodot .pfg-items,
  .pm-mock .pfg--lsphototop .pfg-items,
  .pm-mock .pfg--lsphototop[data-n="3"] .pfg-items,
  .pm-mock .pfg--lsphotobg .pfg-items,
  .pm-mock .pfg--lsphotobg[data-n="3"] .pfg-items,
  .pm-mock .pfg--lsphotoband .pfg-items,
  .pm-mock .pfg--lstab .pfg-items,
  .pm-mock .pfg--lshead .pfg-items,
  .pm-mock .pfg--lshead[data-n="4"] .pfg-items,
  .pm-mock .pfg--lsside .pfg-items,
  .pm-mock .pfg--lscheck .pfg-items,
  .pm-mock .pfg--lsgroup .pfg-items,
  .pm-mock .pfg--lsfunnel .pfg-items,
  .pm-mock .pfg--lsfunnel[data-n="4"] .pfg-items{ grid-template-columns:minmax(0,1fr) !important; }

  .pm-mock .pfg--lsplain .pfg-items,
  .pm-mock .pfg--lsplain[data-n="3"] .pfg-items,
  .pm-mock .pfg--lsplain[data-n="6"] .pfg-items,
  .pm-mock .pfg--lsplain[data-n="9"] .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px 16px !important; }

  .pm-mock .pfg--lsphotoside .pfg-items{ grid-template-columns:minmax(0,1fr) !important; gap:18px 0 !important; }
  .pm-mock .pfg.pfg--lsphotoside .pfg-photo{ grid-column:1; grid-row:1; height:190px; min-height:0; }
  .pm-mock .pfg--lsphotoside .pfg-i{ grid-column:1; }

  .pm-mock .pfg--lswedge .pfg-items{ grid-auto-flow:row; grid-auto-columns:auto; gap:16px !important; }
  .pm-mock .pfg--lswedge .pfg-i::before{ padding:26px 20px 20px; font-size:34px; }

  .pm-mock .pfg--lsknot .pfg-i{ grid-template-columns:52px 22px minmax(0,1fr); }
  .pm-mock .pfg--lsknot .pfg-i::before{ width:52px; height:52px; font-size:17px; }
  .pm-mock .pfg--lsknot .pfg-body{ padding:18px 20px 20px; }

  .pm-mock .pfg--lstier .pfg-i{ grid-template-columns:minmax(0,1fr); gap:10px 0; }
  .pm-mock .pfg--lspile .pfg-i{ width:100% !important; grid-template-columns:minmax(0,1fr); }
  .pm-mock .pfg--lspile .pfg-l{ grid-column:1; }
}

/* =====================================================================
   M27 lsnumbox — 大きな数字を背面に敷いたボックス
   淡水色の角丸パネルの右下に、120pxの数字を薄く置く。2〜4項目。
   /inside_sales/ COMMON PITFALLS の数字の扱いを、箱の形に移したもの。
   ===================================================================== */
.pm-mock .pfg--lsnumbox .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
}
.pm-mock .pfg--lsnumbox .pfg-i{
  position:relative; overflow:hidden; background:var(--ls-wash);
  border-radius:14px; padding:28px 30px 30px; gap:13px;
}
.pm-mock .pfg--lsnumbox .pfg-i::before{
  content:counter(pfg); position:absolute; right:14px; bottom:-26px; z-index:0;
  font-family:'Poppins',sans-serif; font-size:132px; font-weight:700;
  line-height:.9; letter-spacing:-.05em; color:var(--ls-sky); opacity:.16;
}
.pm-mock .pfg--lsnumbox .pfg-i > *{ position:relative; z-index:1; }
.pm-mock .pfg--lsnumbox .pfg-t{ font-size:20px !important; padding-right:58px !important; }
.pm-mock .pfg--lsnumbox .pfg-l li{ font-size:16px !important; padding-right:76px !important; }

/* =====================================================================
   M28 lsnumout — 大きな数字が枠からはみ出すボックス
   白いカードの左上に、数字を枠の外まで出して置く。2〜4項目。
   ===================================================================== */
.pm-mock .pfg--lsnumout .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:26px 22px !important; padding-top:20px;
}
.pm-mock .pfg--lsnumout .pfg-i{
  position:relative; background:#fff; border:1.5px solid var(--ls-line2);
  border-radius:14px; padding:26px 30px 30px 74px; gap:13px;
}
.pm-mock .pfg--lsnumout .pfg-i::before{
  content:counter(pfg); position:absolute; left:14px; top:-18px; z-index:1;
  font-family:'Poppins',sans-serif; font-size:74px; font-weight:700;
  line-height:.9; letter-spacing:-.04em; color:var(--ls-sky);
}
.pm-mock .pfg--lsnumout .pfg-t{ font-size:19px !important; }
.pm-mock .pfg--lsnumout .pfg-l li{ font-size:16px !important; }

/* =====================================================================
   M29 lsnumrow — 大きな数字が左、右に見出しと本文
   /inside_sales/ COMMON PITFALLS と同じ組み方。枠は作らず、罫線で切る。
   1項目の説明が2〜4行。3〜5項目。
   ===================================================================== */
.pm-mock .pfg--lsnumrow .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:0 !important;
}
.pm-mock .pfg--lsnumrow .pfg-i{
  display:grid !important; grid-template-columns:124px minmax(0,1fr);
  column-gap:26px; row-gap:8px; align-items:center;
  padding:26px 0 28px; border-bottom:1px solid var(--ls-line);
}
.pm-mock .pfg--lsnumrow .pfg-i:first-child{ border-top:1px solid var(--ls-line); }
.pm-mock .pfg--lsnumrow .pfg-i::before{
  content:counter(pfg); grid-column:1; grid-row:1 / span 2;
  align-self:center; justify-self:center; text-align:center;
  font-family:'Poppins',sans-serif; font-size:92px; font-weight:700;
  line-height:.9; letter-spacing:-.04em; color:var(--ls-sky);
}
.pm-mock .pfg--lsnumrow .pfg-k{
  grid-column:2; align-self:end; margin-bottom:2px !important;
  font-size:12.5px !important; letter-spacing:.12em;
}
.pm-mock .pfg--lsnumrow .pfg-i:has(.pfg-k){ grid-template-rows:auto auto auto; }
.pm-mock .pfg--lsnumrow .pfg-i:has(.pfg-k)::before{ grid-row:1 / span 3; }
.pm-mock .pfg--lsnumrow .pfg-t{ grid-column:2; align-self:end; font-size:21px !important; font-weight:800 !important; }
.pm-mock .pfg--lsnumrow .pfg-l{ grid-column:2; align-self:start; }
.pm-mock .pfg--lsnumrow .pfg-l li{ font-size:16.5px !important; line-height:1.9 !important; }

@media (max-width:820px){
  .pm-mock .pfg--lsnumbox .pfg-items,
  .pm-mock .pfg--lsnumout .pfg-items{ grid-template-columns:minmax(0,1fr) !important; }
  .pm-mock .pfg--lsnumbox .pfg-i::before{ font-size:98px; }
  .pm-mock .pfg--lsnumout .pfg-i{ padding:24px 22px 26px 60px; }
  .pm-mock .pfg--lsnumout .pfg-i::before{ font-size:58px; top:-14px; left:12px; }
  .pm-mock .pfg--lsnumrow .pfg-i{ grid-template-columns:72px minmax(0,1fr); column-gap:16px; }
  .pm-mock .pfg--lsnumrow .pfg-i::before{ font-size:56px; }
  .pm-mock .pfg--lsnumrow .pfg-t{ font-size:19px !important; }
}

/* =====================================================================
   イラストを使う型（M30〜）
   ---------------------------------------------------------------------
   assets/img/illust/ は人物や机が入ったシーン図で、アイコンではない。
   小さく置くと何の絵か分からなくなるので、最低でも 150px は確保する。
   背景が透明なので、淡水色の面の上に置いて輪郭を出す。
   ===================================================================== */
.pm-mock .pfg[class*="pfg--ls"] .pfg-ill{
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.pm-mock .pfg[class*="pfg--ls"] .pfg-ill img{
  display:block; width:100%; height:100%; object-fit:contain;
}

/* =====================================================================
   M30 lsillrow — イラストが左、右に見出しと項目（左右交互）
   1項目に1枚。2〜4項目。説明が2〜4行あるとき。
   ===================================================================== */
.pm-mock .pfg--lsillrow .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:14px !important;
}
.pm-mock .pfg--lsillrow .pfg-i{
  display:grid !important; grid-template-columns:230px minmax(0,1fr);
  gap:0 30px; align-items:center;
  background:var(--ls-wash); border-radius:16px; padding:26px 32px 28px;
}
.pm-mock .pfg--lsillrow .pfg-i:nth-child(even){
  grid-template-columns:minmax(0,1fr) 230px; background:var(--ls-gray);
}
.pm-mock .pfg.pfg--lsillrow .pfg-ill{ grid-column:1; grid-row:1 / span 2; height:158px; }
.pm-mock .pfg.pfg--lsillrow .pfg-i:nth-child(even) .pfg-ill{ grid-column:2; }
.pm-mock .pfg--lsillrow .pfg-t{ grid-column:2; align-self:end; font-size:20px !important; }
.pm-mock .pfg--lsillrow .pfg-l{ grid-column:2; align-self:start; margin-top:8px !important; }
.pm-mock .pfg--lsillrow .pfg-i:nth-child(even) .pfg-t,
.pm-mock .pfg--lsillrow .pfg-i:nth-child(even) .pfg-l{ grid-column:1; }
.pm-mock .pfg--lsillrow .pfg-l li{ font-size:16px !important; }

/* =====================================================================
   M31 lsillcard — イラストが上、下に見出しと本文
   3〜4列のカード。1項目に1枚ずつイラストがあるとき。
   ===================================================================== */
.pm-mock .pfg--lsillcard .pfg-items{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
}
.pm-mock .pfg--lsillcard[data-n="3"] .pfg-items{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.pm-mock .pfg--lsillcard .pfg-i{
  background:var(--ls-wash); border-radius:14px; overflow:hidden;
  padding:0 0 26px; gap:0;
}
.pm-mock .pfg.pfg--lsillcard .pfg-ill{
  height:150px; background:var(--ls-pale); padding:20px 24px;
}
.pm-mock .pfg--lsillcard .pfg-t{ padding:22px 24px 0 !important; font-size:18px !important; }
/* 見出しの下に置く説明文（v2.55.3）*/
.pm-mock .pfg--lsillcard .pfg-c{
  display:block; padding:8px 24px 0 !important;
  font-size:14.5px !important; line-height:1.75 !important;
  color:var( --ls-sub ) !important;
}
.pm-mock .pfg--lsillcard .pfg-l{ padding:9px 24px 0 !important; }
.pm-mock .pfg--lsillcard .pfg-l li{ font-size:15px !important; color:var(--ls-sub) !important; }

/* =====================================================================
   M32 lsilldot — 淡水色の丸の中にイラスト
   カテゴリごとに1枚。2〜4項目。項目はチェックで並べる。
   ===================================================================== */
.pm-mock .pfg--lsilldot .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px !important;
}
.pm-mock .pfg--lsilldot .pfg-i{
  display:grid !important; grid-template-columns:150px minmax(0,1fr);
  gap:8px 24px; align-items:center;
}
.pm-mock .pfg.pfg--lsilldot .pfg-ill{
  grid-column:1; grid-row:1 / span 2; align-self:center;
  width:150px; height:150px; border-radius:50%;
  background:var(--ls-pale); padding:26px;
}
.pm-mock .pfg--lsilldot .pfg-t{ grid-column:2; align-self:end; font-size:19px !important; }
.pm-mock .pfg--lsilldot .pfg-l{ grid-column:2; align-self:start; gap:8px !important; }
.pm-mock .pfg--lsilldot .pfg-l li{
  position:relative; padding-left:26px !important; font-size:16px !important; line-height:1.66 !important;
}
.pm-mock .pfg--lsilldot .pfg-l li::before{
  content:"" !important; position:absolute; left:2px; top:.42em;
  width:13px; height:7px; border-left:2.4px solid var(--ls-sky) !important;
  border-bottom:2.4px solid var(--ls-sky) !important; transform:rotate(-45deg);
}

/* =====================================================================
   M33 lsillside — 大きなイラスト1枚＋項目リスト
   1枚のイラストに対して、項目が4〜8個ぶら下がるとき。
   ===================================================================== */
.pm-mock .pfg--lsillside .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) 340px !important;
  gap:0 34px !important; align-items:center; grid-auto-rows:min-content;
}
.pm-mock .pfg.pfg--lsillside .pfg-ill{
  grid-column:2; grid-row:1 / span 20; align-self:center;
  height:270px; background:var(--ls-wash); border-radius:16px; padding:26px 22px;
}
.pm-mock .pfg--lsillside .pfg-i{
  grid-column:1; padding:15px 0 16px; border-bottom:1px solid var(--ls-line);
  display:grid !important; grid-template-columns:auto minmax(0,1fr); gap:2px 16px; align-items:baseline;
}
.pm-mock .pfg--lsillside .pfg-i::before{
  content:""; width:11px; height:11px; background:var(--ls-sky); align-self:center;
}
.pm-mock .pfg--lsillside .pfg-t{ font-size:18px !important; }
.pm-mock .pfg--lsillside .pfg-l{ grid-column:2; }
.pm-mock .pfg--lsillside .pfg-l li{ font-size:15.5px !important; color:var(--ls-sub) !important; }

@media (max-width:820px){
  .pm-mock .pfg--lsillrow .pfg-i,
  .pm-mock .pfg--lsillrow .pfg-i:nth-child(even){ grid-template-columns:minmax(0,1fr); gap:12px 0; }
  .pm-mock .pfg.pfg--lsillrow .pfg-ill,
  .pm-mock .pfg.pfg--lsillrow .pfg-i:nth-child(even) .pfg-ill{ grid-column:1; grid-row:1; height:132px; }
  .pm-mock .pfg--lsillrow .pfg-t,
  .pm-mock .pfg--lsillrow .pfg-l,
  .pm-mock .pfg--lsillrow .pfg-i:nth-child(even) .pfg-t,
  .pm-mock .pfg--lsillrow .pfg-i:nth-child(even) .pfg-l{ grid-column:1; }

  .pm-mock .pfg--lsillcard .pfg-items,
  .pm-mock .pfg--lsillcard[data-n="3"] .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .pm-mock .pfg.pfg--lsillcard .pfg-ill{ height:118px; padding:14px 18px; }

  .pm-mock .pfg--lsilldot .pfg-items{ grid-template-columns:minmax(0,1fr) !important; }
  .pm-mock .pfg--lsilldot .pfg-i{ grid-template-columns:114px minmax(0,1fr); gap:6px 18px; }
  .pm-mock .pfg.pfg--lsilldot .pfg-ill{ width:114px; height:114px; padding:18px; }

  .pm-mock .pfg--lsillside .pfg-items{ grid-template-columns:minmax(0,1fr) !important; gap:16px 0 !important; }
  .pm-mock .pfg.pfg--lsillside .pfg-ill{ grid-column:1; grid-row:1; height:190px; }
  .pm-mock .pfg--lsillside .pfg-i{ grid-column:1; }
}

/* =====================================================================
   コントラストの底上げ（2026-09 監査）
   ---------------------------------------------------------------------
   ・明るい地に載る小さなスカイ文字（#1C93D2＝白地で 3.4:1）を濃くする
   ・見出し帯の文字は 17px → 19px（大きい文字の基準 3.0:1 に乗せる）
   ※ .pfg--fw* は自前で色を持っているので対象から外す
   ===================================================================== */
.pm-mock .pfg:not([class*="pfg--fw"]) .pfg-k{ color:#15719F !important; }
.pm-mock .pfg:not([class*="pfg--fw"]) .pfg-ct{ color:#15719F; }
.pm-mock .pfg--fxmatrix b{ color:#15719F !important; }
.pm-mock .pfg--lshead .pfg-t{ font-size:19px !important; }
.pm-mock .pfg--lsdot .pfg-t{ font-size:19px !important; }
.pm-mock .pfg--lanebadge .pfg-ct{ font-size:19px; }
/* レーンの白文字（濃いグレー地・スカイ地）は不透明にする */
.pm-mock .pfg--fwlanes .pfg-cell--h .pfg-ct,
.pm-mock .pfg--fwlanes .pfg-cell--r .pfg-ct{ font-size:19px !important; }
.pm-mock .pfg--fwlanes .pfg-cell--h .pfg-cl,
.pm-mock .pfg--fwlanes .pfg-cell--r .pfg-cl{ color:#fff !important; }
/* 上の指定より詳細度が高い既存ルールへの対応（2026-09 監査の残り） */
.pm-mock .pfg--fxmatrix .fx-mx td b,
.pm-mock .pfg--fxmatrix .fx-mx b{ color:#15719F !important; }
.pm-mock .pfg--lanebadge .pfg-lane[data-tone="ok"] .pfg-cell--r .pfg-ct{ color:#15719F !important; }
.pm-mock .pfg--lanebadge .pfg-cell--r .pfg-ct{ font-size:19px !important; }
.pm-mock .pfg--fwrelay .pfg-i:nth-child(-n+2) .pfg-k{ color:#fff !important; }
.pm-mock .pfg--fwrelay .pfg-i:nth-child(3) .pfg-l li{ color:#5C6B80 !important; }

/* =====================================================================
   面と地のコントラスト（v2.23.0）
   ---------------------------------------------------------------------
   図版の淡い面（#F4F7FB など）は、淡グレーのセクション（#F3F6F9）の
   上に載ると地と同化して輪郭が消えていた（/abm/ WHY LETTER など）。
   ・載っているセクションの地に合わせて、面の明度をずらす
   ・切り抜き（clip-path）を使っていない面には細い罫線を足す
     （切り抜いた面は罫線が出ないので、塗りの差だけで見せる）
   ===================================================================== */

/* ---- 1. 淡い地のセクションの上では、図版の淡い面を白へ寄せる -------- */
.pm-mock :is(.lpr-sec--alt,.lpr-sec--pale,.sec-alt,.svc-cat--tint,.faq) .pfg[class*="pfg--fw"]{
  --fw-tint:#FFFFFF; --fw-gray:#E8EDF4; --fw-gray2:#D2DBE6; --fw-pale:#E3F0FB;
}
.pm-mock :is(.lpr-sec--alt,.lpr-sec--pale,.sec-alt,.svc-cat--tint,.faq) .pfg[class*="pfg--ls"]{
  --ls-tint:#FFFFFF; --ls-wash:#FFFFFF; --ls-gray:#E8EDF4; --ls-gray2:#D2DBE6;
  --ls-pale:#E3F0FB;
}

/* ---- 2. 罫線を1段はっきりさせる（薄すぎて枠が消えていた）---------- */
.pm-mock .pfg[class*="pfg--fw"]{ --fw-line:#D9E1EC; }
.pm-mock .pfg[class*="pfg--ls"]{ --ls-line:#D9E1EC; }

/* ---- 3. 切り抜いていない淡い面に細い罫線を足す ---------------------- */
.pm-mock .pfg[class*="pfg--fw"] :is(.pfg-i,.pfg-body,.pfg-ill,.pfg-l,.pfg-g),
.pm-mock .pfg[class*="pfg--ls"] :is(.pfg-i,.pfg-body,.pfg-ill,.pfg-l){
  border-color:#D9E1EC;
}
.pm-mock .pfg--fwfoot .pfg-body,
.pm-mock .pfg--fwarc .pfg-body,
.pm-mock .pfg--fwpanel .pfg-body,
.pm-mock .pfg--fwgate .pfg-i,
.pm-mock .pfg--fwladder .pfg-i,
.pm-mock .pfg--fwhex .pfg-i,
.pm-mock .pfg--fwbignum .pfg-i,
.pm-mock .pfg--fwtop .pfg-i,
.pm-mock .pfg--fwpill .pfg-i,
.pm-mock .pfg--fwdot .pfg-i,
.pm-mock .pfg[class*="pfg--ls"] .pfg-i,
.pm-mock .pfg[class*="pfg--ls"] .pfg-ill,
.pm-mock .pfg[class*="pfg--ls"] .pfg-l[style],
.pm-mock .pfg[class*="pfg--fw"] .pfg-ill,
.pm-mock .pfg--fwladder .pfg-body,
.pm-mock .pfg--lsknot .pfg-body,
.pm-mock .pfg--lshead .pfg-l,
.pm-mock .pfg--fwtime .pfg-i{
  border:1px solid #D9E1EC;
}
/* 濃い面・写真の枠には罫線を出さない */
.pm-mock .pfg[class*="pfg--fw"] .pfg-photo,
.pm-mock .pfg[class*="pfg--ls"] .pfg-photo,
.pm-mock .pfg--fwarrow .pfg-i,
.pm-mock .pfg--fwchev .pfg-i,
.pm-mock .pfg--fwrelay .pfg-i,
.pm-mock .pfg--lsphotobg .pfg-i,
.pm-mock .pfg--fwgrade .pfg-i{ border:0; }
.pm-mock .pfg--fwgrade .pfg-g[style*="--g:2"]{ border-color:#C2DAEE; }
.pm-mock .pfg--fwgrade .pfg-g[style*="--g:3"]{ border-color:var(--fw-3); }

/* ---- 4. 切り抜いた面（矢羽根・シェブロン）は塗りの差だけで見せる ---- */
.pm-mock .pfg--fwlanes .pfg-cell:nth-child(2){ background:#E7EEF7; }
.pm-mock .pfg--fwlanes .pfg-lane[data-tone="ng"] .pfg-cell:nth-child(2){ background:#E4E8EE; }
.pm-mock .pfg--fwlanes .pfg-lane[data-tone="ok"] .pfg-cell:nth-child(2){ background:#D8E8F7; }
.pm-mock :is(.lpr-sec--alt,.lpr-sec--pale,.sec-alt,.svc-cat--tint) .pfg--fwlanes .pfg-cell:nth-child(2){
  background:#DFE8F3;
}
.pm-mock :is(.lpr-sec--alt,.lpr-sec--pale,.sec-alt,.svc-cat--tint) .pfg--fwlanes .pfg-lane[data-tone="ng"] .pfg-cell:nth-child(2){
  background:#DEE3EA;
}
.pm-mock :is(.lpr-sec--alt,.lpr-sec--pale,.sec-alt,.svc-cat--tint) .pfg--fwlanes .pfg-lane[data-tone="ok"] .pfg-cell:nth-child(2){
  background:#D3E4F5;
}
.pm-mock .pfg .fx-gap,
.pm-mock .pfg--fxdrop .fx-gap,
.pm-mock .pfg--fxgate .fx-drop{ background:#DCE4F0 !important; }
/* 中央セルの地を1段落とした分、副文も1段濃くする */
.pm-mock .pfg--fwlanes .pfg-cell:nth-child(2) .pfg-cl{ color:#4B586B !important; }

/* 3C のベン図の注釈（.pfg--vennrow）──
   図に付随する説明文なので、箇条書きの体裁にしない。
   行頭の <b> が段落として折れていたのを止め、円の色と注釈の色を合わせる。 */
.pm-mock .pfg--vennrow .pfg-l li > b:first-child{ display:inline !important; }
/* 円の色と注釈の縦罫をそろえる（--dot は各項目の style で指定） */
.pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i{ border-left-color:var(--dot,#9CC4E4) !important; }
.pm-mock .pfg--vennrow .pfg-l li + li{ margin-top:9px; }
.pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i{
  border-left-width:3px; padding-left:15px;
}
.pm-mock .pfg--vennrow .pfg-k{ letter-spacing:.1em; font-size:12.5px; }
.pm-mock .pfg--vennrow .pfg-t{ margin-bottom:7px; }

/* スマホでは「リード文 → ベン図 → 01→02→03 → 下の2点」の順に積む */
@media (max-width:980px){
  .pm-mock .hub-body .c3--ring{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:none !important;
    gap:18px 0 !important;
  }
  .pm-mock .hub-body .c3--ring .pfg--vennrow > .pfg-lead{
    grid-column:1 !important; grid-row:auto !important; order:1;
  }
  .pm-mock .hub-body .c3--ring > .c3-venn{
    grid-column:1 !important; grid-row:auto !important; order:2;
    max-width:420px; margin:0 auto !important;
  }
  .pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i{
    grid-column:1 !important; grid-row:auto !important; order:3;
    align-self:auto !important;
  }
  .pm-mock .hub-body .c3--ring > .c3-side{
    grid-column:1 !important; grid-row:auto !important; order:4;
  }
}

/* 写真を斜めに切る型（photowedge）。淡い地の上で輪郭が消えないようにするが、
   斜めの面を長方形の罫線で囲うと切り口と枠がぶつかるので、面の色だけで見せる（v2.28.0） */
.pm-mock .pfg--photowedge .pfg-row{ background:#E3ECF8; }
.pm-mock :is(.lpr-sec--alt,.lpr-sec--pale,.sec-alt,.svc-cat--tint,.faq) .pfg--photowedge .pfg-row{
  background:#DCE6F5;
}

/* =====================================================================
   v2.28.0 — M8 lsphototop を2列でも使えるようにする
   （既定は4列、data-n="3" で3列。2枚だけのときに4列のままだと
     カードが細くなりすぎて本文が読めなくなるため）
   ===================================================================== */
.pm-mock .pfg--lsphototop[data-n="2"] .pfg-items{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
@media (max-width:820px){
  .pm-mock .pfg--lsphototop[data-n="2"] .pfg-items{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* ---------------------------------------------------------------------
   v2.28.0 — スマホで1列に落ちていなかった型を直す
   ・M2 lsbig は畳む指定が無く、390px でも3列のまま縦書きのように潰れていた
   ・lshead[data-n="2"] は詳細度が高く、下の1列指定に勝ってしまっていた
   （PCの見た目は変えない。狭い幅のときだけ効く）
   --------------------------------------------------------------------- */
@media (max-width:820px){
  .pm-mock .pfg--lsbig .pfg-items,
  .pm-mock .pfg--lsbig[data-n="3"] .pfg-items,
  .pm-mock .pfg--lshead[data-n="2"] .pfg-items{
    grid-template-columns:minmax(0,1fr) !important;
  }
}


/* =====================================================================
   v2.28.0 — 斜めに切った面を、長方形の罫線で囲わない
   ---------------------------------------------------------------------
   v2.23.0 で「面と地の境目が消える箱」に一律で細い罫線を入れたが、
   中身が台形・矢羽根の型では、切り口の外側に三角形の余りが見えて
   「長方形で囲われている」ように見えていた。
   これらは面の色そのものが濃いので、罫線が無くても輪郭は分かる。
   ===================================================================== */
.pm-mock .pfg--lswedge .pfg-i,          /* 上辺を斜めに切った数字の帯 */
.pm-mock .pfg--fwtop .pfg-i,            /* 矢羽根のタグを内側に持つ段 */
.pm-mock .pfg--fwgate .pfg-i{           /* 自分自身を切り抜いている段 */
  border:0 !important;
}
/* 罫線を外したぶん、淡い地の上でも段が見えるように、本文側の面を用意する */
.pm-mock .pfg--fwtop .pfg-body{ background:#F7FAFD; }
.pm-mock :is(.lpr-sec--alt,.lpr-sec--pale,.sec-alt,.svc-cat--tint,.faq) .pfg--fwtop .pfg-body{
  background:#FFFFFF;
}

/* =====================================================================
   v2.28.0 — 2列のグリッドで、最後の1枚が余って穴が空くのを防ぐ
   3個・5個・7個のとき、右下に空きマスができて「作りかけ」に見えていた。
   最後の1枚を2列ぶんに広げて、面として閉じる。
   ===================================================================== */
.pm-mock :is(.pfg--lsnumbox,.pfg--lsnumout,.pfg--lscheck,.pfg--lstab,
             .pfg--lsphotodot,.pfg--lsbig) .pfg-items > .pfg-i:last-child:nth-child(odd){
  grid-column:1 / -1;
}


/* =====================================================================
   v2.30.0 — M9 lsphotobg（写真を地に敷く型）の作り直し
   ぼかした写真だと何の写真か分からず、文字も地に沈んで読みづらかった。
   写真は上側をそのまま見せ、文字が乗る下側だけを白く覆う。

   ===================================================================== */
.pm-mock .pfg.pfg--lsphotobg .pfg-photo img{
  /* v2.30.0 — ぼかしと白黒をやめ、写真が何か分かる状態に戻す */
  filter:saturate(.82) contrast(1.02);
  transform:scale(1.02);
}
.pm-mock .pfg.pfg--lsphotobg .pfg-photo::after{
  /* 文字が乗る下側だけを白いベールで覆い、上側は写真をそのまま見せる */
  background:linear-gradient(to top,
    rgba(240,247,252,1) 0%, rgba(240,247,252,.985) 38%,
    rgba(240,247,252,.86) 52%, rgba(240,247,252,.12) 100%);
}
.pm-mock :is(.lpr-sec--alt,.lpr-sec--pale,.sec-alt,.svc-cat--tint,.faq) .pfg--lsphotobg .pfg-photo::after{
  background:linear-gradient(to top,
    rgba(255,255,255,1) 0%, rgba(255,255,255,.985) 38%,
    rgba(255,255,255,.86) 52%, rgba(255,255,255,.12) 100%);
}
.pm-mock .pfg--lsphotobg .pfg-t{ text-shadow:none; }
/* 写真が見える高さを確保し、文字は下端から積む */
.pm-mock .pfg--lsphotobg .pfg-i{
  min-height:250px; justify-content:flex-end; padding-top:20px;
}
@media (max-width:820px){
  .pm-mock .pfg--lsphotobg .pfg-i{ min-height:215px; }
}

/* 5項目を4列で並べると、2段目に1枚だけ残って大きく空く。最後の1枚で段を埋める */
/* 5枚を4列で並べると2段目に1枚だけ残る。上段3枚・下段2枚に割り振る */
@media (min-width:821px){
  .pm-mock .pfg--lsplain[data-n="5"] .pfg-items{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
  .pm-mock .pfg--lsplain[data-n="5"] .pfg-items > .pfg-i:nth-child(-n+3){ grid-column:span 2 !important; }
  .pm-mock .pfg--lsplain[data-n="5"] .pfg-items > .pfg-i:nth-child(n+4){ grid-column:span 3 !important; }
}

/* =====================================================================
   v2.28.1 — 端数が出る枚数のとき、最後の1枚だけ横いっぱいに伸びる問題
   2列組みの型で「3枚・5枚・7枚」のとき、最後の1枚が行いっぱいまで
   伸びて、文字が左の2〜3割で終わり、右側が大きく空いて見えていた。
   行ごとに枚数を割り振って、どの段も同じ幅でそろうようにする。
   ===================================================================== */
@media (min-width:821px){
  /* 3枚・6枚：3列 */
  .pm-mock :is(.pfg--lsnumbox,.pfg--lsnumout,.pfg--lscheck,.pfg--lstab,
               .pfg--lsphotodot,.pfg--lsbig):is([data-n="3"],[data-n="6"]) .pfg-items{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .pm-mock :is(.pfg--lsnumbox,.pfg--lsnumout,.pfg--lscheck,.pfg--lstab,
               .pfg--lsphotodot,.pfg--lsbig)[data-n="3"] .pfg-items > .pfg-i{
    grid-column:auto !important;
  }

  /* 5枚：上段3枚・下段2枚（6分割して2:2:2 / 3:3） */
  .pm-mock :is(.pfg--lsnumbox,.pfg--lsnumout,.pfg--lscheck,.pfg--lstab,
               .pfg--lsphotodot,.pfg--lsbig)[data-n="5"] .pfg-items{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
  .pm-mock :is(.pfg--lsnumbox,.pfg--lsnumout,.pfg--lscheck,.pfg--lstab,
               .pfg--lsphotodot,.pfg--lsbig)[data-n="5"] .pfg-items > .pfg-i:nth-child(-n+3){
    grid-column:span 2 !important;
  }
  .pm-mock :is(.pfg--lsnumbox,.pfg--lsnumout,.pfg--lscheck,.pfg--lstab,
               .pfg--lsphotodot,.pfg--lsbig)[data-n="5"] .pfg-items > .pfg-i:nth-child(n+4){
    grid-column:span 3 !important;
  }

  /* 7枚：上段4枚・下段3枚（12分割して3:3:3:3 / 4:4:4） */
  .pm-mock :is(.pfg--lsnumbox,.pfg--lsnumout,.pfg--lscheck,.pfg--lstab,
               .pfg--lsphotodot,.pfg--lsbig)[data-n="7"] .pfg-items{
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  }
  .pm-mock :is(.pfg--lsnumbox,.pfg--lsnumout,.pfg--lscheck,.pfg--lstab,
               .pfg--lsphotodot,.pfg--lsbig)[data-n="7"] .pfg-items > .pfg-i:nth-child(-n+4){
    grid-column:span 3 !important;
  }
  .pm-mock :is(.pfg--lsnumbox,.pfg--lsnumout,.pfg--lscheck,.pfg--lstab,
               .pfg--lsphotodot,.pfg--lsbig)[data-n="7"] .pfg-items > .pfg-i:nth-child(n+5){
    grid-column:span 4 !important;
  }
}

/* =====================================================================
   v2.28.1 — M10 lsphotoside の右側が大きく空いていた
   見出しの下に短い行を積んでいたため、1行あたり3〜4割しか使えておらず、
   右に白い帯が残っていた。見出しと箇条書きを横に並べて幅を使い切る。
   ===================================================================== */
@media (min-width:821px){
  .pm-mock .pfg--lsphotoside .pfg-i{
    grid-template-columns:auto minmax(0,.85fr) minmax(0,1.15fr) !important;
    gap:2px 20px !important;
  }
  .pm-mock .pfg--lsphotoside .pfg-t{ text-wrap:pretty; }
  .pm-mock .pfg--lsphotoside .pfg-t{ grid-column:2 !important; }
  .pm-mock .pfg--lsphotoside .pfg-l{ grid-column:3 !important; }
}

/* =====================================================================
   v2.29.0 — M12 lswedge に小見出しを添える（pfg--wlabel）
   強みページ③の5ステップが「TRACTION5の5ステージ」と誤解されるため、
   台形の数字を 01〜05 にして、その下に「支援範囲」と添える。
   この組み合わせを使うのは、この figure だけ。
   ===================================================================== */
.pm-mock .pfg--lswedge.pfg--wlabel .pfg-i::before{
  content:counter(pfg,decimal-leading-zero);
}
.pm-mock .pfg--lswedge.pfg--wlabel .pfg-k{
  display:block !important; align-self:stretch !important;
  text-align:center !important; padding:14px 10px 0 !important;
  font-size:12.5px !important; letter-spacing:.1em; color:var(--ls-sub) !important;
}
.pm-mock .pfg--lswedge.pfg--wlabel .pfg-k + .pfg-t{ padding-top:4px !important; }

/* =====================================================================
   v2.29.0 — M14 photowedge の項目に強弱をつける
   見出しと説明文が同じ大きさで、4つ並ぶと平坦に見えていた。
   ===================================================================== */
.pm-mock .pfg--photowedge .pfg-i .pfg-t{ font-size:19px !important; }
.pm-mock .pfg--photowedge .pfg-i .pfg-c{ font-size:15.5px !important; }
.pm-mock .pfg--photowedge .pfg-i .pfg-l li{ font-size:15.5px !important; }

/* 4枚の lstab は1枚あたりの文字数が少なく、2列だと右半分が大きく空く。
   飾りの数字も持たない型なので、4列に並べて幅を使い切る（v2.29.0） */
@media (min-width:821px){
  .pm-mock .pfg--lstab[data-n="4"] .pfg-items{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* =====================================================================
   M30 lsarch — アーチ型の見出し面＋塗りバーの箇条書き（v2.30.0）
   上辺をアーチに切った淡い面に大きな番号と見出しを置き、
   その下に分類・説明文・塗りバーの箇条書きを縦に積む。横2〜4列。
   項目ごとに「何を提供するか」を短い語で並べたいときに使う。
   markup: .pfg-i > .pfg-t（見出し）/ .pfg-k（分類）/ .pfg-c（説明）/ .pfg-l li（バー）
   ===================================================================== */
.pm-mock .pfg--lsarch .pfg-items{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:22px !important; align-items:stretch;
}
.pm-mock .pfg--lsarch[data-n="4"] .pfg-items{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.pm-mock .pfg--lsarch[data-n="2"] .pfg-items{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.pm-mock .pfg.pfg--lsarch .pfg-i{
  position:relative; overflow:hidden;
  background:#fff !important; border:1px solid var(--ls-line) !important;
  border-radius:150px 150px 14px 14px !important;
  padding:0 22px 24px !important;
  display:flex !important; flex-direction:column; gap:0;
}
.pm-mock .pfg.pfg--lsarch .pfg-i::before{
  content:counter(pfg,decimal-leading-zero);
  position:absolute; inset:0 0 auto 0; height:138px; z-index:0;
  background:var(--ls-tint); border-radius:150px 150px 0 0;
  padding-top:24px; text-align:center;
  font-family:'Poppins',sans-serif; font-size:50px; font-weight:700; line-height:1;
  color:var(--ls-sky);
}
.pm-mock .pfg.pfg--lsarch .pfg-t{
  position:relative; z-index:1; display:block !important; align-self:stretch !important;
  margin-top:88px !important;
  text-align:center; font-size:17.5px !important; font-weight:700 !important;
  line-height:1.6 !important; color:var(--ls-skytext) !important;
}
.pm-mock .pfg.pfg--lsarch .pfg-k{
  position:relative; z-index:1; display:block !important; align-self:stretch !important;
  margin-top:22px !important; text-align:center !important;
  font-family:inherit !important; letter-spacing:0 !important;
  font-size:16.5px !important; font-weight:700 !important; color:var(--ls-ink) !important;
}
.pm-mock .pfg.pfg--lsarch .pfg-c{
  display:block !important; align-self:stretch !important; text-align:center !important;
  margin-top:8px !important;
  font-size:15.5px !important; line-height:1.9 !important; color:var(--ls-sub) !important;
  text-wrap:balance;
}
.pm-mock .pfg.pfg--lsarch .pfg-l{
  margin-top:18px !important; display:flex !important; flex-direction:column; gap:8px !important;
  padding:0 !important; list-style:none !important;
}
.pm-mock .pfg.pfg--lsarch .pfg-l li{
  display:block !important; list-style:none !important;
  /* 白文字のコントラストを確保するため、塗りは濃いほうの青を使う */
  background:var(--ls-skybg) !important; color:#fff !important;
  padding:11px 15px !important; margin:0 !important;
  font-size:15px !important; line-height:1.65 !important;
}
.pm-mock .pfg.pfg--lsarch .pfg-l li::before,
.pm-mock .pfg.pfg--lsarch .pfg-l li::marker{ content:none !important; display:none !important; }
@media (max-width:820px){
  .pm-mock .pfg--lsarch .pfg-items,
  .pm-mock .pfg--lsarch[data-n="4"] .pfg-items,
  .pm-mock .pfg--lsarch[data-n="2"] .pfg-items{
    grid-template-columns:minmax(0,1fr) !important; gap:24px !important; }
  .pm-mock .pfg.pfg--lsarch .pfg-i{ border-radius:120px 120px 14px 14px !important; }
  .pm-mock .pfg.pfg--lsarch .pfg-i::before{ height:118px; font-size:40px; padding-top:18px; border-radius:120px 120px 0 0; }
  .pm-mock .pfg.pfg--lsarch .pfg-t{ margin-top:70px !important; }
}

/* =====================================================================
   M31 lsbadge — 塗りの角丸面＋上辺にかかる丸番号（v2.30.0）
   短い項目を横に並べ、番号を面の上辺に半分かけて置く。横3〜5列。
   言い切りの短文を等間隔で並べたいときに使う。
   markup: .pfg-i > .pfg-t（見出し）/ .pfg-c（補足・任意）/ .pfg-l li（任意）
   ===================================================================== */
.pm-mock .pfg--lsbadge .pfg-items{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important; align-items:stretch; margin-top:22px !important;
}
.pm-mock .pfg--lsbadge[data-n="4"] .pfg-items{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.pm-mock .pfg--lsbadge[data-n="5"] .pfg-items{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
.pm-mock .pfg.pfg--lsbadge .pfg-i{
  position:relative; margin-top:21px;
  background:var(--ls-skybg) !important; border:0 !important; border-radius:14px !important;
  padding:40px 20px 24px !important; text-align:center;
  display:flex !important; flex-direction:column; gap:8px;
}
.pm-mock .pfg.pfg--lsbadge .pfg-i::before{
  content:counter(pfg,decimal-leading-zero);
  position:absolute; top:-21px; left:50%; transform:translateX(-50%);
  width:42px; height:42px; border-radius:50%;
  background:#fff; border:2px solid var(--ls-skybg); box-sizing:border-box;
  font-family:'Poppins',sans-serif; font-size:14px; font-weight:700; line-height:38px;
  color:var(--ls-skybg); text-align:center;
}
.pm-mock .pfg.pfg--lsbadge .pfg-k{
  display:block !important; align-self:stretch !important; text-align:center !important;
  font-size:12.5px !important; letter-spacing:.1em; color:rgba(255,255,255,.82) !important;
  margin:0 0 2px !important;
}
.pm-mock .pfg.pfg--lsbadge .pfg-t{
  display:block !important; align-self:stretch !important; text-align:center !important;
  font-size:17px !important; font-weight:700 !important;
  line-height:1.6 !important; color:#fff !important;
}
.pm-mock .pfg.pfg--lsbadge .pfg-c{
  display:block !important; align-self:stretch !important; text-align:center !important;
  font-size:15px !important; line-height:1.8 !important;
  color:rgba(255,255,255,.92) !important;
}
.pm-mock .pfg.pfg--lsbadge .pfg-l{ padding:0 !important; list-style:none !important; margin:4px 0 0 !important; }
.pm-mock .pfg.pfg--lsbadge .pfg-l li{
  display:block !important; list-style:none !important; text-align:center !important;
  font-size:14px !important; line-height:1.8 !important; color:rgba(255,255,255,.92) !important;
  margin:0 !important;
}
.pm-mock .pfg--lsbadge .pfg-l li::before,
.pm-mock .pfg--lsbadge .pfg-l li::marker{ content:none !important; }
@media (max-width:820px){
  .pm-mock .pfg--lsbadge .pfg-items,
  .pm-mock .pfg--lsbadge[data-n="4"] .pfg-items,
  .pm-mock .pfg--lsbadge[data-n="5"] .pfg-items{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* =====================================================================
   M32 lsphotocell — カードの並びの中に、横長の実写を1マス分はめ込む（v2.31.0）
   写真の列を別に立てると縦が伸びるため、カードと同じ升目に写真を置く。
   6枚なら 4列×2段で、右下2マスが写真。写真は横位置のものを使う。
   ===================================================================== */
@media (min-width:821px){
  .pm-mock .pfg--lsphotocell[data-n="6"] .pfg-items{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,auto) !important;
    gap:14px !important; align-items:stretch;
  }
  .pm-mock .pfg--lsphotocell[data-n="5"] .pfg-items{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,auto) !important;
    gap:14px !important; align-items:stretch;
  }
  .pm-mock .pfg--lsphotocell .pfg-items > .pfg-i{ grid-column:auto !important; }
  .pm-mock .pfg.pfg--lsphotocell .pfg-photo{
    grid-column:span 2; align-self:stretch;
    border-radius:14px; overflow:hidden; background:var(--ls-pale);
  }
  .pm-mock .pfg.pfg--lsphotocell[data-n="5"] .pfg-photo{ grid-column:span 1; }
  .pm-mock .pfg.pfg--lsphotocell .pfg-photo img{
    width:100%; height:100%; object-fit:cover;
    object-position:var(--fx,50%) var(--fy,50%);
  }
}
@media (max-width:820px){
  .pm-mock .pfg.pfg--lsphotocell .pfg-photo{ height:180px; border-radius:12px; overflow:hidden; }
  .pm-mock .pfg.pfg--lsphotocell .pfg-photo img{ width:100%; height:100%; object-fit:cover; }
}


/* =====================================================================
   M33 pfg-note--photo — 図版の注記の帯に、横長の実写を敷く（v2.31.0）
   写真のために段を増やすと縦が伸びるので、もともとある注記の帯を
   そのまま写真の置き場にする。文字は左、写真は右に見えるようにする。
   markup: <p class="pfg-note pfg-note--photo" style="--bg:url(…)">
   ===================================================================== */
.pm-mock .pfg .pfg-note--photo{
  position:relative; isolation:isolate; overflow:hidden;
  border-left:0 !important; border-radius:12px;
  min-height:124px; display:flex; align-items:center;
  padding:18px 26px !important;
  background:var(--ls-pale) !important;
}
.pm-mock .pfg .pfg-note--photo::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--bg); background-size:cover;
  background-position:var(--fx,50%) var(--fy,52%);
}
.pm-mock .pfg .pfg-note--photo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 40%,
    rgba(255,255,255,.42) 62%, rgba(255,255,255,0) 84%);
}
@media (max-width:820px){
  .pm-mock .pfg .pfg-note--photo{ min-height:0; padding:14px 16px !important; }
  .pm-mock .pfg .pfg-note--photo::after{
    background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 100%); }
}

/* =====================================================================
   v2.32.0 — M12 lswedge：数字の帯の下に、区切りの線を戻す
   v2.28.0 で「斜めの面を長方形の枠が囲っている」違和感を取るため
   枠をすべて外したが、列の区切りが分からなくなっていた。
   斜めに切った数字の帯には枠を付けず、その下の本文だけを囲う。
   ===================================================================== */
.pm-mock .pfg--lswedge .pfg-i::after{
  content:""; position:absolute; left:0; right:0; top:110px; bottom:0;
  border:1px solid var(--ls-line); border-top:0; border-radius:0 0 10px 10px;
  pointer-events:none;
}
@media (max-width:820px){
  .pm-mock .pfg--lswedge .pfg-i::after{ top:80px; }
}

/* =====================================================================
   M34 lsstage — 斜めに切った帯を左から右へ濃くしていく（v2.32.0）
   /method/ の「5つのステージ」と同じ見せ方を、図版の型として用意する。
   工程が左から右へ進むことを、枠ではなく面の濃さと斜めの境目で表す。
   4〜6項目。markup: .pfg-i > .pfg-t（見出し）/ .pfg-c（補足）/ .pfg-l li（説明）
   ===================================================================== */
.pm-mock .pfg--lsstage .pfg-items{
  --slant:22px;
  display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:0 !important; margin-top:20px !important; align-items:stretch;
}
.pm-mock .pfg--lsstage[data-n="4"] .pfg-items{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.pm-mock .pfg--lsstage[data-n="6"] .pfg-items{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; --slant:18px; }
.pm-mock .pfg.pfg--lsstage .pfg-i{
  position:relative; border:0 !important; gap:0 !important;
  background:#F4F8FE;
  margin-left:calc(var(--slant) * -1);
  padding:26px 18px 28px calc(18px + var(--slant)) !important;
  clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
}
.pm-mock .pfg.pfg--lsstage .pfg-i:first-child{
  margin-left:0; padding-left:18px !important;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
}
.pm-mock .pfg.pfg--lsstage .pfg-i:last-child{
  clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%);
}
.pm-mock .pfg.pfg--lsstage .pfg-i:nth-child(1){ background:#FBFCFE; }
.pm-mock .pfg.pfg--lsstage .pfg-i:nth-child(2){ background:#F4F8FE; }
.pm-mock .pfg.pfg--lsstage .pfg-i:nth-child(3){ background:#EDF3FD; }
.pm-mock .pfg.pfg--lsstage .pfg-i:nth-child(4){ background:#E6EEFC; }
.pm-mock .pfg.pfg--lsstage .pfg-i:nth-child(5){ background:#DFE9FB; }
.pm-mock .pfg.pfg--lsstage .pfg-i:nth-child(6){ background:#D8E4FA; }
.pm-mock .pfg.pfg--lsstage .pfg-i::before{
  content:counter(pfg,decimal-leading-zero); display:block;
  margin:0 0 12px; font-family:'Poppins',sans-serif; font-weight:700;
  font-size:clamp(34px,2.8vw,50px); line-height:1; color:var(--ls-sky);
}
.pm-mock .pfg.pfg--lsstage .pfg-t{
  display:block !important; margin:0 0 3px !important;
  font-size:18.5px !important; font-weight:900 !important;
  line-height:1.5 !important; color:var(--ls-ink) !important;
}
.pm-mock .pfg.pfg--lsstage .pfg-k{
  display:block !important; align-self:stretch !important;
  margin:0 0 12px !important; font-family:inherit !important;
  font-size:13.5px !important; letter-spacing:.04em;
  color:var(--ls-sub) !important;
}
.pm-mock .pfg.pfg--lsstage .pfg-c{
  display:block !important; margin:0 0 12px !important;
  font-size:13.5px !important; letter-spacing:.04em; line-height:1.7 !important;
  color:var(--ls-sub) !important;
}
.pm-mock .pfg.pfg--lsstage .pfg-l{ gap:6px !important; }
.pm-mock .pfg.pfg--lsstage .pfg-l li{
  font-size:15px !important; line-height:1.9 !important; color:var(--ls-ink) !important;
}
@media (max-width:820px){
  .pm-mock .pfg--lsstage .pfg-items,
  .pm-mock .pfg--lsstage[data-n="4"] .pfg-items,
  .pm-mock .pfg--lsstage[data-n="6"] .pfg-items{
    grid-template-columns:minmax(0,1fr) !important; --slant:0px; gap:10px !important; }
  .pm-mock .pfg.pfg--lsstage .pfg-i{
    margin-left:0; padding:20px 18px 22px !important; clip-path:none !important; border-radius:10px;
  }
  .pm-mock .pfg.pfg--lsstage .pfg-i:first-child,
  .pm-mock .pfg.pfg--lsstage .pfg-i:last-child{ clip-path:none !important; }
}

/* ============================================================================
 * 本文中のCTAボタン（v2.34.0）
 *   セクションの中の末尾に、ボタンを1つだけ置く。帯や見出しは付けない。
 *   LP・ハブ型・課題ページの3種すべてで読む必要があるため、このファイルに置いている。
 *   置く本数はページの高さから決めている（約5,500pxごと・最大3本）。
 * ========================================================================= */
.pm-mock .pm-icta{
  margin:40px 0 0 !important; padding:0 !important;
  display:flex; justify-content:center; background:none !important; border:0 !important;
}
/* HERO や最終CTAのボタン（.lpr-btn--primary）と同じ見た目にそろえる。
   角は落とさない（スクエア）、水色の地に白文字。
   contrast.css の .hub-body a などに負けないよう .pm-icta a.pm-icta-btn で書く。 */
.pm-mock .pm-icta a.pm-icta-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:0 !important;
  background:var(--sky,#1C93D2); color:#fff !important;
  border:2px solid var(--sky,#1C93D2);
  font-size:19px; font-weight:900; line-height:1.4; text-decoration:none;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.pm-mock .pm-icta a.pm-icta-btn :is(span,em){ color:#fff !important; }
.pm-mock .pm-icta a.pm-icta-btn em{
  font-style:normal; font-family:'Poppins',sans-serif; font-size:22.5px;
}
.pm-mock .pm-icta a.pm-icta-btn:hover{
  background:var(--navy,#1B224C); border-color:var(--navy,#1B224C); color:#fff !important;
  transform:translateY(-2px); box-shadow:0 12px 24px rgba(27,34,76,.20);
}
.pm-mock .pm-icta a.pm-icta-btn:hover :is(span,em){ color:#fff !important; }
@media (max-width:760px){
  .pm-mock .pm-icta{ margin-top:30px !important; }
  .pm-mock .pm-icta a.pm-icta-btn{
    width:100%; justify-content:space-between; padding:15px 22px; font-size:17px;
  }
}

/* =========================================================================
   2026-09 メソッドページのレビュー反映（v2.35.0）
   ========================================================================= */
/* M5 lsknot：番号から線でつないだ先の面を、枠線ではなく塗りだけで見せる */
.pm-mock .pfg--lsknot .pfg-i,
.pm-mock .pfg--lsknot .pfg-body{ border:0 !important; }

/* M8 lshead：上の見出し帯があるので、外側の四角い枠は出さない。
   本文の量が違っても、面の下辺はそろえる（v2.36.0） */
.pm-mock .pfg--lshead .pfg-i{
  border:0 !important;
  display:grid !important; grid-template-rows:auto minmax(0,1fr);
  align-items:stretch;
}
.pm-mock .pfg--lshead .pfg-l{ border:0 !important; height:100%; }

/* M4 lsphotoside：写真の元の高さで図版が伸びないよう、写真は面に貼り込む */
.pm-mock .pfg.pfg--lsphotoside .pfg-photo{ position:relative; overflow:hidden; }
.pm-mock .pfg.pfg--lsphotoside .pfg-photo img{ position:absolute; inset:0; }

/* M2 3C：.c3-main で図解まわりをくくったので、1列に落ちる幅では透かして
   元どおり「リード文 → ベン図 → 01→02→03 → 2点」の順に積む（v2.35.0） */
@media (max-width:1100px){
  .pm-mock .hub-body .c3--ring > .c3-main{ display:contents !important; }
  .pm-mock .hub-body .c3--ring .c3-main > .c3-body{ display:contents !important; }
}
@media (max-width:1100px) and (min-width:981px){
  .pm-mock .hub-body .c3--ring .c3-main > .c3-venn{
    grid-column:1 !important; grid-row:auto !important;
    max-width:340px !important; margin:0 auto !important;
  }
  .pm-mock .hub-body .c3--ring > .c3-side{
    grid-column:1 !important; grid-row:auto !important;
    margin-top:10px !important; padding-left:0 !important; border-left:0 !important;
  }
}
@media (max-width:980px){
  .pm-mock .hub-body .c3--ring .c3-main > .c3-venn{
    grid-column:1 !important; grid-row:auto !important; order:2 !important;
    max-width:420px; margin:0 auto !important;
  }
  .pm-mock .hub-body .c3--ring .pfg--vennrow > .pfg-lead{ order:1 !important; }
  .pm-mock .hub-body .c3--ring .pfg--vennrow .pfg-i{ order:3 !important; }
  .pm-mock .hub-body .c3--ring > .c3-side{
    grid-column:1 !important; grid-row:auto !important; order:4 !important;
    margin-top:0 !important; padding-left:0 !important; border-left:0 !important;
  }
}

/* =========================================================================
   M35 lsphotopair — 項目ごとに、左に実写・右に本文の面（v2.36.0）
   2〜3項目を横に並べ、それぞれの左に縦長の実写を貼る。
   ========================================================================= */
.pm-mock .pfg--lsphotopair .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px !important;
}
.pm-mock .pfg--lsphotopair[data-n="3"] .pfg-items{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.pm-mock .pfg--lsphotopair .pfg-i{
  display:grid !important; grid-template-columns:190px minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr);
  gap:0 !important; align-items:stretch;
  background:var(--ls-wash); border:0 !important; border-radius:12px; overflow:hidden;
}
.pm-mock .pfg.pfg--lsphotopair .pfg-photo{
  grid-column:1; grid-row:1 / -1;
  position:relative; overflow:hidden; align-self:stretch; border-radius:0;
}
.pm-mock .pfg.pfg--lsphotopair .pfg-photo img{ position:absolute; inset:0; }
.pm-mock .pfg--lsphotopair .pfg-t{
  grid-column:2; padding:20px 22px 0 !important; font-size:18px !important;
}
.pm-mock .pfg--lsphotopair .pfg-c{
  grid-column:2; padding:0 22px !important; margin:7px 0 0 !important; font-size:15.5px !important;
}
.pm-mock .pfg--lsphotopair .pfg-l{
  grid-column:2; grid-row:3; padding:0 22px 20px !important;
  margin-top:10px !important; gap:8px !important;
}
.pm-mock .pfg--lsphotopair .pfg-t{ grid-row:1; }
.pm-mock .pfg--lsphotopair .pfg-c{ grid-row:2; }
.pm-mock .pfg--lsphotopair .pfg-l li{ font-size:15px !important; color:var(--ls-sub) !important; }
@media (max-width:980px){
  .pm-mock .pfg--lsphotopair .pfg-items{ grid-template-columns:minmax(0,1fr) !important; }
  .pm-mock .pfg--lsphotopair[data-n="3"] .pfg-items{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:620px){
  .pm-mock .pfg--lsphotopair .pfg-i{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr);
  }
  .pm-mock .pfg.pfg--lsphotopair .pfg-photo{ grid-column:1; grid-row:1; height:150px; }
  .pm-mock .pfg--lsphotopair :is(.pfg-t,.pfg-c,.pfg-l){ grid-column:1; }
  .pm-mock .pfg--lsphotopair .pfg-t{ grid-row:2; padding-top:16px !important; }
  .pm-mock .pfg--lsphotopair .pfg-c{ grid-row:3; }
  .pm-mock .pfg--lsphotopair .pfg-l{ grid-row:4; }
}

/* lsknot：要点（.pfg-c）を持つときは「見出し ── 要点」を1行にまとめ、
   その下に本文（.pfg-l）を置く。縦幅を抑えるため（v2.38.0） */
.pm-mock .pfg--lsknot .pfg-i:has(.pfg-c) .pfg-t{ display:inline !important; }
.pm-mock .pfg--lsknot .pfg-c{
  display:inline !important; margin:0 !important;
  font-size:16px !important; font-weight:700 !important; color:var(--ls-ink,#14243B) !important;
}
.pm-mock .pfg--lsknot .pfg-c::before{ content:" ── "; font-weight:700; }
.pm-mock .pfg--lsknot .pfg-i:has(.pfg-c) .pfg-l{ margin-top:9px !important; }
.pm-mock .pfg--lsknot .pfg-l li{ font-size:15.5px !important; color:var(--ls-sub) !important; }

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

.pm-mock .pfg--lsbig .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsdot .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsdot .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsghost .pfg-t{font-size:18px !important}
.pm-mock .pfg--lscircle .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsphotodot .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsphotobg .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsphotoside .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsphotoband .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsphotoband .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lswedge .pfg-t{font-size:18px !important}
.pm-mock .pfg--lswedge .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsknot .pfg-t{font-size:18px !important}
.pm-mock .pfg--lstab .pfg-t{font-size:18px !important}
.pm-mock .pfg--lshead .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsscript .pfg-k{font-size:14px !important}
.pm-mock .pfg--lsscript .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsside .pfg-t{font-size:18px !important}
.pm-mock .pfg--lspile .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lspill .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsplain .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsplain .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lscheck .pfg-t{font-size:18px !important}
.pm-mock .pfg--lscheck .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsgroup .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsgroup .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsfunnel .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsfunnel .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsnumbox .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsnumout .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsnumrow .pfg-k{font-size:14px !important}
.pm-mock .pfg--lsnumrow .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsnumrow .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsillrow .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsillcard .pfg-c{font-size:14px !important}
.pm-mock .pfg--lsillcard .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsilldot .pfg-t{font-size:18px !important}
.pm-mock .pfg--lsillside .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lanebadge .pfg-ct{font-size:18px}
.pm-mock .pfg--fwlanes .pfg-cell--h .pfg-ct{font-size:18px !important}
.pm-mock .pfg--fwlanes .pfg-cell--r .pfg-ct{font-size:18px !important}
.pm-mock .pfg--lanebadge .pfg-cell--r .pfg-ct{font-size:18px !important}
.pm-mock .pfg--vennrow .pfg-k{font-size:14px}
.pm-mock .pfg--lswedge.pfg--wlabel .pfg-k{font-size:14px !important}
.pm-mock .pfg--photowedge .pfg-i .pfg-t{font-size:18px !important}
.pm-mock .pfg--photowedge .pfg-i .pfg-c{font-size:14px !important}
.pm-mock .pfg--photowedge .pfg-i .pfg-l li{font-size:16px !important}
.pm-mock .pfg.pfg--lsarch .pfg-t{font-size:18px !important}
.pm-mock .pfg.pfg--lsarch .pfg-k{font-size:14px !important}
.pm-mock .pfg.pfg--lsarch .pfg-c{font-size:14px !important}
.pm-mock .pfg.pfg--lsarch .pfg-l li{font-size:16px !important}
.pm-mock .pfg.pfg--lsbadge .pfg-k{font-size:14px !important}
.pm-mock .pfg.pfg--lsbadge .pfg-t{font-size:18px !important}
.pm-mock .pfg.pfg--lsbadge .pfg-c{font-size:14px !important}
.pm-mock .pfg.pfg--lsbadge .pfg-l li{font-size:16px !important}
.pm-mock .pfg.pfg--lsstage .pfg-t{font-size:18px !important}
.pm-mock .pfg.pfg--lsstage .pfg-k{font-size:14px !important}
.pm-mock .pfg.pfg--lsstage .pfg-c{font-size:14px !important}
.pm-mock .pfg.pfg--lsstage .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsphotopair .pfg-c{font-size:14px !important}
.pm-mock .pfg--lsphotopair .pfg-l li{font-size:16px !important}
.pm-mock .pfg--lsknot .pfg-c{font-size:14px !important}

@media (max-width:900px){
  .pm-mock .pfg--lsbig .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsdot .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsdot .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsghost .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lscircle .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsphotodot .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsphotobg .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsphotoside .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsphotoband .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsphotoband .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lswedge .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lswedge .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsknot .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lstab .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lshead .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsscript .pfg-k{font-size:13px !important}
  .pm-mock .pfg--lsscript .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsside .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lspile .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lspill .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsplain .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsplain .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lscheck .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lscheck .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsgroup .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsgroup .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsfunnel .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsfunnel .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsnumbox .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsnumout .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsnumrow .pfg-k{font-size:13px !important}
  .pm-mock .pfg--lsnumrow .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsnumrow .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsillrow .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsillcard .pfg-c{font-size:13px !important}
  .pm-mock .pfg--lsillcard .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsilldot .pfg-t{font-size:16px !important}
  .pm-mock .pfg--lsillside .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lanebadge .pfg-ct{font-size:16px}
  .pm-mock .pfg--fwlanes .pfg-cell--h .pfg-ct{font-size:16px !important}
  .pm-mock .pfg--fwlanes .pfg-cell--r .pfg-ct{font-size:16px !important}
  .pm-mock .pfg--lanebadge .pfg-cell--r .pfg-ct{font-size:16px !important}
  .pm-mock .pfg--vennrow .pfg-k{font-size:13px}
  .pm-mock .pfg--lswedge.pfg--wlabel .pfg-k{font-size:13px !important}
  .pm-mock .pfg--photowedge .pfg-i .pfg-t{font-size:16px !important}
  .pm-mock .pfg--photowedge .pfg-i .pfg-c{font-size:13px !important}
  .pm-mock .pfg--photowedge .pfg-i .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg.pfg--lsarch .pfg-t{font-size:16px !important}
  .pm-mock .pfg.pfg--lsarch .pfg-k{font-size:13px !important}
  .pm-mock .pfg.pfg--lsarch .pfg-c{font-size:13px !important}
  .pm-mock .pfg.pfg--lsarch .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg.pfg--lsbadge .pfg-k{font-size:13px !important}
  .pm-mock .pfg.pfg--lsbadge .pfg-t{font-size:16px !important}
  .pm-mock .pfg.pfg--lsbadge .pfg-c{font-size:13px !important}
  .pm-mock .pfg.pfg--lsbadge .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg.pfg--lsstage .pfg-t{font-size:16px !important}
  .pm-mock .pfg.pfg--lsstage .pfg-k{font-size:13px !important}
  .pm-mock .pfg.pfg--lsstage .pfg-c{font-size:13px !important}
  .pm-mock .pfg.pfg--lsstage .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsphotopair .pfg-c{font-size:13px !important}
  .pm-mock .pfg--lsphotopair .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--lsknot .pfg-c{font-size:13px !important}
}

@media (max-width:820px){
  .pm-mock .pfg--lsnumrow .pfg-t{font-size:16px !important}
}