@charset "UTF-8";

.mainvisual{
  background-image: url(../img/image1.jpg),
  url(../img/image2.jpg),            
  url(../img/image3.jpg),      
  url(../img/image4.jpg),        
  url(../img/image5.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  animation: bg-image 25S infinite;
  height: 40vh;
}

@keyframes bg-image{
  0%{
    background-image: url(../img/image1.jpg);
  }

  25%{
    background-image: url(../img/image2.jpg);
  }

  55%{
    background-image: url(../img/image3.jpg);
  }

  80%{
    background-image: url(../img/image4.jpg);
  }

  100%{
    background-image: url(../img/image5.jpg);
  }
}

.information{
  background-color: #feefe8;
}

.information .wrapper{
  margin: 0 auto;
  padding: 0 35px 50px;
}

.information_list dt{
  margin-bottom: 10px;
}

.information_list dd{
  margin-bottom: 40px;
}

.information_list dd:last-child{
  margin-bottom: 0;
}

.concept, .color{
  padding: 0 35px 50px;
}

.concept_area{
  padding-top: 10%;
  background-image: url(../img/concept.jpg);
  background-size: cover;
  height: 20vh;
  text-align: center;
}

.concept_area p{
  background-color: #fff;
  opacity: .6;
  line-height: 2rem;
  color: #000;
}

.concept_list,.color_list{
  margin-top: 40px;
}

.concept_list_area,
.color_list_area{
  position: relative;
}

.concept_list h3,
.color_list h3{
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.concept_list p,
.color_list p{
  position: absolute;
  bottom: -45px;
  font-size: 0.8rem;
  line-height: 1.2rem;
  color: #333;
}

.three{
  margin-top: 70px;
}

.three + .three{
  margin-top: 85px;
}

.three p{
  bottom: -63px;
}

.concept_list_pic img,
.color_list_pic img{
  width: 100%;
  height: 40vh;
  object-fit: cover;
}


.color_list h3{
  text-align: center;
}

.color_list_pic img{
  height: 40vh;
  object-position: center top;
}

.category{
  padding: 0 35px 40px;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.category_box{
  padding: 40px 0;
  margin-top: 20px;
  width: calc((100% - 20px) / 2);
}

.category_box a{
  display: block;
}

.category_box:hover{
  background-color: #fff;
  opacity: .5;
}

.category_box p{
  color: #fff;
  font-size: 2rem;
  -webkit-text-stroke: #000 .8px;
  font-weight: bold;
  text-align: center;
}

.menu_box{
  background-image: url(../img/image1.jpg);
  background-size: cover;
}

.style_box{
  background-image: url(../img/category2.jpg);
  background-size: cover;
}

.salon_box{
  background-image: url(../img/image5.jpg);
  background-size: cover;
}

.staff_box{
  background-image: url(../img/staff1.jpg);
  background-size: cover;
}

.access{
  padding: 0 35px 50px;
}

.google iframe{
  width: 100%;
  height: 40vh;
}

.salon-detail{
  margin-top: 20px;
}

.salon-detail p{
  font-size: .9rem;
}

.salon-detail_txt + .salon-detail_txt{
  margin-top: 10px;
}

.fadeIn_up {
  opacity: 0;
  transition: 3s;
}
.fadeIn_up.is-show {
  opacity: 1;
}

/* PCディスプレイ */

@media(min-width:550px){

  .mainvisual{
    height: 90vh;
  }

  .information .wrapper{
    max-width: 800px;
    width: 100%;
  }
  
  .information_list dt{
    font-size: 1.3rem;
  }
  
  .information_list dd{
    font-size: 1.3rem;
  }
  
  .concept, .color{
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
  }
  
  .concept_area{
    height: 45vh;
  }
  
  .concept_area p{
    font-size: 1.2rem;
    line-height: 3rem;
  }

  .concept_list_area,
  .color_list_area{
    position: static;
  }

  .concept_list_area,
  .color_list_area{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }

  .concept_list_area:nth-child(even),
  .color_list_area:nth-child(even){
    flex-direction: row;
  }

  .concept_list_area_txt,
  .color_list_area_txt{
    width: 35%;
  }
  
  .concept_list h3,
  .color_list h3{
    font-size: 1.4rem;
    margin-bottom: 30px;
  }
  
  .concept_list p,
  .color_list p{
    position: static;
    bottom: auto;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .three + .three{
    margin-top: 70px;
  }
  
  .three p{
    bottom: auto;
  }

  .concept_list_pic,
  .color_list_pic{
    width: 55%;
  }
  
  .concept_list_pic img,
  .color_list_pic img{
    height: 50vh;
  }
  
  .color_list h3{
    text-align: left;
  }
  
  .color_list_pic img{
    height: 60vh;
    object-position: center top;
  }
  
  .category{
    margin: 50px auto 0;
    max-width: 900px;
    width: 100%;
  }
  
  .category_box p{
    font-size: 2.5rem;
  }
  
  .style_box{
    background-position: center 15%;
  }
  
  .staff_box{
    background-position: center 10%;
  }
  
  .access .wrapper{
    max-width: 900px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .google{
    width: 72%;
  }
  
  .salon-detail{
    margin-top: 0px;
  }
  
  .salon-detail p{
    font-size: 1.2rem;
  }
  
  .salon-detail_txt + .salon-detail_txt{
    margin-top: 20px;
  }
  
  
  
}