body{
    background-color:#32c0d9;
    margin:0;padding:0;
    background-image:url(../bg.png);
    background-size:10%;
    background-blend-mode:lighten;
}
header div img{
    display:inline-block;
    margin:10px;
    margin-bottom:0;
    width:100px;
}
header div{
    width:380px;
    margin-left:auto;
    margin-right:auto;
}
header{
    background-color:rgb(250, 249, 180);
    border-bottom:solid 10px #32c0d9;
    height: 97px;
    
}
.title{
    text-align:center;
}
.title img{
    width:600px;
}
.character img{
    width:300px;
}
.character{
    width:600px;
    margin:auto;

}
.horizontal-list {
    z-index:3;
    padding-top:120px;
    display:  table-cell;
    vertical-align:  middle;
    margin:auto;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.song-list{
    width:800px;
    margin:auto;
    padding-top:120px;
}
.item {
  /* 横スクロール用 */
  display: inline-block;

  margin: 16px;
}
#bottom{
    position:fixed;
    bottom:0;
    right:0;
    height:300px;
}
#top{
    position:absolute;
    top:0;
    left:0;
    height:170px;
}
#fix{
    position:fixed;
    bottom:0;
    right:0;
    height:300px;
}

/*スマホたて*/
@media screen and (max-width: 480px) {
    .title img{
        width:320px;
    }
    .character{
        width:240px;
        margin:auto;
    }
    #top{
        visibility: hidden;
    }
        .character img{
        width:120px;
    }
    header{height:75px;}
    header div{width:280px;}
    header div img{width:80px;margin:5px;}

#fix{
    
    height:150px;
}
.horizontal-list{
    padding-left:0;
}
.item{
    margin:8px;
}
.item img{
    width:320px;
    height:180px;
    
}
}