/*
================================================================================
   BUTTON.CSS - ボタン・インタラクション
================================================================================
   
   役割：
   - 専用ボタンのスタイル管理
   - もっと見る/表示を減らすボタン
   - ボタンのホバー効果とトランジション
   - アクセシビリティ対応
   
   対象ページ：index.html, player.html
   依存関係：base.css
   
================================================================================
*/

/* ===============================
   ボタンスタイル
   =============================== */

/* もっと見るボタン */
#loadMoreBtn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1em;
  font-weight: bold;
  color: white;
  background-color: #002b6c;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#loadMoreBtn:hover {
  background-color: #001a5e;
}

/* 表示を減らすボタン */
#loadLessBtn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1em;
  font-weight: bold;
  color: white;
  background-color: #002b6c;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#loadLessBtn:hover {
  background-color: #001a5e;
}