html{
  height:100%;
}
body{
  height:100%;
  text-align:center;
}
#app{
  height:100%;
}
.container-main{
  width:1024px;
  height:auto;
  position:relative;
  margin:auto;
}
.container-viewer{
  position:absolute;
  margin:0px;
  left:0px;
  width:50%;
  padding:10px;
}
.container-ui{
  position:absolute;
  margin:0px;
  left:50%;
  width:50%;
  padding:10px;
  text-align:left;
}
.container-ui-openclose{
  position:absolute;
  display:none;
}

.btn-openclose{
  width:100%;
  height:100%;
  margin:0px;
}

/* 結果描画ブロック */
.block-viewer-buttons{
  width:100%;
  height:10%;
  min-height:90px;
}
.block-viewer-canvas{
  width:100%;
  top:50px;
  height:90%;
  max-height:calc(100% - 105px);
  overflow:auto;
}
.block-viewer-comments {
  width: 100%;
  margin-top: 10px;
  font-size: 0.9rem;
  text-align: left;
}
.file-opus{
  width:70%;
  max-width:280px;
  text-align:left;
}
.reload-button {
  font-size: 0.8rem;
}
.zoom-button-group{
  width:100%;
  text-align:left;
  margin-top:5px;
}
.zoom-button{
  font-size:0.8rem;
}
.btn-for-view {
  font-size:16px;
}
.cart-button-for-view {
  display: none;
}
.cart-button-for-ui{
  display: block;
}
.custom-file-label{
  width:70%;
  max-width:280px;
  left:auto;
  top:auto;
  right:auto;
}

@media (max-width: 767px){
  body {
    overflow:auto;
    min-height:800px;
  }
  input{
    font-size:1.0rem !important;
  }
  .container-main{
    width:100%;
    min-height:800px;
  }

  .container-viewer{
    width:100%;
  }

  .container-ui{
    left:0px;
    bottom:0px;
    width:100%;
    height:350px;
    background-color:white;
    overflow:hidden scroll;
  }

  .container-ui-openclose{
    left:0px;
    bottom:350px;
    width:100%;
    height:40px;
    background-color:white;
    display:block;
  }

  .btn-for-view {
    font-size: 0.9rem;
  }

  .cart-button-for-view {
    display: block;
  }
  .cart-button-for-ui{
    display: none;
  }
  .zoom-buttons {
    display: none;
  }
  .file-opus{
    width:50%;
  }
  .custom-file-label {
    width: 50%;
    font-size: 0.75rem;
  }

  .canvas-wrapper {
    /* transform: scale(0.8);
    transform-origin: top center; */
    margin: 0 auto; /* 中央揃え */
    display: inline-block; /* 自動で幅を適用 */
  }
}