@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: #474530;
	font-size: 3.2rem;
	line-height: 1.5;
	font-feature-settings: "palt";
}

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

p,
li {
	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;
	background-color: #fff;
}

span {
	font-weight: bold;
	font-size: 110%;
}

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


/*────────────　共通　────────────*/
#firstview div,
#type div,
#lastview div,
#counseling div,
#theory div,
#parts div,
#proportion div,
#voice div {
	position: relative;
}


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

/*────────────　体型・体質　────────────*/
#type div {
	background-color: #eeeadf;
	background-image: url(../images/03_type_back.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 203px;
	color: #493d34;
	font-size: 2.3rem;
	line-height: 1.4;
}

#type div h2 {
	width: 686px;
	margin: 10px auto;
}

#type div ul.taikei,
#type div ul.taishitsu {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

#type div ul.taikei li {
	width: 320px;
	border-radius: 5px;
	background-color: rgba(228, 223, 235, 0.7);
	border: solid 1px #bdb9b1;
	filter: drop-shadow(4px 4px 4px rgba(202, 156, 196, 0.4));
	padding: 10px 25px 20px;
	margin: 10px 0 15px 36px;
}

#type div ul.taishitsu {
	margin-bottom: 0;
}

#type div ul.taishitsu li.mizu,
#type div ul.taishitsu li.fat,
#type div ul.taishitsu li.kata {
	width: 210px;
	border-radius: 5px;
	border: solid 1px #bdb9b1;
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.3));
	padding: 10px 20px 30px;
}

#type div ul.taishitsu li.mizu {
	background-color: rgba(233, 245, 244, 0.7);
	margin: 10px 0 0px 36px;
}

#type div ul.taishitsu li.fat {
	background-color: rgba(242, 237, 219, 0.7);
	margin: 10px 0 0px 23px;
}

#type div ul.taishitsu li.kata {
	background-color: rgba(247, 233, 247, 0.7);
	margin: 10px 0 0px 23px;
}


/*────────────　カウンセリング　────────────*/
#counseling div {
	background-color: #eeeae0;
}

#counseling div p {
	position: absolute;
}

#counseling div p.counseling01 {
	left: 45px;
	top: 220px;
}

#counseling div p.counseling02 {
	left: 50px;
	top: 850px;
}

/*────────────　4つの技術　────────────*/
#theory div {
	background-image: url(../images/05_theory_back.jpg);
	background-position: center top;
	background-repeat: repeat-y;
}


#theory h2 {
	font-size: 3.3rem;
	position: absolute;
	top: 380px;
	left: 40px;
	right: 40px;
}

#theory div.theory1,
#theory div.theory2,
#theory div.theory3,
#theory div.theory4 {
	width: 688px;
	background-image: none;
	background-color: #fff;
	margin: 30px auto 0;
}
#theory div.theory1 {
	margin: 70px auto 0;
}
#theory h3 {
	width: 631px;
	margin: 0px auto;
	padding: 20px 0;
}

p.pic {
	display: inline-block;
	width: 318px;
	margin: 25px 20px 25px;
	vertical-align: top;
}

p.txt {
	display: inline-block;
	width: 290px;
	margin: 15px 0 0 0;
	vertical-align: top;
}

/*────────────　動画　────────────*/
div#movie {
	background: none;
	text-align: center;
	margin-top: 90px;
}

video {
	width: 90%;
	height: auto;
}

/*────────────　11箇所に細分　────────────*/
#parts div {
	background-color: #eeeae0;
	padding-top: 70px;
}

#parts h2 {
	font-size: 3.3rem;
	position: absolute;
	top: 450px;
	left: 40px;
	right: 40px;
}

#parts p.btn {
	width: 686px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	top: 79%;
}

/*────────────　美しく痩せる　────────────*/


#proportion h1 {
	background-color: #eeeae0;
}

#proportion h2 {
	font-size: 3.3rem;
	position: absolute;
	top: 360px;
	left: 40px;
	right: 40px;
}

#proportion h3 {
	width: 90%;
	margin-top: -25px;
}

#proportion div.bust,
#proportion div.weist,
#proportion div.leg {
	width: 688px;
	background-color: rgba(255, 255, 255, 0.8);
	border: solid 1px #bdb9b1;
	filter: drop-shadow(4px 4px 4px rgba(190, 190, 180, 0.2));
	margin: 15px auto 0;
	padding: 0 0 5px 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	font-size: 2.9rem;
}

#proportion div.bust {
	top: 26%;
}

#proportion div.weist {
	top: 52%;
}

#proportion div.leg {
	top: 77%;
}

.fadeIn {
	transform: translate3d(0, -20px, 0);
	transition: 1s;
	opacity: 0;
	-webkit-font-smoothing: antialiased;
}

.fadeIn.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
	-webkit-font-smoothing: antialiased;
}


/*────────────　お客様の声　────────────*/



#voice div {
	background-color: #eeeae0;
	padding-bottom: 80px;
}

#voice h1 {
	position: absolute;
	z-index: 9999;
}

#voice ul.bxslider {
	position: absolute;
	top: 14%;
}

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

}

.bx-controls,
.bx-has-controls-direction,
.bx-has-pager {
	display: none;
}

#voice div.bx-wrapper {
	margin-bottom: 80px;
}



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

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

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


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

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

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

	#firstview p.btn,
	#lastview p.btn,
	#parts p.btn,
	#voice p.btn {
		width: 90vw;
	}

	.attention {
		font-size: 1.7vw;
		font-weight: normal;
		color: #000;
	}

	/*────────────　体型・体質　────────────*/
	#type div {
		background-size: 100% auto;
		font-size: 4vw;
		line-height: 1.4;
		padding-top: 17%;
	}

	#type div h2 {
		width: 95%;
	}

	#type div ul.taikei li {
		width: 45%;
		padding: 2vw 3vw;
		margin: 0 0 4% 3%;
	}

	#type div ul.taishitsu {
		margin-bottom: 0;
	}

	#type div ul.taishitsu li.mizu,
	#type div ul.taishitsu li.fat,
	#type div ul.taishitsu li.kata {
		width: 30%;
		padding: 2vw 3vw;
		margin: 0 0 11% 3%;
	}

	#type div ul.taishitsu li.fat,
	#type div ul.taishitsu li.kata {
		margin-left: 2%;
	}

	/*────────────　カウンセリング　────────────*/
	#counseling div p {
		font-size: 4.2vw;
		line-height: 1.6;
	}

	#counseling div p.counseling01 {
		left: 6vw;
		top: 11.5%;
	}

	#counseling div p.counseling02 {
		left: 6vw;
		top: 44%;
	}

	/*────────────　4つの技術　────────────*/
	#theory div {
		background-size: 100% auto;
	}

	#theory h2 {
		font-size: 4.5vw;
		line-height: 1.6;
		top: 52vw;
		left: 5vw;
		right: 5vw;
	}

	#theory h3 {
		margin-bottom: 2vw;
	}

	#theory h3 {
		width: 90%;
	}


	#theory div.theory1,
	#theory div.theory2,
	#theory div.theory3,
	#theory div.theory4 {
		width: 90%;
	}


	p.pic {
		width: 45%;
		margin: 4vw 3vw 4vw 4vw;
	}

	p.txt {
		width: 41%;
		font-size: 4vw;
		line-height: 1.6;
		margin: 2vw 4vw 4vw 0;
	}



	/*────────────　動画　────────────*/
	div#movie {
		margin: 17% auto 5% auto;
	}

	/*────────────　11箇所に細分　────────────*/
	#parts h2 {
		font-size: 4.5vw;
		line-height: 1.6;
		top: 70vw;
		left: 5vw;
		right: 5vw;
	}

	/*────────────　美しく痩せる　────────────*/
	#proportion h2 {
		font-size: 4.5vw;
		line-height: 1.6;
		top: 49vw;
		left: 5vw;
		right: 5vw;
	}

	#proportion h3 {
		width: 90%;
		margin-bottom: 2vw;
	}

	#proportion div.bust,
	#proportion div.weist,
	#proportion div.leg {
		width: 90%;
	}

	#proportion div.bust p.pic,
	#proportion div.weist p.pic,
	#proportion div.leg p.pic {
		margin-right: 2vw;
	}

	#proportion p.txt {
		font-size: 3.9vw;
		line-height: 1.5;
	}

	#proportion div.bust {
		top: 27%;
	}

	#proportion div.weist {
		top: 52%;
	}

	#proportion div.leg {
		top: 76.5%;
	}

	/*────────────　お客様の声　────────────*/

	#voice div {
		padding-bottom: 10vw;
	}

	#voice h1 {
		position: absolute;
		top: 2%;
		z-index: 9999;
	}





}