#side-container{
    z-index:20 ;
    margin:50px 1% 10px 1%;
    font-size: 12px;
    text-align: left;
    color: #000000;
    background-color: var(--app-teller-body-color);

}

@media screen and (min-width: 993px) {
    #side-container {
        left:0;
        width: 24%;
        position: fixed;
    }
}

#find-container{
  margin:1px 1% 5px 1%;
}
.side-container-line{
  z-index: 1;
  margin: 10px 2% 1px 2%; 
  border: none; 
  height: 1px; 
  width:96%; 
  background-color: #bfbec5;
}

#find-bt{
  margin:1 2% 1 2%;
}
#find-bt1{
  margin: 10px 0 1px 2%; 
  width: 46%;
}
#find-bt2{
  margin: 10px 0 1px 2%; 
  width: 46%;
}
#side-container input#findtext{
  z-index: 1;
  margin:15px 0px 0px 2%;
  width: 90%;
  height:23px;
}
#side-container input#findtextnot{
  margin:0px 0px 0px 2%;
  width: 90%;
  height:23px;
}
#side-container img.cancel-button{
    margin: 5px 0 4px 0px;
    height:20px;
    width:4%;
}

#radio-container{
  margin: 10px 0 10px 2%;
}
.customchecklable {
display: flex;
align-items: center;
width: 25%; /* ラベルは全体の20% */
white-space: nowrap; /* テキストを改行させない */
}
.radio-group {
  margin: 5px 0 0px 2%;
  display: flex;
  align-items: center; /* ボタンとラベルの高さを揃える */
  gap: 10%; /* ラジオボタン同士の間隔 */
}
.customcheck {
  width: 50%; 
}
.side-button{
  width:100%  !important;
  margin:5px 0  0 0  !important;
}
.freediskitem,.sidetextitem {
display: flex;
justify-content: space-between;
font-size:12px;
margin:10px 10px -10px 10px;
}
.freedisklabel {
flex: 1;
font-size:12px;
}
.freediskvalue {
flex: 1;
text-align: right;
font-size:12px;
}
#heartsgoodcount{
  padding:3px 3px 0 3px;
  margin:0px 3px 3px 0px;
}
@media (max-width: 992px) {
    /* ---------------------------side-container phone----------------------------------------- */
    #side-container{
        /*display:none;*/
        z-index:1;
        margin:130px 0 0 0;
        text-align: left;
        position:absolute;
        font-size: 38px;
        color: #000000;
        background-color: var(--app-teller-body-color);
    }
    
    .customcheck {
      width: 50%; 
      margin-right:15px;
    }
        
    #find-bt{
      margin:0 2% 0 2%;
    }
    #find-bt1{
      margin:10px 0 0 2%;
      width: 46%;
    }
    #find-bt2{
      margin:10px 0 0 2%;
      width: 46%;
    }
    #side-container input#findtext{
      z-index:1;
      font-size: 32px;
      margin:15px 0px 10px 2%;
      height:60px;
      width:88%;
    }
    #side-container input#findtextnot{
      z-index:1;
      font-size: 32px;
      margin:15px 0px 10px 2%;
      height:60px;
      width:88%;
    }
    #side-container img.cancel-button{
      z-index:1;
            margin: -20px 0px 0px 0px; 
            width:35px;
            height:32px;
    }
    .side-button{
      width:100%  !important;
      margin:10px 0  0 0  !important;
    }
    .customchecklable {
      font-size:32px;
      display: flex;
    align-items: center;
    width: 25%; /* ラベルは全体の20% */
    white-space: nowrap; /* テキストを改行させない */
    }
    .freediskitem,.sidetextitem {
    display: flex;
    justify-content: space-between;
    font-size:38px;
    margin:10px 20px -10px 20px;
    }
    .freedisklabel {
    flex: 1;
    font-size:38px;
    }
    .freediskvalue {
    flex: 1;
    text-align: right;
    font-size:38px;
    }
    #heartsgoodcount{
      padding:3px 0px 0 3px;
      margin:20px 0px 10px 10px;
    }
}