@charset "utf-8";

@import url(default.css);
@import url(base.css);

	#wrapper{width:1010px;}
	#worksarea #wrapper{width:980px;}
	.flexible#worksarea #wrapper{width:100%;}

	#contentheader,
	#index #contentheader{margin-bottom:40px;}

		#contentheader h1{width:238px;}
		.flexible #contentheader h1{width:179px;}
		.active-sp #contentheader h1{width:119px;}

			
		#contentheader ul{width:404px;}
		
		.flexible #contentheader h1 img{width:179px;}
		.active-sp #contentheader h1 img{width:119px;}


		.flexible #contentheader ul{
			display:block;
			width:324px;
			margin:0 auto -50px;;
			position:relative;
			top:6px;
		}
		.active-sp #contentheader ul{width:244px;}
		.active-sp2 #contentheader ul{
			width:184px;
			padding-top:5px;
		}
		/*.active-sp2  #contentheader ul{width:153px;top:9px;}*/

			.flexible #contentheader ul li{width:80px;}
			.flexible #contentheader ul li img{width:80px;}

			.active-sp #contentheader ul li{width:60px;}
			.active-sp #contentheader ul li img{width:60px;}

			.active-sp2 #contentheader ul li{width:45px;}
			.active-sp2 #contentheader ul li img{width:45px;}


	#workslist #subcontent{
		width:957px;
		margin:0 auto 30px;
	}
	.flexible#workslist #subcontent{
		width:auto;
		margin:0;
	}
	


	/* 施工事例 */

		#catlabel{
			width:620px;
			margin:0 auto 0;
			padding:10px 0 0 25px;
			position:relative;
			top:-25px;
		}
		.flexible #catlabel{top:0;}
		.active-sp #catlabel{
			width:265px;
			padding:0;
		}

			#catlabel li{
				width:285px;
				height:70px;
				float:left;
				list-style:none;
				background:#fff;
			}
			#catlabel li.kiri{
				color:#036eb8;
				margin-right:50px;
			}
			#catlabel li.yose{
				color:#a40b5d;
			}
			
			.active-sp #catlabel li{
				width:265px;
				height:50px;
				float:none;
				margin:0 0 0 5px;
			}
			

				#catlabel li h1{
					width:50px;
					float:left;
					margin-right:-10px;
					position:relative;
					top:10px;
					left:-25px;
				}
				.active-sp #catlabel li h1{
					width:30px;
					top:10px;
					left:-15px;
				}

				#catlabel li h1 img{width:50px;}
				.active-sp #catlabel li h1 img{width:30px;}

				#catlabel li p{
					width:240px;
					font-size:95%;
					margin-left:35px;
					line-height:160%;
				}
				.active-sp #catlabel li p{
					width:230px;
					font-size:90%;
					margin-left:25px;
					padding-top:7px;
					line-height:160%;
				}


		#works-list{
			clear:both;
			width:1000px;
			padding:0 0 25px;
			margin:0 auto;
			float:none;
		}
		.flexible #works-list{
			padding-top:20px;
			width:800px;			
		}
		.active #works-list{
			width:600px;
			overflow:hidden;
		}
		.active-sp #works-list{
			width:400px;
			overflow:hidden;
		}
		.active-sp2 #works-list{
			width:295px;
			padding-left:5px;
		}

		.flexible .pagelinks{width:100%;}

		
			#works-list li{
				width:180px;
				height:200px;
				margin:0 0 20px 0;
				padding:0 10px;
				float:left;
				list-style:none;
			}
			.flexible #works-list li{
				margin:0 0 20px;
			}
			.active-sp #works-list li{
				margin:0 0 10px;
			}
			.active-sp2 #works-list li{
				width:135px;
				height:200px;
				margin:0 0 5px 0;
				padding:0 5px 5px;
				height:170px;
			}
				
				#works-list li a{
					display:block;
					width:180px;
					height:200px;
					text-decoration:none;
					-moz-box-shadow:0px 1px 3px 0px #aaa;
					-webkit-box-shadow:0px 1px 3px 0px #aaa;
					box-shadow:0px 1px 3px 0px #aaa;
					background:url(../works/images/line_red2.gif) repeat-x #fff;
				}
				.active-sp2 #works-list li a{
					width:135px;
					height:170px;
				}

				#works-list li.kiri a{background:url(../works/images/line_blue.gif) repeat-x #fff;}
				
	
				#works-list li h1{
					height:29px;
					margin:0;
					padding:11px 0 0;
					color:#0c308e;
					text-align:center;
				}
				.active-sp2 #works-list li h1{font-size:90%;}
	
				.wnote{
					padding:3px 0 0;
					color:#c30;
					font-size:120%;
					font-weight:bold;
					text-align:center;
				}
				.active-sp2 .wnote{
					padding:0;
				}
				
				#works-list li .contentpic{
					width:160px;
					height:120px;
					margin:0 auto 7px;
					text-align:center;
					background-position:50% 50%;
					background-repeat:no-repeat;
					background-size:auto 120px;
				}
				.active-sp2 #works-list li .contentpic{
					width:125px;
					height:94px;
					padding:0 5px;
				}


				
				/*#works-list li .contentpic img{width:160px;}
				.active-sp2 #works-list li .contentpic img{width:125px;}*/
				
				
				
				.contentlink-square{
					width:18px;
					height:18px;
					margin-bottom:-60px;
					position:relative;
					z-index:20;
					text-indent:-9999px;
					text-decoration:none;
					top:-22px;
					left:152px;
					background:url(../works/images/link_to-page-orange-ss.png);
					background-size:100% auto;
				}
				.active-sp .contentlink-square{display:block;}
				.active-sp2 .contentlink-square{display:none;}
	
				
				#main li:hover{
					filter:alpha(opacity=70);
					-moz-opacity:0.70;
					opacity:0.70;
				}
				#main li a:hover{
					color:#c00;
				}



	/* エリア別施工実績 */

	#worksarea #main{padding:20px 0;}
	.active-sp#worksarea #main{padding:10px 0 5px;}

		#kumamotomap{
			width:780px;
			margin:0 auto;
			text-align:center;
		}
		.active #kumamotomap{
			width:685px;
			margin:0 auto;
			text-align:center;
		}
		.active-sp #kumamotomap{width:100%;}

			.active #kumamotomap img{width:685px;}
			.active-sp #kumamotomap img{width:100%;}

			.workscount{
				width:70px;
				height:30px;
				margin-bottom:-30px;
				color:#c30;
				font-size:240%;
				font-family:'Anton',sans-serif;
				text-align:center;
				position:relative;
			}
			.active .workscount{font-size:220%;}
			.active-sp .workscount{display:none;}
			
			#fukuoka{
				top:-687px;
				left:267px;
			}

			#tamanagun{
				top:-653px;
				left:340px;
			}

			#tamana{
				top:-578px;
				left:328px;
			}

			#yamaga{
				top:-659px;
				left:428px;
			}

			#kikuchi{
				top:-613px;
				left:505px;
			}

			#kikuchigun{
				top:-539px;
				left:504px;
			}

			#koushi{
				top:-550px;
				left:440px;
			}

			#aso{
				top:-578px;
				left:621px;
			}

			#asogun{
				top:-499px;
				left:598px;
			}

			#kumamoto{
				top:-495px;
				left:391px;
			}

			#kamimashiki{
				top:-430px;
				left:546px;
			}

			#uto{
				top:-428px;
				left:346px;
			}

			#uki{
				top:-381px;
				left:408px;
			}

			#yatsushirogun{
				top:-357px;
				left:366px;
			}

			#yatsushiro{
				top:-292px;
				left:370px;
			}

			#kamiamakusa{
				top:-324px;
				left:244px;
			}

			#amakusa{
				top:-272px;
				left:80px;
			}

			#ashikita{
				top:-176px;
				left:280px;
			}

			#hitoyoshi{
				top:-91px;
				left:380px;
			}

			#kuma{
				top:-174px;
				left:463px;
			}


			/* active */
			
			.active #fukuoka{
				top:-606px;
				left:230px;
			}

			.active #tamanagun{
				top:-577px;
				left:296px;
			}

			.active #tamana{
				top:-511px;
				left:285px;
			}

			.active #yamaga{
				top:-582px;
				left:372px;
			}

			.active #kikuchi{
				top:-542px;
				left:440px;
			}

			.active #kikuchigun{
				top:-477px;
				left:437px;
			}

			.active #koushi{
				top:-486px;
				left:382px;
			}

			.active #aso{
				top:-511px;
				left:542px;
			}

			.active #asogun{
				top:-441px;
				left:522px;
			}

			.active #kumamoto{
				top:-438px;
				left:340px;
			}

			.active #kamimashiki{
				top:-381px;
				left:476px;
			}

			.active #uto{
				top:-379px;
				left:299px;
			}

			.active #uki{
				top:-338px;
				left:355px;
			}

			.active #yatsushirogun{
				top:-316px;
				left:318px;
			}

			.active #yatsushiro{
				top:-259px;
				left:322px;
			}

			.active #kamiamakusa{
				top:-288px;
				left:210px;
			}

			.active #amakusa{
				top:-242px;
				left:66px;
			}

			.active #ashikita{
				top:-157px;
				left:242px;
			}

			.active #hitoyoshi{
				top:-84px;
				left:331px;
			}

			.active #kuma{
				top:-156px;
				left:403px;
			}


			#arealist{
				width:780px;
				margin:20px auto 5px;
			}
			.active #arealist{width:624px;}
			.active-sp #arealist{
				width:468px;
				margin:10px auto 5px;
			}
			.active-sp2 #arealist{width:312px;}

				#arealist li{
					width:132px;
					margin:2px;
					padding:5px 10px;
					float:left;
					background:#fff4cc;
				}
				
				#arealist li:after{
					content: "";
					display: block;
					visibility: hidden;
					clear: both;
					height: 0px;
				}
				* html #arealist li{display: inline-table;}
				/* no ie mac \*/
				* html #arealist li{height:1%;}
				#arealist li {display: block; min-height:0;}
				/* */

					#arealist li h3{
						width:60px;
						float:left;
						text-align:center;
					}
					
					#arealist li p{
						width:30px;
						margin:0;
						padding-right:5px;
						float:right;
						text-align:right;
						color:#c30;
						font-size:140%;
						font-family:'Anton',sans-serif;
					}

			#worksarea-remarks{
				width:770px;
				margin:0 auto 15px;
				padding:0 5px;
				text-align:right;
				font-size:90%;
			}
			.active #worksarea-remarks{width:614px;}
			.active-sp #worksarea-remarks{width:458px;}
			.active-sp2 #worksarea-remarks{width:302px;}