html,body{
    height:100%;
    margin:0px;
}

header{
    top: 0;
    background-color:rgb(59, 216, 137);
    position:fixed;
    height:50px;
    width:2000px;
    z-index: 15;
    min-width:1200px;
    left:0;
}

.HeadBlock{
    margin:2px 3px;
    float:left;
}

.HeadBlock p{
    font-size:13px;
    margin:1px 3px;
 }
.button, .modal_button{
    font-size:9px;
    margin-top:8px;
    height:28px;
    width:75px;
    text-align: center;
}

#init{
    margin-left:50px;
}

#genarate_modal_delete{
    margin-top:50px;
}

#musiclistid{
    width:300px;
}

#main{
    width:100%;
    height:calc(100% - 50px);
    top:50px;
    background-size: cover;
    text-align: center;
    /*background-image : url(../img/backaxis.jpg );*/
    z-index:0;
    left:0;
    position:relative;
}

#main::before{
    position: absolute;
    width: 2px;
    background:black;
    left: 50%;
    content: '';
    height: 100%;
    z-index:1;
}

#generate_position::before{
    position: absolute;
    width: 100%;
    background:black;
    top: 50%;
    content: '';
    height: 2px;
    z-index:1;
    right: 0;
}


#generate_position > .ui-selectee > .ui-selected {
    border: solid 2px red;;
}

.music_box{
    float:left;
    font-size: 10px;
    border-radius: 5px;
    word-break : break-all;
    z-index: 10;
    width:41px;
    height:38px;
    font-weight:500;
    border-style: groove;
    position:absolute;
}

.music_box_2{background-color:yellow; opacity: 0.8;}
.music_box_3{background-color:deeppink; opacity: 0.8;}
.music_box_4{background-color:red; opacity: 0.8;}
.music_box_5{background-color:darkblue; color:white; opacity: 0.8;}
.music_box_6{background-color:mediumpurple; opacity: 0.8;}
.music_box_7{background-color:silver; opacity: 0.8;}
.music_box_8{background-color:orange; color: white;opacity: 0.8;}
.music_box_9{background-color:aqua; opacity: 0.8;}
.music_box_10{background-color:midnightblue; color:white; opacity: 0.8;}
.music_box_11{background-color:rgb(117, 2, 2); color:white; opacity: 0.8;}
.music_box_12{background-color:blue; color:white; opacity: 0.8;}
.music_box_13{background-color:#666; opacity: 0.8;}
.music_box_14{background-color:goldenrod; opacity: 0.8;}
.music_box_15{background-color:#063; color:white; opacity: 0.8;}
.music_box_16{background-color:hotpink; opacity: 0.8;}
.music_box_17{background-color:#e5eeff; opacity: 0.8;}
.music_box_18{background-color:#fcc800; opacity: 0.8;}
.music_box_19{background-color:deepskyblue; opacity: 0.8;}
.music_box_20{background-color:#DDD; opacity: 0.8;}
.music_box_21{background-color:rgb(71, 9, 9); color:white; opacity: 0.8;}
.music_box_22{background-color:darkgray; opacity: 0.8;}
.music_box_23{background-color:#c0b900; opacity: 0.8;}
.music_box_24{background-color:black; color:white; opacity: 0.8;}
.music_box_25{background-color:lightgray; opacity: 0.8;}
.music_box_26{background-color:rgb(41, 35, 4); color:white; opacity: 0.8;}


/* モーダル コンテンツエリア */
#generate_modal-main{
    display: none;
    width: 750px;
    height: auto;
    padding-bottom: 20px;
    top:50%;
    left:50%;
    text-align:center;
    color: black;
    background-color: white;
    position:fixed;
    z-index: 20;
    border-radius: 5px;
    border: solid 1px blue;
}

#ver_list_container{
    margin:0 20px;
    display: inline-block;
    height:200px;
    width:200px;
}
#ver_list_content{
    text-align: center;
}

#score_list{
    margin:0 20px;
    vertical-align: top;
    display: inline-block;
    height:auto;
    width:300px;
}

#del_modal-main{
    display: none;
    width: 1000px;
    height: auto;
    padding-bottom: 20px;
    top:50%;
    left:50%;
    text-align:center;
    color: black;
    background-color: white;
    position:fixed;
    z-index: 20;
    border-radius: 5px;
    border: solid 1px blue;
}

#del_list_container{
    position: relative;
    height: 250px;
}

#del_decide{
    position: absolute;
    float:left;
    top: 35%;
    left:5%;
    padding: 10px;
}

#del_setted_area{
    position: absolute;
    height: 200px;
    width: 300px;
    float:left;
    left:15%;
    margin: 0 25px;
}

#del_setted{
    width: 300px;
    height: 180px;
}

#del_move_button{
    position: absolute;
    float:left;
    top: 35%;
    left:50%;
    padding: 10px;
}


#del_select_area{
    position: absolute;
    height: 200px;
    width: 300px;
    float:left;
    left:60%;
    margin: 0 25px;
}

#del_select{
    width: 300px;
    height: 180px;
}

#modal-main{
    display: none;
    width: 500px;
    height: auto;
    margin: auto;
    top:50%;
    left:50%;
    text-align:center;
    color: black;
    background-color: white;
    position:fixed;
    z-index: 20;
    border-radius: 5px;
    border: solid 1px blue;
    float: none;
}

.search{
    text-align: center;
}

#searchSQ{
    position:absolute;
    opacity: 1.0;
    width: 48px;
    height: 48px;
    border: outset 2px red;
    z-index: 31;
}

.config_content p{
    margin:15px 0 2px;
}

#fadeLayer {
    position:absolute;
    top:0;
    left:-10px;
    width:100%;
    height:100%;
    background-color:#000000;
    opacity:0.5;
    visibility:hidden;
    z-index:18;
}

#tweet{
    margin-top:20px;
}


/* 説明モーダル コンテンツエリア */
#info_modal-main{
    overflow-y: scroll;
    display: none;
    width: 1000px;
    height: 600px;
    margin: auto;
    top:50%;
    left:50%;
    color: black;
    background-color: white;
    position:fixed;
    z-index: 20;
    border-radius: 5px;
    border: solid 1px blue;
    float: none;
}

#info_modal-main span{
    font-size:12px;
    margin-top:1px;
}

/* 配置済みモーダル コンテンツエリア */
#setted_modal-main{
    overflow-y: scroll;
    display: none;
    width: 1000px;
    max-height: 80%;
    margin: auto;
    top:50%;
    left:50%;
    color: black;
    background-color: white;
    position:fixed;
    z-index: 20;
    border-radius: 5px;
    border: solid 1px blue;
    float: none;
}

#setted_list{
    display: block;
}

#setted_list > p, #nosetted_list > p{
    color: rgb(150, 15, 15);
    font-size: 18px;
}
#setted_list > li, #nosetted_list > li{
    font-size: 14px;
}

/*吹き出し*/
.arrow_box {
    width: auto;
    height: 25px;
    position: absolute;
    opacity: 0.8;
    border-radius: 8px;
    background: #333;
    color: #fff;
    z-index: 17;
}