/* --- 基本設定 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    background-color: #000; /* 画像読み込み前の背景色 */
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: hidden; /* 横スクロール防止 */
}

/* --- 1. ヒーローセクション (ステージ全体) --- */
.hero-stage {
    position: relative;
    height: 100vh; /* 画面全体の高さ */
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

    /* ★重要★
       ここに、あのビジュアルイメージの画像パスを指定します
    */
    background-image: url('images/rock-n-code-background.png'); /* 例: 'images/background.jpg' */

    /* 背景画像の設定 */
    background-size: cover;     /* 画面全体を覆う */
    background-position: center center; /* 中央に配置 */
    background-repeat: no-repeat; /* 繰り返さない */
}

/* --- 2. ギターフレット風ナビゲーション --- */
.fretboard-nav {
    width: 100%;
    background-color: #3d2c1d; /* フレットボードの木目風 */
    border-bottom: 5px solid #aaa; /* ナット(弦の根本) */
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

    /* 背景画像になじませるため、少し透明度を持たせるのもアリ */
    /* background-color: rgba(61, 44, 29, 0.9); */
}

.fretboard-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.fretboard-nav li {
    flex-grow: 1;
    text-align: center;
    /* フレット(金属の仕切り) */
    border-right: 4px solid #c0c0c0;
}

.fretboard-nav li:first-child {
    border-left: 4px solid #c0c0c0;
}

.fretboard-nav a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #f0e0d0;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

.fretboard-nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* --- 3. メインコンテンツ (テキスト) --- */
.hero-content {
    /* 背景画像の「ROCK 'N' CODE」の文字があった位置に
       重なるようにマージンを調整します。
    */
    margin-top: 10%; /* この値は画像に合わせて微調整してください */
    text-align: center;
    position: relative;
    z-index: 10;
}

.main-headline {
    font-family: 'Orbitron', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;

    /* メタリックなテキストのグラデーション */
    background: linear-gradient(to bottom, #ffffff 40%, #aaaaaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* ネオンの影 (ピンク系) */
    text-shadow:
        0 0 10px #fff,
        0 0 20px #ff00ff,
        0 0 30px #ff00ff,
        0 0 40px #ff00ff;
}

.sub-headline {
    font-size: 1.25rem;
    color: #eee;
    text-shadow: 0 0 5px #fff;
    margin-top: 10px;
}

/*
   --- 削除された要素 ---
   .spotlight, .silhouette-placeholder, .equalizer のCSSは
   背景画像に含まれるため不要になりました。
*/