#top-bg{
  color: white;
  /* background: radial-gradient(#FFFFFF55, #FA6900E9); FA6900B0*/
  background: linear-gradient(90deg, #fbbf80, #fbbf80, #fbbf80f0, #fbbf8030,#0000) ;
  height: 33vw;
  min-height: 200px;
  max-height: 600px;
}

#perfect-reading-img {
  zoom: 55%;
  left: 85vw;
}
.class-container {
  clear: both;
}

.class-box {
  zoom:0.5;
  display: inline-block;
}

.charactor {
  padding-left: 20px;
  zoom:0.4;
  display: inline-block;
}

.charactor-qr {
  padding-left: 20px;
  zoom:0.4;
  display: inline-block;
}

.charactor-qr-area {
  display: inline-block;
}

.class-detail {
  display: inline-block;
  padding-left: 30px;
}

#class-4-icon {
  width: 230px;
}

#teaching-class {
  /* text-align: center; */
}

.teaching-class-img {
  padding: 20px;
  zoom:0.35;
  display: inline-block;
}

table {
  table-layout: fixed;
  min-width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 1;
}

body th {
  padding: 5px;
  width: 120px;
  min-width: 120px;
  text-align: center;
  border: solid 1px;
  border-right: 1px solid black;
}
td {
  padding: 5px;
  width: 100px;
  min-width: 100px;
  text-align: center;
  border: solid 1px;
  border-right: 1px solid black;
}

.gray-cell {
  background-color: #b0b0b0;
  height: 15px;
}

.yellow-cell {
  background-color: #f8f4bc;
}

.blue-cell {
  background-color: #99b8d4;
}

.light-blue-cell {
  background-color: #edf3f8;
}

.mod-tbl {
  max-width: 100%;
  overflow: auto;
}

table thead tr:first-child th:first-child {
  height: 33px;
  width: 120px;
  padding: 0;
  background: url('data:image/svg+xml,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><line fill="none" stroke="#000000" stroke-width="0.2" stroke-miterlimit="10" x1="0" y1="0" x2="10" y2="10"/></svg>') no-repeat;
  background-size: 100%;
  background-color: #f8f4bc;
}

/****************************************************************************/
@media only screen and (max-width : 415px){
  .class-container {
    margin: auto;
  }

  .class-detail {
    font-size: 88%;
    padding-left: 10px;
  }

  .charactor-qr-area {
    width: 100%;
    text-align: center;
  }

  .charactor-qr {
    padding-left: 0px;
  }
}

/****************************************************************************/
@media only screen and (min-width : 591px){
  .charactor {
    visibility: visible;
  }
}

@media only screen and (max-width : 590px){
  .charactor {
    display: none;
  }

}

/****************************************************************************/
@media only screen and (min-width : 851px){
  .container-middle {
    max-width: 850px;
    margin: 0 auto;
  }

  .hide-br {
    display:none;
  }
}

@media only screen and (max-width : 850px) and (min-width : 601px){
  .container-middle {
    width: 550px;
    margin: 0 auto;
  }
}

@media only screen and (max-width : 600px){
  .container-middle {
    width: 90%;
    margin: 0 auto;
  }
}

/****************************************************************************/
@media only screen and (max-width : 850px){
  #top-bg-img{
    position:absolute;
    right: calc(870px - 90%);
  }
}

@media only screen and (max-width : 550px){
  #top-title{
    display: none;
  }
  #top-title-sp{
    visibility: visible;
  }
}

@media only screen and (min-width : 551px){
  #top-title{
    visibility: visible;
  }
  #top-title-sp{
    display: none;
  }
}