/* 路線B「雑誌の挿絵風」：やわらかい陰影と紙の質感の絵（static/img/b/）に合わせて、
   色を「日の当たる木の机」の温かい色に、カードを白い紙に、絵を大きな写真の枠に変える。--theme b のときだけ読む。
   値の正本は DESIGN.md の「路線B」の表。色は下の :root の変数だけで書く（その場で色を書かない）。 */

:root {
  --paper: #FBF8F3;
  --ink: #2B2924;
  --ink-soft: #5F5A52;
  --desk: #F3EDE3;
  --desk-deep: #E2D8C8;
  --surface: #F6F2EB;
  --line: #E9E2D7;
  --accent: #2F5577;
  --note-y: #F5E6B5;
  --note-y-soft: #FBF4DE;
  --note-p: #F3DDD7;
  --note-g: #DCEBDC;
  --note-b: #DDE7EF;
  --note-o: #F3DFC7;
  --radius-box: 20px;
  --radius-toc: 16px;
  --radius-thumb: 12px;
  --radius-art: 4px;
  --radius-flat: 0;
  /* 柱の色の点（札の前に付ける小さな丸）。付箋の色より一段濃い */
  --dot-y: #C29A2E;
  --dot-g: #5B8F69;
  --dot-p: #B9675C;
  --dot-o: #C07A3A;
  --shadow-ring: 0 0 0 1px rgba(43, 41, 36, 0.07);
  --shadow-1: 0 1px 2px rgba(43, 41, 36, 0.05), 0 4px 16px rgba(43, 41, 36, 0.07);
  --shadow-2: 0 2px 6px rgba(43, 41, 36, 0.06), 0 16px 36px rgba(43, 41, 36, 0.12);
  /* 2026-10-22 夜（Fable の講評 B-1・B-17）：見出しだけ明朝（端末の書体だけ・外の読み込みなし）と、濃い地の上の白の濃淡 */
  --font-head: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "BIZ UDPMincho", "Noto Serif JP", serif;
  --on-ink: rgba(255, 255, 255, 0.82);
  --on-ink-soft: rgba(255, 255, 255, 0.5);
  --on-ink-line: rgba(255, 255, 255, 0.18);
  --header-glass: rgba(251, 248, 243, 0.84); /* 紙の色を少し透かした見出しの帯 */
  --shine: rgba(255, 255, 255, 0.35); /* ボタンを横切る光 */
}

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

/* ---------- トップの最初の画面：絵を大きな写真の枠に ---------- */
.hero-art.theme-img {
  max-width: none;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-box);
  box-shadow: var(--shadow-2);
}
@media (min-width: 840px) {
  .theme-b .hero-grid { grid-template-columns: 6fr 6fr; }
}

/* ---------- 柱のカード：白い紙に、上半分が絵 ---------- */
.theme-b .pillar-card {
  padding: 0 0 var(--space-2);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-1);
}
.theme-b .pillar-card > :not(.pillar-photo) { margin-left: var(--space-2); margin-right: var(--space-2); }
.theme-b .pillar-photo { display: block; margin-bottom: 12px; border-bottom: 4px solid var(--tone); }
.theme-b .pillar-photo .theme-img { aspect-ratio: 16 / 10; object-fit: cover; }
.theme-b .pillar-card .pillar-count { background: var(--tone); }
@media (min-width: 640px) {
  .theme-b .pillar-card { padding: 0 0 var(--space-3); }
  .theme-b .pillar-card > :not(.pillar-photo) { margin-left: var(--space-3); margin-right: var(--space-3); }
  .theme-b .pillar-photo { margin-bottom: var(--space-2); }
}

/* ---------- 記事の行の小さい絵：柱の絵を切り抜いて使う ---------- */
.article-thumb--photo { border-radius: var(--radius-note); }
.article-thumb--photo .theme-img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 記事の頭・ページの頭：写真の枠 ---------- */
.article-head .head-art--photo {
  aspect-ratio: 4 / 3;
  padding: 0;
  background: none;
  object-fit: cover;
  border-radius: var(--radius-box);
  box-shadow: var(--shadow-1);
}
.page-head .theme-img.head-art, .page-head .theme-figure .theme-img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-toc);
  box-shadow: var(--shadow-1);
}
.theme-figure { margin: 0; }
.theme-figure figcaption { margin-top: 4px; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.5; letter-spacing: 0; }

/* ---------- LINE の帯の絵 ---------- */
.cta-art.theme-img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-toc); box-shadow: var(--shadow-1); }

/* 広い画面では写真のカードを4枚横に並べる（2列だと写真が大きすぎて間延びする） */
@media (min-width: 960px) {
  .theme-b .pillar-cards { grid-template-columns: repeat(4, 1fr); }
  .theme-b .pillar-photo .theme-img { aspect-ratio: 4 / 3; }
  .theme-b .pillar-card > :not(.pillar-photo) { margin-left: var(--space-2); margin-right: var(--space-2); }
  .theme-b .pillar-card .pillar-link { font-size: var(--fs-body); }
}

/* 図解（SVG）の付箋の色を、この路線の落ち着いた色に置き換える（SVG の中の色の番号を CSS で上書き） */
.theme-b .figure-art [fill="#FFE27A"] { fill: var(--note-y); }
.theme-b .figure-art [fill="#FFCFCF"] { fill: var(--note-p); }
.theme-b .figure-art [fill="#C4EBD5"] { fill: var(--note-g); }
.theme-b .figure-art [fill="#CBE3F5"] { fill: var(--note-b); }
.theme-b .figure-art [fill="#FFD8A8"] { fill: var(--note-o); }

/* 狭い画面でも記事の頭に絵を出す（最初の1画面が文字だけにならないように） */
.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); }
}

/* ---------- 講評（路線Aと比べた回）を反映 ---------- */
/* ① 上質な挿絵の横に平たいアイコンを並べない（記事一覧の近道の札・柱の区切り） */
.theme-b .chip-icon, .theme-b .group-icon { display: none; }
.theme-b .pillar-nav a { padding: 4px var(--space-3); }
/* ② 本数の札（記事が少ないことを見せてしまう）と、写真の下の色の線（付箋の名残）を出さない */
.theme-b .pillar-card .pillar-count { display: none; }
.theme-b .pillar-photo { border-bottom: 0; }
/* ③ 記事の途中の LINE の入口を、白い紙の上の緑の枠のボタンに（塗りのボタンは記事の終わりの1つだけ） */
.theme-b .cta-compact { padding: var(--space-3); background: var(--white); border: 0; border-radius: var(--radius-toc); box-shadow: var(--shadow-ring); }
.theme-b .cta-compact > a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 4px var(--space-4);
  color: var(--cta);
  text-decoration: none;
  border: 2px solid var(--cta);
  border-radius: var(--radius-button);
}
.theme-b .cta-compact > a:hover { background: var(--cta); color: var(--white); }
.theme-b .cta-compact .cta-note { margin-top: 12px; }
/* ④ 上の帯と約束の帯も温かい紙の色に（純白だと前の路線の色が残って見える） */
.theme-b .site-header, .theme-b .promise { background: var(--paper); }
/* ⑤ 「記事の一覧を見る」をはっきり押せる黒い丸ボタンに */
.theme-b .more a { background: var(--ink); color: var(--white); box-shadow: none; }
.theme-b .more a:hover { background: var(--accent); color: var(--white); box-shadow: var(--shadow-2); }
/* ⑥ 運営会社の頭の絵：狭い画面では出さない（注記が5行に詰まる）。広い画面では大きめに、注記は1〜2行で */
.theme-b .page-about .page-head .theme-figure { display: none; }
.theme-b .page-about .page-head h1 { padding-right: 0; }
@media (min-width: 840px) {
  .theme-b .page-about .page-head .theme-figure { display: block; max-width: 12rem; }
}

/* ---------- 仕上げの講評（7.0点の回）と、自分で見た分を反映 ---------- */
/* 1. 札は「色を塗った丸い札」をやめ、文字の前の小さな色の点に（雑誌の作り方） */
.theme-b .pillar-1 { --tone-deep: var(--dot-y); }
.theme-b .pillar-2 { --tone-deep: var(--dot-g); }
.theme-b .pillar-3 { --tone-deep: var(--dot-p); }
.theme-b .pillar-4 { --tone-deep: var(--dot-o); }
.theme-b .article-tag, .theme-b .pillar-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; background: none; color: var(--ink-soft); font-size: var(--fs-small); }
.theme-b .article-tag::before, .theme-b .pillar-tag::before { content: ""; width: 8px; height: 8px; background: var(--tone-deep, var(--ink-soft)); border-radius: var(--radius-button); }
.theme-b .article-thumb--photo { border-radius: var(--radius-thumb); box-shadow: var(--shadow-ring); }
/* 2. 要点の箱は白い紙と細い枠・紺のチェック。記事の途中の LINE は箱を外して枠のボタンだけ */
.theme-b .summary { background: var(--white); box-shadow: var(--shadow-ring); }
.theme-b .summary-title { font-size: var(--fs-ui); color: var(--ink-soft); letter-spacing: 0.08em; }
.theme-b .summary li::before { border-color: var(--accent); }
.theme-b .cta-compact { padding: 0; background: none; box-shadow: none; }
/* 3. 本文の見出しは、左のつまみをやめて上に短い紺の線 */
.theme-b .article-body h2 { padding-left: 0; padding-top: var(--space-3); }
.theme-b .article-body h2::before { top: 0; width: 24px; height: 4px; background: var(--accent); border-radius: var(--radius-note); box-shadow: none; }
/* 4. 図解は等倍で真ん中に。外の箱の墨の線を薄い墨に。図の下地に細い枠 */
.theme-b .figure-art { margin: 0 auto; }
@media (min-width: 640px) {
  .theme-b .figure-art { max-width: 22.5rem; }
}
.theme-b .figure-art [stroke="#1E2A35"], .theme-b .figure-art > g { stroke: var(--ink-soft); }
.theme-b .figure { box-shadow: var(--shadow-ring); }
/* 5. 浮かせる面を絞る（トップの絵だけ少し浮かせ、ほかは細い枠） */
.theme-b .hero-art.theme-img { box-shadow: var(--shadow-1); }
.theme-b .line-box, .theme-b .toc, .theme-b .pillar-card { box-shadow: var(--shadow-ring); }
.theme-b .pillar-card:hover { box-shadow: var(--shadow-1); }
/* 6. カードの説明文は細かく折らず、小さく薄い墨で2〜3行に */
.theme-b .pillar-card p { word-break: normal; text-wrap: wrap; color: var(--ink-soft); font-size: var(--fs-small); }
/* 7. カードに指を置くと、写真がわずかに大きくなる（枠の中で） */
.theme-b .pillar-photo { overflow: hidden; }
.theme-b .pillar-photo .theme-img { transition: transform var(--dur); }
.theme-b .pillar-card:hover .pillar-photo .theme-img { transform: scale(1.03); }
/* 8. 狭い画面では LINE の帯の小さな絵を出さない（アプリのアイコンのように浮いて見える） */
.theme-b .cta-art.theme-img { display: none; }
@media (min-width: 840px) {
  .theme-b .cta-art.theme-img { display: block; }
}
/* 9. 約束の帯のチェックは落ち着いた墨に（緑だと宣伝の「安心ポイント」に見える） */
.theme-b .promise-list li::before { border-color: var(--ink-soft); }

/* ---------- 2周目の講評（7.3点）を反映 ---------- */
/* ① 浮かせるのはトップの絵だけ。記事の頭・ページの頭・LINE の帯の絵は細い枠に（直し漏れ） */
.theme-b .article-head .head-art--photo,
.theme-b .page-head .theme-img.head-art,
.theme-b .page-head .theme-figure .theme-img,
.theme-b .cta-art.theme-img { box-shadow: var(--shadow-ring); }
/* ② 見出しの紺の線を見出しに近づける（離れると迷子の「—」に見える） */
.theme-b .article-body h2 { padding-top: 12px; }
/* ③ 記事一覧の近道の札も、色の点＋文字に（2列×2段でそろえる） */
.theme-b .pillar-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 var(--space-4); }
.theme-b .pillar-nav a { padding: 0; background: none; box-shadow: none; }
.theme-b .pillar-nav a::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--tone-deep, var(--ink-soft)); border-radius: var(--radius-button); }
.theme-b .pillar-nav a:hover { box-shadow: none; color: var(--accent); }
/* （共通の style.css に移した：図解の柱・もくじの上端） */
/* 6. 記事の行のテーマ名を墨にして、日付と見分ける */
.theme-b .article-tag { color: var(--ink); }
/* 「まず読みたい記事」は写真の枠に（絵は柱の絵などを使う） */
.theme-b .featured-art { background: none; }
.theme-b .featured-art .theme-img { aspect-ratio: 16 / 10; object-fit: cover; }

/* ロゴは文字だけに（平たいノートの印が上質な挿絵の隣で浮くため）。字は少し締めて大きく */
.theme-b .logo-mark { display: none; }
.theme-b .site-name { font-size: var(--fs-lead); letter-spacing: 0.06em; }

/* ---------- 3周目の講評（7.2点）を反映 ---------- */
/* ① おすすめ記事は箱に入れず、大きな絵をそのまま置いて主役にする */
.theme-b .featured-card { padding: 0; background: none; box-shadow: none; gap: var(--space-3); }
.theme-b .featured-card:hover { box-shadow: none; }
.theme-b .featured-art { border-radius: var(--radius-box); box-shadow: var(--shadow-ring); }
.theme-b .featured-art .theme-img { aspect-ratio: 3 / 2; transition: transform var(--dur); }
.theme-b .featured-card:hover .featured-art .theme-img { transform: scale(1.03); }
.theme-b .featured-link { font-size: var(--fs-h2); line-height: 1.45; }
.theme-b .featured-desc { font-size: var(--fs-body); line-height: 1.8; }
@media (min-width: 840px) {
  .theme-b .featured-card { grid-template-columns: 7fr 5fr; gap: var(--space-5); }
}
/* ② トップの LINE の白い箱をやめ、細い線1本で区切る（塗りのボタンは1つのまま） */
.theme-b .line-box { padding: var(--space-3) 0 0; background: none; box-shadow: none; border-top: 1px solid var(--desk-deep); border-radius: 0; }
.theme-b .line-box .cta-note { max-width: 28rem; }
/* ③ トップの「新しい記事」は、記事ごとの絵ができるまで絵なしの目次の形に（同じ絵の使い回しを見せない） */
.theme-b .home-latest .article-thumb { display: none; }
.theme-b .home-latest .article-item { grid-template-columns: minmax(0, 1fr); }
/* ④ トップの区切りの見出しに、上の濃い線（記事の中の見出しの短い紺の線とは違う形） */
.theme-b .home-block .block-title { padding-top: var(--space-2); border-top: 2px solid var(--ink); font-size: var(--fs-h3); letter-spacing: 0.06em; }
/* ⑤ 記事一覧：柱の区切りの中ではテーマ名を出さない（上の「6」の指定で出てしまっていた）。近道は下線で押せるものに */
.theme-b .pillar-group .article-tag { display: none; }
.theme-b .pillar-nav a { text-decoration-line: underline; text-decoration-color: var(--desk-deep); text-decoration-thickness: 1px; text-underline-offset: 8px; }
.theme-b .pillar-nav a:hover { text-decoration-color: currentColor; }
@media (min-width: 840px) {
  .theme-b .pillar-nav { grid-template-columns: repeat(4, max-content); }
}
/* 狭い画面では記事の頭の絵を少し横長に（本文の始まりを早く） */
.theme-b .article-head .head-art--photo { aspect-ratio: 16 / 10; }
@media (min-width: 960px) {
  .theme-b .article-head .head-art--photo { aspect-ratio: 4 / 3; }
}

/* ---------- 4周目の講評（7.4点）を反映：箱と大きな角丸をやめ、雑誌の紙面の作りに ---------- */
/* 1. 絵の角はほぼ四角に（大きな角丸はアプリのカードの印）。浮かせる絵もなくし、全部平らに */
.theme-b .hero-art.theme-img, .theme-b .featured-art, .theme-b .article-head .head-art--photo,
.theme-b .page-head .theme-img.head-art, .theme-b .page-head .theme-figure .theme-img,
.theme-b .cta-art.theme-img, .theme-b .article-thumb--photo, .theme-b .pillar-photo { border-radius: var(--radius-art); }
.theme-b .hero-art.theme-img { box-shadow: var(--shadow-ring); }
/* 2. 記事の要点ともくじも、箱をやめて上の濃い線で区切る（トップと同じ作りに） */
.theme-b .summary, .theme-b .toc { padding: 12px 0 0; background: none; box-shadow: none; border-radius: var(--radius-flat); border-top: 2px solid var(--ink); }
.theme-b .summary-title, .theme-b .toc-title { color: var(--ink); }
.theme-b .figure { border-radius: var(--radius-art); box-shadow: none; }
/* 3. テーマのカードも箱をやめ、絵と文字だけに */
.theme-b .pillar-card, .theme-b .pillar-card:hover { padding: 0; background: none; box-shadow: none; border-radius: var(--radius-flat); transform: none; }
.theme-b .pillar-card > :not(.pillar-photo) { margin-left: 0; margin-right: 0; }
.theme-b .pillar-photo { margin-bottom: 12px; box-shadow: var(--shadow-ring); }
.theme-b .pillar-cards { row-gap: var(--space-4); }
@media (min-width: 640px) {
  .theme-b .pillar-card { padding: 0; }
  .theme-b .pillar-card > :not(.pillar-photo) { margin-left: 0; margin-right: 0; }
}
@media (min-width: 960px) {
  .theme-b .pillar-cards { column-gap: var(--space-3); }
  .theme-b .pillar-card > :not(.pillar-photo) { margin-left: 0; margin-right: 0; }
}
/* 4. 新しい記事は2列×2段に（右の空きと二重線をなくす）。題は一段大きく */
@media (min-width: 640px) {
  .theme-b .home-latest .article-link { font-size: var(--fs-h3); line-height: 1.5; }
}
.theme-b .home-latest .article-kicker { margin-bottom: var(--space-1); }
.theme-b .home-latest .article-desc { margin-top: var(--space-1); font-size: var(--fs-ui); }
@media (min-width: 840px) {
  .theme-b .home-latest .article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); border-top: 0; }
  .theme-b .home-latest .article-item { padding: var(--space-3) 0 var(--space-4); border-top: 1px solid var(--line); border-bottom: 0; }
}
/* 5a. 狭い画面ではページの頭の小さな絵を出さない（アプリのアイコンに見える） */
.theme-b .page-head .theme-img.head-art { display: none; }
.theme-b .page-head h1 { padding-right: 0; }
@media (min-width: 840px) {
  .theme-b .page-head .theme-img.head-art { display: block; }
}
/* 5b. 約束の帯はチェック印をやめ、広い画面では縦の細い線で区切る */
.theme-b .promise-list li { padding-left: 0; color: var(--ink-soft); }
.theme-b .promise-list li::before { display: none; }
@media (min-width: 840px) {
  .theme-b .promise-list li + li { padding-left: var(--space-3); border-left: 1px solid var(--line); }
}
/* 5c. 近道の下線を文字に近づけ、見える濃さに */
.theme-b .pillar-nav a { text-underline-offset: 4px; text-decoration-color: var(--ink-soft); }
/* 5d. 見出しの形を「上の濃い線」に一本化（記事一覧の区切りも）。記事の中の紺の線は角を取る */
.theme-b .group-head { padding: 12px 0 0; border-top: 2px solid var(--ink); border-bottom: 0; }
.theme-b .article-body h2::before { border-radius: var(--radius-flat); }

/* ---------- 最終の採点（7.7点）の指摘：新しい記事の2列のずれ ---------- */
/* 要約を3行まで出す（2行だと事実の文が途中で切れて雑に見える） */
.theme-b .home-latest .article-desc { -webkit-line-clamp: 3; }
/* 区切りの濃い線のすぐ下に薄い線を重ねない */
.theme-b .home-latest .article-list { border-top: 0; }
@media (min-width: 840px) {
  /* 題の高さを2行分にそろえ、左右で要約の始まる高さをそろえる（題は 1.5 の行間 × 2 行＝3em） */
  .theme-b .home-latest .article-link { min-height: 3em; }
  .theme-b .home-latest .article-item:nth-child(-n + 2) { border-top: 0; }
}

/* ---------- プロの記事ページ10件の実測（docs/design-hikidashi.md の 5）を反映 ---------- */
/* h2 は横いっぱいの上の濃い線（短い飾りの線はプロは使っていない）。トップの区切りの見出しと同じ形 */
.theme-b .article-body h2 { padding-top: 12px; border-top: 2px solid var(--ink); }
.theme-b .article-body h2::before { display: none; }

/* ---------- 採点（7.8点・内訳つき）の路線Bの5つ ---------- */
/* B1. 線の太さで見出しの格を分ける：記事の大見出しは紺の 4px／要点・もくじは墨の 1px／ページの区切りは墨の 2px */
.theme-b .article-body h2 { padding-top: 16px; border-top: 4px solid var(--accent); }
.theme-b .summary, .theme-b .toc { border-top: 1px solid var(--ink); }
/* B2. トップの塗りの LINE は最初の画面の1つだけ。下の帯のボタンは枠のボタンに */
.theme-b .hero ~ .cta-band .cta-button { background: var(--white); color: var(--cta); border: 2px solid var(--cta); box-shadow: none; }
.theme-b .hero ~ .cta-band .cta-button:hover { background: var(--cta); color: var(--white); }
/* B3. 運営会社の頭：小さな写真と注記をやめ、紙の色の低い帯に（いちばん低い項目） */
@media (min-width: 840px) {
  .theme-b .page-about .page-head .theme-figure { display: none; }
}
.theme-b .page-about .page-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.theme-b .page-about .page-head .head-grid { padding-top: 48px; padding-bottom: 32px; }
/* B4. 図解の板をやめ、上下の細い線で区切る雑誌の図版の形に */
.theme-b .figure { padding: 32px 0; background: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--radius-flat); }
.theme-b .figure-title { font-size: var(--fs-ui); color: var(--ink-soft); letter-spacing: 0.08em; }
/* B5. 一覧の間延びを詰め、絵を少し大きく */
.theme-b .pillar-group { margin-bottom: 48px; }
@media (min-width: 640px) {
  .theme-b .pillar-group .article-thumb--eye { width: 192px; height: 120px; }
  .theme-b .pillar-group .article-link { font-size: var(--fs-h3); }
}

/* ---------- 採点（7.9点・2回目）の路線Bの4つ ---------- */
/* 1. 運営会社のページを軽く：見出しは墨の 1px の細い線・頭の帯の下の線をなくす・もくじのずれを直す・スマホではもくじを出さない */
.theme-b .page-body h2, .theme-b .page-about .article-body h2 { padding-top: 12px; border-top: 1px solid var(--ink); font-size: var(--fs-h3); }
.theme-b .page-about .page-head { border-bottom: 0; }
.theme-b .page-about .page-head .head-grid { padding-bottom: 0; }
.theme-b .page-cols > .toc { display: none; }
@media (min-width: 960px) {
  .theme-b .page-cols > .toc { display: block; margin-top: 0; }
}
/* 2. 図を本文の左の線にそろえ（雑誌の作り）、次の見出しの線と二重にしない */
.theme-b .figure .figure-art, .theme-b .figure .figure-title, .theme-b .figure figcaption { margin-left: 0; margin-right: 0; }
.theme-b .figure:has(+ h2) { padding-bottom: 0; border-bottom: 0; }
/* 3. 約束の帯を最初の画面の一部に（机の色の続き） */
.theme-b .promise { background: var(--desk); border-top: 1px solid var(--desk-deep); border-bottom: 0; }
/* 4. ボタンに「›」の印（文面は変えない） */
.theme-b .more a::after, .theme-b .cta-button::after, .theme-b .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);
}

/* ---------- 採点（8.0点・3回目）の路線Bの直し ---------- */
/* B2. 図を本当に左の線にそろえる（図の絵の中の左の余白 20px を打ち消す）。箱の角を写真と同じほぼ四角に */
.theme-b .figure-art rect[rx="10"], .theme-b .figure-art rect[rx="8"] { rx: 4px; }
/* B3. スマホの約束の帯を、注意書きと見分けられるように（字を濃く・1つずつ細い線で区切る） */
.theme-b .promise-list li { color: var(--ink); }
.theme-b .promise-list li + li { padding-top: 8px; border-top: 1px solid var(--desk-deep); }
@media (min-width: 840px) {
  .theme-b .promise-list li { color: var(--ink-soft); }
  .theme-b .promise-list li + li { padding-top: 0; border-top: 0; }
}

/* ---------- 採点（8.1点・4回目）の路線Bの直し ---------- */
/* B1. 記事の図を本文の幅に合わせて 1.2 倍に（図の元の左の余白は5本とも 20 にそろえた → 1.2 倍で 24） */
@media (min-width: 640px) {
  .theme-b .figure-art { max-width: 27rem; }
  .theme-b .figure .figure-title, .theme-b .figure figcaption { max-width: 27rem; }
}
.theme-b .figure .figure-art { margin-left: -20px; } /* スマホは図が約 0.95 倍に縮むので 20 × 0.95 ≒ 19〜20 */
@media (min-width: 640px) {
  .theme-b .figure .figure-art { margin-left: -24px; }
}
/* B2. 記事一覧の頭の写真を出さない（下の記事の小さい写真と同じ絵が2回見えるため） */
.theme-b .page-head:has(.pillar-nav) .head-art { display: none; }
@media (min-width: 840px) {
  .theme-b .page-head:has(.pillar-nav) .head-grid { grid-template-columns: minmax(0, 1fr); }
}
/* B3. トップの新しい記事の要約は、2列のときは4行まで（3行だと途中で切れる） */
@media (min-width: 840px) {
  .theme-b .home-latest .article-desc { -webkit-line-clamp: 4; }
}

/* ---------- 採点（8.1点・5回目）の路線Bの直し ---------- */
/* B1. 図は 24rem に戻す（1.2倍だと図の字が見出しより大きくなった）。左のずらしは図の幅に対する割合（20 ÷ 360 ＝ 5.5556%）にして、どの幅でも5枚そろえる */
@media (min-width: 640px) {
  .theme-b .figure-art { max-width: 24rem; }
  .theme-b .figure .figure-title, .theme-b .figure figcaption { max-width: 24rem; }
  .theme-b .figure .figure-art { margin-left: 0; }
}
.theme-b .figure .figure-art { margin-left: 0; translate: -5.5556% 0; }
/* B2. トップの新しい記事：見出しと中身の間を詰め、題の最後の行に1語だけ落とさない */
.theme-b .home-latest .article-list { margin-top: var(--space-3); }
.theme-b .home-latest .article-item:first-child { padding-top: 0; }
@media (min-width: 840px) {
  .theme-b .home-latest .article-item:nth-child(-n + 2) { padding-top: 0; }
}
.theme-b .home-latest .article-link { text-wrap: balance; }
/* B3. 記事一覧の頭の説明文を言葉の途中で切らない */
.theme-b .page-head .lead { word-break: auto-phrase; text-wrap: balance; }
/* 記事ページの下の LINE の帯の絵は出さない（面接の質問の記事の頭の絵と同じになるため） */
.theme-b .article ~ .cta-band .cta-art.theme-img { display: none; }
/* 下の LINE の帯の絵は、トップの広い画面だけ（ほかのページでは記事の写真と重なることがある） */
.theme-b .cta-band .cta-art.theme-img { display: none; }
@media (min-width: 840px) {
  .theme-b .hero ~ .cta-band .cta-art.theme-img { display: block; }
}

/* ---------- 採点（8.2点・6回目）の路線Bの直し ---------- */
/* B2. 運営会社のページの空きを詰める（中身が短いのに間が広く、空っぽに見えた） */
.theme-b .page-about .article-cols.page-cols { padding-top: var(--space-4); }
.theme-b .page-about .article-body h2 { margin-top: var(--space-5); }
/* B3. 記事の終わりの運営の欄も、ほかと同じく箱をやめて上の線で区切る */
.theme-b .author { padding: 12px 0 0; background: none; border-radius: var(--radius-flat); border-top: 1px solid var(--ink); }

/* ---------- 採点（8.3点・8回目）の路線Bの直し ---------- */
/* B1. トップの LINE の注意書きのリンクを1行に分ける（「扱い」の2字だけ3行目に落ちた） */
.theme-b .hero .cta-note a { display: block; width: fit-content; margin-top: 4px; }
/* B2. 運営会社の最初の文：文の区切りで折り、行の長さをそろえる（pretty だけでは「します。」が落ちた） */
.theme-b .page-about .page-body > p:first-child { word-break: auto-phrase; text-wrap: balance; }
/* B3. 記事一覧の頭の帯を、ほかのページの頭と同じ 48px に（写真を外して間延びした） */
@media (min-width: 840px) {
  .theme-b .page-head:has(.pillar-nav) .head-grid { padding-top: 48px; padding-bottom: 48px; }
}

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

/* ---------- 採点（8.4点・10回目）の路線Bの直し ---------- */
/* B1. 運営会社の最初の文：スマホでは字の間を 0 にして 1行 20 字 → 39 字が2行に収まる（「ます。」だけ落ちない） */
.theme-b .page-about .page-body > p:first-child { letter-spacing: 0; }
@media (min-width: 640px) {
  .theme-b .page-about .page-body > p:first-child { letter-spacing: 0.02em; font-size: var(--fs-lead); } /* B3. 広い画面では説明文の大きさ */
}
/* B2. スマホの一覧では、途中で切れる説明文を出さない（絵と題と日付だけ） */
.theme-b .pillar-group .article-desc { display: none; }
@media (min-width: 640px) {
  .theme-b .pillar-group .article-desc { display: -webkit-box; }
}

/* ---------- 採点（8.4点・11回目）の路線Bの直し ---------- */
/* B1. スマホのトップで塗りの LINE ボタンを最初の画面（高さ約 630px）に入れる：写真を横長に切り、段の間を詰める */
.theme-b .hero-art.theme-img { aspect-ratio: 16 / 9; object-position: 50% 56%; }
.theme-b .hero-grid { row-gap: 16px; }
@media (min-width: 840px) {
  .theme-b .hero-art.theme-img { aspect-ratio: 5 / 4; object-position: 50% 50%; }
  .theme-b .hero-grid { row-gap: var(--space-4); }
  /* B3. 広い画面では写真の上下を左の文字の塊の上下にそろえる（2段の高さいっぱい・はみ出しは切る） */
  .theme-b .hero-art.theme-img { align-self: stretch; height: 100%; aspect-ratio: auto; object-fit: cover; }
}
/* B2. カードの説明文は詰めて折るが、折る場所は言葉の区切り */
@supports (word-break: auto-phrase) {
  .theme-b .pillar-card p { word-break: auto-phrase; text-wrap: pretty; }
}
@supports not (word-break: auto-phrase) {
  .theme-b .pillar-card p { word-break: keep-all; overflow-wrap: anywhere; }
}

/* ---------- 採点（8.48点・12回目）の路線Bの直し ---------- */
/* B1. 図の右の空きに注記を置く（雑誌の横の注記の形） */
@media (min-width: 640px) {
  .theme-b .figure { display: grid; grid-template-columns: 24rem minmax(0, 1fr); column-gap: var(--space-4); align-items: end; }
  .theme-b .figure .figure-title { grid-column: 1 / -1; }
  .theme-b .figure figcaption { max-width: none; margin-top: 0; }
}
/* B2. スマホのトップで写真の下の細い線を消す（写真の端が区切りになる） */
.theme-b .line-box { margin-top: 8px; padding-top: 0; border-top: 0; }
@media (min-width: 840px) {
  .theme-b .line-box { margin-top: 0; padding-top: var(--space-3); border-top: 1px solid var(--desk-deep); }
}
/* B3. 記事の表の見出し行も塗りをやめ、墨の線で区切る */
.theme-b .article-body th { background: none; color: var(--ink); border-bottom: 1px solid var(--ink); }

/* ---------- 採点（8.52点・13回目）の路線Bの小さな直し ---------- */
.theme-b .home-latest .article-desc { font-size: var(--fs-small); }
.theme-b .pillar-card p { margin-bottom: 0; }
@media (min-width: 840px) {
  .theme-b .promise-list li { color: var(--ink); }
}

/* ---------- 採点（8.53点・14回目）の路線Bの直し ---------- */
@media (min-width: 840px) {
  .theme-b .promise-list li + li { border-left-color: var(--desk-deep); } /* 約束の帯の縦の線を見える色に */
}
.theme-b .site-name { font-size: var(--fs-h3); letter-spacing: 0.08em; } /* 文字だけのロゴの格を上げる */

/* ---------- 採点（8.54点・15回目）の路線Bの直し ---------- */
@media (min-width: 840px) {
  .theme-b .home-latest .article-link { min-height: 0; } /* 題が1行の記事の下に穴ができないように */
}

/* ---------- 採点（8.55点・16回目）の路線Bの直し ---------- */
/* B1. 広い画面の新着の題を 16em までにして、今の4本（17〜25字）を全部2行にそろえる（左右で要約の始まる高さがずれていた） */
@media (min-width: 840px) { .theme-b .home-latest .article-link { max-width: 16em; } }

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

@media (prefers-reduced-motion: no-preference) {
  .theme-b { 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-b .site-header { view-transition-name: site-header; }

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

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

  /* 見出しの帯：少しスクロールしたら、うっすら影を出して浮かせる／記事を読み進めると、上に細い進み具合の線 */
  @supports (animation-timeline: scroll()) {
    .theme-b .site-header { animation: header-lift linear both; animation-timeline: scroll(root); animation-range: 0 64px; }
    .theme-b: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); } }

/* ==================== Fable の講評（2026-10-22 夜・planning/brushup-2026-10-22/fable-review.md B 節）の直し ====================
   ねらい：雑誌の作法で見出しだけ明朝（2つの書体）・図と運営の欄の粗を直す・本文の青を減らす・スマホで写真を裁ち落とす。
   この絵柄の決まり（test/theme.test.mjs）：色は :root の変数だけ・影は --shadow-* だけ・max-width のメディアクエリは使わない
   （スマホの形を先に書き、広い画面の形を min-width で上書きする） */

/* B-1. 見出しだけ明朝（W6）。本文の h2・h3 は読みやすさのためゴシックのまま */
.theme-b .hero h1, .theme-b .article-head h1, .theme-b .page-head h1, .theme-b .featured-link, .theme-b .site-name,
.theme-b .home-block .block-title, .theme-b .group-head h2, .theme-b .cta-title, .theme-b .line-box-title {
  font-family: var(--font-head); font-weight: 600; font-feature-settings: "palt";
}
.theme-b .hero h1 { letter-spacing: 0.02em; line-height: 1.2; }
@media (min-width: 840px) { .theme-b .hero h1 { font-size: 3.75rem; } }

/* B-2. 図：絵の外の注記は図の下に左そろえ（右下に浮かせない） */
.theme-b .figure { display: block; }
.theme-b .figure figcaption { margin-top: 12px; color: var(--ink-soft); font-size: var(--fs-small); }

/* B-3. 運営の欄：空のロゴ欄をやめ、文字の左端を罫線の左端にそろえる */
.theme-b .author { grid-template-columns: minmax(0, 1fr); gap: 0; }
.theme-b .author-mark { display: none; }
.theme-b .author .author-title { font-size: var(--fs-small); letter-spacing: 0.1em; color: var(--ink-soft); }

/* B-4・B-22. 本文の中のリンクと出典一覧は墨＋薄い下線（雑誌の本文に青い字は無い）。指を置くと紺 */
.theme-b .article-body > p:not(.cta-compact) a, .theme-b .article-body > ul li a, .theme-b .article-body > ol li a, .theme-b .source-list a {
  color: var(--ink); text-decoration-color: var(--desk-deep); text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.theme-b .article-body > p:not(.cta-compact) a:hover, .theme-b .article-body > ul li a:hover, .theme-b .article-body > ol li a:hover, .theme-b .source-list a:hover { color: var(--accent); text-decoration-color: currentColor; }
.theme-b .source-list li { line-height: 1.6; }

/* B-5・B-21. スマホの記事の頭：前書きを少し小さく、写真は横長で左右いっぱいに裁ち落とす（広い画面では今までの形） */
.theme-b .article-head .lead { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 16px; }
.theme-b .article-head .head-art--photo { aspect-ratio: 2 / 1; margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); border-radius: 0; box-shadow: none; }
.theme-b .hero-art.theme-img { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); border-radius: 0; box-shadow: none; }
.theme-b .summary li { font-size: 1rem; line-height: 1.65; }
@media (min-width: 640px) {
  .theme-b .article-head .lead { font-size: var(--fs-lead); line-height: 1.8; }
  .theme-b .article-head .head-art--photo { aspect-ratio: 16 / 10; margin-left: 0; margin-right: 0; width: 100%; border-radius: var(--radius-art); box-shadow: var(--shadow-ring); }
  .theme-b .hero-art.theme-img { margin-left: 0; margin-right: 0; width: 100%; border-radius: var(--radius-art); box-shadow: var(--shadow-ring); }
}
@media (min-width: 960px) { .theme-b .article-head .head-art--photo { aspect-ratio: 4 / 3; } }

/* B-6. 見出しの階段（スマホ h2 22／h3 18、PC h2 24／h3 19） */
.theme-b .article-body h2 { font-size: 1.375rem; }
.theme-b .article-body h3 { font-size: 1.125rem; margin-top: 36px; margin-bottom: 8px; }
@media (min-width: 640px) {
  .theme-b .article-body h2 { font-size: 1.5rem; }
  .theme-b .article-body h3 { font-size: 1.1875rem; }
}

/* B-7・B-8. 下の LINE の帯：小さな写真をやめ、文字とボタンだけ・上下に細い線と広い余白。注記は小さく控えめに */
.theme-b .cta-band .cta-art.theme-img, .theme-b .hero ~ .cta-band .cta-art.theme-img { display: none; }
.theme-b .cta-band { padding: 56px 0; border-top: 1px solid var(--desk-deep); border-bottom: 1px solid var(--desk-deep); }
.theme-b .cta-band .cta-title { font-size: 1.625rem; }
.theme-b .cta-band .cta-note { font-size: 0.8125rem; color: var(--ink-soft); max-width: 36em; }
.theme-b .cta-note a { display: inline; padding: 12px 0; } /* 押せる高さ 44px（共通 C）。inline のままなら行の高さは変わらない（inline-block だと行が押し広げられた） */

/* B-9. 一覧の日付は、全部の記事が同じ日の間は出さない（記事ページの公開日・事実確認日は残す。日付がばらけたら外す） */
.theme-b .pillar-group .article-date, .theme-b .home-latest .article-date { display: none; }

/* B-10. まず読みたい記事：スマホは説明を3行まで・題 22px、PC は題 28px で絵の下の辺にそろえる */
.theme-b .featured-link { font-size: 1.375rem; line-height: 1.4; }
.theme-b .featured-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (min-width: 840px) {
  .theme-b .featured-card { align-items: end; }
  .theme-b .featured-link { font-size: 1.75rem; }
  .theme-b .featured-desc { -webkit-line-clamp: 4; }
}

/* B-14. パンくず：区切りを読める濃さに */
.theme-b .breadcrumb { letter-spacing: 0.04em; margin-bottom: 24px; }
.theme-b .breadcrumb li + li::before { color: var(--ink-soft); }
.theme-b .breadcrumb a { min-width: 44px; }

/* B-15. 表：見出しの列と本文の列の格を大きさでも分ける */
.theme-b td:first-child { font-size: 0.875rem; font-weight: 700; }
.theme-b th { font-size: 0.8125rem; letter-spacing: 0.06em; }

/* B-16. 要点：題は雑誌の小見出しの作法・✓ は押せる所の紺をやめて墨に */
.theme-b .summary-title { color: var(--ink); font-size: 0.8125rem; letter-spacing: 0.12em; }
.theme-b .summary li::before { border-color: var(--ink-soft); }

/* B-17. フッター：紙の色を暗い地に乗せず、白の濃淡に */
.theme-b .site-footer { color: var(--on-ink); }
.theme-b .footer-head { color: var(--white); }
.theme-b .footer-bottom p { color: var(--on-ink-soft); border-top-color: var(--on-ink-line); }

/* B-18・B-19. ナビ：「記事一覧」はテーマと役割が違うので太く。一覧の近道は常時の下線をやめ、指を置いたときだけ */
.theme-b .nav-articles { font-weight: 700; }
.theme-b .pillar-nav a { text-decoration-color: transparent; }
.theme-b .pillar-nav a:hover { text-decoration-color: currentColor; }
@media (min-width: 840px) { .theme-b .pillar-nav { column-gap: 40px; } }

/* ==================== 今風の仕上げ（2026-10-22 夜・2サイト共通の中身・theme-b.css と theme-jimu-debut.css に同じものを置く） ==================== */
/* 見出しの帯：すりガラスのように少し透かす（対応していないブラウザは今までどおり塗りの帯） */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .theme-b .site-header { background: var(--header-glass); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
}
/* 記事のカード：指を置いたら絵が少し寄る（題の色は土台で変わる）。押せる範囲が分かる */
.theme-b .article-thumb { overflow: hidden; }
.theme-b .article-thumb img { transition: transform 320ms var(--ease-out); }
/* LINE のボタン：指を置いたら光がすっと横切る */
.theme-b .cta-button { position: relative; overflow: hidden; isolation: isolate; }
.theme-b .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-b .article-item:hover .article-thumb img, .theme-b .pillar-card:hover .pillar-photo .theme-img { transform: scale(1.04); }
  .theme-b .cta-button:hover::before { transform: translateX(120%); transition: transform 700ms var(--ease-out); }
}
/* Fable の講評 B-5：途中の LINE の入口を最初の節のあとに移したので、本文と離す */
.theme-b .cta-compact { margin: 40px 0; }

/* Fable の講評 B-11：スマホの約束の帯は、3つの文を細い線で積まず、ひと続きに流す（積むと注意書きに見えた）。広い画面は今までの3列 */
.theme-b .promise-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.theme-b .promise-list li { color: var(--ink-soft); }
.theme-b .promise-list li + li { padding-top: 0; border-top: 0; }
@media (min-width: 840px) {
  .theme-b .promise-list { display: grid; gap: var(--space-1) var(--space-3); }
  .theme-b .promise-list li { color: var(--ink); }
}
/* Fable の講評 B-12：記事が1本だけのテーマは、太い区切り線を細く・間を詰める（線だけが目立って空っぽに見えた。記事が増えれば自動で戻る） */
.theme-b .pillar-group:not(:has(.article-item + .article-item)) { margin-bottom: 40px; }
.theme-b .pillar-group:not(:has(.article-item + .article-item)) .group-head { border-top-width: 1px; }
/* Fable の講評 B-20：PC の最初の画面は、下の余白を上より少し詰める（数値で同じだと下が重く見える） */
@media (min-width: 840px) { .theme-b .hero-grid { padding-bottom: 48px; } }
/* B-11 の続き：約束の帯は普通の文なので、Safari 向けの「句読点でだけ折る」をやめる（1行に収まらず「。」だけが次の行に落ちた） */
.theme-b .promise-list li { word-break: normal; overflow-wrap: normal; }
/* B-11 の続き：スマホでは3つの文を段落の中の文のように続けて流す（箱に分けると balance で「すべ／て」と折れた） */
.theme-b .promise-list { display: block; }
.theme-b .promise-list li { display: inline; text-wrap: wrap; }
.theme-b .promise-list li + li { margin-left: 0.5em; }
@media (min-width: 840px) {
  .theme-b .promise-list { display: grid; }
  .theme-b .promise-list li { display: list-item; list-style: none; text-wrap: balance; }
  .theme-b .promise-list li + li { margin-left: 0; }
}
/* B-11 の続き：PC の3列は、言葉の切れ目で折る（Chrome は auto-phrase・Safari は句読点で） */
@media (min-width: 840px) {
  .theme-b .promise-list li { word-break: keep-all; overflow-wrap: anywhere; }
  @supports (word-break: auto-phrase) { .theme-b .promise-list li { word-break: auto-phrase; } }
}

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

/* 2回目の講評：おすすめ記事の日付も一覧と同じく出さない（B-9）・フッターのサイト名も明朝（B-1） */
.theme-b .featured .article-date { display: none; }
.theme-b .footer-name { font-family: var(--font-head); font-weight: 600; }

/* 2回目の講評の続き：一覧・おすすめの題も明朝（記事ページの題と書体をそろえる）／開いたときの動きを雑誌らしく控えめに（10px・500ms） */
.theme-b .article-link, .theme-b .guide-link, .theme-b .related a { font-family: var(--font-head); font-weight: 600; }
.theme-b { --dur-in: 500ms; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* スクロールしたら見出しの帯を少し低く（上下の余白 8px → 2px）。読む面積を広げる・動きを減らす設定では動かない（2サイト共通の中身） */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .theme-b .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回目の講評 B-2：図をスライド風から誌面風に（中身は変えない）。線は 1px の薄い墨・番号の丸は1色（色で区別しない） */
.theme-b .figure-art > g { stroke-width: 1px; }
.theme-b .figure-art circle { fill: var(--paper); }

/* メニューに指を置いたら、下線が左からすっと伸びる（今いる場所の太い下線はそのまま・2サイト共通の中身） */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .theme-b .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-b .site-nav a:not([aria-current]):hover { text-decoration-color: transparent; background-size: 100% 1.5px; }
}
/* B-1 の続き：前の指定は既存の色の置き換え（[fill=…]）に負けていた。強めて、番号の丸は1色＋細い輪郭、頭の帯と区切り線は紙の色合いに */
.theme-b .figure .figure-art circle[fill] { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1px; }
.theme-b .figure .figure-art path[fill="#CBE3F5"] { fill: var(--surface); }
.theme-b .figure .figure-art line[stroke="#C5DCEC"] { stroke: var(--line); }
/* B-4：スマホの記事の題は明朝で細く見えるので 1 段大きく（24→26px）。広い画面は今までどおり */
.theme-b .article-head h1 { font-size: 1.625rem; line-height: 1.45; }
@media (min-width: 640px) { .theme-b .article-head h1 { font-size: var(--fs-h1); } }
/* B-7（2回目の講評）：スマホの約束の帯の文の区切りを中黒で見えるように（文言は同じ・飾りの記号だけ） */
.theme-b .promise-list li + li { margin-left: 0; }
.theme-b .promise-list li + li::before {
  display: inline; content: "・"; position: static; width: auto; height: auto;
  border: 0; transform: none; margin: 0 0.25em; color: var(--ink-soft);
}
@media (min-width: 840px) { .theme-b .promise-list li + li::before { display: none; } }
/* B-7 の続き：「。」のあとに「・」が続いて句読点が重なったので、記号はやめ、文の間を 1 字あける */
.theme-b .promise-list li + li::before { content: none; }
.theme-b .promise-list li + li { margin-left: 1em; }
@media (min-width: 840px) { .theme-b .promise-list li + li { margin-left: 0; } }
/* 記事の終わりの「あわせて読みたい記事」：見出しも明朝・日付は一覧と同じく出さない（B-1・B-9 の続き） */
.theme-b .related-title { font-family: var(--font-head); font-weight: 600; }
.theme-b .related .article-date { display: none; }

/* ==================== 3回目の講評（初めての読者の目・planning/brushup-2026-10-22/review-3.md）の直し ==================== */
/* 1. スマホの約束の帯は3行に分ける（段落につなげると意味が消えた。前の採点の「細い線で区切って積む」に戻す） */
.theme-b .promise-list { display: grid; gap: 8px; }
.theme-b .promise-list li { display: block; text-wrap: wrap; }
.theme-b .promise-list li + li { margin-left: 0; padding-top: 8px; border-top: 1px solid var(--desk-deep); }
@media (min-width: 840px) {
  .theme-b .promise-list { gap: var(--space-1) var(--space-3); }
  .theme-b .promise-list li + li { padding-top: 0; border-top: 0; }
}
/* 2. 書体の決まりを1つに：ページの題と区切りの見出し（h1・本文の h2・区切り・関連・帯の題・テーマの題）は明朝、小見出し（h3）・札・表・要点の題はゴシック */
.theme-b .article-body h2, .theme-b .page .article-body h2, .theme-b .pillar-link { font-family: var(--font-head); font-weight: 600; }
/* 3. PC の目次が上の帯に潜らない（帯 68px＋余白 24px） */
@media (min-width: 960px) { .theme-b .toc { top: 92px; } }
/* 4. 「記事一覧」を常に太字にしない（今いるページの印は記事一覧にいるときだけ） */
.theme-b .nav-articles { font-weight: 400; }
.theme-b .nav-articles[aria-current] { font-weight: 700; }
/* 5. 図を本文の列の真ん中に・PC で少し大きく（左寄せのずらしをやめる。スマホでも左にはみ出さない） */
.theme-b .figure .figure-art { translate: none; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .theme-b .figure .figure-art { max-width: 27.5rem; } }
/* 6. 表の見出し欄を読みやすく（14px・机の色の面・幅 34%） */
.theme-b .table-wrap th { font-size: 0.875rem; background: var(--desk); }
.theme-b .table-wrap td:first-child { width: 34%; }
/* 7. 運営会社のページの頭を、記事一覧・個人情報とそろえる（机の色の帯・下に細い線）／本文の h2 の大きさもそろえる */
.theme-b .page-about .page-head { background: var(--desk); border-bottom: 1px solid var(--desk-deep); }
.theme-b .page-about .article-body h2 { font-size: 1.375rem; }
@media (min-width: 640px) { .theme-b .page-about .article-body h2 { font-size: 1.5rem; } }
/* 8. 記事一覧の上の4テーマを押せる札に（白・細い枠・丸い角・高さ 44px） */
.theme-b .pillar-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; background: var(--white); border: 1px solid var(--desk-deep); border-radius: 999px; text-decoration-line: none; }
.theme-b .pillar-nav a:hover { background: var(--note-y); }
/* 1 の続き：3行に分けたので、句読点で折る（「載せていま／す。」と1字だけ落ちたため） */
.theme-b .promise-list li { word-break: keep-all; overflow-wrap: anywhere; }

/* ==================== 4回目の講評（仕上げの細部・planning/brushup-2026-10-22/review-4.md）の直し ==================== */
/* 1. 記事一覧のテーマの札がスマホで右に 42px はみ出していた（2列の格子のまま札を大きくしたため）。折り返す並べ方に */
.theme-b .pillar-nav { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 840px) { .theme-b .pillar-nav { display: flex; gap: 8px 12px; } }
/* 2. 図の題・図・注の左端を1本に（図を真ん中に置いたので、題と注も同じ幅で真ん中に） */
@media (min-width: 640px) { .theme-b .figure .figure-title, .theme-b .figure figcaption { max-width: 27.5rem; margin-left: auto; margin-right: auto; } }
/* 3. 表の中の余白を左右同じに・見出し欄を少し広く（1字だけ落ちるのを止める） */
.theme-b .table-wrap th, .theme-b .table-wrap td { padding: 12px; }
.theme-b .table-wrap td:first-child, .theme-b .table-wrap th:first-child { width: 40%; }
/* 4. 小さな見出し（要点・運営・もくじ・図の題）を1つの大きさに（14px・700・字間 0.08em） */
.theme-b .summary-title, .theme-b .author .author-title, .theme-b .toc-title, .theme-b .figure-title { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; }
/* 5. 段から外れた間を段に乗せる（32・48・64） */
.theme-b .article-body h3 { margin-top: 32px; }
.theme-b .cta-compact { margin: 48px 0; }
.theme-b .pillar-group, .theme-b .pillar-group:not(:has(.article-item + .article-item)) { margin-bottom: 48px; }
.theme-b .cta-band { padding: 64px 0; }
/* 8. 二番手のボタンの「指を置いたとき」を1種類に（机の色の面＋墨の細い枠）。LINE の緑の変化だけは主役なので残す */
.theme-b .more a:hover, .theme-b .pillar-nav a:hover { background: var(--desk); color: var(--ink); box-shadow: var(--shadow-ring); }
/* 9. 色の点つきの札の文字を高さの真ん中に */
.theme-b .article-tag { padding-top: 2px; }

/* ==================== 5回目の講評（LINE の導線・スマホ・信頼・planning/brushup-2026-10-22/review-5.md）の直し ==================== */
/* 1. スマホの LINE ボタンは横いっぱい（右手の親指が届く・高さ 56px）。広い画面は今までどおり */
.theme-b .cta-button, .theme-b .cta-compact > a { display: flex; width: 100%; min-height: 56px; justify-content: center; box-sizing: border-box; }
@media (min-width: 640px) { .theme-b .cta-button, .theme-b .cta-compact > a { display: inline-flex; width: auto; min-height: 48px; } }
/* 2. 読み進めの線は、動きを減らす設定の人にも出す（スクロールに連動するだけ） */
@supports (animation-timeline: scroll()) {
  .theme-b: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-b:has(.article) body::before { animation: progress linear both !important; animation-timeline: scroll(root) !important; } } }
/* 3. 記事の途中の入口を、上下の線で囲んで「寄り道」と分かるように（雑誌の囲み記事の形・背景は付けない） */
.theme-b .cta-compact { padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--desk-deep); }
/* 4. スマホのトップの絵を少し低く（5:2）して、約束の1行目を最初の画面に。広い画面は今までどおり */
.theme-b .hero-art.theme-img { aspect-ratio: 5 / 2; object-position: 50% 60%; }
@media (min-width: 640px) { .theme-b .hero-art.theme-img { aspect-ratio: 5 / 4; object-position: 50% 50%; } }
/* 5. 記事の頭の「事実確認日」「出典 ○件」を、公開日より一段強く（確かめてある記事だと最初に分かる） */
.theme-b .article-meta span:nth-child(2), .theme-b .article-meta span:nth-child(3) { color: var(--ink); font-weight: 600; }
/* 6. スマホの上の帯を最初から少し低く（広い画面は今までどおり） */
.theme-b .header-inner { padding-top: 4px; padding-bottom: 4px; }
.theme-b { scroll-padding-top: 64px; }
@media (min-width: 640px) { .theme-b .header-inner { padding-top: var(--space-1); padding-bottom: var(--space-1); } .theme-b { scroll-padding-top: 72px; } }

/* 404 のページ：見出しの上に大きな「404」を明朝で飾りに置く（文言は変えない） */
.theme-b .page-404 .page-head h1::before {
  content: "404"; display: block; margin-bottom: 12px; font-family: var(--font-head); font-weight: 600;
  font-size: 4.5rem; line-height: 1; letter-spacing: 0.06em; color: var(--accent);
}

/* ==================== プロの転職メディアと比べた講評（planning/brushup-2026-10-22/review-6.md）の直し ==================== */
/* N1. PC の記事の写真を、本文の列いっぱいに（256px → 608px・16:9。題→前書き→大きな写真の誌面の順） */
@media (min-width: 960px) {
  .theme-b .article-head .head-grid { grid-template-columns: minmax(0, var(--measure)); }
  .theme-b .article-head .head-art--photo { max-width: none; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 32px; border-radius: 0; }
}
/* N2. 小見出し（h3）の左に紺の線（h2 の上の線と同じ紺・別の形で章と節を分ける） */
.theme-b .article-body h3 { padding-left: 12px; border-left: 3px solid var(--accent); line-height: 1.5; }
/* N3. トップの「新しい記事」に写真を戻す（上の棚は写真なのに下半分だけ文字になる段差をなくす） */
.theme-b .home-latest .article-thumb { display: block; }
.theme-b .home-latest .article-item { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 16px; }
.theme-b .home-latest .article-thumb--photo { width: 7.5rem; height: 5rem; border-radius: 0; }
/* N4. 広い画面のトップは枠を広げる（見出しの帯・下の帯も同じ幅にして左端をそろえる） */
@media (min-width: 1200px) { .theme-b:has(.hero) .wrap { max-width: 68rem; } }
/* N1 の続き：写真の上の余白は枠の行の間隔（48px）だけにする（足した 32px が重なって前書きと写真の間が約 80px 空いた） */
@media (min-width: 960px) { .theme-b .article-head .head-art--photo { margin-top: 0; } .theme-b .article-head .head-grid { row-gap: 32px; } }

/* ==================== 総点検（planning/brushup-2026-10-22/qa-1.md）の直し ==================== */
/* 3. 記事の途中の LINE の入口：上下の線にしたので角の丸みをやめる（「欠けた枠」に見えた） */
.theme-b .cta-compact { border-radius: 0; }
/* 5. 表の余白の上書き・1列目 40% は記事の表だけ（運営会社の会社概要の表は土台の詰めた形のまま） */
.theme-b .page .table-wrap th, .theme-b .page .table-wrap td { padding: revert-layer; width: auto; }
.theme-b .page-about .article-body td { padding: 0 0 4px; }
@media (min-width: 640px) { .theme-b .page-about .article-body td { padding: 12px var(--space-2) 12px var(--space-1); } }
/* 4. 3列以上の表：1列目 40% はやめる。スマホでは縦に積む（行の見出しを上・残りの列を下に。見出しの行も残す）。広い画面は表のまま */
.theme-b .table-wrap table:has(tr > :nth-child(3)) td:first-child, .theme-b .table-wrap table:has(tr > :nth-child(3)) th:first-child { width: auto; }
.theme-b .table-wrap table:has(tr > :nth-child(3)), .theme-b .table-wrap table:has(tr > :nth-child(3)) > :is(thead, tbody) { display: block; }
.theme-b .table-wrap tr:has(> :nth-child(3)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.theme-b .table-wrap tr:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-b .table-wrap tr:has(> :nth-child(3)) > * { min-width: 0; border-bottom: 0; }
.theme-b .table-wrap tr:has(> :nth-child(3)) > td:first-child { grid-column: 1 / -1; padding-bottom: 4px; }
.theme-b .table-wrap thead tr:has(> :nth-child(3)) { border-bottom: 1px solid var(--ink); }
.theme-b .table-wrap thead tr:has(> :nth-child(3)) > th:first-child { display: none; }
@media (min-width: 640px) {
  .theme-b .table-wrap table:has(tr > :nth-child(3)) { display: table; }
  .theme-b .table-wrap table:has(tr > :nth-child(3)) > thead { display: table-header-group; }
  .theme-b .table-wrap table:has(tr > :nth-child(3)) > tbody { display: table-row-group; }
  .theme-b .table-wrap tr:has(> :nth-child(3)) { display: table-row; border-bottom: 0; }
  .theme-b .table-wrap tr:has(> :nth-child(3)) > * { border-bottom: 1px solid var(--line); }
  .theme-b .table-wrap tr:has(> :nth-child(3)) > td:first-child { padding-bottom: 12px; }
  .theme-b .table-wrap thead tr:has(> :nth-child(3)) > th:first-child { display: table-cell; }
}
/* 9. 下の LINE の帯：写真を消したので2列の枠もやめて1列に（右に約 300px の空きが残っていた）。文は本文と同じ幅まで */
.theme-b .cta-band .cta-grid { grid-template-columns: minmax(0, 1fr); }
.theme-b .cta-band .cta-text { max-width: var(--measure); }
/* 7. 縦に積んだ表の欄は、最後の行に1字だけ落とさない */
.theme-b .table-wrap tr:has(> :nth-child(3)) > * { text-wrap: pretty; }
/* 記事の点検 qa-2：表の欄の最後の行に1字だけ落とさない（PC でも） */
.theme-b .table-wrap td, .theme-b .table-wrap th { text-wrap: pretty; }

/* 本文の結びの直後の LINE の入口（2026-10-23 決定 Y-05）。下は「出典」の上の線が区切るので、入口の下の線と余白を外す（線が二重になり空の箱に見えたため） */
.theme-b .article-body > .cta-compact:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }