@charset "utf-8";

/*main visual------------------------------------------*/
.main_visual {
  width: 100%;
  background-image: url("../img/ph_top_main@2x.png");
  background-position: center;
  background-size:cover;
}
h1 {
  max-width: 360px;
  margin-left: 20%;
  padding: 15em 0em 40em 0em;
}

/*-----------------------------------------------------*/
.content {
  position: relative;
  z-index: 0;
}

h2 {
  font-size: 44px;
  color: #63a4c2;
  letter-spacing: 5px;
  margin-top: -2em;
  position: relative;
  z-index: 2;
}
.catch {
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: 22px;
  letter-spacing: 2px;
  margin-top: 0.5em;
  position: relative;
  z-index: 2;
}
.catch span {
  letter-spacing: 0;
}
.read {
  line-height: 2.4em;
  margin-top: 2em;
  position: relative;
  z-index: 2;
}


/*-----------------------------------------------------*/
.top_menu_wrap {
  margin: 5em auto;
  max-width: 1100px;
  box-sizing: border-box;
  z-index: 0;
}
.top_menu_hair {
  display: flex;
  justify-content: space-between;
  background-color: #efece5;
  margin-right: -200px;
  position: relative;
  z-index: 1;
}
.top_hair_leaf {
  max-width: 800px;
  mix-blend-mode: multiply;
  margin: -20em 0 0 auto;
  position: absolute;
  right:-1em;
  z-index: 2;
}
.top_menu_shaving {
  display: flex;
  justify-content: space-between;
  background-color: #efece5;
  margin-left: -200px;
  margin-top: 5em;
  position: relative;
  z-index: 1;
}
.top_shaving_leaf {
  max-width: 580px;
  mix-blend-mode: multiply;
  margin: -28em 0 0 0 ;
  position: absolute;
  left:-1em;
  z-index: 2;
}
.txt_wrap_left {
  width:320px;
  margin: auto;
  z-index: 1;
}
.txt_wrap_right {
  width:320px;
  margin: auto;
  order: 2;
  z-index: 1;
}


/*-----------------------------------------------------*/
h3 {
  font-size: 36px;
  line-height: 1em;
  text-align: center;
  color: #63a4c2;
  letter-spacing: 3px;
  padding-bottom: 10px;
}
h4 {
  font-size: 36px;
  color: #63a4c2;
  letter-spacing: 3px;
}
.gallary_ph {
  display: block;
  margin: 2em auto;
}
/*改行位置調整---------------------------*/
.sp_br {
  display: none;
}
.sp_br1, .sp_br2, .sp_br3{
  display: none;
}

/*------------------------------------------------------------*/

/*1600*/

/*----------------------------------------------*/
@media screen and (max-width: 1600px) {
/*main_visual------------------------------------------------*/
  h1 {
    max-width: 300px;
    margin-left: 15%;
    padding: 15em 0em 30em 0em;
  }
  }
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

/*1280*/

/*----------------------------------------------*/
@media screen and (max-width: 1280px) {
  /*main_visual------------------------------------------------*/
    h1 {
      max-width: 300px;
      margin-left: 10%;
      padding: 15em 0em 25em 0em;
    }
    }
  /*------------------------------------------------------------*/
  /*------------------------------------------------------------*/
  

/*1023-768*/

/*----------------------------------------------*/
@media screen and (max-width: 1023px) {
/*main_visual------------------------------------------------*/
  h1 {
    max-width: 250px;
    margin-left: 10%;
    padding: 10em 0em 20em 0em;
  }
  h2 {
    font-size: 40px;
  }
  .top_menu_hair {
    flex-direction: column;
    margin-top: 3em;
    margin-right: 0;
  }
  .top_menu_shaving {
    flex-direction: column;
    margin-top: 1em;
    margin-left: 0;
    margin-bottom: 5em;
  }
  .top_hair_leaf {
    margin: -24em 0 0 auto;
  }
  .top_shaving_leaf {
    margin: -32em 0 0 0 ;
  }
  h3 {
    margin-top: 50px;
  }
  .txt_wrap_left {
    width:80%;
    margin: auto;
    margin-bottom: 2em;
  }
  .txt_wrap_right {
    width:80%;
    margin: auto;
    margin-bottom: 2em;
    order: 0;
  }
  h4 {
    font-size: 40px;
  }
  .address_info {
    font-size: 13px;
  }
}
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

/*smartphone*/

/*------------------------------------------------------------*/
@media screen and (max-width: 767px) {
/*main_visual------------------------------------------------*/
.main_visual {
  width: 100%;
  background-image: url("../img/ph_top_main_sp@2x.png");
  background-position: center;
  background-size:cover;
}

h1 {
  max-width: 200px;
  margin: auto;
  padding: 5em 0em 9em 0em;
}

  /*-----------------------------------------------------*/
  h2 {
    font-size: 34px;
    letter-spacing: 2px;
    margin-top: 0.01em;
  }
  .catch {
    font-size: 18px;
    line-height: 2em;
    letter-spacing: 2px;
    margin-top: 0.5em;
  }
  .top_menu_wrap {
    margin: auto;
    padding: 2em 5% 3em 5%;
  }
  .top_hair_leaf {
    margin: -15em 0 0 auto;
    right:0em;
  }
  .top_shaving_leaf {
    max-width: 400px;
    margin: -22em 0 0 0 ;
    left:0em;
  }
  h3 {
    font-size: 34px;
  }
  h4 {
    font-size: 34px;
    margin-top: 2em;
  }
  /*改行位置調整---------------------------*/
  .sp_br {
    display: inline;
  }
  .sp_br2 {
    display: inline;
  }
}
@media screen and (max-width: 425px) {
  /*改行位置調整---------------------------*/
  .sp_br1 {
    display: inline;
  }
}
@media screen and (max-width: 360px) {
  /*改行位置調整---------------------------*/
  .sp_br3 {
    display: inline;
  }
}