@charset "utf-8";
/*-----home.css-----*/
/*##########PC用スタイル##########*/
#box_home_catch{
	height:500px;
	background-image:url(../images/home_catch/catch_bg.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	/*background-color:#e1e4f5;*/
	overflow:hidden;
	position:relative;
	z-index:0;
	animation: hc 2s ease 0s;
}

		@keyframes hc{
			0%{
				opacity:0;
			}
			100%{
				opacity:1;
			}
		}
		
		/*ぼかし*/
		#box_home_catch:before{
			content: '';
			background: inherit;/*.bgImageで設定した背景画像を継承する*/
			/*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
			z-index: -1;/*重なり順序を一番下にしておく*/
			position: absolute;
			animation: hcbgblur 2s ease 0s;
		}
		
		@keyframes hcbgblur{
			0%{
				-webkit-filter: blur(10px);
				-moz-filter: blur(10px);
				-o-filter: blur(10px);
				-ms-filter: blur(10px);
				filter: blur(10px);
				top: -10px;
				left: -10px;
				right: -10px;
				bottom: -10px;
			}
			
			100%{
				-webkit-filter: blur(0px);
				-moz-filter: blur(0px);
				-o-filter: blur(0px);
				-ms-filter: blur(0px);
				filter: blur(0px);
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
			}
		}
		

	#box_home_catch > .box_inner{
		/*width:960px;*/
		width:1200px;
		height:500px;
		margin:0 auto;
		position:relative;
	}
	
	#box_home_catch > .box_inner .hc_pin{
		width:150px;
		height:178px;
	}
	
	#box_home_catch > .box_inner .hc01{
		position:absolute;
		top:120px;
		right:120px;
		opacity:0;
		z-index:0;
	}
	
	#box_home_catch > .box_inner .hc_pin img.imgi{
		position:absolute;
		z-index:2;
		opacity:1;
	}
	
	#box_home_catch > .box_inner .hc_pin.cmp img.imgi{
		animation: rotatey90 1s ease 0s;
		opacity:0;
		transition:all 1s ease;
	}

	#box_home_catch > .box_inner .hc_pin img.imgt{
		position:absolute;
		z-index:1;
	}
	
	#box_home_catch > .box_inner .hc_pin.cmp img.imgt{
		animation: rotatey90m 1s ease 0s;
	}
	
		@keyframes rotatey90{
			0%{
				transform:rotateY(0);
			}
			
			100%{
				transform:rotateY(180deg);
				opacity:0;
			}
		}
		
		@keyframes rotatey90m{
			0%{
				transform:rotateY(-180deg);
			}
			
			100%{
				transform:rotateY(0);
			}
		}
	
	#box_home_catch > .box_inner .hc01.hc_pin.cmp.fuwa img.imgt{
		animation: fuwa 3s ease-in-out 0s infinite ;
	}
	
		@keyframes fuwa{
			0% { transform: translateY(0) }
			25% { transform: translateY(-10px) }
			50% { transform: translateY(0) }
			100% { transform: translateY(0) }
		}
		
	#box_home_catch > .box_inner .hc_pin.cmp.fuwa a img.imgt{
		opacity:1;
		transition:all .5s ease;
	}
		
	#box_home_catch > .box_inner .hc_pin.cmp.fuwa a:hover img.imgt{
		animation:none;
		opacity:0.8;
	}
	
	#box_home_catch > .box_inner .hc02{
		position:absolute;
		top:20px;
		left:220px;
		opacity:0;
	}
	
	#box_home_catch > .box_inner .hc02.hc_pin.cmp.fuwa img.imgt{
		animation: fuwa 3s ease-in-out .2s infinite ;
	}
	
	#box_home_catch > .box_inner .hc03{
		position:absolute;
		top:15px;
		left:585px;
		opacity:0;
	}
	
	#box_home_catch > .box_inner .hc03.hc_pin.cmp.fuwa img.imgt{
		animation: fuwa 3s ease-in-out .7s infinite ;
	}
	
	#box_home_catch > .box_inner .hc04{
		position:absolute;
		top:60px;
		right:280px;
		opacity:0;
	}
	
	#box_home_catch > .box_inner .hc04.hc_pin.cmp.fuwa img.imgt{
		animation: fuwa 3s ease-in-out .1s infinite ;
	}
	
	#box_home_catch > .box_inner .hc05{
		position:absolute;
		top:40px;
		left:400px;
		opacity:0;
	}
	
	#box_home_catch > .box_inner .hc05.hc_pin.cmp.fuwa img.imgt{
		animation: fuwa 3s ease-in-out .8s infinite ;
	}
	
	#box_home_catch > .box_inner .hc06{
		position:absolute;
		bottom:130px;
		left:140px;
		opacity:0;
		transform:translateY(-20px);
	}
	
	#box_home_catch > .box_inner .hc06.hc_pin.cmp.fuwa img.imgt{
		animation: fuwa 3s ease-in-out .6s infinite ;
	}
	
	#box_home_catch > .box_inner .hc07{
		width:520px;
		height:120px;
		position:absolute;
		top:220px;
		left:340px;
		opacity:0;
	}
	
	#box_home_catch > .box_inner .hc08{
		width:520px;
		height:60px;
		position:absolute;
		top:290px;
		left:340px;
		opacity:0;
	}
	
	#box_home_catch > .box_inner .hc09{
		width:450px;
		height:120px;
		position:absolute;
		top:250px;
		left:375px;
		opacity:0;
	}


#box_teian_works_wrapper{
	box-shadow:0 -10px 15px -10px rgba(0,0,0,0.2);
	position:relative;
	z-index:0;
	height:710px;
	background-image: url(../images/home_works/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center center;
}

			/*ニッチの仕事メイン*/
			#box_works_main{
				width:1200px;
				clear:both;
				position:relative;
				height:710px;
				padding-top:40px;
				margin:0 auto;
			}
			
				#box_works_main > .box_header{
					text-align:center;
					margin-bottom:30px;
				}
				
				#box_works_main > .box_header h2{
					margin:0;
				}
				
					#box_works_main > .box_header h2 img.img-responsive{
						margin:0 auto;
					}
				
				#box_works_main > .box_inner{
					z-index:2;
				}
				
				#box_works_main > .box_inner ul{
					margin:0 auto;
					padding:0;
					list-style:none;
					width:930px;
					position:relative;
					z-index:3;
				}
				
					#box_works_main > .box_inner ul li{
						width:310px;
						float:left;
						opacity:0;
						transform:translate(0,50px);
						transition:all 1s ease;
					}
					
					#box_works_main > .box_inner ul li.work1{
						transition:all 1s ease 0s;
					}
					
					#box_works_main > .box_inner ul li.work2{
						transition:all 1s ease 0s;
					}
					
					#box_works_main > .box_inner ul li.work3{
						transition:all 1s ease 0s;
					}
					
					#box_works_main > .box_inner ul li.work4{
						transition:all 1s ease .3s;
					}
					
					#box_works_main > .box_inner ul li.work5{
						transition:all 1s ease .3s;
					}
					
					#box_works_main > .box_inner ul li.work6{
						transition:all 1s ease .3s;
					}
					
					#box_works_main > .box_inner ul li.inview-active{
						opacity:1;
						transform:translate(0,0);
					}
					
					#box_works_main > .box_inner ul li a{
						display:block;
						width:310px;
						padding:20px;
						text-decoration:none;
					}
					
					#box_works_main > .box_inner ul li a.hvr-outline-in:before{
						border:4px solid rgba(76,181,232,0.5);
					}
					
					#box_works_main > .box_inner ul li a:hover{
						/*background:rgba(255,255,255,0.8);*/
					}
					
					#box_works_main > .box_inner ul li a .work_img_icon{
						display:block;
						width:270px;
						height:160px;
						position:relative;
						/*margin-bottom:14px;*/
						box-shadow:4px 4px 4px -4px rgba(0,0,0,0.7);
					}
					
						#box_works_main > .box_inner ul li a .work_img_icon .work_img{
							width:270px;
							height:160px;
							display:block;
							position:relative;
							overflow:hidden;
						}
						
							#box_works_main > .box_inner ul li a .work_img_icon .work_img .work_img_line{
								display:block;
								width:275px;
								height:3px;
								background:#0066b3;
								transform:rotate(-10.5deg);
								transform-origin:left bottom;
								position:absolute;
								bottom:10px;
								left:0;
								z-index:5;
							}
						
							#box_works_main > .box_inner ul li a .work_img_icon .work_img:before{
								content:"";
								display:block;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 0px 0 150px 100px;
								border-color: transparent transparent transparent rgba(255,255,255,0.5);
								position:absolute;
								top:0;
								left:0;
								z-index:1;
							}
							
							
							#box_works_main > .box_inner ul li.work1 a .work_img_icon .work_img:after{
								content:"";
								display:block;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 0px 0 150px 50px;
								border-color: transparent transparent transparent rgba(217,52,108,0.5);
								position:absolute;
								top:0;
								left:0;
								z-index:2;
							}
							
							#box_works_main > .box_inner ul li.work2 a .work_img_icon .work_img:after{
								content:"";
								display:block;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 0px 0 150px 50px;
								border-color: transparent transparent transparent rgba(236,126,41,0.5);
								position:absolute;
								top:0;
								left:0;
								z-index:2;
							}
							
							#box_works_main > .box_inner ul li.work3 a .work_img_icon .work_img:after{
								content:"";
								display:block;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 0px 0 150px 50px;
								border-color: transparent transparent transparent rgba(110,180,91,0.5);
								position:absolute;
								top:0;
								left:0;
								z-index:2;
							}
							
							#box_works_main > .box_inner ul li.work4 a .work_img_icon .work_img:after{
								content:"";
								display:block;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 0px 0 150px 50px;
								border-color: transparent transparent transparent rgba(1,159,145,0.5);
								position:absolute;
								top:0;
								left:0;
								z-index:2;
							}
							
							#box_works_main > .box_inner ul li.work5 a .work_img_icon .work_img:after{
								content:"";
								display:block;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 0px 0 150px 50px;
								border-color: transparent transparent transparent rgba(0,102,179,0.5);
								position:absolute;
								top:0;
								left:0;
								z-index:2;
							}
							
							#box_works_main > .box_inner ul li.work6 a .work_img_icon .work_img:after{
								content:"";
								display:block;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 0px 0 150px 50px;
								border-color: transparent transparent transparent rgba(159,121,198,0.5);
								position:absolute;
								top:0;
								left:0;
								z-index:2;
							}
							
							#box_works_main > .box_inner ul li a .work_img_icon .work_img img{
								position:relative;
								z-index:0;
								opacity:1;
								transition:all .3s ease-out;
							}
						
							#box_works_main > .box_inner ul li a:hover .work_img_icon .work_img img{
								opacity:0.8;
								transform:scale(1.1,1.1);
							}
							
								#box_works_main > .box_inner ul li a:hover .work_img_icon .work_img_b{
									border-width:5px;
								}
					#box_works_main > .box_inner ul li a .work_title_wrapper{
						display:block;
						width:270px;
						position:absolute;
						bottom:0;
					}
					
						#box_works_main > .box_inner ul li a .work_title_wrapper:before{
							box-sizing:content-box;
							display:block;
							content:"";
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 50px 270px 0px 0;
							border-color: transparent rgba(255,255,255,1) transparent transparent;
							position:relative;
							z-index:0;
						}
						
						#box_works_main > .box_inner ul li a .work_title{
							padding-right:10px;
							width:270px;
							text-align:right;
							display:block;
							font-size:16px;
							color:#000;
							position:absolute;
							bottom:3px;
							z-index:1;
						}
						
						#box_works_main > .box_inner ul li a .work_title:before{
							content:"";
							display:inline-block;
							width:7px;
							height:12px;
							background-image:url(../images/icon02.gif);
							background-repeat:no-repeat;
							margin-right:4px;
						}
						
						
						
						#box_works_main > .box_inner ul li a .work_title_wrapper:after{
							display:block;
							content:"";
							width:270px;
							height:10px;
							background:rgba(255,255,255,1);
							position:relative;
							z-index:0;
						}
					
					
					#box_works_main > .box_inner ul li a .work_desc{
						display:block;
						color:#111;
						font-size:0.95em;
					}
					
				#box_works_main > .box_footer{
					text-align:center;
					clear:both;
					padding-top:30px;
				}
				
				#box_works_main > .box_footer a{
					display:inline-block;
					width:300px;
					height:40px;
					line-height:40px;
					color:#fff;
					background:#c71918;
					text-decoration:none;
					border:1px solid #c71918;
				}
				
				#box_works_main > .box_footer a.hvr-sweep-to-right:before{
					background:#fff;
				}
				
				#box_works_main > .box_footer a:after{
					content:"";
					display:block;
					width:10px;
					height:16px;
					background:url(../images/icon07.png);
					position:absolute;
					right:30px;
					bottom:12px;
				}
				
				#box_works_main > .box_footer a:hover{
					border:1px solid #0b3684;
					color:#0b3684;
					text-shadow:1px 0 0 #0b3684;
				}
				
				#box_works_main > .box_footer a:hover:after{
					background:url(../images/icon08.png);
				}
/*アスベスト除去*/
.goto_asbestos{
	padding:20px 0 0 0;
	text-align:center;
	clear:both;
	opacity:0;
	transform:translate(0,50px);
	transition:all 1s ease .6s;
}

.goto_asbestos.inview-active{
	transform:translate(0,0);
	opacity:1;
}

	.goto_asbestos img.img-responsive{
		display:inline-block;
	}
	
	.goto_asbestos a{
		display:inline-block;
		border:1px solid rgba(0,61,132,0);
		transition:.5s all ease;
	}
	
	.goto_asbestos a:hover{
		opacity:0.8;
		border:1px solid rgba(0,61,132,1);
	}

	
/* お知らせ */
#box_news{
	width: 850px;
	margin: 0 auto;
	overflow:hidden;
	
	padding:50px 0;
}

	#box_news > .box_header {
		height:22px;
	}
	
	#box_news > .box_header h2{
		margin:0;
		padding:0;
		float:left;
		width:160px;
		height:26px;
	}
	
		#box_news > .box_header h2 img{
			vertical-align:top;
		}
	
		#box_news > .box_header .goto_news_list {
			width:130px;
			height:28px;
			float: right;
			margin: 0 0 10px 0;
		}
			#box_news > .box_header .goto_news_list a {
				display:block;
				width:130px;
				height:28px;
				line-height:28px;
				border: 1px solid #b4c3d6;
				padding: 0 20px;
				font-size: 0.85em;
				border-radius: 14px;
				-webkit-border-radius: 14px;
				-moz-border-radius: 14px;
				color: #0a3278;
			}
			#box_news > .box_header .goto_news_list a:after {
				content: "\003e";
				margin-left: 10px;
			}
			#box_news > .box_header .goto_news_list a:hover {
				text-decoration: none;
				opacity: 0.7;
			}


	#box_news .box_inner {
		clear:both;
	}

		#box_news .box_inner ul {
			margin:0;
			padding:0;
		}
		
			#box_news .box_inner ul li {
				list-style: none;
				border-bottom: 1px solid #ccc;
				clear: both;
				overflow: hidden;
			}
			#box_news .box_inner ul li:first-child {
				border-top: 1px solid #ccc;
			}
				#box_news .box_inner ul li a {
					display: block;
					overflow: hidden;
					padding: 15px 10px;
					background-image: url(../images/icon03.gif);
					background-repeat: no-repeat;
					background-position : right 10px bottom 50%;
					color: #000;
				}
				#box_news .box_inner ul li a:hover {
					text-decoration: none;
					opacity: 0.7;
				}
				#box_news .box_inner ul li a .nw_date {
					width: 100px;
					overflow: hidden;
					float: left;
				}
				#box_news .box_inner ul li a .nw_title {
					width: 670px;
					overflow: hidden;
					float: left;
				}


/*会社案内へ*/
#box_outline{
	height:440px;
	background-image:url(../images/outline/outline_bg.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}

	#box_outline > .box_inner{
		width:1000px;
		padding:0 0 0 50px;
		margin:0 auto;
		position:relative;
		z-index:0;
	}
	
		.outline_txt{
			width:460px;
			position:relative;
			z-index:2;
			padding-top:70px;
		}
		
			.outline_txt h2{
				margin:0 0 40px 0;
			}
			
			.outline_txt dl{
				margin:0;
				font-size:16px;
				color:#000;
				text-shadow:1px 0 0 #000;
			}
			
			.outline_txt dl dt{
				font-weight:normal;
				display:inline-block;
				border:1px solid #555;
				padding:2px 15px 1px 15px;
				margin-bottom:15px;
			}
			
			.outline_txt dl dd{
				line-height:1.8em;
			}
	
		.outline_map{
			width:500px;
			height:400px;
			background:url(../images/outline/outline_map.png) no-repeat;
			position:absolute;
			top:0;
			right:0;
			z-index:1;
		}


	#box_outline > .box_footer{
		clear:both;
		width:1000px;
		padding-top:20px;
		margin:0 auto;
		text-align:center;
	}

		#box_outline > .box_footer a{
			display:inline-block;
			width:300px;
			height:40px;
			line-height:40px;
			color:#fff;
			background:#c71918;
			text-decoration:none;
			border:1px solid #c71918;
		}
		
		#box_outline > .box_footer a.hvr-sweep-to-right:before{
			background:#fff;
		}
		
		#box_outline > .box_footer a:after{
			content:"";
			display:block;
			width:10px;
			height:16px;
			background:url(../images/icon07.png);
			position:absolute;
			right:30px;
			bottom:12px;
		}
		
		#box_outline > .box_footer a:hover{
			border:1px solid #0b3684;
			color:#0b3684;
			text-shadow:1px 0 0 #0b3684;
		}
				
			#box_outline > .box_footer a:hover:after{
				background:url(../images/icon08.png);
			}
	

@media screen and (max-width: 1399px) {
	/* 1399px以下 */
	#box_teian:before{
		right:-200px;
	}
}


@media screen and (max-width: 979px) {
	/* 979px以下用（タブレット用）の記述 */
	#box_teian:before{
		right:-250px;
	}

	/*↓ipad対策*/
	/*
	body{
		width:auto;
		overflow-x: auto;
		min-width: 900px;
	}
	*/

}
@media screen and (max-width: 767px) {
	/* 767px以下用（タブレット／スマートフォン用）の記述 */
	
}
@media screen and (max-width: 479px) {
	/* 479px以下用（スマートフォン用）の記述 */
#box_home_catch{
	height:180px;
	background-size:120%;
}

	#box_home_catch > .box_inner{
		width:100%;
		height:180px;
		padding:15px 5% 0 5%;
		margin:0;
	}
	
	#box_home_catch > .box_inner .hc_pin{
		width:16%;
		height:16%;
	}
	
	#box_home_catch > .box_inner .hc01,
	#box_home_catch > .box_inner .hc02,
	#box_home_catch > .box_inner .hc03,
	#box_home_catch > .box_inner .hc04,
	#box_home_catch > .box_inner .hc05,
	#box_home_catch > .box_inner .hc06{
		position:relative;
		top:auto;
		left:auto;
		right:auto;
		bottom:auto;
		float:left;
	}
	
	#box_home_catch > .box_inner .hc07{
		width:100%;
		height:auto;
		top:auto;
		bottom:20px;
		left:0;
		padding:0 10%;
	}
	
	#box_home_catch > .box_inner .hc08{
		width:100%;
		height:auto;
		top:auto;
		bottom:30px;
		left:0;
		opacity:0;
		padding:0 10%;
	}
	
	#box_home_catch > .box_inner .hc09{
		width:100%;
		height:auto;
		top:auto;
		bottom:20px;
		left:0;
		opacity:0;
		padding:0 15%;
	}

#box_teian_works_wrapper{
	height:auto;
}

	/*ニッチの仕事メイン*/
	#box_works_main{
		width:auto;
		height:auto;
		padding:20px 0;
	}
	
		#box_works_main > .box_header{
			width:60%;
			margin:0 auto 20px auto;
		}
		
		#box_works_main > .box_inner ul{
			width:auto;
			padding:0 10px;
		}
		
		#box_works_main > .box_inner ul li{
			width:50%;
			margin-bottom:10px;
		}
		
		#box_works_main > .box_inner ul li:nth-child(odd){
			padding-right:5px;
		}
		
		#box_works_main > .box_inner ul li:nth-child(even){
			padding-left:5px;
		}
		
		#box_works_main > .box_inner ul li a{
			width:100%;
			padding:0;
		}
		
		#box_works_main > .box_inner ul li a .work_img_icon{
			width:100%;
			height:auto;
		}
		
		#box_works_main > .box_inner ul li a .work_img_icon .work_img{
			width:100%;
			height:120px;
		}
		
		#box_works_main > .box_inner ul li.work1 a .work_img_icon .work_img,
		#box_works_main > .box_inner ul li.work2 a .work_img_icon .work_img,
		#box_works_main > .box_inner ul li.work3 a .work_img_icon .work_img,
		#box_works_main > .box_inner ul li.work4 a .work_img_icon .work_img,
		#box_works_main > .box_inner ul li.work5 a .work_img_icon .work_img,
		#box_works_main > .box_inner ul li.work6 a .work_img_icon .work_img{
			background-position:center top;
		}
		
		#box_works_main > .box_inner ul li a .work_img_icon .work_img:before,
		#box_works_main > .box_inner ul li.work1 a .work_img_icon .work_img:after,
		#box_works_main > .box_inner ul li.work2 a .work_img_icon .work_img:after,
		#box_works_main > .box_inner ul li.work3 a .work_img_icon .work_img:after,
		#box_works_main > .box_inner ul li.work4 a .work_img_icon .work_img:after,
		#box_works_main > .box_inner ul li.work5 a .work_img_icon .work_img:after,
		#box_works_main > .box_inner ul li.work6 a .work_img_icon .work_img:after,
		#box_works_main > .box_inner ul li a .work_img_icon .work_img .work_img_line{
			display:none;
		}
		
		#box_works_main > .box_inner ul li a .work_title_wrapper{
			width:100%;
		}
		
		#box_works_main > .box_inner ul li a .work_title{
			width:100%;
			font-size:14px;
			background:#fff;
			bottom:0;
			padding:5px 10px 5px 0;
		}
		
		#box_works_main > .box_inner ul li a .work_title_wrapper:before,
		#box_works_main > .box_inner ul li a .work_title_wrapper:after{
			display:none;
		}
		
/*アスベスト除去*/
.goto_asbestos{
	padding:30px 20px 10px 20px;
}
	
/* お知らせ */
#box_news{
	width: auto;
	padding:20px;
}

	#box_news .box_inner ul li a .nw_date {
		display:block;
		width: auto;
		float: none;
	}
	#box_news .box_inner ul li a .nw_title {
		display:block;
		width: auto;
		float: none;
	}
	
/*会社案内へ*/
#box_outline{
	height:auto;
	padding:10px;
}

	#box_outline > .box_inner{
		width:auto;
		padding:0;
	}
	
		.outline_txt{
			width:auto;
			padding-top:0;
		}
		
		.outline_txt h2{
			width:80%;
			margin:0 auto 20px auto;
		}
		
		.outline_txt dl{
			text-align:center;
		}
		
		.outline_map{
			display:none;
		}
		
	#box_outline > .box_footer{
		width:auto;
	}
}

@media print {
	#box_works_main > .box_inner ul li{
		opacity:1;
		transform:translate(0,0);
	}
	
	#box_works_main > .box_footer a,
	#box_outline > .box_footer a{
		background:#c71918 !important;
	}
	
}