@charset "UTF-8";

html {
	font-size: 62.5%;
	/*ベースを10pxにしています*/
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
	padding-bottom: 50px;
	color: #534741;
	font-size: 2.7rem;
	line-height: 1.5;
	font-feature-settings: "palt";
}

a:hover {
	filter: alpha(opacity=70);
	-moz-opacity: 0.70;
	opacity: 0.70;
}

p {
	text-align: justify;
	/* 両端揃え */
	text-justify: inter-ideograph;
}

img {
	vertical-align: bottom;
	max-width: 100%;
}

#wrap {
	width: 950px;
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
}




#firstview div,
#memoto div,
#case div,
#cose div,
#feature div,
#lastview div {
	position: relative;
}

/*────────────　ファーストビュー　────────────*/
#firstview p.btn {
	width: 865px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

/*────────────　目元で決まる　────────────*/
#memoto p {
	width: 70%;
	position: absolute;
	bottom: 11%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

/*────────────　ケース　────────────*/

#case span {
	color: #FF6DA4;
	font-weight: bold;
}

#case h2 {
	font-weight: bold;
	font-size: 5.0rem;
	text-decoration: underline dotted 3px #FFC3C2;
	position: absolute;
}

#case div.case1,
#case div.case2,
#case div.case3 {
	position: relative;
}

#case div.case1 h2 {
	top: 26%;
	left: 9%;
}

#case div.case1 p {
	position: absolute;
	top: 49%;
	left: 54%;
	right: 9%;
}

#case div.case2 h2 {
	top: 10%;
	left: 9%;
}

#case div.case2 p {
	position: absolute;
	top: 48%;
	left: 9%;
	right: 56%;
}

#case div.case3 h2 {
	top: 10%;
	left: 9%;
}

#case div.case3 p {
	position: absolute;
	top: 39%;
	left: 54%;
	right: 9%;
}

/*────────────　コース　────────────*/
#cose div p.txt {
	position: absolute;
	width: 70%;
	top: 45%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

#cose div p.btn {
	position: absolute;
	width: 865px;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

/*────────────　3大特徴　────────────*/
#feature div.point1 p,
#feature div.point2 p,
#feature div.point3 p {
	width: 81%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	font-size: 2.8rem;
}

#feature div.point1 p {
	bottom: 9%;
}

#feature div.point2 p {
	bottom: 9%;
}

#feature div.point3 p {
	bottom: 14%;
}

#feature div.point1 p span,
#feature div.point3 p span {
	color: #A2789E;
	font-weight: bold;
}

#feature div.point2 p span {
	color: #FF8B89;
	font-weight: bold;
}

/*────────────　施術の流れ　────────────*/
#step h2 {
	color: #fff;
	font-weight: bold;
	font-size: 4.5rem;
}

#step div.step03 h2 {
	color: #FF8B89;
}

div.step01,
div.step02,
div.step03 {
	position: relative;
	font-size: 3rem;
	line-height: 1.4;
}

div.flow01 {
	position: absolute;
	width: 45%;
	top: 25%;
	right: 4%;
}

div.flow02 {
	position: absolute;
	width: 49%;
	top: 49%;
	right: 4%;
}

div.flow03 {
	position: absolute;
	width: 45%;
	bottom: 7%;
	right: 4%;
}

div.flow04 {
	position: absolute;
	width: 43%;
	top: 9%;
	left: 4%;
}

div.flow05 {
	position: absolute;
	width: 47%;
	top: 37%;
	left: 4%;
}

div.flow06 {
	position: absolute;
	width: 40%;
	bottom: 13%;
	left: 4%;
}

div.flow07 {
	position: absolute;
	width: 42%;
	top: 10%;
	right: 4%;
}

div.flow08 {
	position: absolute;
	width: 39%;
	bottom: 30%;
	right: 4%;
}

/*────────────　動画　────────────*/
#movie div {
	margin: 20px auto;
	text-align: center;
}

#movie div h1 {
	margin-bottom: 20px;
}

#movie div p {
	margin: 25px auto;
	text-align: center;
}

#movie iframe {
	width: 560px;
	height: 315px;
}

/*────────────　お客様の声　────────────*/
#voice div {
	background-color: #FFE1E1;
	padding-bottom: 20px;
}

#voice div p {
	width: 90%;
	margin: 10px auto;
}

#voice div p span {
	font-size: 1.2rem;
	line-height: 1.2;
}

#voice div ul {
	width: 90%;
	margin: 10px auto;
}

#voice div ul li {
	display: inline-block;
	padding: 1%;
	height: auto;
	transition: all 1s ease-in-out;
	width: 49%;
	transition: all 1s ease-in-out;
	outline: none;
}

#voice div ul li img {
	box-shadow: 2px 2px 4px #666;
}


/*────────────　ラストビュー　────────────*/
#lastview p.btn {
	width: 865px;
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

#salon div {
	width: 98%;
	margin: 0 auto;
}


/*────────────────────────　MOBILE　────────────────────────*/

@media screen and (max-width:59.375em) {

	/* ↑はPCサイトの幅950pxをemの基準値16pxで割った数値 */
	body {
		font-size: 3.5vw;
		line-height: 1.3;
	}

	/*────────────　ファーストビュー　────────────*/
	#firstview p.btn {
		width: 95%;
		bottom: 5px;
	}

	/*────────────　目元で決まる　────────────*/
	#memoto p {
		width: 80%;
		bottom: 12%;
	}

	/*────────────　ケース　────────────*/
	#case h2 {
		font-size: 5.5vw;

	}

	/*────────────　コース　────────────*/
	#cose div p.btn {
		width: 95%;
	}

	/*────────────　3大特徴　────────────*/
	#feature div.point1 p,
	#feature div.point2 p,
	#feature div.point3 p {
		font-size: 3.5vw;
		line-height: 1.5;
	}

	/*────────────　施術の流れ　────────────*/
	div.step01,
	div.step02,
	div.step03 {
		font-size: 3.5vw;
		line-height: 1.3;
		color: #322c2c;
	}

	#step h2 {
		font-size: 4.5vw;
	}

	div.flow03 {
		position: absolute;
		width: 45%;
		bottom: 5%;
		right: 4%;
	}

	/*────────────　動画　────────────*/
	#movie iframe {
		width: 100%;
		height: auto;
	}

	#movie p.btn {
		width: 90%;
	}

	/*────────────　お客様の声　────────────*/
	#voice div {
		font-size: 4.5vw;
	}

	#voice div p span {
		font-size: 2vw;
		line-height: 1;
	}

	/*────────────　ラストビュー　────────────*/
	#lastview p.btn {
		width: 95%;
		bottom: 15px;
	}

}