/* サイト全体のベース設定 */
body {
  color: #333;
  line-height: 1.7;
}

/* 太字の装飾（単なる太字より少し目立たせる） */
strong, b {
  font-weight: 700;
  font-size: 1.2rem;
  color: #222; /* わずかに濃くする */
}

/* 水平スペーサーの挙動を安定させる */
.hs-horizontal-spacer {
  display: block;      /* blockにすることでマージンや高さを確実に効かせる */
  width: 100%;         /* 横幅いっぱい */
  clear: both;         /* 回り込みを解除 */
  min-height: 20px;    /* エディタで高さを指定し忘れた時の最低余白 */
  margin: 0 auto;
}

/* 見出し共通：サイズを抑え、マージンを統一 */
h1, h2, h3 {
  color: #1a1a1a;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}

/* H1: ページタイトル（大きすぎず、品良く） */
h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* H2: セクションの区切り（左線で強調） */
h2 {
  font-size: 22px;
  padding-left: 12px;
  border-left: 4px solid #619BDD; /* ブランドカラーがあればその色に */
}

/* H3: 小見出し（下線で強調） */
h3 {
  font-size: 18px;
  border-bottom: 1px solid #619BDD;
  padding-bottom: 4px;
}

/* -----------------------------------------------------------
   Knowledge Base Layout (2-Column)
   ----------------------------------------------------------- */

/* 全体のコンテナ：最大幅 1000px で中央寄せ */
.kb-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: row; /* 横並び */
    gap: 50px;           /* カラム間の余白 */
    align-items: flex-start;
}

/* サイドバー：左側（カテゴリリンク） */
.kb-sidebar {
    width: 230px;        /* 視認性の良い幅 */
    flex-shrink: 0;      /* 幅を固定 */
    position: sticky;    /* スクロール追従（モダンブラウザ対応） */
    top: 20px;
}

.kb-sidebar h3 {
    font-size: 16px;
    border-bottom: 2px solid #FF5C35; /* アクセントカラー（例） */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* メインコンテンツ：右側 */
.kb-container > *:nth-child(2) {
    flex-grow: 1;
    min-width: 0;
    max-width: 750px;    /* 1行の文字数を読みやすく制限 */
}

/* レスポンシブ：タブレット以下は縦並び */
@media (max-width: 850px) {
    .kb-container {
        flex-direction: column;
    }
    .kb-sidebar {
        width: 100%;
        position: static;
        margin-bottom: 30px;
    }
    .kb-main {
        max-width: 100%;
    }
}