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

/* 施工事例メインエリア */


h2.jirei-title1{
	width: 40%;
	margin-left: 30%;
	font-size: 30px;
	font-weight: bolder;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	color: #000;
	margin-bottom: 20px;
	margin-top: 20px;
	border: 1px solid #999;
}


h2.jirei-title2{
	width: 30%;
	margin-left: 35%;
	font-size: 26px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	color: #000;
	margin-bottom: 20px;
	margin-top: 20px;
	border: 1px solid #999;
}

h2#color-oy{
	background-color: #ffc000;
}

h2#color-b{
	background-color: #00b0f0;
}

h2#color-y{
	background-color: #FF0;
}

h2#color-g{
	background-color: #92d050;
	width: 60%;
	margin-left: 20%;
}

h2#color-o{
	background-color: #ed7d31;
}




.jirei-box1{
	width: 96%;
	margin-left: 2%;
	background-color: #E4E4E4;
	border: 1px solid #666;
	margin-bottom: 15px;
}

#jirei-title3{
	width: 20%;
	margin-left: 5%;
	font-size: 16px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #fff;
	text-align: center;
	color: #000;
	margin-bottom: 20px;
	border: 1px solid #999;
}


.jirei-box1 img{
	float: left;
	width: 32%;
	margin-left: 5%;
	margin-bottom: 40px;
}

.jirei-box1 img#jirei-y{
	width: 15%;
	margin-top: 80px;
}




.jirei-box3{
	width: 80%;
	margin-left: 8%;
	padding: 2%;
	margin-top: 10px;
}


.jirei-box3 #box3-line1{
	width: 100%;
}

.jirei-box3 #box3-line1 p#box3-line-p{
	width: 30%;
	float: left;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
}

.jirei-box3 #box3-line1 img{
	width: 90%;
	margin-top: 30px;
	margin-bottom: 10px;
}

.jirei-box3 #box3-line1 img#box3-line-img{
	width: 70%;
	margin-top: 0px;
}



.jirei-box3 #box3-line2{
	width: 100%;
	background-color: #CF0;
}

.jirei-box3 #box3-line2 p#box3-line-p{
	width: 30%;
	float: left;
	text-align: center;
	margin-top: 20px;
	font-size: 16px;
	line-height: 24px;
}

.jirei-box3 #box3-line2 p#box3-line-p2{
	width: 30%;
	float: left;
	text-align: center;
	font-weight: bold;
	margin-top: 20px;
	background-color: #00b0f0;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFF;
	font-size: 24px;
	margin-top: 30px;
	margin-left: 2%;
}

.jirei-box3 #box3-line2 img{
	width: 90%;
	margin-bottom: 10px;
}

.jirei-box3 #box3-line2 img#box3-line-img{
	width: 70%;
	margin-top: 0px;
}


.jirei-boxline2{
	width: 60%;
	margin-left: 18%;
	padding: 2%;
	background-color: #E3E3E3;
	margin-top: 10px;
	border: 1px solid #666;
}

.jirei-boxline2 p{
	width: 96%;
	font-size: 14px;
	color: #000;
	line-height: 24px;
	font-weight: bold;
	text-align: left;
}


.jirei-boxline2 #boxline2-p{
	width: 96%;
	font-size: 16px;
	color: #F00;
	line-height: 24px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
}


.clear{
	clear:both;
}


/*------ノートパソコン画面・タブレット1024px画面まで--------------------------------------------------------*/
@media screen and (max-width: 1200px){
.jirei-boxline2{
	width: 70%;
	margin-left: 12%;
	padding: 2%;
	background-color: #E3E3E3;
	margin-top: 10px;
	border: 1px solid #666;
}

.jirei-boxline2 p{
	width: 96%;
	font-size: 14px;
	color: #000;
	line-height: 24px;
	font-weight: bold;
	text-align: left;
}


.jirei-boxline2 #boxline2-p{
	width: 96%;
	font-size: 16px;
	color: #F00;
	line-height: 24px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
}


	
}


/*------タブレット・スマホ414px画面まで--------------------------------------------------------*/
@media screen and (max-width: 1023px){

.jirei-box3{
	width: 80%;
	margin-left: 8%;
	padding: 2%;
	margin-top: 10px;
}


.jirei-box3 #box3-line1{
	width: 100%;
}

.jirei-box3 #box3-line1 p#box3-line-p{
	width: 45%;
	margin-left: 3%;
	float: left;
	text-align: center;
	font-weight: bold;
}

.jirei-box3 #box3-line1 img{
	width: 100%;
	margin-top: 30px;
	margin-bottom: 10px;
}

.jirei-box3 #box3-line1 #box3-line-sp p#box3-line-p{
	width: 100%;
}

.jirei-box3 #box3-line1 img#box3-line-img{
	width: 35%;
	margin-top: 10px;
	margin-left: 0%;
}



.jirei-box3 #box3-line2{
	width: 100%;
}

.jirei-box3 #box3-line2 p#box3-line-p{
	width: 45%;
	float: left;
	margin-left: 3%;
	text-align: center;
	margin-top: 20px;
	font-size: 16px;
	line-height: 24px;
}

.jirei-box3 #box3-line2 p#box3-line-p2{
	width: 45%;
	float: left;
	text-align: center;
	font-weight: bold;
	background-color: #00b0f0;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFF;
	font-size: 18px;
	margin-top: 25px;
	margin-left: 2%;
}

.jirei-box3 #box3-line2 img{
	width: 100%;
	margin-bottom: 0px;
}

.jirei-box3 #box3-line2 #box3-line-sp p#box3-line-p{
	width: 100%;
	text-align: center;
	margin-top: 0px;
	margin-left: 0px;
}


.jirei-boxline2{
	margin-bottom: 30px;
}

}


/*------スマホ画面813px画面まで--------------------------------------------------------*/
@media screen and (max-width: 813px){

#jirei-title3{
	width: 40%;
	margin-left: 5%;
	font-size: 16px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #fff;
	text-align: center;
	color: #000;
	margin-bottom: 20px;
	border: 1px solid #999;
}

h2#color-g{
	width: 80%;
	margin-left: 10%;
}

}

/*------スマホ414px以下画面--------------------------------------------------------*/
@media screen and (max-width: 414px){

#jirei-title3{
	font-size: 14px;
}

.jirei-box1 img#jirei-y{
	width: 15%;
	margin-top: 40px;
}

h2.jirei-title1{
	width: 60%;
	margin-left: 20%;
}


h2.jirei-title2{
	font-size: 18px;
}

h2#color-g{
	width: 80%;
	margin-left: 10%;
}
}


/*------スマホ320px以下画面--------------------------------------------------------*/
@media screen and (max-width: 320px){

#jirei-title3{
	font-size: 14px;
}

.jirei-box1 img#jirei-y{
	width: 15%;
	margin-top: 40px;
}

h2.jirei-title1{
	width: 60%;
	margin-left: 20%;
}


h2.jirei-title2{
	font-size: 18px;
}

h2#color-g{
	width: 80%;
	margin-left: 10%;
}

.jirei-box3 #box3-line1 p#box3-line-p{
	text-align: center;
	font-size: 14px;
}


.jirei-box3 #box3-line2 p#box3-line-p2{
	font-size: 15px;
}


.jirei-boxline2{
	width: 90%;
	margin-left: 5%;
}


}