/*
/* custom.css
*/

@charset "utf-8";



/* star rating */
.star-rating {
    width: 100%;
    font-size: 1.3rem;
}

.star-rating input {
    display: none;
}

.star-rating label {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 5px 0 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-star" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>') 0 0 no-repeat;
    background-size: contain;
    cursor: pointer;
}

.star-rating label.fill{
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="yellow" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>') 0 0 no-repeat;
    background-size: contain;
}

/*------------------------------
 ▼ review
 -------------------------------*/
.ratebox {
  position: relative;
  display: inline-block;
  font-size: 3vw;
}

.ratebox:before {
  content: "★★★★★";
  color: #ccc;
}

.rate0-5:after,
.rate1:before,
.rate1:after,
.rate1-5:before,
.rate1-5:after,
.rate2:before,
.rate2:after,
.rate2-5:before,
.rate2-5:after,
.rate3:before,
.rate3:after,
.rate3-5:before,
.rate3-5:after,
.rate4:before,
.rate4:after,
.rate4-5:before,
.rate4-5:after,
.rate5:after {
  position: absolute;
  top: 0;
  left: 0;
  color: #e21a19;
  overflow: hidden;
}

.ratebox .rate0-5:after,
.ratebox .rate1-5:after,
.ratebox .rate2-5:after,
.ratebox .rate3-5:after,
.ratebox .rate4-5:after {
  width: 8px;
  content: "★";
}

.ratebox .rate1:after,
.ratebox .rate1-5:before {
  content: "★";
}

.ratebox .rate1-5:after {
  left: 1em;
}

.ratebox .rate2:after,
.ratebox .rate2-5:before {
  content: "★★";
}

.ratebox .rate2-5:after {
  left: 2em;
}

.ratebox .rate3:after,
.ratebox .rate3-5:before {
  content: "★★★";
}

.ratebox .rate3-5:after {
  left: 3em;
}

.ratebox .rate4:after,
.ratebox .rate4-5:before {
  content: "★★★★";
}

.ratebox .rate4-5:after {
  left: 4em;
}

.ratebox .rate5:after {
  content: "★★★★★";
}

/*-------------------------------
 ▼forPC
 --------------------------------*/
@media screen and (min-width: 769px) {

  /*------------------------------
 ▼ review
 -------------------------------*/
  .ratebox {
    position: relative;
    display: inline-block;
    font-size: 1.2rem;
  }

  .ratebox:before {
    content: "★★★★★";
    color: #ccc;
  }

  .rate0-5:after,
  .rate1:before,
  .rate1:after,
  .rate1-5:before,
  .rate1-5:after,
  .rate2:before,
  .rate2:after,
  .rate2-5:before,
  .rate2-5:after,
  .rate3:before,
  .rate3:after,
  .rate3-5:before,
  .rate3-5:after,
  .rate4:before,
  .rate4:after,
  .rate4-5:before,
  .rate4-5:after,
  .rate5:after {
    position: absolute;
    top: 0;
    left: 0;
    color: #e21a19;
    overflow: hidden;
  }

  .ratebox .rate0-5:after,
  .ratebox .rate1-5:after,
  .ratebox .rate2-5:after,
  .ratebox .rate3-5:after,
  .ratebox .rate4-5:after {
    width: 8px;
    content: "★";
  }

  .ratebox .rate1:after,
  .ratebox .rate1-5:before {
    content: "★";
  }

  .ratebox .rate1-5:after {
    left: 1em;
  }

  .ratebox .rate2:after,
  .ratebox .rate2-5:before {
    content: "★★";
  }

  .ratebox .rate2-5:after {
    left: 2em;
  }

  .ratebox .rate3:after,
  .ratebox .rate3-5:before {
    content: "★★★";
  }

  .ratebox .rate3-5:after {
    left: 3em;
  }

  .ratebox .rate4:after,
  .ratebox .rate4-5:before {
    content: "★★★★";
  }

  .ratebox .rate4-5:after {
    left: 4em;
  }

  .ratebox .rate5:after {
    content: "★★★★★";
  }
}