:root {
--金: rgba(255, 215, 0, 0.6);
--背景: rgba(20, 20, 20, 0.85);
--影: 0 4px 15px rgba(0, 0, 0, 0.5);
}
#ログインバー {
 position: fixed !important;
 top: 20px !important;
 left: 50px !important;
 margin: 0 !important;
 padding: 0 !important;
 display: flex;
 gap: 8px;
 z-index: 99999;
 pointer-events: none;
}

.機能アイコン {
 width: 42px;
 height: 42px;
 cursor: pointer;
 opacity: 0.7;
 transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 pointer-events: auto;

 /* 個別枠の設定 */
 background: var(--背景);
 backdrop-filter: blur(10px);
 border-radius: 10px;
 border: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

 /* スプライト設定 */
 background-image: url('../menu/icon.png');
 background-size: 200% 200%;
 background-repeat: no-repeat;
 display: inline-block;
}

.機能アイコン.メニュー { background-position: 0% 0%; }
.機能アイコン.ユーザー { background-position: 100% 0%; }
.機能アイコン.設定 { background-position: 0% 100%; }
.機能アイコン.サイドバー { background-position: 100% 100%; }

.機能アイコン:hover {
 opacity: 1;
 transform: scale(1.05) translateY(-3px);
 border: 1px solid rgba(255, 215, 0, 0.8); /* ここで--金(相当)を使用 */
 box-shadow: 0 0 20px var(--金); /* 黄金の発光 */
 filter: brightness(1.2);
}
/* 展開パネル共通 */
#展開コンテンツ {
 position: fixed;
 top: 70px;
 left: 0px; /* 余白を削除 */
 width: 280px;
 background: rgba(15, 15, 15, 0.95);
 backdrop-filter: blur(20px);
 border-radius: 16px;
 border: 1px solid rgba(255, 255, 255, 0.08);
 padding: 12px;
 display: none;
 flex-direction: column;
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
 z-index: 99998;
}

#展開コンテンツ.active {
 display: flex;
 animation: panelPop 0.25s cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes panelPop {
 from { opacity: 0; transform: scale(0.95) translateY(-10px); }
 to { opacity: 1; transform: scale(1) translateY(0); }
}

/* サイドバー（イメージ図左側） */
#左サイドバー {
 position: fixed;
 top: 0;
 left: -300px;
 width: 255px;
 height: 96vh;
 background: #0f0f0f;
 border-right: 1px solid rgba(255, 255, 255, 0.1);
 transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 z-index: -1;
 visibility: hidden;
 padding: 70px 8px 10px;
 display: flex;
 flex-direction: column;
 gap: 5px;
}

#左サイドバー.open {
 left: 0;
 visibility: visible;
 z-index: 100000; /* 展開時のみ最前面 */
 box-shadow: 10px 0 13px rgba(200, 200, 200, 0.3);
}

.サイドバー項目 {
 display: flex;
 align-items: center;
 gap: 15px;
 padding: 10px 12px;
 border-radius: 8px;
 color: #efefef;
 font-size: 14px;
 cursor: pointer;
 transition: 0.2s;
}

.サイドバー項目:hover {
 background: rgba(255, 255, 255, 0.1);
}

.サイドバー閉じボタン {
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 top: 10px;
 right: 10px;
 font-size: 18px;
 color: #fff;
 /* .機能アイコンのスタイルを継承するためJSで付与するが、背景画像は上書き */
 background-image: none !important;
 line-height: 1;
 z-index: 100001;
}

.サイドバー見出し {
 color: #eea;
 font-size: 15px;
 font-weight: bold;
 margin: 10px 8px 5px;
 text-transform: uppercase;
}

/* コンテンツリストの項目 */
.リスト項目 {
 font-size: 14px;
 padding: 4px;
 border-radius: 10px;
 color: #fff;
 cursor: pointer;
 transition: 0.2s;
 display: flex;
 align-items: center;
 gap: 10px;
}

.サイドバー見出し:hover {
 font-weight: bold;
 color: var(--金);
}


.リスト項目:hover {
 background: rgba(255, 215, 0, 0.1);
 color: var(--金);
}

/* ---- スマホ対応 ---- */
@media (max-width: 640px) {
 #ログインバー {
  top: 8px !important;
  left: 8px !important;
  gap: 6px;
 }
 .機能アイコン {
  width: 38px;
  height: 38px;
 }
 #展開コンテンツ {
  width: calc(100vw - 16px);
  max-width: 280px;
  left: 8px;
  top: 56px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
 }
 #左サイドバー {
  width: 80vw;
  max-width: 280px;
  left: -100vw;
  padding: 50px 10px 20px;
  overflow-x: hidden;
  box-sizing: border-box;
 }
 #左サイドバー.open {
  left: 0;
 }
 .サイドバー項目 {
  padding: 8px 10px;
  font-size: 14px;
 }
 .サイドバー見出し {
  font-size: 16px;
 }
 .リスト項目 {
  font-size: 15px;
  padding: 6px;
 }
}