#myTEXT {
background-color: white; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}




/* webdevラジオボタンを真上に */
.sample {
    padding: 6px;
/* ホワイトボード内の余白、問題文も同時に動く */
}
.sample input[type=radio],
.sample input[type=checkbox] 

{
    display: inline-block;
    margin-right: 6px;
}
.sample input[type=radio] + label,
.sample input[type=checkbox] + label {
    position: relative;
/* widthで文字部

分の横の幅 */
border:dotted 0.5px #888;
	display: inline-block;
/* marginでボタン間の余白調整,topはホワイトボードの上との余白 */
	margin-top: 20px;
	margin-bottom: 8px;
	margin-left: 8px;
	margin-right: 8px;
/* margin-left: 0px;にして margin-right: 0px→-10pxとかにすると選択肢の右端が狭くなる（行間が狭くなる） */	
	font-size: 18px;
/* 文字の高さ,もともとは40px,1px移動するだけでもpcでは大きく動く */
	line-height: 39.5px;
    

cursor: pointer;
/* ラジオボタンの左の余白 */
	  margin-left: 7px;
}
 
@media (min-width: 1px) {
.sample input[type=radio],
.sample input[type=checkbox] {
/* 

↓inline(-block)でもともとのラジオボタン出てくる */
	display: none;
  margin: 0;
    }
.sample input[type=radio] + label,
.sample input[type=checkbox] + label {
   

   padding: 0 0 0 24px;
    }
.sample input[type=radio] + label::before,
.sample input[type=checkbox] + label::before {
        content: "";
        position: 

absolute;
/* 外マルの位置 */
			top: 0;
			right: 25%;

	-moz-box-sizing: border-box;
       box-sizing: border-box;
        display: 

block;
        width: 18px;
        height: 18px;
        margin-top: -9px;
         
        background: #FFF;
    }
.sample input[type=radio] + label::before {
/* 外マル

の太さ */
	border: 2px solid #ccc;
        border-radius: 30px;
    }
.sample input[type=checkbox] + label::before {
        border: 2px solid #ccc;
    }
.sample 

input[type=radio]:checked + label::after,
.sample input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
/* 中マルの位置leftright効

かない */
			top: 0;
right:25%;         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
    }
.sample 

input[type=radio]:checked + label::after {
        left: 4px;
         
        width: 20px;
        height: 20px;
        margin-top: -10px;
/*backgroundが中の丸の色*/
	

		background: orange;
 border: 2px solid #999;
	border-radius: 30px;
    }
.sample input[type=checkbox]:checked + label::after {
      left: 3px;       

  
      width: 16px;
      height: 8px;
      margin-top: -8px;
/*border-leftは左側の短い線*/
	border-left: 3px solid orange;
/*border-bottomは右側の長い線*/
	

border-bottom: 3px solid orange; 
			-webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    

}
}.sample label[for*="q"] {
  width: 40px;
  height: 140px;	
}

/*  */




/*
スマホでのradioのマルと文字の位置を調整する、そもそもiphone safari対策でcursor:pointerを入れたが、iphone8,iphoneXの一部端末（wondergoo）では相変わらずボタン等が反応

せず、androidでも画面がチカチカするので使わない。*/

@media(max-width: 500px) {
.main {
background-color: white;
}
body #myTEXT {

background-color: white;
}

body .sample {
    

padding: 6px;
/* ホワイトボード内の余白、問題文も同時に動く */
}
body .sample input

[type=radio],
body .sample input[type=checkbox] {
    display: inline-block;
    

margin-right: 6px;
}
body .sample input[type=radio] + label,
body .sample input[type=checkbox] + label {
    position: relative;
/* widthで文字部分の横の幅 */
border:dotted 0.5px #888;
	display: 

inline-block;
/* marginでボタン間の余白調整,topはホワイトボードの上との余白 */
	margin-top: 5px;
	margin-bottom: 15px;
	

margin-left: 5px;
	margin-right: 5px;
/* margin-left: 0px;にしてmargin-right: 0px→-10pxとかにすると選択肢の右端が狭くなる（行間が狭くなる） */	font-size: 18px;
/* 文字の高さ,もともとは40px,1px移動するだけでもpcでは大きく動く*/
	line-height: 42px;
    cursor: 

pointer;
/* ラジオボタンの左の余白 */
	  margin-left: 10px;
}
 
@media (min-width: 1px) {
body .sample input[type=radio],
body .sample input[type=checkbox] {
/* 

↓inline(-block)でもともとのラジオボタン出てくる */
	display: none;
  

margin: 0;
    }
body .sample input[type=radio] + label,
body .sample input[type=checkbox] + 

label {
      padding: 0 0 0 24px;
    }
body .sample 

input[type=radio] + label::before,
body .sample input[type=checkbox] + label::before {
        content: "";
      

  position: absolute;
/* 

外マルの位置 */
			top: 0;
			right: 25%;

	-moz-box-sizing: border-box;
       box-sizing: border-

box;
        

display: block;
        width: 18px;
        height: 18px;
        margin-top: -9px;
         
        background: #FFF;
   

 }
body .sample input[type=radio] + 

label::before {
/* 外マルの太さ */
	border: 2px solid #ccc;
        border-radius: 30px;
    }
body .sample 

input[type=checkbox] + label::before {
        border: 

2px solid #ccc;
    }
body .sample input[type=radio]:checked + label::after,
body .sample input[type=checkbox]:checked + label::after {
        content: "";
        

position: absolute;
/* 中マルの位置leftright効かない */
			top: 0;
right:25%;  /* もともとは25％ */       
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        

display: block;
    }
body .sample input[type=radio]:checked + label::after {
        left: 4px;
         
        width: 20px;
        

height: 

20px;
        margin-top: -10px;
/*backgroundが中の丸の色*/
			background: blue;
 border: 2px solid 

#999;
	border-radius: 30px;
    }
body 

.sample input[type=checkbox]:checked + label::after {
      left: 3px;         
      width: 16px;
 

     height: 8px;
      margin-top: -8px;
/*border-leftは左側の短い線

*/
	border-left: 3px solid orange;
/*border-bottomは右側の長い

線*/
	border-bottom: 3px solid orange; 
			-webkit-transform: rotate(-45deg);
      

  -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}
.sample label[for*="q"] {
  width: 40px;
   height:140px; /*  スマホ用の選択肢横幅、文字数にあわせてwidthを変える*/
}}

















input[value*="横長"] {

display: none;

}



input[value*="答え合わせヨコ"] {

display: none;

}



input[value*="解説を閉じる"] {

display: none;

}/* 解説を閉じるのタテヨコ両方消す*/


.kaitouappear {opacity: 0; visibility: hidden;
/* もともとはtransitionあり、allだと重いから個別設定のがいい */
}





table[id*="tablesaishonomondaiyoko"] {

display: none;

}


input[id*="yoko"] {

display: none;

}



input[value*="みるヨコ"] {

display: none;

}



input[value*="かくすヨコ"] {

display: none;

}






span[id*="yokogakisentakushi"] {

display: none;

}

/* ↓答え合わせボタン（タテヨコでサイズが変わるようにする）*/
input[value*="採点ボタン"] {

width: 62px;
 

height: 186px; 


background: url('https://eigoblock.net/wp-content/uploads/2018/05/kotaeawasetatemini.png') no-repeat center;}

/* ↓この問題を消す（タテヨコでサイズが変わるようにする）*/
input[value*="この問題を消す"] {

width: 51px;
 

height: 267px; 


background: url('https://eigoblock.net/wp-content/uploads/2018/06/mondaikesutatemini.png') no-repeat center;}