@charset "UTF-8";


#top .cvFixed {
    position: fixed;
    right: 0;
    bottom: 20px;
	width: 500px;
    z-index: 998;
}
@media screen and ( max-width:768px ) {
	#top .cv-button a {
		padding: 18px 15px;
	}
	#top .cvFixed {
		width: 100%;
		bottom: 0;
	}
}

#top .imgCaption,
#top .imgCaption000 {
    left: 0;
    text-align: left;
    padding: 5px 5px 8px 5px;
}
@media screen and ( max-width:768px ) {
	#top .imgCaption,
	#top .imgCaption000 {
		top: 65px;
		padding: 0 0 0 10px;
	}
}



/******************************************************
 MainVisual
******************************************************/
#top #mainVisual {
	width: 100%;
	height: 100vh;
}
#top #mainVisual .mv_inner {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}
#top #mainVisual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}




/******************************************************
 Information
******************************************************/
/* Swiper Information */
.topSwiper .infoCenter {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.topSwiper .infoCenter #information {
	padding: 0;
}
@media screen and (max-width: 768px) {
	.topSwiper .infoCenter {
		height: 75vh;
	}
}

#information {
	width: 100%;
	margin: 0 auto;
    padding: 80px 0;
}
#information .cta {
    font-size: 36px;
    line-height: 1em;
    text-align: center;
    color: #90644f;
	letter-spacing: 0.2em;
	margin-bottom: 20px;
}
#information .ctaSub {
    font-size: 18px;
    line-height: 1.5em;
    text-align: center;
	letter-spacing: 0.1em;
	margin-bottom: 70px;
}
#information .infoTtl {
    font-size: 30px;
    line-height: 1em;
    text-align: center;
	font-family: "Cormorant Garamond", serif;
	font-weight: 400;
	letter-spacing: .08em;
    margin-bottom: 60px;
    position: relative;
}
#information .infoTtl:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 50px;
    margin-left: -25px;
	border-bottom: 1px solid #3e3a39;
}
#information .infoCtnr {
	width: 1000px;
    font-size: 16px;
	text-align: justify;
	background-color: #eeeae4;
    margin: 0 auto;
	padding: 30px;
}
@media screen and (max-width: 768px){
	#information {
		width: 90%;
		margin: 0 auto;
		padding: 120px 0 0;
	}
	#information .cta {
		font-size: 6.5vw;
		line-height: 1.4em;
	}
	#information .ctaSub {
		font-size: 3vw;
		line-height: 1.2em;
		margin-bottom: 50px;
	}
	#information .infoTtl {
		font-size: 5vw;
		margin-bottom: 40px;
	}
	#information .infoTtl:after {
		bottom: -18px;
	}
	#information .infoCtnr {
		width: 100%;
		font-size: 3vw;
	}
}


/* バナー */
#information .bnrBx {
	max-width: 1000px;
	margin: 0 auto 70px;
}
@media screen and (max-width: 768px){
	#information .bnrBx {
		max-width: 100%;
		margin: 0 auto 40px;
	}
}



/******************************************************
 Top Swiper
******************************************************/
/* 全体 */
.all-wrap {
	width: 100%;
	position: relative;
}
.topSwiper {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.topSwiper .swiper-wrapper {}
.topSwiper .swiper-slide {
	width: 100%;
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
}

/* ========================================
 SP Touch Exit
======================================== */
.touchExit {
	display: none;
}
@media screen and (max-width:768px){
	.touchExit {
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 47%;
		z-index: 100;
		background: rgba(255,255,255,.0);
	}
}



/******************************************************
 contents panel
******************************************************/
.contentBlock {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* 背景枠 */
.bgWrap {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.bgImage {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	animation: bgZoom 9s ease-in-out infinite alternate;
}
@keyframes bgZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.20);
    }
}

.planningBg {
    background-image:url("/content/dam/31sumai/mfr/X2319/asset/img/top/tpCntsImgPln1.jpg");
}
.locationBg01 .zoomImg {
    background-image:url("/content/dam/31sumai/mfr/X2319/asset/img/top/tpCntsImgLct1.jpg");
}
.locationBg02 .zoomImg {
    background-image:url("/content/dam/31sumai/mfr/X2319/asset/img/top/tpCntsImgLct2.jpg");
}
.residenceBg01 .zoomImg {
    background-image:url("/content/dam/31sumai/mfr/X2319/asset/img/top/tpCntsImgRdc1.jpg");
}
.residenceBg02 .zoomImg {
    background-image:url("/content/dam/31sumai/mfr/X2319/asset/img/top/tpCntsImgRdc2.jpg");
}
@media screen and ( max-width:768px ) {
	.planningBg {
		background-image:url("/content/dam/31sumai/mfr/X2319/asset/img/top/tpCntsImgPln1_sp.jpg");
	}
	.locationBg01 .zoomImg {
		background-image:url("/content/dam/31sumai/mfr/X2319/asset/img/top/tpCntsImgLct1_sp.jpg");
	}
	.locationBg02 .zoomImg {
		background-image:url("/content/dam/31sumai/mfr/X2319/asset/img/top/tpCntsImgLct2_sp.jpg");
	}
	.residenceBg01 .zoomImg {
		background-image:url("/content/dam/31sumai/mfr/X2319/asset/img/top/tpCntsImgRdc1_sp.jpg");
	}
	.residenceBg02 .zoomImg {
		background-image:url("/content/dam/31sumai/mfr/X2319/asset/img/top/tpCntsImgRdc2_sp.jpg");
	}
}


.bgLayer {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}
.zoomImg {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: bgZoom 9s ease-in-out infinite alternate;
}

.locationBg01 {
    opacity: 1;
    animation: locationFade01 9s infinite;
}
.locationBg02 {
    opacity: 0;
    animation: locationFade02 9s infinite;
}
@keyframes locationFade01 {
    0% {opacity: 1;}
    45% {opacity: 1;}
    55% {opacity: 0;}
    95% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes locationFade02 {
    0% {opacity: 0;}
    45% {opacity: 0;}
    55% {opacity: 1;}
    95% {opacity: 1;}
    100% {opacity: 0;}
}

.residenceBg01 {
    opacity: 1;
    animation: residenceFade01 9s infinite;
}
.residenceBg02 {
    opacity: 0;
    animation: residenceFade02 9s infinite;
}
@keyframes residenceFade01 {
    0% {opacity: 1;}
    45% {opacity: 1;}
    55% {opacity: 0;}
    95% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes residenceFade02 {
    0% {opacity: 0;}
    45% {opacity: 0;}
    55% {opacity: 1;}
    95% {opacity: 1;}
    100% {opacity: 0;}
}


/* text */
.contentInner {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}
.contentBox {
    width: 650px;
    position: absolute;
    left: 1%;
    top: 50%;
	opacity: 1;
	transform: translateY(-50%);
    text-align: center;
}
.contentBox img {
	display:block;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:translateZ(0);
	will-change:transform;
}
@media screen and ( max-width:768px ) {
	.contentBox {
		width: 100%;
		top: 40%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
}


/* button */
.contentBtn {
    margin-top: 40px;
}
.contentBtn a {
    display: inline-block;
    min-width: 180px;
    font-size: 16px;
    color: #fff;
    border: 1px solid #fff;
    padding: 15px 20px;
    transition: .3s ease;
}
.contentBtn a:hover {
    background: rgba(255,255,255,.15);
}
@media screen and ( max-width:768px ) {
	.contentBtn {
		margin-top: 20px;
	}
	.contentBtn a {
		min-width: 150px;
		font-size: 14px;
		padding: 10px;
	}
}




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


/* 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;
	right: 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,.40);
	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 #555;
}
/* 左矢印 */
.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: 10px;
	height: 10px;
	border-radius: 0;
	background: #bcbcbc;
	opacity: 1;
	margin: 0 6px;
}

/* アクティブ */
.galleryPagination .swiper-pagination-bullet-active {background: #333;}


/******************************************************
 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;
	}
}





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




/******************************************************
 banner
******************************************************/
.btmBanner {
	width: 90%;
	text-align: center;
    margin: 0 auto;
}