/* =========================================================
 * song.css … 曲のページ（single.php）だけで使う見た目
 *
 * ※ そのページのその場所でしか使わない小さなもの（くるくるマーク、
 *    PC表示／スマホ表示の切り替えボタン、「曲の詳細」の行間）は、
 *    single.php の中の、使う場所のすぐそばに書いてある。
 * ========================================================= */


/* ---------------------------------------------------------
 * 歌詞本文の表示（PC表示／スマホ表示の切り替え）
 * body の mode 属性は js/modechange.js が付ける
 * --------------------------------------------------------- */
.bun_content{
	display: none;
}
body[mode="bun"] .bun_content {
	display: block;
}

.bun_pc_content{
	display: none;
}
body[mode="bun_pc"] .bun_pc_content {
	display: block;
}

.bun_content > p,
.bun_pc_content > p {
    margin-bottom: 1em;
}

/* PC表示（横長）：幅制限を解除し、横スクロール可能にする */
.bun_pc_content {
    max-width: none !important; /* SWELL の max-width を無効化 */
    width: auto !important;     /* 自由に伸びる */
    overflow-x: auto;           /* 横スクロール可能 */
    white-space: nowrap;        /* 自動折り返し禁止にする場合 */
}


/* ---------------------------------------------------------
 * 寄付ボタン（「サイト運営を応援してください」）
 * --------------------------------------------------------- */
.donation-box {
  margin: 40px 0;
  padding: 30px;
  background: #fff8f0;
  border: 2px solid #ffd7b5;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.donation-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #d35400;
}

.donation-text {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #333;
}

.donation-btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  border-radius: 30px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.donation-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}