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


#titWrap {
	padding: 0;
	position: relative;
	h1 span {
		position: absolute;
		width: 100%;
		text-align: center;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 40px;
		font-style: italic;
		color: #fff;
	}
}
#pageWrap {
    padding: 5% 0;
	background-color: #231815;
	color: #fff;
}

.h2Wrap {
	color: #fff;
	text-align: center;
	.engTxt {
		display: inline-block;
		font-size: 32px;
		text-align: center;
		color: #988550;
		letter-spacing: 0.2em;
		padding: 0.2em 1em;
		border-bottom: #988550 solid 1px;
	}
	h2 {
		font-size: 24px;
		line-height: 1.8;
		padding: 1em 0;
		letter-spacing: 0.1em;
	}
	.lead {
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		padding:1em 0;
		line-height: 2.4;
	}
}
#sec01 {
/*	padding-top: 2%;
padding-bottom: 5%;*/
}

.list {
	.flex {
		margin-top: 20px;
		.leftBox {
			width: 65%;
			#floorBox {
				position: relative;
				.swap {
					position: absolute;
					width: 15%;
				}
				.typeA {
					left: 18%;
					top:26%;
				}
				.typeB {
					left: 18%;
					top:66%;
				}
				.typeC {
					left: 63%;
					top:66%;
				}
				.typeD {
					left: 63%;
					top:26%;
				}
				.soon {
					opacity: 0.3;
				}
				.shown {
					filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 1));
				}
			}
		}
		.rightBox {
			width: 32%;
		}
	}
}
.btnBoxPlan {
	a {
				display: block;
				margin-top: 15px;
			}
			.soon {
				pointer-events: none;
				position: relative;
				container-type: inline-size;
			}
			.soon::before{
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: #575238;
				mix-blend-mode: multiply;
			}
			.soon::after{
				content: "coming soon";
				position: absolute;
				left: 50%;
				top:50%;
				width: 100%;
				text-align: center;
				transform: translate(-50%,-50%);
				font-size: 8cqw;
				color: #fff;
			}
}

@media screen and (max-width : 959px ){
	.boxWidth {
		container-type: inline-size;
	}
	.h2Wrap {
		.engTxt {
			font-size: clamp(13px, 1.7cqw, 16px);
			font-size: 5cqw;
		}
		h2 {
			font-size: 5cqw;
			font-size: clamp(14px, 5cqw, 18px);
		}
		.lead {
			font-size: 3.8cqw;
			font-size: clamp(12px, 3.8cqw, 14px);
		}
	}
	.list .flex .rightBox {
			a {
				margin-top: 8px;
			}
	}

}

@media screen and (max-width : 599px ){
	.list .flex .leftBox {
		width: 100%;
	}
	.list .flex .rightBox{
		width: 90%;
		max-width: 300px;
		margin: 0 auto;
		padding-top: 20px;
	}
}


/*===========各間取り===========*/

.madori {
	
}
#btnsWrap {
	padding: 0 0 3% 0;
	.btnBoxPlan {
		display: flex;
		justify-content:space-between;
		flex-wrap: wrap;
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
		a {
			width: 24%;
		}
		p.caption {
			width: 100%;
			text-align: center;
		}
	}
}


#madoriWrap {
	background-color: #fff;
	color: #000;
}

.madoriBox {
	padding: 5% 0;
	.leftBox {
		width:35%;
		container-type: inline-size;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		.typeBox {
			width: 90%;
			max-width: 320px;
		}
		.jukoBox {
			align-items: flex-end;
			width: 100%;
			.mfl {
				width: 30%;
			}
			.juko {
				width: 60%;
			}
		}
		ul {
			width: 100%;
			li {
				font-size: 18px;
				font-size: clamp(10px, 5.0cqw, 18px);
				margin-top: 2em;
				border-left: #575238 solid 5px;
				padding-left: 1em;
			}
		}
	}
	.zumenBox{
		width:62.5%;
		position: relative;
		.houiBox {
			position: absolute;
			width: 12%;
			right: 98%;
			bottom: 0;
		}
	}
}

@media screen and (max-width : 599px ){
	.madoriBox .leftBox {
		width: 100%;
	}
	.madoriBox .leftBox .typeBox {
		width: 90%;
		max-width: 300px;
		margin: 0 auto;
	}
	.madoriBox .leftBox .jukoBox {
		max-width: 400px;
		margin: 30px auto;
		.mfl {
				width: 36%;
			}
	}
	.madoriBox .leftBox ul li {
				
				font-size: clamp(10px, 4cqw, 16px);
				margin-top: 1em;
				border-left: #575238 solid 5px;
				padding-left: 0.5em;
		br {
			display: none;
		}
	}
	
	.madoriBox .zumenBox {
		width: 100%;
		padding-top: 30px;
		.houiBox {
			position: static;
			width: 45%;
			padding-top: 10px;
		}
	}
}