@charset "UTF-8";
div.curriculum_list{border-top:1px solid #333; padding-bottom:30px;}
div.curriculum_list > button{width:100%; position:relative; padding:20px 0 20px 50px; font-size:20px; font-weight:500; color:#000; border-bottom:1px solid #333; text-align:left;}
div.curriculum_list > button:before, div.curriculum_list > button:after{content:""; width:20px; height:1px; position:absolute; top:50%; background-color:#ccc;}
div.curriculum_list > button:before{transform:rotate(-45deg); right:40px;}
div.curriculum_list > button:after{transform:rotate(45deg); right:54px;}
div.curriculum_list > button.active{background-color:#333; color:#fff;}
div.curriculum_list > button.active:before{transform:rotate(-135deg);}
div.curriculum_list > button.active:after{transform:rotate(135deg);}
div.curriculum_list > button.active:before, div.curriculum_list > button.active:after{background-color:#fff;}
div.curriculum_list div.timetable{display:none;}
div.curriculum_list div.timetable.active{display:block;}
div.curriculum_list div.timetable table{width:100%;}
div.curriculum_list div.timetable table col.sylltypee{width:150px;}
div.curriculum_list div.timetable table col.score{width:120px;}
div.curriculum_list div.timetable table col.time{width:120px;}
div.curriculum_list div.timetable table thead th{padding:15px 10px; font-size:16px; border-bottom:1px solid #ddd; background-color:#f1f1f1;}
div.curriculum_list div.timetable table tbody td{padding:15px 10px; font-size:16px; border-bottom:1px solid #ddd; text-align:center;}
div.curriculum_list div.timetable table tbody td:first-of-type{text-align:left;}
div.curriculum_list div.timetable table tbody td button{padding:0 30px 0 20px; position:relative; font-size:16px;}
div.curriculum_list div.timetable table tbody td button:before, div.curriculum_list div.timetable table tbody td button:after{content:""; width:12px; height:1px; position:absolute; top:50%; background-color:#666;}
div.curriculum_list div.timetable table tbody td button:before{transform:rotate(-45deg); right:0;}
div.curriculum_list div.timetable table tbody td button:after{transform:rotate(45deg); right:8px;}
div.curriculum_list div.timetable table tbody td button.active:before{transform:rotate(-135deg);}
div.curriculum_list div.timetable table tbody td button.active:after{transform:rotate(135deg);}
div.curriculum_list div.timetable table tbody td[colspan='4']{display:none; padding:20px;}
div.curriculum_list div.timetable table tbody td[colspan='4'].active{display:table-cell;}
div.curriculum_list div.timetable table tbody td div.curriculum_desc { text-align:left; }
div.curriculum_list div.timetable table tbody td div.curriculum_desc strong { padding-left:20px; font-weight:600; display:block; }
div.curriculum_list div.timetable table tbody td div.curriculum_desc div { padding: 20px 0 0 40px; text-align:left; }

/* PC Mini & Tablet */
@media all and (min-width:768px) and (max-width:1399px) {
    div.curriculum_list > button{padding:15px 0 15px 50px;}
    div.curriculum_list div.timetable table thead th{padding:12px 8px; font-size:15px;}
    div.curriculum_list div.timetable table tbody td{padding:12px 8px; font-size:15px;}
    div.curriculum_list div.timetable table tbody td button{font-size:15px;}
}

/* Mobile */
@media all and (max-width:767px) {
    div.curriculum_list > button{padding:15px 0 15px 15px; font-size:16px;}
    div.curriculum_list > button:before, div.curriculum_list > button:after{width:10px;}
    div.curriculum_list > button:before{right:20px;}
    div.curriculum_list > button:after{right:27px;}
    div.curriculum_list div.timetable table col.sylltypee{width:70px;}
    div.curriculum_list div.timetable table col.score{width:50px;}
    div.curriculum_list div.timetable table col.time{width:50px;}
    div.curriculum_list div.timetable table thead th{padding:10px 5px; font-size:13px;}
    div.curriculum_list div.timetable table tbody td{padding:10px 5px; font-size:13px;}
    div.curriculum_list div.timetable table tbody td button{padding:0 20px 0 0; font-size:13px;}
    div.curriculum_list div.timetable table tbody td button:before, div.curriculum_list div.timetable table tbody td button:after{width:8px;}
    div.curriculum_list div.timetable table tbody td button:after{right:6px;}
}