@charset "utf-8";
/* =====================================================================
   lp-flow.css  —  フロー（順序のある内容）専用の図版の型
   ---------------------------------------------------------------------
   方針（2026-09 デザイン修正の指示より）
   ・細い線だけで要素をつながない。つなぎは「色面」か「形の噛み合わせ」で表す
   ・小さなボックスを横に並べない。段は全幅か、十分な面積を持たせる
   ・使っていない余白を残さない
   ・図の形そのものが内容（順序・分岐・循環・歩留まり）を語るようにする
   配色は現行のまま（navy #1B224C / sky #1C93D2 / pale #EAF4FB / tint #F4F7FB）
   ===================================================================== */

/* ---- 共通トークン ---------------------------------------------------- */
.pm-mock .pfg[class*="pfg--fw"]{
  /* 面として使う色。一番濃い紺（#1B224C）は使わない（2026-09 方針）。
     濃紺は文字色（--fw-ink）としてだけ残す */
  --fw-1:#0F3E64; --fw-2:#134C78; --fw-3:#16598C; --fw-4:#1967A0;
  --fw-5:#1B74B2; --fw-6:#1C7FBE; --fw-ink:#1B224C;
  /* 明るい地に載せる小さめのスカイ文字は、そのままだと 3.4:1 で足りない */
  --fw-skytext:#15719F;
  --fw-pale:#EAF4FB; --fw-tint:#F4F7FB; --fw-line:#E2E8F1;
  --fw-gray:#EDF0F4; --fw-gray2:#D8DFE8; --fw-sub:#5C6B80;
  --fw-warn:#B4433B; --fw-warn-bg:#FBF0EF;
}
/* 段ごとの色（--i で 1..6 を受ける） */
.pm-mock .pfg[class*="pfg--fw"] .pfg-i{ --fwc:var(--fw-1); }
.pm-mock .pfg[class*="pfg--fw"] .pfg-i:nth-child(1){ --fwc:var(--fw-1); }
.pm-mock .pfg[class*="pfg--fw"] .pfg-i:nth-child(2){ --fwc:var(--fw-2); }
.pm-mock .pfg[class*="pfg--fw"] .pfg-i:nth-child(3){ --fwc:var(--fw-3); }
.pm-mock .pfg[class*="pfg--fw"] .pfg-i:nth-child(4){ --fwc:var(--fw-4); }
.pm-mock .pfg[class*="pfg--fw"] .pfg-i:nth-child(5){ --fwc:var(--fw-5); }
.pm-mock .pfg[class*="pfg--fw"] .pfg-i:nth-child(6){ --fwc:var(--fw-6); }
.pm-mock .pfg[class*="pfg--fw"] .pfg-note{ margin-top:14px !important; }

/* =====================================================================
   F3  fwladder — 左が濃紺の柱、右が本文
   1段あたりの説明が長いフロー（各工程に3〜4行）向き。
   柱の色が段ごとに明るくなるので、進行が色でわかる。
   ===================================================================== */
.pm-mock .pfg--fwladder .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important;
  gap:2px !important; margin-top:16px !important;
}
.pm-mock .pfg--fwladder .pfg-i{
  display:grid !important; grid-template-columns:330px minmax(0,1fr);
  gap:0; align-items:stretch;
}
.pm-mock .pfg--fwladder .pfg-head{
  background:var(--fwc); color:#fff; padding:20px 24px 22px;
  display:flex; flex-direction:column; gap:7px; justify-content:center;
  position:relative;
}
/* 柱の右端を矢羽根に噛ませる（線を使わずに「次へ」を出す） */
.pm-mock .pfg--fwladder .pfg-head::after{
  content:""; position:absolute; right:-13px; top:50%; transform:translateY(-50%);
  width:0; height:0; z-index:2;
  border-top:13px solid transparent; border-bottom:13px solid transparent;
  border-left:13px solid var(--fwc);
}
.pm-mock .pfg--fwladder .pfg-head .pfg-k{
  color:#C8E7FB !important; font-size:12px !important; letter-spacing:.16em;
}
.pm-mock .pfg--fwladder .pfg-head .pfg-t{
  color:#fff !important; font-size:19.5px !important; line-height:1.46 !important;
  overflow-wrap:normal !important; text-wrap:balance;
}
.pm-mock .pfg--fwladder .pfg-head .pfg-c{
  color:#EAF1F8 !important; font-size:14px !important; line-height:1.6 !important;
  display:block;
}
.pm-mock .pfg--fwladder .pfg-body{ background:var(--fw-tint); padding:18px 24px 20px 30px; }
.pm-mock .pfg--fwladder .pfg-l{ gap:9px; }
.pm-mock .pfg--fwladder .pfg-l li{ font-size:15.5px !important; line-height:1.66 !important; }
.pm-mock .pfg--fwladder .pfg-l li b{ color:var(--fw-1) !important; }

/* =====================================================================
   F4  fwchev — 矢羽根の横帯
   全幅を n 等分し、セルを矢羽根にして食い込ませる。文字は白。
   3〜5段・短文向き。横に置いても「小さな箱の羅列」に見えないよう
   セルの高さを十分にとる。
   ===================================================================== */
.pm-mock .pfg--fwchev .pfg-items{
  display:grid !important; gap:0 !important; margin-top:18px !important;
  grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
}
.pm-mock .pfg--fwchev .pfg-i{
  background:var(--fwc); color:#fff;
  padding:22px 20px 24px 40px; min-height:168px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  margin-left:-22px; justify-content:flex-start; gap:7px;
}
.pm-mock .pfg--fwchev .pfg-i:first-child{
  margin-left:0; padding-left:26px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.pm-mock .pfg--fwchev .pfg-i:last-child{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 22px 50%);
}
.pm-mock .pfg--fwchev .pfg-k{
  color:#D5EDFC !important; font-size:11.5px !important; letter-spacing:.16em;
}
.pm-mock .pfg--fwchev .pfg-i:nth-child(n+5) .pfg-k{ color:#F0F7FC !important; }
.pm-mock .pfg--fwchev .pfg-t{ color:#fff !important; font-size:20px !important; }
.pm-mock .pfg--fwchev .pfg-l li{ color:#fff !important; font-size:15.5px !important; }

/* =====================================================================
   F5  fwtime — 期間つきのレール
   上に太いレールを敷き、その上に「最短1ヶ月」などの期間を載せる。
   工程はレールからぶら下げる。期間が情報として意味を持つフロー向き。
   ===================================================================== */
.pm-mock .pfg--fwtime .pfg-items{
  display:grid !important; gap:0 !important; margin-top:20px !important;
  grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  padding-top:50px; position:relative; align-items:stretch;
}
/* レール */
.pm-mock .pfg--fwtime .pfg-items::before{
  content:""; position:absolute; left:0; right:0; top:38px; height:12px;
  background:linear-gradient(90deg,var(--fw-1) 0%,var(--fw-3) 46%,var(--fw-5) 100%);
  border-radius:6px;
}
.pm-mock .pfg--fwtime .pfg-span{
  position:absolute; left:0; right:0; top:0; height:30px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:.06em; color:var(--fw-1);
}
.pm-mock .pfg--fwtime .pfg-span::before,
.pm-mock .pfg--fwtime .pfg-span::after{
  content:""; flex:1; height:8px; border:2px solid var(--fw-gray2);
  border-bottom:0; margin:0 14px; align-self:flex-end;
}
.pm-mock .pfg--fwtime .pfg-span::before{ border-right:0; border-radius:4px 0 0 0; }
.pm-mock .pfg--fwtime .pfg-span::after{  border-left:0;  border-radius:0 4px 0 0; }
/* 各工程は、レールに接する番号の帯からはじまる（丸は使わない） */
.pm-mock .pfg--fwtime .pfg-i{
  position:relative; padding:0 0 18px; margin-right:2px;
  background:var(--fw-tint); gap:0;
}
.pm-mock .pfg--fwtime .pfg-i:last-child{ margin-right:0; background:var(--fw-pale); }
.pm-mock .pfg--fwtime .pfg-k{
  display:flex !important; align-items:baseline; gap:7px;
  align-self:stretch !important; justify-content:space-between;
  background:var(--fwc) !important; color:#fff !important;
  padding:9px 14px 10px !important; margin:0 0 12px !important;
  font-family:'Poppins',sans-serif; font-size:11.5px !important;
  font-weight:700 !important; letter-spacing:.16em;
}
.pm-mock .pfg--fwtime .pfg-k::after{
  content:counter(pfg,decimal-leading-zero);
  font-size:17px; font-weight:800; letter-spacing:.02em;
}
.pm-mock .pfg--fwtime .pfg-t{ font-size:16px !important; line-height:1.46 !important; padding:0 14px; }
.pm-mock .pfg--fwtime .pfg-l{ padding:4px 14px 0; }
.pm-mock .pfg--fwtime .pfg-l li{ font-size:15px !important; line-height:1.62 !important; }

/* =====================================================================
   F6  fwrelay — 受け渡し（リレー）
   1面目から2面目へ、斜めの切り欠きで噛み合わせる。
   「AIで処理 → 残りを人手で → それでも残るもの」のような引き継ぎ向き。
   ===================================================================== */
.pm-mock .pfg--fwrelay .pfg-items{
  display:grid !important; gap:0 !important; margin-top:18px !important;
  grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
}
.pm-mock .pfg--fwrelay .pfg-i{
  padding:24px 26px 26px 44px; min-height:186px; gap:8px;
  margin-left:-26px;
  clip-path:polygon(26px 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
}
.pm-mock .pfg--fwrelay .pfg-i:first-child{
  margin-left:0; padding-left:28px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
}
.pm-mock .pfg--fwrelay .pfg-i:last-child{
  clip-path:polygon(26px 0, 100% 0, 100% 100%, 0 100%);
}
.pm-mock .pfg--fwrelay .pfg-i:nth-child(1){ background:var(--fw-5); }
.pm-mock .pfg--fwrelay .pfg-i:nth-child(2){ background:var(--fw-1); }
.pm-mock .pfg--fwrelay .pfg-i:nth-child(3){ background:var(--fw-gray); }
.pm-mock .pfg--fwrelay .pfg-i:nth-child(-n+2) .pfg-k{ color:rgba(255,255,255,.88) !important; }
.pm-mock .pfg--fwrelay .pfg-i:nth-child(-n+2) .pfg-t{ color:#fff !important; font-size:20px !important; }
.pm-mock .pfg--fwrelay .pfg-i:nth-child(-n+2) .pfg-l li{ color:#fff !important; }
.pm-mock .pfg--fwrelay .pfg-i:nth-child(3) .pfg-t{ color:var(--fw-sub) !important; font-size:18px !important; }
.pm-mock .pfg--fwrelay .pfg-i:nth-child(3) .pfg-l li{ color:#7C8899 !important; }
.pm-mock .pfg--fwrelay .pfg-l li{ font-size:15px !important; line-height:1.64 !important; }

/* =====================================================================
   F7  fwgate — 条件で分かれる
   上に問いの帯、下で2つの面が斜めに開く。
   「〜が固まっているか」で行き先が変わる判断フロー向き。
   DOM：1つ目＝問い／2・3＝分かれた先／4・5＝それぞれの行き先
   ===================================================================== */
.pm-mock .pfg--fwgate .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:2px !important; margin-top:18px !important;
}
.pm-mock .pfg--fwgate .pfg-i:nth-child(1){
  grid-column:1 / -1; background:var(--fw-1); color:#fff;
  padding:22px 28px 26px; align-items:center; text-align:center; gap:5px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px));
}
.pm-mock .pfg--fwgate .pfg-i:nth-child(1) .pfg-t{ color:#fff !important; font-size:22px !important; }
.pm-mock .pfg--fwgate .pfg-i:nth-child(1) .pfg-l li{ color:#CFE0F5 !important; }
.pm-mock .pfg--fwgate .pfg-i:nth-child(1) .pfg-l{ align-items:center; }
/* 分かれた先 */
.pm-mock .pfg--fwgate .pfg-i:nth-child(2),
.pm-mock .pfg--fwgate .pfg-i:nth-child(3){
  padding:26px 26px 22px; gap:6px; margin-top:-4px;
}
.pm-mock .pfg--fwgate .pfg-i:nth-child(2){
  background:var(--fw-gray);
  clip-path:polygon(0 18px, 100% 0, 100% 100%, 0 100%);
}
.pm-mock .pfg--fwgate .pfg-i:nth-child(3){
  background:var(--fw-pale);
  clip-path:polygon(0 0, 100% 18px, 100% 100%, 0 100%);
}
.pm-mock .pfg--fwgate .pfg-i:nth-child(2) .pfg-t{ color:var(--fw-sub) !important; }
.pm-mock .pfg--fwgate .pfg-i:nth-child(3) .pfg-t{ color:var(--fw-1) !important; }
.pm-mock .pfg--fwgate .pfg-i:nth-child(2) .pfg-t,
.pm-mock .pfg--fwgate .pfg-i:nth-child(3) .pfg-t{ font-size:19px !important; }
/* 行き先 */
.pm-mock .pfg--fwgate .pfg-i:nth-child(4),
.pm-mock .pfg--fwgate .pfg-i:nth-child(5){
  padding:18px 26px 20px; align-items:flex-start; justify-content:center; min-height:72px;
}
.pm-mock .pfg--fwgate .pfg-i:nth-child(4){ background:#DDE3EB; }
.pm-mock .pfg--fwgate .pfg-i:nth-child(5){ background:var(--fw-5); }
.pm-mock .pfg--fwgate .pfg-i:nth-child(4) .pfg-t{ color:var(--fw-1) !important; font-size:18px !important; }
.pm-mock .pfg--fwgate .pfg-i:nth-child(5) .pfg-t{ color:#fff !important; font-size:18px !important; }
.pm-mock .pfg--fwgate .pfg-i:nth-child(5) .pfg-l li{ color:rgba(255,255,255,.84) !important; }

/* =====================================================================
   F10 fwlanes — 2〜3系統を並べて、それぞれの流れを見せる
   1レーンが全幅の帯。レーン見出しが左端の色面、右に工程が矢羽根で続く。
   「一般的な進め方 / 当社の進め方」のような対比向き。
   ===================================================================== */
.pm-mock .pfg--fwlanes .pfg-lanes{ display:grid; gap:12px; margin-top:18px; }
/* 列見出し（任意）。レーンと同じ3分割で、上に小さく出す */
.pm-mock .pfg--fwlanes .pfg-hd{
  display:grid; gap:0; margin:18px 0 -6px;
  grid-template-columns:minmax(196px,.25fr) minmax(0,1fr) minmax(196px,.27fr);
}
.pm-mock .pfg--fwlanes .pfg-hd > span{
  padding:0 0 0 22px; color:var(--fw-sub);
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
}
.pm-mock .pfg--fwlanes .pfg-hd > span:nth-child(2){ padding-left:20px; }
.pm-mock .pfg--fwlanes .pfg-hd > span:nth-child(3){ padding-left:22px; }
.pm-mock .pfg--fwlanes .pfg-hd + .pfg-lanes{ margin-top:10px; }
.pm-mock .pfg--fwlanes .pfg-lane{
  display:grid; grid-template-columns:minmax(196px,.25fr) minmax(0,1fr) minmax(196px,.27fr);
  gap:0; align-items:stretch; --lc:var(--fw-1); --lb:var(--fw-tint);
}
.pm-mock .pfg--fwlanes .pfg-lane[data-tone="ng"]{ --lc:#5F6B7C; --lb:var(--fw-gray); }
.pm-mock .pfg--fwlanes .pfg-lane[data-tone="ok"]{ --lc:var(--fw-5); --lb:var(--fw-pale); }
.pm-mock .pfg--fwlanes .pfg-cell{
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:18px 22px; min-width:0; overflow-wrap:anywhere;
}
.pm-mock .pfg--fwlanes .pfg-cell--h{
  background:var(--lc); color:#fff; padding-right:30px;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}
.pm-mock .pfg--fwlanes .pfg-cell--h .pfg-ct{ color:#fff !important; font-size:18px; font-weight:700; }
.pm-mock .pfg--fwlanes .pfg-cell--h .pfg-cl{ color:#fff !important; font-size:13.5px; }
.pm-mock .pfg--fwlanes .pfg-cell:nth-child(2){
  background:var(--lb); margin-left:-18px; padding-left:36px; padding-right:30px;
  clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 36px 50%);
}
.pm-mock .pfg--fwlanes .pfg-cell--r{
  background:var(--lc); color:#fff; margin-left:-18px; padding-left:36px; padding-right:28px;
  clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 36px 50%);
}
.pm-mock .pfg--fwlanes .pfg-cell--r .pfg-ct{
  color:#fff !important; font-size:15px; font-weight:700; line-height:1.48;
}
/* 右端のセルは地が濃いので、副文も白にする（灰色のままだと沈む） */
.pm-mock .pfg--fwlanes .pfg-cell--r .pfg-cl{
  color:#fff !important; font-size:13.5px; line-height:1.5;
}
.pm-mock .pfg--fwlanes .pfg-cell .pfg-ct{ color:var(--fw-1); font-size:16px; font-weight:700; line-height:1.55; }
.pm-mock .pfg--fwlanes .pfg-cell .pfg-cl{ color:var(--fw-sub); font-size:14px; line-height:1.6; }

/* 1セルだけのレーン（前提の一文など）は、3列のグリッドに押し込めず横いっぱいに出す。
   矢印の切り欠きも外して、帯として読ませる。（v2.54.0） */
.pm-mock .pfg--fwlanes .pfg-lane[style*="--c:1"],
.pm-mock .pfg--fwlanes .pfg-lane:not(:has(.pfg-cell + .pfg-cell)){
  grid-template-columns:minmax(0,1fr);
}
.pm-mock .pfg--fwlanes .pfg-lane[style*="--c:1"] .pfg-cell--h,
.pm-mock .pfg--fwlanes .pfg-lane:not(:has(.pfg-cell + .pfg-cell)) .pfg-cell--h{
  clip-path:none;
  padding:16px 22px;
  background:var(--fw-tint);
  border-left:4px solid var(--fw-1);
  border-radius:4px;
}
.pm-mock .pfg--fwlanes .pfg-lane[style*="--c:1"] .pfg-cell--h .pfg-ct,
.pm-mock .pfg--fwlanes .pfg-lane:not(:has(.pfg-cell + .pfg-cell)) .pfg-cell--h .pfg-ct{
  color:var(--fw-1) !important; font-size:16.5px; line-height:1.55;
}
.pm-mock .pfg--fwlanes .pfg-lane[style*="--c:1"] .pfg-cell--h .pfg-cl,
.pm-mock .pfg--fwlanes .pfg-lane:not(:has(.pfg-cell + .pfg-cell)) .pfg-cell--h .pfg-cl{
  color:var(--fw-sub) !important; font-size:14px; line-height:1.65;
}

/* =====================================================================
   スマホ
   ===================================================================== */
@media (max-width:820px){


  .pm-mock .pfg--fwladder .pfg-i{ grid-template-columns:minmax(0,1fr); }
  .pm-mock .pfg--fwladder .pfg-head::after{
    right:auto; left:50%; top:auto; bottom:-13px; transform:translateX(-50%);
    border-left:13px solid transparent; border-right:13px solid transparent;
    border-top:13px solid var(--fwc); border-bottom:0;
  }
  .pm-mock .pfg--fwladder .pfg-body{ padding:16px 18px 18px; }

  .pm-mock .pfg--fwchev .pfg-items,
  .pm-mock .pfg--fwrelay .pfg-items,
  .pm-mock .pfg--fwtime .pfg-items{ grid-auto-flow:row; grid-auto-columns:auto; }
  .pm-mock .pfg--fwchev .pfg-i{
    margin-left:0; margin-top:-16px; padding:24px 20px 20px; min-height:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px));
  }
  .pm-mock .pfg--fwchev .pfg-i:first-child{ margin-top:0; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px)); }
  .pm-mock .pfg--fwchev .pfg-i:last-child{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); padding-top:30px; }

  .pm-mock .pfg--fwrelay .pfg-i{
    margin-left:0; margin-top:-18px; padding:26px 22px 20px; min-height:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
  }
  .pm-mock .pfg--fwrelay .pfg-i:first-child{ margin-top:0; }
  .pm-mock .pfg--fwrelay .pfg-i:last-child{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }

  /* レールは縦にできないので、期間はラベルとして先頭に出す */
  .pm-mock .pfg--fwtime .pfg-items{
    display:flex !important; flex-direction:column; padding-top:0; gap:2px !important;
  }
  .pm-mock .pfg--fwtime .pfg-items::before{ display:none; }
  .pm-mock .pfg--fwtime .pfg-span{
    order:-1; position:static; height:auto; margin-bottom:10px; justify-content:flex-start;
    background:var(--fw-pale); padding:9px 14px; border-radius:4px;
  }
  .pm-mock .pfg--fwtime .pfg-span::before,.pm-mock .pfg--fwtime .pfg-span::after{ display:none; }
  .pm-mock .pfg--fwtime .pfg-i{ padding:0 0 14px; margin-right:0; }
  .pm-mock .pfg--fwtime .pfg-k{ margin-bottom:10px !important; }

  .pm-mock .pfg--fwgate .pfg-items{ grid-template-columns:minmax(0,1fr) !important; }
  .pm-mock .pfg--fwgate .pfg-i:nth-child(1){ grid-column:1; }
  .pm-mock .pfg--fwgate .pfg-i:nth-child(2),
  .pm-mock .pfg--fwgate .pfg-i:nth-child(3){ clip-path:none; margin-top:0; }


  .pm-mock .pfg--fwlanes .pfg-hd{ display:none; }
  .pm-mock .pfg--fwlanes .pfg-lane{ grid-template-columns:minmax(0,1fr); }
  .pm-mock .pfg--fwlanes .pfg-cell--h{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px)); padding-right:22px; }
  .pm-mock .pfg--fwlanes .pfg-cell:nth-child(2){ margin-left:0; margin-top:-10px; padding:24px 22px 18px; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px)); }
  .pm-mock .pfg--fwlanes .pfg-cell--r{ margin-left:0; margin-top:-10px; padding:24px 22px 18px; clip-path:none; }
}

/* =====================================================================
   追加の型（参考画像をもとに 2026-09-21）
   参考の「罫線の枠」は塗りに置き換え、細い線でつなぐ形は採らない。
   ===================================================================== */

/* =====================================================================
   F11 fwbignum — 巨大な番号
   番号そのものを図にする。横3〜4列・1段が短いとき。
   参考②（大きな数字＋右に本文）を、細い罫線をやめて淡色面に載せた形。
   ===================================================================== */
.pm-mock .pfg--fwbignum .pfg-items{
  display:grid !important; gap:14px !important; margin-top:18px !important;
  grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
}
.pm-mock .pfg--fwbignum .pfg-i{
  display:grid !important; grid-template-columns:auto minmax(0,1fr);
  gap:0 16px; align-items:start;
  background:var(--fw-tint); padding:20px 20px 22px 18px;
  border-bottom:6px solid var(--fwc);
}
.pm-mock .pfg--fwbignum .pfg-i::before{
  content:counter(pfg,decimal-leading-zero);
  grid-column:1; grid-row:1 / span 3; align-self:start;
  font-family:'Poppins',sans-serif; font-size:66px; font-weight:800;
  line-height:.86; letter-spacing:-.03em; color:var(--fwc);
}
.pm-mock .pfg--fwbignum .pfg-k{ grid-column:2; color:var(--fwc) !important; }
.pm-mock .pfg--fwbignum .pfg-t{ grid-column:2; font-size:18px !important; }
.pm-mock .pfg--fwbignum .pfg-l{ grid-column:2; margin-top:3px !important; }
.pm-mock .pfg--fwbignum .pfg-l li{ font-size:15px !important; line-height:1.64 !important; }
.pm-mock .pfg--fwbignum .pfg-c{
  grid-column:2; font-size:13.5px !important; line-height:1.5 !important;
  font-weight:600 !important; color:var(--fw-sub) !important;
  display:block; margin-top:2px !important;
}
/* 5〜6項目は1列に並べると細くなりすぎるので、3列×2段に折り返す */
.pm-mock .pfg--fwbignum[data-n="5"] .pfg-items,
.pm-mock .pfg--fwbignum[data-n="6"] .pfg-items{
  grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr));
}
.pm-mock .pfg--fwbignum[data-n="6"] .pfg-i::before,
.pm-mock .pfg--fwbignum[data-n="5"] .pfg-i::before{ font-size:56px; }

/* =====================================================================
   F12 fwarc — 弧でつなぐ
   左に太い半円の弧。弧が次の段へ送る動きをつくる。縦3〜5段。
   参考③の形。線が細いと安く見えるので、弧は 11px の塗りにする。
   ===================================================================== */
.pm-mock .pfg--fwarc .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important;
  gap:0 !important; margin-top:18px !important;
}
.pm-mock .pfg--fwarc .pfg-i{
  display:grid !important; grid-template-columns:124px minmax(0,1fr);
  gap:0 26px; padding:0 0 4px; position:relative; min-height:124px;
}
.pm-mock .pfg--fwarc .pfg-i:last-child{ padding-bottom:0; }
/* 弧（左が開いた半円）。border で描くと頂点が太るので、太さの揃う円弧にする */
.pm-mock .pfg--fwarc .pfg-i::before{
  content:""; position:absolute; left:0; top:0; width:124px; height:124px;
  border-radius:50%; border:11px solid var(--fwc);
  clip-path:polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.pm-mock .pfg--fwarc .pfg-i::after{
  content:counter(pfg,decimal-leading-zero);
  position:absolute; left:26px; top:0; width:98px; height:124px;
  display:grid; place-items:center; line-height:1;
  font-family:'Poppins',sans-serif; font-size:40px; font-weight:800; color:var(--fwc);
}
.pm-mock .pfg--fwarc .pfg-k{
  position:absolute; left:26px; top:26px; width:98px; text-align:center;
  color:var(--fwc) !important; font-size:11.5px !important; letter-spacing:.16em;
}
.pm-mock .pfg--fwarc .pfg-body{
  grid-column:2; align-self:center; background:var(--fw-tint);
  padding:18px 24px 20px; width:100%;
}
.pm-mock .pfg--fwarc .pfg-t{ font-size:19px !important; }
/* 偶数段は弧の向きだけ反転する（ （01 → 02） → （03 ）。数字の位置は動かさない */
.pm-mock .pfg--fwarc .pfg-i:nth-child(even)::before{ transform:scaleX(-1); }
.pm-mock .pfg--fwarc .pfg-i:nth-child(even)::after{ left:0; width:98px; }
.pm-mock .pfg--fwarc .pfg-i:nth-child(even) .pfg-k{ left:0; width:98px; }

/* =====================================================================
   F13 fwpanel — 番号の帯に、本文の面を重ねる
   青い帯の左に番号、その上へ白い面を載せる。縦3〜5段・本文が長めのとき。
   参考④の形。帯と面が重なるので、すき間が出ない。
   ===================================================================== */
.pm-mock .pfg--fwpanel .pfg-items{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important;
  gap:12px !important; margin-top:18px !important;
}
.pm-mock .pfg--fwpanel .pfg-i{
  display:grid !important; grid-template-columns:118px minmax(0,1fr);
  align-items:center; gap:0; background:var(--fwc); padding:9px 9px 9px 0;
}
.pm-mock .pfg--fwpanel .pfg-i::before{
  content:counter(pfg,decimal-leading-zero);
  grid-column:1; grid-row:1; justify-self:center;
  font-family:'Poppins',sans-serif; font-size:38px; font-weight:800;
  line-height:1; color:#fff;
}
.pm-mock .pfg--fwpanel .pfg-k{
  grid-column:1; grid-row:1; align-self:start; justify-self:center;
  margin-top:-4px !important; color:#fff !important;
  font-size:11px !important; letter-spacing:.16em;
}
.pm-mock .pfg--fwpanel .pfg-body{
  grid-column:2; grid-row:1; background:#fff; padding:16px 24px 18px;
}
.pm-mock .pfg--fwpanel .pfg-t{ font-size:19px !important; }

/* =====================================================================
   F14 fwfoot — 本文が上、矢羽根が下
   本文を上の面に置き、下に細めの矢羽根を通す。
   横並びで、1段の説明が2〜4行あるとき（F4だと文字が入らない場合）。
   参考⑤の形。
   ===================================================================== */
.pm-mock .pfg--fwfoot .pfg-items{
  display:grid !important; gap:0 3px !important; margin-top:18px !important;
  grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
}
.pm-mock .pfg--fwfoot .pfg-i{
  display:grid !important; grid-template-rows:minmax(0,1fr) auto; gap:0;
}
.pm-mock .pfg--fwfoot .pfg-body{
  background:var(--fw-tint); padding:18px 20px 20px;
  display:flex; flex-direction:column; gap:6px;
}
.pm-mock .pfg--fwfoot .pfg-t{ font-size:18px !important; }
.pm-mock .pfg--fwfoot .pfg-l li{ font-size:15.5px !important; line-height:1.64 !important; }
.pm-mock .pfg--fwfoot .pfg-tag{
  background:var(--fwc); color:#fff; min-height:52px;
  display:flex; align-items:center; gap:9px; padding:0 18px 0 30px;
  margin-left:-15px; position:relative; z-index:1;
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
  font-family:'Poppins',sans-serif; letter-spacing:.10em;
}
.pm-mock .pfg--fwfoot .pfg-i:first-child .pfg-tag{
  margin-left:0; padding-left:20px;
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}
.pm-mock .pfg--fwfoot .pfg-i:last-child .pfg-tag{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
}
.pm-mock .pfg--fwfoot .pfg-tag em{ font-style:normal; font-size:12.5px; font-weight:700; opacity:.82; }
.pm-mock .pfg--fwfoot .pfg-tag b{ font-size:23px; font-weight:800; line-height:1; }
/* <b> を書かない場合は自動で採番する */
.pm-mock .pfg--fwfoot .pfg-tag:not(:has(b))::after{
  content:counter(pfg,decimal-leading-zero);
  font-size:23px; font-weight:800; line-height:1;
}

@media (max-width:820px){
  .pm-mock .pfg--fwbignum .pfg-items,
  .pm-mock .pfg--fwfoot .pfg-items,
  .pm-mock .pfg--fwbignum[data-n="5"] .pfg-items,
  .pm-mock .pfg--fwbignum[data-n="6"] .pfg-items{ grid-template-columns:minmax(0,1fr); }
  .pm-mock .pfg--fwbignum .pfg-i{ padding:16px 16px 18px 14px; }
  .pm-mock .pfg--fwbignum .pfg-i::before{ font-size:52px; }

  .pm-mock .pfg--fwarc .pfg-i{ grid-template-columns:86px minmax(0,1fr); gap:0 16px; min-height:86px; }
  .pm-mock .pfg--fwarc .pfg-i::before{ width:86px; height:86px; border-width:9px; }
  .pm-mock .pfg--fwarc .pfg-i::after{ left:18px; width:68px; height:86px; font-size:28px; }
  .pm-mock .pfg--fwarc .pfg-k{ left:18px; top:17px; width:68px; font-size:10px !important; }
  .pm-mock .pfg--fwarc .pfg-body{ padding:14px 18px 16px; }

  .pm-mock .pfg--fwpanel .pfg-i{ grid-template-columns:84px minmax(0,1fr); }
  .pm-mock .pfg--fwpanel .pfg-i::before{ font-size:30px; }
  .pm-mock .pfg--fwpanel .pfg-body{ padding:14px 18px 16px; }

  .pm-mock .pfg--fwfoot .pfg-i{ grid-template-rows:auto auto; margin-bottom:8px; }
  .pm-mock .pfg--fwfoot .pfg-tag{
    margin-left:0; padding-left:20px; order:-1; min-height:46px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .pm-mock .pfg--fwfoot .pfg-body{ padding:14px 18px 16px; }

}

/* =====================================================================
   F17 fwarrow — 矢印を並べる
   一つずつ独立した矢印。F4（噛み合う矢羽根）が「一続き」なのに対して、
   こちらは「一段ずつ進む」。横4〜5段・1段が1〜2行のとき。参考②の形。
   ===================================================================== */
.pm-mock .pfg--fwarrow .pfg-items{
  display:grid !important; gap:0 5px !important; margin-top:18px !important;
  grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
}
.pm-mock .pfg--fwarrow .pfg-i{
  background:var(--fwc); color:#fff; min-height:150px;
  padding:20px 34px 22px 18px; gap:5px; justify-content:center;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.pm-mock .pfg--fwarrow .pfg-num{
  display:block; font-family:'Poppins',sans-serif; font-weight:800;
  font-size:30px; line-height:1; color:#fff; opacity:.9; margin-bottom:2px;
}
.pm-mock .pfg--fwarrow .pfg-num em{
  font-style:normal; font-size:11.5px; letter-spacing:.16em;
  opacity:.72; display:block; margin-bottom:4px;
}
.pm-mock .pfg--fwarrow .pfg-num:empty::after,
.pm-mock .pfg--fwarrow .pfg-num--auto::after{ content:counter(pfg,decimal-leading-zero); }
.pm-mock .pfg--fwarrow .pfg-i:not(:has(.pfg-num))::before{
  content:counter(pfg,decimal-leading-zero);
  font-family:'Poppins',sans-serif; font-weight:800; font-size:30px;
  line-height:1; color:#fff; opacity:.9; margin-bottom:6px;
}
.pm-mock .pfg--fwarrow .pfg-t{ color:#fff !important; font-size:18px !important; }
.pm-mock .pfg--fwarrow .pfg-l li{ color:#fff !important; font-size:15px !important; }

/* =====================================================================
   F18 fwhex — 六角形を連ねる
   辺を共有させて連ねる。文字はほとんど入らないので、工程名だけの
   全体像として使う（詳しい説明は下に別の図か本文を置く）。5〜6段向き。
   参考③の形。
   ===================================================================== */
.pm-mock .pfg--fwhex .pfg-items{
  display:grid !important; gap:0 !important; margin-top:20px !important;
  grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
}
.pm-mock .pfg--fwhex .pfg-i{
  background:var(--fwc); color:#fff; min-height:126px;
  display:grid !important; place-items:center; text-align:center;
  padding:16px 34px; gap:4px; margin-left:-30px;
  clip-path:polygon(30px 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 30px 100%, 0 50%);
  box-shadow:-4px 0 0 0 #fff;
}
.pm-mock .pfg--fwhex .pfg-i:first-child{ margin-left:0; box-shadow:none; }
.pm-mock .pfg--fwhex .pfg-num{
  font-family:'Poppins',sans-serif; font-weight:800; font-size:26px;
  line-height:1; color:#fff; opacity:.92;
}
.pm-mock .pfg--fwhex .pfg-num em{
  font-style:normal; font-size:10.5px; letter-spacing:.18em;
  opacity:.70; display:block; margin-bottom:4px;
}
.pm-mock .pfg--fwhex .pfg-num--auto::after{ content:counter(pfg,decimal-leading-zero); }
.pm-mock .pfg--fwhex .pfg-t{
  color:#fff !important; font-size:16px !important; line-height:1.4 !important;
  text-wrap:balance;
}

@media (max-width:820px){
  .pm-mock .pfg--fwarrow .pfg-items,
  .pm-mock .pfg--fwhex .pfg-items{
    grid-auto-flow:row; grid-auto-columns:auto; grid-template-rows:auto;
  }

  .pm-mock .pfg--fwarrow .pfg-items{ gap:5px 0 !important; }
  .pm-mock .pfg--fwarrow .pfg-i{
    min-height:0; padding:18px 18px 30px;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px));
  }
  .pm-mock .pfg--fwarrow .pfg-i:last-child{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); padding-bottom:20px; }

  .pm-mock .pfg--fwhex .pfg-i{
    margin-left:0; margin-top:-22px; min-height:0; padding:30px 22px;
    box-shadow:0 -4px 0 0 #fff;
    clip-path:polygon(0 22px, 50% 0, 100% 22px, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
  }
  .pm-mock .pfg--fwhex .pfg-i:first-child{ margin-top:0; }
}

/* =====================================================================
   F13 のバリエーション（2026-09-21）
   ・.pfg--fwpill … 白い面の左端を半円にする
   ・.pfg--fwdot  … 番号を白い丸で抜く（帯は細め）
   どちらも .pfg--fwpanel と併記して使う
   ===================================================================== */
.pm-mock .pfg--fwpanel.pfg--fwpill .pfg-body{
  border-radius:0 6px 6px 0; padding-left:38px;
  clip-path:none;
}
.pm-mock .pfg--fwpanel.pfg--fwpill .pfg-i{
  padding:9px 9px 9px 0; border-radius:0;
}
.pm-mock .pfg--fwpanel.pfg--fwpill .pfg-body{
  border-top-left-radius:96px; border-bottom-left-radius:96px;
  border-top-right-radius:0; border-bottom-right-radius:0;
}

.pm-mock .pfg--fwpanel.pfg--fwdot .pfg-i{
  grid-template-columns:96px minmax(0,1fr); padding:10px 10px 10px 0;
}
.pm-mock .pfg--fwpanel.pfg--fwdot .pfg-i::before{
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center; line-height:1;
  background:#fff; color:var(--fwc); font-size:25px;
}
.pm-mock .pfg--fwpanel.pfg--fwdot .pfg-k{ display:none !important; }
.pm-mock .pfg--fwpanel.pfg--fwdot .pfg-body{ padding:16px 24px 18px; }

/* =====================================================================
   F14 のバリエーション（2026-09-21）
   .pfg--fwtop … 矢羽根を本文の上につける
   ===================================================================== */
.pm-mock .pfg--fwfoot.pfg--fwtop .pfg-i{ grid-template-rows:auto minmax(0,1fr); }
.pm-mock .pfg--fwfoot.pfg--fwtop .pfg-tag{ order:-1; }

/* .pfg--fwlite … 矢羽根を淡い面＋紺文字にして、文字を読みやすくする（v2.54.3）
   既定は段ごとに面が薄くなるので、後ろの段ほど白文字のコントラストが落ちる。
   段階の進みは矢羽根の形と STEP 表記で伝わるため、面は淡く揃えて可読性を取る。 */
.pm-mock .pfg--fwfoot.pfg--fwlite .pfg-tag{ background:#DCEAF6; color:#0F3E64; }
.pm-mock .pfg--fwfoot.pfg--fwlite .pfg-tag em{ opacity:1; color:#16598C; font-size:13px; }
.pm-mock .pfg--fwfoot.pfg--fwlite .pfg-tag b{ font-size:24px; color:#0F3E64; }
/* 面が淡くなるぶん、下の本文は白にして帯と切り分ける */
.pm-mock .pfg--fwfoot.pfg--fwlite .pfg-body{
  background:#fff; border:1px solid var( --fw-line, #E2E8F1 ); border-top:0;
}

@media (max-width:820px){
  .pm-mock .pfg--fwpanel.pfg--fwpill .pfg-body{
    border-top-left-radius:60px; border-bottom-left-radius:60px; padding-left:28px;
  }
  .pm-mock .pfg--fwpanel.pfg--fwdot .pfg-i{ grid-template-columns:76px minmax(0,1fr); }
  .pm-mock .pfg--fwpanel.pfg--fwdot .pfg-i::before{ width:52px; height:52px; font-size:20px; }
}

/* =====================================================================
   .pfg--fwside — 図の右に実写を1枚、全段にまたがる形で置く
   .pfg--fwpanel と併記して使う。右側の余白が大きいときの受けとして。
   写真は縦位置のものを使う（横位置だと上下が切れて意味が分からなくなる）
   ===================================================================== */
.pm-mock .pfg--fwpanel.pfg--fwside .pfg-items{
  grid-template-columns:minmax(0,1fr) 262px !important;
  gap:12px 14px !important;
}
/* 暗黙の行だと grid-row:1/-1 が効かないので、段数ぶんの行を明示する */
.pm-mock .pfg--fwpanel.pfg--fwside[data-n="3"] .pfg-items{ grid-template-rows:repeat(3,auto); }
.pm-mock .pfg--fwpanel.pfg--fwside[data-n="4"] .pfg-items{ grid-template-rows:repeat(4,auto); }
.pm-mock .pfg--fwpanel.pfg--fwside[data-n="5"] .pfg-items{ grid-template-rows:repeat(5,auto); }
.pm-mock .pfg--fwpanel.pfg--fwside .pfg-i{ grid-column:1; }
.pm-mock .pfg--fwpanel.pfg--fwside .pfg-photo{
  grid-column:2; grid-row:1 / -1;
  position:relative; overflow:hidden; background:var(--fw-1);
  min-height:0; align-self:stretch;
}
.pm-mock .pfg--fwpanel.pfg--fwside .pfg-photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:50% 42%;
  filter:grayscale(1) contrast(1.06) brightness(.98);
}
.pm-mock .pfg--fwpanel.pfg--fwside .pfg-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg,
    rgba(26,96,153,.42) 0%, rgba(26,96,153,.20) 52%, rgba(28,147,210,.24) 100%);
  mix-blend-mode:multiply;
}
@media (max-width:820px){
  .pm-mock .pfg--fwpanel.pfg--fwside .pfg-items{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .pm-mock .pfg--fwpanel.pfg--fwside .pfg-i{ grid-column:1; }
  .pm-mock .pfg--fwpanel.pfg--fwside .pfg-photo{
    grid-column:1; grid-row:auto; height:170px; min-height:0; order:-1;
  }
  .pm-mock .pfg--fwpanel.pfg--fwside .pfg-photo img{ object-position:50% 38%; }
}

/* =====================================================================
   F19 fwgrade — 仕様のグレード表（v2.22.0）
   「安い ←→ 高い」「簡易 ←→ 本格」のように、
   複数の項目それぞれに段階の選択肢があるとき。
   列＝段階なので、選択肢が2つの行は左端と右端に置く（style="--g:1" / "--g:3"）。
   右に実写を1枚添えられる（.pfg-photo を .pfg-items の最後に置く）。
   ===================================================================== */
.pm-mock .pfg--fwgrade .pfg-axis{
  display:grid; align-items:center;
  grid-template-columns:168px minmax(0,1fr);
  gap:0 14px; margin:18px 0 10px;
}
.pm-mock .pfg--fwgrade .pfg-axis::before{ content:""; }
.pm-mock .pfg--fwgrade .pfg-axis > span{
  position:relative; display:flex; align-items:center;
  justify-content:space-between; gap:12px;
  height:30px; padding:0 16px;
  background:linear-gradient(90deg,var(--fw-pale) 0%,var(--fw-4) 78%,var(--fw-3) 100%);
  color:var(--fw-ink); font-size:12.5px; font-weight:700; letter-spacing:.04em;
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
}
.pm-mock .pfg--fwgrade .pfg-axis > span b{ font-weight:700; }
.pm-mock .pfg--fwgrade .pfg-axis > span b:last-child{ color:#fff; }

.pm-mock .pfg--fwgrade .pfg-items{
  display:grid !important; gap:8px 10px !important; margin-top:0 !important;
  grid-template-columns:168px repeat(3,minmax(0,1fr));
  align-items:stretch;
}
/* 実写を添えるとき（.pfg--fwphoto を足す）は右に1列ぶん広げる */
.pm-mock .pfg--fwgrade.pfg--fwphoto .pfg-items{
  grid-template-columns:168px repeat(3,minmax(0,1fr)) 218px;
}
.pm-mock .pfg--fwgrade[data-n="3"] .pfg-items{ grid-template-rows:repeat(3,auto); }
.pm-mock .pfg--fwgrade[data-n="4"] .pfg-items{ grid-template-rows:repeat(4,auto); }
.pm-mock .pfg--fwgrade[data-n="5"] .pfg-items{ grid-template-rows:repeat(5,auto); }

/* 1行ぶん（項目）は枠を持たず、中身をそのまま親のグリッドへ流す */
.pm-mock .pfg--fwgrade .pfg-i{
  display:contents !important;
}

.pm-mock .pfg--fwgrade .pfg-head{
  grid-column:1;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  padding:14px 14px 14px 16px;
  background:var(--fw-gray); border-left:3px solid var(--fw-4);
}
.pm-mock .pfg--fwgrade .pfg-k{
  background:none !important; padding:0 !important; margin:0 !important;
  color:var(--fw-ink) !important; font-size:15.5px !important;
  font-weight:800 !important; letter-spacing:0 !important; line-height:1.5 !important;
}
.pm-mock .pfg--fwgrade .pfg-c{
  margin:0 !important; color:var(--fw-sub) !important;
  font-size:12px !important; line-height:1.55 !important;
}

.pm-mock .pfg--fwgrade .pfg-g{
  grid-column:calc(var(--g,1) + 1);
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  padding:13px 15px 14px; min-height:64px;
  background:var(--fw-tint); border:1px solid var(--fw-line);
}
.pm-mock .pfg--fwgrade .pfg-g[style*="--g:2"]{
  background:var(--fw-pale); border-color:#D3E6F4;
}
.pm-mock .pfg--fwgrade .pfg-g[style*="--g:3"]{
  background:var(--fw-3); border-color:var(--fw-3);
}
.pm-mock .pfg--fwgrade .pfg-g b{
  font-size:15px !important; font-weight:800 !important; line-height:1.5 !important;
  color:var(--fw-ink) !important; background:none !important;
}
.pm-mock .pfg--fwgrade .pfg-g em{
  font-style:normal; font-size:12.5px !important; line-height:1.6 !important;
  color:var(--fw-sub) !important;
}
.pm-mock .pfg--fwgrade .pfg-g[style*="--g:3"] b{ color:#fff !important; }
.pm-mock .pfg--fwgrade .pfg-g[style*="--g:3"] em{ color:#DCEBF7 !important; }

/* 段が飛ぶところ（選択肢が2つ）をつなぐ細い線 */
.pm-mock .pfg--fwgrade .pfg-g[style*="--g:3"]:nth-child(3){ position:relative; }
.pm-mock .pfg--fwgrade .pfg-g[style*="--g:3"]:nth-child(3)::before{
  content:""; position:absolute; top:50%; right:100%; width:calc(100% + 22px);
  border-top:1px dashed var(--fw-gray2);
}

.pm-mock .pfg--fwgrade .pfg-photo{
  /* 行数は data-n で明示しているので 1 / -1 が効く */
  grid-column:5; grid-row:1 / -1; align-self:stretch;
  position:relative; overflow:hidden; background:var(--fw-gray);
}
.pm-mock .pfg--fwgrade .pfg-photo img{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; object-position:var(--fx,50%) var(--fy,50%);
}

@media (max-width:820px){
  .pm-mock .pfg--fwgrade .pfg-axis{ grid-template-columns:minmax(0,1fr); }
  .pm-mock .pfg--fwgrade .pfg-axis::before{ display:none; }
  .pm-mock .pfg--fwgrade .pfg-items,
  .pm-mock .pfg--fwgrade.pfg--fwphoto .pfg-items{
    grid-template-columns:minmax(0,1fr); grid-template-rows:none; gap:14px !important;
  }
  .pm-mock .pfg--fwgrade .pfg-head{ margin-bottom:-8px; }
  .pm-mock .pfg--fwgrade .pfg-head,
  .pm-mock .pfg--fwgrade .pfg-g{ grid-column:1 !important; min-height:0; }
  .pm-mock .pfg--fwgrade .pfg-g[style*="--g:3"]:nth-child(3)::before{ content:none; }
  .pm-mock .pfg--fwgrade .pfg-photo{
    grid-column:1 !important; grid-row:auto; order:-1; height:190px;
  }
}

/* =====================================================================
   F20 fwfix — 原因 → 打ち手（v2.22.0）
   左に「起きていること／原因」、右に「打ち手」を並べ、間を矢印でつなぐ。
   課題ページの「当社の対策」のように、原因と対策が1対1で並ぶとき。
   ===================================================================== */
.pm-mock .pfg--fwfix .pfg-items{
  display:block !important; margin-top:18px !important;
}
.pm-mock .pfg--fwfix .pfg-hd,
.pm-mock .pfg--fwfix .pfg-i{
  display:grid !important; align-items:stretch;
  grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
  padding:0 !important; background:none !important; border:0 !important;
}
.pm-mock .pfg--fwfix .pfg-i::before{ content:none !important; }
.pm-mock .pfg--fwfix .pfg-i + .pfg-i{ margin-top:10px; }

.pm-mock .pfg--fwfix .pfg-hd{ margin-bottom:10px; }
.pm-mock .pfg--fwfix .pfg-hd > span{
  display:flex; align-items:center; padding:9px 16px;
  font-size:13px; font-weight:800; letter-spacing:.04em;
}
.pm-mock .pfg--fwfix .pfg-hd > span:first-child{
  background:var(--fw-gray2); color:var(--fw-ink);
}
.pm-mock .pfg--fwfix .pfg-hd > span:last-child{
  grid-column:3; background:var(--fw-4); color:#fff;
}

.pm-mock .pfg--fwfix .pfg-a,
.pm-mock .pfg--fwfix .pfg-b{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:16px 18px 17px;
}
.pm-mock .pfg--fwfix .pfg-a{
  background:#fff; border:1px solid var(--fw-line);
  padding-left:52px; position:relative;
}
.pm-mock .pfg--fwfix .pfg-a::before{
  content:counter(pfg);
  position:absolute; left:16px; top:17px;
  width:23px; height:23px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--fw-gray2); color:var(--fw-ink);
  font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:800;
}
.pm-mock .pfg--fwfix .pfg-b{
  grid-column:3; background:var(--fw-pale);
  border:1px solid #D3E6F4; border-left:3px solid var(--fw-4);
}
.pm-mock .pfg--fwfix .pfg-t{
  font-size:16px !important; font-weight:800 !important;
  line-height:1.6 !important; color:var(--fw-ink) !important;
}
.pm-mock .pfg--fwfix .pfg-c{
  margin:0 !important; font-size:13.5px !important;
  line-height:1.7 !important; color:var(--fw-sub) !important;
}
/* 間の矢印 */
.pm-mock .pfg--fwfix .pfg-i::after{
  content:""; grid-column:2; grid-row:1; align-self:center; justify-self:center;
  width:15px; height:15px; border-top:2px solid var(--fw-4);
  border-right:2px solid var(--fw-4); transform:rotate(45deg);
}
.pm-mock .pfg--fwfix .pfg-note{
  margin:14px 0 0 !important; padding:13px 18px !important;
  background:var(--fw-tint) !important; border-left:3px solid var(--fw-gray2) !important;
  color:var(--fw-ink) !important; font-size:14px !important;
  font-weight:700 !important; line-height:1.75 !important;
}

@media (max-width:820px){
  .pm-mock .pfg--fwfix .pfg-hd{ grid-template-columns:minmax(0,1fr); gap:0; }
  .pm-mock .pfg--fwfix .pfg-hd > span:last-child{ display:none; }
  .pm-mock .pfg--fwfix .pfg-i{ grid-template-columns:minmax(0,1fr); }
  .pm-mock .pfg--fwfix .pfg-a{ order:1; }
  .pm-mock .pfg--fwfix .pfg-b{ order:3; grid-column:1; border-left-width:3px; }
  .pm-mock .pfg--fwfix .pfg-i::after{
    order:2; grid-column:1; grid-row:auto; transform:rotate(135deg);
    margin:7px auto; width:13px; height:13px;
  }
  .pm-mock .pfg--fwfix .pfg-i + .pfg-i{ margin-top:16px; }
}

/* =====================================================================
   F21 fwsuit — 向く場面 / 向かない場面（v2.24.0）
   2つの立場を左右に置き、それぞれ実写（またはイラスト）を1枚添える。
   「効く / 効かない」「向く / 不向き」の対比向き。
   data-tone="ok" が推す側、"ng" が推さない側。
   ===================================================================== */
.pm-mock .pfg--fwsuit .pfg-items{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px !important; margin-top:18px !important; align-items:start;
}
.pm-mock .pfg--fwsuit .pfg-i{
  display:flex !important; flex-direction:column; gap:0;
  padding:0 !important; background:#fff !important;
  border:1px solid #D9E1EC !important; overflow:hidden;
}
.pm-mock .pfg--fwsuit .pfg-i::before{ content:none !important; }

.pm-mock .pfg--fwsuit .pfg-hd{
  display:flex !important; align-items:baseline; gap:12px;
  padding:11px 18px 12px !important; background:var(--fw-4) !important;
  color:#fff !important; margin:0 !important;
}
.pm-mock .pfg--fwsuit .pfg-i[data-tone="ng"] .pfg-hd{ background:#636E80 !important; }
.pm-mock .pfg--fwsuit .pfg-k{
  background:none !important; padding:0 !important; margin:0 !important;
  color:#fff !important; font-family:'Poppins',sans-serif;
  font-size:12px !important; font-weight:800 !important; letter-spacing:.16em !important;
}
.pm-mock .pfg--fwsuit .pfg-hd .pfg-t{
  font-size:16.5px !important; font-weight:800 !important;
  color:#fff !important; line-height:1.5 !important; background:none !important;
}

.pm-mock .pfg--fwsuit .pfg-photo{
  aspect-ratio:16/9; overflow:hidden; background:var(--fw-gray);
}
.pm-mock .pfg--fwsuit .pfg-photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%);
}

.pm-mock .pfg--fwsuit .pfg-l{
  margin:0 !important; padding:18px 20px 20px !important;
  list-style:none !important; background:none !important;
  display:flex; flex-direction:column; gap:14px;
}
.pm-mock .pfg--fwsuit .pfg-l li{
  margin:0 !important; padding:0 0 0 26px !important; position:relative;
  font-size:14.5px !important; line-height:1.85 !important; color:var(--fw-sub) !important;
}
.pm-mock .pfg--fwsuit .pfg-l li + li{
  border-top:1px solid var(--fw-line); padding-top:14px !important;
}
.pm-mock .pfg--fwsuit .pfg-l li > b:first-child{
  display:block; margin-bottom:3px; font-size:16px; font-weight:800;
  line-height:1.6; color:var(--fw-ink) !important;
}
/* 印（効く＝チェック／不向き＝横棒） */
.pm-mock .pfg--fwsuit .pfg-l li::before{
  content:"" !important; position:absolute; left:2px; top:9px;
  width:11px; height:6px; border-left:2.5px solid var(--fw-4);
  border-bottom:2.5px solid var(--fw-4); transform:rotate(-45deg);
}
.pm-mock .pfg--fwsuit .pfg-l li + li::before{ top:23px; }
.pm-mock .pfg--fwsuit .pfg-i[data-tone="ng"] .pfg-l li::before{
  width:13px; height:0; border-left:0; border-bottom:2.5px solid #9AA5B4;
  transform:none; top:13px;
}
.pm-mock .pfg--fwsuit .pfg-i[data-tone="ng"] .pfg-l li + li::before{ top:27px; }

@media (max-width:820px){
  .pm-mock .pfg--fwsuit .pfg-items{ grid-template-columns:minmax(0,1fr); gap:14px !important; }
  .pm-mock .pfg--fwsuit .pfg-photo{ aspect-ratio:21/9; }
}

/* ---------------------------------------------------------------------
   v2.28.0 — F14 fwfoot をスマホで確実に縦積みにする
   基底が grid-auto-flow:column なので、820px の指定で
   grid-template-columns を1列にしても列送りのままだった。
   （PCの見た目は変えない）
   --------------------------------------------------------------------- */
@media (max-width:820px){
  .pm-mock .pfg--fwfoot .pfg-items{
    grid-auto-flow:row !important;
    grid-auto-columns:auto !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px 0 !important;
  }
}

/* =====================================================================
   v2.28.0 — .pfg--fwside を F5 fwarc でも使えるようにする
   fwarc は左に弧と番号、右に本文という組みで、右端に余白が残りやすい。
   濃紺の面を増やさずに余白を埋めたいので、fwpanel と同じ作法で
   右に実写を1枚立てられるようにする。写真は縦位置のものを使う。
   ===================================================================== */
.pm-mock .pfg--fwarc.pfg--fwside .pfg-items{
  grid-template-columns:minmax(0,1fr) 262px !important;
  gap:0 16px !important;
}
.pm-mock .pfg--fwarc.pfg--fwside[data-n="3"] .pfg-items{ grid-template-rows:repeat(3,auto); }
.pm-mock .pfg--fwarc.pfg--fwside[data-n="4"] .pfg-items{ grid-template-rows:repeat(4,auto); }
.pm-mock .pfg--fwarc.pfg--fwside[data-n="5"] .pfg-items{ grid-template-rows:repeat(5,auto); }
.pm-mock .pfg--fwarc.pfg--fwside .pfg-i{ grid-column:1; }
.pm-mock .pfg--fwarc.pfg--fwside .pfg-photo{
  grid-column:2; grid-row:1 / -1;
  position:relative; overflow:hidden; background:var(--fw-1);
  min-height:0; align-self:stretch;
}
.pm-mock .pfg--fwarc.pfg--fwside .pfg-photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:50% 45%;
  filter:grayscale(1) contrast(1.06) brightness(.98);
}
.pm-mock .pfg--fwarc.pfg--fwside .pfg-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg,
    rgba(26,96,153,.36) 0%, rgba(26,96,153,.16) 52%, rgba(28,147,210,.20) 100%);
  mix-blend-mode:multiply;
}
@media (max-width:820px){
  .pm-mock .pfg--fwarc.pfg--fwside .pfg-items{ grid-template-columns:minmax(0,1fr) !important; }
  .pm-mock .pfg--fwarc.pfg--fwside .pfg-photo{
    grid-column:1; grid-row:auto; height:170px; min-height:0; order:-1; margin-bottom:14px;
  }
}

/* =====================================================================
   v2.30.0 — F17 fwladder でも右に実写の列を立てられるようにする
   工程ごとの箇条書きは1行が短く、右側に余白が残っていた。
   幅を足さずに実写を差し込むため、fwpanel / fwarc と同じ作法を用意する。
   写真は縦位置のものを使う（横位置だと意味のない切り抜きになる）。
   ===================================================================== */
.pm-mock .pfg--fwladder.pfg--fwside .pfg-items{
  grid-template-columns:minmax(0,1fr) 262px !important;
  gap:2px 18px !important;
}
/* ハブ型は本文の幅が広く、右に余白が残るので写真を大きく取る（v2.35.0）。
   写真を絶対配置にして、幅を広げても図版の高さが伸びないようにする */
@media (min-width:1025px){
  .pm-mock .hub-body .pfg--fwladder.pfg--fwside .pfg-items{
    grid-template-columns:minmax(0,1fr) 390px !important;
    gap:2px 22px !important;
  }
  .pm-mock .hub-body .pfg--fwladder.pfg--fwside .pfg-photo img{
    position:absolute; inset:0;
  }
}
.pm-mock .pfg--fwladder.pfg--fwside[data-n="3"] .pfg-items{ grid-template-rows:repeat(3,auto); }
.pm-mock .pfg--fwladder.pfg--fwside[data-n="4"] .pfg-items{ grid-template-rows:repeat(4,auto); }
.pm-mock .pfg--fwladder.pfg--fwside[data-n="5"] .pfg-items{ grid-template-rows:repeat(5,auto); }
.pm-mock .pfg--fwladder.pfg--fwside .pfg-i{ grid-column:1; }
.pm-mock .pfg--fwladder.pfg--fwside .pfg-photo{
  grid-column:2; grid-row:1 / -1;
  position:relative; overflow:hidden; background:var(--fw-1);
  min-height:0; align-self:stretch;
}
.pm-mock .pfg--fwladder.pfg--fwside .pfg-photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,50%) var(--fy,45%);
  filter:grayscale(1) contrast(1.06) brightness(.98);
}
.pm-mock .pfg--fwladder.pfg--fwside .pfg-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg,
    rgba(26,96,153,.36) 0%, rgba(26,96,153,.16) 52%, rgba(28,147,210,.20) 100%);
  mix-blend-mode:multiply;
}
@media (max-width:820px){
  .pm-mock .pfg--fwladder.pfg--fwside .pfg-items{ grid-template-columns:minmax(0,1fr) !important; }
  .pm-mock .pfg--fwladder.pfg--fwside .pfg-photo{
    grid-column:1; grid-row:auto; height:170px; min-height:0; order:-1; margin-bottom:14px;
  }
}

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

.pm-mock .pfg--fwladder .pfg-head .pfg-k{font-size:14px !important}
.pm-mock .pfg--fwladder .pfg-head .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwladder .pfg-l li{font-size:16px !important}
.pm-mock .pfg--fwchev .pfg-k{font-size:14px !important}
.pm-mock .pfg--fwchev .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwchev .pfg-l li{font-size:16px !important}
.pm-mock .pfg--fwtime .pfg-k{font-size:14px !important}
.pm-mock .pfg--fwtime .pfg-k::after{font-size:14px}
.pm-mock .pfg--fwtime .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwtime .pfg-l li{font-size:16px !important}
.pm-mock .pfg--fwrelay .pfg-i:nth-child(-n+2) .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwrelay .pfg-l li{font-size:16px !important}
.pm-mock .pfg--fwgate .pfg-i:nth-child(2) .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwgate .pfg-i:nth-child(3) .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwlanes .pfg-hd > span{font-size:14px}
.pm-mock .pfg--fwlanes .pfg-cell--h .pfg-cl{font-size:14px}
.pm-mock .pfg--fwlanes .pfg-cell--r .pfg-ct{font-size:18px}
.pm-mock .pfg--fwlanes .pfg-cell--r .pfg-cl{font-size:14px}
.pm-mock .pfg--fwlanes .pfg-cell .pfg-ct{font-size:18px}
.pm-mock .pfg--fwlanes .pfg-lane[style*="--c:1"] .pfg-cell--h .pfg-ct{font-size:18px}
.pm-mock .pfg--fwlanes .pfg-lane:not(:has(.pfg-cell + .pfg-cell)) .pfg-cell--h .pfg-ct{font-size:18px}
.pm-mock .pfg--fwbignum .pfg-l li{font-size:16px !important}
.pm-mock .pfg--fwbignum .pfg-c{font-size:14px !important}
.pm-mock .pfg--fwarc .pfg-k{font-size:14px !important}
.pm-mock .pfg--fwarc .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwpanel .pfg-k{font-size:14px !important}
.pm-mock .pfg--fwpanel .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwfoot .pfg-l li{font-size:16px !important}
.pm-mock .pfg--fwfoot .pfg-tag em{font-size:14px}
.pm-mock .pfg--fwhex .pfg-num em{font-size:14px}
.pm-mock .pfg--fwhex .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwfoot.pfg--fwlite .pfg-tag em{font-size:14px}
.pm-mock .pfg--fwgrade .pfg-axis > span{font-size:14px}
.pm-mock .pfg--fwgrade .pfg-k{font-size:14px !important}
.pm-mock .pfg--fwgrade .pfg-c{font-size:14px !important}
.pm-mock .pfg--fwgrade .pfg-g em{font-size:14px !important}
.pm-mock .pfg--fwfix .pfg-hd > span{font-size:14px}
.pm-mock .pfg--fwfix .pfg-a::before{font-size:14px}
.pm-mock .pfg--fwfix .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwfix .pfg-c{font-size:14px !important}
.pm-mock .pfg--fwsuit .pfg-k{font-size:14px !important}
.pm-mock .pfg--fwsuit .pfg-hd .pfg-t{font-size:18px !important}
.pm-mock .pfg--fwsuit .pfg-l li{font-size:16px !important}

@media (max-width:900px){
  .pm-mock .pfg--fwladder .pfg-head .pfg-k{font-size:13px !important}
  .pm-mock .pfg--fwladder .pfg-head .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwladder .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--fwchev .pfg-k{font-size:13px !important}
  .pm-mock .pfg--fwchev .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwchev .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--fwtime .pfg-k{font-size:13px !important}
  .pm-mock .pfg--fwtime .pfg-k::after{font-size:13px}
  .pm-mock .pfg--fwtime .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwtime .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--fwrelay .pfg-i:nth-child(-n+2) .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwrelay .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--fwgate .pfg-i:nth-child(2) .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwgate .pfg-i:nth-child(3) .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwlanes .pfg-hd > span{font-size:13px}
  .pm-mock .pfg--fwlanes .pfg-cell--h .pfg-cl{font-size:13px}
  .pm-mock .pfg--fwlanes .pfg-cell--r .pfg-ct{font-size:16px}
  .pm-mock .pfg--fwlanes .pfg-cell--r .pfg-cl{font-size:13px}
  .pm-mock .pfg--fwlanes .pfg-cell .pfg-ct{font-size:16px}
  .pm-mock .pfg--fwlanes .pfg-lane[style*="--c:1"] .pfg-cell--h .pfg-ct{font-size:16px}
  .pm-mock .pfg--fwlanes .pfg-lane:not(:has(.pfg-cell + .pfg-cell)) .pfg-cell--h .pfg-ct{font-size:16px}
  .pm-mock .pfg--fwbignum .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--fwbignum .pfg-c{font-size:13px !important}
  .pm-mock .pfg--fwarc .pfg-k{font-size:13px !important}
  .pm-mock .pfg--fwarc .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwpanel .pfg-k{font-size:13px !important}
  .pm-mock .pfg--fwpanel .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwfoot .pfg-l li{font-size:14.5px !important}
  .pm-mock .pfg--fwfoot .pfg-tag em{font-size:13px}
  .pm-mock .pfg--fwhex .pfg-num em{font-size:13px}
  .pm-mock .pfg--fwhex .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwfoot.pfg--fwlite .pfg-tag em{font-size:13px}
  .pm-mock .pfg--fwgrade .pfg-axis > span{font-size:13px}
  .pm-mock .pfg--fwgrade .pfg-k{font-size:13px !important}
  .pm-mock .pfg--fwgrade .pfg-c{font-size:13px !important}
  .pm-mock .pfg--fwgrade .pfg-g em{font-size:13px !important}
  .pm-mock .pfg--fwfix .pfg-hd > span{font-size:13px}
  .pm-mock .pfg--fwfix .pfg-a::before{font-size:13px}
  .pm-mock .pfg--fwfix .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwfix .pfg-c{font-size:13px !important}
  .pm-mock .pfg--fwsuit .pfg-k{font-size:13px !important}
  .pm-mock .pfg--fwsuit .pfg-hd .pfg-t{font-size:16px !important}
  .pm-mock .pfg--fwsuit .pfg-l li{font-size:14.5px !important}
}

@media (max-width:820px){
  .pm-mock .pfg--fwarc .pfg-k{font-size:13px !important}
}