@media screen and (min-width: 989px) {

.detail-bg{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
}

.detail{
  width: 70%;
  background: #fff;
  position: fixed;
  top: -2000px;
  left: 15%;
  z-index: 500;
  transition: top .5s ease;
  -webkit-transition: top .5s ease;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
}

.detail-hide{
  display: none;
}


.slide_in{
  top: 15%;
  transition: top .5s ease;
  -webkit-transition: top .5s ease;
}
.detail-photo{
//  height: 90%;
  height: 400px;
  margin-right: 30px;
  float: left;
}

.detail-text h3.stylist-name{
  margin-top: 100px;
  font-size: 16px;
  font-weight:bold;
  letter-spacing:0.2em;
  font-family: 'Roboto';
  margin-bottom: 15px;

}
.stylist-name .role{
  color: #6a6a6a;
  display: inline-block;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #000;
}

.detail-text .title{
  font-size: 16px;
  margin-bottom: 10px;
}

#haircata_de{
  position: absolute;
  top: 20px;
  right: 20px;
}

}

@media screen and (max-width: 988px) {

  #haircata_de {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 21px;
    height: 22px;
}



#people .detail-text h3.stylist-name{
  margin-top: 20px;
  font-size: 20px;
  font-family: 'Roboto';
  margin-bottom: 15px;

   font-size: 16px;
  font-weight:bold;
  letter-spacing:0.2em;
}

#people .detail-photo{ height:auto; float:both !important; margin-top:20px;}
#people .detail-photo>img{
  width: 100%;
  height: auto;
}

#people .detail{
  width: 90%;
  height: auto;
  overflow: hidden;
  background: #fff;
  position: fixed;
  top: -200%;
  left: 5%;
  z-index: 1500;
  transition: top .5s ease;
  -webkit-transition: top .5s ease;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
}


#product ~ .detail-bg{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
}

#product ~ .detail{
  width: 70%;
  height: 70%;
  overflow-y: scroll;
  background: #fff;
  position: fixed;
  top: -2000px;
  left: 15%;
  z-index: 500;
  transition: top .5s ease;
  -webkit-transition: top .5s ease;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
}

#product ~ .detail-hide{
  display: none;
}


#product ~ .slide_in{
  top: 15%;
  transition: top .5s ease;
  -webkit-transition: top .5s ease;
}
#product ~ .detail-photo{
//  height: 90%;
  height: 400px !important;
  margin-right: 30px;
  float: left;
  display: none;
}
#haircata .detail-photo>img{
  width: 100%;
}

#product ~ #haircata_de{
  position: absolute;
  top: 20px;
  right: 20px;
}

}