/* ページ上部目次（横並び版） */
#page-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(15,15,15,0.95);
    z-index: 1000;
    display: flex;
    justify-content: center; /* 中央揃え */
    align-items: center;
    gap: 50px; /* 項目間の横スペース */
    padding: 15px 0;
    border-bottom: 3px solid rgba(255,80,150,0.5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
}

#page-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
    position: relative;
    padding: 5px 8px;
    transition: color 0.3s ease;
}

#page-menu a:hover {
    color: #ff69b4;
}

#page-menu a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #ff4fa4, #ff85d1, #5ad0ff);
    transition: width 0.3s ease;
}

#page-menu a:hover::after {
    width: 100%;
}


html {
  scroll-behavior: smooth;
}





/* =========================================================
   Spotify × アイドル風 カラーテーマ（カード感強化版）
   - ベース：Spotify風 黒＋ネオングリーン
   - アクセント：アイドル風 ピンクグロウ
========================================================= */
/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    background: #0f0f0f;
    color: #e5e5e5;
    line-height: 1.6;

    /* 背景光を控えめにしてセクションを際立たせる */
    background-image: radial-gradient(circle at top left, rgba(255,100,180,0.1), transparent 60%),
                      radial-gradient(circle at bottom right, rgba(0,255,120,0.08), transparent 70%);
}

/* セクション共通（カード風） */
section {
    max-width: 1000px;
    margin: 50px auto;
    padding: 40px 25px;
    background: rgba(25,25,25,0.95);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 25px rgba(0,255,120,0.2),
                0 4px 15px rgba(255,100,180,0.15);
}

/* セクション見出し */
section h2 {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-size: 1.9rem;
    color: #fff;
    text-shadow: 0 0 12px rgba(255,90,160,0.7),
                 0 0 18px rgba(0,255,150,0.4);
}

section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, #ff4fa4, #ff85d1, #5ad0ff);
    border-radius: 4px;
}




.slider-wrapper {
    max-width: 100%;      /* 画面いっぱい */
    margin: 0 auto;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/* =========================================================
   スライダー（カード内） 
========================================================= */
/* スライダー背景を無効化する場合 */
#slider {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
}

/* スライド本体 */
#slider .slide {
    position: absolute !important;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
}

/* 画像が見切れない設定 */
#slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 表示しているスライド */
#slider .slide.active {
    opacity: 1 !important;
}


/* =========================================================
   テキスト
========================================================= */
#intro p,
#about p {
    color: #d0d0d0;
    font-size: 1.1rem;
}

/* =========================================================
   ユニットアイコン
========================================================= */
.unit-row {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 40px;
    margin-bottom: 50px;
}

.unit-box {
    text-align: center;
    width: 180px;
    margin-bottom: 30px; /* 下に余白 */
}

.unit-icon {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 12px rgba(255,80,160,0.45);
}

.unit-icon:hover {
    transform: scale(1.12);
    box-shadow: 0 0 22px rgba(255,100,180,0.7),
                0 0 30px rgba(0,255,120,0.4);
}

.unit-label {
    margin-top: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 8px rgba(255,90,160,0.7);
}

.unit-label span {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: normal;
    color: #d8d8d8;
}

/* =========================================================
   楽曲アルバム画像
========================================================= */
.song-list {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.song-img {
    width: 200px;
    height: 200px;
    border-radius: 14px;
    object-fit: cover;
    cursor: pointer;
    transition: 0.35s ease;
    box-shadow: 0 0 15px rgba(0,255,120,0.25);
}

.song-img:hover {
    transform: scale(1.07);
    box-shadow: 0 0 22px rgba(255,90,160,0.5),
                0 0 30px rgba(0,255,150,0.4);
}




.song-item {
    position: relative;
}

.song-item:hover::after {
    content: attr(data-desc);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.85rem;
    pointer-events: none;
}



/* =========================================================
   楽曲目次（全体テーマ統合版）
========================================================= */
#songs-index {
    max-width: 1000px;              /* sectionと統一 */
    margin: 50px auto;
    padding: 40px 25px;
    background: rgba(25,25,25,0.95);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 25px rgba(0,255,120,0.2),
                0 4px 15px rgba(255,100,180,0.15);
}

/* あいうえお / A-Z 見出し */
.index-head {
    margin-top: 35px;
    margin-bottom: 15px;
    font-size: 1.4rem;
    color: #fff;
    padding-left: 14px;
    border-left: 6px solid #ff4fa4;
    text-shadow: 0 0 10px rgba(255,90,160,0.6);
}

/* 目次リスト */
.song-index {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}

/* 各曲 */
.song-index li {
    margin: 12px 0;
}

/* リンク */
.song-index a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    color: #e5e5e5;
    background: rgba(40,40,40,0.8);
    border: 1px solid rgba(255,255,255,0.06);
    transition: 0.3s ease;
}

/* ホバー */
.song-index a:hover {
    color: #fff;
    background: linear-gradient(
        90deg,
        rgba(255,79,164,0.9),
        rgba(255,133,209,0.9),
        rgba(90,208,255,0.9)
    );
    box-shadow: 0 0 14px rgba(255,100,180,0.7),
                0 0 22px rgba(0,255,150,0.5);
    transform: translateY(-2px);
}


/* 五十音全体を3列に */
.index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 横3列 */
  gap: 35px 30px;
  margin-top: 30px;
}


.index-block {
  background: rgba(40,40,40,0.85);
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(255,100,180,0.15);
}



.song-index {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.song-index li {
  margin-bottom: 10px;
}







/* =========================================================
   フォーム
========================================================= */
#contactForm {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #1a1a1a;
    padding: 22px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255,80,160,0.15),
                0 0 25px rgba(0,255,120,0.15);
}

#contactForm input,
#contactForm textarea {
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: #2a2a2a;
    color: #fff;
    outline: none;
}

#contactForm input:focus,
#contactForm textarea:focus {
    box-shadow: 0 0 10px rgba(0,255,130,0.5);
}

#contactForm button {
    width: 120px;
    padding: 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
}

#checkBtn {
    background: #ff4fa4;
}
#sendBtn {
    background: #18c96e;
}

#errorMessage {
    font-weight: bold;
    margin-top: 5px;
}

/* =========================================================
   トップへ戻る
========================================================= */
#toTop {
    position: fixed;
    right: 20px;
    bottom: 25px;
    background: #1db954;
    color: #fff;
    padding: 12px 15px;
    border-radius: 50%;
    display: none;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0,255,120,0.6);
    font-size: 1.3rem;
}

/* =========================================================
   レスポンシブ
========================================================= */
@media (max-width: 768px) {
    .unit-row, .song-list {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    section {
        margin: 30px 10px;
        padding: 25px 15px;
    }
}