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

 file name  :study.css
 style info :住宅勉強会 >すまいるセミナー

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

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

	overwrite

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



/* =================================== */
#main .cl-o{ color:#ea7722;}

#main .lead{
	margin:0 0 92px;
}
#main .lead h2{
	margin:0 0 30px;
	font-size:30px;
	text-align:center;
	color:#ea7722;
}
#main .lead h2:before{
	content:"［";
	margin:0 15px 0 0;
	font-size:60px;
	vertical-align:-8px;
	color:#000;
}
#main .lead h2:after{
	content:"］";
	margin:0 0 0 15px;
	font-size:60px;
	vertical-align:-8px;
	color:#000;
}
#main .lead .catch{
	margin:0 0 80px;
	text-align:center;
	font-size:16px;
}
#main .lead .list{
	max-width:1000px;
	margin:0 auto 90px;
	font-size:22px;
	font-weight: bold;
}

#main .lead .list li{
	width:45%;
	float:left;
	margin:0 0 27px 27px;
	border-bottom:solid 1px #ea7722;
	position:relative;
	letter-spacing:-0.05em;
}
#main .lead .list li:nth-child(odd){
	clear:both;
}
#main .lead .list li:nth-child(even){
	float:right;
}
#main .lead .list li:before{
	content:"";
	display:block;
	width:16px;
	height:16px;
	border:solid 3px #4b4b4b;
	border-radius:50%;
	position:absolute;
	top:0;
	left:-27px;
	bottom:0;
	margin:auto 0;
}
#main .lead .wrap{
	margin:0 0 102px;
}
#main .lead .wrap .txt-block{
	width:54%;
	float:left;
	font-size:16px;
	line-height:2.25;
}
#main .lead .wrap .txt-block p{
	margin:0 0 40px;
}

#main .lead .wrap .fig{
	width:43.3333333333%;
	float:right;
	position:relative;
}
#main .lead .wrap .fig figcaption{
	position:absolute;
	color:#fff;
	right:0.5em;
	bottom:0.2em;
}
#main .lead .wrap .fig img{
	width:100%;
	height:auto;
}
#main .lead .info{
	padding:28px;
	background:#ededed;
}
#main .lead .info .ttl-info{
	width:330px;
	padding:40px 0;
	float:left;
	font-size:30px;
	background:#fff;
	position:relative;
	text-align:center;
	color:#ea7722;
}
#main .lead .info .ttl-info h3 span{
	border-bottom:solid 1px #f08200;
}
#main .lead .info .ttl-info .point{
	position:absolute;
	top:-52px;
	left:-14px;
	width:84px;
	height:84px;
	padding:25px 0 0;
	background:#f08200;
	color:#fff;
	font-size:20px;
	text-align:center;
	border-radius:50%;
}
#main .lead .info .summary{
	width:calc(100% - 360px);
	float:left;
	margin:0 0 0 30px;
	font-size:16px;
	line-height:2;
}
#main .lead .info .summary dt{
	float:left;
	font-weight: bold;
}
#main .lead .info .summary dt:after{
	content:"：";
	font-weight: normal;
}


#main .ttl{
	margin:0 0 36px;
	padding:8px 0 22px;
	font-size:20px;
	border-bottom:solid 2px #000;
}

#main .sec01{
	margin:0 0 80px;
}
#main .sec01 .list{
	max-width:1100px;
	margin:0 auto;
	padding:0 0 70px;
}
#main .sec01 .list li{
	width:31.8181818181%;
	float:left;
	margin:0 0 0 2.27272727273%;
}
#main .sec01 .list li:first-child{
	margin-left:0;
}
#main .sec01 .list li figure img{
	width:100%;
	height:auto;
}
#main .sec01 .list li p{
	margin:10px 0 0;
	font-size:16px;
	line-height:1.8;
}
#main .sec01 .btn-eft{
	width:300px;
	margin:0 auto;
}

#main .sec02{
	width:47.5%;
	float:left;
}
#main .sec03{
	width:47.5%;
	float:right;
}

#main .sec02 img,
#main .sec03 img{
	width:100%;
	height:auto;
}

#main .btn-area{
	margin:70px 0 0;
	padding:60px 0 0;
	border-top:solid 1px #d8d8d8;
	text-align:center;
}
#main .btn-area dt{
	margin:0 0 5px;
	font-size:16px;
}
#main .btn-area dd:not(:last-child){
	margin-bottom: 10px;
}

@media screen and (max-width: 1200px){
	#main .lead .list{
		font-size:1.8vw;
	}
}

@media screen and (max-width: 1000px){
	#main .lead .list{
		font-size:18px;
	}
}


#main .inq{
	padding: 100px 0 10px;
}
#main .inq.confirm{
	margin: 0;
}
#main #form h3{
	margin:0 0 35px;
	padding:0 0 15px;
	border-bottom:solid 1px #000;
	font-size:28px;
}

@media screen and (max-width: 640px){
	#main .inq{
		padding: 10px 0 10px;
	}
	#main #form h3{
		margin:30px 0 30px;
		padding:0 0 10px;
		font-size:16px;
	}
	#main #form .form-area table td{
		background: #f7f7f7;
	}
}

/* ==========================================================================
   smartPhone
   ========================================================================== */
@media screen and (max-width: 640px){
	/* =============================

		overwrite

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

	/* =================================== */
	#main .lead{
		margin:0 0 50px;
		padding:0 15px;
	}
	#main .lead h2{
		margin:0 0 30px;
		font-size:18px;
	}
	#main .lead h2:before{
		font-size:18px;
		vertical-align:0;
	}
	#main .lead h2:after{
		font-size:18px;
		vertical-align:0;
	}
	#main .lead .catch{
		text-align:left;
		margin:0 0 30px;
		font-size:12px;
		line-height:1.8;
	}
	#main .lead .list{
		width:100%;
		margin:0 auto 30px;
		padding:0;
		font-size:14px;
	}

	#main .lead .list li{
		width:auto;
		float:none;
		margin:0 0 20px 20px;
		letter-spacing:-0.08em;
	}
	#main .lead .list li:nth-child(even){
		float:none;
	}
	#main .lead .list li:before{
		width:10px;
		height:10px;
		border:solid 2px #4b4b4b;
		left:-20px;
	}
	#main .lead .wrap{
		margin:0 0 50px;
	}
	#main .lead .wrap .txt-block{
		width:100%;
		float:none;
		font-size:12px;
		line-height:1.8;
	}
	#main .lead .wrap .txt-block p{
		margin:0 0 20px;
	}

	#main .lead .wrap .fig{
		width:100%;
		float:none;
	}
	#main .lead .wrap .fig figcaption{
		font-size:10px;
	}
	#main .lead .info{
		padding:15px;
	}
	#main .lead .info .ttl-info{
		width:100%;
		margin:0 0 30px;
		padding:20px 0;
		float:none;
		font-size:20px;
	}
	#main .lead .info .ttl-info .point{
		top:-40px;
		left:-10px;
		width:70px;
		height:70px;
		padding:22px 0 0;
		font-size:16px;
	}
	#main .lead .info .summary{
		width:100%;
		float:none;
		margin:0;
		font-size:12px;
		line-height:1.6;
	}
	#main .lead .info .summary dt{
		float:none;
	}
	#main .lead .info .summary dd{
		margin:0 0 10px;
	}

	#main .ttl{
		margin:0 0 20px;
		padding:4px 0 10px;
		font-size:14px;
		border-bottom:solid 1px #000;
	}

	#main .sec01,
	#main .sec02,
	#main .sec03{
		margin:0 0 50px;
		padding:0 15px;
	}
	#main .sec01 .list{
		max-width:100%;
		margin:0 auto;
		padding:0;
	}
	#main .sec01 .list li{
		width:100%;
		float:none;
		margin:0 0 20px;
	}
	#main .sec01 .list li p{
		margin:10px 0 0;
		font-size:12px;
	}
	#main .sec01 .btn-eft{
		width:100%;
	}

	#main .sec02{
		width:100%;
		float:none;
	}
	#main .sec03{
		width:100%;
		float:none;
	}

	#main .btn-area{
		margin:0;
		padding:50px 15px 0;
	}
	#main .btn-area dt{
		margin:0 0 5px;
		font-size:12px;
	}







}