/* rating
****************************************/
.rating {
  background: #EDE9E4;
  display: flex;
  justify-content: space-between;
  padding: 16px 12px;
  width: 630px;
  position: relative;
}

.rating__info {
  width: 210px;
  margin-right: 10px;
}

.rating__title {
  font-size: 21px;
  font-weight: bold;
}

.rating__remarks {
  font-size: 11px;
  color: #787878;
  margin-top: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #C4C4C4;
}

.rating__score {
  margin-top: 8px;
}

.rating__score th {
  vertical-align: middle;
}

.rating__score-item td {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.rating__score th,
.rating__score td {
  padding: 6px 0 3px;
}

.rating__score-title {
  font-size: 12px;
  font-weight: bold;
}

.rating__score-out {
  font-size: 12px;
  color: #6B6B6B;
}

.rating__point {
  font-size: 22px;
  color: #F9A400;
  font-weight: bold;
  line-height: 1;
  margin-left: 4px;
  display: flex;
  align-items: flex-end;
}

.rating__point-small {
  font-size: 12px;
}

.rating-graph-hide {
  position: absolute;
  top: 50%;
  left: 70.7%;
  transform: translate(-50%, -50%);
  text-align: center;
  border: 3px solid #000;
  background-color: #fff;
  z-index: 10;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 3px;
}

.rating--sidebar {
  width: 100%;
  padding: 12px 0;
  background: #fff;
  border: 1px solid #000;
  justify-content: center;
}

.rating--sidebar .rating-graph-hide {
  left: 50%;
  width: 80%;
}

.rating__hide-bg {
  width: 100%;
  text-align: center;
}


/* SP *********************************/
@media screen and (max-width: 599px) {
  .rating {
    padding: 12px;
    flex-direction: column;
    width: auto;
    align-items: center;
  }

  .rating__info {
    width: 100%;
    margin-right: 0;
  }

  .rating-graph-hide {
    top: 72%;
    left: 50%;
  }

}