.footer{
    text-align: center;
    color:white;
}

.prettyprint ol.linenums > li {
    list-style-type: decimal; 
}

.canvas-wrap{
    width: 1200px;
    height: 200px;
    position: relative;
    padding: 0;
    border: 5px double #333333;
    border-radius: 10px;
}

.canvas_warp:before{
    content:"";
    display: block;
    padding-top: 50%;
}

.canvas{
    width: 1200px;
    height: 200px;
    position: absolute;
    left:0;
    top:0;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: -1;
}

.variable_d{
    padding: 10px;
    margin-bottom: 10px;
    border: 5px double #333333;
    border-radius: 10px;
    background-color: tomato;
}

.variable_list{
    list-style:  none;  /* デフォルトのアイコンを消す */
}

.variable:before {
    content:  "";     /* 空の要素作成 */
    width: 20px;                /* 幅指定 */
    height: 20px;               /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #0074bf;  /* 背景色指定 */
    position:  relative;        /* 位置調整 */
    top: 4px;                   /* 位置指定 */
    border-radius:  10%;        /* 要素を丸くする */
    margin-right: 5px;          /* 余白指定 */
}
 
.variable {
    padding:  10px;             /* 余白指定 */
    background-color:  #65ace4; /* 背景色指定 */
    margin-bottom: 5px;         /* 要素と要素の間指定 */
    color: #fff;                /* 文字色指定 */
    font-size:  20px;           /* 文字サイズ指定 */
    z-index:100;
    transition-timing-function:ease-out;
    cursor: grab;
}

.variable:active{
    cursor: grabbing;
}

.value_d{
    padding: 10px;
    margin-bottom: 10px;
    border: 5px double #333333;
    border-radius: 10px;
    background-color: yellow;
}

.value_list{
    list-style:  none;  /* デフォルトのアイコンを消す */
}

.value:before {
    content:  "";     /* 空の要素作成 */
    width: 20px;                /* 幅指定 */
    height: 20px;               /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #0074bf;  /* 背景色指定 */
    position:  relative;        /* 位置調整 */
    top: 4px;                   /* 位置指定 */
    border-radius:  10%;        /* 要素を丸くする */
    margin-right: 5px;          /* 余白指定 */
}

.value {
    padding:  10px;             /* 余白指定 */
    background-color:  #65ace4; /* 背景色指定 */
    margin-bottom: 5px;         /* 要素と要素の間指定 */
    color: #fff;                /* 文字色指定 */
    font-size:  20px;           /* 文字サイズ指定 */
    z-index:100;
    transition-timing-function:ease-out;
    cursor: grab;
}
.value:active{
    cursor: grabbing;
}

.active {
    visibility: hidden;
    transition: visibility linear 0.01s;

}

.active1{
    visibility: hidden;
}

.vertical_line {
    margin-top: 45px;   /*１行目45px,１行の間隔21px*/
    margin-left: 20px;
    width: 1px;
    height: 21px;
    background-color: aqua;
  }