body {
	background-image: url("../img/background_m.jpg");
	color: white;
}

* {
	
}

/**
 * <iframe>
 */
.frameClass {
	width: 490px;
	height: 1200px;
}

h1 {
	font-size: 1.7em;
}

/**
 * 鍵の３桁番号入力する <table>
 */
.queryTableClass {
/*	border: solid 3px; */
}



/**
 * 錠を表す <table>
 */
.quizTableClass {
	border-left: solid 4px black;
	border-right: solid 4px black;
	border-top: solid 4px black;
	border-bottom: solid 4px black;
	background-color: gainsboro;
}

.quizTableOpenClass {
	border-left: solid 4px black;
	border-right: solid 4px gainsboro;
	border-top: solid 4px black;
	border-bottom: solid 4px black;
	background-color: gainsboro;
}


/**
 * 錠を表す <table>
 */
.iconBoxClass {
	width: 60px;
	height: 60px;
}

/**
 * 錠や鍵のアイコン <img>
 */
.guessBoxClass {
	font-size: 32pt;
	color: black;
	text-align: center;
	width: 60px;
}

/**
 * 錠の "?" を格納する <td>
	 */
.keyBoxClass {
	font-size: 32pt;
	color: black;
	text-align: center;
	width: 60px;
}

/**
 * Quantum Computer 側の↓  <td>
 */
.opBox {
	text-align: center;
	
}

/**
 * answers テーブルの「鍵番号」欄 <td> のうち、解の候補でなくなった<td>
 */
.eraseAnsClass{
	background-color: gray;
	text-decoration: line-through;
}

/**
 * answers テーブルの「鍵番号」欄 <td> のうち、絞り込まて正解わかった<td>
 */
.foundKeyEntry {
	background-color: green;
}

/**
 * answers テーブル  <table>  および probabilityTable テーブル <table>
 */
.answerTableClass {
	font-size: 32pt;
    border: solid 1px;
	text-align: center;
	margin-left: auto;
  	margin-right: auto;
}

/**
 * answers テーブル  <table>  および probabilityTable テーブル <table> 配下の td, th
 */
.answerTableClass td, th {
   border: solid 1px;
   	font-size: 16pt;
	text-align: center;
 	margin-left: auto;
  	margin-right: auto;
    
}

.quizPlace {
  margin-right: auto;
  margin-left: auto;
}

/**
 * 問題もしくは量子コンピュータを表す quizPlace <table> 配下の <td>
 */
.quizPlace td {
	text-align: center;
}

/**
 * アニメーション用 <canvas>
 */
.animationCanvas {
/*	width: 300px;
	height: 60px;  */
}

/**
 * Element を隠すときに使う
 */
.hideElementClass {
	display: none;
}

/**
 * 「錠を開ける」ボタンおよび「量子コンピュータで解く」ボタン <input type = button>
 */
.buttonClass {
	font-size: 16pt;
	color: black;
	text-align: center;
}

.explanationButtonClass {
	color: black;
}

/**** byHand ****/

/**
 * 合致桁数表示用 <input type=text>
 */
#answerBox {
	font-size: 32pt;
	color: black;
	text-align: center;
	width: 60px;	
}

/**
 * 鍵候補表 <table>
 */
#answers {
}

/**
 * 「錠を開ける」ボタンを格納する <td>
 */
#queryButtonTd {
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}



/**** CloudComputing ****/

/**
 * 「錠を開ける」ボタンを格納する <td>
 */
#calByQuantumButton {
/*	font-size: 32pt; 
	text-align: center;*/
	
}

/**
 * 確率一覧表 <table>
 */
#probabilityTable {
}

/***************************/

#qbitChip64 {
	width: 100%;
}