@charset "UTF-8";
/* CSS Document */

/*------------------------------------------------------------------------------
spakit
------------------------------------------------------------------------------*/

section{
	width: inherit;
	padding: inherit;
	margin: 0 auto;
}


.main-contents{
	background: #fff;
    box-shadow: 0 10px 25px 0 rgb(0 0 0 / 26%);
	width: 100%;
    max-width: 650px;
    margin: 0 auto;
    overflow: hidden;
}



.contents01,.contents02,.contents03{
	width: 100%;
    max-width: 650px;
    margin: 0 auto;
    overflow: hidden;
}

/*fv*/

.fv .fv_main {
	background-image:url(https://jurlique-japan.com/topics/jurliquespakit/img/fv_back01_02.jpg);
	background-size: cover;
	text-align: center;
}



.fv .fv_main .product{
	 width: 100%;
    margin: 170% auto 0;
}

.fv .fv_main .point{
	width: 100%;
    margin: 4% auto 14%;
}


/*.fv .fv_recommend .text{
	    width: 80%;
    margin: 4% auto 20%;
}
*/

/*cv*/


.cv {
	background:#fff;
	
}



.cv_btn{
	margin: 0px auto;
    text-align: center;
	
}

.cv .cv_recommend{
	background-image:url(https://jurlique-japan.com/topics/jurliquespakit/img/fv_back02_02.jpg);
	background-size: cover;
	text-align: center;
}


.cv .cv_recommend .rectext{
	    width: 80%;
       margin: 45% auto 24%;
}

.btn_move{
   width: 92%;
    margin: 0% auto 6%;
}

.cv .cv_tokuten{
	    text-align: center;
}

.cv .cv_tokuten img{
	 width: 90%;
    margin: 0 auto 14%;
}

.cv_uv_title{
	    width: 90%;
    margin: 0 auto 4%;
}

.cv_uv_comment{

    width: 90%;
    margin: 0 auto;
    padding-bottom: 4%;
	}

.cv_uv_comment img{
    margin-bottom: 4%;
	}


/*contents01*/

.contents01 {
	background-image:url(https://jurlique-japan.com/topics/jurliquespakit/img/contents01_back.jpg);
	background-size: cover;
	margin: 0px auto;
	text-align: center;
}

.contents01 .answer{
	margin: 46% auto 0;
}

.contents01 .oil_about .sarani{
	width: 40%;
    margin: 3% auto 8%;
}

.contents01 .oil_about .product{
	    width: 80%;
    margin: 2% auto;
}

.contents01 .oil_about .about{
	    width: 86%;
    margin: 4% auto 24%;
}

.contents01 .oil_about .fix{
	    width: 67%;
    margin: 26% 16% 87% 0;
}


/*contents02*/


.contents02 .reason{
	background-image: url(https://jurlique-japan.com/topics/jurliquespakit/img/contents02_back01.jpg);
    background-size: cover;
	margin: 0px auto;
	text-align: center;
	
	
}

.contents02 .reason img{
	width: 90%;
   margin: 48% auto 10%;
	
}

.contents02 .reason_about{
	background-image: url(https://jurlique-japan.com/topics/jurliquespakit/img/contents02_back02.jpg);
    background-size: cover;
	margin: 0px auto;
	text-align: center;
	
}

.contents02 .reason_about .about01{
	    margin: 15% 0 5% 5%;
    width: 95%;
}

.contents02 .reason_about .about02{
	    margin: 0 5% 5% 0;
    width: 95%;
}

.contents02 .reason_about .about03{
	     margin: 0 0 18% 5%;
    width: 95%;
}


/*contents03*/

.contents03 .bathcare{
	background-image: url(https://jurlique-japan.com/topics/jurliquespakit/img/contents03_back01.jpg);
    background-size: cover;
	margin: 0px auto;
	text-align: center;
	}

.contents03 .bathcare .title{
	    width: 100%;
    margin: 26% auto 0;
	}

.contents03 .bathcare .about{
	    width: 90%;
    margin: 0 auto 18%;
	}

.contents03 .bathcare .head{
	width: 90%;
    margin: 0 10% 16% 0;
	}


.contents03 .selfcare{
	background-image: url(https://jurlique-japan.com/topics/jurliquespakit/img/contents03_back02.jpg);
    background-size: cover;
	margin: 0px auto;
	text-align: center;
	position: relative;
	}



.contents03 .img-haikei img{
	width: 90%;
    margin: 50% auto 17%;
	}

.contents03 video{
	position: absolute;
    top: -1%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 80%;
	}


/*contents04 使い方*/

.contents04{
	background-image: url(https://jurlique-japan.com/topics/jurliquespakit/img/howto_back_02.jpg);
    background-size: cover;
	margin: 0px auto 14%;
	text-align: center;
	}

.contents04 .howto_body{
	    margin-top: 50%;
}

.contents04 .howto_mist{
	    margin-bottom: 10%;

}


/*contents05 秘密*/

.contents05 .inner-block{
	margin: 6%;
	}

.contents05 .title{
	    width: 90%;
    margin: 4% auto 8%;
}

.contents05 .himitsu_key{
	        margin: 6% 0 8%;
}

/*contents06 使い方*/

.contents06{
	background-image: url(https://jurlique-japan.com/topics/jurliquespakit/img/kodawari_back02.jpg);
    background-size: cover;
	    margin: 0px auto 0;
    text-align: center;
    padding-bottom: 7%;
	}

.contents06 .himitsu{
	    width: 90%;
    margin: 20% 2% 8% 0;
}

/*contents07 使い方*/

.contents07{
	background-image: url(https://jurlique-japan.com/topics/jurliquespakit/img/kodawari_back03.jpg);
    background-size: cover;
	margin: 0px auto 0;
	text-align: center;
	}

.contents07 .rose{
	    width: 94%;
    margin: 6% auto 0;
	padding-bottom: 4%;
}

/*contents08 使い方*/

.contents08{
	background-image: url(https://jurlique-japan.com/topics/jurliquespakit/img/kodawari_back04.jpg);
    background-size: cover;
	margin: 0px auto 14%;
	text-align: center;
	}

.contents08 .inner-block{
    width: 90%;
    margin: auto;
}

.contents08 .farm-about{
	    margin: 20% 0 0;
	    width: 93%;
}

.contents08 .map{
	margin: 2% 0;
}

.contents08 .farm-about2{
	padding: 6% 5% 40% 0;
}


/*contents09 使い方*/

.contents09{
	background:#fcf7ec;
	padding-bottom: 8%;
    margin-bottom: 16%;
	}

.contents09 .title{
	    width: 70%;
    margin: 0 auto 4%;
    padding-top: 16%;

}

.contents09 .voice{
	width: 90%;
    margin: auto;
}

/*ボタンの動き*/

.btn_move{   
    animation-name:btn_move;	/* アニメーション名の指定 */
    animation-delay:0s;		/* アニメーションの開始時間指定 */
    animation-duration: 3s;	/* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き（徐々に早く徐々に遅く）*/
    animation-iteration-count: infinite; /* アニメーションをループさせる */
}
 
@keyframes btn_move {
    0% {
        transform: scale(1);
    }
 
    40% {
        transform: scale(1);
    }
 
    50% {
        transform: scale(1.1);
    }
    
    60% {
        transform: scale(1);
    }
     
    100% {
        transform: scale(1);
    }
}



.sp-copy {
	max-width: 650px;
    margin: 0 auto 0;
    text-align: center;
    background-color: #272420;
    padding: 14px 20px;
    letter-spacing: -0.03em;
    font-size: 14px;
    color: #fff;
}