.code-example {
  white-space: nowrap;/* 拡大率に干渉されずに改行しないようにする*/
  font-family:"Courier New";/* 等幅フォント*/

}
.code-example2 {
  white-space: nowrap;/* 拡大率に干渉されずに改行しないようにする*/
  

}
html {
  transform-origin: top left;
  transform: scale(1.0); 
}



/* スマートフォン向けのスタイル */
@media only screen and (max-device-width: 767px) and (orientation: portrait) {
  html {
      transform: scale(0.25); 
  }
  .code-example {
    white-space: nowrap;/* 拡大率に干渉されずに改行しないようにする*/
    font-family: "Courier New";
    font-style: normal;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

}

/* スマートフォンを横にした場合のスタイル */
@media only screen and (max-device-width: 767px) and (orientation: landscape) {
  html {
      transform: scale(0.25); 
  }
  .code-example {
    white-space: nowrap;/* 拡大率に干渉されずに改行しないようにする*/
    font-family:"Courier New";
    font-style: normal;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

}

/* タブレット向けのスタイル */
@media only screen and (min-device-width: 768px) and (max-device-width: 1023px) {
  html {
      transform: scale(0.5);
  }

}

/* PC向けのスタイル */
@media only screen and (min-device-width: 1024px) {
  html {
      transform: scale(0.7);
  }
}



#author{
    position: absolute;
    top: 800px;
    left: 20px;
  }

  body{
      width:1200px;

  }

  #weight_en {
      z-index: 1004;
  }

  .balance {
      z-index: 1004;
      user-select: none;/* 選択できないようにした*/
  }

  .imgmove {
  cursor: move;
  position: absolute;
  z-index: 1015;
  }

  .drag{
      z-index: 1006;
  }

  .line{
      display: flex;
  }

  #seesaw{
      position: absolute;
      z-index: 1001;
      width: 500px;
      user-select: none;
  }

  #weight_en{
      position: absolute;
      top: 570px;
      left: 10px;
      user-select: none;
  }

    /*アコーディオンボックス*/
  .acbox{
    width: auto;
    font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
    margin:0 10px; /* ボックス全体の位置調整 */
  }

  .acbox label{
    width: auto;
    font-size: 16px; /* ラベルの文字サイズ */
    font-weight: bold;
    text-align: center;
    background: #8BC34A; /* ラベルの背景色 */
    position: relative;
    display: block;
    padding:8px;
    border-radius: 4px; /* ラベルの角の丸み */

    color: #fff;
  }

  .acbox label:hover{
    background: #8BC34A; /* ラベルにマウスを乗せた時の背景色 */
  }

  .acbox input{
    display: none;
  }

  .acbox label:after{
    color: #fff;
    content:"▼"; /* ラベルのアイコン */
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -14px;
  }

  .acbox input:checked ~ label::after {
    content:"▲"; /* ラベルをクリックした後のアイコン */
  }

  .acbox div{
    height: 0px;
    overflow: hidden;
    opacity: 0;
    transition: 0.15s; /* 開閉スピードの設定 */
  }

  .acbox input:checked ~ div{
    height: auto;
    padding: 18px; /* 開いた部分の枠内の余白 */
    border-radius: 0px;
    background: #F3F4F5; /* 開いた部分の背景色 */
    opacity: 1;
  }

  .acbox input:checked ~ label {
    background: #8BC34A; /* クリック後のラベルの背景色 */
  }

  .acbox-under{
    font-size: 15px; /* 開いた部分の文字サイズ */
    color: #555555; /* 開いた部分の文字色 */
    user-select: none;
  }


  /*アコーディオンボックス*/
  .acbox1{
    width: auto;
    font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
    margin:0 10px; /* ボックス全体の位置調整 */
  }

  .acbox1 label{
    width: auto;
    font-size: 16px; /* ラベルの文字サイズ */
    font-weight: bold;
    text-align: center;
    background: #8BC34A; /* ラベルの背景色 */
    position: relative;
    display: block;
    padding:8px;
    border-radius: 4px; /* ラベルの角の丸み */

    color: #fff;
  }

  .acbox1 label:hover{
    background: #8BC34A; /* ラベルにマウスを乗せた時の背景色 */
  }

  .acbox1 input{
    display: none;
  }

  .acbox1 label:after{
    color: #fff;
    content:"▼"; /* ラベルのアイコン */
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -14px;
  }

  .acbox1 input:checked ~ label::after {
    content:"▲"; /* ラベルをクリックした後のアイコン */
  }

  .acbox1 div{
    height: 0px;
    overflow: hidden;
    opacity: 0;
    transition: 0.15s; /* 開閉スピードの設定 */
  }

  .acbox1 input:checked ~ div{
    height: auto;
    padding: 18px; /* 開いた部分の枠内の余白 */
    border-radius: 0px;
    background: #F3F4F5; /* 開いた部分の背景色 */
    opacity: 1;
  }

  .acbox1 input:checked ~ label {
    background: #8BC34A; /* クリック後のラベルの背景色 */
  }

  .acbox-under1{
    font-size: 15px; /* 開いた部分の文字サイズ */
    color: #555555; /* 開いた部分の文字色 */
  }

  .acbox{
      position: absolute;
      top: 670px;
      user-select: none;
      

  }
  .acbox1{
    position: absolute;
    top: 670px;
    left: 650px;
    user-select: none;

  }

  .input1{
    position: absolute;
    top: 30px;
  }

  .output1{
    position: absolute;
    top: 30px;
    left: 50px;
  }

  .hako{
    z-index: 1000;
    position: absolute;
    width:1300px;
    height:630px;
    background-color:white;
    user-select: none;
  }

  .table1{
    position: relative;
    z-index: 1005;
    top: 10px;
    left: 20px;
    user-select: none;
    width: 280px; 
    height: 30px; 
    line-height:0;
    
  }

  .table2{
    position: relative;
    z-index: 1006;
    top: 5px;
    user-select: none;
  }

  .table3{
    position: relative;
    z-index: 1007;
    top: 5px;
    user-select: none;
  }

  .table4{
    position: relative;
    z-index: 1007;
    top: 5px;
    left:14px;
    user-select: none;
  }

  #back{
    position: absolute;
    z-index: 1001;
    top: 380px;
    left:20px;
  }
  #conductor{
    width:200px;
    user-select: none;
  }

  .programMode{
    display: none;
  }