@charset "utf-8";

/*
Theme Name: テーマ
Version 1.0
*/ 

@import "base.css";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  全般設定
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

body{
	padding:0;
	font-family : "メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic","MS P Gothic",sans-serif, Arial,Helvetica;
	font-size:16px;
	color:#000000;
	-webkit-text-size-adjust: 100%;
}
#wrapper{
	padding:0;
	width:100%;
}

/*　header　
----------------------------------------------------------*/
ul.h_top{
	width:1050px;
	height:50px;
	color:#3e3a39;
	font-size:0.75em;
	margin:0 auto;
	padding:1em 0 .2em;
}
ul.h_top li{
	float:left;
}
ul.h_top li:nth-child(1){
	width:300px;
}
ul.h_top li:nth-child(2){
	width:550px;
	padding-top:.8em;
}
ul.h_top li:nth-child(3){
	width:200px;
	text-align:right;
}
ul.h_top li:nth-child(3) img{
	margin-bottom:.5em;
}
header .h_bottom{
	background-position:top center;
	background-repeat:no-repeat;
}
.index header .h_bottom{
	height:406px;
	background-image:url(../img/index/index_main.jpg);
	text-align:center;
	padding-top:17.5em;
}
.works header .h_bottom,
.company header .h_bottom,
.recruit header .h_bottom{
	height:332px;
	padding-top:145px;
}
.works header .h_bottom{
	background-image:url(../img/works/works_main.jpg);
}
.company header .h_bottom{
	background-image:url(../img/company/company_main.jpg);
}
.recruit header .h_bottom{
	background-image:url(../img/recruit/recruit_main.jpg);
}
.h_bottom .h_inner{
	width:1050px;
	margin:0 auto;
}

/*　navi
----------------------------------------------------------*/
nav{
	width:100%;
	height:57.2px;
	background-color:#eeeeef;
	padding-top:.8em;
}
ul.menu{
	width:1050px;
	margin:0 auto;
}
ul.menu li{
	width:208px;
	color:#0068b7;
	font-size:1.125em;
	font-weight:bold;
	text-align:center;
	letter-spacing:7px;
	float:left;
}
ul.menu li:nth-child(5){
	letter-spacing:4px;
}
ul.menu li a{
	color:#0068b7;
}
ul.menu li.current a{
	color:#00abeb;
}
ul.menu li a:hover{
	color:#00abeb;
	text-decoration:none;
}
ul.menu li p{
	color:#231815;
	font-size:0.61em;
	font-weight:normal;
	letter-spacing:3px;
}

ul.menu li{
	-webkit-transform: skewX(160deg);
	-moz-transform: skewX(160deg);
	transform: skewX(160deg);
	border-right: 1px solid #b4b4b5;
}
ul.menu li:nth-child(1){
	-webkit-transform: skewX(160deg);
	-moz-transform: skewX(160deg);
	transform: skewX(160deg);
	border-left: 1px solid #b4b4b5;
}
ul.menu li a{
	display:block;
	transform: skewX(-160deg);
}

#pagetop {
    position: fixed;
    bottom: 45px;
    right: 20px;
}
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

/*　footer　
----------------------------------------------------------*/
footer{
	background-color:#0068b7;
	padding:2em 0 1.6em;
}
.f_inner{
	width:1050px;
	margin:0 auto;
}
.f_inner img{
	float:left;
}
.copyright{
	color:#ffffff;
	font-size:0.81em;
	float:right;
	margin-top:2em;
}

/*　main　
----------------------------------------------------------*/
section{
	width:1050px;
	margin:0 auto;
}
h1{
	font-size:1.08em;
}

.ttl02{
	width:520px;
	height:145px;
	background-color:rgba(0,104,183,0.8);
	color:#ffffff;
	font-size:2.93em;
	font-weight:bold;
	line-height:1.3;
	letter-spacing:15px;
	text-align:center;
	padding-top:45px;
}
.ttl02 p{
	font-size:0.59em;
	font-weight:normal;
	letter-spacing:10px;
}
.index .ttl02{
	width:160px;
	height:auto;
	background-color:transparent;
	color:#ffffff;
	font-size:1.875em;
	font-weight:bold;
	line-height:1.3;
	letter-spacing:10px;
	text-align:center;
	padding-top:0;
}
.index #index_works .ttl02{
	margin:0 auto;
}
.index #index_recruit .ttl02{
	color:#0068b7;
	margin:0 auto 1.5em;
}
.index .ttl02 p{
	font-size:0.56em;
	font-weight:normal;
	letter-spacing:7px;
}

.ttl03{
	color:#0068b7;
	font-size:1.875em;
	font-weight:bold;
	text-align:center;
	line-height:1.3;
	letter-spacing:10px;
	margin:2em auto 1em;	

	display: flex;
	align-items: center;
}
.ttl03:before, .ttl03:after {
	content: "";
	flex-grow:1;
	height:1px;
	background:#0068b7;
	display:block;
}
.ttl03:before {
	margin-right: .4em;
}
.ttl03:after {
	margin-left: .4em;
}
.ttl03 div{
	margin:0 1.12em;
}
.ttl03 div p{
	font-size:0.56em;
	font-weight:normal;
	letter-spacing:7px;
}
#paving .ttl03,
#greeting .ttl03,
#overview .ttl03,
#guideline .ttl03{
	width:60%;
}
#civil .ttl03,
#other .ttl03{
	width:35%;
}

.ttl04{	
	color:#0068b7;
	font-size:1.22em;
	font-weight:bold;
	text-align:center;
	line-height:1.3;
	letter-spacing:3px;
	margin:0 auto .5em;	
	display: flex;
	align-items: center;
}
.ttl04:after {
	content: "";
	flex-grow:1;
	height:1px;
	background:#0068b7;
	display:block;
}
.ttl04:after {
	width:120px;
	margin-left: .4em;
}
.ttl04 p{
	color:#000000;
	margin-right:1em; 
}

.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  index.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#index_works,
#index_recruit,
#index_company{
	background-position:top center;
	background-repeat:no-repeat;
	padding-top:7em;
}
#index_works{
	height:708px;
	background-image:url(../img/index/index_works.jpg);
	text-align:center;
}
#index_works ul{
	margin:2em 0;
}
#index_works ul li{
	width:322px;
	height:194px;
	display:block;
	background-position:top center , top center;
	background-repeat:no-repeat , no-repeat;
	background-position:top center;
	background-repeat:no-repeat;
	float:left;
}
#index_works ul li:hover{
	background-position:top center;
	background-repeat:no-repeat;
}
#index_works ul li a{
	width:322px;
	height:194px;
	display:block;
}
#index_works ul li:nth-child(3n+1),
#index_works ul li:nth-child(3n+2){
	margin-right:2.6em;
}
#index_works ul.i_works01 li:nth-child(1){
	background-image:url(../img/index/i_works_img01.png) , url(../img/index/i_works_img01h.jpg);
}
#index_works ul.i_works01 li:nth-child(1):hover{
	background-image:url(../img/index/i_works_img01h.jpg);
}
#index_works ul.i_works01 li:nth-child(2){
	background-image:url(../img/index/i_works_img02.png) , url(../img/index/i_works_img02h.jpg);
}
#index_works ul.i_works01 li:nth-child(2):hover{
	background-image:url(../img/index/i_works_img02h.jpg);
}
#index_works ul.i_works01 li:nth-child(3){
	background-image:url(../img/index/i_works_img03.png) , url(../img/index/i_works_img03h.jpg);
}
#index_works ul.i_works01 li:nth-child(3):hover{
	background-image:url(../img/index/i_works_img03h.jpg);
}
#index_works ul.i_works02 li:nth-child(1){
	background-image:url(../img/index/i_works_img04.png) , url(../img/index/i_works_img04h.jpg);
}
#index_works ul.i_works02 li:nth-child(1):hover{
	background-image:url(../img/index/i_works_img04h.jpg);
}
#index_works ul.i_works02 li:nth-child(2){
	background-image:url(../img/index/i_works_img05.png) , url(../img/index/i_works_img05h.jpg);
}
#index_works ul.i_works02 li:nth-child(2):hover{
	background-image:url(../img/index/i_works_img05h.jpg);
}
#index_works ul.i_works02 li:nth-child(3){
	background-image:url(../img/index/i_works_img06.png) , url(../img/index/i_works_img06h.jpg);
}
#index_works ul.i_works02 li:nth-child(3):hover{
	background-image:url(../img/index/i_works_img06h.jpg);
}

#index_recruit{
	height:505px;
	background-image:url(../img/index/index_recruit.jpg);
	text-align:center;
}
.i_recruit_txt01{
	color:#0068b7;
	font-size:1.875em;
	font-weight:bold;
	letter-spacing:12px;
	margin:1.5em 0;
}
.i_recruit_txt01 span.red{
	color:#e50012;
}
#index_recruit .index_btn,
#index_company .index_btn{
	width:380px;
	height:67px;
	background-image:url(../img/index/index_btn01.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	margin:0 auto;
}
#index_recruit .index_btn:hover,
#index_company .index_btn:hover{
	background-image:url(../img/index/index_btn01h.jpg);
}
.index_btn a{
	width:380px;
	height:67px;
	display:block;
}
#index_company{
	height:334px;
	background-image:url(../img/index/index_company.jpg);
	text-align:center;
}
#index_company ul{
	width:880px;
	margin:0 auto 3em;
	text-align:left;
}
#index_company ul li{
	float:left;
}
#index_company ul li:nth-child(1){
	width:210px;
}

#index_contact section{
	margin:2em auto 1em;
}
.i_contact_txt01{
	width:500px;
	color:#3e3a39;
	font-size:1.125em;
	float:left;
}
.i_contact_txt01 img{
	margin-right:.5em;
}
.i_contact_txt01 p{
	font-size:1.11em;
	font-weight:bold;
	line-height:1.4;
	margin:0 0 .2em;
}
.i_contact_box01{
	width:380px;
	float:right;
}
#index_contact .index_btn{
	width:380px;
	height:67px;
	background-image:url(../img/index/index_btn02.jpg);
	background-position:top center;
	background-repeat:no-repeat;
}
#index_contact .index_btn:hover{
	background-image:url(../img/index/index_btn02h.jpg);
}
article section.index_txt{
	color:#3e3a39;
	font-size:1.125em;
	margin-bottom:1em;
}

/*　追加　*/

#index_jisseki {
	margin-top: 55px;
	
}
.index #index_jisseki .ttl02{
	color:#3e4144;
	margin:0 auto 1.5em;
}
#index_jisseki ul{
  width: 880px;
  margin: 0 auto 3em;
  text-align: left;
}

#index_jisseki ul li:nth-child(1){
  width: 210px;
}
#index_jisseki ul li{
  float: left;
}

#index_jisseki .ji_slide{
  padding-bottom: 100px;
}

#index_jisseki .ji_title {
	margin: 54px auto -20px!important;
}


/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.ji_list {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.ji_list_wrap {
  display: flex;
  overflow: hidden;
}

.ji_list_01 {
  display: flex;
  list-style: none;
}

.ji_list_01-left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}

.ji_list_item {
  width: calc(100vw / 3);
}
.ji_list_item > img{
   width: 100%;
}
.ji_list ul {
	width: 100%!important;
	margin-bottom: 0px!important;
}

.ji_list ul li{
	width: 401px!important;
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  works.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.paving_txt01,
.civil_txt01,
.other_txt01{
	font-size:1.23em;
	text-align:center;
}
.paving_txt01 p,
.civil_txt01 p,
.other_txt01 p{
	font-size:1.1em;
	font-weight:bold;
}
#paving ul,
#civil ul,
#other ul{
  	margin:3em 0 4em;
}
#paving ul li,
#civil ul li,
#other ul li{
  	margin-bottom:3em;
}
#paving ul li img,
#civil ul li img,
#other ul li img{
	float:left;
}
.paving_box01,
.civil_box01,
.other_box01{
	width:707px;
	font-size:1.125em;
	float:right;
}
  
#paving01,
#paving02,
#paving03,
#paving04,
#paving05,
#other01{
  margin-top: -100px; 
  padding-top: 100px; 
}


/*IE10以降に適用されるCSSハック（一応）*/
@media all and (-ms-high-contrast:none){
    #paving01,
    #paving02,
    #paving03,
    #paving04,
    #paving05,
    #other01{
      margin-top: -170px; 
      padding-top: 170px; 
    }
}




/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  company.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.greeting_box01 img{
	float:right;
}
.greeting_txt01{
	width:565px;
	font-size:1.125em;
	float:left;
}
.greeting_txt01 p{
	font-size:1.3em;
	font-weight:bold;
	margin-bottom:0.2em;
}
#overview table{
	width:100%;
	border-top:1px solid #0068b7;
	border-left:1px solid #0068b7;
	margin-bottom:5em;
}
#overview table th,
#overview table td{
	border-bottom:1px solid #0068b7;
	border-right:1px solid #0068b7;
	font-size:1.125em;
}
#overview table th{
	width:290px;
	background-color:#3386c5;
	color:#ffffff;
	font-weight:bold;
	text-align:center;
	vertical-align:top;
	padding:1em 0;
}
#overview table td{
	padding:1em 2em 1em 2.5em;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  recruit.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#recruit01{
	height:525px;
	background-image:url(../img/recruit/recruit_img02.png);
	background-position:top center;
	background-repeat:no-repeat;
	margin:4em auto 0;
	padding-top:1.5em;
	position:relative;
}
.recruit_txt01{
	width:370px;
	background-color:rgba(0,104,183,0.8);
	color:#ffffff;
	font-size:1.125em;
	padding:1.6em 1.5em;
	position:absolute;
	right:0;
	bottom:0;
}
#guideline table{
	width:100%;
	border-top:1px solid #0068b7;
	border-left:1px solid #0068b7;
	margin-bottom:5em;
}
#guideline table th,
#guideline table td{
	border-bottom:1px solid #0068b7;
	border-right:1px solid #0068b7;
	font-size:1.125em;
	line-height:1.8;
}
#guideline table th{
	width:290px;
	background-color:#3386c5;
	color:#ffffff;
	font-weight:bold;
	text-align:center;
	vertical-align:top;
	padding:1em 0;
}
/*
#guideline table th.blue{
	background-color:#00abeb;
}
*/
#guideline table td{
	padding:1em 2em 1em 2.5em;
}
#guideline table td p{
	font-weight:bold;
}