@charset "UTF-8";
/*!
Theme Name: leacraft_renewal
Template: habakiri
*/
/* ここから下に書いていく */
body{
  overflow-x: hidden;
}
.h_pink-back{
  background-color: #FFF0F5;
  width:85%;
  margin:0 auto;
}
.h_fsize7{
  font-size:7vw;
  text-align: center;
}
.h_fsize6{
  font-size:6vw;
  text-align: center;
}
.h_fsize5{
  font-size:5vw;
  text-align: center;
}
.h_fsize4{
  font-size:4vw;
  text-align: center;
}
.h_fsize3{
  font-size:3vw;
  text-align: center;
}
.pink{
  color:#ED2087;
}
.h_blink{
  color: #fff;
  text-shadow: 0 0 20px #ED2087,0 0 1vw #ED2087;
}
.back-img{
  background-image: url("./img/back_pink.jpg");
  background-repeat: repeat-y;
  background-size: 100%;
}
.h_bubble{
  position: relative;
  padding:5% 10%;
  background-image: url("./img/bubble.png");
  background-size: 40%;
  background-position-x: center;
}
.h_bubble p{
  margin:0 auto;
}
.h_goal{
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
}
.h_goal::before,
.h_goal::after {
  background-color: #ED2087; /* 横線の色 */
  content: "";
  height: 5px; /* 横線の高さ */
  width:33%;
}
.h_goal::before {
  margin-right: 1%; /* 文字との余白 */
}
.h_goal::after {
  margin-left: 1%; /* 文字との余白 */
}
#hair_removal hr{
  background-color: #ED2087; /* 横線の色 */
  height: 6px; /* 横線の高さ */
  width: 100%; /* 横線の長さ */
}
.h_bubble img{
  position:absolute;
  top:0;
  right:30%;
  width:40%;
  z-index: 1;
}
.h_bubble p,hr{
  z-index: 99;
}
.h_shape-box{
  background-color: #fff;
  display: flex;
  width:80%;
  padding:5% 5% 0 5%;
  margin:0 auto;
  position: relative;
}
.h_caratful{
  width:50%;
  text-align: center;
  padding:3%;
}
.h_others{
  width:50%;
  text-align: center;
  padding:3%;
}
.h_shape-box p1{
  display: block;
  color:#fff;
  font-size:4vw;
  padding:0 5%;
  width:fit-content;
  margin:0 auto;
  margin-bottom: 5%;

}
.h_caratful p1{
  background-color: #ED2087;
}
.h_others p1{
  background-color: #BBB7B7;
}
.h_shape-box p2{
  display: block;
  font-size:4vw;
  margin:0 auto;
  width:90%;
  padding:3% 5%;
  line-height: 1.2;
}
.h_caratful p2{
  background-image: url("./img/haikei.png");
  background-size: 100%;
  color:#ED2087;
}
.h_others p2{
  background-color: #DFDDDD;
  color:#000;
  z-index: 10;
}
.h_caratful p3{
  font-size: 5vw;
  line-height: 0.6;
  color:#BBB7B7;
  font-weight: bold;
}
.h_caratful p4{
  display: block;
  margin-top:15%;
  font-size:2vw;
  color:#ED2087;
}
.h_girl_pink{
  position:absolute;
  bottom:0;
  right:35%;
  width:20%;
  z-index: 0;
}
.h_others-flex{
  display: flex;
  justify-content: space-around;
}
.h_others p{
  font-size: 1.5vw;
  text-align: left;
}
.h_others img{
  width:50%;
}
.h_shape-triangle{
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 39vw solid transparent;
  border-left: 39vw solid transparent;
  border-top: 10vw solid #fff;
  border-bottom: 0;
  margin:0 auto;
}
h3{
  font-size: 6vw;
  margin:0 auto;
  width:70%;
  font-weight: 500;
  border-bottom: #ED2087 solid .5vw;
  text-align: center;
  margin-bottom: 3%;
}
.h_message p{
  line-height: 1;
  margin:1% auto;
}
.h_message img{
  width:80%;
}
.ellipse{
  width:140%;

  /* 自身のサイズの50%分を逆方向に移動して正確な中央に配置する */
  transform: translate(-15%, 0%);
  margin-top: 10%;
  background-color: #FFF0F5;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  padding:10% 0;
}
.ellipse p{
  margin:1% auto;
  line-height: 1;
}
.consultation{
  margin: 5% auto;
}
.consultation p1{
  margin:.5% auto;
  display: block;
}
.consultation p2{
  margin:.5% auto;
  font-weight: bold;
}
.consultation p{
  margin:.5% auto;
}
.consultation a{
  color: #ED2087;
}
.online{
  position: relative;
  background-color: #FFF0F5;
  padding-bottom: 10%;
}
.left{
  text-align: left;
  padding-left:10%;
}
.logo{
  display: block;
  width:40%;
  margin:3% auto;
}
.skincare{
  position: absolute;
  top:0;
  right:-5%;
  width:30%;
}
.online p{
  margin:.5% auto;
}
.homecare{
  margin:5% auto;
}
.homecare img{
  width:80%;
  height:30vw;
  object-fit: cover;
}
.online-botton{
  display: block;
  color: #FFF;
  font-size: 3vw;
  padding:1% 3%;
  background-color: #FF68C2;
  border-radius: 5vw;
  width:fit-content;
  text-decoration: none;
  margin:0 auto;
}
.online-botton:hover{
  color: #FF68C2;
  background-color: #FFF;
  border:#FF68C2 solid .5vw;

}
.reserve_botton{
  display: block;
  margin:10px auto;
  color:#fff;
  background-color: #FF68C2;
  font-size: 4vw;
  width:70%;
  text-align: center;
  position: relative;
  text-decoration: none;
  padding: 5px 10px;
  box-sizing: border-box;
}
.reserve_botton::after {
  transform: translateY(-50%) rotate(45deg);
  top: 50%;
  right: 30px;
  width: 3vw;
  height:3vw;
  margin-left: 10px;
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
  content: '';
  position:absolute;
}
.coupon_botton{
  display: block;
  margin:10px auto;
  color:#FF68C2;
  background-color: #FFF;
  border:solid 5px #FF68C2;
  font-size: 4vw;
  width:70%;
  text-align: center;
  position: relative;
  text-decoration: none;
  padding: 5px 10px;
  box-sizing: border-box;
}
.coupon_botton::after {
  transform: translateY(-50%) rotate(45deg);
  top: 50%;
  right: 30px;
  width: 3vw;
  height:3vw;
  margin-left: 10px;
  border-top: 5px solid #FF68C2;
  border-right: 5px solid #FF68C2;
  content: '';
  position:absolute;
}