body {  font-family: Arial, Helvetica, Calibri, sans-serif; 
        font-size: 16px;
        color: black;
        overflow: hidden;
}

/*  display: flex;
/*  justify-content: center;
/*  align-items: center;
/*  min-height: 95vh; */
/*  background:  rgb(210,168,78); */
/*  font-size: 14px; */
/*  color: white;
/*  box-sizing: border-box;
/*  -webkit-flex: 5;


/* Gold:  
	· R 210
	· G 168
	· B 78
Maroon:
	· R 140
	· G 4
      B 4
*/

.group {
  position: absolute;	
  display: none;
  align-items: center;
  margin-bottom: 2em;
  float: left; 
  font-size: 1vw; 
}
input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  margin-right: 1em;
  padding-left: 2em;
  padding-right: 1em;
  line-height: 2;
  cursor: pointer; }
  
  
/*  ::before {
    box-sizing: border-box;
    content: " ";
    position: absolute;
    top: 0.3em;
    left: 0;
    display: block;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid white;
    border-radius: .25em;
    z-index: -1;
  } */
  
input[type="radio"] + label::before {
  border-radius: 1em;
}
/* Checked */
input[type="radio"]:checked + label {
  padding-left: 1em;
  color:  black; }
  ::before {
    top: 0;
    width: 100%;
    background-color: white;
  }

/* Transition */
label,
label::before {
  -webkit-transition: .25s all ease;
  -moz-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}

/*	iframe { width: 1300px; height: 850px; position: relative; margin-top: 12px;} */
	h2   { font-size: 1rem;}	

 footer { background-color: rgb(140,4,4);
         color: white;
         text-align: center;
         clear: left;
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
} 	
header {
  position: fixed;
  top: 0;
  left: 0;
/*  background: rgba(0,0,0,.5); */
  background-color: #9933cc;
  color: #ffffff;
  text-align: center;
  padding: 15px 6px;
/*  padding: 2px; */
  width: 100%;
  }
  
button { color: black;
         border-radius: 12px;
         background: #73AD21;
         width: 43%; 
         margin: 4px;
         padding: 12px;
}
  
button:hover{
  background-color: yellow;
  color: black;}
  
h1 { margin-left: 3%; font-size: 1.6vw;}  

a  { color: black; }
  
/* iPhone 12 */    
@media screen and (max-width: 400px) {
	body { font-size: 2.4vw;
	       background-color: red;
	       width: 100%;
	       height: 97vh;
	       margin: 0 2px;
	       overflow: visible;
	       
        }
		header {color: black; }
		main   { color: black;}
		aside  { font-size: 3em; }
		label  { font-size: 0.9rem; font-weight: bold;}
		footer { font-size: 3vw; }
        ol li  { padding-bottom: 10px; }
		button { font-size: 6vw; width: 90%;}
		#head { font-size: 8vw; text-align: center; }
		#pdf   { display: none; }
		#link, #files { font-size: 4vw; }
		#bgm { font-size: 5vw; margin: 5px; width: 90%;}
		#voicex { width: 25%; margin-top: 10%;}
		#buts { margin: 5px;}
		.old { color: black; font-size: 5.8vw; }
	    .new { color: white; font-size: 5.8vw; font-weight: bold;}
}


/* Surface Pro */  
@media only screen and (min-width: 400px) and (max-width: 1799px) {
  body { background-color: rgb(210,168,78);
         font-size: 1vw;
         display: flex;
         min-height: 95vh;
         color: black;
  }
	main { float: left; width: 24%; }
	iframe { width: 75%; margin-top:3%; position: relative;}
	header { font-size: 1.5vw; background-color: rgb(140,4,4);}
	footer { color: white; font-size: 1vw;}
	#voicex { margin-top: 20%;}
	#bgm { width: 95%;}
	.old { color: black; font-size: 1.3vw; }
	.new { color: white; font-size: 1.6vw;}
}  
/* Home */  
@media only screen and (min-width: 1800px) {
  body { background-color: green;
         font-size: 1vw;
         display: flex;
         min-height: 95vh;
  }
	main { float: left; width: 24%; margin-left: 2%;}
	iframe { width: 72%; margin-top:1%; position: relative;}
	header { font-size: 1.5vw; background-color: rgb(140,4,4);}
	footer { color: white; font-size: 1vw;}
	button { font-size: 1.2vw;}	
	#voicex { margin-top: 20%;}
	#bgm { font-size: 5vw; margin: 5px; width: 90%;}
	#list { margin-left: 3%; }
	.old { color: black; font-size: 1.2vw; }
	.new { color: black; font-size: 1.2vw; background-color: yellow; font-weight: bold;}
	span { display: inline;}
	li   { color: black; }
    ol li  { padding-bottom: 10px; }
}  
  
#clearfix { clear:both;}