/* じむデビュー（2サイト目）の見た目。node scripts/build.mjs --site jimu-debut のときだけ読む。
   出発点は路線A「平たい絵」（static/theme-a.css を写して .theme-a を .theme-jimu-debut に替えたもの）。
   色は明るい黄色を主役に、水色を差し色にする（仮・planning/jimu-debut/kari-kime.md K-02）。仕上げは 07。
   絵は static/img/jimu-debut/（04 で Codex が描く）。 */

.theme-jimu-debut {
  --desk: #FFF1B8;
  --desk-deep: #F5D96B;
  --surface: #FFF9E0;
  --paper: #FFFDF6;
  --accent: #0A6FA8;
  --note-b: #BFE6FA;
}

.theme-img { display: block; width: 100%; height: auto; }

/* トップの最初の画面の絵 */
.hero-art.theme-img { max-width: 16rem; border-radius: var(--radius-box); }
@media (min-width: 840px) {
  .hero-art.theme-img { max-width: 28rem; }
}

/* 柱のカード：小さいアイコンの代わりに絵（角は小さく・カードの内側に置く） */
.pillar-photo { display: block; margin-bottom: 12px; }
.pillar-photo .theme-img { aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-note); }

/* 記事の頭・ページの頭の絵（枠の板は付けない＝絵に地の色があるため） */
.article-head .head-art--photo { aspect-ratio: auto; padding: 0; background: none; border-radius: var(--radius-box); }
.page-head .theme-img.head-art { border-radius: var(--radius-toc); }

/* LINE の帯の絵 */
.cta-art.theme-img { border-radius: var(--radius-toc); }

/* 狭い画面でも記事の頭に絵を出す */
.article-head .head-art--photo { display: block; width: 100%; max-width: none; }
@media (min-width: 960px) {
  .article-head .head-art--photo { max-width: var(--side-col); }
}

/* 広い画面では絵のカードを4枚横に並べる（2列だと絵が大きすぎる） */
@media (min-width: 960px) {
  .theme-jimu-debut .pillar-cards { grid-template-columns: repeat(4, 1fr); }
  .theme-jimu-debut .pillar-card .pillar-link { font-size: var(--fs-body); }
}

/* カードを白い紙に（色の板の中に水色の絵の板が入る二重の枠は幼く見えるため）。柱の色は本数の札にだけ残す */
.theme-jimu-debut .pillar-card { background: var(--white); box-shadow: var(--shadow-1); }
.theme-jimu-debut .pillar-card .pillar-count { background: var(--tone); }

/* ---------- 自分で見た細部（2026-10-22 6:37） ---------- */
/* 1〜3. 絵の周りの四角い地の色（薄い青・白）を、机の青の背景になじませる（重ねて暗くなる合成だけ・半透明は使わない） */
.theme-jimu-debut .hero-art.theme-img, .theme-jimu-debut .page-head .theme-img.head-art, .theme-jimu-debut .cta-art.theme-img { mix-blend-mode: multiply; border-radius: 0; }
/* 4. カードに指を置くと、絵がわずかに大きくなる（枠の中で） */
.theme-jimu-debut .pillar-photo { overflow: hidden; border-radius: var(--radius-note); }
.theme-jimu-debut .pillar-photo .theme-img { transition: transform var(--dur); }
.theme-jimu-debut .pillar-card:hover .pillar-photo .theme-img { transform: scale(1.03); }
/* 5. カードの説明文は小さく薄い墨で（題との段差をはっきり） */
.theme-jimu-debut .pillar-card p:not(.pillar-count) { color: var(--ink-soft); font-size: var(--fs-small); }
/* トップの絵は合成すると地の四角が濃く浮いたので（6:41 写真で確認）、合成をやめて角丸の額のように見せる */
.theme-jimu-debut .hero-art.theme-img { mix-blend-mode: normal; border-radius: var(--radius-box); box-shadow: var(--shadow-ring); }

/* トップの区切りの見出しに上の濃い線（路線Bで効いた形を、路線Aにも） */
.theme-jimu-debut .home-block .block-title { padding-top: var(--space-2); border-top: 2px solid var(--ink); font-size: var(--fs-h3); letter-spacing: 0.06em; }

/* ---------- プロの記事ページ10件の実測（docs/design-hikidashi.md の 5）を反映 ---------- */
/* h2 は左の小さな帯をやめ、横いっぱいの下の線（柱の色・3px）。マイナビ転職・type の作り */
.theme-jimu-debut .article-body h2 { padding-left: 0; padding-bottom: var(--space-1); border-bottom: 3px solid var(--tone, var(--note-y)); }
.theme-jimu-debut .article-body h2::before { display: none; }
/* 記事の頭の絵と図の角を小さく（プロの記事の画像はほぼ四角） */
.theme-jimu-debut .article-head .head-art--photo, .theme-jimu-debut .figure { border-radius: var(--radius-note); }

/* ---------- 採点（7.0点・内訳つき）の路線Aの5つ ---------- */
/* A1. 浮いた白い箱をやめる（LINE の箱・もくじ）。要点の箱は「薄い色の面＋上の線」 */
.theme-jimu-debut .line-box { padding: var(--space-3) 0 0; background: none; box-shadow: none; border-top: 1px solid var(--desk-deep); border-radius: 0; }
.theme-jimu-debut .toc { padding: 12px 0 0; background: none; box-shadow: none; border-radius: 0; border-top: 2px solid var(--ink); }
.theme-jimu-debut .summary { border-radius: var(--radius-note); box-shadow: none; border-top: 4px solid var(--note-y-fold); }
/* A2. h2 の線を見える色に（黄色は白い地で読めない）。柱の色は題の上の札に残す */
.theme-jimu-debut .article-body h2 { border-bottom: 3px solid var(--accent); }
/* A3. トップのカード：本数の札を出さない・影を細い枠に・説明を細切れに折らない・一覧へのボタンをはっきり */
.theme-jimu-debut .pillar-card .pillar-count { display: none; }
.theme-jimu-debut .pillar-card { box-shadow: var(--shadow-ring); }
.theme-jimu-debut .pillar-card:hover { box-shadow: var(--shadow-1); }
.theme-jimu-debut .pillar-card p:not(.pillar-count) { word-break: normal; text-wrap: wrap; }
.theme-jimu-debut .more a { background: var(--ink); color: var(--white); box-shadow: none; }
/* A4. 一覧の札：スマホでは小さい絵を外して文字が1行に収まる幅に。柱の区切りの絵は小さく */
.theme-jimu-debut .pillar-nav { display: flex; flex-wrap: wrap; }
.theme-jimu-debut .pillar-nav .chip-icon { display: none; }
.theme-jimu-debut .pillar-nav a { padding: 4px 16px; }
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-nav .chip-icon { display: block; }
  .theme-jimu-debut .pillar-nav a { padding: 4px 16px 4px 8px; }
}
.theme-jimu-debut .group-icon { width: 40px; height: 40px; border-radius: var(--radius-note); }
/* A5. スマホの記事の頭の絵を横長に切る（本文の始まりを早く） */
.theme-jimu-debut .article-head .head-art--photo { aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 960px) {
  .theme-jimu-debut .article-head .head-art--photo { aspect-ratio: auto; }
}
/* トップの塗りの LINE は最初の画面の1つだけ。下の帯のボタンは枠のボタンに（路線Bと同じ） */
.theme-jimu-debut .hero ~ .cta-band .cta-button { background: var(--white); color: var(--cta); border: 2px solid var(--cta); box-shadow: none; }
.theme-jimu-debut .hero ~ .cta-band .cta-button:hover { background: var(--cta); color: var(--white); }

/* ---------- 採点（7.3点・2回目）の路線Aの4つ ---------- */
:root {
  /* 帯の色を水色から明るい灰色に（水色の絵の地が「額に入れた絵」として映えるように・8:29 採点） */
  --desk: #F0F3F6;
  --desk-deep: #D9E0E7;
  /* 要点の面（帯より一段濃い灰色）と、図の付箋の色を一段淡くした値（元の色に白を 35% 混ぜた・仮） */
  --panel: #E9EEF2;
  --panel-soft: #F1F4F7;
  /* 記事ごとの絵の地：柱の色に白を約75%混ぜた値（仮・17回目の採点役の値） */
  --art-y: #FFF6D9; --art-y-deep: #FAEBBE;
  --art-g: #E6F5EC; --art-g-deep: #C8E5D4;
  --art-p: #FDEBEB; --art-p-deep: #F1CDCD;
  --art-o: #FFF0DE; --art-o-deep: #F3D7B5;
  --fig-y: #FFECA9;
  --fig-p: #FFE0E0;
  --fig-g: #D9F2E4;
  --fig-b: #DDEDF9;
  --fig-o: #FFE6C6;
  /* 柱の色の点（白い札の前に付ける小さな丸・仮の値） */
  --dot-y: #D9A400;
  --dot-g: #2E9E6A;
  --dot-p: #D9534F;
  --dot-o: #E07B1F;
}
/* 1. トップの「箱の中に箱」をやめる（テーマのカード4枚と、おすすめ記事） */
.theme-jimu-debut .pillar-card, .theme-jimu-debut .pillar-card:hover { padding: 0; background: none; box-shadow: none; transform: none; }
.theme-jimu-debut .pillar-photo { margin-bottom: 12px; border-radius: var(--radius-box); }
.theme-jimu-debut .featured-card, .theme-jimu-debut .featured-card:hover { padding: 0; background: none; box-shadow: none; }
.theme-jimu-debut .featured-art { border-radius: var(--radius-box); }
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-card { padding: 0; }
}
/* 2. 色を塗った札をやめ、白い札に色の点 */
.theme-jimu-debut .pillar-1 { --tone-deep: var(--dot-y); }
.theme-jimu-debut .pillar-2 { --tone-deep: var(--dot-g); }
.theme-jimu-debut .pillar-3 { --tone-deep: var(--dot-p); }
.theme-jimu-debut .pillar-4 { --tone-deep: var(--dot-o); }
.theme-jimu-debut .article-tag, .theme-jimu-debut .pillar-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 12px 0 var(--space-1); background: var(--white); box-shadow: var(--shadow-ring); }
.theme-jimu-debut .article-tag::before, .theme-jimu-debut .pillar-tag::before { content: ""; width: 8px; height: 8px; background: var(--tone-deep, var(--ink-soft)); border-radius: var(--radius-button); }
/* 3. 記事の線を2種類に絞る（要点は薄い黄の面だけ・もくじは墨の 1px）。途中の LINE は枠のボタン。図は題と注記も真ん中に */
.theme-jimu-debut .summary { border-top: 0; }
.theme-jimu-debut .toc { border-top: 1px solid var(--ink); }
.theme-jimu-debut .cta-compact { padding: 0; border: 0; }
.theme-jimu-debut .cta-compact > a { display: inline-flex; align-items: center; min-height: 48px; padding: 4px var(--space-4); color: var(--cta); text-decoration: none; background: var(--white); border: 2px solid var(--cta); border-radius: var(--radius-button); }
.theme-jimu-debut .cta-compact > a:hover { background: var(--cta); color: var(--white); }
.theme-jimu-debut .cta-compact .cta-note { margin-top: 12px; }
/* 4. 一覧の区切りの見出しをそろえ、間を詰める。スマホの記事の頭の絵は切りすぎない */
.theme-jimu-debut .group-head { align-items: flex-start; }
.theme-jimu-debut .group-icon { border-radius: var(--radius-toc); }
.theme-jimu-debut .pillar-group { margin-bottom: 48px; }
.theme-jimu-debut .article-head .head-art--photo { aspect-ratio: 16 / 10; object-position: 50% 70%; }
@media (min-width: 960px) {
  .theme-jimu-debut .article-head .head-art--photo { aspect-ratio: auto; }
}
/* 運営会社のもくじのずれ（路線Bと同じ直し） */
.theme-jimu-debut .page-cols > .toc { display: none; }
@media (min-width: 960px) {
  .theme-jimu-debut .page-cols > .toc { display: block; margin-top: 0; }
}

/* ---------- 採点（7.4点・3回目）の路線Aの直し ---------- */
/* A2. 一覧の区切りの中ではテーマの札を出さない（見出しと同じことの繰り返し・スマホで2行に割れる） */
.theme-jimu-debut .pillar-group .article-tag { display: none; }
/* A3. スマホでは LINE の帯の小さな絵を出さない */
.theme-jimu-debut .cta-art.theme-img { display: none; }
@media (min-width: 840px) {
  .theme-jimu-debut .cta-art.theme-img { display: block; }
}
/* A4. 運営会社の見出しは細い線に（紺の 3px が5本並ぶと重い） */
.theme-jimu-debut .page-about .article-body h2 { padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* ---------- 採点（7.5点・4回目）の路線Aの直し ---------- */
/* A1. 要点の黄色い面を静かに（薄い灰色の面）。図は白い面＋細い枠に入れ替え、面の色を2種類にしない */
.theme-jimu-debut .summary { background: var(--surface); border-radius: var(--radius-note); }
.theme-jimu-debut .figure { background: var(--white); box-shadow: var(--shadow-ring); border-radius: var(--radius-note); }
/* A2. 一覧の見出しをトップと同じ「上の濃い線」に。色の札の絵はやめる */
.theme-jimu-debut .group-icon, .theme-jimu-debut .pillar-nav .chip-icon { display: none; }
.theme-jimu-debut .group-head { padding: 12px 0 0; border-top: 2px solid var(--ink); border-bottom: 0; }
.theme-jimu-debut .pillar-nav a { padding: 4px 16px; }
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-nav .chip-icon { display: none; }
  .theme-jimu-debut .pillar-nav a { padding: 4px 16px; }
}
/* A3. 約束の帯のチェックを落ち着いた色に。おすすめ記事を主役に（題を大きく・絵を広く） */
.theme-jimu-debut .promise-list li::before { border-color: var(--ink-soft); }
.theme-jimu-debut .featured-link { font-size: var(--fs-h2); line-height: 1.45; }
.theme-jimu-debut .featured-desc { font-size: var(--fs-body); line-height: 1.8; }
@media (min-width: 840px) {
  .theme-jimu-debut .featured-card { grid-template-columns: 7fr 5fr; gap: var(--space-5); }
}

/* ---------- 採点（7.6点・5回目）の路線Aの直し ---------- */
/* A1. 約束の帯を最初の画面の青に含める */
.theme-jimu-debut .promise { background: var(--desk); border-top: 1px solid var(--desk-deep); border-bottom: 0; }
/* A2. 新しい記事の見出しの濃い線の下に、薄い線を重ねない */
.theme-jimu-debut .home-latest .article-list { margin-top: 0; border-top: 0; }
/* A3. 記事一覧の近道の札を2列×2段に（3つと1つに割れない） */
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-nav { display: grid; grid-template-columns: repeat(2, max-content); }
}
/* A4. 要点のチェックを紺に（緑だと下の LINE のボタンとつながって宣伝の塊に見える） */
.theme-jimu-debut .summary li::before { border-color: var(--accent); }

/* ---------- 採点（7.7点・6回目）の路線Aの直し ---------- */
/* 近道の札の文字を真ん中に（2列にしたら札の右が空いた） */
.theme-jimu-debut .pillar-nav a { justify-content: center; }
/* A2. 図の箱の中身を左にそろえる（路線Bで5本×3つの幅でずれ 0.0px を確かめた作り） */
.theme-jimu-debut .figure .figure-title, .theme-jimu-debut .figure figcaption { margin-left: 0; margin-right: 0; }
.theme-jimu-debut .figure .figure-art { margin-left: 0; translate: -5.5556% 0; }
@media (min-width: 640px) {
  .theme-jimu-debut .figure-art, .theme-jimu-debut .figure .figure-title, .theme-jimu-debut .figure figcaption { max-width: 24rem; }
  .theme-jimu-debut .figure .figure-art { margin-left: 0; }
}
/* 記事の頭の絵は記事ごとの SVG にした（一覧と同じ絵）。広い画面の右の欄の幅に */
.theme-jimu-debut .article-head .head-art--eye { border-radius: var(--radius-note); }

/* ---------- 採点（7.7点・7回目）の路線Aの直し ---------- */
/* 図の箱を中身の幅まで縮める（左にそろえたら箱の右半分が空いた） */
@media (min-width: 640px) {
  .theme-jimu-debut .figure { max-width: calc(24rem + 48px); }
}
/* スマホのテーマのカードの段の間を広げる（題が下の段の絵に近く見えた） */
.theme-jimu-debut .pillar-cards { row-gap: var(--space-4); }
/* 下の LINE の帯の絵は合成をやめ、額の見せ方に（四角い地の色が浮いた） */
.theme-jimu-debut .cta-art.theme-img { mix-blend-mode: normal; border-radius: var(--radius-box); box-shadow: var(--shadow-ring); }

/* ---------- 採点（7.7点・8回目）の路線Aの直し ---------- */
/* A1. スマホのトップの絵を横いっぱいに（真ん中に小さく浮いて、左そろえの軸からずれた） */
.theme-jimu-debut .hero-art.theme-img { max-width: none; }
@media (min-width: 640px) {
  .theme-jimu-debut .hero-art.theme-img { max-width: 28rem; }
}
/* A2. 運営会社の最初の文：文の区切りで折り、行の長さをそろえる */
.theme-jimu-debut .page-about .page-body > p:first-child { word-break: auto-phrase; text-wrap: balance; }
/* A3. ボタンに「›」の印（路線Bで効いた形） */
.theme-jimu-debut .more a::after, .theme-jimu-debut .cta-button::after, .theme-jimu-debut .cta-compact > a::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-left: 12px;
  border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg);
}

/* ---------- 採点（9回目）の直し：言葉の途中で折れる所 ---------- */
.theme-jimu-debut .featured-link { word-break: auto-phrase; text-wrap: balance; }
.theme-jimu-debut .cta-note { word-break: auto-phrase; text-wrap: pretty; }
/* スマホのテーマのカードの題を1行に収める（2列のカードの幅 約165px に 15px で10字まで） */
.theme-jimu-debut .pillar-link { font-size: var(--fs-ui); }
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-link { font-size: var(--fs-lead); }
}
/* 運営会社の最初の文：行の長さをそろえるのは広い画面だけ（スマホでは行が細くなりすぎた） */
.theme-jimu-debut .page-about .page-body > p:first-child { word-break: normal; text-wrap: pretty; }
@media (min-width: 640px) {
  .theme-jimu-debut .page-about .page-body > p:first-child { word-break: auto-phrase; text-wrap: balance; }
}
.theme-jimu-debut .page-head .lead { word-break: auto-phrase; text-wrap: balance; }

/* ---------- 採点（7.9点・10回目）の路線Aの直し ---------- */
:root { --radius-flat: 0; }
/* A1. 図の箱を本文の幅いっぱいにし、中身（題・図・注記）は真ん中の1本の列に */
@media (min-width: 640px) {
  .theme-jimu-debut .figure { max-width: var(--measure); }
  .theme-jimu-debut .figure .figure-art, .theme-jimu-debut .figure .figure-title, .theme-jimu-debut .figure figcaption { margin-left: auto; margin-right: auto; }
}
/* A2. スマホでは要点の箱を画面の端まで広げる（1行 16 字 → 18 字） */
.theme-jimu-debut .summary { margin-left: -16px; margin-right: -16px; padding: 24px 16px; border-radius: var(--radius-flat); }
@media (min-width: 640px) {
  .theme-jimu-debut .summary { margin-left: 0; margin-right: 0; padding: 32px 24px; border-radius: var(--radius-note); }
}
/* A3. 運営会社の最初の文（路線Bと同じ） */
.theme-jimu-debut .page-about .page-body > p:first-child { letter-spacing: 0; }
@media (min-width: 640px) {
  .theme-jimu-debut .page-about .page-body > p:first-child { letter-spacing: 0.02em; }
}
/* スマホの一覧では途中で切れる説明文を出さない／ページの頭の絵の縦の線を下のもくじにそろえる */
.theme-jimu-debut .pillar-group .article-desc { display: none; }
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-group .article-desc { display: -webkit-box; }
}
@media (min-width: 960px) {
  .theme-jimu-debut .page-head .head-grid { grid-template-columns: minmax(0, var(--measure)) var(--side-col); column-gap: var(--space-5); }
  .theme-jimu-debut .page-head .head-art { justify-self: end; }
}

/* ---------- 採点（8.0点・11回目）の路線Aの直し ---------- */
/* A1. スマホのトップは「文字 → LINE → 絵」の順に（塗りの LINE ボタンを最初の画面に入れる） */
.theme-jimu-debut .hero-grid { grid-template-areas: "text" "box" "art"; }
@media (min-width: 840px) {
  .theme-jimu-debut .hero-grid { grid-template-areas: "text art" "box art"; }
}
/* A2. 角の丸みを 4px に一本化（トップだけアプリのタイルに見えた） */
.theme-jimu-debut .hero-art.theme-img, .theme-jimu-debut .pillar-photo,
.theme-jimu-debut .featured-art, .theme-jimu-debut .cta-art.theme-img { border-radius: var(--radius-note); }
/* A3. カードの説明文は詰めて折るが、折る場所は言葉の区切り */
@supports (word-break: auto-phrase) {
  .theme-jimu-debut .pillar-card p:not(.pillar-count) { word-break: auto-phrase; text-wrap: pretty; }
}
@supports not (word-break: auto-phrase) {
  .theme-jimu-debut .pillar-card p:not(.pillar-count) { word-break: keep-all; overflow-wrap: anywhere; }
}

/* ---------- 採点（8.02点・12回目）の路線Aの直し ---------- */
/* A1. 運営会社のページの間を詰め、見出しの線を見えるように */
.theme-jimu-debut .page-about .article-cols.page-cols { padding-top: var(--space-4); }
.theme-jimu-debut .page-about .article-body h2 { margin-top: var(--space-5); border-bottom-color: var(--desk-deep); }
/* A2. スマホの記事一覧の近道の札を、同じ幅の2列×2段に */
.theme-jimu-debut .pillar-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-jimu-debut .pillar-nav a { padding: 4px 8px; }
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-nav { grid-template-columns: repeat(2, max-content); }
  .theme-jimu-debut .pillar-nav a { padding: 4px 16px; }
}
/* A3. 広い画面の記事一覧で、絵と題を一段大きく（路線Bで効いた大きさ） */
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-group .article-thumb--eye { width: 192px; height: 120px; }
  .theme-jimu-debut .pillar-group .article-link { font-size: var(--fs-h3); }
}
.theme-jimu-debut .pillar-nav a { letter-spacing: 0; } /* 幅 360 の端末でも「求人票と条件の読み方」が1行に収まるように */
.theme-jimu-debut .pillar-nav a { padding: 4px; }
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-nav a { padding: 4px 16px; }
}

/* ---------- 採点（8.10点・13回目）の路線Aの直し ---------- */
/* A1 の続き：帯を灰色にすると運営会社の見出しの線が表の線と見分けにくくなるので、見出しの線を濃く */
.theme-jimu-debut .page-about .article-body h2 { border-bottom-color: var(--ink-soft); }
/* A2. 広い画面のトップの絵を大きく（文字 6：絵 6）。注意書きのリンクは1行に分ける */
@media (min-width: 840px) {
  .theme-jimu-debut .hero-grid { grid-template-columns: 6fr 6fr; }
}
.theme-jimu-debut .hero .cta-note a { display: block; width: fit-content; margin-top: 4px; }
/* A3. 記事の図の箱を、要点と同じ薄い灰色の面に（箱の種類を減らす） */
.theme-jimu-debut .figure { background: var(--surface); box-shadow: none; }

/* ---------- 採点（8.18点・14回目）の路線Aの直し ---------- */
/* A1. カードの説明文の下の余白をなくし、区切りの間をそろえる */
.theme-jimu-debut .pillar-card p:not(.pillar-count) { margin-bottom: 0; }
/* A2. 記事の小さい絵の角も 4px に（12px のまま残っていた） */
.theme-jimu-debut .article-thumb--eye { border-radius: var(--radius-note); }
/* A3. 広い画面の近道の札を4枚とも同じ幅に */
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-nav { grid-template-columns: repeat(2, 1fr); width: max-content; }
}
/* A4. 要点と、途中の LINE の入口の間を空ける（くっついて宣伝の塊に見えた） */
.theme-jimu-debut .summary { margin-bottom: var(--space-4); }

/* ---------- 採点（8.20点・15回目）の路線Aの直し ---------- */
/* A1. 図の箱は面をやめて上下の線だけに。中身は本文の左にそろえる（灰色の面が2つ続き、帯とも同じ色だった） */
.theme-jimu-debut .figure { padding: 32px 0; background: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--radius-flat); }
@media (min-width: 640px) {
  .theme-jimu-debut .figure { max-width: none; }
  .theme-jimu-debut .figure .figure-art, .theme-jimu-debut .figure .figure-title, .theme-jimu-debut .figure figcaption { margin-left: 0; margin-right: 0; }
}
/* A2. 図の5色を一段淡く（黄色だけが強く見えた）。図の中の箱の角も 4px に */
.theme-jimu-debut .figure-art [fill="#FFE27A"] { fill: var(--fig-y); }
.theme-jimu-debut .figure-art [fill="#FFCFCF"] { fill: var(--fig-p); }
.theme-jimu-debut .figure-art [fill="#C4EBD5"] { fill: var(--fig-g); }
.theme-jimu-debut .figure-art [fill="#CBE3F5"] { fill: var(--fig-b); }
.theme-jimu-debut .figure-art [fill="#FFD8A8"] { fill: var(--fig-o); }
.theme-jimu-debut .figure-art rect[rx="10"], .theme-jimu-debut .figure-art rect[rx="8"] { rx: 4px; }
/* A3. 要点の面を帯より一段濃い灰色に（スマホで端まで広がる要点が帯に見えた） */
.theme-jimu-debut .summary { background: var(--panel); }
/* A4. 記事の見出しの下線を 2px に（線の太さを 1px と 2px の2種類に） */
.theme-jimu-debut .article-body h2 { border-bottom-width: 2px; }

/* ---------- 採点（8.22点・16回目）の路線Aの直し ---------- */
/* A1. 図のすぐ下は必ず見出しなので、図の下の線を消す（線が2本並んで見えた。路線Bと同じ） */
.theme-jimu-debut .figure:has(+ h2) { padding-bottom: 0; border-bottom: 0; }
/* A2. 広い画面では図の注記を図の右に置き、線の間の右の空きを埋める（路線Bと同じ形） */
@media (min-width: 640px) {
  .theme-jimu-debut .figure { display: grid; grid-template-columns: 24rem minmax(0, 1fr); column-gap: var(--space-4); align-items: end; }
  .theme-jimu-debut .figure .figure-title { grid-column: 1 / -1; }
  .theme-jimu-debut .figure figcaption { max-width: none; margin-top: 0; }
}
/* A3. 広い画面の記事一覧の近道の札も、トップ・記事の札と同じ「色の点＋文字」に（スマホは幅が足りず2行に割れるので出さない） */
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-nav a { justify-content: flex-start; padding: 4px 16px; }
  .theme-jimu-debut .pillar-nav a::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--tone-deep, var(--ink-soft)); border-radius: var(--radius-button); }
}
/* A4. 広い画面の要点は隣に帯がないので一段淡く（スマホの帯との格の差はそのまま） */
@media (min-width: 640px) { .theme-jimu-debut .summary { background: var(--panel-soft); } }
/* A5. 記事ごとの絵（おすすめ・新着・記事の頭）の地を、その記事のテーマの色を淡くした色に。
   トップでテーマの4枚の水色の絵と同じ箱が11枚並んで単調だった（16回目）。灰色にしたら主役のおすすめが色の無い箱になり逆効果（17回目）だったので、テーマの色で役割を分ける */
.theme-jimu-debut .pillar-1 { --art: var(--art-y); --art-deep: var(--art-y-deep); }
.theme-jimu-debut .pillar-2 { --art: var(--art-g); --art-deep: var(--art-g-deep); }
.theme-jimu-debut .pillar-3 { --art: var(--art-p); --art-deep: var(--art-p-deep); }
.theme-jimu-debut .pillar-4 { --art: var(--art-o); --art-deep: var(--art-o-deep); }
.theme-jimu-debut :is(.pillar-1, .pillar-2, .pillar-3, .pillar-4) svg[viewBox="0 0 320 200"] > rect[width="320"][fill="#DCEBF5"] { fill: var(--art, var(--panel-soft)); }
.theme-jimu-debut :is(.pillar-1, .pillar-2, .pillar-3, .pillar-4) svg[viewBox="0 0 320 200"] > rect[width="320"][fill="#B9D3E6"] { fill: var(--art-deep, var(--desk-deep)); }
/* A6. 淡い地は紙の色との境目が弱いので、トップの絵・LINE の帯の絵と同じ細い枠で額に入れる */
.theme-jimu-debut .featured-art, .theme-jimu-debut .article-thumb--eye, .theme-jimu-debut .article-head .head-art--eye { box-shadow: var(--shadow-ring); }

/* ---------- 採点（8.28点・18回目）の路線Aの直し ---------- */
/* A1.（:root）「事務職を知る」の絵の床を淡くして、手前のファイルを床から浮かせる（#F4E3AE だとファイルとほぼ同じ明るさで塊に見えた） */
/* A2. 青いテーマのカードと、テーマの色の記事の絵をつなぐため、カードの題・一覧の区切りの見出しにも色の点（札・近道と同じ形） */
.theme-jimu-debut .group-head h2 { display: flex; align-items: center; gap: var(--space-1); }
.theme-jimu-debut .group-head h2::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--tone-deep, var(--ink-soft)); border-radius: var(--radius-button); }
@media (min-width: 640px) {
  .theme-jimu-debut .pillar-link strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: middle; background: var(--tone-deep, var(--ink-soft)); border-radius: var(--radius-button); }
}

/* ==================== じむデビューの色（仮・K-02）。上の路線A の値をこの節で上書きする ==================== */
/* 明るい黄色が主役・水色が差し色。文字の紺と押す所の緑はそのまま（読みやすさの決まり） */
:root.theme-jimu-debut {
  --desk: #FFF3C4;        /* 帯・ページの頭の地（クリームの黄） */
  --desk-deep: #F2D675;   /* 帯の区切り線・濃いめの黄 */
  --surface: #FFF9E3;
  --paper: #FFFDF7;
  --panel: #FFF0B8;       /* 要点の面 */
  --panel-soft: #FFF6D6;
  --accent: #0A6FA8;      /* リンクの水色寄りの青（白・クリームの上で 4.5:1 以上） */
  --note-b: #BFE6FA;
  --art-y: #FFF3C4; --art-y-deep: #F2D675;
  --art-g: #E3F6EC; --art-g-deep: #BFE8D2;
  --art-p: #FFE7E2; --art-p-deep: #FFC9BE;
  --art-o: #E4F4FD; --art-o-deep: #BFE6FA;
}

/* 測った不具合の直し（07・ブラウザで 360・375px を測って見つけた） */
/* 長いカタカナの社名（リクルートスタッフィング）を含む題が、句のまとまりを守る折り返しで切れず、スマホで横にはみ出した（最大 51px） */
.theme-jimu-debut .article-head h1, .theme-jimu-debut .article-head .lead, .theme-jimu-debut .article-link, .theme-jimu-debut .featured-link { overflow-wrap: anywhere; }
/* 押す所を 44px 以上に：パンくずの「トップ」（幅 42px）と、最初の画面の「個人情報の扱い」（高さ 24px） */
.theme-jimu-debut .breadcrumb a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.theme-jimu-debut .hero .cta-note a { display: inline-flex; align-items: center; min-height: 44px; }

/* ==================== 採点1回目（6.2点・11:36）の直し ==================== */
/* 1. 運営会社の頭の絵：注記つきの枠に決まりが無く、スマホで注記が本文に重なっていた（路線B の決まりから抜けていた分） */
.theme-jimu-debut .theme-figure { margin: 0; }
.theme-jimu-debut .theme-figure figcaption { margin-top: 4px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; letter-spacing: 0; }
.theme-jimu-debut .page-about .page-head .theme-figure { display: none; }
.theme-jimu-debut .page-about .page-head h1 { padding-right: 0; }
@media (min-width: 840px) {
  .theme-jimu-debut .page-about .page-head .theme-figure { display: block; max-width: 12rem; justify-self: end; }
}
/* 2. テーマの色の点を、絵の丸の色（黄・水色・ミント・コーラル）にそろえる */
.theme-jimu-debut .pillar-1 { --tone-deep: #D9A400; }
.theme-jimu-debut .pillar-2 { --tone-deep: #2A9BD8; }
.theme-jimu-debut .pillar-3 { --tone-deep: #2E9E6A; }
.theme-jimu-debut .pillar-4 { --tone-deep: #E8674F; }
/* 3. 地を白に（黄みの白が3段重なって境目がぼやけていた）・罫線を暖かい灰色に */
:root.theme-jimu-debut { --paper: #FFFFFF; --surface: #FFF8DE; --line: #EAE4D3; }
/* 4. PC の最初の画面を締める（上下の余白を詰め、紹介文の幅を広げる） */
@media (min-width: 840px) {
  .theme-jimu-debut .hero-grid { padding-top: var(--space-5); padding-bottom: var(--space-5); row-gap: var(--space-3); }
  .theme-jimu-debut .hero .lead { font-size: var(--fs-lead); line-height: 1.9; text-wrap: pretty; max-width: 28em; }
}
/* 5. スマホの「新しい記事」を詰める（札と日付が2段に割れ、題が4行に折れていた） */
@media (max-width: 639px) {
  .theme-jimu-debut .home-latest .article-tag { padding: 0; background: none; box-shadow: none; font-size: 12px; }
  .theme-jimu-debut .home-latest .article-desc { display: none; }
}
/* 6. 記事の頭の絵：狭い画面では横長に切って、要点の面と色の塊が2つ並ばないように */
@media (max-width: 959px) {
  .theme-jimu-debut .article-head .head-art--photo { aspect-ratio: 16 / 9; object-fit: cover; }
}

/* ==================== 採点2回目（7.1点・11:41）の直し ==================== */
/* 1. スマホで記事の頭の絵の上（人の頭・天びん）が切れていた → 16:10 にして上寄りに切る */
@media (max-width: 959px) {
  .theme-jimu-debut .article-head .head-art--photo { aspect-ratio: 16 / 10; object-position: 50% 35%; }
}
/* 2. トップの絵の外の細い枠線と角の丸みを外す（絵の地は帯と同じ色なので、帯に溶ける） */
.theme-jimu-debut .hero-art.theme-img { box-shadow: none; border-radius: 0; }
/* 3. 最初の画面の注記で「個人情報の扱い」の行だけ間が空いた → 行の高さに影響しない形で押せる広さを保つ */
.theme-jimu-debut .hero .cta-note a { display: inline; min-height: 0; padding: 12px 0; }
/* 4. スマホの記事の行を詰める（札と日付の大きさをそろえ、題の文字を一段小さく） */
@media (max-width: 639px) {
  .theme-jimu-debut .home-latest .article-date { font-size: 12px; }
  .theme-jimu-debut .article-link { font-size: 1rem; line-height: 1.55; }
}
/* 5. 運営会社の頭の帯を詰める */
.theme-jimu-debut .page-about .page-head .head-grid { padding-top: var(--space-4); padding-bottom: var(--space-4); }
@media (min-width: 840px) {
  .theme-jimu-debut .page-about .page-head .theme-figure { max-width: 10rem; }
}
/* 6. スマホの記事で、頭の絵と要点の間が空きすぎ（約64px） */
@media (max-width: 639px) {
  .theme-jimu-debut .summary { margin-top: var(--space-2); }
}

/* ==================== 採点3回目（7.2点・11:45）の直し ==================== */
/* 1. ページの頭の絵に「重ねて暗くする合成」が残り、絵の地を帯の色にしたら黄色に黄色が掛かって濃い四角に見えた */
.theme-jimu-debut .page-head .theme-img.head-art { mix-blend-mode: normal; box-shadow: none; border-radius: 0; }
/* 2. 運営会社の頭の「イメージの絵」は断り書きを添えてまで置く得がないので、PC でも出さない */
@media (min-width: 840px) {
  .theme-jimu-debut .page-about .page-head .theme-figure { display: none; }
}
/* 3・4. スマホの記事の行：小さい絵を縮めて題の列を広げ、記事一覧の日付もトップと同じ 12px に */
@media (max-width: 639px) {
  .theme-jimu-debut .article-thumb--eye { width: 80px; height: 50px; }
  .theme-jimu-debut .pillar-group .article-date { font-size: 12px; }
}
/* 5. PC の最初の画面の上の余白と大見出しの下を詰める */
@media (min-width: 840px) {
  .theme-jimu-debut .hero-grid { padding-top: var(--space-4); }
  .theme-jimu-debut .hero h1 { margin-bottom: var(--space-2); }
}

/* ==================== トップの「はじめての人は、この順で」（採点3回目の中身の案③） ==================== */
.theme-jimu-debut .guide-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; counter-reset: none; }
.theme-jimu-debut .guide-item { position: relative; display: flex; align-items: flex-start; gap: var(--space-2); padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-note); }
.theme-jimu-debut .guide-item:has(a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; }
.theme-jimu-debut .guide-no { flex: none; display: grid; place-items: center; width: 36px; height: 36px; font-weight: 700; font-size: 1.05rem; color: var(--ink); background: var(--tone-soft, #FFE27A); border-radius: 50%; }
.theme-jimu-debut .guide-item.pillar-1 .guide-no { background: #FFE27A; }
.theme-jimu-debut .guide-item.pillar-2 .guide-no { background: #BFE6FA; }
.theme-jimu-debut .guide-item.pillar-3 .guide-no { background: #C4EBD5; }
.theme-jimu-debut .guide-item.pillar-4 .guide-no { background: #FFCFC4; }
.theme-jimu-debut .guide-text { min-width: 0; }
.theme-jimu-debut .guide-link { display: block; color: var(--ink); font-weight: 700; line-height: 1.55; text-decoration: none; overflow-wrap: anywhere; }
.theme-jimu-debut .guide-link::after { content: ""; position: absolute; inset: 0; } /* 行ぜんたいを押せる大きさにする */
.theme-jimu-debut .guide-item:hover { border-color: var(--desk-deep); }
.theme-jimu-debut .guide-item:hover .guide-link { color: var(--accent); }
.theme-jimu-debut .guide-note { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.6; }
@media (min-width: 840px) {
  .theme-jimu-debut .guide-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

/* ==================== 記事の図（じむデビュー用・本物の文字の SVG） ==================== */
/* 上の路線A の決まり（図を 24rem に絞り、注記を右に並べる）は、文字の多いこのサイトの図には小さすぎた → 本文の幅いっぱいに縦に並べる */
.theme-jimu-debut .figure { display: block; max-width: var(--measure); padding: var(--space-4) 0; }
.theme-jimu-debut .figure .figure-art { width: 100%; max-width: 30rem; margin: 0; translate: none; }
.theme-jimu-debut .figure .figure-title, .theme-jimu-debut .figure figcaption { max-width: 30rem; margin-left: 0; margin-right: 0; }
.theme-jimu-debut .figure figcaption { margin-top: var(--space-2); color: var(--ink-soft); }
.theme-jimu-debut .figure-art rect[rx="10"], .theme-jimu-debut .figure-art rect[rx="8"] { rx: 8px; }

/* ==================== 採点4回目（7.6点・11:52）の直し ==================== */
/* 1. 読む順番の段の題と説明が言葉の途中で折れていた → 句のまとまりで折る（土台の一覧に入っていなかった） */
.theme-jimu-debut .guide-link, .theme-jimu-debut .guide-note { word-break: auto-phrase; text-wrap: pretty; }
@supports not (word-break: auto-phrase) {
  .theme-jimu-debut .guide-link, .theme-jimu-debut .guide-note { word-break: keep-all; overflow-wrap: anywhere; }
}
/* 3. 段だけ白い枠の箱で浮いていた → 線で区切る行にそろえ、番号は主役の黄1色に */
.theme-jimu-debut .guide-list { gap: 0; border-top: 1px solid var(--line); }
.theme-jimu-debut .guide-item { padding: 16px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.theme-jimu-debut .guide-item:hover { border-color: var(--line); }
.theme-jimu-debut .guide-list .guide-item .guide-no { background: #FFE27A; }
@media (min-width: 840px) {
  .theme-jimu-debut .guide-list { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-5); }
}

/* ==================== 採点5回目（7.8点・11:56）の直し ==================== */
/* 1. PC の読む順番の段：上は横いっぱいの線、下は列ごとの線でちぐはぐだった → 下も1本に */
@media (min-width: 840px) {
  .theme-jimu-debut .guide-list { border-bottom: 1px solid var(--line); }
  .theme-jimu-debut .guide-item { border-bottom: 0; }
}
/* 2. 図の中の白い帯の枠線が濃く、入力欄のように見えた → 淡い暖かい灰色に（四角だけ。矢印や線は変えない） */
.theme-jimu-debut .figure-art rect[stroke="#56616C"] { stroke: #D9D1BC; }
/* 4. スマホのおすすめ記事の説明文が5行の塊になっていた → 3行で止める */
@media (max-width: 639px) {
  .theme-jimu-debut .featured-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
}

/* ==================== ポップ版（2026-10-22 14:14 決定：ポップに「あなたも事務デビュー！」） ==================== */
/* 大見出しに黄色のマーカー。行が折れてもマーカーが行ごとに付く */
.theme-jimu-debut .hero h1 { display: inline; font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.35; background: linear-gradient(transparent 52%, #FFD84D 52%, #FFD84D 96%, transparent 96%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.theme-jimu-debut .hero .lead { margin-top: var(--space-3); }
/* 押す所：ころんと丸く、下に影の段（押せる感じ） */
.theme-jimu-debut .cta-button { border-radius: 999px; box-shadow: 0 4px 0 var(--cta-deep); transition: transform .1s, box-shadow .1s; }
.theme-jimu-debut .cta-button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cta-deep); }
.theme-jimu-debut .hero ~ .cta-band .cta-button { box-shadow: 0 4px 0 var(--cta); }
/* ブロックの見出しの頭に黄色の丸 */
.theme-jimu-debut .block-title { display: flex; align-items: center; gap: 10px; }
.theme-jimu-debut .block-title::before { content: ""; flex: none; width: 14px; height: 14px; background: #FFD84D; border: 2px solid var(--ink); border-radius: 50%; }
/* 記事の行・カードの絵は角を丸く */
.theme-jimu-debut .article-thumb img, .theme-jimu-debut .featured-art, .theme-jimu-debut .pillar-photo .theme-img { border-radius: 14px; }
/* 棚（くわしく知りたい人へ）は少し控えめに */
.theme-jimu-debut .home-shelf { background: var(--surface); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.theme-jimu-debut .home-shelf .block-title::before { background: #BFE6FA; }

/* ポップな記事のページ（.article--pop） */
.theme-jimu-debut .article--pop .article-body h2 { display: inline; font-size: 1.35rem; line-height: 1.6; border: 0; background: linear-gradient(transparent 60%, #FFE27A 60%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.theme-jimu-debut .article--pop .article-body h2::after { content: ""; display: block; height: 0; }
.theme-jimu-debut .article--pop .article-body h2 + * { margin-top: var(--space-3); }
.theme-jimu-debut .article--pop .article-body > h2 { display: block; width: fit-content; max-width: 100%; margin-top: var(--space-6); padding: 0 4px; }
.theme-jimu-debut .article--pop .article-body p { line-height: 2; }
.theme-jimu-debut .article--pop .summary { background: #FFF6D6; border-radius: 16px; }
/* 参考にした資料は一番下に小さく */
.theme-jimu-debut .sources--pop { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.theme-jimu-debut .sources--pop h2 { font-size: .875rem; color: var(--ink-soft); border: 0; margin: 0 0 var(--space-2); padding: 0; }
.theme-jimu-debut .sources--pop li, .theme-jimu-debut .sources--pop a { font-size: .8125rem; color: var(--ink-soft); }

/* ==================== ポップ版 採点1回目（5.7点・16:41）の直し ==================== */
/* A. 最初の画面の「悩みから選ぶ」ボタン */
.theme-jimu-debut .chips-title { margin: var(--space-4) 0 var(--space-2); font-weight: 700; }
.theme-jimu-debut .hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.theme-jimu-debut .hero-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; color: var(--ink); font-weight: 700; text-decoration: none; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); }
.theme-jimu-debut .hero-chip:hover { background: #FFE27A; }
.theme-jimu-debut .hero-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
/* 3. トップの棚（くわしく知りたい人へ）を控えめに：白い地・絵と日付なし・小さめの文字 */
.theme-jimu-debut .home-shelf { background: var(--white); }
.theme-jimu-debut .home-shelf .article-thumb, .theme-jimu-debut .home-shelf .article-date { display: none; }
.theme-jimu-debut .home-shelf .article-item { padding: 10px 0; }
.theme-jimu-debut .home-shelf .article-link { font-size: .9375rem; font-weight: 500; }
/* 4. 区切りの見出しの黒い太線をやめて、マーカーの見出しに */
.theme-jimu-debut .home-block { border-top: 0; }
.theme-jimu-debut .home-block .block-title { border-top: 0; padding-top: 0; font-size: clamp(1.3rem, 3.4vw, 1.75rem); text-decoration: underline .38em #FFE27A; text-underline-offset: -.18em; text-decoration-skip-ink: none; }
.theme-jimu-debut .home-block > .wrap { border-top: 0; }
/* 5. ポップな記事の見出し：折れてもマーカーが崩れないよう、下線の形のマーカーに。要点の箱はスマホで端まで広げない */
.theme-jimu-debut .article--pop .article-body > h2 { width: auto; padding: 0; background: none; text-decoration: underline .42em #FFE27A; text-underline-offset: -.28em; text-decoration-skip-ink: none; }
@media (max-width: 639px) {
  .theme-jimu-debut .article--pop .summary { margin-left: 0; margin-right: 0; padding: 20px 18px; }
}
/* 6. ポップな記事は短いので、本文の前のもくじを出さず、題にもマーカー */
.theme-jimu-debut .article--pop .toc--inline { display: none; }
.theme-jimu-debut .article--pop .article-head h1 { text-decoration: underline .4em #FFE27A; text-underline-offset: -.25em; text-decoration-skip-ink: none; }
/* 8. 同じ日付が並ぶだけなので、トップの新着とおすすめでは日付を出さない */
.theme-jimu-debut .home-latest .article-date, .theme-jimu-debut .featured .article-date { display: none; }
/* C. 記事一覧で、固い記事の行は少し控えめに */
.theme-jimu-debut .article-item--detail .article-link { font-weight: 500; }
.theme-jimu-debut .article-item--detail .article-desc { display: none; }

/* ==================== ポップ版 採点2回目（7.1点・16:47）の直し ==================== */
/* 2. 記事一覧：固い記事はトップの棚と同じくらい控えめに（絵と日付を外し、1列の行に）。テーマの見出しもマーカーに */
.theme-jimu-debut .pillar-group .article-date, .theme-jimu-debut .article-item--detail .article-thumb { display: none; }
.theme-jimu-debut .pillar-group .article-item--detail { grid-template-columns: minmax(0, 1fr); padding: 10px 0; }
.theme-jimu-debut .article-item--detail .article-link { font-size: .9375rem; }
.theme-jimu-debut .article-item:not(.article-item--detail) + .article-item--detail { position: relative; margin-top: 36px; }
.theme-jimu-debut .article-item:not(.article-item--detail) + .article-item--detail::before { content: "もっとくわしく"; position: absolute; top: -26px; left: 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.theme-jimu-debut .group-head { border-top: 0; padding-top: 0; }
.theme-jimu-debut .group-head h2 { text-decoration: underline .38em #FFE27A; text-underline-offset: -.18em; text-decoration-skip-ink: none; }
.theme-jimu-debut .pillar-group { border-top: 0; }
/* 3. あわせて読みたい：札と日付を外す（スマホで3段に積み重なっていた） */
.theme-jimu-debut .related .article-date { display: none; }
@media (max-width: 639px) { .theme-jimu-debut .related .article-tag { display: none; } }
/* 4. スマホの「どれが気になる？」のボタンを小さめにして2段に */
@media (max-width: 639px) {
  .theme-jimu-debut .hero-chips { gap: 8px; }
  .theme-jimu-debut .hero-chip { padding: 6px 12px; font-size: .9375rem; border-width: 1.5px; box-shadow: 0 2px 0 var(--ink); }
}
/* 6. スマホのトップの棚を短く（札を外し、6本目からは「記事一覧で全部見る」へ） */
.theme-jimu-debut .home-shelf .article-tag { display: none; }
@media (max-width: 639px) { .theme-jimu-debut .home-shelf .article-item:nth-child(n+6) { display: none; } }

/* ==================== ポップ版 採点3回目（7.5点・16:51）の直し ==================== */
/* 1. 本文の大事な一文に黄色いマーカー（原稿の **…** ・1つの見出しに1文まで） */
.theme-jimu-debut .article--pop .article-body strong { font-weight: 700; background: linear-gradient(transparent 62%, #FFE27A 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 2. ポイントの箱（原稿の :::point 題 〜 :::）：黄色い地・左に丸い印 */
.theme-jimu-debut .point-box { position: relative; margin: var(--space-4) 0; padding: 18px 20px 18px 56px; background: #FFF6D6; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.theme-jimu-debut .point-box::before { content: "!"; position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; font-weight: 700; color: var(--ink); background: #FFD84D; border: 2px solid var(--ink); border-radius: 50%; }
.theme-jimu-debut .point-box .point-title { margin: 0 0 6px; font-weight: 700; font-size: 1.05rem; }
.theme-jimu-debut .point-box > :last-child { margin-bottom: 0; }
.theme-jimu-debut .point-box p { line-height: 1.9; }
.theme-jimu-debut .article--pop .point-box strong { background: none; }
/* 3. 「もっと見る」系のボタンを白い枠に（黒い塗りが重かった） */
.theme-jimu-debut .more a { background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.theme-jimu-debut .more a:hover { background: #FFE27A; }
.theme-jimu-debut .home-shelf .more { margin-top: var(--space-3); }
/* 4. 記事一覧の「もっとくわしく」を見落とされない大きさに */
.theme-jimu-debut .article-item:not(.article-item--detail) + .article-item--detail::before { font-size: 13px; color: var(--ink); padding: 2px 10px; background: var(--surface); border-radius: 999px; top: -30px; }

/* ==================== ポップ版 採点4回目（7.6点・16:57）の直し ==================== */
/* 2. ポイントの箱：印は「✓」、枠と影を軽く（注意書きのように見えていた） */
.theme-jimu-debut .point-box { border-width: 1.5px; box-shadow: 0 3px 0 var(--ink); }
.theme-jimu-debut .point-box::before { content: "✓"; }
/* 1. スマホでは箱の中を字下げしない（1行が約9字しか入らなかった）。印は題の左に */
@media (max-width: 639px) {
  .theme-jimu-debut .point-box { padding: 16px; }
  .theme-jimu-debut .point-box::before { left: 14px; top: 14px; width: 24px; height: 24px; font-size: 13px; }
  .theme-jimu-debut .point-box .point-title { padding-left: 34px; min-height: 26px; }
  .theme-jimu-debut .point-box ul, .theme-jimu-debut .point-box ol { padding-left: 1.25em; }
}
/* 4. 最初の画面の注意書き（LINE で預かる情報の使い道）は小さく・控えめに。文は個人情報の扱いのページと同じまま */
.theme-jimu-debut .hero .cta-note { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }

/* ==================== LINE の帯のサポートの中身（設定 ctaPoints・2026-10-22 18時台） ==================== */
.theme-jimu-debut .cta-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.theme-jimu-debut .cta-points li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.95rem; font-weight: 700; line-height: 1.5; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px; }
.theme-jimu-debut .cta-points li::before { content: "✓"; font-weight: 700; }


/* ==================== 動き（2026-10-22 夜・おまかせの磨き込み・2サイト共通の中身） ====================
   決まり：JavaScript を使わずブラウザの機能だけ。動きを減らす設定の人（prefers-reduced-motion）には一切動かさない。
   対応していないブラウザでは「動かないだけ」で、表示はそのまま（最初から見えている状態が基本）。
   土台の style.css は「動きは 160ms の色の変化だけ」の控えめな決まり（test/design.test.mjs）なので、動きは絵柄のファイルに置く。
   theme-b.css と theme-jimu-debut.css に同じ中身を置いている（直すときは両方。サイトごとに写す素材が分かれているため） */
.theme-jimu-debut { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-in: 600ms; scroll-padding-top: 72px; }
.theme-jimu-debut .site-header { position: sticky; top: 0; z-index: 30; }

@media (prefers-reduced-motion: no-preference) {
  .theme-jimu-debut { scroll-behavior: smooth; }
  /* ページを移るときに、画面をなめらかに切り替える（Chrome 126〜・Safari 18.2〜） */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 180ms ease-in both vt-out; }
  ::view-transition-new(root) { animation: 320ms var(--ease-out) both vt-in; }
  .theme-jimu-debut .site-header { view-transition-name: site-header; }

  /* 開いたとき：見出し → 一言 → ボタンの順に、少し下からふわっと */
  .theme-jimu-debut .article-head h1, .theme-jimu-debut .page-head h1 { animation: rise var(--dur-in) var(--ease-out) both; }
  .theme-jimu-debut .hero h1 .phrase { animation: rise var(--dur-in) var(--ease-out) both; }
  .theme-jimu-debut .hero h1 .phrase:nth-child(2) { animation-delay: 90ms; }
  .theme-jimu-debut .hero h1 .phrase:nth-child(3) { animation-delay: 180ms; }
  .theme-jimu-debut .hero .lead, .theme-jimu-debut .article-head .lead, .theme-jimu-debut .article-meta, .theme-jimu-debut .page-head .lead { animation: rise var(--dur-in) var(--ease-out) 120ms both; }
  .theme-jimu-debut .hero-chips, .theme-jimu-debut .line-box, .theme-jimu-debut .hero-art, .theme-jimu-debut .head-art { animation: rise var(--dur-in) var(--ease-out) 220ms both; }

  /* スクロールで、カード・図・要点の箱がそっと出てくる（画面に入るところで動き、入りきったら止まる） */
  @supports (animation-timeline: view()) {
    .theme-jimu-debut .article-item, .theme-jimu-debut .pillar-card, .theme-jimu-debut .figure, .theme-jimu-debut .summary, .theme-jimu-debut .point-box, .theme-jimu-debut .guide-link, .theme-jimu-debut .cta-band .cta-grid, .theme-jimu-debut .featured, .theme-jimu-debut .block-title {
      animation: rise-soft linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }

  /* 見出しの帯：少しスクロールしたら、うっすら影を出して浮かせる／記事を読み進めると、上に細い進み具合の線 */
  @supports (animation-timeline: scroll()) {
    .theme-jimu-debut .site-header { animation: header-lift linear both; animation-timeline: scroll(root); animation-range: 0 64px; }
    .theme-jimu-debut:has(.article) body::before {
      content: ""; position: fixed; inset: 0 0 auto 0; z-index: 40; height: 3px;
      background: var(--progress, var(--accent)); transform-origin: 0 50%;
      animation: progress linear both; animation-timeline: scroll(root);
      pointer-events: none;
    }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rise-soft { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes header-lift { to { box-shadow: var(--shadow-1); } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ==================== じむデビューだけの動き（2026-10-22 夜） ==================== */
/* 大見出しのマーカーを、言葉のまとまり（.phrase）ごとに持たせる。動きのある人には、出てきたあとに左から塗る */
.theme-jimu-debut .hero h1 { display: block; background: none; }
.theme-jimu-debut .hero h1 .phrase {
  background: linear-gradient(transparent 52%, #FFD84D 52%, #FFD84D 96%, transparent 96%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  .theme-jimu-debut .hero h1 .phrase { animation: rise var(--dur-in) var(--ease-out) both, marker 700ms var(--ease-out) both; }
  .theme-jimu-debut .hero h1 .phrase:nth-child(1) { animation-delay: 0ms, 380ms; }
  .theme-jimu-debut .hero h1 .phrase:nth-child(2) { animation-delay: 90ms, 560ms; }
  .theme-jimu-debut .hero h1 .phrase:nth-child(3) { animation-delay: 180ms, 740ms; }
}
@keyframes marker { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* ==================== Fable の講評（2026-10-22 夜・planning/brushup-2026-10-22/fable-review.md A 節）の直し ====================
   ねらい：飾りの引き算（強い印はマーカーと押せる物の硬い影の2つだけ）・黄色を4色に固定・見出しの大きさの階段・角と線の値をそろえる。
   文言を変える提案（「…」の札・LINE の文の短縮）は運営会社が決めることなので、見た目だけ直した */
.theme-jimu-debut { --header-glass: rgba(255, 255, 255, 0.84); --shine: rgba(255, 255, 255, 0.35); --y-marker: #FFD84D; --y-band: #FFF3C4; --y-face: #FFF8DE; --y-deep: #D9A400; --rule: #EAE4D3; }

/* 1. 飾りを絞る：区切りの見出しの黄色い丸をやめる／✓ の札は輪郭なしの静かな札／ポイント箱は左の黄色い帯だけ／丸番号は1色 */
.theme-jimu-debut .block-title::before, .theme-jimu-debut .home-shelf .block-title::before { content: none; }
.theme-jimu-debut .block-title { gap: 0; }
.theme-jimu-debut .cta-points li { border: 0; background: var(--y-face); padding: 6px 14px; }
.theme-jimu-debut .point-box { border: 1px solid var(--rule); border-left: 4px solid var(--y-marker); box-shadow: none; background: var(--y-face); }
.theme-jimu-debut .guide-no, .theme-jimu-debut .guide-list .guide-item .guide-no,
.theme-jimu-debut .guide-item.pillar-1 .guide-no, .theme-jimu-debut .guide-item.pillar-2 .guide-no,
.theme-jimu-debut .guide-item.pillar-3 .guide-no, .theme-jimu-debut .guide-item.pillar-4 .guide-no { background: var(--y-marker); }

/* 2・4. 黄色は4つ（マーカー・帯・面・濃い黄）。マーカーの黄は大見出し・h1・h2・区切りの見出しだけ。本文の太字は細い蛍光ペンに */
.theme-jimu-debut .article--pop .summary { background: var(--y-face); }
.theme-jimu-debut .article--pop .article-body h2 { background: linear-gradient(transparent 60%, var(--y-marker) 60%); }
.theme-jimu-debut .article--pop .article-head h1, .theme-jimu-debut .home-block .block-title { text-decoration-color: var(--y-marker); }
.theme-jimu-debut .article--pop .article-body strong { background: linear-gradient(transparent 70%, var(--y-band) 70%); }
.theme-jimu-debut .hero-chip:hover, .theme-jimu-debut .more a:hover { background: var(--y-band); }

/* 3. 見出しの階段（スマホ h1 26／h2 22／h3 18、PC h1 34／h2 24／h3 19）。本文は 17px のまま（DESIGN.md） */
.theme-jimu-debut .article-head h1 { font-size: 1.625rem; line-height: 1.45; }
.theme-jimu-debut .article--pop .article-body h2 { font-size: 1.375rem; }
.theme-jimu-debut .article-body h3 { font-size: 1.125rem; margin-top: 28px; }
@media (min-width: 840px) {
  .theme-jimu-debut .article-head h1 { font-size: 2.125rem; }
  .theme-jimu-debut .article--pop .article-body h2 { font-size: 1.5rem; }
  .theme-jimu-debut .article-body h3 { font-size: 1.1875rem; }
}

/* 17. 行間は3段（本文 1.85／箇条書き・要点・ポイント箱 1.7／小さい字 1.6） */
.theme-jimu-debut .article--pop .article-body p { line-height: 1.85; }
.theme-jimu-debut .summary li, .theme-jimu-debut .point-box li, .theme-jimu-debut .point-box p { line-height: 1.7; }
.theme-jimu-debut .cta-note, .theme-jimu-debut .article-desc, .theme-jimu-debut .guide-note { line-height: 1.6; }

/* 5. トップ PC のおすすめ記事：絵を 16:10 に、題を大きく、文字の塊を絵の下の辺にそろえる */
@media (min-width: 840px) {
  .theme-jimu-debut .featured-card { grid-template-columns: 6fr 6fr; align-items: end; }
  .theme-jimu-debut .featured-art .theme-img { aspect-ratio: 16 / 10; object-fit: cover; }
  .theme-jimu-debut .featured-text { padding-bottom: 16px; }
  .theme-jimu-debut .featured-link { font-size: 1.75rem; line-height: 1.4; }
}

/* 6. 下の LINE の帯の絵：白い額をやめて帯の地に溶かし、右上に置く */
.theme-jimu-debut .cta-art.theme-img { box-shadow: none; border-radius: 0; mix-blend-mode: normal; max-width: 16rem; align-self: start; } /* 絵の地は帯と同じ色（#FFF3C3）。multiply だと同じ色が掛け合わさって濃い四角に見えた */

/* 7. 記事の途中の LINE の入口は、本文と離して置く（場所を本文の後ろに動かす案は、文の配置の変更なので未着手） */
.theme-jimu-debut .cta-compact { margin: 40px 0; }
.theme-jimu-debut .cta-compact .cta-note { font-size: 0.8125rem; line-height: 1.6; }

/* 9. 区切りの見出しは記事の h2 より大きくしすぎない（スマホ 22／PC 26） */
.theme-jimu-debut .home-block .block-title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); }

/* 11. 固めの記事も同じサイトの作法に：h2 の下線は墨・もくじの番号は薄い墨・要点の印は濃い黄。青は押せる所だけ */
.theme-jimu-debut .article--detail .article-body h2 { border-bottom-color: var(--ink); }
.theme-jimu-debut .article--detail .toc li::before { color: var(--ink-soft); }
.theme-jimu-debut .article--detail .summary li::before { border-color: var(--y-deep); }

/* 12. スマホの表：1行目の見出しの塗りをやめ、行の見出しを上・残りの2列を下に積む（1行6字の列をなくす） */
.theme-jimu-debut th { background: none; border-bottom: 1px solid var(--ink); }
/* 積むのは3列以上の表だけ（2列の表は今までの表のまま）。見出しの行も同じ形で残し、どの列が何かを分かるようにする */
@media (max-width: 639px) {
  .theme-jimu-debut .table-wrap table:has(tr > :nth-child(3)), .theme-jimu-debut .table-wrap table:has(tr > :nth-child(3)) > :is(thead, tbody) { display: block; }
  .theme-jimu-debut .table-wrap tr:has(> :nth-child(3)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .theme-jimu-debut .table-wrap tr:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme-jimu-debut .table-wrap tr:has(> :nth-child(3)) > * { min-width: 0; border-bottom: 0; font-size: 0.875rem; }
  .theme-jimu-debut .table-wrap tr:has(> :nth-child(3)) > td:first-child { grid-column: 1 / -1; padding-bottom: 4px; font-weight: 700; }
  .theme-jimu-debut .table-wrap thead tr:has(> :nth-child(3)) { border-bottom: 1px solid var(--ink); }
  .theme-jimu-debut .table-wrap thead tr:has(> :nth-child(3)) > th:first-child { display: none; }
}

/* 13. スマホの記事の頭：前書きを少し小さく、頭の絵を横長にして、本文までの距離を縮める */
@media (max-width: 639px) {
  .theme-jimu-debut .article-head .lead { font-size: 1.0625rem; line-height: 1.75; margin-bottom: 16px; }
  .theme-jimu-debut .article-head .head-art--photo, .theme-jimu-debut .article-head .head-art--eye { aspect-ratio: 2 / 1; object-fit: cover; }
  .theme-jimu-debut .article--pop .summary { padding: 16px; }
}

/* 14. フッター：黄色を使わず白の濃淡に（黄はサイトの主役なので、署名欄では使わない） */
.theme-jimu-debut .site-footer { color: rgba(255, 255, 255, 0.85); }
.theme-jimu-debut .footer-head { color: #FFFFFF; }
.theme-jimu-debut .footer-bottom p { color: rgba(255, 255, 255, 0.5); border-top-color: rgba(255, 255, 255, 0.2); }

/* 15. 角は3段（4・16・丸い札） */
.theme-jimu-debut .article-thumb img, .theme-jimu-debut .featured-art, .theme-jimu-debut .pillar-photo .theme-img, .theme-jimu-debut .author { border-radius: 16px; }

/* 16. 押せる物の線と影をそろえる（輪郭 1.5px・硬い影 3px・押したら 2px 沈む） */
.theme-jimu-debut .hero-chip, .theme-jimu-debut .more a { border-width: 1.5px; box-shadow: 0 3px 0 var(--ink); }
.theme-jimu-debut .cta-button { box-shadow: 0 3px 0 var(--cta-deep); }
.theme-jimu-debut .hero ~ .cta-band .cta-button { box-shadow: 0 3px 0 var(--cta); }
.theme-jimu-debut .hero-chip:active, .theme-jimu-debut .more a:active, .theme-jimu-debut .cta-button:active { transform: translateY(2px); }

/* 18・25. テーマの点を見えやすく（10px・黄の点は少し濃く） */
.theme-jimu-debut .pillar-1 { --tone-deep: #C29200; }
.theme-jimu-debut .article-tag::before, .theme-jimu-debut .pillar-tag::before, .theme-jimu-debut .group-head h2::before { width: 10px; height: 10px; }
@media (max-width: 639px) { .theme-jimu-debut .pillar-link { font-size: 1rem; } }

/* 20. PC の右の欄：絵ともくじを1本の柱に・「もくじ」の字を締める */
.theme-jimu-debut .article-side .toc, .theme-jimu-debut .toc { margin-top: 24px; }
.theme-jimu-debut .toc-title { font-size: 0.875rem; letter-spacing: 0.12em; color: var(--ink); }

/* 21. 線は実線1種類 */
.theme-jimu-debut .sources--pop { border-top: 1px solid var(--rule); }

/* 24. 「もっとくわしく」の札を上の記事の線から離す */
.theme-jimu-debut .article-item:not(.article-item--detail) + .article-item--detail { margin-top: 44px; } /* 札が付く最初の1本だけ（全部に付けるとトップの棚が間延びした） */
/* 13 の続き：横長に切ると人物の頭が切れたので、切り取る位置を上寄りに（絵は人物が上半分にいる） */
@media (max-width: 639px) {
  .theme-jimu-debut .article-head .head-art--photo, .theme-jimu-debut .article-head .head-art--eye { object-position: 50% 18%; }
}

/* ==================== 今風の仕上げ（2026-10-22 夜・2サイト共通の中身・theme-b.css と theme-jimu-debut.css に同じものを置く） ==================== */
/* 見出しの帯：すりガラスのように少し透かす（対応していないブラウザは今までどおり塗りの帯） */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .theme-jimu-debut .site-header { background: var(--header-glass); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
}
/* 記事のカード：指を置いたら絵が少し寄る（題の色は土台で変わる）。押せる範囲が分かる */
.theme-jimu-debut .article-thumb { overflow: hidden; }
.theme-jimu-debut .article-thumb img { transition: transform 320ms var(--ease-out); }
/* LINE のボタン：指を置いたら光がすっと横切る */
.theme-jimu-debut .cta-button { position: relative; overflow: hidden; isolation: isolate; }
.theme-jimu-debut .cta-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, var(--shine) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .theme-jimu-debut .article-item:hover .article-thumb img, .theme-jimu-debut .pillar-card:hover .pillar-photo .theme-img { transform: scale(1.04); }
  .theme-jimu-debut .cta-button:hover::before { transform: translateX(120%); transition: transform 700ms var(--ease-out); }
}

/* Fable の講評 A-10：PC の最初の画面の絵を帯の下の辺に着地させる（机の絵が宙に浮かないように） */
@media (min-width: 840px) {
  .theme-jimu-debut .hero-grid { padding-bottom: 0; }
  .theme-jimu-debut .hero-art.theme-img { align-self: end; max-width: 32rem; }
  .theme-jimu-debut .hero-grid > .line-box { padding-bottom: var(--space-5); }
}
/* Fable の講評 A-23：「そのあとは、この順で」が 2 から始まるので、おすすめ記事に「1」の丸番号を付ける */
.theme-jimu-debut .featured-text::before {
  content: "1"; display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px;
  font-weight: 700; font-size: 1.05rem; color: var(--ink); background: var(--y-marker); border-radius: 50%;
}
/* Fable の講評 A-1 の続き：ポイント箱の ✓ の丸い枠をやめ、濃い黄の印だけに（左の帯と飾りが二重だった）。角は控えめに */
.theme-jimu-debut .point-box { border-radius: 4px 12px 12px 4px; }
.theme-jimu-debut .point-box::before { border: 0; background: none; color: var(--y-deep); font-size: 1.125rem; }
.theme-jimu-debut .article-item:not(.article-item--detail) + .article-item--detail::before { top: -34px; } /* A-24：札を上の線から離す */

/* ==================== 2回目の講評（planning/brushup-2026-10-22/review-2.md）の直し ==================== */
/* 2-1. 記事の h2 が二重のマーカーになっていた（文字に沿う線＋段の幅いっぱいの帯）。帯をやめ、文字に沿う線をマーカーの黄に */
.theme-jimu-debut .article--pop .article-body h2, .theme-jimu-debut .article--pop .article-body > h2 { background: none; text-decoration-color: var(--y-marker); }
/* A-2 の残り：黄色は4つ（変数の上書きは :root と同じ強さで） */
:root.theme-jimu-debut { --panel: var(--y-face); --desk-deep: #E6D48A; }
.theme-jimu-debut .group-head h2 { text-decoration-color: var(--y-marker); }
/* A-3 の残り：固め記事のスマホの h2 も 22px（ポップ記事とそろえる） */
.theme-jimu-debut .article--detail .article-body h2 { font-size: 1.375rem; }
@media (min-width: 840px) { .theme-jimu-debut .article--detail .article-body h2 { font-size: 1.5rem; } }
/* A-11 の残り：要点の ✓ は青（押せる所の色）をやめて濃い黄（固め・ポップとも） */
.theme-jimu-debut .summary li::before, .theme-jimu-debut .article--detail .summary li::before { border-color: var(--y-deep); color: var(--y-deep); }
/* A-16 の残り：下の帯の白いボタンの影も、塗りのボタンと同じ濃い緑に（作法を1つに） */
.theme-jimu-debut .hero ~ .cta-band .cta-button { box-shadow: 0 3px 0 var(--cta-deep); }
/* A-5・A-23：「1」の丸を札と同じ行の頭に置く（2段積みで題の上が重かった） */
.theme-jimu-debut .featured-text::before { content: none; }
.theme-jimu-debut .featured-text .article-kicker { display: flex; align-items: center; gap: 10px; }
.theme-jimu-debut .featured-text .article-kicker::before {
  content: "1"; flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  font-weight: 700; color: var(--ink); background: var(--y-marker); border-radius: 50%;
}
/* 動き：読み進めの線は濃い黄（青は押せる所の色）・ボタンは早めに出す・マーカーを短く（全体 0.9 秒） */
.theme-jimu-debut { --progress: var(--y-deep); }
@media (prefers-reduced-motion: no-preference) {
  .theme-jimu-debut .line-box { animation-delay: 120ms; animation-duration: 480ms; }
  .theme-jimu-debut .hero h1 .phrase { animation-duration: var(--dur-in), 500ms; }
  .theme-jimu-debut .hero h1 .phrase:nth-child(1) { animation-delay: 0ms, 300ms; }
  .theme-jimu-debut .hero h1 .phrase:nth-child(2) { animation-delay: 90ms, 420ms; }
  .theme-jimu-debut .hero h1 .phrase:nth-child(3) { animation-delay: 180ms, 540ms; }
}

/* ==================== 動きの直し（2回目の講評・2サイト共通の中身・theme-b.css と theme-jimu-debut.css に同じもの） ==================== */
/* ページの切り替え：見出しの帯に付けた切り替えの名前をやめる（帯が一瞬ずれた）・古い画面を早く消し、新しい画面は少し遅れて短く（二重写しをなくす） */
@media (prefers-reduced-motion: no-preference) {
  .theme-jimu-debut .site-header { view-transition-name: none; }
  ::view-transition-old(root) { animation-duration: 120ms; }
  ::view-transition-new(root) { animation-delay: 60ms; animation-duration: 240ms; }
  /* 滑らかなスクロールは、ページの中の移動（もくじ）だけ。別のページから位置つきで来たときは即座に */
  .theme-jimu-debut { scroll-behavior: auto; }
  .theme-jimu-debut:focus-within { scroll-behavior: smooth; }
  /* スクロールで出てくる：背の高い物でも 160px 見えたら出し切る・止めた位置で中途半端に残らない曲線 */
  @supports (animation-timeline: view()) {
    .theme-jimu-debut .article-item, .theme-jimu-debut .pillar-card, .theme-jimu-debut .figure, .theme-jimu-debut .summary, .theme-jimu-debut .point-box, .theme-jimu-debut .guide-link, .theme-jimu-debut .cta-band .cta-grid, .theme-jimu-debut .featured, .theme-jimu-debut .block-title {
      animation-range: entry 0% entry 160px;
      animation-timing-function: var(--ease-out);
    }
  }
}

/* スクロールしたら見出しの帯を少し低く（上下の余白 8px → 2px）。読む面積を広げる・動きを減らす設定では動かない（2サイト共通の中身） */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .theme-jimu-debut .header-inner { animation: header-shrink linear both; animation-timeline: scroll(root); animation-range: 0 64px; }
  }
}
@keyframes header-shrink { to { padding-top: 2px; padding-bottom: 2px; } }

/* 2回目の講評 A-10 の続き：PC の最初の画面の右上が大きく空いた（絵が細い列で下に着地していた）。広い画面では絵の列を広げて大きくし、上下の真ん中に */
@media (min-width: 1024px) {
  .theme-jimu-debut .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding-bottom: var(--space-5); align-items: center; }
  .theme-jimu-debut .hero-art.theme-img { align-self: center; max-width: none; width: 100%; }
  .theme-jimu-debut .hero-grid > .line-box { padding-bottom: 0; }
}

/* メニューに指を置いたら、下線が左からすっと伸びる（今いる場所の太い下線はそのまま・2サイト共通の中身） */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .theme-jimu-debut .site-nav a:not([aria-current]) { background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 8px) / 0 1.5px; transition: background-size 240ms var(--ease-out), color 160ms; }
  .theme-jimu-debut .site-nav a:not([aria-current]):hover { text-decoration-color: transparent; background-size: 100% 1.5px; }
}

/* ==================== 3回目の講評（初めての読者の目・planning/brushup-2026-10-22/review-3.md）の直し ==================== */
/* 1. 太字の蛍光ペンをやめ、黄色の帯は見出しだけに（太字は下に細い線だけ） */
.theme-jimu-debut .article--pop .article-body strong { background: linear-gradient(transparent 86%, var(--desk-deep) 86%); }
/* 2. 記事の h2 の形を1種類に（固め記事・運営会社・個人情報も、やさしい記事と同じ文字に沿う黄色の線。青はリンクの色だけ） */
.theme-jimu-debut .article--detail .article-body h2, .theme-jimu-debut .page .article-body h2, .theme-jimu-debut .page-about .article-body h2 {
  display: block; padding: 0; border: 0; background: none;
  text-decoration: underline 0.42em var(--y-marker); text-underline-offset: -0.2em; text-decoration-skip-ink: none;
}
/* 3. PC の目次が上の帯に潜らない（帯 68px＋余白 24px） */
@media (min-width: 960px) { .theme-jimu-debut .toc { top: 92px; } }
/* 4. PC の最初の画面：大見出しを少し小さく・一言の上を詰め、注意書きまで1画面に。絵は文の頭にそろえる */
@media (min-width: 1024px) {
  .theme-jimu-debut .hero h1 { font-size: 2.875rem; line-height: 1.3; }
  .theme-jimu-debut .hero .lead { margin-top: var(--space-2); }
  .theme-jimu-debut .hero-art.theme-img { align-self: start; margin-top: 40px; }
}
/* 5. スマホの記事の頭の絵を切りすぎない（2:1 → 16:10） */
@media (max-width: 639px) {
  .theme-jimu-debut .article-head .head-art--photo, .theme-jimu-debut .article-head .head-art--eye { aspect-ratio: 16 / 10; object-position: 50% 30%; }
}
/* 6. トップの最後の LINE ボタンも、ほかのページと同じ緑の塗りに（最後まで読んだ人へのひと押し） */
.theme-jimu-debut .hero ~ .cta-band .cta-button { background: var(--cta); color: var(--white); border-color: var(--cta); }
/* 7. スマホの記事の小さな絵を大きく（96×60 → 112×70） */
@media (max-width: 639px) { .theme-jimu-debut .article-thumb--eye { width: 112px; height: 70px; } }
/* 8. 絵のない文字だけの記事の行（「くわしく知りたい人へ」「もっとくわしく」）に「›」を付け、押せる行に */
.theme-jimu-debut .article-item--detail, .theme-jimu-debut .home-shelf .article-item { padding-right: 28px; min-height: 52px; align-items: center; }
.theme-jimu-debut .article-item--detail::after, .theme-jimu-debut .home-shelf .article-item::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border: solid var(--accent); border-width: 2px 2px 0 0; transform: rotate(45deg);
}
.theme-jimu-debut .article-item--detail .article-link { font-size: 1rem; }
/* 次点：注意書きの文字を 13px・行間 1.6 の1種類に */
.theme-jimu-debut .cta-note, .theme-jimu-debut .hero .cta-note, .theme-jimu-debut .cta-compact .cta-note { font-size: 0.8125rem; line-height: 1.6; }
/* 2回目・3回目の講評の続き：記事ページには article--detail の目印が無く、固め記事向けの指定が効いていなかった。「ポップではない記事」で当て直す */
.theme-jimu-debut .article:not(.article--pop) .article-body h2 {
  display: block; padding: 0; border: 0; background: none; font-size: 1.375rem;
  text-decoration: underline 0.42em var(--y-marker); text-underline-offset: -0.2em; text-decoration-skip-ink: none;
}
@media (min-width: 840px) { .theme-jimu-debut .article:not(.article--pop) .article-body h2 { font-size: 1.5rem; } }
.theme-jimu-debut .article:not(.article--pop) .toc li::before { color: var(--ink-soft); }
.theme-jimu-debut .article:not(.article--pop) .summary { background: var(--y-face); }

/* ==================== 4回目の講評（仕上げの細部・planning/brushup-2026-10-22/review-4.md）の直し ==================== */
/* 1. ポイント箱：箇条書きの文を題の文と同じ線に（点は外へぶら下げる）・角と中の余白をそろえる */
.theme-jimu-debut .point-box ul, .theme-jimu-debut .point-box ol { padding-left: 1.1em; margin-left: 0; }
.theme-jimu-debut .point-box { border-radius: 0 16px 16px 0; padding: 16px 24px 16px 56px; }
.theme-jimu-debut .point-box .point-title { margin-bottom: 8px; }
.theme-jimu-debut .point-box li:last-child { margin-bottom: 0; }
/* 2. 要点の箱は記事の種類に関係なく1つの形（角 16px・端まで伸ばさない） */
.theme-jimu-debut .summary, .theme-jimu-debut .article:not(.article--pop) .summary { border-radius: 16px; margin-left: 0; margin-right: 0; padding: 24px 16px; }
@media (min-width: 640px) { .theme-jimu-debut .summary, .theme-jimu-debut .article:not(.article--pop) .summary { padding: 24px; } }
/* 3. PC の最初の画面の絵は、文の固まりの真ん中に（上にそろえると下に約 295px 空いた） */
@media (min-width: 1024px) { .theme-jimu-debut .hero-art.theme-img { align-self: center; margin-top: 0; } }
/* 5. 角丸の段を「絵 12px・箱 16px・札は丸」に（小さい絵ほど丸い逆転をなくす） */
.theme-jimu-debut .article-head .head-art--photo, .theme-jimu-debut .article-head .head-art--eye { border-radius: 12px; }
.theme-jimu-debut .article-thumb img, .theme-jimu-debut .pillar-photo .theme-img { border-radius: 12px; }
/* 7. 段から外れた間を段に乗せる（32・48） */
.theme-jimu-debut .article-body h3 { margin-top: 32px; }
.theme-jimu-debut .cta-compact { margin: 48px 0; }
.theme-jimu-debut .article-item:not(.article-item--detail) + .article-item--detail { margin-top: 48px; }
.theme-jimu-debut .article-item--detail { padding-top: 8px; padding-bottom: 8px; min-height: 48px; }
/* 8. 色の点つきの札の中を真ん中に（高さ 24px に固定） */
.theme-jimu-debut .article-tag, .theme-jimu-debut .pillar-tag { padding: 1px 12px 0 11px; height: 24px; box-sizing: border-box; }
/* 9. 「個人情報の扱い」を押しやすく（見た目の行の間は変えずに、押せる高さだけ広げる） */
.theme-jimu-debut .cta-note a { display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
/* 10. くわしい記事の図を本文の幅いっぱいに（608px の列に 480px で左寄せだった） */
@media (min-width: 640px) {
  .theme-jimu-debut .figure .figure-title, .theme-jimu-debut .figure .figure-art, .theme-jimu-debut .figure figcaption { max-width: 100%; }
}
/* 次点：指を置いたときの絵の拡大は 1.03 倍の1種類に */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .theme-jimu-debut .article-item:hover .article-thumb img, .theme-jimu-debut .pillar-card:hover .pillar-photo .theme-img { transform: scale(1.03); }
}
/* 1 の続き：スマホでは箱の中を字下げしない（前の採点の決まり。PC の余白 56px がスマホにも掛かって中身が下がった） */
@media (max-width: 639px) {
  .theme-jimu-debut .point-box { padding: 16px; }
  .theme-jimu-debut .point-box ul, .theme-jimu-debut .point-box ol { padding-left: 1.25em; }
}

/* ==================== 5回目の講評（LINE の導線・スマホ・信頼・planning/brushup-2026-10-22/review-5.md）の直し ==================== */
/* 1. スマホの LINE ボタンは横いっぱい（右手の親指が届く・高さ 56px） */
@media (max-width: 639px) {
  .theme-jimu-debut .cta-button, .theme-jimu-debut .cta-compact > a { display: flex; width: 100%; min-height: 56px; justify-content: center; box-sizing: border-box; }
}
/* 2. 記事の途中の入口を、要点と同じ薄い黄色の箱で囲む（本文の段落と見分けがつく） */
.theme-jimu-debut .cta-compact { padding: 20px 16px; background: var(--y-face); border-radius: 16px; }
/* 3. 最後の帯の「✓ あなたの軸の整理」などは押せない札なので、文字の並びに（押せる札と形を分ける） */
.theme-jimu-debut .cta-points { gap: 4px 20px; }
.theme-jimu-debut .cta-points li { background: none; border: 0; border-radius: 0; padding: 0; font-size: 0.9375rem; white-space: nowrap; }
.theme-jimu-debut .cta-points li::before { color: var(--cta); }
/* 4. スマホのトップで LINE ボタンを少し上げる */
@media (max-width: 639px) {
  .theme-jimu-debut .hero h1 { margin-bottom: 16px; }
  .theme-jimu-debut .chips-title { margin-top: 24px; }
  .theme-jimu-debut .line-box { padding-top: 16px; }
}
/* 5. 読み進めの線は「今どこを読んでいるか」の印なので、動きを減らす設定の人にも出す（スクロールに連動するだけで、勝手には動かない） */
@supports (animation-timeline: scroll()) {
  .theme-jimu-debut:has(.article) body::before {
    content: ""; position: fixed; inset: 0 0 auto 0; z-index: 40; height: 4px;
    background: var(--progress, var(--accent)); transform-origin: 0 50%;
    animation: progress linear both; animation-timeline: scroll(root); pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) { @supports (animation-timeline: scroll()) { .theme-jimu-debut:has(.article) body::before { animation: progress linear both !important; animation-timeline: scroll(root) !important; } } }
/* 6. スマホの上の帯を最初から少し低く（68 → 60px 前後）・見出しへ飛んだとき隠れないよう余白もそろえる */
@media (max-width: 639px) {
  .theme-jimu-debut .header-inner { padding-top: 4px; padding-bottom: 4px; }
  .theme-jimu-debut { scroll-padding-top: 64px; }
}

/* 404 のページ：見出しの上に大きな「404」を飾りで置く（文言は変えない・読み上げでは読まない飾りの文字） */
.theme-jimu-debut .page-404 .page-head h1::before {
  content: "404"; display: block; margin-bottom: 8px; font-size: 4.5rem; line-height: 1; letter-spacing: 0.04em;
  color: var(--ink); text-decoration: underline 0.18em var(--y-marker); text-underline-offset: -0.08em; text-decoration-skip-ink: none;
}

/* ==================== プロの転職メディアと比べた講評（planning/brushup-2026-10-22/review-6.md）の直し ==================== */
/* D1. PC の記事の頭の絵を、本文の列いっぱいに（256px の小さな絵 → 608px。題→前書き→大きな絵の順） */
@media (min-width: 960px) {
  .theme-jimu-debut .article-head .head-grid { grid-template-columns: minmax(0, var(--measure)); }
  .theme-jimu-debut .article-head .head-art--eye, .theme-jimu-debut .article-head .head-art--photo {
    max-width: none; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; margin-top: 24px;
  }
}
/* D2. 小見出し（h3）の左に黄色の線（章＝h2 の下線・節＝h3 の左の線） */
.theme-jimu-debut .article-body h3 { padding-left: 12px; border-left: 4px solid var(--y-marker); line-height: 1.5; }
/* D3. 残っていた2つ目の黄色（#FFE27A）とクリーム（#FFF6D6）を4色の決まりへ */
.theme-jimu-debut .home-block .block-title, .theme-jimu-debut .article--pop .article-head h1 { text-decoration-color: var(--y-marker); }
.theme-jimu-debut .article--pop .summary, .theme-jimu-debut .point-box { background: var(--y-face); }
.theme-jimu-debut .guide-item .guide-no, .theme-jimu-debut .guide-list .guide-item .guide-no { background: var(--y-marker); }
/* D4. 広い画面のトップは枠を広げる（912 → 約 1040px。見出しの帯・下の帯も同じ幅にして左端をそろえる） */
@media (min-width: 1200px) { .theme-jimu-debut:has(.hero) .wrap { max-width: 68rem; } }
/* D5. 段から外れた文字の大きさをなくす（ポイントの題・番号＝本文と同じ 17px／注意書き・出典＝14px） */
.theme-jimu-debut .point-title, .theme-jimu-debut .guide-no { font-size: 1.0625rem; }
.theme-jimu-debut .cta-note, .theme-jimu-debut .hero .cta-note, .theme-jimu-debut .cta-compact .cta-note, .theme-jimu-debut .source-list, .theme-jimu-debut .sources--pop li, .theme-jimu-debut .sources--pop a { font-size: 0.875rem; }
/* D1 の続き：絵の上の余白は枠の行の間隔だけにする（重なって空きすぎた） */
@media (min-width: 960px) { .theme-jimu-debut .article-head .head-art--eye, .theme-jimu-debut .article-head .head-art--photo { margin-top: 0; } .theme-jimu-debut .article-head .head-grid { row-gap: 32px; } }

/* 総点検 qa-1 の7：縦に積んだ表の欄は、最後の行に1字だけ落とさない（「求人ごとに違／う」など） */
@media (max-width: 639px) { .theme-jimu-debut .table-wrap tr:has(> :nth-child(3)) > * { text-wrap: pretty; } }

/* 記事の点検 qa-2：PC で図が本文の幅いっぱいになり、図の中の字が見出しより大きくなった。図は 32rem まで（真ん中） */
@media (min-width: 640px) { .theme-jimu-debut .figure .figure-art { max-width: 32rem; margin-left: auto; margin-right: auto; } }
/* 記事の点検 qa-2：表の欄の最後の行に1字だけ落とさない（PC でも） */
.theme-jimu-debut .table-wrap td, .theme-jimu-debut .table-wrap th { text-wrap: pretty; }