@charset "utf-8";

/*-- 角度早見表実装 --*/

.angleChart_wrap{
  width: 100%;
  background-color: #fff;
}

.angleChart_exp{
  padding: 10px 0px 10px 10px;
}

.angleChart_note{
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.angleChart_tableBlock-scroll{
  overflow-x: scroll;
}

.angleChart_tableBlock{
  text-align: center;
}

.angleChart_tableBlock tbody tr{
  border: 0.5px #b7b7b7 solid;
}

.angleChart_tableBlock tbody td{
  border-right: 0.5px #b7b7b7 solid;
  width: 5%;
}

.angleChart_tableBlock tr:nth-child(1){
  background-color: #414247;
  color: #FFF;
}

.angleChart_tableBlock td:nth-child(1){
  width: 10%;
  padding: 5px 0 5px 5px;
}

.angleChart_tableBlock tr:nth-child(1) td:nth-child(4),
.angleChart_tableBlock tr:nth-child(1) td:nth-child(8),
.angleChart_tableBlock tr:nth-child(1) td:nth-child(12) {
  background-color: #0099DB;
}

.angleChart_tableBlock td:nth-child(4),
.angleChart_tableBlock td:nth-child(8),
.angleChart_tableBlock td:nth-child(12){
  background-color:#C1E1F2 ;
}

.angleChart_pcIllustratBlock{
  margin: 30px 0;
}

.angleChart_pcIllustratBlock > .bx-wrapper .bx-pager{
  background-color: #fff;
  padding-bottom: 20px;
}

.angleChart_pcIllustratBlock > .bx-wrapper .bx-controls.bx-has-pager{
  padding-top: 40px;
}

.angleChart_spIllustratBlock{
  width: 100%;
  margin: 15px 0 50px;
  display: none;
}

.angleChart_spIllustratBlock img{
  height: auto;
  max-width: 100%;
}

.angleChart_spIllustratBlock li{
  padding: 10px 0;
  border-bottom: 15px solid #f2f2f2;
}

.angleChart_spIllustratBlock li:last-child{
  border-bottom: none;
}

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

  .angleChart_tableBlock:not(#_) {
    width: 1000px;
  }

  .angleChart_pcIllustratBlock{
    display: none;
  }


  .angleChart_spIllustratBlock{
    display: block;
  }
}