@charset "UTF-8";

/*
Theme Name: Cocoon Child
Template: cocoon-master
Description: Cocoon child theme.
*/

/* ============================================================================
   キャリアレンズ（site: career）Cocoon子テーマ 追加CSS
   ----------------------------------------------------------------------------
   作成：2026-08-10
   置き場所：wp-content/themes/cocoon-child-master/style.css（このファイルの内容をそのまま）

   このサイトの読者は「資格を取るべきか」「この求人に応募していいか」を判断しに来る。
   気分を上げる装飾ではなく、**条件を読み比べられる**ことが要る。そのため

     1. 本文の読み幅を狭く保つ（1行が長いと条件の比較で目が戻れない）
     2. 表とチェックリストを最優先で整える（このサイトの主役はこの2つ）
     3. 色数を絞る。緑1色＋金の差し色だけで、意味は文字で伝える
     4. 罫線を減らし、淡い面と余白で区切る

   **金（--car-gold）は文字に使わない。** 白地で 2.34:1 しかなく、本文はもちろん
   補足文字にも足りない（2026-08-10 実測）。図形・アイコン・区切りの塗りだけに使う。
   緑・墨・補足はいずれも 4.5:1 以上あるので文字に使ってよい。
   ============================================================================ */

:root {
  /* 端末がダークでも暗転させない。フォーム部品と表の罫線が読めなくなるため。 */
  color-scheme: light;

  /* --- 配色 -----------------------------------------------------------------
     基調は深めの緑。資格・転職の情報サイトに多い青（事務的）と赤（煽り）を避けつつ、
     「落ち着いて判断する」側に寄せる。地は白ではなく、ごく淡い緑がかった白。
     カッコ内は白地に対するコントラスト比（2026-08-10 実測）。 */
  --car-ink: #17332f;          /* 本文（13.5:1） */
  --car-muted: #5d6f6b;        /* 補足・キャプション（5.3:1） */
  --car-green: #167d6b;        /* リンク・見出しの印（5.0:1） */
  --car-green-dark: #0c5b4d;   /* ホバー・白抜きの地（8.0:1） */
  --car-mint: #eaf6f2;         /* ラベル地・表のヘッダ */
  --car-gold: #e39b2d;         /* 差し色。**図形専用**（2.3:1・文字に使わない） */
  --car-page: #f7faf9;         /* ページ背景 */
  --car-surface: #ffffff;      /* 記事・カードの地 */
  --car-border: #d8e4e0;

  --car-radius: 14px;
  --car-radius-lg: 18px;
}

/* ---------------------------------------------------------------------------
   1. 本文の基本
   --------------------------------------------------------------------------- */

/* `body.body` と重ねるのは、Cocoon本体の指定に勝つため（renaiで実測済みの手当て）。 */
body,
body.body {
  background: var(--car-page);
  color: var(--car-ink);
  font-size: 17px;
  line-height: 1.9;
}

.entry-content p {
  line-height: 1.9;
  margin: 0 0 1.5em;
}

/* 読み幅。条件を読み比べる記事なので、PCでも広げすぎない。 */
.entry-content {
  max-width: 44em;
}

/* 記事本体は白い面にして、地（淡緑）と分ける。 */
.article,
.entry-card-wrap,
main .main {
  background: var(--car-surface);
  border-radius: var(--car-radius-lg);
}

/* ---------------------------------------------------------------------------
   2. 見出し
   下線を引かず、左に短い縦棒を置く。線を増やすと表と競合して画面がうるさくなる。
   --------------------------------------------------------------------------- */

.entry-content h2 {
  position: relative;
  margin: 2.6em 0 1em;
  padding: 0 0 0 0.7em;
  border: 0;
  background: none;
  font-size: 1.35em;
  line-height: 1.55;
  font-weight: 700;
  color: var(--car-ink);
}

.entry-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  bottom: 0.22em;
  width: 5px;
  border-radius: 999px;
  background: var(--car-green);
}

.entry-content h3 {
  margin: 2.1em 0 0.8em;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.13em;
  font-weight: 700;
  color: var(--car-green-dark);
}

.entry-content h4 {
  margin: 1.7em 0 0.6em;
  font-size: 1.02em;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   3. リンク
   --------------------------------------------------------------------------- */

.entry-content a {
  color: var(--car-green);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.entry-content a:hover,
.entry-content a:focus-visible {
  color: var(--car-green-dark);
}

/* 外部の一次情報（法令・公的統計）へのリンクは本文中に裸のURLで置かれることがある。
   長いURLで行が壊れないようにする。 */
.entry-content a[href^="http"] {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   4. 表（比較・条件の一覧）
   このサイトの主役。横スクロールできること、見出し行が分かることを最優先にする。
   --------------------------------------------------------------------------- */

.entry-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.8em 0;
  font-size: 0.96em;
  background: var(--car-surface);
  border: 1px solid var(--car-border);
  border-radius: var(--car-radius);
  overflow: hidden;
}

.entry-content th,
.entry-content td {
  padding: 0.75em 0.9em;
  border: 0;
  border-bottom: 1px solid var(--car-border);
  text-align: left;
  vertical-align: top;
}

.entry-content thead th {
  background: var(--car-mint);
  color: var(--car-ink);
  font-weight: 700;
  white-space: nowrap;
}

.entry-content tbody tr:last-child th,
.entry-content tbody tr:last-child td {
  border-bottom: 0;
}

/* 幅が足りないときは表だけ横スクロールさせる。**ページ全体は横に動かさない。** */
.entry-content .scrollable-table,
.entry-content figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* キーボードでもスクロールできることが分かるように、フォーカスを見せる。 */
.entry-content figure.wp-block-table:focus-visible {
  outline: 2px solid var(--car-green);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   5. チェックリストについて（2026-08-10 の実測メモ）

   Markdownの `- [ ]`（タスクリスト構文）は **このサイトでは使えない。**
   `publish.py` の変換は `tables` と `fenced_code` しか有効にしておらず、
   python-markdown 本体にタスクリスト拡張が無いため、本番では `[ ]` が
   **文字としてそのまま出る**（実測。記事1本で発生し、通常の箇条書きへ直した）。

   チェックボックスを本当に出すなら `pymdownx.tasklist` を依存に足す判断が要る。
   それまでは通常の箇条書きで書く。ここにCSSだけ置いても描画されないので置かない
   （QA CAR-033 が構文の混入を止める）。
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   6. 箇条書き・引用
   --------------------------------------------------------------------------- */

.entry-content ul li,
.entry-content ol li {
  margin-bottom: 0.5em;
  line-height: 1.8;
}

.entry-content blockquote {
  margin: 1.8em 0;
  padding: 1em 1.2em;
  border: 0;
  border-left: 4px solid var(--car-green);
  border-radius: 0 var(--car-radius) var(--car-radius) 0;
  background: var(--car-mint);
  color: var(--car-ink);
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   7. AUTOブロック（レンダラが出す定型）
   `car-disclosure` 広告表示 ／ `car-updated` 確認日 ／ `car-sources` 出典
   --------------------------------------------------------------------------- */

.car-disclosure {
  margin: 0 0 1.8em;
  padding: 0.6em 0.9em;
  background: var(--car-mint);
  border-radius: var(--car-radius);
  color: var(--car-muted);
  font-size: 0.88em;
  line-height: 1.7;
}

.car-updated {
  margin: 2.4em 0 0;
  padding-top: 1em;
  border-top: 1px solid var(--car-border);
  color: var(--car-muted);
  font-size: 0.86em;
}

.car-sources {
  margin: 1.6em 0;
  padding: 1em 1.2em 1em 2.4em;
  background: var(--car-surface);
  border: 1px solid var(--car-border);
  border-radius: var(--car-radius);
  font-size: 0.92em;
}

.car-sources li {
  margin-bottom: 0.5em;
  line-height: 1.75;
}

.car-sources li:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   8. 記事一覧のカード
   --------------------------------------------------------------------------- */

.entry-card-wrap {
  border: 1px solid var(--car-border);
  border-radius: var(--car-radius-lg);
  background: var(--car-surface);
  transition: border-color .15s ease;
}

.entry-card-wrap:hover {
  border-color: var(--car-green);
}

.entry-card-title,
.related-entry-card-title {
  color: var(--car-ink);
  font-weight: 700;
  line-height: 1.6;
}

.entry-card-snippet,
.related-entry-card-snippet {
  color: var(--car-muted);
  line-height: 1.75;
}

/* カテゴリのラベル。緑地に白抜き（5.0:1）。 */
.cat-label {
  background: var(--car-green);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 0.78em;
  padding: 0.15em 0.8em;
}

/* ---------------------------------------------------------------------------
   9. ヘッダー・フッター
   --------------------------------------------------------------------------- */

.header,
#header,
.header-container {
  background: var(--car-surface);
  border-bottom: 1px solid var(--car-border);
}

.navi-in > ul > li > a {
  color: var(--car-ink);
  font-weight: 700;
}

.navi-in > ul > li > a:hover {
  background: var(--car-mint);
  color: var(--car-green-dark);
}

/* 現在地は色だけで示さず、下の帯でも示す（色覚に依存させない）。 */
.navi-in > ul > li.current-menu-item > a {
  color: var(--car-green-dark);
  box-shadow: inset 0 -3px 0 var(--car-gold);
}

.footer,
#footer,
.footer-bottom {
  background: var(--car-ink);
  color: #e8efed;
}

.footer a,
.footer-bottom a {
  color: #e8efed;
}

.footer a:hover,
.footer-bottom a:hover {
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   10. サイドバー
   --------------------------------------------------------------------------- */

.sidebar h3,
.sidebar .widget-sidebar-title {
  background: none;
  border: 0;
  border-left: 4px solid var(--car-green);
  border-radius: 0;
  padding: 0 0 0 0.6em;
  color: var(--car-ink);
  font-size: 1.02em;
  font-weight: 700;
}

.tagcloud a {
  border: 1px solid var(--car-border);
  border-radius: 999px;
  background: var(--car-surface);
  color: var(--car-muted);
  font-size: 0.84em !important;
  padding: 0.2em 0.8em;
}

.tagcloud a:hover {
  border-color: var(--car-green);
  color: var(--car-green-dark);
}

/* ---------------------------------------------------------------------------
   11. 表示しないもの
   所要時間・投稿者名は判断の材料にならないので出さない。
   確認日は記事末の `car-updated` に一本化する（複数箇所に日付を散らさない）。
   --------------------------------------------------------------------------- */

.author-info,
.entry-card-meta .post-author,
.date-tags .post-update {
  display: none;
}

/* ---------------------------------------------------------------------------
   12. モバイル
   375px で横スクロールが出ないことを実測して確定する（実測しないと必ず出る）。
   --------------------------------------------------------------------------- */

@media (max-width: 834px) {
  body,
  body.body {
    font-size: 16px;
  }

  .entry-content h2 {
    font-size: 1.24em;
    margin-top: 2.2em;
  }

  .entry-content {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .entry-content table {
    font-size: 0.9em;
  }

  .entry-content th,
  .entry-content td {
    padding: 0.6em 0.7em;
  }

  .car-sources {
    padding: 0.9em 1em 0.9em 2.1em;
  }
}

/* 画像は必ず枠内に収める（横はみ出しの最頻出原因）。 */
.entry-content img,
.entry-content iframe,
.entry-content video {
  max-width: 100%;
  height: auto;
}