@charset "UTF-8";
/* =============================================================================
 * typography.css  —  文字サイズの基準（v1.85.0 / 2026-09-28）
 * -----------------------------------------------------------------------------
 * 長谷川さんのご指摘：
 *   「ただ大きくするというより、文字サイズに統一感がほしい」
 *   「本文はこのくらい、見出しはこれくらい、ボックスの中身はこれくらい」
 *   「極端に小さいところや、極端に大きいところがないように」
 *
 * 着手前のサイト全体では 60種類以上（9.5px〜250px、0.5px刻み）の
 * font-size が使われていた。同じ役割でもページごとに値が違うため、
 * ページをまたぐと大きさが変わって見える状態だった。
 *
 * ■ 基準（8段階）
 *     役割ごとに1つだけ値を決める。0.5px刻みは使わない。
 *     最小は 14px とし、それ未満は作らない。
 *
 *       --fs-display  40px   セクションの英字見出し（Service / Sales Issues）
 *       --fs-h2       28px   ページ内の大見出し
 *       --fs-h3       22px   カード見出し
 *       --fs-lead     21px   セクションのリード文
 *       --fs-body     18px   本文・段落・リスト        ← 基準
 *       --fs-sm       16px   ボックスの中・表のセル・図版のリスト
 *       --fs-cap      14px   注記・出典・キャプション
 *       --fs-tag      14px   タグ・英字ラベル
 *
 * ■ 画面上の実寸について
 *     PC（1025px以上）では global-scale.css の zoom:.75 が掛かるため、
 *     実際の見え方は 0.75 倍になる。
 *       18px → 13.5px ／ 16px → 12px ／ 14px → 10.5px
 *     倍率を変えたいときは global-scale.css の --pm-zoom を触る。
 *
 * ■ 例外として基準から外しているもの
 *     ・数値の強調表示（「300件以上」など。装飾の性格が強い）
 *     ・ヒーローの特大見出し（clamp で可変）
 *     ・図版の装飾番号（22px以上）
 *
 * ■ 適用状況（2026-09-28 時点：全ページ適用済み）
 *     TOP                     top-2026.css      v1.81.0 / v1.83.0
 *     サービスマップ          solution-map.css  v1.82.0
 *     ハブ5ページ             hub.css           v1.84.0
 *     図版 .pfg-*             lp-figures*.css   v1.85.0
 *     それ以外の全ページ      各CSS の末尾      v1.88.0（役割を自動判定して上書き）
 *       service-hub / static-pages / case-cards / challenge / recruit /
 *       documents / article / lp-layouts / lp-list / lp-rich / lp-flow /
 *       redesign-01 / top-mock / mobile-tune / mobile-fit / sp-figures / contrast
 *     対象外：ヘッダー・ナビ・ボタン・フォーム部品・数値の強調・ヒーロー・h1
 *
 * ■ 新しいセクションを足すとき
 *     下の変数を使うか、上の8つの値から選ぶ。
 *     TOP には body.is-top-mock の一括指定（top-mock.css 末尾）があり、
 *     クラス名を1つずつ列挙する方式のため、追加したセクションは
 *     そこに登録しないと旧スケールのまま取り残される。
 * ========================================================================== */

:root{
  --fs-display : 40px;
  --fs-h2      : 28px;
  --fs-h3      : 22px;
  --fs-lead    : 21px;
  --fs-body    : 18px;
  --fs-sm      : 16px;
  --fs-cap     : 14px;
  --fs-tag     : 14px;

  /* 行間。文字サイズとセットで決める */
  --lh-heading : 1.5;
  --lh-body    : 1.9;
  --lh-sm      : 1.8;
  --lh-cap     : 1.7;
}

@media (max-width:900px){
  :root{
    --fs-display : 30px;
    --fs-h2      : 22px;
    --fs-h3      : 19px;
    --fs-lead    : 17px;
    --fs-body    : 16px;
    --fs-sm      : 14.5px;
    --fs-cap     : 13px;
    --fs-tag     : 13px;
  }
}

/* =============================================================================
 * 日本語の改行（v1.86.0 / 2026-09-28）
 * -----------------------------------------------------------------------------
 * 長谷川さんのご指摘：
 *   「ベン図の文字の改行が変。1文字だけの行があったりとか」
 *
 * 原因は overflow-wrap:anywhere。「どこで折ってもよい」という指定なので、
 * 日本語だと語の途中で折れる（「USP設計シ／ート」「落とすと／ころ」）。
 * 狭いカラムで長い英単語がはみ出すのを防ぐために入っていたものだが、
 * 和文の本文には向かない。
 *
 *   overflow-wrap:break-word … はみ出す語だけ折る（anywhere の置き換え）
 *   word-break:auto-phrase   … 和文を文節で折る（Chrome 119+／非対応でも実害なし）
 *   line-break:strict        … 句読点・小書き文字の禁則
 *   text-wrap:pretty         … 最終行に1〜2文字だけ残さない
 *
 * このファイルは wp_enqueue_scripts の priority 99 で読み込んでいる。
 * 各ページの CSS より後に来るので、個別指定を上書きできる。
 * ========================================================================== */

.pm-mock :is(p,li,dd,dt,td,th,figcaption,h1,h2,h3,h4,h5,h6){
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
}
.pm-mock :is(p,li,dd,td){ text-wrap: pretty; }

/* 図版：.pfg-* は overflow-wrap:anywhere が入っていたので打ち消す */
.pm-mock .pfg :is(.pfg-i,.pfg-l,.pfg-t,.pfg-c,.pfg-lead,.pfg-note){
  overflow-wrap: break-word !important;
  word-break: auto-phrase;
  line-break: strict;
}
.pm-mock .pfg :is(.pfg-c,.pfg-lead,.pfg-note){ text-wrap: pretty; }
.pm-mock .pfg .pfg-l li{ text-wrap: pretty; }

/* 記事本文（article.css）と、フローレーンの図版（lp-flow.css）も同じ扱いに */
.pm-mock .is-article-body.is-article-body{
  overflow-wrap: break-word;
  word-break: auto-phrase;
  line-break: strict;
}
.pm-mock .pfg--fwlanes .pfg-cell{
  overflow-wrap: break-word;
  word-break: auto-phrase;
  line-break: strict;
}

/* 数値や英字が続くところは、従来どおり文字単位で折れてよい */
.pm-mock :is(code,pre,.num-cell .value,.ai-metric .m-num,[class*="tabular"]){
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}

/* =============================================================================
 * ページ見出しの英字ラベル（/company/ /privacy/ 404）
 * -----------------------------------------------------------------------------
 * v2.59.3（SEO指摘A06）で英字の「Company.」を <h1> から <p class="en"> に
 * 降格したが、見た目のスタイルは .page-hero h1 に付いたままだったため、
 * 英字ラベルだけ素の本文サイズで表示されていた。/service/ などの
 * 「Service.」と揃うよう、旧 h1 と同じ見た目を p.en に当て直す。
 * ========================================================================== */
.pm-mock .page-hero > .container > p.en{
  margin:18px 0 0;
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:82px; line-height:1.03; letter-spacing:-.01em;
  color:var(--navy,#1B224C);
}
.pm-mock .page-hero > .container > p.en .accent{ color:var(--sky,#1C93D2); }
@media (max-width:960px){
  .pm-mock .page-hero > .container > p.en{ font-size:52px; }
}
@media (max-width:640px){
  .pm-mock .page-hero > .container > p.en{ font-size:40px; }
}