@charset "UTF-8";






/* SP */
@media screen and (max-width: 780px){
/* SP */
.pcOnly {
		display: none;
}
.spOnly {
	display: block;
}

#resalon{
	padding: 0;
	width: 100%;
}
#resalon .main{
	padding: 33vw 0 3vw;
	width: 100%;
	background-color: #ffd112;
}
#resalon .main .title{
	margin: 0 auto;
	padding: 3vw 0 5vw;
	width: 80%;
}
#resalon .main .title img{
	width: 100%;
}
#resalon .main .moya{
	margin: 0 auto;
	padding: 0 0 7vw;
	width: 85%;
}
#resalon .main .moya img{
	width: 100%;
	height: auto;
}
#resalon .main .moya2{
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 50vw;
	position: relative;
}
#resalon .main .moya2 .m01{
	width: 29%;
	height: auto;
	position: absolute;
	bottom: 5vw;
	left: 35.5%;
}
#resalon .main .moya2 .m02{
	width: 39.5%;
	height: auto;
	position: absolute;
	top: 0;
	left: 6.7%;
		opacity: 0;
}
#resalon .main .moya2 .m03{
	width: 37.3%;
	height: auto;
	position: absolute;
	top: 3.6%;
	right: 6.9%;
		opacity: 0;
}
#resalon .main .moya2 .m04{
	width: 33.6%;
	height: auto;
	position: absolute;
	bottom: 7vw;
	left: 2.3%;
		opacity: 0;
}
#resalon .main .moya2 .m05{
	width: 34.1%;
	height: auto;
	position: absolute;
	bottom: 4vw;
	right: 1%;
		opacity: 0;
}
#resalon .main .moya2 .m01 img,
#resalon .main .moya2 .m02 img,
#resalon .main .moya2 .m03 img,
#resalon .main .moya2 .m04 img,
#resalon .main .moya2 .m05 img{
	width: 100%;
	height: auto;
}
/* アニメ 
---------------------------------------------------------*/
.fade1{
	animation-name: fade-in1;
	animation-duration: 0.5s; /*アニメーション時間*/
	animation-timing-function: ease-out; /*アニメーションさせるイージング*/
	animation-delay: 1.2s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
@keyframes fade-in1{
	0% {
		opacity: 0;
	transform: scale(0.9);
	}
	100% {
		opacity: 1;
	transform: scale(1);
	}
}
.fade2{
	animation-name: fade-in2;
	animation-duration: 0.7s; /*アニメーション時間*/
	animation-timing-function: ease-out; /*アニメーションさせるイージング*/
	animation-delay: 1.4s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
@keyframes fade-in2{
	0% {
		opacity: 0;
	transform: scale(0.8);
	}
	100% {
		opacity: 1;
	transform: scale(1);
	}
}
.fade3{
	animation-name: fade-in3;
	animation-duration: 0.9s; /*アニメーション時間*/
	animation-timing-function: ease-out; /*アニメーションさせるイージング*/
	animation-delay: 1.7s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
@keyframes fade-in3{
	0% {
		opacity: 0;
	transform: scale(0.95);
	}
	100% {
		opacity: 1;
	transform: scale(1);
	}
}
.fade4{
	animation-name: fade-in4;
	animation-duration: 0.7s; /*アニメーション時間*/
	animation-timing-function: ease-out; /*アニメーションさせるイージング*/
	animation-delay: 1.9s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
@keyframes fade-in4{
	0% {
		opacity: 0;
	transform: scale(0.95);
	}
	100% {
		opacity: 1;
	transform: scale(1);
	}
}
#resalon .mainArrow{
	margin: 0 auto;
	padding: 0;
	width: 10%;
}
#resalon .mainArrow img{
	width: 100%;
	height: auto;
	vertical-align: top;
}
#resalon .moya3{
	margin: 0 auto;
	padding: 2vw 0 5vw;
	width: 83%;
}
#resalon .moya3 img{
	width: 100%;
	height: auto;
}
#resalon .what{
	margin: 0 auto 6vw;
	padding: 0.6vw 0;
	width: 95%;
	border-top: 2px solid #009fa8;
	border-bottom: 2px solid #009fa8;
	background-color: #fff;
}
#resalon .what .inner{
	margin: 0;
	padding: 4vw 0 2.5vw;
	width: 100%;
	border-top: 2px solid #009fa8;
	border-bottom: 2px solid #009fa8;
}
#resalon .what .inner .title{
	margin: 0 auto;
	padding: 0 0 2vw;
	width: 76%;
}
#resalon .what .inner .title img{
	width: 100%;
	height: auto;
}
#resalon .what .inner p{
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 3vw;
	line-height: 150%;
	text-align: center;
}
#resalon .what .inner .cap{
	margin: 0;
	padding: 2.5vw 0 0;
	width: 100%;
	font-size: 2.7vw;
	line-height: 150%;
	text-align: center;
	color: #728699;
}
#resalon .point{
	margin: 0;
	padding: 20vw 0 5vw;
	width: 100%;
	position: relative;
	background-color: #e8f5f6;
}
#resalon .point .illa{
	width: 40%;
	position: absolute;
	top: 5vw;
	right: 0;
	overflow-x: hidden;
}
#resalon .point .illa img{
	width: 100%;
	height: auto;
}
#resalon .point .title{
	margin: 0 auto;
	padding: 0 0 1vw;
	width: 66%;
	font-size: 5.2vw;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
	letter-spacing: 2px;
	font-feature-settings: "palt";
	border-bottom: 3px dashed #009fa8;
}
#resalon .point .box{
	margin: 5vw auto 0;
	padding: 0;
	width: 66%;
	height: auto;
}
#resalon .point .box img{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
}
#resalon .point .box .photo{
	margin: -3vw auto 0;
	width: 100%;
	position: relative;
	z-index: 1;
}
#resalon .point .box .photo img{
	width: 100%;
	height: auto;
}
#resalon .point .box p{
	margin: 0;
	padding: 2.6vw 0 2vw;
	width: 100%;
	font-size: 2.9vw;
	line-height: 150%;
	text-align: center;
}
#resalon .plan{
	margin: 0 auto;
	padding: 5vw 0 0;
	width: 100%;
	background-color: #fff;
}
#resalon .plan .title{
	margin: 0 auto 4vw;
	width: 100%;
	font-size: 5.8vw;
	line-height: 100%;
	font-weight: bold;
	letter-spacing: 2px;
}
#resalon .plan .title div{
	width: 100%;
	font-size: 2.8vw;
}
#resalon .plan .planImg{
	margin: 0 auto 2em;
	width: 60%;
}
#resalon .plan .planImg img{
	width: 100%;
	height: auto;
}
#resalon .plan .box{
	margin: 0 auto;
	padding: 0 0 5vw;
	width: 68%;
}
#resalon .plan .box img{
	margin: 0 0 0 -3%;
	width: 100%;
	height: auto;
	z-index: 1;
}
#resalon .plan .box .inBox{
	margin: -1.5vw auto 0;
	padding: 0;
	width: 100%;
	border-left: 5px solid #f4c924;
	border-right: 5px solid #f4c924;
	border-top: 5px solid #f4c924;
	border-bottom: none;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 2;
	position: relative;
}
#resalon .plan .box .inBox .boxT{
	margin: 0 auto;
	padding: 3vw 8% 3vw;
	width: 84%;
	background-color: #f4c924;
	text-align: center;
}
#resalon .plan .box .inBox .boxT img{
	margin: 0;
	width: 100%;
	height: auto;
}
#resalon .plan .box .inBox .boxT .line{
	margin: 2vw auto;
	padding: 0;
	width: 100%;
	height: 5px;
	border-radius: 5px;
	background-color: #fff;
}
#resalon .plan .box .inBox .boxT .price{
	display: inline-block;
	font-size: 8vw;
	line-height: 100%;
	font-weight: bold;
	color: #fff;
}
#resalon .plan .box .inBox .boxT .tax{
	display: inline-block;
	font-size: 2.4vw;
	line-height: 150%;
	font-weight: bold;
	color: #fff;
}
#resalon .plan .box .inBox .boxT .tax div{
	font-size: 10vw;
	font-weight: normal;
}
#resalon .plan .box .inBox .boxT .ps{
 margin: 0 0 0 -4%;
	padding: 2vw 0 0;
	width: 108%;
 font-size: 2.8vw;
 line-height: 130%;
 letter-spacing: 0;
 font-feature-settings: "palt";
}
#resalon .plan .box .planArrow{
	margin: 0;
	padding: 2vw 0 0;
	width: 100%;
	cursor: pointer;
}
#resalon .plan .box .planArrow.active{
	display: none;
}
#resalon .plan .box .planArrow img{
	margin: 0 auto;
	width: 10%;
	height: auto;
}
#resalon .plan .box .inBox2{
	display: none;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	border-left: 5px solid #f4c924;
	border-right: 5px solid #f4c924;
	border-top: none;
	border-bottom: 5px solid #f4c924;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#resalon .plan .box .inBox2 .fBox{
	margin: 0 auto;
	padding: 1.1vw 0 1vw;
	width: 84%;
	text-align: left;
}
#resalon .plan .box .inBox2 .fBox img{
	margin: 0 1% 0 0;
	width: 15%;
	height: auto;
	display: inline-block;
}
#resalon .plan .box .inBox2 .fBox .info{
	margin: 2vw auto 1.5vw;
	padding: 1vw 4% 0.8vw 4%;
	background-color: #f4c924;
	font-size: 3.5vw;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
	color: #fff;
	display: inline-block;
 letter-spacing: -0.4vw;
}
#resalon .plan .box .inBox2 .fBox .info2{
	margin: 3vw 0 0 0;
	padding: 1vw 3% 0.7vw;
	font-size: 2vw;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
	color: #046676;
	display: inline-block;
	border: 1px solid #046676;
	border-radius: 10px;
	vertical-align: middle;
	float: right;
}
#resalon .plan .box .inBox2 .fBox .a{
	margin: 1vw auto 0;
	padding: 0 0 0 20%;
	width: 100%;
	font-size: 5vw;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
	display: inline-block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#resalon .plan .box .inBox2 .fBox .a span{
	padding: 0 0 0 2%;
	font-size: 4vw;
	font-feature-settings: "palt";
}
#resalon .plan .box .inBox2 .fBox .a .q{
	margin: 0;
	padding: 2px 4px;
	background-color: #009fa8;
	font-size: 1.8vw;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
	color: #fff;
	border-radius: 3px;
	display: inline-block;
	position: absolute;
	top: -0.5vw;
	left: 15%;
}
#resalon .plan .box .inBox2 .fBox .cap{
	margin: 0 auto;
	padding: 1vw 0;
	width: 40%;
	font-size: 2.2vw;
	line-height: 100%;
	text-align: left;
}
#resalon .plan .box .inBox2 .line{
	margin: 2vw auto 1vw;
	padding: 0;
	width: 100%;
	height: 5px;
	border-radius: 5px;
	background-color: #f4c924;
}
#resalon .plan .check{
	margin: 2vw auto 0;
	padding: 4vw 0 3vw;
	width: 84%;
	background-color: #e8f5f6;
}
#resalon .plan .check .sub{
	margin: 0 auto;
	padding: 0 0 2vw;
	width: 90%;
	font-size: 3.3vw;
	line-height: 140%;
	text-align: center;
	color: #009fa8;
	font-weight: bold;
	border-bottom: 3px solid #009fa8;
	letter-spacing: 2px;
}
#resalon .plan .check ul{
	margin: 0 auto;
	padding: 5vw 0 2vw;
	width: 75%;
}
#resalon .plan .check ul.ul2{
	display: none;
}
#resalon .plan .check li{
	margin: 0 0 2.2vw 0;
	padding: 0;
	font-size: 3.4vw;
	text-align: left;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#resalon .plan .check li img{
	margin: 0 3% 0 0;
	width: 7%;
	height: auto;
}
#resalon .plan .check p{
	margin: 0 auto;
	padding: 0;
	width: 90%;
	font-size: 2.4vw;
	text-align: right;
}


#plan2{
	margin: 0 auto;
	padding: 15vw 0 5vw;
	width: 77%;
}
#plan2 .material{
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
#plan2 .material .bt{
	margin: 0 auto 4vw;
	padding: 0;
	width: 100%;
	position: relative;
	background-color: #fff;
	border-radius: 20px;
}
#plan2 .material .bt::after{
position: absolute;
top: 3px;
left: 2px;
content: '';
width: 100%;
height: 100%;
background-color: #000;
	border-radius: 20px;
z-index: -1;
}
#plan2 .material .bt a{
	padding: 4.5vw 0 3.5vw 19%;
	width: 100%;
	font-size: 5vw;
	text-align: left;
	font-weight: bold;
	display: block;
	transition: .3s;
	background-color: #fff;
	border: 2px solid #000;
	border-radius: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	letter-spacing: -1px;
	background-image: url(../images/arrow.png);
	background-position: left 8% center;
	background-size: 10% auto;
	background-repeat: no-repeat;
}
#plan2 .material .bt a span{
	font-size: 4vw;
	letter-spacing: 0px;
}
#plan2 .material .bt a:hover{
  opacity:0.5;
  filter: alpha(opacity=50);
}


#price{
	margin: 0 auto;
	padding: 2vw 0 0;
	width: 100%;
}
#price .illa{
	margin: 0 auto;
	width: 86%;
}
#price .illa img{
	width: 100%;
	height: auto;
}
#price ul{
	margin: 0 auto;
	padding: 7vw 0 0;
	width: 90%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#price li{
	padding: 0 0 4vw;
	width: 100%;
}
#price li:last-child{
	margin: 0 0 -2vw;
	padding: 0;
}
#price li img{
	width: 9%;
	height: auto;
	float: left;
}
#price li div{
	padding: 0 0 0 11%;
	font-size: 3.4vw;
	line-height: 140%;
	text-align: left;
}
#price li div span{
	padding: 0 5px;
background:linear-gradient(transparent 65%, #fff100 65%);
}
#price li div .q{
	margin: 0.3vw 0 0;
	padding: 3px 6px;
	background-color: #009fa8;
	font-size: 2.6vw;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
	color: #fff;
	border-radius: 3px;
	display: inline-block;
	z-index: 2;
	position: relative;
	vertical-align: text-top;
}

#case{
	margin: 0 auto;
	padding: 7vw 0 5vw;
	width: 100%;
	background-color: #e8f5f6;
}
#case .title{
	margin: 0 auto 4vw;
	width: 100%;
	font-size: 5.8vw;
	line-height: 100%;
	font-weight: bold;
	letter-spacing: 2px;
}
#case .title div{
	width: 100%;
	font-size: 2.8vw;
}
#case .b_a{
 margin: 0 auto;
 padding: 0;
 width: 94%;
 position: relative;
}
#case .b_a img{
	width: 100%;
	height: auto;
}
#case .b_a div{
 font-size: 2.8vw;
 text-align: left;
 position: absolute;
 bottom: 4vw;
 left: 4%;
}
#case .voice{
	margin: 0 auto;
	padding: 5vw 0 0;
	width: 94%;
}
#case .voice .title{
	margin: 0 auto 3.5vw;
	padding: 0;
	width: 100%;
	font-size: 4.8vw;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
	letter-spacing: 1px;
	position: relative;
}
#case .voice .title div{
	margin: 0 auto;
	padding: 0;
	width: 100%;
	font-size: 2.8vw;
	letter-spacing: 1px;
}
#case .voice .title .voice{
	width: 18%;
	position: absolute;
	top: 0;
	left: 6%;
}
#case .voice .title .voice img{
	width: 100%;
	height: auto;
}
#case .voice .box{
	margin: 0 auto 0.5em;
	padding: 0;
	width: 90%;
	border-radius: 30px;
	overflow: hidden;
}
#case .voice .box .sub{
	margin: 0 auto;
	padding: 2.6vw 0 2vw;
	width: 100%;
	background-color: #ffd112;
	font-size: 3.2vw;
	line-height: 130%;
	text-align: center;
	font-weight: bold;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#case .voice .box p{
	margin: 0 auto;
	padding: 3vw 4% 2.2vw;
	width: 100%;
	font-size: 3.1vw;
	line-height: 140%;
	text-align: left;
	background-color: #fff;
	border-left: 2px dotted #ffd112;
	border-right: 2px dotted #ffd112;
	border-bottom: 2px dotted #ffd112;
	border-top: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}
#case .voice .box p span{
	padding: 0 0px;
background:linear-gradient(transparent 65%, #fff100 65%);
}
#case .voice .box p span.cap{
	padding: 0.5em 0 0;
	font-size: 2.2vw;
	font-weight: bold;
	text-align: right;
background:linear-gradient(transparent 65%, #fff 65%);
	display: block;
	float: none;
}

#faq{
	margin: 0 auto;
	padding: 6vw 0 0;
	width: 100%;
}
#faq .title{
	margin: 0 auto 2vw;
	padding: 0 0 0 12px;
	width: 100%;
	font-size: 5.8vw;
	line-height: 100%;
	font-weight: bold;
	letter-spacing: 12px;
}
#faq .title.at{
	letter-spacing: 5px;
	text-align: center;
}
#faq .title div{
	margin: 0 0 0 -6px;
	width: 100%;
	font-size: 2.8vw;
	letter-spacing: 2px;
}
#faq dl{
	margin: 0 auto;
	padding: 2vw 0 1.5vw;
	width: 84%;
}
#faq dt{
	margin: 0 auto;
	padding: 2vw 0 1.8vw 9%;
	width: 100%;
	font-size: 3.4vw;
	line-height: 150%;
	text-align: left;
	font-weight: bold;
	color: #fff;
	border-radius: 10px;
	background-color: #009fa8;
	background-image: url(../images/faq_arrow.png);
	background-position: left 4% top 3.1vw;
	background-repeat: no-repeat;
	background-size: 3.5% auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
}
#faq dt div{
	float: left;
	width: 8%;
	font-size: 3.2vw;
	line-height: 140%;
	text-align: left;
	font-weight: bold;
}
#faq dt p{
	margin: 0 0 0 8%;
	padding: 0;
	width: 92%;
	font-size: 3.2vw;
	line-height: 140%;
	text-align: left;
	font-weight: bold;
}
#faq dd{
	display: none;
	margin: 0 auto;
	padding: 2vw 0;
	width: 100%;
	font-size: 2.9vw;
	line-height: 150%;
	text-align: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-feature-settings: "palt";
}
#faq .fcover{
	margin: 6vw 0 0;
	padding: 9vw 8% 7vw;
	width: 100%;
	background-color: #e8f5f6;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
}
#faq .fcover .aT{
	padding: 4vw 0 2.5vw;
	width: 100%;
	font-size: 3.1vw;
	line-height: 150%;
	text-align: left;
	font-weight: bold;
	color: #009fa8;
}
#faq .fcover p{
	padding: 0;
	width: 100%;
	font-size: 3vw;
	line-height: 150%;
	text-align: left;
}
#faq .fcover .accBt{
	margin: 3vw 0 0;
	padding: 2.6vw 3% 2.2vw 9%;
	width: 48%;
	font-size: 3.1vw;
	line-height: 100%;
	text-align: left;
	color: #009fa8;
	font-weight: bold;
	display: block;
	border-radius: 8px;
	border: 2px solid #009fa8;
	background-color: #fff;
	background-image: url(../images/att_arrow.png);
	background-position: left 8% center;
	background-repeat: no-repeat;
	background-size: 8% auto;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#faq .fcover .acc{
	display: none;
	padding: 2vw 0 0.5vw;
	width: 100%;
	font-size: 3vw;
	line-height: 150%;
	text-align: left;
}

.bt_area{
	margin: 0 auto;
	padding: 8.2vw 0;
	width: 85%;
}
.bt_area .bt{
	position: relative;
}
.bt_area .bt.bt_l{
	float: none;
	margin: 0 0 2.2vw;
}
.bt_area .bt.bt_r{
	float: none;
}

.bt_area .bt a{
	width: 100%;
	padding: 4vw 3% 4vw 0;
	background-color: #006979;
	display: block;
	border: 1px solid #006979;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	vertical-align: middle;
	text-decoration: none;
	font-size: 4.2vw;
	color: #fff;
	line-height: 100%;
	font-weight: bold;
	background-image: url(../images/bt_arrow.png);
	background-position: right 3% center;
	background-size: 5.6% auto;
	background-repeat: no-repeat;
}
.bt_area .bt:last-child a{
	background-position: right 24% center;
}
.bt_area .bt a:hover{
	background-image: url(../images/bt_arrow2.png);
	background-position: right 1% center;
	color: #006979;
	background-color: #fff;
	opacity:1;
}
.bt_area .bt:last-child a:hover{
	background-position: right 22% center;
}


}



@media screen and (min-width: 781px){
/* PC */
.pcOnly {
	display: block;
}
.spOnly {
	display: none;
}

#resalon{
	padding: 0;
	width: 100%;
}
#resalon .main{
	padding: 150px 0 30px;
	width: 100%;
	background-color: #ffd112;
}
#resalon .main .title{
	margin: 0 auto;
	padding: 0 0 40px;
	width: 720px;
}
#resalon .main .title img{
	width: 100%;
}
#resalon .main .moya{
	margin: 0 auto;
	padding: 0 0 50px;
	width: 760px;
}
#resalon .main .moya img{
	width: 100%;
	height: auto;
}
#resalon .main .moya2{
	margin: 0 auto;
	padding: 0;
	width: 900px;
	height: 450px;
	position: relative;
}
#resalon .main .moya2 .m01{
	width: 250px;
	height: auto;
	position: absolute;
	top: 149px;
	left: 333px;
}
#resalon .main .moya2 .m02{
	width: 370px;
	height: 180px;
	position: absolute;
	top: 0;
	left: 47px;
		opacity: 0;
}
#resalon .main .moya2 .m03{
	width: 350px;
	height: 158px;
	position: absolute;
	top: 36px;
	right: 57px;
		opacity: 0;
}
#resalon .main .moya2 .m04{
	width: 314px;
	height: 169px;
	position: absolute;
	bottom: 91px;
	left: 0px;
		opacity: 0;
}
#resalon .main .moya2 .m05{
	width: 319px;
	height: 168px;
	position: absolute;
	bottom: 67px;
	right: 0px;
		opacity: 0;
}
#resalon .main .moya2 .m01 img,
#resalon .main .moya2 .m02 img,
#resalon .main .moya2 .m03 img,
#resalon .main .moya2 .m04 img,
#resalon .main .moya2 .m05 img{
	width: 100%;
	height: auto;
}
/* アニメ 
---------------------------------------------------------*/
.fade1{
	animation-name: fade-in1;
	animation-duration: 0.5s; /*アニメーション時間*/
	animation-timing-function: ease-out; /*アニメーションさせるイージング*/
	animation-delay: 1.2s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
@keyframes fade-in1{
	0% {
		opacity: 0;
	transform: scale(0.9);
	}
	100% {
		opacity: 1;
	transform: scale(1);
	}
}
.fade2{
	animation-name: fade-in2;
	animation-duration: 0.7s; /*アニメーション時間*/
	animation-timing-function: ease-out; /*アニメーションさせるイージング*/
	animation-delay: 1.4s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
@keyframes fade-in2{
	0% {
		opacity: 0;
	transform: scale(0.8);
	}
	100% {
		opacity: 1;
	transform: scale(1);
	}
}
.fade3{
	animation-name: fade-in3;
	animation-duration: 0.9s; /*アニメーション時間*/
	animation-timing-function: ease-out; /*アニメーションさせるイージング*/
	animation-delay: 1.7s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
@keyframes fade-in3{
	0% {
		opacity: 0;
	transform: scale(0.95);
	}
	100% {
		opacity: 1;
	transform: scale(1);
	}
}
.fade4{
	animation-name: fade-in4;
	animation-duration: 0.7s; /*アニメーション時間*/
	animation-timing-function: ease-out; /*アニメーションさせるイージング*/
	animation-delay: 1.9s; /*アニメーション開始させる時間*/
	animation-iteration-count: 1; /*繰り返し回数*/
	animation-direction: normal; /*往復処理をするかどうか*/
	animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
@keyframes fade-in4{
	0% {
		opacity: 0;
	transform: scale(0.95);
	}
	100% {
		opacity: 1;
	transform: scale(1);
	}
}
#resalon .mainArrow{
	margin: 0 auto;
	padding: 0;
	width: 60px;
}
#resalon .mainArrow img{
	width: 100%;
	height: auto;
	vertical-align: top;
}
#resalon .moya3{
	margin: 0 auto;
	padding: 30px 0 50px;
	width: 800px;
}
#resalon .moya3 img{
	width: 100%;
	height: auto;
}
#resalon .what{
	margin: 0 auto 80px;
	padding: 5px 0;
	width: 850px;
	border-top: 2px solid #009fa8;
	border-bottom: 2px solid #009fa8;
	background-color: #fff;
}
#resalon .what .inner{
	margin: 0;
	padding: 40px 0 30px;
	width: 100%;
	border-top: 2px solid #009fa8;
	border-bottom: 2px solid #009fa8;
}
#resalon .what .inner .title{
	margin: 0 auto;
	padding: 0 0 20px;
	width: 450px;
}
#resalon .what .inner .title img{
	width: 100%;
	height: auto;
}
#resalon .what .inner p{
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 21px;
	line-height: 150%;
	text-align: center;
}
#resalon .what .inner .cap{
	margin: 0;
	padding: 20px 0 0;
	width: 100%;
	font-size: 18px;
	line-height: 150%;
	text-align: center;
	color: #728699;
}
#resalon .point{
	margin: 0 auto;
	padding: 100px 0 90px;
	width: 100%;
	position: relative;
	background-color: #e8f5f6;
}
#resalon .point .inner{
	margin: 0 auto;
	padding: 0;
	width: 1090px;
	position: relative;
}
#resalon .point .illa{
	width: 300px;
	position: absolute;
	top: -65px;
	right: -50px;
	overflow-x: hidden;
	z-index: 2;
}
#resalon .point .illa img{
	width: 100%;
	height: auto;
}
#resalon .point .title{
	margin: 0 auto 50px;
	padding: 0 0 20px;
	width: 100%;
	font-size: 40px;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
	letter-spacing: 2px;
	font-feature-settings: "palt";
	border-bottom: 3px dashed #009fa8;
}
#resalon .point .box{
	margin: 0 0 0 0;
	padding: 0;
	width: 363px;
	height: auto;
	float: left;
}
#resalon .point .box:last-child{
	margin: 0;
}
#resalon .point .box img{
	margin: 0 auto;
	width: 90%;
	height: auto;
	position: relative;
	z-index: 2;
}
#resalon .point .box .photo{
	margin: -10px auto 0;
	width: 90%;
	position: relative;
	z-index: 1;
}
#resalon .point .box .photo img{
	width: 100%;
	height: auto;
}
#resalon .point .box p{
	margin: 0;
	padding: 10px 0 10px;
	width: 100%;
	font-size: 16px;
	line-height: 150%;
	text-align: center;
}
#resalon .plan{
	margin: 0 auto;
	padding: 100px 0 0;
	width: 1090px;
	background-color: #fff;
}
#resalon .plan .title{
	margin: 0 auto 30px;
	width: 100%;
	font-size: 50px;
	line-height: 90%;
	font-weight: bold;
	letter-spacing: 2px;
}
#resalon .plan .title div{
	width: 100%;
	font-size: 18px;
}
#resalon .plan .planImg{
	margin: 0 auto 60px;
	width: 400px;
}
#resalon .plan .planImg img{
	width: 100%;
	height: auto;
}
#resalon .plan .box{
	margin: 0 20px 0 0;
	padding: 0 0 30px;
	width: 343px;
	height: auto;
	float: left;
}
#resalon .plan .box:last-child{
	margin: 0;
}
#resalon .plan .box img{
	margin: 0 0 0 -5px;
	width: 100%;
	height: auto;
	z-index: 1;
}
#resalon .plan .box .inBox{
	margin: -10px auto 0;
	padding: 0;
	width: 100%;
	border-left: 5px solid #f4c924;
	border-right: 5px solid #f4c924;
	border-top: 5px solid #f4c924;
	border-bottom: none;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 2;
	position: relative;
}
#resalon .plan .box .inBox .boxT{
	margin: 0 auto;
	padding: 20px 5% 15px;
	width: 91%;
	background-color: #f4c924;
	text-align: center;
}
#resalon .plan .box .inBox .boxT img{
	margin: 0 auto;
	width: 95%;
	height: auto;
}
#resalon .plan .box .inBox .boxT .line{
	margin: 15px auto;
	padding: 0;
	width: 100%;
	height: 4px;
	border-radius: 5px;
	background-color: #fff;
}
#resalon .plan .box .inBox .boxT .price{
	display: inline-block;
	font-size: 45px;
	line-height: 100%;
	font-weight: bold;
	color: #fff;
	font-feature-settings: "palt";
}
#resalon .plan .box .inBox .boxT .tax{
	display: inline-block;
	font-size: 16px;
	line-height: 140%;
	font-weight: bold;
	color: #fff;
	font-feature-settings: "palt";
}
#resalon .plan .box .inBox .boxT .tax div{
	font-size: 40px;
	font-weight: normal;
}
#resalon .plan .box .inBox .boxT .ps{
 margin: 0 0 0 -4%;
	padding: 5px 0 0;
	width: 108%;
 font-size: 12px;
 line-height: 140%;
 letter-spacing: 0;
 font-feature-settings: "palt";
}
#resalon .plan .box .planArrow{
	display: none;
}
#resalon .plan .box .planArrow.active{
	display: none;
}
#resalon .plan .box .planArrow img{
	margin: 0 auto;
	width: 10%;
	height: auto;
}
#resalon .plan .box .inBox2{
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	border-left: 5px solid #f4c924;
	border-right: 5px solid #f4c924;
	border-top: none;
	border-bottom: 5px solid #f4c924;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#resalon .plan .box .inBox2 .fBox{
	margin: 0 auto;
	padding: 4px 0 10px;
	width: 90%;
	text-align: left;
}
#resalon .plan .box .inBox2 .fBox img{
	margin: 0 3px 0 0;
	width: 38px;
	height: auto;
	display: inline-block;
}
#resalon .plan .box .inBox2 .fBox .info{
 margin: 3px auto 6px;
 padding: 4px 8px 3px 8px;
 background-color: #f4c924;
 font-size: 19px;
 line-height: 100%;
 text-align: center;
 font-weight: bold;
 color: #fff;
 display: inline-block;
 letter-spacing: 0;
}
#resalon .plan .box .inBox2 .fBox .info2{
	margin: 9px 0 0 5px;
	padding: 4px 10px 4px;
	font-size: 12px;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
	color: #046676;
	display: inline-block;
	border: 1px solid #046676;
	border-radius: 10px;
	vertical-align: middle;
	float: right;
}
#resalon .plan .box .inBox2 .fBox .a{
	margin: 6px auto 0;
	padding: 0 0 0 78px;
	width: 100%;
	font-size: 26px;
	line-height: 100%;
	text-align: left;
	font-weight: bold;
	display: inline-block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-feature-settings: "palt";
}
#resalon .plan .box .inBox2 .fBox .a span{
	padding: 0 0 0 2%;
	font-size: 19px;
}
#resalon .plan .box .inBox2 .fBox .a .q{
	margin: 0;
	padding: 2px 4px;
	background-color: #046676;
	font-size: 12px;
	line-height: 100%;
	text-align: center;
	font-weight: bold;
	color: #fff;
	border-radius: 3px;
	display: inline-block;
	position: absolute;
	top: -2px;
	left: 45px;
}
#resalon .plan .box .inBox2 .fBox .cap{
	margin: 0 0 0 auto;
	padding: 3px 0 0;
	width: 185px;
	font-size: 12px;
	line-height: 100%;
	text-align: left;
}
#resalon .plan .box .inBox2 .line{
	margin: 10px auto 5px;
	padding: 0;
	width: 100%;
	height: 4px;
	border-radius: 5px;
	background-color: #f4c924;
}
#resalon .plan .check{
	margin: 0 auto 0;
	padding: 30px 0 25px;
	width: 100%;
	background-color: #e8f5f6;
}
#resalon .plan .check .sub{
	margin: 0 auto;
	padding: 0 0 15px;
	width: 90%;
	font-size: 28px;
	line-height: 140%;
	text-align: center;
	color: #009fa8;
	font-weight: bold;
	border-bottom: 2px solid #009fa8;
	letter-spacing: 2px;
}
#resalon .plan .check ul{
	margin: 0;
	padding: 30px 0 10px 5%;
	width: 45%;
	float: left;
}
#resalon .plan .check ul.ul2{
	display: block;
	margin: 0 auto;
	padding: 30px 5% 10px 0;
	width: 45%;
	float: right;
}
#resalon .plan .check li{
	margin: 0 0 25px 0;
	padding: 0;
	font-size: 26px;
	text-align: left;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#resalon .plan .check li img{
	margin: 0 12px -1px 0;
	width: 30px;
	height: auto;
}
#resalon .plan .check ul.ul1 li:nth-child(4),
#resalon .plan .check ul.ul1 li:nth-child(5),
#resalon .plan .check ul.ul1 li:nth-child(6){
	display: none;
}
#resalon .plan .check p{
	margin: 0 auto;
	padding: 0;
	width: 90%;
	font-size: 18px;
	text-align: right;
}


#plan2{
	margin: 0 auto;
	padding: 50px 0 20px;
	width: 1090px;
}
#plan2 .material{
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
#plan2 .material .box{
	margin: 0 7px;
	padding: 0;
	width: 345px;
	display: inline-block;
}
#plan2 .material .box p{
	margin: 0 auto;
	padding: 0 0 8px;
	font-size: 24px;
	text-align: center;
	font-weight: bold;
}
#plan2 .material .box p span{
	font-size: 22px;
	font-weight: normal;
}
#plan2 .material .box p img{
	margin: 0 10px -7px 0;
	width: 40px;
	height: auto;
}
#plan2 .material .box img{
	width: 100%;
	height: auto;
}
#plan2 .material .box a{
transition: .3s;
}
#plan2 .material .box a:hover{
  opacity:0.5;
  filter: alpha(opacity=50);
}



#price{
	margin: 50px auto 0;
	padding: 50px 0 0;
	width: 1090px;
}
#price .illa{
	width: 183px;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
}
#price .illa img{
	width: 100%;
	height: auto;
}
#price .price0{
	width: 600px;
	height: auto;
	position: absolute;
	top: 5px;
	left: 165px;
}
#price .price0 img{
	width: 100%;
	height: auto;
}
#price ul{
	margin: 0;
	padding: 40px 0 0 220px;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#price li{
	padding: 0 0 20px;
	width: 100%;
}
#price li sup{
    vertical-align: super;
    font-size: 11px;
}
#price li img{
	width: 63px;
	height: auto;
	float: left;
}
#price li div{
	padding: 0 0 0 78px;
	font-size: 18px;
	line-height: 150%;
	text-align: left;
}
#price li div span{
	padding: 0 5px;
background:linear-gradient(transparent 65%, #fff100 65%);
}
#price .cap{
	margin: 0 auto;
	padding: 35px 0 0;
	width: 1100px;
	font-size: 14px;
	line-height: 140%;
	text-align: left;
}

#case{
	margin: 0 auto;
	padding: 100px 0 90px;
	width: 100%;
	background-color: #e8f5f6;
}
#case .title{
	margin: 0 auto 30px;
	width: 100%;
	font-size: 50px;
	line-height: 90%;
	font-weight: bold;
	letter-spacing: 2px;
}
#case .title div{
	width: 100%;
	font-size: 18px;
}
#case .b_a{
 margin: 0 auto;
 padding: 0;
 width: 1190px;
 position: relative;
}
#case .b_a img{
	width: 100%;
	height: auto;
}
#case .b_a div{
 font-size: 18px;
 text-align: left;
 position: absolute;
 bottom: 85px;
 left: 55px;
}
#case .voice{
	margin: 0 auto;
	padding: 10px 0 0;
	width: 1090px;
}
#case .voice .title{
	margin: 0 auto 20px;
	padding: 15px 0 0;
	width: 100%;
	font-size: 36px;
	line-height: 90%;
	text-align: center;
	font-weight: bold;
	letter-spacing: 1px;
	position: relative;
}
#case .voice .title div{
	margin: 0 auto;
	padding: 0;
	width: 100%;
	font-size: 16px;
	letter-spacing: 1px;
}
#case .voice .title .voice{
	width: 160px;
	position: absolute;
	top: 0;
	left: 6%;
}
#case .voice .title .voice img{
	width: 100%;
	height: auto;
}
#case .voice .box{
	margin: 0 auto;
	padding: 0;
	width: 100%;
	border-radius: 30px;
	overflow: hidden;
}
#case .voice .box .sub{
	margin: 0 auto;
	padding: 25px 0 20px;
	width: 100%;
	background-color: #ffd112;
	font-size: 30px;
	line-height: 130%;
	text-align: center;
	font-weight: bold;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#case .voice .box p{
	margin: 0 auto;
	padding: 30px 4% 25px;
	width: 100%;
	font-size: 20px;
	line-height: 140%;
	text-align: left;
	background-color: #fff;
	border-left: 2px dotted #ffd112;
	border-right: 2px dotted #ffd112;
	border-bottom: 2px dotted #ffd112;
	border-top: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}
#case .voice .box p span{
	padding: 0 2px;
background:linear-gradient(transparent 65%, #fff100 65%);
}
#case .voice .box p span.cap{
	padding: 0.5em 0 0;
	font-size: 18px;
	font-weight: bold;
	text-align: right;
background:linear-gradient(transparent 65%, #fff 65%);
	display: block;
	float: none;
}

#faq{
	margin: 0 auto;
	padding: 100px 0 0;
	width: 100%;
}
#faq .title{
	margin: 0 auto 20px;
	padding: 0 0 0 12px;
	width: 100%;
	font-size: 50px;
	line-height: 90%;
	font-weight: bold;
	letter-spacing: 12px;
}
#faq .title.at{
	margin: 0 auto;
	width: 1090px;
	letter-spacing: 5px;
	text-align: center;
}
#faq .title div{
	margin: 0 0 0 -6px;
	width: 100%;
	font-size: 18px;
	letter-spacing: 2px;
}
#faq dl{
	margin: 0 auto;
	padding: 20px 0 15px;
	width: 1090px;
}
#faq dt{
	margin: 0 auto;
	padding: 20px 0 18px 70px;
	width: 100%;
	line-height: 150%;
	text-align: left;
	font-weight: bold;
	color: #fff;
	border-radius: 10px;
	background-color: #009fa8;
	background-image: url(../images/faq_arrow.png);
	background-position: left 25px top 23px;
	background-repeat: no-repeat;
	background-size: 30px auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
}
#faq dt div{
	float: left;
	width: 50px;
	font-size: 24px;
	line-height: 140%;
	text-align: left;
	font-weight: bold;
}
#faq dt p{
	margin: 0 0 0 50px;
	padding: 0;
	width: calc(100% - 50px);
	font-size: 24px;
	line-height: 140%;
	text-align: left;
	font-weight: bold;
}
#faq dd{
	display: none;
	margin: 0 auto;
	padding: 12px 0 0;
	width: 100%;
	font-size: 22px;
	line-height: 150%;
	text-align: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#faq .fcover{
	margin: 70px 0 0;
	padding: 100px 8% 60px;
	width: 100%;
	background-color: #e8f5f6;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
}
#faq .fcover .inner{
	margin: 0 auto;
	width: 1090px;
}
#faq .fcover .aT{
	margin: 0 auto;
	padding: 20px 0 20px;
	width: 100%;
	font-size: 25.5px;
	line-height: 150%;
	text-align: left;
	font-weight: bold;
	color: #009fa8;
	font-feature-settings: "palt";
}
#faq .fcover p{
	margin: 0 auto;
	padding: 0;
	width: 100%;
	font-size: 20px;
	line-height: 150%;
	text-align: left;
}
#faq .fcover .accBt{
	margin: 20px 0 0;
	padding: 19px 0 18px 55px;
	width: 280px;
	font-size: 20px;
	line-height: 100%;
	text-align: left;
	color: #009fa8;
	font-weight: bold;
	display: block;
	border-radius: 8px;
	border: 2px solid #009fa8;
	background-color: #fff;
	background-image: url(../images/att_arrow.png);
	background-position: left 20px top 20px;
	background-repeat: no-repeat;
	background-size: 22px auto;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: .3s;
}
#faq .fcover .accBt:hover{
opacity: .5;
}
#faq .fcover .acc{
	display: none;
	padding: 15px 0 10px;
	width: 100%;
	font-size: 20px;
	line-height: 150%;
	text-align: left;
}

.bt_area{
	margin: 0 auto;
	padding: 70px 0;
	width: 950px;
}
.bt_area .bt{
	position: relative;
}
.bt_area .bt.bt_l{
	float: left;
	margin: 0;
}
.bt_area .bt.bt_r{
	float: right;
}

.bt_area .bt a{
	width: 450px;
	padding: 25px 20px 25px 0;
	background-color: #006979;
	display: block;
	border: 1px solid #006979;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	vertical-align: middle;
	text-decoration: none;
	font-size: 22px;
	color: #fff;
	line-height: 100%;
	font-weight: bold;
	background-image: url(../images/bt_arrow.png);
	background-position: right 23px center;
	background-size: 27px auto;
	background-repeat: no-repeat;
}
.bt_area .bt:last-child a{
	background-position: right 110px center;
}
.bt_area .bt a:hover{
	background-image: url(../images/bt_arrow2.png);
	background-position: right 13px center;
	color: #006979;
	background-color: #fff;
	opacity:1;
}
.bt_area .bt:last-child a:hover{
	background-position: right 100px center;
}



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

#case .voice .title{
	font-size: 130%;
}
#case .voice .title .voice{
	width: 14%;
	position: absolute;
	top: 0;
	left: 3%;
}
.bt_area .bt a.arrow{
	font-size: 95%;
}
}