/* --- 基本設定（立命館大学カラー） --- */
    :root {
      --color-primary: #800000;      /* 立命館スクールカラー：臙脂（えんじ） */
      --color-active: #800000;       /* 現在地を示す文字色：臙脂 */
      --color-active-bg: #f4f0ec;    /* 現在地項目の背景色：落ち着いたベージュグレー */
      --color-bg: #fdfdfd;
      --color-border: #dcd0c0;       /* 臙脂に馴染む上品な薄い境界線カラー */
      --color-text: #2b2b2b;
      --header-height: 70px;         /* ヘッダーの高さ */
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth; /* スクロールを滑らかにする設定 */
    }

    body {
      font-family: "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
      color: var(--color-text);
      background-color: var(--color-bg);
      line-height: 1.6;
    }

    /* スマホメニューが開いている時は背後をスクロールさせない */
    body.menu-open {
      overflow: hidden;
    }

    /* --- ヘッダー --- */
    header {
      background-color: #ffffff;
      border-bottom: 3px solid var(--color-primary);
      padding: 0 2rem;
      height: var(--header-height);
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo {
      font-weight: bold;
      font-size: 1.25rem;
      color: var(--color-primary);
      letter-spacing: 0.05em;
    }

    /* ハンバーガーメニューボタン */
    .menu-toggle {
      display: none;
      background: none;
      border: 2px solid var(--color-primary);
      padding: 0.5rem 1rem;
      cursor: pointer;
      font-size: 1rem;
      color: var(--color-primary);
      font-weight: bold;
      border-radius: 0;
    }
    .menu-toggle:hover {
      background-color: var(--color-primary);
      color: #ffffff;
    }

    /* --- 全体レイアウト --- */
    .container {
      display: flex;
      max-width: 1400px;
      margin: 0 auto;
    }

    
    /* --- 左メニュー --- */
    .sidebar-left {
      width: 180px;
      background-color: #ffffff;
      border-right: 1px solid var(--color-border);
      padding: 2rem 1.5rem;

      position: sticky;
      top: var(--header-height);
      height: calc(100vh - var(--header-height));
      overflow-y: auto;
    }
    .sidebar-left ul {
      list-style: none;
    }
    .sidebar-left li {
      margin-bottom: 0.1rem;
    }
    .sidebar-left a {
      text-decoration: none;
      color: var(--color-text);
      display: block;
      padding: 0.6rem 0.8rem;
      border-radius: 0;
      font-weight: 500;
    }

    .sidebar-left a:hover {
      background-color: var(--color-active-bg);
      color: var(--color-primary);
    }

    .sidebar-left a.current {
      background-color: var(--color-active-bg);
      color: var(--color-active);
      font-weight: bold;
    }

    /* --- メインコンテンツ --- */
    main {
      flex: 1;
      padding: 2rem calc(2rem + 20px);
      background-color: #ffffff;
    }

    /* 各セクションの設定 */
    main section {
      margin-bottom: 1rem;
      position: relative;
    }

    /* 最初のセクション前の余白の設定 */
    .first-section {
      margin-top: 0.5rem;
    }

    /* スクロール停止位置 */
    .scroll-target {
      position: absolute;
      top: -76px;
      left: 0;
      display: block;
      visibility: hidden;
    }

    main h1 {
      margin-bottom: 1rem;
      color: var(--color-primary);
      border-bottom: 1px solid var(--color-border);
      padding-bottom: 0.5rem;
    }
    main h2 {
      margin-bottom: 0.5rem; /* 見出しと本文の間の隙間 */
      color: var(--color-primary);
      
      /* --- ここから追加 --- */
      position: sticky;
      top: var(--header-height); /* 固定されたヘッダー(70px)のすぐ下に配置 */
      background-color: #ffffff; /* スクロール時に後ろの本文が透けないように白背景を敷く */
      z-index: 10;               /* ヘッダー(100)より背面、本文より前面に表示 */
      padding: 0.5rem 0;         /* 固定された際、上下に少し余白があると綺麗に見えます（お好みで） */
      /* --- ここまで追加 --- */
    }

    main h3 {
      font-size: 20px;
      color: var(--color-primary);
      margin-top: 5px;
      margin-bottom: 5px;
    }

    /* --- メインコンテンツ内のリスト設定 --- */
    main ul, main ol {
      list-style-position: inside; /* 印をテキストの内側に配置して左端に揃える */
      margin-bottom: 1rem;         /* リストの下にできる隙間 */
      text-indent: -1.0em;  /* 1行目を左に引き戻す */
      padding-left: 1.0em; /* 2行目以降を右に字下げする */
    }
    main li {
      margin-bottom: 0.4rem;       /* 箇条書きの項目同士の隙間 */
    }

    main p {
      line-height: 1.6em;
      margin:0 0 0.6em;
      padding: 0 8px;
    }


    /* スクロール位置不足によるバグを防ぐための下部スペース */
    .spacer-bottom {
      height: 100vh;
      background-color: #ffffff;
    }

    /* --- 右メニュー（ページ内目次） --- */
    .sidebar-right {
      width: 240px;
      padding: 2rem 1.5rem;
      position: sticky;
      top: var(--header-height);
      height: calc(100vh - var(--header-height));
      overflow-y: auto;
    }
    .toc-title {
      font-weight: bold;
      font-size: 0.9rem;
      margin-bottom: 0.75rem;
      color: #666666;
    }
    .sidebar-right ul {
      list-style: none;
    }
    .sidebar-right li {
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
    }
    .sidebar-right a {
      text-decoration: none;
      color: #555555;
    }
    .sidebar-right a:hover {
      color: var(--color-primary);
      text-decoration: underline;
    }

/* --- Footer --- */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  height: 50px;
  line-height: 50px;

  text-align: center;
  background-color: #ffffff;
  border-top: 1px solid var(--color-border);
  color: #666666;
  font-size: 0.9rem;

  z-index: 1000;
}

    /* --- レスポンシブ設定 --- */
    @media (max-width: 992px) {
      .sidebar-right {
        display: none;
      }
    }

    @media (max-width: 599px) {
      .menu-toggle {
        display: block;
      }

      .sidebar-left {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        z-index: 90;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      }

      .sidebar-left.open {
        display: block;
      }
      
      main {
        padding: 1.5rem;
        max-width: 100%;
      }

      .scroll-target {
        top: -76px;
      }
    }