/* テスト用パネル共通スタイル */
.test-panel {
  position: fixed;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border-radius: 10px;
  color: white;
  font-family: Arial, sans-serif;
}

/* 右上に配置 */
.test-panel-right {
  right: 20px;
}

/* 左上に配置 */
.test-panel-left {
  left: 20px;
}

/* アニメーション遷移テストパネル */
#testNavigation {
  top: 20px;
}

/* ローディングスクリプトテストパネル */
#testLoading {
  top: 160px;
}

/* リンクテストパネル */
#testLink {
  top: 300px;
}

/* パネルタイトル */
.test-panel-title {
  margin-bottom: 10px;
  font-weight: bold;
}

/* ボタンコンテナ */
.test-panel-buttons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* テストボタン共通スタイル */
.test-btn {
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.test-btn:hover {
  opacity: 0.8;
}

/* アニメーション遷移ボタンの色バリエーション */
.test-btn-green {
  background: #27ae60;
}

.test-btn-red {
  background: #e74c3c;
}

.test-btn-blue {
  background: #3498db;
}

.test-btn-orange {
  background: #f39c12;
}

.test-btn-purple {
  background: #9b59b6;
}

.test-btn-teal {
  background: #1abc9c;
}

.test-btn-gray {
  background: #95a5a6;
}

/* ローディングボタン用（オレンジ） */
.test-btn-loading {
  background: #e67e22;
}


/* 各ページへのリンクテスト */
.link-test {
  position: fixed;
  right: 20px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border-radius: 10px;
  color: white;
  font-family: Arial, sans-serif;
}

.link-test-title {
  margin-bottom: 10px;
  font-weight: bold;
}

.link-test-buttons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.link-test a {
  color: white;
  background: #95a5a6;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
  display: inline-block;
}

.link-test a:hover {
  opacity: 0.8;
}