html, body {
      /*width: 100%;*/
      height: 100%;
      font-size: 1.7vmax;
      text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      
      margin:0%;
      padding: 0%;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      overflow: hidden;
}

.headerdammy {
}


/* ヘッダーのスタイル */
.header {
    background-color: #333333;
	width: calc( 100% - 1vh);
    height: 8vh;
    max-height: 6vw;
    display: flex;
    /*flex-grow: 1;*/
    overflow: hidden;
    padding: 0.5vh;
    margin: 0;
    justify-content: left;
    align-items: left;
    flex-shrink: 0;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, .6);
}

.headcontainer {
      width: 100%;
      height: 100%;
      /*position: fixed;*/
      text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      padding: 0vh;
      margin: 0%;
      display: flex;
      color: #FFFFFF;

}


.headercolumn {
    padding: 0.1vmin;
    box-sizing: border-box;
    overflow-y: hidden;

}

.lefthead {
    /*flex: 0 1 1;  34vh  calc( var(--myHeight) * 150%)*/ 
    flex: 0 0 50%;
    display: inline-block;
    /*background-color: #FF0000;*/
   	vertical-align: bottom;
	font-size: 1.5vmax;

}



.righthead {
    flex: 0 0 50%;
    text-align: right;
    margin-left: auto;
    /*background-color: #0000FF;*/

}




#altair_logo {
 height: 100%;
}

/*
#buttonLogoutX {
 height: 100%;
}
.buttonLogoutX {
 height: 100%;
}
*/

/* ボディのコンテナ */
.mainstageX {
    height: 85vh;
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* ボディの2カラムレイアウト */
.stage {
      width: 100%;
      height: 100%;
      /*position: fixed;*/
      text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      padding: 0%;
      margin: 0%;
      display: flex;

    background-image: url("http://altair23.com/images/bg_trial3_2.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;


}

.videoareaX {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}
.videobuttonareaX {
	margin-left: auto;
	margin-right: auto;
	text-align: right;
 	margin-top: 0.5vmax;

}
.column {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow-y: auto;
}

.leftcontents {
    flex: 0 0 22%; /* 幅を20%に固定 */
    background-color: #0A101488; /*#666666;*/
    box-shadow: 2px 0 3px rgba(0, 0, 0, .6);
    

    /*border-right: 1px solid #ddd;*/ /* 左右のカラムの間に境界線を追加 */
}

.rightcontents {
    flex: 0 0 78%; /* 幅を80%に固定 */
    padding: 1vw 2vw;


}

.leftcontents2 {
    flex: 0 0 0%; /* 幅を20%に固定 */
    background-color: #4E5B6688; /*#666666;*/
    /*border-right: 1px solid #ddd;*/ /* 左右のカラムの間に境界線を追加 */
}

.rightcontents2 {
    flex: 0 0 100%; /* 幅を80%に固定 */
    padding: 1vw 2vw;
    background-image: url("http://altair23.com/images/bg_trial3_2.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;

}



/* フッターのスタイル */
.footer {
    height:7vh;
    color: white;
	background-color: #333333;
	display: flex;
    justify-content: left;
    align-items: left;
    flex-shrink: 0;

	font-size:  0.7vmax;
	text-align: left;
	padding: 1%;
    overflow-y: auto;

}

.warning {
	font-size: 0.7vmax;
}







.qrwindow2_wrap {
  z-index: 9995;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 10px;
  text-align: center;
}
.qrwindow2_overlay {
  z-index: 9997;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
  display: flex;
  align-items: center;
}
.qrwindow2_window {
  box-sizing: border-box;
  display: flex;
  z-index: 9999;
  position: relative;
  width: auto; /*calc( 64vmin );*/
  /*max-width: 600px;*/
  height: auto; /*calc( 64vmin );*/
  padding: 10px; /*2vmin;*/
  border-radius: 10px;
  background: #DDEEFF;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  margin: auto;
  text-align: center;
  font-size: 1.0vmax;
}
.qrwindow2_content {
  overflow-x: hidden;
  overflow-y: hidden;
}
.qrvisible2TRUE {
  animation: 0.6s fadeIn forwards;
  visibility: visible;
}
.qrvisible2FALSE {
  visibility: hidden;
}








#wrapper{
    position: relative;
}

#video{
    position: absolute;
    top: 0px;
    left: 0px;
    visibility: hidden;
}

#camera-canvas{

    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 50;\
    
}

#rect-canvas{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
}








   .fontsizeyoko {
   font-size: 1.6vmax;
   }
   .fontsize2yoko {
   font-size: 1.2vmax;
   }

  .subjectfontyoko {
  font-size: 20px;
  margin:0 0 0;
  }
  .timefontyoko {
  font-size: 1.5vmax; /*20px;*/
  margin: 0px;
  padding: 0px;
  vertical-align: bottom;
  }
  .titlefont1yoko {
  font-size: 1.3vmax; /*20px;*/
  margin:0 0 0;
  text-align: left;
  vertical-align: top;
  margin-bottom: auto;
  }
  .titlefont2yoko {
  font-size: 2.1vmax; /*28px;*/
  margin:0 0 0;
  text-align: left;
  }
  .titlefont3yoko {
  font-size: 1.5vmax; /*20px;*/
  margin:0 0 0;
  text-align: right;
  }
  
  
  
.selectboxyoko {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: 20px;
    background-color: #ffffff;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
}

.selectboxyoko::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.selectboxyoko select {
    appearance: none;
    min-width: 15em;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: none;
    border-radius: 1px;
    box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);
    background-color: #eef0f0;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}


    button {
    }
    .pdfdlyoko {
    font-size: 1.0vmax; /*16px;*/
    background: rgb(235,245,255,0.97);
    color: #0F6B85;
    border-style: none;
    vertical-align: top;
    border-radius: 0.2vmax;
    cursor: pointer;
    margin-left: 1.0vmax;
    margin-bottom: auto;
	}
    
    .movieselect {
		display: block;
		text-decoration: none;
	    border-style: none;
		border-radius: 0.8vmax;
		box-shadow: 3px 3px 4px rgba(0, 0, 0, .5);
		-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .5);
		width: 100%;
		text-align: left;
		margin: 0%; /*10px*/;
		margin-bottom: 1.2vmax; /*15px*/;
		padding: 1.0vmax; /*15px*/;
		padding-left: 1.3vmax; /*20px*/;
		padding-right: 1.3vmax; /*20px*/;
		opacity: 0; /* ←初期値を変更。透明に。*/
		animation: 0.6s fadeIn forwards; /* ←追加 */
    }
    
    @keyframes fadeIn { /* ←追加 */
  from { opacity: 0; }
  to { opacity: 1; }
}
     .movieselect:active {
     /*
		box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
		transform: translateY(2px);
	*/
	}
	.movietabnew {
		color: #ffffff;
		background: rgb(23,167,207);
	}
	.movietabok {
		color: #ffffff;
		background: rgb(0,188,242);
	}
	.movietabng {
		color: rgb(200,200,200);
		background: rgb(158,158,158);
	}
    .systembutton {
		display: block;
		text-decoration: none;
		border-radius: 10px;
		border: none;
		background-color: #EEEEEE;
		color: #000000;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
		-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
		width: 15vmax;
		height: 3vmax;
		text-align: center;
		padding: 0%;
		font-size: 1.5vmax;

    }
    .systembutton:active {
		box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
		transform: translateY(2px);
	}

	.systembutton2 {
		display: inline-block;
		text-decoration: none;
		border-radius: 10px;
		background: linear-gradient(to top, rgb(190,190,0), rgb(240,240,0));
		color: #000;
		box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
		-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
		width: 10vmax;
		height: 2vmax;
		text-align: center;
		padding: 0%;
		font-size: 1.0vmax;
    }
    .systembutton2:active {
		box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
		transform: translateY(2px);
	}
	.systembutton3 {
		display: inline-block;
		text-decoration: none;
		border-radius: 10px;
		border: none;
		background-color: #EEEEEE;
		color: #000000;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
		-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
		width: 20%;
		text-align: center;
		padding: 0.5%;
    }
    
   	.systembutton4 {
		display: inline-block;
		text-decoration: none;
		border-radius: 10px;
		border: none;
		background-color: #EEEEEE;
		color: #000000;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
		-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
		width: 10vmax;
		height: 2vmax;
		font-size: 1.0vmax;
		text-align: center;
		padding: 0%;
    }
   	.systembutton5 {
		display: inline-block;
		text-decoration: none;
		border-radius: 10px;
		border: none;
		background-color: #FFEEEE;
		color: #000000;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
		-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
		width: 14vmax;
		height: 2.8vmax;
		font-size: 1.4vmax;
		text-align: center;
		padding: 0%;
    }

    
    .systembutton3:active {
		box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
		transform: translateY(2px);
	}
    .systembutton4:active {
		box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
		transform: translateY(2px);
    }
    .systembutton5:active {
		box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
		transform: translateY(2px);
    }
    .sysright {
		/*margin-left: auto;*/
		margin-left: 2%
    }
    .sysleft {
		margin-right: auto;
		margin-left: 1%
    }
    .subject {
		height: auto;
		display: inline-block;
		padding: 0.5em 1em;
		text-decoration: none;
		background: #f7f7f7;
		border-left: solid 6px #ff7c5c;/*左線*/
		color: #ff7c5c;/*文字色*/
		font-weight: bold;
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
		margin: 5px;
     }
     .subject:active {
		box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
		transform: translateY(2px);
     }
     .syoko {
		width: 100%;
     }
     
 	.movietitle {
 	margin-bottom: 1.0vmax;
 	}
 	
 	.movieoptionbutton {
 	}

	input[type=checkbox] {
	}
	.ckyoko {
    	width: 24px;
    	height: 24px;
	}
   input {
    font-size: 1.6vmax;
   }
   
   .ui-textinput {
      font-size: 1.3vmax;
      text-align: left;
      padding: 0.7vmax;
    }
    
    .contentX{
     width: 100%;
     height: auto;
     margin: 0%;
    }

    }
    .mainarea{
     display: flex;
    }
    .results{
    font-size: 1.3vmax;
    }

    .headers{
    text-align: right;
    }
    
    .back-to-topyoko {
  z-index: 100;
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 60px;
  height: 60px;
  border: 3px solid #ffffff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
  border-radius: 50%;
  background: #ffb030;
  cursor: pointer;
  text-align: center;
  color: #ffffff;
  font-size: 20px

}

.buttonmain{
display: flex;
}
 
 .buttontitle1{
width: 50%; /*99%*/
}
 .buttontitle2{
width: 50%; /*1%;*/
}

 .buttontitleT1{
width: 50%; /*83%;*/
}
 .buttontitleT2{
width: 50%; /*17%;*/

}

 .buttontitleJ1{
width: 50%; /*70%;*/
}
 .buttontitleJ2{
width: 50%; /*30%;*/
}


 .buttontitle3{
width: 90%;
}
 .buttontitle4{
width: 10%;
padding: 0px;
vertical-align: bottom;
text-align: right;
margin-top: auto;
}


.buttonSubject2 {
	aspect-ratio: 100 / 20;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 9.3vh;
    max-height: 8vw;
/*    margin-top: 0.2vh;*/
    padding: 0.3vw;
    border: 2px solid #147dbf;
    border-radius: 0.2rem;
    background-image: linear-gradient(0deg, #258ed0ff 0%, #258ed0b0 100%);
    color: #fff;
    font-size: 1.8vw; /*1em*/
    font-weight: 900;
}
.buttonSubject3 {
	aspect-ratio: 100 / 20;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 9.3vh;
    max-height: 8vw;
/*    margin-top: 0.2vh;*/
    padding: 0.3vw;
    border: 4px solid #7ae3d0;
    border-radius: 0.2rem;
    background-image: linear-gradient(0deg, #8bf4e1 0%, #8bf4e180 100%);
    color: #000;
    font-size: 1.8vw; /*1em*/
    font-weight: 900;
}



table {
border:1px solid;
background: #ffffff;
border-collapse: collapse;
font-size: 14px;
}

table tr {
border:1px solid;
padding: 5px 10px;
text-align: center;
font-size: 14px;
}
table th {
border:1px solid;
padding:5px 10px;
text-align: center;
font-size: 14px;
}
table td {
border:1px solid;
padding:5px 10px;
text-align: center;
font-size: 14px;
}

pointable {
cursor: pointer;
}