@charset "utf-8";



/*  kvBox
--------------------------------------------------*/
#kvBox{
	position: relative;
	background: url(../img/pc/bg_mv.jpg) no-repeat center center/cover;
}
	#kvBox .kvTxt{
		max-width: 1280px;
		width: 100%;
		margin: 0 auto;
	}
@media screen and (max-width: 768px){
	#kvBox{
		background: url(../img/sp/bg_mv.jpg) no-repeat center center/cover;
	}
		#kvBox .kvTxt{
			max-width: 560px;
		}
}




/*  catch
--------------------------------------------------*/
#catch{
	padding: 16px 0 18px;
	background : linear-gradient(90deg, rgba(0, 11, 35, 1) 0%, rgba(0, 22, 48, 1) 10.71%, rgba(0, 44, 72, 1) 35.03%, rgba(0, 52, 81, 1) 50%, rgba(0, 44, 72, 1) 64.97%, rgba(0, 22, 48, 1) 89.29%, rgba(0, 11, 35, 1) 100%);
}
	#catch p{
		font-size: 24px;
		line-height: 1.5;
		letter-spacing: .13em;
		color: #fff;
		text-align: center;
	}
@media screen and (max-width: 768px){
	#catch{
		padding: 21px 0 24px;
	}
		#catch p{
			font-size: 19px;
		}
}






/*  bg
--------------------------------------------------*/
/*#bg{
	position: relative;
	background: url(../img/pc/bg_main.jpg) no-repeat center center/cover;
}
@media screen and (max-width: 768px){
	#bg{
		background: url(../img/sp/bg_main.jpg) no-repeat center center/cover;
	}
}*/





/*  selectBox
--------------------------------------------------*/
#selectBox{
	padding: 100px 0;
	background: url(../img/pc/bg_main.jpg) no-repeat center center/cover;
}
@media screen and (max-width: 768px){
	#selectBox{
		padding: 50px 0;
		background: url(../img/sp/bg_main.jpg) no-repeat center center/cover;
	}
}



/*  stepBox
--------------------------------------------------*/
.stepBox + .stepBox{
	margin-top: 30px;
}
	.stepBox .inner{
		max-width: 880px;
	}
		.stepBox h3{
			line-height: 1;
			margin-bottom: 20px;
		}
			.stepBox h3 span{
				display: inline-block;
			}
			.stepBox h3 .en{
				width: 104px;
				margin-right: 15px;
			}
			.stepBox h3 .jp{
				/*width: calc(100% - 120px);*/
				font-size: 18px;
				line-height: 1.6;
				color: #807300;
			}
		.stepBox .selectCnt{
			width: 100%;
		}
			.stepBox .selectCnt .figure{
				/*max-width: 232px;*/
				width: 26.3637%;
			}
			.stepBox .selectCnt .tabBox{
				position: relative;
				/*max-width: 602px;*/
				width: 68.4091%;
				z-index: 3;
			}
				.stepBox .tabBox ul{
					width: 100%;
				}
					.stepBox .tabBox ul li{
						position: relative;
						/*max-width: 143px;*/
						width: 23.75415%;
						box-shadow: 0 0 7px 1px rgba(0, 0, 0, .2);
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 13px;
						line-height: 1.54;
						letter-spacing: .03em;
						text-align: center;
						padding: 18px 0;
						box-sizing: border-box;
						transition: color .3s;
						cursor: pointer;
						z-index: 1;
					}
					.stepBox .tabBox ul li + li{
						margin-left: 1.661133%;
					}
					.stepBox .tabBox ul li:nth-of-type(n + 4){
						margin-top: 1.661133%;
					}
					.stepBox .tabBox .l1,
					.stepBox .tabBox .l8{
						margin-left: 5%;
					}
					.stepBox .tabBox .l4{
						margin-left: 0;
					}
					.stepBox .tabBox .l3,
					.stepBox .tabBox .l10{
						margin-right: 5%;
					}
					.stepBox .tabBox li.isActive{
						color: #fff;
					}
					.stepBox .tabBox li:before{
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						z-index: -1;
					}
					.stepBox .tabBox .l1:before{
						background-color: #9CBECB;
						border: solid 1px #9CBECB;
					}
					.stepBox .tabBox .l2:before{
						background-color: #91A97B;
						border: solid 1px #91A97B;
					}
					.stepBox .tabBox .l3:before{
						background-color: #E6DEC7;
						border: solid 1px #E6DEC7;
					}
					.stepBox .tabBox .l4:before{
						background-color: #C9AFAF;
						border: solid 1px #C9AFAF;
					}
					.stepBox .tabBox .l5:before{
						background-color: #C2C8DE;
						border: solid 1px #C2C8DE;
					}
					.stepBox .tabBox .l6:before{
						background-color: #7099A9;
						border: solid 1px #7099A9;
					}
					.stepBox .tabBox .l7:before{
						background-color: #AEC19A;
						border: solid 1px #AEC19A;
					}
					.stepBox .tabBox .l8:before{
						background-color: #CEC194;
						border: solid 1px #CEC194;
					}
					.stepBox .tabBox .l9:before{
						background-color: #E5D8D9;
						border: solid 1px #E5D8D9;
					}
					.stepBox .tabBox .l10:before{
						background-color: #969FC3;
						border: solid 1px #969FC3;
					}
					.stepBox .tabBox li:after{
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						background : linear-gradient(90deg, rgba(0, 11, 35, 1) 0%, rgba(0, 22, 48, 1) 10.71%, rgba(0, 44, 72, 1) 35.03%, rgba(0, 52, 81, 1) 50%, rgba(0, 44, 72, 1) 64.97%, rgba(0, 22, 48, 1) 89.29%, rgba(0, 11, 35, 1) 100%);
						border: solid 1px #807300;
						opacity: 0;
						transition: opacity .3s;
						z-index: 0;
					}
					.stepBox .tabBox li.isActive:after{
						opacity: 1;
					}
						.stepBox .tabBox li span{
							display: inline-block;
							position: relative;
							z-index: 2;
						}
		.stepBox .arrow{
			width: 100%;
			text-align: center;
			margin: 20px auto 0;
		}
			.stepBox .arrow span{
				display: inline-block;
				width: 48px;
			}

@media screen and (min-width: 769px){
	.stepBox .tabBox li:hover{
		color: #fff;
	}
	.stepBox .tabBox li:hover:after{
		opacity: 1;
	}
}
@media screen and (max-width: 768px){
	.stepBox + .stepBox{
		margin-top: 40px;
	}
		.stepBox .inner{
			max-width: 560px;
		}
			.stepBox h3{
				margin-bottom: 25px;
			}
				.stepBox h3 span{
					display: block;
					width: 100%;
				}
				.stepBox h3 .en{
					margin: 0 auto 10px;
				}
				.stepBox h3 .jp{
					font-size: 15px;
					letter-spacing: .05em;
					text-align: center;
				}
			.stepBox .selectCnt{
			}
				.stepBox .selectCnt .figure{
					width: 80%;
					margin: 0 auto 45px;
				}
				.stepBox .selectCnt .tabBox{
					width: 100%;
				}
					.stepBox .tabBox ul{
						justify-content: space-between;
					}
						.stepBox .tabBox ul li{
							width: 48.5%;
							font-size: 16px;
						}
						.stepBox .tabBox ul li + li{
							margin-left: 0;
						}
						.stepBox .tabBox ul li:nth-of-type(n + 3),
						.stepBox .tabBox ul li:nth-of-type(n + 4){
							margin-top: 3%;
						}
						.stepBox .tabBox .l1,
						.stepBox .tabBox .l8,
						.stepBox .tabBox .l4,
						.stepBox .tabBox .l3,
						.stepBox .tabBox .l10{
							margin-left: 0;
							margin-right: 0;
						}
			.stepBox .arrow{
				margin-top: 50px;
			}
				.stepBox .arrow span{
				}
}
@media screen and (max-width: 350px){
	.stepBox .tabBox ul li{
		font-size: 14px;
	}
}




.resulth3{
	position: relative;
	line-height: 1;
	margin-top: 30px;
	margin-bottom: 20px;
	z-index: 3;
}
	.resulth3 span{
		display: inline-block;
	}
	.resulth3 .en{
		width: 104px;
		margin-right: 15px;
	}
	.resulth3 .jp{
		/*width: calc(100% - 120px);*/
		font-size: 18px;
		line-height: 1.6;
		color: #807300;
	}
.resultBtn{
	position: relative;
	max-width: 780px;
	/*width: 100%;*/
	margin: 0 auto;
	cursor: pointer;
	z-index: 3;
}
	.resultBtn .resultBtnCnt{
		position: relative;
		box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
		overflow: hidden;
	}
	.resultBtn .resultBtnCnt:before {
		content: "";
		position: absolute;
		top: -100%;
		left: -160%;
		width: 160%;
		height: 200%;
		background: linear-gradient(130deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 70% );
		animation: cvBtn 4s ease-in-out infinite;
	}
	@keyframes cvBtn{
		0%{ top: -100%; left: -160%; }
		60%{ top: -100%; left: -160%; }
		100%{ top: 0%; left: 100%; }
	}
	.resultBtn span{
		display: block;
		position: absolute;
	    right: 14%;
	    top: 44%;
		width: 5.13%;
	}
@media screen and (max-width: 768px){
	.resulth3{
		margin-top: 40px;
		margin-bottom: 25px;
	}
		.resulth3 span{
			display: block;
			width: 100%;
		}
		.resulth3 .en{
			margin: 0 auto 10px;
		}
		.resulth3 .jp{
			font-size: 15px;
			letter-spacing: .05em;
			text-align: center;
		}
	.resultBtn{
		max-width: 560px;
	}
}




/*  resultBox
--------------------------------------------------*/
#resultBox{
	/*padding-bottom: 125px;*/
	background: url(../img/pc/bg_basic.jpg) no-repeat center center/cover;
}
	#resultBox .resultBg{
		position: relative;
		/*background-color: rgba(255, 255, 255, .4);*/
		/*padding: 50px 0 65px;*/
	}
		#resultBox .resultBg .cntBgWrap{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
			#resultBox .resultBg .cntBgWrap div{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: cover;
				transition: background-image .3s;
			}
			#resultBox .resultBg .cntBgWrap .yellow{
				background-image: url(../img/pc/bg_yellow.jpg);
			}
			#resultBox .resultBg .cntBgWrap .blue{
				background-image: url(../img/pc/bg_blue.jpg);
			}
			#resultBox .resultBg .cntBgWrap .red{
				background-image: url(../img/pc/bg_red.jpg);
			}
			#resultBox .resultBg .cntBgWrap .green{
				background-image: url(../img/pc/bg_green.jpg);
			}
		#resultBox .inner{
			max-width: 1070px;
		}
			#resultBox .resultCnt{
				position: relative;
				z-index: 1;
				/*padding: 50px 0 55px;*/
				padding: 50px 0 115px;
			}
			/*#resultBox .resultCnt:before{
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				padding-bottom: 64%;
				margin-bottom: -8.5%;
				background: url(../img/pc/bg_resultBox.png) no-repeat center center/cover;
				z-index: -1;
			}*/
				#resultBox .resultCnt .catch{
					max-width: 780px;
				    width: 100%;
				    margin: 0 auto 35px;
					padding: 14px 10px 15px;
					box-sizing: border-box;
					box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
					background : linear-gradient(90deg, rgba(128, 115, 0, 1) 0%, rgba(144, 130, 34, 1) 20.16%, rgba(155, 140, 58, 1) 38.66%, rgba(159, 144, 67, 1) 50%, rgba(155, 140, 58, 1) 61.34%, rgba(144, 130, 34, 1) 79.84%, rgba(128, 115, 0, 1) 100%);
				}
					#resultBox .resultCnt .catch p{
						font-size: 21px;
						color: #fff;
						letter-spacing: 0;
						line-height: 1.45;
						text-align: center;
					}
						#resultBox .resultCnt .catch p span{
							position: relative;
							display: inline-block;
							padding: 0 100px;
						}
						#resultBox .resultCnt .catch p span:before,
						#resultBox .resultCnt .catch p span:after{
							content: '';
							position: absolute;
							top: 50%;
							width: 80px;
							height: 1px;
							background-color: #fff;
						}
						#resultBox .resultCnt .catch p span:before{
							left: 0;
						}
						#resultBox .resultCnt .catch p span:after{
							right: 0;
						}
				#resultBox .resultCnt .cntBox{
					max-width: 780px;
					width: 100%;
					margin: 0 auto;
				}
					#resultBox .resultCnt .left{
						max-width: 410px;
						width: 52.56410256%;
					}
						#resultBox .resultCnt .left .spec{
							max-width: 387px;
							width: 100%;
							margin-right: auto;
							margin-bottom: 32px;
						}
						#resultBox .resultCnt .left .madori{
							max-width: 382px;
							width: 100%;
							margin-left: auto;
						}
					#resultBox .resultCnt .right{
						max-width: 342px;
						width: 43.846154%;
					}
						#resultBox .resultCnt .right .tabTxt{
							box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
						}
						#resultBox .resultCnt .right .tabTxt + .tabTxt{
							margin-top: 15px;
						}
						#resultBox .resultCnt .right .arrow2{
							margin: 18px auto 13px;
							text-align: center;
						}
							#resultBox .resultCnt .right .arrow2 span{
								display: inline-block;
								width: 44px;
							}
						#resultBox .resultCnt .right .story{
							position: relative;
							box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
						}
							#resultBox .resultCnt .right .story .p-caption{
								/*padding: 0;*/
								line-height: 1;
								padding: 3px 4px 5px;
								margin: 0 6% 6.1% 0;
							}
@media screen and (max-width: 768px){
	#resultBox{
		/*padding-bottom: 60px;*/
		/*background: url(../img/sp/bg_main.jpg) no-repeat center center/cover;*/
		background: url(../img/sp/bg_basic.jpg) no-repeat center center/cover;
	}
		#resultBox .resultBg{
			/*padding: 50px 0 55px;*/
		}
			#resultBox .resultBg .cntBgWrap .yellow{
				background-image: url(../img/sp/bg_yellow.jpg);
			}
			#resultBox .resultBg .cntBgWrap .blue{
				background-image: url(../img/sp/bg_blue.jpg);
			}
			#resultBox .resultBg .cntBgWrap .red{
				background-image: url(../img/sp/bg_red.jpg);
			}
			#resultBox .resultBg .cntBgWrap .green{
				background-image: url(../img/sp/bg_green.jpg);
			}
			#resultBox .inner{
				max-width: 560px;
			}
				#resultBox .resultCnt{
					padding: 50px 0 55px;
				}
				/*#resultBox .resultCnt:before{
					bottom: auto;
					left: 50%;
				    top: 0;
				    transform: translateX(-50%);
					width: 159.65%;
					padding-bottom: 131.28655%;
					margin-top: 45%;
					margin-bottom: 0;
					background: url(../img/sp/bg_resultBox.png) no-repeat center center/cover;
					z-index: -1;
				}*/
					#resultBox .resultCnt .catch{
						margin-bottom: 25px;
					}
						#resultBox .resultCnt .catch p{
							font-size: 16px;
						}
							#resultBox .resultCnt .catch p span{
								padding: 0;
							}
							#resultBox .resultCnt .catch p span:before,
							#resultBox .resultCnt .catch p span:after{
								display: none;
							}
					#resultBox .resultCnt .cntBox{
						max-width: 560px;
					}
						#resultBox .resultCnt .left{
							max-width: 560px;
							width: 100%;
							margin: 0 auto 45px;
						}
							#resultBox .resultCnt .left .spec{
								max-width: 560px;
								width: 100%;
								margin: 0 auto 25px;
							}
							#resultBox .resultCnt .left .madori{
								width: 95%;
	    						margin-left: auto;
							}
						#resultBox .resultCnt .right{
							max-width: 560px;
							width: 100%;
						}
							#resultBox .resultCnt .right .tabTxt + .tabTxt{
								margin-top: 20px;
							}
							#resultBox .resultCnt .right .arrow2{
								margin: 30px auto 27px
							}
								#resultBox .resultCnt .right .arrow2 span{
									display: inline-block;
									width: 44px;
								}
							#resultBox .resultCnt .right .story{
							}
}




/*  guess
--------------------------------------------------*/
.otherBtn{
	position: relative;
	max-width: 400px;
	width: 100%;
	margin: 50px auto 0;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
	z-index: 3;
}
@media screen and (max-width: 768px){
	.otherBtn{
		max-width: 300px;
		margin-top: 30px;
	}
}






/*  guess
--------------------------------------------------*/
#guess{
	position: relative;
	/*padding: 80px 0 115px;*/
	padding: 80px 0 0;
	/*background : linear-gradient(90deg, rgba(0, 11, 35, 1) 0%, rgba(0, 22, 48, 1) 10.71%, rgba(0, 44, 72, 1) 35.03%, rgba(0, 52, 81, 1) 50%, rgba(0, 44, 72, 1) 64.97%, rgba(0, 22, 48, 1) 89.29%, rgba(0, 11, 35, 1) 100%);*/
	background-color: #d5d3e4;
	z-index: 1;
	margin-bottom: -30px;
}
	#guess .arrow{
		max-width: 780px;
		width: 95%;
		margin: 0 auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		transform: translateY(-99%);
	}
		#guess .arrow span{
			display: inline-block;
			width: 84px;
			margin-left: 18.846154%;
		}
	#guess .inner{
		/*max-width: 880px;*/
	}
		#guess h4{
			position: relative;
			font-size: 30px;
			line-height: 1;
			color: #807300;
			text-align: center;
			padding-bottom: 13px;
			margin-bottom: 40px;
		}
		#guess h4:before,
		#guess h4:after{
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background-color: #807300;
		}
		#guess h4:before{
			transform: translateY(-3px);
		}
		#guess .image{
			position: relative;
			width: 100%;
			padding-bottom: 56.25%;
			/*padding-bottom: 116.25%;*/
		}
			#guess .image iframe{
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
		#guess .cap{
			font-size: 12px;
			line-height: 1.8;
			color: #fff;
			text-align: justify; 
			margin-top: 20px;
		}
@media screen and (max-width: 768px){
	#guess{
		/*padding: 50px 0 60px;*/
		padding: 40px 0 0;
	}
		#guess .arrow{
			text-align: center;
		}
			#guess .arrow span{
				width: 48px;
				margin-left: 0;
			}
		#guess .inner{
			max-width: 560px;
		}
			#guess h4{
				font-size: 20px;
				line-height: 1.4;
				letter-spacing: 0;
				padding-bottom: 20px;
    			margin-bottom: 30px;
			}
			#guess .image{
				padding-bottom: 100%;
			}
			#guess .cap{
				font-size: 10px;
				margin-top: 15px;
			}
}












.btnWrap{
	padding: 70px 0;
	/*padding: 40px 0 90px;*/
	background-color: #d5d3e4;
}
.otherPlan{
	max-width: 400px;
	width: 100%;
	margin: 0 auto;
}
	.otherPlan a{
		display: block;
		width: 100%;
		font-size: 26px;
	    letter-spacing: .05em;
	    text-align: center;
	    color: #fff;
	    padding: 11px 0 13px;
		background : linear-gradient(90deg, rgba(94, 77, 0, 1) 0%, rgba(168, 140, 0, 1) 50%, rgba(94, 77, 0, 1) 100%);
			box-shadow : 0.28px 0.28px 1.42px rgba(4, 0, 0, 0.7);
	}
@media screen and (max-width: 768px){
	.btnWrap{
		padding: 50px 0;
	}
		.otherPlan{
			max-width: 300px;
			width: 90%;
		}
			.otherPlan a{
				font-size: 16px;
				/*padding: 7px 0 9px;*/
				padding: 16px 0 18px
			}
}