@charset "utf-8";
/* ===================================================================

 file name  :plan.css
 style info :住宅を建てよう ＞ 間取り打ち合わせページ

=================================================================== */

/* =============================

	overwrite

=============================== */



/* =================================== */
#main section{
	margin:0 0 70px;
}
#main section .inner{
	padding:50px 4.5%;
	background:#fff;
}
#main h4{
	margin:0 0 36px;
	font-size:26px;
}
#main h4 .point{
	display:inline-block;
	width:70px;
	height:70px;
	margin:0 28px 0 0;
	padding:16px 0 0;
	background:#fff;
	color:#ea7722;
	border:solid 2px #ea7722;
	border-radius:50%;
	font-size:20px;
	text-align:center;
	line-height:1.2;
	vertical-align:middle;
}
#main h4 .point .en{
	display:block;
	font-size:14px;
	font-weight: normal;
}
#main h5{
	margin:56px 0 66px;
	padding:0 0 0 14px;
	font-size:18px;
	border-left:solid 4px #000;
}


#main section p{
	font-size:16px;
	line-height:2.25;
}
#main section figure{
	text-align:center;
}


.cl-o{	color:#ea7722;}


/* .bg */
#main .bg{
	margin:0 0 70px;
	padding:50px 50px 1px;
	background:#f3f3f3 url(../../../images/making/order/plan/bg_plan.jpg) no-repeat right top;
}
#main .bg .wrap{
	margin:0 0 50px;
	padding:0 0 117px;
	position:relative;
	border-bottom:solid 1px #cfcfcf;
}
#main .bg .cap{
	margin:0 0 26px;
	text-align:center;
}
#main .bg h3{
	margin:0 0 30px;
	font-size:36px;
	text-align:center;
}
#main .bg h3:before{
	content:"［";
	margin:0 50px 0 0;
	font-size:60px;
	vertical-align:-6px;
}
#main .bg h3:after{
	content:"］";
	margin:0 0 0 50px;
	font-size:60px;
	vertical-align:-6px;
}
#main .bg .catch{
	width:96.7272727272%;
	margin:0 auto 35px;
	padding:35px 0;
	background:#fff;
	text-align:center;
	font-size:20px;
}
#main .bg .catch p span{
	display:block;
	margin:0 0 5px;
	font-size:26px;
	text-decoration:underline;
}
#main .bg .catch + p{
	font-size:16px;
	line-height:2.25;
}

#main .bg .flow{
	width:143px;
	height:143px;
	padding:50px 0 0;
	background:#ea7722;
	color:#fff;
	font-size:18px;
	border-radius:50%;
	text-align:center;
	position:absolute;
	left:0;
	right:0;
	bottom:-70px;
	margin:0 auto;
}
#main .bg .flow:before{
	content:"";
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 5px 0 5px;
	border-color: #ea7922 transparent transparent transparent;
	position:absolute;
	left:0;
	right:0;
	bottom:-7px;
	margin:0 auto;
}


/* .sec01 */
#main .sec01 figure img{
	width:100%;
	max-width:916px;
	height:auto;
}

/* .sec02 */
#main .sec02 figure img{
	width:100%;
	height:auto;
}


/* .sec03 */
#main .sec03 .list{
	margin:65px 0 0;
}
#main .sec03 .list li{
	width:48%;
	float:left;
	padding:0 0 34px;
	border:solid 1px #ea7722;
}
#main .sec03 .list li:nth-child(odd){
	clear:both;
}
#main .sec03 .list li:nth-child(even){
	float:right;
}
#main .sec03 .list li:nth-child(3),
#main .sec03 .list li:nth-child(4){
	margin:40px 0 0;
}
#main .sec03 .list li dt{
	margin:0 0 18px;
	border-bottom:solid 1px #ea7722;
	text-align:center;
	font-size:18px;
	font-weight: bold;
	background:#fff1d6;
}
#main .sec03 .list li dt .t01{
	display:inline-block;
	width:22%;
	padding:12px 0;
	background:#ea7722;
	color:#fff;
}
#main .sec03 .list li dt .t02{
	display:inline-block;
	width:78%;
	color:#ea7722;
}
#main .sec03 .list li dd figure{
	margin:0 0 30px;
}
#main .sec03 .list li dd p{
	padding:0 32px;
	line-height:1.6;
}
/* .sec04 */
#main .sec04 figure img{
	width:100%;
	max-width:913px;
	height:auto;
}



#main .attention{
	padding:50px 4%;
	background:#fff1d6;
}
#main .attention dl{
	padding:0 0 0 30px;
	border-left:solid 4px #000;
}
#main .attention dl dt{
	margin:0 0 14px;
	font-size:20px;
	font-weight: bold;
}
#main .attention dl dd{
	font-size:16px;
	line-height:2.25;
}


#main .inq{
	margin:100px 0;
	padding:64px 0 80px;
	background:#f0f0f0;
}
#main .inq h3{
	margin:0 0 40px;
	font-size:18px;
	font-weight: bold;
	text-align:center;
}
#main .inq h3:before{
	content:"";
	display:block;
	width:50px;
	height:1px;
	background:#000;
	margin:0 auto 22px;
}
#main .inq .inq-inner{
	width:830px;
	margin:0 auto;
	padding:22px 37px 22px 50px;
	background:#fff;
}
#main .inq .inq-inner dl{
	width:334px;
	margin:0 42px 0 0;
	padding:10px 0 15px;
	float:left;
	border-right:solid 1px #e3e3e3;
}
#main .inq .inq-inner dl dt{
	margin:0 0 10px;
	font-size:16px;
}
#main .inq .inq-inner .btn-eft{
	margin:15px 0 0;
}



@media screen and (max-width: 1200px){
	#main .sec03 .list li dt{
		font-size:1.5vw;
	}
}
@media screen and (max-width: 1000px){
	#main .sec03 .list li dt{
		font-size:15px;
	}
}





/* ==========================================================================
   smartPhone
   ========================================================================== */
@media screen and (max-width: 640px){
	/* =============================
	
		overwrite
	
	=============================== */
	
	
	/* =================================== */
	#main section{
		margin:0 0 30px;
	}
	#main section .inner{
		padding:20px 15px;
		background:#fff;
	}
	#main h4{
		margin:0 0 15px;
		padding:0 0 0 60px;
		font-size:15px;
		line-height:1;
		text-indent:-60px;
	}
	#main h4 .point{
		width:50px;
		height:50px;
		margin:0 10px 0 0;
		padding:11px 0 0;
		font-size:16px;
		text-indent:0;
		vertical-align:middle;
	}
	#main h4 .point .en{
		font-size:10px;
	}
	#main h5{
		margin:20px 0 30px;
		padding:0 0 0 10px;
		font-size:14px;
		border-left:solid 2px #000;
	}
	
	#main section p{
		font-size:12px;
		line-height:1.8;
	}
	
	
	/* .bg */
	#main .bg{
		margin:0 0 50px;
		padding:30px 15px;
		background:#f3f3f3 url(../../../images/making/order/plan/bg_plan.jpg) no-repeat right top;
		background-size:50% auto;
	}
	#main .bg .wrap{
		margin:0 0 70px;
		padding:0 0 70px;
	}
	#main .bg .cap{
		width:45px;
		margin:0 auto 20px;
	}
	#main .bg h3{
		margin:0 0 30px;
		font-size:18px;
	}
	#main .bg h3:before{
		font-size:30px;
		margin:0 10px 0 0;
	}
	#main .bg h3:after{
		font-size:30px;
		margin:0 0 0 10px;
	}
	#main .bg .catch{
		margin:0 0 20px;
	}
	
	#main .bg .catch{
		width:100%;
		margin:0 auto 20px;
		padding:25px 15px;
		font-size:15px;
	}
	#main .bg .catch p span{
		font-size:20px;
	}
	#main .bg .catch + p{
		font-size:12px;
		line-height:1.8;
	}
	
	#main .bg .flow{
		width:100px;
		height:100px;
		padding:30px 0 0;
		font-size:14px;
		border-radius:50%;
		bottom:-50px;
	}
	
	
	/* .sec03 */
	#main .sec03 .list{
		margin:30px 0 0;
	}
	#main .sec03 .list li{
		width:100%;
		float:none;
		padding:0 0 20px;
	}
	#main .sec03 .list li + li{
		margin:10px 0 0 !important;
	}
	#main .sec03 .list li:nth-child(even){
		float:none;
	}
	#main .sec03 .list li dt{
		margin:0 0 15px;
		font-size:12px;
	}
	#main .sec03 .list li dt .t01{
		width:35%;
		padding:10px 0;
	}
	#main .sec03 .list li dt .t02{
		width:65%;
	}
	#main .sec03 .list li dd figure{
		width:65%;
		margin:0 auto 20px;
	}
	#main .sec03 .list li dd p{
		padding:0 15px;
	}
	
	
	#main .attention{
		margin:0 15px;
		padding:20px 15px;
	}
	#main .attention dl{
		padding:0 0 0 15px;
		border-left:solid 2px #000;
	}
	#main .attention dl dt{
		margin:0 0 10px;
		font-size:14px;
	}
	#main .attention dl dd{
		font-size:12px;
		line-height:1.8;
	}
	
	#main .inq{
		margin:50px 0;
		padding:30px 15px 40px;
	}
	#main .inq h3{
		margin:0 0 20px;
		font-size:14px;
	}
	#main .inq h3:before{
		width:25px;
		height:1px;
		margin:0 auto 10px;
	}
	#main .inq .inq-inner{
		width:100%;
		padding:20px;
	}
	#main .inq .inq-inner dl{
		width:100%;
		margin:0 0 15px;
		padding:0 0 15px;
		float:none;
		border-right:none;
		border-bottom:solid 1px #e3e3e3;
		text-align:center;
	}
	#main .inq .inq-inner dl dt{
		margin:0 auto 10px;
		font-size:12px;
	}
	#main .inq .inq-inner dl dd{
		width:200px;
		margin:0 auto;
	}
	#main .inq .inq-inner .btn-eft{
		margin:15px 0 0;
	}
	
	
	
	
}