@charset "UTF-8";
/* ==========================================================================
   Career’s Net — Design System
   トンマナ: 紺基調 / 清潔 / 信頼感。装飾より情報の読みやすさを優先する。
   ⚠️ 日本語Webフォントは読み込まない（CLAUDE.md 第3章・モバイルLCP最優先）
   ========================================================================== */

:root {
  /* --- 色 ------------------------------------------------------------- */
  --cn-navy:        #0B3360;  /* 見出し・ヘッダー・強い文字 */
  --cn-navy-deep:   #06264A;
  --cn-primary:     #1B63B5;  /* リンク・強調 */
  --cn-primary-bg:  #EAF1F9;
  --cn-cta:         #5B74DE;  /* 主CTA */
  --cn-cta-hover:   #4A61C4;
  --cn-cta-2:       #01A8D6;  /* 副CTA・診断導線 */
  --cn-accent:      #F5A524;  /* 数値・注目のアクセント（多用しない） */
  /* ⚠️ プラグインの blocks.css は `.cn-block` の中で --cn-accent / --cn-ink / --cn-paper を
     別の値（#d54b2a ほか）に再定義します。**ブロックの中では --cn-accent を使わないこと。**
     テーマの色をブロック内で使いたいときは、下の --cnt-* を使います（プラグインが触らない名前）。 */
  --cnt-amber:      #F5A524;
  --cnt-amber-dark: #E29511;

  --cn-ink:         #333333;  /* 本文 */
  --cn-ink-strong:  #1A1A1A;
  --cn-ink-sub:     #6B7580;  /* 補助テキスト・日付 */
  --cn-line:        #E3E8EE;  /* 罫線 */
  --cn-line-strong: #CBD5E0;
  --cn-bg:          #FFFFFF;
  --cn-bg-soft:     #F5F7FA;  /* セクション背景 */
  --cn-bg-note:     #FFF8EC;  /* 注記ボックス */

  /* --- タイポ ---------------------------------------------------------- */
  --cn-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
             "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium",
             "Yu Gothic", Meiryo, sans-serif;
  --cn-font-num: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* --- 寸法 ------------------------------------------------------------ */
  --cn-radius:   4px;
  --cn-radius-l: 8px;
  --cn-pill:     999px;
  --cn-w-content: 760px;   /* 本文カラム */
  --cn-w-wide:    1180px;  /* 全体の最大幅 */

  /* 追従ヘッダー（.cn-gnav）の高さ。**サイドバーの sticky と、見出しの
     scroll-margin-top の両方がこれを見ます。**ナビの高さを変えたらここも変える。
     ⚠️ 既定は 0。**.cn-gnav が sticky になるのは 1000px 以上だけ**なので、
     それ未満で高さを引くと、逆に余計な余白ができます。 */
  --cn-header-h: 0px;

  /* 別タブアイコン（外部リンク）。mask で塗るので色は currentColor になります。 */
  --cn-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  --cn-gap:       24px;
}

/* ==========================================================================
   ベース
   ========================================================================== */
body {
  font-family: var(--cn-font);
  color: var(--cn-ink);
  background: var(--cn-bg);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cn-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--cn-cta); outline-offset: 2px; }

img { max-width: 100%; height: auto; }

/* ==========================================================================
   見出し — 紺で統一し、装飾は最小限に
   ========================================================================== */
.cn-body h2,
.cn-body h3,
.cn-body h4 {
  color: var(--cn-navy);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
}

.cn-body h2 {
  font-size: 1.5rem;
  margin: 3em 0 1em;
  padding: .6em 0 .6em .8em;
  border-left: 5px solid var(--cn-navy);
  background: var(--cn-bg-soft);
}

.cn-body h3 {
  font-size: 1.25rem;
  margin: 2.4em 0 .8em;
  padding-bottom: .4em;
  border-bottom: 1px solid var(--cn-line-strong);
}

.cn-body h4 {
  font-size: 1.08rem;
  margin: 2em 0 .6em;
}

.cn-body p { margin: 0 0 1.6em; }

/* --------------------------------------------------------------------------
   本文のリンク（2026-09-13）

   **下線を必ず引きます。**色だけでリンクを示すと、色が見分けにくい人に伝わらず、
   本文の途中にあるリンクは気づかれません。文脈リンクが内部リンクの主役
   （CLAUDE.md 第3章）なので、**気づかれないリンクは設計が成立しません。**

   ⚠️ ボタン（プラグインのCTA `.cn-button` / テーマの `.cn-btn`）と画像リンクは除きます。
      ボタンに下線が付くと「押せるもの」に見えなくなります。
   -------------------------------------------------------------------------- */
.cn-body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
}
.cn-body a:hover { text-decoration-thickness: 2px; }

.cn-body a.cn-button,
.cn-body a.cn-btn,
.cn-body .cn-block a,
.cn-body a:has(img) { text-decoration: none; }

/* 別タブで開くリンクには、そのことを示すアイコンを付ける。
   ⚠️ `target="_blank"` が付いているものだけが対象です。CSSだけで判定するので、
      本文の書き方を変える必要はありません。
   アイコンは currentColor で塗るため、リンク色が変わっても追従します。
   画像は外部から読みません（data URI・CLAUDE.md 第3章の表示速度）。 */
.cn-body a[target="_blank"]:not(.cn-button):not(.cn-btn):not(:has(img))::after {
  content: "";
  display: inline-block;
  width: .74em;
  height: .74em;
  margin-left: .3em;
  vertical-align: -.02em;
  background-color: currentColor;
  -webkit-mask: var(--cn-icon-external) no-repeat center / contain;
  mask: var(--cn-icon-external) no-repeat center / contain;
}
.cn-body .cn-block a[target="_blank"]::after { content: none; }

/* --------------------------------------------------------------------------
   本文のリスト（2026-09-13）

   **枠で囲って、地の文と視覚的に分けます。**箇条書きの前に1文の要約を置く
   （CLAUDE.md 第13章 LLMO 3）という書き方をしているので、
   **どこからどこまでがリストなのかが見えるほうが、要約との対応が取れます。**

   ⚠️ 入れ子のリストには枠を付けません。二重の枠は、階層ではなく
      別のブロックに見えます。
   -------------------------------------------------------------------------- */
.cn-body ul,
.cn-body ol {
  margin: 0 0 1.8em;
  padding: 1.15em 1.4em 1.15em 2.5em;
  background: var(--cn-bg);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-l);
}
.cn-body li { margin-bottom: .5em; }
.cn-body li:last-child { margin-bottom: 0; }
.cn-body li::marker { color: var(--cn-primary); }

/* 入れ子（子のul/ol）は枠なし。地のまま1段下げるだけ。 */
.cn-body li > ul,
.cn-body li > ol {
  margin: .6em 0 0;
  padding: 0 0 0 1.3em;
  background: none;
  border: 0;
  border-radius: 0;
}

/* プラグインのブロック（CTA・サービスカード）の中のリストは、
   ブロック側のデザインがあるので触らない。 */
.cn-body .cn-block ul,
.cn-body .cn-block ol {
  padding: 0 0 0 1.3em;
  background: none;
  border: 0;
  border-radius: 0;
}

/* リード文（冒頭40〜60字の結論） */
.cn-lead {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--cn-ink-strong);
  background: var(--cn-primary-bg);
  border-left: 4px solid var(--cn-primary);
  padding: 1.2em 1.4em;
  margin: 0 0 2.4em;
  border-radius: 0 var(--cn-radius) var(--cn-radius) 0;
}

/* ==========================================================================
   表 — AIに読ませるため必ずHTMLで出す。横スクロールは表側で受ける
   ========================================================================== */
.cn-table-wrap { overflow-x: auto; margin: 0 0 2em; -webkit-overflow-scrolling: touch; }

.cn-body table,
.cn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  line-height: 1.7;
  background: var(--cn-bg);
}
.cn-body th,
.cn-table th {
  background: var(--cn-navy);
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: .8em 1em;
  white-space: nowrap;
}
.cn-body td,
.cn-table td {
  border-bottom: 1px solid var(--cn-line);
  padding: .8em 1em;
  vertical-align: top;
}
.cn-body tbody tr:nth-child(even) td { background: var(--cn-bg-soft); }
.cn-table .is-num { font-family: var(--cn-font-num); font-variant-numeric: tabular-nums; text-align: right; }

/* --------------------------------------------------------------------------
   親テーマ（Arkhe）のサイドバー枠を出さない（2026-09-13）

   Arkhe は `#sidebar.l-sidebar`（幅312px）を `.l-content__body` の中に出します。
   当サイトのサイドバーは各テンプレートの `.cn-sidebar` が持っているので、
   **Arkhe 側の枠は要りません。**残しておくと、記事の最下部に
   **左に寄った細いカラムと、その右の空白**として見えます。

   ⚠️ 中身の二重出力はテンプレート名の衝突が原因で、そちらは
      `template-parts/cn-sidebar.php` へのリネームで直しています。
      **この指定は「空の枠も出さない」ためのものです。**両方必要です。

   ⚠️ 親テーマ依存の指定です。テーマを替えるときは、この塊と `#header` を消します。
   -------------------------------------------------------------------------- */
#sidebar.l-sidebar { display: none; }

/* ==========================================================================
   バッジ・ラベル
   ========================================================================== */
.cn-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  padding: .45em .8em;
  color: var(--cn-navy);
  background: #fff;
  border: 1px solid var(--cn-navy);
  border-radius: var(--cn-radius);
  letter-spacing: .04em;
}
.cn-badge--fill { color: #fff; background: var(--cn-navy); }
.cn-badge--pill { border-radius: var(--cn-pill); }

/* PR表記（外さない・CLAUDE.md 第11章） */

/* ==========================================================================
   カード（記事一覧）
   ========================================================================== */
.cn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px var(--cn-gap);
  margin: 0 0 3em;
  padding: 0;
  list-style: none;
}
.cn-card { display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------------------
   サービス一覧のカード（0.4.3）
   /agents/ の単一の仕事は「一覧を見せ、絞り込みへ送る」。**CTAは置かない**（第3章）。
   ⚠️ 名前と最終確認日だけでは、15社が同じ形に見えて選べませんでした。
      **型（誰が求人を選ぶか）で見分けられる**ようにするのが、このカードの仕事です。

   ⚠️ 0.4.3 で横並び（左に52pxのタイル）から**縦構成**に変えました。
      理由は1つだけです。**転職サービスのロゴは横長で、比が 2.8:1〜11.0:1 ありました。**
      52px の正方形に入れると、いちばん細いロゴは高さ 3.5px になり読めません。
      **高さを28pxに揃えて横幅を成り行きにする**と、どの比のロゴも同じ大きさに見えます。
   -------------------------------------------------------------------------- */
.cn-cards--service { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cn-card--service {
  position: relative;
  flex-direction: column;
  gap: 11px;
  padding: 18px 20px 17px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-l);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cn-card--service:hover {
  border-color: var(--cn-line-strong);
  box-shadow: 0 2px 10px rgba(11, 51, 96, .07);
}

/* 上段はロゴ（または識別タイル）だけ。
   ⚠️ **型バッジをここに同居させてはいけません。**幅の広いロゴ（リクルートエージェントは
      11:1）だとバッジが折り返して2行になり、カードごとに高さがずれます（2026-09-07 に実測）。
      バッジはサービス名の下に置きます。 */
.cn-service__head {
  display: flex; align-items: center;
  min-height: 30px;
}

/* ⚠️ **高さだけを固定し、幅は成り行きにする。**これが揃って見える理由です。
      `max-width` は、いちばん細いロゴ（11:1）が本文より長くなるのを止めるためだけにあります。 */
.cn-service__logo {
  display: block;
  height: 28px; width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* 識別タイル。**ロゴではありません。**アイキャッチが無いサービスのフォールバックです。 */
.cn-service__mark {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--cn-navy);
  color: #fff;
  font-family: var(--cn-font-num);
  font-size: .92rem; font-weight: 700; letter-spacing: .04em;
}

.cn-service__body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cn-service__name { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.5; color: var(--cn-ink-strong); }
.cn-service__name a { color: inherit; }
/* カード全体を押せるようにする。**見出しのリンクは残す**（構造を壊さない） */
.cn-service__link::after { content: ""; position: absolute; inset: 0; }
.cn-service__types { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; flex: 0 0 auto; }
.cn-badge {
  display: inline-block;
  padding: .2em .7em;
  border-radius: 999px;
  font-size: .74rem; font-weight: 700; line-height: 1.7;
  color: var(--cn-navy);
  background: var(--cn-primary-bg);
  border: 1px solid transparent;
}
/* ⚠️ 種別ごとの色分け。**値は CSS 側にしか無く、知らない値は既定の見た目に落ちます。**
   別ジャンルのメディアに持っていっても壊れません（色が付かないだけ）。 */
.cn-badge[data-type="agent"]    { background: #E7EEF7; color: var(--cn-navy); }
.cn-badge[data-type="scout"]    { background: #E1F4FA; color: #0A5E77; }
.cn-badge[data-type="job_site"] { background: #F1F3F5; color: #4A5A6A; }

.cn-service__desc { margin: 0; font-size: .86rem; line-height: 1.75; color: var(--cn-ink-sub); }
.cn-card--service .cn-verified { margin-top: 2px; font-size: .78rem; }
.cn-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--cn-radius);
  background: var(--cn-bg-soft);
}
.cn-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cn-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  color: var(--cn-ink-strong);
}
.cn-card__title a { color: inherit; }
.cn-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .8rem;
  color: var(--cn-ink-sub);
  font-family: var(--cn-font-num);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   CTA — 文言は「◯◯の求人を見る（無料）」の形にする（CLAUDE.md 第4章）
   ========================================================================== */
.cn-cta {
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-l);
  padding: 24px;
  margin: 2.5em 0;
  background: var(--cn-bg);
}
/* ⚠️ `.cn-cta__title` / `.cn-cta__desc` / `.cn-cta__note` はプラグインのマークアップに存在しません。
   見出しは class の無い `h3`、本文は `.cn-cta__description` です。0.2.7 で削除しました。 */

.cn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  width: 100%;
  min-height: 56px;
  padding: .9em 1.6em;
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  background: var(--cn-cta);
  border: none;
  border-radius: var(--cn-radius);
  text-align: center;
  transition: background-color .15s ease;
}
.cn-btn:hover { background: var(--cn-cta-hover); text-decoration: none; color: #fff; }
.cn-btn--sub { background: var(--cn-cta-2); }
.cn-btn--sub:hover { background: #0192B8; }
.cn-btn--ghost {
  background: #fff;
  color: var(--cn-navy);
  border: 1px solid var(--cn-navy);
}
.cn-btn--ghost:hover { background: var(--cn-primary-bg); color: var(--cn-navy); }

/* ⚠️ 追従CTAは使わない（CLAUDE.md 第3章）。position:fixed のCTAを足さないこと。 */

/* ==========================================================================
   サービス詳細 /agents/
   ========================================================================== */
.cn-agent__head { margin: 0 0 2em; }
.cn-agent__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cn-navy);
  line-height: 1.4;
  margin: .4em 0 .6em;
}
.cn-verified {
  font-size: .82rem;
  color: var(--cn-ink-sub);
  font-family: var(--cn-font-num);
  margin: 0;
}
.cn-verified__label {
  display: inline-block;
  margin-right: .6em;
  padding: .2em .6em;
  background: var(--cn-bg-soft);
  border-radius: var(--cn-radius);
  font-family: var(--cn-font);
}

/* 向く人 / 向かない人 — 両方書く（景表法の防御でありAI引用にも効く） */
.cn-fit { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 0 0 2.4em; }
.cn-fit__box {
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-l);
  padding: 20px;
}
.cn-fit__box h3 {
  font-size: 1rem;
  margin: 0 0 .8em;
  padding: 0 0 .5em;
  border-bottom: 2px solid currentColor;
}
.cn-fit__box--yes h3 { color: var(--cn-primary); }
.cn-fit__box--no  h3 { color: var(--cn-ink-sub); }
.cn-fit__box ul { margin: 0; padding-left: 1.2em; font-size: .94rem; }

/* ==========================================================================
   独自調査 /research/ — ここにCTAは置かない
   ========================================================================== */
.cn-research__meta {
  background: var(--cn-bg-soft);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-l);
  padding: 18px 22px;
  margin: 0 0 2.4em;
  font-size: .9rem;
  line-height: 2;
}
.cn-research__meta dt {
  float: left;
  clear: left;
  width: 5.5em;
  color: var(--cn-ink-sub);
  font-weight: 700;
}
.cn-research__meta dd { margin: 0 0 0 6em; }

.cn-cite {
  border: 1px dashed var(--cn-line-strong);
  border-radius: var(--cn-radius);
  padding: 16px 18px;
  margin: 2.4em 0;
  font-size: .88rem;
  background: var(--cn-bg);
}
.cn-cite__label { font-weight: 700; color: var(--cn-navy); display: block; margin-bottom: .5em; }
.cn-cite__text { font-family: var(--cn-font-num); font-size: .82rem; word-break: break-all; color: var(--cn-ink-sub); }

/* ==========================================================================
   次に読む / 関連記事 / まとめ
   ========================================================================== */
.cn-nextread {
  border-top: 2px solid var(--cn-navy);
  padding: 16px 0 0;
  margin: 3em 0;
}
.cn-nextread__label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--cn-navy);
  letter-spacing: .1em;
  margin: 0 0 .4em;
}
.cn-nextread__link { font-size: 1.02rem; font-weight: 700; line-height: 1.6; }

.cn-summary {
  background: var(--cn-bg-soft);
  border-radius: var(--cn-radius-l);
  padding: 24px 26px;
  margin: 3em 0;
}
.cn-summary h2 {
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 .8em;
  font-size: 1.25rem;
}

/* ==========================================================================
   広告枠
   ========================================================================== */
.cn-ad { margin: 3em 0; text-align: center; }
.cn-ad__label {
  display: block;
  font-size: .7rem;
  color: var(--cn-ink-sub);
  letter-spacing: .1em;
  margin-bottom: .4em;
}

/* ==========================================================================
   出典
   ========================================================================== */
.cn-sources { font-size: .86rem; color: var(--cn-ink-sub); margin: 3em 0 0; }
.cn-sources h2 { font-size: 1rem; border: none; background: none; padding: 0; margin: 0 0 .6em; }
.cn-sources ul { padding-left: 1.2em; }
.cn-sources a { word-break: break-all; }

/* ==========================================================================
   レイアウト
   ========================================================================== */
.cn-wrap { max-width: var(--cn-w-wide); margin-inline: auto; padding-inline: 20px; }
.cn-body { max-width: var(--cn-w-content); }

.cn-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}
/* ⚠️ 追従ヘッダー（.cn-gnav）の下に潜らせない。
   `top` を 24px にしていたため、スクロールするとサイドバーの上端が
   ヘッダーに隠れていました（2026-09-13 報告）。**ヘッダーの高さを足す。** */
.cn-sidebar { position: sticky; top: calc(var(--cn-header-h) + 24px); font-size: .92rem; }
.admin-bar .cn-sidebar { top: calc(var(--cn-header-h) + 32px + 24px); }
.cn-sidebar__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cn-navy);
  padding-bottom: .5em;
  border-bottom: 2px solid var(--cn-navy);
  margin: 0 0 1em;
}

.cn-section { margin: 0 0 4em; }
.cn-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 1.5em;
}
.cn-section__en {
  font-family: var(--cn-font-num);
  font-size: 1.4rem;
  font-weight: 700;
  font-style: italic;
  color: var(--cn-primary);
  letter-spacing: .04em;
}
.cn-section__ja { font-size: 1.05rem; font-weight: 700; color: var(--cn-navy); }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 900px) {
  .cn-layout { grid-template-columns: 1fr; gap: 40px; }
  .cn-sidebar { position: static; }
  .cn-fit { grid-template-columns: 1fr; }
  .cn-research__meta dt { float: none; width: auto; }
  .cn-research__meta dd { margin-left: 0; margin-bottom: .6em; }
}

@media (max-width: 600px) {
  body { font-size: 15.5px; line-height: 1.85; }
  .cn-body h2 { font-size: 1.3rem; }
  .cn-body h3 { font-size: 1.12rem; }
  .cn-agent__title { font-size: 1.4rem; }
  .cn-cta { padding: 20px 16px; }
  .cn-cards { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .cn-card__title { font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 印刷時にCTAと広告を出さない */
@media print {
  .cn-cta, .cn-ad, .cn-sidebar { display: none !important; }
}

/* ==========================================================================
   Phase 02 で足した分（2026-08-30）
   トップ / 記事 / カテゴリ / 検索 / 404 / パンくず / 目次 / PR表記
   既存のトークン（--cn-*）だけを使う。新しい色を増やさない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   PR表記 — 義務。目立たなくしない
   -------------------------------------------------------------------------- */
.cn-pr {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 1.4em;
  padding: 10px 14px;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--cn-ink-sub);
  background: var(--cn-bg-soft);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
}
.cn-pr__badge {
  flex: none;
  font-family: var(--cn-font-num);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: var(--cn-ink-sub);
  padding: 2px 7px;
  border-radius: var(--cn-radius);
}

/* --------------------------------------------------------------------------
   パンくず
   -------------------------------------------------------------------------- */
.cn-crumb { margin: 16px 0 24px; font-size: .8rem; color: var(--cn-ink-sub); }
.cn-crumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  margin: 0; padding: 0; list-style: none;
}
.cn-crumb__item + .cn-crumb__item::before { content: "›"; margin-right: 6px; color: var(--cn-line-strong); }
.cn-crumb__item a { color: var(--cn-ink-sub); }
.cn-crumb__item--current { color: var(--cn-ink); }

/* --------------------------------------------------------------------------
   目次
   -------------------------------------------------------------------------- */
.cn-toc {
  max-width: var(--cn-w-content);
  margin: 0 0 2.4em;
  padding: 18px 22px;
  background: var(--cn-bg-soft);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-l);
}
/* 見出し＝開閉のつまみ（summary）。
   ⚠️ JavaScript は使いません。`<details>` だけで閉じられます。
      JSで作ると、**記事ページで目次のためだけにJSを読むことになり**、
      条件付きアセット読み込み（CLAUDE.md 第3章の表示速度1）と衝突します。 */
.cn-toc__title {
  margin: 0;
  font-size: .9rem; font-weight: 700; color: var(--cn-navy);
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;               /* Firefox の三角を消す */
  display: flex; align-items: center; gap: .5em;
}
.cn-toc__title::-webkit-details-marker { display: none; }   /* Safari の三角を消す */

/* 自前の山かたち。閉じているときは下向き、開いているときは上向き。 */
.cn-toc__title::after {
  content: "";
  width: .62em; height: .62em;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.cn-toc__details[open] > .cn-toc__title::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.cn-toc__title:focus-visible { outline: 2px solid var(--cn-cta-2, var(--cn-primary)); outline-offset: 3px; }
.cn-toc__details[open] > .cn-toc__list { margin-top: .9em; }
.cn-toc__list { margin: 0; padding: 0; list-style: none; border: 0; background: none; counter-reset: cn-toc; }
.cn-toc__item { margin: 0 0 .45em; font-size: .9rem; line-height: 1.6; }
.cn-toc__item--h2 { font-weight: 500; }
.cn-toc__item--h3 { padding-left: 1.2em; font-size: .85rem; color: var(--cn-ink-sub); }
.cn-toc__item--h3 a { color: inherit; }
.cn-toc__item:last-child { margin-bottom: 0; }

/* 目次から飛んだとき、見出しがヘッダーの下に隠れないようにする。
   ⚠️ 24px では**追従ヘッダーの高さぶん足りず、見出しが隠れていました。** */
.cn-body h2, .cn-body h3 { scroll-margin-top: calc(var(--cn-header-h) + 16px); }

/* --------------------------------------------------------------------------
   記事
   -------------------------------------------------------------------------- */
.cn-article__head { margin: 0 0 2em; max-width: var(--cn-w-content); }
.cn-article__title {
  font-size: 1.85rem; font-weight: 700; line-height: 1.45;
  color: var(--cn-ink-strong); margin: .4em 0 .6em;
  letter-spacing: .01em;
}
.cn-article__meta {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin: 0; font-size: .82rem; color: var(--cn-ink-sub);
  font-family: var(--cn-font-num); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   関連記事（「次に読む」の下・主役にしない）
   -------------------------------------------------------------------------- */
.cn-related { margin: 3.5em 0 0; padding-top: 2em; border-top: 1px solid var(--cn-line); }
.cn-related__title {
  font-size: 1.05rem; font-weight: 700; color: var(--cn-navy);
  margin: 0 0 1.2em; padding: 0; border: none; background: none;
}
.cn-cards--related { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------------------
   アーカイブ / カテゴリ
   -------------------------------------------------------------------------- */
.cn-archive__head { margin: 0 0 2.4em; max-width: var(--cn-w-content); }
.cn-archive__title {
  font-size: 1.6rem; font-weight: 700; color: var(--cn-navy); margin: 0 0 .5em;
}
.cn-archive__desc { color: var(--cn-ink-sub); font-size: .94rem; }

/* Pillar — カテゴリの主役 */
.cn-pillar {
  margin: 0 0 3em;
  padding: 24px 26px;
  background: var(--cn-primary-bg);
  border-radius: var(--cn-radius-l);
}
.cn-pillar__label {
  margin: 0 0 .5em;
  font-family: var(--cn-font-num); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cn-primary);
}
.cn-pillar__title { font-size: 1.3rem; font-weight: 700; line-height: 1.5; margin: 0 0 .5em; }
.cn-pillar__title a { color: var(--cn-navy); }
.cn-pillar__desc { margin: 0; font-size: .92rem; color: var(--cn-ink); }

/* --------------------------------------------------------------------------
   トップ
   -------------------------------------------------------------------------- */
/* ヒーロー（0.4.1 で作り直し）
   ⚠️ **画像もWebフォントも1つも使っていません。**背景はすべてCSSのグラデーションです。
      LCP要素は `h1.cn-hero__title` のテキストのままで、ここに画像を置くと
      モバイルLCPが直接悪化します（第3章・LCP 2.5秒以下が最優先）。
   ⚠️ アニメーションも入れていません。**最初の1フレームで完成している**状態にします。 */
.cn-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: var(--cn-navy);
  background-image:
    radial-gradient(58% 88% at 88% 6%, rgba(245, 165, 36, .20), transparent 60%),
    radial-gradient(52% 78% at 4% 98%, rgba(1, 168, 214, .16), transparent 62%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 40px),
    linear-gradient(158deg, var(--cn-navy-deep) 0%, var(--cn-navy) 55%, #0D3A6D 100%);
  padding: 72px 0 66px;
  margin-bottom: 48px;
}
.cn-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .92fr);
  gap: 48px;
  align-items: center;
}
.cn-hero__eyebrow {
  margin: 0 0 18px;
  font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  color: #A9C6E6;
}
.cn-hero__eyebrow::before {
  content: ""; display: inline-block; width: 26px; height: 2px;
  margin-right: 12px; vertical-align: middle; background: var(--cnt-amber);
}
.cn-hero__title {
  font-size: clamp(1.85rem, 4.4vw, 2.95rem); font-weight: 700; line-height: 1.34;
  color: #fff; margin: 0 0 .62em; letter-spacing: .01em;
}
.cn-hero__accent { color: var(--cnt-amber); }
.cn-hero__lead {
  max-width: 46ch; margin: 0 0 2em;
  color: #D7E4F2; font-size: 1.02rem; line-height: 1.9;
}
.cn-hero__lead strong { color: #fff; }
.cn-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 1em; }
.cn-btn--lg { font-size: 1rem; padding: 16px 28px; }
.cn-hero__note { margin: 0; font-size: .82rem; color: #B9CFE6; }

/* 紺の上のボタン。**主CTAはアンバー**にします。既定の `--cn-cta`（青紫）は
   紺の背景に沈み、いちばん押してほしいものがいちばん見えなくなります。
   サイドバーの診断導線と同じ色になるので、サイト内でも一貫します。 */
.cn-hero .cn-btn {
  background: var(--cnt-amber); color: var(--cn-navy-deep);
  box-shadow: 0 6px 20px rgba(3, 20, 40, .22);
}
.cn-hero .cn-btn:hover { background: var(--cnt-amber-dark); color: var(--cn-navy-deep); }
.cn-hero .cn-btn--ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .55); box-shadow: none;
}
.cn-hero .cn-btn--ghost:hover { background: rgba(255, 255, 255, .10); color: #fff; }

/* 右側の面。事実だけを置く。**個別CTAは置かない**（第3章） */
.cn-hero__panel {
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
}
.cn-hero__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin: 0 0 20px;
}
.cn-hero__stat { margin: 0; }
.cn-hero__stat dt {
  margin: 0 0 6px; font-size: .76rem; letter-spacing: .06em; color: #A9C6E6;
}
.cn-hero__stat dd { margin: 0; line-height: 1; }
.cn-hero__num {
  font-size: 2.6rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--cnt-amber); font-variant-numeric: tabular-nums;
}
.cn-hero__unit { margin-left: .18em; font-size: 1rem; font-weight: 700; color: #fff; }
.cn-hero__facts {
  margin: 0; padding: 18px 0 0; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .86rem; line-height: 1.8; color: #D7E4F2;
}
.cn-hero__facts li { position: relative; padding-left: 20px; }
.cn-hero__facts li + li { margin-top: 8px; }
.cn-hero__facts li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--cn-cta-2);
}
.cn-hero__facts strong { color: #fff; }

.cn-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 0; padding: 0; list-style: none; counter-reset: cn-step;
}
.cn-steps__item {
  padding: 20px 22px;
  border: 1px solid var(--cn-line); border-radius: var(--cn-radius-l);
  font-size: .9rem; color: var(--cn-ink-sub); line-height: 1.75;
}
.cn-steps__item::before {
  counter-increment: cn-step; content: counter(cn-step, decimal-leading-zero);
  display: block; margin-bottom: .6em;
  font-family: var(--cn-font-num); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; color: var(--cn-primary);
}
.cn-steps__title { margin: 0 0 .4em; font-size: 1rem; font-weight: 700; color: var(--cn-navy); }
.cn-steps__item p { margin: 0; }

.cn-cta-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  padding: 28px 30px;
  border: 1px solid var(--cn-line); border-radius: var(--cn-radius-l);
}
.cn-cta-band__num {
  margin: 0; flex: none;
  font-family: var(--cn-font-num); font-variant-numeric: tabular-nums;
  font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--cn-navy);
}
.cn-cta-band__num span { font-size: 1rem; margin-left: 2px; }
.cn-cta-band__text { flex: 1 1 20ch; margin: 0; font-size: .92rem; color: var(--cn-ink); }

/* --------------------------------------------------------------------------
   404 / 固定ページ
   -------------------------------------------------------------------------- */
.cn-main--narrow { max-width: var(--cn-w-content); margin-inline: auto; }
.cn-page__head { margin: 0 0 2em; }
.cn-page__title { font-size: 1.7rem; font-weight: 700; color: var(--cn-navy); margin: 0 0 .5em; }
.cn-404__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 2em 0 3em; }
.cn-404__search { padding-top: 2em; border-top: 1px solid var(--cn-line); }

/* --------------------------------------------------------------------------
   編集者にだけ見せる注意書き
   （読者には出さない。設定漏れに気づけないほうが問題なので、画面に出す）
   -------------------------------------------------------------------------- */
.cn-admin-note {
  margin: 0 0 2.4em; padding: 14px 18px;
  font-size: .88rem; line-height: 1.8;
  background: var(--cn-bg-note);
  border: 1px solid var(--cn-accent);
  border-radius: var(--cn-radius);
}
.cn-admin-note code { font-family: var(--cn-font-num); font-size: .84em; }

/* --------------------------------------------------------------------------
   ページネーション
   -------------------------------------------------------------------------- */
.pagination, .nav-links {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 3em 0 0; font-family: var(--cn-font-num); font-size: .9rem;
}
.nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--cn-line); border-radius: var(--cn-radius);
  color: var(--cn-ink-sub); text-decoration: none;
}
.nav-links .page-numbers.current { background: var(--cn-navy); border-color: var(--cn-navy); color: #fff; }
.nav-links .page-numbers:hover:not(.current) { background: var(--cn-bg-soft); color: var(--cn-navy); }

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cn-steps { grid-template-columns: 1fr; }
  .cn-cards--service { grid-template-columns: 1fr; }
  /* ヒーローは1カラムに。**面は下に回す**（先に読ませたいのは見出しと導線） */
  .cn-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .cn-hero__lead { max-width: none; }
}
@media (max-width: 600px) {
  .cn-hero { padding: 44px 0 40px; margin-bottom: 32px; }
  .cn-hero__panel { padding: 20px; }
  .cn-hero__num { font-size: 2.2rem; }
  .cn-hero__eyebrow { margin-bottom: 14px; }
  .cn-article__title { font-size: 1.4rem; }
  .cn-hero__actions .cn-btn { width: 100%; }
  .cn-cards--related { grid-template-columns: 1fr; }
  .cn-toc { padding: 14px 16px; }
  .cn-cta-band { padding: 20px 18px; }
  .cn-cta-band__num { font-size: 2rem; }
}

/* ------------------------------------------------------------------
   0.2.1（2026-08-30）本番確認で見つかった不足分
   ------------------------------------------------------------------ */

/* グリッドの子は min-width:auto のままだと、幅の広い表やコードで
   カラムごと押し広げられます。**表を含むページで必ず起きます。** */
.cn-main { min-width: 0; }

/* サイドバーのブロック。CTAは置かない（診断への導線のみ）。 */
.cn-sidebar__block {
  padding: 20px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  background: var(--cn-bg-sub);
}
.cn-sidebar__block p { margin: 0 0 .9em; line-height: 1.7; }
.cn-sidebar__block .cn-btn { width: 100%; text-align: center; }

/* 本文中の表は、はみ出さずに「表の中で」横スクロールさせる（モバイル対策）。
   ⚠️ table 自体に display:block を当てないこと。行の幅計算が崩れます。
   Gutenberg は表を figure.wp-block-table で包むので、そこに当てます。 */
.cn-body .wp-block-table { overflow-x: auto; max-width: 100%; }
.cn-body .wp-block-table > table { min-width: 100%; }

/* ------------------------------------------------------------------
   0.2.2（2026-08-30）0.2.1 適用後の本番確認で見つかった見た目のずれ
   ------------------------------------------------------------------ */

/* パンくずは本文カラムに揃える。
   固定ページと404は本文を760pxに絞っているのに、パンくずだけが
   ラッパー幅いっぱい（1140px）で、**190px ずれて見えていた。**
   2カラムのテンプレート（記事・サービス詳細）はラッパー幅のままでよい。 */
.cn-crumb--narrow { max-width: var(--cn-w-content); margin-inline: auto; }

/* ヒーローのボタンは、記事本文のCTAと違って横に並べる。
   `.cn-btn` は本文CTA向けに width:100% を持っているため、
   **デスクトップで1140px幅のボタンが2つ縦に積まれていた。**
   600px以下では既存の指定どおり100%に戻る。 */
@media (min-width: 601px) {
  .cn-hero__actions .cn-btn { width: auto; }
}

/* ------------------------------------------------------------------
   0.2.4（2026-08-30）ナビゲーション
   ⚠️ これが無い間、運営者情報・編集方針・執筆者・お問い合わせの4ページへ
      サイトのどこからも辿り着けなかった。
   ------------------------------------------------------------------ */

.cn-gnav {
  border-bottom: 1px solid var(--cn-line);
  background: #fff;
}
.cn-gnav__list {
  display: flex; flex-wrap: wrap; gap: 4px 24px;
  margin: 0; padding: 0; list-style: none;
}
.cn-gnav__list > li > a,
.cn-gnav__item > a {
  display: inline-block; padding: 13px 0;
  font-size: .92rem; font-weight: 500;
  color: var(--cn-ink); text-decoration: none;
}
.cn-gnav__list > li > a:hover,
.cn-gnav__item > a:hover { color: var(--cn-cta); }

.cn-fnav {
  margin-top: 56px; padding: 28px 0 4px;
  border-top: 1px solid var(--cn-line);
}
.cn-fnav__list {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 0 0 14px; padding: 0; list-style: none;
}
.cn-fnav__list > li > a,
.cn-fnav__item > a {
  font-size: .85rem; color: var(--cn-ink-sub); text-decoration: none;
}
.cn-fnav__list > li > a:hover,
.cn-fnav__item > a:hover { color: var(--cn-ink); text-decoration: underline; }
.cn-fnav__owner { margin: 0; font-size: .8rem; color: var(--cn-ink-sub); }

@media (max-width: 600px) {
  .cn-gnav__list { gap: 0 18px; }
  .cn-gnav__list > li > a, .cn-gnav__item > a { padding: 11px 0; font-size: .88rem; }
  .cn-fnav { margin-top: 40px; }
}

/* ==========================================================================
   CTA の作り直し（0.2.6 / 2026-09-01）
   ==========================================================================
   ⚠️ **プラグインが出すクラス名に、テーマ側でデザインを当てます。**

   プラグイン（careers-net-core/assets/css/blocks.css）は
   `.cn-cta` / `.cn-cta__body` / `.cn-cta__description` / `.cn-button` を
   独自のトークン（--cn-accent / --cn-ink / --cn-paper）で組んでいます。
   一方この子テーマは紺基調（--cn-navy / --cn-cta）。**2つの設計が混ざって、
   記事の中でCTAだけ別サイトのように見えていました**（2026-09-01 指摘）。

   分担を決めます。
     プラグイン = 構造（何を出すか）
     テーマ     = 見た目（どう見せるか）
   **careers-net 固有のCTAデザインをプラグインに入れないでください。**
   横展開できるのはプラグインだけで、住宅・車メディアに持っていくとき邪魔になります。

   パターンは3つ。記事側でブロックの className に指定して選びます。

   | className          | 使う場所            | 見え方                     |
   |--------------------|--------------------|---------------------------|
   | （無指定・editorial） | article_bottom      | 読了者向けの主力。囲み＋フル幅ボタン |
   | cn-cta--compact     | article_mid         | 本文の流れを止めない横長      |
   | cn-cta--contrast    | 強く出す場所         | 紺ベタ＋白文字＋アンバーのボタン |

   ```
   <!-- wp:cn/cta {"ctaId":4,"placement":"article_mid","className":"cn-cta--compact"} /-->
   ```
   ========================================================================== */

/* --- 共通の土台 ---------------------------------------------------------- */
.cn-cta {
  display: block;
  position: relative;
  border: 1px solid var(--cn-line-strong);
  border-top: 3px solid var(--cn-cta);
  border-radius: var(--cn-radius-l);
  background: var(--cn-bg);
  margin: 3em 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 51, 96, .04), 0 8px 24px -12px rgba(11, 51, 96, .18);
}
/* プラグインが左に出すアクセント帯は、上帯と二重になるので消す */
.cn-cta::before { display: none; }

.cn-cta__body { padding: 26px 28px 28px; }

/* ラベル（Next Step 等）— 小さく、しかし読める強さで */
.cn-cta .cn-block__eyebrow {
  color: var(--cn-cta);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  margin: 0 0 .7em;
}

.cn-cta__body > h3 {
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cn-navy);
  margin: 0 0 .7em;
  letter-spacing: .01em;
}

.cn-cta__description {
  font-size: .95rem;
  line-height: 1.85;
  color: var(--cn-ink);
  margin: 0 0 1.4em;
}
.cn-cta__description > :last-child { margin-bottom: 0; }
/* 説明に箇条書きを書いた場合は、チェック印つきの要点として見せる */
.cn-cta__description ul { list-style: none; margin: .8em 0 0; padding: 0; }
.cn-cta__description li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: .45em;
  font-size: .93rem;
}
.cn-cta__description li::before {
  content: "";
  position: absolute;
  left: .25em;
  top: .55em;
  width: .5em;
  height: .28em;
  border-left: 2px solid var(--cn-cta-2);
  border-bottom: 2px solid var(--cn-cta-2);
  transform: rotate(-45deg);
}

/* --- ボタン --------------------------------------------------------------
   プラグインの `.cn-button` は角ゼロ＋黒枠＋ずらし影（別トンマナ）なので、
   テーマのボタンに揃えます。**押せることが一目で分かる大きさを確保する。**
   ------------------------------------------------------------------------ */
.cn-cta .cn-button,
.cn-cta__actions .cn-button {
  display: flex;
  width: 100%;
  min-height: 60px;
  padding: .95em 1.4em;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--cn-cta);
  border: none;
  border-radius: var(--cn-pill);
  box-shadow: 0 4px 14px -4px rgba(91, 116, 222, .55);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cn-cta .cn-button:hover {
  background: var(--cn-cta-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(91, 116, 222, .6);
}
.cn-cta .cn-button:visited { color: #fff; }

/* 「次に何が起きるか」の一言。ボタンの下に置く */
.cn-cta__note,
.cn-cta__body > p:last-child:not([class]) {
  font-size: .82rem;
  line-height: 1.7;
  color: var(--cn-ink-sub);
  margin: .9em 0 0;
  text-align: center;
}

/* --- パターン2: compact（本文の途中） ------------------------------------
   article_mid は「読んでいる途中」なので、**流れを止めない形**にします。
   囲みを弱くし、ボタンは横幅いっぱいにしません。
   ------------------------------------------------------------------------ */
.cn-cta--compact {
  border: 1px solid var(--cn-line);
  border-top: 1px solid var(--cn-line);
  border-left: 5px solid var(--cn-cta-2);
  border-radius: var(--cn-radius);
  background: var(--cn-bg-soft);
  box-shadow: none;
  margin: 2.4em 0;
}
.cn-cta--compact .cn-cta__body { padding: 20px 22px; }
.cn-cta--compact .cn-block__eyebrow { color: var(--cn-ink-sub); }
.cn-cta--compact .cn-cta__body > h3 { font-size: 1.08rem; margin-bottom: .5em; }
.cn-cta--compact .cn-cta__description { font-size: .9rem; margin-bottom: 1em; }
.cn-cta--compact .cn-button {
  display: inline-flex;
  width: auto;
  min-height: 50px;
  font-size: .97rem;
  padding: .7em 1.8em;
  background: var(--cn-cta-2);
  box-shadow: 0 3px 10px -3px rgba(1, 168, 214, .5);
}
.cn-cta--compact .cn-button:hover { background: #0192B8; }

/* --- パターン3: contrast（強く出す） --------------------------------------
   紺ベタに白文字。**多用しないこと。**1記事に1つまで。
   ------------------------------------------------------------------------ */
.cn-cta--contrast {
  background: linear-gradient(135deg, var(--cn-navy) 0%, var(--cn-navy-deep) 100%);
  border: none;
  border-top: none;
  box-shadow: 0 10px 30px -14px rgba(6, 38, 74, .7);
}
.cn-cta--contrast .cn-block__eyebrow { color: #7FB2E8; }
.cn-cta--contrast .cn-cta__body > h3 { color: #fff; font-size: 1.36rem; }
.cn-cta--contrast .cn-cta__description { color: #D6E4F2; }
.cn-cta--contrast .cn-cta__description li::before {
  border-left-color: var(--cnt-amber);
  border-bottom-color: var(--cnt-amber);
}
.cn-cta--contrast .cn-button {
  background: var(--cnt-amber);
  color: var(--cn-navy-deep);
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, .45);
}
.cn-cta--contrast .cn-button:hover { background: var(--cnt-amber-dark); color: var(--cn-navy-deep); }
.cn-cta--contrast .cn-button:visited { color: var(--cn-navy-deep); }
.cn-cta--contrast .cn-cta__note,
.cn-cta--contrast .cn-cta__body > p:last-child:not([class]) { color: #A9C4DD; }

/* --- service-card の中に埋まっているCTAは、二重の箱にしない --------------- */
.cn-service-card > .cn-cta--embedded,
.cn-service-card .cn-cta {
  border: none;
  border-top: 1px solid var(--cn-line);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

@media (max-width: 600px) {
  .cn-cta__body { padding: 20px 18px 22px; }
  .cn-cta__body > h3 { font-size: 1.14rem; }
  .cn-cta .cn-button { min-height: 56px; font-size: 1rem; }
  .cn-cta--compact .cn-button { width: 100%; }
}

/* ==========================================================================
   サイドバーの診断導線（0.2.6 で作り直し）
   ==========================================================================
   ⚠️ ここにアフィリCTAは置きません。**診断への導線だけ**（CLAUDE.md 第4章）。
   以前は白地に細いボタンで、押せる場所に見えていませんでした（2026-09-01 指摘）。
   ========================================================================== */
.cn-sidebar__block {
  background: linear-gradient(160deg, var(--cn-navy) 0%, var(--cn-navy-deep) 100%);
  border-radius: var(--cn-radius-l);
  padding: 22px 20px 24px;
  color: #fff;
  box-shadow: 0 10px 26px -16px rgba(6, 38, 74, .8);
}
.cn-sidebar__block .cn-sidebar__title {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 .55em;
}
.cn-sidebar__eyebrow {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: #7FB2E8;
  margin: 0 0 .7em;
}
.cn-sidebar__block p { color: #D6E4F2; font-size: .88rem; line-height: 1.8; margin: 0 0 1.1em; }
.cn-sidebar__points { list-style: none; margin: 0 0 1.2em; padding: 0; }
.cn-sidebar__points li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: .4em;
  font-size: .86rem;
  color: #E6EFF7;
}
.cn-sidebar__points li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: .5em;
  width: .48em;
  height: .26em;
  border-left: 2px solid var(--cnt-amber);
  border-bottom: 2px solid var(--cnt-amber);
  transform: rotate(-45deg);
}
.cn-sidebar__block .cn-btn {
  min-height: 56px;
  font-size: 1rem;
  border-radius: var(--cn-pill);
  background: var(--cnt-amber);
  color: var(--cn-navy-deep);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .45);
}
.cn-sidebar__block .cn-btn:hover { background: var(--cnt-amber-dark); color: var(--cn-navy-deep); }
.cn-sidebar__note {
  display: block;
  margin: .8em 0 0;
  font-size: .76rem;
  color: #A9C4DD;
  text-align: center;
}

/* ==========================================================================
   ロゴ（0.3.0 / 2026-09-02）
   ==========================================================================
   ⚠️ **このブロックだけが親テーマ（Arkhe）のクラス名 `.c-headLogo` に依存します。**
   マークアップを差し替えず、テキストのロゴを画像で「覆う」形にしてあります。
   親テーマのクラス名が変わっても、**テキストのロゴに戻るだけ**で、サイト名は消えません。
   （text-indent で飛ばしているので、DOM とアクセシビリティツリーには
     `Career’s Net` の文字が残ります。読み上げも検索も文字を読みます）

   ⚠️ ロゴの文字は **SVG のアウトライン** です。Webフォントは読み込みません
   （CLAUDE.md 第3章・モバイルLCP最優先）。
   ========================================================================== */
.c-headLogo {
  display: block;
  width: 190px;
  height: 48px;
  background: url(../img/logo.svg) no-repeat left center;
  background-size: contain;
  max-width: 100%;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
.c-headLogo:hover { opacity: .82; text-decoration: none; }

@media (max-width: 782px) {
  .c-headLogo { width: 150px; height: 38px; }
}

/* 画像が読めない環境（背景画像を落とす設定・印刷）では文字に戻す */
@media print {
  .c-headLogo { background: none; text-indent: 0; color: var(--cn-navy); font-weight: 700; }
}

/* ==========================================================================
   グローバルナビのカテゴリ（0.3.0 / 2026-09-02）
   ==========================================================================
   診断とサービス一覧が主導線、カテゴリはその後ろ。**同じ強さで並べません。**
   ========================================================================== */
/* ⚠️ 上の `.cn-gnav__list > li > a`（詳細度 0,1,2）に負けるので、
   同じだけ絞ったセレクタで書きます。クラスを足しただけでは効きません（実測）。 */
.cn-gnav__list > .cn-gnav__item--lead > a { font-weight: 700; color: var(--cn-navy); }
.cn-gnav__list > .cn-gnav__item--cat  > a { font-weight: 500; color: var(--cn-ink-sub); }
/* ⚠️ `:first-of-type` は「同じ**要素名**の最初」を指し、クラスは見ません。
   li ばかりの並びでは先頭の「診断」に当たってしまいます（0.3.0 の実装で踏みました）。
   主導線の直後に来るカテゴリ、を隣接セレクタで指します。 */
.cn-gnav__item--lead + .cn-gnav__item--cat { position: relative; }
.cn-gnav__item--lead + .cn-gnav__item--cat::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  width: 1px; height: 16px; margin-top: -8px; background: var(--cn-line-strong);
}
@media (max-width: 600px) {
  .cn-gnav__item--lead + .cn-gnav__item--cat::before { display: none; }
}

/* ==========================================================================
   トップの記事セクション（0.3.0 / 2026-09-02）
   ========================================================================== */
.cn-section__lead {
  margin: 0 0 20px;
  font-size: .95rem;
  color: var(--cn-ink-sub);
}
.cn-cat-links {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 22px 0 0;
}
.cn-cat-links__item {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-pill);
  font-size: .9rem; font-weight: 600;
  color: var(--cn-navy); text-decoration: none;
  background: #fff;
}
.cn-cat-links__item:hover {
  border-color: var(--cn-primary);
  background: var(--cn-primary-bg);
  text-decoration: none;
}
.cn-cat-links__item span {
  font-family: var(--cn-font-num); font-variant-numeric: tabular-nums;
  font-size: .78rem; font-weight: 600; color: var(--cn-ink-sub);
}

/* ==========================================================================
   ヘッダー下の余白と、追従するナビ（0.3.4 / 2026-09-03）
   ==========================================================================
   ⚠️ **このブロックは親テーマ（Arkhe）のクラス名に依存します**（`#header` / `.l-content__body`）。
   ロゴの節と同じく、依存はここに閉じ込めます。効かなくなっても**元の見た目に戻るだけ**です。
   ========================================================================== */

/* --- ① ヘッダーとパンくずの間の余白 -----------------------------------
   Arkhe は `.l-content__body` に `margin-top: 48px` を持っています。
   そこに当サイトのパンくずの `margin-top: 16px` が足され、**合計64px**空いていました（実測）。
   本文の上の余白は当サイト側で決めます。 */
/* ⚠️ Arkhe 側は `.l-content__body { margin-top: 3rem }`（詳細度 0,1,0）。
   同じ詳細度で書くと読み込み順に勝敗を委ねることになるので、**1段だけ絞って確実に上書き**します。
   （トップは Arkhe 側が `.home.page .l-content__body { margin-top: 0 }` で既に0にしています） */
.l-content .l-content__body { margin-top: 0; }
.cn-crumb { margin-top: 20px; }

/* --- ② 追従するナビ（PCのみ） -----------------------------------------
   これまでは親テーマのヘッダー（ロゴだけ・高さ64px）が追従し、
   その下のナビ（高さ55px）は一緒に流れて消えていました。**追従しても行き先が無い状態**です。

   PCではヘッダーの追従を止め、**ナビのほうを追従させて、その左にロゴを置きます。**
   追従する帯が 64px + 55px → 55px の1本になり、行き先も一緒に残ります。

   ⚠️ モバイルは変更しません。親テーマのヘッダーにドロワーと検索のボタンが入っており、
      追従を止めるとスクロール中にメニューへ手が届かなくなるためです。 */
.cn-gnav__logo { display: none; }

/* ⚠️ ブレークポイントは **1000px**。Arkhe の PC追従は
   `.l-header[data-pcfix="1"]`＠`(min-width: 1000px)` で入り、
   999px以下は `[data-spfix="1"]` の追従（ドロワーと検索のボタンつき）です。
   ここを 900px にすると 900〜999px でヘッダーだけ追従が外れ、
   **スクロール中にメニューへ手が届かなくなります。** */
@media (min-width: 1000px) {
  /* ⚠️ **PCではヘッダーを出しません。**
     `position: static` にしただけだと、ページ上部で**ロゴが2つ縦に並びます**
     （ヘッダーのロゴと、ナビの中のロゴ。0.3.4 で実際にそうなりました）。
     PCの Arkhe ヘッダーは**ロゴしか入っていません**
     （ドロワーと検索のボタンは `data-has-drawer="sp"` / `data-has-search="sp"` で
     モバイル専用）。**消して失われるものがありません。**
     ナビの帯がそのままヘッダーになるので、スクロール前と後で見た目が変わりません。 */
  #header { display: none; }

  /* ここから下は .cn-gnav が sticky。サイドバーと見出しの scroll-margin が
     この値を見て避けます（:root の --cn-header-h を上書き）。 */
  :root { --cn-header-h: 65px; }

  .cn-gnav {
    position: sticky;
    top: 0;
    z-index: 90;
    box-shadow: 0 1px 3px rgba(11, 51, 96, .06);
  }
  /* 管理バーは上に 32px 固定で乗る（PC幅では常に32px） */
  .admin-bar .cn-gnav { top: 32px; }

  .cn-gnav .cn-wrap {
    display: flex;
    align-items: center;
    gap: 36px;
    min-height: 64px;
  }
  .cn-gnav__list > li > a,
  .cn-gnav__item > a { padding: 0; }
  .cn-gnav__logo {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
  }
  .cn-gnav__logo img {
    display: block;
    width: 152px;
    height: auto;
  }
  .cn-gnav__logo:hover { opacity: .82; }
  .cn-gnav__list { flex: 1 1 auto; }
}

/* ==========================================================================
   careers-net-core のブロックをサイトの配色に合わせる（0.4.4）
   対象: /diagnosis/ /compare/ /search/ と、記事内の cn/cta・cn/service-card

   ⚠️ **プラグインのCSSは書き換えません。**プラグイン側は色をすべて
      カスタムプロパティで持っており（`.cn-block` に7つ）、既定値は
      プラグイン単体で成立する配色（ベージュ＋テラコッタ）になっています。
      **テーマは値を差し替えるだけ**です。これなら住宅・車メディアに
      持っていっても、そちらのテーマが別の値を入れるだけで済みます
      （第3章「横展開できるのはプラグインだけ」）。

   ⚠️ セレクタに `body` を付けているのは**詰めの1つ**です。プラグインと
      テーマはどちらも `.cn-block` で定義しており、詳細度が同じなので
      読み込み順が変わると負けます。`body` で +1 しておくと順序に依存しません。
   ========================================================================== */
body .cn-block {
  --cn-ink:        var(--cn-ink-strong);   /* 本文と見出し */
  --cn-paper:      var(--cn-bg-soft);      /* 面の地色 */
  --cn-paper-deep: var(--cn-primary-bg);   /* 進捗バーの溝など、一段沈んだ面 */
  --cn-accent:     var(--cn-primary);      /* 進捗・選択・ラベル */
  --cn-accent-dark: var(--cn-navy);        /* アイブロウなど小さい文字 */
  --cn-rule:       var(--cn-line-strong);  /* 罫 */
  --cn-focus:      var(--cn-cta-2);        /* フォーカスリング */
}
/* 反転版のCTAブロック。**ここを書き忘れると、上の指定が反転版を潰します**
   （`body .cn-block` のほうが `.cn-cta--contrast` より詳細度が高いため）。 */
body .cn-cta--contrast {
  --cn-ink:        #FFFFFF;
  --cn-paper:      var(--cn-navy);
  --cn-paper-deep: #0E3E73;
  --cn-rule:       rgba(255, 255, 255, .30);
}

/* --- 形もそろえる ---------------------------------------------------------
   プラグイン既定は太い罫と「ずらした影」で作る硬い見た目です。サイト側は
   1px の罫と小さい角丸で通しているので、そこだけ上書きします。
   ⚠️ **`box-shadow` を一括で消してはいけません。**選択済みの選択肢
      （`:has(input:checked)`）は影で状態を示しているので、消すなら
      代わりの表示を必ず与えること。 */
body .cn-diagnosis-app,
body .cn-button, body .cn-button:hover,
body .cn-service-card,
body .cn-compare__button { box-shadow: none; }

body .cn-diagnosis-app,
body .cn-compare-app { border: 1px solid var(--cn-line); border-radius: var(--cn-radius-l); }
body .cn-diagnosis-app__masthead { border-bottom: 1px solid var(--cn-line); }

body .cn-diagnosis-choice,
body .cn-diagnosis-result,
body .cn-service-card,
body .cn-search__empty,
body .cn-search__error,
body .cn-diagnosis-app__error,
body .cn-diagnosis-app__privacy { border: 1px solid var(--cn-line); border-radius: var(--cn-radius); }

body .cn-diagnosis-app__privacy { border-left: 3px solid var(--cn-primary); }
body .cn-diagnosis-choice:hover { border-color: var(--cn-primary); }
/* 影の代わりの「選択済み」表示。 */
body .cn-diagnosis-choice:has(input:checked) {
  box-shadow: none;
  border-color: var(--cn-primary);
  background: var(--cn-primary-bg);
}

body .cn-button,
body .cn-compare__button {
  border: none;
  border-radius: var(--cn-radius);
  background: var(--cn-cta);
  color: #fff;
  transform: none;
}
body .cn-button:hover,
body .cn-compare__button:hover { background: var(--cn-cta-hover); transform: none; }