html{background:#fff;
margin:0;}
body{background:#fff;
color:navy;
height:100%;
}
header{text-align:center;}

ol{background:#fff;}
li{color:red;}
li +dd{color:blue;}

div.label {width:100%;
	  text-align:center;
	 text-decoration:underline;
	 potition:fixed !important;
	position: absolute;
  	 background: #ffe950; 
  	 height: 1em;
#  	 float:left; 
}
div.label label:hover{background:pink;}

div.toi{border-top:navy 1px solid;;}
input[type="checkbox"] + label + div.toi{height:0em; opacity:0;
transition: 0.3s ease-in-out;}
input[type="checkbox"]:checked + label + div.toi{height:auto;
opacity:1; transition: 1s ease-in-out; }

input[type="radio"][name="sec"]{display:none;}
input[type="radio"] + div.toi{display:none;
height:0em; opacity:0; transition: 0.5s ease-in-out;}
input[type="radio"]:checked  + div.toi{display:block;
height:auto; opacity:1; transition: 0.5s ease-in-out;}



input[type="checkbox"][name="sakata"] +dd {
height:0em; opacity:0; transition: 0.5s ease-in-out; }
input[type="checkbox"][name="sakata"]:checked + dd {height:3em; opacity:1;
 transition: 0.5s ease-in-out;}

input[type="radio"][name="sakata"] +dd {height:0em; opacity:0; transition: 0.5s ease-in-out; }
input[type="radio"][name="sakata"]:checked + dd {height:3em; opacity:1;
 transition: 0.5s ease-in-out;}

span.dekai{font-size:2em;}


label input{ image
	opacity: 0;
}