/* 外枠 */
#main{
  padding-bottom: 7%;
}
.box{
  width: 90%;
  margin: 5% auto;
  font-size: 18px;
}
.title-size{
  margin-top: -1.5%; 
  margin-left: 7%;
  width: 30%;
  font-size: 35px;
}
.title{
  margin:2% 5%;
}
:root {
	/*ここからテーマカラー(色をテーマカラー毎に指定する)*/
	--main-color: rgba(230, 90, 0, 1);/*メインカラー*//*橙*/
	--main-color-50: rgba(230, 90, 0, 0.5);/*メインカラー透明度50*//*橙*/
	/*ここまで色を指定する*/
}


.department{
 width:25%;
 /* 選択肢の位置を調節 */
position: absolute;
margin-top: 1%;
margin-left:35%;
text-align: center;
text-align-last: center;
color: var(--black-color);
font-family: 'R-Font', 'G-Font';
font-size: 20px;
border: solid 3px var(--main-color);
cursor: pointer;
border-radius: 3px;
background-color: rgba(0,0,0,0);
}

.ranking{
 width: 60%;
 margin-top: 1%;
 margin-left: 4% ;
 background-color: rgba(255, 255, 255, 0.637);
 font-size: 20px;
}
.ranking a{
  margin-left: 10%;
  width: 90%;
  transition: all .3s;
  border-bottom: solid 4px rgba(230, 90, 0, 1);
  display: block;
}

.subject_name{
  width: 100%;
  display: block;
  padding: 5px 0;
 color:rgba(0,0,0,0.7);
}
.subject_name:hover{
  background-color:rgba(150, 150, 150,0.281);
}
.subject_name a{
  color:rgba(0,0,0,0.7);
}

#syousai{
 /* display: inline; */
  margin: 30%;
  color:rgba(0,0,0,0.7);
  padding: 1.5%;
  border-radius:10px; 
  background-color: #B54A4A;
}

.box-postion{
  width: 45%;
  height: 100%;
  margin-top: -480px;
  margin-left: 77%;  
  font-size: 20px; 
}
.box-postion a:hover{
  padding-top: 135px;
  background-color: rgba(150, 150, 150,0.281);
}

.icon_size{
  width: 20%;
}

.font-position{
  margin-left: 10px;
}