@charset "UTF-8";
@import url("common.css");

/*MV*/
.mv_wrapp img{
	width: 100vw;
	height: auto;
}

/*ーーーーMVのスライダー（swiper）ーーーー*/

.mv_wrapp .swiper {
    padding-bottom: 0;
}


.mv_wrapp .swiper-horizontal>.swiper-pagination-bullets,
.mv_wrapp .swiper-pagination-bullets.swiper-pagination-horizontal,
.mv_wrapp .swiper-pagination-custom,
.mv_wrapp .swiper-pagination-fraction {
    bottom: 0px;
}

.mv_wrapp .swiper-pagination-bullet-active {
    background: #c9ab49;
}

.mv_wrapp .swiper-button-prev,
.mv_wrapp .swiper-button-next {
    left: 10px;
    right: auto;
    width: 30px;
    height: 30px;
    background: #c7f1e2;
    border-radius: 100px;
    color: #fff;
    opacity: 0.7;
	transform: translateY(-50%);
}

.mv_wrapp .swiper-button-next {
    right: 10px;
    left: auto;
}


@media (max-width : 768px) {
	.mv_wrapp .swiper-button-prev,
	.mv_wrapp .swiper-button-next {
	    width: 24px;
	    height: 24px;
	    border-radius: 10px;
	}
	.mv_wrapp .swiper-button-next:after,
	.mv_wrapp .swiper-button-prev:after {
	    font-size:10px;
	}
}

.mv_wrapp .swiper-button-next:after,
.mv_wrapp .swiper-button-prev:after {
    font-size: 18px;
}



/*SNS------------------------------*/
.snswrap{
	background-color:#f6f6f6;
	padding:20px 3%;
}
.snswrap .wrap01{
	display:flex;
	justify-content: center;
	align-items: center;
	margin-bottom:5px;
}
.snswrap .wrap01 img{
	width:auto;
	height:35px;
	margin:0 10px;
}
.snswrap p{
	text-align:center;
}
@media(min-width:640px){
	.snswrap .wrap01 img{
		height:70px;
		margin:0;
		margin-right:clamp(15px , 4vw , 40px);
	}
	.snswrap p{
		font-size:clamp(20px,2vw,25px);
	}
}
@media(min-width:1000px){
	.snswrap{
		display:flex;
		justify-content: center;
		align-items: center;
		padding:30px 0;
	}
	.snswrap .wrap01{
		margin-bottom:0;
	}
}



/*Concept------------------------------*/
.conceptWrap{
	width:100%;
	background-image: url(../image/top/concept_bg_sp01.png);
	background-size:100% auto;
	background-position: top left;
	background-repeat: no-repeat;
	padding:30px 0;
}
@media(min-width:768px){
	.conceptWrap{
		background-image: url(../image/top/concept_bg_pc01.png);
	}
}

.conceptWrap .imgwrap{}
.conceptWrap .img01{
	margin-bottom:30px;
}
.conceptWrap .img02{}
.conceptWrap .img02 p{
	margin-bottom:30px;
}
@media(min-width:768px){
	.conceptWrap .imgwrap{
		display:flex;
		justify-content: space-between;
		align-items: flex-start;
		max-width:1263px;
		margin-left:auto;
		margin-right:auto;
	}
	.conceptWrap .img01{
		width:calc(630% / 12.63);
	}
	.conceptWrap .img02{
		width:calc(600% / 12.63);
	}
}
/*自動スクロール+swiper*/
.conceptWrap .img03{
	width:100%;
	margin-top:40px;
	position: relative;
}
.conceptWrap .img03 img{
	height:15vw;
}
.conceptWrap .img03 .swiper-wrapper{
	transition-timing-function: linear;
}

@media(min-width:768px){
	.conceptWrap .img03 img{
		max-height:190px;
	}
}


/*Movie------------------------------*/
#video {
	width:100%;
	height:56.25vw;
}
/**/

/*Location ------------------------------*/
.locationWrap{
	width:100%;
	background-color:#f4f4f4;
	background-image: url(../image/top/location_bg01.png);
	background-size:90% auto;
	background-position: bottom center;
	background-repeat: no-repeat;
	padding:30px 0;
}
.locationWrap.planning{
	background-color:#fff;
	background-image:none;
	padding:30px 0;
}

.locationWrap .wrap01{}
.locSwiper{
	width:80%;
	height:80vw;
	aspect-ratio:1 !important;
	margin:0 auto 20px;
	position: relative;
}
.locationWrap .wrap02{
	width:90%;
	margin:0 auto;
}
.locationWrap .wrap02 .cTtl01{
	margin-bottom:30px;
}
.locationWrap .wrap02 .cTtl01 img{
	margin-right:10%;
}
.locationWrap.planning .wrap02 .cTtl01 img{
	margin-right:0;
}
.locationWrap .wrap02 .cCopy02{
	margin-bottom:20px;
}
.locationWrap .wrap02 .txt20r{
	margin-bottom:10px;
}

.locationWrap.planning .cBtn01{
	background-color:#c7f1e2;
	color:#333;
}
.locationWrap.planning .cBtn01:hover{
	background-color:#000;
	color:#fff;
}
/*
.locSwiper .swiper-slide-active:nth-of-type(2n)>div{
	transform:rotate(3deg);
}
.locSwiper .swiper-slide-active:nth-of-type(2n+1)>div{
	transform:rotate(-3deg);
}*/

.swiper-slide.loc_sw01>div{
background: url("../image/top/location_img01.png") center center / cover no-repeat;
}
.swiper-slide.loc_sw02>div{
background: url("../image/top/location_img02.png") center center / cover no-repeat;
}
.swiper-slide.loc_sw03>div{
background: url("../image/top/location_img03.png") center center / cover no-repeat;
}
.swiper-slide.loc_sw04>div{
background: url("../image/top/location_img04.png") center center / cover no-repeat;
}
.swiper-slide.loc_sw05>div{
background: url("../image/top/location_img05.png") center center / cover no-repeat;
}
.swiper-slide.loc_sw06>div{
background: url("../image/top/location_img06.png") center center / cover no-repeat;
}
.swiper-slide.loc_sw07>div{
background: url("../image/top/location_img07.png") center center / cover no-repeat;
}
.swiper-slide.plan_sw01>div{
background: url("../image/top/planning_img01.png") center center / cover no-repeat;
}
.swiper-slide.plan_sw02>div{
background: url("../image/top/planning_img02.png") center center / cover no-repeat;
}
.swiper-slide.plan_sw03>div{
background: url("../image/top/planning_img03.png") center center / cover no-repeat;
}
.swiper-slide.plan_sw04>div{
background: url("../image/top/planning_img04.png") center center / cover no-repeat;
}
.swiper-slide.plan_sw05>div{
background: url("../image/top/planning_img05.png") center center / cover no-repeat;
}
.swiper-slide.plan_sw06>div{
background: url("../image/top/planning_img06.png") center center / cover no-repeat;
}
.swiper-slide.plan_sw07>div{
background: url("../image/top/planning_img07.png") center center / cover no-repeat;
}
.swiper-slide.plan_sw08>div{
background: url("../image/top/planning_img08.png") center center / cover no-repeat;
}
.swiper-slide{
	position:relative;
}
.swiper-slide p{
	position:absolute;
	display:none;
	top:85%;
	left:10%;
	font-size:10px;
}
.swiper-slide.swiper-slide-active p{
	display:block;
}

@media(min-width:768px){
	.locationWrap .wrap01{
		width:90%;
		max-width:1400px;
		margin:0 auto;
		display:flex;
		justify-content: space-between;
		align-items: center;
		transform:translateX(5%);
	}
	.locationWrap.planning .wrap01{
		flex-direction: row-reverse;
		transform:translateX(-5%);
	}
	.locSwiper{
		width:45%;
		height:45vw;
		max-width:630px;
		margin:0;
		position: relative;
	}
	.locationWrap .wrap02{
		width:40%;
	}
	.locationWrap .wrap02 .cCopy02{
		margin-bottom:40px;
		font-size:clamp(17px,2vw,24px);
	}
	.locationWrap .wrap02 .txt20r{
		margin-bottom:40px;
	}
	.swiper-slide p{
		font-size:12px;
	}
}


/*カード風スライダー共通*/
.card-swiper-container{
	height: 100%;
	width: 100%;
	aspect-ratio:1 !important;
	cursor: url("../image/top/cursor_swipe.png"), pointer;
}
.card-swiper-container:hover{
}
.card-swiper-container .swiper-wrapper,
.card-swiper-container .swiper-slide>div{
	height:90%;
	margin-top:5%;
	width: 100%;
}
.card-swiper-container .swiper-button-prev,
.card-swiper-container .swiper-button-next {
    width: 40px;
    height: 40px;
    border:3px solid #c7f1e2;
    border-radius: 100px;
    color: #fff;
    opacity: 1;
    transform: translateY(-50%);
}
.card-swiper-container .swiper-button-next{right: -10%;}
.card-swiper-container .swiper-button-prev{left: -10%;}

.card-swiper-container .swiper-button-next:after,
.card-swiper-container .swiper-button-prev:after {
	font-size:22px;
	color: #c7f1e2;
}



/*Design --------------------------------*/
.designWrap{
	background-color:#eceada;
	background-image:url(../image/top/design_bg.png);
	background-size:50% auto;
	background-position:top 30px right 5%;
	background-repeat: no-repeat;
	padding:60px 0;
}
@media(min-width:768px){
	.designWrap{
		background-size:27% auto;
		background-position:top 30px right 5%;
	}
}
.designList01{
	display:flex;
	justify-content: space-between;
	align-items: stretch;
	width:90%;
	max-width:1260px;
	margin:0 auto;
	flex-wrap:wrap;
}
.designList01 .unit{
	width:48%;
	max-width:300px;
	text-align:center;
	margin-bottom:30px;
	display:flex;
	justify-content: flex-end;
	align-items: center;
	flex-direction: column;
}
@media(min-width:768px){
	.designList01 .unit{
		width:24%;
	}
}
.designList01 .unit figure{
	margin-bottom:10px;
}
.designList01 .unit p{
	font-size:clamp(12px,1.4vw,14px);
}


/*Gallery --------------------------------*/
/*PC*/
.galleryWrapPc{
	display:block;
	background-color:#effbf7;
	width:100%;
	height:55vw;
	position:relative;
	margin-bottom:60px;
}
.galleryWrapPc .slideWrap{
	width:100%;
	height:55vw;
	overflow: hidden;
	display:flex;
	justify-content: flex-end;
	align-items: stretch;
}
.galleryWrapPc .swiperGalleryPc01 {
	width:33.12%;
	height:55vw;
	margin-right:1.5vw;
}
.galleryWrapPc .swiperGalleryPc02 {
	width:19.06%;
	height:55vw;
	margin-right:1.5vw;
}
.galleryWrapPc .swiperGalleryPc03 {
	width:15.43%;
	height:55vw;
}
.galleryWrapPc .swiper-wrapper {
  transition-timing-function: linear;
}
.galleryWrapPc .btnWrap{
	position:absolute;
	left:5%;
	bottom:50px;
	text-align:center;
}
.galleryWrapPc .btnWrap .copy01{
	display: inline-block;
	width:auto;
	padding:0 1em;
	text-align:center;
	font-size:clamp(12px,2.4vw,24px);
	font-weight: bold;
	margin-bottom:20px;
	position:relative;
}
.galleryWrapPc .btnWrap .copy01::before,
.galleryWrapPc .btnWrap .copy01::after {
    content: "";
    position:absolute;
    background-color: #000;
    height: 100%;
    width: 2px;
    top:0;
}
.galleryWrapPc .btnWrap .copy01::before {
	left:0;
    transform: rotate(-20deg); 
}
.galleryWrapPc .btnWrap .copy01::after {
    transform: rotate(20deg); 
    right:0;
}
.galleryWrapPc .ttlWrap{
	position:absolute;
	width:6%;
	left:26%;
	top:20px;
	z-index:10;
}

.galleryWrapPc .cBtn01{
	background-color:#fff;
	color:#333;
}
.galleryWrapPc .cBtn01:hover{
	background-color:#000;
	color:#fff;
}
.galleryWrapSp{
	display:none;
}
/*SP*/
@media(max-width:768px)
	.galleryWrapPc{
		display:none;
	}
	.galleryWrapSp{
		display:block;
		background-color:#effbf7;
		width:100%;
		position:relative;
		padding:40px 0;
		margin-bottom:40px;
	}
	.galleryWrapSp .slideWrap{
		width:100%;
		overflow: hidden;
	}
	.galleryWrapSp .swiperGallerySp01 {
		width:100%;
		margin-bottom:10px;
	}
	.galleryWrapSp .swiperGallerySp02 {
		width:100%;
		margin-bottom:10px;
	}
	.galleryWrapSp .swiper-wrapper {
	  transition-timing-function: linear;
	}
	.galleryWrapSp .ttlWrap{
		width:95%;
		margin:10px auto;
	}
	.galleryWrapSp .btnWrap{
		width:100%;
		text-align:center;
	}

	.galleryWrapSp .btnWrap .copy01{
		display: inline-block;
		width:auto;
		padding:0 1em;
		text-align:center;
		font-size:20px;
		font-weight: bold;
		margin-top:20px;
		margin-bottom:10px;
		position:relative;
	}
	.galleryWrapSp .btnWrap .copy01::before,
	.galleryWrapSp .btnWrap .copy01::after {
	    content: "";
	    position:absolute;
	    background-color: #000;
	    height: 100%;
	    width: 2px;
	    top:0;
	}
	.galleryWrapSp .btnWrap .copy01::before {
		left:0;
	    transform: rotate(-20deg); 
	}
	.galleryWrapSp .btnWrap .copy01::after {
	    transform: rotate(20deg); 
	    right:0;
	}
	.galleryWrapSp .cBtn01{
		background-color:#fff;
		color:#333;
	}
}

/*SpecialContents --------------------------------*/

.specialWrap{
	width:100%;
	padding:100px 0;
	background-color: #fff;
}
.specialWrap .ttlwrap{
	width:70%;
	max-width:370px;
	margin:0 auto;
}
.specialList {
	position: relative;
	width: 100%;
	height: 500px;
}
.specialListWrap {
	position: absolute;
	top: 50px;
	left: 30px;
	display: flex;
}
.specialList .unit{
	width:260px;
	padding:0 20px;
	border-left:1px solid #333;
	position:relative;
}
.specialList .unit:last-of-type{
	border-right:1px solid #333;
	margin-right:60px;
}
.specialList .unit .comingsoon{
	width:234px;
	position:absolute;
	left:20px;
	top:-20px;
}
.specialList .unit a
.specialList .unit > span{
	display:block;
	width:220px;
	margin-bottom:20px;
}
.specialList .unit .txtwrap{
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.specialList .unit .txtwrap p{
	font-size:14px;
	text-align:left;
}
.specialList .unit .txtwrap img{
	width:60px;
}

@media(min-width:768px){
	.specialWrap{
		height: 700px;
		potision:relative;
	}
	.specialWrap .ttlwrap{
		position:absolute;
		height: 500px;
		width:270px;
		margin:0;
		background-color:#fff;
		left:0;
		top:100px;
		z-index:100;
	}
	.specialWrap .ttlwrap img{
		width:200px;
		margin-left:35px;
	}
	.specialListWrap {
		position: absolute;
		top:100px;
		left: 270px;
	}
	.specialList {
		height: 500px;
		background-color:#fff;
	}
	.specialList .unit{
		width:380px;
		padding:0 30px;
	}
	.specialList .unit:last-of-type{
		margin-right:300px;
	}
	.specialList .unit a{
		width:320px;
	}
}



/*----------------------------------------
GW、お盆の休暇
----------------------------------------*/
.holiday {
	margin: 80px auto;
	text-align: center;
}

.holiday .border {
	display: inline-block;
	padding: 20px 50px;
	border: 2px solid #3e3a39;
}

.holiday .title {
	font-size: 18px;
	margin-bottom: 10px;
}

.holiday p {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.8;
}

.holiday .textSmall {
	font-size: 14px;
}



@media screen and (min-width: 320px) and (max-width: 767px)  {
	.holiday {
		margin: 50px auto 20px;
	}

	.holiday .border {
		padding: 20px 25px;
	}
	
	.holiday .title {
		font-size: 16px;
	}

	.holiday p {
		font-size: 14px;
		font-weight: 600;
	}

	.holiday .textSmall {
		font-size: 12px;
	}
	

}


/*----------------------------------------
TVCM
----------------------------------------*/

.tvcm {
    margin: 120px auto 80px;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
}

.tvcm .cm_img {
	width: 90%;
	max-width: 500px;
	margin: 40px auto 0;
	cursor: pointer;
}



@media screen and (min-width: 320px) and (max-width: 767px)  {

	.tvcm {
		margin: 40px auto 40px;
		font-size: 15px;
	}
	
}


/*Movie------------------------------*/
.video {
	width:100%;
}
/**/


/*MainCopy------------------------------*/
.mv_copy{
	padding:40px 0;
	text-align:center;
	max-width:1000px;
	width:90%;
	margin:0 auto;
}
.mv_copy .copy01{ 
	font-size:clamp(24px,4vw,40px);
	font-weight: bold;
}
.mv_copy .copy02{
	font-size:clamp(30px,5.3vw,53px);
	font-weight: bold;
}

.bnrModelhousePc{display:none;}
.bnrModelhousePc02{display:none;}
.bnrModelhouseSp{
	display:block;
	margin-bottom:40px
}

@media (min-width: 768px) {
.bnrModelhousePc02{
	display:block;
	width:90%;
	max-width:1200px;
	margin:0 auto;
}
.bnrModelhousePc{
	display:flex;
	justify-content: center;
	align-items: center;
	background-color:#40a46d;
	width:90%;
	max-width:1200px;
	margin:0 auto 40px;
}
.bnrModelhousePc .video{
	width:45%;
	padding:10px;
}

.bnrModelhouseSp{display:none;}

}