@charset "utf-8";
/* CSS Document */

.classroom-area {
  border-radius: 20px;
  background-color: #eee6cf;
  padding: 26px 30px;
  width: 880px;
  z-index: 1;
  position: relative;
      margin: 0 auto 15px auto;}
  @media screen and (max-width: 768px) {
    .classroom-area {
      padding: 2.6666666667vw 4vw;
      border-radius: 10px;
	  width: 87%;} }
  .classroom-area .area {
    display: flex;
    align-items: center;
    padding: 6px 0; }
    @media screen and (max-width: 768px) {
      .classroom-area .area {
        padding: 2.1333333333vw 0; } }
    .classroom-area .area + .area {
      border-top: 1px solid #fff; }
  .classroom-area .area-title {
    font-size: 18px;
    font-size: 1.8rem;
    color: #ff5151;
    font-weight: bold;
    margin-right: 15px; }
    @media screen and (max-width: 768px) {
      .classroom-area .area-title {
        font-size: 12px;
        font-size: 1.2rem;
        margin-right: 1.8666666667vw; } }
  .classroom-area .list {
    display: flex;
    align-items: center; }
    .classroom-area .list .child {
      display: flex;
      align-items: center;
      justify-content: center;
      border: solid 1px #ccc;
      background-color: #fff;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
      width: 83px;
      height: 36px;
      text-decoration: none;
      color: #000;
      border-radius: 18px;
      font-size: 15px;
      font-size: 1.5rem;
      transition: background-color .3s, color .3s, border-color .3s; }
      @media screen and (max-width: 768px) {
        .classroom-area .list .child {
          font-size: 12px;
          font-size: 1.2rem;
          padding: 0;
          width: 12vw;
          border-radius: 2.4vw; } }
      .classroom-area .list .child + .child {
        margin-left: 4px; }
        @media screen and (max-width: 768px) {
          .classroom-area .list .child + .child {
            margin-left: 0.5333333333vw; } }
      .classroom-area .list .child:hover {
        background-color: #ff5151;
        border-color: #ff5151;
        color: #fff; }

.classroom-area table {
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    border: 2px dashed #f8f4e6
}
.classroom-area table tr {
    background-color: #f8f4e6;
}
.classroom-area table tr:nth-child(even){
    background-color: #f7edc6;
}
.classroom-area table th ,
.classroom-area table td {
    padding: 0.7em;
    border: 2px dashed #f8f4e6;
}
.classroom-area table thead td {
    font-size: 17px;
    padding: 0.8em;
    font-weight: bold;
    text-align: center;
}
.classroom-area table thead th {
    font-size: 15.5px;
    padding: 0.8em;
    font-weight: bold;
    text-align: center;
}
.classroom-area table thead tr{
    background-color: #f7edc6;
    /*color:#fff;*/
}
.classroom-area table tbody th {
    text-align: left;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
}
.classroom-area .table-txt{
    text-align: center;
    font-size: 15.5px;
    width: 22%;
	box-sizing: border-box;
}
.classroom-area p{
    margin: 10px 0px 0px 242px;
    display: block;
    font-size: 14px;
    text-align: right;
}


@media screen and (max-width: 768px) {
.classroom-area table {
    border: 0;
    width:100%
}
.classroom-area table th{
    background-color: #f7edc6;
    display: block;
    border: 2px dashed #f8f4e6;
}
.classroom-area table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.classroom-area table tr {
    display: block;
    margin-bottom: .625em;
    /*border: 1px solid #f7da63;*/
}
.classroom-area table td {
    /*border-bottom: 1px dotted #f7da63;
	background-color: #f8f4e6;*/
    display: block;
    font-size: 15px;
    text-align: right;
    position: relative;
    padding: 0.5em 1em 0.5em 6em;
    border-right: 2px dashed #f7edc6;
    border-left: 2px dashed #f7edc6;
    border-bottom: 2px dashed #f7edc6;
    height: 40px;
}
.classroom-area table td::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
    color: #000;
}
/*.classroom-area table td:last-child {
    border-bottom: 0;
}*/
.classroom-area table tbody th {
    /*color: #fff;*/
    padding: 0.5em
}
.classroom-area table tr td{
    background-color: #f8f4e6;
    height: auto;  
}
.classroom-area table tr:last-child td{
    background-color: #f8f4e6;
    height: auto;
    vertical-align: middle;   
}
.classroom-area .table-txt{
    width: 100%;
    font-size: 16px!important;
}
.classroom-area p{
    margin: 10px;
    text-align: left;
}}