@charset "utf-8";
/*-----pages.css-----*/

@media print{
	a[href]:after {
		content: "" !important;
	}
	
	abbr[title]:after {
		content: "" !important;
	}
}

@media print, screen {
#pages.works #main_inner {
	background-image:
		url(../images/works/works_line.png),
		url(../images/works/works_bg.jpg)
		
	;
	background-position:
		center 750px,
		center 130px
	;
	background-repeat:
		repeat-x,
		no-repeat
	;
}
		.box_header {
			text-align: center;
		}
		.box_inner .box {
			overflow: hidden;
			clear: both;
		}
		
		.service_msg{
			margin-bottom:30px;
		}
		
			.content_box > .box_inner .service_msg h3{
				margin:0;
				text-align:center;
				font-size:26px;
				font-weight:normal;
				line-height:1.5em;
				text-shadow:1px 0 0 #0a3278;
				letter-spacing:0.1em;
			}
		
		.box.works_01 {
			/*margin-bottom: 20px;*/
			padding-bottom: 50px;
		}
			.box.works_01 .box_left {
				width: 490px;
				overflow: hidden;
				float: left;
			}
				.box.works_01 .box_left h3 {
					font-size: 25px;
					line-height: 1.6em;
					margin:0 0 50px 0;
				}
				.box.works_01 .box_left p {
					line-height: 1.8em;
				}
				
				.works_circle_wrapper{
					width:372px;
					height:338px;
					position:relative;
				}
				
					.works_circle_wrapper .works_circle{
						width:372px;
						height:338px;
						position:relative;
					}
					
					.works_circle_wrapper .works_pin{
						width:372px;
						height:338px;
						position:absolute;
						top:0;
						left:0;
						opacity:0;
					}
				
			.box.works_01 .box_right {
				width: 450px;
				padding-top: 250px;
				overflow: hidden;
				float: right;
			}
			.box.works_01 .box_right p {
				line-height: 2em;
				font-weight: bold;
				margin-bottom: 40px;
				text-shadow:1px 1px 0 rgba(255,255,255,1);
			}
				.box.works_02 {}
				
					ul.works_anchor {
						font-size: 0;
						text-align: center;
						padding: 0;
						margin-bottom:40px;
						letter-spacing:-0.4em;
					}
						ul.works_anchor li {
							font-size: 14px;
							list-style: none;
							text-align: center;
							vertical-align: top;
							display: inline-block;
							margin-right: 70px;
							letter-spacing:0;
						}
						
						ul.works_anchor li:last-child {
							margin-right: 0;
						}
						ul.works_anchor li a {
							display: block;
							color:#0a3278;
						}
						ul.works_anchor li a .anc_img img {
							margin: 0 auto;
						}
					.box.works_02 ul {
						padding: 0;
					}
						.box.works_02 ul li.inview_item {
							padding: 15px 0;
							overflow: hidden;
							margin-bottom: 80px;
							list-style: none;
							opacity:0;
							transition:all .5s ease;
							transform:translateY(50px);
							padding-top: 115px;
							margin-top: -115px;
						}

						.box.works_02 ul li.inview_item.inview-active {
							opacity:1;
							transform:translateY(0px);
						}

						
						.box.works_02 ul li:lst-child {
							margin-bottom: 0;
						}
						.box.works_02 ul li .works_title h3 {
							font-size: 33px;
							font-weight: normal;
							line-height: inherit;
						}
						.box.works_02 ul li .works_content {}
							.box.works_02 ul li .works_content p {
								line-height: 2em;
								font-size: 1.1em;
							}
							.box.works_02 ul li .works_kw {
								clear: both;
								padding-top: 30px;
							}
								.box.works_02 ul li .works_kw ol {
									padding: 0;
								}
									.box.works_02 ul li .works_kw ol li {
										list-style: none;
										display: inline-block;
										padding: 2px 15px 0 15px;
										margin-right: 10px;
										margin-bottom: 0;
										font-size: 0.9em;
										color: #0b3277;
										border: 1px solid #0b3277;
									}
									.box.works_02 ul li .works_kw ol li:last-child {
										margin-right: 0;
									}
									
						.box.works_02 ul li .works_images::after {
						}
						
						.box.works_02 ul li .works_images .works_images_inner {
							width:375px;
							height:240px;
							position:relative;
							z-index:1;
							transition:all ease .5s .5s;
							opacity:0;
							transform:translateX(-50px);
						}
						
						.box.works_02 ul li.inview_item.inview-active .works_images_inner{
							opacity:1;
							transform:translateX(0);
							/*animation: work_images .75s ease 0s;*/
						}
						/*
							@keyframes work_images{
								0%{
									opacity:0;
									transform:translateX(-50px);
								}
								100%{
									opacity:1;
									transform:translateX(0);
								}
							}
						*/
							.box.works_02 ul li .works_images .works_images_inner::after{
								content:"";
								display:block;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 75px 75px 0 0;
								border-color: #fff transparent transparent transparent;
								position:absolute;
								left:0;
								top:0;
								z-index:2;
							}
						
						.box.works_02 ul li#anchor_01 {}
							.box.works_02 ul li#anchor_01 .works_images {
								width: 415px;
								padding-top:40px;
								float: left;
								position:relative;
								margin-right:50px;
							}
									
								.box.works_02 ul li#anchor_01 .works_images::before{
									content:"";
									width:200px;
									height:200px;
									background:url(../images/works/construction_01_bg.gif) no-repeat;
									position:absolute;
									top:0;
									right:0;
									z-index:0;
									transition:all ease .5s .5s;
									opacity:0;
									transform:translateX(50px);
								}
								
								.box.works_02 ul li#anchor_01.inview_item.inview-active .works_images::before{
									opacity:1;
									transform:translateX(0);
								}
								
								/*
									@keyframes work_images_bg{
										0%{
											opacity:0;
											transform:translateX(50px);
										}
										100%{
											opacity:1;
											transform:translateX(0);
										}
									}
								*/

							
							.box.works_02 ul li#anchor_01 .works_title {}
							.box.works_02 ul li#anchor_01 .works_content {}
						.box.works_02 ul li#anchor_02 {}
							.box.works_02 ul li#anchor_02 .works_images {
								width: 415px;
								padding-top:40px;
								position:relative;
								margin-left:50px;
								float: right;
							}
							
								.box.works_02 ul li#anchor_02 .works_images img{
									position:relative;
									z-index:1;
								}
							
								.box.works_02 ul li#anchor_02 .works_images::before{
									content:"";
									width:200px;
									height:200px;
									background:url(../images/works/construction_02_bg.gif) no-repeat;
									position:absolute;
									top:0;
									right:0;
									z-index:0;
									transition:all ease .5s .5s;
									opacity:0;
									transform:translateX(50px);
								}
								
								.box.works_02 ul li#anchor_02.inview_item.inview-active .works_images::before{
									opacity:1;
									transform:translateX(0);
								}
							
							.box.works_02 ul li#anchor_02 .works_title {}
							.box.works_02 ul li#anchor_02 .works_content {}
							
						.box.works_02 ul li#anchor_03 {}
							.box.works_02 ul li#anchor_03 .works_images {
								width: 415px;
								padding-top:40px;
								float: left;
								position:relative;
								margin-right:50px;
							}
							
								.box.works_02 ul li#anchor_03 .works_images img{
									position:relative;
									z-index:1;
								}
							
								.box.works_02 ul li#anchor_03 .works_images::before{
									content:"";
									width:200px;
									height:200px;
									background:url(../images/works/construction_03_bg.gif) no-repeat;
									position:absolute;
									top:0;
									right:0;
									z-index:0;
									transition:all ease .5s .5s;
									opacity:0;
									transform:translateX(50px);
								}
								
								.box.works_02 ul li#anchor_03.inview_item.inview-active .works_images::before{
									opacity:1;
									transform:translateX(0);
								}

							
							.box.works_02 ul li#anchor_03 .works_title {}
							.box.works_02 ul li#anchor_03 .works_content {}
						.box.works_02 ul li#anchor_04 {}
							.box.works_02 ul li#anchor_04 .works_images {
								width: 415px;
								padding-top:40px;
								position:relative;
								margin-left:50px;
								float: right;
							}
							
								.box.works_02 ul li#anchor_04 .works_images img{
									position:relative;
									z-index:1;
								}
							
								.box.works_02 ul li#anchor_04 .works_images::before{
									content:"";
									width:200px;
									height:200px;
									background:url(../images/works/construction_04_bg.gif) no-repeat;
									position:absolute;
									top:0;
									right:0;
									z-index:0;
									transition:all ease .5s .5s;
									opacity:0;
									transform:translateX(50px);
								}
								
								.box.works_02 ul li#anchor_04.inview_item.inview-active .works_images::before{
									opacity:1;
									transform:translateX(0);
								}

							
							.box.works_02 ul li#anchor_04 .works_title {}
							.box.works_02 ul li#anchor_04 .works_content {}
							
						.box.works_02 ul li#anchor_05 {}
							.box.works_02 ul li#anchor_05 .works_images {
								width: 415px;
								padding-top:40px;
								float: left;
								position:relative;
								margin-right:50px;
							}
							
								.box.works_02 ul li#anchor_05 .works_images img{
									position:relative;
									z-index:1;
								}
							
								.box.works_02 ul li#anchor_05 .works_images::before{
									content:"";
									width:200px;
									height:200px;
									background:url(../images/works/construction_05_bg.gif) no-repeat;
									position:absolute;
									top:0;
									right:0;
									z-index:0;
									transition:all ease .5s .5s;
									opacity:0;
									transform:translateX(50px);
								}
								
								.box.works_02 ul li#anchor_05.inview_item.inview-active .works_images::before{
									opacity:1;
									transform:translateX(0);
								}

							.box.works_02 ul li#anchor_05 .works_title {}
							.box.works_02 ul li#anchor_05 .works_content {}
							
						.box.works_02 ul li#anchor_06 {}
							.box.works_02 ul li#anchor_06 .works_images {
								width: 415px;
								padding-top:40px;
								position:relative;
								margin-left:50px;
								float: right;
							}
							
								.box.works_02 ul li#anchor_06 .works_images img{
									position:relative;
									z-index:1;
								}
							
								.box.works_02 ul li#anchor_06 .works_images:before{
									content:"";
									width:200px;
									height:200px;
									background:url(../images/works/construction_06_bg.gif) no-repeat;
									position:absolute;
									top:0;
									right:0;
									z-index:0;
									transition:all ease .5s .5s;
									opacity:0;
									transform:translateX(50px);
								}
								
								.box.works_02 ul li#anchor_06.inview_item.inview-active .works_images::before{
									opacity:1;
									transform:translateX(0);
								}
							.box.works_02 ul li#anchor_06 .works_title {}
							.box.works_02 ul li#anchor_06 .works_content {}
.box_footer {
	text-align: center;
	margin-bottom: 80px;
}

/*アスベスト除去*/
.goto_asbestos{
	padding:0 0 50px 0;
	text-align:center;
}

	.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);
	}

}

@media screen and (max-width: 479px) {
	/* 479px以下用（スマートフォン用）の記述 */

#pages.works #main_inner {
	background-image:
		none,
		url(../images/works/works_bg.jpg)
	;
	background-position:
		center center,
		center 60px
	;
	background-size:
		0 ,
		570px;
}

.works_circle_wrapper{
	display:none;
}

.works_txt_bnr{
	width:75%;
	margin:0 auto;
}

.box.works_01 {
	padding-bottom: 3em;
	background-image:url(../images/works/works_line.gif);
	background-repeat:no-repeat;
	background-position:center bottom;
}
	.box.works_01 .box_left ,
	.box.works_01 .box_right {
		width: inherit;
		float: none;
		padding-top: 0;
	}
	.box.works_01 .box_left h3 {
		font-size: 1.5em;
	}
	.box.works_01 .box_left img {
		width: 85%;
		margin: 0 auto;
	}
	.box.works_01 .box_right p {
		font-weight: normal;
		line-height:1.5em;
		margin-bottom:20px;
	}
	ul.works_anchor li {
		width: 30%;
		margin-right: 0;
	}
	
.box.works_02 ul li.inview_item{
	position:relative;
	padding:0;
	margin-bottom:30px;
	padding-top: 90px;
	margin-top: -90px;
}

	
.box.works_02 ul li#anchor_01 .works_images,
.box.works_02 ul li#anchor_02 .works_images,
.box.works_02 ul li#anchor_03 .works_images,
.box.works_02 ul li#anchor_04 .works_images,
.box.works_02 ul li#anchor_05 .works_images,
.box.works_02 ul li#anchor_06 .works_images{
	position:absolute;
	top:90px;
	left:0;
	width:100px;
	float:none;
	margin-right:0;
	margin-left:0;
	padding:0;
}

.box.works_02 ul li#anchor_01 .works_images::before,
.box.works_02 ul li#anchor_02 .works_images::before,
.box.works_02 ul li#anchor_03 .works_images::before,
.box.works_02 ul li#anchor_04 .works_images::before,
.box.works_02 ul li#anchor_05 .works_images::before,
.box.works_02 ul li#anchor_06 .works_images::before{
	width:30px;
	height:30px;
}

.box.works_02 ul li .works_images .works_images_inner::after{
	display:none;
}

.box.works_02 ul li .works_images .works_images_inner{
	width:100px;
	height:auto;
	padding:10px 10px 0 0;
}

.box.works_02 ul li .works_title{
	margin-left:110px;
	position:relative;
}

.box.works_02 ul li .works_title .construction_img{
	width:40%;
	margin-bottom:10px;
}

.box.works_02 ul li .works_title h3{
	font-size:20px;
	margin:0 0 10px 0;
}

.box.works_02 ul li .works_content p{
	line-height:1.4em;
	font-size:1em;
	margin-left:110px;
}

.box.works_02 ul li .works_kw{
	padding-top:10px;
	text-align:center;
}

	.box.works_02 ul li .works_kw ol li{
		margin:0 0 5px 0;
	}
	
/*アスベスト除去*/
.goto_asbestos{
	padding:0 20px 40px 20px;
}
	
}

@media print {
	.box.works_02 ul li.inview_item{
		opacity:1;
		transform:translateY(0px);
	}
	
	.box.works_02 ul li#anchor_01.inview_item .works_images::before,
	.box.works_02 ul li#anchor_02.inview_item .works_images::before,
	.box.works_02 ul li#anchor_03.inview_item .works_images::before,
	.box.works_02 ul li#anchor_04.inview_item .works_images::before,
	.box.works_02 ul li#anchor_05.inview_item .works_images::before,
	.box.works_02 ul li.inview_item .works_images_inner{
		opacity:1;
		transform:translateX(0);
	}
	
}