/* ========================================
   help.css  -  PitFlow ヘルプ（専用サイドバー＋本文）／CarFlow help.css 準拠・ブランド緑
   ======================================== */

#view-help { padding: 0 !important; }
.help-layout { display: flex; align-items: stretch; height: 100%; }

/* ── 左サイドバー（目次）── */
.help-sidebar {
  width: 250px; flex: none; border-right: 1px solid var(--border);
  background: var(--bg2); overflow-y: auto; padding: 12px 6px 40px;
}
.help-sb-search-wrap { padding: 4px 8px 12px; }
.help-sb-search {
  width: 100%; padding: 8px 10px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 12px; font-family: inherit;
}
.help-sb-search:focus { outline: none; border-color: var(--brand); }
.help-sb-cat { font-size: 10.5px; font-weight: 700; color: var(--text3); padding: 14px 12px 6px; letter-spacing: .05em; }
.help-sb-item {
  font-size: 13px; color: var(--text2); padding: 7px 14px; cursor: pointer;
  border-radius: 6px; margin: 1px 4px; line-height: 1.4;
}
.help-sb-item:hover { background: var(--bg3); color: var(--text); }
.help-sb-item.active { background: var(--brand); color: #fff; font-weight: 600; }

/* ── 右コンテンツ（本文）── */
.help-content { flex: 1; overflow-y: auto; padding: 22px 30px 70px; min-width: 0; }
.help-sec { display: none; max-width: 820px; }
.help-sec.active { display: block; }
.help-sec h2 { font-size: 20px; font-weight: 800; color: var(--text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--brand); }
.help-sec h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 22px 0 8px; display: flex; align-items: center; gap: 6px; }
.help-sec p { font-size: 14px; color: var(--text2); line-height: 1.85; margin: 0 0 12px; }
.help-sec p strong, .help-sec li strong { color: var(--text); font-weight: 700; }
.help-sec ul, .help-sec ol { margin: 0 0 14px 22px; padding: 0; }
.help-sec li { font-size: 14px; color: var(--text2); line-height: 1.85; margin-bottom: 5px; }
.help-sec .lead { font-size: 14.5px; color: var(--text); }

.help-step { background: var(--bg3); border-left: 3px solid var(--brand); border-radius: 6px; padding: 12px 14px 12px 18px; margin: 10px 0 14px; }
.help-step ol { margin: 0; padding-left: 22px; }
.help-step li { margin-bottom: 5px; }
.help-tip { background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--text2); line-height: 1.7; margin: 14px 0; }
.help-tip strong { color: var(--text); }
.help-warn { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--orange); line-height: 1.7; margin: 14px 0; }
.help-warn strong { color: var(--orange); }
.help-wip { background: rgba(245,158,11,.10); border: 1px dashed rgba(245,158,11,.4); border-radius: 6px; padding: 14px; font-size: 13px; color: var(--text3); text-align: center; }

.help-term { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; margin-bottom: 8px; }
.help-term-name { font-size: 13px; font-weight: 700; color: var(--brand); margin-bottom: 4px; }
.help-term-desc { font-size: 12.5px; color: var(--text2); line-height: 1.7; }

.help-faq { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; margin-bottom: 8px; }
.help-faq-q { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: flex; gap: 8px; align-items: flex-start; }
.help-faq-q::before { content: 'Q'; color: var(--brand); font-weight: 700; background: var(--brand-soft); width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.help-faq-a { font-size: 12.5px; color: var(--text2); line-height: 1.7; display: flex; gap: 8px; align-items: flex-start; }
.help-faq-a::before { content: 'A'; color: var(--blue); font-weight: 700; background: rgba(55,138,221,.15); width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }

.help-mobile-toggle { display: none; }

/* スマホ：サイドバーを引き出しに */
@media (max-width: 768px) {
  .help-layout { position: relative; }
  .help-mobile-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .help-sidebar {
    position: absolute; top: 0; left: 0; bottom: 0; width: 82%; max-width: 300px; z-index: 5;
    transform: translateX(-100%); transition: transform .25s; box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  body.help-sb-open .help-sidebar { transform: translateX(0); }
  body.help-sb-open .help-content::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 4; }
  .help-content { padding: 18px 16px 60px; }
  .help-sec h2 { font-size: 17px; }
}