@charset "utf-8";
.main{padding-top:85px;font-size: 16px;}
.cont_honda {
	position: relative;
	background-color: #fffaed;}
.cont_honda img{max-width: 100%;margin:0;padding:0}
.cont_honda ul,
.cont_honda li{margin:0;padding:0}

/*　メインイメージ */
.main_img {
	width: 100%;
	height: 500px}
.main_img img{
	width: 100%;
	height: 500px;
	object-fit: cover;}


#breadcrumbList {
	position: absolute;
	top: 60px;
	left: 4.6875%;
}
@media screen and (max-width: 750px) {
	img{width: 100%}
	.main{padding-top:0}
	.main_img ,.main_img img{height:auto}
	#breadcrumbList {top:0;}
}

/*　ページタイトル　＆ ページナビ */
.pageNav {
	width: 90.625%;
	margin: 40px auto 100px;
	line-height: 1;}
.pageNav h1 {
	font-size: 42px;
	font-weight: bold;
	letter-spacing: 0;}
.pageNav .float_1{
	float: left;
  	background: url('../images/series_s/fin-series.png') no-repeat;
  	background-size: 104px;
  	vertical-align: top;
	padding-left:120px;
	padding-bottom:20px}
.pageNav .catch {
	font-size: 16px;
	letter-spacing: 0em;
	margin-bottom: 15px;
	margin: 5px 0 10px;}

.pageNav ul {
	float: right;
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	padding:25px 0 0
}
.pageNav li {
	display: inline-block;
	border-left: solid 1px #3c3939;
	padding: 0 24px;
}
.pageNav li:last-child {
	border-right: solid 1px #3c3939;
}
.pageNav li span {
	display: block;
	font-family: din-condensed, sans-serif;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 0.05em;
	margin-bottom: 10px;}

@media screen and (max-width: 750px) {
	.pageNav {margin: 20px auto 70px;}
	.pageNav .float_1{float: none;padding:0;text-align: center;background:none}
	.pageNav .float_1 img{width: 100PX;margin-bottom: 10px}
	.pageNav h1 {font-size: 28px;}
	.pageNav .catch {font-size: 13px}
	.pageNav li span {display: none}
	.pageNav ul {float:none;text-align:center;font-size: 12px;}
	.pageNav li {width: 22%;padding:10px 0}
	.pageNav li:nth-of-type(3) {width: 30%}
}

/*  ブロック共通  */
.h_block{padding:80px 0;line-height: 2.15;}
.w1160{
	width: 1160px;
	margin: 0 auto;
	position: relative}
.h_block h2{
	font-size: 32px;
	text-align: center;
	line-height:1;
	letter-spacing: .05em;
	padding-bottom: 40px}
.h_block h2 span {
	background: linear-gradient(transparent 70%, rgba(200, 200, 200, 0.7) 30%);
}
.h_block h2 span.din {
	font-family: din-condensed, sans-serif;
	font-size: 20px;
	line-height: 1;
	background: none;}
.h_block .catch{
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 50px}
.bg_wall{
	background: url('../images/series_s/bodyBg.jpg');
	text-align: center}

/*  コンセプト  */
#concept {padding: 60px 0 }
.h_block#concept h2{padding-bottom: 100px}
#concept .fl_l{width: 570px}
#concept .fl_r{width: 540px}
#concept h3{font-size: 24px;margin-bottom: 20px}
#concept .catch{
	text-align: left;
	font-size: 18px;
	font-weight: bold; 
	margin-bottom: 10px}
#concept .txt{margin-bottom: 40px}
#concept .img img{padding:8px}
#concept .txt span{display: block}

/*  標準仕様  */
#ecuipment .catch{font-size: 17px}
#ecuipment ul{
	width: 1010px;
	margin: 0 auto}
#ecuipment li{
	float: left;
	width: 300px;
	text-align: left;
	margin-left: 55px}
#ecuipment li:nth-of-type(1){margin-left: 0}
#ecuipment h3{line-height: 1.6}
#ecuipment h3 span{display: block}
#ecuipment .num{color: #ffb400;font-size: 20px }
#ecuipment .num span{
	display: inline-block;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	margin-right:6px;
	border-radius: 50px;
	background:#ffb400;
	color: #fff;
	font-family: din-condensed, sans-serif;
	font-size: 24px;
	text-align: center;
	line-height: 50px}
@media screen and (max-width: 750px) {
	.h_block h2{padding-bottom: 40px}
	.h_block#concept h2{padding-bottom: 40px}
	.h_block .catch{
		width: 90%;
		margin: 0 auto 10px;}
	#concept {padding: 0 0 60px}
	.w1160{width: 90%;}
	.h_block#concept .catch,
	#concept .fl_l,
	#concept .fl_r{width: 100%}
	#concept .fl_r img{width: 100%}
	#concept .catch{font-size: 16.5px;}
	#ecuipment ul{
		width: 90%;}
	#ecuipment li{
		float: none;
		width: 100%;
		text-align: left;
		margin: 0 0 40px 0}
	#ecuipment h3 span{display: inline}
	#ecuipment .catch span{display:block}
}

/*  スタイル  */
#style .num{
	background: #ffd980;
	width: 100%;
	text-align: center;
	line-height: 1;
	padding:8px 0;
	border-radius: 30px}
#style h3{
	font-size: 20px;
	color: #ffb400;
	padding:0;margin: 0px}
#style h4{margin-bottom: 5px}
#style .img,
#style .img img{padding:0;margin: 0}
#style ul.clearfix{width: 1010px;margin: 0 auto}
#style ul.clearfix > li{
	float: left;
	width: 300px;
	text-align: left;
	margin-left: 55px}
#style ul.clearfix > li:nth-of-type(1){margin-left: 0}
#style ul.txt li:before{content: '■ ';vertical-align: top}
#style ul.txt li p{
	display: inline-block;
	line-height: 1.6;
	width: 270px;
	padding:0;
	margin:0 0 0 6px;}
	
@media screen and (max-width: 750px) {
	#style .catch {display: block}
	#style ul.clearfix{width:90%;}
	#style ul.clearfix > li{
		float: none;
		width: 100%;
		margin: 0 0 40px 0}
	#style h3{text-align: center}
	#style ul.txt li p{width: 90%;}
}


/* 施工事例 */
.w1000{
	width: 1000px ;
	margin: 0 auto;
	line-height: 1.8;
	text-align: left}
.w_block .fl_l{width: 300px;margin-bottom: 50px}
.w_block .fl_r{width: 630px;margin-bottom: 50px;position: relative}
.w_block {margin-bottom: 100px; text-align: justify}
.before1{width: 180px;float:left}
.before2{width: 440px;float: right}
.arrow1{
	position: absolute;
	top:120px;left:160px;
	color:#ffb400}
.price_box{
	border: 2px solid #ffb400;
	padding:0px 20px}
.price_box h4{font-size: 30px;line-height: 1;}
.price_box h4 span{font-size: 19px}

.float_l,
.float_r{width: 285px;position: relative;float:left}
.float_r{float:right}
.before3{width: 138px;margin:0;}
.before4{text-align: right;margin-top:10px;}
.before4 img{width: 234px;}
.arrow2{
	position: absolute;
	top:80px;left:26px;
	color:#ffb400}
.floorArea{
	background: #fff;
	padding:0 55px 40px 0;
	clear: both}
.floorArea h5{
	width: 180px;
	text-align: center;
	color: #fff;
	background:#ffb400}
.floorArea h6{
	font-size: 16px;
	padding:0;margin:0;}
.floor1{
	display: inline-block;
	position: relative;
	vrtical-align: top;
	width: 460px;
	margin-left: 55px}
.floor2{
	display: inline-block;
	position: relative;
	width: 420px;}
.drawing{
	vertical-align: top}
.before_d1,
.before_d2,
.before_d3,
.before_d4{
	display: inline-block;
	float: left}
.arrow3{
	position: absolute;
	top:190px;left:120px;
	color:#ffb400}
.floor1 .arrow3{left:130px;}

/* 施工事例　ブロック２ */
.w_block.w_block2 .fl_l{width: 370px;}
.w_block.w_block2 .fl_r{width: 550px;}
.w_block.w_block2 .fl_r p{margin:0 0 14px;float:left;}
.w_block.w_block2 .fl_r p.w344{width: 344px;margin:0 14px 14px 0}
.w192{width: 192px}
.w_block.w_block2 .price_box h4{margin-bottom: 25px}
.w_block.w_block2 .price_box h4 p{
	display: inline;
	font-weight: normal;
	font-size: 16px}

/* 施工事例　ブロック3 */
.w_block.w_block3 .fl_l{width: 300px;}
.w_block.w_block3 .fl_r{width: 624px;}
.w_block.w_block3 .fl_r p{margin:0 0 14px;float:left;}
.w_block.w_block3 .fl_r p.w418{width: 418px;margin:0 14px 14px 0}
.w_block.w_block3 .floor1{width: 543px;}
.w_block.w_block3 .floor2{width: 300px;}

@media screen and (max-width: 750px) {
	#works .catch{margin-bottom: 30px}
	.w1000{width: 90%;}
	.w_block .fl_l,
	.w_block .fl_r,
	.w_block.w_block2 .fl_l,
	.w_block.w_block2 .fl_r,
	.w_block.w_block3 .fl_l,
	.w_block.w_block3 .fl_r{width:100%;}
	.w_block .catch{margin-bottom: 40px}
	.price_box{text-align: center}
	.before1{width: 180px;margin:0 auto;float:none;}
	.before2{width: 100%;float:none;margin:0 0 20px}
	.arrow1{
		position: static;
		paddign:0;margin: 0;
		text-align: center}
	.before4 img{width:100%}
	.float_l,
	.float_r{width:100%;float:none}
	.before3{width: 180px;margin:0 auto;text-align: center}
	.before4{width: 100%;margin:0 0 20px;ext-align: center}
	.floorArea{
		padding:10%;}
	.arrow2{
		position: static;
		paddign:0;margin: 0;
		text-align: center}
	.floor1{
		width:100%;
		margin-left:0}
	.floor2{width: 100%;}
	.floor2 h6{
		padding-top:20px;
		margin-top:15px;
		border-top: solid 1px #333}
	.w_block.w_block2 .fl_r p,
	.w_block.w_block3 .fl_r p{margin:0 0 14px;float:none;}
	.w_block.w_block2 .fl_r p.w344{width: 100%;margin:0 0 14px 0}
	.w_block.w_block3 .fl_r p.w418{width: 100%;margin:0 0 14px 0}
	.w192{width:100%}
	.w_block.w_block3 .floor1,
	.w_block.w_block3 .floor2{width: 100%}
}

/* 施工事例　その他 */
.w_other p,.w_other h4{margin:0;padding:0}
.w_other{text-align: center;margin-bottom: 100px}
.w_other h3{font-size: 18px;margin-bottom: 40px}
.w_other ul{width: 1160px; margin: 0 auto 40px}
.w_other li{
	width: 275px;
	float:left;
	position: relative;
	text-align: left;
	margin-left:20px}
.w_other li:nth-of-type(1){margin-left:0}
.w_other .icon{
	position: absolute;
	top:-15px;left:-15px;
	width: 60px;
	height: 60px;
	border-radius: 60px;
	background: #ffc333;
	color: #fff;
	text-align: center;
	font-size: 12px;
	line-height: 60px
}
.w_other .img{
	overflow: hidden;
	width: 275px;
	height: 200px;
	position: relative;}
.w_other .img img{
	position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
	margin: 0}
.w_other .cate{
	display: inline;
	background: #ffc333;
	color: #fff;
	padding:3px 10px;
	line-height: 1;
	font-size: 12px}
.w_other h4{margin:0;padding:0}
.w_other h4 span{
	padding-left:15px;
	font-family: din-condensed, sans-serif;
	font-weight:lighter;
	font-size: 16px}

@media screen and (max-width: 750px) {
	.w_other{width: 90%;margin: 0 auto 100px}
	.w_other ul{width: 100%}
	.w_other h3 span{display: block;line-height: 1.6}
	.w_other li{
		width: 100%;
		float:none;
		margin:0 0 40px 0}
	.w_other .img{
	overflow: hidden;
	width: 100%;
	height: auto;
		text-align: center;
	position: relative;}
	.w_other .img img{
	position: static;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  width: 100%;
  height: auto;
	margin: 0}
}