.mid_box {display: inline-block; box-sizing: border-box; margin: 10vh 0 0 15vw; width: 70vw; min-height: 84vh; background-color: gainsboro; border-radius: 15px; opacity: 0.91; border: none; box-shadow: 0 0 25px #000000;}

.title{display: inline-block; box-sizing: border-box; float: left; width: 100%; height: 10vh; font-size: 7vh; text-transform: uppercase; color: rgb(17,34,54); padding: 1vh 2vw; }

.materia_box{display: inline-block; box-sizing: border-box; float: left; width: 100%; padding: 0 7vw;}
.materia{display: inline-block; box-sizing: border-box; float: left; width: 100%; height: 6vh; padding: 0 2vw; font-size: 4.5vh; margin: 0.5vh 0; border-bottom: 2px solid rgb(17,34,54);}
.ul_box {display: inline-block; box-sizing: border-box; float: left; width: 100%; margin: 0 0 2vh 0;}
.ul_box ul {list-style: none;}
.ul_box li {display: inline-block; box-sizing: border-box; float: left; width: 25vw; height: 4vh; font-size: 1.5vh; padding: 1vh 0.5vw; border: 1px solid green; margin: 0.25vh 0.25vw; border-radius: 10px; cursor: pointer; }
.ul_box li:hover {background-color: rgb(17,34,54); color: rgb(212,175,55); }

.masinfo{display: inline-block; box-sizing: border-box; float: left; width: 25vw; height: 6.5vh; padding: 1vh 2vw; font-size: 3.5vh; cursor: pointer; border: 2px solid rgb(17,34,54);; border-radius: 15px; transition-duration: 0.20s; text-align:center; margin-left: 15.5vw; }
.masinfo:hover{background-color: rgb(17,34,54); color: rgb(212,175,55); border: 2px solid rgb(17,34,54);}

.ul_box p{display: inline-block; box-sizing: border-box; float: left; width: 50vw; min-height: 5vh; font-size: 2.5vh; padding: 1.5vh 0.5vw; margin: 1vh 0.25vw; cursor: pointer; text-align:justify; }