/* --- 1. 目次エリアの固定設定 --- */
.menu {
  /* 上部に固定 */
  position: sticky;
  top: 0;
  z-index: 100;
  
  /* 背景を白にして下の文字と重ならないようにする */
  background-color: #fff;
  border-bottom: 1px solid #000;
  
  /* 高さ制限とスクロール設定 */
  max-height: 120px; /* 目次の最大高さ（お好みで調整） */
  overflow-y: auto;  /* 項目が増えたら枠内スクロール */
  
  /* 既存のスタイルを継承しつつ微調整 */
  text-align: center;
  margin: 0 auto;
  padding: 10px 5px;
}

/* --- 2. ページ内リンクの飛び先調整 --- */
/* 目次が上に固定される分、ジャンプ先が隠れないように余白を作る */
.box, .top, h2 {
  scroll-margin-top: 130px; /* 目次の高さ＋α */
}

/* スムーススクロールを有効化 */
html {
  scroll-behavior: smooth;
}

/* --- 3. レイアウトの崩れ防止 --- */
/* リンクが横に並びすぎて見づらい場合、リスト形式にするか適宜調整 */
.menu a {
  display: inline-block;
  margin: 5px;
  white-space: nowrap; /* 文字の途中で改行させない */
}