/* img {
  width: 100%;
  height: auto;
} */
 

 /* ---------------------------------- */
/* PC表示（デフォルト）: 画面いっぱいに表示 */
/* ---------------------------------- */
#hero-image {
    /* PC用の画像ファイルを指定 */
    background-image: url('/img/pc-top.jpg'); 
    
    /* 画面幅いっぱい */
    width: 100vw; 
    /* 画面高さいっぱい (ビューポートの高さ) */
    height: 100vh; 
    
    /* 画像をコンテナいっぱいに拡大/縮小して表示 */
    background-size: cover;
    /* 画像を中央に配置 */
    background-position: center;
    background-repeat: no-repeat;
    
    /* ページの左上を基準に配置（他の要素がある場合に便利） */
    position: absolute; /* または fixed */
    top: 0;
    left: 0;
    /* 他のコンテンツの下に敷く場合は z-index を調整 */
    z-index: -1; 
}


/* ---------------------------------- */
/* SP表示: 幅 767px以下の場合に適用    */
/* ---------------------------------- */
@media screen and (max-width: 767px) {
    #hero-image {
        /* SP用の画像ファイル名に上書き */
        background-image: url('/img/sp-top.jpg'); 
        
        /* SPでも画面いっぱいにしたい場合、この行はそのまま */
        height: 100vh; 
        
        /* SPで画面いっぱいでなく、コンテンツの高さに合わせたい場合はこの行を削除し、
           代わりに具体的な高さを設定（例: height: 300px;）*/
    }
}