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

#secGaikan {
	width: 55%;
	position: relative;
}
#secGaikan .h3Box {
	font-size: 28px;
	position: relative;
	width: 22em;
	margin: 2% auto 5%;
}
#secGaikan .h3Box::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0.6em;
	height: 110%;
	border: #000 solid 1px;
	border-right: transparent;
}
#secGaikan .h3Box::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 0.6em;
	height: 110%;
	border: #000 solid 1px;
	border-left: transparent;
}
	

#secGaikan .h3Box h3 {
	color: #b5ad4b;
	letter-spacing: 0.1em;
	padding-left: 0.2em;
	padding-bottom: 0.2em;
}
#secGaikan .h3Box p {
	font-size: 40%;
}

#secGaikan #gaikanBox {
	max-width: 840px;
	position: relative;
	margin-top: 20px;
}
#secGaikan #gaikanBox .swap {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	transition: 0.3s;
}
#secGaikan #gaikanBox .swap.shown {
	opacity: 1;
}
#secGaikan .caption {
	position: absolute;
	top: 100%;
	left: 2%;
	font-size: 10px;
}

#sec02 {
	width: 45%;
	gap:15px 0;
}
#sec02 h4 {
	width: 100%;
	text-align: center;
	font-size: 18px;
	line-height: 1.3;
	position: relative;
	top: 0.3em;
}
#sec02 .itemBox {
	width: 48%;
	background-color: #f0f0f0;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
	position: relative;
	transition: 0.5s;
}
#sec02 .itemBox:hover {
	background-color: #fff;
}
#sec02 .itemBox a:hover {
	opacity: 1;
}
/*#sec02 .itemBox::after {
	content: "";
	position: absolute;
	width: 80%;
	height: 68%;
	left: 10%;
	bottom:6%;
	background-image: url("../images/gentei.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	
}
#sec02 .typeD::after {
	display: none;
}*/

#contacts {
	background: none;
	max-width: 760px;
	padding-top: 4%;
}
#contacts .btBox {
	width: 46%;
	max-width: 340px;
}
#contacts .btBox p {
	display: flex;
justify-content: center;
align-items: center;
	height: 5em;
	line-height: 1.3;
font-size: 13px;
}
#contacts .btBox a {
	font-size: 20px;
}
#contacts .btn-limit a {
	background: #231815;

}
#contacts .btn-limit a::before {
	display: none;
}

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

@media screen and (max-width: 599px) {
	#secGaikan {
		width: 100%;
	}
	#sec02 {
		width: 96%;
		margin: 0 auto;
		padding-top: 5%;
		gap:15px 0;
	}
	#sec02 h4 {
		font-size: 16px;
	}
	#sec02 .itemBox {
		background-color: #f0f0f0;
		box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
		position: relative;
		/*padding: 3% 0;*/
		padding-bottom: 1%;
	}
	#contacts {
		background: none;
		max-width: 760px;
		padding-top: 4%;
		width: 80%;
	}
	#contacts .btBox {
		width: 100%;
		padding: 2% 0;
		margin: 0 auto;
	}
	#contacts .btBox a {
		font-size: 4.3vw;
		font-size: clamp(15px, 4.3vw, 17px);
	}
	#contacts .btBox p {
    font-size: clamp(12px, 3.5vw, 14px);
	}
}


/*===============間取り================*/
.typeA.madori  #sec02 .typeA,
.typeB.madori  #sec02 .typeB,
.typeC.madori  #sec02 .typeC,
.typeD.madori  #sec02 .typeD {
	background-color: #e8e8e8;
}

.madori #pageWrap {
	background-color: #e8e8e8;
}

.madori #secMadori {
	position: relative;
	max-width: 1000px;
}
.madori #secMadori .leftBox {
	width: 30%;
	max-width: 300px;
}
.madori #secMadori .leftBox .price {
	padding-top: 10%;
}
.madori #secMadori .leftBox .jukoBox {
	padding-top: 10%;
}
.madori #secMadori .zumenBox {
	width: 62%;
	max-width: 620px;
}
.madori #secMadori .pdfBox {
	position: absolute;
	width: 30%;
	right: 66%;
	bottom: 20%;
}
.madori #secMadori .pdfBox a {
	background-color: #b3a263;
	border: #000 solid 1px;
	border-radius: 10px;
	color: #fff;
	font-size: 1.8vw;
	font-size: clamp(14px, 1.6vw, 18px);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 13em;
	height: 3em;

}
.madori #secMadori .pdfBox .price {
	display: none;
}
.madori #secMadori .houiBox {
	position: absolute;
	width: 16%;
	right: 70%;
	bottom: 5%;
}
.madori #sec02 {
    width: 96%;
	padding-top: 30px;
}
.madori #sec02 .itemBox {
    width: 24%;
    background-color: #fff;
	padding-bottom: 1%;
}
.madori #sec02 .itemBox:hover {
	background-color: #e8e8e8;
}

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

@media screen and (max-width: 599px) {
	.madori #secMadori .leftBox {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	
	}
	.madori #secMadori .leftBox .typeBox {
		width: 60%;
		margin: 0 auto;
	}
	.madori #secMadori .leftBox .price {
		width: 100%;
		margin: 0 auto;
		display: none;
	}
	.madori #secMadori .leftBox .jukoBox {
		width: 100%;
		margin: 0 auto;
	}
	.madori.typeA #secMadori .leftBox .jukoBox {
		width: 95%;
	}
	.madori.typeB #secMadori .leftBox .jukoBox {
		width: 70%;
	}
	.madori.typeC #secMadori .leftBox .jukoBox {
		width: 74%;
	}
	.madori.typeD #secMadori .leftBox .jukoBox {
		width: 90%;
	}
	.madori #secMadori .zumenBox {
		width: 100%;
		padding-top: 5%;
		
	}
	.madori #secMadori .pdfBox {
		width: 100%;
		position: static;
		margin: 20px auto;
	}
	.madori #secMadori .pdfBox .price {
		display: block;
		width: 70%;
		margin: 0 auto 10px;
	}
	.madori #secMadori .pdfBox a {
		width: 70%;
		margin: 0 auto;
	}
	.madori #secMadori .houiBox {
	width: 100%;
		position: static;
		margin: 0;
		text-align: right;
}
	.madori #secMadori .houiBox img {
		width: 35%;
	}
	.madori #sec02 {
		width: 92%;
		padding-top: 10px;
	}
	.madori #sec02 .itemBox {
		width: 48%;
	}
}