@charset "UTF-8";
/*!
Theme Name: leacraft_renewal
Template: habakiri
*/
/* ここから下に書いていく */
body{
  overflow-x: hidden;
}
#flow{
  position:relative;
}
.flag{
  position:absolute;
  width:40%;
  top:0;
  left:3%;
}
.pink-back{
  background-color: #FFF0F5;
  margin-top:0;
  width:100%;
}
#flow .fsize6{
  font-size:6vw;
  text-align: center;
  font-weight: bold;
}
#flow .fsize5{
  font-size:5vw;
  text-align: center;
}
#flow .fsize5_l{
  font-size:5vw;
  font-weight: bold;
}
#flow .fsize4{
  font-size:4vw;
  text-align: center;
}
#flow .fsize4_l{
  font-size:4vw;
  text-align: left;
  margin: 0;
}
#flow .fsize3{
  font-size: 3vw;
}
#flow .fsize2_l{
  font-size: 2vw;
}
#flow .fsize1_5{
  font-size: 1.5vw;
}
#flow .fsize1{
  font-size: 1vw;
}
#flow .pink{
  color:#ED2087;
}
#flow .ring{
  background-image: url("./img/season.png");
  background-size: contain;
  background-position: center;
  font-size:7vw;
  font-weight: bold;
  width:30%;
  height: 19vw;
  margin: 0;
  padding: 4vw 0;
  text-align: center;
  vertical-align: middle;
}
#flow .blink{
  color: #fff;
  text-shadow: 0 0 20px #ED2087,0 0 1vw #ED2087;
}
#flow .mg-top-zero{
  margin-top: 0;
}
.merit{
  display: block;
  margin:0 auto;
  width:80%;
}
#flow .flex{
  display:flex;
  width:85%;
  margin:0 auto;
  justify-content: center;
  align-items: center;
  padding-top:15%;
}
.flex-cycle{
  display:flex;
  width:90%;
  margin: 0 auto;
}
.hair-cycle{
  width: 45% !important;
}
.hair-cycle img{
  width:100%;
}
.hair-cycle2{
  width:55%;
}
.coupon-mg{
  margin:5vw auto;
}
.coupon-img{
  width:40%;
  height:20vw;
  object-fit: cover;
  border:1px #000 solid;
}
.coupon-box{
  width:60%;
  position:relative;
  border:1px #000 solid;
  text-align: right;
}
.right-box{
  margin: 1vw 0px 1vw auto;
}
.gradate_box{
  background: linear-gradient(0deg, #fff 0%, #C7FCFF 100%);
}
.gradate2_box{
  background: linear-gradient(0deg, #fff 0%, #FFD7ED 100%);
}
.gradate_p{
  width:fit-content;
  color:#fff;
  padding:0 3vw;
  background: linear-gradient(90deg, #30F0D4 0%, #29A2F7 100%);
}
.gradate2_p{
  width:fit-content;
  color:#fff;
  padding:0 3vw;
  background: linear-gradient(90deg, #FFDC5B 0%, #ff68c2 100%);
}
.purple{
  color:#4B6BFF;
}
.price{
  width:70%;
  text-align: left;
}
.price p{
  margin:0;
}
.grid-container{
  position:absolute;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  place-items: center;
  width:17%;
  aspect-ratio: 1;
  bottom: 1vw;
  left: 1vw;
  border-radius: 50%;
}
.b-yellow{
  background-color: #EBFF00;
}
.b-pink{
  background-color:#ED2087;
  color:#fff;
}
#gi1 {
  grid-column: 2 / 7;
  grid-row: 2 / 3;
  font-size: 1vw;
  margin:0;
}
#gi2 {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
  font-size: 1vw;
  margin:0;
}
#gi3 {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
  font-size: 2.5vw;
  margin:0;
}
#gi4 {
  grid-column: 5 / 7;
  grid-row: 3 / 4;
  font-size: 1vw;
  margin:0;
}
#gi5 {
  grid-column: 5 / 7;
  grid-row: 4 / 5;
  font-size: 1vw;
  margin:0;
}
.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;
}