@charset "utf-8";
/* =====================================================================
   Yellow Brick 操作手順書 — 共通スタイル v4「プレミアム・ドキュメント（D6 refined）」
   方針: D6（クリーム×紺×金＋しおり明朝／3ゾーンdocs）を *上品に精緻化*。
         frontend-design スキルの "restraint & precision"（最小主義の精緻な実行）を適用。
         奇抜にしない＝書体追加なし・グリッド破りなし・大アニメなし。
   v3 からの変更点:
     1 タイポ: line-height 1.85 / モジュラースケール / palt 約物詰め / 見出しはウェイト差で
     2 色   : 紺を「主役の瞬間」に / h2 に金の短ヘアライン / cream トークン整理
     3 質感 : 紙 grain（inline SVG・極薄）/ shadow を1スケールにトークン化
     4 演出 : 本文先頭の上品な reveal を1回だけ（reduced-motion 尊重）
     5 表紙 : ヒーローのテック格子 → 紺の奥行き＋grain / カードに編集的インデックス数字
     6 a11y : :focus-visible の金アウトライン / hover・radius の一貫化
   ※クラス名は v2/v3 と完全互換（全ページ流用・1CSS・validate.mjs 維持）
   ※必須トークン #F5C518 / #1A1A2E / @media print は保持
   ===================================================================== */

/* ---- 自己ホストWebフォント（@charset 直後・他規則より前。完全オフライン対応 R-1） ---- */
@font-face { font-family:'Shippori Mincho'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/shippori-mincho-500.woff2') format('woff2'); }
@font-face { font-family:'Shippori Mincho'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/shippori-mincho-600.woff2') format('woff2'); }
@font-face { font-family:'Shippori Mincho'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/shippori-mincho-700.woff2') format('woff2'); }
@font-face { font-family:'Shippori Mincho'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/shippori-mincho-800.woff2') format('woff2'); }
@font-face { font-family:'Zen Kaku Gothic New'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/zen-kaku-gothic-new-400.woff2') format('woff2'); }
@font-face { font-family:'Zen Kaku Gothic New'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/zen-kaku-gothic-new-500.woff2') format('woff2'); }
@font-face { font-family:'Zen Kaku Gothic New'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/zen-kaku-gothic-new-700.woff2') format('woff2'); }
@font-face { font-family:'Zen Kaku Gothic New'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/zen-kaku-gothic-new-900.woff2') format('woff2'); }

/* ---- CSS 変数（デザイントークン） ---- */
:root {
  /* ブランド／アクセント */
  --yb-main:        #B8912E;    /* 金（アクティブ・線・バッジの基調） */
  --yb-main-dark:   #9C7A22;    /* 金の濃い版 */
  --yb-gold-2:      #D9B24A;    /* 明るい金（グラデ・マーカー文字） */
  --yb-gold-text:   #7A5E12;    /* 金「文字」専用の濃色（cream上で約5.2:1・WCAG AA準拠）。線/バッジ等の装飾は --yb-main を維持 */
  --yb-yellow:      #F5C518;    /* 黄（選択範囲などポイント）＝ブランド規定色 */
  --yb-sub:         #1A1A2E;    /* 紺（構造・見出し）＝ブランド規定色 */
  --yb-sub-soft:    #232742;    /* 紺の柔らかい版（ヒーロー奥行き用） */

  /* ベース（クリーム）— 明度差を僅かに整理し分離を上品に */
  --yb-bg:          #FAF7EF;
  --yb-bg-section:  #F2EEE2;
  --yb-card:        #FFFFFF;
  --yb-border:      #E6DDC9;
  --yb-border-2:    #D8CFB6;

  /* テキスト */
  --yb-text:        #1B2230;
  --yb-text-2:      #3D392C;    /* 本文中の濃グレー（段落・リスト） */
  --yb-muted:       #6A6456;
  --yb-text-fig:    #4A4636;    /* 図キャプション・凡例・summary の本文色（旧ハードコード #4a4636 を集約） */
  --yb-warn-text:   #5A2C22;    /* alert-warning の文字色（旧ハードコード #5a2c22） */
  --yb-info-text:   #244055;    /* alert-info の文字色（旧ハードコード #244055） */

  /* callout */
  --yb-info-bg:     #F4F8FB;
  --yb-info-border: #3F6E8C;
  --yb-warn-bg:     #FBF1EC;
  --yb-warn-border: #B14A38;
  --yb-tip-bg:      #F3F7EE;
  --yb-tip-border:  #5C7E4B;
  --yb-tip-text:    #4A6633;    /* 緑「文字」専用の濃色（tip-bg 上で約6:1・WCAG AA準拠）。線/チップ等の装飾は --yb-tip-border を維持 */
  /* danger（warning より一段強い・不可逆/データ損失の警告専用） */
  --yb-danger-bg:     #F8E7E2;    /* warn-bg #FBF1EC より僅かに濃いティント */
  --yb-danger-border: #9E3322;    /* warn-border #B14A38 より濃く強い赤 */

  /* ステップ */
  --yb-step-track:  #D8CFB6;

  /* 影（1スケールに統一） */
  --yb-shadow-sm:   0 2px 8px -4px rgba(23,32,51,.18);
  --yb-shadow-md:   0 14px 30px -22px rgba(23,32,51,.45);
  --yb-shadow-lg:   0 30px 60px -34px rgba(23,32,51,.5);

  /* レイアウト */
  --yb-sidenav-w:   252px;
  --yb-content-max: 56em;
  --yb-radius:      10px;

  /* 書体 */
  --yb-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --yb-sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;

  /* 紙 grain（inline SVG・極薄ノイズ。画像アセット不要・S3互換） */
  --yb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
}

/* ---- リセット ---- */
*, *::before, *::after { box-sizing: border-box; }

/* 地は明朝で雅に・紙 grain を極薄で重ねる */
body {
  font-family: var(--yb-serif);
  color: var(--yb-text);
  background-color: var(--yb-bg);
  background-image: var(--yb-grain);
  line-height: 1.85;
  margin: 0;
  font-size: 1rem;
  font-feature-settings: "palt" 1;   /* 日本語約物の詰め（プロ品位の微差） */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--yb-yellow); }

/* フォーカス可視化（キーボード操作・UD。マニュアルとして必須） */
:focus-visible {
  outline: 2px solid var(--yb-main);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus-visible,
.yb-card:focus-visible,
.yb-pager a:focus-visible { outline-offset: 3px; }

/* =====================================================================
   ヘッダー（上部3px 金ヘアライン・クリーム地）
   ===================================================================== */
.yb-header {
  background: rgba(250, 247, 239, .9);
  backdrop-filter: blur(8px);
  border-top: 3px solid var(--yb-gold-2);
  border-bottom: 1px solid var(--yb-border);
  color: var(--yb-sub);
  padding: 13px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.yb-header img {
  height: 30px;
  width: auto;
}
.yb-header .yb-title {
  font-family: var(--yb-serif);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
  margin: 0;
  color: var(--yb-sub);
}
.yb-header .yb-badge {
  font-family: var(--yb-serif);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--yb-sub);
  background: none;
  border-top: 1px solid var(--yb-main);
  border-bottom: 1px solid var(--yb-main);
  border-radius: 0;
  padding: 4px 14px;
  margin-left: 4px;
}
.yb-header .yb-spacer { flex: 1; }

/* =====================================================================
   マニュアル内検索（ヘッダー右寄せ・D6 refined 準拠・plan §2A-2）
   JS 未使用でも他機能に影響しないプログレッシブエンハンスメント。
   ===================================================================== */
.yb-search {
  position: relative;
  flex: 0 1 220px;
  min-width: 0;
}
.yb-search-input {
  width: 100%;
  min-width: 90px;
  border: 1px solid var(--yb-border-2);
  border-radius: 30px;
  padding: 7px 16px;
  color: var(--yb-text);
  font-family: var(--yb-sans);
  font-size: .8rem;
  background: var(--yb-card);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.yb-search-input::placeholder { color: var(--yb-muted); }
.yb-search-input:focus,
.yb-search-input:focus-visible {
  border-color: var(--yb-main);
  box-shadow: 0 0 0 2px rgba(184, 145, 46, .18);
}
.yb-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(360px, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--yb-card);
  border: 1px solid var(--yb-border);
  border-radius: 10px;
  box-shadow: var(--yb-shadow-md);
  padding: 6px;
  z-index: 1040;
  font-family: var(--yb-sans);
}
.yb-search-results.is-open { display: block; }
.yb-search-results .yb-search-empty {
  padding: 14px 12px;
  color: var(--yb-muted);
  font-size: .82rem;
}
.yb-search-group-label {
  padding: 8px 10px 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--yb-gold-text);
}
.yb-search-item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--yb-text);
}
.yb-search-item .yb-search-item-heading {
  display: block;
  font-size: .86rem;
  font-weight: 700;
  color: var(--yb-sub);
}
.yb-search-item .yb-search-item-text {
  display: block;
  font-size: .76rem;
  color: var(--yb-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yb-search-item:hover,
.yb-search-item:focus-visible,
.yb-search-item.is-active {
  background: var(--yb-bg-section);
}
.yb-search-item mark {
  background: rgba(245, 197, 24, .55);
  color: inherit;
  border-radius: 2px;
}
@media (max-width: 560px) {
  .yb-search { flex-basis: 118px; }
  .yb-search-results { width: min(320px, 92vw); right: -6px; }
}
/* 狭幅の横スクロール対策（2026-08-13）。
   .yb-search-input の min-width:90px と .yb-header のタイトル・バッジが
   375px 幅で 383〜414px の横あふれを起こしていたため、狭幅では最小幅を
   解除し、タイトルを畳んでヘッダーを1行に収める。 */
@media (max-width: 768px) {
  .yb-header { flex-wrap: nowrap; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .yb-header img { max-height: 26px; width: auto; }
  .yb-title { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yb-badge { white-space: nowrap; flex: 0 0 auto; }
  .yb-search { flex: 1 1 auto; min-width: 0; }
  .yb-search-input { min-width: 0; }
}
@media (max-width: 480px) {
  .yb-title { display: none; }     /* ロゴがあるので冗長。バッジ（対象読者）は残す */
}
/* 360px 以下では検索欄が 37px まで潰れ、placeholder が1文字も見えない
   「正体不明の空の丸」になるため非表示にする（各ページの目次から辿れる）。 */
@media (max-width: 360px) {
  .yb-search { display: none; }
}
@media print {
  .yb-search { display: none; }
}

/* =====================================================================
   2ゾーン レイアウト（左ナビ ＋ 本文）
   右ミニ目次は廃止（左サイドナビ「このページの目次」と重複し本文幅を圧迫したため）。
   max-width を 1240→1080px に詰め、空いた幅をステップ画像の拡大に充てる。
   ===================================================================== */
.yb-layout {
  display: flex;
  align-items: flex-start;
  max-width: 1480px;
  margin: 0 auto;
}

/* ---- 左サイドナビ ---- */
.yb-sidenav {
  flex: 0 0 var(--yb-sidenav-w);
  position: sticky;
  top: 57px;
  align-self: flex-start;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  padding: 28px 14px 40px 22px;
  border-right: 1px solid var(--yb-border);
  scrollbar-width: thin;
}
.yb-sidenav-label {
  font-family: var(--yb-sans);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--yb-gold-text);
  margin: 0 0 10px;
  padding: 0 8px;
}

.yb-sidenav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.yb-sidenav li { margin: 1px 0; }
.yb-sidenav a {
  display: block;
  padding: 7px 12px;
  border-radius: 0 8px 8px 0;
  color: var(--yb-muted);
  text-decoration: none;
  font-family: var(--yb-sans);
  font-size: .82rem;
  border-left: 2px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.yb-sidenav a:hover {
  background: var(--yb-bg-section);
  color: var(--yb-sub);
}
/* アクティブ = 金の左ボーダー＋淡い金グラデ */
.yb-sidenav a[aria-current="page"],
.yb-sidenav a.active {
  color: var(--yb-sub);
  font-weight: 700;
  border-left-color: var(--yb-main);
  background: linear-gradient(90deg, rgba(217,178,74,.16), transparent);
}

/* ドロワーナビ（AU-5）: PC は常時展開・モバイルは折畳 */
.yb-nav-drawer { border: none; }
.yb-nav-drawer > summary {
  display: none; /* PC: 常時展開のため summary 非表示 */
  cursor: pointer;
  list-style: none;
  font-family: var(--yb-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--yb-gold-text);
  padding: 8px 12px 10px;
  user-select: none;
}
.yb-nav-drawer > summary::-webkit-details-marker { display: none; }
/* HTML から open 属性を外した（モバイル初期クローズのため）。
   769px 以上では中身を常時表示し、デスクトップの見え方を従来どおりに保つ。
   注意: 閉じた <details> の中身は Chrome では ::details-content の
   content-visibility:hidden で隠されるため、子要素に display:block を
   当てるだけでは復活しない（実測で確認）。::details-content を明示的に
   可視化すること。 */
@media (min-width: 769px) {
  .yb-nav-drawer > :not(summary) { display: block; }
  .yb-nav-drawer::details-content { content-visibility: visible; block-size: auto; }
}

/* 無効ナビアイテム（AU-6）: href="#" デッドリンクを置換 */
.yb-navitem-disabled {
  display: block;
  padding: 7px 12px;
  border-radius: 0 8px 8px 0;
  color: var(--yb-muted);
  opacity: .4;
  font-family: var(--yb-sans);
  font-size: .82rem;
  pointer-events: none;
  user-select: none;
  cursor: default;
  border-left: 2px solid transparent;
}
/* ページャーの無効スパン */
.yb-pager .yb-navitem-disabled {
  flex: 1 1 220px;
  border: 1px solid var(--yb-border);
  border-radius: 8px;
  padding: 14px 20px;
  background: var(--yb-card);
  opacity: .35;
  color: var(--yb-muted);
  display: block;
  pointer-events: none;
}

/* ---- 本文エリア ---- */
.yb-main {
  flex: 1 1 auto;
  padding: 38px 48px 80px;
  min-width: 0;
  animation: ybEnter .42s ease both;   /* 1回だけの上品な入場 */
}
.yb-main > * { max-width: var(--yb-content-max); }
.yb-main > figure.yb-shot { max-width: 100%; }
/* 固定ヘッダー(約62px)分のオフセット：目次・相互参照のアンカーが見出しの直下に着地するように */
.yb-main [id] { scroll-margin-top: 80px; }

@keyframes ybEnter {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* 見出し（章＝明朝・ウェイトと字詰めで階層を作る） */
.yb-main h1 {
  font-family: var(--yb-serif);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.5;
  font-feature-settings: "palt" 1;
  margin-top: 0;
  margin-bottom: .4em;
  color: var(--yb-sub);
}
/* H1 直下の金オーナメント（任意要素 .yb-orn があれば） */
.yb-orn {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--yb-main);
  margin: 0 0 1.4em;
  max-width: var(--yb-content-max);
}
.yb-orn::after {
  content: "";
  height: 1px;
  flex: 0 0 90px;
  background: linear-gradient(90deg, var(--yb-main), transparent);
}
.yb-orn span {
  font-family: var(--yb-sans);
  font-size: .64rem;
  letter-spacing: .3em;
}
/* セクション見出し（章下線＋左端に金の短ヘアラインを1点だけ） */
.yb-main h2 {
  position: relative;
  font-family: var(--yb-serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .03em;
  font-feature-settings: "palt" 1;
  color: var(--yb-sub);
  margin-top: 2.4em;
  margin-bottom: .7em;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--yb-border);
}
.yb-main h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--yb-gold-2), var(--yb-main));
}
/* 汎用 h3（見出しはゴシックで拾いやすく） */
.yb-main h3 {
  font-family: var(--yb-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--yb-sub);
  margin: 0 0 .4em;
  line-height: 1.6;
}
/* セクション直下の小見出しは、本文に埋もれないよう前の余白と金の縦線で区切る。
   （h3 は 16px・装飾なし・上マージン 9px で本文 15px とほぼ差がなく、
     長いページで話題の切れ目が読み取れなかったため） */
.yb-main > h3 {
  margin-top: 2.1em;
  padding-left: .6em;
  border-left: 3px solid var(--yb-main);
}
/* 手順ステップ内・callout 内の h3 は従来どおり（区切り線を入れると過剰になる） */
.yb-main .step h3,
.yb-main .yb-callout h3,
.yb-main details h3 {
  margin-top: 0;
  padding-left: 0;
  border-left: none;
}
.yb-lead {
  color: var(--yb-muted);
  font-size: .98rem;
  line-height: 1.9;
  margin-bottom: 1.4em;
}

/* =====================================================================
   パンくず
   ===================================================================== */
.yb-breadcrumb {
  font-family: var(--yb-sans);
  font-size: .8rem;
  color: var(--yb-muted);
  margin-bottom: 16px;
}
.yb-breadcrumb a { color: var(--yb-muted); text-decoration: none; }
.yb-breadcrumb a:hover { color: var(--yb-sub); text-decoration: underline; }
.yb-breadcrumb span,
.yb-breadcrumb b { color: var(--yb-sub); font-weight: 700; margin: 0 4px; }

/* =====================================================================
   ページ先頭ブロック（front-matter）
   ===================================================================== */
.yb-frontmatter {
  background: var(--yb-card);
  border: 1px solid var(--yb-border);
  border-radius: var(--yb-radius);
  padding: 18px 24px;
  margin: 0 0 1.6em;
  max-width: var(--yb-content-max);
  box-shadow: var(--yb-shadow-md);
}
.yb-frontmatter .yb-summary {
  font-size: .96rem;
  line-height: 1.9;
  color: var(--yb-text-fig);
  margin: 0 0 4px;
}
.yb-frontmatter .yb-summary::before {
  content: "このページでわかること";
  display: block;
  font-family: var(--yb-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--yb-gold-text);
  margin-bottom: 6px;
}
.yb-frontmatter-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--yb-border);
  margin-top: 12px;
}
.yb-badge-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 11px 20px 3px 0;
  margin-right: 20px;
  color: var(--yb-sub);
  font-family: var(--yb-serif);
  font-size: .98rem;
  font-weight: 600;
}
.yb-badge-item .badge-icon {
  font-family: var(--yb-sans);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--yb-gold-text);
}

/* =====================================================================
   ステップ（タイムライン形式・金番号バッジ）
   ===================================================================== */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.yb-steps { position: relative; margin: 0; padding: 0; }
.step {
  position: relative;
  padding: 0 0 28px 64px;
  margin: 0;
  animation: fadeSlideIn .3s ease both;
}
.step:nth-child(1) { animation-delay: 0s; }
.step:nth-child(2) { animation-delay: .08s; }
.step:nth-child(3) { animation-delay: .16s; }
.step:nth-child(4) { animation-delay: .24s; }
.step:nth-child(5) { animation-delay: .32s; }
.step:nth-child(6) { animation-delay: .40s; }
.step:nth-child(7) { animation-delay: .48s; }
.step:nth-child(8) { animation-delay: .56s; }
/* タイムラインレール */
.step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 48px;
  bottom: 4px;
  width: 1px;
  background: var(--yb-step-track);
}
.step:last-child::before { display: none; }

/* 金の番号バッジ（明朝・放射グラデ） */
.step-badge {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  /* 白文字は保ち、金の地を濃くしてコントラストを確保（2026-08-14 是正）。
     旧 --yb-main(#B8912E) → --yb-main-dark(#9C7A22) は明側 2.95:1 で AA 不合格。
     font-size 1.12rem(17.92px) は bold でも大テキスト基準(18.66px)に届かないため
     適用値は 3:1 ではなく 4.5:1。#8F6F1C→#7A5D14 で 4.71:1〜6.17:1。
     文字色をインクにする案は数値上は通るが、金地に沈んで可読性が落ちたため不採用。 */
  background: radial-gradient(circle at 35% 30%, #8F6F1C, #7A5D14);
  color: #fff;
  font-family: var(--yb-serif);
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.12rem;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 4px 12px -4px rgba(184,145,46,.7);
}
.step-body { min-height: 44px; }
/* 操作手順の見出し＝ゴシック */
.step h3 {
  font-family: var(--yb-sans);
  margin: 9px 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--yb-sub);
  line-height: 1.6;
}
.step p { margin: 0 0 8px; font-size: .96rem; line-height: 1.9; color: var(--yb-text-2); }
.step ul { margin: 6px 0 0; padding-left: 1.4em; font-size: .96rem; line-height: 1.9; color: var(--yb-text-2); }
.step li { margin-bottom: 4px; }

/* キーリンク／画面要素名の下線（黄を点・線として） */
.kbd, .yb-ui {
  font-family: var(--yb-sans);
  font-weight: 700;
  color: var(--yb-sub);
  box-shadow: inset 0 -7px 0 rgba(245,197,24,.45);
}

/* =====================================================================
   注釈付きスクリーンショット（最重要）
   ===================================================================== */
figure.yb-shot {
  position: relative;
  margin: 14px 0 8px;
  border: 1px solid var(--yb-border);
  border-radius: 3px;
  overflow: hidden;
  background: var(--yb-card);
  outline: 1px solid var(--yb-main);
  outline-offset: 5px;
  box-shadow: var(--yb-shadow-lg);
  max-width: 100%;
}
figure.yb-shot img { display: block; width: 100%; height: auto; }
/* スクショ表示幅:
   実態は figure の inline style="max-width:NNNpx" で元画像の実寸に合わせている
   （--narrow / --medium / --xs の使用数は 0。2026-08-14 に確認）。
   inline を使うのは、注釈 SVG の viewBox が元画像のピクセル座標系で、
   表示幅を実寸に一致させないと赤枠の線幅が図ごとにばらつくため。
   本文カラムの実効幅（約 1132px）を超える指定は効果が無い。
   配置は全図左寄せ（margin auto なし）で統一。 */
/* ログイン／入力フォーム等、要素が少なく縦長になりやすいスクショは幅を抑えて
   過大表示を防ぐ（情報量の多い表・ダッシュボードのスクショには付けない）。 */
figure.yb-shot.yb-shot--narrow {
  max-width: 560px;
}
/* 元画像の文字が大きいスクショ（高ズームで撮った表・帳票類）用の中間幅。
   本文テキストとの文字サイズ差が過大にならないよう 700px で頭打ちにする。 */
figure.yb-shot.yb-shot--medium {
  max-width: 700px;
}

/* =====================================================================
   アプリDLエリア（App Store / Google Play バッジ＋QRコード）
   ===================================================================== */
.yb-app-download { display: flex; flex-wrap: wrap; gap: 22px; margin: 16px 0 10px; }
.yb-app-col {
  flex: 1 1 240px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  border: 1px solid var(--yb-border);
  border-radius: var(--yb-radius);
  background: var(--yb-card);
  box-shadow: var(--yb-shadow-sm);
}
.yb-store-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--yb-sub);
  color: #fff;
  font-family: var(--yb-sans);
  text-decoration: none;
  line-height: 1.3;
  transition: background .15s ease;
}
.yb-store-badge:hover,
.yb-store-badge:focus-visible { background: var(--yb-sub-soft); }
.yb-store-badge .store-sub { font-size: .66rem; font-weight: 400; opacity: .82; letter-spacing: .04em; }
.yb-store-badge .store-name { font-size: 1.04rem; font-weight: 700; letter-spacing: .02em; }
.yb-qr { margin: 0; text-align: center; }
.yb-qr img {
  display: block;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--yb-border);
  border-radius: 8px;
}
.yb-qr figcaption {
  font-family: var(--yb-serif);
  font-size: .78rem;
  color: var(--yb-text-fig);
  margin-top: 8px;
  line-height: 1.5;
}
@media (max-width: 600px) { .yb-app-col { max-width: none; } }

figure.yb-shot figcaption {
  font-family: var(--yb-serif);
  font-size: .84rem;
  color: var(--yb-text-fig);
  padding: 10px 14px;
  background: var(--yb-card);
  border-top: 1px solid var(--yb-border);
}

/* 凡例（明朝・紺×金の番号） */
.yb-legend { list-style: none; margin: 14px 0 0; padding: 0; font-family: var(--yb-serif); font-size: .88rem; line-height: 1.85; color: var(--yb-text-fig); }
.yb-legend li { display: flex; gap: 11px; align-items: baseline; padding: 4px 0; }
.yb-legend .ln {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  background: var(--yb-sub); color: var(--yb-gold-2);
  font-family: var(--yb-serif); font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* =====================================================================
   callout（左ボーダー＋淡い地・白カード）
   ===================================================================== */
.yb-callout {
  display: flex;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 3px;
  margin: 18px 0;
  border: 1px solid var(--yb-border);
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.85;
  background: var(--yb-card);
}
/* 絵文字アイコンを廃し、変種別のモノクロ文言ラベル（チップ）に置換。color emoji を排し業務マニュアル調に統一。 */
.yb-callout .callout-icon { flex-shrink: 0; margin-top: 1px; font-size: 0; line-height: 0; }
.yb-callout .callout-icon::before {
  display: inline-block;
  font-family: var(--yb-sans);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.7;
  padding: 2px 9px;
  border-radius: 4px;
  white-space: nowrap;
  color: #fff;
}
.yb-callout-info    .callout-icon::before { content: "補足";   background: var(--yb-info-border); }
.yb-callout-warning .callout-icon::before { content: "注意";   background: var(--yb-warn-border); }
.yb-callout-tip     .callout-icon::before { content: "ヒント"; background: var(--yb-tip-border); }
.yb-callout-danger  .callout-icon::before { content: "重要";   background: var(--yb-danger-border); }
.yb-callout .callout-body { flex: 1; }
.yb-callout .callout-body p { margin: 0; color: var(--yb-text-2); }
.yb-callout .callout-body p + p { margin-top: .4em; }
.yb-callout a { font-weight: 700; }

.yb-callout-info    { border-left: 3px solid var(--yb-info-border); background: var(--yb-info-bg); }
.yb-callout-info a, .yb-callout-info .callout-icon { color: var(--yb-info-border); }
.yb-callout-warning { border-left: 3px solid var(--yb-warn-border); background: var(--yb-warn-bg); }
.yb-callout-warning a, .yb-callout-warning .callout-icon { color: var(--yb-warn-border); }
.yb-callout-tip     { border-left: 3px solid var(--yb-tip-border); background: var(--yb-tip-bg); }
.yb-callout-tip a, .yb-callout-tip .callout-icon { color: var(--yb-tip-border); }
/* danger = warning より一段強い（左ボーダー 4px・濃い赤・濃いティント）。不可逆/データ損失専用。 */
.yb-callout-danger  { border-left: 4px solid var(--yb-danger-border); background: var(--yb-danger-bg); }
.yb-callout-danger a, .yb-callout-danger .callout-icon { color: var(--yb-danger-border); }

/* 結果語（だけ）の強調。赤＝危険な「結果」、黄下線（.kbd/.yb-ui）＝画面のボタン名。役割を分離し同一spanに重ねない。 */
.yb-callout .callout-key { color: var(--yb-danger-border); font-weight: 700; }


/* =====================================================================
   前後ナビ
   ===================================================================== */
.yb-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 48px 0 8px;
  flex-wrap: wrap;
  max-width: none;
  border-top: 1px solid var(--yb-main);
  padding-top: 24px;
}
.yb-pager a {
  flex: 1 1 220px;
  text-decoration: none;
  border: 1px solid var(--yb-border);
  border-radius: 8px;
  padding: 14px 20px;
  color: var(--yb-sub);
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
  background: var(--yb-card);
}
.yb-pager a:hover { border-color: var(--yb-main); background: var(--yb-bg-section); box-shadow: var(--yb-shadow-sm); }
.yb-pager .nav-next { text-align: right; }
.yb-pager .pager-label {
  display: block;
  font-family: var(--yb-sans);
  font-size: .68rem;
  color: var(--yb-gold-text);
  margin-bottom: 5px;
  letter-spacing: .14em;
}
.yb-pager .pager-title { font-family: var(--yb-serif); font-weight: 600; font-size: .96rem; }

/* =====================================================================
   フッター
   ===================================================================== */
.yb-footer {
  border-top: 1px solid var(--yb-border);
  text-align: center;
  color: var(--yb-muted);
  font-family: var(--yb-serif);
  font-size: .78rem;
  letter-spacing: .05em;
  padding: 24px 16px;
  margin-top: 16px;
  background: var(--yb-bg-section);
}

/* =====================================================================
   index ページ
   ===================================================================== */
.yb-hero {
  position: relative;
  /* テック格子 → 紺の奥行き（中央やや上の微ヴィネット）＋紙 grain */
  background-color: var(--yb-sub);
  background-image:
    var(--yb-grain),
    radial-gradient(120% 90% at 50% 8%, var(--yb-sub-soft) 0%, var(--yb-sub) 62%);
  border-top: 3px solid var(--yb-gold-2);
  color: #fff;
  padding: 64px 32px 56px;
  text-align: center;
}
/* 表紙のブランドマーク（実ロゴを1点） */
.yb-hero-mark {
  height: 46px;
  width: auto;
  margin: 0 auto 20px;
  display: block;
  opacity: .96;
}
.yb-hero h1 {
  font-family: var(--yb-serif);
  font-size: 2.1rem;
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
  margin: 0 0 12px;
  font-weight: 800;
}
.yb-hero h1 .accent { color: var(--yb-gold-2); }
.yb-hero p { color: #cdc8bb; margin: 0 0 24px; font-size: 1rem; }
.yb-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--yb-sans);
  font-size: .82rem;
  letter-spacing: .14em;
  color: var(--yb-gold-2);
  border-top: 1px solid rgba(217,178,74,.4);
  border-bottom: 1px solid rgba(217,178,74,.4);
  padding: 5px 16px;
}

.yb-cards-section { background: var(--yb-bg); background-image: var(--yb-grain); padding: 52px 20px; }
.yb-cards-lead {
  text-align: center;
  font-family: var(--yb-serif);
  color: var(--yb-muted);
  font-size: 1rem;
  line-height: 1.9;
  margin: 0 0 30px;
}
/* 2文目は狭幅では改行せず自然に折り返させる */
@media (max-width: 640px) { .yb-cards-lead .lead-br { display: none; } }
.yb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 860px;
  margin: 0 auto;
  counter-reset: ybcard;   /* 編集的インデックス数字 */
}
.yb-card {
  position: relative;
  counter-increment: ybcard;
  border: 1px solid var(--yb-border);
  border-top: 3px solid var(--yb-main);
  border-radius: var(--yb-radius);
  padding: 28px 26px 22px;
  text-decoration: none;
  color: var(--yb-text);
  display: block;
  background: var(--yb-card);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
/* 右上に明朝の小さな通し番号（01 / 02）＝静かな編集的アクセント */
.yb-card::before {
  content: "0" counter(ybcard);
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--yb-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--yb-border-2);
}
.yb-card:hover { box-shadow: var(--yb-shadow-md); transform: translateY(-2px); border-color: var(--yb-border-2); }
.yb-card h2 {
  margin: 0 0 8px;
  font-family: var(--yb-serif);
  color: var(--yb-sub);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.yb-card .card-desc { margin: 0 0 16px; color: var(--yb-muted); font-size: .92rem; line-height: 1.8; }
/* ページ数（説明文の末尾に控えめに置く小ラベル） */
.yb-card .card-count {
  display: inline-block; margin-left: .5em;
  font-family: var(--yb-sans); font-size: .74rem; letter-spacing: .04em;
  color: var(--yb-sub); border: 1px solid var(--yb-border);
  border-radius: 3px; padding: 1px 7px; white-space: nowrap;
}
.yb-card ol { margin: 0; padding-left: 1.4em; font-size: .88rem; line-height: 1.85; color: var(--yb-muted); }
.yb-card ol li { margin-bottom: 4px; }
.yb-card ul { margin: 0; padding-left: 1.2em; font-size: .88rem; color: var(--yb-muted); list-style: none; }
.yb-card ul li { margin-bottom: 4px; position: relative; padding-left: 14px; }
.yb-card ul li::before { content: "—"; position: absolute; left: 0; color: var(--yb-main); }
.yb-card.yb-card-disabled { opacity: .7; cursor: default; pointer-events: none; }
.yb-card-coming {
  display: inline-block;
  font-family: var(--yb-sans);
  font-size: .72rem;
  background: var(--yb-bg-section);
  border: 1px solid var(--yb-border);
  color: var(--yb-muted);
  border-radius: 20px;
  padding: 2px 10px;
  margin-top: 12px;
}

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (max-width: 768px) {
  .yb-layout { flex-direction: column; }
  .yb-main { max-width: 100%; min-width: 0; }
  .yb-sidenav {
    position: static;
    flex-basis: auto;
    width: 100%;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--yb-border);
    padding: 16px;
  }
  .yb-main { padding: 28px 18px 60px; }
  .yb-main h1 { font-size: 1.6rem; }
  .yb-pager a { flex-basis: 100%; }
  /* 狭幅では step の左余白とバッジを微縮小し本文幅を確保（P2-2） */
  .step { padding-left: 52px; }
  .step-badge { width: 38px; height: 38px; font-size: 1rem; }
  .step::before { left: 18px; top: 42px; }
  /* モバイル: ドロワー summary を表示して折畳可能にする */
  .yb-nav-drawer > summary { display: flex; align-items: center; gap: 8px; }
  .yb-nav-drawer > summary::after { content: "▸"; margin-left: auto; }
  .yb-nav-drawer[open] > summary::after { content: "▾"; }
  /* 閉じた状態では sidenav コンテンツを非表示 */
  .yb-nav-drawer:not([open]) > :not(summary) { display: none; }
}

/* モーション抑制（reduced-motion 尊重） */
@media (prefers-reduced-motion: reduce) {
  .step, .yb-main { animation: none; }
  * { scroll-behavior: auto; }
}

/* =====================================================================
   入力項目テーブル（フォーム入力項目の必須／任意一覧・全ページ共通）
   旧 adm-03 ページローカル <style> を共有 CSS へ昇格（DRY 統一）。
   ===================================================================== */
.yb-field-table { width: 100%; border-collapse: collapse; margin: 16px 0 4px; font-family: var(--yb-serif); font-size: .92rem; color: var(--yb-text-2); }
.yb-field-table caption { text-align: left; font-family: var(--yb-sans); font-weight: 700; color: var(--yb-sub); margin-bottom: 9px; font-size: .95rem; letter-spacing: .02em; }
.yb-field-table th, .yb-field-table td { border: 1px solid var(--yb-border); padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.72; }
.yb-field-table thead th { background: var(--yb-bg-section); color: var(--yb-sub); white-space: nowrap; font-family: var(--yb-sans); font-size: .85rem; letter-spacing: .04em; }
.yb-field-table tbody th { font-weight: 700; color: var(--yb-text); white-space: nowrap; background: #FCFAF4; }
/* 項目名が長い表（例: 「⑦ 労働安全衛生規則第13条第1項第3号に掲げる業務に従事する労働者数」）では
   tbody th の nowrap が min-content を押し上げ、colgroup が効かないまま左列が 62% を占めて
   右列の説明が1行3〜4語に潰れる。colgroup を持つ表に限り折り返しを許可する。 */
.yb-field-table:has(colgroup) tbody th { white-space: normal; }
.yb-field-table td.req { white-space: nowrap; text-align: center; }
.yb-req-badge { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; font-family: var(--yb-sans); white-space: nowrap; }
.yb-req-badge.is-required { background: var(--yb-danger-bg); color: var(--yb-danger-border); }
.yb-req-badge.is-optional { background: var(--yb-tip-bg); color: var(--yb-tip-text); }
.yb-req-badge.is-auto { background: var(--yb-bg-section); color: var(--yb-gold-text); border: 1px solid var(--yb-border-2); }
.yb-req-badge.is-readonly { background: var(--yb-bg-section); color: var(--yb-muted); border: 1px solid var(--yb-border-2); }
@media (max-width: 640px) { .yb-field-table { font-size: .85rem; } .yb-field-table th, .yb-field-table td { padding: 7px 8px; } }
/* 表の横あふれ対策（2026-08-13）。
   .yb-field-table tbody th の white-space:nowrap により、長い項目名
   （例「⑦ 労働安全衛生規則第13条第1項第3号に掲げる業務に従事する労働者数」）で
   表の min-content が 595px になり、adm-06 が 375px 幅で 632px にあふれていた。
   狭幅では nowrap を解除し、表自体を横スクロール可能にする。 */
@media (max-width: 768px) {
  .yb-field-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .yb-field-table tbody th { white-space: normal; }
  .yb-field-table thead th { white-space: normal; }
}
/* 注記（表下の補足・小文字グレー） */
.yb-note { font-size: .85rem; color: var(--yb-muted); margin-top: 6px; }

/* 折りたたみ（長い参照表用）: クリックで開閉する details/summary。emp-04b 検査項目一覧などで使用 */
details.yb-accordion { margin: 16px 0; border: 1px solid var(--yb-border); border-radius: 8px; background: var(--yb-card); }
details.yb-accordion > summary { cursor: pointer; padding: 12px 16px; font-family: var(--yb-sans); font-weight: 700; font-size: .95rem; color: var(--yb-text-fig); list-style: none; display: flex; align-items: center; }
details.yb-accordion > summary::-webkit-details-marker { display: none; }
details.yb-accordion > summary::after { content: "▸"; margin-left: auto; color: var(--yb-gold-text); }
details.yb-accordion[open] > summary::after { content: "▾"; }
details.yb-accordion[open] { padding-bottom: 14px; }
details.yb-accordion > :not(summary) { margin-left: 16px; margin-right: 16px; }

/* =====================================================================
   印刷
   ===================================================================== */
@media print {
  body { color: #000; background: #fff; background-image: none; }
  .yb-header { position: static; border-top: none; border-bottom: 2px solid #ccc; background: #fff; }
  .yb-sidenav, .yb-pager { display: none; }
  .yb-layout { display: block; }
  .yb-main { padding: 0; animation: none; }
  .yb-main > * { max-width: none; }
  .step { break-inside: avoid; padding-bottom: 16px; }
  .step::before { display: none; }
  figure.yb-shot { break-inside: avoid; outline: none; box-shadow: none; }
  h2 { break-after: avoid; }
  /* 紙では相互参照が辿れないため、内部リンクは下線＋参照先ページ名、
     外部リンクは URL を併記する（2026-08-14 追加） */
  a { color: #000; text-decoration: underline; }
  .yb-main a[href^="http"]::after { content: " <" attr(href) ">"; font-size: .82em; word-break: break-all; }
  .yb-main a[href$=".html"]::after,
  .yb-main a[href*=".html#"]::after { content: " [" attr(href) "]"; font-size: .82em; color: #444; }
  .yb-breadcrumb a::after, .yb-sidenav a::after, .yb-pager a::after { content: none; }
  .yb-callout { border: 1px solid #ccc; background: #fafafa; color: #000; }
  .yb-hero { background: #fff; background-image: none; color: #000; border: 1px solid #ccc; }
  .yb-hero-mark { filter: none; }
  .yb-cards-section { background: #fff; background-image: none; }
  .yb-footer { background: #fff; }
}

/* =====================================================================
   図版の追加表示幅（--xs）と クリック拡大表示（zoom.js と対）
   ===================================================================== */

/* 300〜400px 程度の小さな切り出し用。既存の --inline(520) / --narrow(560) では
   引き伸ばしになりぼやけるため、実寸に近い幅で頭打ちにする。 */
figure.yb-shot.yb-shot--xs {
  max-width: 340px;
}

/* ---- クリック拡大（JS 有効時のみ見た目を変える＝プログレッシブエンハンスメント） ---- */
.yb-zoom-on figure.yb-zoomable {
  cursor: zoom-in;
}
.yb-zoom-on figure.yb-zoomable:hover {
  border-color: var(--yb-main);
}
.yb-zoom-on figure.yb-zoomable:focus-visible {
  outline: 2px solid var(--yb-main);
  outline-offset: 2px;
}
/* 右下に控えめな拡大ヒント */
.yb-zoom-on figure.yb-zoomable::after {
  content: "⤢ 拡大";
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: .72rem;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 3px;
  background: rgba(26, 26, 46, .78);
  color: var(--yb-gold-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
}
.yb-zoom-on figure.yb-zoomable:hover::after,
.yb-zoom-on figure.yb-zoomable:focus-visible::after {
  opacity: 1;
}

.yb-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(20, 18, 14, .82);
  /* flex 中央寄せだと内容が画面より広いとき左端が切れるため block + margin auto にする */
  display: block;
  overflow: auto;
  padding: 56px 20px 32px;
}
.yb-zoom-inner {
  /* 元画像の実寸（zoom.js が px 指定）まで拡大する。画面より広い場合はスクロールで見る。
     実寸を超えて引き伸ばしても情報は増えずぼやけるだけなので上限は実寸とする。 */
  margin: 0 auto;
  background: var(--yb-card);
  border: 1px solid var(--yb-border-2);
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}
.yb-zoom-caption {
  margin: 10px 2px 2px;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--yb-text);
}
.yb-zoom-close {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 9001;
  font: inherit;
  font-size: .88rem;
  padding: 7px 14px;
  border: 1px solid var(--yb-gold-2);
  border-radius: 3px;
  background: var(--yb-sub);
  color: var(--yb-gold-2);
  cursor: pointer;
}
.yb-zoom-close:hover { background: var(--yb-sub-soft); }
.yb-zoom-close:focus-visible { outline: 2px solid var(--yb-gold-2); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .yb-zoom-on figure.yb-zoomable::after { transition: none; }
}
@media print {
  .yb-zoom-overlay, .yb-zoom-close { display: none !important; }
  .yb-zoom-on figure.yb-zoomable::after { display: none; }
}

/* ページ内目次の階層表示: H3 見出しの項目はインデントして従属関係を示す
   （H2 と H3 が平坦に並ぶと、読者には全部が同列の章に見えるため） */
.yb-sidenav li.toc-sub {
  padding-left: 1em;
  font-size: .92em;
}
.yb-sidenav li.toc-sub > a::before {
  content: "– ";
  color: var(--yb-muted);
}

/* =====================================================================
   FAQ ページ（emp-07 / adm-09）— 症状から引くための質問インデックスと Q/A の書き分け
   課題: 質問(H3)が縦に並ぶだけで、読者が自分の症状を探す導線がスクロールしかなく、
         質問と回答の書体差もほぼ無かった。
   方針: 既存の語彙（クリーム地・金の細線・明朝/ゴシックの使い分け）内で解決する。
   ===================================================================== */
.yb-faq-index-lead {
  font-family: var(--yb-sans);
  font-size: .92rem;
  color: var(--yb-muted);
  margin: -.2em 0 1em;
}
.yb-faq-index {
  border: 1px solid var(--yb-border);
  border-top: 2px solid var(--yb-main);
  border-radius: var(--yb-radius);
  background: var(--yb-card);
  padding: 20px 22px 6px;
  box-shadow: var(--yb-shadow-sm);
}
.yb-faq-group { margin-bottom: 16px; }
.yb-faq-group-title {
  font-family: var(--yb-serif);
  font-size: .98rem;
  font-weight: 700;
  color: var(--yb-sub);
  letter-spacing: .02em;
  margin: 0 0 .5em;
}
.yb-faq-group-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--yb-border-2);
}
.yb-faq-group-title a:hover { border-bottom-color: var(--yb-main); }
.yb-faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
}
.yb-faq-chips > li { margin: 0; max-width: 100%; }
.yb-faq-chips > li > a {
  display: inline-block;
  max-width: 100%;
  font-family: var(--yb-sans);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--yb-text-2);
  text-decoration: none;
  background: var(--yb-bg);
  border: 1px solid var(--yb-border);
  border-radius: 999px;
  padding: 5px 13px;
  overflow-wrap: anywhere;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.yb-faq-chips > li > a:hover {
  background: var(--yb-bg-section);
  border-color: var(--yb-main);
  color: var(--yb-sub);
}
.yb-faq-chips > li > a:focus-visible {
  outline: 2px solid var(--yb-main);
  outline-offset: 2px;
}

/* 質問（H3）: 既存の金の縦線はそのまま、頭に明朝の "Q" を置いて回答と書き分ける */
.yb-main > h3.yb-faq-q { margin-bottom: .5em; }
.yb-main > h3.yb-faq-q::before {
  content: "Q";
  font-family: var(--yb-serif);
  font-weight: 700;
  font-size: .92em;
  color: var(--yb-gold-text);
  margin-right: .5em;
  letter-spacing: .04em;
}
/* 回答: 一段インデント＋淡い地色。装飾は左の細線と明朝の "A" だけに留める */
.yb-main > .yb-faq-a {
  position: relative;
  margin: 0 0 .2em 1.1em;
  padding: .75em 1em .75em 2.3em;
  background: var(--yb-bg-section);
  border-left: 1px solid var(--yb-border-2);
  border-radius: 0 6px 6px 0;
}
.yb-main > .yb-faq-a::before {
  content: "A";
  position: absolute;
  left: .95em;
  top: .78em;
  font-family: var(--yb-serif);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--yb-muted);
  letter-spacing: .04em;
}
.yb-main > .yb-faq-a > p { margin: 0; }

@media (max-width: 700px) {
  .yb-faq-index { padding: 16px 14px 4px; }
  .yb-main > .yb-faq-a {
    margin-left: 0;
    padding: .7em .8em .7em 2em;
  }
  .yb-main > .yb-faq-a::before { left: .7em; }
}
@media (prefers-reduced-motion: reduce) {
  .yb-faq-chips > li > a { transition: none; }
}
@media print {
  .yb-faq-index { box-shadow: none; break-inside: avoid; }
  .yb-main > .yb-faq-a { background: transparent; }
}

/* 受領待ちの記入欄（空セルは「未記入のまま出荷された表」に見えるため、状態を明示する） */
.yb-tbd { color: var(--yb-muted); font-family: var(--yb-sans); font-size: .88rem; }