@charset "utf-8";
/* =====================================================================
   lp-figures.css  —  LP図版（旧 <figure class="fig"> の SVG 置き換え）
   ---------------------------------------------------------------------
   SVGを廃止し、すべてHTML+CSSで描画する。
   .pfg--<型> のクラスひとつで見た目が決まる。DOM構造は共通。
   使用ルール：同じ型は全LP合計で3本まで／同一LP内では重複させない。
   ===================================================================== */

/* ---- 0. トークン ---------------------------------------------------- */
.pm-mock .pfg{
  --f-navy:#1B224C; --f-deep:#0F1229; --f-sky:#1C93D2; --f-sky2:#4EA9CA;
  --f-pale:#EAF4FB; --f-tint:#F4F7FB; --f-line:#E2E8F1; --f-line2:#CBD6E4;
  --f-ink:#1B224C;  --f-sub:#44536B;  --f-white:#fff;
  --f-warn:#B4433B; --f-warn-bg:#FDF1F0; --f-warn-line:#E9C9C6; --f-warn-rail:#D9A6A1;
  --f-ok:#1B7F5E; --f-ok-bg:#EDF7F2;
  --f-fill:#1B224C; --f-onfill:#fff; --f-onfill-sub:#C3CCDA; --f-onfill-key:#5FB6E8;
  --f-r:10px;
  margin:24px 0 26px !important; padding:0 !important; border:0 !important;
  background:none !important; box-shadow:none !important;
  counter-reset:pfg;
  font-feature-settings:"palt" 1;
}
.pm-mock .pfg,.pm-mock .pfg *,.pm-mock .pfg *::before,.pm-mock .pfg *::after{box-sizing:border-box;}
.pm-mock .lpr-sec--dark .pfg{
  --f-navy:#fff; --f-ink:#fff; --f-sub:#C3CCDA; --f-line:rgba(255,255,255,.20);
  --f-line2:rgba(255,255,255,.34); --f-tint:rgba(255,255,255,.06);
  --f-pale:rgba(28,147,210,.20); --f-white:rgba(255,255,255,.05);
  --f-sky:#5FB6E8; --f-deep:#fff;
  --f-fill:#5FB6E8; --f-onfill:#0F1229; --f-onfill-sub:#123048; --f-onfill-key:#0F1229;
  --f-warn:#FFA79F; --f-warn-bg:rgba(224,110,100,.20); --f-warn-line:rgba(255,167,159,.45);
  --f-warn-rail:rgba(255,167,159,.7); --f-ok-bg:rgba(95,182,232,.16);
}

/* ---- 1. 共通パーツ --------------------------------------------------- */
.pm-mock .pfg .pfg-lead{
  margin:0 0 13px !important; padding:0 !important;
  font-size:18.5px !important; line-height:1.68 !important;
  font-weight:600 !important; color:var(--f-ink) !important; background:none !important;
}
.pm-mock .pfg .pfg-lead b{background:none !important;color:inherit !important;}
.pm-mock .pfg .pfg-items{
  display:grid !important; gap:12px; margin:0; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  align-items:stretch;
}
.pm-mock .pfg[data-n="1"] .pfg-items,
.pm-mock .pfg[data-n="2"] .pfg-items{grid-template-columns:repeat(2,minmax(0,1fr));}
.pm-mock .pfg[data-n="3"] .pfg-items{grid-template-columns:repeat(3,minmax(0,1fr));}
.pm-mock .pfg[data-n="4"] .pfg-items{grid-template-columns:repeat(4,minmax(0,1fr));}
.pm-mock .pfg[data-n="5"] .pfg-items{grid-template-columns:repeat(5,minmax(0,1fr));}
.pm-mock .pfg[data-n="6"] .pfg-items{grid-template-columns:repeat(3,minmax(0,1fr));}
.pm-mock .pfg[data-n="7"] .pfg-items,
.pm-mock .pfg[data-n="8"] .pfg-items{grid-template-columns:repeat(4,minmax(0,1fr));}
.pm-mock .pfg[data-n="9"] .pfg-items{grid-template-columns:repeat(3,minmax(0,1fr));}

.pm-mock .pfg .pfg-i{
  counter-increment:pfg; position:relative; min-width:0; overflow-wrap:anywhere;
  display:flex; flex-direction:column; gap:5px;
}
.pm-mock .pfg .pfg-k{
  display:inline-block; align-self:flex-start;
  font-size:12.5px !important; font-weight:700 !important; letter-spacing:.10em;
  line-height:1.4 !important; color:var(--f-sky) !important;
  background:none !important; margin:0 !important; padding:0 !important;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.pm-mock .pfg .pfg-t{
  display:block; font-size:18px !important; font-weight:700 !important;
  line-height:1.52 !important; color:var(--f-ink) !important;
  background:none !important; margin:0 !important; padding:0 !important;
  text-wrap:balance;
}
.pm-mock .pfg .pfg-l{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:flex; flex-direction:column; gap:2px; min-width:0; overflow-wrap:anywhere;
}
.pm-mock .pfg .pfg-l li{
  font-size:16px !important; line-height:1.62 !important;
  color:var(--f-sub) !important; margin:0 !important; padding:0 !important;
  background:none !important; list-style:none !important;
}
.pm-mock .pfg .pfg-l li::before,.pm-mock .pfg .pfg-l li::marker{content:none !important;}
.pm-mock .pfg .pfg-note{
  margin:13px 0 0 !important; padding:11px 15px !important;
  font-size:15.5px !important; line-height:1.66 !important;
  color:var(--f-sub) !important; background:var(--f-tint) !important;
  border-left:3px solid var(--f-line2) !important; border-radius:0 4px 4px 0;
}
.pm-mock .pfg > figcaption{
  margin:11px 0 0 !important; padding:0 !important;
  font-size:15px !important; line-height:1.6 !important;
  color:var(--f-sub) !important; background:none !important; text-align:left !important;
  border:0 !important;
}
/* v1.83.1：図版のキャプション（「図：○○」）は本文中の注記のように見えるため出さない。
   各図版には .pfg-lead の見出しがあるので、意味は落ちない。
   読み上げには残すため、表示だけを消している。 */
.pm-mock .pfg > figcaption{
  position:absolute !important; width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; overflow:hidden !important;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 !important;
}

/* ===== A. グリッド面 ================================================== */
/* A1 tile：上辺にアクセントバー */
.pm-mock .pfg--tile .pfg-i{
  background:var(--f-white); border:1px solid var(--f-line);
  border-top:3px solid var(--f-sky); border-radius:0 0 var(--f-r) var(--f-r);
  padding:15px 15px 17px;
}
/* A2 outline：罫線のみ・余白広め */
.pm-mock .pfg--outline .pfg-items{gap:0;}
.pm-mock .pfg--outline .pfg-i{
  border:1px solid var(--f-line); padding:18px 18px 20px; margin:-0.5px;
  background:none;
}
.pm-mock .pfg--outline .pfg-t{font-size:18.5px !important;}
/* A3 elev：白い浮きカード */
.pm-mock .pfg--elev .pfg-items{gap:16px;}
.pm-mock .pfg--elev .pfg-i{
  background:var(--f-white); border:1px solid var(--f-line); border-radius:14px;
  padding:18px 17px 20px; box-shadow:0 6px 18px rgba(27,34,76,.07);
}
.pm-mock .lpr-sec--dark .pfg--elev .pfg-i{box-shadow:none;background:rgba(255,255,255,.06);}
/* A4 dark：濃紺の面 */
.pm-mock .pfg--dark .pfg-i{
  background:var(--f-fill); border-radius:var(--f-r); padding:17px 16px 19px;
  border:1px solid var(--f-fill);
}
.pm-mock .pfg--dark .pfg-t{color:var(--f-onfill) !important;}
.pm-mock .pfg--dark .pfg-l li{color:var(--f-onfill-sub) !important;}
.pm-mock .pfg--dark .pfg-k{color:var(--f-onfill-key) !important;}
/* A5 ghost：巨大な連番を薄く敷く */
.pm-mock .pfg--ghost .pfg-i{
  border:1px solid var(--f-line); border-radius:var(--f-r);
  padding:20px 16px 18px; background:var(--f-white); overflow:hidden;
}
.pm-mock .pfg--ghost .pfg-i::before{
  content:counter(pfg,decimal-leading-zero);
  position:absolute; right:10px; top:-8px; z-index:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:64px; font-weight:700; line-height:1; color:var(--f-sky); opacity:.11;
}
.pm-mock .pfg--ghost .pfg-k,.pm-mock .pfg--ghost .pfg-t,.pm-mock .pfg--ghost .pfg-l{position:relative;z-index:1;}
/* A6 corner：右上に折り返し */
.pm-mock .pfg--corner .pfg-i{
  border:1px solid var(--f-line2); padding:16px 16px 18px; background:var(--f-white);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
}
.pm-mock .pfg--corner .pfg-i::after{
  content:""; position:absolute; right:0; top:0; width:16px; height:16px;
  background:var(--f-sky); clip-path:polygon(0 0,100% 100%,0 100%);
}
/* A7 frame：二重罫線 */
.pm-mock .pfg--frame .pfg-i{
  border:1px solid var(--f-navy); padding:17px 18px 19px; background:none;
}
.pm-mock .pfg--frame .pfg-i::before{
  content:""; position:absolute; inset:5px; border:1px solid var(--f-line2); pointer-events:none;
}
/* A8 soft：淡いアクセント地 */
.pm-mock .pfg--soft .pfg-i{
  background:var(--f-pale); border-radius:var(--f-r); padding:17px 16px 19px;
}
.pm-mock .pfg--soft .pfg-i::before{
  content:""; position:absolute; left:16px; top:0; width:26px; height:3px; background:var(--f-sky);
}
.pm-mock .pfg--soft .pfg-k{margin-top:4px !important;}

/* ===== B. 縦積み・帯 ================================================== */
.pm-mock .pfg--band .pfg-items,.pm-mock .pfg--rail .pfg-items,
.pm-mock .pfg--hair .pfg-items,.pm-mock .pfg--numlist .pfg-items,
.pm-mock .pfg--zebra .pfg-items,.pm-mock .pfg--alt .pfg-items,
.pm-mock .pfg--sidebar .pfg-items,.pm-mock .pfg--stack3d .pfg-items{
  grid-template-columns:minmax(0,1fr) !important;
}
/* B1 band：フル幅の帯／左に番号 */
.pm-mock .pfg--band .pfg-items{gap:8px;}
.pm-mock .pfg--band .pfg-i{
  display:grid; grid-template-columns:60px minmax(0,1fr); gap:0 18px; align-items:start;
  background:var(--f-white); border:1px solid var(--f-line); border-radius:6px;
  padding:15px 18px 16px;
}
.pm-mock .pfg--band .pfg-i::before{
  content:counter(pfg,decimal-leading-zero); grid-row:1/span 3; align-self:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:30px; font-weight:700;
  line-height:1; color:var(--f-sky); letter-spacing:-.02em;
}
.pm-mock .pfg--band .pfg-k,.pm-mock .pfg--band .pfg-t,.pm-mock .pfg--band .pfg-l{grid-column:2;}
.pm-mock .pfg--band .pfg-l{margin-top:4px !important;}
/* B2 rail：左に縦レール＋ドット */
.pm-mock .pfg--rail .pfg-items{gap:0;}
.pm-mock .pfg--rail .pfg-i{padding:0 0 22px 30px;}
.pm-mock .pfg--rail .pfg-i::before{
  content:""; position:absolute; left:5px; top:14px; bottom:-4px; width:2px; background:var(--f-line2);
}
.pm-mock .pfg--rail .pfg-i:last-child::before{display:none;}
.pm-mock .pfg--rail .pfg-i::after{
  content:""; position:absolute; left:0; top:5px; width:12px; height:12px; border-radius:50%;
  background:var(--f-sky); box-shadow:0 0 0 3px var(--f-pale);
}
.pm-mock .pfg--rail .pfg-i:last-child{padding-bottom:0;}
/* B3 hair：ヘアライン区切りだけ */
.pm-mock .pfg--hair .pfg-items{gap:0;border-top:1px solid var(--f-line2);}
.pm-mock .pfg--hair .pfg-i{
  display:grid; grid-template-columns:minmax(120px,.34fr) minmax(0,1fr); gap:4px 24px;
  padding:14px 2px; border-bottom:1px solid var(--f-line); align-items:start;
}
.pm-mock .pfg--hair .pfg-t{align-self:start;}
.pm-mock .pfg--hair .pfg-k{grid-column:1;grid-row:1;}
.pm-mock .pfg--hair .pfg-t{grid-column:1;grid-row:2;}
.pm-mock .pfg--hair .pfg-l{grid-column:2;grid-row:1/3;}
/* B4 numlist：左に大きな連番、罫線なし */
.pm-mock .pfg--numlist .pfg-items{gap:18px;}
.pm-mock .pfg--numlist .pfg-i{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 16px; align-items:start;
}
.pm-mock .pfg--numlist .pfg-i::before{
  content:counter(pfg); grid-row:1/span 3; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--f-fill); color:var(--f-onfill); font-size:16px; font-weight:700; line-height:1;
}
.pm-mock .pfg--numlist .pfg-k,.pm-mock .pfg--numlist .pfg-t,.pm-mock .pfg--numlist .pfg-l{grid-column:2;}
.pm-mock .pfg--numlist .pfg-t{padding-top:7px;}
.pm-mock .pfg--numlist .pfg-k + .pfg-t{padding-top:0;}
/* B5 zebra：交互背景の行 */
.pm-mock .pfg--zebra .pfg-items{gap:0;border:1px solid var(--f-line);border-radius:8px;overflow:hidden;}
.pm-mock .pfg--zebra .pfg-i{
  display:grid; grid-template-columns:minmax(140px,.38fr) minmax(0,1fr); gap:3px 22px;
  padding:14px 18px; align-items:start;
}
.pm-mock .pfg--zebra .pfg-i:nth-child(odd){background:var(--f-tint);}
.pm-mock .pfg--zebra .pfg-k{grid-column:1;grid-row:1;}
.pm-mock .pfg--zebra .pfg-t{grid-column:1;grid-row:2;}
.pm-mock .pfg--zebra .pfg-l{grid-column:2;grid-row:1/3;}
/* B6 alt：左右交互 */
.pm-mock .pfg--alt .pfg-items{gap:0;position:relative;}
.pm-mock .pfg--alt .pfg-items::before{
  content:""; position:absolute; left:50%; top:6px; bottom:6px; width:1px;
  background:var(--f-line2); transform:translateX(-.5px);
}
.pm-mock .pfg--alt .pfg-i{width:calc(50% - 26px);padding:12px 0 18px;}
.pm-mock .pfg--alt .pfg-i:nth-child(even){margin-left:calc(50% + 26px);}
.pm-mock .pfg--alt .pfg-i::after{
  content:""; position:absolute; top:20px; width:9px; height:9px; border-radius:50%;
  background:var(--f-sky); border:2px solid var(--f-white);
}
.pm-mock .pfg--alt .pfg-i:nth-child(odd)::after{right:-30px;}
.pm-mock .pfg--alt .pfg-i:nth-child(even)::after{left:-30px;}
.pm-mock .pfg--alt .pfg-i:nth-child(odd){text-align:right;}
.pm-mock .pfg--alt .pfg-i:nth-child(odd) .pfg-k{align-self:flex-end;}
/* B7 sidebar：左に見出し列・右に本文列 */
.pm-mock .pfg--sidebar .pfg-items{gap:0;}
.pm-mock .pfg--sidebar .pfg-i{
  display:grid; grid-template-columns:minmax(150px,.3fr) minmax(0,1fr); gap:2px 0;
  border-left:3px solid var(--f-sky); padding:0 0 0 0; margin-bottom:10px;
}
.pm-mock .pfg--sidebar .pfg-k{grid-column:1;grid-row:1;padding:14px 18px 0 !important;}
.pm-mock .pfg--sidebar .pfg-t{grid-column:1;grid-row:2;padding:0 18px 14px;}
.pm-mock .pfg--sidebar .pfg-l{grid-column:2;grid-row:1/3;padding:14px 18px;background:var(--f-tint);}
/* B8 stack3d：ずらして重ねた紙 */
.pm-mock .pfg--stack3d .pfg-items{gap:12px;}
.pm-mock .pfg--stack3d .pfg-i{
  background:var(--f-white); border:1px solid var(--f-line2); border-radius:4px;
  padding:16px 20px 18px; margin-left:calc((var(--i) - 1) * 18px);
  box-shadow:-4px 4px 0 var(--f-pale);
}

/* ===== C. 流れ・順序 ================================================== */
/* C1 chev：山形（横並び） */
.pm-mock .pfg--chev .pfg-items{gap:4px;}
.pm-mock .pfg--chev .pfg-i{
  background:var(--f-tint); padding:16px 14px 18px 26px;
  clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%,15px 50%);
}
.pm-mock .pfg--chev .pfg-i:first-child{clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%);padding-left:16px;}
.pm-mock .pfg--chev .pfg-i:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,15px 50%);}
.pm-mock .pfg--chev .pfg-i:nth-child(even){background:var(--f-pale);}
/* C2 arrow：カードの間に矢印 */
.pm-mock .pfg--arrow .pfg-items{gap:26px;}
.pm-mock .pfg--arrow .pfg-i{
  background:var(--f-white); border:1px solid var(--f-line); border-radius:var(--f-r);
  padding:16px 15px 18px;
}
.pm-mock .pfg--arrow .pfg-i + .pfg-i::before{
  content:""; position:absolute; left:-19px; top:50%; width:11px; height:11px;
  border-top:2px solid var(--f-sky); border-right:2px solid var(--f-sky);
  transform:translateY(-50%) rotate(45deg);
}
/* C3 track：上に進捗トラック */
.pm-mock .pfg--track .pfg-items{gap:16px;padding-top:30px;position:relative;}
.pm-mock .pfg--track .pfg-items::before{
  content:""; position:absolute; left:8%; right:8%; top:9px; height:2px; background:var(--f-line2);
}
.pm-mock .pfg--track .pfg-i{padding:0;}
.pm-mock .pfg--track .pfg-i::before{
  content:""; position:absolute; left:50%; top:-30px; width:20px; height:20px; border-radius:50%;
  transform:translateX(-50%); background:var(--f-sky); border:4px solid var(--f-white);
  box-shadow:0 0 0 1px var(--f-sky);
}
.pm-mock .pfg--track .pfg-i{text-align:center;}
.pm-mock .pfg--track .pfg-k{align-self:center;}
/* C4 stair：階段状 */
.pm-mock .pfg--stair .pfg-items{grid-template-columns:minmax(0,1fr) !important;gap:6px;}
.pm-mock .pfg--stair .pfg-i{
  background:var(--f-white); border:1px solid var(--f-line); border-left:4px solid var(--f-sky);
  padding:14px 18px 16px; margin-left:calc((var(--i) - 1) * 34px);
}
/* C5 loop：循環（末尾から先頭へ戻る） */
.pm-mock .pfg--loop .pfg-items{gap:10px;}
.pm-mock .pfg--loop .pfg-i{
  background:var(--f-tint); border-radius:var(--f-r); padding:16px 15px 18px;
  border:1px dashed var(--f-line2);
}
.pm-mock .pfg--loop .pfg-items::after{
  content:"検証結果を次の設計へ戻す"; grid-column:1/-1; display:block; margin-top:2px; padding:9px 14px;
  font-size:14px; font-weight:700; letter-spacing:.02em; text-align:center;
  color:var(--f-sky); border:1px dashed var(--f-sky); border-radius:999px;
}
/* C6 tabtop：上部にタブ状の番号 */
.pm-mock .pfg--tabtop .pfg-items{gap:12px;padding-top:14px;}
.pm-mock .pfg--tabtop .pfg-i{
  background:var(--f-white); border:1px solid var(--f-line); border-radius:0 var(--f-r) var(--f-r) var(--f-r);
  padding:16px 15px 18px;
}
.pm-mock .pfg--tabtop .pfg-i::before{
  content:counter(pfg,decimal-leading-zero); position:absolute; left:-1px; top:-14px;
  padding:2px 12px 3px; font-size:13px; font-weight:700; line-height:1.5;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  background:var(--f-fill); color:var(--f-onfill); border-radius:4px 4px 0 0;
}

/* ===== D. 強弱・エディトリアル ======================================== */
/* D1 hero1：1件目を大きく */
.pm-mock .pfg--hero1 .pfg-items{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px;}
.pm-mock .pfg--hero1 .pfg-i{
  background:var(--f-white); border:1px solid var(--f-line); border-radius:var(--f-r); padding:16px 16px 18px;
}
.pm-mock .pfg--hero1 .pfg-i:first-child{
  grid-column:1/-1; background:var(--f-fill); border-color:var(--f-fill); padding:20px 22px 22px;
}
.pm-mock .pfg--hero1 .pfg-i:first-child .pfg-t{color:var(--f-onfill) !important;font-size:20.5px !important;}
.pm-mock .pfg--hero1 .pfg-i:first-child .pfg-l li{color:var(--f-onfill-sub) !important;}
.pm-mock .pfg--hero1 .pfg-i:first-child .pfg-k{color:var(--f-onfill-key) !important;}
/* D2 pill：見出しがピル型 */
.pm-mock .pfg--pill .pfg-items{gap:20px 18px;}
.pm-mock .pfg--pill .pfg-t{
  align-self:flex-start; background:var(--f-fill) !important; color:var(--f-onfill) !important;
  padding:5px 15px 6px !important; border-radius:999px; font-size:16px !important;
}
.pm-mock .pfg--pill .pfg-l{padding-left:2px !important;}
/* D3 mono：等幅ラベルのミニマル */
.pm-mock .pfg--mono .pfg-items{gap:22px 26px;}
.pm-mock .pfg--mono .pfg-i{border-top:2px solid var(--f-navy);padding-top:11px;}
.pm-mock .pfg--mono .pfg-k{color:var(--f-sub) !important;letter-spacing:.16em;}
.pm-mock .pfg--mono .pfg-t{font-size:19px !important;}
/* D4 stat：短いタイトルを主役に */
.pm-mock .pfg--stat .pfg-items{gap:1px;background:var(--f-line);border:1px solid var(--f-line);}
.pm-mock .pfg--stat .pfg-i{background:var(--f-white);padding:18px 16px 20px;text-align:center;gap:8px;}
.pm-mock .pfg--stat .pfg-k{align-self:center;}
.pm-mock .pfg--stat .pfg-t{font-size:19.5px !important;letter-spacing:-.01em;}
.pm-mock .pfg--stat .pfg-l li{font-size:15px !important;}
/* D5 mark：見出しの背景にマーカー */
.pm-mock .pfg--mark .pfg-items{gap:18px 22px;}
.pm-mock .pfg--mark .pfg-i{padding-left:14px;border-left:1px solid var(--f-line2);}
.pm-mock .pfg--mark .pfg-t{
  background:linear-gradient(transparent 62%,var(--f-pale) 62%) !important;
  display:inline; padding:0 2px !important;
}
.pm-mock .pfg--mark .pfg-l{margin-top:8px !important;}
/* D6 card2：2列の大判カード */
.pm-mock .pfg--card2 .pfg-items{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px;}
.pm-mock .pfg--card2 .pfg-i{
  background:var(--f-tint); border-radius:14px; padding:22px 22px 24px; gap:9px;
}
.pm-mock .pfg--card2 .pfg-t{font-size:19.5px !important;}
.pm-mock .pfg--card2 .pfg-l li{font-size:16.5px !important;}

/* ===== E. 2項対比（duo） ============================================== */
.pm-mock .pfg--duovs .pfg-items,.pm-mock .pfg--duopanel .pfg-items,
.pm-mock .pfg--duoarrow .pfg-items,.pm-mock .pfg--duoscale .pfg-items{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
/* E1 duovs：中央にバッジ */
.pm-mock .pfg--duovs .pfg-items{gap:34px;position:relative;align-items:stretch;}
.pm-mock .pfg--duovs .pfg-items::before{
  content:"×"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--f-fill); color:var(--f-onfill); font-size:19px; font-weight:700; line-height:1;
}
.pm-mock .pfg--duovs .pfg-i{
  background:var(--f-white); border:2px solid var(--f-navy); border-radius:var(--f-r);
  padding:20px 20px 22px; gap:8px;
}
.pm-mock .pfg--duovs .pfg-t{font-size:20px !important;}
/* E2 duopanel：濃／淡の2面 */
.pm-mock .pfg--duopanel .pfg-items{gap:0;border-radius:12px;overflow:hidden;}
.pm-mock .pfg--duopanel .pfg-i{padding:22px 22px 24px;gap:9px;}
.pm-mock .pfg--duopanel .pfg-i:first-child{background:var(--f-tint);}
.pm-mock .pfg--duopanel .pfg-i:last-child{background:var(--f-fill);}
.pm-mock .pfg--duopanel .pfg-i:last-child .pfg-t{color:var(--f-onfill) !important;}
.pm-mock .pfg--duopanel .pfg-i:last-child .pfg-l li{color:var(--f-onfill-sub) !important;}
.pm-mock .pfg--duopanel .pfg-i:last-child .pfg-k{color:var(--f-onfill-key) !important;}
.pm-mock .pfg--duopanel .pfg-t{font-size:20px !important;}
/* E3 duoarrow：左→右 */
.pm-mock .pfg--duoarrow .pfg-items{gap:42px;}
.pm-mock .pfg--duoarrow .pfg-i{
  border:1px solid var(--f-line2); border-radius:var(--f-r); padding:20px 20px 22px; gap:8px;
  background:var(--f-white);
}
.pm-mock .pfg--duoarrow .pfg-i:last-child{border-color:var(--f-sky);background:var(--f-pale);}
.pm-mock .pfg--duoarrow .pfg-i + .pfg-i::before{
  content:""; position:absolute; left:-30px; top:50%; width:15px; height:15px;
  border-top:3px solid var(--f-sky); border-right:3px solid var(--f-sky);
  transform:translateY(-50%) rotate(45deg);
}
.pm-mock .pfg--duoarrow .pfg-t{font-size:20px !important;}
/* E4 duoscale：見出しを上辺に振り分けた対比 */
.pm-mock .pfg--duoscale .pfg-items{gap:18px;}
.pm-mock .pfg--duoscale .pfg-i{padding:0;gap:0;border:1px solid var(--f-line);border-radius:var(--f-r);overflow:hidden;}
.pm-mock .pfg--duoscale .pfg-k{
  width:100%; padding:8px 16px !important; background:var(--f-tint) !important;
  border-bottom:1px solid var(--f-line); align-self:stretch;
}
.pm-mock .pfg--duoscale .pfg-t{padding:16px 18px 0 !important;font-size:19.5px !important;}
.pm-mock .pfg--duoscale .pfg-i > .pfg-t:first-child{
  padding:11px 18px !important; background:var(--f-tint) !important;
  border-bottom:1px solid var(--f-line); font-size:19px !important;
}
.pm-mock .pfg--duoscale .pfg-l{padding:8px 18px 18px !important;}

/* ===== F. 見出し＋本文の対（pair） ==================================== */
.pm-mock .pfg .pfg-hd{
  display:block; font-size:17.5px !important; font-weight:700 !important; line-height:1.5 !important;
  color:var(--f-ink) !important; background:none !important; margin:0 !important; padding:0 !important;
}
.pm-mock .pfg .pfg-bd{display:flex;flex-direction:column;gap:6px;min-width:0;}
/* F1 paircol：見出し帯＋本文パネル */
.pm-mock .pfg--paircol .pfg-i{
  padding:0; gap:0; border:1px solid var(--f-line); border-radius:8px;
  overflow:hidden; background:var(--f-white);
}
.pm-mock .pfg--paircol .pfg-hd{padding:11px 16px !important;background:var(--f-fill) !important;color:var(--f-onfill) !important;}
.pm-mock .pfg--paircol .pfg-bd{padding:14px 16px 17px;}
/* F2 pairtab：上辺にアクセント、見出しは破線で区切る */
.pm-mock .pfg--pairtab .pfg-items{gap:16px;}
.pm-mock .pfg--pairtab .pfg-i{
  border:1px solid var(--f-line2); border-top:3px solid var(--f-sky);
  padding:0; gap:0; background:var(--f-white);
}
.pm-mock .pfg--pairtab .pfg-hd{padding:14px 18px 11px !important;border-bottom:1px dashed var(--f-line);}
.pm-mock .pfg--pairtab .pfg-bd{padding:13px 18px 17px;}
/* F3 pairswap：見出しが左・本文が右 */
.pm-mock .pfg--pairswap .pfg-items{grid-template-columns:minmax(0,1fr) !important;gap:10px;}
.pm-mock .pfg--pairswap .pfg-i{
  flex-direction:row; align-items:stretch; gap:0;
  border:1px solid var(--f-line); border-radius:8px; overflow:hidden; background:var(--f-white);
}
.pm-mock .pfg--pairswap .pfg-hd{
  flex:0 0 32%; display:flex; align-items:center;
  padding:16px 18px !important; background:var(--f-pale) !important;
}
.pm-mock .pfg--pairswap .pfg-bd{flex:1 1 auto;padding:15px 18px 17px;}
/* F4 pairhead：見出しに下線を引く */
.pm-mock .pfg--pairhead .pfg-items{gap:20px 22px;}
.pm-mock .pfg--pairhead .pfg-i{gap:0;}
.pm-mock .pfg--pairhead .pfg-hd{
  padding:0 0 9px !important; margin-bottom:13px !important;
  border-bottom:2px solid var(--f-navy); font-size:19px !important;
}
.pm-mock .pfg--pairhead .pfg-bd{gap:6px;}

/* ===== G. レーン対比（lanes：よくある例 ⇄ 当社） ====================== */
.pm-mock .pfg .pfg-lanes{display:flex;flex-direction:column;gap:14px;}
.pm-mock .pfg .pfg-lane{position:relative;min-width:0;}
.pm-mock .pfg .pfg-cell{min-width:0;position:relative;}
.pm-mock .pfg .pfg-ct{
  display:block; font-size:17px !important; font-weight:700 !important; line-height:1.52 !important;
  color:var(--f-ink) !important; background:none !important; margin:0 !important; padding:0 !important;
}
.pm-mock .pfg .pfg-cl{
  display:block; font-size:15.5px !important; line-height:1.62 !important;
  color:var(--f-sub) !important; background:none !important; margin:3px 0 0 !important; padding:0 !important;
}
/* G1 laneflow：3カラム＋矢印 */
.pm-mock .pfg--laneflow .pfg-lane{
  display:grid; grid-template-columns:repeat(var(--c,3),minmax(0,1fr)); gap:26px;
  border:1px solid var(--f-line); border-radius:var(--f-r); padding:16px 18px 18px; background:var(--f-white);
}
.pm-mock .pfg--laneflow .pfg-lane[data-tone="ng"]{border-color:var(--f-warn-line);background:var(--f-warn-bg);}
.pm-mock .pfg--laneflow .pfg-lane[data-tone="ok"]{border-color:var(--f-sky);background:var(--f-pale);}
.pm-mock .pfg--laneflow .pfg-cell + .pfg-cell::before{
  content:""; position:absolute; left:-19px; top:14px; width:10px; height:10px;
  border-top:2px solid var(--f-line2); border-right:2px solid var(--f-line2);
  transform:rotate(45deg);
}
/* G2 lanebadge：頭に×／○バッジ */
.pm-mock .pfg--lanebadge .pfg-lane{
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 16px; grid-auto-rows:min-content;
  padding:16px 0; border-bottom:1px solid var(--f-line);
}
.pm-mock .pfg--lanebadge .pfg-lanes{gap:0;border-top:2px solid var(--f-navy);}
.pm-mock .pfg--lanebadge .pfg-lane::before{
  content:"—"; grid-row:1/span 9; align-self:start; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700;
  background:var(--f-tint); color:var(--f-sub);
}
.pm-mock .pfg--lanebadge .pfg-lane[data-tone="ng"]::before{content:"×";background:var(--f-warn-bg);color:var(--f-warn);}
.pm-mock .pfg--lanebadge .pfg-lane[data-tone="ok"]::before{content:"○";background:var(--f-pale);color:var(--f-sky);}
.pm-mock .pfg--lanebadge .pfg-cell{grid-column:2;padding:0 0 9px;}
.pm-mock .pfg--lanebadge .pfg-cell:last-child{padding-bottom:0;}
.pm-mock .pfg--lanebadge .pfg-lane[data-tone="ok"] .pfg-cell--r .pfg-ct{color:var(--f-sky) !important;}
.pm-mock .pfg--lanebadge .pfg-lane[data-tone="ng"] .pfg-cell--r .pfg-ct{color:var(--f-warn) !important;}
/* G3 lanesplit：面で色分け */
.pm-mock .pfg--lanesplit .pfg-lane{border-radius:12px;padding:18px 20px 20px;}
.pm-mock .pfg--lanesplit .pfg-lane[data-tone="ng"]{background:var(--f-warn-bg);}
.pm-mock .pfg--lanesplit .pfg-lane[data-tone="ok"]{background:var(--f-fill);}
.pm-mock .pfg--lanesplit .pfg-lane[data-tone=""]{background:var(--f-tint);}
.pm-mock .pfg--lanesplit .pfg-lane[data-tone="ok"] .pfg-ct{color:var(--f-onfill) !important;}
.pm-mock .pfg--lanesplit .pfg-lane[data-tone="ok"] .pfg-cl{color:var(--f-onfill-sub) !important;}
.pm-mock .pfg--lanesplit .pfg-cell{padding:0 0 10px;}
.pm-mock .pfg--lanesplit .pfg-cell--h .pfg-ct{font-size:19px !important;}
.pm-mock .pfg--lanesplit .pfg-lane[data-tone="ng"] .pfg-cell:last-child,
.pm-mock .pfg--lanesplit .pfg-lane[data-tone="ok"] .pfg-cell:last-child{border-top:1px dashed var(--f-line2);padding-top:11px;}
.pm-mock .pfg--lanesplit .pfg-cell:last-child{padding-bottom:0;}
.pm-mock .pfg--lanesplit .pfg-lane[data-tone="ok"] .pfg-cell:last-child{border-top-color:rgba(255,255,255,.28);}
/* G4 lanestrip：帯（見出し左固定） */
.pm-mock .pfg--lanestrip .pfg-lanes{gap:1px;background:var(--f-line);border:1px solid var(--f-line);}
.pm-mock .pfg--lanestrip .pfg-lane{
  display:grid; grid-template-columns:minmax(140px,.28fr) repeat(calc(var(--c,3) - 1),minmax(0,1fr));
  gap:0; background:var(--f-white);
}
.pm-mock .pfg--lanestrip .pfg-cell{padding:15px 18px;border-left:1px solid var(--f-line);}
.pm-mock .pfg--lanestrip .pfg-cell--h{border-left:0;background:var(--f-tint);}
.pm-mock .pfg--lanestrip .pfg-lane[data-tone="ng"] .pfg-cell--h{background:var(--f-warn-bg);}
.pm-mock .pfg--lanestrip .pfg-lane[data-tone="ok"] .pfg-cell--h{background:var(--f-pale);}
.pm-mock .pfg--lanestrip .pfg-lane[data-tone="ng"] .pfg-cell--r,
.pm-mock .pfg--lanestrip .pfg-lane[data-tone="ok"] .pfg-cell--r{background:var(--f-tint);}
/* G5 lanecmp：見出しを大きく取った比較 */
.pm-mock .pfg--lanecmp .pfg-lane{
  border-left:4px solid var(--f-line2); padding:4px 0 4px 20px;
}
.pm-mock .pfg--lanecmp .pfg-lane[data-tone="ng"]{border-left-color:var(--f-warn-rail);}
.pm-mock .pfg--lanecmp .pfg-lane[data-tone="ok"]{border-left-color:var(--f-sky);}
.pm-mock .pfg--lanecmp .pfg-cell{padding:0 0 12px;}
.pm-mock .pfg--lanecmp .pfg-cell--h .pfg-ct{font-size:20px !important;letter-spacing:-.01em;}
.pm-mock .pfg--lanecmp .pfg-lane[data-tone="ng"] .pfg-cell--r,
.pm-mock .pfg--lanecmp .pfg-lane[data-tone="ok"] .pfg-cell--r{
  padding:11px 16px; background:var(--f-tint); border-radius:6px; display:inline-block;
}
.pm-mock .pfg--lanecmp .pfg-lane[data-tone="ok"] .pfg-cell--r{background:var(--f-pale);}

/* ===== H. 個別図版（fx：この1枚だけの型） ============================= */
/* H1 fxgate：関門を通過するたびに幅が狭くなる */
.pm-mock .pfg--fxgate .fx-gates{display:flex;flex-direction:column;gap:8px;}
.pm-mock .pfg--fxgate .fx-gate{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 20px;
  align-items:center; padding:15px 20px 16px;
  background:#1B224C; color:#fff; border-radius:6px;
  width:var(--w); margin:0 auto 0 0;
}
/* 関門と関門のあいだに <p class="fx-drop"> が入るので nth-of-type で数える */
.pm-mock .pfg--fxgate .fx-gate:nth-of-type(2){background:#20356C;}
.pm-mock .pfg--fxgate .fx-gate:nth-of-type(3){background:#164E85;}
.pm-mock .pfg--fxgate .fx-gate:nth-of-type(4){background:#10658F;}
.pm-mock .pfg--fxgate .fx-gt{font-size:18px !important;font-weight:700 !important;line-height:1.5 !important;color:#fff !important;}
.pm-mock .pfg--fxgate .fx-gs{font-size:14px !important;line-height:1.5 !important;color:rgba(255,255,255,.88) !important;text-align:right;}
.pm-mock .pfg--fxgate .fx-drop{
  font-size:14px !important; line-height:1.6 !important; color:var(--f-warn) !important;
  padding:2px 0 2px 20px; position:relative;
}
.pm-mock .pfg--fxgate .fx-drop::before{content:"↘";position:absolute;left:2px;top:2px;}

/* H2 fxfunnel：工程別の転換率 */
.pm-mock .pfg--fxfunnel .fx-fn{display:flex;flex-direction:column;gap:6px;}
.pm-mock .pfg--fxfunnel .fx-row{
  display:grid; grid-template-columns:minmax(78px,auto) minmax(0,1fr); gap:14px; align-items:center;
}
.pm-mock .pfg--fxfunnel .fx-rl{
  font-size:16.5px !important; font-weight:700 !important; color:var(--f-ink) !important; text-align:right;
}
.pm-mock .pfg--fxfunnel .fx-bar{
  height:46px; display:flex; align-items:center; padding:0 16px; border-radius:4px;
  background:linear-gradient(90deg,#1B224C,#3B4A85); width:var(--w); color:#fff;
  font-size:15px; line-height:1.4;
}
.pm-mock .pfg--fxfunnel .fx-row:last-child .fx-bar{background:linear-gradient(90deg,#155F8E,#2C9AD4);}
.pm-mock .pfg--fxfunnel .fx-bt{color:#fff !important;font-size:15px !important;}

/* H3 fxchart：予実の棒グラフ */
.pm-mock .pfg--fxchart .fx-ch{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; align-items:end;
  height:210px; padding:0 6px 0; border-bottom:1px solid var(--f-line2);
}
.pm-mock .pfg--fxchart .fx-mo{display:flex;gap:6px;align-items:flex-end;justify-content:center;height:100%;}
.pm-mock .pfg--fxchart .fx-b{
  width:26px; height:var(--h); border-radius:3px 3px 0 0; position:relative;
  display:flex; align-items:flex-start; justify-content:center;
}
.pm-mock .pfg--fxchart .fx-b--plan{background:var(--f-line2);}
.pm-mock .pfg--fxchart .fx-b--act{background:var(--f-sky);}
.pm-mock .pfg--fxchart .fx-b span{
  position:absolute; top:-21px; font-size:13.5px; font-weight:700; color:var(--f-ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.pm-mock .pfg--fxchart .fx-xs{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; padding:8px 6px 0;
}
.pm-mock .pfg--fxchart .fx-xs span{text-align:center;font-size:15px;color:var(--f-sub);}
.pm-mock .pfg--fxchart .fx-lg{display:flex;gap:18px;justify-content:flex-end;margin-bottom:10px;}
.pm-mock .pfg--fxchart .fx-lg i{
  font-style:normal; font-size:14px; color:var(--f-sub); display:inline-flex; align-items:center; gap:6px;
}
.pm-mock .pfg--fxchart .fx-lg i::before{content:"";width:12px;height:12px;border-radius:2px;background:var(--f-line2);}
.pm-mock .pfg--fxchart .fx-lg i.is-act::before{background:var(--f-sky);}

/* H4 fxdrop：段階ごとの脱落 */
.pm-mock .pfg--fxdrop .fx-steps{display:flex;flex-direction:column;gap:0;}
.pm-mock .pfg--fxdrop .fx-st{
  border:1px solid var(--f-line2); border-radius:8px; padding:15px 20px 16px;
  background:var(--f-white); width:var(--w); margin-right:auto;
}
.pm-mock .pfg--fxdrop .fx-st b{
  display:block; font-size:18px !important; font-weight:700 !important;
  color:var(--f-ink) !important; background:none !important; line-height:1.5 !important;
}
.pm-mock .pfg--fxdrop .fx-gap{
  display:flex; align-items:center; gap:10px; padding:9px 0 9px 26px; position:relative;
  font-size:15px; line-height:1.6; color:var(--f-warn);
}
.pm-mock .pfg--fxdrop .fx-gap::before{
  content:""; position:absolute; left:9px; top:0; bottom:0; width:2px;
  background:repeating-linear-gradient(var(--f-line2) 0 4px,transparent 4px 8px);
}

/* ===== I. レスポンシブ ================================================ */
@media (max-width:900px){
  .pm-mock .pfg[data-n="4"] .pfg-items,.pm-mock .pfg[data-n="5"] .pfg-items,
  .pm-mock .pfg[data-n="6"] .pfg-items,.pm-mock .pfg[data-n="7"] .pfg-items,
  .pm-mock .pfg[data-n="8"] .pfg-items,.pm-mock .pfg[data-n="9"] .pfg-items{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pm-mock .pfg--track .pfg-items::before{display:none;}
  .pm-mock .pfg--laneflow .pfg-lane{grid-template-columns:minmax(0,1fr);gap:12px;}
  .pm-mock .pfg--laneflow .pfg-cell + .pfg-cell::before{
    left:0; top:-13px; transform:rotate(135deg);
  }
  .pm-mock .pfg--lanestrip .pfg-lane{grid-template-columns:minmax(0,1fr);}
  .pm-mock .pfg--lanestrip .pfg-cell{border-left:0;border-top:1px solid var(--f-line);}
  .pm-mock .pfg--lanestrip .pfg-cell--h{border-top:0;}
}
@media (max-width:680px){
  .pm-mock .pfg .pfg-items{grid-template-columns:minmax(0,1fr) !important;gap:10px;}
  .pm-mock .pfg--outline .pfg-items{gap:0;}
  .pm-mock .pfg--stat .pfg-items{gap:1px;}
  .pm-mock .pfg--chev .pfg-i,.pm-mock .pfg--chev .pfg-i:first-child,.pm-mock .pfg--chev .pfg-i:last-child{
    clip-path:none;padding:14px 16px 16px;border-radius:6px;
  }
  .pm-mock .pfg--arrow .pfg-items{gap:22px;}
  .pm-mock .pfg--arrow .pfg-i + .pfg-i::before{left:50%;top:-17px;transform:translateX(-50%) rotate(135deg);}
  .pm-mock .pfg--duoarrow .pfg-items{gap:34px;}
  .pm-mock .pfg--duoarrow .pfg-i + .pfg-i::before{left:50%;top:-26px;transform:translateX(-50%) rotate(135deg);}
  .pm-mock .pfg--duovs .pfg-items{gap:30px;}
  .pm-mock .pfg--duopanel .pfg-items{gap:0;}
  .pm-mock .pfg--stair .pfg-i,.pm-mock .pfg--stack3d .pfg-i{margin-left:0 !important;}
  .pm-mock .pfg--alt .pfg-items::before{left:5px;}
  .pm-mock .pfg--alt .pfg-i,.pm-mock .pfg--alt .pfg-i:nth-child(even){
    width:auto;margin-left:28px;text-align:left !important;
  }
  .pm-mock .pfg--alt .pfg-i:nth-child(odd)::after,.pm-mock .pfg--alt .pfg-i:nth-child(even)::after{left:-28px;right:auto;}
  .pm-mock .pfg--alt .pfg-i:nth-child(odd) .pfg-k{align-self:flex-start;}
  .pm-mock .pfg--hair .pfg-i,.pm-mock .pfg--zebra .pfg-i,.pm-mock .pfg--sidebar .pfg-i{grid-template-columns:minmax(0,1fr) !important;}
  .pm-mock .pfg--pairswap .pfg-i{flex-direction:column;}
  .pm-mock .pfg--pairswap .pfg-hd{flex:0 0 auto;}
  .pm-mock .pfg--hair .pfg-l,.pm-mock .pfg--zebra .pfg-l{grid-row:auto !important;grid-column:1 !important;}
  .pm-mock .pfg--sidebar .pfg-l{grid-row:auto !important;grid-column:1 !important;}
  .pm-mock .pfg--band .pfg-i{grid-template-columns:44px minmax(0,1fr);gap:0 12px;padding:13px 15px 14px;}
  .pm-mock .pfg--band .pfg-i::before{font-size:24px;}
  .pm-mock .pfg--hero1 .pfg-items{grid-template-columns:minmax(0,1fr) !important;}
  .pm-mock .pfg--fxgate .fx-gate,.pm-mock .pfg--fxdrop .fx-st{width:100% !important;}
  .pm-mock .pfg--fxfunnel .fx-row{grid-template-columns:minmax(0,1fr);gap:2px;}
  .pm-mock .pfg--fxfunnel .fx-rl{text-align:left;}
  .pm-mock .pfg--fxchart .fx-ch{height:170px;gap:6px;}
  .pm-mock .pfg--fxchart .fx-b{width:18px;}
  .pm-mock .pfg--fxchart .fx-xs{gap:6px;}
  .pm-mock .pfg--fxchart .fx-xs span{font-size:13px;}
}

/* H5 fxmatrix：営業プロセス × AI の適用表 */
.pm-mock .pfg--fxmatrix .fx-mx{width:100%;border-collapse:collapse;table-layout:fixed;}
.pm-mock .pfg--fxmatrix .fx-mx th,.pm-mock .pfg--fxmatrix .fx-mx td{
  border:1px solid var(--f-line); padding:10px 6px; text-align:center; font-size:15px;
  color:var(--f-ink) !important; background:var(--f-white); line-height:1.5;
}
.pm-mock .pfg--fxmatrix .fx-mx thead th{background:var(--f-fill);color:var(--f-onfill) !important;font-size:14px;font-weight:700;}
.pm-mock .pfg--fxmatrix .fx-mx tbody th{
  text-align:left; background:var(--f-tint); font-weight:700; font-size:15px; width:31%;
}
.pm-mock .pfg--fxmatrix .fx-mx td b{font-size:17px;color:var(--f-sky) !important;background:none !important;}
.pm-mock .pfg--fxmatrix .fx-mx td i{font-style:normal;color:var(--f-line2) !important;}
.pm-mock .pfg--fxmatrix .fx-lgd{
  display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 0;font-size:14px;color:var(--f-sub);
}
.pm-mock .pfg--fxmatrix .fx-wrap{overflow-x:auto;}
@media (max-width:680px){
  .pm-mock .pfg--fxmatrix .fx-mx{min-width:520px;}
}

/* ===== J. 追加の型 ==================================================== */
/* J1 ribbon：左端を切り欠いた帯 */
.pm-mock .pfg--ribbon .pfg-items{grid-template-columns:minmax(0,1fr) !important;gap:7px;}
.pm-mock .pfg--ribbon .pfg-i{
  background:var(--f-tint); padding:14px 20px 15px 30px;
  clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);
  display:grid; grid-template-columns:minmax(160px,.3fr) minmax(0,1fr); gap:2px 22px; align-items:baseline;
}
.pm-mock .pfg--ribbon .pfg-i:nth-child(even){background:var(--f-pale);}
.pm-mock .pfg--ribbon .pfg-i{align-items:start;}
.pm-mock .pfg--ribbon .pfg-k{grid-column:1;grid-row:1;}
.pm-mock .pfg--ribbon .pfg-t{grid-column:1;grid-row:2;}
.pm-mock .pfg--ribbon .pfg-l{grid-column:2;grid-row:1/3;}
/* J2 bracket：左に括弧状の罫線 */
.pm-mock .pfg--bracket .pfg-items{gap:20px 26px;}
.pm-mock .pfg--bracket .pfg-i{padding:2px 0 2px 18px;}
.pm-mock .pfg--bracket .pfg-i::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:9px;
  border:2px solid var(--f-sky); border-right:0;
}
.pm-mock .pfg--bracket .pfg-t{font-size:19px !important;}
/* J3 panelnum：連番を上に大きく */
.pm-mock .pfg--panelnum .pfg-i{
  border:1px solid var(--f-line); border-radius:var(--f-r); padding:34px 16px 18px;
  background:var(--f-white); text-align:center; gap:7px;
}
.pm-mock .pfg--panelnum .pfg-i::before{
  content:counter(pfg,decimal-leading-zero); position:absolute; left:50%; top:-14px;
  transform:translateX(-50%); width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--f-sky); color:#fff; font-size:14px; font-weight:700; line-height:1;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.pm-mock .pfg--panelnum .pfg-k{align-self:center;}
.pm-mock .pfg--panelnum .pfg-l li{text-align:left;}
/* J4 tagrow：タグ＋説明のコンパクト行 */
.pm-mock .pfg--tagrow .pfg-items{grid-template-columns:minmax(0,1fr) !important;gap:0;}
.pm-mock .pfg--tagrow .pfg-i{
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
  padding:12px 0; border-bottom:1px dotted var(--f-line2);
}
.pm-mock .pfg--tagrow .pfg-k{
  background:var(--f-fill) !important; color:var(--f-onfill) !important; border-radius:3px;
  padding:3px 9px 4px !important; align-self:center;
}
.pm-mock .pfg--tagrow .pfg-t{flex:0 0 auto;}
.pm-mock .pfg--tagrow .pfg-l{flex:1 1 260px;flex-direction:row;flex-wrap:wrap;gap:2px 16px;}
@media (max-width:680px){
  .pm-mock .pfg--ribbon .pfg-i{grid-template-columns:minmax(0,1fr);clip-path:none;padding:13px 16px;border-radius:5px;}
  .pm-mock .pfg--ribbon .pfg-l{grid-row:auto !important;grid-column:1 !important;margin-top:5px !important;}
  .pm-mock .pfg--tagrow .pfg-i{flex-direction:column;align-items:flex-start;}
}

/* 濃紺セクションに置かれた場合でも、地との境目が分かるようにする */
.pm-mock .lpr-sec--dark .pfg--fxgate .fx-gate,
.pm-mock .lpr-sec--dark .pfg--fxfunnel .fx-bar{
  box-shadow:0 0 0 1px rgba(255,255,255,.28);
}

/* =============================================================
 * v1.18.4  protell「どこで落ちているかで、打ち手が変わります」
 * -------------------------------------------------------------
 * この図は .pfg--alt（左右交互の縦タイムライン）で組まれていたが、
 * 中身は
 *   ・段階1〜4 … 接続できない → 受付で止まる → 断られる → アポ獲得
 *                という「左から右への進行」
 *   ・後ろの2つ … 段階ではなく「落ちている場所ごとの打ち手」
 * の2種類が混ざっていた。縦のジグザグだと段階の進行が読み取れず、
 * 打ち手も同じ列に並んでしまうため、
 *   1行目：段階1〜4を横一列（あいだに矢印）
 *   2行目：打ち手2つを2列ぶんずつ
 * に組み替える。
 *
 * [data-n="6"] で限定しているのは、この組み合わせが protell の
 * この1箇所だけだから（他LPの .pfg--alt は data-n="4" で用途が違う）。
 * ============================================================= */
.pm-mock .pfg--alt[data-n="6"] .pfg-items {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 26px 14px !important;
  position: relative;
}
.pm-mock .pfg--alt[data-n="6"] .pfg-items::before { display: none !important; }

.pm-mock .pfg--alt[data-n="6"] .pfg-i {
  width: auto !important;
  margin-left: 0 !important;
  text-align: left !important;
  padding: 14px 14px 16px !important;
}
.pm-mock .pfg--alt[data-n="6"] .pfg-i::after { display: none !important; }
.pm-mock .pfg--alt[data-n="6"] .pfg-i .pfg-k { align-self: flex-start !important; }

/* 段階1〜4：白いカードの帯。あいだに矢印 */
.pm-mock .pfg--alt[data-n="6"] .pfg-i:nth-child(-n+4) {
  grid-row: 1;
  background: #fff;
  border: 1px solid var(--f-line, #E2E8F1);
  border-top: 3px solid var(--f-sky, #1C93D2);
  border-radius: 4px;
}
.pm-mock .pfg--alt[data-n="6"] .pfg-i:nth-child(n+2):nth-child(-n+4)::before {
  content: "→";
  position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  font-size: 15px; line-height: 1; color: var(--f-sky, #1C93D2);
}

/* 打ち手2つ：2列ぶんずつの淡い面 */
.pm-mock .pfg--alt[data-n="6"] .pfg-i:nth-child(5) { grid-row: 2; grid-column: 1 / 3; }
.pm-mock .pfg--alt[data-n="6"] .pfg-i:nth-child(6) { grid-row: 2; grid-column: 3 / 5; }
.pm-mock .pfg--alt[data-n="6"] .pfg-i:nth-child(n+5) {
  background: var(--f-pale, #EAF4FB);
  border-left: 3px solid var(--f-sky, #1C93D2);
  padding: 16px 18px !important;
}

/* タブレット以下：段階は2列、打ち手は横いっぱい */
@media (max-width: 900px) {
  .pm-mock .pfg--alt[data-n="6"] .pfg-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pm-mock .pfg--alt[data-n="6"] .pfg-i:nth-child(-n+2) { grid-row: 1; }
  .pm-mock .pfg--alt[data-n="6"] .pfg-i:nth-child(n+3):nth-child(-n+4) { grid-row: 2; }
  .pm-mock .pfg--alt[data-n="6"] .pfg-i:nth-child(5) { grid-row: 3; grid-column: 1 / 3; }
  .pm-mock .pfg--alt[data-n="6"] .pfg-i:nth-child(6) { grid-row: 4; grid-column: 1 / 3; }
  /* 折り返した先頭（3番目）の左には矢印を出さない */
  .pm-mock .pfg--alt[data-n="6"] .pfg-i:nth-child(3)::before { content: none; }
}
@media (max-width: 560px) {
  .pm-mock .pfg--alt[data-n="6"] .pfg-items { grid-template-columns: minmax(0, 1fr) !important; }
  .pm-mock .pfg--alt[data-n="6"] .pfg-i { grid-row: auto !important; grid-column: 1 / -1 !important; }
  .pm-mock .pfg--alt[data-n="6"] .pfg-i::before { content: none !important; }
}

/* =====================================================================
   K. 横一列フロー ／ 分岐（v1.18.5）
   ---------------------------------------------------------------------
   縦積みの型（band / rail / ribbon / tagrow / stair / alt / hero1 など）に
   重ねて使う修飾クラス。左→右の進行を、そのとおり横一列に組み替える。

     .pfg--row              … 全項目を横一列（項目間に →）
     .pfg--row.is-flat      … 矢印なし（順序ではなく並列の項目を横に並べる）
     .pfg--row[data-row="N"]… 先頭N件だけを進行として横一列にし、
                              進行ではない残りの項目は下段へ切り出す
     .pfg--branch           … 分岐（Yes/No で進み方が変わる図）を左右2ルートに

   基の型ごとの装飾（レール線・切り欠き・階段のインデント・巨大連番・
   1件目だけ濃紺、など）はここでいったん打ち消し、
   共通の「白いカード＋上辺スカイ罫＋矢印」に揃える。
   ===================================================================== */

/* ---- K1. 横一列 ---------------------------------------------------- */
.pm-mock .pfg.pfg--row .pfg-items{
  display:grid !important;
  grid-template-columns:repeat(var(--pfg-cols,4),minmax(0,1fr)) !important;
  gap:26px 14px !important;
  border-top:0 !important;
  position:relative;
}
.pm-mock .pfg.pfg--row[data-n="3"] .pfg-items{--pfg-cols:3;}
.pm-mock .pfg.pfg--row[data-n="4"] .pfg-items{--pfg-cols:4;}
.pm-mock .pfg.pfg--row[data-n="5"] .pfg-items{--pfg-cols:5;}
.pm-mock .pfg.pfg--row[data-n="6"] .pfg-items{--pfg-cols:6;}
/* 基の型が敷いていた中央線・末尾の帯などを消す */
.pm-mock .pfg.pfg--row .pfg-items::before,
.pm-mock .pfg.pfg--row .pfg-items::after{display:none !important;content:none !important;}

.pm-mock .pfg.pfg--row .pfg-i{
  display:flex !important; flex-direction:column !important; gap:5px !important;
  grid-template-columns:none !important;
  grid-column:auto !important; grid-row:auto !important;
  width:auto !important; margin:0 !important;
  padding:14px 14px 16px !important;
  text-align:left !important;
  clip-path:none !important;
  background:var(--f-white) !important;
  border:1px solid var(--f-line) !important;
  border-top:3px solid var(--f-sky) !important;
  border-radius:4px !important;
  box-shadow:none !important;
}
.pm-mock .pfg.pfg--row .pfg-i::before,
.pm-mock .pfg.pfg--row .pfg-i::after{content:none !important;}
.pm-mock .pfg.pfg--row .pfg-k{
  align-self:flex-start !important; grid-column:auto !important; grid-row:auto !important;
  background:none !important; color:var(--f-sky) !important;
  padding:0 !important; border-radius:0 !important;
}
.pm-mock .pfg.pfg--row .pfg-t{
  grid-column:auto !important; grid-row:auto !important;
  font-size:17px !important; line-height:1.5 !important;
}
.pm-mock .pfg.pfg--row .pfg-l{
  grid-column:auto !important; grid-row:auto !important;
  flex-direction:column !important; flex:0 1 auto !important; gap:2px !important;
  margin-top:2px !important;
}
.pm-mock .pfg.pfg--row .pfg-l li{font-size:15px !important; line-height:1.58 !important;}
/* 横に細くなるぶん、語の途中で改行されないようにする */
.pm-mock .pfg.pfg--row .pfg-t,
.pm-mock .pfg.pfg--row .pfg-l li,
.pm-mock .pfg.pfg--branch .pfg-t,
.pm-mock .pfg.pfg--branch .pfg-l li{
  word-break:auto-phrase; overflow-wrap:normal;
}

/* 進行の矢印（カードとカードのすき間に置く） */
.pm-mock .pfg.pfg--row .pfg-i + .pfg-i::before{
  content:"→" !important;
  position:absolute; left:-15px; top:50%; transform:translateY(-50%); z-index:1;
  font-size:17px; font-weight:700; line-height:1; color:var(--f-sky2,#4EA9CA);
}
/* 並列の項目（順序ではない）は矢印なし */
.pm-mock .pfg.pfg--row.is-flat .pfg-i + .pfg-i::before{content:none !important;}
/* 掛け算の関係（A × B × C）で決まる項目は「×」でつなぐ */
.pm-mock .pfg.pfg--row.is-mult .pfg-i + .pfg-i::before{
  content:"\00D7" !important; font-size:17px; color:var(--f-sky);
}

/* band は連番を ::before で描いていた。横組みでは失われるのでキーに戻す */
.pm-mock .pfg--band.pfg--row .pfg-k::after{content:" " counter(pfg) !important;}

/* hero1 は1件目だけ濃紺＋全幅。横一列では他と同じ扱いにする */
.pm-mock .pfg--hero1.pfg--row .pfg-i:first-child{
  grid-column:auto !important; padding:14px 14px 16px !important;
  background:var(--f-white) !important; border-color:var(--f-line) !important;
  border-top-color:var(--f-sky) !important;
}
.pm-mock .pfg--hero1.pfg--row .pfg-i:first-child .pfg-t{color:var(--f-ink) !important;font-size:17px !important;}
.pm-mock .pfg--hero1.pfg--row .pfg-i:first-child .pfg-l li{color:var(--f-sub) !important;}
.pm-mock .pfg--hero1.pfg--row .pfg-i:first-child .pfg-k{color:var(--f-sky) !important;}

/* ---- K2. 進行ではない項目を下段へ切り出す -------------------------- */
/* data-row="3" ＋ data-n="5"：上段に進行3件、下段に別軸の2件 */
.pm-mock .pfg.pfg--row[data-row="3"][data-n="5"] .pfg-items{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:22px 14px !important;
}
.pm-mock .pfg.pfg--row[data-row="3"][data-n="5"] .pfg-i:nth-child(-n+3){grid-row:1 !important;grid-column:span 2 !important;}
.pm-mock .pfg.pfg--row[data-row="3"][data-n="5"] .pfg-i:nth-child(4){grid-row:2 !important;grid-column:1/4 !important;}
.pm-mock .pfg.pfg--row[data-row="3"][data-n="5"] .pfg-i:nth-child(5){grid-row:2 !important;grid-column:4/7 !important;}
.pm-mock .pfg.pfg--row[data-row="3"][data-n="5"] .pfg-i:nth-child(n+4){
  background:var(--f-pale) !important; border:0 !important;
  border-left:3px solid var(--f-sky) !important; border-radius:0 !important;
  padding:16px 18px !important;
}
.pm-mock .pfg.pfg--row[data-row="3"][data-n="5"] .pfg-i:nth-child(n+4)::before{content:none !important;}

/* ---- K3. 分岐（左右2ルート） --------------------------------------- */
.pm-mock .pfg.pfg--branch .pfg-items{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:30px 18px !important;
  border-top:0 !important; position:relative;
}
.pm-mock .pfg.pfg--branch .pfg-items::before,
.pm-mock .pfg.pfg--branch .pfg-items::after{display:none !important;content:none !important;}
.pm-mock .pfg.pfg--branch .pfg-i{
  display:flex !important; flex-direction:column !important; gap:4px !important;
  grid-template-columns:none !important;
  width:auto !important; margin:0 !important;
  padding:14px 16px 16px !important;
  text-align:left !important; clip-path:none !important;
  background:var(--f-white) !important;
  border:1px solid var(--f-line) !important; border-radius:4px !important;
}
.pm-mock .pfg.pfg--branch .pfg-i::before,
.pm-mock .pfg.pfg--branch .pfg-i::after{content:none !important;}
.pm-mock .pfg.pfg--branch .pfg-t{grid-column:auto !important;grid-row:auto !important;font-size:17px !important;}
.pm-mock .pfg.pfg--branch .pfg-l{grid-column:auto !important;grid-row:auto !important;flex-direction:column !important;}
.pm-mock .pfg.pfg--branch .pfg-l li{font-size:15px !important;}
/* 1件目＝分岐の問い（全幅・濃紺・中央） */
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(1){
  grid-column:1/-1 !important; grid-row:1 !important;
  background:var(--f-fill) !important; border-color:var(--f-fill) !important;
  align-items:center !important; text-align:center !important;
}
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(1) .pfg-t{color:var(--f-onfill) !important;}
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(1) .pfg-l li{color:var(--f-onfill-sub) !important;}
/* 左ルート＝2→3／右ルート＝4→5→6 */
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(2){grid-column:1 !important;grid-row:2 !important;}
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(3){grid-column:1 !important;grid-row:3 !important;}
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(4){grid-column:2 !important;grid-row:2 !important;}
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(5){grid-column:2 !important;grid-row:3 !important;}
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(6){grid-column:2 !important;grid-row:4 !important;}
/* 各ルートの行き着く先を塗り分ける */
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(3),
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(6){
  background:var(--f-pale) !important; border-color:var(--f-sky) !important;
  align-items:center !important; text-align:center !important;
}
/* 下向きの矢印 */
.pm-mock .pfg.pfg--branch .pfg-i:nth-child(n+2)::before{
  content:"↓" !important;
  position:absolute; left:50%; top:-24px; transform:translateX(-50%);
  font-size:17px; font-weight:700; line-height:1; color:var(--f-sky2,#4EA9CA);
}

/* ---- K4. 画面が狭いとき ------------------------------------------- */
@media (max-width:900px){
  .pm-mock .pfg.pfg--row[data-n="5"] .pfg-items,
  .pm-mock .pfg.pfg--row[data-n="6"] .pfg-items{--pfg-cols:3;}
  .pm-mock .pfg.pfg--row[data-n="4"] .pfg-items{--pfg-cols:2;}
  .pm-mock .pfg.pfg--row .pfg-i + .pfg-i::before{content:none !important;}
  .pm-mock .pfg.pfg--row[data-row="3"][data-n="5"] .pfg-items{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}
}

/* =====================================================================
   L. 段階が狭くなっていく図を、ひと続きの漏斗にする（v1.18.9）
   ---------------------------------------------------------------------
   fxgate（関門）／fxdrop（脱落）／fxfunnel（転換率）は、いずれも
   「進むほど幅が狭くなる帯」を縦に積む同じ形。
   帯どうしを離して置くと独立したボックスに見えるため、すき間をなくし、
   右側を斜めに切って上下をつなげる。

   右端は「上から下まで1本の直線」になるように引く。
   各要素の高さを実測し、その高さに比例した落差を割り当てているので、
   帯でも注記でも角度が変わらない（途中で急にならない）。
   各要素は自分の上辺の幅 --w と、下辺／上辺の比 --r を持つ。
     例：上辺91.08% → 下辺82.15% なら --w:91.08%; --r:0.902
   最後の帯も同じ角度で斜めに切る（漏斗として閉じない）。
   ===================================================================== */
.pm-mock .pfg--fxgate .fx-gate,
.pm-mock .pfg--fxgate .fx-drop,
.pm-mock .pfg--fxdrop .fx-st,
.pm-mock .pfg--fxdrop .fx-gap,
.pm-mock .pfg--fxfunnel .fx-bar{
  width:var(--w,100%) !important;
  margin-left:0 !important; margin-right:auto !important;
  border-radius:0 !important;
  clip-path:polygon(0 0, 100% 0, calc(100% * var(--r,1)) 100%, 0 100%);
  /* 斜めのぶん、右端の文字が欠けないよう余白を足す */
  padding-right:calc(16px + 50% * (1 - var(--r,1))) !important;
}
/* 段どうしが同系色で溶けないよう、下端に細い区切りを入れる */
.pm-mock .pfg--fxgate .fx-gate,
.pm-mock .pfg--fxdrop .fx-st,
.pm-mock .pfg--fxfunnel .fx-bar{
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.20);
}
/* すき間をなくして、ひと続きの形にする */
.pm-mock .pfg--fxgate .fx-gates{gap:0;}
.pm-mock .pfg--fxdrop .fx-steps{gap:0;}
.pm-mock .pfg--fxfunnel .fx-fn{gap:0;}

/* あいだの注記も、帯と同じ形の一部として描く。
   面は必ず明るいので、文字色は濃紺セクションでも濃い赤に固定する
   （--f-warn は濃紺セクションで淡い赤になり、明るい面では読めなくなるため） */
.pm-mock .pfg--fxgate .fx-drop,
.pm-mock .pfg--fxdrop .fx-gap,
.pm-mock .lpr-sec--dark .pfg--fxgate .fx-drop,
.pm-mock .lpr-sec--dark .pfg--fxdrop .fx-gap{
  background:#E8EEF6 !important;
  color:#A63B33 !important;
  margin-top:0 !important; margin-bottom:0 !important;
  padding-top:9px !important; padding-bottom:9px !important;
  padding-left:22px !important;
}
.pm-mock .pfg--fxdrop .fx-gap::before{display:none;}
.pm-mock .pfg--fxgate .fx-drop::before{top:9px;left:6px;}

/* 罫線は斜めに追従できないので、面で見せる。
   濃紺→水色の段階色は fxgate と揃える（同じ「狭くなっていく」図なので） */
.pm-mock .pfg--fxdrop .fx-st{
  border:0 !important;
  background:#1B224C !important;
}
.pm-mock .pfg--fxdrop .fx-st:nth-of-type(2){background:#20356C !important;}
.pm-mock .pfg--fxdrop .fx-st:nth-of-type(3){background:#164E85 !important;}
.pm-mock .pfg--fxdrop .fx-st:nth-of-type(4){background:#10658F !important;}
.pm-mock .pfg--fxdrop .fx-st:nth-of-type(5){background:#1C93D2 !important;}
.pm-mock .pfg--fxdrop .fx-st b{color:#fff !important;}

/* 濃紺セクションでは、1段目が地の色に溶けてしまうので全体を明るい側へずらす */
.pm-mock .lpr-sec--dark .pfg--fxgate .fx-gate,
.pm-mock .lpr-sec--dark .pfg--fxdrop .fx-st{background:#2A3A72 !important;}
.pm-mock .lpr-sec--dark .pfg--fxgate .fx-gate:nth-of-type(2),
.pm-mock .lpr-sec--dark .pfg--fxdrop .fx-st:nth-of-type(2){background:#1F4F86 !important;}
.pm-mock .lpr-sec--dark .pfg--fxgate .fx-gate:nth-of-type(3),
.pm-mock .lpr-sec--dark .pfg--fxdrop .fx-st:nth-of-type(3){background:#15709F !important;}
.pm-mock .lpr-sec--dark .pfg--fxgate .fx-gate:nth-of-type(4),
.pm-mock .lpr-sec--dark .pfg--fxdrop .fx-st:nth-of-type(4){background:#1C93D2 !important;}
.pm-mock .lpr-sec--dark .pfg--fxgate .fx-gate:nth-of-type(5),
.pm-mock .lpr-sec--dark .pfg--fxdrop .fx-st:nth-of-type(5){background:#4EB3E4 !important;}

/* 転換率の帯は、少し高くして斜めをなだらかにする */
.pm-mock .pfg--fxfunnel .fx-bar{height:54px;}

@media (max-width:900px){
  /* 狭い画面では帯を全幅にするので、斜めはごく浅く */
  .pm-mock .pfg--fxgate .fx-gate,
  .pm-mock .pfg--fxgate .fx-drop,
  .pm-mock .pfg--fxdrop .fx-st,
  .pm-mock .pfg--fxdrop .fx-gap{
    width:100% !important;
  }
  .pm-mock .pfg--fxgate .fx-gate,
  .pm-mock .pfg--fxgate .fx-drop,
  .pm-mock .pfg--fxdrop .fx-st,
  .pm-mock .pfg--fxdrop .fx-gap,
  .pm-mock .pfg--fxfunnel .fx-bar{
    clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    padding-right:30px !important;
  }
}

/* ---- 図版の中で開閉する（.pfg--fold）---------------------------------
   カードの見出しと1行キャッチだけを出し、説明文はその場で開く。
   図版とアコーディオンを2段に積まず、1つの部品にまとめるための型。 */
.pm-mock .pfg--fold .pfg-i{ position:relative; }
.pm-mock .pfg--fold .pfg-i > summary{
  list-style:none; cursor:pointer; display:block;
  margin:0 !important; padding:0 22px 0 0 !important;
  background:none !important;
}
.pm-mock .pfg--fold .pfg-i > summary::-webkit-details-marker{ display:none; }
.pm-mock .pfg--fold .pfg-i > summary::after{
  content:"＋"; position:absolute; right:0; top:0;
  font-size:16px; font-weight:400; line-height:1.5; color:var(--f-sky);
}
.pm-mock .pfg--fold .pfg-i[open] > summary::after{ content:"−"; }
.pm-mock .pfg--fold .pfg-i > summary:hover .pfg-t{ color:var(--f-sky) !important; }
.pm-mock .pfg--fold .pfg-i > summary > .pfg-k{ display:block; margin-bottom:3px !important; }
.pm-mock .pfg--fold .pfg-c{
  display:block; margin-top:4px !important;
  font-size:14.5px !important; font-weight:400 !important; line-height:1.6 !important;
  color:var(--f-sub) !important; background:none !important;
}
.pm-mock .pfg--fold .pfg-i > .pfg-l{ margin-top:9px !important; }
.pm-mock .pfg--fold .pfg-i > .pfg-l li{ font-size:15px !important; line-height:1.75 !important; }
@media (max-width:640px){
  .pm-mock .pfg--fold .pfg-i > summary::after{ right:0; top:-1px; }
  .pm-mock .pfg--fold .pfg-c{ font-size:13.5px !important; }
}

/* =====================================================================
   L. 詳細のアコーディオン（.dtl）  v1.87.0
   ---------------------------------------------------------------------
   09_デザイン方針書 ④の層。各論を初期非表示で「格納」する。
   HTML には全文が残るため、クローラーからは従来どおり読める。
   図版（.pfg）が全体像、こちらが各論。同じ内容を2度置かない。
   ===================================================================== */
.pm-mock .dtl{
  margin:22px 0 4px !important;
  border-top:1px solid var(--line,#E2E8F1);
}
.pm-mock .dtl-i{ border-bottom:1px solid var(--line,#E2E8F1); }
.pm-mock .dtl-q{
  list-style:none; cursor:pointer; position:relative;
  display:flex; gap:14px; align-items:baseline;
  margin:0 !important; padding:15px 34px 15px 0 !important;
  font-size:16.5px !important; font-weight:700 !important; line-height:1.6 !important;
  color:var(--navy,#1B224C) !important; background:none !important;
}
.pm-mock .dtl-q::-webkit-details-marker{ display:none; }
.pm-mock .dtl-q::after{
  content:"＋"; position:absolute; right:2px; top:14px;
  font-size:18px; font-weight:400; line-height:1; color:var(--sky,#1C93D2);
}
.pm-mock .dtl-i[open] > .dtl-q::after{ content:"−"; }
.pm-mock .dtl-q:hover{ color:var(--sky-dark,#14719F) !important; }
.pm-mock .dtl-k{
  flex:none; min-width:74px;
  font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; line-height:1.9; color:var(--sky,#1C93D2);
}
.pm-mock .dtl-s{ min-width:0; }
.pm-mock .dtl-a{ padding:0 0 20px 88px; }
.pm-mock .dtl-a > *{
  margin:0 0 10px !important;
  font-size:15px !important; line-height:1.9 !important;
  color:var(--sub,#5C6B80) !important; background:none !important;
}
.pm-mock .dtl-a > *:last-child{ margin-bottom:0 !important; }
.pm-mock .dtl-a b{ color:var(--navy,#1B224C) !important; background:none !important; }
.pm-mock .dtl-a .dtl-l{ list-style:none !important; padding:0 !important; }
.pm-mock .dtl-a .dtl-l li{
  position:relative; margin:0 0 7px !important; padding-left:15px !important;
  font-size:15px !important; line-height:1.85 !important; color:var(--sub,#5C6B80) !important;
}
.pm-mock .dtl-a .dtl-l li:last-child{ margin-bottom:0 !important; }
.pm-mock .dtl-a .dtl-l li::before{
  content:""; position:absolute; left:0; top:12px;
  width:7px; height:1px; background:var(--sky,#1C93D2);
}
/* 濃色の面に置いたとき */
.pm-mock .lpr-sec--dark .dtl,
.pm-mock .lpr-sec--dark .dtl-i{ border-color:rgba(255,255,255,.20); }
.pm-mock .lpr-sec--dark .dtl-q{ color:#fff !important; }
.pm-mock .lpr-sec--dark .dtl-a > *,
.pm-mock .lpr-sec--dark .dtl-a .dtl-l li{ color:#C3CCDA !important; }
.pm-mock .lpr-sec--dark .dtl-a b{ color:#fff !important; }

/* サマリーに添えるキャッチ（各論の見出しの下に1行） */
.pm-mock .dtl-c{
  display:block; margin-top:3px;
  font-style:normal; font-size:13.5px !important; font-weight:500 !important;
  letter-spacing:0; line-height:1.6 !important; color:var(--sub,#5C6B80) !important;
}
.pm-mock .lpr-sec--dark .dtl-c{ color:#C3CCDA !important; }

@media (max-width:640px){
  .pm-mock .dtl-q{
    display:block; padding:13px 26px 13px 0 !important; font-size:15.5px !important;
  }
  .pm-mock .dtl-q::after{ top:12px; }
  .pm-mock .dtl-k{ display:block; min-width:0; line-height:1.5; margin-bottom:2px; }
  .pm-mock .dtl-a{ padding:0 0 16px 0; }
}

/* =============================================================
 * v1.85.0  図版（.pfg-*）の文字サイズ統一
 * -------------------------------------------------------------
 * 図版はタイプごとに font-size を !important で個別指定していて、
 * タイトルだけで 15〜21px の13種類あった。同じ「図の中の見出し」
 * なのに図によって大きさが違うため、ページを通して見たときに
 * ちぐはぐに見える。
 *
 * ベース（lp-figures.css 冒頭）はもともと
 *     .pfg-t 18px / .pfg-l li 16px
 * と、サイト全体の基準（本文18px・ボックス内16px）に合っている。
 * タイプ別の上書きだけがズレていたので、そこを基準に戻す。
 *
 *   図版タイトル   .pfg-t    → 18px
 *   図版のリスト   .pfg-l li → 16px
 *   図版の説明     .pfg-c    → 14px
 *   図版のラベル   .pfg-k    → 14px
 *
 * 数値の強調（22px以上）は装飾なので触っていない。
 * 戻すときはこのブロックごと消せばよい。
 * ============================================================= */


/* --- tag --- */
.pm-mock .pfg .pfg-k{font-size:14px !important}

/* --- caption --- */
.pm-mock .pfg .pfg-note{font-size:14px !important}

/* --- title --- */
.pm-mock .pfg--outline .pfg-t{font-size:18px !important}

/* --- other --- */
.pm-mock .pfg--tabtop .pfg-i::before{font-size:14px !important}

/* --- title --- */
.pm-mock .pfg--hero1 .pfg-i:first-child .pfg-t{font-size:18px !important}
.pm-mock .pfg--pill .pfg-t{font-size:18px !important}
.pm-mock .pfg--mono .pfg-t{font-size:18px !important}
.pm-mock .pfg--stat .pfg-t{font-size:18px !important}

/* --- list --- */
.pm-mock .pfg--stat .pfg-l li{font-size:16px !important}

/* --- title --- */
.pm-mock .pfg--card2 .pfg-t{font-size:18px !important}

/* --- list --- */
.pm-mock .pfg--card2 .pfg-l li{font-size:16px !important}

/* --- title --- */
.pm-mock .pfg--duovs .pfg-t{font-size:18px !important}
.pm-mock .pfg--duopanel .pfg-t{font-size:18px !important}
.pm-mock .pfg--duoarrow .pfg-t{font-size:18px !important}
.pm-mock .pfg--duoscale .pfg-t{font-size:18px !important}
.pm-mock .pfg--duoscale .pfg-i > .pfg-t:first-child{font-size:18px !important}
.pm-mock .pfg .pfg-ct{font-size:18px !important}
.pm-mock .pfg--lanesplit .pfg-cell--h .pfg-ct{font-size:18px !important}
.pm-mock .pfg--lanecmp .pfg-cell--h .pfg-ct{font-size:18px !important}
.pm-mock .pfg--fxfunnel .fx-bt{font-size:18px !important}

/* --- other --- */
.pm-mock .pfg--fxchart .fx-b span{font-size:14px !important}

/* --- title --- */
.pm-mock .pfg--bracket .pfg-t{font-size:18px !important}
.pm-mock .pfg.pfg--row .pfg-t{font-size:18px !important}

/* --- list --- */
.pm-mock .pfg.pfg--row .pfg-l li{font-size:16px !important}

/* --- title --- */
.pm-mock .pfg--hero1.pfg--row .pfg-i:first-child .pfg-t{font-size:18px !important}
.pm-mock .pfg.pfg--branch .pfg-t{font-size:18px !important}

/* --- list --- */
.pm-mock .pfg.pfg--branch .pfg-l li{font-size:16px !important}

/* --- caption --- */
.pm-mock .pfg--fold .pfg-c{font-size:14px !important}

/* --- list --- */
.pm-mock .pfg--fold .pfg-i > .pfg-l li{font-size:16px !important}

/* --- other --- */
.pm-mock .dtl-k{font-size:14px !important}

/* --- list --- */
.pm-mock .dtl-a .dtl-l li{font-size:16px !important}

/* --- other --- */
.pm-mock .dtl-c{font-size:14px !important}