.canvas-toolbar {
  width: 100%;
  margin: 1.0rem 0;
  text-align: center;
}
.canvas_btn {
  min-width: 9.6rem;
  height: auto;
  margin: 1.0rem 0.5rem;
  border: none;
  text-align: center;
  background: #0078d4;
  color: #ffffff;
  font-weight: bold;
  border-radius: 50vh;
  font-size: 1.6rem;
  line-height: 2.0;
  box-sizing: border-box;
  cursor: pointer;
}
.eraser_btn,
.pen_color_btn {
  width: 3.6rem;
  height: auto;
  aspect-ratio: 1/1;
  margin: 0.15rem;
  border: solid 1px #cccccc;
  box-sizing: border-box;
  border-radius: 25%;
  cursor: pointer;
}
@media screen and (max-width: 640px) {/* 640px以下*/
  .canvas_btn {
    min-width: 7.2rem;
    margin: 0.8rem 0.5rem;
    font-size: 1.2rem;
  }
  .eraser_btn,
  .pen_color_btn {
    width: 2.4rem;
  }
}
.eraser_btn.active,
.pen_color_btn.active {
  border: solid 1px #dd99ff;
  outline: 2px solid #dd99ff;
}
.eraser_btn {
  background-color: #ccffff;
  background-image: url("https://shiwehi.com/nazo/mutual/img/eraser.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%  50%;
}
.act_undo,
.act_redo,
.act_clear {
  background-color: #ffffff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%  50%;
}
.act_undo {background-image: url("https://shiwehi.com/nazo/mutual/img/undo.png");}
.act_redo {background-image: url("https://shiwehi.com/nazo/mutual/img/redo.png");}
.act_clear {background-image: url("https://shiwehi.com/nazo/mutual/img/reset.png");}

.canvas-slider label,
.canvas-slider span {
  font-size: 1.4rem;
}
.canvas-slider input {
  cursor: pointer;
}