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


/*
青1066b3
緑12b24b
オレンジe2901a
*/



/************************************************************
 * reset css
************************************************************/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, 
fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
html { overflow-y:scroll; }
h1, h2, h3, h4, h5, h6, td, input { font-size:100%; font-weight:normal; }
ol, ul { list-style:none; }
fieldset, img { border:0; }
caption, th { text-align:left; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }
a img, li img { vertical-align:bottom; }
img{vertical-align: bottom;}

/* html5 */
article, aside, figure, footer, header, hgroup, nav, section { display:block; margin:0; padding:0; }

*, *:before, *:after {
	box-sizing: border-box;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/****************************************

          共通設定
 
*****************************************/
body {
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
	font-size: 105%;
	line-height: 1.4em;
	letter-spacing: 0.1em;
	margin:0 auto 0 auto;
	  display: flex;
  flex-direction: column;
}

.scroll{overflow-y: hidden !important;}
.scroll::-webkit-scrollbar{height:5px;}/*バーの太さ*/
.scroll::-webkit-scrollbar-track{background:#fff;}/*バーの背景色*/
.scroll::-webkit-scrollbar-thumb{background:#2cc2e4;}/*バーの色*/

a {padding:0px; text-decoration:none; color:#000;}
a img {border: none;}
a:hover { color:#1066b3; text-decoration: underline;}
a:hover img {
opacity: 0.7;
filter: alpha(opacity=80);
}
.mar12{margin-right:12px;}
.mar35{margin-right:35px;}
.mal15{margin-left:15px;}
.mal30{margin-left:60px;}
.mat15{margin-top:15px;}
.mat30{margin-top:30px;}
.mat60{margin-top:60px;}
.mat140{margin-top:140px;}
.mat5{margin-top:5px;}
.pa10{padding: 10px;}
.pab5{padding-bottom:5px;}
.pab15{padding-bottom:15px;}
.pab30{padding-bottom:30px;}
.pat30{padding-top:30px;}
.pat15{padding-top:15px;}
.pab60{padding-bottom:60px;}
.pat20{padding-top:20px;}
.par15{padding-right:15px;}
.pal15{ padding-left:15px;}

.text110{font-size:110%;}
.text120{font-size:120%;}
.text130{font-size:130%;}
.text140{font-size:140%;}
.text150{font-size:150%;}
.text160{font-size:160%;}
.text170{font-size:170%;}
.text180{font-size:180%;}
.text190{font-size:190%;}
.text200{font-size:200%;}
.text90{font-size:90%;}
.text80{font-size:80%;}
.text75{font-size:75%;}

.textleft{text-align:left;}
.textriht{text-align:right;}
.textcenter{text-align:center;}

.text { display: inline-block; }

.indent  {text-indent: 1em;}
.indent2 {padding-left: 1em;text-indent: -1em;}
.indent3 {padding-left: 2em;text-indent: -2em;}

.hutoji{font-weight: bold;}

.text_bu{color: #1066b3;}
.text_red{color: #C91215;}
.text_green{color: #12b24b}
.text_orange{color: #e2901a}
.text_white{color: #fff;}

.clear {clear:both;	}
.img_float_r {float:right; margin-right:1em;	margin-bottom:1em;	}
.img_float_l {float:left; margin-right:1em;	margin-bottom:1em;	}


/*記事の部分のフォント*/
.font2 {font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}


.breadcrumb {
  padding-left:0;
  margin-left:0;
}

.breadcrumb li{
  display:inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 3px;
  color: #1066b3;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #000;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
color: #1066b3;
}

.kai{white-space: nowrap;}

#copyright_box{ padding: 0.5em; width: 100%; position: absolute;/*←絶対位置*/   bottom: 0; /*下に固定*/ }
#copyright_text{text-align: center; background:#0764aa; padding: 0.5em;}
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}
#top_jiseki{float: left; width: 20%;}
#top_jiseki2{float: right; width: 78%;}

.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_2 > div{
	width: 48%;
	margin: 10px;
}


.simple_square_btn5 {
	display: block;
	position: relative;
	width: 160px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #1066b3;
	 position:static ;
	z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.simple_square_btn5:hover {
	 opacity:0.8;
	 cursor: pointer;
	 text-decoration: none;
		color: #fff;
}

.btn1 {
	display: block;
	position: relative;
	width: 300px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #12b24b;
	 position:static ;
	z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.btn1:hover {
	 opacity:0.8;
	 cursor: pointer;
	 text-decoration: none;
		color: #fff;
}

.divlink {
    position: relative;
    z-index: 0; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.divlink a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.divlink:hover {
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
}

.topics dl {
padding: 15px 0;
border-bottom: 1px solid #ccc;
}

.topics dt {
padding-bottom: 5px;
}
/* saiyou-visual */
#saiyou-visual {
	background: url( ../img/saiyoujouhou.jpg) no-repeat;
	height: 300px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#saiyou-visual p {
	font-size: 300%;
	line-height: 60px;
	color: #000;
	background-color:rgba(255,255,255,0.8);
	padding: 0.5em;
	margin: 0.5em;
}
/* facebook-visual */
#facebook-visual {
	background: url( ../img/facebook.jpg) no-repeat;
	height: 300px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#facebook-visual p {
	font-size: 300%;
	line-height: 60px;
	color: #000;
	background-color:rgba(255,255,255,0.8);
	padding: 0.5em;
	margin: 0.5em;
}
/* doboku-visual */
#doboku-visual {
	background: url( ../img/saiyou.jpg) no-repeat;
	height: 300px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#doboku-visual p {
	font-size: 150%;
	line-height: 60px;
	color: #000;
	background-color:rgba(255,255,255,0.8);
	padding: 0.5em;
	margin: 0.5em;
}


.pclogo{padding: 2em 0; border-bottom: #000000 1px solid;}
.pcadd{padding: 2em 0.5em; line-height: 1.5em; border-top: #000000 1px solid;}








/*建築*/
/* build-title */
#build-title {
	background: url( ../img/build/title.jpg) no-repeat;
	height: 300px;
	display: flex;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#build-title h2 {
	font-size: 50px;
	line-height:50px;
	color: #fff;
	
	padding: 0.5em;
	margin: 0.5em;
}
.col_5{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_5 > div{
	width: 25%;
	padding: 10px;
}
.col_5 > div > div{
	position: relative;
	overflow: hidden
}




/*土木*/
/* civil-title */
#civil-title {
	background: url( ../img/civil/title.jpg) no-repeat;
	height: 300px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#civil-title h2 {
	font-size: 50px;
	line-height:50px;
	color: #fff;
	padding: 0.5em;
	margin: 0.5em;
}

/*解体*/
/* kaitai-title */
#kaitai-title {
	background: url( ../img/kaitai/titile.jpg) no-repeat;
	height: 300px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#kaitai-title h2 {
	font-size: 50px;
	line-height:50px;
	color: #fff;
	padding: 0.5em;
	margin: 0.5em;
}

/*会社案内*/
/* about-title */
#about-title {
	background: url( ../img/about/title.jpg) no-repeat;
	height: 300px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#about-title h2 {
	font-size: 50px;
	line-height:50px;
	color: #fff;
	padding: 0.5em;
	margin: 0.5em;
}



.midashi_h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #000;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #e2901a;/*左線*/
	font-size: 150%;
	line-height: 150%;
}


.tbl-r02 th {
  background: #f1f1f1;
  padding: 20px;
}
.tbl-r02 td {
  padding: 10px;
}

.tbl-r02 table,.tbl-r02 td,.tbl-r02 th {
    border-collapse: collapse;
    border:1px solid #ccc;
    }

.vision_text{color: #1066b3; font-size: 150%; text-align: center; border: 1px solid #E9E9E9; padding: 1em;}


/*お知らせ*/
/* news-title */
#news-title {
	background: url( ../img/news/title.jpg) no-repeat;
	height: 300px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#news-title h2 {
	font-size: 50px;
	line-height:50px;
	color: #000;
	padding: 0.5em;
	margin: 0.5em;
}

.news_h3 {
  padding:  0.5em;/*上下 左右の余白*/
  color: #000;/*文字色*/
  background: transparent;/*背景透明に*/
  border-bottom: solid 5px #000;/*下線*/
	font-size: 150%;
	line-height: 150%;
}
#sid_menu{
	width:20%;
	float:right;
}
#sid_list_sub {
}

#sid_list_sub  ul{
	background-color:#fff;
	border:#e4e6e4 solid 1px;
	padding:5px;
	_zoom:1;
}

#sid_list_sub  li {
border-bottom:#e4e6e4 dotted 1px;
height:40px;
line-height:40px;
}

#sid_list_sub  li:hover {
	_zoom:1;
}
#sid_list_sub  li a{
	display:block;
	_zoom:1;
	padding-left:20px;
}

#sid_list_sub li a.selected {
	   padding-left:20px;
}
#sid_menu h4{
	background-color:#1066b3;
	color:#fff;
	height:60px;
	line-height:60px;
	text-align:center;
	font-size:110%;
}
.left01{width:70%; margin:0 auto; float:left}


/*実績案内*/
/* works-title */
#works-title {
	background: url( ../img/works/title.jpg) no-repeat;
	height: 300px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#works-title h2 {
	font-size: 50px;
	line-height:50px;
	color: #fff;
	padding: 0.5em;
	margin: 0.5em;
}



/*採用情報*/
/* recruit-title */
#recruit-title {
	background: url( ../img/recruit/title.jpg) no-repeat;
	height: 300px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#recruit-title h2 {
	font-size: 50px;
	line-height:50px;
	color: #fff;
	padding: 0.5em;
	margin: 0.5em;
}

.tbl-r01 th {
  background: #f1f1f1;
  padding: 15px;
	text-align: right;
	white-space:nowrap;
	width:15%;
}
.tbl-r01 td {
  padding: 10px;
}

.tbl-r01 table,.tbl-r01 td,.tbl-r01 th {
    border-collapse: collapse;
    border:1px solid #ccc;
    }

.tbl-r03 th {
  background: #f1f1f1;
  padding: 15px;
	text-align: center;
	white-space:nowrap;
	width:15%;
}
.tbl-r03 td {
  padding: 10px;
}

.tbl-r03 table,.tbl-r03 td,.tbl-r03 th {
    border-collapse: collapse;
    border:1px solid #ccc;
}

u {
	text-decoration:none;
}
u,
.kasen {
	padding-bottom:5px; 
	border-bottom: #1066b3 solid 5px;
	
}

.recruit_h4{border-bottom: #1066b3 solid 5px; padding: 5px 0; }


/************************************************************
 * 工事現場紹介　
************************************************************/
.bfaf	ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
 
.bfaf li {
    float: left;
    position: relative;
	width: 47%;
	text-align: center;
}
 
.bfaf li:last-child {
    margin-left: 50px;
}
 
.bfaf li span {
    display: block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    background: #c00;
    text-align: center;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0px;
    left: 0px;
}
.bfaf li:last-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    margin: auto;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 50px solid transparent;
    border-left: 15px solid #2a75bf;
}
.bfaf2	ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
 
.bfaf2 li {
    float: left;
    position: relative;
	width: 47%;
	text-align: center;
}
 
.bfaf2 li:last-child {
    margin-left: 50px;
}
 
.bfaf2 li span {
    display: block;
    width: 90%;
    padding: 5px;
    line-height: 1.4em;
    background: rgba(0,0,0,0.7);
    text-align: left;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0px;
    left: -2px;
}
.bfaf2 li p {
    display: block;
    width: 90%;
    padding: 3px;
    line-height: 1.4em;
    background: rgba(0,0,0,0.7);
    text-align: left;
    color: #fff;
    font-size: 16px;
    position: absolute;
 top: 51%;

    left: -2px;
}
.bfaf2 li:last-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    margin: auto;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 50px solid transparent;
    border-left: 15px solid #2a75bf;
}
.box5 {
    padding: 0.5em 1em;
    margin: 6em auto 6em auto;
    border: double 5px #12b24b;
	width: 700px;
}

.container {
  font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  text-align: center;
}
.btn-open {
  display: inline-block;
  width: 180px;
  height:50px;
  text-align: center;
  background-color: #12b24b;
  font-size: 16px;
  line-height: 52px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #12b24b;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-open:after{
  width: 100%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background : #FFF;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transition: .2s;
  z-index: -1;
}
.btn-open:hover{
  color: #12b24b;
}
.btn-open:hover:after{
  height: 240%;
  opacity: 1;
}
.btn-open:active:after{
  height: 340%;
  opacity: 1;
}
/*******************/



@media screen and (min-width: 1200px) {
.topics dt {clear: left;float: left;width: 20%;}
.topics dd {margin-left: 11%;}
}

@media screen and (max-width: 1800px) {
.col_3 > div{width: 31%;	padding: 5px;}
.bfaf li {width: 45%;}
.bfaf2 li {width: 45%;}
}
@media screen and (max-width: 1400px) {
#top_jiseki{float: none; width: 100%;}
#top_jiseki2{float: none; width: 100%;}
	
}
@media screen and (max-width: 1300px) {
.col_3 > div{width: 45%;	padding: 5px;}
.col_5 > div{width: 33.33333%;}
.left01{width:100%; margin:0 auto; float:none;}
#sid_menu{	width:100%;	float:none;}
.col_2 > div{width: 100%; 
}
@media screen and (max-width: 960px) {
.vision_text{font-size: 130%;}
.col_3 > div{width: 100%;}
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
.bfaf li {width: 100%;}
.bfaf li:last-child { margin-left: 0px; margin-top: 1em;}
.bfaf li:last-child::before {display: none;}
.bfaf2 li {width: 100%;}
.bfaf2 li:last-child { margin-left: 0px; margin-top: 1em;}
.bfaf2 li:last-child::before {display: none;}
}
@media screen and (max-width: 750px) {
img {
max-width: 100%;
height: auto;
}
  .tbl-r02 {
    width: 100%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
  .tbl-r01 {
    width: 100%;
  }
  .tbl-r01 th,
  .tbl-r01 td {
　　border-bottom: none;
    display: block;
    width: 100%;
	 
  }	
  .tbl-r01 th{  text-align: center;}
  .tbl-r03 {
    width: 100%;
  }
  .tbl-r03 th,
  .tbl-r03 td {
　　border-bottom: none;
    display: block;
    width: 100%;
	 
  }	
  .tbl-r03 th{  text-align: center;}

.box5 {
	width: 100%;
}
}


@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
	.col_5 > div{
		width: 100%;
	}

}