/*-------ここから個別の調整部分---------------------------*/
h2{
  color: #fff;
  text-shadow: 0 0 10px #000;
}
h3{
  text-align: center;
  margin-top: 30px;
  text-align: center;
  position: relative;
  margin-bottom: 2rem;
}
h3::after{
  content: '';
  width: 250px;
  height: 20px;
  display: inline-block;
  background-image: url(../img/line.png);
  background-size: 60%;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 70px);
}
.he_p{
  padding-bottom: 20px;
}
.he_mv{
  background-image: url(../img/mv_henna.jpg);
	background-position: center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 80vh;
}
.he_image{
  background-image: url(../img/hennapowder.png);
  width: 100%;
  height: 150px;
  background-size:cover;
  background-position:center;
}
.he_kouka{
  text-align: center;
  margin-bottom: 20px;
}
.he_kouka img{
  border-radius: 50%;
  width: 50%;
}
.he_nagare{
  text-align: center;
}
.he_nagare img{
  border-radius: 50%;
  width: 80%;
}
span{
  font-size: 25px;
}
.text_ju {
  margin-top: 10px;
}

/*-------ここまで個別の調整部分---------------------------*/

/*---ここからjs部分の調整----------------------------------*/
/*左右の矢印の色を変える*/
.slick-prev:before,.slick-next:before{
  color: #5e5e5e;
}
/*左右の矢印の位置を変える*/
.slick-next{
  right:20px;
  top: 120px;
  z-index: 99;
}
.slick-next:before/**/
{
  margin-right: 1rem;
  font-family: "Font Awesome 5 Free";
    content: '\f061';
    width: 20px;
    height: auto;
    font-weight: bold;
   /*ーーーーー右矢印を変更ーーーーーー*/
}
.slick-prev{
  left: 15px;
  z-index: 100;
  top: 120px;
}
.slick-prev:before
{
  margin-right: 1rem;
  font-family: "Font Awesome 5 Free";
    content: '\f060';
    width: 20px;
    height: auto;
    font-weight: bold;/*ーーーーー左矢印を変更ーーーーーー*/
}
.slick-prev:before,
.slick-next:before
{
    font-size: 30px;
}
/*スライド画像の横幅可変*/
.he_slick img{
  max-width: 90%;
  height: auto;
  margin: 0 auto;
}
.slick p{
  text-align:center ;  
}
/*グレーの四角を作るための設定*/
.he_slick{
  width: 95%;
  margin: 0 auto;
  background-color: #e5e6e6;
  padding: 30px;
  border-radius: 30px;
}
/*---ここまでjs部分の調整----------------------------------*/
/*ここからボタン共通CSS*/	

/*==================ボタンCSS====================*/	
.btn{	
  padding:10px;	
  text-align:center;	
  color:#5e5e5e;	
  margin:40px auto 0 auto;	
  border:1px solid #5e5e5e;
  background-color: rgba(94, 94, 94, 0.1);
  cursor:pointer;	
  position: relative;	
  font-size: 18px;	
	width: 270px;  
  }	
  .btn::after{	
  content: "";	
  position: absolute;	
  top: calc(50% - 5px);	
  right: 20px;	
  width: 20px;	
  height: 5px;	
  border: none;	
  border-right: 2px solid #5e5e5e;	
  border-bottom: 1px solid #5e5e5e;	
  transform: skew(45deg);	
  transition: .3s;	
  }	
  .btn:hover::after{	
  right: 10px;	
  width: 30px;	
  }	
  .in_btn{	
  margin: 30px 0 30px 0;	
  }	
  /*=================ボタンCSSここまで====================*/	

  /* ここまで〜479px：SP縦　Mobileファースト--------------------------------------------- */

  /* ここから480px〜900px： Mobile横置き、タブレット縦 ---------------------------------- */
@media (min-width:480px) and (max-width:900px){
  
.he_nagare{
  display: flex;
  align-items: center;
  margin: 50px 0 ;
}
.he_nagare figure{
  flex: 0 0 250px;
 }
 .he_slick{
   width: 90%;
 }
 .he_float{
  margin-bottom: 60px;
}
.he_mv{
  height: 60vh;
}
}
/*ここまで480px～900px headerのメディアクエリ*/  

/* ここから901px～：大型タブレット、PC用-----------------------------------------*/
@media (min-width:901px){
  .btn::after{
    right: 20px;
    transition: .3s;
    }
    .btn:hover::after{
    right: 10px;
    width: 30px;
  }
  .he_image{
    margin-top: 20px;
  }
  .he_mv{
    height: 100vh;
  }
  h2{
    font-size: 45px;
    text-shadow: 5px 5px 10px #000;
  }
  h3{
    padding-top: 40px;
  }
  .he_nagare{
    display: flex;
    align-items: center;
    margin: 50px 0 ;
  }
  .he_nagare figure{
   flex: 0 0 250px;
  }
  .he_kouka img{
    float: right;
    margin-left: 60px;
    margin-bottom: 5px;
    width: 400px;
  }
  .he_float::after{
    clear: both;
  }
  .he_float{
    margin-bottom: 60px;
  }
  .he_slick{
    max-width: 900px;
  }
  
}

/* ここまで901px～：大型タブレット、PC用----------------*/