@charset "utf-8";
@import url("/css/pages.css");
/* general_construction.css */
/*PC first*/
/*##### PC #####*/
.content_title .content_title_img{
	background: url(/shared/content_title/general_construction_img.jpg) no-repeat left top;
}

.mainContentsBox{
	width:920px;
	margin:0 auto;
}

			.mainContentsBox p.headLineTxt{
				line-height: 1.714;
				color: #9d2d1f;
				font-size: 16px;
			    font-size: 1.6rem;
				margin: 0 auto;
				padding-bottom: 30px;
			}
			.mainContentsBox h3.headLineTxt{
				font-size: 18px;
			    font-size: 1.8rem;
				margin: 0 auto;
				padding-bottom: 30px;
				width: 100%;
			}
				.mainContentsBox h3.headLineTxt span{
					margin-right: 10px;
					color: #fff;
					padding: 5px 10px;
					border-radius: 5px;
				}
				.mainContentsBox h3.headLineTxt span::after{

				}
				.mainContentsBox h3.headLineTxt span.kokyo{
					background: #319a35;
				}
				.mainContentsBox h3.headLineTxt span.ippan{
					background: #ff8218;
				}
			.mainContentsBox .listBox{
				padding: 0 0 0;
			}
			
				.mainContentsBox .listBox > .box_header{
					margin-bottom:40px;
				}
			
				.mainContentsBox .listBox > .box_header p{
					width:100%;
					padding:18px 0;
					text-align:center;
					border-top:1px dotted #000;
					border-bottom:1px dotted #000;
				}
			
				.mainContentsBox .listBox ul{
					display: -webkit-flex;
					-js-display: flex;
					display: -ms-flexbox;
					display: flex;
					flex-wrap:wrap;
				}
					.mainContentsBox .listBox ul li{
						width: 280px;
						/*padding:0 40px 20px 0;*/
						margin:0 40px 20px 0;
						transition:.5s all ease;
					}
					
					.mainContentsBox .listBox ul li:nth-child(3n){
						/*padding:0 0 40px 0;*/
						margin:0 0 20px 0;
					}
					
					.mainContentsBox .listBox ul li:hover{
						box-shadow:0 0 5px 5px rgba(0,0,0,0.1);
					}
					
						.mainContentsBox .listBox ul li a{
							display: block;
							color: #222222;
							padding:10px;
						}
							.mainContentsBox .listBox ul li.cateKokyo a:hover{
								color: #319a35;
							}

                            .mainContentsBox .listBox ul li.cateKokyo a > .listImg{
								
                            }
							.mainContentsBox .listBox ul li.cateKokyo a:hover > .listImg{
								border: 3px #319a35 solid;
								margin: -3px -3px 12px -3px;
								/* -webkit-transition: all 0.25s ease;
								-moz-transition: all 0.25s ease;
								-o-transition: all 0.25s ease;
							    transition: all 0.25s ease; */
							}
							.mainContentsBox .listBox ul li.cateIppan a:hover{
								color: #ff8218;
							}
							.mainContentsBox .listBox ul li.cateIppan a:hover > .listImg{
								border: 3px #ff8218 solid;
								margin: -3px -3px 12px -3px;
								/* -webkit-transition: all 0.25s ease;
								-moz-transition: all 0.25s ease;
								-o-transition: all 0.25s ease;
							    transition: all 0.25s ease; */
							}
						.mainContentsBox .listBox ul li .listImg{
							width: 100%;
							height:186px;
							overflow:hidden;
							display: block;
							margin-bottom: 10px;
						}
						.mainContentsBox .listBox ul li .listCategory{
							width: 100px;
							display: block;
							padding: 5px 0;
							border-radius: 5px;
							color: #fff;
							text-align: center;
							margin: 0 auto 10px;

						}
							.mainContentsBox .listBox ul li.cat1 .listCategory{
								background: #319a35;
							}
							.mainContentsBox .listBox ul li.cat2 .listCategory{
								background: #ff8218;
							}
						.mainContentsBox .listBox ul li .listName{
							width: 100%;
							display: block;
							line-height:1.6em;
							padding:0 5px 10px 5px;
							box-sizing:border-box;
						}
						/*
						.mainContentsBox .listBox ul li .listDate{
							width: 100%;
							display: block;
						}
						*/
						
						
				.mainContentsBox .detailImgBox{
					overflow: hidden;
					width: 470px;
					margin-right: auto;
					border: 3px #cccccc solid;
					box-sizing: border-box;

				}
					.mainContentsBox .detailImgBox li {

					}
					.mainContentsBox .detailImgBox li:nth-child(n+2) {
						display: none;
					}

				.mainContentsBox .overviewBox{
					width: 438px;
					display: -webkit-flex;
					-js-display: flex;
					display: -ms-flexbox;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;
				}
					.overviewBox .overviewTxtBox{

					}
						.overviewTxtBox h4.overview{
							font-size: 16px;
						    font-size: 1.6rem;
							padding-bottom: 10px;
						}
						.overviewTxtBox dl{
							display: -webkit-flex;
							-js-display: flex;
							display: -ms-flexbox;
							display: flex;
							flex-wrap: wrap;
							border: 1px #eeeeee solid;
						}
							.overviewTxtBox dl dt{
								box-sizing: border-box;
								width: 30%;
								border-right: 1px #eeeeee solid;
								border-bottom: 1px #eeeeee solid;
								padding: 5px 0;
								background: #fffadc;
							    color: #11480f;
								text-align: center;
							}
							.overviewTxtBox dl dd{
								box-sizing: border-box;
								width: 70%;
								border-bottom: 1px #eeeeee solid;
								padding: 5px;
							}
							.overviewTxtBox dl dt:nth-last-child(2),
							.overviewTxtBox dl dd:last-child{
								border-bottom:0;
							}
					.overviewBox .detailThumbBox{
						display: -webkit-flex;
						-js-display: flex;
						display: -ms-flexbox;
						display: flex;
						flex-wrap: wrap;
					}
						.overviewBox .detailThumbBox li{
							box-sizing: border-box;
							border: 1px #cccccc solid;
							margin-right: 10px;
						}
						.overviewBox .detailThumbBox li img {
							-webkit-transition: all 0.25s ease;
							-moz-transition: all 0.25s ease;
							-o-transition: all 0.25s ease;
							transition: all 0.25s ease;
						}
						.overviewBox .detailThumbBox li:hover img {
						  opacity: 0.7;
						  filter: alpha(opacity=70);
						  -ms-filter: "alpha(opacity=70)";
						}
						.overviewBox .detailThumbBox li:nth-child(n+5){
							margin-top: 10px;
						}
						.overviewBox .detailThumbBox li:nth-child(4n){
							margin-right: 0;
						}
						
/*詳細ページ*/
.generalConstructionDetailBox{
	width:920px;
	margin:0 auto 40px auto;
}

	.generalConstructionDetailBox > .box_header{
		margin-bottom:40px;
		display:flex;
	}
	
		.generalConstructionDetailBox > .box_header > .detail_title_txt{
			width:440px;
			margin-right:40px;
			position:relative;
		}
		
			.generalConstructionDetailBox > .box_header > .detail_title_txt .const_ctg{
				margin-bottom:10px;
			}
			
				.generalConstructionDetailBox > .box_header > .detail_title_txt .const_ctg span{
					display:inline-block;
					border-radius:4px;
					color:#fff;
					padding:5px 10px;
				}
				
				.generalConstructionDetailBox > .box_header > .detail_title_txt .const_ctg span.cat1{
					background:#319a35;
				}
				
				.generalConstructionDetailBox > .box_header > .detail_title_txt .const_ctg span.cat2{
					background:#ff8218;
				}
		
			.generalConstructionDetailBox > .box_header > .detail_title_txt h3{
				color:#9D0733;
				margin-bottom:30px;
				font-size:1.6em;
				position:relative;
				line-height:1.3em;
			}
			
			.generalConstructionDetailBox > .box_header > .detail_title_txt dl{
				padding-left:20px;
				margin-bottom:10px;
				letter-spacing:-0.4em;
			}
			
			.generalConstructionDetailBox > .box_header > .detail_title_txt dl dt{
				border-left:3px solid #a22717;
				padding:3px 0 3px 5px;
				width:80px;
				display:inline-block;
				letter-spacing:0;
			}
			
			.generalConstructionDetailBox > .box_header > .detail_title_txt dl dd{
				padding:3px 0 3px 5px;
				display:inline-block;
				letter-spacing:0;
			}
			
			
			.generalConstructionDetailBox > .box_header > .detail_title_txt p{
				width:100%;
				position:absolute;
				left:0;
				bottom:0;
				padding:18px 0;
				text-align:center;
				border-top:1px dotted #000;
				border-bottom:1px dotted #000;
			}
		
		.generalConstructionDetailBox > .box_header > .detail_title_img{
			width:440px;
			min-height:300px;
		}
	
	.generalConstructionDetailBox > .box_inner{}

	.generalConstructionDetailBox > .box_inner ul{
		display:flex;
		flex-wrap:wrap;
	}
	
	.generalConstructionDetailBox > .box_inner ul li{
		padding:0 40px 40px 0;
	}
	
	.generalConstructionDetailBox > .box_inner ul li:nth-child(4n){
		padding:0 0 40px 0;
	}
	
	.generalConstructionDetailBox > .box_inner ul li a{
		width: 200px;
		display:block;
		position:relative;
		min-height: 150px;
		text-align: center;
	}
	
	.generalConstructionDetailBox > .box_inner ul li img{
		max-height: 150px;
		width: auto;
		max-width: 200px;
		position:relative;
		z-index:0;
	}
	
	.generalConstructionDetailBox > .box_inner ul li a:before{
		font-family: FontAwesome;
		content:"\f00e　拡大する";
		display:block;
		width:0;
		height:0;
		background:rgba(0,0,0,0.3);
		opacity:0;
		color:#fff;
		position:absolute;
		top:0;
		left:0;
		z-index:1;
		transition:.5s all ease;
		text-align:center;
		box-sizing:border-box;
	}
	
	.generalConstructionDetailBox > .box_inner ul li a:hover:before{
		width:100%;
		height:100%;
		padding-top:35%;
		vertical-align:middle;
		line-height:100%;
		opacity:1;
	}
	
	.generalConstructionDetailBox > .box_footer ul{
		display:flex;
	}
	
		.generalConstructionDetailBox > .box_footer ul li{}
		
		.generalConstructionDetailBox > .box_footer ul li a{
			display:block;
		}
		
		.generalConstructionDetailBox > .box_footer ul li.goto_prev,
		.generalConstructionDetailBox > .box_footer ul li.goto_next{
			width:20%;
		}
		
		.generalConstructionDetailBox > .box_footer ul li.goto_home{
			width:60%;
		}
		
		.generalConstructionDetailBox > .box_footer ul li.goto_prev a:before,
		.generalConstructionDetailBox > .box_footer ul li.goto_next a:before{
			font-size:2em;
			color:#BFBFBF;
		}
		
		.generalConstructionDetailBox > .box_footer ul li.goto_prev a:before{
			font-family: FontAwesome;
			content:"\f104";
		}
		
		.generalConstructionDetailBox > .box_footer ul li.goto_home{
			text-align:center;
			padding-top:0.5em;
		}
		
		.generalConstructionDetailBox > .box_footer ul li.goto_home a{
			color:#808080;
		}
		
		.generalConstructionDetailBox > .box_footer ul li.goto_next{
			text-align:right;
		}
		
		.generalConstructionDetailBox > .box_footer ul li.goto_next a:before{
			font-family: FontAwesome;
			content:"\f105";
		}

@media screen and (max-width:480px){
/*##### SP #####*/
	.content_title .content_title_img{
		background-size:contain;
		background-position:left center;
	}
	
	.mainContentsBox{
		width:auto;
	}
	
	.mainContentsBox .listBox ul li{
		width:50%;
		padding:0 10px 20px 10px;
		box-sizing:border-box;
		margin:0;
	}
	
	.mainContentsBox .listBox ul li:nth-child(3n){
		padding:0 10px 20px 10px;
	}
	
		.mainContentsBox .listBox ul li .listImg{
			height:auto;
		}
	
		.mainContentsBox .listBox ul li img{
			max-width:100%;
			height:auto;
		}
		
	/*詳細ページ*/
	.generalConstructionDetailBox{
		width:auto;
	}
	
		.generalConstructionDetailBox > .box_header{
			display:block;
		}
		
			.generalConstructionDetailBox > .box_header > .detail_title_txt{
				width:auto;
				margin:0 0 10px 0;
			}
			
			.generalConstructionDetailBox > .box_header > .detail_title_txt h3{
				margin:0 0 10px 0;
			}
			
			.generalConstructionDetailBox > .box_header > .detail_title_txt dl{
				padding-left:10px;
			}
			
			.generalConstructionDetailBox > .box_header > .detail_title_txt p{
				padding:8px 0;
				position:relative;
				font-size:0.9em;
				text-align:left;
			}
			
			.generalConstructionDetailBox > .box_header > .detail_title_img{
				width:auto;
				min-height:auto;
				min-height:initial;
			}
			
			.generalConstructionDetailBox > .box_header > .detail_title_img img{
				max-width:100%;
				height:auto;
			}
			
			.generalConstructionDetailBox > .box_inner ul li{
				width:50%;
				padding:0 10px 20px 10px;
				box-sizing:border-box;
			}
			
			.generalConstructionDetailBox > .box_inner ul li:nth-child(4n){
				padding:0 10px 20px 10px;
			}
	
			.generalConstructionDetailBox > .box_inner ul li a{
				width: 43vw;
				min-height: 30vw;
			}
			
			.generalConstructionDetailBox > .box_inner ul li img{
				max-width:100%;
				height:auto;
			}

}