/* インジケーター全体を固定表示 */
.indicator-container {
  position: fixed;            /* 画面下部に常に表示 */
  bottom: 1rem;               /* 下からの距離 */
  left: 50%;                  /* 横方向中央に配置 */
  transform: translateX(-50%);/* 完全中央揃え */
  display: flex;              /* ドットを横並びに */
  gap: 0.8rem;                /* ドットの間隔 */
  z-index: 998;               /* 他要素より前面に */
}

/* ドットのスタイル */
.dot {
  width: 12px;
  height: 12px;
  background-color: #777;     /* 通常の色（グレー） */
  border-radius: 50%;         /* 丸くする */
  transition: background-color 0.3s ease;
}

/* アクティブ状態のドット（現在のセクション） */
.dot.active {
  background-color: #fff;     /* 強調表示（白） */
}