@charset "UTF-8";
/* =====================================================================
 * contrast.css — 視認性（コントラスト）の底上げ　v2.21.0
 * ---------------------------------------------------------------------
 *   配色そのものは変えていない。ブランドのスカイ（#1C93D2）は
 *   「面」「大きい文字」ではそのまま使い、
 *   小さいラベル・番号・リンクの文字色と、白文字を載せる面だけを
 *   1段深いスカイ（#15719F）に落としている。
 *   薄いグレーの注記（#8090A2 など）も本文の副色（#5C6B80）へ寄せた。
 *
 *   判定は WCAG の 4.5:1（大きい文字は 3.0:1）。
 *   装飾（透かしの大きな数字、引用符、写真プレースホルダの頭文字）は
 *   読むものではないので対象外にしている。
 *
 *   いちばん最後に読み込む。外せば元の見え方に戻る。
 * ===================================================================== */

.pm-mock{
  --c-sky-ink:#15719F;   /* 明るい地に載る小さいスカイ文字 */
  --c-sky-ink2:#125E88;  /* 上より濃い地（#DCE8FA など）に載るとき */
  --c-sky-fill:#15719F;  /* 白文字を載せるスカイの面 */
  --c-sub:#5C6B80;       /* 注記・補足のグレー */
}

/* ---- 1. 小さいスカイ文字 ------------------------------------------- */
.pm-mock .tso-more-tag,
.pm-mock .tso-more-link,
.pm-mock .lps-case-badge em,
.pm-mock .st .n,
.pm-mock .nc > .tag,
.pm-mock .rg-card,
.pm-mock .ivc,
.pm-mock .lps-poster-cell-no,
.pm-mock .pm-case-link--cta,
.pm-mock .lps-tl-tag,
.pm-mock .dtl-k,
.pm-mock .pt,
.pm-mock .lps-iconrow-tag,
.pm-mock .intent.i3,
.pm-mock .phase,
.pm-mock .s4-q p,
.pm-mock .usp-t,
.pm-mock .pl-t,
.pm-mock .dist-tag,
.pm-mock .dl-b,
.pm-mock .stance__no,
.pm-mock .wr-no,
.pm-mock .ss-n,
.pm-mock .tso-chip--line,
.pm-mock .stg .n,
.pm-mock .hub-mv .hub-body a,
.pm-mock .hub-jobs .hub-body a,
.pm-mock .hub-voices .hub-body a,
.pm-mock .pfg-i a{ color:var(--c-sky-ink) !important; }

/* 淡いスカイ／淡い青の地に載る小さいラベルは、もう1段落とす */
.pm-mock .faqlog__cat,
.pm-mock .job-tag,
.pm-mock .lpr-numrow-tag,

.pm-mock .flow__step .ph,
.pm-mock .lps-tl-node .lps-tl-tag{ color:var(--c-sky-ink2) !important; }

/* ---- 2. 白文字を載せるスカイの面 ------------------------------------ */
/*   面を塗っている型ごとに当てる。同じクラスでも色を回している箇所
 *   （.lps-tabbox-tab の4色ローテーションなど）があるので、
 *   もともとスカイだったものだけを深いスカイに置き換える。 */
body.is-lp-mock .mock-embed .flow__step .ph,
body.is-lp-mock .mock-embed .cards > .card .n,
body.is-lp-mock .mock-embed .reasons > .reason .reason__no{
  background-color:var(--c-sky-fill) !important;
  color:#fff !important;
}
body.is-lp-mock .mock-embed .tso-pair-tab,
body.is-lp-mock .mock-embed .lps-tabbox:nth-child(4n+2) .lps-tabbox-tab,
body.is-lp-mock .mock-embed .lps-pipe-cell:nth-child(5),
body.is-lp-mock .mock-embed .lps-v:is(.sk-card,.sk-line,.sk-fill) .lps-pipe-cell:nth-child(5),
body.is-lp-mock .mock-embed .lps-chev--last,
.pm-mock.lp-rich .lpr-sec .fstep:nth-child(5),
.pm-mock .hub-body .sm-axis dt,
.pm-mock .ax,
.pm-mock .s4-h--p,
.pm-mock .rpt-tab.active,
.pm-mock .rptimg-tab.active,
.pm-mock table th.hl{ background:var(--c-sky-fill) !important; }

/* 面の上の小さい白文字は、透過をやめて不透明の白に戻す */
.pm-mock.lp-rich .lpr-sec .fstep:nth-child(5) small,
.pm-mock .mv-tag{ color:#fff !important; }

/* ---- 3. 注記・補足のグレー ------------------------------------------ */
.pm-mock .price-note,
.pm-mock .price-note a,
.pm-mock .photo-cap,
.pm-mock .photo-slot,
.pm-mock .photo-slot span,
.pm-mock .pm-case-link,
.pm-mock .lps-more-btn em,
.pm-mock .lps-g2-tag,
.pm-mock .lps-stat-tag,
.pm-mock .job-sub,
.pm-mock .ln-n,
.pm-mock .mock-embed figcaption,
.pm-mock td > i{ color:var(--c-sub) !important; }

/* 濃いめの淡青の地（.stg）に載る補足 */
.pm-mock .stg .en,
.pm-mock .stg .parts{ color:#414D5E !important; }

/* ---- 4. スカイ以外のアクセント色 ------------------------------------ */
.pm-mock .ng-tag,
.pm-mock .intent.i4,
.pm-mock .rep-sample table th{ color:#A8431F !important; }
.pm-mock .intent.i1{ color:#2A7049 !important; }
.pm-mock .job-tag.orange{ color:#8F5A07 !important; }
.pm-mock .nn-tag,
.pm-mock .rep-tag{ color:#2F6B67 !important; }
.pm-mock .media-banner .mb-src,
.pm-mock .media-banner .mb-arrow{ color:#1A73C4 !important; }

/* ---- 5. モック個別CSSの濃紺ボックス --------------------------------- */
/* .why-sub-b（/service/sales/）は濃紺の箱。中の見出しと本文が
   濃紺のままで読めなかった。箱の中だけ白へ倒す */
.pm-mock .why-sub-b :is(h3,p,li),
.pm-mock .why-sub-b{ color:rgba(255,255,255,.92) !important; }
.pm-mock .why-sub-b h3,
.pm-mock .why-sub-b b{ color:#fff !important; }

/* ---- 6. 既存ルールの詳細度が高いところ（同じ内容を強い形で当て直す）--- */
body.is-lp-mock .mock-embed .tso-more-i .tso-more-tag,
body.is-lp-mock .mock-embed .tso-more-i .tso-more-link,
body.is-lp-mock .mock-embed .lps-iconrow-item .lps-iconrow-tag,
.pm-mock .hub-body .rg-card .rg-en{ color:var(--c-sky-ink) !important; }

body.is-lp-mock .mock-embed td i,
.pm-mock .hub-body td i,
.pm-mock .hub-body .ivc .ivc-pv{ color:var(--c-sub) !important; }
body.is-lp-mock .mock-embed .tw{ color:var(--c-sky-ink2) !important; }

/* ミッション・ビジョンのティールのカード（白い小ラベルが沈んでいた） */
.pm-mock .hub-body .mv-card.teal-card{ background-color:#2F6B67 !important; }

/* /service/sales/ の濃紺ボックス。モック側の指定が body.is-lp-sales を
   前提にしていて当たっていないため、ここで当て直す */
body.is-lp-mock .mock-embed .why-sub-b :is(h3,b,strong){ color:#fff !important; }
body.is-lp-mock .mock-embed .why-sub-b :is(p,li){ color:#D6E4F2 !important; }

.pm-mock .pfg--fxmatrix .fx-mx td i{ color:var(--c-sub) !important; }

/* ---- 7. 採用ページ・課題ページのパーツ ------------------------------- */
.pm-mock .t-time,
.pm-mock .iv-role,
.pm-mock .hub-biz .hub-body a{ color:var(--c-sky-ink) !important; }

.pm-mock .jobdet-kind,
.pm-mock .iv-prev,
.pm-mock .day-note,
.pm-mock .note-small{ color:var(--c-sub) !important; }

/* ロゴのティール（#71BFBA / #3F8F8A）は小さい文字だと沈むので1段落とす */
.pm-mock .q-mark,
.pm-mock .day-eyebrow,
.pm-mock .proc-num,
.pm-mock .cp-badge span,
.pm-mock .name-note .nn-tag,
.pm-mock .rep-message .rep-tag{ color:#2F6B67 !important; }
.pm-mock .proc-card .proc-desc{ color:#414D5E !important; }

.pm-mock .hub-path .hub-body .cp-row:nth-child(-n+4) .cp-tier span{ color:#fff !important; }
.pm-mock .media-banner .mb-src,
.pm-mock .media-banner .mb-arrow{ color:#1560A8 !important; }

.pm-mock .chg a.btn,
.pm-mock .chg-col-main a.btn{ background-color:var(--c-sky-fill) !important; }
.pm-mock .cp-axis > span{ color:#2F6B67 !important; }

/* ---- 8. スマホ幅で「大きい文字」の扱いから外れるもの ----------------- */
.pm-mock .sx-badge,
.pm-mock .ivc-meta .ivc-rl,
.pm-mock .faq-q,
.pm-mock .hub-body a{ color:var(--c-sky-ink) !important; }

/* =====================================================================
 * 9. 面と地が近すぎる箱に、輪郭を出す（v2.23.0）
 * ---------------------------------------------------------------------
 *   淡い面の箱（#F4F7FB・#EAF4FB）が、淡グレーのセクション（#F3F6F9）に
 *   載ると輪郭が消えていた。切り抜きを使っていない箱には細い罫線を、
 *   切り抜いている箱（矢羽根・台形）は塗りを1段落として見せる。
 * ===================================================================== */
.pm-mock :is(.wtag,.wr-cause,.wr-fix,.faqlog__row,.faqlog__cat,.appo-card__dt,
  .segaxis,.cadence,.faq,.dist-box,.coverage,.q-note,.note-box,
  .tso-media-fig--dia,.tso-trio-media--dia,.lpr-zig-row--reverse){
  border:1px solid #D9E1EC !important;
}
/* 切り抜いている箱（矢羽根・台形）は罫線が出ないので、
   段階の塗りを全体に1段落として、1段目から輪郭が見えるようにする */
.pm-mock .hub-body .stg:first-child{ background:#E9F0F9 !important; }
.pm-mock .hub-body .stg:nth-child(2){ background:#E4ECF8 !important; }
.pm-mock .hub-body .stg:nth-child(3){ background:#DBE6F6 !important; }
.pm-mock .hub-body .stg:nth-child(4){ background:#D2DFF3 !important; }
.pm-mock .hub-body .stg:nth-child(5){ background:#C9D8F0 !important; }
.pm-mock .hub-calc .hub-body .flow__step:nth-child(1){ background:#E9F0F9 !important; }
.pm-mock .hub-calc .hub-body .flow__step:nth-child(2){ background:#E2ECF9 !important; }
.pm-mock .hub-calc .hub-body .flow__step:nth-child(3){ background:#D7E3F6 !important; }
.pm-mock .hub-proc .hub-body .proc-card:nth-child(1){ background:#ECF4F3 !important; }
.pm-mock .hub-proc .hub-body .proc-card:nth-child(2){ background:#E2EFED !important; }
.pm-mock .hub-proc .hub-body .proc-card:nth-child(3){ background:#D8E9E6 !important; }
/* 表の見出し行の地も1段落とす */
.pm-mock table.price thead th{ background-color:#EDF2F8; }
/* 表の縞は薄すぎたので1段落とす */
.pm-mock table.price tbody tr:nth-child(even){ background-color:#F4F8FC; }

/* ---------------------------------------------------------------------
   v2.28.0 — F17 fwladder の見出し帯（5段のときの5段目）で、
   小さい文字のコントラストが 4.5:1 を下回っていた。
   帯の色は変えず、載せる文字だけ明るくする。
   --------------------------------------------------------------------- */
.pm-mock .pfg--fwladder .pfg-head .pfg-k{ color:#E8F4FE !important; }
.pm-mock .pfg--fwladder .pfg-head .pfg-c{ color:#F7FBFE !important; }

/* =====================================================================
   v2.28.0 — 図版の中の小さすぎる文字を底上げする
   ---------------------------------------------------------------------
   PC は html{zoom:.75} が掛かるため、CSS 上の 11px は画面では 8px 台に
   なる。ラベル（STEP / PHASE / VERTICAL など）と表の見出しが
   「小さな箱に小さな文字」に見えていたので、下限を 13px に揃える。
   ===================================================================== */
.pm-mock .pfg .pfg-k{ font-size:13px !important; }
.pm-mock .pfg--fwgrade .pfg-c{ font-size:13px !important; }
.pm-mock .pfg .pfg-over small{ font-size:12.5px !important; }
.pm-mock .pfg--fxmatrix .fx-mx :is(th,td){ font-size:13px !important; }
.pm-mock .pfg--fxmatrix .fx-mx thead th{ font-size:13.5px !important; }
.pm-mock .pfg--fxmatrix .fx-lgd{ font-size:13px !important; }
@media (max-width:820px){
  /* スマホは等倍なので、これ以上は小さくしない */
  .pm-mock .pfg .pfg-k{ font-size:12px !important; }
  .pm-mock .pfg--fwarc .pfg-k{ font-size:11.5px !important; }
}
/* fwladder の見出し帯のラベルは、型側で 12px を !important で指定しているので上書きする */
.pm-mock .pfg--fwladder .pfg-head .pfg-k{ font-size:13px !important; }

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

.pm-mock .pfg .pfg-k{font-size:14px !important}
.pm-mock .pfg--fwgrade .pfg-c{font-size:14px !important}
.pm-mock .pfg .pfg-over small{font-size:14px !important}
.pm-mock .pfg--fxmatrix .fx-mx :is(th,td){font-size:14px !important}
.pm-mock .pfg--fxmatrix .fx-mx thead th{font-size:14px !important}
.pm-mock .pfg--fxmatrix .fx-lgd{font-size:14px !important}
.pm-mock .pfg--fwladder .pfg-head .pfg-k{font-size:14px !important}

@media (max-width:900px){
  .pm-mock .pfg .pfg-k{font-size:13px !important}
  .pm-mock .pfg--fwgrade .pfg-c{font-size:13px !important}
  .pm-mock .pfg .pfg-over small{font-size:13px !important}
  .pm-mock .pfg--fxmatrix .fx-mx :is(th,td){font-size:13px !important}
  .pm-mock .pfg--fxmatrix .fx-mx thead th{font-size:13px !important}
  .pm-mock .pfg--fxmatrix .fx-lgd{font-size:13px !important}
  .pm-mock .pfg--fwladder .pfg-head .pfg-k{font-size:13px !important}
}

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