#bdraw_ipcheck.hidden{
  display:none;
}

.numpanelbutton{
    /* width:150px; */
    width:clamp(50px,min(10vw,10vh),100px);
    height:clamp(50px,min(10vw,10vh),100px);
    font-size:40px;
    margin:0;
    padding:0;
}
.numpanelbutton_y4{
    width:50px;
    /* width:clamp(50px,min(10vw,10vh),100px); */
    height:clamp(200px,min(40vw,40vh),400px);
    font-size:40px;
    margin:0 -3px;
    padding:0;
}

  .numpanelbutton_none{
    display:none;
  }
  /* .numpanelbutton2{    使ってない？
    width:150px;
    height:50px;
    font-size:40px;
  } */
  #number-panel{
    background:#d1d1d1;
    border: 2px solid #d1d1d1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 4px;
    resize:both;
    overflow:hidden;
    position:fixed;
    /* top:500px;
    left:600px; */
    min-width:150px;
    min-height:150px;
    z-index:10000;
  }
  #number-panel.panelsize0{
    display:none;
  }
@media (orientation: landscape){
    #number-panel{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 5px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 3 + 36px);
    }
    #number-panel.panelsize7{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 5px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 36px);
    }
    #number-panel.panelsize10{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 5px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 4 + 36px);
    }
    #number-panel.panelsize11{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 5px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 3 + 36px);
    }
    #number-panel.drawingpanelsize{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 5px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 2 + 36px);
      background:#da3c41;
    }
    #number-panel.fracpanelsize{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 6 + 50px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 4 + 36px);
      background:#B0E0E6;
    }
  }
  @media (orientation: portrait){
    #number-panel{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 3 + 5px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 36px);
    }
    #number-panel.panelsize7{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 5px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 36px);
    }
    #number-panel.panelsize10{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 4 + 5px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 36px);
    }
    #number-panel.panelsize11{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 3 + 5px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 5 + 36px);
    }
    #number-panel.drawingpanelsize{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 3 + 5px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 3 + 36px);
      background:#da3c41;
    }
    #number-panel.fracpanelsize{
      width:calc( clamp(50px,min(10vw,10vh),100px) * 6 + 50px);
      height:calc( clamp(50px,min(10vw,10vh),100px) * 4 + 36px);
      background:#B0E0E6;
    }
  }
  .drawingpanel .numpanelbutton, .fracpanel .numpanelbutton{
    margin:0 -3px;
  }
  /* #number-panel > input:nth-child(2):checked ~ .numpanels > .numpanel:first-child,
  #number-panel > input:nth-child(3):checked ~ .numpanels > .numpanel:nth-child(2),
  #number-panel > input:nth-child(4):checked ~ .numpanels > .numpanel:nth-child(3),
  #number-panel > input:nth-child(5):checked ~ .numpanels > .numpanel:nth-child(4),
  #number-panel > input:nth-child(6):checked ~ .numpanels > .numpanel:nth-child(5),
  #number-panel > input:nth-child(7):checked ~ .numpanels > .numpanel:nth-child(6),
  #number-panel > input:nth-child(8):checked ~ .numpanels > .numpanel:nth-child(7),
  #number-panel > input:nth-child(9):checked ~ .numpanels > .numpanel:nth-child(8),
  #number-panel > input:nth-child(10):checked ~ .numpanels > .numpanel:nth-child(9) {
      display: block;
  } */
  .drawingpanel > input:nth-child(1):checked ~ button:nth-child(2),
  .drawingpanel > input:nth-child(3):checked ~ button:nth-child(4),
  .drawingpanel > input:nth-child(5):checked ~ button:nth-child(6),
  .drawingpanel > input:nth-child(7):checked ~ button:nth-child(8),
  .drawingpanel > input:nth-child(9):checked ~ button:nth-child(10),
  .drawingpanel > input:nth-child(11):checked ~ button:nth-child(12),
  .drawingpanel > input:nth-child(13):checked ~ button:nth-child(14),
  .drawingpanel > input:nth-child(15):checked ~ button:nth-child(16),
  .drawingpanel > input:nth-child(17):checked ~ button:nth-child(18),
  .drawingpanel > input:nth-child(19):checked ~ button:nth-child(20),
  .drawingpanel > input:nth-child(21):checked ~ button:nth-child(22),
  .drawingpanel > input:nth-child(23):checked ~ button:nth-child(24){
    background-color: rgb(165,197,214);
  }

  .penthickness{
    font-size:0.5em;
    margin-left:-5px;
  }