table {
    margin: 10px auto;
    text-align: center;
    width: 100%
  }
  .table-border th {
    background: #808080;
    border: solid 2px #ccc;
    color: #fff;
    padding: 5px 5px;
    text-align: center;
    vertical-align: middle;
  }
  .table-border td {
    background: #e5e5e5;
    border: solid 2px #ccc;
    padding: 5px 5px;
    text-align: center;
    vertical-align: middle;
  }
  
#show_set_key:checked ~ #set_key{
  display: block;
}

.hidden-scrollbar {
  -ms-overflow-style: none; /* IE, Edge �Ή� */
  scrollbar-width: none; /* Firefox �Ή� */
}
.hidden-scrollbar::-webkit-scrollbar {
  /* Chrome, Safari �Ή� */
  display: none;
}
#show_detail_search:checked ~ #detail_search{
  display: block;
}

.overflow-box {
 overflow-x: scroll;
 /* IE, Edge 対応 */
 -ms-overflow-style: none;
 /* Firefox 対応 */
 scrollbar-width: none;
}
/* Chrome, Safari 対応 */
.ranking-box::-webkit-scrollbar {
 display:none;
}

.ranking{
  padding: 0px auto;
  width: 100px;
  font-weight: bold;
  color: #FFF;/*文字色*/
  background: #909090;
  border-radius: 50%;/*角の丸み*/
}

.top1{
  background: #CFB53B;
}

.top2{
  background: #bbbbbb;
}

.top3{
  background: #C47222;
}

.box4{
  padding: 1px auto;
/*  width: 70px;*/
  font-weight: bold;
  color: #000;/*文字色*/
  background: #FFF;
  border: solid 2px #000;/*線*/
  border-radius: 8px;/*角の丸み*/
}

.box5{
  padding: 1px auto;
  width: 70px;
  font-weight: bold;
  color: #CFB53B;/*文字色*/
  background: #FFF;
  border: solid 2px #CFB53B;/*線*/
  border-radius: 8px;/*角の丸み*/
}

.bg-sheet{
  background-color: #faf9ee;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}

#scroll_button{
  position:fixed;
  bottom:30px;
  right:30px;
  cursor:pointer;
  width:40px;
  height:40px;
  border-radius: 50%;
  background-color: orange;
  color: white;
  opacity: 0%;
  display: none;
/*  transition: all 1s;*/
}