/* =============================================================
   デザイン修正指示書 対応レイヤー 第1弾（v1.28.0）
   -------------------------------------------------------------
   2026-09-05 の指示書のうち、CSSだけで完結し、本文に手を入れない
   ものをまとめた1枚。既存CSSは書き換えず、最後に読み込んで上書きする。
   戻したいときは functions.php の enqueue ごと外す。

   収録：G-01（ヘッダー）／B-04（URL入力欄）／B-06 一部（SPヒーロー）
        ／B-09（reveal）／W-01 一部（RESULTの黄色）／W-04 一部（必須の表示）
   ============================================================= */

/* =============================================================
   G-01  ヘッダーが1440pxで2行に折り返す
   -------------------------------------------------------------
   ナビ8項目が20px・間隔40pxで、1440pxには収まらなかった。
   ハンバーガーへの切替を1060px→1280pxに引き上げ、
   1281px以上では文字と間隔を詰めて1行に収める。
   ※ 指示書にある「6項目への統合＋メガメニュー」は
      情報設計の変更になるため、別途ご判断をいただいてから。
   ============================================================= */
@media (min-width: 1281px) {
  .pm-mock .header-inner { height: 76px; padding: 0 40px; gap: 16px; }
  .pm-mock .logo img { height: 34px; }
  .pm-mock nav { gap: 22px; margin-right: 20px; }
  .pm-mock nav a { font-size: 15.5px; white-space: nowrap; padding: 6px 0; }
  .pm-mock .h-btn { font-size: 15px; padding: 12px 22px; white-space: nowrap; }
}
@media (min-width: 1281px) and (max-width: 1500px) {
  .pm-mock .header-inner { padding: 0 28px; }
  .pm-mock nav { gap: 18px; }
  .pm-mock nav a { font-size: 15px; }
}
/* 1280px以下はハンバーガー（既存は1060px以下だった） */
@media (max-width: 1280px) {
  .pm-mock .pm-navbtn { display: flex !important; }
  .pm-mock nav { display: none; }
  .pm-mock .pm-navtoggle:checked ~ nav { display: flex !important; }
  .pm-mock .header-inner { height: 72px; }
  .pm-mock .logo img { height: 32px; }
  .pm-mock .h-btn { font-size: 14px; padding: 11px 18px; white-space: nowrap; }
}
/* ヘッダーが低くなった分、アンカー移動時の余白も詰める */
html { scroll-padding-top: 92px; }

/* =============================================================
   B-04  お問い合わせフォームの「貴社ウェブサイトURL」欄が未スタイル
   ============================================================= */
.pm-mock .contact-form input[type=url] {
  width: 100%; padding: 12px 14px;
  border: 1px solid #d0d8e0; border-radius: 4px;
  font-size: 15px; color: var(--navy, #1B224C);
  background: #fff; box-sizing: border-box; font-family: inherit;
}
.pm-mock .contact-form input[type=url]:focus {
  outline: none; border-color: var(--sky, #1C93D2);
  box-shadow: 0 0 0 3px rgba(28, 147, 210, .12);
}
body.is-page-contact .pm-mock .contact-form input[type=url] { font-size: 19px; }
.pm-mock .doc-form input[type=url] { padding: 10px 12px; font-size: 14.5px; }

/* =============================================================
   W-04  必須バッジを赤いバッジから、赤いテキストへ
   -------------------------------------------------------------
   元の赤（#E85A78）はサイトの配色に無い色だったので、
   ベタ塗りのバッジはやめてテキストに。色は同じフォームの
   「* は必須項目です」で既に使っている #C0392B に合わせる。
   （白地でコントラスト比 5.4：小さい文字でも AA を満たす）
   ============================================================= */
.pm-mock .contact-form .req,
.pm-mock .contact-form .opt {
  background: transparent !important;
  padding: 0 !important;
  font-size: 12px !important;
  letter-spacing: .04em;
  margin-left: 8px;
}
.pm-mock .contact-form .req { color: #C0392B !important; font-weight: 700; }
.pm-mock .contact-form .opt { color: #7C8CA0 !important; }
/* 採用について を選ぶと会社名が「任意」に変わる。こちらは赤くしない */
.pm-mock .contact-form .req.is-optional { color: #7C8CA0 !important; font-weight: 400; }
body.is-page-contact .pm-mock .contact-form .req,
body.is-page-contact .pm-mock .contact-form .opt { font-size: 13px !important; }
/* フォームの見出しだけ中央揃えで浮いていたのを左揃えに */
body.is-page-contact .pm-mock .contact-form-section .section-title { text-align: left; }

/* =============================================================
   W-01  事例カードの RESULT が黄色（サイトの配色に無い色）
   ============================================================= */
.pm-mock .works-card__result {
  background: #EAF4FB !important;
  border-left-color: var(--sky, #1C93D2) !important;
}
.pm-mock .works-card__result-label { color: #14719F !important; }
.pm-mock .works-card { box-shadow: none !important; }

/* =============================================================
   B-09  reveal 演出で初回描画時に本文が透明
   -------------------------------------------------------------
   スクロールしないと読めず、共有時のサムネイルも空白になっていた。
   最初から見えている状態にして、動きは「少し上がる」程度に留める。
   ============================================================= */
.pm-mock .reveal { opacity: 1 !important; }
.pm-mock .reveal:not(.on) { transform: translateY(6px); }
.pm-mock .reveal.on { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pm-mock .reveal,
  .pm-mock .reveal:not(.on),
  .pm-mock .reveal.on { transform: none !important; transition: none !important; }
}

/* =============================================================
   B-06  スマホでヒーローの見出しがバッジと同じ強さに見える
   ============================================================= */
@media (max-width: 640px) {
  .pm-mock .hero h1 { font-size: 40px !important; line-height: 1.2 !important; }
  .pm-mock .hero .hero-tag,
  .pm-mock .page-hero .hero-tag { font-size: 12px !important; padding: 4px 10px !important; }
}

/* =============================================================
 * T-03 / TRACTION5 循環図（サイト共通・1つの図に統一）
 * -------------------------------------------------------------
 * SVGを使わず、要素と擬似要素だけで描く。既存の t5-* クラス
 * （top-mock.css の5カード）とは別系統なので tr5- 接頭辞。
 * 05→01 に戻る弧だけをスカイで太くし、矢じりを付けている。
 *
 * b / i / p は hub.css 側に .pm-mock .hub-body b{color:navy} など
 * 強いルールがあり、ネイビー地に同色で沈む。図の中はすべて
 * span＋専用クラスにして、セレクタも .tr5 を1つ噛ませてある。
 *
 * 色はすべて変数にしてあり、置く面に合わせて3通り：
 *   .tr5            … ネイビーの面として独立させる（既定）
 *   .tr5--plain     … 既にダークな面の上（TOPのMETHOD節。現在はこちらのみ使用）
 * ============================================================= */
.tr5,
.tr5 *{box-sizing:border-box;}
.tr5{
  --tr5-navy:#1B224C;
  --tr5-sky:#1C93D2;
  --tr5-skyL:#7FC4E8;
  --tr5-bg:#1B224C;        /* 面の地色 */
  --tr5-ring:rgba(255,255,255,.38);  /* 細いリング */
  --tr5-arc:#1C93D2;       /* 05→01 の太い弧 */
  --tr5-nodebg:#1B224C;    /* ノードの地 */
  --tr5-nodeline:#fff;     /* ノードの枠 */
  --tr5-nodeink:#fff;      /* ノードの数字 */
  --tr5-jp:#fff;           /* 日本語ラベル */
  --tr5-en:#7FC4E8;        /* 英語ラベル */
  --tr5-name:#fff;         /* 中央 TRACTION */
  --tr5-sub:rgba(255,255,255,.6);    /* 中央の注記 */
  --tr5-keyink:#7FC4E8;    /* 01・05の数字と中央の「5」 */
  background:var(--tr5-bg);
  border-radius:6px;
  color:#fff;
}
/* 既にダークな面（TOPのMETHOD節）に置くときは地色を透過に */
.tr5.tr5--plain{background:transparent;border-radius:0;}

.tr5.tr5-fig{width:100%;max-width:560px;margin-inline:auto;}
/* %パディングは「親要素の幅」を基準に解決されてしまい、置き場所で
   図の大きさが変わる。円環の大きさは figure 自身の幅の割合で決める。 */
.tr5.tr5-ring{padding:26px 0;}
.tr5 .tr5-in{
  display:block;position:relative;width:66%;margin:0 auto;
  aspect-ratio:1;container-type:inline-size;
}
/* 薄い基準リング */
.tr5 .tr5-in::before{
  content:"";position:absolute;inset:16%;border-radius:50%;
  border:2px solid var(--tr5-ring);
}
/* 05→01 の戻りだけ太いスカイ。CSSの conic は12時が0度なので 288deg から */
.tr5 .tr5-in::after{
  content:"";position:absolute;inset:16%;border-radius:50%;
  background:conic-gradient(from 288deg, var(--tr5-arc) 0 59.6deg, transparent 59.6deg);
  -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
          mask:radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}
.tr5 .tr5-node{
  position:absolute;transform:translate(-50%,-50%);
  width:14%;aspect-ratio:1;border-radius:50%;
  background:var(--tr5-nodebg);border:1.5px solid var(--tr5-nodeline);color:var(--tr5-nodeink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.04em;line-height:1;
  z-index:2;
}
.tr5 .tr5-node.is-key{border-color:var(--tr5-arc);border-width:2.4px;color:var(--tr5-keyink);}
/* 弧の先端の矢じり（接線方向に回す） */
.tr5 .tr5-arrow{
  position:absolute;z-index:3;width:0;height:0;
  border:9px solid transparent;border-left-color:var(--tr5-arc);
  /* リングの帯は外周5pxぶんなので、中心線まで内側へ2.5px戻す */
  transform:translate(-50%,-50%) rotate(var(--rot)) translateY(2.5px);
}
.tr5 .tr5-lb{position:absolute;z-index:2;white-space:nowrap;}
.tr5 .tr5-lb--t{transform:translate(-50%,-100%);text-align:center;}
.tr5 .tr5-lb--r{transform:translateY(-50%);text-align:left;}
.tr5 .tr5-lb--l{transform:translateY(-50%);text-align:right;}
.tr5 .tr5-lb-jp{
  display:block;font-size:16px;font-weight:800;line-height:1.35;
  letter-spacing:.02em;color:var(--tr5-jp);
}
.tr5 .tr5-lb-en{
  display:block;font-family:'Poppins',sans-serif;font-weight:400;
  font-size:9.5px;letter-spacing:.13em;color:var(--tr5-en);margin-top:2px;
}
.tr5 .tr5-core{
  display:block;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);text-align:center;width:52%;
}
.tr5 .tr5-core-name{
  display:block;font-family:'Poppins',sans-serif;
  font-size:clamp(13px,3.9vw,23px);font-weight:800;
  letter-spacing:.02em;line-height:1;white-space:nowrap;color:var(--tr5-name);
}
.tr5 .tr5-core-5{color:var(--tr5-keyink);}
.tr5 .tr5-core-sub{
  display:block;font-size:10.5px;font-weight:400;line-height:1.65;
  color:var(--tr5-sub);margin-top:9px;
}
/* 図の内側の幅に対して中心のロゴを比例させる（コンテナクエリ） */
@supports (container-type:inline-size){
  .tr5 .tr5-core-name{font-size:max(11px, 6.5cqw);}
  .tr5 .tr5-core-sub{font-size:max(8.5px, 2.95cqw);margin-top:max(5px,2.5cqw);}
  /* ノードとラベルも図の大きさに追従させる（図だけ大きくして文字が小さく見えないように） */
  .tr5 .tr5-node{font-size:max(12px, 3.6cqw);}
  .tr5 .tr5-lb-jp{font-size:max(13.5px, 3.4cqw);}
  .tr5 .tr5-lb-en{font-size:max(9px, 2cqw);}
}
/* スマホ幅では版面が270px程度しかなく、外周ラベルを置くと図が小さく
   潰れてしまう。ラベルは直下のステージ一覧に同じ文言があるため、
   ここでは番号入りの円環だけを大きく見せる。 */
@media(max-width:640px){
  .tr5.tr5-ring{padding:10px 0;}
  .tr5 .tr5-in{width:92%;}
  .tr5 .tr5-lb{display:none;}
  .tr5 .tr5-node{font-size:13px;}
}

/* --- TOP：図（左）＋5ステージの説明（右）の2カラム --- */
.tr5-figrow{
  display:grid;
  grid-template-columns:minmax(0,56%) minmax(0,1fr);
  gap:44px;align-items:center;
}
.tr5-figcol{min-width:0;}
.tr5.tr5-fig.tr5--plain{max-width:780px;}
/* 注記は箱をやめ、図のキャプションとして円の下に中央揃えで置く。
   文字サイズは top-mock.css 側（TOPで17px）のまま。 */
.tr5-figcol .tr5.tr5-ring{padding-bottom:0;margin-bottom:-26px;}
.tr5-figcol .t5-loop{
  margin-top:0;padding:0;border:0;background:none;
  text-align:center;color:rgba(255,255,255,.88);
}
.tr5-figcol .t5-loop::before{content:none;}
.tr5-figcol .t5-loop-mark{
  position:static;transform:none;display:inline-block;
  margin-right:8px;vertical-align:-2px;font-size:19px;
}
.tr5-figrow .tr5-steps{list-style:none;margin:0;padding:0;}
.tr5-figrow .tr5-steps li{
  display:grid;grid-template-columns:54px minmax(0,1fr);
  gap:0 16px;align-items:start;
  margin:0;padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.tr5-figrow .tr5-steps li:first-child{border-top:1px solid rgba(255,255,255,.14);}
.tr5-figrow .tr5-s-no{
  display:block;font-family:'Poppins',sans-serif;font-size:22px;font-weight:700;
  color:#1C93D2;line-height:1.4;letter-spacing:.04em;
}
.tr5-figrow .tr5-steps li.is-key .tr5-s-no{color:#7FC4E8;}
.tr5-figrow .tr5-s-jp{font-size:22px;font-weight:900;color:#fff;letter-spacing:.02em;}
.tr5-figrow .tr5-s-en{
  font-family:'Poppins',sans-serif;font-weight:400;
  font-size:13px;letter-spacing:.16em;color:rgba(127,196,232,.95);
  margin-left:14px;
}
.tr5-figrow .tr5-s-desc{
  display:block;margin:7px 0 0;font-size:16.5px;line-height:1.8;
  color:rgba(255,255,255,.82);
}

@media(max-width:1080px){
  .tr5-figrow{grid-template-columns:minmax(0,56%) minmax(0,1fr);gap:30px;}
}
@media(max-width:900px){
  .tr5-figrow{grid-template-columns:1fr;gap:22px;}
  .tr5.tr5-fig,
  .tr5.tr5-fig.tr5--plain{max-width:420px;}
  .tr5-figcol .tr5.tr5-ring{margin-bottom:-20px;}
  .tr5-figcol .t5-loop::before{top:-30px;height:30px;}
}

/* =============================================================
   G-06  写真が入るまで、空の画像枠を出さない
   -------------------------------------------------------------
   公開中のページに破線の空枠が5つ出ていて、中に
   「〜の写真をここに配置／推奨サイズ：横1200px以上」という
   制作向けの指示文がそのまま表示されていた。

     /abm/   4枠（封筒・宛名／便箋・本文／手書き風／送付一式）
     /credo/ 1枠（チーム写真）

   /abm/ は枠の下にある説明文（.sample__cap）はそのまま残るので、
   カードが「仕様の説明」として成立する。
   写真が届いたら、このブロックを外せば枠ごと元に戻る。
   ============================================================= */
.pm-mock .photo-slot { display: none !important; }
/* 枠を消したぶん、カードの上端の余白を整える */
.pm-mock .sample > .sample__cap:first-child { padding-top: 18px; }

/* =============================================================
   求職者向けフォーム（/prosellagent/ /inexperience/ /prosellchallenge/）
   -------------------------------------------------------------
   この3ページは page-lp-mock.php でレンダリングされ、
   static-pages.css（.contact-form の見た目）を読み込まない。
   そのため、ここで一式を自己完結させる。値は static-pages.css と揃えてある。
   ============================================================= */
.pm-mock .sk-sec{padding-top:0;}
.pm-mock .sk-form-wrap{
  max-width:860px;margin:0 auto;padding:34px 36px 30px;
  background:#fff;border:1px solid var(--line,#E2E8F1);border-radius:4px;
}
.pm-mock .sk-form-head{margin-bottom:22px;}
.pm-mock .sk-form-h{
  margin:0 0 8px;font-size:24px;font-weight:900;line-height:1.4;
  color:var(--navy,#1B224C);text-align:left;
}
.pm-mock .sk-form-lead{margin:0;font-size:15px;line-height:1.9;color:#5C6B80;}

/* --- 2カラム --- */
.pm-mock .sk-form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;
}
.pm-mock .sk-form .form-row{margin-bottom:20px;min-width:0;}
.pm-mock .sk-form .form-row--full,
.pm-mock .sk-form .form-consent,
.pm-mock .sk-form .form-actions,
.pm-mock .sk-form .form-note{grid-column:1 / -1;}

/* --- 入力欄（static-pages.css と同じ見た目） --- */
.pm-mock .sk-form label{
  display:block;margin-bottom:8px;
  font-size:14px;font-weight:700;color:var(--navy,#1B224C);
}
.pm-mock .sk-form input[type=text],
.pm-mock .sk-form input[type=email],
.pm-mock .sk-form input[type=tel],
.pm-mock .sk-form select,
.pm-mock .sk-form textarea{
  width:100%;padding:12px 14px;
  border:1px solid #d0d8e0;border-radius:4px;
  font-size:15px;color:var(--navy,#1B224C);
  background:#fff;box-sizing:border-box;font-family:inherit;
}
.pm-mock .sk-form textarea{resize:vertical;min-height:96px;}
.pm-mock .sk-form input:focus,
.pm-mock .sk-form select:focus,
.pm-mock .sk-form textarea:focus{
  border-color:var(--sky,#1C93D2);outline:none;
  box-shadow:0 0 0 3px rgba(28,147,210,.12);
}
.pm-mock .sk-form .req{color:#C0392B !important;font-weight:700;font-size:12px;margin-left:8px;letter-spacing:.04em;}
.pm-mock .sk-form .opt{color:#7C8CA0 !important;font-size:12px;margin-left:8px;letter-spacing:.04em;}
.pm-mock .sk-form .form-hint{
  display:block;margin-top:6px;font-size:12.5px;line-height:1.75;color:#67788E;
}

/* --- ファイル選択 --- */
.pm-mock .sk-form input[type=file]{
  width:100%;padding:10px 12px;font-size:14px;
  border:1px dashed #C4D1E1;border-radius:4px;background:#F8FAFC;
  color:var(--navy,#1B224C);box-sizing:border-box;
}
.pm-mock .sk-form input[type=file]::file-selector-button{
  margin-right:12px;padding:6px 14px;font-size:13px;font-weight:700;
  color:#fff;background:var(--navy,#1B224C);border:0;border-radius:3px;cursor:pointer;
}

/* --- 同意・ボタン・注記 --- */
.pm-mock .sk-form .form-consent{text-align:center;margin:8px 0 20px;font-size:14px;}
.pm-mock .sk-form .form-consent label{display:inline;font-weight:400;margin:0;}
.pm-mock .sk-form .form-consent a{color:var(--sky,#1C93D2);text-decoration:underline;}
.pm-mock .sk-form .form-actions{text-align:center;margin:0 0 4px;}
.pm-mock .sk-form .form-actions .btn-big{min-width:260px;}
.pm-mock .sk-form .form-note{
  text-align:center;font-size:12px;color:#67788E;margin:14px 0 0;
}
.pm-mock .sk-form .form-note a{color:var(--sky,#1C93D2);text-decoration:underline;}

/* --- エラー・送信完了 --- */
.pm-mock .sk-form-wrap .form-errors{
  margin:0 0 22px;padding:16px 20px;border-radius:3px;
  background:#FDF1F0;border-left:4px solid #C0392B;
  font-size:14.5px;line-height:1.85;color:var(--navy,#1B224C);
}
.pm-mock .sk-form-wrap .form-errors p{margin:0 0 6px;}
.pm-mock .sk-form-wrap .form-errors ul{margin:4px 0 0;padding-left:1.2em;}
.pm-mock .sk-form-done{
  padding:26px 24px;background:#EAF4FB;border-left:4px solid var(--sky,#1C93D2);
}
.pm-mock .sk-form-done p{margin:0 0 6px;font-size:15px;line-height:1.9;color:var(--navy,#1B224C);}
.pm-mock .sk-form-done p:last-child{margin-bottom:0;}

@media (max-width:760px){
  .pm-mock .sk-form-wrap{padding:24px 20px 22px;}
  .pm-mock .sk-form{grid-template-columns:1fr;gap:0;}
  .pm-mock .sk-form-h{font-size:20px;}
  .pm-mock .sk-form .form-actions .btn-big{min-width:0;width:100%;}
}

/* -------------------------------------------------------------
   ハニーポット（人には見せない囮の入力欄）
   -------------------------------------------------------------
   .pm-hp を隠すCSSが static-pages.css にしか無く、
   それを読み込まないページ（page-lp-mock.php など）では
   「この欄は入力しないでください」が画面に出てしまう。
   全ページで読むこの1枚にも同じ指定を置いて、取りこぼしを無くす。
   ------------------------------------------------------------- */
.pm-hp{
  position:absolute !important;left:-9999px !important;
  width:1px !important;height:1px !important;overflow:hidden !important;
}
/* 「その他」を選んだときだけ出す欄。grid の中でも確実に隠す */
.pm-mock .sk-form [hidden]{display:none !important;}

/* =============================================================
 * スマホ表示の崩れ修正（v1.31.0）
 * -------------------------------------------------------------
 * 390px 幅で全107ページを走査して見つかった、
 * 「箱の幅が足りずに文字が切れる／縦一列に潰れる」箇所の修正。
 * 配色・段組みの考え方は変えていない。
 * ============================================================= */

/* ---- M-01 ハブページの HERO が右にはみ出す（/recruit/ ほか）----
   HERO は左右2枠のグリッド。スマホでは1枠に畳んでいるが、
   トラック幅が `1fr`（＝ minmax(auto,1fr)）だったため、
   中に入っているパンくず（white-space:nowrap）の長さがそのまま
   最小幅になり、枠が画面より 40px ほど広がっていた。
   結果、見出し・リード文・ボタンの右端が画面外で切れていた。
   トラックの最小値を 0 にして、中身側で折り返させる。 */
@media (max-width:1100px){
  .pm-mock .hero-body > *{min-width:0;}
  .pm-mock .page-hero--split .hero-body{grid-template-columns:minmax(0,1fr);}
}

/* ---- M-02 /capability/ の TRACTION5 の帯（強み③）----
   5工程は横スクロールの図として見せている。6枚目の
   「TRACTION5＝土台」だけは PC で全幅の帯（グリッド全体にまたがる）
   にしているが、その `grid-column:1/-1` が横スクロール時には
   「1列目」と解釈され、①の前に割り込んでいた。
   さらに枠の中が「ラベル200px＋本文」の2段組のままなので、
   225px の列に押し込まれて本文が1文字ずつ縦に折れていた。
   スマホでは6枚目も普通の1枚（縦積み）として最後に並べる。 */
@media (max-width:640px){
  .pm-mock .hub-band .hub-body .named .nc:nth-child(6){
    grid-column:auto !important;
    display:block !important;
    margin:0 !important;
    padding:22px 20px !important;
  }
  .pm-mock .hub-band .hub-body .named .nc:nth-child(6) .tag{
    grid-column:auto !important;grid-row:auto !important;
    margin:0 0 8px !important;font-size:15px !important;
  }
  .pm-mock .hub-band .hub-body .named .nc:nth-child(6) h3,
  .pm-mock .hub-band .hub-body .named .nc:nth-child(6) p{grid-column:auto !important;}
}

/* ---- M-03 表の行見出しが2文字ずつ折れる（課題ページ14本ほか）----
   横スクロールする表の1列目が 92px しかなく、
   「1. 狙いを定める」が5行に折れていた。
   表全体を少し広げ、行見出し列に下限を与える。
   （表はもともと枠内で横スクロールする作りなので、
     広げてもレイアウトは崩れない） */
@media (max-width:640px){
  .pm-mock .tablewrap table{min-width:620px;}
  .pm-mock .chg .chg-col-main table.sol-table{min-width:620px;}
  .pm-mock .tablewrap table th{min-width:7.5em;}
}

/* ---- M-04 /protell/ レポート図の軸ラベルが枠から出る ---- */
@media (max-width:640px){
  .pm-mock .segdeep__axes{gap:10px;}
  .pm-mock .segdeep__axes > *{min-width:0;}
}


/* =============================================================
 * スマホは短い本文＋「くわしく読む」（v1.31.2）
 * -------------------------------------------------------------
 * クライアント指摘「スマホが文字文字しい」への対応。
 * 本文を2本持ち、640px 以下では短いほう（.pm-sp）だけを出す。
 * 読みたい人は「くわしく読む」でPCと同じ本文に切り替えられる。
 *
 *   <p class="lead-answer pm-pc">…PC用の本文（現行のまま）…</p>
 *   <p class="lead-answer pm-sp">…スマホ用の短い本文…</p>
 *
 * ★ PC用の本文は消さずにHTMLに残している。Googleは
 *   「モバイルで畳んだコンテンツもインデックスする」としており、
 *   検索評価を落とさないための作りにしている。
 * ★ 切り替えは assets/js/sp-more.js がクラスを付け替えて行う。
 *   隠す指定が外れるだけなので、元の display（grid / flex / inline）が
 *   そのまま戻る。段組み・配色・既存のセレクタには影響しない。
 * ★ 境目は 640px。mobile-tune.css の「スマホ扱い」と同じ幅。
 * ============================================================= */

/* 「くわしく読む」で引っ込めた短い本文は、どの画面幅でも出さない */
.pm-sp-off{display:none !important;}

@media (min-width:641px){
  .pm-sp{display:none !important;}
  .pm-more{display:none !important;}
}
@media (max-width:640px){
  .pm-pc{display:none !important;}

  /* ボタン。背景色を持たず currentColor で描くので、
     白地でもネイビー地でもそのまま置ける */
  .pm-more{
    -webkit-appearance:none;appearance:none;
    display:block;box-sizing:border-box;width:100%;
    margin:16px 0 0;padding:11px 14px;
    background:transparent;border:1px solid currentColor;border-radius:2px;
    color:inherit;opacity:.72;
    font-family:inherit;font-size:14px;font-weight:700;line-height:1.5;
    letter-spacing:.04em;text-align:center;cursor:pointer;
  }
  .pm-more::after{content:"＋";margin-left:.5em;font-weight:400;}
  .pm-more[aria-expanded="true"]::after{content:"−";}
  .pm-more:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
}

/* =============================================================
 * MISSION の見出しをスマホでも「指定した3行」で出す（v1.32.2）
 * -------------------------------------------------------------
 * 「セールス・マーケティングのチカラで、／新しい価値を提供する
 *   新規事業を成功に導き、／既存事業の規模・シェア拡大を牽引する。」
 * この改行のまま、1行が折り返さない大きさに収める。
 *
 * PC の見え方を保つため clamp の下限が 31.5px になっており、
 * スマホでは 25px 相当で描画されて1行が2〜3行に折れ、
 * 見出し全体が6行（257px）に伸びていた。
 *
 * ★ 文字サイズは枠の幅から自動で決める（container query 単位）。
 *   いちばん長い行「新しい価値を…導き、」が 21文字なので、
 *   枠幅の 4.55% を1文字ぶんの上限にすると必ず1行に収まる。
 *   端末幅が変わっても崩れない。上限は 19.5px（＝約15.6px相当）。
 * ★ 改行（<br>）はそのまま活かす。
 * ============================================================= */
@media (max-width:640px){
  /* hub.css 側が .is-page-hub 付きで指定しているので、同じ詳細度で書く */
  .is-page-hub .pm-mock .hub-mission .sec-head{container-type:inline-size;}
  .is-page-hub .pm-mock .hub-mission .sec-head .jp{
    font-size:min(19.5px, 4.55cqi);line-height:1.85;
  }
}

/* =============================================================
 * 表の行見出しが2文字ずつ折れる（追い込み・v1.33.1）
 * -------------------------------------------------------------
 * v1.31.0 で .tablewrap の表は直したが、別の作りの表が2種類残っていた。
 *
 * ① 課題ページの比較表（.chg .compare-table）
 *    1023px 以下で table 自身を display:block + overflow-x:auto に
 *    していたが、中身に最小幅が無いため結局は縮むだけで、
 *    5列の表が1セル47px・11行という状態だった。
 *    thead / tbody を table として扱い、同じ最小幅と table-layout:fixed を
 *    与えることで、見出し行と本文行の列を揃えたまま横スクロールさせる。
 *    → 1セル 47px・11行 から 99px・4行 に。
 *
 * ② AIソリューションの一覧表（.fx-wrap > table）
 *    最小幅 520px では行見出しが 69px しかなかったので広げる。
 * ============================================================= */
@media (max-width:640px){
  .pm-mock .chg .compare-table{display:block;overflow-x:auto;}
  .pm-mock .chg .compare-table thead,
  .pm-mock .chg .compare-table tbody{
    display:table;width:100%;min-width:620px;table-layout:fixed;
  }
  .pm-mock .pfg--fxmatrix .fx-mx{min-width:640px;}
}

/* =============================================================
 * 課題ページ 見出しごとのまとまり（v1.36.0）
 * -------------------------------------------------------------
 * inc/challenge-sp.php が本文を見出し（h2）ごとに <section> でくくる。
 * 「くわしく読む」を見出しのまとまりごとに置くためのもので、
 * display:contents にしているため中身は元どおりに並ぶ（見た目は変わらない）。
 * ============================================================= */
.pm-mock .chg .chg-sec{display:contents;}

/* =============================================================
 * 課題ページ 比較表のセル（v1.36.1）
 * -------------------------------------------------------------
 * 「BDR→SDR→FS→CS」のように途中で改行できない文字列があると、
 * セル幅を超えて隣にかぶる。折り返しを許可して収める。
 * 和文はもともとどこでも折り返せるため、影響は上記のような
 * 英字＋記号の連なりだけ。
 * ============================================================= */
@media (max-width:640px){
  .pm-mock .chg .compare-table td,
  .pm-mock .chg .compare-table th{overflow-wrap:anywhere;}
}

/* =============================================================
   v1.73.1  PCヘッダーを現行サイトと同じくらいの大きさに
   -------------------------------------------------------------
   現行サイト（prosell-traction.com）を実測すると
     ヘッダー高さ 112px ／ ロゴ 64px ／ ナビ 14px
   新サイトは html{zoom:.75} をかけているので、同じ見た目にするには
   CSS値を 1/0.75 = 1.333 倍しておく必要がある。
     ヘッダー 140px（＝実際の見た目 105px）
     ロゴ      80px（＝      〃      60px）
     ナビ    18.5px（＝      〃    13.9px）
   ※ このブロックは上の G-01 の指定を上書きするので、
     戻したいときはこのブロックごと削除すればよい。
   ============================================================= */
@media (min-width: 1281px) {
  .pm-mock .header-inner { height: 140px; padding: 0 48px; gap: 20px; }
  .pm-mock .logo img { height: 80px; }
  .pm-mock nav { gap: 26px; margin-right: 26px; }
  .pm-mock nav a { font-size: 18.5px; padding: 8px 0; }
  .pm-mock .h-btn { font-size: 17px; padding: 15px 30px; }
}
/* 1281〜1500px は少しだけ詰めて1行に収める */
@media (min-width: 1281px) and (max-width: 1500px) {
  .pm-mock .header-inner { height: 128px; padding: 0 32px; gap: 16px; }
  .pm-mock .logo img { height: 72px; }
  .pm-mock nav { gap: 20px; margin-right: 20px; }
  .pm-mock nav a { font-size: 17px; }
  .pm-mock .h-btn { font-size: 16px; padding: 13px 24px; }
}
/* ヘッダーが高くなった分、アンカー移動時の余白も合わせる */
@media (min-width: 1281px) { html { scroll-padding-top: 150px; } }

/* =============================================================
   v1.73.1  ドロップダウン：ニーズの大きい2本を切り出して見せる
   -------------------------------------------------------------
   「ソリューションから探す」の先頭に置く
   テレアポ代行（BDR）／営業代行（FS）だけ、
   薄い水色の地＋左に青ラインで、他のカテゴリと区別する。
   下の区切り線から下が、これまでどおりのカテゴリ。
   ============================================================= */
.pm-mock .nav-media__list a.nav-media__pick{
  background:#F4F9FD;
  box-shadow:inset 3px 0 0 var(--sky,#1C93D2);
}
.pm-mock .nav-media__list a.nav-media__pick:hover{ background:#EAF4FB; }
.pm-mock .nav-media__list a.nav-media__pick + a:not(.nav-media__pick){
  margin-top:8px; padding-top:15px;
  border-top:1px solid #E2E8F1;
}
/* ヘッダーを大きくした分、ドロップダウンも少しゆったりに */
@media (min-width: 1281px) {
  .pm-mock .nav-media__list{ min-width:330px; }
  .pm-mock .nav-media__list a{ font-size:16px; padding:12px 20px; }
  .pm-mock .nav-media__list small{ font-size:13px; }
}

/* =============================================================
   v1.73.2  TOP：セクションの地色と背景英字の並びを整理
   -------------------------------------------------------------
   直すまでの並び（上から）
     CONCEPT 白 / STRENGTH 白 / バナー 白 / 数値 青 /
     SERVICE 薄 / Sales Issues 薄 / CASES 白 / KNOWLEDGE 薄 /
     FLOW 白 / FAQ 薄 / CTA 青
   → 白が3つ続き、SERVICE と Sales Issues も同じ薄い水色で
     境目が分からなくなっていた。
   背景の大英字も right/right/right/left/left/right/left/right とバラバラ。

   直したあとの並び
     CONCEPT 薄(右) / STRENGTH 白(左) / バナー 薄 / 数値 青 /
     SERVICE 白(右) / Sales Issues 薄(左) / CASES 白(右) /
     KNOWLEDGE 薄(左) / FLOW 白(右) / FAQ 薄(左) / CTA 青
   → 地色は「薄→白→薄→…」、英字は「右→左→右→…」で完全に交互。
     数値（青）と CTA（青）はアクセントの帯なので対象外。

   ※ CONCEPT の薄い水色は solution-map.css 側（v1.73.1）で指定。
   ※ 英字の left/right と on-white/on-tint は front-page.php 側のクラス。
   ============================================================= */
/* バナー：STRENGTH（白）と続くので薄い水色に */
.pm-mock .asset-banners{ background:var(--tint,#F4F7FB); }
/* SERVICE：Sales Issues（薄）と続くので白に */
.pm-mock .svc{ background:#fff; }

/* =============================================================
   v1.73.2  下層ページ：面が続かないようにする
   ============================================================= */
/* FAQ を白にする版（直前が淡グレーのとき） */
.pm-mock .faq--white{ background:#fff; }

/* 保険：同じ地色のセクションが2つ続いたら、後ろ側を反転する。
   /challenge/ のように本文がWordPress側に入っていて
   テーマからクラスを付け替えられないページのための受け皿。
   （SOLUTIONS 白 → OTHER GUIDES 白 → FAQ 淡グレー だったところを
     SOLUTIONS 白 → OTHER GUIDES 淡グレー → FAQ 白 に直す） */
.pm-mock .svc-cat:not(.svc-cat--tint) + .svc-cat:not(.svc-cat--tint){
  background:var(--tint,#F4F7FB);
}
.pm-mock .svc-cat:not(.svc-cat--tint) + .svc-cat:not(.svc-cat--tint) > .sec-bg-word{
  color:#fff;
}
.pm-mock .svc-cat:not(.svc-cat--tint) + .svc-cat:not(.svc-cat--tint) + .faq{
  background:#fff;
}
.pm-mock .svc-cat:not(.svc-cat--tint) + .svc-cat:not(.svc-cat--tint) + .faq > .sec-bg-word{
  color:var(--tint,#F4F7FB);
}

/* =============================================================
   v1.73.3  TOP：背景英字の左右と色は、このCSSだけで決める
   -------------------------------------------------------------
   これまで「面の色」はCSS、「英字の左右と色」は front-page.php の
   クラス（--right / --on-tint など）と、2か所に分かれていた。
   片方だけ更新すると、白地に白い英字（＝見えない）になったり、
   左が2つ続いたりする。そこでTOPに限っては、ここで全部決める。
   front-page.php 側のクラスがどちらでも、この指定が優先される。

     CONCEPT   薄い水色の面 → 白い英字 / 右
     STRENGTH  白い面       → 薄い英字 / 左
     SERVICE   白い面       → 薄い英字 / 右
     ISSUES    薄い水色の面 → 白い英字 / 左
     CASES     白い面       → 薄い英字 / 右
     KNOWLEDGE 薄い水色の面 → 白い英字 / 左
     FLOW      白い面       → 薄い英字 / 右
     FAQ       薄い水色の面 → 白い英字 / 左
   ============================================================= */
body.home .pm-mock .concept   > .sec-bg-word{ right:-30px; left:auto; color:#fff; }
body.home .pm-mock .strength  > .sec-bg-word{ left:-30px; right:auto; color:var(--tint,#F4F7FB); }
body.home .pm-mock .svc       > .sec-bg-word{ right:-30px; left:auto; color:var(--tint,#F4F7FB); }
body.home .pm-mock .challenge > .sec-bg-word{ left:-30px; right:auto; color:#fff; }
body.home .pm-mock .cases     > .sec-bg-word{ right:-30px; left:auto; color:var(--tint,#F4F7FB); }
body.home .pm-mock .knowledge > .sec-bg-word{ left:-30px; right:auto; color:#fff; }
body.home .pm-mock .flow      > .sec-bg-word{ right:-30px; left:auto; color:var(--tint,#F4F7FB); }
body.home .pm-mock .faq       > .sec-bg-word{ left:-30px; right:auto; color:#fff; }

/* =============================================================
 * v1.83.1 — NUMRING（.named を組み替えた「大きな数字＋斜めの帯」）の位置合わせ
 * -------------------------------------------------------------
 * これまでは帯が数字の右下に流れていて、数字の下半分に重なっていた。
 * 数字は左に置いたまま、帯を数字の真横（同じ高さ）に並べる。
 *   ・数字の輪（.lps-numring-fig）はカードの左上に固定
 *   ・帯（.lps-numring-bar）は輪の幅ぶんだけ左を空けて、輪と高さを揃える
 *   ・本文は輪と帯の下端より下から始める
 * lp-layouts.css より後に読み込まれるので、ここの指定が効く。
 * ============================================================= */
body.is-lp-mock .mock-embed .lps-numring-item{ padding-top:0; }
body.is-lp-mock .mock-embed .lps-numring-fig{ top:0; left:0; width:120px; height:120px; }
body.is-lp-mock .mock-embed .lps-numring-no{ font-size:82px; }
body.is-lp-mock .mock-embed .lps-numring-bar{
  margin:0 -26px 0 114px; width:auto;
  min-height:96px; transform:translateY(-14px) skewX(-12deg);
}
body.is-lp-mock .mock-embed .lps-numring-body{ padding-top:24px; }

@media (max-width:1024px){
  body.is-lp-mock .mock-embed .lps-numring-fig{ width:108px; height:108px; }
  body.is-lp-mock .mock-embed .lps-numring-no{ font-size:74px; }
  body.is-lp-mock .mock-embed .lps-numring-bar{
    margin:0 -26px 0 102px; width:auto;
    min-height:88px; transform:translateY(-17px) skewX(-12deg);
  }
  body.is-lp-mock .mock-embed .lps-numring-body{ padding-top:16px; }
}
@media (max-width:760px){
  /* lp-layouts.css が「帯を画面内に収める」ために width:100% を !important で
     当てているので、ここで上書きする（左は数字のぶん空ける） */
  body.is-lp-mock .mock-embed .lps-numring-bar{
    width:auto !important; margin-right:0 !important; margin-left:102px !important;
  }
}

/* =============================================================
 * v1.83.1 — 表紙の数字の文（.lprw-claims）をスマホで横幅いっぱいに
 * -------------------------------------------------------------
 * lp-rich.css では @media (max-width:1100px) で max-width:none にしているが、
 * その指定より後ろに基本ルール（max-width:58%）が書かれているため、
 * 同じ詳細度で後勝ちになり、スマホでも 58% のままだった。
 * その結果、特大の数字が狭い幅に押し込まれて変な位置で改行していた。
 * ============================================================= */
@media (max-width:1100px){
  .pm-mock.lp-rich .lpr-hero--wide .lprw-claims{ max-width:none; }
}

/* --- ご相談の種類（チェックボックス群）— v2.63.0 -----------------------
   /career-contact/（キャリアトラクションメディアからのご相談）で使う。
   旧 HubSpot フォームの「お問い合わせ種別」を置き換えたもの。 */
.pm-mock .sk-form .form-label{
  display:block;margin-bottom:8px;
  font-size:14px;font-weight:700;color:var(--navy,#1B224C);
}
.pm-mock .sk-form .form-checks{display:flex;flex-wrap:wrap;gap:10px;}
.pm-mock .sk-form .form-checks .form-check{
  display:flex;align-items:center;gap:8px;margin:0;
  padding:11px 16px;border:1px solid #d0d8e0;border-radius:4px;background:#fff;
  font-size:15px;font-weight:500;color:var(--navy,#1B224C);cursor:pointer;
}
.pm-mock .sk-form .form-checks .form-check:hover{border-color:var(--sky,#1C93D2);}
.pm-mock .sk-form .form-checks input[type=checkbox]{
  width:16px;height:16px;margin:0;accent-color:var(--sky,#1C93D2);
}
@media (max-width:640px){
  .pm-mock .sk-form .form-checks{flex-direction:column;}
  .pm-mock .sk-form .form-checks .form-check{width:100%;}
}

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

.pm-mock .contact-form .req{font-size:14px !important}
.pm-mock .contact-form .opt{font-size:14px !important}
body.is-page-contact .pm-mock .contact-form .req{font-size:14px !important}
body.is-page-contact .pm-mock .contact-form .opt{font-size:14px !important}
.tr5 .tr5-node{font-size:16px}
.tr5 .tr5-lb-en{font-size:14px}
.tr5 .tr5-core-sub{font-size:18px}
.tr5-figrow .tr5-s-en{font-size:14px}
.tr5-figrow .tr5-s-desc{font-size:18px}
.pm-mock .sk-form-h{font-size:22px}
.pm-mock .sk-form-lead{font-size:21px}
.pm-mock .sk-form .req{font-size:14px}
.pm-mock .sk-form .opt{font-size:14px}
.pm-mock .sk-form .form-hint{font-size:14px}
.pm-mock .sk-form .form-note{font-size:14px}
.pm-mock .sk-form-wrap .form-errors{font-size:16px}
.pm-mock .sk-form-done p{font-size:18px}
.pm-mock .sk-form .form-checks .form-check{font-size:16px}

@media (max-width:900px){
  .pm-mock .contact-form .req{font-size:13px !important}
  .pm-mock .contact-form .opt{font-size:13px !important}
  body.is-page-contact .pm-mock .contact-form .req{font-size:13px !important}
  body.is-page-contact .pm-mock .contact-form .opt{font-size:13px !important}
  .tr5 .tr5-node{font-size:14.5px}
  .tr5 .tr5-lb-en{font-size:13px}
  .tr5 .tr5-core-sub{font-size:16px}
  .tr5-figrow .tr5-s-en{font-size:13px}
  .tr5-figrow .tr5-s-desc{font-size:16px}
  .pm-mock .sk-form-h{font-size:19px}
  .pm-mock .sk-form-lead{font-size:17px}
  .pm-mock .sk-form .req{font-size:13px}
  .pm-mock .sk-form .opt{font-size:13px}
  .pm-mock .sk-form .form-hint{font-size:13px}
  .pm-mock .sk-form .form-note{font-size:13px}
  .pm-mock .sk-form-wrap .form-errors{font-size:14.5px}
  .pm-mock .sk-form-done p{font-size:16px}
  .pm-mock .sk-form .form-checks .form-check{font-size:14.5px}
}

@media (max-width:760px){
  .pm-mock .sk-form-h{font-size:19px}
}

@media (max-width:640px){
  .pm-more{font-size:14.5px}
}