@charset "utf-8";
.mainCopy .copy01{
	text-align:center;
	font-size:min(4vw,2.6rem);
	width:90%;
	margin:-1em auto 0;
}
@media(min-width:768px){
	.mainCopy{
		width:100%;
		background-image: url(../images/copy01_pc.png);
		background-size:100% auto;
		background-repeat: no-repeat;
		background-position: top center;
		height:33vw;
		display:flex;
		justify-content: flex-end;
		align-items: flex-end;
	}
	.mainCopy .copy01{
		font-size:2vw;
		text-align:right;
	}
}

.merit{}
.merit .unit{
	width:100%;
	background : linear-gradient(90deg, #A3FFFC 0%, #E1FFDE 100%);
	margin-bottom: 10px;
	padding:25px 10px;
}
.merit .unit .copy01{
	font-size: 1.8rem;
	font-size: min(4vw,1.8rem);
	line-height:1.5;
	font-weight: 500;
	margin-bottom:0.5em;
}
.merit .unit .copy02{
	font-size: 2.8rem;
	font-size: min(6vw,2.8rem);
	line-height:1.5;
	font-weight: 500;
}


@media (min-width:768px) {
	.merit{
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		}
		.merit .unit{
			width:32%;
		}
	.merit .unit .copy01{
		font-size: min(1.2vw,1.8rem);
	}
	.merit .unit .copy02{
		font-size: min(2vw,2.8rem);
	}
}
/**/


.area{}
.area .copy01{
	font-family:serif;
	font-size:min(3.2vw,3.6rem);
	margin-bottom:0.5em;
}
.areaMap{
	position:relative;
	overflow: hidden;
	width:100%;
	height:53vw;
}
.areaMap .areaImg{
	max-width:200% !important;
	width:200%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	transition-duration:0.2s;
}
.areaMap .area2{
	left:-100%;
}
.areaMap .areaBtn{
	padding:3px 5px 3px 10px;
	position:absolute;
	right:0;
	bottom:0;
	background-color:#444;
	color:#fff;
	border-radius:1.5em 0 0 1.5em;
	cursor: pointer;
	font-size:clamp(1rem,1.6vw,1.6rem);
}


.result{}
.result .unit{
	background-color:#fff;
	padding:0 0 20px;
	margin:0 0 40px;
}
.result .unit .ttlwrap{
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
}
.result .unit .ttlwrap .ttl01{
	width:calc(70% - 25px);
	height:90px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.result .unit .ttlwrap .ttl01 img{
	width:90%;
	display:block;
}
.result .unit .ttlwrap .area{
	width:30%;
	height:60px;
	background-color:#808080;
	color:#fff;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-right:1em;
	font-size:clamp(1.4rem,1.8vw,2.4rem);
	position:relative;
	margin:0;
}
.result .unit .ttlwrap .area::before{
	position:absolute;
	content:"";
	display:block;
	margin:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent #808080 transparent transparent;
	border-width: 0px 25px 60px 0px;
	left:-25px;
	top:0;
}

.result .unit .wrap01{
	width:93%;
	margin:0 auto;
}
.result .unit .wrap01 .imgwrap{
	margin-bottom:10px;
	text-align:left;
}
.result .unit .wrap01 .imgwrap .copy01{
	font-family: serif;
	color:#666;
	font-size:1.4rem;
	margin-top:0.5em;
}
.result .unit .wrap01 .imgwrap .copy02{
	font-size:1.8rem;
	line-height: 1.6;
	font-feature-settings: "palt";
}
.result .unit .wrap01 .imgwrap .copy02::before{
	content:"・";
}
.result .unit .wrap01 .imgwrap .copy02 span{
	background-color:#28badc;
	color:#fff;
	padding:0 3px;
}
.result .unit .wrap01 .txtwrap{}
.result .unit .wrap01 .txtwrap .copy01{
	text-align:left;
	color:#484848;
	font-weight: 500;
	line-height:1.5;
}
.result .unit .wrap01 .txtwrap .copy01.fsBig{font-size:clamp(1.9rem,2.2vw,2.4rem);}
.result .unit .wrap01 .txtwrap .copy01.fsMid{font-size:clamp(1.6rem,1.8vw,1.8rem);}
.result .unit .wrap01 .txtwrap .copy01.fsSma{font-size:clamp(1.2rem,1.3vw,1.4rem);}
.result .unit .wrap01 .txtwrap .copy01 .big{font-size:150%;line-height:1;}
.result .unit .wrap01 .txtwrap .btn01{
	display:block;
	width:100%;
	background-color:#2CC6BB;
	color:#fff;
	padding:0 10px;
	text-align:center;
	text-decoration: none;
	font-weight: 700;
	margin:10px 0;
}
.result .unit .wrap01 .txtwrap .btn01 .copy02{
	font-size:min(2.5vw,1.5rem);
	border-bottom:1px solid #fff;
	padding-bottom:3px;
}
.result .unit .wrap01 .txtwrap .btn01 .copy03{
	font-size:min(3.5vw,2.1rem);
}
.result .unit .wrap01 .txtwrap .btnWrap01{
	display:flex;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom:10px;
}
.result .unit .wrap01 .txtwrap .btn02{
	display:block;
	width:49%;
	line-height:2em;
	font-size:min(3.5vw,1.8rem);
	border-radius:1em;
	color:#fff;
	text-decoration: none;
	font-weight: 700;
}
.result .unit .wrap01 .txtwrap .btn02.rsv{
	background-color:#484848;
}
.result .unit .wrap01 .txtwrap .btn02.req{
	background-color:#809C3F;
}
.result .unit .wrap01 .txtwrap .list01{
	text-align:left;
	font-family: serif;
	font-size:1rem;
	display:flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	line-height: 1.3;
	font-weight: bold;
	font-feature-settings: "palt";
}
.result .unit .wrap01 .txtwrap .list01 dt{
	display:block;
	width:50px;
	margin-bottom:5px;
	padding-bottom:5px;
	border-bottom:1px solid #ccc;
}
.result .unit .wrap01 .txtwrap .list01 dd{
	display:block;
	width:calc(100% - 50px);
	margin-bottom:5px;
	padding-bottom:5px;
	border-bottom:1px solid #ccc;
}
.result .unit .wrap01 .txtwrap .list01 dd span{
	font-size:120%;
}
.result .unit .wrap01 .txtwrap .list01 dt.kukaku{
	display:flex;
	justify-content: flex-start;
	align-items: flex-end;
}
.result .unit .wrap01 .txtwrap .list01 dd.kukaku{
	font-size:2rem;
	line-height: 1;
}
.result .unit .wrap01 .txtwrap .list01 dd.kukaku span{
	font-size:150%;
}

.result .unit .wrap01 .txtwrap a.noLink {
	pointer-events: none;
	opacity: 0.4;
}


@media(min-width:600px){
	.result .unit .wrap01{
		display:flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.result .unit .wrap01 .imgwrap{
		width:53.7%;
	}
	.result .unit .wrap01 .txtwrap{
		width:42.5%;
	}
	.result .unit .ttlwrap .area{
		width:30%;
	}
	.result .unit .ttlwrap .ttl01{
		width:56%;
	}
	.result .unit .ttlwrap .area{
		width:40%;
	}
}

@media(min-width:1100px){
	.result{
		display:flex;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;
	}
	.result .unit{
		width:48.3%;
	}
}

.contact{
	margin:40px auto;
	width:90%;
	max-width:1200px;
}

.contact a{
	display: block;
	width: 80%;
	max-width:450px;
	margin:0 auto 10px;
}
@media(min-width:768px){
	.contact{
		display:flex;
		justify-content: space-between;
		align-items: stretch;
	}

	.contact a{
		width: 32%;
		max-width:380px;
		margin:0;
	}
}




.modelhouse{
	padding:60px 0;
}
.modelhouse .cTtl01{
	margin-top:clamp(20px,4vw,40px);
	margin-bottom:20px;
	width:100%;
	text-align:center;
}
.modelhouse .cTtl01 img{
	width:310px;
}
@media(min-width:768px){
	.modelhouse .cTtl01{
		background-size:auto 90px;
		background-position: top 60px center;
	}
	.modelhouse .cTtl01 img{
		width:620px;
	}
}

	.modelhouse .cTxt01{
	width:90%;
	margin:0 auto 40px;
	font-size:clamp(14px,2.6vw,26px);
}



.freeplan{
}
.freeplan > .copy01{
	font-family:serif;
	font-size:min(5vw,3.6rem);
	margin-bottom:0.5em;	
}
.freeplan > .copy02{
	font-size:min(2.8vw,2.8rem);
	margin-bottom:2em;	
}




.freeplan02{
	background-color:#F8F8F4;
	background-image: url(../images/soken01.svg);
	background-size:75%;
	background-position:top left;
	background-repeat: no-repeat;
	padding:80px 0;
}
@media(min-width:768px){
	.freeplan02{
		background-size:55%;
	}
}
.freeplan02 .txtwrap{
	width:90%;
	margin:0 auto 40px;
	text-align:left;
}
.freeplan02 .txtwrap .copy01{
	font-family:serif;
	font-size:min(5vw,3.6rem);
	margin-bottom:0.5em;	
}
.freeplan02 .txtwrap .copy02{
	font-family:serif;
	font-size:min(3.2vw,2.1rem);
	margin-bottom:0.5em;	
}
.freeplan02 .imgwrap{
	width:95%;
	margin-left:5%;
}
.freeplan02 .imgwrap img{
	border-radius:2vw 0 0 2vw;
}
@media(min-width:768px){
	.freeplan02{
		display:flex;
		justify-content: flex-end;
		align-items: center;
	}
	.freeplan02 .txtwrap{
		width:36%;
		margin:0;
		text-align:left;
		padding:0 5% 0 0 ;
	}
	.freeplan02 .imgwrap{
		width:57.3%;
		margin-left:0;
	}
}


.freeplan03{
	background-image: url(../images/design_sp.jpg);
	background-size:cover;
	background-position:top center;
	background-repeat: no-repeat;
	padding:100px 0;
	height:170vw;
}
.freeplan03 .txtwrap{
	width:90%;
	margin:0 auto;
	text-align:left;
}
.freeplan03 .txtwrap .copy01{
	color:#fff;
	font-family:serif;
	font-size:min(5vw,3.6rem);
	margin-bottom:0.5em;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4), 0px 0px 4px rgba(0, 0, 0, 0.4), 0px 0px 4px rgba(0, 0, 0, 0.4);
}
.freeplan03 .txtwrap .copy02{
	color:#fff;
	font-family:serif;
	font-size:min(3.2vw,2.1rem);
	margin-bottom:0.5em;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4), 0px 0px 4px rgba(0, 0, 0, 0.4), 0px 0px 4px rgba(0, 0, 0, 0.4);
}

@media(min-width:768px){
	.freeplan03{
		background-image: url(../images/design_pc.jpg);
		height:55vw;
	}
	.freeplan03 .txtwrap{
		width:63%;
		margin-left:30%;
		display:flex;
		justify-content: space-between;
	}
	.freeplan03 .txtwrap .copy01{
		width:55%;
	font-size:min(2vw,3.6rem);
	}
	.freeplan03 .txtwrap .copy02{
		width:45%;
	font-size:min(1.5vw,2.1rem);
	}
}


.lineup{
	background-color:#F8F8F4;
	background-image: url(../images/lineup01.svg);
	background-size:80%;
	background-position:top center;
	background-repeat: no-repeat;
	padding:60px 0;
}
@media(min-width:768px){
	.lineup{
		background-size:60%;
		padding:100px 0 80px;
	}
}
.lineup .lineupList{
	width:90%;
	margin:0 auto 20px;
	display:flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
}
.lineup .lineupList img{
	width:48%;
	margin-bottom:20px;
}
.lineup .txtwrap{
	width:90%;
	margin:0 auto;
	text-align:left;
}
.lineup .txtwrap .copy01{
	font-family:serif;
	font-size:min(5vw,3.6rem);
	margin-bottom:0.5em;	
}
.lineup .txtwrap .copy02{
	font-family:serif;
	font-size:min(3.2vw,2.1rem);
	margin-bottom:0.5em;	
}
@media(min-width:768px){
	.lineup .wrap01{
		display:flex;
		justify-content: space-between;
		align-items: center;
		width:90%;
		margin:0 auto;
	}
	.lineup .lineupList{
		width:60%;
		margin:0;
	}
	.lineup .txtwrap{
		width:35%;
		margin:0;
	}
}

@media(min-width:1300px){
	.lineup .lineupList img{
		width:31%;
	}
}



/*----------------------------------------
 op
----------------------------------------*/

#op {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 動画が範囲外にはみ出さないようにする */
	margin-top: 120px;
	transition: opacity 1.5s ease; /* クロスフェードのトランジション */
}

.mvSlide {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1.5s ease; /* クロスフェードのトランジション */
}

#op video {
  width: 100%; /* 幅を100%に設定 */
  height: auto; /* 高さを自動調整（アスペクト比を維持） */
  aspect-ratio: 1500 / 660; /* アスペクト比を指定 */
  object-fit: cover; /* コンテナサイズに合わせて拡大・縮小 */
}


#skip{
width: 100px;
padding: 12px 10px;
font-weight: bold;
text-align: center;
background-color: #fff;
position: absolute;
right: 10px;
bottom: 10px;
z-index: 21;
cursor: pointer;
	line-height: 1;
}

#skip:hover{
background-color: #eee;
}


@media screen and (max-width: 768px) {

/*----------------------------------------
 op
----------------------------------------*/

#op {
	margin-top: 65px;
}	
	
	
	
#skip{
width: 70px;
padding: 12px 5px;
font-weight: bold;
text-align: center;
background-color: #fff;
position: absolute;
z-index: 22;
cursor: pointer;
}


	

}


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