/* ==========================================================================
   STATUS: DRAFT(代表確認前)
   Univo｜サイトの共通の型（2026/10/08 site-unify-261008）

   全ページで同じにするもの＝書体・文字の大きさの段階・見出しの形・ヘッダ・フッタ・規程の型・部品。
   値は assets/univo-tokens.css（.univo-tokens の下）を var() で読むだけ（色コード・書体名を書かない）。
   このファイルは univo-tokens.css の後に読む。body に class="univo-tokens site" を付ける。

   ⚠ 文字の大きさの段階 --fs-*・3 節のヘッダ・4 節のフッタは、ブランドの値の提案（#2・#6・#7）を入れたもの＝2026/10/09 代表決定
     （brand-tokens.md §2-4・原則 §4.4.2）。--fs-* の8段は 2026/10/09 に univo-tokens.css へ移した（ここには置かない）。
   ヘッダとフッタの HTML の正本は lp_src/_build/site-header.fragment.html・site-footer.fragment.html
   （lp_src/_build/sync-site-chrome.mjs がページへ写す。ページの中の SITE_HEADER／SITE_FOOTER の目印の間は手で直さない）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 型の寸法（トークンから作る＝新しい数を持たない）。
      文字の大きさの段階 --fs-* は univo-tokens.css（2026/10/09 代表決定で正本の値＝brand-tokens.md §2-4）。
      同じセレクタ（.univo-tokens）で、このファイルは後に読まれる＝ここに --fs-* を置くと正本の値を上書きする（置かない）
   -------------------------------------------------------------------------- */
.univo-tokens {
  --site-header-h: calc(var(--space-8) + var(--space-2));  /* 64px＝トップのヘッダと同じ高さ */
  --site-tap: calc(var(--space-8) - var(--space-3));        /* 44px：指で押せる大きさの下限 */
  --site-measure: 34em;                                     /* 本文の1行の長さの上限（約34字）＝トップの --corp-measure と同じ */
}

/* --------------------------------------------------------------------------
   2. 土台。要素への既定は :where() で詳細度 0（部品の規則に勝たない）
   -------------------------------------------------------------------------- */
/* OS のダーク設定・ブラウザの自動の暗色化でも白基調のまま（トップと同じ） */
html:has(> body.site) { color-scheme: light; color-scheme: only light; }
.site {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  color-scheme: only light;
}
.site *, .site *::before, .site *::after { box-sizing: border-box; }
:where(.site) :where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd, figure, blockquote, address) { margin: 0; }
:where(.site) :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
:where(.site) :where(address) { font-style: normal; }
:where(.site) :where(img, svg) { max-width: 100%; height: auto; }
:where(.site) :where(button, input, select, textarea) { font: inherit; }
/* 文中のリンク＝小さい文字の橙（--brand-deep）＋下線 */
:where(.site) :where(a) { color: var(--brand-deep); text-decoration: underline; text-decoration-thickness: var(--stroke); text-underline-offset: 0.25em; }
:where(.site) :where(a:hover) { text-decoration-thickness: var(--stroke-accent); }
:where(.site) :focus-visible { outline: var(--stroke-accent) solid var(--brand); outline-offset: var(--space-1); }
:where(.site) ::selection { background: var(--brand-deep); color: var(--on-brand-deep); }
.site [hidden] { display: none !important; }

.site-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.site-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.site-nobr { white-space: nowrap; }

.site-skip {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-12)); z-index: 100;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: var(--fs-note);
}
.site-skip:focus { top: var(--space-2); }
#main { outline: none; }

.site-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.site-wrap-text { max-width: calc(var(--max-w-text) + 2 * var(--gutter)); }

/* --------------------------------------------------------------------------
   3. ヘッダ（提案 #6）：上に固定・地 --surface の無地＋下辺 --line・上辺に --brand の帯（--stroke-accent）
      左＝ロゴ（--fs-heading-s）／中＝ナビ（任意・--fs-note・いまの節は --brand の下線）／右＝申込ボタン1つ
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); color: var(--ink);
  border-top: var(--stroke-accent) solid var(--brand);
  border-bottom: var(--stroke) solid var(--line);
}
.site-header-in {
  max-width: var(--max-w); margin: 0 auto; min-height: var(--site-header-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: var(--space-4);
}
.site-logo {
  margin-right: auto; display: inline-flex; align-items: center; min-height: var(--site-tap);
  font-family: var(--font-logo); font-weight: 400; font-size: var(--fs-heading-s); line-height: 1; letter-spacing: 0;
  color: var(--logo-navy); text-decoration: none;
}
.site-logo:hover { text-decoration: none; }
.site-logo-v { color: var(--brand); }
.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--site-tap);
  font-size: var(--fs-note); line-height: var(--lh-head); color: var(--ink); text-decoration: none;
  border-bottom: var(--stroke-accent) solid transparent;
  transition: color var(--motion-duration-ui) var(--motion-ease), border-color var(--motion-duration-ui) var(--motion-ease);
}
/* ホバー＝文字 --brand-deep・下線なし／いまの節＝--brand の下線（原則 §4.4.2・2026/10/09 代表決定 D261009070111e9b2。
   ホバーといまの節を同じ形にしない＝同じ形だと、ホバーしたときに「いまの節」が2つあるように見える） */
.site-nav a:hover { color: var(--brand-deep); border-bottom-color: transparent; text-decoration: none; }
.site-nav a[aria-current] { border-bottom-color: var(--brand); }

.site-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--site-tap); padding: var(--space-2) var(--space-6);
  border: var(--stroke) solid var(--brand-deep); border-radius: var(--radius-full);
  background: var(--brand-deep); color: var(--on-brand-deep); /* 2026/10/09 206号：地 --brand-deep・文字 白（改訂前＝地 --brand・文字 紺） */
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-note); line-height: var(--lh-head);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--motion-duration-ui) var(--motion-ease), border-color var(--motion-duration-ui) var(--motion-ease), color var(--motion-duration-ui) var(--motion-ease);
}
.site-btn:hover { text-decoration: none; } /* 色は変えない（矢印が進む＝下の部品） */
.site-btn-sm { padding: var(--space-2) var(--space-4); }
.site-btn-lg { min-height: var(--space-8); padding: var(--space-3) var(--space-8); font-size: var(--fs-body); }
/* 線のボタン（2つ目の操作）。地を塗らない */
.site-btn-line { background: transparent; color: var(--ink); border-color: var(--muted); }
.site-btn-line:hover { background: transparent; color: var(--brand-deep); border-color: var(--brand-deep); }
/* 行き先へ進むボタンの矢印（→）＝原則 §4.6.9・トークン §8-2（2026/10/09 206号・代表決定 D261009122812532e）。
   置く＝申込ボタン・線のボタン・「次へ」と送信・応募（文言の後ろ）。置かない＝メニュー・閉じる・動きを止める・絞り込み・日や時間枠の選択・戻る・空に戻す・印刷。
   マウスで触れたときだけ矢印が右へ進む。ボタンの位置・大きさ・文字・色は動かさない。CSS だけ（JS 無しでも同じ・止める手段の対象外）。
   :is(a, button) で .corp-btn・.btn-apply・.cf-btn・営業用LP の SonarButton も同じ1つの規則で動く。読み上げない（aria-hidden） */
.site-btn-arrow { flex: none; inline-size: 1em; block-size: 1em; overflow: visible; }
.site-btn-arrow path { fill: none; stroke: currentColor; stroke-width: var(--stroke-accent); stroke-linecap: butt; stroke-linejoin: miter; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .site-btn-arrow { transition: transform var(--motion-duration-ui) var(--motion-ease); }
  :is(a, button:not(:disabled)):hover > .site-btn-arrow { transform: translateX(var(--motion-hover-shift)); }
}

.site-menu-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--site-tap); padding: 0 var(--space-3);
  background: transparent; color: var(--ink);
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: var(--fs-note); cursor: pointer;
}
.site-menu-btn svg { width: var(--space-4); height: var(--space-3); }
.site-menu-btn svg line { stroke: currentColor; stroke-width: var(--stroke-accent); }
@media (min-width: 64em) {
  .site-nav { display: block; margin-right: var(--space-4); }
  .site-menu-btn { display: none; }
}
/* 狭い幅：ロゴ・申込・メニューが1行に収まるように（360px で 44px の押せる大きさを保つ） */
@media (max-width: 23.99em) {
  .site-header-in { gap: var(--space-2); }
  .site-header .site-btn { padding-inline: var(--space-3); }
  .site-menu-btn { padding-inline: var(--space-2); }
}

/* スマートフォンのメニュー（白い面）。assets/univo-site.js が開閉する。JS が無いときはボタンごと出ない */
.site-menu { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--surface); color: var(--ink); }
.site-menu-in { min-height: 100%; padding: var(--space-4) var(--gutter) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.site-menu-close {
  align-self: flex-end; min-height: var(--site-tap); padding: 0 var(--space-4);
  background: transparent; color: var(--ink);
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: var(--fs-note); cursor: pointer;
}
.site-menu-list { list-style: none; margin: 0; padding: 0; display: grid; }
.site-menu-list a {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: var(--stroke) solid var(--line);
  font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-head);
  color: var(--ink); text-decoration: none;
}
.site-menu-no { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-index); letter-spacing: var(--ls-label); color: var(--brand-deep); }
.site-menu-in > .site-btn { align-self: flex-start; }
html.site-menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   4. フッタ（提案 #7）：地 --paper＋上辺に --brand の帯（--stroke-accent）
      ロゴ（添え書き）→ 案内・規程・事業者 の3群（見出しは和文）→ 最下段「© 2026 Univo」と営業日カレンダー
      文字は --fs-note、リンクは --ink（ホバー --brand-deep＋下線）
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--paper); color: var(--ink);
  border-top: var(--stroke-accent) solid var(--brand);
  padding: var(--space-8) 0 var(--space-6);
  font-size: var(--fs-note); line-height: var(--lh-body);
}
@media (min-width: 64em) { .site-footer { padding-top: var(--space-12); } }
.site-footer-in { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.site-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 40em) { .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); } }
@media (min-width: 64em) { .site-footer-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 4fr); } }
.site-footer-brand .site-logo { font-size: var(--fs-heading); min-height: 0; }
.site-footer-sub { margin-top: var(--space-2); color: var(--logo-navy); }
/* 群の見出しは --muted（事業者の群の項目名と同じ役＝ラベル。原則 §4.4.2・2026/10/09 代表決定） */
.site-footer-h {
  margin: 0 0 var(--space-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-note);
  line-height: var(--lh-head); color: var(--muted);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; }
.site-footer-group a, .site-footer-bottom a {
  display: inline-flex; align-items: center; min-height: var(--site-tap);
  color: var(--ink); text-decoration: none; line-height: var(--lh-head);
}
.site-footer-group a:hover, .site-footer-bottom a:hover { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 0.25em; }
.site-footer-fmt { color: var(--muted); }
.site-footer-dl { display: grid; gap: var(--space-1); }
.site-footer-dl > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: var(--space-3); }
.site-footer-dl dt { color: var(--muted); }
.site-footer-dl dd { margin: 0; }
.site-footer-dl a { display: inline; min-height: 0; text-decoration: underline; text-underline-offset: 0.25em; }
/* 電話の受付の時間（番号の横・狭い幅では次の行へ折り返す）。2026/10/09 代表決定 D2610090701132731 ⑤ */
.site-footer-hours { display: inline-block; color: var(--muted); }
.site-footer-bottom {
  margin-top: var(--space-8); padding-top: var(--space-4); border-top: var(--stroke) solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6);
}
/* 最下段：「© 2026 Univo」は --muted、営業日カレンダーはリンクなので --ink（原則 §4.4.2）。SECURITY ACTION の印はフッタに置かない（D2610090701468619） */
.site-copy { color: var(--muted); }
.site-copy small { font-size: inherit; }

/* --------------------------------------------------------------------------
   5. ページの頭（下層のページ）と章
   -------------------------------------------------------------------------- */
.site-main { display: block; }
.site-pagehead { background: var(--surface); border-bottom: var(--stroke) solid var(--line); }
.site-pagehead-in { max-width: var(--max-w); margin: 0 auto; padding: var(--space-8) var(--gutter); }
@media (min-width: 64em) { .site-pagehead-in { padding-top: var(--space-12); padding-bottom: var(--space-8); } }
.site-label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: var(--ls-label); line-height: var(--lh-head);
  color: var(--muted);
}
.site-label-no, .site-label-accent { color: var(--brand-deep); }
.site-h1, .site-h2, .site-h3 {
  font-family: var(--font-serif-jp); font-weight: 600; line-height: var(--lh-head); letter-spacing: var(--ls-head);
  color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase; text-wrap: balance;
}
.site-h1 { font-size: var(--fs-heading); }
.site-h2 { font-size: var(--fs-heading); }
.site-h3 { font-size: var(--fs-heading-s); }
.site-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-head); color: var(--ink); }
.site-lead { max-width: var(--site-measure); margin-top: var(--space-4); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink); text-wrap: pretty; }
:where(.site) :where(p, li, dd) { text-wrap: pretty; }
.site-note { font-size: var(--fs-note); line-height: var(--lh-body); color: var(--muted); }
.site-prose { max-width: var(--site-measure); }
.site-prose > * + * { margin-top: var(--space-4); }

.site-sec { background: var(--paper); padding: var(--space-8) 0; scroll-margin-top: var(--site-header-h); }
.site-sec + .site-sec { border-top: var(--stroke) solid var(--line); }
.site-sec-surface { background: var(--surface); }
@media (min-width: 64em) { .site-sec { padding: var(--space-12) 0; } }
.site-sec-head { max-width: var(--max-w-text); margin-bottom: var(--space-6); }
@media (min-width: 64em) { .site-sec-head { margin-bottom: var(--space-8); } }

/* カード（影は使わない＝--line の縁） */
.site-card { background: var(--surface); border: var(--stroke) solid var(--line); border-radius: var(--radius); padding: var(--space-6) var(--space-4); }
@media (min-width: 40em) { .site-card { padding: var(--space-6); } }

/* 札（タグ・状態）。文字は --fs-note 以上 */
.site-tag {
  display: inline-flex; align-items: center; min-height: calc(var(--space-6) - var(--space-1)); padding: 0 var(--space-3);
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full);
  font-size: var(--fs-note); line-height: var(--lh-head); color: var(--ink); background: var(--surface);
}

/* 表 */
.site-table-wrap { max-width: 100%; overflow-x: auto; }
.site-table { width: 100%; border-collapse: collapse; font-size: var(--fs-note); line-height: var(--lh-body); }
.site-table th, .site-table td { padding: var(--space-2) var(--space-3); border: var(--stroke) solid var(--line); text-align: left; vertical-align: top; }
.site-table th { background: var(--surface); font-weight: 600; color: var(--ink); }
.site-table td { background: var(--surface); color: var(--ink); }
.site-table-kv th { width: 30%; }
/* 狭い幅：見出しのある表は行を縦に積む（列の名前を各欄の上に出す＝文字は同じ・data-label は列の名前の写し） */
@media (max-width: 39.99em) {
  .site-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .site-table-stack, .site-table-stack tbody, .site-table-stack tr, .site-table-stack th, .site-table-stack td { display: block; width: 100%; }
  .site-table-stack tr { border: var(--stroke) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
  .site-table-stack tr + tr { margin-top: var(--space-3); }
  .site-table-stack th, .site-table-stack td { border: 0; border-top: var(--stroke) solid var(--line); }
  .site-table-stack tr > :first-child { border-top: 0; }
  .site-table-stack [data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-note); font-weight: 400; line-height: var(--lh-head); color: var(--muted); margin-bottom: var(--space-1); }
  .site-table-kv th { width: 7em; }
}

/* 申込の帯（ページの終わり）。白い面＋--line の罫 */
.site-cta-band { background: var(--surface); border-top: var(--stroke) solid var(--line); }
.site-cta-band-in { max-width: var(--max-w); margin: 0 auto; padding: var(--space-8) var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.site-cta-band p { max-width: var(--site-measure); }

/* --------------------------------------------------------------------------
   6. 規程の型（利用規約・特定商取引法に基づく表記・プライバシーポリシー・情報セキュリティ基本方針・NDA）
      表題 → 改定日と版（.doc-meta）→ 前文 → 目次（条で成る文書だけ）→ 条（.doc-art）→ 改定の記録（.doc-history）
   -------------------------------------------------------------------------- */
.doc { max-width: calc(48rem + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-12); }
.doc-head { padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: var(--stroke) solid var(--line); }
.doc-title { font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-heading); line-height: var(--lh-head); letter-spacing: var(--ls-head); color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase; text-wrap: balance; }
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); margin-top: var(--space-4); font-size: var(--fs-note); line-height: var(--lh-body); color: var(--muted); }
.doc-meta > div { display: flex; flex-wrap: wrap; }
.doc-meta dt { color: var(--muted); }
.doc-meta dt::after { content: "："; }
.doc-meta dd { margin: 0; color: var(--ink); }
.doc-lead { margin-top: var(--space-4); }
.doc-toc { margin: 0 0 var(--space-8); padding: var(--space-4); background: var(--surface); border: var(--stroke) solid var(--line); border-radius: var(--radius); }
.doc-toc-h { margin: 0 0 var(--space-2); font-weight: 600; font-size: var(--fs-note); color: var(--ink); }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-6); }
@media (min-width: 40em) { .doc-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc-toc a { display: inline-flex; align-items: center; min-height: var(--site-tap); font-size: var(--fs-note); line-height: var(--lh-head); color: var(--ink); text-decoration: none; }
.doc-toc a:hover { color: var(--brand-deep); text-decoration: underline; }
.doc-art { padding: var(--space-6) 0; border-top: var(--stroke) solid var(--line); scroll-margin-top: calc(var(--site-header-h) + var(--space-4)); }
.doc-art:first-of-type { border-top: 0; padding-top: 0; }
.doc-art-h {
  margin: 0 0 var(--space-3); font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-head);
  color: var(--ink); font-feature-settings: "palt";
}
.doc-art-no { color: var(--brand-deep); margin-right: 0.25em; }
.doc-sub-h { margin: var(--space-6) 0 var(--space-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-head); color: var(--ink); }
.doc-art > .doc-sub-h:first-child, .doc-art-h + .doc-sub-h { margin-top: var(--space-3); }
.doc p, .doc li, .doc dd { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.doc p + p, .doc p + ul, .doc p + ol, .doc ul + p, .doc ol + p, .doc .site-table-wrap + p, .doc p + .site-table-wrap { margin-top: var(--space-3); }
.doc ol.doc-list, .doc ul.doc-list { margin: var(--space-2) 0 0; padding-left: 1.6em; display: grid; gap: var(--space-2); }
.doc ol.doc-list { list-style: decimal; }
.doc ul.doc-list { list-style: disc; }
.doc .site-table-wrap { margin-top: var(--space-3); }
.doc-note { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface); border: var(--stroke) solid var(--line); border-left: var(--stroke-accent) solid var(--brand); border-radius: var(--radius-sm); }
.doc-note p, .doc-note li { font-size: var(--fs-note); }
.doc-box { margin-top: var(--space-4); padding: var(--space-4); background: var(--surface); border: var(--stroke) solid var(--line); border-radius: var(--radius); }
/* 表の形の文書（特定商取引法に基づく表記）：項目名と中身の2列 */
.doc-dl { margin: 0; border-top: var(--stroke) solid var(--line); }
.doc-dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding: var(--space-4) 0; border-bottom: var(--stroke) solid var(--line); scroll-margin-top: calc(var(--site-header-h) + var(--space-4)); }
@media (min-width: 40em) { .doc-dl > div { grid-template-columns: 12em minmax(0, 1fr); gap: var(--space-6); } }
.doc-dl dt { font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.doc-dl dd { margin: 0; }
.doc-dl dd p + p { margin-top: var(--space-3); }
/* 改定の記録（版数注記）と署名 */
.doc-history { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--stroke) solid var(--line); }
.doc-history-h { margin: 0 0 var(--space-2); font-weight: 600; font-size: var(--fs-note); color: var(--ink); }
.doc-history p { font-size: var(--fs-note); color: var(--muted); }
.doc-sign { margin-top: var(--space-8); display: grid; gap: var(--space-1); }
.doc-badge { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.doc-badge img { width: 64px; height: auto; flex: none; }
.doc-badge p { font-size: var(--fs-note); color: var(--muted); }
.doc-actions { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--stroke) solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.doc-dl-compact > div { padding: var(--space-2) 0; }
.doc-box .doc-dl { border-top: 0; }
.doc-box .doc-dl > div:last-child { border-bottom: 0; }
/* 前文（契約書の頭書き） */
.doc-preamble { margin-bottom: var(--space-8); }
/* 書式の説明の囲み（NDA の「本書式について」） */
.doc-about { margin-top: var(--space-6); }
.doc-about-h { margin: 0 0 var(--space-1); font-weight: 600; font-size: var(--fs-note); color: var(--brand-deep); }
.doc-tools { margin-top: var(--space-4); }
/* 署名欄（契約書） */
.doc-signature { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--stroke) solid var(--line); }
.doc-signdate { margin-top: var(--space-4); text-align: right; }
.doc-parties { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 40em) { .doc-parties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc-party .doc-sub-h { margin-top: 0; }
.doc-signline { padding: var(--space-3) 0 var(--space-1); border-bottom: var(--stroke) solid var(--muted); }
.doc-signnote { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   8. お知らせの一覧（news.html・項目4）。一覧の中身は PC が書き出す＝クラスに頼らず、
      article・time・見出し・段落・札（time の隣の span）の構造で当てる（新しい見本の .news-* でも同じ見え方）
   -------------------------------------------------------------------------- */
.news-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 64em) {
  .news-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--space-8); align-items: start; }
  .news-tools { position: sticky; top: calc(var(--site-header-h) + var(--space-6)); }
}
.news-tools-h { margin: 0 0 var(--space-2); font-weight: 600; font-size: var(--fs-note); color: var(--ink); }
.news-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (min-width: 64em) { .news-filter { flex-direction: column; align-items: flex-start; } }
.news-chip {
  display: inline-flex; align-items: center; min-height: var(--site-tap); padding: 0 var(--space-4);
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full); background: var(--surface);
  font-family: var(--font-sans); font-size: var(--fs-note); line-height: var(--lh-head); color: var(--ink); cursor: pointer;
}
.news-chip:hover { border-color: var(--brand-deep); color: var(--brand-deep); }
.news-chip[aria-pressed="true"] { border: var(--stroke-accent) solid var(--brand); padding: 0 calc(var(--space-4) - var(--stroke)); }
.news-years { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-top: var(--space-4); }
.news-years a { display: inline-flex; align-items: center; min-height: var(--site-tap); font-size: var(--fs-note); }
.news-list { display: grid; gap: var(--space-4); }
.news-year-h, .news-list .news-year > h2 {
  margin: var(--space-4) 0 0; padding-bottom: var(--space-2); border-bottom: var(--stroke) solid var(--line);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-note); line-height: var(--lh-head); color: var(--muted);
  font-variant-numeric: tabular-nums; scroll-margin-top: calc(var(--site-header-h) + var(--space-4));
}
.news-list > .news-year-h:first-child { margin-top: 0; }
.news-list .news-year { display: grid; gap: var(--space-4); }
.news-list article {
  background: var(--surface); border: var(--stroke) solid var(--line); border-radius: var(--radius);
  padding: var(--space-6) var(--space-4); scroll-margin-top: calc(var(--site-header-h) + var(--space-4));
}
@media (min-width: 40em) { .news-list article { padding: var(--space-6); } }
.news-list article:target { outline: var(--stroke-accent) solid var(--brand); outline-offset: calc(-1 * var(--stroke)); }
.news-list article > :first-child:not(h2):not(h3) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.news-list time { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--fs-note); line-height: var(--lh-head); color: var(--muted); }
/* 札（タグ）。トップのフッタのお知らせ（NEWS_FOOTER＝2026/10/09 から和文の札つき）も同じ見た目 */
.news-list time ~ span, .news-list .news-tag, .site-footer-news .news-tag {
  display: inline-flex; align-items: center; min-height: calc(var(--space-6) - var(--space-1)); padding: 0 var(--space-3);
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full);
  font-size: var(--fs-note); line-height: var(--lh-head); color: var(--ink);
}
.news-list article h2, .news-list article h3 {
  margin: 0 0 var(--space-3); font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-head);
  color: var(--ink); font-feature-settings: "palt";
}
.news-list article h2 a, .news-list article h3 a { color: inherit; text-decoration: none; }
.news-list article h2 a:hover, .news-list article h3 a:hover { color: var(--brand-deep); text-decoration: underline; }
.news-list article p { max-width: var(--site-measure); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.news-list article p + p { margin-top: var(--space-3); }
.news-list article ul { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-3) 0 0; border-top: var(--stroke) solid var(--line); display: grid; gap: var(--space-1); }
.news-list article ul a { display: inline-flex; align-items: center; min-height: var(--site-tap); font-size: var(--fs-note); }
.news-links-h { margin-top: var(--space-4); font-size: var(--fs-note); color: var(--muted); }
.news-empty { padding: var(--space-6) 0; }

/* --------------------------------------------------------------------------
   9. 営業日カレンダー（business-calendar.html）。中身は PC が書き出す（BUSINESS_CALENDAR の目印の間）＝書き出しの印で当てる：
      [data-generated]（書き出した日）→ 月の並び → [data-month]（月の箱＝月の題・7列の表）→ 日付の欄 [data-date][data-kind]。
      日の見せ方＝brand-tokens.md §6-3・原則 §4.4.3（2026/10/09 代表の決定 ⑥）：
      営業日でない日（data-kind＝weekend・holiday・closed）は面 --line・数字 --ink。「祝」「休」の字は --ink 600 --fs-index。
      橙は「今日」の枠だけ（欄の外周に --brand の --stroke-accent＝内側に食い込ませない）。曜日の見出し・祝日・休業日を橙にしない。
      面は欄の下の層（::before）に置く＝動き（10節）は層の transform・opacity だけで出せる。印刷でも面を刷る（print-color-adjust: exact）。
      改訂前（203号）：土日は数字だけ --muted、祝日・休業日は数字と字が --brand-deep・面 --paper（title="休業日" でも当てていた）
   -------------------------------------------------------------------------- */
.bcal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.bcal-asof { font-size: var(--fs-note); color: var(--muted); font-variant-numeric: tabular-nums; }
.bcal-today { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--stroke) solid var(--line); border-left: var(--stroke-accent) solid var(--brand); border-radius: var(--radius-sm); background: var(--surface); max-width: var(--max-w-text); }
.bcal [data-generated] { margin-top: var(--space-6); }
/* 月の並び：幅に合わせて 1〜4 列（年間＝12か月でも同じ形） */
.bcal [data-generated] > div:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: var(--space-4); }
/* 月の箱 */
.bcal [data-month] { background: var(--surface); border: var(--stroke) solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
.bcal [data-month] > div:first-child {
  margin: 0 0 var(--space-3); font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-head); color: var(--ink);
}
/* 7列の表。欄の間は --space-1＝「今日」の枠（--stroke-accent）が隣の欄の面に掛からず、白い地（--surface）の上に出る */
.bcal [data-month] > div:nth-child(2) { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); text-align: center; }
/* 曜日の見出し（表の短い項目名＝§6 の例外 (b)） */
.bcal [data-month] > div:nth-child(2) > div:nth-child(-n+7) {
  padding: var(--space-1) 0; font-family: var(--font-sans); font-size: var(--fs-index); line-height: var(--lh-head); color: var(--muted);
}
/* 日付の欄：数字は --fs-note・--ink・400（どの種類の日も同じ。営業日でない日の数字を薄くしない） */
.bcal [data-date] {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center;
  min-height: var(--site-tap); padding: var(--space-2) 0 var(--space-1); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--fs-note); font-weight: 400; line-height: 1.2; color: var(--ink);
}
/* 営業日でない日の面（--line）＝欄の下の層 */
.bcal [data-kind="weekend"]::before,
.bcal [data-kind="holiday"]::before,
.bcal [data-kind="closed"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--line);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* 「祝」「休」の字（§6 の例外 (b)） */
.bcal [data-kind="holiday"] > span:not(.site-visually-hidden),
.bcal [data-kind="closed"] > span:not(.site-visually-hidden) { display: block; font-size: var(--fs-index); font-weight: 600; line-height: 1; color: var(--ink); }
/* 今日（どの種類の日にも重ねる）：欄の外周に --brand の --stroke-accent の枠（欄の外側に置く＝内側に食い込ませない）・数字だけ 600
   （assets/business-calendar.js が .is-today を付ける）。枠は擬似要素＝動き（10節）は左から引く（clip-path） */
.bcal [data-date].is-today { font-weight: 600; }
.bcal [data-date].is-today::after {
  content: ""; position: absolute; inset: calc(-1 * var(--stroke-accent)); pointer-events: none;
  border: var(--stroke-accent) solid var(--brand); border-radius: calc(var(--radius-sm) + var(--stroke-accent));
}
/* 凡例（PC の書き出し＝「祝」「休」の字の span と文）：字の span を面の見本にする（面 --line・字 --ink 600 --fs-index）。文は --fs-note・--muted */
.bcal [data-generated] > p { margin-top: var(--space-4); font-size: var(--fs-note); line-height: var(--lh-body); color: var(--muted); }
.bcal [data-generated] > p span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; height: 1.75em; margin: 0 var(--space-1);
  border-radius: var(--radius-sm); background: var(--line); color: var(--ink); font-size: var(--fs-index); font-weight: 600; line-height: 1;
  vertical-align: 0.1em; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.bcal [data-generated] > p span:first-child { margin-left: 0; }

/* --------------------------------------------------------------------------
   10. 動き（下層のページ）＝2026/10/09 site-motion-261009 項目3（brand-designer の指示書・原則 §4.6・値＝brand-tokens.md §8）
       「揃う」「引く」の動き：段の入り・罫。水滴・波紋・WebGL は持ち込まない。トップと営業用LP は対象外（それぞれの演出のまま）。
       ・印＝html.site-motion（ヘッダの正本の先頭の1行が、動きを減らす設定でなく、トップの「動きを止める」＝univo_motion=off でもないときだけ付ける）。
         印が無い（JS 無し・動きを減らす設定・止めた）ときは、この節の動きはどれも効かない＝最初から最終の姿（足した枠・罫は静止で出る）。
       ・1画面目の見出し・本文・画像は隠さない（位置だけを動かす）。隠す初期状態（.site-rv）は、JS が画面の外の要素にだけ付ける。
       ・動かすのは transform・opacity・clip-path・stroke-dashoffset だけ。数字は動かさない。ヘッダ・ロゴは動かさない。
       ・自動の動きは各ページ合計 --motion-auto-limit 以内＝止める手段は要らない（原則 §4.6.5）。印刷は最終の姿（7節）
   -------------------------------------------------------------------------- */
@keyframes site-ticks { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes site-rise { from { transform: translateY(var(--motion-reveal-distance)); } to { transform: none; } }
@keyframes site-rule-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes site-rule-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes site-fill { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes site-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes site-read { from { transform: scaleX(0); } to { transform: none; } }

/* ①（表紙の帯の下の目盛り）は外した＝2026/10/09 代表の決定 D261009122812feaf。②以下の番号はそのまま */

/* ② 段の入り：1画面目の外の段・カード・表の行（JS が .site-rv を付けたものだけ）は、画面に入ったとき1回、上がって現れる。
   ずらし＝calc(var(--motion-duration-ui) / 4) × 群の中の順（1群6つまで＝JS が --site-i を 0〜5 に） */
html.site-motion .site-rv { opacity: 0; transform: translateY(var(--motion-reveal-distance)); animation: none !important; }
html.site-motion .site-rv.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
  transition-delay: calc(var(--site-i, 0) * var(--motion-duration-ui) / 4);
}

/* ③ 段の境の罫：左から引く（scaleX）。罫は擬似要素に移す（動きの印があるときだけ。見た目は border と同じ 1本の --line） */
html.site-motion .site-sec + .site-sec { position: relative; border-top-color: transparent; }
html.site-motion .site-sec + .site-sec::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--stroke)); height: var(--stroke); background: var(--line);
  transform-origin: left center; pointer-events: none;
}
html.site-motion .site-sec.site-rv-rule::before { transform: scaleX(0); }
html.site-motion .site-sec.site-rv-rule.is-in::before { transform: none; transition: transform var(--motion-duration) var(--motion-ease); }

/* ④ ボタンのホバー＝矢印が進む（原則 §4.6.9・トークン §8-2＝3節の .site-btn-arrow）。カードは色だけ（--motion-duration-ui・各部品の transition のまま） */

/* ---- 見せ場：パッケージのページ（経営診断）＝「届くもの」の章の一覧が 01→07 の順に入り、最後に一覧を囲む枠（--line）が閉じる ----
   枠の最終の姿は CSS の縁（.pkg-frame＝package-page.css）。動くときだけ JS が同じ形の SVG を重ね、stroke-dashoffset で閉じてから外す */
html.site-motion .site-rv-seq { opacity: 0; transform: translateY(var(--motion-reveal-distance)); }
html.site-motion .site-rv-seq.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
  transition-delay: calc(var(--site-i, 0) * var(--motion-duration-ui) / 2);
}
.site-frame-draw { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.site-frame-draw rect { fill: none; stroke: var(--line); stroke-width: var(--stroke); stroke-dasharray: 1; stroke-dashoffset: 1; }
.site-frame-draw.is-in rect { stroke-dashoffset: 0; transition: stroke-dashoffset var(--motion-duration) var(--motion-ease); }

/* ---- 見せ場：お知らせ＝年の帯の罫を左から引き、その年の記事が順に入る（1画面目は位置だけ。画面の外の記事は ②）---- */
html.site-motion .news-list .news-year-h { position: relative; border-bottom-color: transparent; }
html.site-motion .news-list .news-year-h::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--stroke)); height: var(--stroke); background: var(--line);
  transform-origin: left center; animation: site-rule-x var(--motion-duration) var(--motion-ease) both;
}
html.site-motion .news-list:not(.news-settled) article { animation: site-rise var(--motion-duration) var(--motion-ease) both; animation-delay: calc(var(--motion-duration-ui) + var(--site-n, 0) * var(--motion-duration-ui) / 4); }
html.site-motion .news-list article:nth-of-type(2) { --site-n: 1; }
html.site-motion .news-list article:nth-of-type(3) { --site-n: 2; }
html.site-motion .news-list article:nth-of-type(4) { --site-n: 3; }
html.site-motion .news-list article:nth-of-type(5) { --site-n: 4; }
html.site-motion .news-list article:nth-of-type(n+6) { --site-n: 5; }
/* 絞り込み：残る記事は新しい位置へ滑り（FLIP＝news-list.js）、外れる記事は薄れて消える（--motion-duration-ui） */
html.site-motion .news-list article.news-out { opacity: 0; transition: opacity var(--motion-duration-ui) var(--motion-ease); }
html.site-motion .news-list article.news-in { animation: site-fade var(--motion-duration-ui) var(--motion-ease) both; }

/* ---- 見せ場：営業日カレンダー＝1画面目の月が今月から順に並び（位置だけ）、営業日でない日の灰の面が「土日→祝→休」の順に満ち、最後に今日の枠を引く。
   画面の外の月は、画面に入ったとき満ちた姿で ② ---- */
html.site-motion .bcal [data-month] { animation: site-rise var(--motion-duration) var(--motion-ease) both; }
html.site-motion .bcal [data-month]:nth-child(2) { animation-delay: calc(var(--motion-duration-ui) / 4); }
html.site-motion .bcal [data-month]:nth-child(3) { animation-delay: calc(var(--motion-duration-ui) / 4 * 2); }
html.site-motion .bcal [data-month]:nth-child(4) { animation-delay: calc(var(--motion-duration-ui) / 4 * 3); }
html.site-motion .bcal [data-month]:nth-child(5) { animation-delay: calc(var(--motion-duration-ui) / 4 * 4); }
html.site-motion .bcal [data-month]:nth-child(n+6) { animation-delay: calc(var(--motion-duration-ui) / 4 * 5); }
html.site-motion .bcal [data-kind="weekend"]::before { animation: site-fill var(--motion-duration) var(--motion-ease) both; animation-delay: calc(var(--motion-duration-ui) * 2); }
html.site-motion .bcal [data-kind="holiday"]::before { animation: site-fill var(--motion-duration) var(--motion-ease) both; animation-delay: calc(var(--motion-duration-ui) * 3); }
html.site-motion .bcal [data-kind="closed"]::before { animation: site-fill var(--motion-duration) var(--motion-ease) both; animation-delay: calc(var(--motion-duration-ui) * 4); }
html.site-motion .bcal .site-rv [data-kind]::before { animation: none; }
html.site-motion .bcal [data-date].is-today::after { animation: site-ticks var(--motion-duration) var(--motion-ease) both; animation-delay: calc(var(--motion-duration-ui) * 7); } /* 休の面が満ちた後（JS が今日の印を付けた時から数える） */
html.site-motion .bcal .site-rv [data-date].is-today::after { animation: none; }

/* ---- 見せ場：規程の5ページ＝本文は動かさない（段の入りも付けない）。
   ①ヘッダの下辺に読んだ量の線（--brand・高さ --stroke-accent・スクロールした分だけ伸びる・開いた時は 0）。
     scroll() の時間軸で動かす。使えない環境は univo-site.js が passive のスクロール＋requestAnimationFrame で --site-read を渡す
   ②目次から飛んだとき、着いた条の左の縦罫を上から引く（1回）。縦罫そのもの（:target）は動きの印が無くても出る ---- */
html.site-motion body:has(.doc) .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--stroke)); height: var(--stroke-accent); background: var(--brand);
  transform-origin: left center; transform: scaleX(var(--site-read, 0)); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  html.site-motion body:has(.doc) .site-header::after { animation: site-read linear both; animation-timeline: scroll(root); }
}
.doc-art { position: relative; }
.doc-art:target::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-3)); top: var(--space-6); bottom: var(--space-6); width: var(--stroke-accent);
  background: var(--brand); transform-origin: center top; pointer-events: none;
}
.doc-art:first-of-type:target::before { top: 0; }
html.site-motion .doc-art:target::before { animation: site-rule-y var(--motion-duration) var(--motion-ease) both; }

/* --------------------------------------------------------------------------
   7. 動きを減らす設定・強制配色・印刷
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { transition-duration: 0.001s !important; scroll-behavior: auto !important; }
  /* 10節の動き：途中で設定を変えたときも最終の姿へ（印は読み込みの時に決まる） */
  html.site-motion .site *, html.site-motion .site *::before, html.site-motion .site *::after { animation: none !important; }
  html.site-motion .site-rv, html.site-motion .site-rv-seq { opacity: 1 !important; transform: none !important; }
  html.site-motion .site-sec.site-rv-rule::before { transform: none !important; }
  .site-frame-draw { display: none !important; }
  html.site-motion body:has(.doc) .site-header::after { display: none; }
}
@media (forced-colors: active) {
  .site-btn, .site-btn-line, .site-menu-btn, .site-menu-close, .site-tag { border: var(--stroke) solid ButtonText; }
  .site-header, .site-footer { border-color: CanvasText; }
}
@media print {
  @page { margin: 18mm 16mm; }
  .site { background: var(--surface); font-size: 10.5pt; }
  /* 10節の動き：刷るのは最終の姿（読んだ量の線・着いた条の縦罫は刷らない。カレンダーの面は刷る＝9節） */
  .site *, .site *::before, .site *::after { animation: none !important; transition: none !important; }
  html.site-motion .site-rv, html.site-motion .site-rv-seq { opacity: 1 !important; transform: none !important; }
  html.site-motion .site-sec.site-rv-rule::before { transform: none !important; }
  .site-frame-draw, .doc-art:target::before { display: none !important; }
  .pkg-frame.is-drawing { border-color: var(--line) !important; }
  .site-header, .site-menu, .site-skip, .site-cta-band, .site-footer-grid, .site-footer-bottom a, .doc-toc, .doc-actions, .site-no-print { display: none !important; }
  .site-footer { border-top: var(--stroke) solid var(--line); padding: var(--space-4) 0 0; }
  .doc { max-width: none; padding: 0; }
  .doc-head { break-after: avoid; }
  .doc-art { break-inside: auto; padding: var(--space-4) 0; }
  .doc-art-h, .doc-sub-h, .doc-dl dt { break-after: avoid; }
  .doc p, .doc li, .doc dd { font-size: 10.5pt; orphans: 3; widows: 3; }
  .doc-title { font-size: 18pt; }
  .doc-art-h { font-size: 12pt; }
  .doc a { color: var(--ink); }
  .doc a[href^="http"]::after { content: "（" attr(href) "）"; font-size: 9pt; color: var(--muted); overflow-wrap: anywhere; }
}