.p-course-list {
  margin: 0 -1% 0 0;
  overflow: hidden;
}
@media only screen and (max-width: 639px) {
  .p-course-list {
    margin: 0 0 20px 0;
  }
}

#boxMenuElemLabel{
width:136px;
}

.p-course-list > li {
  float: left;
  margin-right: 1%;
  width: 23%;
    
  		/* @media only screen and (min-width:640px) and (max-width:1010px) {
  			width: (92%/5);
  			margin: 0 2% 10px 0;
  			@include box-sizing(border-box);

  			&:last-child{
  				margin-right: 0;
  			}
  		} */
}
@media only screen and (max-width: 639px) {
#boxMenuElemLabel{
width:40px;
}
  .p-course-list > li {
    float: none;
    display: block;
    margin: 0 0 10px 0;
    width: 100%;
  }
}
.p-course-list > li a {
  display: block;
  text-decoration: none;
}
.p-course-list > li a:hover {
  background: #f4f4f4;
  color: #333;
  -webkit-transition: background 800ms;
  transition: background 800ms;
}

.p-course-box {
  background: url(../images/top/bg_course.png) no-repeat right bottom;
  border: 1px solid #999;
  border-radius:3px;
  padding: 15px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* @media only screen and (min-width:640px) and (max-width:1010px) {
  	width: auto;
  	padding: 10px;
  } */
}
@media only screen and (max-width: 639px) {


  .p-course-box {
    padding: 5px;
    overflow: hidden;
  }
}
.p-course-box ul {
  margin: 0 auto 10px;
  width: 100px;
  
  /*
  border:solid 1px red;
  @media only screen and (min-width:640px) and (max-width:1010px) {
  	width: auto;
  	margin: 0 0 10px 0;
  } */
}


@media only screen and (max-width: 639px) {
  .p-course-box ul {
    width: 40px;
    float: left;
    margin: 0 2% 0 0;
  }
}
.p-course-box ul li {
  float: left;
  margin-left: 5px;
  width: 30px;
  line-height: 1;
  padding: 1.5px 0;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-size: 1.0rem;
  white-space:nowrap;
  			/* @media only screen and (min-width:640px) and (max-width:1010px) {
  				margin: 0 1.5% 1% 0;
  				width: auto;
  				padding: 2px 3px;

  				&:last-child{
  					margin-right: 0;
  				}
  			} */
}
@media only screen and (max-width: 639px) {
  .p-course-box ul li {
    float: none;
    margin: 0 0 1px 0;
    width: auto;
    padding: 1.5px 3px;
  }
}
.p-course-box ul li:first-child {
  margin-left: 0;
}
.p-course-box ul li span {
  font-size: 10px;
  font-size: 1rem;
}
.p-course-box ul li.single {
  width: 100px;
}
@media only screen and (max-width: 639px) {
  .p-course-box ul li.single {
    width: 40px;
    padding: 2px;
  }
  .p-course-box ul li.single span {
    display: block;
    text-align: center;
  }
}
.p-course-box__title {
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 10px;
  font-size: 18px;
  font-size: 1.8rem;
}
@media only screen and (max-width: 639px) {
  .p-course-box__title {
    text-align: left;
    margin-bottom: 0;
    font-size: 14px;
    font-size: 1.5rem;
  }
}
.p-course-box__text {
text-align:center;
padding:0px;
  line-height: 1.4;
  font-size: 11px;
  font-size: 0.9rem;
}



.es00 {
  background: #FFCC00;
}

.es01 {
  background: #FAA21B;
}

.es02 {
  background: #F5821F;
}

.es03 {
  background: #81CA9C;
}

.es04 {
  background: #00B26A;
}

.es05 {
  background: #00984A;
}

.es06 {
  background: green;
}

.jhs {
  background: #008ACF;
}

.jhs01 {
  background: #32A3DC;
}

.jhs02 {
  background: #0089CF;
}

.jhs03 {
  background: #006CB7;
}

.hs {
  background: #360094;
}

.hs01 {
  background: #314DB3;
}

.hs02 {
  background: #343599;
}

.hs03 {
  background: #360094;
}