/* ============================
   TINGS SONG PAGE
   （構造＝FFFテンプレ / 色＝TINGS）
============================ */

/* ---------- 全体背景（FFF構造） ---------- */
body {
  background: linear-gradient(135deg, #f0f8ff, #fffaf0);
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* ---------- HERO（FFFテンプレ） ---------- */
.hero-card {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto;

  display: flex;
  align-items: center;
  gap: 20px;

  background: linear-gradient(
    135deg,
    #a6e3ff,
    #ffbde6,
    #fff2a1,
    #d0ffbf,
    #ffb3b3
  );

  border-radius: 20px;
  padding: 30px;

  box-shadow: 0 0 25px rgba(255, 150, 200, 0.35);
  overflow: hidden;
}

/* HEROテキスト */
.hero-text {
  flex: 1;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;

  text-shadow: 0 0 10px rgba(0,0,0,0.4);

  opacity: 0;
  animation: textFade 2.5s ease forwards 0.5s;
}

/* HERO画像 */
.hero-img {
  flex: 1;
  max-width: 500px;
  width: 100%;
  border-radius: 15px;

  opacity: 0;
  animation: logoFade 2.5s ease forwards 1s;
}

/* ---------- フェード（FFF共通） ---------- */
@keyframes textFade {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes logoFade {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- セクション（FFF構造） ---------- */
section {
  max-width: 1000px;
  margin: 50px auto;
  padding: 30px 22px;

  background: #fffdf5;
  border-radius: 16px;

  box-shadow: 0 5px 25px rgba(255,180,200,0.3);
}

/* ---------- セクション見出し（FFF枠 × TINGS色） ---------- */
h1, h2 {
  display: inline-block;
  padding: 12px 20px;

  font-size: 1.9rem;
  color: #ffffff;

  text-shadow:
    0 0 8px rgba(0,120,255,0.7),
    0 0 12px rgba(255,105,180,0.6);

  border-radius: 12px;

  background: linear-gradient(
    135deg,
    #00aaff,
    #ff69b4,
    #ffea00,
    #32cd32,
    #ff4500
  );

  margin-bottom: 25px;
}

/* ---------- 曲カード（FFFテンプレ） ---------- */
.song-detail-card {
  width: 80%;
  margin: 40px auto;

  background: #fff5f8;
  border-radius: 20px;
  padding: 25px;

  border: 2px solid #ffb6c1;

  box-shadow:
    0 5px 15px rgba(255,150,180,0.4),
    0 0 15px rgba(0,170,255,0.25);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.song-detail-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 25px rgba(255,150,180,0.6),
    0 0 18px rgba(0,170,255,0.35);
}

/* ---------- 左画像 ---------- */
.song-left {
  float: left;
  width: 30%;
}

.song-album {
  width: 65%;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
}

/* ---------- 右テキスト ---------- */
.song-right {
  float: right;
  width: 65%;
  padding-left: 25px;

  border-left: 4px solid #32cd32;
}

/* ---------- song title（FFF枠構造 × TINGS色） ---------- */
.song-title {
  display: inline-block;
  padding: 10px 18px;

  font-size: 28px;
  font-weight: bold;
  color: #00aaff;

  text-shadow:
    0 0 6px rgba(0,0,0,0.35),
    0 0 10px rgba(0,170,255,0.6),
    0 0 12px rgba(255,105,180,0.5);

  border: 3px solid transparent;
  border-radius: 10px;

  

  background: rgba(255,255,255,0.08);
  margin-bottom: 12px;
}

/* ---------- 曲説明 ---------- */
.song-description {
  font-size: 1.15rem;
  color: #555;
  line-height: 1.6;
}

/* ---------- フッター ---------- */
.song-footer {
  clear: both;
  margin-top: 25px;
  padding-top: 15px;

  border-top: 2px solid #ff69b4;

  display: flex;
  gap: 25px;

  font-size: 14px;
  color: #ff4500;
}

/* ---------- 戻るボタン（FFFテンプレ） ---------- */
.back-btn {
  display: block;              /* ← ここ重要 */
  width: fit-content;          /* 中身サイズに合わせる */
  margin: 30px auto 0;         /* autoで中央寄せ */

  padding: 8px 15px;
  border-radius: 8px;

  background: linear-gradient(
    45deg,
    #00aaff,
    #ff69b4,
    #ffea00,
    #32cd32,
    #ff4500
  );

  color: #ffffff;
  text-decoration: none;

  box-shadow: 0 0 12px rgba(255,150,180,0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}



.back-btn:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 18px rgba(255,150,180,0.7),
    0 0 18px rgba(0,170,255,0.5);
}

/* ---------- レスポンシブ（FFF準拠） ---------- */
@media (max-width: 768px) {
  .hero-card {
    flex-direction: column;
    padding: 20px;
  }

  .song-left,
  .song-right {
    float: none;
    width: 100%;
    padding-left: 0;
    border-left: none;
    margin-bottom: 20px;
  }

  .song-detail-card {
    width: 95%;
    padding: 20px;
  }
}