@charset "UTF-8";
/*
date : 2012-2

+ Text
+ List
+ Anchor
+ Table
+ Form
+ Others
*/
/*----------------------------------------
  font-size
------------------------------------------
Font-size list (base: 13px)
 62% =  8px
 70% =  9px
 77% = 10px
 85% = 11px        162% = 21px        239% = 31px
 93% = 12px        170% = 22px        247% = 32px
100% = 13px        177% = 23px        254% = 33px
108% = 14px        185% = 24px        262% = 34px
116% = 15px        193% = 25px        270% = 35px
124% = 16px        200% = 26px        277% = 36px
131% = 17px        208% = 27px        285% = 37px
139% = 18px        216% = 28px        293% = 38px
147% = 19px        224% = 29px        300% = 39px
154% = 20px        231% = 30px        308% = 40px
*/
/* Don't Edit */
body {
  font: 13px/1.231 arial,helvetica,clean,sans-serif;
  *font-size: small;
  *font: x-small;
}

table {
  font-size: inherit;
  font: 100%;
}

pre, code, kbd, samp, tt {
  font-family: monospace;
  *font-size: 108%;
  line-height: 100%;
}

html > body {
  font-size/*\**/: small\9;
}

* {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  font-family:"Meiryo","Meiryo UI","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック";
}

body {
  line-height: 1.6;
  text-align: left;
  background-color: white;
  color: #876c4a;
  -webkit-text-size-adjust: 100%;
}

/*----------------------------------------
  Text
----------------------------------------*/
p,
pre,
address {
  color: #876c4a;
  font-size: 100%;
}

pre {
  margin: 1.5em 25px;
  padding: 1em;
  overflow: scroll;
  font-family: "ＭＳ-Ｐ ゴシック" , Osaka, Arial, Helvetica, sans-serif;
  line-height: 1.9;
}

blockquote {
  margin: 1.5em 1px;
  border: 5px solid #9f998f;
  color: #77471c;
  background-color: #f5f5f5;
  background-repeat: repeat-x;
  background-position: left bottom;
}

blockquote[title]::before {
  padding: 0.2em 10px 0.4em 10px;
  content: attr(title);
  display: block;
  color: #fff;
  background-color: #9f998f;
  font-weight: bold;
}

blockquote[cite]::after {
  margin: 0.5em 10px;
  content: attr(cite);
  display: block;
  text-align: right;
  font-size: 85%;
}

blockquote * {
  color: #333 !important;
}

em {
  color: #000;
}

pre em {
  font-weight: bold;
  background-image: none;
}

strong {
  font-weight: bold;
}

q {
  text-decoration: underline;
}

cite {
  display: block;
  text-align: right;
}

kbd {
  background-color: #f5f5f5;
  font-family: "Osaka|", monospace;
  text-transform: uppercase;
  padding: 0 0.4em;
  border: 1px solid #6a8eaa;
}

del {
  text-decoration: line-through;
}

ins {
  border-top: 10px solid #3cadd6;
  border-bottom: 10px solid #3cadd6;
  border: 7px solid #3cadd6;
  margin: 2em 1px;
  padding: 1px 0;
  display: block;
  text-decoration: none;
}

ins * {
  color: #666 !important;
}

abbr,
acronym {
  border-bottom: 1px dotted #aaa;
  cursor: help;
}

/*----------------------------------------
  List
----------------------------------------*/
ol,
dl {
  color: #333;
}

li,
dt,
dd {
  font-size: 100%;
  list-style-type: none;
  list-style-position: outside;
}

ol li {
  list-style: decimal;
}

/* Opera Hack */
html:first-child li,
html:first-child dt,
html:first-child dd {
  font-size: 1em;
}

dt {
  font-weight: normal;
}

li li,
li p,
li pre,
li dt,
li dd,
dd li,
dd p,
dd pre,
dd dt,
dd dd {
  font-size: 100% !important;
}

/*----------------------------------------
  Anchor
----------------------------------------*/
a {
  color: #de625c;
  text-decoration: none;
}
a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}
a:visited {
  color: #de625c;
}
a:active {
  color: #de625c;
}

a span {
  display: none;
}

/*----------------------------------------
  Table
----------------------------------------*/
table {
  margin: 1em 20px;
  border: 1px solid #aaa;
  background-color: #eee;
}

caption {
  display: none;
}

th,
td {
  padding: 0.1em 5px;
  font-size: 100%;
}

th {
  color: #ffffff;
  background-color: #ccc;
}

td {
  border: 1px solid #ddd;
  background-color: #ffffff;
}

/*----------------------------------------
  Form
----------------------------------------*/
form {
  font-family: Arial, Helvetica, sans-serif;
}

fieldset,
legend {
  border: none;
}

legend {
  display: none;
}

input,
textarea {
  padding: 0.2em;
  border: 1px solid #d1d1d1;
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

input {
  line-height: 1.2;
}

input:hover,
textarea:hover {
  border: 1px solid #a5d2da;
}

input:focus,
textarea:focus {
  border: 1px solid #069;
  background-color: #fff;
}

input.button {
  padding: 0;
  border: none;
  background-image: none;
  vertical-align: top;
}

/*----------------------------------------
  Others
----------------------------------------*/
img {
  border: none;
  vertical-align: bottom;
}

hr {
  border: none;
  border-top: 1px dotted #ccc;
}

#wrapper {
  padding: 10px;
  background: white;
  text-align: left;
}

#wrapper2 {
  text-align: left;
  padding-top: 10px;
}

@media only screen and (max-width:450px) {
  #wrapper2 {
    padding-top: 0px;
  }
}

div.content {
  width: 100%;
  position: relative;
  clear: both;
  text-align: left;
}
div.content2 {
  position: relative;
  clear: both;
  text-align: left;
  margin: 0 auto 10px;
}

/*----------------------------------------
  review
----------------------------------------*/
.review {
  margin: 0;
}
.review2 {
  margin-right: 5px;
}
.review li .box {
  position: relative;
  padding: 7px 10px 6px 10px;
  margin-top: 2px;
  background-color: #faf6f1;
}

.review li .box:hover {
  background-color: #fffce5;
}

.review li .box div.left{
  position: relative;
  width: 60px;
}

.review li .box img {
  float: left;
  width: 28px;
  height: 35px;
  margin-right: 10px;
}

.review li .box img.pickup {
  width: 29px;
  height: 13px;
}
.review li .box div.right {
  position: relative;
  padding-left: 38px;
}
.review li .box div.right p.user a {
  font-weight: bold;
  color: #59483e;
}
.review li .box div.right p.rate {
  position: absolute;
  top: -4px;
  right: 8px;
  font-weight: bold;
  font-size: 108% !important;
  font-family: arial;
  color: #de625c;
}
.review2 li .box p.rate{
  position: absolute;
  right: 15px;
  /*display:inline-block;*/
  vertical-align: top;
  font-weight: bold;
  font-size: 108% !important;
  font-family: arial;
  padding: 0 5px;
  color: #de625c;
  line-height: 17px;
}
@media only screen and (max-width: 400px) {
  .review2 li .box p.rate {
    position: relative;
    vertical-align: middle;
    right: 0px;
    line-height: 10px;
  }
}
@media only screen and (max-width: 500px) {
  .review li .box div.right p.rate {
    position: relative;
    top: 0px;
    right: -5px;
  }
}

.review li .box div.right p.text {
  padding-top: 2px;
  font-size: 85% !important;
  line-height: 1.4;
  color: #876c4a;
}
.review li .box div.right p.text span {
  font-size: 120% !important;
  font-weight: normal !important;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 400px) {
  .review li .box div.right p.text {
    padding-top: 0px;
    clear: both;
  }
}
.review li .box div.right p.text i {
  color: #d7615f;
}
.review li .box a.link,.review2 li .box a.link,.review2 li.picup div a.link {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  text-align: left;
  text-indent: -999px;
  background: #fff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  z-index: 10;
}

/*----------------------------------------
  new_review
----------------------------------------*/
.review2 li .box:hover {
  background-color: #fffce5;
}
.review2 li .box div.right {
  position: relative;
  margin-bottom: 10px;
}
@media only screen and (max-width: 300px) {
  .review2 li .box div.right {
    width: 90%;
  }
}
.review2 li .box {
  position: relative;
  padding: 7px 10px 10px 10px;
  margin-top: 2px;
  background-color: #faf6f1;
}

/*----------------------------------------
  rate_hdr
----------------------------------------*/
.rate_hdr {
  position: relative;
  margin-bottom: 10px;
  margin-left: 5px;
}
@media only screen and (max-width: 450px){
  .rate_hdr {
  margin-bottom: 0px;
  margin-top: 10px;}
}

.rate_hdr p.logo {
  position: absolute;
  top: 0px;
  right: 5px;
  display: block;
  width: 162px;
  height: 35px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 399px){
  .rate_hdr p.logo {
    position: relative;
    padding-bottom: 5px;
  }
}
@media only screen and (max-width: 399px){
  .rate_hdr p.logo {
    position: relative;
    padding-bottom: 5px;
  }
}

.rate_hdr p.logo a {
  display: block;
  width: 162px;
  height: 35px;
  background: transparent url("../img/rate/logo.png") 0 0 no-repeat;
  behavior: url(PIE.htc);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) only screen and (min-resolution: 192dpi) {
  .rate_hdr p.logo a {
    background-image: url("../img/rate/logo@2x.png");
    -webkit-background-size: 162px 35px;
    -moz-background-size: 162px 35px;
    -o-background-size: 162px 35px;
    background-size: 162px 35px;
  }
}


.rate_hdr h1 {
  position: relative;
  display: block;
  width: 86px;
  height: 19px;
  margin-top: 2px;
  background: transparent url("../img/rate/h1.png") 0 0 no-repeat;
  background: url(../img/rate/h1.png) no-repeat;
  behavior: url(PIE.htc);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
  .rate_hdr h1 {
    background-image: url("../img/rate/h1@2x.png");
    -webkit-background-size: 86px 19px;
    -moz-background-size: 86px 19px;
    -o-background-size: 86px 19px;
    background-size: 86px 19px;
  }
}
@media only screen and (max-width: 400px){
  .rate_hdr p.logo{
  margin: 5px 0;
  }
}

.rate_hdr h1 span {
  display: none;
}

.rate_hdr p.number a {
  position: absolute;
  top: 2px;
  left: 95px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background: #f39a96;
  padding: 3px 7px 2px 7px;
  font-size: 77%;
  color: #fff;
}
@media only screen and (max-width: 399px) {
  .rate_hdr p.number a {
    top: 45px;
    left: 95px;
  }
}

.rate_hdr p.number2 a {
  position: absolute;
  top: 0px;
  left: 135px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background: #f39a96;
  padding: 3px 7px 2px 7px;
  font-size: 77%;
  color: #fff;
}
@media only screen and (max-width: 400px) {
  .rate_hdr p.number2 a {
    top: 2px;
    left: 135px;
  }
}
.rate_hdr p.rate {
  padding-left: 5px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 131% !important;
  font-family: arial;
  color: #de625c;
  vertical-align: top;
}
@media only screen and (max-width: 500px) {
  .rate_hdr p.rate {
    margin-bottom: 0px;
  }
}
@media only screen and (max-width: 400px) {
  .rate_hdr p.rate {
    margin-top: 5px;
  }
}
.evaluation{
  position: relative;
  margin-left: 160px;
  width: 200px;
}

@media only screen and (max-width: 499px) {
  .evaluation{
  position: relative;
  margin-left: 0;
  width: 90%;}
}

/*----------------------------------------
  bottom
----------------------------------------*/
.bottombox{
  position: relative;
}

.rate_btn_ri {
  position:absolute;
  bottom: 0;
  right: 5px;
  float: right;
  display: block;
}
@media only screen and (max-width: 400px) {
.rate_btn_ri {
    position:absolute;
    left: 0;
    top: 45px;
    float: none;}
}

.from {
  line-height: 1.1;
  padding: 10px 10px 0px 0px;
  font-size: 77% !important;
}
@media only screen and (max-width: 400px) {
  .from {
  padding: 15px 0px 5px 0px;
  }
}
 .bottombox .rate_btn_l_ri p.from a {
  text-decoration: underline;
}

.bottombox .rate_btn {
  /*display: inline-block;*/
  position: relative;
  margin: 0 5px;
  width: 50%;
}
@media only screen and (max-width: 600px) {
  .bottombox .rate_btn {
  width: 40%;
  margin: 0;
  word-wrap: break-word;
  }
}
@media only screen and (max-width: 500px) {
  .bottombox .rate_btn {
  width: 90%;
  word-wrap: break-word;
  }
}
@media only screen and (max-width: 300px) {
  .bottombox .rate_btn {
  width: 60%;
  word-wrap: break-word;
  }
}

.bottombox .rate_btn a span {
  display: none;
}
.bottombox .rate_btn p.from {
  width: 60%;
  line-height: 1.1;
  padding-top: 3px;
  font-size: 77% !important;
}
.bottombox .rate_btn p.from a {
  text-decoration: underline;
}
.bottombox .rate_btn p.more {
  float: left;
  text-indent: 25px;
  background: transparent url("../img/rate/icn_more.png") 0 0 no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
  .bottombox .rate_btn p.more {
    background-image: url("../img/rate/icn_more@2x.png");
    -webkit-background-size: 22px 22px;
    -moz-background-size: 22px 22px;
    -o-background-size: 22px 22px;
    background-size: 22px 22px;
  }
}

.bottombox .rate_btn p.new a {
  display: block;
  width: 135px;
  height: 38px;
  background: transparent url("../img/rate/btn_new.png") 0 0 no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
 .bottombox .rate_btn p.new a {
    background-image: url("../img/rate/btn_new@2x.png");
    -webkit-background-size: 135px 38px;
    -moz-background-size: 135px 38px;
    -o-background-size: 135px 38px;
    background-size: 135px 38px;
  }
}
.bottombox .rate_btn p.new a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}


.bottombox .rate_btn p.new2 a {
  display: block;
  width: 240px;
  height: 38px;
  background: transparent url("../img/rate/btn_review.png") 0 0 no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
 .bottombox .rate_btn p.new2 a {
    margin: 0 auto;
    background-image: url("../img/rate/btn_review@2x.png");
    -webkit-background-size: 240px 38px;
    -moz-background-size: 240px 38px;
    -o-background-size: 240px 38px;
    background-size: 240px 38px;
  }
}
@media only screen and (max-width: 500px) {
  .bottombox .rate_btn p.new2 a {
     margin: 0 auto;
     background-image: url("../img/rate/btn_review@2x.png");
     -webkit-background-size: 240px 38px;
     -moz-background-size: 240px 38px;
     -o-background-size: 240px 38px;
     background-size: 240px 38px;
     margin: 0 auto;}
 }
 .rate_btn a {
  font-size: 16px;
  word-wrap: break-word;
  width: 90%;
 }

.bottombox p.btm_logo {
  margin-top: 5px;
  display: on;
}
@media only screen and (min-width: 340px) {
  .bottombox p.btm_logo {
    display: none;}
}

.bottombox p.btm_logo a {
  display: block;
  width: 162px;
  height: 35px;
  background: transparent url("../img/rate/logo.png") 0 0 no-repeat;
  behavior: url(PIE.htc);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
  .bottombox p.btm_logo a {
    background-image: url("../img/rate/logo@2x.png");
    -webkit-background-size: 162px 35px;
    -moz-background-size: 162px 35px;
    -o-background-size: 162px 35px;
    background-size: 162px 35px;}
}

/*----------------------------------------
  review_rate
----------------------------------------*/

.salondetail .btn_more a {
  display: block;
  text-align: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #FFFFFF;
  text-decoration: none;
  background: #83756e; }
.salondetail .btn_more a:hover {
    background: #af9b91; }
.salondetail .reply_box {
  position: relative;
  padding:10px;
  background: #eeeae2;
  margin-right: 5px;}
.salondetail .reply_list li.re_salon {
  position: relative;}
.salondetail .reply_list li.re_salon:nth-child(even) {
  margin-top: 10px;
  position: relative;
}
.salondetail .reply_list li.re_salon img {
  width: 32px;
  height: 30px; }

.salondetail .reply_list li.re_salon .data {
  position: absolute;
  top: 10px;
  right: -15px;
  width: 130px;}
  @media only screen and (max-width: 500px){
    .salondetail .reply_list li.re_salon .data {
      top: 8px;}
  }
  @media only screen and (max-width: 400px){
    .salondetail .reply_list li.re_salon .data {
      top: 5px;
      right: 0%;
      width: 90px;}
  }
  @media only screen and (max-width: 300px){
    .salondetail .reply_list li.re_salon .data {
      width: 60px;}
  }

.salondetail .reply_list li.re_salon .comment {
  position: relative;
  float: left;
  background: #fff;
  width : 87% ; /* IE8以下とAndroid4.3以下用フォールバック */
  width: calc(100% - 160px) ;
  font-size: 12px !important;
  padding:  10px 10px;
  overflow: hidden;
  min-height: 38px;
  }
  @media only screen and (max-width: 1190px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 85% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 1110px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 85% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 1040px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 84% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 980px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 83% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 980px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 83% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 930px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 82% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 870px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 81% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 840px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 80% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}

  @media only screen and (max-width: 770px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 78% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 740px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 76% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 710px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 77% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 690px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 76% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 670px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 75% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 650px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 74% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}

  @media only screen and (max-width: 630px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 73% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 610px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 72% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 590px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 71% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 570px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 70% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 550px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 69% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 530px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 68% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 520px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 67% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 510px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 66% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 480px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 63% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 470px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 63% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 460px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 62% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 450px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 440px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 60% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 420px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 59% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 400px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 71% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
      min-height: 50px;
  }}
  @media only screen and (max-width: 380px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
    @media only screen and (max-width: 350px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 68% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 330px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 65% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 320px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 62% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 310px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
      @media only screen and (max-width: 300px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 290px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 57% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 280px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 51% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 270px) {
    .salondetail .reply_list li.re_salon .comment {
      width : 49% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}


  .comment p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 37px;
  }
@media only screen and (max-width: 400px) {
  .comment p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: 56px;
  }
}
.arrow_right{
  position: absolute;
  right: 128px;
  top: 35%;
  background-image: url('../img/widget/arrow_left@2X.png');
  background-repeat: no-repeat;
  background-size: 14px 15px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
@media only screen and (max-width: 500px) {
  .arrow_right{
  right: 127px;
  top: 20px;}
}
@media only screen and (max-width: 400px) {
  .arrow_right{
  right: 73px;
  top: 30px;}
}

.arrow_left{
  position: absolute;
  left: 127px;
  top: 20px;
  background-image: url('../img/widget/arrow@2X.png');
  background-repeat: no-repeat;
  background-size: 14px 15px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: #eeeae2;

}
@media only screen and (max-width: 400px) {
  .arrow_left{
  left: 72px;
  top: 30px;
  }
}
@media only screen and (max-width: 400px) {
  li.re_user .arrow_left{
  left: 72px;
  top: 30px;
  }
}

 .salondetail .reply_list li.re_salon .comment:after,.salondetail .reply_list li.re_salon .comment:before {
  position: absolute;
  left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	pointer-events: none;
  }
  /* 右三角半分 */
 .salondetail .reply_list li.re_salon .comment-right:after {
    border-color: rgba(255, 255, 255, 0);
	  border-left-color: #fff;
	  border-width: 10px;
	  margin-top: -10px;
  }
  @media only screen and (max-width: 400px) {
    .salondetail .reply_list li.re_salon .comment:before {
      position: absolute;
      left: 100%;
      top: 35%;}
   }
   @media only screen and (max-width: 400px) {
      .salondetail .reply_list li.re_salon .comment:after {
      	position: absolute;
    	  left: 100%;
        top: 35%;
      }
   }

  @media only screen  and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
    .salondetail .reply_list li.re_salon .comment div.arrow {
      background-image: url("../img/cmn/reply_arrow_right_on@2x.png");
      -webkit-background-size: 24px 20px;
      -moz-background-size: 24px 20px;
      -o-background-size: 24px 20px;
      background-size: 24px 20px; } }
  .salondetail .reply_list li.re_salon .comment ul.inlinebtn {
    position: absolute;
    top: 17px;
    right: 10px; }
    .salondetail .reply_list li.re_salon .comment ul.inlinebtn li a.btn_icn {
      padding: 0px;
      margin: 0px;
      width: 50px;
      text-align: right; }
  .salondetail .reply_list li.re_salon .comment p {
    font-size: 12px !important;
    line-height: 150%; }

.salondetail .reply_list li.re_user {
	position: relative;
  margin-top: 10px;
}
@media only screen and (max-width:400px) {
  .salondetail .reply_list li.re_user {
  	position: relative;
    margin-top: 20px;
  }
}
@media only screen and (max-width:400px) {
  .salondetail .reply_list li.re_user:first-child {
  	position: relative;
    margin-top: 20px;
  }
}
.salondetail .reply_list li.re_user img{
  position: absolute;
  top: 20%;
  left: 85px;
  width: 28px;
  height: 35px; }
@media only screen and (max-width: 600px) {
  .salondetail .reply_list li.re_user img{
    position: absolute;
    top: 20%;
    left: 90px;
    width: 28px;
    height: 35px; }
}
@media only screen and (max-width: 400px) {
  .salondetail .reply_list li.re_user img{
    position: relative;
    left: 10px; }
}
@media only screen and (max-width: 400px) {
  .salondetail .reply_list li.re_user img{
    position: relative;
    left: 18px; }
}


.review2 .data{
  float: left;
}
@media only screen and (max-width: 400px) {
.review2 .data {
    height: 0px;
    margin: auto;}
}

.review2 .data img{
  position: absolute;
  top: 12px;
  left: 85px;
}

@media only screen and (max-width: 500px) {
  .review2 .data img{
    top: 10px;}
}
@media only screen and (max-width: 400px) {
  .review2 .data img{
    top: 10px;
    left: 5%;}
}
@media only screen and (max-width: 300px) {
  .review2 .data img{
    left: 20px;}
}
li .data p.left2 {
    position: absolute;
    left: 5px;
	  top: 25px;
    float: left;
    color: #d7615f;
    font-size: 84% !important;
}
@media only screen and (max-width: 500px) {
  li .data p.left2 {
      top: 25px;
      float: left;}
}
@media only screen and (max-width: 400px) {
  li .data p.left2 {
    /*position: relative;*/
  	top: 50px;}
}
@media only screen and (max-width: 400px) {
  li .data p.left2 {
    left: 5px;
  	top: 55px;}
}
@media only screen and (max-width: 350px) {
  li .data p.left2 {
  	left:0px}
}
@media only screen and (max-width: 300px) {
  li .data p.left2 {
  	  left: 5px;}
}

@media only screen and (max-width: 400px) {
  .salondetail .reply_list li.re_user .date img {
    position: absolute;
    top: 0;
    left: 20%;
    float: left;
    width: 70px;
    height: 40px;}
}


  .salondetail .reply_list li.re_user .comment:after,.salondetail .reply_list li.re_user .comment:before,.review2 .comment:before,.review2 .comment:after {
    right: 100%;
	  top: 50%;
	  border: solid transparent;
	  content: " ";
	  height: 0;
	  width: 0;
	  position: absolute;
	  pointer-events: none;
  }
   /*右三角半分 */
  .salondetail .reply_list li.re_user .comment-left:after,.review2 .comment-left:after {
    position: absolute;
    top: 50%;
    border-color: rgba(255, 255, 255, 0);
	  border-right-color: #fff;
	  border-width: 10px;
	  margin-top: -10px;
  }
   @media only screen and (max-width: 400px) {
      .salondetail .reply_list li.re_user .comment-left:after,.review2 .comment-left:after {
        top: 20px;}
   }

  .salondetail .reply_list li.re_user .comment:before,.review2 .comment:before {
    position: absolute;
    top: 50%;
    border-color: rgba(188, 184, 178, 0);
	  border-width: 13px;
	  margin-top: -13px;
  }
.salondetail .reply_list li.re_user .comment {
  position: relative;
  float: right;
  background-color: #fff;
  min-height: 38px;
  width : 75% ; /* IE8以下とAndroid4.3以下用フォールバック */
  width:  calc(100% - 160px);
  font-size: 12px !important;
  padding: 10px 10px; }

  .review2 .comment {
    position: relative;
    float: right;
    min-height: 38px;
    background-color: #fff;
    width : 87% ; /* IE8以下とAndroid4.3以下用フォールバック */
    width:  calc(100% - 160px);
    font-size: 12px !important;
    padding: 10px 10px; }

  @media only screen and (max-width: 1190px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 85% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 1110px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 85% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 1040px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 84% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 980px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 83% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 930px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 82% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 870px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 81% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 840px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 80% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}

  @media only screen and (max-width: 770px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 78% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 740px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 78% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 710px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 77% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 690px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 76% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 670px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 75% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 650px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 74% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}

  @media only screen and (max-width: 630px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 73% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 610px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 72% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 590px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 71% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 570px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 70% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 550px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 69% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 530px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 68% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 520px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 67% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 510px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 66% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
        /*@media only screen and (max-width: 500px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 65% ; /* IE8以下とAndroid4.3以下用フォールバック
      width: calc(100% - 160px) ;
  }}*/
  @media only screen and (max-width: 480px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 63% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 470px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 63% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 460px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 62% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 450px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}

  @media only screen and (max-width: 440px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 60% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 420px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 59% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 380px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 350px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 68% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 330px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 65% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 320px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 62% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 310px) {
    .salondetail .reply_list li.re_user .comment,.review2 .comment {
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 160px) ;
  }}
  @media only screen and (max-width: 300px) {
    .salondetail .reply_list li.re_user .comment {
      min-height: 50px;
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 290px) {
    .salondetail .reply_list li.re_user .comment {
      min-height: 57px;
      width : 57% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 280px) {
    .salondetail .reply_list li.re_user .comment {
      min-height: 50px;
      width : 51% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 270px) {
    .salondetail .reply_list li.re_user .comment {
      min-height: 50px;
      width : 49% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}


   @media only screen and (max-width: 400px) {
  .review2 .comment {
    float: right;
    background-color: #fff;
    min-height: 50px;
    max-height: 150px;
    width : 71% ; /* IE8以下とAndroid4.3以下用フォールバック */
    width: calc(100% - 105px);
    font-size: 12px !important;
    padding: 10px 10px; }}
    @media only screen and (max-width: 400px) {
   .salondetail .reply_list li.re_user .comment {
     float: right;
     background-color: #fff;
     min-height: 50px;
     max-height: 150px;
     width : 71% ; /* IE8以下とAndroid4.3以下用フォールバック */
     width: calc(100% - 105px);
     font-size: 12px !important;
     padding: 10px 10px; }}

      @media only screen and (max-width: 380px) {
    .review2 .comment {
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
    @media only screen and (max-width: 350px) {
    .review2 .comment {
      width : 68% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
      @media only screen and (max-width: 330px) {
    .review2 .comment {
      width : 65% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 320px) {
    .review2 .comment {
      width : 62% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 310px) {
    .review2 .comment {
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 300px) {
    .review2 .comment {
      width : 61% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 290px) {
    .review2 .comment {
      width : 57% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 280px) {
    .review2 .comment {
      width : 51% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}
  @media only screen and (max-width: 270px) {
    .review2 .comment {
      width : 49% ; /* IE8以下とAndroid4.3以下用フォールバック */
      width: calc(100% - 105px);
  }}



  /*.salondetail .reply_list li.re_user .comment ul.inlinebtn {
    position: absolute;
    top: 17px;
    right: 10px; }
    .salondetail .reply_list li.re_user .comment ul.inlinebtn li a.btn_icn {
      padding: 0px;
      margin: 0px;
      width: 50px;
      text-align: right; }*/

.salondetail .comment_post {
  margin-top: 0px; }
  .salondetail .comment_post p.user {
    margin-bottom: 20px; }
 .salondetail  .comment_post .btn_pnk {
    width: 60px; }

.salondetail .notice, .usermypage .notice {
  text-align: center;
  padding-top: 35px;
  padding-bottom: 35px; }
 .salondetail .notice p, .usermypage .notice p {
    font-size: 16px;
    font-weight: bold;
    color: #918779; }

li .data div.userimg {
   float: left;
}
@media only screen and (max-width: 500px){
li .data div.userimg {
    float:none;
    clear: both;
    margin: 0px auto;
    width: 120px;
    height: 40px;}
}
@media only screen and (max-width: 400px){
li .data div.userimg {
    width: 10px;
    height: 45px;}
}
@media only screen and (max-width: 300px){
li .data div.userimg {
    width: 37px;
    float:none;
    clear: both;}
}

li .data div.userimg img {
   float: left;
   margin: 0;
}

@media only screen and (max-width: 500px){
  li .data div.userimg img {
    margin: 5px auto 0px auto;
  }
}
@media only screen and (max-width: 400px){
  li .data div.userimg img {
    margin: 0;
  }
}
.reply_list li .comment div.arrow {
    position: absolute;
    top: 25px;
    width: 24px;
    height: 20px;
}

li .data p.date {
    width: 70px;
    color: #d7615f;
    font-size: 84% !important;
}

li .data p.left {
    float: left;
    color: #d7615f;
    font-size: 84% !important;
}
li .data p.userda {
    color: #d7615f;
    font-size: 84% !important;
}

.usertext{
  margin: 5px 10px;
  width: 70px;
  float: right;}

@media only screen and (max-width: 600px){
.usertext{
  margin: 3px 10px;}
}
@media only screen and (max-width: 500px){
.usertext{
  margin: 8px;}
}
@media only screen and (max-width: 400px){
  .usertext{
    position: absolute;
    top: 35px;
    right: -9px;
    margin: 0px;
    width: 75px;}
}

.username {
  margin: 5px 10px;
  width: 80px;
  float: right;}
  @media only screen and (max-width: 600px){
    .username{
      position: absolute;
      top: 10%;
      left: 0;}
  }
  @media only screen and (max-width: 400px){
    .username{
      position: relative;
      top: 20%;
      left: 20%;
      margin-top: 5px;}
  }
  .salondetail .reply_list li.re_user .username {
    width: 85px;
    float: left;
    margin-left: 0;}
@media only screen and (max-width: 600px){
  .salondetail .reply_list li.re_user .username {
    float: left;
    margin-left: 0;}
}
.reply_list li .data p.user {
    width: 70px;
    font-weight: bold;
    font-size: 80% !important;
}
  @media only screen and (max-width: 600px){
    .reply_list li .data p.user {
      width: 70px;}
    }
    @media only screen and (max-width: 600px){
      .reply_list li.re_user .data p.user {
        width: 80px;}
      }
      @media only screen and (max-width: 400px){
        .reply_list li.re_user .data p.user {
          width: 70px;}
        }
    @media only screen and (max-width: 400px){
    .reply_list li .data p.user {
      clear: both;
      padding-top: 0px;
      font-weight: bold;
      font-size: 9px !important;}
    }

li .data {
    width: 100px;
    padding: 0px;
    text-align: center;
}
  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) and (device-width: 700px){
    li .data {
      width: 50px;
      height: 35px;
      padding: 0px 5px 0px 5px;
      text-align: center;
      margin: 0 auto;}
    }

.salondetail .reply_list li.re_user .data {
        padding: 10px 0 0 0;
        text-align: center;
        float: left;
    }

@media only screen and (max-width: 500px) {
      .salondetail .reply_list li.re_user .data {
        width: 75px;
        float: left;}
    }
@media only screen and (max-width: 400px) {
      .salondetail .reply_list li.re_user .data {
        width: 35px;}
    }
@media only screen and (max-width: 400px) {
      .salondetail .reply_list li.re_user .data {
        width: 5px;}
    }


/*----------------------------------------
  rate_btn
----------------------------------------*/
.rate_btn_l {
  position: relative;
  bottom: 0px;
  /*width: 55%;*/
}
.rate_btn_l p.from{
  min-width: 100%;
  line-height: 1.1;
  padding-top: 5px;
  font-size: 77% !important;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 540px) and (device-width: 540px){
 .rate_btn_l {
  clear:both;
  float: none;
  min-width: 100%;
}
@media only screen (device-width: 500px){
  .rate_btn_l {
   clear:both;
   float: none;
   min-width: 100%;
 }
}
 .rate_btn_l p.from {
    min-width: 100%;
    padding-bottom: 5px;
  }
}
.rate_btn_l p.from a {
  text-decoration: underline;
}
.rate_btn_l p.more {
  padding-top: 2px;
  text-indent: 24px;
  background: transparent url("../img/rate/icn_more.png") 0 0 no-repeat;
  /*background: url(../img/rate/icn_more.png) no-repeat left;*/
  behavior: url(PIE.htc);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
 .rate_btn_l p.more {
    background-image: url("../img/rate/icn_more@2x.png");
    -webkit-background-size: 22px 22px;
    -moz-background-size: 22px 22px;
    -o-background-size: 22px 22px;
    background-size: 22px 22px;
  }
}
.rate_btn_l p.more a {
  color: #876c4a;
  line-height: 24px;
}
.rate_btn_l p.new a {
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: block;
  width: 135px;
  height: 38px;
  background: transparent url("../img/rate/btn_new.png") 0 0 no-repeat;
  behavior: url(PIE.htc);
}
@media only screen  and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
 .rate_btn_l p.new a {
    background-image: url("../img/rate/btn_new@2x.png");
    -webkit-background-size: 135px 38px;
    -moz-background-size: 135px 38px;
    -o-background-size: 135px 38px;
    background-size: 135px 38px;
  }
}
@media only screen and (max-width: 400px) {
 .rate_btn_l p.new a {
    position: relative;
    margin-top: 5px;
    top: 0px;
    left: 0px;
  }
}

/*2014.10.30 coupon*/
.rate_btn_r {
  position: relative;
  float: right;
  margin-right: 5px;
  /*width: 44%;*/
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 500px) {
  .rate_btn_r{
    float: none;
    min-width: 240px;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 300px) {
  .rate_btn_r{
    float: none;
    min-width: 90%;
  }
}
.rate_btn_r p.coupon a {
  position: relative;
  display: block;
  height: 32px;
  margin-top: 8px;
  min-width: 225px;
  /*position: absolute;
  bottom: -3px;
  right: 0px;*/
  /*padding: 3px 10px;*/
  line-height: 32px;
  text-decoration: none;
  text-align: center;

  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  behavior: url(PIE.htc);

/*Other Browser*/
background: #f7b9c3;
/*For Old WebKit*/
background: -webkit-gradient(
  linear, left top, left bottom,
  color-stop(0.00, #f78a99),
  color-stop(1.00, #f07887)
);
/*For Modern Browser*/
background: linear-gradient(
  to bottom,
  #f78a99 0%,
  #f07887 100%
);

  -webkit-box-shadow: 1px 1px 1px rgba(93, 89, 82, 0.3);
  -moz-box-shadow: 1px 1px 1px rgba(93, 89, 82, 0.3);
  box-shadow: 1px 1px 1px rgba(93, 89, 82, 0.3);
  text-shadow: 1px 1px 2px rgba(93, 89, 82, 0.3);
}

@media only screen and (max-width: 300px) {
  .rate_btn_r p.coupon a {
    width: auto;
  }
}
.rate_btn_r p.coupon a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  color: #fff;
  text-decoration: none;
}
.rate_btn_r p.coupon a img.left{
  position: absolute;
  top:-7px;
  left:-5px;
}
.rate_btn_r p.coupon a img.right{
  position: absolute;
  top: 6px;
  right: 5px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 540px) and (device-width: 540px){
  .rate_btn_r{
    clear: both;
    width: 100%;
  }
  .rate_btn_r p.coupon a {
    margin-top: 5px;
    top: 0px;
    left: 0px;
  }
}
/*END 2014.10.30 coupon*/


/*----------------------------------------
  star
----------------------------------------*/
.star {
  float: left;
  background: transparent url("../img/rate/star.png") 0 0 no-repeat;
  width: 100px;
  height: 23px;
  behavior: url(PIE.htc);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
  .star {
    background-image: url("../img/rate/star@2x.png");
    -webkit-background-size: 400px 20px;
    -moz-background-size: 400px 20px;
    -o-background-size: 400px 20px;
    background-size: 400px 20px;
  }
}
.star span {
  display: none;
}

.star50 {
  background-position: left bottom;
}

.star40 {
  background-position: -20px bottom;
}

.star30 {
  background-position: -40px bottom;
}

.star20 {
  background-position: -60px bottom;
}

.star10 {
  background-position: -80px bottom;
}

.star45 {
  background-position: -200px bottom;
}

.star35 {
  background-position: -220px bottom;
}

.star25 {
  background-position: -240px bottom;
}

.star15 {
  background-position: -260px bottom;
}

.star05 {
  background-position: -280px top;
}

.starS{
  position: absolute;
  top: -1px;
  right: 20px;
  background: transparent url("../img/rate/star_s.png") 0 0 no-repeat;
  width: 75px;
  height: 15px;
  behavior: url(PIE.htc);
}
.starS2 {
  position: absolute;
  top:0;
  right: 30px;
  /*display:inline-block;*/
  vertical-align: top;
  background: transparent url("../img/rate/star_s.png") 0 0 no-repeat;
  width: 75px;
  height: 15px;
  behavior: url(PIE.htc);
  margin-left: 10px;
}
@media only screen and (max-width: 500px) {
  .starS2 {
    vertical-align: middle;;
  }
}
@media only screen and (max-width: 400px) {
  .starS2 {
    /*display:inline-block;*/
    vertical-align: middle;
    padding-top:2px;
    margin-left: 0px;
    position: relative;
    float: left;
    top: 0px;
    right: 0px;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
  .starS,.starS {
    background-image: url("../img/rate/star_s@2x.png");
    -webkit-background-size: 300px 15px;
    -moz-background-size: 300px 15px;
    -o-background-size: 300px 15px;
    background-size: 300px 15px;
  }
}

.starS span,.starS2 span {
  display: none;
}
@media only screen and (max-width: 500px) {
  .starS {
    padding-top:2px;
    position: relative;
    float: left;
    top: 0px;
    right: 0px;
  }
}

.starS50 {
  background-position: left bottom;
}

.starS40 {
  background-position: -15px bottom;
}

.starS30 {
  background-position: -30px bottom;
}

.starS20 {
  background-position: -45px bottom;
}

.starS10 {
  background-position: -60px bottom;
}

/*----------------------------------------
  clearfix
----------------------------------------*/
.clearfix {
  min-height: 1px;
  _height: 1%;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/*----------------------------------------
  picup
----------------------------------------*/
.picup{
  background: #fbebea !important;
}
.review2 li.pickup {
  position: relative;
}
.pickup .user {
  line-height: 16px;
}
.pickup img.pickupicn {
  width: 44px; height: 15px; margin-right:5px;
}
.pickup .box {
  background: #fbebea; z-index: 1;
}

/*----------------------------------------
  new user
----------------------------------------*/


.box .user{
  vertical-align: middle;
  /*float: left;*/
  /*clear: both;*/
}
.box .user2{
  vertical-align: middle;
  width : 70% ; /* IE8以下とAndroid4.3以下用フォールバック */
  width: calc(100% - 110px);
}
@media only screen and (max-width: 500px){
  .box .user,.box .user2{
    vertical-align: middle;
    float: none;
  }
}
@media only screen and (max-width: 400px){
  .box .user2{
    float: none;
    width: 100%;
  }
}

.comment-aria{
  position: relative;
  display: block;
}
.left_hdr{
  float: left;
  clear: both;
  margin-left: 0;
  margin-right: auto;
}
@media only screen and (max-width: 499px){
  .left_hdr{
    float: none;
  }
}

/* user-verified / see also: style.css {{{ */
.user-verified {
    color: #12a095 !important;
    font-weight: bold !important;
    background-color: #e0e0e0 !important;
    display: inline-block !important;
    line-height: 1.2em !important;
    padding: 0 0.5em !important;
}
.user-verified .fa {
    font-size: 1.2em;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    padding-left: 3px;
}
/* user-verified }}} */