/* サイドバーの基本スタイル */
.sidebar {
  width: 60px; /* 初期の幅 */
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #003e6e;
  transition: width 0.3s;
  overflow-x: hidden;
  z-index: 2000; /* メインコンテンツより上に表示するためのz-index */
}

.menu-items a {
  cursor: pointer;
  text-decoration: none;
  color: #fff; /* リンクの初期色を設定 */
}

/* メニューリンクのホバースタイル */
.menu-items a:hover,
.menu-items a:focus {
  color: #a9987f; /* ホバー時の色を設定 */
}

/* アクティブなメニューリンクのスタイル */
.menu-items a.active {
  color: #d77f5f; /* アクティブなリンクの色を設定 */
}

.menu-items {
  list-style: none;
  margin-top: 100px;
  padding-left: 0px;
}

/* サイドバーの広がった状態 */
.sidebar.expanded {
  width: 330px; /* 拡張時の幅 */
}

.icon-container {
  width: 60px; /* サイドバーが閉じている時の横幅に合わせる */
  display: flex;
  justify-content: center; /* アイコンを中央揃えにする */
}

/* メニューアイテムのテキストを初期状態で隠す */
.menu-text {
  font-size: 1.2em;
  margin-left: 5px;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  transition: width 0.1s ease;
}

.sidebar.expanded .menu-text {
  width: auto; /* メニューが開いた時にテキストを表示 */
  transition-delay: 0.1s; /* サイドバーのアニメーション後にテキストが広がるように遅延を設定 */
}

/* ロゴとメニュートグルボタン */
.logo-header {
  cursor: pointer;
}

.menu-logout {
  margin-top: 130px;
}

/* メインコンテンツのスタイル */
#main-content {
  margin-left: 60px; /* サイドバーの幅に合わせる */
  transition: margin-left 0.3s;
}

/* サイドバーが拡張されたときのメインコンテンツのマージン
.sidebar.expanded + #main-content {
  margin-left: 250px;
}
*/