body {
  padding: 0;
}

/* canvas中央寄せ */
#canvas_wrapper {
  width: 55%;
  margin: 10px auto 0 auto;
}

canvas {
  width: 100%;
}

/* 説明 */
#description_wrapper {
  width: 55%;
  display: flex;
  margin: 10px auto;
  justify-content: center;
  font-family: Impact, 'Arial Narrow Bold', sans-serif;
  color: #404040;
}
.space {
  width: 13%;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5rem;
  border: solid 2px gray;
  border-radius: 7px;
  /* padding: 2px 30px 0 30px;
  margin-right: 4px; */
}
#heart {
  margin-left: 5px;
}
#heart img {
  vertical-align: middle;
}
.key {
  width: 13%;
  text-align: center;
  font-weight: bold;
  line-height: 1.5rem;
  border: solid 2px gray;
  border-radius: 7px;
  margin-left: 5px;
}
.derection {
  margin: 4px 0 0 5px;
}

@media (max-width: 560px) {
  #canvas_wrapper {
    width: 98%;
    margin: 50px auto 0 auto;
  }

  #description_wrapper  {
    width: 98%;
  }
}