@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: 140px;
	color: #000;
	font-size: 2.8rem;
	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: 750px;
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
}

span {
	font-weight: bold;
	color: #7e3eff;
}

.attention {
	font-size: 1.5rem;
	font-weight: normal;
	color: #000;
	line-height: 1.2;
}

#pagetop {
	text-align: right;
}

#pagetop:hover {
	opacity: 0.5;
}

.toCartButton {
	position: fixed;
	width: 100%;
	text-align: center;
	bottom: 0px;
}

/*────────────　共通　────────────*/
#firstview div,
#million div,
#trouble div,
#perfect div,
#media div,
#lastview div,
#reason div {
	position: relative;
}

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

/*────────────　3万人　────────────*/
#million div p {
	width: 90%;
	position: absolute;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	bottom: 1%;
	color: #3a1b6a;
	font-size: 3.8rem;
}

/*────────────　お悩み　────────────*/
#trouble p.btn {
	width: 686px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	bottom: 4%;
}


/*────────────　ポイント　────────────*/

#point div {
	background-image: url(../images/05_point_back.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
}


#point div.point01,
#point div.point02,
#point div.point03,
#point div.point04 {
	width: 740px;
	margin: 0 auto;
	position: relative;
	background: none;
	text-align: center;
}

#point div.point01 {
	margin-top: 230px;
}

#point div.point04 {
	width: 750px;
}


#point div.point03 {
	padding-bottom: 15px;
}

#point div.point01 p,
#point div.point02 p,
#point div.point03 p {
	position: absolute;
	width: 310px;
	right: 10px;
	left: 380px;
	top: 41%;
	font-size: 2.5rem;
}

#point div p.pointimg {
	position: absolute;
	left: 105px;
	top: 42%;
}

#point div.point04 p {
	position: absolute;
	left: 4%;
	right: 44%;
	bottom: 40%;
}

/*────────────　スペシャルな理由　────────────*/
#reason p.btn {
	width: 686px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	bottom: 1%;
}



/*────────────　施術の流れ　────────────*/

#flow div.flow1,
#flow div.flow2,
#flow div.flow3,
#flow div.flow4,
#flow div.flow5,
#flow div.flow6,
#flow div.flow7,
#flow div.flow8 {
	position: relative;
	font-size: 3rem;
	line-height: 1.4;
	color: #454545;
}

#flow div.flow1 p,
#flow div.flow2 p,
#flow div.flow3 p,
#flow div.flow4 p,
#flow div.flow5 p,
#flow div.flow6 p,
#flow div.flow7 p,
#flow div.flow8 p {
	position: absolute;
	left: 8%;
	right: 50%;
}

#flow span {
	color: #a67f08;
}

#flow div.flow1 p {
	top: 32%;
}

#flow div.flow2 p {
	top: 41%;
	right: 45%;
}

#flow div.flow3 p {
	top: 21%;
	right: 55%;
}

#flow div.flow3 p.flow4 {
	right: 8%;
	left: 55%;
}

#flow div.flow5 p {
	right: 55%;
	bottom: 50%;
}

#flow div.flow5 p.flow6 {
	top: 22%;
	left: 55%;
	right: 8%;
}

#flow div.flow5 p.flow6 span {
	line-height: 1.2;
}

#flow div.flow7 p {
	bottom: 10%;
	right: 42%;
}

#flow div.flow8 p {
	bottom: 24%;
	right: 42%;
}

/*────────────　メディア　────────────*/
#media p.btn {
	width: 686px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	bottom: 4%;
}

/*────────────　ラストビュー　────────────*/

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

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


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

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

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

	#firstview p.btn,
	#lastview div p.btn,
	#trouble p.btn,
	#media div p.btn,
	#reason div p.btn {
		width: 90vw;
	}

	.attention {
		font-size: 2.5vw;
		font-weight: normal;
		color: #000;
		line-height: 1.2;
	}

	#pagetop img {
		width: 20vw;
		height: auto;
	}

	/*────────────　ヘッダー　────────────*/
	header div img {
		width: 30%;
		height: auto;
	}

	/*────────────　３万人　────────────*/
	#million div p {
		font-size: 4.8vw;
		bottom: 1%;
	}


	/*────────────　ポイント　────────────*/
	#point div {
		background-position: center top;
	}

	#point div.point01,
	#point div.point02,
	#point div.point03 {
		width: 96%;
	}

	#point div.point01 {
		margin-top: 120px;
	}

	#point div.point04 {
		width: 100%;
	}

	#point div.point03 {
		padding-bottom: 35px;
	}


	#point div.point01 p,
	#point div.point02 p,
	#point div.point03 p {
		position: absolute;
		width: 43vw;
		font-size: 3.8vw;
		line-height: 1.5;
		right: 10vw;
		left: 47vw;
	}

	#point div p.pointimg {
		width: 32vw;
		left: 11vw;
	}



	/*────────────　施術の流れ　────────────*/

	#flow div.flow1,
	#flow div.flow2,
	#flow div.flow3,
	#flow div.flow4,
	#flow div.flow5,
	#flow div.flow6,
	#flow div.flow7,
	#flow div.flow8 {
		font-size: 4vw;
		line-height: 1.5;
	}

	/*────────────　ラストビュー　────────────*/




}