@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: #45454b;
	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: 950px;
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
}

span {
	font-weight: bold;
	color: #df744a;
}

.main_off {
	display: none;
}

.main_on {
	display: block;
}

#firstview div,
#beforeafter div.ba01,
#beforeafter div.ba02,
#beforeafter div.ba03,
#type,
#type div.type01,
#type div.type02,
#lastview div,
#outline div {
	position: relative;
}

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



/*────────────　ビフォーアフター　────────────*/
#beforeafter div {
	background-image: url(../images/02_ba_back.png);
	background-position: center top;
	background-repeat: repeat-y;
}

#beforeafter div h2 {
	color: #486977;
	font-weight: bold;
	font-size: 5.1rem;

}

#beforeafter div.ba01 h2 {
	position: absolute;
	top: 9%;
	left: 24%;
}

#beforeafter div.ba01 p {
	position: absolute;
	font-size: 3.9rem;
	bottom: 11%;
	left: 7%;
	right: 7%;
}

#beforeafter div.ba02 h2,
#beforeafter div.ba03 h2 {
	position: absolute;
	top: 1%;
	left: 24%;
}

#beforeafter div.ba02 p,
#beforeafter div.ba03 p {
	position: absolute;
	font-size: 3.9rem;
	bottom: 12%;
	left: 7%;
	right: 7%;
}

/*────────────　なぜ目元ケアが必要か　────────────*/

#why div {
	background-color: #fffbf8;
}

#why div p {
	font-size: 3.7rem;
	width: 90%;
	margin: 0 auto;
}

/*────────────　くまタイプ　────────────*/
#type div.type01 p {
	position: absolute;
	font-size: 3.9rem;
	top: 35%;
	left: 8%;
	right: 48%;
}

#type div.type02 p {
	position: absolute;
	font-size: 3.9rem;
	top: 19%;
	left: 8%;
	right: 48%;
}

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

/*────────────　施術の流れ　────────────*/
#flow div.flow01,
#flow div.flow02,
#flow div.flow03,
#flow div.flow04,
#flow div.flow05,
#flow div.flow06,
#flow div.flow07,
#flow div.flow08,
#flow div.flow09 {
	position: relative;
}

#flow div p {
	line-height: 1.4;
	font-size: 4rem;
}

#flow div.flow01 p {
	position: absolute;
	bottom: 5%;
	left: 50%;
	right: 6%;
}

#flow div.flow02 p {
	position: absolute;
	bottom: 9%;
	left: 5%;
	right: 46%;
}

#flow div.flow03 p {
	position: absolute;
	bottom: 7%;
	left: 39%;
	right: 6%;
}

#flow div.flow04 p {
	position: absolute;
	top: 30%;
	left: 5%;
	right: 48%;
}

#flow div.flow05 p {
	position: absolute;
	bottom: 9%;
	left: 5%;
	right: 5%;
}

#flow div.flow06 p {
	position: absolute;
	bottom: 13%;
	left: 5%;
	right: 48%;
}

#flow div.flow07 p {
	position: absolute;
	bottom: 0%;
	left: 45%;
	right: 6%;
}

#flow div.flow08 p {
	position: absolute;
	top: 38%;
	left: 5%;
	right: 45%;
}

#flow div.flow09 p {
	position: absolute;
	top: 50%;
	left: 45%;
	right: 6%;
}

/*────────────　2大特徴　────────────*/

#outline div.outline1,
#outline div.outline2 {
	position: relative;
	font-size: 3.6rem;
}

#outline h2 {
	color: #fff;
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
	padding: 2%;
}

#outline div.outline1 p.outlinebox1 {
	position: absolute;
	left: 35%;
	right: 13%;
	top: 20%;
}

#outline div.outline1 p.outlinebox2 {
	position: absolute;
	left: 10%;
	right: 44%;
	top: 55%;
}

#outline div.outline1 p.outlinebox3 {
	position: absolute;
	left: 45%;
	right: 10%;
	top: 80%;
}

#outline div h2.ol_catch1,
#outline div h2.ol_catch2,
#outline div h2.ol_catch3,
#outline div h2.ol_catch4 {
	width: 90%;
	position: absolute;
	top: 46%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

#outline div h2.ol_catch2 {
	top: 71.5%;
}

#outline div h2.ol_catch3 {
	top: 20%;
	font-weight: normal;
	font-size: 5.5rem;
	color: #df744a;
}

#outline div h2.ol_catch4 {
	top: 54%;
}

#outline div.outline2 p {
	position: absolute;
	left: 45%;
	right: 10%;
	top: 63%;
}

p.btn {
	width: 865px;
	bottom: 7.5%;
	margin: 0 auto;
}


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

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

#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: 90vw;
	}


	/*────────────　ビフォーアフター　────────────*/
	#beforeafter div h2 {
		font-size: 5.5vw;
		line-height: 1.4;
	}

	#beforeafter div.ba01 p,
	#beforeafter div.ba02 p,
	#beforeafter div.ba03 p {
		font-size: 4vw;
		line-height: 1.5;
	}

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

	}

	/*────────────　なぜ目元ケアが必要か　────────────*/

	#why div p {
		font-size: 4vw;
		line-height: 1.5;
	}

	/*────────────　くまタイプ　────────────*/
	#type div.type01 p,
	#type div.type02 p {
		font-size: 4.2vw;
	}

	#type p.btn {
		width: 90vw;
	}

	/*────────────　施術の流れ　────────────*/
	#flow div p {
		line-height: 1.4;
		font-size: 4.5vw;
	}

	/*────────────　2大特徴　────────────*/

	#outline div.outline1,
	#outline div.outline2 {
		font-size: 3.9vw;
		line-height: 1.5;
	}

	#outline h2 {
		color: #fff;
		font-size: 5vw;
	}

	#outline div h2.ol_catch3 {
		font-size: 5.5vw;
	}

	/*────────────　ラストビュー　────────────*/
	#lastview p.btn {
		width: 90vw;
	}

	p.btn {
		width: 90vw;
	}



}