body{background:#fff;
color:navy;
}
header{text-align:center;}
ol{background:#fff;}
li{color:red;}
li +dd{color:blue;}

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


input[type="radio"][name="sakata"] +span + div.toi{margin-top:-20em; opacity:0;
transition: 1s ease-in-out;}
input[type="radio"][name="sakata"]:checked + span + div.toi{margin-top:0em;
opacity:1; transition: 1s ease-in-out; }



input[type="checkbox"][name="sakata"] +dd {display: none;}
input[type="checkbox"][name="sakata"]:checked + dd {display: block;}
span.dekai{font-size:2em;}


label input{ image
	opacity: 0;
}