.grade-report_ttl {
  text-align: center;
  margin-bottom: 30px;	
}
.grade-report_up {
  text-align: center;
  margin-bottom: 30px;	
}

.grade-report-2columns {
  list-style: none;
  padding: 0; 	
}
@media screen and (min-width: 768px) {
    .grade-report-2columns {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 10px ; }
      .grade-report-2columns li {
        width: calc((100% - 10px) / 2); } 
}
@media screen and (max-width: 767px) {
    .grade-report-2columns {
      margin-bottom: 10px; }
      .grade-report-2columns li {
        margin-top: 0px; } 
      .grade-report-2columns li:not(:first-child) {
        margin-top: 10px; } 	
}


.grade-report-3columns {
  list-style: none;
  padding: 0; 	
}
@media screen and (min-width: 768px) {
    .grade-report-3columns {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 50px ; }
      .grade-report-3columns li {
        width: calc((100% - 10px) / 3);
        margin-top: 30px;  } 
}
@media screen and (max-width: 767px) {
    .grade-report-3columns {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;		
      margin-bottom: 10px; }
      .grade-report-3columns li {
		width: calc((100% - 10px) / 2); 
	    margin-bottom: 10px;} 
}