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

#pageWrap {
	background-color: #000;
}
.index #pageWrap {
	padding-top: 180px;
}
#h2Box {
	padding-bottom: 30px;
}
#h2Box h2 {
	font-size: 60px;
	color: #97925e;
	text-align: center;
}
#h2Box p {
	font-size: 20px;
	text-align: center;
	padding: 1em;
}
.panoBox {
	position: relative;
	.nightBox {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		display: none;
		z-index: 1;
	}
}
ul.switch {
	width: 80%;
	max-width: 500px;
	padding: 30px 0 50px;
	li {
		display: block;
		container-type: inline-size;
		position: relative;
		width: 44%;
		a {
			font-size: 10cqw;
			display: flex;
justify-content: center;
align-items: center;
			width: 100%;
			height: 2em;
			background-color: #73725c;
			color: #fff;
			text-align: center;
			line-height: 1;
		}
		a:hover {
			opacity: 1;
		}
	}
	.li01 a {
		&:hover {
			opacity: 1;
		}
	}
	.li02 a {
		opacity: 0.5;
		&:hover {
			opacity: 1;
		}
	}
	.li01 a::after {
		content: "";
		position: absolute;
		display: block;
		width: 2em;
		height: 2em;
		top: 0;
		left: 100%;
		border-top: #73725c solid 1em;
		border-left: #73725c solid 1em;
		border-bottom: transparent solid 1em;
		border-right: transparent solid 1em;
	}
	.li02 a::before {
		content: "";
		position: absolute;
		display: block;
		width: 2em;
		height: 2em;
		top: 0;
		right: 100%;
		border-bottom: #73725c solid 1em;
		border-right: #73725c solid 1em;
		border-top: transparent solid 1em;
		border-left: transparent solid 1em;
	}
}


#sec01 {
	max-width: 1200px;
	background-color: #cad4db;
	color: #000;
	margin: 5% auto;
	padding: 30px 0 50px;
}
#sec01 .h3Box {
	padding-bottom: 30px;
	h3 {
		text-align: center;
		font-size: 42px;
		color: #73725c;
	}
	p {
		text-align: center;
		font-size: 18px;
		span {
			font-size: 140%;
		}
	}
}
#sec01 .flex {
	max-width: 900px;
	margin:0 auto;
	gap: 30px 0;
	.itemBox {
		width: 29%;
		max-width: 260px;
		dt {
			color: #73725c;
			font-size: 18px;
			text-align: center;
			padding: 0.6em 0 0.2em;
		}
		dd {
			span {
				font-size: 10px;
				display: block;
				padding-top: 0.2em;
			}
		}
	}
}

#siyo {
	padding: 30px 0;
}
#siyo .h3Box {
	
}
#siyo .h3Box h3 {
	font-size: 34px;
	text-align: center;
	color: #8b8f6f;
	width: 19em;
	letter-spacing: 0.2em;
	margin: 0 auto;
}
#siyo .h3Box h3 .engTxt {
	display: block;
	
}
#siyo .h3Box h3 .spnj {
	display: block;
	font-size: 85%;
	border-top: #8b8f6f solid 1px;
	border-bottom: #8b8f6f solid 1px;
	padding: 0.3em 0;
}
.catTit {
	background-color: #8b8f6f;
	margin-bottom: 50px;
	h3 {
		font-size: 20px;
		.engTxt {
			font-size: 150%;
			margin-right: 1em;
			letter-spacing: 0.3em;
		}
	}
}

#sec02 {
	padding-bottom: 3%;
}
.itemWrap {
	max-width: 1200px;
	margin-bottom: 50px;
	gap:50px 0;
	.itemBox {
		width: 21%;
		container-type: inline-size;
		dt {
			color: #8b8f6f;
			font-size: 15px;
			line-height: 1.3;
			display: flex;
align-items: center;
			flex-wrap: wrap;
			height: 3.6em;
			letter-spacing: 0em;
			span {
				font-size: 60%;
				margin-left: 1em;
			}
		}
		dd {
			font-size: 13px;
		}
	}
	.item0 {
		width: 73.6%;
		flex-direction: column-reverse;
		display: flex;
		dl {
			padding-bottom: 1.5em;
			dt {
			height: 2.0em;
		}
		}
	}
}
#sec02 .itemWrap.flex01 {
	align-items: flex-end;
	dl {
		dt {
			
		}
	}
	}
#sec03 {
	padding-bottom: 5%;
}
#sec03 .itemWrap.flex01 {
	align-items: flex-end;
	.item0 {
		flex-direction: row;
		.imgBox {
			width: 64%;
		}
		.rightBox {
			width: 36%;
			padding: 30px 20px;
			background-color: #ccd8e1;
			container-type: inline-size;
			.figBox {
				padding: 5% 10%;
				mix-blend-mode:multiply;
			}
			dt {
				height: 3.6em;
			}
			dd {
				color: #000;
			}
		}
	}
	.item1 {
		.imgBox .imgAdd {
				width: 80%;
				position: absolute;
				right: 25%;
				bottom: 95%;
			
		}
	}
}


.selBox {
	background-color: #f3f3f4;
	padding-bottom: 30px;
	h3 {
		background-color: #8b8f6f;
		color: #fff;
		text-align: center;
		font-size: 18px;
		letter-spacing: 0.3em;
		padding: 0.3em;
	}
	.flex0 {
		width: 90%;
		margin: 20px auto 0;
		
		.leftBox,.rightBox {
			gap:10px 0;
			width: 48%;
			h5 {
				width: 100%;
				color: #8b8f6f;
				font-size: 16px;
			}
			.item {
				width: 24%;
				container-type: inline-size;
				p {
					font-size: 9cqw;
					color: #000;
					letter-spacing: -0.1em;
				}
			}
		}
		.rightBox {
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			.flex02 {
				width: 100%;
				gap:10px 0;
			}
		}
		.lineTate {
			width: 1px;
			background-color: #999;
		}
		.lineYoko {
			width: 100%;
			height: 1px;
			background-color: #999;
		}
	}
}

#sec04 {
	.itemBox {
		width: 28%;
	}
}
#sec05 {
	padding: 5% 0;
	h3 {
		color: #8b8f6f;
		text-align: center;
		font-size: 32px;
		border-top: #8b8f6f solid 1px;
		border-bottom: #8b8f6f solid 1px;
		padding: 0.7em;
		margin-bottom: 30px;
	}
	.itemBox {
		width: 28%;
		background-color: #fff;
		container-type: inline-size;
		padding-bottom: 30px;
		h5 {
			text-align: center;
			color: #231815;
			font-size: 7cqw;
			padding: 0.3em;
			background: #C09D49;
background: linear-gradient(90deg, rgba(192, 157, 73, 1) 0%, rgba(230, 206, 142, 1) 25%, rgba(192, 157, 73, 1) 50%, rgba(230, 206, 142, 1) 75%, rgba(192, 157, 73, 1) 100%);
			
		}
		.figBox {
			padding: 5% 6% 0;
		}
		p {
			color: #b50005;
			text-align: center;
			padding: 0 0.2em 0.2em;
			font-size: 14cqw;
		}
	}
	.itemBox.hide {
		pointer-events: none;
	}
	.btnBox {
		padding: 30px 0;
	}
	.btnBox a {
		display: block;
		text-align: center;
		font-size: 1.5cqw;
		font-size: clamp(13px, 3.5cqw, 24px);
		color: #000;
		background: linear-gradient(90deg, rgba(192, 157, 73, 1) 0%, rgba(230, 206, 142, 1) 25%, rgba(192, 157, 73, 1) 50%, rgba(230, 206, 142, 1) 75%, rgba(192, 157, 73, 1) 100%);
		border-radius: 6px;
		padding: 0.3em;
		&::after {
			content: "▼";
			display: inline-block;
			font-size: 60%;
			transform: rotateZ(-90deg);
			margin-left: 0.5em;
			line-height: 1;
			position: relative;
			top: -0.1em;
		}
	}
}





@media screen and (max-width : 959px ){
	.index #pageWrap {
		padding-top: 60px;
	}
}

@media screen and (max-width : 599px ){
	.index #pageWrap {
		padding-top: 30px;
	}
	#h2Box h2 {
		font-size: clamp(13px, 9cqw, 48px);
	}
	#h2Box p {
		font-size: clamp(13px, 4cqw, 20px);
	}
	#sec01 .h3Box {
    h3 {
        font-size: clamp(13px, 7.8cqw, 40px);
    }
		p {
       font-size: clamp(13px, 4.0cqw, 18px);
    }
}
	#sec01 .flex {
	width: 90%;
		max-width: 300px;
		margin: 0 auto;
	.itemBox {
		width: 100%;
		max-width: 300px;
		}
	}
	#siyo .h3Box h3 {
    font-size: clamp(13px, 4.5cqw, 30px);
}
	.catTit h3 {
		padding: 0.7em 0em;
       font-size: clamp(13px, 3.8cqw, 18px);
		        .engTxt {
            font-size: 150%;
            margin-right: 1em;
            letter-spacing: 0.1em;
							display: block;
        }
    }

	.itemWrap {
		max-width: 300px;
		margin: 0 auto;
		gap:20px 0;
    .itemBox {
        width: 100%;
        container-type: inline-size;
    }
}
	.catTit {
    margin-bottom: 30px;
}
	#sec02 .itemWrap.flex01 {
		padding-bottom: 20px;
	}
	#sec02 .itemWrap.flex02 {
		padding-bottom: 40px;
	}
	#sec03 .itemWrap.flex01 {
	align-items: flex-end;
		margin-bottom: 20px;
	.item0 {
		flex-direction: row;
		margin-bottom: 40%;
		.imgBox {
			width: 100%;
		}
		.rightBox {
			width: 100%;
			padding: 20px 20px;
			.figBox {
				padding: 5% 20%;
			}
			dt {
			}
			dd {
				color: #000;
			}
		}
	}
	.item1 {
		.imgBox .imgAdd {
				width: 60%;
				position: absolute;
				right: 20%;
				bottom: 95%;
			
		}
	}
}
	.selBox {
	  margin-top: 30px;
	}
	.selBox .flex0 .leftBox, .selBox .flex0 .rightBox {
	  width: 100%;
	}
	.selBox .flex0 .leftBox {
	  padding-bottom: 10px;
	}
	.selBox .flex0 .lineTate {
	  width: 100%;
	  height: 1px;
	  background-color: #999;
	  margin-bottom: 10px;
	}
	#sec04 .itemBox {
	  width: 100%;
	}
	#sec04 .itemWrap {
	  max-width: 300px;
	}
	#sec05 h3 {
	  font-size: clamp(13px, 5.5cqw, 30px);
	}
	#sec05 .itemBox {
	  width: 32%;
	}
}

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

.madori {}
.madori #madoriWrap {
	background-color: #000;
}
.typeWide #madoriWrap .madoriBox .leftBox .typeBox {
    max-width: 1000px;
	margin-bottom: 30px;
}
.typeWide #madoriWrap .madoriBox .leftBox .widBox {
    max-width: 1000px;
	align-items: flex-start;
	
}
.typeWide #madoriWrap .madoriBox .leftBox .widBox .jukoBox {
    width: 47%;
    max-width: 500px;
	margin: 0;
}
.madoriBox .pointBox {
		width: 47%;
	container-type: inline-size;
	p {
		font-size: clamp(13px, 3.0cqw, 16px);
		padding: 0.5em 0;
		line-height: 1.4;
	}
}
.typeWide #madoriWrap .madoriBox .leftBox .widBox ul {
	margin: 0;
	padding: 0;
	width: 100%;
	li {
		width: 100%;
		border: none;
		padding: 0;
		margin: 0;
		background: #6C6544;
background: linear-gradient(139deg, rgba(108, 101, 68, 1) 0%, rgba(42, 33, 12, 1) 50%);;
		color: #aba785;
		margin-top: 7px;
		padding: 0.8em 0.4em;
		text-align: center;
		font-size: clamp(13px, 3.2cqw, 16px);
	}
}

@media screen and (max-width: 599px) {
	
	.typeWide #madoriWrap .madoriBox .leftBox .widBox .jukoBox {
    width: 80%;
		max-width: 300px;
		padding-top: 30px;
		margin: 0 auto;
	}
	.madoriBox .pointBox {
		width: 100%;
	}
}