.btn {
  display: inline-block;
  vertical-align: top;
  padding: 3px 10px;
  background: yellow;
  color: #111111;
  border-bottom: solid 5px gray;
  border-radius: 4px;
  font-size: 30px;
}
.btn:active {
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  border-bottom: none;
}
   .btn2 {
    display: inline-block;
    vertical-align: top;
    padding: 3px 10px;
    background: rgb(115, 249, 128);
    color: #111111;
    border-bottom: solid 5px gray;
    border-radius: 4px;
    font-size: 30px;
    /* font: size 12px; はだめ*/
   }
   .btn2:active {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    border-bottom: none;
   }  
   .btn3 {
    display: inline-block;
    vertical-align: top;
    padding: 3px 10px;
    background: lightcyan;
    color: #111111;
    border-bottom: solid 5px gray;
    border-radius: 4px;
    font-size: 30px;
   }
   .btn3:active {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    border-bottom: none;
   }  
   .btn4 {
    padding: 3px 10px;
    background: lightpink;
    color: #111111;
    border-bottom: solid 5px gray;
    border-radius: 4px;
    font-size: 30px;
   }
   .btn4:active {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    border-bottom: none;
   }     
   /* 以下　input の幅 */
   /* input.haba { width: 80px; }

   .parent {
    position: fixed;
  } */
  
/* .canvas-wrap{
            width: 1000px;
            max-width: 100%;
            position: relative;
            padding: 0;
            box-sizing: content-box;
}
.canvas_warp:before{
            content:"";
            display: block;
            padding-top: 50%;
}
.canvas{
            position: absolute;
            left:0;
            top:50;
            border: 0;
            max-width:100%;
            box-sizing: content-box;
            padding: 0;
            margin: 0;
} */