.ttl_img{
	text-align: center;
	margin-bottom: 30px !important;
}
.subttl_img{
	text-align: center;
	margin-bottom: 15px !important;
}
.ranking{
	text-align: center;
	margin-bottom: 50px !important;
}
.ranking_mb0{
	text-align: center;
	margin-bottom: 0px !important;
}
.class{
	text-align: center;
	margin-bottom: 70px !important;
}
.class_ttl{
	font-size: 1.3em;
	font-weight: bold;
	text-align: left;
	margin-bottom: 0 !important;
}
.img_mb-m{
	text-align: center;
	margin-bottom: 50px !important;
}

  @media screen and (max-width: 767px) {
    .ranking{
	margin-bottom: 30px !important;
} 
    .class{
	margin-bottom: 50px !important;
} 
    .img_mb-m{
	margin-bottom: 30px !important;
} 	  
}

.grade-report_rank {
  list-style: none;
  padding: 0; 
}
@media screen and (min-width: 768px) {
    .grade-report_rank {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 50px ; }
      .grade-report_rank li {
        width: calc((100% - 40px) / 4);
        margin-top: 30px; 
		text-align: center; } 
}
@media screen and (max-width: 767px) {
    .grade-report_rank {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 50px ; }
      .grade-report_rank li {
        width: calc((100% - 20px) / 2);
        margin-top: 30px; 
		text-align: center; } 
}

.grade-report_class {
  list-style: none;
  padding: 0; 
}
@media screen and (min-width: 768px) {
    .grade-report_class {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 50px ; }
      .grade-report_class li {
        width: calc((100% - 40px) / 5);
        margin-top: 30px; 
		text-align: center; } 
}
@media screen and (max-width: 767px) {
    .grade-report_class {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 50px ; }
      .grade-report_class li {
        width: calc((100% - 30px) / 3);
        margin-top: 15px; 
		text-align: center; } 
}