body {
  margin: 0;
  /* スクロールバー消去 */
  overflow: hidden;
}

/* 全体のレイアウト */
.layout {
  width: 1200px;
  height: 100%;

  display: grid;
  grid:
    'content-area terminal-area' 1fr
    / 600px auto;
  gap: 0px;
}

.content-area {
  grid-area: content-area;
  height: 100vh;

  display: grid;
  grid:
    "console-area" 410px
    "debugprint-area" auto
    / 1fr;
  grid-auto-flow: column dense;
}

.console-area {
  grid-area: console-area;
  border-bottom: 2px solid;
}

.console-area canvas {
  position: relative;
  top: 10px;
  left: 85px;
}

#console-image {
  /* TaC基盤の画像は隠しておき, JSからCanvasに読み込む */
  display: none;
}

.debugprint-area {
  grid-area: debugprint-area;
  
  padding-top: 5px;
  padding-left: 10px;
  padding-bottom: 50px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.filename-area {
  margin-top: 2px;
}

.debugtool {
  margin-top: 2px;
  margin-bottom: 2px;
}

input#break-address {
  width: 100px;
}

input#pid-to-monitor {
  width: 100px;
}

#reg-table {
  border-collapse: collapse;
}

#reg-table tbody tr td {
  border: 1px solid #333;
}

td.reg-table-name {
  width: 50px;
  text-align: center;
}

td.reg-table-value {
  text-align: center;
  width: 100px;
}

.terminal-area {
  grid-area: terminal-area;
}

.terminal-area textarea {
  min-width: 600px;
  width: 100vw;
  height: 100vh;
  border: none;
  resize: none;
  background-color: black;
  color: white;
  font-family: 'courier new', Futura, Helvetica, '游ゴシック', 'メイリオ', Osaka;
  font-size: 10pt;
  line-height: 1.2em;
}

.terminal-area textarea::-webkit-scrollbar {
  /* ターミナルからスクロールバーを消去 */
  display: none;
}