@charset "UTF-8";

.wrap_table_curriculum {
  overflow: auto;
  
  height: 100%;
 /*position: absolute;*/
  -webkit-overflow-scrolling:touch;
  margin-bottom: 20px ;
  
  }
  
.wrap_table_curriculum::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
.wrap_table_curriculum::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}
.wrap_table_curriculum::-webkit-scrollbar {
    height: 10px;
}
.wrap_table_curriculum::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #fff;
}
.wrap_table_curriculum::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #333;
}

  


  .wrap_table_curriculum #tableCurriculum {
    width: 2500px;
    border-spacing: 0 15px;
    border-collapse: separate; 
    
    
    }
    /*
     position: absolute;
    top: 0; left: 0;
    width: 100%;
  
   
    
  .wrap_table_curriculum:after{
      content: "";
    display: block;
    padding-top: 100%; 
  }  */
    
   
   
   
   
    
#tableCurriculum2{
 width: 2640px;
    border-spacing: 0 15px;
    border-collapse: separate;
}
#tableCurriculum2 td{
    
}







.curleft{
    width: 210px;
     position: -webkit-sticky;
    position: sticky;
   left: 0;
   background: #fff;

}


/**左側のボタン**/
.onbtn,
.modelbtn dl:hover{
    background: #00ce66;
}
.electric .onbtn,
.electric .modelbtn dl:hover{
    background: #0040ff;
}
.information .onbtn,
.information .modelbtn dl:hover{
    background: #52248f;
}
.media .onbtn,
.media .modelbtn dl:hover{
    background: #42b5fc;
}




.modelbtn{
    padding: 0px 20px 0 0;
}
.modelbtn dl{
    border: 2px solid #00ce66;
    padding: 15px;
    border-radius: 5px;
    margin: 0 0 10px 0;
    position: relative;
    cursor: pointer;
}
.electric .modelbtn dl{
    border-color: #0040ff;
}
.information .modelbtn dl{
    border-color: #52248f;
}
.media .modelbtn dl{
    border-color: #42b5fc;
}


.modelbtn dl:after, .modelbtn dl:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.modelbtn dl:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #ffffff;
	border-width: 10px;
	margin-top: -10px;
}
 .modelbtn .onbtn:after,
 .modelbtn dl:hover:after{
	display: none;
}
.modelbtn dl:before {
	border-color: rgba(45, 180, 85, 0);
	border-left-color: #00ce66;
	border-width: 12px;
	margin-top: -12px;
}
.electric .modelbtn dl:before {
border-left-color: #0040ff;
}
.information .modelbtn dl:before {
border-left-color: #52248f;
}
.media .modelbtn dl:before {
border-left-color: #42b5fc;
}

.modelbtn dt{
    text-align: center;
    font-weight: 800;
    padding: 0 0 20px 0;
    color: #00ce66;
    font-size: 105%;
    margin:0 -10px;
}
.electric .modelbtn dt{
     color: #0040ff;
}
.information .modelbtn dt{
     color: #52248f;
}
.media .modelbtn dt{
     color: #42b5fc;
}


.modelbtn dd p{
    font-size: 90%;
    margin: 0 0 10px 0;
}
.modelbtn dd li{
    border: 1px solid #fff;
    padding: 5px 10px;
    border-radius: 99px;
    color: #fff;
    background:#00ce66 url("../img/mechanical/curriculum/btn_arrow.png") no-repeat 95% center;
    background-size: 14px;
}
.electric .modelbtn dd li{
 background:#0040ff url("../img/mechanical/curriculum/btn_arrow.png") no-repeat 95% center;
    background-size: 14px;
}
.information .modelbtn dd li{
 background:#52248f url("../img/mechanical/curriculum/btn_arrow.png") no-repeat 95% center;
    background-size: 14px;
}
.media .modelbtn dd li{
 background:#42b5fc url("../img/mechanical/curriculum/btn_arrow.png") no-repeat 95% center;
    background-size: 14px;
}

.modelbtn .onbtn,
.modelbtn .onbtn dt,
.modelbtn dl:hover dt,
.modelbtn dl:hover{
    color: #fff;
}













.wrap_table_curriculum h3,
.modelbtn h3{
    border: 2px solid #000;
    border-radius: 10px 10px 0 0;
    padding: 10px;
    text-align: center;
    border-bottom: none;
    margin: 0 0 10px 0;
}
.wrap_table_curriculum .curright h3{
    text-align: left;
    padding-left: 300px;
}




.wrap_table_curriculum .modelbtn h3{
    margin-bottom: 100px;
}
.wrap_table_curriculum td{
    vertical-align: top;
}




/*カリキュラムのテーブル*/
.curtable{
    width: 100%;
}
.curtable td{
    padding: 5px;
    background: #f1f1f1;
    vertical-align: middle;
    font-size: 80%;
}
/**カラーの設定*/

/*見出し部分*/
.curtable .bgwhite{
    background: #fff;
}
.curtable .bgth1{
    background: #4d4d4d;
    color: #fff;
    font-size: 110%;
    font-weight: 800;
}
.curtable .bgth2{
    background: #7e7e7e;
     color: #fff;
}
.curtable .bgth3{
    background: #006837;
     color: #fff;
}
.curtable .bgth4{
    background: #004e8f;
     color: #fff;
}
.curtable .bgth5{
    background: #8363b3;
     color: #fff;
}

/**td*/
.curtable .bgtd01{
    background: #dddddd;
}

/**変更するカラーの設定**/


.curtable  .color1 {background: red;}
.curtable .color2 {background: blue;}
.curtable .color3 {background: green;}

.curtable .bgtr01 .color1 {background: #b5f0d2;}
.curtable .bgtr02 .color1 {background: #aee5ff;}
.curtable .bgtr03 .color1 {background: #d2caff;}


























    
@media screen and (max-width: 620px) {
    


table, th, td{
    padding: 0;
}


.curleft{
    width: 0;
}




.wrap_table_curriculum .curright h3{
    padding-left: 150px;
}

/*スマホ用のボタン**/
.modelbtnsp{
    display: flex;
}
.modelbtn{
    padding: 0;
}
.modelbtn dl{
    padding: 5px;
    margin: 0 1% 10px 1%;
    width: 30%;
    width: 100%;
    border-width: 1px;
}
.modelbtn dt{
    font-size: 80%;
    padding: 0;
    margin: 0;
}
.modelbtn dd{
    display: none;
}


.modelbtn dl:after, .modelbtn dl:before {
	left: 45%;
	top: 100%;
    

    
}
.modelbtn dl:after {
	border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
	border-width: 6px;
margin-top: -1px;
}
.electric .modelbtn dl:after {
    border-top-color: #fff;
}


.modelbtn dl:before {
	border-color: rgba(45, 180, 85, 0);
     border-top-color: #00ce66;
	    border-width: 6px;
    margin-top: 0px;
}
.electric .modelbtn dl:before {
    border-top-color: #0040ff;
    border-left-color: #fff;  
}
.information .modelbtn dl:before {
    border-top-color: #52248f;
    border-left-color: #fff;    
}
.media .modelbtn dl:before {
    border-top-color: #42b5fc;
    border-left-color: #fff;    
}
}