body{
    margin: 0;
    /* overflow-x: hidden; */

}
img{
    width: 100%;
}
.container{
    padding-right:0;
    padding-left: 0;
}
.btn-man{
    width: 50%;
    margin: -35% auto 7% auto;
}
.bg-01{
    background-color: #d1d9f1;
}

.bg-01 > .container{
    background-image: url(../image/p1-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    /* padding-top: 20%; */
    /* padding: 5%; */
    
}
.logo{
    width: 50%;
    margin: 0 auto;
    padding: 6%;
}
.title1{
    width: 80%;
    margin: 0 auto;
}
.light1 {
    width: 45%;
    margin-left: -15%;
    margin-top: -12%;
}
.item1{
    margin-top: -2%;
}
.product-1{
    width: 80%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 85%;
}
.product-item1{
    width: 65%;
    margin-top: 5%;
    /* margin-left: 0%; */
    position: absolute;
}
.product-item1 > .product-purple{}
.product-item1 > .product-label02{
    position: absolute;
    bottom: 5%;
    left: -9%;
    width: 43%;
}
.product-item1 > .product-cream01{
    position: absolute;
    bottom: -14%;
    left: 9%;
    width: 35%;
}
.product-item2{
    position: absolute;
    /* bottom: 0; */
    right: 5%;
    width: 65%;
    margin-top: 45%;
}
.product-item2 > .product-pink{}
.product-item2 > .product-label03{
    position: absolute;
    width: 41%;
    right: -3%;
    bottom: -6%;
}
.product-item2 > .product-cream02{
    position: absolute;
    right: -18%;
    bottom: -15%;
    width: 23%;
}
.product-label1{
    position: absolute;
    right: 5%;
    /* top: 8%; */
    margin-top: 22%;
    width: 25%;
}
.p1-light-1{
    position: absolute;
    animation: light1 5s infinite;
}
.p4-light-1{
    position: absolute;
    bottom:10%;
    animation: light1 5s infinite;
}
@keyframes light1 {
    0%    { opacity: 0.8; }
    20%   { opacity: 0.5; }
    80%   { opacity: 0.7; }
    100%  { opacity: 0.8; }
  }
  


.p1-white{
    background: #fff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.p1-text2{
    width: 70%;
    margin: 0 auto;
    padding: 6% 6% 4% 6%;
}
.p1-text3{
    width: 70%;
    margin: 0 auto;
    padding-bottom: 4%;
}
.p1-white-w{
    padding: 0 5% 5% 5%;
    display: flex;
}
.p1-white-w > .p1-white-left{
    width: 40%;
}
.p1-white-w > .p1-white-right{
    width: 60%;
    display: inline-table;
}
.p1-white-w > .p1-white-right > img{
    width: 50%;
    padding: 0 0 3% 3%;
}
.bg-02 > .container{
    background-image: url(../image/p2-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    /* padding-bottom: 110%; */
    position: relative;
}
.bg-03 {
    background-color: #fff9fd;
}
.bg-03 > .container{
    background-image: url(../image/p3-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 110%;
    position: relative;
}
.bg-05 {
    background-color: #ff8ba1;
}

.bg-05 > .container{
   
    background-image: url(../image/bg-01.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    /* overflow-x: hidden; */
}
.p5-title-w{
    background-color: rgba(255, 255, 255, 0.65);
    -webkit-border-top-left-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-bottomright: 50px;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;

}
.p5-title-w2{
    background-color: rgba(255, 255, 255, 0.65);
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    margin-top: 3%;
    padding: 3%;
   
}
.p5-title-w-img{
    padding: 6% 8%;
}
.p5-row{
    display: flex;
    padding: 2% 0;
}
.p5-white-left{
    width: 40%;
    position: relative;
}
.p5-frame01{
    position: absolute;
    width: 120%;
    top: -3%;
    left: -10%;
}
.p5-frame02{
    position: absolute;
    width: 120%;
    top: -3%;
    left: -10%;
    animation: light2 5s infinite;
}
.p5-frame01-2{
    position: fixed;
    margin: -10%;
    top: 5%;

}
.p5-frame02-2{
    position: fixed;
    margin: -10%;
    top: 5%;
    animation: light2 5s infinite;
}
.p5-frame02-2 img{
   
}
.p5-frame01-2 img{
   
}
@keyframes light2 {
    0%    { opacity: 1; }
    20%   { opacity: 0.3; }
    80%   { opacity: 0.6; }
    100%  { opacity: 1; }
  }
.p5-name{
    width: 45%;
    margin-left: 15%;
}
.p5-product{
    width: 40%;
    right: 0;
    bottom: 0;
    float: inline-end;
    margin-top: -7%;
}
.p5-product02{
    width: 40%;
    right: 0;
    margin-top: 5%;
    float: inline-end;
}
.p5-white-right{
    width: 60%;
    padding: 3%;
}
.p5-smalltext{
    width:50%;
    padding-bottom: 2%;
}
.p5-light{
    position: absolute;
    top:0
}
.bg-04{
    background-color: #fddfd5;
}

.bg-04 > .container{
    background-image: url(../image/p4-bg01.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 3%;
    position: relative;
    /*overflow-x: hidden;*/
    /*background-image: url(../image/bg-02.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 7%;*/
}
.p4-title-img{
    width: 70%;
    margin: 0 auto;
}
.p4-icon-img{
    width: 100%;
    display: inline-table;
}
.p4-icon-img img{
    width: 20%;
    padding: 1%;
}
.p4-item01{
    width: 95%;
    margin: 0 auto;
}
.p4-product01{
    position: absolute;
    top: 37%;
    left: 16%;
    width: 40%;
}
.p4-product02{
    position: absolute;
    right: 6%;
    bottom: 36%;
    width: 40%;
}
.p4-table01{
    margin: 0 auto;
    position: relative;
    padding-bottom: 140%;
   
}
.p4-table01-1{
    position: absolute;
    width: 100%;
    bottom: 10%;
}
.p4-name-label{
    position: absolute;
    width: 65%;
    top: -75%;
    left: -20%;
}
.p4-name-label02{
    position: absolute;
    width: 65%;
    right: -10%;
    top: -75%;
}
.p4-btn-man{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 10%;
}
.p4-product01-i{
    /* position: absolute; */
}
.p2-title-img{
    width: 90%;
    padding: 10% 5% 0 5%;
}
.p2-title-img2{
    width: 65%;
    padding: 2% 5%;
    
}
.p2-product{
    width: 80%;
    margin: 0 auto;
}
.p2-label01{
    width: 20%;
    float: inline-end;
    margin-right: 10%;
}
.p2-btn01{
    position: relative;
    padding-bottom: 85%;
}
.p2-btn01-img{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 10%;
    width: 60%;
}
.p2-icons{
    position: relative;
    padding-bottom: 30%;
}
.p2-icon01{
    position: absolute;
    top: 80%;
    width: 18%;
    left: 5%;
}
.p2-icon02{
    position: absolute;
    top: 10%;
    width: 18%;
    left: 25%;
}
.bg-02-2{
    background-color: #fcf9fa;
}
.bg-02-2 > .container{
    background-color: #fcf9fa;
    background-image: url(../image/p2-2-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 3% 3% 80% 3%;
    position: relative;

}

.p2-2-title01{
    width: 80%;
    padding-top: 10%;
    padding-bottom: 2%;
    margin: 0 auto;
}
.p2-2-title02{
    width: 60%;
    margin: 0 auto;
    padding-bottom: 2%;
}
.p2-2-title03{
    width: 60%;
    margin: 0 auto;
}
.p2-2-vb3{
    position: relative;
    padding-bottom: 100%;
}
.p2-2-img02{
    position: absolute;
    right: 0;
    width: 40%;
}
.p2-2-text04{
    position: absolute;
    right: 16%;
    top: 45%;
    width: 25%;
}
.p2-2-product01{
    position: absolute;
    /* right: 0; */
    width: 100%;
    top: 10%;
    left: -20%;
}
.p2-2-img03{
    position: absolute;
    right: 0;
    top: 60%;
    width: 60%;
}
.p2-2-text05{
    position: absolute;
    /* right: 30%; */
    top: 82%;
    width: 40%;
    left: 5%;
}
.p2-2-text06{
    position: absolute;
    right: 45%;
    bottom: -15%;
    width: 25%;
}
.p2-2-text-bottom{
    position: absolute;
    bottom: -55%;
    right: 0;
    width: 60%;
}
.p2-2-text01{
    padding: 6% 0;
}
.p2-2-text02{}
.p2-2-text03{
    width: 30%;
}
.p2-2-img01{
    position: absolute;
    left: -35%;
    width: 70%;
    bottom: -75%;
    animation: ball1 5s infinite;
}

@keyframes ball1 {
    0%    { 
        transform: rotate(5deg); 
        padding: 1%;
        opacity: 1;
    }
    20%   { 
        transform: rotate(6deg);
        opacity: 0.8; 
    }
    80%   { 
        transform: rotate(8deg);
        opacity: 0.9; }
    100%  { 
        transform: rotate(5deg); 
        padding: 1%;
        opacity: 1;
    }

   
  }

.p3-title01{
    width: 90%;
    padding: 10% 5% 0 5%;
}
.p3-title02{
    width: 65%;
    padding: 2% 5%;
    
}
.p3-icon03{
    width: 40%;
    float: inline-start;
    padding: 15% 5%;
}
.p3-icons{
    position: relative;
    padding-bottom: 30%;
}
.p3-icon01{
    position: absolute;
    top: 10%;
    width: 15%;
    right: 30%;
}
.p3-icon02{
    position: absolute;
    top: 30%;
    width: 15%;
    right: 5%;
}
.bg-03-2{
    background-color: #fcf9fa;
}

.bg-03-2 > .container{
   
    background-image: url(../image/p3-2-bg02.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 130%;
    position: relative;
}
.p3-2-title01{
    width: 80%;
    padding-top: 10%;
    padding-bottom: 2%;
    margin: 0 auto;
}
.p3-2-group01{
    position: relative;
 
    width: 100%;
}
.p3-2-group01-group{
    position: absolute;
    left: 10%;
    width: 46%;
    padding-top: 5%;
    padding-right: 5%;
}
.p3-2-grouptitle01{
    margin-bottom: 5%;

}
.p3-2-groupframe01{
    position: absolute;
}
.p3-2-group01-item01{
    padding-top: 5%;
}
.p3-2-group01-item02{
    margin-top: 2%;
}

.p3-2-group02{
    position: relative;
    width: 100%;
}
.p3-2-group02-group{
    position: absolute;
    right: 10%;
    width: 40%;
    padding-top: 80%;
}
.p3-2-grouptitle02{
    width: 60%;
    position: absolute;
    left: 20%;
    bottom: 19%;
}
.p3-2-groupframe02{
  
}
.p3-2-group02-item01{

}
.p3-2-group02-item02{

}
.p3-2-group02-item03{

}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .bg-01{
        /* padding-top: 5%; */
        
    }
    .p1-white{
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
    }
    .product-1 {
        padding-bottom: 90%;
    }
    .container{
        /* width: 850px; */
    }
    .bg-02{
        background-image: inherit;
        background-color: #f9f1e6;
    }
    .bg-02-pc{
        /* background-image: url(../image/p2-bg01.png); */
        /* background-size: contain; */
        background-repeat: no-repeat;
        /* background-position: bottom; */
        /* padding-bottom: 110%; */
        position: relative;
    }
    .bg-03 {
        background-image: inherit;
        background-color: #fff9fd;
        padding-bottom: inherit;
    }
    .bg-03-pc{
        /* background-image: url(../image/p3-bg01.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom; */
        padding-bottom: 90%;
        /* position: relative; */
    }
    .bg-03 > .container{
        padding-bottom: inherit;
    }
    .bg-03-2 > .container{
        padding-bottom: inherit;
    }
    .bg-03-2{
        background-image: inherit;
        background-color: #fff9fd;
        padding-bottom: inherit;
    }
    .bg-03-2-pc{
        /* background-image: url(../image/p3-2-bg02.png);
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: 130%; */
        padding-bottom: 130%;
        position: relative;
    }
    .bg-02-2{
        /* background-image: inherit;
        background-color: #fcf9fa; */
        /* padding: inherit; */
    }
    .bg-02-2 > .container {
        padding: inherit;
    }
    .bg-02-2-pc{
        position: relative;
        padding-bottom: 20%;
    
    }
    .p2-btn01-img{
        width: 30%;
    }
    .p2-2-title01{
        width: 60%;
    }
    
    .p2-2-title02 {
        width: 40%;
    }
    .p2-2-img02 {
        position: absolute;
        right: 0;
        width: 30%;
    }
    .p2-2-text04 {
        position: absolute;
        right: 13%;
        top: 33%;
        width: 15%;
    }
    .p2-2-product01 {
        position: absolute;
        /* right: 0; */
        width: 80%;
        top: 10%;
        left: 0%;
    }
    .p2-2-img03 {
        position: absolute;
        right: 0;
        top: 45%;
        width: 45%;
    }
    .p2-2-text05 {
        position: absolute;
        /* right: 30%; */
        top: 60%;
        width: 30%;
        left: 25%;
    }
    .p2-2-text06 {
        position: absolute;
        right: 40%;
        bottom: 15%;
        width: 17%;
    }
    .p2-2-orange{
        position: relative;
    }
    .p2-2-orange-box{
        position: absolute;
        background: #fcf9fa;
        padding: 30% 10%;
        left: -30%;
        width: 30%;
        bottom: -30%;
        z-index: 2;
    }
    .p2-2-img01 {
        position: absolute;
        left: -20%;
        width: 60%;
        bottom: -30%;
        animation: ball1 5s infinite;
    }
    .p2-2-text-bottom {
        position: absolute;
        bottom: -10%;
        right: 10%;
        width: 40%;
    }
    .p2-2-text02 {
        margin-bottom: 5%;
    }
    .p3-2-title01 {
        width: 60%;
        padding-top: 10%;
        padding-bottom: 2%;
        margin: 0 auto;
    }
    .p3-2-group01-group {
        position: absolute;
        left: 23%;
        width: 35%;
        padding-top: 20%;
        padding-right: 5%;
    }
    .p3-2-group01-item02 {
        margin-top: 2%;
        padding-right: 5%;
    }
    .p3-2-group01-item01 {
        margin-top: 2%;
        padding-right: 5%;
    }
    .p3-2-group02-group {
        position: absolute;
        right: 17%;
        width: 30%;
        padding-top: 80%;
    }
    .p3-2-grouptitle02 {
        width: 50%;
        position: absolute;
        left: 20%;
        bottom: 13%;
    }
    .p3-2-group02-item01 {
        margin-top: 2%;
        padding-right: 10%;
    }
    .p3-2-group02-item02 {
        margin-top: 2%;
        padding-right: 10%;
    }
    .p3-2-group02-item03 {
        margin-top: 2%;
        padding-right: 10%;
    }
    .bg-04 {
        /* padding: 10% 3%; */
    }
    .bg-05 {
        /* padding-top: 5%; */
    }
 }