@charset "utf-8";





/* Review Styles
-------------------------------------------------------------*/

/* .rating-score */

.rating-score {
  background: url(../img/common/icon_star.png) no-repeat;
  background-size: 80px;
  width:  80px;
  height: 15px;
  line-height: 1;
  text-indent: -9999px;
  display: block;
}

.rating-score.star5 { background-position: 0     0; }
.rating-score.star4 { background-position: 0 -15px; }
.rating-score.star3 { background-position: 0 -30px; }
.rating-score.star2 { background-position: 0 -45px; }
.rating-score.star1 { background-position: 0 -60px; }

.AggregateRating {
  line-height: 15px;
  margin-bottom: 1em;
  display: block; 
  overflow: hidden;
}

.AggregateRating .rating-score { float: left; }

.rating-score + .rating-count {
  font-size: 14px;
  line-height: 18px;
  margin-left: 4px;
}

#evaluation .average div {
  font-size: 1.66em;
  color: #1a1a1a;
  margin-bottom: 6px;
}

#evaluation { margin-bottom: 24px; overflow: hidden; }

#evaluation .average { float: left; width: 90px; }

#evaluation .histogram {
  float: right;
  width: 70%;
  margin-bottom: -1em;
  font-size: 13px;
}

#evaluation .histogram td {
  float: left;
  width: 70px;
  margin-bottom: 1em;
  text-align: right;
}

#evaluation .histogram .graph {
  position: relative; /* IE is dumb */
  width: 140px;
  margin-left: 10px;
}

#evaluation .histogram .graph .bar {
  display: block;
  position: relative;
  background: #ffd004;
  height: 10px;
}

#evaluation .histogram .graph .bar span { position: absolute; left: 1em; }



/* .review-comments */

.review-comments {
  font-size: 0.94em;
  margin-bottom: 1.25em;
  position: relative;
}
  .review-comments:before {
    background: url(../img/common/icon_user.gif) no-repeat;
    background-size: 180px;
    width:  30px;
    height: 37px;
    display: block;
    content: "";
    position: absolute;
      top: 10px;
  }

#postReview .review-comments { font-size: 14px; }



/* male face */

.review-comments.face1.male1:before,
.review-comments.face1.male2:before   { background-position:      0      0; }
.review-comments.face2.male1:before,
.review-comments.face2.male2:before,
.review-comments.face3.male1:before,
.review-comments.face3.male2:before   { background-position:  -30px      0; }
.review-comments.face4.male1:before,
.review-comments.face4.male2:before,
.review-comments.face5.male1:before,
.review-comments.face5.male2:before   { background-position:  -60px      0; }

.review-comments.face1.male3:before   { background-position:      0  -37px; }
.review-comments.face2.male3:before,
.review-comments.face3.male3:before   { background-position:  -30px  -37px; }
.review-comments.face4.male3:before,
.review-comments.face5.male3:before   { background-position:  -60px  -37px; }

.review-comments.face1.male4:before   { background-position:       0 -74px; }
.review-comments.face2.male4:before,
.review-comments.face3.male4:before   { background-position:   -30px -74px; }
.review-comments.face4.male4:before,
.review-comments.face5.male4:before   { background-position:   -60px -74px; }

.review-comments.face1.male5:before   { background-position:      0 -111px; }
.review-comments.face2.male5:before,
.review-comments.face3.male5:before   { background-position:  -30px -111px; }
.review-comments.face4.male5:before,
.review-comments.face5.male5:before   { background-position:  -60px -111px; }

.review-comments.face1.male6:before,
.review-comments.face1.male7:before,
.review-comments.face1.male8:before   { background-position:      0 -148px; }
.review-comments.face2.male6:before,
.review-comments.face2.male7:before,
.review-comments.face2.male8:before,
.review-comments.face3.male6:before,
.review-comments.face3.male7:before,
.review-comments.face3.male8:before   { background-position:  -30px -148px; }
.review-comments.face4.male6:before,
.review-comments.face4.male7:before,
.review-comments.face4.male8:before,
.review-comments.face5.male6:before,
.review-comments.face5.male7:before,
.review-comments.face5.male8:before   { background-position:  -60px -148px; }



/* female face */

.review-comments.face1.female1:before,
.review-comments.face1.female2:before { background-position:  -90px      0; }
.review-comments.face2.female1:before,
.review-comments.face2.female2:before,
.review-comments.face3.female1:before,
.review-comments.face3.female2:before { background-position: -120px      0; }
.review-comments.face4.female1:before,
.review-comments.face4.female2:before,
.review-comments.face5.female1:before,
.review-comments.face5.female2:before { background-position: -150px      0; }

.review-comments.face1.female3:before { background-position:  -90px  -37px; }
.review-comments.face2.female3:before,
.review-comments.face3.female3:before { background-position: -120px  -37px; }
.review-comments.face4.female3:before,
.review-comments.face5.female3:before { background-position: -150px  -37px; }

.review-comments.face1.female4:before { background-position:  -90px  -74px; }
.review-comments.face2.female4:before,
.review-comments.face3.female4:before { background-position: -120px  -74px; }
.review-comments.face4.female4:before,
.review-comments.face5.female4:before { background-position: -150px  -74px; }

.review-comments.face1.female5:before { background-position:  -90px -111px; }
.review-comments.face2.female5:before,
.review-comments.face3.female5:before { background-position: -120px -111px; }
.review-comments.face4.female5:before,
.review-comments.face5.female5:before { background-position: -150px -111px; }

.review-comments.face1.female6:before,
.review-comments.face1.female7:before,
.review-comments.face1.female8:before { background-position:  -90px -148px; }
.review-comments.face2.female6:before,
.review-comments.face2.female7:before,
.review-comments.face2.female8:before,
.review-comments.face3.female6:before,
.review-comments.face3.female7:before,
.review-comments.face3.female8:before { background-position: -120px -148px; }
.review-comments.face4.female6:before,
.review-comments.face4.female7:before,
.review-comments.face4.female8:before,
.review-comments.face5.female6:before,
.review-comments.face5.female7:before,
.review-comments.face5.female8:before { background-position: -150px -148px; }

.review-comments .rating-score,
.review-comments .review-title,
.review-comments p,
.review-comments figure { margin-left: 37px; }

.review-comments .rating-score { margin-bottom: 0.5em; }

.review-comments .review-title { font-weight: bold; margin-bottom: 0.5em; display: inline-block; }

.review-comments p { line-height: 1.47; }

.review-comments figure { margin-top: 0.5em; }

.review-comments img {
  max-width: 250px;
  max-height: 250px;
  -webkit-border-radius: 0.4em;
     -moz-border-radius: 0.4em;
          border-radius: 0.4em;
}



/* #commentBox */

#commentBox {
  background: #f7f7f7;
  padding: 15px;
  margin-bottom: 1.88em;
  -webkit-border-radius: 0.4em;
     -moz-border-radius: 0.4em;
          border-radius: 0.4em;
}

#commentBox .button {
  width: 150px;
  line-height: 30px;
  margin: 5px auto 15px;
}

#commentBox small { font-size: 12px; color: #666; }





/* Post Review Styles
-------------------------------------------------------------*/

/* #postReview */

#postReview .product-view {
  background: url(../img/common/bg_postReview.gif) no-repeat center 0;
  background-size: 150px;
  padding-top:  110px;
}

#postReview .review-star .star-rating {
  background: url(../img/common/form_star.gif) no-repeat;
  width: 208px;
  height: 38px;
  vertical-align: middle;
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  position: relative;
}

#postReview .review-star .star-rating span {
  background: url(../img/common/form_star.gif) no-repeat 0 -38px;
  width:   20%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  position: absolute;
    top: 0;
   left: 0;
}

#postReview .review-star .star-rating input {
  width: 20%;
  height: 100%;
  padding: 0;
  margin:  0;
  border: none;
  display: inline-block;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
}

#postReview .review-star .star-rating input:hover + span,
#postReview .review-star .star-rating input:checked + span { opacity: 1; }

#postReview .review-star .star-rating span ~ span                      { width:  40%; }
#postReview .review-star .star-rating span ~ span ~ span               { width:  60%; }
#postReview .review-star .star-rating span ~ span ~ span ~ span        { width:  80%; }
#postReview .review-star .star-rating span ~ span ~ span ~ span ~ span { width: 100%; }

#postReview .review-title input[type=text],
#postReview .review-text textarea { width: 100%; display: block; }

#entrySheet .review-text textarea { height: 150px; font-size: 16px; }

#postReview .review-text small {
  font-size: 0.88em;
  line-height: 1.6;
  margin-top: 1em;
  display: inline-block;
}

#postReview .review-image input {
  border: none;
  padding: 0;
  font-size: 0.88em;
  overflow: hidden;
}

#postReview em.error { margin-top: 0.88em; display: block; }

#postReview .dotted-line-frame b { margin-bottom: 0.88em; display: inline-block; }

#postReview .dotted-line-frame li {
  list-style: disc;
  margin: 0 0 8px 20px;
  font-size: 12px;
  line-height: 1.3;
}
  #postReview .dotted-line-frame li:last-child { margin-bottom: 0; }



/* review confirm */

#postReview .review-preview { border-bottom: 1px solid #a1a1a1; margin-bottom: 1.25em; }

#postReview .button-unit span {
  margin-bottom: 1em;
  font-weight: bold;
  text-align: center;
  display: block;
}

#postReview .button-unit button { margin-bottom: 1em; }

#postReview .button-unit .button {
  line-height: 46px;
}



/* review complete */

#compReview #content h1 {
  background: url(../img/common/illust_review_comp.gif) no-repeat center top;
  background-size: 64px;
  padding-top: 60px;
  font-size: 18px;
  text-align: center;
}

#compReview #content p {
  font-size: 14px;
  margin-bottom: 1.88em;
  line-height: 1.8;
}

#compReview .button-unit .button {  line-height: 40px; }

#compReview .button-unit .button:first-child { margin-bottom: 1em; }