@charset "utf-8";
body{
	color: #333;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4baf87+0,3abfcb+100 */
	background: -moz-linear-gradient(left,  rgba(75,175,135,1) 0%, rgba(58,191,203,1) 100%); /* FF3.6-15 */
	background: rgb(75,175,135); /* Old browsers */
	background: -webkit-linear-gradient(left,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4baf87', endColorstr='#3abfcb',GradientType=1 ); /* IE6-9 */
	overflow: hidden;
	min-height: 100vh;
}
body>p.logo{
	line-height: 0;
	text-align: center;
	margin: 0 auto 15px;
	padding: 30px 0 0;
}
#chart{
	display: flex;
	position: relative;
	left: 0;
	margin: 0 auto;
	line-height: 0;
	padding: 0;
	transition: 0.3s ease-in-out;
}
#chart .first-step{
	line-height: 0;
	width: 100vw;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}
#chart .first-step .in{
	margin: 0 auto;
	width: 1200px;
	background: #fff;
	border-radius: 20px;
	padding: 100px 0;
}
#chart .first-step .title{
	background: url('../img/title_bg.webp') left 290px top 0 no-repeat;
	text-align: center;
	padding: 130px 0 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 500px;
	margin: 0 auto 35px;
}
#chart .first-step .title p{
	font-size: 1.8rem;
	line-height: 160%;
	text-align: center;
}
#chart .first-step .title p.t{
	margin: 0 auto 20px;
	padding-left: 20px;
}
#chart .first-step .title p.t strong{
	font-size: 3rem;
	font-weight: bolder;
	background: url('../img/strong.svg') center top no-repeat;
	background-size: 30px auto;
	padding: 15px 5px 0;
}
#chart .first-step .title p.t2{
	font-size: 4.5rem;
	font-weight: bolder;
	line-height: 120%;
	color: #000;
	margin: 0 auto 15px;
}
#chart .first-step .title p.t2>span{
	display: inline-block;
	position: relative;
	margin: 0 0 0 20px;
}
#chart .first-step .title p.t2>span::after{
	content: '';
	background: url('../img/title_bg2.png') 0 0 no-repeat;
	width: 81px;
	height: 81px;
	position: absolute;
	top: -35px;
	left: -40px;
}
#chart .first-step .title p.t3{
	font-size: 1.7rem;
	text-align: left;
	display: inline-block;
	margin: 0 10px 10px auto;
}
#chart .first-step p.q{
	line-height: 0;
	color: #000;
}
#chart .first-step p.q>span{
	display: inline-block;
	line-height: 100%;
	font-size: 3.7rem;
	font-weight: bolder;
	margin: 0 0 0 310px;
}
#chart .first-step p.q img{
	width: 116px;
	height: auto;
	margin: 0 0 0 5px;
}
#chart .first-step p.go{
	text-align: center;
	line-height: 0;
	position: relative;
	z-index: 1;
}
#chart .first-step p.go a{
	display: inline-block;
	width: 450px;
	line-height: 100%;
	font-size: 3.6rem;
	font-weight: bolder;
	color: #fff;
	position: relative;
	padding: 26px 10px 28px;
	background: rgb(75,175,135); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(75,175,135,1) 0%, rgba(58,191,203,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4baf87', endColorstr='#3abfcb',GradientType=1 ); /* IE6-9 */
	border-radius: 20px;
	cursor: pointer;
}
#chart .first-step p.go a::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	background: #075159;
	z-index: -1;
	transition: 0.3s ease-in-out;
}
#chart .first-step p.go a::after{
	content: '';
	position: absolute;
	top: 50%;
	right: 30px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	background: url('../img/arrow.svg') 0 0 no-repeat;
	background-size: 100% auto;
}
#chart .first-step p.go a:hover{
	text-decoration: none;
}
#chart .first-step p.go a:hover::before{
	top: 5px;
	left: 5px;
}

#chart .steps{
	display: none;
	line-height: 0;
	position: relative;
	width: 100vw;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}
#chart .steps .in{
	position: relative;
	margin: 0 auto;
	width: 1200px;
	background: #fff;
	border-radius: 20px;
	padding: 70px 30px 30px;
}
#chart .steps p.q{
	font-size: 2.3rem;
	font-weight: bolder;
	line-height: 120%;
	color: #000;
	width: 242px;
	height: 204px;
	background: url('../img/subtitle_bg.webp') 0 0 no-repeat;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 66px 0 0;
	position: absolute;
	top: 40px;
	left: 40px;
}
#chart .steps p.tit{
	text-align: center;
	margin: 0 auto 10px;
}
#chart .steps p.tit span{
	font-size: 5rem;
	font-weight: bolder;
	line-height: 120%;
	color: #000;
}
#chart .steps p.tit span img{
	width: 157px;
	height: auto;
	margin: 0 auto 0 5px;
}
#chart .steps p.st{
	line-height: 0;
	text-align: center;
	margin: 0 auto 30px;
}
#chart .steps p.st img{
	width: 360px;
	height: auto;
}
#chart .steps .body{
	position: relative;
	text-align: center;
}
#chart .steps p.img{
	position: absolute;
	top: -110px;
	right: 20px;
	line-height: 0;
	width: 308px;
	height: auto;
}
#chart .steps.no2 p.img{
	width: 327px;
	top: -120px;
}
#chart .steps.no3 p.img{
	width: 386px;
	top: -150px;
	right: -10px;
}
#chart .steps p.t{
	display: inline-block;
	font-size: 3rem;
	color: #000;
	line-height: 120%;
	text-align: center;
	margin: 0 auto 70px;
	font-weight: bolder;
}
#chart .steps p.t span{
	display: block;
	font-size: 1.9rem;
	font-weight: normal;
	color: #666;
	text-align: left;
}
#chart .steps ul{
	display: block;
	letter-spacing: -0.4em;
	text-align: center;
	line-height: 0;
	margin: 0 auto 40px;
}
#chart .steps ul>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 450px;
	margin: 0 30px 30px;
	background: -moz-linear-gradient(left,  rgba(75,175,135,1) 0%, rgba(58,191,203,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4baf87', endColorstr='#3abfcb',GradientType=1 ); /* IE6-9 */
	border-radius: 20px;
	padding: 2px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#chart .steps ul>li>label{
	display: block;
	text-align: left;
	background: #fff;
	border-radius: 20px;
	padding: 14px 40px;
	min-height: 86px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	cursor: pointer;
	transition: 0.3s ease-in-out;
}
#chart .steps ul>li.active>label{
	background: none;
}
#chart .steps ul>li>label::after{
	position: absolute;
	top: 50%;
	right: 20px;
	display: block;
	content: '';
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border: 2px solid #4BAF87;
	border-radius: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	transition: 0.4s ease-in-out;
}
#chart .steps ul>li.active>label::after{
	background: url('../img/check.svg') 0 0 no-repeat;
	background-size: 100% auto;
}
#chart .steps ul>li>label span{
	display: inline-block;
	vertical-align: middle;
	font-size: 2.4rem;
	font-weight: bolder;
	line-height: 120%;
	text-align: left;
	color: #000;
}
#chart .steps ul>li.active>label span{
	color: #fff;
}
#chart .steps ul>li input{
	display: none;
}
#chart .steps p.btn{
	text-align: right;
	line-height: 0;
	position: relative;
	z-index: 1;
}
#chart .steps p.btn a{
	display: inline-block;
	text-align: center;
	position: relative;
	font-weight: bolder;
	cursor: pointer;
}
#chart .steps p.btn a:hover{
	text-decoration: none;
}
#chart .steps p.btn a.next,
#chart .steps p.btn button[type="submit"]{
	border-radius: 20px;
	background: #ccc;
	color: #fff;
	font-size: 2.4rem;
	line-height: 80px;
	min-width: 250px;
}
#chart .steps p.btn button[type="submit"]{
	display: inline-block;
	text-align: center;
	position: relative;
	font-weight: bolder;
	border: none;
}
#chart .steps p.btn a.next::after,
#chart .steps p.btn button[type="submit"]::after{
	content: '';
	background: url('../img/arrow3.svg') 0 0 no-repeat;
	background-size: 100% auto;
	width: 26px;
	height: 16px;
	position: absolute;
	top: 50%;
	right: 35px;
	margin-top: -8px;
}
#chart .steps p.btn a.next.active,
#chart .steps p.btn button[type="submit"].active{
	cursor: pointer;
	background: -moz-linear-gradient(left,  rgba(215,121,8,1) 0%, rgba(255,190,21,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(215,121,8,1) 0%,rgba(255,190,21,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(215,121,8,1) 0%,rgba(255,190,21,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d77908', endColorstr='#ffbe15',GradientType=1 ); /* IE6-9 */
}
#chart .steps p.btn a.next.active::before,
#chart .steps p.btn button[type="submit"]::before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: #ad4905;
	transition: 0.3s ease-in-out;
	border-radius: 20px;
}
#chart .steps p.btn a.next.active:hover::before,
#chart .steps p.btn button[type="submit"].active:hover::before{
	top: 5px;
	left: 5px;
}
#chart .steps p.btn a.prev{
	color: #006666;
	font-size: 2rem;
	padding: 0 0 0 40px;
	margin: 0 40px 0 0;
	background: url('../img/arrow2.svg') left center no-repeat;
	background-size: 26px auto;
	line-height: 100%;
}


#chart .result{
	display: none;
	line-height: 0;
	position: relative;
	width: 100vw;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	margin: 0 auto 80px;
}
#chart .result .in{
	position: relative;
	margin: 0 auto 30px;
	width: 1200px;
	background: #fff;
	border-radius: 20px;
	padding: 30px 30px 50px;
}
#chart .result .in:last-child{
	padding: 50px 120px 60px;
	margin-bottom: 0;
}
#chart .result p.q{
	font-size: 2.3rem;
	font-weight: bolder;
	line-height: 120%;
	color: #000;
	width: 242px;
	height: 204px;
	background: url('../img/subtitle_bg.webp') 0 0 no-repeat;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 66px 0 0;
	position: absolute;
	top: 40px;
	left: 40px;
}
#chart .result p.tit{
	line-height: 0;
	text-align: center;
	margin: 0 auto 20px;
}
#chart .result p.tit>span{
	display: inline-block;
	font-size: 3rem;
	font-weight: bolder;
	color: #fff;
	width: 250px;
	line-height: 68px;
	border-radius: 20px;
	background: -moz-linear-gradient(left,  rgba(75,175,135,1) 0%, rgba(58,191,203,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4baf87', endColorstr='#3abfcb',GradientType=1 ); /* IE6-9 */
}
#chart .result p.t{
	font-size: 3rem;
	font-weight: bolder;
	line-height: 120%;
	text-align: center;
	margin: 0 auto 20px;
}
#chart .result p.t2{
	font-size: 4rem;
	font-weight: bolder;
	text-align: center;
	margin: 0 auto 20px;
	position: relative;
	z-index: 1;
}
#chart .result p.t2>span{
	display: inline-block;
	position: relative;
	line-height: 120%;
}
#chart .result p.t2>span::before{
	content: '';
	width: 100%;
	height: 23px;
	background: #e7f4d0;
	border-radius: 10px;
	position: absolute;
	bottom: 2px;
	left: 0;
	z-index: -1
}
#chart .result p.t2 small{
	font-size: 2.5rem;
	padding: 0 0 0 10px;
}
#chart .result p.t3{
	font-size: 2rem;
	font-weight: bolder;
	line-height: 120%;
	text-align: center;
	margin: 0 auto 20px;
}
#chart .result .item{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	margin: 0 auto 70px;
	width: 960px;
}
#chart .result .item p.img{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 450px;
	margin: 0 30px 0 0;
	box-shadow: 0 0 3px #bbb;
}
#chart .result .item .text{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 480px;
}
#chart .result .item .text .name{
	font-size: 3.8rem;
	font-weight: bolder;
	line-height: 120%;
	margin: 0 auto;
	margin: 0 auto 15px;
}
#chart .result .item .text .name small{
	font-size: 2.5rem;
	padding: 0 0 0 10px;
}
#chart .result p.tx{
	font-size: 2rem;
	font-weight: bolder;
	line-height: 160%;
	text-align: left;
	margin: 0 auto 20px;
}
#chart .result .item .text .info{
	font-size: 2rem;
	font-weight: bolder;
	line-height: 200%;
	margin: 0 auto 20px;
}
#chart .result .item .text .info strong{
	font-size: 4rem;
}
#chart .result .item .text .cost{
	font-size: 1.8rem;
	line-height: 160%;
	margin: 0 auto 30px 30px;
}
#chart .result .item .text .cost>span{
	display: inline-block;
	font-size: 1.8rem;
	color: #3b8803;
	line-height: 42px;
	border-radius: 20px;
	background: #e1f4c9;
	padding: 0 30px;
	font-weight: bold;
	margin: 0 auto 5px -30px;
}
#chart .result .item .text .cost>span>strong{
	font-size: 2.5rem;
	padding: 0 5px;
}
#chart .result .item .btn{
	margin: 0 auto;
}
#chart .result .scene{
	background: -moz-linear-gradient(left,  rgba(75,175,135,1) 0%, rgba(58,191,203,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4baf87', endColorstr='#3abfcb',GradientType=1 ); /* IE6-9 */
	border-radius: 20px;
	padding: 70px 15px 40px;
	position: relative;
	margin: 0 auto 50px;
}
#chart .result .scene .cap{
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
}
#chart .result .scene .cap>span{
	display: inline-block;
	background: -moz-linear-gradient(left,  rgba(75,175,135,1) 0%, rgba(58,191,203,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4baf87', endColorstr='#3abfcb',GradientType=1 ); /* IE6-9 */
	background-size: 360px auto;
	padding: 2px;
	border-radius: 30px;
	position: relative;
}
#chart .result .scene .cap>span::after{
	content: '';
	position: absolute;
	bottom: -13px;
	left: 50%;
	margin-left: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 10px 0 10px;
	border-color: #ffffff transparent transparent transparent;
}
#chart .result .scene .cap>span>span{
	display: inline-block;
	font-size: 2rem;
	font-weight: bolder;
	background: #fff;
	color: #333;
	line-height: 100%;
	padding: 16px 50px 18px;
	position: relative;
	border-radius: 30px;
}
#chart .result .scene ul{
	margin: 0 auto;
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
}
#chart .result .scene ul>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 300px;
	margin: 0 15px 0 0;
	text-align: center;
}
#chart .result .scene ul>li:last-child{
	margin-right: 0;
}
#chart .result .scene ul>li>span{
	display: block;
	text-align: left;
	background: #fff;
	border-radius: 20px;
	padding: 55px 20px 20px;
	min-height: 76px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	font-size: 2rem;
	font-weight: bolder;
	line-height: 120%;
	text-align: left;
	color: #000;
	align-items: center;
	margin: -45px auto 0;
	z-index: 1;
}
#chart .result .scene ul>li>span.img{
	display: inline-block;
	background: none;
	padding: 0;
	border-radius: 20px;
	overflow: hidden;
	margin: 0 auto;
	z-index: 2;
}
/*
#chart .result .item .text .tex ul>li:nth-child(1)>span,
#chart .result .item .text .tex ul>li:nth-child(3)>span{
	padding-top: 26px;
}
*/
#chart .result .btn{
	display: block;
	letter-spacing: -0.4em;
	text-align: center;
	line-height: 0;
	margin: 0 auto 70px;
}
#chart .result .item .btn{
	text-align: left;
}
#chart .result .btn a{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	cursor: pointer;
	font-weight: bolder;
	line-height: 80px;
	color: #fff;
	border-radius: 20px;
	position: relative;
	transition: 0.3s ease-in-out;
	text-align: center;
}
#chart .result .btn a:hover{
	text-decoration: none;
	opacity: 0.7;
}
#chart .result .btn a.prev{
	font-size: 2.4rem;
	background: #ccc;
	padding: 0 30px 0 60px;
	margin: 0 30px 0 0;
}
#chart .result .btn a.prev::after{
	content: '';
	background: url('../img/arrow3.svg') 0 0 no-repeat;
	background-size: 100% auto;
	width: 26px;
	height: 16px;
	position: absolute;
	top: 50%;
	left: 20px;
	margin-top: -8px;
	transform: rotate(180deg);
}
#chart .result .btn a.product{
	font-size: 2.4rem;
	background: #3b8903;
	padding: 0;
	width: 480px;
}
#chart .result .btn a.product::after{
	content: '';
	background: url('../img/arrow3.svg') 0 0 no-repeat;
	background-size: 100% auto;
	width: 26px;
	height: 16px;
	position: absolute;
	top: 50%;
	right: 40px;
	margin-top: -8px;
}
#chart .result .title2{
	text-align: center;
	margin: 0 auto 35px;
	position: relative;
	z-index: 1;
}
#chart .result .title2::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -1px;
	width: 100%;
	height: 2px;
	background: -moz-linear-gradient(left,  rgba(75,175,135,1) 0%, rgba(58,191,203,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4baf87', endColorstr='#3abfcb',GradientType=1 ); /* IE6-9 */
}
#chart .result .title2>span{
	display: inline-block;
	font-size: 2rem;
	font-weight: bolder;
	color: #fff;
	padding: 0;
	width: 480px;
	line-height: 50px;
	background: -moz-linear-gradient(left,  rgba(75,175,135,1) 0%, rgba(58,191,203,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4baf87', endColorstr='#3abfcb',GradientType=1 ); /* IE6-9 */
	position: relative;
	z-index: 2;
	border-radius: 20px;
}
#chart .result ul.list{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	margin: 0 auto 40px;
}
#chart .result ul.list>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 300px;
	margin: 0 30px 0 0;
}
#chart .result ul.list>li:last-child{
	margin-right: 0;
}
#chart .result ul.list>li>span{
	display: block;
}
#chart .result ul.list>li .img{
	margin: 0 auto 20px;
	box-shadow: 0 0 3px #bbb;
}
#chart .result ul.list>li .img img{
	width: 100%;
	height: auto;
}
#chart .result ul.list>li .name{
	font-size: 2rem;
	line-height: 120%;
	font-weight: bolder;
	text-align: center;
}
#chart .result ul.list>li .name small{
	font-size: 1.3rem;
	padding: 0 0 0 5px;
}

@media screen and (min-width:768px){
	.sps{display: none !important;}

	#chart .steps ul>li>label span.v2{
		padding-top: 13px;
	}
	#chart .steps.no3 ul>li{
		width: 300px;
		margin: 0 15px;
	}
	#chart .steps.no3 ul>li:nth-child(3)>label{
		padding: 14px 20px;
	}
	#btnarea{display: none;}
	#chart .result p.t3{
		display: none;
	}
}

@media screen and (max-width:767px){
	.pcp{display: none !important;}
	#chart .first-step{
		padding: 40px 0;
	}
	#chart .first-step .in{
		width: 90vw;
		padding: 30px 20px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#chart .first-step .in p.logo,
	#chart .steps .in p.logo,
	#chart .result .in p.logo{
		line-height: 0;
		text-align: center;
		margin: 0 auto 10px;
	}
	#chart .first-step .in p.logo img{
		width: 186px;
		height: auto;
	}
	#chart .steps .in p.logo img,
	#chart .result .in p.logo img{
		width: 130px;
		height: auto;
	}
	#chart .first-step .title{
		background: url('../img/title_bg_sp.svg') center top no-repeat;
		background-size: 300px auto;
		min-height: 1px;
		padding: 55px 0 0;
		margin: 0 auto 20px;
	}
	#chart .first-step .title p{
		font-size: 1.6rem;
	}
	#chart .first-step .title p.t{
		margin-bottom: 13px;
	}
	#chart .first-step .title p.t strong{
		font-size: 2.3rem;
	}
	#chart .first-step .title p.t2{
		font-size: 3.5rem;
		margin-bottom: 0;
	}
	#chart .first-step .title p.t2>span::after{
		background-size: 100% auto;
		width: 50px;
		height: 50px;
		top: -9px;
		left: -20px;
	}
	#chart .first-step p.q{
		text-align: left;
		margin: 0 auto 30px;
	}
	#chart .first-step p.q>span{
		margin-left: 20px;
	}
	#chart .first-step .title p.t3{
		font-size: 1.5rem;
		margin: 0 auto;
	}
	#chart .first-step p.go a{
		display: block;
		width: auto;
		font-size: 3.2rem;
		padding: 0 10px;
		line-height: 70px;
	}

	#chart .steps{
		background: #f4eee7;
		padding: 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#chart .steps .in{
		width: auto;
		background: none;
		padding: 40px 20px 120px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#chart .steps p.q,
	#chart .result p.q{
		font-size: 2.2rem;
		line-height: 120%;
		padding: 0;
		margin: 0 auto 10px;
		background: none;
		position: static;
		width: auto;
		height: auto;
	}
	#chart .steps p.tit span{
		font-size: 3.2rem;
	}
	#chart .steps p.tit span img{
		width: 100px;
	}
	#chart .steps p.img{
		position: static;
		margin: -60px auto 20px;
		text-align: right;
		padding: 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#chart .steps.no2 p.img img{
		margin-right: 20px;
	}
	#chart .steps.no3 p.img{
		width: auto;
	}
	#chart .steps p.img img{
		max-width: 65%;
	}
	#chart .steps.no3 p.img img{
		margin-right: -20px;
		max-width: 90%;
	}
	#chart .steps .body{
		background: #fff;
		padding: 30px 20px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 20px;
	}
	#chart .steps p.t{
		display: block;
		font-size: 1.8rem;
		text-align: left;
		margin: 0 auto 10px;
	}
	#chart .steps p.t span{
		font-size: 1.5rem;
		padding: 5px 0 0;
	}
	#chart .steps ul{
		margin-bottom: 0;
	}
	#chart .steps ul>li{
		display: block !important;
		width: auto;
		margin: 0 auto 15px;
	}
	#chart .steps ul>li:last-child{
		margin-bottom: 0;
	}
	#chart .steps ul>li>label{
		padding: 15px 20px 0;
		min-height: 70px;
	}
	#chart .steps.no2 ul>li:nth-child(1)>label{
		padding-top: 25px;
	}
	#chart .steps ul>li>label span{
		font-size: 1.7rem;
	}
	#chart .steps p.btn{
		display: none;
	}
	#btnarea{
		line-height: 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
	}
	#btnarea .st{
		display: block;
		letter-spacing: -0.4em;
		text-align: center;
		line-height: 0;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #fff;
		padding: 10px;
		z-index: 99;
		transform: translate(0,80px);
		transition: 0.3s ease-in-out;
	}
	#btnarea .st.active{
		transform: translate(0,0);
	}
	#btnarea .st a,
	#btnarea .st button{
		display: inline-block;
		letter-spacing: normal;
		vertical-align: top;
		position: relative;
		font-weight: bolder;
		cursor: pointer;
	}
	#btnarea .st a:hover{
		text-decoration: none;
	}
	#btnarea .st a.next,
	#btnarea .st button[type="submit"]{
		line-height: 60px;
		margin: 0 auto;
		padding: 0 60px 0 40px;
		min-width: 1px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 1.5rem;
		border-radius: 20px;
		background: #ccc;
		color: #fff;
		border: none;
	}
	#btnarea .st a.next::after,
	#btnarea .st button[type="submit"]::after{
		content: '';
		background: url('../img/arrow3.svg') 0 0 no-repeat;
		background-size: 100% auto;
		width: 26px;
		height: 16px;
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -8px;
	}
	#btnarea .st a.next.active,
	#btnarea .st button[type="submit"].active{
		cursor: pointer;
		background: -moz-linear-gradient(left,  rgba(215,121,8,1) 0%, rgba(255,190,21,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(215,121,8,1) 0%,rgba(255,190,21,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(215,121,8,1) 0%,rgba(255,190,21,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d77908', endColorstr='#ffbe15',GradientType=1 ); /* IE6-9 */
	}
	#btnarea .st a.next.active::before,
	#btnarea .st button[type="submit"]::before{
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #ad4905;
		transition: 0.3s ease-in-out;
		border-radius: 20px;
	}
	#btnarea .st a.next.active:hover::before,
	#btnarea .st button[type="submit"].active:hover::before{
		top: 5px;
		left: 5px;
	}
	#btnarea .st a.prev{
		color: #006666;
		padding: 0 0 0 40px;
		font-size: 1.5rem;
		line-height: 60px;
		margin: 0 20px 0 0;
		background: url('../img/arrow2.svg') left center no-repeat;
		background-size: 26px auto;
	}


	#chart .result{
		background: #f4eee7;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0 auto;
	}
	#chart .result .in{
		background: none;
		border-radius: 20px;
		width: auto;
		padding: 40px 20px 20px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0 auto;
	}
	#chart .result .in:last-child{
		padding: 0 20px 40px;
	}
	#chart .result .in p.logo{
		margin-bottom: 20px;
	}
	#chart .result p.q{
		margin-bottom: 50px;
	}
	#chart .result .in .body{
		background: #fff;
		padding: 40px 20px;
		border-radius: 20px;
	}
	#chart .result p.tit{
		margin: -70px auto 20px;
	}
	#chart .result p.t{
		font-size: 2rem;
	}
	#chart .result p.t2{
		font-size: 2.5rem;
		margin: 0 auto;
	}
	#chart .result p.t2>span::before{
		height: 15px;
		bottom: -3px;
	}
	#chart .result p.t2 small{
		font-size: 2rem;
	}
	#chart .result .item{
		width: auto;
		margin: 0 auto 20px;
	}
	#chart .result .item p.img{
		display: block;
		width: auto;
		margin: 0 auto 20px;
	}
	#chart .result .item .text{
		display: block;
		width: auto;
	}
	#chart .result .item .text .name{
		text-align: center;
		font-size: 2.5rem;
	}
	#chart .result .item .text .name small{
		font-size: 2rem;
	}
	#chart .result p.tx{
		display: none;
	}
	#chart .result .item .text .info{
		line-height: 120%;
		text-align: center;
	}
	#chart .result .item .text .info span{
		display: block;
		line-height: 100%;
		padding: 20px 0 0;
	}
	#chart .result .item .text .cost{
		font-size: 1.4rem;
		text-align: center;
		margin: 0 auto 80px;
	}
	#chart .result .item .text .cost>span{
		margin: 0 auto 5px;
		font-size: 1.4rem;
	}
	#chart .result .item .text .cost>span>strong{
		font-size: 1.8rem;
	}
	#chart .result .scene{
		padding: 4px;
		margin: 0 auto 20px;
		position: relative;
	}
	#chart .result .scene::after{
		position: absolute;
		top: 2px;
		left: 2px;
		right: 2px;
		bottom: 2px;
		background: #fff;
		content: '';
		border-radius: 20px;
	}
	#chart .result .scene .cap{
		top: -65px;
	}
	#chart .result .scene .cap>span{
		display: block;
		background-size: 100% auto;
	}
	#chart .result .scene .cap>span::after{
		left: 30px;
		margin-left: 0;
		border-color: rgba(75,175,135,1) transparent transparent transparent;
		z-index: 1;
	}
	#chart .result .scene .cap>span>span{
		display: block;
		font-size: 1.6rem;
		padding: 12px 10px 14px;
		background: none;
		color: #fff;
	}
	#chart .result .scene .cap>span>span::after{
		position: absolute;
		bottom: -11px;
		left: 28px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 16px 10px 0 10px;
		border-color: #ffffff transparent transparent transparent;
		z-index: 2;
	}
	#chart .result .scene .tggle{
		text-align: center;
		position: relative;
	}
	#chart .result .scene .tggle ul{
		height: 440px;
		overflow: hidden;
		margin: 20px;
		transition: 0.3s ease-in-out;
		position: relative;
	}
	#chart .result .scene .tggle.active ul{
		height: auto;
	}
	#chart .result .scene .tggle ul::after{
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90px;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
		background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
		transition: 0.3s ease-in-out;
		z-index: 2;
	}
	#chart .result .scene .tggle.active ul::after{
		opacity: 0;
		z-index: -1;
	}
	#chart .result .scene ul>li{
		display: block;
		width: auto;
		margin: 0 auto 25px;
	}
	#chart .result .scene ul>li:last-child{
		margin-bottom: 0;
	}
	#chart .result .scene ul>li>span{
		font-size: 1.6rem;
		background: -moz-linear-gradient(left,  rgba(75,175,135,1) 0%, rgba(58,191,203,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(75,175,135,1) 0%,rgba(58,191,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4baf87', endColorstr='#3abfcb',GradientType=1 ); /* IE6-9 */
		color: #fff;
	}
	#chart .result .scene .tggle p.trigger,
	#chart .result .scene .tggle p.close{
		display: block;
		margin: 0 20px 20px;
		border: 2px solid rgb(75,175,135);
		line-height: 40px;
		padding: 0 15px;
		font-size: 1.2rem;
		font-weight: bolder;
		color: #006666;
		background: #fff;
		text-align: left;
		border-radius: 20px;
		position: relative;
		cursor: pointer;
		text-align: center;
		z-index: 3;
	}
	#chart .result .scene .tggle.active p.trigger{
		display: none;
	}
	#chart .result .scene .tggle p.trigger::after{
		content: '';
		width: 12px;
		height: 19px;
		background: url('../img/arrow4.svg') 0 0 no-repeat;
		background-size: 100% auto;
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -9.5px;
	}
	#chart .result .scene .tggle p.close{
		display: none;
		padding: 0 80px;
	}
	#chart .result .scene .tggle.active p.close{
		display: inline-block;
	}
	#chart .result .scene .tggle p.close::after{
		content: '';
		width: 12px;
		height: 19px;
		background: url('../img/arrow4.svg') 0 0 no-repeat;
		background-size: 100% auto;
		position: absolute;
		top: 50%;
		right: 22px;
		margin-top: -9.5px;
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	#chart .result .btn{
		margin: 0 auto;
	}
	#chart .result .btn a{
		font-size: 1.8rem;
		line-height: 70px;
	}
	#chart .result .btn a.product{
		font-size: 1.8rem;
		display: block;
		margin: 0 auto 15px;
		width: auto;
	}
	#chart .result .btn a.product::after{
		right: 20px;
	}
	#chart .result .btn a.prev{
		font-size: 1.8rem;
		display: block;
		margin: 0 auto;
		width: auto;
		padding: 0 50px 0 60px;
	}
	#chart .result .in:last-child>.body:nth-child(1){
		margin: 0 auto 20px;
	}
	#chart .result .title2>span{
		width: auto;
		padding: 0 20px;
		font-size: 1.6rem;
		line-height: 40px;
	}
	#chart .result ul.list{
		padding: 0 20px;
		margin: 0 auto;
	}
	#chart .result ul.list>li{
		display: block;
		margin: 0 auto 40px;
		width: auto;
	}
	#chart .result ul.list>li:last-child{
		margin-bottom: 0;
	}
}