/* ============================
      HY：RAIN版 HERO CARD
   ============================ */
.hero-card {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto;
  display: flex;
  flex-direction: row-reverse; /* 左右並び */
  align-items: center;
  padding: 30px;

  /* --- HY：RAINカラーの冷たいグラデ --- */
  background: linear-gradient(
    135deg,
    rgba(140, 210, 255, 0.95),
    rgba(180, 200, 255, 0.9),
    rgba(255, 255, 255, 0.85),
    rgba(170, 230, 255, 0.9)
  );

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

  /* --- 雨の光をイメージした青いグロー --- */
  box-shadow:
    0 0 25px rgba(120, 180, 255, 0.45),
    0 0 60px rgba(120, 180, 255, 0.25);

  animation: fadeIn 2s ease forwards;
  overflow: hidden;

  /* ガラス感 */
  backdrop-filter: blur(5px) saturate(130%);
}

/* ------------------------
        テキスト
   ------------------------ */
.hero-text {
  flex: 1;
  padding-left: 20px;
  font-size: 20px;
  color: #e8f7ff; /* HYRAIN向けに白青系 */
  font-weight: bold;
  text-shadow: 0 0 12px rgba(50, 120, 200, 0.55);
  opacity: 0;

  /* 雨が流れるようなフェード */
  animation: textFadeRain 2.2s ease forwards 0.4s;
  text-align: right; 
}

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

  /* ガラス風効果 */
  box-shadow:
    0 0 20px rgba(80, 150, 230, 0.45),
    0 0 40px rgba(80, 150, 230, 0.25);

  opacity: 0;

  /* 滝のようなフェード */
  animation: imgDropFade 2.5s ease forwards 0.7s;
}

/* ============================
      アニメーション定義
   ============================ */

/* テキストが雨に溶けるようにフェード */
@keyframes textFadeRain {
  0%   { opacity: 0; transform: translateX(-25px) translateY(-10px); }
  60%  { opacity: 0.6; }
  100% { opacity: 1; transform: translateX(0) translateY(0); }
}

/* 画像が上から流れ落ちてくる */
@keyframes imgDropFade {
  0%   { opacity: 0; transform: translateY(-25px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

  .hero-text {
    padding-right: 0;
    margin-bottom: 20px;
    text-align: center;
  }

  .hero-img {
    max-width: 100%;
  }
}





body {
    font-family: "Noto Sans JP", sans-serif;
    background: #0a0a0f;
    color: #eaeaea;

    background-image:
        radial-gradient(circle at 20% 10%, rgba(120,0,200,0.25), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(0,80,200,0.20), transparent 70%),
        radial-gradient(circle at 50% 50%, rgba(200,0,80,0.15), transparent 75%);
}


section {
    max-width: 1000px;
    margin: 50px auto;
    padding: 35px 25px;

    background: rgba(20,20,30,0.85);
    border-radius: 18px;

    border: 1px solid rgba(180,0,255,0.15);
    box-shadow: 0 10px 35px rgba(80,0,150,0.35);
}


section h2 {
    font-size: 2rem;
    color: #ffffff;
    text-shadow:
        0 0 12px rgba(120,0,255,0.8),
        0 0 18px rgba(0,0,255,0.6);

    border-bottom: 3px solid;
    border-image: linear-gradient(
        90deg,
        #7a00ff,
        #003cff,
        #008f39,
        #cc0019,
        #ff013c
    ) 1;

    padding-bottom: 10px;
    margin-bottom: 25px;
}



.unit-icon {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    cursor: pointer;

    box-shadow: 0 0 15px rgba(120,0,255,0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.unit-icon:hover {
    transform: scale(1.12);
    box-shadow: 
        0 0 25px rgba(160,50,255,0.8),
        0 0 40px rgba(0,80,200,0.5);
}


.song-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 14px;
    cursor: pointer;

    box-shadow: 0 0 18px rgba(120,0,255,0.35);
    transition: 0.35s ease;
}

.song-img:hover {
    transform: scale(1.07);
    box-shadow:
        0 0 30px rgba(160,0,255,0.65),
        0 0 40px rgba(0,0,200,0.45);
}


.song-detail-card {
    width: 80%;
    margin: 40px auto;
    padding: 25px;

    background: rgba(25,20,40,0.9);
    border-radius: 20px;

    box-shadow: 0 5px 20px rgba(120,0,255,0.5);
    border: 2px solid rgba(160,0,255,0.6);

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

.song-detail-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 30px rgba(160,0,255,0.7),
        0 0 25px rgba(0,80,200,0.4);
}



.back-btn {
   display: block;              /* ← ここ重要 */
  width: fit-content;          /* 中身サイズに合わせる */
  margin: 30px auto 0;         /* autoで中央寄せ */

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

    /* メンバーカラー5色でクールなグラデ */
    background: linear-gradient(135deg,
        #7b3fb5,   /* 紫（蓮） */
        #0f5b2a,   /* 濃い緑（青葉） */
        #b00020,   /* 赤（絃葉） */
        #003c8f,   /* 濃い青（菜花） */
        #8b0000    /* 真紅（柔） */
    );

    background-size: 250% 250%; /* 光が流れるように */
    animation: rainGradientMove 6s ease infinite;

    color: #e8f4ff;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: bold;

    box-shadow:
        0 0 14px rgba(120,160,255,0.45),
        0 0 25px rgba(80,120,200,0.25);

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

/* ホバー時：青～紫の光が浮かぶ感じ */
.back-btn:hover {
    transform: scale(1.06);
    box-shadow:
        0 0 20px rgba(130,170,255,0.75),
        0 0 30px rgba(90,140,255,0.5);
}

/* グラデーションをゆっくり動かす雨風アニメ */
@keyframes rainGradientMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}