/* CSS Document */
/*.spa{ background: url(../spa/images/spa_all.jpg) center -40px no-repeat;}*/


@media (min-width:641px){
.showup {
	opacity: 0;
	transition: 1s;
	transform: translateY(20px);
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
}
.upview {
	-moz-animation: showup 0.6s linear 0s 1 normal forwards;
	-webkit-animation: showup 0.6s linear 0s 1 normal forwards;
	-o-animation: showup 0.6s linear 0s 1 normal forwards;
	-ms-animation: showup 0.6s linear 0s 1 normal forwards;	
}
.upview.uv2 {
	-moz-animation: showup 0.6s linear 0.3s 1 normal forwards;
	-webkit-animation: showup 0.6s linear 0.3s 1 normal forwards;
	-o-animation: showup 0.6s linear 0.3s 1 normal forwards;
	-ms-animation: showup 0.6s linear 0.3s 1 normal forwards;	
}
.upview.uv3 {
	-moz-animation: showup 0.6s linear 0.6s 1 normal forwards;
	-webkit-animation: showup 0.6s linear 0.6s 1 normal forwards;
	-o-animation: showup 0.6s linear 0.6s 1 normal forwards;
	-ms-animation: showup 0.6s linear 0.6s 1 normal forwards;	
}
.upview.uv4 {
	-moz-animation: showup 0.6s linear 0.9s 1 normal forwards;
	-webkit-animation: showup 0.6s linear 0.9s 1 normal forwards;
	-o-animation: showup 0.6s linear 0.9s 1 normal forwards;
	-ms-animation: showup 0.6s linear 0.9s 1 normal forwards;	
}

	#ttl_wrp #ttl { background: url(../images/mv.jpg) center center no-repeat; }
	#ttl_wrp #ttl h2 { width: 500px; margin-left: -250px; top:75px; }

	#p1 { padding-top: 0; }
	.box .lead { margin: 0 auto 60px; text-align: center; }

	.step { width: 1000px; margin: 0 auto; }
	.step>li { display: flex; flex-direction:row-reverse; justify-content:space-between; position: relative;
		margin-bottom: 50px; flex-wrap:wrap; }
	.step>li:nth-child(4) { display: block; }
	.step>li:nth-child(4) .img { position: relative; height: 450px; }
	.step>li:nth-child(4) .img ul { width: 1800px; position: relative; left: 50%; margin-left: -900px; display: flex; }
	.step>li .txt { width: 600px; }
	.step>li:nth-child(4) .txt { width: 700px; margin-bottom: 10px; }
	.step>li .txt h4 { display: flex; font-size: 30px; line-height: 38px; align-items:center; text-align: left; }
	.step>li:nth-child(3) .txt h4 { font-size: 26px; line-height: 40px; }
	.step>li .txt h4 span.no { width: 76px; height: 76px; display: block; background: url(../images/icon_step.svg) center center no-repeat; padding-top: 30px; text-align: center; color: #ffffff; font-size: 28px; 
		margin-right: 15px; }
	.step>li .txt h4 span.small { font-size: 20px; display: inline-block; }
	.step>li .txt p { font-size: 14px; display: flex; align-items:center; text-align: left; line-height: 30px;
		margin: 20px 0 15px; }
	.step>li .txt p span.tel a { background: url(../images/icon_tel.svg) left center no-repeat; font-size: 30px; 
		color: #b81c22; padding-left: 25px; display: block; pointer-events:none; }
	.step>li .txt ul { font-size: 14px; line-height: 21px; }
	.step>li .txt ul li { text-align: left; }
	.step>li .h_sup { width: 100%; padding: 35px 100px; background: url(../images/bg.jpg) repeat; 
		margin-top: 40px; }
	.step>li .h_sup h4 { color: #b81c22; font-size: 26px; margin-bottom: 10px; text-align: left; }
	.step>li .h_sup p { font-size: 14px; line-height: 28px; }
	.step>li:after { content: ""; width: 42px; height: 95px; background: url(../images/icon_arrow.svg) center center no-repeat; position: absolute; bottom: 0; left: 15px; }
	.step>li:nth-child(2):after { bottom: 30px; left: 25px; }

	.box h3 { font-size: 32px; text-align: center; margin-bottom: 45px; line-height: 37px; }
	.box h3 span { font-size: 14px; display: block; }

	#p2 .gotoplan li { display: flex; justify-content:space-between; border: #e4dedd 1px solid; padding: 50px;
		margin-bottom: 40px; }
	#p2 .gotoplan li .txt { width: 560px; }
	#p2 .gotoplan li .txt h4 { font-size: 22px; line-height: 36px; margin-bottom: 20px; text-align: left; }
	#p2 .gotoplan li .txt p.price { font-size: 16px;
		margin-bottom: 30px; }
	#p2 .gotoplan li .txt p.price span { border-bottom: #e4dedd 1px solid; padding-bottom: 8px; 
		display: inline-block; }
	#p2 .gotoplan li .txt p.price span span { color: #b81c22; border-bottom: none; padding-bottom: 0; }
	#p2 .gotoplan li .txt p.price span span span { font-size: 30px; }
	#p2 .gotoplan li .txt h5 { font-size: 18px; margin-bottom: 15px; text-align: left; }
	#p2 .gotoplan li .txt h5 span { color: #b81c22; }
	#p2 .gotoplan li .txt p { font-size: 14px; line-height: 28px; }

	#about h4{ height: 40px; line-height: 40px; font-size: 20px; margin-bottom: 32px; border: #595757 1px solid; }
	#about p{ font-size: 16px; text-align: left; line-height: 31px; }
	#about ul{ font-size: 16px; text-align: left; line-height: 32px; }
	#about ul li{  }
	
	.cbtn { display: block; font-size: 15px; margin: 20px auto;
	    border: none; width: 290px; height: 45px; line-height: 45px; text-align: center; 
	    color: #ffffff; background: #b81c22; border-radius: 3px;
	}

}

	@-moz-keyframes showup { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
	@-webkit-keyframes showup { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
	@-o-keyframes showup { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
	@-ms-keyframes showup { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }


@media (max-width:640px){
	.box .lead { margin: 0 auto 8vw; text-align: left; }

	.step { width: 88vw; margin: 0 auto; }
	.step>li { position: relative; margin-bottom: 10vw; }
	.step>li .img { width: 100%; margin-bottom: 6vw; }
	.step>li .img img { width: 100%; }
	.step>li:nth-child(4) .img { position: relative; }
	.step>li:nth-child(4) .img ul { width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
	.step>li:nth-child(4) .img ul li { margin: 0; }
	.step>li:nth-child(4) .img ul li img { width: 100%; vertical-align: bottom; }
	.step>li:nth-child(4) .txt { margin-bottom: 2vw; }
	.step>li .txt h4 { display: flex; font-size: 6vw; line-height: 8vw; align-items:flex-start;  text-align: left;
		padding-right: 8vw; }
	.step>li .txt h4 span.no { width: 12vw; height: 12vw; display: block; background: url(../images/icon_step.svg) center center no-repeat; padding-top: 4vw; text-align: center; color: #ffffff; font-size: 5vw; 
		margin-right: 2vw; background-size: contain; }
	.step>li .txt h4 span.small { font-size: 3.8vw; display: inline-block; }
	.step>li .txt h4 div { width: 73vw; }
	.step>li:first-child .txt h4 { align-items:center; }
	.step>li .txt p { font-size: 3.8vw; text-align: left; line-height: 6vw;
		margin: 4vw 0 2vw; }
	.step>li .txt p span.tel a { background: url(../images/icon_tel.svg) left center no-repeat; font-size: 5vw; 
		color: #b81c22; padding-left: 6vw; display: block; background-size: 4vw auto; }
	.step>li .txt ul { font-size: 3.8vw; line-height: 6vw; }
	.step>li .txt ul li { text-align: left; }
	.step>li .h_sup { width: 100%; padding: 6vw 10vw 6vw 6vw; background: url(../images/bg.jpg) repeat;
		margin-top: 6vw; }
	.step>li .h_sup h4 { color: #b81c22; font-size: 5vw; margin-bottom: 2vw; text-align: left; }
	.step>li .h_sup p { font-size: 3.8vw; line-height: 5vw; }
	.step>li:after { content: ""; width: 8vw; height: 12vw; background: url(../images/icon_arrow.svg) center center no-repeat; position: absolute; bottom: 0; right: 0; background-size: contain; }
	.step>li:nth-child(2):after { bottom: 6vw; right: 2vw; }

	.box h3 { font-size: 6vw; text-align: center; margin-bottom: 6vw; line-height: 7vw; }
	.box h3 span { font-size: 3.7vw; display: block; }
	.box h3 span.for_sp { display: inline; }

	#p2,#about { width: 88vw; margin: 0 auto 16vw; }
	#p2 .gotoplan li { border: #e4dedd 1px solid; padding: 6vw;
		margin-bottom: 6vw; }
	#p2 .gotoplan li .img { margin-bottom: 6vw; }
	#p2 .gotoplan li .txt {  }
	#p2 .gotoplan li .txt h4 { font-size: 5vw; line-height: 7vw; margin-bottom: 4vw; text-align: left; }
	#p2 .gotoplan li .txt p.price { font-size: 3.8vw;
		margin-bottom: 4vw; }
	#p2 .gotoplan li .txt p.price span { border-bottom: #e4dedd 1px solid; padding-bottom: 1vw; 
		display: inline-block; }
	#p2 .gotoplan li .txt p.price span span { color: #b81c22; border-bottom: none; padding-bottom: 0; }
	#p2 .gotoplan li .txt p.price span span span { font-size: 6vw; }
	#p2 .gotoplan li .txt h5 { font-size: 4.4vw; margin-bottom: 2vw; text-align: left; }
	#p2 .gotoplan li .txt h5 span { color: #b81c22; }
	#p2 .gotoplan li .txt p { font-size: 3.7vw; line-height: 5vw; }

	#about h4{ height: 6vw; line-height: 6vw; font-size: 3vw; margin-bottom: 4vw; border: #595757 1px solid; }
	#about p{ font-size: 3vw; text-align: left; line-height: 4vw; }
	#about ul{ font-size: 3vw; text-align: left; line-height: 4vw; }
	#about ul li{  }
	.cbtn { display: block; font-size: 3.8vw; margin: 6vw auto;
	    border: none; width: 74vw; height: 12vw; line-height: 12vw; text-align: center; 
	    color: #ffffff; background: #b81c22; border-radius: 3px;
	}

.showup {
	opacity: 0;
	transition: 1s;
	transform: translateY(4vw);
    -webkit-transform: translateY(4vw);
    -moz-transform: translateY(4vw);
    -ms-transform: translateY(4vw);
    -o-transform: translateY(4vw);
}
.upview {
	-moz-animation: showup 1s linear 0s 1 normal forwards;
	-webkit-animation: showup 1s linear 0s 1 normal forwards;
	-o-animation: showup 1s linear 0s 1 normal forwards;
	-ms-animation: showup 1s linear 0s 1 normal forwards;	
}

}