body { 
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif, "Roboto";
  background: black;
}

body[id="yoko"] {
  min-width:1280px;
  min-height:800px; 
  max-width:1280px;
  max-height:800px; 
}
body[id="tate"] {
  zoom: 1.0;
  min-width:800px;
  min-height:1280px; 
  max-width:800px;
  max-height:1280px; 
}

a {
  color: #00B7FF;
}

:root {
  --css-width: 0px;
  --css-height: 0px;
  --css-widthnonpx: 0;
  --css-heightnonpx: 0;
  --css-winwidth: 400px;
  --css-winheight: 100px;
}
video{
  z-index: 0;
  position: absolute;
  margin-top: 60px;
}

#posi{
  position: relative;
}
.leftsvg {
  z-index: 10;
  position: absolute;
  width: var(--css-width);
  height: var(--css-height);
}
.topsvg {
  z-index: 10;
  position: absolute;
  width: var(--css-width);
  height: var(--css-height);
  /* left: calc((var(--css-width) - var(--css-height)/2)/2); */
}
.bottomsvg {
  z-index: 10;
  position: absolute;
  width: var(--css-width);
  height: var(--css-height);
  /* left: calc((var(--css-width) - var(--css-height)/2)/2); */
  /* top: calc(var(--css-height)/4*3); */
}
.rightsvg {
  z-index: 10;
  position: absolute;
  width: calc( var(--css-heightnonpx) *var(--css-height));
  height: var(--css-height);
  /* left: calc(((var(--css-width) - var(--css-height)/2)/2 + var(--css-height)/2)); */

}

.strokesvg {
  z-index: 11;
  position: absolute;
  width: var(--css-width);
  height: var(--css-height);
  /* left: calc((var(--css-width) - var(--css-height)/4)/2);
  top: calc(var(--css-height)/8*3); */
}



.leftsvg[id="yoko"] {
  height: var(--css-winheight);
  width:  var(--css-winwidth);
}
.topsvg[id="yoko"] {
  height: var(--css-winheight);
  width: calc( var(--css-heightnonpx) *var(--css-height));
  left: calc(var(--css-heightnonpx) *(var(--css-width) - var(--css-height)/4)/2);
}

.bottomsvg[id="yoko"] {
  height: calc( var(--css-heightnonpx) *var(--css-height)/8*3);
  width: calc( var(--css-heightnonpx) *var(--css-height));
  left: calc(var(--css-heightnonpx) * (var(--css-width) - var(--css-height)/4)/2);
  top: calc(var(--css-heightnonpx) *var(--css-height)/8*5);
}
.rightsvg[id="yoko"] {
  height: var(--css-winheight);
  width: calc( var(--css-heightnonpx) *(var(--css-width) - var(--css-height)/4)/2);
  left: calc(var(--css-heightnonpx) * ((var(--css-width) - var(--css-height)/4)/2 + var(--css-height)/4));

}
.strokesvg[id="yoko"] {
  height: calc( var(--css-heightnonpx) *(var(--css-width) - var(--css-height)/4)/2);
  width: calc( var(--css-heightnonpx) *var(--css-height));
  left: calc(var(--css-heightnonpx) *(var(--css-width) - var(--css-height)/4)/2 - 1px);
  top: calc(var(--css-heightnonpx) *var(--css-height)/8*3 - 1px);
}

.leftsvg[id="tate"] {
  height: var(--css-winheight);
  width: var(--css-winwidth);
}

.topsvg[id="tate"] {
  height: var(--css-winheight);
  width: var(--css-winwidth);
  left: calc(var(--css-widthnonpx) *var(--css-width)/8*3);
}

.bottomsvg[id="tate"] {
  height: var(--css-winheight);
  width: var(--css-winwidth);
  left: calc(var(--css-widthnonpx) *var(--css-width)/8*3);
  top: calc(var(--css-widthnonpx) *((var(--css-height) - var(--css-width)/4)/2 + var(--css-width)/4));
}
.rightsvg[id="tate"] {
  height: var(--css-winheight);
  width:  var(--css-winwidth);
  left: calc(var(--css-widthnonpx) *var(--css-width)/8*5);

}
.strokesvg[id="tate"] {
  height: var(--css-winheight);
  width:  var(--css-winwidth);
  left: calc(var(--css-widthnonpx) *var(--css-width)/8*3 - 1px);
  top: calc(var(--css-widthnonpx) *(var(--css-height) - var(--css-width)/4)/2 - 1px);
}



/* @media screen and (min-width: 1024px)  {
  .exe-btn{
    width: 400px;
    height: 200px;
    font-size: 4rem;
  }
} */



.leftBox {
  z-index: 10;
  position: absolute;
  opacity: 0.6;
  fill: black;
/*   
  width: calc((var(--css-width) - var(--css-height)/2)/2);
  height: var(--css-height); */
}

.topBox {
  z-index: 10;
  position: absolute;
  opacity: 0.6;
  fill: black;
  /* width: calc(var(--css-height)/2);
  height: calc(var(--css-height)/4); */

}

.bottomBox {
  z-index: 10;
  position: absolute;
  opacity: 0.6;
  fill: black;
  /* width: calc(var(--css-height)/2);
  height: calc(var(--css-height)/4); */

}

.rightBox {
  z-index: 10;
  position: absolute;
  opacity: 0.6;
  fill: black;
  /* width: calc((var(--css-width) - var(--css-height)/2)/2);
  height: var(--css-height); */
}



.leftBox[id="yoko"] {

  
  width: calc(var(--css-heightnonpx) * ((var(--css-width) - var(--css-height)/4)/2));
  height: calc(var(--css-heightnonpx) * var(--css-height));
}

.topBox[id="yoko"] {

  width: calc( var(--css-heightnonpx) *var(--css-height)/4);
  height: calc( var(--css-heightnonpx) *var(--css-height)/8*3);

}

.bottomBox[id="yoko"] {

  width: calc( var(--css-heightnonpx) *var(--css-height)/4);
  height: calc( var(--css-heightnonpx) *var(--css-height)/8*3);

}

.rightBox[id="yoko"] {

  width: calc( var(--css-heightnonpx) *(var(--css-width) - var(--css-height)/4)/2);
  height: calc( var(--css-heightnonpx) *var(--css-height));
}


.leftBox[id="tate"] {

  
  width: calc(var(--css-widthnonpx) *var(--css-width)/8*3);
  height: calc(var(--css-widthnonpx) * var(--css-height));
}

.topBox[id="tate"] {

  width: calc(var(--css-widthnonpx) *var(--css-width)/4);
  height: calc(var(--css-widthnonpx) *(var(--css-height) - var(--css-width)/4)/2);

}

.bottomBox[id="tate"] {

  width: calc(var(--css-widthnonpx) * var(--css-width)/4);
  height: calc(var(--css-widthnonpx) * (var(--css-height) - var(--css-width)/4)/2);

}

.rightBox[id="tate"] {

  width: calc(var(--css-widthnonpx) *var(--css-width)/8*3);
  height: calc(var(--css-widthnonpx) * var(--css-height));;
}

.leftBox[id="ini"] {
  z-index: 10;
  position: absolute;
  opacity: 0.6;
  fill: none;

}

.topBox[id="ini"] {
  z-index: 10;
  position: absolute;
  opacity: 0.6;
  fill: none;


}

.bottomBox[id="ini"] {
  z-index: 10;
  position: absolute;
  opacity: 0.6;
  fill: none;


}

.rightBox[id="ini"] {
  z-index: 10;
  position: absolute;
  opacity: 0.6;
  fill: none;

}

#com{
  /* position: absolute;
  top: calc(var(--css-winheight) - 50px);
  left: 50px; */
  z-index: 20;
  width: var(--css-winwidth);
}

#colorblock{
  position: absolute;
  top: calc(var(--css-winheight) - 40px);
  width: var(--css-winwidth);
  z-index: 19;
}

video[class='tate']{
  min-height: var(--css-winwidth);
  min-width: var(--css-winwidth);
}

video[class='yoko']{
  min-height: var(--css-winheight);
  min-width: var(--css-winheight);
}
svg {
  margin-top: 60px;
}

#camera-controller {
  margin: 0;
}

#meirei{
  visibility: hidden;
}

meirei[class='yoko']{
  margin-top: 10px;
  background-color:rgba(0,0,0,0.8);
  border-style: solid;
  z-index: 15;
  position: absolute;
  left: calc( var(--css-width) + var(--css-height)/4);
  width: calc( var(--css-heightnonpx) *(var(--css-width) - var(--css-height)/4)/2 - 50px);
  color: white;
  font-size: 2em;
}
meirei[class='tate']{
  margin-top: 10px;
  background-color:rgba(0,0,0,0.2);
  border-style: solid;
  z-index: 15;
  position: absolute;
  left: calc(var(--css-widthnonpx) *var(--css-width)/8*5);
  width: calc(var(--css-winwidth)*7/20);
  color: white;
  font-size: 2em;
}

#colorout{
  font-size: 70%;
  z-index: 20;
  color: white;
}
#pstart{
  font-size: 70%;
  z-index: 20;
  color: white;
}

#pend{
  font-size: 70%;
  z-index: 20;
  color: white;
}

#output{
  max-height: calc(var(--css-height)/2);
  font-size: 70%;
  z-index: 20;
  color: white;
  overflow: scroll;
}
#neworder{
  font-size: 70%;
  z-index: 20;
  color: white;
}

.authorize {
  text-align: center;
  margin: 8rem auto 0;
  width: 400px;
  max-width: 90%;
}

.authorize h1 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.input-group-append {
  margin-bottom: 1.6rem;
}

#classwork-login img {
  width: 50%;
}

#classwork-login .login {
  margin: 8rem auto 0;
  width: 40%;
  text-align: center;
}

#classwork-login dd {
  font-size: 1.4rem;
  margin-top: 1.4rem;
}

#classwork-login .login button {
  width: 100%;
  padding: 1.4rem 0;
  margin-top: 1.4rem;
}

@media screen and (max-width: 1200px) {
  #classwork-login .login {
    margin-top: 3rem;
  }
}

@media screen and (max-width: 790px) {
  #classwork-login .login {
    width: 70%;
  }
  
  #classwork-login img {
    width: 60%;
  }
  #classwork-login select{
    margin: 0.5rem 0 1rem;
  }
}

#overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 1
 }
#newpictmodalWindow{
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 2
}
#newmodalWindow{
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 50
}

#returnWindow{
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 50
}

#upmodalWindow{
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 2
}


#delmodalWindow{
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 2
}
#blockmodalWindow{
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 2
}

#picturemodalWindow{
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 2
}
#delblockmodalWindow{
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 3
}
#delpicturemodalWindow{
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 3
}

.numblock{
  margin-top: 10px;
  font-size: 150%;
  z-index: 20;
color: black;
}


#header_bar {
  width: 100%;
  /* height: 60px;
  position: fixed;
  top: 0;
  left: 0; */
  background: ghostwhite;
  z-index: 200; /*ヘッダーバー部分の重なり順*/
  
  }
  #header_bar_inner {
    width: 100%;
    display: inline-flex;
    background: #f5f5ff;
    background-color: #CAE9FF;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #E7F8FC), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #E7F8FC), color-stop(0.75, #E7F8FC), color-stop(0.75, transparent), to(transparent));
    -webkit-background-size: 14px 14px;
    border-bottom: solid 1px #008cff !important;
    padding: 1rem !important;
    }

#master-page {
  min-width: 512px;
}

@media screen and (max-width: 670px) {
  #master-page #header_bar_inner button{
    width: 25%;
    padding: .84rem;
  } 
}


#myCanvas {
  margin-top: 60px;
}
content {
  margin-top: 60px; /*上部に70pxのスペースを指定*/
  z-index: 1; /*コンテンツ部分の重なり順*/
  }
/* 
.form-inline {
  display: block;
} */

.datatables-footer {
  font-size: 1.4rem;
}

.pagination {
  margin: 1rem 0;
}

.pagination li {
  margin-left: 1rem;
  text-decoration-line: underline;
}

footer {
  text-align: center;
}

/**
 * 2024/7/4 英語対応で追加
 */

/* ボタンラベル小文字 */
.btn {
  text-transform: none;
}

.col-7 {
  display: flex;
}