@charset "UTF-8";
/* CSS Document */



/****************************************************************************************************
wrap
****************************************************************************************************/
#wrap {
	overflow: hidden;
}
/*#contents {
	padding-top: 66.666vw;
	overflow: hidden;
}*/
#cont {
	position: relative;
	z-index: 30;
}



/****************************************************************************************************
main
****************************************************************************************************/
#main {
	/*position: fixed;*/
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 0;
}
#main img {
	width: 100%;
	height: auto;
}
#main .exterior {
	position: absolute;
	left: 10px;
	bottom: -6.83vw;
	width: 16.666vw;
}
#main .exterior figure {
	position: relative;
}
#main .exterior figure figcaption {
	position: absolute;
	color: #111;
	font-size: 0.8rem;
	bottom: 5vw;
}
#main .price {
	position: absolute;
	right: 10px;
	bottom: 0;
	width: 40.222vw;
}



/****************************************************************************************************
info
****************************************************************************************************/
#info {
	position: relative;
	width: 100%;
	margin-top: 20px;
	padding: 0 0 150px 0;
	color: #111;
}
#info1 div {
	font-size: 1.466rem;
	line-height: 1.4;
}
#info1 h2 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	white-space: nowrap;
	
	margin-top: 0.1em;
	font-size: 2.666rem;
	line-height: 1.4;
}
#info1 h2 .small {
	font-size: 1.6rem;
}
#info1 h3 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	white-space: nowrap;
	
	margin-top: 0;
	color: #92003D;
	font-size: 6.666rem;
	font-weight: normal;
	line-height: 1.4;
}
#info1 h3 a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	white-space: nowrap;
	color: #92003D;
}
#info1 h3 .vertical {
	font-size: 1.8rem;
	-ms-writing-mode: tb-lr;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
}
#info1 h3 .small {
	margin-left: 0.2em;
	font-size: 3.8rem;
}
#info1 p {
	margin-top: 0.5em;
	font-size: 1.333rem;
	line-height: 1.6;
}
#info .point {
	margin: 1.5em 0;
}
#info .point + .info-btn {
	margin-top: 3em;
}



/****************************************************************************************************
mg
****************************************************************************************************/
.information {
	position: relative;
	width: 1200px;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 40px;
	z-index: 30;
}
.information h3 {
	padding: 1.2em;
	background: #A08E58;
	color: #FFF;
	font-size: 1.266rem;
	line-height: 1.8;
}
.information div {
	padding: 1.2em;
	background: rgba(255,255,255,.9);
	border: 1px solid #CCCCCC;
	color: #111;
	font-size: 1.266rem;
	line-height: 1.8;
}



/****************************************************************************************************
concept
****************************************************************************************************/
#concept {
	position: relative;
}
#well-being-bg {
	position: absolute;
	width: 100%;
}
#well-being-bg.fixed {
	position: fixed;
	left: 0;
	top: 0;
}
#well-being-bg.off {
	display: none;
}
#well-being-bg-img {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#well-being-bg-img > figure {
	width: 20%;
	height: 33.333vh;
}
#well-being-bg-img > figure img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#concept .cap {
	position: absolute;
	right: 1em;
	bottom: 1em;
	font-size: 0.866rem;
}
#well-being-txt {
	position: relative;
	display: inline-block;
	margin-top: 90vh;
	margin-bottom: 100px;
	padding: 100px 60px;
	background: rgba(255,255,255,.95);
	box-shadow: 0 0 10px rgba(0,0,0,.15);
}
#concept h3 {
	color: #A08E58;
	font-size: 3.066rem;
	line-height: 2.0;
}
#concept p {
	font-size: 1.333rem;
	line-height: 2.0;
}
#concept h3 + p {
	margin-top: 1.0em;
}
#concept p + p {
	margin-top: 2.0em;
}
.movie-block {
	width: 600px;
	margin: auto;
	margin-top: 2.0em;
}
.movie-block a {
	display: block;
}
.movie-block a img {
}
.movie-block a span {
	display: block;
	margin-top: 1em;
}



/****************************************************************************************************
index
****************************************************************************************************/
#index {
	position: relative;
	background: #EFEEEC;
}
.index-block {
	border-top: 1px solid rgba(197,186,120,.35);
}
.index-block a {
	display: block;
	position: relative;
}
.index-block figure::before {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-image: linear-gradient(90deg, rgba(240,240,238,1), rgba(240,240,238,0));
	/*opacity: 1;
	mix-blend-mode: screen;*/
	z-index: 0;
}
.index-block figure {
	position: relative;
}
.index-block figure img {
	object-fit: cover;
	width: 100%;
	height: 700px;
}
.index-block figure figcaption {
	position: absolute;
	left: 1em;
	bottom: 0.6em;
	color: #111;
	font-size: 0.866rem;
	line-height: 1.4;
	text-shadow:
		0px 0px 10px rgba(240,240,238,1),
		0px 0px 10px rgba(240,240,238,1);
}
.index-block .text-box {
	position: absolute;
	left: 60px;
	top: 80px;
	text-align: left;
	text-shadow:
		0px 0px 15px rgba(240,240,238,1),
		0px 0px 15px rgba(240,240,238,1),
		0px 0px 15px rgba(240,240,238,1);
}
.index-block .text-box .inner {
	position: relative;
}
.index-block .text-box h3 {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 0.6rem;
	color: #92003D;
	font-size: 6.666rem;
	line-height: 1.0;
	z-index: 10;
}
.index-block .text-box h3 span {
	position: relative;
	margin: 0 1em;
	padding: 0 0.7em;
	font-size: 2.133rem;
	font-weight: normal;
}
.index-block .text-box h3 span::before,
.index-block .text-box h3 span::after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	top: -0.7em;
	left: 0;
	background: rgba(146,0,61,.5);
}
.index-block .text-box h3 span::after {
	top: auto;
	bottom: -0.7em;
}
.index-block .text-box p {
	color: #111;
	font-size: 3.066rem;
	line-height: 1.6;
}
.index-block .text-box p.more {
	color: #92003D;
	font-size: 1.6rem;
}

#landplan.index-block figure::before,
#access.index-block figure::before,
#location.index-block figure::before,
#modelroom.index-block figure::before {
	right: 0;
	background-image: linear-gradient(90deg, rgba(240,240,238,0), rgba(240,240,238,1));
}
#landplan.index-block figure figcaption,
#access.index-block figure figcaption,
#location.index-block figure figcaption,
#modelroom.index-block figure figcaption {
	left: auto;
	right: 1em;
}
#landplan.index-block .text-box,
#access.index-block .text-box,
#modelroom.index-block .text-box {
	left: auto;
	right: 60px;
	text-align: right;
}
#landplan.index-block .text-box h3 strong,
#access.index-block .text-box h3 strong,
#location.index-block .text-box h3 strong,
#modelroom.index-block .text-box h3 strong {
	-webkit-box-ordinal-group:2;
    -webkit-order:1;
    -ms-flex-order:1;
    order:1;
}
#landplan.index-block .text-box h3 span,
#access.index-block .text-box h3 span,
#location.index-block .text-box h3 span,
#modelroom.index-block .text-box h3 span {
	-webkit-box-ordinal-group:1;
    -webkit-order:0;
    -ms-flex-order:0;
    order:0;
}
#landplan.index-block figure img {
	object-position: 5% 50%;
}
#town-guide.index-block figure::before {
	width: 100%;
}




@media screen and (max-width: 767px),
screen and (max-width: 960px) and (orientation: landscape) {
	
	
	
	/****************************************************************************************************
	wrap
	****************************************************************************************************/
	/*#contents {
		padding-top: 153vw;
	}*/
	
	
	
	/****************************************************************************************************
	main
	****************************************************************************************************/
	#main img {
	}
	#main .exterior {
		left: 2.5vw;
		bottom: -6.5vw;
		width: 21vw;
	}
	#main .exterior figure figcaption {
		font-size: 0.533rem;
		bottom: 4.6vw;
	}
	#main .price {
		right: 1vw;
		bottom: 0;
		width: 72vw;
	}

	
	
	/****************************************************************************************************
	info
	****************************************************************************************************/
	#info {
		margin: 0;
		padding: 4vw 4vw 10vw 4vw;
	}
	#info1 div {
		font-size: 0.8rem;
	}
	#info1 h2 {
		font-size: 1.4rem;
	}
	#info1 h2 .small {
		font-size: 0.666rem;
	}
	#info1 h3 {
		margin-top: 0.15em;
		font-size: 2.666rem;
	}
	#info1 h3 .small {
		display: block;
		margin-left: 0;
		font-size: 1.8rem;
		vertical-align: auto;
	}
	#info1 h3 a {
		display: block;
	}
	#info1 p {
		margin-top: 0.8em;
		font-size: 0.8rem;
		line-height: 1.8;
	}
	#info .point {
		margin: 1.5em 0;
	}
	#info .point + .info-btn {
		margin-top: 1em;
	}
	
	
	
	/****************************************************************************************************
	mg
	****************************************************************************************************/
	.information {
		width: 100%;
		margin-top: 5vw;
		margin-bottom: 5vw;
	}
	.information h3 {
		font-size: 0.933rem;
	}
	.information div {
		font-size: 0.933rem;
	}
	
	
	
	/****************************************************************************************************
	concept
	****************************************************************************************************/
	#concept {
	}
	#well-being-bg-img > figure {
		width: 33.333%;
		height: 20vh;
	}
	#concept .cap {
		font-size: 0.666rem;
	}
	#well-being-txt {
		width: 92vw;
		margin-bottom: 10vw;
		padding: 10vw 5vw;
	}
	#concept h3 {
		font-size: 2rem;
	}
	#concept p {
		font-size: 0.866rem;
	}
	#concept p + p {
		margin-top: 2.0em;
	}
	.movie-block {
		width: 80vw;
		margin: auto;
		margin-top: 2.0em;
	}
	.movie-block a {
		display: block;
	}
	.movie-block a img {
	}
	.movie-block a span {
		display: block;
		margin-top: 1em;
	}
	
	
	
	/****************************************************************************************************
	index
	****************************************************************************************************/
	#index {
	}
	.index-block figure::before {
		display: none;
	}
	.index-block figure img {
		object-fit: cover;
		width: 100%;
		height: 50vw;
	}
	.index-block figure figcaption {
		font-size: 0.533rem;
		color: #FFF;
		font-weight: bold;
		text-shadow:
			0px 0px 10px rgba(0,0,0,1),
			0px 0px 10px rgba(0,0,0,1);
	}
	.index-block .text-box {
		position: static;
		padding: 1.2rem;
	}
	.index-block .text-box h3 {
		margin-bottom: 0.5rem;
		font-size: 2.0rem;
	}
	.index-block .text-box h3 span {
		margin: 0 0.7em;
		padding: 0 0.7em;
		font-size: 1.2rem;
	}
	.index-block .text-box h3 span::before,
	.index-block .text-box h3 span::after {
		top: -0.4em;
	}
	.index-block .text-box h3 span::after {
		top: auto;
		bottom: -0.4em;
	}
	.index-block .text-box p {
		font-size: 1.733rem;
	}
	.index-block .text-box p.more {
		font-size: 1.2rem;
	}
	
	#landplan.index-block .text-box,
	#access.index-block .text-box,
	#location.index-block .text-box,
	#modelroom.index-block .text-box {
		text-align: left;
	}
	#landplan.index-block .text-box h3 strong,
	#access.index-block .text-box h3 strong,
	#location.index-block .text-box h3 strong,
	#modelroom.index-block .text-box h3 strong {
		-webkit-box-ordinal-group:1;
		-webkit-order:0;
		-ms-flex-order:0;
		order:0;
	}
	#landplan.index-block .text-box h3 span,
	#access.index-block .text-box h3 span,
	#location.index-block .text-box h3 span,
	#modelroom.index-block .text-box h3 span {
		-webkit-box-ordinal-group:2;
		-webkit-order:1;
		-ms-flex-order:1;
		order:1;
	}
}

@media screen and (max-width: 960px) and (orientation: landscape) {
	
	
	
	/****************************************************************************************************
	main
	****************************************************************************************************/
	#main img {
	}
}