@charset "utf-8";

/* ---- diagnosis ---- */

.diagnosisStage{
  display: none;
  margin:0 auto;
	min-height: 85vw;
}

.diagnosisStage.active{
  display: block;
}

.diagnosisQTitle{
	text-align: center;
	font-weight: bold;
	font-size: calc(100vw / ( 750 / 40 ));
	margin-bottom: calc(100vw / ( 750 / 40 ));
}
.diagnosisQTitle span {
	display: block;
	margin: 0 auto calc(100vw / ( 750 / 30 ));
	width: calc(100vw / ( 750 / 87 ));
}

.diagnosisInner > ul{
  text-align: center;
  font-size: 0px;
  position: relative;
  display: block;
	width: 95%;
	margin: auto;
}

.diagnosisInner > ul > li{
  display: block;
  margin-bottom: calc(100vw / ( 750 / 30 ));
}

.diagnosisQBtn{
  display: block;
  width: 100%;
  height: calc(100vw / ( 750 / 100 ));
  color: #fff;
  font-size: 3.2vw;
  position: relative;
  cursor: pointer;
	background-color: #000;
}
.diagnosisQBtn:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: calc(100vw / ( 750 / 20 ));
	transform: translateY(-50%);
	height: calc(100vw / ( 750 / 10 ));
	width: calc(100vw / ( 750 / 55 ));
	background: url(../img/arw_wh.svg) center no-repeat;
	background-size: cover;
}

.diagnosisQBtn span{
  display: block;
  position:absolute;
  left:0%;
  top:50%;
  width:100%;
  transform:translate(0%,-50%);
  text-align: center;
  line-height: 1.4;
}

.diagnosisResult{
	text-align: center;
}

.diagnosisResultTitle{
	display: inline-block;
	background-color: #000;
	color: #fff;
	font-size: calc(100vw / ( 750 / 27 ));
	padding: 1em 3em;
	line-height: 1;
	margin-bottom: calc(100vw / ( 750 / 55 ));
}

.diagnosisResultBoxCatch {
	font-weight: bold;
	font-size: calc(100vw / ( 750 / 27 ));
	line-height: 2;
	margin: 0 calc(-100vw / ( 750 / 40 )) calc(100vw / ( 750 / 30 )) !important;
}

.diagnosisResultBox{
  display: none;
  margin-bottom: calc(100vw / ( 750 / 80 ));
}

.diagnosisResultBox.active{display: block;}

.diagnosisResultBoxTitle{
	display: block;
 font-size: calc(100vw / ( 750 / 28 ));
	margin-bottom: 0.5em;
}

.diagnosisResultBoxLead{
  font-size: calc(100vw / ( 750 / 40 ));
	display: inline-block;
	font-weight: bold;
	position: relative;
	margin-bottom: 1em !important;
}
/*.diagnosisResultBoxLead:before,
.diagnosisResultBoxLead:after {
	content: "";
		display: block;
		width: calc(100vw / ( 750 / 26 ));
		height: calc(100vw / ( 750 / 22 ));
		background: url(../img/catch_before.png) center no-repeat;
		background-size: cover;
		position: absolute;
}
.diagnosisResultBoxLead:before {
	left: -1em;
	top: 0;
}
.diagnosisResultBoxLead:after {
	background-image: url(../img/catch_after.png);
	right: -1em;
	bottom: 0;
}*/

.diagnosisResultBoxInner{
  margin:0 0px;
}

.diagnosisResultBoxImage{
	margin-bottom: calc(100vw / ( 750 / 35 ));
	img {
		width: 70%;
	}
}

.diagnosisResultBoxType {
	display: inline-block;
	width: calc(100vw / ( 750 / 407 ));
	margin-bottom: calc(100vw / ( 750 / 20 )) !important;
}

.diagnosisResultBoxDetail{
}

.diagnosisResultBoxShoulder{
  font-size: calc(100vw / ( 750 / 26 ));
  margin-bottom: calc(100vw / ( 750 / 38 )) !important;
}

.diagnosisResultBoxName{
  line-height: 1.6;
  font-size:4vw;
  font-weight: bold;
  height:13vw;
  padding:0 10vw;
}

.diagnosisResultBoxPrice{
  display: inline-block;
	background-color: #000;
	color: #fff;
	font-size: calc(100vw / ( 750 / 20 ));
	padding: 0 0.5em;
	margin-bottom: calc(100vw / ( 750 / 80 )) !important;
}

.diagnosisResultBoxPrice b{
	font-weight: normal;
	font-size: calc(100vw / ( 750 / 32 ));
}

.diagnosisResultBoxDetail ul li{
	display: block;
	position: relative;
	width: 50%;
	text-align: left;
	font-size: calc(100vw / ( 750 / 24 ));
	height: calc(100vw / ( 750 / 100 ));
	line-height: calc(100vw / ( 750 / 100 ));
}
.diagnosisResultBoxDetail ul li.forDetail {
	margin-right: calc(100vw / ( 750 / 20 ));
}
.diagnosisResultBoxDetail ul li.forDetail:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: calc(100vw / ( 750 / 20 ));
	transform: translateY(-50%);
	height: calc(100vw / ( 750 / 10 ));
	width: calc(100vw / ( 750 / 55 ));
	background: url(../img/arw_bk.svg) center no-repeat;
	background-size: cover;
}
.diagnosisResultBoxDetail ul li.forDetail a {
	display: block;
}
.diagnosisResultBoxDetail ul li.forCart .cartBox {
	position: relative;
	background-color: #000;
	color: #fff;
}
.diagnosisResultBoxDetail ul li.forCart .cartBox .lp_button_cart_1 {
	display: block;
}
.diagnosisResultBoxDetail ul li.forCart .cartBox .lp_button_cart_1.is_0,
.diagnosisResultBoxDetail ul li.forCart .cartBox .lp_button_cart_1.is_9 {
	text-align: center;
}
.diagnosisResultBoxDetail ul li.forCart .cartBox a {
	display: block;
	color: #fff;
	text-decoration: none;
}
.diagnosisResultBoxDetail ul li.forCart .cartBox a:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: calc(100vw / ( 750 / 20 ));
	transform: translateY(-50%);
	height: calc(100vw / ( 750 / 10 ));
	width: calc(100vw / ( 750 / 55 ));
	background: url(../img/arw_wh.svg) center no-repeat;
	background-size: cover;
}

.diagnosisRestart {
	margin: 0 calc(-100vw / ( 750 / 40 ));
	background-color: rgba(0,0,0,.3);
	padding: calc(100vw / ( 750 / 80 )) calc(100vw / ( 750 / 40 )) calc(100vw / ( 750 / 40 ));
}
.diagnosisRestart a {
  font-size:calc(100vw / ( 750 / 24 ));
  display: block;
	background-color: #000;
  cursor:pointer;color: #fff;
	padding: 1.25em 0 1.25em 1.5em;
	position: relative;
}
.diagnosisRestart a:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: calc(100vw / ( 750 / 30 ));
	transform: translateY(-50%);
	height: calc(100vw / ( 750 / 10 ));
	width: calc(100vw / ( 750 / 52 ));
	background: url(../img/arw_back.svg) center no-repeat;
	background-size: cover;
}

.diagnosisRestart a:hover{
  text-decoration: none;
}