:root {
  --ink: #1a1d21;
  --muted: #5b636b;
  --line: #e2e6ea;
  --bg: #ffffff;
  --soft: #f6f8fa;
  --accent: #1f4e79;
  --accent-soft: #eaf1f8;
  /* 補助の文字色・罫線。本文（--ink）と注記（--muted）の間の段と、それより薄い段。 */
  --ink-2: #3b434b;
  --faint: #7d868f;
  --line-2: #eef1f4;
  /* トップの地色。白いカード（日付グループ・パネル）を浮かせるためだけに使う。 */
  --page: #f3f5f8;
  /* 稼働表示の状態色。色だけに意味を持たせず、必ずラベル文字を添える。 */
  --ok: #16813f;
  --warn: #a45c07;
  --warn-soft: #fdf3e6;
  /* 変更の種別バッジ（新規・項目更新・本文更新）の緑。分類・在留資格・業種の
     チップが紺の淡色（--accent-soft）になったので、札は別の色相に逃がす。
     稼働表示の --ok（#16813f）より少し沈めて、帯の上で 5.8:1 を確保する
     （札の文字は 11.5px の太字で、4.5:1 ぎりぎりでは細部がつぶれる）。 */
  --ctype: #146c43;
  --ctype-soft: #e9f5ee;
  /* 施行日の強調。削除色と同じ赤系だが、塗りの面で使う（文字だけにしない）。 */
  --eff: #b3261e;
  --eff-soft: #fdeeed;
  /* PDF マークの赤。PDF 閲覧ソフトのアイコンに近い赤にして、リンク先が
     ブラウザー内で開かない（ダウンロードになる）ことを開く前に気づけるようにする。
     施行日の札（--eff）とは別の色にし、白地とのコントラストは 5.6:1
     （本文色の基準 4.5:1 を満たす）。 */
  --pdf: #c8201a;
  /* 差分表示の色。こちらも記号（＋/−）と読み上げラベルを併記する。 */
  --add: #16813f;
  --add-bg: #ecf7f0;
  --add-mark: #b6e7c6;
  --del: #b3261e;
  --del-bg: #fdeeed;
  --del-mark: #f7c9c5;
  /* 和文は Noto Sans JP、欧文・数字は Inter。いずれも自ドメイン配信（/fonts/）で、
     Google 等の外部へのリクエストは発生しない。読み込み失敗時は端末搭載フォントに
     フォールバックする（Windows は system-ui だと游ゴシックUIが当たり細く薄いため、
     可読性重視のUDフォント BIZ UDPGothic → メイリオ を先に置く）。 */
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             "BIZ UDPGothic", Meiryo, system-ui, sans-serif;
  --font-sans: "Inter", var(--font-jp);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  /* 地は薄い灰色、中身は白いカード（全ページ共通。2026-09-17 のトップ再編に合わせた）。 */
  background: var(--page);
  font-family: var(--font-sans);
  line-height: 1.7;
  font-size: 16px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
/* 広い段。ヘッダーは全ページこの幅（メニューを1行に収めるため）、本文はトップだけ。
   本文の読み物ページは 760px のまま（1行が長すぎると読みにくい）。 */
.wrap.wide { max-width: 1180px; padding: 0 24px; }
header.site {
  /* ヘッダーとその下の白い帯（.intro / .pagehead）は続きの面なので、境目に線は
     引かない。区切りは、白い帯が終わって灰色の地が始まるところ（帯の下の線）が
     担う——線を2本重ねると、説明文がヘッダーの一部か中身かが読み取りにくい。 */
  background: var(--bg);
}
/* ヘッダーは全ページ共通の広い段（1180px）。brandline は display: contents にして、
   屋号・メニューを1つの flex の並びとして order で配置する
   （マークアップの順序は据え置き）。 */
header.site .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
header.site .brandline { display: contents; }
header.site .brand { order: 1; font-weight: 700; font-size: 18px; color: var(--ink); white-space: nowrap; }
header.site .brand .sub { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 8px; }
/* 屋号の前のロゴマーク（favicon と同じ図案。2026-09-26）。18px の文字の中心に合わせて下げる。 */
header.site .brand .mark { width: 28px; height: 28px; margin-right: 8px; vertical-align: -8px; }
/* 稼働表示。実測値（最終巡回日時）が取れたときだけ点を出す。
   点は「稼働中」ラベルの直前に置く（2026-09-19。以前はサイト名の前で、
   飾りに見えて状態の印だと読めなかった。スマホでは稼働表示が2行目に回り、
   点だけ1行目に取り残されていた）。12px の文字に合わせて点は 7px。
   「エージェントがいま見張っている」ことが伝わるよう、ソナーのように
   輪を2本ずらして広げ、中心の点は緑の光をゆっくり強弱させる（2026-09-19）。
   明滅（点そのものの点灯・消灯）はしない——点滅は目に障る上、WCAG 2.3.1 の
   観点でも避ける。輪は 1 周 2.8 秒で、1 秒に 3 回を大きく下回る。
   動きを好まない設定（prefers-reduced-motion）と巡回停滞（.stale）では止める。 */
header.site .brand .statusdot { display: none; }
header.site .brand.watching .statusdot {
  position: relative; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin: 0 7px 0 2px; vertical-align: 1px;
  background: radial-gradient(circle at 35% 30%, #5fe08f 0%, #22a653 55%, var(--ok) 100%);
  animation: fhw-glow 2.8s ease-in-out infinite;
}
header.site .brand.watching .statusdot::before,
header.site .brand.watching .statusdot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(34, 166, 83, .75);
  animation: fhw-pulse 2.8s cubic-bezier(.15, .6, .35, 1) infinite;
  pointer-events: none;
}
header.site .brand.watching .statusdot::after { animation-delay: 1.4s; }
header.site .brand .status {
  display: inline-block; font-size: 12px; font-weight: 400;
  color: var(--muted); margin-left: 14px; white-space: nowrap;
}
header.site .brand .status-label { color: var(--ok); font-weight: 600; }
header.site .brand.stale .statusdot { background: var(--warn); animation: none; }
header.site .brand.stale .statusdot::before,
header.site .brand.stale .statusdot::after { display: none; }
header.site .brand.stale .status-label { color: var(--warn); }
@keyframes fhw-pulse {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(2.7); opacity: 0; }
}
@keyframes fhw-glow {
  0%, 100% { box-shadow: 0 0 3px 0 rgba(34, 166, 83, .45); }
  50%      { box-shadow: 0 0 9px 2px rgba(34, 166, 83, .55); }
}
/* 動きを好まない設定（Windows の「アニメーション効果」オフ等）では、
   広がる輪（大きさが変わる動き）だけを止め、代わりに光の強弱で「稼働中」を示す。
   点の大きさ・位置は変えず、周りの光を強めて弱める（呼吸）だけにする。
   「稼働中」の文字は動かさない（動きは点が担う）。 */
@keyframes fhw-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34, 166, 83, .12), 0 0 4px 1px rgba(34, 166, 83, .35); }
  50%      { box-shadow: 0 0 0 5px rgba(34, 166, 83, .18), 0 0 12px 4px rgba(34, 166, 83, .55); }
}
@media (prefers-reduced-motion: reduce) {
  header.site .brand.watching .statusdot { animation: fhw-breathe 2.4s ease-in-out infinite; }
  header.site .brand.watching .statusdot::before,
  header.site .brand.watching .statusdot::after { animation: none; display: none; }
  header.site .brand.stale .statusdot { animation: none; }
}
header.site nav { font-size: 14px; }
header.site nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 2px;
}
header.site nav a {
  color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
}
header.site nav a:hover { background: var(--soft); text-decoration: none; }
/* いま居るページ。色だけでなく面と太さでも示す（aria-current が読み上げを担う）。 */
header.site nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
/* アイコンは装飾（意味はラベルが持つ）。currentColor なのでリンク色に追従する。 */
header.site nav svg { width: 15px; height: 15px; flex: none; }
/* 屋号・稼働表示・メニューを1行に並べる（メニューは3項目に絞った
   2026-09-19 以降、1180px の段に収まる）。狭い幅ではメニューだけを2行目に
   落として横スクロールにする（折り返すと行頭がそろわず、メニューが3段になる）。 */
header.site .wrap { row-gap: 2px; }
header.site nav { order: 2; margin: 0 0 0 4px; }
@media (max-width: 720px) {
  header.site nav {
    order: 3; width: calc(100% + 32px); margin: 2px -16px 0; padding: 2px 10px;
    overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line-2);
  }
  header.site nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
  header.site .wrap { padding-left: 16px; padding-right: 16px; row-gap: 2px; }
  header.site .brand { white-space: normal; }
  header.site .brand .sub { display: none; }
  /* 稼働表示は屋号の下の行へ。 */
  header.site .brand .status { display: block; margin: 0; }
}
main { padding: 24px 0 48px; }

/* ── ページの骨格（全ページ共通） ─────────────────────────────────
   ヘッダー直下の白い帯（パンくず・見出し・リード）→ 灰色の地に白いカード。
   左端はヘッダーの屋号とそろえる（段はヘッダーと同じ 1180px）。
   レイアウトは3種類:
     .layout-side … 左に追従するパネル（290px）＋右に一覧（トップ・一覧系）
     .layout-doc  … 読み物のカード（〜860px）＋右に目次や補足（詳細・文書系）
     なし         … 横幅いっぱいのカード（表の多いページ） */
.pagehead { background: var(--bg); border-bottom: 1px solid var(--line); }
.pagehead .wrap { padding-top: 16px; padding-bottom: 20px; }
.pagehead .breadcrumb { margin: 0 0 6px; }
.pagehead h1 { font-size: 22px; line-height: 1.45; margin: 0; }
.pagehead .lead { margin: 6px 0 0; font-size: 14px; max-width: 860px; }
.pagehead .pagemeta { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.pagehead .pagemeta > span, .pagehead .pagemeta > a { display: inline-block; margin-right: 14px; }
.pagehead .pagemeta strong { color: var(--ink); font-weight: 600; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 22px 26px; margin: 0 0 16px; }
.card > :first-child, .card > h2:first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 0 0 14px; font-size: 14px; }
.panel.notice { background: var(--accent-soft); border-color: #cfe0ef; }
.panel p { margin: 0; }
.panel p + p { margin-top: 8px; }
.sidehead { font-size: 13.5px; font-weight: 700; margin: 0 0 8px; padding: 0; border: 0; }
.sechead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; }
.sechead h2 { font-size: 17px; margin: 0; padding: 0; border: 0; }
.sechead .tools { font-size: 12.5px; color: var(--muted); }
.layout-side { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.layout-side > .maincol { grid-column: 2; grid-row: 1; min-width: 0; }
.layout-side > .side {
  grid-column: 1; grid-row: 1; position: sticky; top: 16px;
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding-right: 2px;
}
.layout-doc { display: grid; grid-template-columns: minmax(0, 860px) minmax(0, 1fr); gap: 28px; align-items: start; }
.layout-doc > .maincol { min-width: 0; }
.layout-doc > .side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; }
/* 目次（base 末尾の JS が .card の h2 から組む。3節未満なら出さない）。 */
.toc ol { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; }
.toc li + li { margin-top: 2px; }
.toc a { display: block; padding: 4px 8px; border-left: 2px solid var(--line); color: var(--ink-2); }
.toc a:hover { border-left-color: var(--accent); color: var(--accent); text-decoration: none; }
.toc a.on { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
/* 分類・在留資格などへの移動用チップ（一覧ページのサイド）。トップの絞り込みと
   同じ角丸の形。行き先を持つリンクで、いま居るページは塗りで示す。 */
.pills .tagset { margin: 0; }
.pills .tagrow { display: block; }
.pills .tagrow .tag-label { display: none; }
.pills .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pills .tag, .pills .tag.visa {
  display: inline-flex; align-items: center; gap: 3px; margin: 0;
  font-size: 12.5px; line-height: 1.5; padding: 3px 11px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-2);
}
.pills a.tag:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pills .tag.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pills .tag.current::before { content: "✓"; font-size: 11px; }
/* サイドに置く更新カレンダー（_calendar.html をそのまま小さく見せる） */
.panel .calblock { margin: 0; }
.panel .calhead h2 { font-size: 13.5px; border: 0; padding: 0; margin: 0; }
.panel .calnav { margin-top: 6px; }
.panel .calnav-btn { font-size: 11.5px; padding: 1px 7px; }
.panel .calnav-now { font-size: 12px; }
.panel table.cal { border-collapse: separate; border-spacing: 2px; }
.panel table.cal th { font-size: 11px; padding: 2px 0; }
.panel table.cal td { border: 0; }
.panel .calday { min-height: 30px; font-size: 11.5px; border-radius: 4px; line-height: 1.15; }
.panel a.calday.on:hover { background: var(--accent); color: #fff; text-decoration: none; }
.panel a.calday.on .d { font-size: 11.5px; }
.panel a.calday.on .n { font-size: 9.5px; }
.panel .calnote { font-size: 11px; margin: 6px 0 0; }
dl.facts { margin: 0; font-size: 13px; }
dl.facts dt { color: var(--muted); font-size: 12px; font-weight: 600; margin-top: 8px; }
dl.facts dt:first-child { margin-top: 0; }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.sidelinks { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.sidelinks li + li { margin-top: 4px; }
.sidelinks .n { color: var(--muted); font-size: 12px; margin-left: 4px; }
@media (max-width: 1080px) {
  /* 目次を置く幅が無いときは本文だけにする。 */
  .layout-doc { display: block; }
  .layout-doc > .side { position: static; max-height: none; }
  .layout-doc > .side.toc { display: none; }
}
@media (max-width: 960px) {
  .wrap.wide { padding-left: 16px; padding-right: 16px; }
  main { padding-top: 16px; }
  .pagehead .wrap { padding-top: 12px; padding-bottom: 14px; }
  .pagehead h1 { font-size: 19px; }
  .pagehead .lead { font-size: 13px; }
  .card { padding: 16px; }
  .layout-side { display: block; }
  .layout-side > .side { position: static; max-height: none; overflow: visible; padding: 0; margin-top: 20px; }
  /* 一覧より先に見せたい操作（月の切り替えなど）を持つページは、サイドを上に置く。 */
  .layout-side.side-first { display: flex; flex-direction: column; }
  .layout-side.side-first > .side { order: -1; margin: 0 0 16px; }
}
h1 { font-size: 24px; line-height: 1.4; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 32px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.lead { color: var(--muted); margin: 0 0 20px; }
.tags { margin: 10px 0; }
.tag {
  display: inline-block; font-size: 12px; line-height: 1.4;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid transparent;
  border-radius: 4px; padding: 1px 7px; margin: 0 6px 6px 0;
}
/* 分類・在留資格・業種は同じ淡い塗りのチップにそろえる（2026-09-20）。以前は
   語彙が重複する（「育成就労」は分類と在留資格の両方にある）ことを理由に
   在留資格だけ枠線にしていたが、どの軸かは必ず添えるラベル（分類／在留資格／
   業種）が名指ししていて、形の違いは読み分けに使われていなかった。むしろ
   同じ大きさの箱が2種類並ぶぶん、形の差に意味を探すことになる。
   絞り込みのチップ（.p-filter。トップと検索）は `.tag.visa` ごと別の形
   （丸いトグル）に上書きしているので、ここの変更は届かない。 */
.tag.current, a.tag.current { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 業種のチップ（_tags.html の industry_chips）。語彙は分類・在留資格と重ならない
   ので形は分類と同じ塗りのまま——どの軸かはラベル文字（業種）が示す。
   行き先を持たない span なので、押せるのはトップだけ（index.html の JS が
   role="button" / tabindex を付ける）。押せる状態だけカーソルを変え、
   キーボード操作の位置が分かるようにフォーカスリングを出す。 */
.tag.industry[role="button"] { cursor: pointer; }
.tag.industry[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* チップの見た目をした絞り込みボタン（業種・手続）。`font: inherit` は
   書体だけでなく大きさも継ぐので、.tag の 12px が本文の 16px に戻り、
   すぐ上の分類・在留資格のチップ行と揃わなくなる。継ぐのは書体だけにして、
   大きさはチップの規定（12px）に任せる。 */
button.tag { font-family: inherit; cursor: pointer; }
/* トップの絞り込みの状態行（index.html）。いま何で絞っているか・何件見えて
   いるかを文字で示す。チップの塗りだけでは「絞り込み中」だと気づけない。 */
.filterbar { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.filterbar a { margin-left: 10px; }
/* 絞り込みパネル（.p-filter）の共通部品。トップ（index.html）と検索（search.html）で
   同じ語彙・同じ形のチップを使う。スマホのシート化はトップだけ（index.html）。 */
.p-filter .filterbar { margin: 10px 0 0; padding: 7px 10px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; display: flex; gap: 8px; justify-content: space-between; align-items: baseline; }
.p-filter .filterbar[hidden] { display: none; }
/* リセットは文字リンクだと見落とされた（2026-09-22 指摘）ので、枠付きのボタンにする。 */
.p-filter .filterbar { align-items: center; }
.p-filter .filterbar .clear {
  flex: none; margin: 0; padding: 3px 12px; border: 1px solid var(--accent); border-radius: 999px;
  background: var(--bg); color: var(--accent); font-family: inherit; font-size: 12px; font-weight: 600;
  line-height: 1.5; white-space: nowrap; cursor: pointer;
}
.p-filter .filterbar .clear:hover { background: var(--accent); color: #fff; }
/* 絞り込みの各群は見出し（.fgroup-label）で切れているので、罫線は引かない。 */
.fgroup { margin: 16px 0 0; }
.fgroup-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 6px; padding: 0; border: 0; }
.p-filter .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* 絞り込みのチップは角丸のトグル。一覧のタグ（角形・押すと一覧ページへ移る）と
   形を分け、「押すとこの場で絞る」ものだと見分けられるようにする。 */
.p-filter .tag, .p-filter .tag.visa {
  display: inline-flex; align-items: center; gap: 3px; margin: 0;
  font-size: 12.5px; line-height: 1.5; padding: 3px 11px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer;
}
.p-filter .tag:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.p-filter .tag.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.p-filter .tag.current::before { content: "✓"; font-size: 11px; }
.p-filter .calnote { font-size: 11.5px; color: var(--faint); margin: 8px 0 0; line-height: 1.55; }
/* 変更ログの検索フォーム（トップ・/search/）。入力欄を伸ばし、ボタンは
   登録フォームと同じ見た目にそろえる（同じ「送信」の操作なので形を分けない）。 */
.searchbox { display: flex; gap: 8px; margin: 0 0 14px; }
.searchbox input {
  flex: 1; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 4px; font-size: 15px;
}
.searchbox button {
  background: var(--accent); color: #fff; border: none; border-radius: 4px;
  padding: 8px 16px; font-size: 15px; cursor: pointer;
}
/* 形だけでは「どちらがどちら」が伝わらないので、ラベル列を添える（_tags.html） */
.tagset { margin: 10px 0; }
.tagrow {
  display: grid; grid-template-columns: 4.8em 1fr; gap: 0 8px;
  align-items: baseline; font-size: 12px;
}
.tag-label { color: var(--muted); font-weight: 600; line-height: 1.4; }
ul.changes { list-style: none; padding: 0; margin: 0; }
ul.changes li { padding: 16px 0; border-bottom: 1px solid var(--line); }
ul.changes li:first-child { border-top: 1px solid var(--line); }
ul.changes .title { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
/* 一覧の1件（_tags.html の change_item）。タイトル・要約・足元の3段で、
   種別バッジはタイトルの行頭に入れる（2026-09-19。左に幅を固定した種別の列を
   立てていたが、本文の段がその分狭くなるだけだった）。
   タイトルは地の文の色にする——全件がアクセント色の太字だと青い塊になり、
   どこで1件が切れるかが読めない。既読（:visited）は色を変えて、毎朝
   「どこまで見たか」の手がかりにする。 */
/* 余白で1件を区切る（2026-09-19 密度調整、2026-09-20 再調整）。件どうしの
   切れ目は余白だけで作り、罫線は引かない（section.day 側で消す）——線と余白の
   両方で区切ると線の方が「細かい区切り」に見えて視線が止まる。
   タイトルと足元（.itemfoot）の間は逆に詰めて（8px）、「タイトル＋付帯情報」を
   1つの塊に見せる。件間 40px : 塊内 8px の比で、どこで1件が切れるかを読ませる。
   上下をこれ以上広げると1画面に入る件数が減り、毎朝の走査でスクロールが増える。 */
ul.changes li.item { padding: 20px 0; }
ul.changes li.item .title { font-size: 15.5px; line-height: 1.6; margin: 0; }
/* 一覧のタイトルは行数を決めて切る。公式の生タイトルは長いものが多く
   （最長で100字超）、折り返すと1件の背が伸びて、40件を上から走査できない。
   切った続きは要約（summary-line）と変更詳細が担うので、見出しは「どの件か」を
   見分けるところまでで足りる。PDF マークは行末に残す——タイトルごと切ると
   「リンク先が PDF」の合図まで消える。
   行数は幅で変える: 広い段（PC）は2行、狭い段（〜960px）は3行（2026-09-20。
   以前は PC 1行・スマホ2行だったが、様式番号違いの誓約書のように末尾の
   括弧書き「(特定技能所属機関)」「(登録支援機関)」だけが違う件が同じ日に並ぶと、
   切れた2件が同じ見出しに見えて区別が付かなかった。官公庁の生タイトルは
   50〜70字が多く、PC の段幅なら2行でほぼ収まる）。 */
ul.changes li.item .title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
ul.changes li.item .title a {
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--title-lines, 2);
}
ul.changes li.item .title .pdf { flex: none; margin-left: 0; }
@media (max-width: 960px) {
  ul.changes li.item .title { --title-lines: 3; }
}
/* 一覧の PDF マークは淡い段に落とす（2026-09-20）。赤のままだとタイトルより先に
   目に入り、「新規」の札と並んで1件に強い色が2つ立つ。リンク先の性質は
   ホバーで（赤に戻して）確かめられれば足りる。詳細ページの .pdf は赤のまま。 */
ul.changes li.item .title .pdf { color: var(--faint); }
ul.changes li.item .title:hover .pdf { color: var(--pdf); }
ul.changes li.item .title a { color: var(--ink); }
ul.changes li.item .title a:hover { color: var(--accent); }
ul.changes li.item .title a:visited { color: #5f5480; }
.itemfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; }
.itemfoot .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 12px; }
/* タイトルの上の1行（発信機関＋種別・予告段階の札。_tags.html の change_item）。
   走査の最初の手がかりだが、読ませる語はタイトルなので、文字は小さく淡い段に置く。
   リンクにはしない——一覧の機関名から飛べる先は機関ごとのページで、それは
   /sources/ が持つ。行の中で押せるものが増えるほど、読み手は選択を迫られる。 */
ul.changes li.item .kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 0 0 3px; font-size: 12px; line-height: 20px; color: var(--muted);
}
ul.changes li.item .kicker .ctype { margin-right: 0; height: 20px; }
ul.changes li.item .kicker .imp { margin: 0; }
/* 投稿型の1件（2026-10-03。_tags.html の change_item と、トップの施行予定
   index.html の upgroup）。左にアバターの列、右に本文の列。変更ログの件どうしは
   細い罫線で区切る——アバターが左に縦に並ぶので、余白だけの区切りより
   「1投稿=1枠」が読みやすい（2026-09-20 の「余白だけ」はアバターの無い
   見出しリスト向けの判断）。施行予定の罫線は index.html 側が持つ。
   `:is()` で両方の一覧に同じ形を効かせる（施行予定に ul.changes を付けると
   トップの JS が変更ログとして数えてしまうので、クラスは分けたまま）。 */
.post { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; }
/* grid を指定したので、絞り込み（JS）が付ける hidden を明示的に効かせる。 */
.post[hidden] { display: none; }
ul.changes li.item.post, section.day ul.changes li.item.post { border-top: 1px solid var(--line-2); }
ul.changes li.item.post:first-child, section.day ul.changes li.item.post:first-child { border-top: 0; }
/* アバターは略称を入れた色付きの丸（_tags.html の avatar、色は site.py の AGENCY_AVATARS）。 */
.post > .avatar {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .02em;
}
.post > .avatar.av-long { font-size: 10px; letter-spacing: 0; }
.post > .avatar:hover { text-decoration: none; opacity: .85; }
.post > .pbody { min-width: 0; }
/* 頭の行: 機関名（太字＝アカウント名）· ソース名（淡い＝ハンドル）· 日付、
   右端に種別・予告段階の札。ソース名は長い（中央値20字）ので1行で切る。 */
:is(ul.changes li.item, ul.upcoming li).post .kicker {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0;
  margin: 0 0 2px; font-size: 12px; line-height: 20px; color: var(--muted);
}
.post .kicker .agency { flex: none; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.post .kicker a.agency:hover { color: var(--accent); }
.post .kicker .handle {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--faint);
}
.post .kicker .handle:hover { color: var(--accent); }
.post .kicker .pdate { flex: none; color: var(--faint); }
.post .kicker .pdate::before { content: "·"; margin-right: 6px; }
.post .kicker .badges { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
/* 見出しは投稿の本文の1行目。太字を少し落とし、要約と1つの塊に見せる。 */
ul.changes li.item.post .title { font-size: 15px; }
/* 要約は切らずに全文を出す（2026-10-03）。投稿型にした当初は2行で切っていたが、
   結論の手前で止まって詳細を開かないと読めない件が多かった。要約は中央値46字・
   9割が126字以内で、全文にしても一覧の背は大きく伸びない。 */
@media (max-width: 560px) {
  .post { grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; }
  .post > .avatar { width: 34px; height: 34px; font-size: 11.5px; }
  .post > .avatar.av-long { font-size: 9px; }
  /* 狭い画面ではソース名を落とし、機関名と日付と札だけにする。 */
  .post .kicker .handle { display: none; }
}
.itemfoot .tagline { margin: 0; }
@media (max-width: 560px) {
  ul.changes li.item { padding: 16px 0; }
}
ul.changes .meta { font-size: 13px; color: var(--muted); }
/* 一覧の要約行。公式の生タイトルだけでは「何が変わったか」が分からないため、
   承認済みの要約を本文として1行下に添える。行数のクランプはしない——
   途中で切ると読者が詳細を開くまで結論が分からず、要約の意味が薄れる。 */
ul.changes .summary-line { font-size: 14.5px; margin: 2px 0 4px; }
ul.changes li.item .summary-line { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); margin: 3px 0 0; }
/* 施行日は「いつから効くか」の答えなので、メタ行の中でここだけ地の文の色に
   戻して太字にする（士業ペルソナが最初に拾う手がかり）。 */
ul.changes .effective { font-weight: 600; color: var(--ink); }
.itemfoot .effective { font-weight: 700; color: var(--eff); background: var(--eff-soft); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
/* 一覧用の1行タグ表示（_tags.html の tagline）。ラベルとチップを同じ行に
   流し、狭い画面では折り返す。`tagset` のようなラベル列は作らない。
   そろえるのは箱の中心ではなく文字のベースライン（2026-09-20）。ラベル（11px）と
   値（12px）は大きさが違うので、中心をそろえるとラベルの文字だけが値より
   上に浮き、「分類」と「特定技能」が同じ行に乗っていないように見える。
   折り返しの多い狭い画面では1件に3回このずれが出るので目に付く。
   ラベル列を持つ `tagrow` も同じ理由で baseline。 */
.tagline {
  display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline;
  font-size: 12px; margin: 6px 0 0;
}
/* 行内に並べるので、チップ自身の外側マージンは打ち消して gap に任せる。 */
.tagline .tag { margin: 0; }
.itemfoot .tagline .tag-label { font-weight: 400; color: var(--faint); font-size: 11px; }
/* 軸（分類／在留資格／業種）の境目は、同じ軸の値どうしの「/」より広く空ける
   （2026-09-20）。「特定技能 / 外国人雇用・労務 在留資格 特定技能1号」のように
   値とラベルが同じ間隔で並ぶと、どこまでが分類の値かを一度読み直すことになる。
   ラベルの直前に淡い「·」を置き、余白と点の二重で軸の切れ目を示す（値どうしの
   「/」とは記号を変えて、同じ軸の続きか別の軸かを記号でも読み分けられる）。
   点は行内に流す——絶対配置の罫線だと、ラベルが行頭に折り返したとき
   段の余白にはみ出す。 */
.itemfoot .tagline .tag-label ~ .tag-label { margin-left: 8px; }
.itemfoot .tagline .tag-label ~ .tag-label::before { content: "·"; color: var(--line); margin-right: 8px; }
/* 狭い画面ではラベルが行頭に折り返すことがあるので、間隔は少し詰める。 */
@media (max-width: 560px) {
  .itemfoot .tagline .tag-label ~ .tag-label { margin-left: 5px; }
  .itemfoot .tagline .tag-label ~ .tag-label::before { margin-right: 5px; }
}
/* 一覧の足元のタグも詳細ページと同じチップ（淡い塗り／枠線）で出す
   （2026-09-20）。2026-09-19 にここだけ「箱にせず淡い文字＋『/』区切り」に
   していたが、一覧と詳細で同じ語の見た目が変わり、一覧で見た語を詳細で
   探し直すことになっていた。値の切れ目もチップの形そのものが示すので、
   「/」の区切り記号は置かない（箱と記号の二重は読み取る手がかりが増えるだけ）。
   色・大きさ・余白はすべて上の `.tag` の既定に任せる（3軸とも同じ淡い塗り）
   ——ここで上書きを増やすほど、一覧と詳細がまた食い違う。 */
.itemfoot .tagline a.tag:hover { text-decoration: underline; text-underline-offset: 2px; }
.itemfoot .tagline .tag.industry[role="button"]:hover { text-decoration: underline; text-underline-offset: 2px; }
/* トップの日付見出し（index.html）。件数を右端に添えて、その日にどれだけ
   動きがあったかを一目で分かるようにする。 */
h3.daygroup {
  display: flex; align-items: baseline;
  gap: 10px; font-size: 15px; font-weight: 700;
  margin: 14px 0 0; padding-bottom: 6px;
}
/* 日付グループを section.day で包んだので、h3 の :first-of-type は
   セクションごとに効いてしまう。2つ目以降の日付グループだけを離すには
   「先行する日付グループがある」ことを兄弟セレクタで見る。 */
section.day ~ section.day h3.daygroup { margin-top: 28px; }
h3.daygroup .daycount { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
/* 今日／昨日／N日前（トップだけ）。日付だけでは「どれだけ前か」を数えることになる。 */
h3.daygroup .dayrel { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
h3.daygroup .dayrel.today { color: #fff; background: var(--accent); border-radius: 4px; padding: 0 7px; }
/* 日付グループは白いカード（トップ・月別・分類・在留資格・ソース別で共通）。
   見出しは帯にして、スクロール中も上に残す。 */
section.day { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; margin: 0 0 16px; }
h3.daygroup, section.day ~ section.day h3.daygroup {
  position: sticky; top: 0; z-index: 2; margin: 0; padding: 10px 18px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0; scroll-margin-top: 8px;
}
/* カード内の件どうしは罫線を引かず余白で区切る（2026-09-20。ul.changes li.item の
   注記を参照）。折りたたみの要約行は地色（--soft）が付くので、それ自体が区切りになる。 */
section.day ul.changes li.item { padding-left: 18px; padding-right: 18px; border-top: 0; border-bottom: 0; }
section.day details.fold { border-bottom: 0; border-top: 0; }
section.day details.fold > summary { padding: 10px 18px; background: var(--soft); }
section.day details.fold:last-child > summary { border-radius: 0 0 8px 8px; }
section.day details.fold > ul.changes li.item:first-child { border-top: 0; }
@media (max-width: 960px) {
  h3.daygroup, section.day ~ section.day h3.daygroup { padding: 9px 14px; }
  section.day ul.changes li.item { padding-left: 14px; padding-right: 14px; }
  section.day details.fold > summary { padding: 10px 14px; }
}
/* 大量掲載日の折りたたみ。同じ日に同じソースから一括で載った分は、
   先頭数件を残して畳む（1ソースの一括追加で他ソースの変更が埋もれるのを防ぐ）。
   施行日が確定したものは畳まない。開閉は <details> なので JS に依存しない。 */
details.fold { border-bottom: 1px solid var(--line); }
details.fold > summary {
  cursor: pointer; padding: 10px 0; font-size: 13.5px; color: var(--accent);
  list-style: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸ "; color: var(--muted); }
details.fold[open] > summary::before { content: "▾ "; }
details.fold > ul.changes li:first-child { border-top: 1px solid var(--line); }
details.fold > ul.changes li:last-child { border-bottom: 0; }
/* 更新カレンダー（_calendar.html）。装飾は最小限にして、件数のある日だけを
   塗りで浮かせる。色を使えない環境でも太字と数字の有無で区別できる。 */
.calblock { margin: 26px 0 10px; }
.calhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.calhead h2 { margin: 0; }
/* 前後の月の送り。矢印を左右に振り分け、真ん中に今の月。端では押せない見た目で残す。 */
.calnav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0 0; }
.calnav-now { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.calnav-btn {
  font-size: 13px; line-height: 1.6; border: 1px solid var(--line);
  border-radius: 4px; padding: 3px 10px; white-space: nowrap;
}
a.calnav-btn:hover { border-color: var(--accent); text-decoration: none; }
.calnav-btn.off { color: var(--muted); opacity: .55; border-style: dashed; }
table.cal { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 8px 0 0; }
table.cal th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 0 6px; text-align: center; }
table.cal td { border: 1px solid var(--line); padding: 0; text-align: center; }
table.cal td.empty { border-color: transparent; }
.calday {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 44px; font-size: 12px; color: var(--muted); text-decoration: none;
}
a.calday.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
a.calday.on .d { font-size: 13px; }
a.calday.on .n { font-size: 11px; font-weight: 400; }
a.calday.on .n::after { content: "件"; }
.calnote { font-size: 12px; color: var(--muted); margin: 8px 0 12px; }
/* 注記の折りたたみ（details.info）。閉じた状態は ⓘ＋短い見出しだけ。 */
details.info { margin: 8px 0 12px; }
details.info > summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  list-style: none; font-size: 12px; color: var(--faint);
}
details.info > summary::-webkit-details-marker { display: none; }
details.info > summary::before {
  content: "i"; display: inline-grid; place-items: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid currentColor; font: italic 600 9.5px/1 Georgia, serif;
}
details.info > summary:hover, details.info[open] > summary { color: var(--accent); }
details.info .calnote { margin: 6px 0 0; }
/* 変更の種別バッジ（_tags.html の ctype）。カプセル型＋アイコン。
   色は3種とも同じ緑の淡色塗り（--ctype-soft）＋緑文字で、種別はアイコンと
   ラベルだけで分ける（2026-09-20）。緑にしたのは、同じ行に並ぶ分類・在留資格・
   業種のチップが紺の淡色（--accent-soft）を使うようになり、同じ色の箱が
   5〜6個並んで札が埋もれたため。色相を分けたので、札が「種別」だと
   ひと目で切り分けられる：
     新規     … ✦
     項目更新 … 循環矢印
     本文更新 … 書類
   暖色（--warn / --eff）は「予告段階」「施行日」の札が使っているので避ける。
   ラベルの文字とアイコンの形でも種別が分かるので、色が読めなくても伝わる。 */
.ctype {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .02em; line-height: 1; white-space: nowrap;
  height: 22px; padding: 0 10px 0 8px; margin-right: 8px;
  border-radius: 999px; border: 0;
  color: var(--ctype); background: var(--ctype-soft);
  vertical-align: 1px;
  -webkit-font-smoothing: antialiased;
}
.ctype .ci { width: 12px; height: 12px; flex: none; }
/* 3種とも同じ淡色の塗り（2026-09-20）。以前は新規＝紺の塗り＋白文字、
   本文更新＝灰の淡色と色で段を付けていたが、一覧の8割が新規で行ごとに紺の塊が
   立つとタイトルより先に目に入り、見出し右端の「新規N件」とも重複していた。
   一度、全件が新規の日だけ淡色に落としてみたが、日をまたいで同じ語が色違いで
   並ぶと別種別に読めた。色で分けるのをやめ、アイコンとラベルだけで読み分ける。
   色相を紺から緑へ移したあとも、この「3種は色分けしない」は据え置き
   （分けるのはタグとの区別であって、種別どうしの区別ではない）。
   .ctype 本体が --ctype-soft を持つので、種別ごとの上書きは置かない。 */
/* 重要度バッジ（_tags.html の importance）。種別バッジと同じ形にそろえる。
   一覧では「中」だけを「予告段階」という語で出し（高は施行日の札が示す）、
   判定の根拠（施行日の有無・出所という事実）は title に添える。
   色が読めなくても語そのもので伝わる。 */
.imp {
  display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.6;
  border-radius: 3px; padding: 0 6px; margin-right: 8px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
  vertical-align: 2px;
}
.imp.high { border-color: var(--del); color: var(--del); }
.imp.mid { border-color: var(--warn); color: var(--warn); }
/* 一覧の「予告段階」は塗りの札（施行日の札と同じ形・色違い）。種別の右に置く。 */
ul.changes li.item .kicker .imp.mid { border-color: transparent; background: var(--warn-soft); font-size: 12px; line-height: 1.7; vertical-align: 0; }
/* PDF マーク。タイトル末尾のファイルサイズ表記は表示時に落とすが（例は
   _tags.html の pdfmark を参照。この CSS は全ページに載るので、ここに
   表記の実例を書くと落とせたかどうかの grep が効かなくなる）、
   「リンク先が PDF」という合図だけは残す（開く前にブラウザ内で読めるか
   ダウンロードになるかが分かる）。判定は URL の拡張子で、文言は見ない。
   種別・重要度と違ってタイトルの後ろに置くので、余白は左に取る。 */
/* 塗りの札にすると、すぐ隣の「施行日」「予告段階」の札と重さが並び、
   タイトルより先に目に入ってしまう。枠は持たせず、書類のしるしと赤い文字だけで
   「リンク先が PDF」を伝える。しるしは CSS のマスクで描く（外部リクエスト無し。
   マスクが効かない環境では赤い PDF の文字だけが残る）。 */
.pdf {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; line-height: 1.5;
  margin-left: 7px; vertical-align: 1px;
  color: var(--pdf); white-space: nowrap; letter-spacing: .02em;
}
.pdf::before {
  content: ""; width: 10px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M2 0h11l5 5v19H2z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M12.6 0.6v5.8h5.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M2 0h11l5 5v19H2z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M12.6 0.6v5.8h5.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 今後の施行予定（index.html）。日付ごとに束ね、見出しに「あと何日」を添える。
   項目はタイトル＋要約の2行——生タイトルだけでは「その日に何が起きるか」が
   読めない（例: 「Q&Aを更新しました」の施行日が制度の運用開始日）ため、
   要約に意味を担わせる。一覧（change_item）ほど情報を載せないのは、
   このセクションが一覧より上にあり、伸びるほど一覧が押し出されるため。 */
.upgroup { margin: 10px 0 0; }
h3.update {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 14px; font-weight: 600; margin: 0; padding: 6px 0 4px;
  border-bottom: 1px solid var(--line);
}
h3.update span { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }
ul.upcoming { list-style: none; padding: 0; margin: 0; }
ul.upcoming li { padding: 7px 0 7px 12px; border-left: 2px solid var(--accent-soft); margin: 6px 0 0; }
ul.upcoming .ut { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.5; }
ul.upcoming .us { margin: 2px 0 0; font-size: 13.5px; line-height: 1.6; }
ul.upcoming .meta { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
/* 支援技術にだけ渡す文字（画面には出さない）。差分の「追加/削除」など、
   色と記号でしか表していない情報を読み上げに補う。 */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 変更詳細: 本文差分。1行1件で、行頭の記号・左の色帯・地色の3つで
   追加と削除を示す（色覚特性によらず区別できるようにするため）。 */
.diff-legend { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.6; }
.diff-legend .k { font-weight: 600; white-space: nowrap; }
.diff-legend .k.add { color: var(--add); }
.diff-legend .k.del { color: var(--del); }
.diff {
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: var(--bg);
}
.diff-line {
  display: grid; grid-template-columns: 1.5em 1fr; gap: 8px;
  margin: 0; padding: 5px 12px 5px 6px; font-size: 14.5px; line-height: 1.65;
  border-left: 3px solid transparent;
}
.diff-line + .diff-line { border-top: 1px solid #eef1f4; }
.diff-line .sign { font-weight: 700; text-align: center; user-select: none; }
.diff-line .txt { min-width: 0; overflow-wrap: anywhere; }
.diff-line.add { background: var(--add-bg); border-left-color: var(--add); }
.diff-line.add .sign { color: var(--add); }
.diff-line.del { background: var(--del-bg); border-left-color: var(--del); }
.diff-line.del .sign { color: var(--del); }
.diff-line.ctx { color: var(--muted); }
/* 行内のどこが書き換わったか。1行の差し替え（日付の変更など）で効く。 */
.diff-line mark { color: inherit; padding: 0 1px; border-radius: 2px; }
.diff-line.add mark { background: var(--add-mark); }
.diff-line.del mark { background: var(--del-mark); }
.diff-hunk, .diff-note {
  margin: 0; padding: 5px 12px; background: var(--soft); color: var(--muted);
  font-size: 12.5px; border-top: 1px solid var(--line);
}
.diff-hunk:first-child, .diff-note:first-child { border-top: 0; }
/* 同じ様式の複数ファイルをまとめた変更の、ファイルごとの見出し */
.diff-file {
  margin: 0; padding: 8px 12px; background: var(--soft); color: var(--ink);
  font-size: 13.5px; font-weight: 700; border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.diff-file:first-child { border-top: 0; }
@media (max-width: 560px) {
  .diff-line { grid-template-columns: 1.2em 1fr; gap: 6px; padding-right: 8px; font-size: 14px; }
}
/* 変更詳細: ラベル列と値列を分けた定義リスト（項目名と値の混同を防ぐ） */
dl.detail { margin: 22px 0 8px; border-top: 1px solid var(--line); }
dl.detail > div {
  display: grid; grid-template-columns: 9.5em 1fr; gap: 2px 18px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
dl.detail dt { font-size: 13px; color: var(--muted); font-weight: 600; line-height: 2; }
dl.detail dd { margin: 0; }
dl.detail dd ul { margin: 0; padding-left: 1.2em; }
@media (max-width: 560px) {
  dl.detail > div { grid-template-columns: 1fr; padding: 10px 0; }
  dl.detail dt { line-height: 1.5; }
  /* 狭い画面ではラベルを上に積む（横並びだとチップ側が1〜2語しか入らない） */
  .tagrow { grid-template-columns: 1fr; }
  .tag-label { margin-bottom: 3px; }
}
.callout {
  background: var(--soft); border: 1px solid var(--line);
  border-radius: 6px; padding: 14px 16px; margin: 20px 0; font-size: 14px;
}
.callout.notice { background: var(--accent-soft); border-color: #cfe0ef; }
/* 設定フォーム（旧購読フォーム）。各画面とも
   「選んで保存する」同じ操作なので、面の文字は callout と同じ 14px にそろえ、
   中の操作部品もその面を継ぐ。ボタン・入力・セレクトは親の font を継がない
   ため、面ごとに明示しないと本文の 16px（`font: inherit`）とブラウザー既定の
   13.33px（無指定の select・button）が同じフォームの中に混在する。注記は
   他ページと同じく .calnote（12px）に置く。例外は旧購読フォームの入力・送信で、
   こちらは検索フォーム（.searchbox）と対の見た目なので 15px を明示している。 */
.setform { font-size: 14px; }
.setform button, .setform input, .setform select { font: inherit; }
.source-link { word-break: break-all; }
table.sources { width: 100%; border-collapse: collapse; font-size: 14px; }
table.sources th, table.sources td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.sources th { color: var(--muted); font-weight: 600; white-space: nowrap; }
/* 発信機関の見出し行。ソース行と地続きに見えないよう、面で区切る。 */
table.sources tr.agency th {
  background: var(--soft); color: var(--ink); font-size: 14px;
  white-space: normal; padding: 10px 8px; border-bottom: 1px solid var(--line);
}
table.sources tr.agency th span {
  color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 10px;
}
/* 機関見出しのアイコン。所管領域を表す自作の線画（sources.html の <symbol>）で、
   省庁の公式ロゴは使わない。機関名より一段薄くし、走査の手がかりに留める。 */
.agency-icon {
  width: 18px; height: 18px; vertical-align: -3.5px;
  margin-right: 7px; color: var(--muted);
}
/* 一覧・変更詳細の機関名に添える小さい版（_tags.html の agency_icon）。
   色は周りの文字に合わせる（一覧・詳細とも --muted）——機関名より
   アイコンが濃いと、走査で先にアイコンを読むことになる。 */
.agency-icon.sm {
  width: 15px; height: 15px; vertical-align: -3px;
  margin-right: 4px; color: inherit;
  /* 24x24 で引いた線画を 15px に落とすと線幅 1.6 は 1px を切ってかすれる。
     機関見出し（18px）と同じ濃さに見えるところまで太らせる。 */
  stroke-width: 2;
}
/* 変更詳細の掲載元。アイコンとソース名をひと塊にして、狭い画面で
   アイコンだけが前の行に残らないようにする（.src-meta は flex）。 */
.src-meta .srcname { display: inline-flex; align-items: center; }
.empty { color: var(--muted); padding: 24px 0; }
footer.site { border-top: 1px solid var(--line); background: var(--soft); margin-top: 40px; }
footer.site .wrap { padding-top: 24px; padding-bottom: 32px; }
footer.site .disclaimer { font-size: 13px; color: var(--muted); margin: 0 0 14px; max-width: 860px; }
footer.site .links { font-size: 13px; }
footer.site .links a { margin-right: 14px; display: inline-block; margin-bottom: 6px; color: var(--muted); }
footer.site .copy { font-size: 12px; color: var(--muted); margin-top: 14px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.updated { font-size: 12px; color: var(--muted); margin-top: 8px; }