@charset "utf-8";

#main{
	overflow: hidden;
}
#planTop{
	background: #000;
	padding-top: 60px;
	color: #fff;
	padding-bottom: 50px;
}
	#planTop h2 {
	    text-align: center;
	    font-size: 28px;
	    margin-bottom: 40px;
	    line-height: 1.6;
	}
	.bodyCopy{
		padding-bottom: 50px;
		text-align: center;
	}
	#planTop p.cap{
		text-align: left;
		font-size: 10px;
		line-height: 1.4;
	}
	.vewPhoto{
		width: 95%;
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
		position:  relative;
	}
		.vewPhoto p.cap{
			margin-top: 0; 
			position:  absolute;
			bottom:  1%;
			left:  2%;
			width: 96%;
		}
	.surveyContent{
		margin-top: 60px;
	}
		.surveyContent p.cap{
			margin-top: 5px;
		}
	

.planBg {
	background:#000;
	position: relative;
	padding-top: 50px;
	padding-bottom: 50px;
}
	.planBg .tips {
	    color: #fff;
        text-align: center;	
	}
.view360Bnr_plan{
	margin-top: 50px;
}
/*-----------*/
#onePlan{
	padding: 50px 0;
}
#onePlan .popCaption{
	text-align: center;
}
#onePlan .madoriBox{
	max-width: 500px;
}
#onePlan .hanrei{
	text-align: center;
}
@media screen and (max-width: 768px){
	#onePlan{
		padding: 30px 0;
	}
		#onePlan .spec{
			width: 93.75%;
		}
}
/*-----------*/
#plansList {
	background:#000;
	padding-top: 70px;
	padding-bottom: 85px;
}
#plansList ul li {
  width: 47.92%;
  max-width: 460px;
  padding-bottom: 30px;
  position: relative;
  opacity: 0;
}
#plansList ul li:nth-child(odd) {
  float: left;
}
#plansList ul li:nth-child(even) {
  float: right;
}

.ippanLinkBtn{
	width: 93.75%;
	max-width: 300px;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
}
/*ポップアップスタイル*/

.spec {
	width: 100%;
	max-width: 685px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
.nextJuko,
.yoteiJuko,
.sentyakuJuko{
	width: 100%;
	max-width: 284px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
}
.two{
	margin-bottom: 10px;
}
.view360Link {
	width: 100%;
	max-width: 268px;
	margin-left: auto;
	margin-right: auto;
    margin-top: -10px;
    margin-bottom: 30px;
    text-align: center;
}

/*ポップアップタブ*/

.tabBox{
	margin-bottom: 30px;
	max-width: 282px;
	margin-left: auto;
	margin-right: auto;
}
	.tabBox ul.tab{overflow:hidden;}
	.hide {display:none;}
		.tab li{
			float: left;
		    width: 140px;
			background-image: url(../img/pc/tabBg.png);
			background-size: cover;
		}
		.tab li:nth-child(2){
			float: right;
		}
		.tab li.select .tabBtn1{
		    background-image: url(../img/pc/tab1_hov.png);
			background-size: cover;
		}
		.tab li.select .tabBtn2{
		    background-image: url(../img/pc/tab2_hov.png);
			background-size: cover;
		}
		.tab li.select{
			background-image: url(../img/pc/tabSelectBg.png);
		    background-size: cover;
		}
		.tab li.select img{
			visibility: hidden;
		}


.madoriBox {
	width: 90%;
	max-width: 550px;
	margin-right: auto;
	margin-left: auto;
}
	.hanrei {
	}


.layoutBox {
	width: 90%;
	max-width: 550px;
	margin-right: auto;
	margin-left: auto;
}




.eng_hanrei {
	width: 95%;
	max-width: 700px;
	text-align: center;
	padding-top: 20px;
    margin-right: auto;
    margin-left: auto;
}
.caption {
	margin-bottom: 30px;
    position: inherit;
    left: inherit;
    bottom: inherit;
    padding-top: 20px;
}
	.caption ul li {
		font-size: 10px;
	    line-height: 1.6;
	}


/*資金計算例*/

.fundLoan{
	width: 90%;
	max-width: 550px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
	margin-bottom: 20px;
}

.fundLoan ul li{
	margin-top: 10px;
}
.fundLoan ul li p{
	font-size: 10px;
	color: #4d4d4d;
	line-height: 1.45;
	font-weight: normal;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
.fundLoan ul li p.loanCapTtl{
	font-weight: bold;
}

/*360°VIEW*/

.view360Wrap{
  opacity: 0;
  -webkit-transition:2s ease-in-out;
  -moz-transition:2s ease-in-out;
  -o-transition:2s ease-in-out;
  transition:2s ease-in-out;
}
	.Etype_Spec{
		padding-top: 50px;
	}
	.view360Main{
		padding-top: 20px;
		padding-bottom: 70px;
		overflow: hidden;
		width: 960px;
		margin-left: auto;
		margin-right: auto;
	}

	figure.Etype_madori{
		float: left;
		width: 290px;
		height: 541px;
		position: relative;
	}
		figure.Etype_madori .view1,
		figure.Etype_madori .view2,
		figure.Etype_madori .view3 {
			position: absolute;
			width: 36px;
			height: 36px;
			z-index: 5;
		}
		figure.Etype_madori .view1 {
		    bottom: 18%;
		    right: 30%;
		}
		figure.Etype_madori .view2 {
		    top: 31%;
		    left: 33%;
		}
		figure.Etype_madori .view3 {
		    top: 30%;
		    left: 46%;
		}

	.virtual_view360{
		float: right;
		width: 650px;
		margin-top: 10px;
	}
	.viewTxt{
		margin-top: 5px;
	}

@media screen and (max-width: 980px) {
	figure.Etype_madori{
		margin-left: 1%;
	}
}

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

	#planTop{
		padding-top: 40px;
		padding-bottom: 30px;
	}
		#planTop h2{
			font-size: 24px;
		}
		.bodyCopy{
			padding-bottom: 40px;
		}
		.vewPhoto{
			width: 100%;
			max-width: 640px;
		}
			.vewPhoto p.cap{
				margin-top: 5px; 
				position:  relative;
				bottom:  0;
				left:  0;
				width: 93.75%;
				margin-left: auto;
				margin-right: auto;
			}
		.surveyContent{
			margin-top: 30px;
		}
		.surveyContent .inner{
			max-width: 560px;
			width: 87.5%;
		}

	.planBg {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.view360Bnr_plan{
		margin-top: 30px;
	}
	.view360Bnr_plan.inner{
		width: 100%;
		max-width: 640px;
	}

	#plansList {
		padding-top: 30px;
		padding-bottom: 20px;
	}
	.plansLinkBox.inner {
	    max-width: 640px;
	    width: 100%;
	}

	#plansList ul li {
	    max-width: 100%;
	    width: 100%;
	    opacity: 1;
	}
	#plansList ul li:nth-child(odd) {
	    float: none;
	}
	#plansList ul li:nth-child(even) {
	    float: none;
	}

	.spec {
		max-width: 640px;
		margin-top: 0;
	}

	.eng_hanrei {
	    max-width: 280px;
	}


	/*資金計算例*/

	.fundLoan{
		width: 93.75%;
		max-width: 600px;
	}

	/*360°VIEW*/
		.Etype_Spec {
		    padding-top: 15px;
		    width: 87.5%;
		    max-width: 280px;
		}
		.view360Main{
			padding-top: 30px;
			padding-bottom: 15px;
			width: 100%;
		}

		figure.Etype_madori{
			float: none;
			margin-left: auto;
			margin-right: auto;
		}

		.virtual_view360{
			float: none;
			margin-left: auto;
			margin-right: auto;
			margin-top: 25px;
			width: 100%;
		}

	#view360 #information {
	    padding-top: 10px;
	    padding-bottom: 30px;
	    border-top: none;
	}
	

}

/*movie*/
#movie{
		text-align: center;
    	margin: 0 auto;
    	padding: 100px 0 80px;
	}
		#movie .walkBox{
			/*max-width: 460px;
			width: 47.9167%;
			float: left;*/
		}
		#movie .walkBox + .walkBox{
			/*float: right;*/
			margin-top: 80px;
		}
			#movie .walkBox iframe{
				width: 100%;
			}
			#movie .walkBox p{
				margin-bottom: 20px;
			}
				#movie .walkBox p span{
					border: solid #fff 1px;
					padding: 7px 13px;
					display: inline-block;
					font-size: 20px;
				}
			#movie .walkBox .cap{
				font-size: 12px;
				text-align: right;
			}
		#movie h3{
			font-size: 30px;
    		margin-bottom: 40px;
		}	
		
	
@media screen and (max-width: 768px){
	#movie{
    	padding: 40px 10px;
	}
		#movie .walkBox{
			/*width: 100%;*/
			/*float: none;*/
			/*margin: 0 auto;*/
		}
		#movie .walkBox + .walkBox{
			/*float: none;*/
			margin-top: 35px;
		}
			#movie .walkBox iframe{
				height: 460px;
			}
			#movie .walkBox p{
				margin-bottom: 15px;
			}
				#movie .walkBox p span{
					font-size: 16px;
					padding: 4px 10px;
				}
			#movie .walkBox .cap{
				text-align: left;
			}
		#movie h3{
			font-size: 22px;
    		margin-bottom: 20px;
		}	
}

/*slider*/
#sliderBox{
	background-color: #000;
	color: #fff;
	padding-top: 90px;
}
	#sliderWrap{
		max-width: 1300px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		/*padding: 80px 0;*/
		padding: 0 0 100px;
	}
		.slider{
			max-width: 1100px;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
			.slider li{
				position: relative;
			}
				.slider li p{
					position: absolute;
					bottom: 0;
					right: 0;
					background-color: rgba(0,0,0,0.8);
					padding: 3px 10px;
					font-size: 10px;
				}
		#sliderRap .slick-slider {
		    position: static;
		}



@media screen and (max-width: 768px){
	#sliderBox{
		background-color: #000;
		color: #fff;
		padding-top: 50px;
	}
		#sliderWrap{
			padding: 0 0 40px;
		}
}