@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

#salon,
#contents{
	display:none !important;
	margin:0;
}




#christina{
	text-align:center;
	line-height:1.8;
}


#christina .temp_box{
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:90px 0;
}

#christina h3{
	width:90%;
	font-size:70px;
	text-align:center;
	font-weight:300;
	letter-spacing:5px;
	margin:0 auto 90px;
}

#christina h3 span{
	font-size:16px;
	display:block;
}

#christina .temp_box h3{
	font-size:30px;
}


#christina .temp_box p{
	width:100%;
	text-align:left;
	font-size:16px;
	line-height:2.0;
}

@media only screen and (max-width: 560px) { 

#christina h3{
	font-size:36px;
	letter-spacing:2px;
	line-height:1.5;
	margin-bottom:30px;
}

#christina .temp_box{
	max-width:90%;
	padding:30px 0;
}


}


#christina #mediaarea{
	width:100%;
}

#christina #mediaarea iframe{
	width:100%;
}





/*
intro
-------------------------------------------------------------------------------------------*/
#christina #intro{
	background:#E3EBF0;
	padding:80px 0;
}

#christina #intro #inner{
	width:90%;
	max-width:1000px;
	margin:auto
}

#christina #intro h2{
	font-size:40px;
}

#christina #intro p{
	margin-bottom: 30px;
	text-align: left;
	line-height:1.8;
}


#christina #intro #text{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin:60px auto 0;
}

#christina #intro #text dl{
	width:46%;
	text-align:left;
}

#christina #intro #text dt{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	margin-bottom:20px;
}

#christina #intro #about{
	border:1px solid #999;
	padding:80px 0;
	margin-top:50px;
}

#christina #intro #about p{
	width:80%;
	margin:20px auto 0;
}


@media only screen and (max-width:755px) { 
#christina #intro{
	padding:40px 0;
}
#christina #intro h2{
	font-size:22px;
	font-weight:bold;
	margin-bottom:20px;
	letter-spacing:normal;
}

#christina #intro #text{
	display:block;
	margin:30px auto 0;
}

#christina #intro #text dl{
	width:100%;
	margin-bottom:40px;
}

#christina #intro #text dt{
	font-size:20px;
	margin-bottom:10px;
}

#christina #intro #about{
	padding:40px 0;
}
}



/*
特徴
-------------------------------------------------------------------------------------------*/

#christina #point{
	padding:40px 0;
	position:relative;
}

#christina #point img{
	object-fit:cover;
	height:780px;
}

#christina #point #inner{
	width:90%;
	max-width:600px;
	margin:auto;
	width:90%;
	position:absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


#christina #point #inner h4{
	font-size:40px;
	font-weight:normal;
	margin-bottom:60px
}

#christina #point #inner h4 span{
	border-bottom:5px solid #65A9C2;
	padding:0 5px 20px;
}

#christina #point #inner ul{
	text-align:left;
	display:inline-block;
}

#christina #point #inner ul li{
	background:url(../../img/special/christina/icon.png) no-repeat;
	padding-left:35px;
	margin-bottom:15px;
}



@media only screen and (max-width:768px) { 
	#christina #point img{
		height:580px;
		object-position:left;
	}
}


@media only screen and (max-width:640px) { 
	#christina #point img{
		height:460px;
	}
	
	#christina #point #inner h4{
		font-size:23px;
		margin-bottom:40px
	}
	
	#christina #point #inner h4 span{
		border-bottom:3px solid #65A9C2;
		padding:0 5px 10px;
	}
	
	#christina #point #inner ul{
		text-align:left;
		display:inline-block;
	}
	
	#christina #point #inner ul li{
		padding-left:32px;
		margin-bottom:15px;
	}

}






/*
特許
-------------------------------------------------------------------------------------------*/
#patent{
	width:90%;
	max-width:1000px;
	margin:30px auto;
}

#patent h5{
	font-size:40px;
	font-weight:normal;
}

#patent h5 span{
	font-size:25px;
	display:block;
}

#patent #inner{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:center;
	margin-top:40px;
}

#patent #inner p{
	width:40%;
}


#patent #inner dl{
	width:60%;
	text-align:left;
}

#patent #inner dt{
	font-size:25px;
}

#patent #inner dt span{
	font-size:30px;
	background:linear-gradient(transparent 40%, #EADCAA 40%);
}

#patent #inner dd{
	margin-top:30px;
}


@media only screen and (max-width:620px) { 
	#patent h5{
		font-size:25px;
	}
	
	#patent h5 span{
		font-size:22px;
	}
	
	#patent #inner{
		display:block;
		margin-top:20px;
	}
	
	#patent #inner p{
		width:60%;
		margin:0 auto 20px;
	}
	
	#patent #inner dl{
		width:100%;
	}
	
	#patent #inner dt{
		font-size:22px;
	}
	
	#patent #inner dt span{
		font-size:28px;
	}
	
	#patent #inner dd{
		margin-top:20px;
	}
}




/*
beforeafter
-------------------------------------------------------------------------------------------*/

#b_a{
	background:#E3EBF0;
	padding:80px 0;
	margin-top:80px;
}


#b_a #bg{
	width:90%;
	max-width:1000px;
	margin:auto;
	padding:40px 0;
	background:#fff;
}

#b_a #inner{
	width:80%;
	margin:40px auto;
	background:#fff;
}

#b_a #inner h4{
	font-size:40px;
	margin-bottom:20px;
}

#b_a #inner p{
	text-align:left;
}


#b_a #inner .box{
	margin:80px auto 0;
}

#b_a #inner .box h5{
	width:100%;
	font-size:50px;
	border-top:2px solid #65A9C2;
	border-bottom:2px solid #65A9C2;
	margin-bottom:40px;
	color:#65A9C2;
	font-weight:normal;
	letter-spacing:2px;
}

#b_a #inner .box .before{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}

#b_a #inner .box .before p{
	width:45%;
	background:#B1CCD3;
	color:#fff;
	padding:5px 20px 20px;
}

#b_a #inner .box .before p:before{
	content:"BEFORE";
	display:block;
	text-align:center;
	font-size:30px;
}


#b_a #inner .box .before dl{
	width:41%;
	text-align:left;
}

#b_a #inner .box .before dt:first-child{
	font-size:30px;
	color:#006479;
}

#b_a #inner .box .before dt{
	font-size:20px;
}

#b_a #inner .box .before dd{
	margin-top:20px;
}


#b_a #inner .box .after{
	max-width:580px;
	background:#016479;
	color:#fff;
	padding:5px 20px 30px;
	margin:50px auto 0;
}

#b_a #inner .box .after:before{
	content:"AFTER";
	display:block;
	text-align:center;
	font-size:30px;
}

@media only screen and (max-width:720px) { 
	#b_a{
		padding:60px 0;
	}
	
	#b_a #inner{
		margin:0px auto;
	}
	
	#b_a #inner h4{
		font-size:26px;
		margin-bottom:10px;
	}
	
	#b_a #inner .box{
		margin:60px auto 0;
	}
	
	#b_a #inner .box:nth-of-type(1){
		margin-bottom:100px;
	}
	
	#b_a #inner .box h5{
		font-size:40px;
		margin-bottom:20px;
	}
	
	#b_a #inner .box .before p{
		width:100%;
	}
	
	#b_a #inner .box .before dl{
		width:86%;
		margin-top:15px;
	}
	
	#b_a #inner .box .before dt:first-child{
		font-size:24px;
	}
	
	#b_a #inner .box .before dd{
		margin-top:5px;
	}
	
	#b_a #inner .box .after{
		margin:30px auto 0;
	}
	
}















/*
秘密
-------------------------------------------------------------------------------------------*/
#secret{
	max-width:1400px;
	margin:80px auto;
	position:relative;
}

#secret #inner{
	width:90%;
	max-width:900px;
	text-align:left;
	position:absolute;
	top: 50%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:auto;
}

#secret #inner dl{
	width:60%;
	max-width:580px;
}
#secret dt:first-child{
	font-size:25px;
}

#secret dt{
	font-size:40px;
	margin-bottom:20px;
	line-height:1.5;
}

#secret p{
	text-align:right;
}


@media only screen and (max-width:1200px) { 
#secret #inner dl{
	width:49%;
}
}

@media only screen and (max-width:1000px) { 
#secret{
	position:static;
}

#secret #inner{
	position:static;
	top: 0;
	left:0;
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
}

#secret #inner dl{
	width:100%;
	max-width:900px;
	margin:auto;
}
#secret p{
	margin-top:0px;
}

}

@media only screen and (max-width:480px) { 
#secret dt:first-child{
	font-size:22px;
}
#secret dt{
	font-size:30px;
	margin-bottom:10px;
}
}




/*
成分
-------------------------------------------------------------------------------------------*/
#compornent{
	background:#ebebeb;
	padding:80px 0;
}

#compornent .box{
	background:#fff;
	width:90%;
	max-width:1000px;
	padding:50px 0 90px;
	margin:0 auto 20px;
}

#compornent .box h4{
	width:100%;
	font-size:40px;
	margin:40px 0;
	font-weight:normal;
	letter-spacing:2px;
}

#compornent .inner{
	width:75%;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}

#compornent .box:nth-of-type(2) .inner{
	flex-direction:row-reverse;
}

#compornent .inner div{
	width:32%;
}	

#compornent .inner p{
	width:60%;
	text-align:left;
	line-height:1.8;
}	


@media only screen and (max-width:980px) { 
#compornent .box h4{
	margin: 0 auto 40px;
	width:90%;
}
}

@media only screen and (max-width:720px) { 
#compornent{
	padding:60px 0;
}

#compornent .box{
	padding:50px 0;
}

#compornent .box h4{
	font-size:21px;
	letter-spacing:normal;
}

#compornent .inner{
	width:80%;
	margin:auto;
	display:block;
}

#compornent .inner div{
	width:100%;
	margin-bottom:20px;
}	

#compornent .inner p{
	width:100%;
	text-align:left;
	line-height:1.8;
}	
}






/*
使い方
------------------------------------------------------------------------------------*/

#howto{
	/*background:#E3EBF0;*/
	padding:90px 0;
	margin:80px auto;
}

#b_a{
	background:#E3EBF0;
	padding:80px 0;
	margin-top:80px;
}

#howto .step{
	width:90%;
	max-width:1000px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	counter-reset: number;
	margin:0 auto;
}

#howto .box{
	width:31%;
	max-width:287px;
	margin-bottom:40px;
}

#howto .box dl{
	text-align:left;
	margin-top:15px;
}

#howto .box dt{
	font-size:24px;
	counter-increment: number;
}

#howto .box dt:before{
	background:#666;
	color:#fff;
	display:inline-block;
	content:  counter(number);
	width:40px;
	/* height:40px; */
	font-size:26px;
	text-align:center;
	margin-right:5px;
	padding-top:0px;
}

#howto .box dd{
	margin-top:15px;
}











@media only screen and (max-width:750px) { 
	#howto{
		padding:60px 0;
	}
	
	
	#howto .box{
		width:48%;
		max-width:287px;
		margin-bottom:40px;
	}
	
	#howto .box dt{
		font-size:18px;
	}
	
	#howto .box dt:before{
		width:28px;
		font-size:18px;
		padding-top:0px;
	}
	
	#howto .box dd{
		margin-top:10px;
		line-height:normal;
	}
	
}

/*
howto
-------------------------------------------------------------------------------------------
#howto{
	width:90%;
	max-width:1000px;
	margin:80px auto;
}	

#howto .box{
	width:100%;
	margin-bottom:30px;
	text-align:left;
	display:flex;
	flex-wrap:wrap;
	align-items:center; 
}

#howto .box h4{
	width:15%;
	font-size:25px;
	background:#65A9C1;
	color:#fff;
	font-weight:normal;
	text-align:center;
	vertical-align:middle;
	margin-right:3%;
  	font-family: 'Roboto', sans-serif;
	display: -webkit-box;
	display: -ms-flexbox;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding:25px 0;
}

#howto .box dl{
	width:80%;
	text-align:left;
}

#howto .box dt{
	font-size:20px;
	font-weight:bold;
	margin-bottom:10px;
}

#howto .box p{
	width:10%;
	max-width:40px;
	margin-right:3%;
	display: -webkit-box;
	display: -ms-flexbox;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

#howto .box:nth-of-type(3) h4{
	background:#016479;
	padding:50px 0;
}

#howto .box:nth-of-type(3) dl{
	width:70%;
	padding:80px 0;
}



@media only screen and (max-width: 560px) { 
#howto .box{
}

#howto .box h4{
	width:100%;
	font-size:25px;
	margin:0 auto 15px;
	padding:5px 0;
}

#howto .box dl{
	width:100%;
}

#howto .box dt{
	font-size:20px;
	font-weight:bold;
	margin-bottom:10px;
	text-align:center;
}

#howto .box p{
	width:15%;
	max-width:40px;
	margin:15px 5% 0 3%;
}

#howto .box:nth-of-type(3) h4{
	padding:10px 0;
}

#howto .box:nth-of-type(3) dl{
	width:80%;
	padding:0px 0;
}

}
*/












/*
MOVIE
------------------------------------------------------------------------------------*/

#movie{
	background:#e3e3e3;
	padding:100px 0;
}

#movie iframe{
	width:90%;
	max-width:1000px;
	margin:0 auto 10px;
}

#movie #big{
	margin-top:50px;
}

#movie #big iframe{
	height:530px;
}

#movie #big p{
	width:90%;
	max-width:1000px;
	margin:0 auto 10px;
	text-align:left;
}

#movie #big p span{
	font-weight:bold;
	display:block;
	margin:5px auto;
}

#movie li iframe{
	width:100%;
	height:265px;
}

#movie ul{
	max-width:1000px;
	width:90%;
	margin:50px auto 30px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}

#movie ul li{
	width:49%;
}



@media only screen and (max-width: 950px) { 
#movie #big iframe{
	height:400px;
}
#movie li iframe{
	height:180px;
}
}



@media only screen and (max-width: 760px) { 
#movie{
	padding:60px 0;
}
#movie #big iframe{
	height:250px;
}
#movie ul li{
	width:100%;
	margin-bottom:30px;
}
#movie li iframe{
	height:250px;
}
}



/*
口コミ
------------------------------------------------------------------------------------*/
#voice{
	width:90%;
	max-width:1000px;
	margin:80px auto;
}

#voice p{
	margin:30px 0;
}


#voice ul{
	max-width:1000px;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

#voice ul li{
	width:32%;
	margin-bottom:30px;
}

#voice ul li iframe{
	border:none !important;  
	min-width:auto !important;
	/* max-width:310px; */
}

#voice ul li p{
	font-size:14px;
	margin:0 auto 10px;
	background: #ccc;
	padding:5px 0;
}

#voice ul li p span{
	display:block;
	font-size:11px;
}


@media only screen and (max-width:768px) { 
#voice ul{
	justify-content:space-around;
}

#voice ul li{
	width:45%;
}
 
}

@media only screen and (max-width: 540px){
#voice ul li{
	width:100%;
}

#voice ul li iframe{
	border:none !important;  
	min-width:auto !important;
	max-width:auto;
}

}



/*
spec
------------------------------------------------------------------------------------*/
#christina #item{
	width:90%;
	max-width:1000px;
	margin:0 auto;
	padding:90px 0;
}


#christina #item .ttl2{
	margin-top:-50px;
	margin-bottom:100px;
	font-size:20px;
}

#christina #item dl{
	max-width:800px;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	text-align:left;
	font-size:16px;
	line-height:2.0;
}

#christina #item dl dt{
	width:25%
}

#christina #item dl dd{
	width:70%
}

#christina #item dl span{
	font-size:25px;
	font-weight:bold;
	margin-bottom:20px;
	display:block;
}


#christina #item table{
	width:100%;
	margin-top:40px;

}
#christina #item table tr td:first-child{
	width:25%;

}

#christina #item table tr:not(:last-child) {
	border-bottom:2px dotted #000;

}

#christina #item table tr td{
	padding:20px 0;
}

#christina #item #change{
	border:2px solid #999;
	box-sizing: border-box;
	padding:5% 5% 0 5%;
	margin-top: 50px;
}

#christina #item #change p{
	background:#555;
	color:#fff;
	font-size:20px;
	padding:10px 0;
	margin-bottom:30px;
}

#christina #item #change img{
	margin-bottom:60px;
}

#christina #item #change span{
	display:block;
	margin:20px 0;
}






@media only screen and (max-width: 580px) { 


#christina #item .ttl2{
	margin-top:0px;
	margin-bottom:20px;
	font-size:14px !important;
}

#christina #item dl dt{
	text-align:center;
	width:20%;
	margin:0 auto;
}


#christina #item dl dd{
	width:96%;
	margin:0 auto;
}

}




/*
Q&A
------------------------------------------------------------------------------------*/
#faq{
	margin:80px auto 0;
	background:#E7EAF1;
	padding:80px 0;
}

#faq #inner{
	width:92%;
	max-width:1000px;
	margin:0 auto 0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

#faq #inner dl{
	width:48%;
	max-width:460px;
	text-align:left;
}

#faq #inner dt{
	font-size:20px;
	font-weight:bold;
	text-indent:-48px;
	padding-left:48px;
	margin-bottom:15px;
}

#faq #inner dt:before{
	content:"Q ";
	font-size:60px;
	vertical-align:middle;
	line-height:0.6;
}

#faq #inner dd{
	margin:0 0 30px 50px;
	line-height:1.6;
}



@media only screen and (max-width: 640px) { 
	#faq #inner dl{
		width:100%;
	}
	#faq #inner dt:before{
		font-size:36px;
	}
	#faq #inner dt{
		font-size:18px;
		text-indent:-30px;
		padding-left:30px;
	}
	#faq #inner dd{
		margin:0 0 30px 30px;
	}
}













#christina  #special_bnr{
	background:#E6E6E6;
}


#sp_bnr iframe{
	margin-top:0 !important;
}





	/*
口コミ
-------------------------------------------------------------------------------------------*/

#christina  #voice_txt_bg{
	width:100%;
		background:#E3EBF0;
}



#christina  #voice_txt{
	width:100%;
	max-width: 1000px;
    margin: 0 auto;
	padding:90px 0;

}


#christina  #voice_txt p{
	font-size:20px;
	margin:20px 0;
	padding:20px 0;
	
	/*border-bottom:1px dotted #000;*/
}


#christina  #voice_txt p br{
	display:none;
}

#christina  #voice_txt dl{
	margin:20px 0;
	text-align:left;
	border-bottom:1px dotted #000;
	padding:20px 0;
}


#christina  #voice_txt dl dt{
	font-weight:bold;
	font-size:20px;
	margin:0 0 20px 0;
}


#christina  #voice_txt p.att{
	font-size:12px;
	border-bottom:none !important; 
}


@media only screen and (max-width: 789px){


#christina  #voice_txt{
	width:90%;
    margin: 0 auto;
	padding:90px 0;
}


#christina  #voice_txt p{
	font-size:18px;
	padding:0px;
}
#christina  #voice_txt p br{
	display:block;
}


#christina  #voice_txt dl dt{
	font-size:16px;
}


}




/*インスタ追加*/
#christina #insta{
	/*background:#CCC;*/
	/*width:90%;
	max-width:1000px;*/
	/*margin:80px auto;*/
		margin:0px auto;
		width:100%;
	background:#ebebeb;
	padding:80px 0;

}

#christina #insta_bg{
	
	width:90%;
	max-width:1000px;
	margin:0px auto;

}


#christina #insta p{
	margin-top:30px;
	font-size:16px;
	line-height:1.8;
}

#christina #insta #inner{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin-top:80px;
}

#christina #insta #inner .box{
	width:31%;
	margin:0 auto 30px;
	border: 1px solid #EEE;
}

#christina #insta #inner .box p{
	background:#FFF;
	padding:5px 0;
	margin-bottom:10px;
}

#christina #insta #inner .box iframe{
	border:none !important;  
	min-width:auto !important;
	/* max-width:310px; */
}


/*インスタテキスト追加*/

#christina #insta #inner .box .insta_text{
	padding:0px 20px;
	margin-bottom:10px;
	text-align:left;
	background-color:/* #CCC */#EEE !important;
}

@media only screen and (max-width: 768px){
#christina #insta #inner .box{
	width:48%;
}
}

@media only screen and (max-width: 540px){
#christina #insta p br{
	display:none;
}

#christina #insta #inner .box{
	width:90%;
}

#christina #insta #inner .box iframe{
	border:none !important;  
	min-width:auto !important;
	max-width:auto;
}


#christina #insta #inner .box .insta_text{
	/*padding:0px 20px;*/
	margin-bottom:10px;
	text-align:left;
	background-color: #FFF !important;
}

}