@charset "euc-jp";
/* CSS Document */


/*====common.cssの上書き==================*/
.header-menu a{ color: #872b8b;} 
/*======================*/
#page-top{
	display:none;
    position:fixed;bottom:10px;right:10px;z-index:9999;
    width:50px;height:50px;border-radius:25px;
    border:2px solid #00a1af;
	transform:rotate(90deg);
    transition: transform .5s ease;
}
#page-top div{
	background-image: url("../img/start_deco.png");
    background-size:70%;
    width:40px;height:40px;margin:3px auto ;
    border-radius:20px;
    border:2px solid #872b8b;
}
#page-top:hover{cursor:pointer;transform:rotate(450deg); }


/*====HEADER==================*/
header{position:relative;height:0;z-index:9999;}
.logo{position:fixed;}
.counseling-logo{position:fixed;top:15px;left:40px;}
.order-button_fix{
	display:none;
    color:#fff;background:#00a1af;
    width:150px;height:1.5em;border-radius:.75em;
    text-align:center;
}
@media (max-width: 767px){
    .counseling-logo{top:10px;left:20px;}
    .left-link{position:absolute;top:5px;right:20px;text-align:right;width:100px}
	.left-link_r{top:35px;}
    .order-button_fix{width:120px;margin:5px;position:absolute;top:0px;right:0;}
}



.white-back{display: block;}

.background{
	position: relative;
	margin: 0;
	width: 100vw; height:100vh;
	overflow: hidden;
}
video{
	min-width: 100%;
	min-height:100%;
}
.video-filter{
	position: absolute;
	top:0; left:0;
	width: 100%; height: 100%;
	background:#00a1af;
	background:-webkit-linear-gradient(top, #00a1af 60%, #872b8b);
	background:-moz-linear-gradient(top, #00a1af 60%, #872b8b);
	background:linear-gradient(top, #00a1af 60%, #872b8b);
	opacity: .3;
}
.q-wrapper{
	position: absolute;
	padding: 0;
	width: 70vw; height: 65vh;
	top: calc(50% - 32.5vh); left: calc(50% - 35vw);
	background-color: rgba(255,255,255,.7);
	border-left: solid 4px #872b8b;
	border-right: solid 4px #00a1af;
}
.q-wrap{
	position: absolute;
	left: 0;
	width: 100%; height: 4px;
	background:-webkit-gradient(linear, left top, right bottom, from(#872b8b), to(#00a1af));
	background:-moz-linear-gradient(left, #872b8b, #00a1af);
	background:linear-gradient(left, #872b8b, #00a1af);
}
.q-wrap_top{ top: 0;}
.q-wrap_bottom{ bottom: 0;}

.question{ 
	margin-bottom: 70px;
	text-align: center;
}
 @media (max-width: 767px){
	 .q-wrapper{
		width: 90vw; height: 76vh;
		top: calc(50% - 38vh); left: calc(50% - 45vw);
	 }
 }


/*====QUESTION==================*/
.q-start{
	width: 70%; height: 50px;
	max-width:200px;
	text-align: center;	
}
.question h2{
	height: 80px;
	line-height: calc(80px + 5vh);
	color: #00a1af;
}
.question-line{
	margin: 0 auto;
	width: 30%; height: 3px;
	background-color: #00a1af;
}
.choices{
	width: 100%;
	height: calc(60vh - 80px - 16px);
	padding: 1px;
	height: calc(65vh - 95px);
}
.select-button{
    position: relative;
    z-index:1;
	overflow:hidden;
	width: 40%; height: 2em;
	border-radius: 1em;
	margin: calc(16.25vh - 44px - .5em) auto;
	text-align: center;
	line-height: 2em;
	color: #fff;
	font-weight: 500;
	display: block;
}
.select-button:hover{
	opacity: .8;
	cursor: pointer;
}
.select-button div{
	position:absolute;
    top:0; left: 0;
    width: 250%; height: 2em;
    z-index: -1;
	transition: all .5s ease;
	background:#00a1af;
	background:-webkit-linear-gradient(right, #00a1af 45%, #872b8b 55%);
	background:-moz-linear-gradient(right, #00a1af 45%, #872b8b 55%);
	background:linear-gradient(right, #00a1af 45%, #872b8b 55%); 
}
.selected div{
	left:-150%;
	background:#872b8b;
	background:-webkit-linear-gradient(right, #00a1af 45%, #872b8b 55%);
	background:-moz-linear-gradient(right, #00a1af 45%, #872b8b 55%);
	background:linear-gradient(right, #00a1af 45%, #872b8b 55%); 
}
.q4 .choices{padding-top: calc(8.125vh - 22px - .25em); }
.q5 .choices{padding-top: calc(6.5vh - 9.6px - .8em); }
.q4 .select-button,
.q5 .select-button{display: inline-block;}
.q4 .select-button{margin: calc(8.125vh - 22px - .25em) 20px;}
.q5 .select-button{margin: calc(6.5vh - 9.6px - .8em) 20px;}
.backnext{
	display:block;
	position: relative;
	left: 20%;
	width: 60%;
}
.backnext div{
	position: absolute;
	top: calc(50px + 2.5vh);
	width: 8vw; height: 2em;
	min-width: 8em;
	line-height: 1.7em;
	border-radius: 1em;
	border: solid 2px;
	background-color: rgba(255,255,255,.7);
	font-family: 'Oswald', sans-serif;
    font-weight: 500;
	transition: all .3s ease;
}
.backnext div:hover{ cursor: pointer; transform: scale(.98);}
.back-button{
	left: 0;
	color: #872b8b;
	border-color: #872b8b;
	transition: all .3s ease;
}
.back-button:hover{background-color: #872b8b; color: #fff;}
.next-button{
	right: 0;
	color: #00a1af;
	border-color: #00a1af;
	display: none;
	transition: all .3s ease;
}
.next-button:hover{background-color: #00a1af; color:#fff;}
.q1{ display: block;}
.q2,
.q3,
.q4,
.q5,
.first,
.second,
.third{ display: none;}



@media (max-width: 991px){
	.question h2{font-size:3.4vw;}
	.choices{}
    .select-button{width:90%;}
	.q4 .choices{ padding: 3vh 0 calc(15vh - 2em);}
	.q5 .choices{ padding: 3vh 0 calc(8vh - 2em);}
	.q4 .select-button{ margin: calc(4vh - 1.1em);}
	.q5 .select-button{ margin: calc(3vh - 1.1em);}
}

@media (max-width: 767px){
	.question h2{
		 height: inherit;
		 line-height: inherit;
		 font-size: 4.5vw;
		 margin-top: 20px;
	}
	.choices{
		height: calc(76vh - 20px - 5vw);
        padding:calc(20vh - 2em) 0;
	}
	.select-button{
		 width: 90%;
		 font-size: 4vw;
		 margin: calc(8vh - 2em) auto;
	}
	 .backnext{
		 width: 90%;
		 top: inherit; left: 5%;
	}
	.backnext div{
		top:0;
		top: -10px;
		min-width: 7em;
	}
	.q4 .choices{ padding: calc(15vh - 2em) 0;}
	.q5 .choices{ padding: calc(8vh - 2em) 0;}
	.q4 .select-button,
	.q5 .select-button{ margin: calc(4vh - 1.1em);}
 }

/*====RESULT==================*/
.r-wrapper,
.footer_counseling{ display: none;}/*＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.r-wrapper{ overflow: hidden;}

.lead{color:#00a1af; font-size:1.5em;margin-bottom:10px;}
.comment{color: #872b8b;margin-bottom:50px;font-size:1.3em;}
.title,
.lead,
.comment{margin-left:10vw;}
@media (max-width: 767px){
    .lead{font-size:1.3em;line-height:1.15em;}
    .comment{font-size:1em;}
    .title,
    .lead,
    .comment{margin-left:0;,}
}


/*====CONCEPT==================*/
#r-concept .concept-top{position:relative;height:50vh}
#r-concept .concept-r,
#r-concept h1{position:absolute;}
#r-concept .concept-r{
    width:25vh;height:50vh;
    margin-left:10vw;
    /*margin-right:calc(30vw - 25vh);*/
    border-radius:0 25vh 25vh 0;background:#00a1af;
}
#r-concept h1{
    width:100%;padding-right:10vw;
    font-size:27vh; line-height:25vh;color: #00a1af;
    text-align: right;
}
#r-concept h1 span{color: #872b8b;}
#r-concept .lead{margin:50px 0 30px 10vw;font-size:2.5em;}
#r-concept h1,
#r-concept .comment{margin-right:10vw;margin-bottom:50px;}
.concept-img{background-image: url("../img/concept.jpg");}

@media (max-width: 991px){
	#r-concept .concept-top{height:50vw;}
    #r-concept .concept-r{width:20vw;height:40vw;margin-left:0;}
    #r-concept h1{font-size:20vw; line-height:1;padding-right:0;}
}

@media (max-width: 767px){
    #r-concept .concept-top{height:120px;}
    #r-concept .concept-r{width:60px;height:120px;}
    #r-concept h1{font-size:70px; line-height:60px;}
    #r-concept .lead{margin:30px 0 5px; font-size:1.7em;}
    #r-concept .comment{margin-right:0;margin-bottom:20px;}
}

/*====SUMMARY==================*/
#summary .comment{margin-right:10vw;}
.result-wrap{margin:0 10vw;}
.q-result{
	position: relative;/*.result-line .result-point*/
	width: 100%; height: 100px;
	margin-bottom: 50px;
	float: left;
}
#summary h2{ color: #00a1af;}
.result-line{
	position: absolute;/*.q-result*/
	top: 50px;
	width: 100%; height: 50px;
}
.result-line span{
	color: #872b8b;
	display: inline-block;
	vertical-align: middle;
}
.result-line :first-child,
.result-line :last-child{
	width: 7em; height: 30px;
	padding: 0 1em;
}
.result-line :first-child{
	border-right: solid 2px #872b8b;
	text-align: right;
}
.result-line :last-child{ border-left: solid 2px #872b8b;}
.result-line :nth-child(2){
	width: calc(100% - 14em); height: 2px;
	background-color: #872b8b;
}
.result-point{
	position: absolute;/*.q-result*/
	top: 55px; left: calc(50% - 10px);
	width: 20px; height:20px;
	border-radius: 10px;
	background-color: #00a1af;
	transition: ease 1s;
}
.result-list li{
	display: none;
	color: #872b8b;
}
.re-counseling{margin-left:10vw;margin-top:60px;}
.re-counseling .color-button{width:25vw}
.re-counseling p{margin-top: 10px;color: #872b8b;font-size:1.2em;}

 @media (max-width: 767px){
	.result-wrap{ margin-left: 0; margin-right:0;}
     #summary .comment{margin-right:0;}
	.r-wrapper h1{ font-size: 2.3em;}
	.r-wrapper h2{ font-size: 1.5em;}
	.result-line{ font-size: .9em; line-height: 30px;}
	.result-line :first-child,
	.result-line :last-child{padding: 0 .25em;}
	.result-line :first-child{ width: 4.5em;}
	.result-line :last-child{ width: 3.5em;}
	.result-line :nth-child(2){ width: calc(100% - 9em);}
	.result-point{ left: calc(50% - 10px);}
    .re-counseling{margin-left:0;width:100%;text-align:center;}
    .re-counseling .color-button{width:80%;margin:0 auto;}
    .re-counseling p{font-size:1em;}
 }
/*====PRESCRIPTION==================*/
#prescription .title,
#prescription .expo{ margin-left: 10vw;}
.presc-title{
	color: #fff;font-size:20px;
    height:150px;
    padding:10px;
    margin-left:-15px;
    border-radius:0 75px 75px 0;
    background: #00a1af;
}
.presc-title p{font-size:.9em;font-family:inherit}
.result-presc{
	width: 70%; height:30px;line-height:25px;
	margin: 30px auto 20px;
	white-space: nowrap;
    background: #fff;
    color:#00a1af;
}
.result-presc:hover{cursor: inherit;}
#prescription .expo{ display: none;}
.expo h2{
	color: #00a1af;
	font-size: 1.6em;
}
.expo div{
	width: 60%; height: 3px;
	background-color: #00a1af;
}
#prescription .expo p{margin: 30px 0;}
.presc_img{ background-image: url("../img/presc.jpg");}
.modal-content{overflow-y:scroll;min-height:50vh;}
@media (max-width: 991px){
	#prescription .comment,
	#fragrance .comment,
	#usp .comment{margin-right:10vw;}
	.presc-title{margin:0 0 70px -15px}
}
@media (max-width: 767px){
	#prescription .comment,
	#fragrance .comment,
	#usp .comment{margin-right:0;}
	.presc-title{margin: 20px 0 50px -15px;}
    .presc-title p{font-size:.75em;line-height:0;}
    #prescription .expo p{font-size: .9em;}
	#prescription .title,
	#prescription .expo{ margin-left: 0;}
	.modal-content{font-size:.8em;}
 }
.presc_1,.presc_2,.presc_3,.presc_4,.presc_5,.presc_6,
.presc_7,.presc_8,.presc_9,.presc_10,.presc_11,.presc_12{display:none;}

/*---element------*/
#element{margin-top:-50px;}
.element{ display: none; padding:20px;}
.ele-img,
.ele-text{ width: 100%;}
.ele-img{
	height:30vw;
	margin: 0 auto;
}
.ele-text{color: #00a1af; margin: 0;}
.ele-text h3{
	font-size: 1.7em;
	width: 5em;
	border-bottom: solid 2px #00a1af;
	margin-bottom: 20px;
}
.ele-text h4{ font-size: 1.2em;margin-bottom:0;}
.ele-text p{ font-size: 1em; height: 1em;margin:0;}
.ele-text p:last-child{margin:0 0 85px;}
.ele-text .component{
	width: 100%; height: 2em;
	color: #fff;
	border-radius: 1em;
	background-color: #872b8b;
	margin: 10px auto;
	border: 1px solid #fff;
}
.component:hover{ cursor: pointer;}
.ele_1A .ele-img{ background-image: url(../img/PHOTO_PRODUCT_1-A_T_WEB.jpg);}
.ele_1B .ele-img{ background-image: url(../img/PHOTO_PRODUCT_1-B_T_WEB.jpg);}
.ele_2A .ele-img{ background-image: url(../img/PHOTO_PRODUCT_2-A_T_WEB.jpg);}
.ele_2B .ele-img{ background-image: url(../img/PHOTO_PRODUCT_2-B_T_WEB.jpg);}
.ele_2C .ele-img{ background-image: url(../img/PHOTO_PRODUCT_2-C_T_WEB.jpg);}
.ele_3A .ele-img{ background-image: url(../img/PHOTO_PRODUCT_3-A_T_WEB.jpg);}
.ele_3B .ele-img{ background-image: url(../img/PHOTO_PRODUCT_3-B_T_WEB.jpg);}

@media (max-width: 991px){
    .ele-text p:last-child{margin:0 0 100px;}
}
@media (max-width: 767px){
    #elements{margin-top: 50px;}
    .ele-text h3{margin-bottom:10px;}
    .ele-text h4{font-size:1em;margin:0;}
    .ele-text p{height:inherit;margin:0 0 10px;line-height:1.4em}
    .ele-img{ width: 100%; height: 20vh; margin-top:7px; background-position: top;}
	.ele-text{ width: auto;}
	.ele-text .purple{ height: inherit;}
    .ele-text p:last-child{margin:0;}
 }
 @media (min-width: 1140px){
    .ele-img{ height:380px;}
}
 
/*====Fragrance==================*/
.fragrance_img{background-image:url("../img/fragrance.jpg");}

/*====USP==================*/
.usp_img{background-image:url("../img/usp.jpg");}

/*====METHOD==================*/
#method .comment{margin-right:10vw;}
.method-img{
	background-image: url("../img/method.jpg");
	margin-left:10vw;height:40vw;
    background-position:top;
}
.method-2_img{background-image: url("../img/method_2.jpg");}
.method-before,
.step-comment{
    text-align:center;
    color:#872b8b;
    border: 2px #872b8b solid;
}
.method-before{border-radius:2em; padding:5px;}
.step-wrap{margin-right:10vw;font-size:1.1em;}
.step{
    margin:30px 0;
    height:100%;
    display:flex;
}
.step-no{
    float:left;
    position:relative;margin:auto;
    width:60px;height:60px;border-radius:30px;
    background:#00a1af;
}
.step-no div{
    position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;
    width:50px;height:50px;line-height:45px;border-radius:25px;
    text-align:center;color:#fff;
    border:2px #fff solid;
}
.step-comment{
    float:left;text-align:left;padding:10px;
    width:calc(100% - 70px);margin-left:10px;
}
.step-arrow{
    clear:left;
    display:block;
    border-top: 12px solid #872b8b;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    width:15px;height:15px;
    margin:-15px auto;
}
.method-point{
    margin-top:30px;
    margin-left:10vw;
    color:#00a1af;
}
.point-title{font-size:2em;}
.point-comment{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size:1.1em;line-height:1.3em;
    background:#00a1af;color:#fff;
    padding:15px;margin:0 0 10px;
	text-align: left;
}
.point-small{color:#872b8b; font-size:1em;}

@media (max-width: 991px){
	/*#method .comment{font-size:20px;}*/
	.method-img{width:100%;height:60vw;margin-left:0;}
	.method-point{margin-right:10vw;}
    .method-before{
        width:90%;height:3em;line-height:initial;
        border-radius:2em;
        padding-top:.7em;
        margin:50px auto 30px 9vw;/*font-size:18px;*/
    }
    .step{margin-left:9vw}
    .step-no{width:45px;height:45px;}
    .step-no div{width:40px;height:40px;line-height:37px;}
    .step-comment{
        left:50px;padding:10px;font-size:.95em;
        width:calc(100% - 50px);line-height:1.2;
    }
    .step-arrow{margin: 10px 0 0 calc(50vw - 30px);}
    .point-comment{font-size:1em;}
    .point-small{font-size:.88em;margin-bottom:50px;}
}
@media (max-width: 767px){
    #method .comment,
    .step-wrap{margin-right:0;/*font-size:4vw;*/}
    .method-img,
    .method-point{margin-left:0;}
    .method-point{margin-right:0;}
    .method-img{width:100%;height:92vw;}
    .method-before{
        width:100%;height:4em;
        margin:50px auto 30px;
    }
    .step{margin:20px 0}
    .step-comment{padding:3px;font-size:15px;}
    .step-arrow{margin:-10px calc(50% + 10px);}
    .point-small{font-size:.9em;}
}


/*====ORDER==================*/
.buy-style{margin-top:50px;}
.buy-style_1{margin-left:10vw;padding-right:10%;}
.buy-style_2{
    margin-right:10vw;border-left:2px solid #872b8b;
    padding-left:10%;
    margin-left:-27px
}
.order-img{
    background-image: url("../img/order.jpg");
    width:calc(100% - 10vw);height:66vw;
}
#order .comment{margin-right:10vw;}
#order .comment .small{margin-top:30px;}
.buy-style_title{
    font-size:1.2em;
    width: 50%; height: 2em;
    line-height:2em;
    background-color: #00a1af;
}
.buy-contents{
    width: 100%;height:170px;
    border: 2px solid  #872b8b;
    margin:20px 0;padding: 10px;
    font-size:1.1em;
}
.buy-contents .small{font-size: .9em; margin-top: 10px;}
.sales-point{margin:30px 0;}
.sales-point div{
	/*display: table-cell;*/
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	width: 86px; height: 86px;
	border-radius: 43px;
	background-color: #00a1af;
	color: #fff;
	padding: 16px 0;
}
.sales-point .sales-point_1{font-size: 20px; line-height: 22px;}
.sales-point .sales-point_1 span{
	line-height: 14px;
	font-size: 10px;
	display: block;
}
.sales-point .sales-point_2{ font-size: 22px; line-height: 26px; }
.sales-point .sales-point_3{font-size: 26px;}
.sales-point .sales-point_3 span{
	font-size: 15px;
	line-height: 5px;
	display: block;
}
.sales-point .sales-point_4{font-size: 26px; line-height:28px;}
.sales-point .sales-point_4 span{
	font-size: 14px;
	line-height: 22px;
	display: block;
}
.sales-point .sales-point_none{background-color: #fff; border: 2px solid #00a1af;}
.price{
	color: #00a1af;
	margin: -10px 0 30px;
	font-family: 'Oswald', sans-serif;
    font-weight: 500;
}
.current,
.original{ display: inline-block;}
.current-price{ font-size: 2em;}
.original-price{
	font-size: 1.1em;
	height: 1.1em;
	position: relative;/*div*/
}
.original-price div{
	position: absolute;/*.original-price*/
	top: .7em; left: -5%;
	width: 105%; height: 2px;
	background-color: #872b8b;
}
.original div{
	display: inline-block;
	margin: 0 2px;
}
/*.order_1{ background-image: url(../img/PHOTO_ORDER_1_WEB.jpg);}*/
.presc{ z-index: 1000;}
.price span{font-size:.7em;}
@media (max-width: 991px){
	#order .lead{margin-right:10vw;}
}
@media (max-width: 767px){
    #order{margin-bottom:50px;}
	#order .lead{margin-right:0;}
    #order .comment{margin-right:0;margin-bottom:0;}
    #order .comment .small{font-size:.9em;}
    /*.buy{margin:0;}*/
    .buy-style{margin:10px 0 50px;padding:0;border:none;}
    .buy-style_1{margin-top:50px;}
    .buy-contents{margin:10px 0;font-size:1em;}
    .sales-point{ text-align: center;}
	.sales-point div{
		width: 80px; height: 80px;
		margin: 0 5px;
		padding: 13px 0;
	}
	.sales-point .sales-point_3{font-size: 25px;}
    .current-price{ font-size: 1.8em;}
    .original-price{font-size: 1.1em;}
    .original div{margin: 0 2px;}
	.presc{ position: relative;}
 }




/*====BOTTLE==================*/
.bottle-img{background-image: url("../img/bottle.jpg");background-repeat:no-repeat;}
#bottle .colorme-repeat-checkout{display:block;}
@media (max-width: 767px){
    #bottle .comment{margin-bottom:0;}
    .bottle-img{
        width:100%;height:66vw;
    }
    #bottle .buy-style{margin-top:70vw;}
}




/*====カートJS==================*/
.colorme-repeat-checkout {
	text-align: center;
	display: none;
	border-radius: 1.2em;
	width: 100%; height: 2.4em;
	line-height: 2em;
	font-size: 1.3em;
	color: #fff;
	border: 1px solid #fff;
	margin: 0 auto 30px;
	background:#00a1af;
	background:-webkit-linear-gradient(right, #00a1af 70%, #872b8b);
	background:-moz-linear-gradient(right, #00a1af 70%, #872b8b);
	background:linear-gradient(right, #00a1af 70%, #872b8b);
	font-family: 'Oswald', sans-serif;
    font-weight: 500;
	position:relative;z-index:1
}
.colorme-repeat-checkout:hover {cursor: pointer; color: #872b8b}
.cartjs_product_num{ display: none;}