/* =============================================================
   レビュー指摘の調整レイヤー（v1.27.1）
   -------------------------------------------------------------
   2026-09-05 のサイト全体レビューで出た3点をまとめて直す。
     ① 明るい背景の上の水色文字が薄い（3.4:1 → 4.5:1以上へ）
     ② 個別に薄すぎる文字（2.3〜3.0）
     ③ グリッドの最終行に1個だけ残る

   既存CSSは書き換えず、最後に読み込んで上書きするだけの1枚。
   元に戻したいときは functions.php の enqueue ごと外せばよい。

   使う色（いずれも既存の色を暗くしただけで、色相は変えていない）
     --teal        #1C93D2  現行。濃紺の上ではこのまま（4.46:1 で問題なし）
     文字用        #14719F  明るい背景の上の文字に。既存の --teal-dark と同値
     面用          #187DB3  白文字を乗せる面に。見た目の変化を最小にしつつ 4.5:1
   ============================================================= */

:root {
  --teal-text: #14719F;   /* 明るい背景の上の水色文字 5.40:1 */
  --teal-fill: #187DB3;   /* 白文字を乗せる水色の面 4.54:1 */
  --ink-sub:   #67788E;   /* 薄いグレー文字の置き換え 4.51:1 */
  --ink-faint: #657893;   /* いちばん薄かったグレー 4.51:1 */
  --accent-teal-d: #357975; /* ティール系タグ 4.55:1 */
}

/* =============================================================
   ① 明るい背景の上の水色文字 → --teal-text
   -------------------------------------------------------------
   ここに並ぶクラスは、全ページを走査して
   「どの出現箇所でも背景が明るい（輝度0.6以上）」ことを確認済み。
   同じクラス名でも濃い背景の上で使われているもの
   （.tag / .chl-map-head / .co-str7-en）は、暗くすると逆に読めなくなるため外した。
   ============================================================= */
.pm-mock .s-tag,
.pm-mock .str6-more,
.pm-mock .svc-more,
.pm-mock .smap-en,
.pm-mock .ph-badge,
.pm-mock .works-filter-tag,
.pm-mock .works-card__result-label,
.pm-mock .works-card__meta-k,
.pm-mock .co-media-src,
.pm-mock .tso-more-tag,
.pm-mock .tso-more-link,
.pm-mock .lps-tl-tag,
.pm-mock .lps-iconrow-tag,
.pm-mock .faqlog__cat,
.pm-mock .iv-role,
.pm-mock .doc-meta,
.pm-mock .info-link,
.pm-mock .form-note a,
.pm-mock .doc-form-lead .req-mark { color: var(--teal-text) !important; }

/* 「詳細を見る →」などのテキストリンク（水色の指定を上書き） */
.pm-mock a.svc-more,
.pm-mock a.str6-more,
.pm-mock a.tso-more-link,
.pm-mock .sec-more a,
.pm-mock .more-link { color: var(--teal-text) !important; }

/* 資料ページの注釈 */
.pm-mock .doc-meta { background: #E3F0F9 !important; }

/* =============================================================
   ① 白文字を乗せる水色の面 → --teal-fill
   -------------------------------------------------------------
   ここは「その要素自身が水色の背景を持っている」ものだけに限定する。
   水色セクションの中に置かれているだけの要素に background を付けると、
   元は薄い帯だったものが濃くなり、上に乗る文字が読めなくなる。
   （v1.27.0 でこれをやってしまったので撤回した）
   ============================================================= */
.pm-mock .h-btn,
.pm-mock .btn-big.primary { background-color: var(--teal-fill) !important; }

/* 水色55%の半透明の上に白文字で、ほぼ読めなかった箇所（1.99:1） */
.pm-mock .sp-cap { background: rgba(20, 113, 159, .92) !important; }

/* =============================================================
   ② 個別に薄すぎた文字
   ============================================================= */
/* 補足テキスト（2.50:1 → 4.51:1） */
.pm-mock .tso-form-s,
.pm-mock .iv-prev,
.pm-mock .day-note,
.pm-mock .job-sub { color: var(--ink-faint) !important; }

/* 見出し・注釈のグレー（3.2〜3.4:1 → 4.5:1） */
.pm-mock .tso-form-t,
.pm-mock .tso-form-rt,
.pm-mock .price-note,
.pm-mock .muted { color: var(--ink-sub) !important; }

/* ティール系のタグ（3.4〜3.8:1 → 4.5:1） */
.pm-mock .nn-tag,
.pm-mock .rep-tag,
.pm-mock .day-eyebrow,
.pm-mock .mb-src,
.pm-mock .step-period,
.pm-mock .tso-cols-tag { color: var(--accent-teal-d) !important; }

/* 色付きタグ */
.pm-mock .job-tag.orange { color: #9A6310 !important; }
.pm-mock .ng-tag { color: #B54E2C !important; }

/* LP見出しの上に出る社名ラベル（濃紺の上なので、逆に明るくする） */
.pm-mock .lpr-h1-name { color: #7F8EA3 !important; }

/* /pricing/ の STEP ラベルは背景のトーンが段階的に濃くなるため、
   同じ色だと後半ほど読みにくくなる。色を固定する。 */
.pm-mock .svc-process .ph { color: var(--teal-text) !important; }

/* =============================================================
   ③ グリッドの最終行に1個だけ残る
   -------------------------------------------------------------
   列数に対して要素数が合わず、最後の1個だけが取り残される箇所。
   その1個を横いっぱいに伸ばして、行を埋める。
   要素数が変わっても自動で効く（余りが出たときだけ発動する）。
   1カラムに落ちる幅では不要なので 900px 以上に限定。
   ============================================================= */
@media (min-width: 901px) {

  /* --- 3列のグリッド --- */
  .pm-mock .cards.tso-grid7 > :last-child:nth-child(3n + 1),
  .pm-mock .co-str7 > :last-child:nth-child(3n + 1),
  .pm-mock .links > :last-child:nth-child(3n + 1),
  .pm-mock .svc-linkcards.chl-cards > :last-child:nth-child(3n + 1),
  .pm-mock .media-banner > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  /* --- 2列のグリッド（/company/ のFAQ） --- */
  .pm-mock .faq-list > :last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
  }

  /* 横いっぱいに伸びたカードは、中身が間延びしないように
     内側の最大幅を持たせる（リンクカードのみ） */
  .pm-mock .links > :last-child:nth-child(3n + 1).linkcard,
  .pm-mock .links > :last-child:nth-child(3n + 1).svc-linkcard,
  .pm-mock .svc-linkcards.chl-cards > :last-child:nth-child(3n + 1) {
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* =============================================================
   フッター（v1.26.4 で top-mock.css に入れた修正の控え）
   -------------------------------------------------------------
   top-mock.css を上げ忘れても崩れないよう、同じ内容をここにも置く。
   両方入っていても結果は同じ。
   ============================================================= */
.pm-mock .f-grid { grid-template-columns: 1.5fr repeat(4, 1fr); }
@media (max-width: 1180px) {
  .pm-mock .f-grid { grid-template-columns: repeat(4, 1fr); }
  .pm-mock .f-grid > :first-child { grid-column: 1 / -1; margin-bottom: 6px; }
}
@media (max-width: 993px) {
  .pm-mock .f-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pm-mock .f-grid { grid-template-columns: 1fr; }
}