@charset "UTF-8";


html{
    font-size:100%;
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    line-height: 1.7;
    color:#3c3c3c;
}

/*-----icatch-----*/
#home{
    background-image:url(https://github.com/erikotajiri196/bodycream/blob/main/image2.png?raw=true);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-width: 1100px;
    height: 766px;
    margin:  0 auto;
}
.img-box{
    text-align: center;
  
}
.img-box img{
    width: 40%;
    margin-top: -109px;
    margin-right: 270px;
}
.baby{
    margin: 16px auto;
	text-align: center;
	display: block;
}

.baby .page-tittle{
    text-align: left;
    display: inline-block;
}
.image3{
    width: 357px;
    margin-left:667px; 
    margin-top: -397px;
}
.page-tittle{
    line-height: 1.4;
    color:#683E3E;
    margin-right: 0px;
    position: relative;
    margin-top: 7px;
    margin-bottom: 331px;
}
.page-tittle span{
    text-align: left;
    margin-top: 10px;
    display: inline;
    padding: 0 10px 0;
    background: linear-gradient(transparent 60%,#D6DFD8 60%);
    font-size: 42px;
}
.page-tittle span>b{
    font-size: 50px;
}

.demo{
    left:15%;
    font-size: 26px;
    background-color: #fff;
    padding:2px 4px;
    line-height: 1.7;
    display: inline;
    -webkit-box-direction-break: clone;
    box-decoration-break: clone;
    margin-top:0px;
    position: relative;
}
.demo span{
    transform: translate(-50%,-50%);
}
.flex0{
    display: flex;
    align-items: center;
    width: 800px;
    margin: 0 auto;
    padding-left: 129px;
    m
}
/*-----section２-----*/
.image5 {/*小花*/
    position: absolute;
    max-width: 1017px;
    margin: auto ;
    display: block;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-top: -555px;
    
}
.image9 {
    max-width: 1100px;
    margin: auto ;
    display: block;
}
.image10 {
    max-width: 1100px;
    margin: auto ;
    display: block;
    margin-top: 13px;
}

.care{
    margin-top: 10px;
    text-align: center;
    background-image:url(https://github.com/erikotajiri196/bodycream/blob/main/image8.png?raw=true);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.cream{
    text-align: center;
    margin-top: 60px;
    text-align: center;
    background-image:url(https://github.com/erikotajiri196/bodycream/blob/main/image8.png?raw=true);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
   
}
.care2{
    display: inline-block;
    font-size: 23px;
    background-color: #FFF0D2;
    padding: 0 7px;
    margin: initial;
    margin-top: -10px;
}
.flex{
    display: flex;
    justify-content:space-evenly;
    width: 750px;
    align-items: center;
    margin: 0 auto;
    height: 300px;
    padding-bottom: 10px;
  }
  .flex>p {
    width: 49%;
  }
.side-txt{
  text-align:left
}
.image6{
    width:319px;
    
}

.cream2{
    display: inline-block;
    font-size: 23px;
    background-color: #FFF0D2;
    padding: 0 7px;
    margin: initial;
    margin-top: -10px;
}
.flex2{
    display: flex;
    justify-content:space-evenly;
    width: 750px;
    align-items: center;
    margin: 0 auto;
    height: 300px;
    padding-bottom: 10px;
  }
.flex>p {
    width: 49%;
}
.image7{
    width:319px;
}

.side-txt2{
    width: 400px;
    margin: 0 4%;
    text-align:left
}
/*-----section３-----*/
#section3{
    margin-top: 0px;
    background-color:#FDF0D9;
    max-width: 1100px;
    height: 1474px;
    margin: 0 auto;
}
#point3{
    background-color:#FDF9F4;
    max-width: 935px;
    left: 50%;
    margin-top: 0px;
    padding-bottom: 0px;
    margin: 0 auto 80px;
}
.img-center{
    text-align:center;

}
.point{
    margin-top:72px;
    margin-bottom: 45px;
    left: 50%;
    width:500px;
    
}
.flex3{/*3つのやさしい成分でふんわり安心*/
    display: flex;
    align-items: center;
    width: 750px;
    margin-left: 108px;
    padding-top: 20px;
  }
  .image11{
    width: 150px;
  }
.side-txt3{
    font-size: 24px;
    width: max-content;
    letter-spacing:0.3em;

}
/*-----point1-----*/
.image14{/*成分３つの画像*/
    width: 800px;
    left: 50%;
    padding :20px 0 ;
    margin: 0 auto;
}
.point1tx{
    width: 800px;
    padding-bottom: 20px;
    margin:0 auto;
    text-align: center;
}
.line1{
    width: 850px;
    margin: 0 auto;
}
/*-----point2-----*/
.flex4{
    display: flex;
    align-items: center;
    width: 750px;
    margin-left: 108px;
    padding: 30px 0;
  }
  .side-txt4{
    font-size: 24px;
    width: max-content;
    letter-spacing:0.2em;

}
.image12{
    width: 150px;
  }

/*-----point3-----*/
.flex5{
    display: flex;
    align-items: center;
    width: 750px;
    margin-left: 108px;
    padding: 30px 0 50px;
  }
  .image13{
    width: 150px;
  }
  .side-txt5{
    font-size: 24px;
    width: max-content;
    letter-spacing:0.2em;
}
.txt6{
    padding-left: 113px;
}
.txt6>b{
    font-size: 32px;
}

/*ボタン*/
.button{
    font-size: 40px;
    background:#F8CB74;
    color: #fff;
    border-radius: 50px;
    padding: 26px 92px;
    margin-top: 110px;
    box-shadow: 0 0 2px 1px #948060;
    text-decoration: none; 
    text-align: center;
    letter-spacing:4px;
}
.button:hover{
    background:#FEE2AC ;
}
.buttondiv{
    margin:0 auto;
}
/*-----section4-----*/
.section4{
    background-image:url(https://github.com/erikotajiri196/bodycream/blob/main/image19.png?raw=true);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1px 0 ;
}
.voice{
    margin-top: 137px;
    text-align: center;
    background-image:url(https://github.com/erikotajiri196/bodycream/blob/main/image18.png?raw=true);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 130px;
}
.image16{/*user's voice画像*/
    width: 758px;
    padding: 60px 0 30px;
}
.pc{/*３人の口コミ*/
    width: 900px;
    align-items: center;
    margin: 0 auto  ;
    padding-bottom: 70px;
}
/* パソコン版口コミ*/
.pc { display: block !important; }
.sp { display: none !important; }


/*-----section5-----*/
.image22{/*オレンジ上フレーム*/
    max-width: 1100px;
    margin: auto;
    display: block;
}
.image23{/*王冠*/
    width: 817px;
    margin: -84px;
}
.dot{
    width: 881px;
    margin-top: 115px;
}
.flex6{
    display: flex;
    justify-content: center;
    margin-left: 6px;
  }
  .image24{/*限定*/
    width:228px;
    align-items: initial;
}
  .image25{/*チューブ*/
    width:284px;
    margin-top: 51px;
    padding-right: 25px;
}

.image26{/*新規購入者様送料無料*/
    width: 300px;
    margin-top: 87px;
}
.txt7{
    font-size: 33px;
    letter-spacing:4px;
    margin: 0 auto;
    line-height:1.2;
    text-align: center;
    padding-right: 507px;
}
.txt8{
    letter-spacing:4px;
    font-size: 40px;
    text-align: center;
    margin-top: -19px;
    margin-bottom: 0px;
}
.txt8>b{
    font-size: 60px;
}

.image27{
    width: 373px;
    margin-top: -33px;
    margin-left: 274px;
}
.dot2{
    width: 881px;
    margin-top: 26px;
    margin-bottom: 74px;
}
.back{
    background-image:url(https://github.com/erikotajiri196/bodycream/blob/main/image28.png?raw=true);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 1110px;
    margin: 0 auto;
    padding: 1px 0 ;
}
/*-----section6-----*/
#section6{
    background-image:url(https://github.com/erikotajiri196/bodycream/blob/main/image30.png?raw=true);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 1100px;
    height: 586px;
    margin: 0 auto;
    padding: 1px 0 ;
}
.txt9{
    font-size: 33px;
    text-align: center;
    letter-spacing:4px;
    margin-top: 511px;
}

/*-----SP版-----*/
@media (max-width:600px){
body{
    width: 1100px;
}    
.image1{
    width: 1000px;
}
.image3{
    margin-left: 707px;
}
.demo{
    font-size: 25px;
}
.page-tittle span{
    text-align: center;
}
.page-tittle {
    display: inline-block;
    top: 10px;
    left: 70px;
    width: 1000px;
    font-size: 50px;
    }
/*-----section２-----*/
#section2{
    width: max-content;
}
.flex{
    transform: initial;
   
}
.flex2{
    transform: initial;
    
}
.care2{
    width: max-content;
    transform: initial;
   
}
.cream2{
    width: max-content;
    transform: initial;
}
.image5{
    position: initial;
    transform: initial;
    max-width: 991px;
    margin-top: -960px;
}
/*-----section3-----*/
#section3{
    width: 1100px;
    transform: initial;
    margin-top: 144px;
    left: initial;
}

/*-----section4-----*/
.pc { display: none !important; }
.sp { display: block !important; }

.voice{
    margin-top: 120px;
    text-align: center;
    background-image:url(https://github.com/erikotajiri196/bodycream/blob/main/image20.png?raw=true);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 130px;
}

.sp{
    margin: 0 auto;
    width: 754px;
    padding-bottom: 30px;
}
.image16{/*user's voice画像*/
     padding: 60px 0 0 0;
}

}/*-----SP-----*/