@charset "utf-8";
#first-modal {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background:rgba(0,0,0,.7);
	z-index: 1000001;
	display: none;
}
#first-modalTab {
    cursor: pointer;
}

	#first-modal .modalContents {
		width: 80%;
		max-width: 1400px;
		height: 95%;
		/* background:#fff; */
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		overflow-y:scroll;
		position: fixed;
		z-index: 2;
		-webkit-overflow-scrolling: touch
	}
	#first-modal .pc {
		display: block;
	}
	#first-modal .sp-bl,
	#first-modal .sp-il {
		display: none;
	}
	#first-modal .modalSubBox {
		width: 80%;
		max-width: 1400px;
		height: 95%;
		/* background:#fff; */
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		position: fixed;
		z-index: 1;
	}
	.modalContentsInner {
		position: relative;
	}
	img.contentsImg {
		display: block;
	}
	a.modalReserve {
        position: absolute;
        bottom: 6.9674%;
        left: 15.3571%;
        max-width: 300px;
        width: 21.4286%;
    }
    a.modalReserve2 {
		position: absolute;
		top: 16.4986%;
		left: 26.7857%;
		max-width: 300px;
		width: 21.4286%;
	}
    a.modalFront {
        position: absolute;
        bottom: 4.02%;
        left: 16.4285%;
        max-width: 300px;
        width: 21.4286%;
    }
    a.modalGarden {
        position: absolute;
        bottom: 4.02%;
        left: 39.2857%;
        max-width: 300px;
        width: 21.4286%;
    }
	
	@media screen and (max-height:1100px) {
		#first-modal .modalContents,
		#first-modal .modalSubBox {
			/* height: 800px; */
		}
	}
	@media screen and (max-height:900px) {
		#first-modal .modalContents,
		#first-modal .modalSubBox {
			height: 650px;
		}
	}
	@media screen and (max-height:700px) {
		#first-modal .modalContents,
		#first-modal .modalSubBox {
			height: 450px;
		}
	}
	

	#first-modal .modalContents .inner {
		width: 91.7%;
		max-width:880px;
		margin-right: auto;
		margin-left:auto;
	}
	.modalBgTop {
		background:url(../../img/renew/modalBgTop.jpg) no-repeat top center;
		background-size: cover;
		width: 100%;
		height: 224px;
		position: absolute;
		top: 0;
		left: 0;
	    z-index: -1;
	}
	.modalBgBottom {
		background:url(../../img/renew/modalBgBottom.jpg) no-repeat top center;
		background-size: cover;
		width: 100%;
		height: 245px;
		position: absolute;
		bottom: 0;
		left: 0;
	    z-index: -1;
	}

	#first-modal .closeBtn {
		position:absolute;
		top: 0;
		left: -40px;
		cursor: pointer;
	}

#first-modalTab img:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
}




@media screen and (max-width: 768px) {
	#first-modal .modalContents, #first-modal .modalSubBox {
		width: 92%;
		height: 80%;
		max-width: 640px;
	}
	#first-modal .pc {
		display: none;
	}
	#first-modal .sp-bl {
		display: block;
	}
	#first-modal .sp-il {
		display: inline;
	}
	.modalContentsInner {
		position: relative;
	}
	#first-modalTab-sp {
		margin: 40px auto 0;
		width: 87.5%;
		max-width: 560px;
		cursor: pointer;
	}
	a.topModalLink {
		max-width: 475px;
		width: 80%;
		position: absolute;
		bottom: 10.38%;
		right: 0;
		left: 0;
		margin: auto;
	}
	#first-modal .closeBtn {
		top: -40px;
		right: 1px;
		width: 100px;
		left: 0;
		margin-left: auto;
		line-height: 0;
	}
	#first-modal .modalContents .inner {
	    width: 85%;
	}
	.modalContents .topTips p {
	    text-align: left;
	}
	a.modalReserve {
        bottom: 14.0880%;
        right: 0;
        left: 0;
        margin: 0 auto;
        max-width: 510px;
        width: 79.6875%;
    }
    a.modalReserve2 {
		top: 9.2618%;
		right: 0;
		left: 0;
		margin: 0 auto;
		max-width: 510px;
		width: 79.6875%;
	}
    a.modalFront {
        bottom: 7.5112%;
        right: 0;
        left: 0;
        margin: 0 auto;
        max-width: 520px;
        width: 81.25%;
    }
    a.modalGarden {
        bottom: 6.5057%;
        right: 0;
        left: 0;
        margin: 0 auto;
        max-width: 520px;
        width: 81.25%;
    }
    a.modalTel {
        position: absolute;
        bottom: 11.2845%;
        right: 0;
        left: 0;
        margin: 0 auto;
        max-width: 560px;
        width: 87.5%;
    }
	a.modalTel2 {
		position: absolute;
		top: 13.1180%;
		right: 0;
		left: 0;
		margin: 0 auto;
		max-width: 560px;
		width: 87.5%;
	}
}