@charset "UTF-8";
/* =============================================================
 * mobile-tune.css  ―― スマートフォン表示の調整レイヤー（v1.17.3）
 * -------------------------------------------------------------
 * 目的：スマホでの見え方を、できるだけ PC 版に近い印象へ寄せる。
 *
 * 実測して分かったこと（390px 幅で全ページを確認）
 *   ・見出しや数値がPCの 58〜77% の大きさまでしか縮まないのに対し、
 *     本文カラムは PC の約 1/3 になる。結果として文字だけが相対的に
 *     2倍以上大きく、1行あたりの文字数が極端に少なくなっていた。
 *   ・タブレット幅（1060px）以下でグローバルナビが display:none になり、
 *     スマホには「ロゴ」と「お問い合わせ」しか残っていなかった。
 *   ・パンくず・事例カードの見出し帯・事例詳細の定義リストで、
 *     語の途中で改行される崩れがあった。
 *
 * このファイルは既存CSSを書き換えず、最後に読み込んで上書きする。
 * 元に戻したいときは functions.php の enqueue を1つ外すだけでよい。
 * ============================================================= */


/* =============================================================
 * 1. 表示タイプのスケール調整
 *    PCの比率に近づくよう、見出し・数値まわりを一段階小さくする。
 *    本文（15px前後）は読みやすさを優先してそのまま。
 * ============================================================= */
@media (max-width: 640px) {

  /* --- 見出し --- */
  .pm-mock h1,
  .pm-mock .hero-title            { font-size: 34px !important; line-height: 1.22 !important; }
  .pm-mock .lpr-h1                { font-size: 26px !important; }
  .pm-mock .chg-hero__h1          { font-size: 25px !important; }
  .pm-mock .works-single__h1      { font-size: 22px !important; }
  .pm-mock .hero-jp               { font-size: 21px !important; line-height: 1.55 !important; }
  .pm-mock .hero-sub              { font-size: 15.5px !important; }
  .pm-mock h2                     { font-size: 26px !important; line-height: 1.3 !important; }
  .pm-mock .section-title         { font-size: 24px !important; }
  .pm-mock h3                     { font-size: 20px !important; }
  .pm-mock h4                     { font-size: 18.5px !important; }

  /* --- 数値・ナンバリング --- */
  .pm-mock .value,
  .pm-mock .works-single-kpi__num { font-size: 36px !important; }
  .pm-mock .lps-stat-no           { font-size: 34px !important; }
  .pm-mock .lps-numring-no        { font-size: 56px !important; }
  .pm-mock .lpr-zig-no-big        { font-size: 40px !important; }
  .pm-mock .tso-sec-en            { font-size: 30px !important; }
  .pm-mock .no,
  .pm-mock .co-metric__num,
  .pm-mock .co-value__no          { font-size: 30px !important; }
  .pm-mock .tso-figure-num        { font-size: 29px !important; }
  .pm-mock .t5-num                { font-size: 28px !important; }
  .pm-mock .works-stage__idx      { font-size: 26px !important; }
  .pm-mock .m-num,
  .pm-mock .co-tl-year,
  .pm-mock .co-tl-now-year        { font-size: 24px !important; }
  .pm-mock .t5-word,
  .pm-mock .works-card__kpi-num,
  .pm-mock .hm-n                  { font-size: 23px !important; }

  /* --- 小見出し・強調 --- */
  .pm-mock .big                                  { font-size: 22px !important; }
  .pm-mock .works-card__result-text .big         { font-size: 17.5px !important; }
  .pm-mock .co-h3,
  .pm-mock .t5-jp,
  .pm-mock .day-title                            { font-size: 19.5px !important; }
  .pm-mock .co-fig-title,
  .pm-mock .smap-title,
  .pm-mock .co-media-ttl                         { font-size: 19px !important; }
  .pm-mock .rfaq-title,
  .pm-mock .cs-cat-label,
  .pm-mock .lps-capsule-no,
  .pm-mock .lc-main,
  .pm-mock .ch-cat                               { font-size: 18px !important; }
  .pm-mock .rep-title,
  .pm-mock .eval-title,
  .pm-mock .job-title,
  .pm-mock .step-title                           { font-size: 17.5px !important; }
  .pm-mock .works-card__title                    { font-size: 17px !important; }
  .pm-mock .lead,
  .pm-mock .section-lead,
  .pm-mock .lpr-endcta-lead,
  .pm-mock .faq__a                               { font-size: 16px !important; }

  /* --- 矢印グリフ --- */
  .pm-mock .arr,
  .pm-mock .sp-arr,
  .pm-mock .co-media-arrow,
  .pm-mock .works-card__arrow,
  .pm-mock .mb-arrow                             { font-size: 18px !important; }

  /* --- 可読性の下限（9px まで落ちていた箇所） --- */
  .pm-mock .rep-sample__tag,
  .pm-mock .v-plan,
  .pm-mock .v-act                                { font-size: 14px !important; }
}


/* =============================================================
 * 2. 左から右へ読ませる「フロー図」は、スマホでも横一列のまま
 * -------------------------------------------------------------
 * 例：TOP の「営業プロセスのどこからでも」は
 *   見つける → 接点をつくる → 商談にする → 受注する・続ける
 * という並びで、帯の色も左から右へ濃くなる。
 * これを 2×2 や縦積みにすると、矢印が消えて色の順序も崩れ、
 * 図として辻褄が合わなくなる（/method/ の5ステージも同様）。
 *
 * そこで、この手の図だけは **段組みを変えず横一列のまま**にして、
 * 枠の中だけを横スクロールさせる。
 * 併せて、縦積み用に消していた矢印と斜めの切り欠きを戻す。
 *
 * ★ 1列の幅は grid-auto-columns で調整できます。
 *   広げるほど文字が読みやすくなり、横スクロールは長くなります。
 * ============================================================= */
@media (max-width: 640px) {

  /* --- 共通：横一列＋枠内スクロール --- */
  .pm-mock .svc-process .sp-flow,
  .pm-mock .flow-steps--4,
  .pm-mock .flow-steps--7,
  .pm-mock .hub-body .stages,
  .pm-mock .hub-band .hub-body .named,
  .pm-mock .hub-types .hub-body .named,
  .pm-mock .hub-calc .hub-body .flow,
  .pm-mock .hub-proc .hub-body .process-row,
  body.is-lp-mock .mock-embed .lps-pipe,
  .pm-mock .pfg--chev .pfg-items {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    overflow-x: auto; overflow-y: hidden;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
  }

  /* --- 1列の幅（図ごとに文字量が違うので個別に） --- */
  .pm-mock .svc-process .sp-flow            { grid-auto-columns: 215px !important; gap: 22px !important; }
  .pm-mock .flow-steps--4,
  .pm-mock .flow-steps--7                   { grid-auto-columns: 190px !important; }
  .pm-mock .hub-body .stages                { grid-auto-columns: 290px !important; --slant: 22px !important; }
  .pm-mock .hub-band .hub-body .named,
  .pm-mock .hub-types .hub-body .named      { grid-auto-columns: 225px !important; }
  .pm-mock .hub-calc .hub-body .flow        { grid-auto-columns: 225px !important; --slant: 22px !important; gap: 0 !important; }
  .pm-mock .hub-proc .hub-body .process-row { grid-auto-columns: 215px !important; --slant: 20px !important; gap: 0 !important; }
  body.is-lp-mock .mock-embed .lps-pipe     { grid-auto-columns: 210px !important; }
  .pm-mock .pfg--chev .pfg-items            { grid-auto-columns: 185px !important; }

  .pm-mock .svc-process .sp-flow > *,
  .pm-mock .flow-steps--4 > *,
  .pm-mock .flow-steps--7 > *,
  .pm-mock .hub-body .stages > *,
  .pm-mock .hub-calc .hub-body .flow > *,
  .pm-mock .hub-proc .hub-body .process-row > *,
  body.is-lp-mock .mock-embed .lps-pipe > *,
  .pm-mock .pfg--chev .pfg-items > * { scroll-snap-align: start; }

  /* --- 縦積み用に消していた矢印を戻す --- */
  .pm-mock .svc-process .sp-step + .sp-step::before { content: "→" !important; }
  .pm-mock .svc-process .sp-body { min-height: 0; }

  /* --- 斜めの切り欠き（帯の進行感）を戻す：5ステージ --- */
  .pm-mock .hub-body .stg,
  .pm-mock .hub-body .stg:first-child,
  .pm-mock .hub-body .stg:nth-child(3),
  .pm-mock .hub-body .stg:nth-child(4),
  .pm-mock .hub-body .stg:last-child {
    margin-left: calc(var(--slant) * -1) !important;
    padding: 22px 18px 24px calc(18px + var(--slant)) !important;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
  }
  .pm-mock .hub-body .stg:first-child {
    margin-left: 0 !important; padding-left: 18px !important;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
  }
  .pm-mock .hub-body .stg:last-child {
    clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%) !important;
  }

  /* --- 同：試算フロー --- */
  .pm-mock .hub-calc .hub-body .flow__step {
    margin-left: calc(var(--slant) * -1) !important;
    padding-left: calc(20px + var(--slant)) !important;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
    border-right: 0 !important;
  }
  .pm-mock .hub-calc .hub-body .flow__step:first-child {
    margin-left: 0 !important; padding-left: 20px !important;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
  }

  /* --- 同：導入プロセス --- */
  .pm-mock .hub-proc .hub-body .proc-card,
  .pm-mock .hub-proc .hub-body .proc-card:nth-child(n) {
    margin-left: calc(var(--slant) * -1) !important;
    padding-left: calc(20px + var(--slant)) !important;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
  }
  .pm-mock .hub-proc .hub-body .proc-card:first-child {
    margin-left: 0 !important; padding-left: 20px !important;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
  }

  /* --- フロー図ではない、ただのタイル並びは2カラムのまま --- */
  .f-grid { grid-template-columns: 1fr 1fr !important; gap: 22px 18px !important; }
}


/* =============================================================
 * 3. 語の途中で改行されていた箇所の修正
 * ============================================================= */
@media (max-width: 640px) {

  /* パンくず：折り返さず横スクロールさせる（バーは隠す） */
  .pm-mock .pm-crumb {
    flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
    gap: 8px; font-size: 14.5px; scrollbar-width: none;
  }
  .pm-mock .pm-crumb::-webkit-scrollbar { display: none; }
  .pm-mock .pm-crumb > * { flex: 0 0 auto; }

  /* 事例一覧カードの見出し帯：ラベルとフェーズ名が同じ行で衝突していた */
  .pm-mock .works-card__bar {
    flex-direction: column; align-items: flex-start;
    gap: 2px; padding: 7px 12px;
  }
  .pm-mock .works-card__type  { font-size: 14.5px; }
  .pm-mock .works-card__phase { font-size: 14.5px; line-height: 1.45; }

  /* 事例詳細の定義リスト：見出し列が 100px 固定で「ビジネスモデル」が折れていた */
  .pm-mock .works-single-meta__list > * {
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }
  .pm-mock .works-single-meta__list dt { white-space: nowrap; }

  /* 同意チェックボックスのタップ領域 */
  .pm-mock input[type="checkbox"] { width: 22px; height: 22px; }
}


/* =============================================================
 * 4. 横に伸びる表・図にスクロールできることを示す
 *    （.tablewrap は既に overflow-x:auto。気づけないので目印だけ足す）
 * ============================================================= */
@media (max-width: 760px) {
  .pm-mock .tablewrap { position: relative; }
  .pm-mock .tablewrap::after {
    content: "← 横にスクロールできます →";
    display: block; text-align: right;
    font-size: 14px; color: inherit; opacity: .55; letter-spacing: .02em;
    padding: 6px 2px 0;
  }
}


/* =============================================================
 * 4-2. 図版（SVG）を読める大きさで表示する
 * -------------------------------------------------------------
 * 課題別ページの図（viewBox 900）は、PCでは文字が 18px 相当で
 * 描画されるのに対し、390px 幅では 2.8px 相当まで潰れていて
 * まったく読めない状態だった（14ページ・計35点）。
 * サービスLPの図（viewBox 640）も 6.2px 相当。
 * 縮小をやめ、PCに近い縮尺のまま横スクロールで見せる。
 * ============================================================= */
@media (max-width: 760px) {
  .pm-mock .fig,
  .pm-mock .tso-media-fig { overflow-x: auto !important; overflow-y: hidden; }

  .pm-mock .fig > svg {
    width: 900px !important; min-width: 900px !important;
    max-width: none !important; height: auto !important;
  }
  .pm-mock .tso-media-fig > svg {
    width: 640px !important; min-width: 640px !important;
    max-width: none !important; height: auto !important;
  }

  .pm-mock .fig::after,
  .pm-mock .tso-media-fig::after {
    content: "← 横にスクロールできます →";
    display: block; text-align: right;
    font-size: 14px; color: inherit; opacity: .55; padding: 4px 2px 0;
  }
}


/* =============================================================
 * 4-3. スマホだけ表示倍率を下げる（今回 0.9 → 0.8）
 * -------------------------------------------------------------
 * 本文の文字は、PCでは 1,100px のカラムに 16〜19px。スマホでは
 * 350px のカラムに同じ 16〜19px のまま出ていた。
 * たとえば TOP の「営業プロセスのどこからでも」の4枠は、
 * 項目名が PC では 228px 幅に 16px（1行14文字ぶん）なのに対し、
 * スマホでは 100px 幅に 16px（1行6文字ぶん）で、
 * 「B2Bマーケティ／ング支援」のように語の途中で折れていた。
 *
 * ヘッダーを除いた本文全体を 0.8 倍で描画すると、
 *   ・本文が 13〜15px 相当に落ち着く
 *   ・レイアウト上の横幅が 390px → 487px 相当に広がるので、
 *     1行に入る文字数が増えて折り返しが自然になる
 *   ・横スクロールが要る表も、見える列が増える
 * の3つが同時に効く。レイアウト（段組み・並び）は変わらない。
 *
 * ★ 小さすぎ／詰まりすぎと感じたら、下の 0.8 を上げるだけで戻せます
 *   （0.85 / 0.9 / 1 のいずれでも可）。
 *   直下の図版の 1.25 は 1 ÷ 0.8。倍率を変えるときは合わせて直す。
 * ============================================================= */
@media (max-width: 640px) {
  .pm-mock > *:not(header) { zoom: 0.8; }

  /* 図版だけは等倍に戻す（4-2 の横スクロールで読ませるため） */
  .pm-mock .fig,
  .pm-mock .tso-media-fig { zoom: 1.25; }

  /* 0.8倍で 10px を割り込む小さな文字を底上げする
     （12.5px × 0.8 = 10px 相当が下限） */
  .pm-mock .ax,
  .pm-mock .sub,
  .pm-mock .appo-card__dt,
  .pm-mock .label,
  .pm-mock .pf-t,
  .pm-mock .dl-g,
  .pm-mock .g,
  .pm-mock .chg-hero__eyebrow,
  .pm-mock .meta,
  .pm-mock .ng-tag,
  .pm-mock .faqlog__cat { font-size: 12.5px !important; }

  /* 入力欄は 0.8 倍でも 16px 相当を下回らないようにする
     （iOS Safari は 16px 未満の入力欄にフォーカスすると画面を拡大してしまう） */
  .pm-mock input[type="text"],
  .pm-mock input[type="tel"],
  .pm-mock input[type="email"],
  .pm-mock select,
  .pm-mock textarea { font-size: 20px !important; }

  /* 日本語の折り返しを文節単位にする（対応ブラウザのみ・未対応でも従来どおり） */
  .pm-mock p,
  .pm-mock li,
  .pm-mock dd,
  .pm-mock .sp-item,
  .pm-mock .sp-note { word-break: auto-phrase; }
}


/* =============================================================
 * 5. スマホ・タブレットのグローバルナビ（新規）
 * -------------------------------------------------------------
 * これまで 1060px 以下で nav が display:none になっており、
 * ロゴと「お問い合わせ」以外にサイト内を移動する手段が無かった。
 * parts/mock-header.php に追加したチェックボックスとラベルで
 * 開閉する。JavaScript は使っていない。
 * ============================================================= */
/* チェックボックス本体は隠すが、キーボード操作は残す
   （hidden 属性だと Tab で辿れなくなるため CSS で隠している） */
.pm-mock .pm-navtoggle {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; padding: 0; border: 0;
  pointer-events: none;
}

@media (max-width: 1060px) {
  .pm-mock .header-inner { position: relative; }
  .pm-mock .pm-navtoggle:focus-visible ~ .pm-navbtn {
    outline: 2px solid #1C93D2; outline-offset: 2px; border-radius: 4px;
  }

  .pm-mock .pm-navbtn {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 40px; height: 40px; padding: 0 8px;
    cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent;
  }
  .pm-mock .pm-navbtn span {
    display: block; height: 2px; width: 100%;
    background: #1B224C; border-radius: 2px; transition: .2s;
  }
  .pm-mock .pm-navtoggle:checked ~ .pm-navbtn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pm-mock .pm-navtoggle:checked ~ .pm-navbtn span:nth-child(2) { opacity: 0; }
  .pm-mock .pm-navtoggle:checked ~ .pm-navbtn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .pm-mock .pm-navtoggle:checked ~ nav {
    display: flex; flex-direction: column; gap: 0;
    margin: 0; padding: 4px 0 8px;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid #e6ecf2;
    box-shadow: 0 14px 28px rgba(15, 30, 55, .12);
    max-height: calc(100vh - 64px); overflow-y: auto; z-index: 60;
  }
  .pm-mock .pm-navtoggle:checked ~ nav a {
    font-size: 17px; font-weight: 700;
    padding: 15px 20px; border-bottom: 1px solid #eef2f6;
  }
  .pm-mock .pm-navtoggle:checked ~ nav a:last-child { border-bottom: 0; }
}

@media (min-width: 1061px) {
  .pm-mock .pm-navbtn { display: none; }
}

/* =============================================================
 * 6. 横一列にしたフロー図（.pfg--row）をスマホでどう見せるか（v1.18.5）
 *    PCで横一列にした図は、スマホでは枠内を横スクロールさせる。
 *    （縦に折り返すと「左→右の進行」という意味が崩れるため）
 * ============================================================= */
@media (max-width: 640px) {

  .pm-mock .pfg.pfg--row .pfg-items{
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 190px !important;
    gap: 26px 14px !important;
    overflow-x: auto; overflow-y: hidden;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
  }
  .pm-mock .pfg.pfg--row .pfg-items > * { scroll-snap-align: start; }
  /* 900px 以下で消していた矢印を、横一列に戻したので復帰させる */
  .pm-mock .pfg.pfg--row .pfg-i + .pfg-i::before{ content: "→" !important; }

  /* 進行3件＋別軸2件に分けた図は、上下2段のまま2列に畳む */
  .pm-mock .pfg.pfg--row[data-row="3"][data-n="5"] .pfg-items{
    grid-auto-flow: row !important;
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
    overflow-x: visible;
  }

  /* 分岐図は2ルートの対比が要なので、2列のまま維持する */
  .pm-mock .pfg.pfg--branch .pfg-items{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 26px 10px !important;
  }
  .pm-mock .pfg.pfg--branch .pfg-i{ padding: 12px 12px 13px !important; }
  .pm-mock .pfg.pfg--branch .pfg-t{ font-size: 15.5px !important; }
  .pm-mock .pfg.pfg--branch .pfg-l li{ font-size: 14px !important; }
}

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

@media (max-width: 640px){
  .pm-mock h2{font-size:22px !important}
  .pm-mock .section-title{font-size:22px !important}
  .pm-mock h3{font-size:19px !important}
  .pm-mock h4{font-size:19px !important}
  .pm-mock .co-h3{font-size:19px !important}
  .pm-mock .day-title{font-size:19px !important}
  .pm-mock .rfaq-title{font-size:16px !important}
  .pm-mock .rep-title{font-size:16px !important}
  .pm-mock .eval-title{font-size:16px !important}
  .pm-mock .job-title{font-size:16px !important}
  .pm-mock .step-title{font-size:16px !important}
  .pm-mock .works-card__title{font-size:16px !important}
  .pm-mock .lead{font-size:17px !important}
  .pm-mock .section-lead{font-size:17px !important}
  .pm-mock .lpr-endcta-lead{font-size:17px !important}
  .pm-mock .v-plan{font-size:14.5px !important}
  .pm-mock .v-act{font-size:14.5px !important}
  .pm-mock .pm-crumb{font-size:13px}
  .pm-mock .ax{font-size:13px !important}
  .pm-mock .sub{font-size:13px !important}
  .pm-mock .appo-card__dt{font-size:13px !important}
  .pm-mock .label{font-size:13px !important}
  .pm-mock .pf-t{font-size:16px !important}
  .pm-mock .dl-g{font-size:13px !important}
  .pm-mock .g{font-size:13px !important}
  .pm-mock .meta{font-size:13px !important}
  .pm-mock .ng-tag{font-size:13px !important}
  .pm-mock .faqlog__cat{font-size:13px !important}
  .pm-mock .pfg.pfg--branch .pfg-t{font-size:16px !important}
  .pm-mock .pfg.pfg--branch .pfg-l li{font-size:14.5px !important}
}