@charset "utf-8";
.inner {
	width: 95%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
.clearfix:before,
.clearfix:after,
.cf:before,
.cf:after {
	content: "";
	display: table;
}
.clearfix:after,
.cf:after {
	clear: both;
}
.clearfix,
.cf {
	zoom: 1;
}

.sp-bl,
.sp-il,
.tablet-bl {
	display:none;
}

.opa {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.opa:hover {
  opacity: 0.85;
  filter: alpha(opacity=85);
}

#renewBox,
#renewBox h1,
#renewBox h2,
#renewBox h3,
#renewBox h4,
#renewBox h5,
#renewBox h6,
#renewBox p {
	text-align: center;
}

#renewBox {
	margin-bottom: 50px;
}

.opaBox {
	/* opacity: 0; */
}
.model3dBnr {
	margin: 40px auto 0;
	width: 100%;
	max-width: 670px;
}
.panoramaBnr {
	margin: 30px auto 0;
	width: 100%;
	max-width: 670px;
}
.voiceBnr {
    max-width: 670px;
    width: 95%;
    margin: 20px auto 40px;
}

#modelroom {
    /*background: url(../../img/renew/bg_gallery.jpg) no-repeat center;*/
    /*background-size: cover;*/
    color: #FFF;
    padding: 50px 0;
    margin-bottom: 50px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#68603d+0,8e8554+50,68603d+100 */
    background: rgb(104,96,61); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(104,96,61,1) 0%, rgba(142,133,84,1) 50%, rgba(104,96,61,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(104,96,61,1) 0%,rgba(142,133,84,1) 50%,rgba(104,96,61,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(104,96,61,1) 0%,rgba(142,133,84,1) 50%,rgba(104,96,61,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68603d', endColorstr='#68603d',GradientType=1 ); /* IE6-9 */
}
#modelroom .tips h4 {
    font-size: 33px;
    font-weight: normal;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    line-height: 1.4;
    margin-bottom: 15px;
    font-feature-settings: 'palt' 1;
    letter-spacing: 1px;
}
#modelroom .tips p {
    font-size: 16px;
    font-weight: normal;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    line-height: 1.4;
    font-feature-settings: 'palt' 1;
    letter-spacing: 1px;
}



#renewBox p.externalLink{
	margin: 0 auto;
	text-align: left;
	font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	margin-top: 10px;
}

	/*TOP sonouchi CSS*/
	.sonouchiBnr{
		width: 100%;
		max-width: 670px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
	.sonouchiWrap{
		text-align: left;
		margin-bottom: 50px;
		width: 100%;
		max-width: 655px;
		margin-left: auto;
		margin-right: auto;
		background-color: #fff;
	}
	.sonouchiWrap dt{
		width: 16.13%;
		max-width: 100px;
		margin-bottom: 15px;
		display: inline-block;
	}
	.sonouchiWrap dd{
		float: right;
		width: 80%;
		margin-bottom: 15px;
	}
		.sonouchiWrap dd a{
			font-size: 14px;
			font-weight: bold;
			color: #333;
			text-decoration: underline;
		}
	.sonouchiWrap dl+a{
		display: inline-block;
		width: 100%;
		text-align: center;
		background-color: #857d6c;
		color: #fff;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
		text-decoration: none;
	}


	@media screen and (max-width: 768px) {
		#renewBox p.externalLink {
			font-size: 10px;
		}
		.panoramaBnr {
			/* width: 87.5%; */
			/* max-width: 560px; */
		}
		.sonouchiBnr{
			width: 87.5%;
			max-width: 560px;
		}
		.sonouchiWrap{
			width: 87.5%;
			max-width: 560px;
			margin-left: auto;
			margin-right: auto;
		}
		.sonouchiWrap dt{
			width: 25%;
			max-width: 100px;
		}
		.sonouchiWrap dd{
			width: 70%;
		}
	}
	
	/*TOP sonouchi CSS END*/


	.modalContents {
	}
	.modalRelative {
		position: relative;
	}
		.modalContents .topTips {
			padding-top: 40px;
		}
			.modalContents .topTips h2 {
			    padding-bottom: 20px;
			}
			.modalContents .topTips p {
			    text-align: center;
			    font-size: 12px;
			    line-height: 2;
			}
		.comparison {
			margin-top: -20px;
			margin-bottom: 20px;
		}
			.comparison .left {
			    width: 50%;
			    float: left;
			}
			.comparison .right {
				width: 50%;
			    float: right;
			}

		.benefits {
		    position: relative;
		}
			.benefits h4 {
				padding-bottom: 30px;
			}
			.benefitsCatch {
				width: 100%;
			    position: absolute;
			    top: -60px;
			}
				.benefits ul li {
					width: 21.6%;
					max-width: 190px;
					float: left;
				}
				.benefits ul li + li {
					margin-left: 4.53%;
				}
					.benefits ul li .photo {
					}
					.benefits ul li h5 {
					    text-align: center;
					    padding-top: 10px;
					    padding-bottom: 10px;
					    color: #228f80;
					    font-size: 15px;
					    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
					}
					.benefits ul li p {
						font-size: 11px;
					    line-height: 1.6;
					    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
					}
		.telBtn {
			margin-top: 40px;
	        max-width: 350px !important;
	        padding-bottom: 40px;
		}


#mvBox {
	width:100%;
	/* height: 900px; */
	position: relative;
	background:#fff;
	/*background-size: 4083px;
	-webkit-animation: bgscroll 70s linear infinite;
	 animation: bgscroll 70s linear infinite;*/
}
/*.mvScroll {
	background:url(../../img/renew/mv.jpg) center !important;
}
@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 2380px 0;}
}

@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 2380px 0;}
}*/

#mainImage {
    max-width: inherit;
    /* margin-bottom: 90px; */
    height: auto !important;
}
#mainImage:after {
	padding-top: 0;
}
.koudouPrice {
    text-align: center !important;
    background-color: #333;
}

.koudouPrice img {
    margin: 0 auto;
}
#topVideo {
    width: 100%;
    max-width: 100%;
    height: 100%;
}

	#mvSlider {
		width: 100%;
		height: 900px;
		position: relative;
		overflow: hidden;
		background: url(../../img/renew/slide1.jpg) no-repeat center;
		background-size: cover;
	}
	@media screen and (max-width:2200px) {
		#mvSlider,#topVideo,#mvBox,.renewMv {height: 900px;}
	}
	@media screen and (max-width:2000px) {
		#mvSlider,#topVideo,#mvBox,.renewMv {height: 850px;}
	}
	@media screen and (max-width:1800px) {
		#mvSlider,#topVideo,#mvBox,.renewMv {height: 800px;}
	}
	@media screen and (max-width:1600px) {
		#mvSlider,#topVideo,#mvBox,.renewMv {height: 750px;/* height: 100%; */}
	}
	@media screen and (max-width:1400px) {
		#mvSlider,#topVideo,#mvBox,.renewMv {height: 700px;}
	}
	@media screen and (max-width:1200px) {
		#mvSlider,#topVideo,#mvBox,.renewMv {height: 650px;}
	}


		.slide {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		#slide1 {
			background:url(../../img/renew/slide1.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide2 {
			background:url(../../img/renew/slide2.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide3 {
			background:url(../../img/renew/slide3.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide4 .left {
			background:url(../../img/renew/slide4-1.jpg) no-repeat center;
			background-size: cover;
			width: 50%;
			height: 130%;
			float: left;
			opacity: 0;
		}
		#slide4 .right {
			background:url(../../img/renew/slide4-2.jpg) no-repeat center;
			background-size: cover;
			width: 50%;
			height: 130%;
			float: right;
			opacity: 0;
		}
		#slide5 {
			background:url(../../img/renew/slide5.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide6 {
			background:url(../../img/renew/slide6.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide7 .left {
			background:url(../../img/renew/slide7-1.jpg) no-repeat center;
			background-size: cover;
			width: 50%;
			height: 130%;
			float: left;
			opacity: 0;
		}
		#slide7 .right {
			background:url(../../img/renew/slide7-2.jpg) no-repeat center;
			background-size: cover;
			width: 50%;
			height: 130%;
			float: right;
			opacity: 0;
		}
		#slide8 .left {
			background:url(../../img/renew/slide8-1.jpg) no-repeat center;
			background-size: cover;
			width: 50%;
			height: 130%;
			float: left;
			opacity: 0;
		}
		#slide8 .right {
			background:url(../../img/renew/slide8-2.jpg) no-repeat center;
			background-size: cover;
			width: 50%;
			height: 130%;
			float: right;
			opacity: 0;
		}
		#slide9 {
			background:url(../../img/renew/slide9.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide10 {
			background:url(../../img/renew/slide10.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}

	.renewMv{
		/* background:url(../../img/renew/renewMv.jpg) no-repeat right bottom; */
		background-size: cover;
	}
	.renewMv img {
		width: 100%;
	}

	#renewBox .sazaby {
		position: absolute;
		top: 40px;
		left: 40px;
		margin: auto;
		width: 35.7143%;
		max-width: 500px;
	}
	#renewBox .catch {
		position: absolute;
		right: 40px;
		bottom: 40px;
		margin: auto;
		width: 25.7143%;
		max-width: 360px;
	}
		#renewBox .catch h2 {
			/* padding-bottom: 10px; */
			text-align: center;
		}
		#renewBox .catch p {
			color: #fff;
			text-align: center;
			line-height: 2;
		    font-size: 16px;
		    padding-bottom: 35px;
		}
		#renewBox .catch a {
		    max-width: 335px;
		    width: 100%;
		    background: rgba(0,0,0,.4);
		    border: 1px solid #fff;
		}
			#renewBox .catch a span {
				padding-top: 12px;
			    padding-bottom: 12px;
		        letter-spacing: 2px;
			}

		/* Thar Buttons */
		a.animated-button.thar-three {
			width: 80%;
			max-width: 240px;
			margin-right: auto;
			margin-left: auto;
			color: #fff;
			cursor: pointer;
			display: block;
			position: relative;
			border: 2px solid #fff;
			transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
		0s
			text-decoration: none;
		}
		.black a.animated-button.thar-three {
			color: #000;
			border: 2px solid #000;
		}
		a.animated-button.thar-three.gold {
			border: 2px solid #8f935b;
			/* margin-top: 10px; */
			margin-left: 0;
			width: 100%;
			max-width: 100%;
		}
		a.animated-button.thar-three span {
			font-weight: bold;
			position: relative;
			z-index: 2;
		    text-align: center;
		    display: inherit;
	        padding-top: 15px;
		    padding-bottom: 15px;
		    font-size: 14px;
		    background:url(../../img/renew/catLink_arrow.png) no-repeat 20px center;
    		font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
		}
		a.animated-button.thar-three.gold span {
			background-color: #8f935b;
			background-image:url(../../img/renew/catLink_arrow.png);
			background-repeat: no-repeat;
			background-position: 20px center;
		}
		.black a.animated-button.thar-three span {
			background:url(../../img/renew/catLink_arrow_black.png) no-repeat 20px center;
		}
		a.animated-button.thar-three:hover {
			color: #000 !important;
			background-color: transparent;
		    text-decoration: none;
		    background:url(../../img/renew/catLink_arrow_black.png) no-repeat 20px center;
		}
		a.animated-button.thar-three.gray {
			border: 2px solid #616161;
			/* margin-top: 10px; */
			margin-left: 0;
			width: 100%;
			max-width: 100%;
		}
		a.animated-button.thar-three.gray span {
			background-color: #616161;
			background-image: url(../../img/renew/catLink_arrow.png);
			background-repeat: no-repeat;
			background-position: 20px center;
		}
		.black a.animated-button.thar-three:hover {
			color: #fff !important;
		}
		a.animated-button.thar-three.gold:hover,
		a.animated-button.thar-three.gray:hover {
			color: #fff !important;
		}
		a.animated-button.thar-three:hover:before {
			left: 0%;
			right: auto;
			width: 100%;
		}
		a.animated-button.thar-three:before {
			display: block;
			position: absolute;
			top: 0px;
			right: 0px;
			height: 100%;
			width: 0px;
			z-index: 1;
			content: '';
			color: #fff !important;
			background: #fff;
			transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
		0s;
		}
		.black a.animated-button.thar-three:before {
			color: #000 !important;
			background: #000;
		}
		a.animated-button.thar-three.gold:before {
			color: #fff !important;
			background: #8f935b;
		}

		#mvBox .caption {
			position: absolute;
			right: 50px;
			bottom: 30px;
			color: #fff;
			font-size: 11px;
			letter-spacing: 1px;
			text-align: right;
		}


.animeBox {
	position: relative;
	overflow: hidden;
    /*-webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;*/
}
	.bg-black {
		background:#03100c;
	}
	.animeBox .blackBox {
		position: absolute;
		top: -100%;
		left: -90%;
		opacity: 0;
	}
		.animeBox .blackBoxAnime {
			opacity: 1;
			-webkit-animation: blackBoxAnime 1.5s ease forwards;
			 animation: blackBoxAnime 1.5s ease forwards;
		}

	.animeBox .photo {
		opacity: 0;
	}
		.photoAnime {
			-webkit-animation: photoAnime 1s ease forwards;
			 animation: photoAnime 1s ease forwards;
		}

		@keyframes blackBoxAnime {
			0% {
				top: -100%;
				left: -97%;
			}
			25% {
				top: 0;
				left: -97%;
			}
			35% {
				top: 0;
				left: -97%;
			}
			55% {
				top: 0;
				left: 0;
			}
			80% {
				top: 0;
				left: 0;
			}
			100% {
				top: 0;
				left: 100%;
			}
		}

		@keyframes photoAnime {
			0% {
				top: 0;
				left: -100%;
			}
			100% {
				top: 0;
				left: 0;
			}
		}

.topMerit{
	width: 100%;
	background: url(../../img/renew/topBg1.jpg) no-repeat center;
	background-size: cover;
}
.topKokuchi{
	width: 100%;
	background: url(../../img/renew/topBg2.jpg) no-repeat center;
	background-size: cover;
}

.koudouBox {
	margin-bottom: 70px;
}

.CPNbnr {
	margin-top: 40px;
}
	.koudouBox .right {
	    width: 48%;
	    max-width: 480px;
		float: right;
	}
	.koudouBox .koudou {
		width: 100%;
	}
	.koudouBox .koudou p {
		font-size: 10px;
	    padding-top: 20px;
	    padding-bottom: 20px;
	    color: #4d4d4d;
	    border-top: 1px solid #a5a5a5;
	    border-bottom: 1px solid #a5a5a5;
	    margin-top: 22px;
	    line-height: 1.6;
	}
	.koudouBox .koudou h3 {
		padding: 40px 0;
	}
		.koudouBox .koudou ul.koudouBtn{
			width: 100%;
			max-width: 500px;
			margin-left: auto;
			margin-right: auto;
		}
			.koudouBox .koudou ul.koudouBtn li{
				float: left;
				width: 48%;
				max-width: 240px;
			}
			.koudouBox .koudou ul.koudouBtn li:nth-child(2){
				float: right;
			}

	.koudouBox .koudou .registTxt {
		padding: 0;
		border: none;
		margin-top: 35px;
	}

section.topUnderPanel{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
	section.topUnderPanel ul li{
		float: left;
		width: 25%;
	}
	
	
.catTtl {
	color: #a3a280;
	font-size: 34px;
	font-family: 'Century';
    padding-bottom: 30px;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1.3;
}
.catTxt {
	font-size: 16px;
	line-height: 2.3;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	padding-bottom: 25px;
}
.catLink a.animated-button.thar-three {
	margin: inherit;
}

.masterPlan {
	margin-bottom: 150px;
	padding-bottom: 70px;
}
	.masterPlan .left {
		width: 52%;
		max-width: 520px;
		float: left;
	}
		#animeBox2 {
		    width: 33.27%;
		    max-width: 173px;
			float: left;
		}
		#animeBox3 {
			margin-top: 23%;
			width: 33.27%;
		    max-width: 173px;
			float: left;
		}
		#animeBoxTsuika1 {
			width: 33.46%;
			max-width: 174px;
			float: left;
		}
	.masterPlan .right {
		width: 30%;
		max-width: 300px;
		float: left;
		margin-left: 10%;
		opacity: 0;
	    margin-top: 15%;
	}

.roofBalcony {
	background:url(../../img/renew/roofBalcony_bg.jpg) no-repeat center;
	background-size: cover;
	padding-top: 100px;
	padding-bottom: 100px;
	margin-bottom: 160px;
}
	.roofBalcony .tips {
		opacity:0;
	}
	.roofBalcony .tips p {
		max-width: 400px;
		color: #fff;
	}

.lines-on-sides {
  display: table;
  text-align: center;
  white-space: nowrap;
  color: #000;
}
.lines-on-sides:after,.lines-on-sides:before{
  content: '';
  display: table-cell;
  width: 50%;
  /*background: -webkit-linear-gradient(transparent 50%, currentColor 50%, currentColor -webkit-calc(50% + 1px), transparent -webkit-calc(50% + 1px));
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, currentColor), color-stop(currentColor calc(50% + 1px)), to(transparent calc(50% + 1px)));
  background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px));
  -webkit-background-clip: padding;
  background-clip: padding;*/
  background:url(../../img/renew/liner.png) repeat-x left center;
  background-size: 39px;
}
.lines-on-sides:after {
  border-left: 0.5em solid transparent;
}
.lines-on-sides:before {
  border-right: 0.5em solid transparent;
}
 

.model {
	margin-bottom:-30px;
}
	.model .left {
		width: 34%;
		max-width: 340px;
		float: left;
	}
	.model .right {
		width: 50%;
		max-width: 500px;
		float: left;
		margin-left: 5%;
		opacity: 0;
	    margin-top: 10%;
	}
		.model .lines-on-sides {
			width: 118%;
			margin-left: -20%;
		}
		.model .lines-on-sides:before {
			display: none;
		}

.plan {
	margin-bottom:-30px;
}
	.plan .left {
		width: 34%;
		max-width: 340px;
		float: right;
	}
	.plan .right {
		width: 50%;
		max-width: 500px;
		float: right;
		margin-right: 5%;
		opacity: 0;
	    margin-top: 10%;
	}
		.plan .lines-on-sides {
			width: 118%;
			margin-right: -20%;
			text-align:right !important;
		}
		.plan .lines-on-sides:before {
			width: 77%;
		}
		.plan .lines-on-sides:after {
			display: none;
		}

.equipment {
	padding-bottom:150px;
	border-bottom: 1px solid #a3a280;
}
	.equipment .left {
		width: 34%;
		max-width: 340px;
		float: left;
	}
	.equipment .left .caption {
		font-size: 10px;
		text-align: right !important;
	    padding-top: 10px;
	    opacity: 0;
	}
	.equipment .right {
		width: 50%;
		max-width: 500px;
		float: left;
		margin-left: 5%;
		opacity: 0;
	    margin-top: 10%;
	}
		.equipment .lines-on-sides {
			width: 118%;
			margin-left: -20%;
		}
		.equipment .lines-on-sides:before {
			display: none;
		}
@media screen and (max-width:900px) {
	.model {
		margin-bottom:30px;
	}
	.plan {
		margin-bottom:30px;
	}
}

#otherLinks {
	/* padding-top: 50px; */
	padding-bottom: 50px;
}
	#otherLinks ul {
		/* max-width: 655px; */
		border-top: 1px dotted rgba(0,0,0,0.5);
		margin-bottom: 20px;
	}
	#otherLinks ul li {
		/* width: 47.3283%; */
		/* max-width: 310px; */
		/* float: left; */
		/* margin-bottom: 35px; */
		padding: 20px 0;
		border-bottom: 1px dotted rgba(0,0,0,0.5);
	}
		#otherLinks ul li + li {
			/* margin-left: 5.3435%; */
		}
		#otherLinks ul li:nth-child(4) {
			margin-left: 0;
		}

.linkBnr {
    margin: 20px auto 0;
}

.twoCalumBnr {
}
.twoCalumBnr p {
    width: 100%;
    max-width: 628px;
}
.twoCalumBnr p + p {
	width: 34%;
    max-width: 320px;
	float: right;
}
.twoCalumBnr p + p img {
	width: 100%;
}

.kome {
	font-size: 9px;
    vertical-align: 9px;
}

@media screen and (max-width:768px) {
	.pc { display:none !important; }
	.sp-bl { display:block; }
	.sp-il { display:inline; }

	.inner {
		width:87.5%;
		max-width:560px;
	}

	#first-modal .modalContents, #first-modal .modalSubBox {
		width: 92%;
		height: 80%;
		max-width: 640px;
	}
	.modalContents .pc {
		display: none;
	}
	.modalContentsInner {
		position: relative;
	}
	#first-modalTab-sp {
		margin: 40px auto;
		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: 15.4968%;
        right: 0;
        left: 0;
        margin: 0 auto;
        max-width: 510px;
        width: 79.6875%;
    }
    a.modalReserve2 {
		top: 12.2258%;
		right: 0;
		left: 0;
		margin: 0 auto;
		max-width: 510px;
		width: 79.6875%;
	}
    a.modalFront {
        bottom: 8.2355%;
        right: 0;
        left: 0;
        margin: 0 auto;
        max-width: 520px;
        width: 81.25%;
    }
    a.modalGarden {
        bottom: 7.1291%;
        right: 0;
        left: 0;
        margin: 0 auto;
        max-width: 520px;
        width: 81.25%;
    }
    a.modalTel {
        position: absolute;
        bottom: 12.4074%;
        right: 0;
        left: 0;
        margin: 0 auto;
        max-width: 560px;
        width: 87.5%;
    }
	a.modalTel2 {
		position: absolute;
		top: 16.4885%;
		right: 0;
		left: 0;
		margin: 0 auto;
		max-width: 560px;
		width: 87.5%;
	}
	.comparison {
	    margin-top: 30px;
	}
	.comparison .left {
	    width: 100%;
	}
	.comparison .right {
	    width: 100%;
	}
	.benefits h4 {
	    padding-bottom: 10px;
	}
	.benefitsCatch {
	    position: inherit;
	    top: inherit;
	    margin-bottom: 30px;
	}
	.benefits ul {
	    width: 90%;
	    margin-right: auto;
	    margin-left: auto;
	    max-width: 480px;
	}
	.benefits ul li {
	    width: 100%;
	    max-width: 480px;
	    float: none;
	}
	.benefits ul li h5 {
	    padding-top: 15px;
	    padding-bottom: 15px;
        font-size: 20px;
	}
	.benefits ul li p {
	    font-size: 12px;
	    line-height: 2;
	}
	.benefits ul li + li {
	    margin-left: auto;
	    margin-top: 30px;
	}
	.telBtn {
		width: 83.4% !important;
	    margin-right: auto;
	    margin-left: auto;
	    max-width: 480px;
	}


	#mainImage {
		margin-bottom: 0;
	}
	#topVideo {
	    padding-top: 0;
	    bottom: 0;
	    height: 500px;
	    height: 100%;
	    vertical-align: middle;
	}
	#topVideo iframe {
	    top: 0;
	    height: 100%;
	}
	#mvBox {
		height: inherit;
	    background-size: cover;
        margin-bottom: 0;
	}
		#mvSliderSP {
			width: 100%;
			height: 500px;
			position: relative;
			overflow: hidden;
			background: url(../../img/renew/slide-sp1.jpg) no-repeat center;
			background-size: cover;
		}

		#slide1-sp {
			background:url(../../img/renew/slide-sp1.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide2-sp {
			background:url(../../img/renew/slide-sp2.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide3-sp {
			background:url(../../img/renew/slide-sp3.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide4-sp {
			background:url(../../img/renew/slide-sp4.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide5-sp {
			background:url(../../img/renew/slide-sp5.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide6-sp {
			background:url(../../img/renew/slide-sp6.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide7-sp {
			background:url(../../img/renew/slide-sp7.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide8-sp {
			background:url(../../img/renew/slide-sp8.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}
		#slide9-sp {
			background:url(../../img/renew/slide-sp9.jpg) no-repeat center;
			background-size: cover;
			opacity: 0;
		}

		.renewMv-sp img{
			width: 100%;
		}

		#renewBox .sazaby {
			top: 25px;
			right: 0;
			left: 0;
			width: 87.5%;
		}
		#renewBox .catch {
		    width: 100%;
		    right: 0;
		    left: 0;
		    bottom: 5%;
		    margin: auto;
		    max-width: 100%;
		    position: inherit;
		}
			#renewBox .catch h2 {
			    /* padding-bottom: 13px; */
			}
			#renewBox .catch p {
			    font-size: 14px;
				padding-bottom: 25px;
			}
			#mvBox .caption {
			    /*right: 0;
			    left: 0;*/
			    right: 0;
			    left: 0;
			    bottom: 10px;
			    margin: auto;
			    text-align: center;
			}

	.topMerit{
		background: url(../../img/renew/topBg1_sp.jpg) no-repeat center;
		background-size: cover;
	}
	.topKokuchi{
		background: url(../../img/renew/topBg2_sp.jpg) no-repeat center;
		background-size: cover;
	}

	.koudouBox {
	    width: 100%;
	    max-width: 640px;
	    margin-bottom: 50px;
	}

	.CPNbnr {
		width: 93.75%;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
	}
		.koudouBox .right {
		    width: 100%;
		    max-width: inherit;
		    float: none;
		    margin-right: auto;
		}

	.koudouBox .koudou {
	    float: none;
        width: 87.5%;
	    max-width: 560px;
	    padding-top: 0;
	    margin-right: auto;
		margin-left: auto;
	    margin-top: 0;
	}
		.koudouBox .koudou p {
			font-size: 11px;
		    margin-top: 13px;
		}

		.koudouBox .koudou h3 {
			padding: 30px 0;
		}
			.koudouBox .koudou ul.koudouBtn{
				width: 100%;
				max-width: 240px;
				margin-left: auto;
				margin-right: auto;
			}
				.koudouBox .koudou ul.koudouBtn li{
					float: none;
					width: 100%;
				}
				.koudouBox .koudou ul.koudouBtn li:nth-child(2){
					float: none;
					margin-top: 10px;
				}

	section.topUnderPanel{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
		section.topUnderPanel ul li{
			float: left;
			width: 50%;
		}


	.catTtl {
	    font-size: 27px;
	    padding-bottom: 15px;
	    padding-top: 40px;
	    text-align: center !important;
	}
	.catTxt {
	    font-size: 14px;
	}
	.catLink a.animated-button.thar-three {
	    margin: auto;
	}
	a.animated-button.thar-three:before {
		display: none;
	}
	a.animated-button.thar-three:hover {
		color: #fff !important;
	}
	.black a.animated-button.thar-three:hover {
		color: #000 !important;
	}
	a.animated-button.thar-three.gold {
		margin-left: auto;
	}


	.masterPlan {
	    margin-bottom: 100px;
	    padding-bottom: 0;
	}
		.masterPlan .left {
		    width: 100%;
		    max-width: 560px;
		    float: none;
		    margin-right: auto;
		    margin-left: auto;
		}
			#animeBox2,
			#animeBox3,
			#animeBoxTsuika1 {
			    margin-top: 0;
		        width: 92.858%;
			    max-width: 260px;
			    float: none;
			    margin-right: auto;
			    margin-left: auto;
			}
			#animeBoxTsuika1 {
				margin-top: 20px;
			}

	.masterPlan .right {
	    width: 100%;
	    max-width: inherit;
	    float: none;
	    margin-left: auto;
	    margin-right: auto;
	    opacity: 0;
	    margin-top: 0;
	}

	/*.animeBox {
		border: 1px solid #c1c1c1;
	}*/

	#animeBox4 {
	    margin-top: 0;
	    width: 100%;
	    max-width: inherit;
	    float: none;
	}

	.roofBalcony {
		background:#333333;
	    padding-top: 0;
	    padding-bottom: 60px;
        margin-bottom: 60px;
	}

	.lines-on-sides:before,
	.lines-on-sides:after {
		display:none;
	}

	.model {
		margin-bottom: 80px;
	}
		.model .left {
		    width: 100%;
		    max-width: 560px;
		    float: none;
		    margin-right: auto;
		    margin-left: auto;
		}
		.model .right {
		    width: 100%;
		    max-width: 560px;
		    float: none;
		    margin-left: auto;
		    margin-right: auto;
		    margin-top: 0;
		}
			.model .lines-on-sides {
			    width: 100%;
			    margin-left: auto;
			}

	.plan {
		margin-bottom: 80px;
	}
		.plan .left {
		    width: 100%;
		    max-width: 560px;
		    float: none;
		    margin-right: auto;
		    margin-left: auto;
		}
		.plan .right {
		    width: 100%;
		    max-width: 560px;
		    float: none;
		    margin-right: auto;
	        margin-top: 0;
		}
			.plan .lines-on-sides {
			    width: 100%;
			    margin-right: auto;
			    text-align: center !important;
			}

	.equipment {
		padding-bottom: 80px;
	}
		.equipment .left {
		    width: 100%;
		    max-width: 560px;
		    float: none;
		    margin-right: auto;
		    margin-left: auto;
		}
		.equipment .left .caption {
			opacity: 1 !important;
		}
		.equipment .right {
		    width: 100%;
		    max-width: 560px;
		    float: none;
		    margin-left: auto;
		    margin-right: auto;
	        margin-top: 0;
		}
			.equipment .lines-on-sides {
			    width: 100%;
			    margin-left: auto;
			}


	.twoCalumBnr p {
	    width: 100%;
	    float: none;
	    margin-right: auto;
	    margin-left: auto;
	}
	.twoCalumBnr p + p {
	    width: 100%;
	    max-width: 240px;
	    float: none;
	    margin-top: 20px;
	}

	#otherLinks {
	    /*padding-top: 50px;*/
	    padding-bottom: 50px;
	}
		#otherLinks ul li {
		    width: 100%;
		    max-width: 560px;
		    float: none;
		    margin-right: auto;
		    margin-left: auto;
	        margin-bottom: 0;
		}
		#otherLinks ul li + li {
		    margin-left: auto;
		    margin-top: 30px;
		}
		#otherLinks #modelroom{
			margin-bottom: 40px;
			padding: 40px 0;
		}
		#modelroom .tips h4 {
			font-size: 20px;
			margin-bottom: 10px;
		}
		#modelroom .tips p {
			font-size: 14px;
		}
}





.animated {
	/* animation-duration: 1s; */
	/* animation-fill-mode: both; */
}
.animated.infinite {
	animation-iteration-count: infinite;
}
.slide1-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
}
.slide2-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:5s;
}
.slide3-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:10s;
}
.slide4-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:15s;
}
.slide5-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:20s;
}
.slide6-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:25s;
}
.slide7-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:30s;
}
.slide8-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:35s;
}


.slide1-sp-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
}
.slide2-sp-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:5s;
}
.slide3-sp-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:10s;
}
.slide4-sp-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:15s;
}
.slide5-sp-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:20s;
}
.slide6-sp-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:25s;
}
.slide7-sp-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:30s;
}
.slide8-sp-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:35s;
}
.slide9-sp-animated {
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-delay:40s;
}



@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  /* animation-name: fadeIn; */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}


@keyframes first-slideFade {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);  
    -moz-transform: scale(1); 
    transform: rotate(0deg) scale(1);
  }
  20% {
  	opacity: 1;
  }
  80% {
  	opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.1);  
    -moz-transform: scale(1.1); 
    transform: rotate(1deg) scale(1.1);
  }
}
.first-slideFade {
  animation-name: first-slideFade;
}

@keyframes slideFade {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);  
    -moz-transform: scale(1); 
    transform: scale(1);
    transform: rotate(0deg) scale(1);
  }
  20% {
  	opacity: 1;
  }
  80% {
  	opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.1);  
    -moz-transform: scale(1.1); 
    transform: rotate(1deg) scale(1.1);
  }
}

.slideFade {
  animation-name: slideFade;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform:translate3d(0, 0, 0);
  }
  20% {
    opacity: 1;
  }
   80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:translate3d(0, -20%, 0);
  }
}

.slideUp {
  animation-name: slideUp;
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform:translate3d(0, -20%, 0);
  }
  20% {
    opacity: 1;
  }
   80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:translate3d(0, 0, 0);
  }
}

.slideDown {
  animation-name: slideDown;
}