* {
  font-family: 'Meiryo';
  font-size:12px;
}

#playbutton {
  position: absolute;
  border: none;
  background: none;
  color: gray;
  font-size: 50px;
  top:0;
  left: 0;
  right:0;
  bottom:0;
  height: 50px;
  width:200px;
  margin:auto;
/*  width: 100%;*/
  z-index: 10000;
  text-align:center;
}

#playbutton:hover {
  cursor: pointer;
}

#playbutton:active {
  border:none;
}

.active {
  animation: anime2 1s;
  margin-top:0;
}

.active1 {
  animation: anime1 1s;
  margin-top:0;
}

@keyframes anime1 {
  0% {
    margin-top: auto;
  }
  100% {
    margin-top:0;
  }
}

@keyframes anime2 {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: auto;
  }
}

.content {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.error {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}

.errorimg {
  position: absolute;
  left: 0;
  top: 0;
}

.errortext {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(80, 80, 80, 0.7);
  color: white;
}

body {
  padding: 0;
  border: 0;
  margin: 0;
}

.console {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border: 0;
}

.console-debug {
  text-align: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: 0;
}

.info-display {
  position: absolute;
}

#input-area:focus,
#input-area:invalid,
#input-area:valid,
#input-area:out-of-range {
  position: absolute;
  top: 200px;
  left: 150px;
  width: 100px;
  height: 20px;
  border: 0;
  color: rgba(0, 0, 0, 0.0);
  background: rgba(0, 0, 0, 0);
  outline-color: rgba(0, 0, 0, 0);
  text-decoration: none;
  -webkit-text-decoration-color: rgba(0, 0, 0, 0);
          text-decoration-color: rgba(0, 0, 0, 0);
  z-index: -3;
}

/* 開発支援ツール*/

.devtool {
  border: 1px solid black;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin: 0;
  padding: 0;
  -ms-flex-positive: 1;
      flex-grow: 1; 
}

/* メニュー */

.devtool ul.menu {
  background:#303030;
  color:white;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  list-style-type: none;
  margin:0;
  padding:0;
}

.devtool ul.menu li {
  border-left: 1px solid black;
  /*flex-grow: 1;*/
  -ms-flex-preferred-size: 100px;
      flex-basis: 100px;
  background:#505050;
  text-align: center;
  color:white;
}

.devtool ul.menu li.active {
  background: white;
  color:black;
}

.devtool ul.menu li:hover {
  color:red;
  cursor: pointer;
}

/* ul.menu */

.devtool .controller {
  margin:10px;
}

.devtool .controller button {
  border:1px;
  width:50px;
  height:30px;
}

.devtool .controller button:hover {
  background:red;
}

.devtool .controller button.play:before {
  content: '➤';
}

.devtool .controller button.pause:before {
  content: '||';
}

.devtool .controller button.stop:before {
  content: '■'
}

.devtool #enemy.controller textarea {
  width: 98%;
  font-size:12px;
}

.devtool #enemy.controller textarea.formdata {}

.devtool .formation-editor,.devtool .movseq-editor {
  width:95%;
  font-size:10px;
}

.devtool .formation-editor table, .devtool .movseq-editor table {
  border-collapse: collapse;
  border:1px solid gray;
  width:100%;
  height:120px;
  margin:5px;
}

.devtool .formation-editor table tr.selected, .devtool .movseq-editor table tr.selected {
  background-color:pink;
}

.devtool .formation-editor table th, .devtool .movseq-editor table th {
  color:white;
  background-color: #505050;
  width:50px;
}

.devtool .formation-editor table td, .devtool .movseq-editor table td {
  text-align:right;
  border:1px solid gray;
}