@charset "utf-8";
.__bold{
	font-weight:bold;
}
.__price{
	
}
.__price__large{
	font-size:117%;
	font-weight:bold;
}
.__sim{
	margin-top:2.4em;
}
.__head-reference{
	opacity:0.8;
}


#toppageBody { background: rgba(187, 187, 187, 1); }
	#toppageBody #headerBox {
		margin: 6rem 0;
		background: rgba(187, 187, 187, 1);
	}
	#toppageBody #headerBox .initBox { display: block; }
		#toppageBody #headerBox .initBox h1 {
			width: 100%;
			font-size: 6vw;
			font-weight: 900;
			text-align: center;
		}
			#toppageBody #headerBox .initBox h1 .img { margin-bottom: 3rem; }
		#toppageBody #headerBox .initBox .backBtnBox { display: none; }

		#toppageBody .configuratorSetBox a { color: rgba(51, 51, 51, 1); }
		
		#toppageBody #footerSnsUl li a {
			color: rgba(0, 0, 0, 1);
		}
		#toppageBody .houseListBox { text-align: center; }

#optionSelectSettingBox li a {
	display: flex;
	justify-content: space-between;
	align-items:center;
	width: 100%;
	padding-bottom: 0.2em;
	border-bottom: 1px dotted rgba(187, 187, 187, 0.5);
	margin-bottom: 0.2em;
	color: rgba(51, 51, 51, 1);
}
	#optionSelectSettingBox li a .selectTitle { flex: 1; }
	#optionSelectSettingBox li a .selectType {
		/*
		text-align: right;
		background: rgba(187, 187, 187, 0.5);
		padding: 0.25em 1em;
		*/
		text-align: center;
		display: inline-block;
		border: 1px solid rgba(0, 0, 0, 0.75);
		padding: 0.25em 0;
		width: 4em;
		font-size: 1.2rem;
	}
		#optionSelectSettingBox li a .selectType.selected {
			/*
			background: rgba(0, 115, 170, 0.25);
			*/
			background-color: rgba(195, 195, 195, 1);
			border-color: rgba(195, 195, 195, 1);
		}

#priceBox {
/*	background: rgba(187, 187, 187, 1);*/
	background: rgba(54, 53, 54, 1);
	color: rgba(255, 255, 255, 1);
	padding: 1rem 0;
}
#priceBox h2 { font-size: 1.4rem; margin-bottom:0.435em;}
#priceDetailBox {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
	#priceDetailBox > * {
		width: 30%;
		text-align: right;
		position: relative;
	}
		#priceDetailBox > *::before {
			display: block;
		/*	font-size: 70%;*/
			opacity: 0.8;
			text-align: left;
		}
		#priceDetailBox > .optionBox::before { content: 'オプション価格'; }
		#priceDetailBox > .totalBox::before { content: '合計価格'; }
		#priceDetailBox > .repaymentBoxA::before { content: '返済目安（40年）'; }
		#priceDetailBox > .repaymentBoxB::before { content: '返済目安（35年）'; }
		#priceDetailBox > .repaymentBoxB {display: none; }

		#priceDetailBox .optionBox .detailicon { margin-right: 0.5em; }
		#priceDetailBox .largerText { font-size: 230%; font-weight: bold;margin-right:4px;}

#howtoBox {
	margin-top: 1.75em;
	margin-bottom: 1.75em;
}
	#howtoBox h3 {
				margin-bottom: 0.5em; 
/*				*/
font-size:2.4rem;
line-height:1.3;

					}
#howtoBox ul {
	background:#f1f1f1;
	padding:12px;
}
#howtoBox ul li{
	font-size:1.2rem;
	line-height:1.5;
	color: rgba(51, 51, 51, 0.85);
	}

	#howtoBox2 ul {
	padding:6px 4px;
	margin-top:10px;
	display:inline-flex;
	gap:0 16px;
	background:rgba(255,255,255,0.1);
}
#howtoBox2 ul li{
	font-size:0.8rem;
	line-height:1.3;
	color: rgba(255, 255, 255, 0.85);
	}

#tabMenuNavBtnBox {
	display: flex;
	flex-wrap: nowrap;
	justify-content: left;
	padding: 1rem 0;
	background: rgba(255, 255, 255, 1);
}
	#tabMenuNavBtnBox > a {
		flex: 1;
		text-align: center;
		align-items: center;
		margin: 0 1px;
		display: block;
		color: rgba(51, 51, 51, 1);
		border: 1px solid rgba(187, 187, 187, 0.5);
		padding: 1em 0;
	}
		#tabMenuNavBtnBox > a:hover {
			border-color: rgba(0, 115, 170, 1);
			color: rgba(0, 115, 170, 1);
		}
		#tabMenuNavBtnBox > a.nowpage {
			background: rgba(187, 187, 187, 0.5);
		}
	#tabMenuNavBtnBox > a:first-child { margin-left: 0; }
	#tabMenuNavBtnBox > a:last-child { margin-right: 0; }

.avoidColumn {
/*	float: left;*/
	display: inline-block;
	margin-top: 1em;
	margin-right: 2rem;
}
/*.avoidColumn:first-child{
		margin-top: 0;
}*/
	.optionstyleBox ul, 
	.svgNaviBox ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
	}
		.optionstyleBox ul li, 
		.svgNaviBox ul li {
			display: inline-block;
			margin: 0 2rem 1rem 0;
		}
			.optionstyleBox ul li a:not(.selectiveqa-back-btn), 
			.svgNaviBox ul li a:not(.selectiveqa-back-btn) {
				width: 100px;
				height: 100px;
				display: table-cell;
				overflow: hidden;
				border-radius: 50%;
				border: 1px solid rgba(187, 187, 187, 1);
				text-align: center;
				vertical-align: middle;
				color: rgba(51, 51, 51, 1);
				font-size: 1rem;
				line-height: 125%;
			}
			.svgNaviBox ul li.nowsetting a:not(.selectiveqa-back-btn) {
				border-width: 3px;
				border-color: rgba(0, 115, 170, 1);
			}
			.svgNaviBox ul li a img { margin-bottom: 0; width: 100%;height:100%; }
			.svgNaviBox ul li, 
			.optionstyleBox ul li, 
			.svgNaviBox ul li.option.setCenterText {
				position: relative;
			}
				.svgNaviBox ul li .typename, 
				.optionstyleBox ul li .typename, 
				.svgNaviBox ul li.add-group.setCenterText .typename, 
				.svgNaviBox ul li.option.setCenterText .typename {
					position: absolute;
					top: 50%;
					left: 50%;
					text-align: center;
					transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
					white-space: nowrap;
					pointer-events: none;
					font-size: 1rem;
					line-height: 125%;
					text-shadow: 
						2px 2px 1px rgba(255, 255, 255, 1),
						-2px 2px 1px rgba(255, 255, 255, 1),
						2px -2px 1px rgba(255, 255, 255, 1),
						-2px -2px 1px rgba(255, 255, 255, 1),
						2px 0px 1px rgba(255, 255, 255, 1),
						0px 2px 1px rgba(255, 255, 255, 1),
						-2px 0px 1px rgba(255, 255, 255, 1),
						0px -2px 1px rgba(255, 255, 255, 1)
					;
				}
				.svgNaviBox ul li .typename.setbottomline, 
				.optionstyleBox ul li .typename.setbottomline, 
				.svgNaviBox ul li.add-group.setCenterText .typename.setbottomline, 
				.svgNaviBox ul li.option.setCenterText .typename.setbottomline {
					top: auto;
					bottom: -1rem;
				}
.avoidColumn h4 {
/*	margin: 1.5em 0;*/
	margin: 0.875em 0;
/*	font-size: 86%;*/
	text-align: center;
	position: relative;
}
	.avoidColumn h4 span {
		display: inline-block;
		padding: 0 1em;
		background: rgba(255, 255, 255, 1);
		font-size:1.6rem;
	}
	.avoidColumn h4::after {
		content: '';
		display: block;
		width: 100%;
		height: 1em;
		border-bottom: 1px dotted rgba(51, 51, 51, 0.5);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.avoidColumn p {
		font-size: 1.4rem;
		text-align: center;
		margin-top:-1em;
	}
.commentBox, 
.basestyleBox { margin-top: 1rem; }
.basestyleBox {
	font-size: 1.2rem;
	background: rgba(221, 228, 244, 1);
	padding: 2.25em 1em 1em 1em;
	position: relative;
	line-height: 150%;
}
.svgBox { position: relative; }
.svgBox::before, 
.basestyleBox::before {
	content: '';
	width: 100vw;
	height: 100%;
	background: rgba(221, 228, 244, 1);
	position: absolute;
	z-index: -1;
	top: 0;
	right: -10vw;
}
.basestyleBox::before { content: none; }
	.basestyleBox::after {
/*
		content: '選択項目';
		content: 'オプション一覧';
*/
		content: '選択内容一覧';
		position: absolute;
		top: 0.5em;
		left: 1em;
		font-weight:bold;
		font-size:1.3rem;
		margin-bottom:0.453em;
	}
@media only screen and (max-width: 768px) {
	.svgBox::before, 
	.basestyleBox::before {
		right: -5vw;
	}
}
.svgBox::before { background: rgba(255, 255, 255, 1); z-index: -1; right: 0; width: 105vw; }
@media only screen and (min-width: 1580px) {
	.svgBox::before, 
	.basestyleBox::before { right: calc(((100vw - 1280px) / 2) * -1); }
}

dl.tablist { margin-bottom: 6rem; }
	dl.tablist > dt {
/*		font-size: 1.6rem;*/
		font-size: 2rem;
		padding: 0.25em 0;
		background: rgba(195, 195, 195, 1);
		text-align: center;
		
		font-weight: bold;
		/*
		margin: 0 calc(50% - 45vw);
		padding: 0 0 0.25em 0;
		calc(5vw - ((100vw - 100%) / 2))
		border-bottom: 1px solid rgba(187, 187, 187, 0.5);
		*/
		margin-bottom: 1em;
	}
	#priceDl dt { margin-bottom: 0; }
	#priceDl dd {
		background: rgba(221, 228, 244, 1);
		padding: 1em 0;
	}
	#priceDl dd dd {
		padding: 0.25em 0;
	}
	#exteriorDl h3, 
	#interiorDl h3 { display: none; }
.floorTable {
	float: right;
	border-collapse:  collapse;
	line-height: 125%;
}
	.floorTable td {
		padding-left: 1em;
		text-align: right;
	}

	.floorSetBox h4.floorTitle {
		/*
		background: rgba(0, 0, 0, 1);
		color: rgba(255, 255, 255, 1);
		display: inline-block;
		*/
		font-weight: bold;
		padding: 0 2em;
	}
.optionstyleBox { position: relative; }
	.optionstyleBox::before {
		content: 'オプション';
		position: absolute;
		top: -3em;
		left: 0;
		display: block;
		font-size: 1.2rem;
		border-bottom: 1px solid rgba(51, 51, 51, 1);
	}

	.configuratorBox h3 { margin-bottom: 0.25em; }

	#totalpriceBox dl.underline {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: baseline;
		border-bottom: 1px solid rgba(51, 51, 51, 0.75);
		margin-bottom: 0.5em;
	}
		#totalpriceBox dt{
			font-size:92%;
		}
				#totalpriceBox .cautionUl{
			padding-top: 0.875em;
		}
						#totalpriceBox .cautionUl li{
			font-size:85%;
		}
	#totalpriceBox dl.underline:first-child { border-top: 1px solid rgba(51, 51, 51, 1); }
	/*	#totalpriceBox dl.underline dt { width: 48%; }*/
		#totalpriceBox dl.underline dd { flex: 1; text-align: right; }


	#contactformBox .zipcodeBox input { width: 5em; margin: 0 0.5em 0.5em 0.5em; }
		#contactformBox .mwform-checkbox-field.vertical-item { display: block; }
		#contactformBox .mwform-checkbox-field.vertical-item input { display: inline-block; margin-right: 1em; width: auto; }
	#contactformBox .address12SetBox {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
		#contactformBox .address1Box { display: inline-block; }
		#contactformBox .address2Box { flex: 1; padding-left: 1em; }

	#facilityDl h3 {
		text-align: center;
		margin-bottom: 1em;
	}
		#facilityDl h3::before {
			content: '【';
			margin-right: 0.5em;
		}
		#facilityDl h3::after {
			content: '】';
			margin-left: 0.5em;
		}

/* [script] ============================================ */
.configuratorBox .image.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

.sticky {
	position: -webkit-sticky;
	position: sticky;
/*	top: 0;*/
	z-index: 1000;
}
#headerBox.fixHead {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}
.image.sticky { z-index: 500; line-height:0;font-size:0;}

#windowClose { position: relative; }
	#windowClose a {
		position: absolute;
		top: -33px;
		right: 10px;
		background: #afb7bc;
		color: #FFF;
		font-weight: bold;
		width: 50px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25px;
		border-radius: 50%;
		z-index: 20000;
	}
	#windowClose a:hover {
		color: #b93d0c;
	}

/* [sp] ============================================ */
@media only screen and (max-width: 768px) {
	body { font-size: 1.4rem; }
	#tabMenuNavBtnBox > a, 
	#headerBox .text { font-size: 1.2rem; }
	#priceBox { line-height: 1.3; }
	#priceBox .initBox{width:96vw;}
		.optionstyleBox ul li .typename, 
		.svgNaviBox ul li.add-group.setCenterText .typename, 
		.svgNaviBox ul li.option.setCenterText .typename, 
		#priceDetailBox { font-size: 1rem; }
	#tabMenuNavBtnBox { padding: 0.5rem 0; overflow-x: scroll; }
		#tabMenuNavBtnBox a { line-height: 1; white-space: nowrap; }
	.optionstyleBox ul li a, 
	.svgNaviBox ul li a {
		width: 80px;
		height: 80px;
	}
	#toppageBody #headerBox .initBox h1 { font-size: 8vw; }
	#toppageBody .houseListBox { text-align: left; }
	.optionstyleBox ul li, 
	.svgNaviBox ul li { margin: 0.5rem; }
	
	.optionstyleBox ul li a:not(.selectiveqa-back-btn), 
	.svgNaviBox ul li a:not(.selectiveqa-back-btn) {
		width: 80px;
		height: 80px;
	}

	.avoidColumn {
		margin-right: 0;
		display: block;
	}
		.svgNaviBox ul {
			justify-content: center;
		}
		.svgNaviBox .setcautionBox .cautionUl { display: block; }
}
@media only screen and (min-width: 1280px) {
	#toppageBody #headerBox .initBox h1 { font-size: 9rem; letter-spacing: -0.02em; }
}