#BodyDroidKun {
    background:#303030;
    font-size:10px;
    overscroll-behavior-y:none;
    touch-action:none;
    margin: 0;
    overflow: hidden;
}

#DivDroidKun {
    position: relative;
    z-index: 1;
}

#EDITOR {

    position: absolute;
    z-index: 2;
}
#imgLoad {
    
    position: absolute;
    display: none;

    user-select: none; /* CSS3 */
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Safari、Chromeなど */
    -ms-user-select: none; /* IE10かららしい */

    z-index : 2;
}

#buttonLoad {
    display: none;
}

#DivRankingTable {
    position: absolute;
    z-index: 3;

}

#DivRanking {
    display : none;
    position: absolute;
    z-index: 3;
}

#ImageMap {
    display: none;
}

#ImageMapHowTo {
    display: none;
}


#DivHowToIndexContent {

    overflow-y: auto;
    
    position: absolute;
    color: #C0C0C0;
    font-size: 13px;
    /* display: grid; */
    /* grid-auto-rows: 100px; */
    /* grid-template-columns: repeat(auto-fill, 100px); */
    /* grid-gap: 30px 10px; */

    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
    flex-wrap: wrap;
    
}

#howToIndex {
    z-index : 4;
}

#DivHowTo {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 3;
}



.howToGrid {
    border: solid 2px lightGray;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
    background-color : #505050;

    border-radius: 3px;

    width: 100px;
    height: 100px;

    margin: 30px 10px;
}

.howToGrid:hover {
    border: solid 4px lightGray;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */

}

.inTile {
    text-align: center;


}

.howToContent{
    font-size: 15px;
    display: none;
    color: #C0C0C0;
    z-index: 4;

}
.howToContentGrid {
    overflow-y: auto;

    position: absolute;
    grid-auto-rows: 300px;
    grid-template-columns: repeat(1, 400px);    
    grid-gap: 60px 30px;

    border: solid 2px lightGray;
    
    -webkit-justify-content:center;
    justify-content:center;
    
    background-color : #404040;

    border-radius: 3px;


}

.howToContentGrid img {
    margin : 0 auto;
    display : block;
    width: 400px;

}
.contentTitle {
    font-size : 20px;
    text-align : center;
    color: #C0C0C0;
    width : 100%;
    z-index: 6;
    position: relative;
    background-color : #353535;


}




.btn-flat-border {
  display: inline-block;
  text-decoration: none;
  color: #c0c0c0;
  border: solid 2px #c0c0c0;
  border-radius: 3px;
  font-size: 20px;
  position: absolute;

  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
  justify-content: center; /* 横方向中央揃え */


  user-select: none; /* CSS3 */
  -moz-user-select: none; /* Firefox */
  -webkit-user-select: none; /* Safari、Chromeなど */
  -ms-user-select: none; /* IE10かららしい */
  
  
}


.name {
    font-size: 9px;
}


.divInGrid {
    margin-left: auto;
    margin-right: auto;
    width : 420px;

    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
    
    
    z-index: 6;
    margin-top: 1em;
    margin-bottom: 3em;
    
}
.divInGrid div {
    z-index: 7;
}


#howToPrev {
    display: none;
    z-index: 4;

}
#howToNext {
    display: none;
    z-index: 4;

}
#howToClose {
    z-index: 4;
}


.contentMain {
    z-index: 5;
    
}

img.inline {
    display: inline-block;
}
img.sizeSS {
    margin: 0px 3px -2px 3px;
}


div.inline {
    display: inline-block;
}
div.sizeSS {
    margin: 0px 3px -2px 3px;
}


html {
    --padding : 0.5em;
    --rank : 4em;
    --name : 20em;
    --block : 5em;
    --map : 4em;
    --sum : 6em;
    --tbodyH : 200px;
    background-color : #353535;
}

table td.sorted {
    /* background-color : #c5c5c5; */
    background-color : rgba(197,197,197, 0.9);
}
table tr:nth-child(odd) td.sorted {
    /* background-color : #b5b5b5; */
    background-color : rgba(181,181,181, 0.9);
}


table {
    border-collapse: collapse;
    /* border: solid 1px black; */
    
    /* padding-right: 15px */
}
table tr {
    /* background-color : #f5f5f5; */
    background-color : rgba(245,245,245, 0.9);
}
table td.yourScore {
    /* background-color : #b58590 !important; */
    background-color : rgba(181,133,144, 0.9) !important;
}

table tr:nth-child(odd) {
    /* background-color : #e5e5e5; */
    background-color : rgba(229,229,229, 0.9);
}
table th, table td {
    border: solid 1px black;
}


tbody tr:hover td {
    /* background-color : #a0a0a0 !important; */
    background-color : rgba(160,160,160, 0.9) !important;
}

tbody tr {
    width : 100%;
}


table thead th {
    /* background-color : #303030 !important; */
    background-color : rgba(48,48,48, 0.9) !important;
    color: #f0f0f0;
    border: solid 1px #808080;
}

.sortItem {
    background-image : url("img/rankingSortDisable.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
}


thead {
    display: block; 

}
#myRanking {
    display: block; 
    overflow-y: scroll;
    height: var(--tbodyH);
}


.RANK {
    width: var(--rank);
}
.NAME {
    width: var(--name);
}
.BNUM {
    width: var(--block);
}

.MAP {
    width: var(--map);
}
.SUM  {
    width: var(--sum);
}


.name {
    padding-left: var(--padding);
    width: calc(var(--name) - var(--padding) + 1px);
}


.bNum {
    text-align: right;
    padding-right: var(--padding);
    width: calc(var(--block) - var(--padding) + 1px);
}

.map {
    text-align: right;
    padding-right: var(--padding);
    width: calc(var(--map) - var(--padding) + 1px);
}

.sum {
    text-align: right;
    padding-right: var(--padding);
    width: calc(var(--sum) - var(--padding) + 1px);
}

.rank {
    text-align: right;

    padding-right: var(--padding);
    width: calc(var(--rank) - var(--padding) + 1px);

}
    

.uid {
    display: none;
}


#rankingClose {
    position: absolute;
}

hr {
    border: none;
    background-color : gray;
    height: 1px;
    margin-left: 0px;
    text-align: left;
}


#DivRanking {
    overflow-x: scroll;   
}