@charset "UTF-8";


#top .cvFixed.active {
    bottom: 30px;
}
@media screen and ( max-width:768px ) {
	#top .cvFixed.active {
		bottom: 0;
	}
}

/******************************************************
 MainVisual
******************************************************/
#top #mainVisual {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
#top #mainVisual .mv_inner {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
}
@media screen and (max-width:768px){
	#top #mainVisual {
		height: 85vh;
		min-height: 640px;
	}
}

/* Movie */
#top .mvMovie {
	position: absolute;
	inset: 0;
	z-index: 2;
	transition: opacity .6s ease;
}
#top .mvMovie.hide {
	opacity: 0;
	pointer-events: none;
}
#top .mvVideo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* display: block; */
}

#top .mvFix {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease;
}
#top .mvFix.show {
	opacity: 1;
	visibility: visible;
}

/* Main Photo */
#top .mvPhoto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
#top .mvPhoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Logo */
#top .mvLogo {
	position: absolute;
	top: 130px;
	left: 30px;
	z-index: 2;
}
#top .mvLogo img {
	width: 120px;
	height: auto;
}
@media screen and (max-width:768px){
	#top .mvLogo {
		top: 80px;
		left: 20px;
	}
	#top .mvLogo img {
		width: 100px;
	}
}

/* Copy */
#top .mvCpy {
	position: absolute;
	top: 20%;
	left: 0;
	width: 100%;
	z-index: 2;
}
@media screen and (max-width:768px){
	#top .mvCpy {
		top: 25%;
	}
}

/* Movie Button */
#top .mvSkip,
#top .mvReplay {
	position: absolute;
	right: 40px;
	bottom: 40px;
	width: 100px;
	height: 42px;
	border: 1px solid rgba(255,255,255,.8);
	background: rgba(0,0,0,.35);
	color: #fff;
	font-size: 13px;
	font-family: "Montserrat", sans-serif;
	letter-spacing: .15em;
	cursor: pointer;
	transition: .3s;
	z-index: 10;
}
#top .mvSkip:hover,
#top .mvReplay:hover {
	background: #fff;
	color: #000;
}

/* Replay */
#top .mvReplay {
	display: none;
}
@media screen and (max-width:768px){
	#top .mvSkip,
	#top .mvReplay {
		right: 20px;
		bottom: 35px;
		width: 82px;
		height: 38px;
		font-size: 12px;
	}
}




/******************************************************
 catchphrase
******************************************************/
#top .catchphraseCtnr {
	width: 100%;
	background: url(/content/dam/31sumai/mfr/B2319/img/common/bgTxtrClor.jpg) center top / cover no-repeat;
	background-color: linear-gradient(to right, #cea24c 0%, #78623a 100%);
	padding: 50px 20px;
}
#top .catchphraseCtnr .catchInner {
	max-width: 1200px;
	margin: 0 auto;
}
#top .catchphraseCtnr .catchphrase {
	text-align: center;
	margin: 0 auto 40px;
}
#top .catchphraseCtnr .bnrCtnr {
	display: flex;
}
#top .catchphraseCtnr .bnrCtnr .row {
	max-width: 580px;
}
#top .catchphraseCtnr .bnrCtnr .row:first-child {
	margin-right: 40px;
}
@media screen and ( max-width:768px ) {
	#top .catchphraseCtnr {
		padding: 40px 0px;
	}
	#top .catchphraseCtnr .catchInner {
		width: 92%;
		max-width: auto;
	}
	#top .catchphraseCtnr .bnrCtnr {
		display: block;
	}
	#top .catchphraseCtnr .bnrCtnr .row {
		max-width: 100%;
	}
	#top .catchphraseCtnr .bnrCtnr .row:first-child {
		margin-right: 0;
		margin-bottom: 20px;
	}
}



/******************************************************
 SellingPoint
******************************************************/
#top .pointBelt {
	width: 100%;
	background-color: rgba(69,64,63,1.00);
	padding: 50px 0 40px;
}
#top .pointBeltInner {
	max-width: 1200px;
	margin: 0 auto;
}
@media screen and (max-width:768px){
	#top .pointBelt {
		padding: 30px 0;
	}
	#top .pointBeltInner {
		width: 92%;
	}
	#top .pointList {
		display:none;
	}
	#top .pointNote{
		width: 100%;
		max-width: auto;
		font-size: 2.4vw;
	}
}



/******************************************************
 Title
******************************************************/
#top .contentsTtl {
	width: 100%;
	font-size: 22px;
	font-family: "Zingha Pro", "Sharoa Pro", "Garamond", "Georgia", "Palatino Linotype", serif;
	font-weight: normal;
	line-height: 1em;
	text-align: center;
	color: #45403f;
	letter-spacing: 0.2em;
}
}@media screen and (max-width: 768px){
	#top .contentsTtl {
		font-size: 5.4vw;
		margin-bottom: 20px;
	}
}





/******************************************************
 Information
******************************************************/
#top #information {
	width: 100%;
	background: rgba(244,243,237,1) url("/content/dam/31sumai/mfr/B2319/img/common/bgTxtrWht.jpg") center top / cover no-repeat fixed;
	padding: 100px 0 120px;
}
#top #information .infoInner {
	width: 1000px;
	margin: 0 auto;
}
#top #information .contentsTtl {
	margin-bottom: 50px;
}
#top #information .cta {
    font-size: 28px;
    line-height: 1em;
    text-align: center;
    color: #a38860;
	letter-spacing: 0.1em;
	margin-bottom: 60px;
}
#top #information .infoCtnr {
    font-size: 16px;
	text-align: justify;
}
@media screen and (max-width: 768px){
	#top #information {
		width: 100%;
		margin: 0 auto;
		padding: 70px 0;
	}
	#top #information .infoInner {
		width: 90%;
	}
	#top #information .contentsTtl {
		margin-bottom: 30px;
	}
	#top #information .cta {
		font-size: 6vw;
		line-height: 1.4em;
		margin-bottom: 40px;
	}
	#top #information .infoCtnr {
		font-size: 3.5vw;
	}
}



/******************************************************
 TOP Contents BackGround
******************************************************/
#top .cntsBgCtnr {
	width: 100%;
	background: url(/content/dam/31sumai/mfr/B2319/img/common/bgTxtrClor.jpg) center top / cover no-repeat fixed;
	background-color: linear-gradient(to right, #cea24c 0%, #78623a 100%);
	padding: 60px 0 50px;
}
#top .cntsBgCtnr .contentsTtl {
	color: #fff;
	margin-bottom: 50px;
}
@media screen and (max-width: 768px){
	#top .cntsBgCtnr {
		padding: 40px 0 20px;
	}
	#top .cntsBgCtnr .contentsTtl {
		margin-bottom: 30px;
	}
}




/******************************************************
 Image GALLERY
******************************************************/
#gallery {
    position: relative;
	width: 100%;
	text-align: center;
	padding: 0 0 50px;
	z-index: 50;
}
@media screen and ( max-width:768px ) {
	#gallery {
		padding: 0 0 30px;
	}
}

/* Gallery Base */
.galleryArea {
	padding: 0;
}
.gallerySwiper {
	width: 100%;
	height: auto;
	position: relative;
	max-width: none;
}
.gallerySwiper .swiper-wrapper {
    height: auto;
}
.gallerySwiper .swiper-slide {
    height: auto;
}

/* Slide Image */
.gallerySwiper img {
	width: 100%;
	height: auto;
	display: block;
}

/* Non Active Slide / アクティブ以外の画像を薄くする */
.gallerySwiper .swiper-slide {
	position: relative;
	width: 600px;
	opacity: .35;
	transition: opacity .4s ease;
}
.gallerySwiper .swiper-slide-active {
	opacity: 1;
}
.galleryCaption {
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0;
	color: #fff;
	text-shadow: 0 0 6px rgba(0,0,0,.8);
	background: rgba(0,0,0,.20);
	padding: 4px 8px;
	z-index: 10;
}
@media screen and ( max-width:768px ) {
	.galleryCaption {
		font-size: 2.4vw;
	}
}


/* Arrow Base */
.galleryPrev,
.galleryNext {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	cursor: pointer;
	transition: opacity .3s ease;
}
.galleryPrev:hover,
.galleryNext:hover {
	opacity: .6;
}

/* Arrow Position / PC時は画像外へ配置 */
.galleryPrev {left: 40px;}
.galleryNext {right: 40px;}
.galleryPrev,
.galleryNext {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 43%;
	transform: translateY(-50%);
	z-index: 50;
	cursor: pointer;
	background: rgba(255,255,255,.7);
	border-radius: 50%;
}

/* Arrow Shape */
.galleryPrev::after,
.galleryNext::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 12px solid rgba(69,64,63,1.00);
}
/* 左矢印 */
.galleryPrev::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* 右矢印 */
.galleryNext::after {
	transform: translate(-50%, -50%) rotate(-90deg);
}


/* Pagination Base */
.galleryPagination {
	margin-top: 40px;
	text-align: center;
}
/* 非アクティブ */
.galleryPagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	border-radius: 0;
	background: #fff;
	opacity: 1;
	margin: 0 6px;
}
/* アクティブ */
.galleryPagination .swiper-pagination-bullet-active {background: #222;}


/******************************************************
 IMAGE GALLERY SP
******************************************************/
@media screen and (max-width:768px) {
	.galleryArea {
		padding: 0;
	}
	.gallerySwiper {
		width: calc(100% - 0px);
	}
	/* 矢印は画像内へ戻す */
	.galleryPrev {
		left: 10px;
	}
	.galleryNext {
		right: 10px;
	}
	.galleryPrev,
	.galleryNext {
		width: 40px;
		height: 40px;
	}
	.galleryPrev::after,
	.galleryNext::after {
		width: 12px;
		height: 12px;
	}
	.galleryPagination {
		margin-top: 25px;
	}
	.galleryPagination .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
	}
}





/******************************************************
 CONTENTS block
******************************************************/
/* #top #contents {
	margin-bottom: 100px;
} */
#top .contentsRow {
	display: flex;
	margin-bottom: 30px;
}
#top .contentsPanel {
	position: relative;
	width: 33.333%;
	height: 400px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#top .planPanel {
	background-image:url("/content/dam/31sumai/mfr/B2319/img/top/tpCntsImgPlan.jpg");
}
#top .designPanel {
	background-image:url("/content/dam/31sumai/mfr/B2319/img/top/tpCntsImgDsn.jpg");
}
#top .wellnessPanel {
	background-image:url("/content/dam/31sumai/mfr/B2319/img/top/tpCntsImgWlns.jpg");
}
#top .contentsInner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	text-align: center;
	color: #fff;
}
#top .contentsInner p {
	font-size: 30px;
	font-family: "Zingha Pro", "Sharoa Pro", "Garamond", "Georgia", "Palatino Linotype", serif;
	font-weight: normal;
	line-height: 1;
	letter-spacing: .08em;
	margin-bottom: 18px;
}
#top .contentsInner h3 {
	font-size: 16px;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 45px;
}
#top .contentsPanel .imgCaption,
#top .contentsPanel .imgCaption000 {
    left: 0;
    text-align: left;
    padding: 0 0 10px 10px;
}
@media screen and (max-width:768px){
	#top #contents {
		margin-bottom: 10px;
	}
	#top .contentsRow {
		display: block;
		margin-bottom: 0;
	}
	#top .contentsPanel {
		width: 100%;
		height: 72vw;
	}
	#top .contentsInner p {
		font-size: 7.5vw;
	}
	#top .contentsInner h3 {
		font-size: 4vw;
		margin-bottom: 30px;
	}
}


/* FineCourt block */
#top .fcRow {
	display:flex;
	align-items:stretch;
	margin-bottom: 40px;
}

/* 右 =*/
#top .fcInfo {
	width: 50%;
	background: #ededee;
	display: flex;
	align-items: center;
	justify-content: center;
}
#top .fcInfoInner {
	width: 90%;
	text-align: center;
	padding: 40px;
	box-sizing: border-box;
}
#top .fcLogo {
	margin-bottom: 40px;
}
#top .fcLogo img {
	width: 400px;
	height: auto;
}
#top .fcInfo h3 {
	font-size: 38px;
	font-family: "ヒラギノ角ゴ Std W5", "Hiragino Kaku Gothic Std", "ヒラギノ角ゴ ProN W5", "Hiragino Kaku Gothic ProN", "Yu Gothic", "游ゴシック", sans-serif;
	line-height: 1;
	margin-bottom: 30px;
}
#top .fcLead {
	font-size: 22px;
	line-height: 2;
}

/* 右 =*/
#top .fcImage {
	width: 50%;
	position: relative;
}
#top .fcImage p { 
	margin:0;
}
#top .fcImage img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width:768px){
	#top .fcRow {
		display:block;
		margin-bottom: 30px;
	}
	#top .fcInfo,
	#top .fcImage{
		width: 100%;
	}
	#top .fcInfo {
		padding: 60px 15px 50px;
	}
	#top .fcInfoInner {
		max-width: none;
		padding: 0;
	}
	#top .fcLogo {
		margin-bottom: 30px;
	}
	#top .fcLogo img {
		width: 80%;
	}
	#top .fcInfo h3 {
		font-size: 6.5vw;
		margin-bottom: 28px;
	}
	#top .fcLead {
		font-size: 3.8vw;
		line-height: 1.6;
	}
}


/* ボタン */
#top .btnMore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 220px;
	height: 40px;
	font-family: "Gill Sans", "Gill Sans MT", "Granby", "Cabin", "Ubuntu", sans-serif;
	font-size: 15px;
	letter-spacing: .08em;
	text-decoration: none;
	box-sizing: border-box;
	transition: .3s ease;
}

/* トップCONTENTS専用 */
#top .btnWhite {
	color: #fff;
	border: 1px solid #fff;
	border-radius: 30px;
	background: transparent;
}
#top .btnWhite::before {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: translateY(-50%) rotate(45deg);
	z-index: 2;
}
#top .btnWhite:hover {
	background: rgba(255,255,255,.12);
}
@media screen and (max-width:768px){
	#top .btnMore {
		width: 220px;
		height: 38px;
		font-size: 4vw;
	}
	#top .btnWhite::after {
		width: 38px;
		height: 38px;
	}
}




/******************************************************
 bels
******************************************************/
#top #bels {
	padding: 70px 0 0;
}
#top #bels .inner {
	width: 600px;
	text-align: center;
    margin: 0 auto;
}
#top #bels .txt {
    font-size: 11px;
	text-align: center;
	letter-spacing: 0;
	margin-top: 15px;
}
@media screen and ( max-width:768px ) {
	#top #bels {
		padding: 0;
	}
	#top #bels .inner {
		width: 70%;
	}
	#top #bels .txt {
		font-size: 2.4vw;
		text-align: justify;
	}
}