@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ お客様の感想 ◇◆◇
  
  
========================================================================================================================*/

.voice {
  border:1px solid #e8e0dc;
  background-color:#fff;
  padding:30px;
  box-sizing:border-box;
  margin-top:40px;
}

#ct-main .voice:first-child {
  margin-top:0;
}

@media screen and (max-width:640px) {
  #ct {
    padding-top:0;
  }
  
  .voice {
    border-left:0;
    border-right:0;
    border-bottom:0;
    margin-left:-1em;
    margin-right:-1em;
    margin-top:0;
    border-top-color:#f2edeb;
    padding:1.5em 1em;
  }
  
  #ct-main .voice:first-child {
    border-top:0;
  }
}


/*-----------------------------------------------------------------------------------
  お客様から
-----------------------------------------------------------------------------------*/

.customer-sb {
  background:url(../image/customer-sb-bg.gif) repeat right top;
  padding:5px;
  box-sizing:border-box;
  position:relative;
  /*width:530px;*/
  width:72%;
  float:left;
  border-radius:5px;
  margin-bottom:30px;
}

.customer-sb:before {
  content:"";
  width:135px;
  height:76px;
  position:absolute;
  right:10px;
  top:-22px;
  background:url(../image/customer-sb-rose.png) no-repeat right top;
  background-size:contain;
  z-index:4;
}

.customer-sb p {
  background-color:#fff;
  padding:25px;
  box-sizing:border-box;
  border-radius:4px;
}

.customer-sb p:after {
  content:"";
  width:45px;
  height:100%;
  background:url(../image/customer-sbR.png) no-repeat left top;
  position:absolute;
  right:-40px;
  top:60px;
  z-index:2;
}

.customer-sb-headline {
  margin-bottom:0.25em;
}

@media screen and (max-width:640px) {
  .customer-sb {
    width:68.75%;
    margin-bottom:1.5em;
  }
  
  .customer-sb:before {
    width:115px;
    height:65px;
    top:-18px;
  }
  
  .customer-sb p {
    padding:1.25em;
  }
}

@media screen and (max-width:500px) {
  .customer-sb {
    width:100%;
    float:none;
    margin-top:1.25em;
    margin-bottom:1.25em;
    margin-bottom:1em;
    padding:4px;
  }
  
  .customer-sb p:after {
    width:100%;
    height:30px;
    background:url(../image/customer-sbT.png) no-repeat center bottom;
    background-size:contain;
    right:0;
    top:-24px;
  }
  
  .customer-sb p {
    padding-left:1em;
    padding-right:1em;
  }
}

@media screen and (max-width:400px) {
  .customer-sb:before {
    width:101px;
    height:57px;
    top:-16px;
  }
  
  .customer-sb-headline {
    margin-bottom:0;
  }
}


/* サロンからのコメント無しの場合 ----------------------------------------*/

.salon-none .customer-sb {
  margin-bottom:0;
}


/* 画像無しの場合 ----------------------------------------*/

.customer-photo-none .customer-sb {
  width:inherit;
  float:none;
  margin-top:0;
}

.customer-photo-none .customer-sb p:after,
.customer-photo-none .customer-sb p:before {
  display:none;
}

.customer-photo-none .customer-sb p {
  margin-right:0;
}

/* 画像 ----------------------------------------*/

.customer-photo {
  /*width:180px;*/
  width:24%;
  float:right;
  line-height:0;
}

.customer-photo a {
  position:relative;
  line-height:0;
}

.customer-photo a:after {
  content:url(../../image/ic-zoom.png);
  position:absolute;
  right:0.5em;
  bottom:1em;
  z-index:3;
}

@media screen and (max-width:640px) {
  .customer-photo {
    width:28.125%;
  }
}

@media screen and (max-width:500px) {
  .customer-photo {
    float:none;
    width:inherit;
    text-align:center;
  }
  
  .customer-photo img {
    max-width:150px;
    width:100%;
  }
}


/*-----------------------------------------------------------------------------------
  サロンから
-----------------------------------------------------------------------------------*/

.salon {
  background-color:#fef9ef;
  box-sizing:border-box;
}

.salon-headline {
  display:block;
  background-color:#fff;
  line-height:0;
  margin-bottom:0.25em;
}

.salon-headline img {
  margin-bottom:-0.5em;
}

.salon-inner {
  padding:25px;
}

@media screen and (max-width:640px) {
  .salon-inner {
    padding:1.25em;
  }
}

@media screen and (max-width:500px) {
  .salon-inner {
    padding:1.25em 1em;
  }
}

@media screen and (max-width:400px) {
  .salon-headline {
    margin-bottom:0;
  }
}