@charset "UTF-8";

body {
	background: #FFFFFF ;
}




* { 
    margin: 0px; 
    padding: 0px; 
}

/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.zdo_drawer_menu * {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  font: inherit;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: left;
  text-decoration: none;
  list-style: none;
}

.zdo_drawer_menu a {
  color: inherit;
  text-decoration: none;
}

.zdo_drawer_menu a:visited {
  color: inherit;
}

.zdo_drawer_menu .zdo_drawer_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  background-color: rgba(51, 51, 51, 0.5);
  display: none;
  top: 0;
  left: 0;
}

.zdo_drawer_menu .zdo_drawer_button {
  display: block;
  background: none;
  border: none;
  padding: 0;
  width: 42px;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 32px;
  z-index: 1001;
  text-align: center;
  outline: none;
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar {
  width: 49px;
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar1 {
  transform: rotate(30deg);
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar2 {
  opacity: 0;
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar3 {
  transform: rotate(-30deg);
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_menu_text {
  display: none;
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_close {
  display: block;
}

.zdo_drawer_menu .zdo_drawer_bar {
  display: block;
  height: 2px;
  margin: 10px 0;
  transition: all 0.2s;
  transform-origin: 0 0;
}

.zdo_drawer_menu .zdo_drawer_text {
  text-align: center;
  font-size: 10px;
}

.zdo_drawer_menu .zdo_drawer_close {
  letter-spacing: 0.08em;
  display: none;
}

.zdo_drawer_menu .zdo_drawer_menu_text {
  display: block;
}

.zdo_drawer_menu .zdo_drawer_nav_wrapper {
  width: 280px;
  height: 100%;
  transition: all 0.2s;
  transform: translate(280px);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  background-color: #FFF;
}

.zdo_drawer_menu .zdo_drawer_nav_wrapper.open {
  transform: translate(0);
}

.zdo_drawer_menu.left .zdo_drawer_button {
  right: auto;
  left: 32px;
}

.zdo_drawer_menu.left .zdo_drawer_nav_wrapper {
  transform: translate(-280px);
  right: auto;
  left: 0;
}

.zdo_drawer_menu.left .zdo_drawer_nav_wrapper.open {
  transform: translate(0);
}

/*+++ Default Navigation CSS +++*/
.zdo_drawer_menu .zdo_drawer_nav {
  padding: 112px 24px;
}

.zdo_drawer_menu .zdo_drawer_nav li {
  font-size: 18px;
  margin-bottom: 17px;
color: #ff3434;
}

/*+++ Default Button Color +++*/
.zdo_drawer_menu .zdo_drawer_button {
  color: #ff3434;
}

.zdo_drawer_menu .zdo_drawer_button .zdo_drawer_bar {
  background-color: #ff3434;
}

.swiper-container {
	width: 100%;
	 height: 0 auto;
}

.swiper-slide {
	padding-top: 160px; /* 画像位置の調整用 */
	text-align: center;
	color: #fff;
	font-size: 30px;
}



 .swiper-container {
        width: 100%;
     min-height: 250px;
     max-height: 513px;
      }
      
      .swiper-slide {
        padding-top: 0px;
        /* 画像位置の調整用 */
        text-align: center;
        color: #fff;
        font-size: 30px;
      }


              .sl {	width: 100%;
	height:0 auto;
	margin-top: 0px;
    background-image: url(../img/top-back-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 50%;
}




          .sl2 {	
    width: 100%;
	height:0 auto;
	margin-top: 0px;
    background-image: url(../img/top-back-tab2.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 50%;
}






#rogo-img {
  width: 100%;
  padding-top: 5%;
  padding-left: 3%;
   padding-bottom: 3%;
	background: #000000;
}

#rogo-img img{
  width: 100px;
}





.top-message {
	clear: both;
	margin: 0 auto;
	width: 100%;
	height: auto;
	background-color: #FFFFFF;
	line-height: 180%;
  }

.top-message h1{
	padding: 0;
	font-size: 1.3em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
	margin-top: 5%;
  }

.top-message p{
	text-align: center;
	color: #000000;
	line-height: 180%;
		padding-left: 10%;
	padding-right: 10%;
  }





.top-link1 {
  width: 30%;
  margin: 8% 35% 10% 35%;
  text-align: center;
  text-decoration: none;
}

.top-link1 img{
  width: 100%;
 }


.top-link1 a{
	display: block;
	width: 100%;
	height: auto;
	}

.top-link1 a:link {
  color: black;
  text-decoration: none;
	display: block;
}
.top-link1 a:visited {
	display: block;
  color: black;
  text-decoration: none;
}
.top-link1 a:hover {
	display: block;
    color: white;
	text-decoration: none;
}






.top-link {
  width: 30%;
  margin: 8% 35% 10% 35%;
  text-align: center;
  text-decoration: none;
}

.top-link img{
  width: 100%;
 }


.top-link a{
	display: block;
	width: 100%;
	height: auto;
	}

.top-link a:link {
  color: black;
  text-decoration: none;
	display: block;
}
.top-link a:visited {
	display: block;
  color: black;
  text-decoration: none;
}
.top-link a:hover {
	display: block;
    color: white;
	text-decoration: none;
}

.top-work {
	width: 100%;
	height:0 auto;
	margin-top: 20px;
    background-image: url(../img/top-work-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
	}





.top-work h2{
	padding: 0;
	font-size: 1.3em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
	margin-top: 5%;
  }

.top-work p{
	text-align: center;
	color: #000000;
	line-height: 180%;
		padding-left: 10%;
	padding-right: 10%;
  }

.top-construction {
	width: 100%;
	height:0 auto;
	margin-top: 20px;
    background-image: url(../img/top-construction-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
	}




.top-construction h2{
	padding: 0;
	font-size: 1.3em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
	margin-top: 5%;
  }

.top-construction p{
	text-align: center;
	color: #000000;
	line-height: 180%;
	padding-left: 10%;
	padding-right: 10%;
  }


.top-flow {
	width: 100%;
	height:0 auto;
	margin-top: 20px;
    background-image: url(../img/top-flow-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
	}



.top-flow h2{
	padding: 0;
	font-size: 1.3em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
	margin-top: 5%;
  }

.top-flow p{
	text-align: center;
	color: #000000;
	line-height: 180%;
	padding-left: 10%;
	padding-right: 10%;
  }

.top-employment {
	width: 100%;
	height:0 auto;
	margin-top: 20px;
    background-image: url(../img/top-employment-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
	}



.top-employment h2{
	padding: 0;
	font-size: 1.3em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
	margin-top: 5%;
  }

.top-employment p{
	text-align: center;
	color: #000000;
	line-height: 180%;
	padding-left: 10%;
	padding-right: 10%;
  }


.top-type {
	width: 100%;
	height:0 auto;
	margin-top: 20px;
    background-image: url(../img/top-type-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
	}





.top-type h2{
	padding: 0;
	font-size: 1.3em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
	margin-top: 5%;
  }

.top-type p{
	text-align: center;
	color: #000000;
	line-height: 180%;
		padding-left: 10%;
	padding-right: 10%;
  }






.top-company {
	width: 100%;
	height:0 auto;
	margin-top: 20px;
    background-image: url(../img/top-company-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
	}





.top-company h2{
	padding: 0;
	font-size: 1.3em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
	margin-top: 5%;
  }

.top-company p{
	text-align: center;
	color: #000000;
	line-height: 180%;
		padding-left: 10%;
	padding-right: 10%;
  }




.top-contact {
	width: 100%;
	height:0 auto;
	margin-top: 20px;
    background-image: url(../img/top-contact-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
	}



.top-contact h2{
	padding: 0;
	font-size: 1.3em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
	margin-top: 5%;
  }

.top-contact p{
	text-align: center;
	color: #000000;
	line-height: 180%;
	padding-left: 10%;
	padding-right: 10%;
  }





/*
カテゴリータイプ（対応種別）
*/




.title-type {
	width: 100%;
	height:0 auto;
	margin-top: 0px;
    background-image: url(../img/cat-type-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
}

.title-type h1 {
	top: 260px;
	width: 100%;
	padding: 0% 5% 0% 5%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #000000;
  }

.cat-titlename {
	clear: both;
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding: 7%;
	background-color: #FFFFFF;
	line-height: 180%;
    text-align: center;
	  }



.typespace {
    width: 100%;
    padding: 5%;
	  }

.type-li {
	width: 100%;
	margin: 0 auto;
	list-style: none;
	float:left; 
	  }

.type-li img{
	width: 100%;
	margin: 0 auto;
}

.type-h2 {
    font-weight: bold;
    font-size: 1.2rem;
	text-align: center;
    padding-bottom: 3%;
}

.type-p {
	text-align: center;
	padding-bottom: 15%;
}



.type-text {
	clear: both;
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding: 7%;
	background-color: #FFFFFF;
	line-height: 180%;
	overflow: hidden;
  }




/*
カテゴリーワーク
*/




.title-work {
	width: 100%;
	height:0 auto;
	margin-top: 0px;
    background-image: url(../img/cat-work-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
}

.title-work h1 {
	width: 100%;
	padding: 0% 5% 0% 5%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #000000;
  }



.duct-text ul {
    width: 100%;
    padding-left: 5%;
      }

.duct-li {
	width: 45%;
	margin: 0 auto;
	list-style: none;
	float:left; 
    margin-right: 5%;
    margin-bottom: 30%;
	  }

.duct-li img{
	width: 100%;
	margin: 0 auto;
}

.duct-li h2 {
	text-align: center;
}

.duct-li p {
	text-align: center;
	}


.duct-text {
	clear: both;
	margin: 0 auto;
	width: 100%;
	height: auto;
	background-color: #FFFFFF;
	line-height: 180%;
	overflow: hidden;
    padding-top: 20%;
  }

.duct-text h2{
	font-size: 1.3em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
  }




/*
パフォーマンス
*/


.title-performance {
	width: 100%;
	height:0 auto;
	margin-top: 0px;
    background-image: url(../img/cat-construction-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
	}

.title-performance h1 {
	top: 260px;
	width: 100%;
	padding: 0% 0% 5% 0%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #000000;
  }
.title-performance ul {
	margin: 0 auto;
	width: 100%;
	display: flex;
    flex-wrap: wrap;
}
		  



.sekou p {
	margin: 0 auto;
	padding: 0% 10% 10% 10%;
	line-height: 180%;
}

.sekou ul {
	margin: 0 auto;
	width: 100%;
}
		  

.sekou li {
	width: 80%;
	padding-left: 10%;
	margin-bottom: 5%;
	  }




















.category-text-per {
	clear: both;
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding-left: 4%;
	background-color: #FFFFFF;
	overflow: hidden;
  }

.category-text-per h2{
	font-size: 1.0em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
	line-height: 180%;
  }

.category-text-per p{
	font-size: 0.7em;
	text-align: center;
	color: #000000;
	height: 80px;
	  }


/*
カテゴリーフロー
*/

.title-flow {
	width: 100%;
	height:0 auto;
	margin-top: 0px;
    background-image: url(../img/cat-flow-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
}

.title-flow h1 {
	top: 260px;
	width: 100%;
	padding: 0% 0% 0% 0%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #000000;
  }
.flowspace {
	margin: 0 auto;
	width: 100%;
	padding: 0;
	  }

.flow-li {
	width: 100%;
	padding: 0;
	margin: 0 auto;
	list-style: none;
	float:left; 
	  }

.flow-li img{
	width: 100%;
	margin: 0 auto;
}

.titleflow {
	text-align: center;
    font-weight: bold;
    font-size: 1.0em;
    padding: 2%;
}

.flow-li p {
	text-align: center;
	padding-bottom: 15%;
}


/*
カテゴリーメッセージページ　カテゴリーメッセージページ　カテゴリーメッセージページ　カテゴリーメッセージページ
*/

.title-message1 {
	width: 100%;
	height:0 auto;
	margin-top: 0px;
    background-image: url(../img/cat-message1-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
}

.title-message1 h1 {
	top: 260px;
	width: 100%;
	padding: 0% 5% 0% 5%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #000000;
  }


.title-message {
	width: 100%;
	height:0 auto;
	margin-top: 20px;
    background-image: url(../img/cat-message-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
}

.title-message h2 {
	top: 260px;
	width: 100%;
	padding: 0% 5% 0% 5%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #000000;
  }





.category-text-message {
	clear: both;
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding: 7%;
	background-color: #FFFFFF;
	line-height: 180%;
	overflow: hidden;
  }



.text-info-message {
	font-size: 0.9em;
	text-align: center;
	color: #000000;
	line-height: 180%;
	}









/* 採用情報 */


.title-recruit   {
	width: 100%;
	height:0 auto;
	margin-top: 0px;
    background-image: url(../img/cat-recruit-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
}


.title-recruit  h1 {
	text-align: center;
}


.recruit-table {
	width: 96%;
	padding: 2%;
	padding-bottom: 15%;
	}	

.recruit-table table {
	width: 100%;
	background-color: #fff ;
	}	
	
	
	.title-recruit table th{
	width: 30%;
	background-color: #fff ;
	padding-top:2%; 
	padding-bottom: 2%; 
	border-bottom: solid 1px #1E1E1E ;
	border-collapse: collapse;
		font-weight: bold;
		font-size: 0.8em;
	}	
	
	.title-recruit table td{
	width: 67%;
	background-color: #fff ;
	padding: 2% 0 2% 2%; 
	border-bottom: solid 1px #1E1E1E ;
	border-collapse: collapse;
	line-height: 180%;
		font-size: 0.8em;
	}	
	










/* 会社概要 \*/



.title-company   {
	width: 100%;
	height:0 auto;
	margin-top: 0px;
    background-image: url(../img/cat-company-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
}


.title-company  h1 {
	text-align: center;
}


.company-table {
	width: 96%;
	padding: 2%;
	padding-bottom: 15%;
	}	

.company-table table {
	width: 100%;
	background-color: #fff ;
	}	
	
	
	.company-table table th{
	width: 30%;
	background-color: #fff ;
	padding-top:2%; 
	padding-bottom: 2%; 
	border: solid 1px #1E1E1E ;
	border-collapse: collapse;
	}	
	
	.company-table table td{
	width: 67%;
	background-color: #fff ;
	padding: 2% 0 2% 2%; 
	border: solid 1px #1E1E1E ;
	border-collapse: collapse;
	line-height: 180%;
	}	
	
	



/*
カテゴリーアクセスページ　カテゴリーアクセスページ　カテゴリーアクセスページ　カテゴリーアクセスページ
*/

.title-thanks {
	width: 100%;
	height:0 auto;
	margin-top: 0px;
    background-image: url(../img/cat-thanks-tab.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 55%;
}

.title-thanks h1 {
	top: 260px;
	width: 100%;
	padding: 0% 5% 0% 5%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #000000;
  }


























.category-text {
	clear: both;
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding: 7%;
	background-color: #FFFFFF;
	line-height: 180%;
	overflow: hidden;
  }

.category-text h2{
	font-size: 1.3em;
	text-align: center;
	color: #000000;
	font-weight: bold;
	margin-bottom: 5%;
  }

.text-info {
	font-size: 0.9em;
	text-align: center;
	color: #000000;
	line-height: 180%;
	}

.text-ad {
	font-size: 0.9em;
	text-align: center;
	color: #000000;
	line-height: 180%;
	padding: 2% 0% 5% 0%;
	}





.sns {width: 100%;
	height: auto;
  background: #2E2E2E;
	padding: 10% 3% 5% 3%;
 }

.sns h1{width: 100%;
	height: auto;
	text-align: center;
	font-size: 0.8em;
	font-weight: bold;
	color: #FFFFFF;
	margin-bottom: 5%;
 }

.social {width: 35%;
	height: auto;
	margin: 0 auto;
}

/* for modern brouser */
.social:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.social {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .social {
  height: 1%;
}
.social {
  display: block;
}
/**/

.social li {width: 50%;
	float: left;
	margin: 0 auto;
	}

.social li img {width: 100%; 
	margin: 0 auto;
}





footer {
	background: #000000;
	clear: both;
	padding-top: 10%;
  }


footer a:link {
  color: white;
  text-decoration: none;
}
footer a:visited {
  color: white;
  text-decoration: none;
}
footer a:hover {
    color: gray;
	text-decoration: none;
}


.footer-ad {
	width: 100%;
  	padding: 8% 0% 0% 0%;
	}

.footer-rogo {
	width: 100%;
  	padding: 0% 0% 8% 0%;
	}

.footer-rogo img{
	margin-left: 30%;
	margin-right: 30%;
	width:40%;
  	}


.tel {
	padding-top: 2%;
	margin: 0 auto;
	text-align: center;
	font-weight: bold ;
	font-size: 1.8em;
  	}


address{
	width: 100%;
    font-size: 0.9em;
	color: #ffffff;
	text-align: center;
	padding: 5% 0% 5% 0%;
	line-height: 120%;
}



footer nav {
	clear: both;
	font-size: 0.9em;
	padding: 5% 0% 5% 0%;
	}

footer nav ul{
	}
/* for modern brouser */
footer nav ul:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */



footer nav ul {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* footer nav ul {
  height: 1%;
}
footer nav ul {
  display: block;
}
/**/

footer nav li{
	width: 100%;
	height: 50px;
	float: left;
	line-height: 350%;
	text-align: center;
	border: #323232 solid 1px;
	border-left: none;
border-right: none;
}

footer nav li + li {
 border-top:none;
border-left: none;
border-right: none;
}

footer nav a{
	width: 100%;
	height: 50px;
	display: block;
}


.copy {
	clear: both;
	width: 100%;
		}

.copy p{
	color: white;
	font-size: 0.5em;
	text-align: center;
	padding: 2%;
}