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

#vos{
}

#vos .comm_box{
	width:90%;
	max-width:1000px;
	margin:50px auto 0;
}

#vos h5{
	width:90%;
	margin:0 auto 50px;
	font-size:70px;
	font-weight:300;
	letter-spacing:2px;
}

#vos h5 span{
	display:block;
	font-size:16px;
	margin-top:15px;
}


#vos #vos_intro{
	width:90%;
	max-width:1000px;
	margin:50px auto;
}

#vos #vos_intro h2{
	font-size:60px;
	font-weight:normal;
	margin-bottom:15px
}

#vos #vos_intro h2 span{
	font-size:25px;
	letter-spacing:normal;
}

#vos #vos_intro h3{
	font-size:30px;
	font-weight:normal;
	margin:0 auto 10px;
	background:#CC3366;
	color:#fff;
	max-width:460px;
	padding:3px 0;
}

#vos #vos_intro:after{
	content:"だから";
	display:block;
	font-size:30px;
	margin:50px 0;
	letter-spacing:3px;
}

#vos #approach{
	width:90%;
	max-width:1000px;
	margin:80px auto 0;
	background:#FAEAEF;
	color:#cc3366;
	font-size:22px;
	padding:50px 0;
	position:relative;
	/* display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center; */
}

#vos #approach br{
	display:none;
}

#vos #approach:before{
	content:url(../../img/special/vos/arrow.png);
	width:90%;
	position:absolute;
	top:-20px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
/* 	width: 70px;
	height: 70px;
	top:-35px;
	left: 45%;
	border: 0px;
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	-ms-transform: rotate(135deg) translateX(-45%);
	-webkit-transform: rotate(135deg) translateX(-45%);
	transform: rotate(135deg) translateX(-45%);
	background:#fff */
}

#vos #approach p{
	width:100%;
	color:#000;
	font-size:30px;
	margin:0 auto 20px;
}

#vos #approach li{
	margin:0 12px 15px;
	display:inline-block;
	font-weight:bold;
}
#vos #approach li:before{
	content:url(../../img/special/vos/icon_p.png);
	margin-right:3px;
	vertical-align:sub;
}


#vos_image{
	width:100%;
	margin:0px auto 80px;
	position:relative;
}

#vos_image img{
	object-fit:cover;
	height:540px;
	object-position:45% 0;
}

#vos_image dl{
	width:90%;
	max-width:650px;
	position:absolute;
	top: 50%;
	left:50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align:left;
	color:#fff;
}

#vos_image dd h4{
	font-weight:300;
	font-size:50px;
	letter-spacing:2px;
}


#vos_image dt{
	font-size:25px;
	margin:40px 0 30px;
}

#vos_image dd{
	font-size:18px;
	margin-bottom:15px;
}

#vos_image span{
	font-size:14px;
}


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

	#vos h5{
		font-size:50px;
	}
	
	#vos #vos_intro h2{
		font-size:42px;
	}
	
	#vos #vos_intro h2 span{
		font-size:19px;
	}
	
	#vos #vos_intro h3{
		font-size:22px;
		padding:5px 0;
	}
	
	#vos #vos_intro:after{
		margin:40px 0;
	}
	
	#vos #approach{
		margin:40px auto 0;
		font-size:18px;
		text-align:left;
	}
	
	#vos #approach br{
		display:block !important;
}
	
	#vos #approach::before{
		text-align:center;
	}
	
	#vos #approach p{
		width:90%;
		font-size:28px;
		text-align:center;
	}
	
	#vos #approach li{
		margin:0 2% 15px 6%;
	}
	
	#vos #approach br{
		display:none;
	}
	
	
	#vos_image img{
		height:470px;
		object-position:40% 0;
	}
	
	#vos_image dd h4{
		font-size:38px;
	}
	
}






/*
about
-------------------------------------------------------------------------------------------*/
#vos #about #intro{
	width:90%;
	max-width:1000px;
	margin:50px auto 0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	counter-reset: number;
}

#vos #about #intro dl{
	width:31%;
	margin-bottom:30px;
	counter-increment: number;
}

#vos #about #intro dl:before{
	content: counter(number , decimal-leading-zero);
	font-size:70px;
	color:#6C84A4;
}

#vos #about #intro dt{
	color:#6C84A4;
	font-size:25px;
	border-bottom:2px solid #6C84A4;
	padding-bottom:5px;
	margin-bottom:25px;
	font-weight:bold;
}

#vos #about #intro dl:nth-of-type(2) dt{
	line-height:1.7;
}

#vos #about #intro dl:last-child dt{
	line-height:3.2;
}

#vos #about #intro dt span{
	font-size:15px;
	display:block;
	color:#000;
}

#vos #about #intro dd{
	line-height:1.8;
}

#vos #about .ttl{
	max-width:1000px;
	background:#8397B2;
	color:#fff;
	font-size:33px;
	margin:0 auto 20px;
	padding:40px 0;
}

#vos #about .ttl:before{
	content: "01";
	font-size:50px;
	font-style:italic;
	display:block;
	font-weight:bold;
}

#vos #about .ttl span{
	font-size:16px;
	vertical-align:middle;
	display:inline-block;
	margin-left:10px;
}

#vos #about #content01{
	background:#E7EAF1;
	padding:80px 0;
	margin-top:80px;
	counter-reset: num;
}

#vos #about .index{
	font-size:30px;
	color:#5C7494;
	border-bottom:3px solid #8397B2;
	padding-bottom:30px;
	margin-bottom:35px;
	font-weight:bold;
}


#vos #about #content01 #feature ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	text-align:left;
	font-size:18px;
	font-weight:bold;
}

#vos #about #content01 #feature ul li{
	width:48%;
	margin-bottom:20px;
	text-indent:-28px;
	padding-left:32px;
}

#vos #about #content01 #feature ul li:nth-of-type(2n){
	width:36%;
	margin-left:3%;
}

#vos #about #content01 #feature ul li:before{
	content:url(../../img/special/vos/icon-b.png);
	vertical-align:sub;
	margin-right:5px;
}

#vos #about #content01 #step ol{
	max-width:780px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	margin:0 auto 50px;
}

#vos #about #content01 #step ol li{
	background:#8397B2;
	border-radius:50%;
	color:#fff;
	width:125px;
	height:125px;
	margin:0 0 20px;
	position:relative;
}

#vos #about #content01 #step ol li span{
	width:90%;
	position:absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


#vos #about #content01 #step dl{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:center;
	width:90%;
	max-width:660px;
	margin:30px auto 0;
}

#vos #about #content01 #step dl dt{
	font-size:40px;
	width:10%;
	letter-spacing:2px;
}

#vos #about #content01 #step dl dt:before{
	content:"STEP";
	font-size:12px;
	display:block;
}

#vos #about #content01 #step dl dd{
	width:88%;
	text-align:left;
	font-size:17px;
	line-height:1.7;
}

#vos #about #process{
	margin-top:100px;
}

#vos #about #process p{
	width:100%;
	margin:20px auto 40px;
}

#vos #about #process #box{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}

#vos #about #process #box p{
	width:55%;
	margin:auto;
}

#vos #about #process dl{
	width:40%;
}

#vos #about #process dl dd{
	background:#fff;
	border:1px solid #000;
	border-radius:5px;
	padding:15px 0;
	position:relative;
	margin-bottom:30px;
}

#vos #about #process dl dd:after{
	content:"";
    box-sizing: border-box;
    border: 15px solid transparent;
    border-left: 12px solid #000;
	position:absolute;
	bottom:-40px;
	left: 50%;
	-webkit-transform: translateX(-50%) rotate(90deg);
	transform: translateX(-50%) rotate(90deg);
}

#vos #about #process dl dd:last-child:after{
    border: none;
}



#vos #about #difference{
	margin-top:100px;
}

#vos #about #difference ul{
	max-width:800px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	margin:50px auto;
}

#vos #about #difference ul p{
	margin-bottom:10px;
}

#vos #about #difference ul li{
	width:48%;
}
#vos #about #difference ul li:first-child{
	color:#CC3366;
	font-size:20px;
	font-weight:bold;
	width:51%;
}


#vos #about #difference table{
	background:#fff;
	max-width:840px;
	margin:30px auto 50px;
	border:1px solid #000;
}

#vos #about #difference table th{
	background:#000;
	padding:10px 0;
	color:#fff;
	font-size:23px;
	
}

#vos #about #difference table td{
	vertical-align:middle;
	border-bottom:1px solid #000;
	border-right:1px solid #000;
	padding:0 15px;
}

#vos #about #difference table tr td:first-child{
	border-right:none;
	padding:0;
	text-align:left;
}

#vos #about #difference table tr td:nth-of-type(4){
	width:40%;
}

#vos #about #difference table tr:nth-of-type(4){
	background:#FAE7ED;
	color:#CC3366;
	font-weight:bold;
}


#vos #about #difference table tr:nth-of-type(4) td:nth-of-type(2){
	font-size:18px;
}

#vos #about #difference table tr:nth-of-type(4) td:nth-of-type(3){
	color:#000;
	font-weight:normal;
}


#vos #about #difference table td li{
	text-align:left;
	margin-left:10px;
	line-height:1.6;
}





#vos #about #content02{
	margin-top:120px;
}

#vos #about #content02 .ttl{
	margin-bottom:80px;
}

#vos #about #content02 .ttl:before{
	content: "02";
}

#vos #about #content02 .intro{
	font-size:20px;
	font-weight:bold;
	margin:50px auto;
}

#vos #about #content02 .text{
	max-width:800px;
	margin:50px auto;
	text-align:left;
	line-height:1.8;
}

#vos #about #content02 .text p{
	color:#CC3366;
	margin:10px 0;
	font-weight:bold;
}


#vos #about #content02 .inner{
	margin:80px auto;
}

#vos #about #content02 .inner dt{
	border-top:1px dotted #000;
	border-bottom:1px dotted #000;
	padding:25px 0;
	font-size:25px;
	font-weight:bold;
	margin-bottom:20px;
}

#vos #about #content02 .inner dd{
	font-size:20px;
	font-weight:bold;
	margin-bottom:30px;
}



#vos #about #content02 ol,
#vos #about #content02 ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	/*font-weight:bold;*/
}

#vos #about #content02 ol li{
	width:46%;
}

#vos #about #content02 ol p{
	background:#666;
	color:#fff;
	padding:13px 0;
	font-size:20px;
	font-weight:normal;
	margin-bottom:20px
}

#vos #about #content02 ol p span{
	font-size:15px;
	display:block;
	margin-top:5px;
}


#vos #about #content02 #rate li{
	width:30%;
}

#vos #about #content02 #rate li dt{
	color:#c36;
	font-size:18px;
	font-weight:bold;
	margin:20px auto;
}

#vos #about #content03{
	margin-top:120px;
}

#vos #about #content03 .ttl{
	margin-bottom:40px;
}

#vos #about #content03 .ttl:before{
	content: "03";
}

#vos #about #content03 #index dt:first-child{
	font-size:20px;
	font-weight:bold;
	margin-bottom:5px;
}

#vos #about #content03 #index dd{
	font-size:30px;
	font-weight:bold;
	color:#c36;
	position:relative;
	padding-top:80px;
	margin-bottom:50px;
}

	#vos #about #content03 #index dd br{
		display:none;
	}


#vos #about #content03 #index dd span{
	background: linear-gradient(#fff 0, #F0EBA8 60%);
}

#vos #about #content03 #index dd:before{
	/* content:url(../../img/special/vos/arrow.png); */
	content:"";
	display:block;
	background:url(../../img/special/vos/arrow.png) no-repeat;
	background-size:80px;
	width:80px;
	height:35px;
	position:absolute;
	top:30px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

#vos #about #content03 #box{
	margin:50px auto 80px;
	background:#e2e2e2;
	padding:80px 0;
}

#vos #about #content03 .point{
	font-size:20px;
	width:90%;
	margin:0 auto 50px;
	line-height:1.8;
}

#vos #about #content03 .point p br{
	display:none;
}

#vos #about #content03 .point span{
	color:#cc3366;
	font-weight:bold;
}

#vos #about #content03 .block{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:90%;
	margin:0 auto ;
}

#vos #about #content03 .block p{
	width:100%;
	background:#9e9e9e;
	color:#fff;
	padding:15px 0;
	margin-bottom:40px;
	font-size:20px;
	letter-spacing:1px;
	font-weight:bold;
}

#vos #about #content03 .block #image{
	width:45%;
	background:#fff;
	padding-bottom:10px;
}

#vos #about #content03 .block .text{
	width:51%;
	text-align:left;
	font-size:16px;
	margin-top:20px;
	line-height:1.8;
}

#vos #about #content03 .block .text dt{
	font-weight:bold;
	font-size:20px;
	margin-bottom:10px;
}

@media only screen and (max-width:767px) { 
	#vos #about #intro{
		display:block;
	}
	
	#vos #about #intro dl{
		width:100%;
	}
	
	#vos #about #intro dl:before{
		font-size:45px;
	}
	
	#vos #about #intro dt{
		font-size:25px;
		padding-bottom:10px;
		margin-bottom:20px;
	}
	
	#vos #about #intro dl:nth-of-type(2) dt{
		font-size:36px;
	}
	
	#vos #about #intro dl:last-child dt{
		line-height:1.6;
	}
	
	#vos #about #intro dd{
		text-align:left;
}

	
	#vos #about .ttl{
		font-size:24px;
		padding:30px 0;
	}
	
	#vos #about .ttl:before{
		font-size:36px;
	}
	
	#vos #about .ttl span{
		font-size:16px;
		letter-spacing:-1px;
	}
	
	#vos #about #content01{
		padding:30px 0;
	}
	
	#vos #about #content01 p{
		width:90%;
		margin:0 auto;
		text-align:left;
	}
	
	#vos #about #content01 .ttl{
		width:90%;
	}
	
	#vos #about .index{
		font-size:23px;
		padding-bottom:15px;
		margin-bottom:20px;
		text-align:center;
	}
	
	#vos #about #process p{
		text-align:left;
	}

	
	#vos #about #content01 #feature ul{
		display:block;
	}
	
	
	
	#vos #about #content01 #feature ul li{
		width:90%;
		margin-bottom:20px;
		text-indent:-28px;
		padding-left:32px;
	}
	
	#vos #about #content01 #feature ul li:nth-of-type(2n){
		width:90%;
		margin-left:auto;
	}
	
	#vos #about #content01 #step ol{
		margin:0 auto 20px;
	}
	
	#vos #about #content01 #step ol li{
		width:107px;
		height:107px;
		margin:0 0 20px;
	}
	
	#vos #about #content01 #step ol:after{
		content: "";
		display: block;
		width: 107px;
	}
	
	#vos #about #content01 #step dl{
		justify-content:space-between;
		align-items:start;
		width:100%;
	}
	
	
	#vos #about #content01 #step dl dt{
		width:14%;
	}
	
	#vos #about #content01 #step dl dd{
		width:83%;
	}
	
	#vos #about #process #box{
		display:block;
	}
	
	#vos #about #process #box p{
		width:80%;
		margin:0 auto 20px;
	}
	
	#vos #about #process dl{
		width:100%;
	}
	
	#vos #about #difference{
		padding-bottom:30px;
		margin-top:60px;
		text-align:left;
	}

	#vos #about #difference table th{
		font-size:20px;	
	}
	
	#vos #about #difference table td{
		padding:0 5px;
		font-size:12px;
	}
	
	#vos #about #difference table tr td:first-child{
		width:10%;
	}
	#vos #about #difference table tr td:nth-of-type(4){
		width:38%;
	}
	
	#vos #about #difference table tr:nth-of-type(4) td:nth-of-type(2){
		font-size:15px;
	}
	
	#vos #about #difference table td li{
		margin-left:0;
		line-height:1.6;
	}
	
	#vos #about #content02{
		margin-top:60px;
	}
	
	#vos #about #content02 .ttl{
		margin-bottom:50px;
	}
	
	#vos #about #content02 .intro{
		font-size:16px;
		margin:30px auto;
		text-align:left;
	}

	#vos #about #content02 .intro br{
		display:none;
	}

	#vos #about #content02 .text{
		margin:30px auto;
	}
	
	#vos #about #content02 .inner dd{
		font-size:16px;
	}

	#vos #about #content02 ol li{
		width:100%;
	}
	
	#vos #about #content02 ol li:first-child{
		margin-bottom:30px;
	}

	
	#vos #about #content02 ol p{
		font-size:18px;
	}
	
	#vos #about #content02 ol p span{
		font-size:14px;
	}
	
	#vos #about #content02 #rate li{
		width:80%;
		margin-bottom:35px;
	}
	
	#vos #about #content02 #rate li dt{
		margin:15px auto 10px;
	}
	
	#vos #about #content03{
		margin-top:60px;
	}
	
	#vos #about #content03 #index dt:first-child{
		font-size:16px;
	}
	
	#vos #about #content03 #index dt{
		text-align:left;
	}

	
	#vos #about #content03 #index dd{
		font-size:25px;
		margin-bottom:30px;
	}
	
	#vos #about #content03 #index dd br{
		display:block;
	}

	
	#vos #about #content03 #box{
		padding:40px 0;
	}
	
	#vos #about #content03 .point{
		margin:0 auto 30px;
	}
	
	#vos #about #content03 .point p br{
		display:block;
	}
	
	#vos #about #content03 .block{
		display:block;
	}
	
	#vos #about #content03 .block #image{
		width:100%;
	}
	
	#vos #about #content03 .block .text{
		width:100%;
		line-height:1.6;
	}
	
	#vos #about #content03 .block .text dt{
		font-size:18px;
	}
	

}




















/*
HOWTO
-------------------------------------------------------------------------------------------*/
#howto{
	background:#E7EAF1;
	padding:80px 0;
}

#howto #content{
	width:90%;
	max-width:1000px;
	padding:80px 0;
	margin:auto;
	background:#fff;
}


#howto ul{
	width:90%;
	max-width:800px;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
}

#howto ul li{
	width:46%;
	margin-bottom:50px;
}

#howto ul li p{
	width:90%;
	max-width:250px;
	margin:15px auto 0;
}

#howto #point{
	background:#8397B2;
	padding:60px 0;
}


#howto dl{
	background:#8397B2;
	padding:50px 0;
	width:90%;
	max-width:730px;
	margin:auto;
	color:#fff;
	line-height:1.8;
}

#howto dl dt{
	font-size:20px;
	width:80%;
	margin:auto;
}

#howto dl dt:first-child{
	font-size:34px;
	margin-bottom:10px;
}


#howto dl dd{
	width:80%;
	margin:20px auto;
	text-align:left;
}

#howto dl dd:before{
	content:"";
	display:block;
	border-top:1px solid #fff;
	padding-top:20px;
}


@media only screen and (max-width:767px) { 
	#howto #content{
		padding:40px 0;
	}
	
	#howto ul li p{
		font-size:14px;
	}
	
	#howto dl dt{
		font-size:18px;
		text-align:left;
	}

	#howto dl dt br{
		display:none;
	}

	#howto dl dt:first-child{
		text-align:center;
	}
	
}


/*
インスタ
-------------------------------------------------------------------------------------------*/
#vos #insta ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}

#vos #insta ul li{
	width:46%;
	margin-bottom:30px;
}


/*
ムービー
-------------------------------------------------------------------------------------------*/
#vos #movie{
	background:#E7EAF1;
	padding:80px 0;
	margin-top:80px;
}

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

#vos #movie ul li{
	width:48%;
	margin-bottom:30px;
}

#vos #movie ul li iframe{
	width:100%;
	height:300px;
}



@media only screen and (max-width:767px) { 
	#vos #insta ul{
		display:block;
	}
	
	#vos #insta ul li{
		width:100%;
	}
	
	/*
	ムービー
	-----------------------------*/
	#vos #movie{
		padding:60px 0;
	}
	
	#vos #movie ul{
		display:block;
	}
	
	#vos #movie ul li{
		width:100%;
	}
	
	#vos #movie ul li iframe{
		height:215px;
	}

}


/*
口コミ
------------------------------------------------------------------------------------*/
#voice{
	padding:80px 0;
}

#voice p{
	margin:30px 0;
}


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

#voice ul li{
	width:47%;
	/* margin-bottom:30px; */
	margin:auto;
}

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




/*
商品情報
------------------------------------------------------------------------------------*/
#item{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items: center;
}

#item .image{
	width:35%;
}

#item dl{
	width:60%;
	text-align:left;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

#item dt{
	width:22%;
	border-bottom:1px dotted #000;
	padding-right:3%;
	padding-bottom:20px;
	margin-bottom:20px;
}

#item dd{
	width:75%;
	border-bottom:1px dotted #000;
	padding-bottom:20px;
	margin-bottom:20px;
}

#item dd li{
	font-size:14px;
	margin-top:5px;
}


@media only screen and (max-width:767px) { 
	#item{
		display:block;
	}
	
	#item .image{
		width:90%;
		max-width:250px;
		margin:0 auto 30px;
	}
	
	#item dl{
		width:100%;
	}

}






/*
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;
	}
}



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




#contents,
#salon{
	display:none;
}

#vos #vos_top {
    background: #000000;
}

#vos #vos_image {
    background: #8397B2;
}