html main {
    font-size: 15px;
}
.main.second {
    max-width: 1280px;
    margin: 0 auto;
}
.sp_style .main.second {
    max-width: 90%;
}
.sets_list {
    display:flex;
    flex-direction: column;
    gap:10px;
}
.sets {
    display:flex;
    gap:10px;
}
.sets_title {
    width:30%;
    padding: 0 2px;
}
li.card.active .sets_title {
    background-color: #ddf1f2;
}
li.card.before .sets_title {
    background-color: #f6efdf;
}
li.card.after .sets_title {
    background-color: #e2e2e2;
}
.sets_detail {
    width: 80%;
}
li.card .ctitle {
    text-align: center;
}

ul.course_list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 1% 0 0 0;
  padding: 0;
  gap: 2%;
}
ul.course_list.empty {
  justify-content: flex-start;
}

li.card {
  background-color: #fff;
  border: solid 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 0 2% 0;
  width: 32%;
  border-radius: 3px;
  /*max-width:400px;*/
}
li.card.active {
    border-color:#31a9b9;
}
li.card.before {
    border-color:#f4ba34;
}
li.card.after {
    border-color:#8b8b8b;
}
li.card .tag {
    width:fit-content;
    border-radius: 0 0 3px 0;
    font-weight: bold;
    padding: 2px 8px;
    display: inline-block;
    color: white;
}
li.card.active .tag {
    background-color:#31a9b9;
}
li.card.before .tag {
    background-color:#f4ba34;
}
li.card.after .tag {
    background-color:#8b8b8b;
}
li.card.after div.card_inner {
    color:#8b8b8b;
}

li.card .btn {
  background-color: #ccc;
  text-align: center;
  padding: 5px;
  border-radius: 3px;
  color:#fff;
  font-weight: bold;
}
li.card.active .btn {
    background-color:#31a9b9;
}
li.card.before .btn {
    background-color:#f4ba34;
}
li.card.after .btn{
    background-color:#8b8b8b;
}
li.card .btn:hover {
    opacity: 0.7;
}

li.card div.card_inner {
  padding: 8px;
}
div.contents {
    display: flex;
    flex-direction: column;
    gap:40px;
}

/*@media screen and (max-width: 500px) {*/
    .sp_style ul.course_list {
        flex-direction: column;
    }
    .sp_style ul.course_list li {
        flex-direction: column;
        width: 100%;
    }
/*}*/

.label {
  border-radius: 5px;
  padding: 5px;
  margin-right: 3px;
  color: white;
  min-width: fit-content;
}

.label.active {
  background: #0066ff;
}
.label.inactive {
  background: #666;
}

ul.sodan li {
    list-style:inside;
}

ul.sodan a {
    text-decoration: underline;
    color:#31a9b9;
}

div.container {
    background-color: #f7f9f6;
}

hr.separator {
    border:dashed 1px #777;
    margin: 10px 0;
}
.card.hide .sets_list {
    display:none;
}
.title_container {
    display:flex;
    align-items: center;
    justify-content: space-between;
    position:relative;
}
.sp_style .title_container { cursor:pointer;}
.sp_style .card .title_container:after {
    /*cursor:pointer;*/
    position:absolute;
    right:15px;
    content:"";
    width:10px;
    height: 10px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    rotate: 225deg;
    top:0;
    bottom:0;
    margin: auto;
}
.sp_style .card.hide .title_container:after {
    rotate: 45deg;
}
.sp_style .card.active .title_container { color:#31a9b9;}
.sp_style .card.before .title_container { color:#f4ba34;}
.sp_style .card.after .title_container { color:#8b8b8b;}