@charset "utf-8";
.slid_wrap {
	width: 100%;
	position: relative;
	overflow: hidden;
}
/*---------縮小して表示---------*/
.reduction{
    opacity: 0;
    animation:reduction 3.0s 0s 1 forwards;
    -webkit-animation:reduction 1.0s 0s 1 forwards;
    -moz-animation:reduction 1.0s 0s 1 forwards;
}
@keyframes reduction {
	0%{
		opacity: 0;
		transform:scale(1.3,1.3);
	}
	100%{
		opacity: 1;
		transform:scale(1.0,1.0);
	}
}
.slider {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	line-height: 0;
    }
.slick-slide {
  transition: all ease-in-out 0.5s;
  /*opacity: .2;*/
}
.slid {
  width: 100%;
  height: 400px;
  background-repeat: no-repeat;
  background-position:  center center;
  background-size: 768px;
}
.slid_01 {
	background-image: url("../images/top/slide_01.jpg");
    }
.slid_02 {
	background-image: url(../images/top/slide_02.jpg);
    }
.slid_03 {
	background-image: url(../images/top/slide_03.jpg);
    }
.slid_04 {
	background-image: url(../images/top/slide_04.jpg);
    }
.slid_05 {
	background-image: url(../images/top/slide_05.jpg);
    }
.slide_tx{
	position: absolute;
	width: 100%;
	bottom: 25% ;
	text-align: center;
	font-size: var(--font-size48);
  font-weight: var(--Bold);
	color: #ffffff;  
  text-shadow: 1px 1px 3px #000;
}

/*---------ご挨拶sp---------*/
.news{
	min-height: 100vh;
}
.news_inner{
	width: 87.5%;
	margin: 0 auto;
	padding: var(--px100) 0 var(--px140);
}
.title_01{
  position: relative;
	font-size: var(--font-size28);
  font-weight: var(--SemiBold);	
  padding-bottom: 0.5em;
}
.title_01:after{
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  display: block;
  height: 0.2em;
  background: -webkit-linear-gradient(to right, rgb(7, 84, 149), transparent);
  background: linear-gradient(to right, rgb(7, 84, 149), transparent);
  width: 50%;
  border-radius: 10px;
}
.title_02{
	font-size: var(--font-size18);
	position: relative;
	margin: var(--px30) 0 3px;
  padding-left: 1em;
  color: var(--main-color);
  font-weight: var(--Bold);
}
.title_02:after{
	position: absolute;
	content: '';
	display: inline-block;
	width: .7em;
	bottom: 0.7em;
	left: 0;
	border-bottom: solid 2px var(--main-color);
}
.sub_title{
  color: var(--main-color);	
	font-size: var(--font-size14);
	padding-left: 10px;
  font-weight: var(--Regular);
}

.news_wrap{
	margin: var(--px20) auto;  

    .text{
      margin: var(--px40) auto 0;
      
      h3{
        font-size: var(--font-size24);
        font-weight: var(--Bold);
        padding-bottom: 10px;
      }
      p{
        font-weight: var(--SemiBold);
        padding-top: var(--px10);
        line-height: 2.2;
        
        &.name{
          text-align: right;
          
          span{
            font-size: 120%;
          }
        }
      }
    }
    .photo {
      margin: var(--px40) auto 0; 
      width: min(100%,400px);
    }
}



/*---------会社案内 sp---------*/
.profile{
  background-image: url("../images/top/bg_01_mono.png");
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: auto 70px;
  padding-bottom: var(--px80);
  background-color: #f4f4f4;
  
  .inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0 var(--px80);


    table{
      width: 100%;
      margin-top: var(--px20);
      border-collapse: collapse;
      border-spacing: 0;

      caption{
        font-weight: var(--SemiBold);
        font-size: var(--font-size18);
        text-align: left;
        border-bottom: 2px solid #707070;
        padding-bottom: clamp(6px,1vw,10px);
      }
      tr{
        border-bottom: 1px solid #cccccc;
        vertical-align: top;
        line-height: 1.4;
      }

      th{
        text-align: left;
        padding: 1em 0 .5em;
        width: 5em;
        text-align-last: justify;
        font-weight: var(--Bold);
        display: block;
      }
      td{
        padding: .5em 0 1em;
        font-weight: var(--Medium);
        display: block;
        
        a{
          color: #173560;
          text-decoration: underline;
          
          img{
            width: 15px;
            margin-top: clamp(1px,.2vw,5px);
          }
        }
      }
    }
  }  
  
}

/*---------沿革 sp---------*/
.history{
  background-image: url("../images/top/bg_01_mono.png");
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: auto 70px;
  padding-bottom: var(--px80);
  
  .inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0 var(--px80);


    table{
      width: 100%;
      margin-top: var(--px20);
      border-collapse: collapse;
      border-spacing: 0;

      caption{
        font-weight: var(--SemiBold);
        font-size: var(--font-size18);
        text-align: left;
        border-bottom: 2px solid #707070;
        padding-bottom: clamp(6px,1vw,10px);
      }
      tr{
        border-bottom: 1px solid #cccccc;
        vertical-align: top;
        line-height: 1.4;
      }

      th{
        text-align: left;
        padding: 1em 0 .5em;
        width: 6em;
        text-align-last: justify;
        font-weight: var(--Bold);
        display: block;
      }
      td{
        padding: .5em 0 1em;
        font-weight: var(--Medium);
        display: block;

        img{
          width: min(45%,300px);
          padding: 15px var(--px20) 0 0;
        }
      }
    }
  }
  
}
/*---------路面切削工事 sp---------*/
.pavement{
	background-color: #f4f4f4;

  .pavement_inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0 var(--px140);
  }
  .pavement_inner p{
    font-size: var(--font-size18);
    padding-left: 1em;
  }
  .flow-wrap {
    margin: var(--px30) 0;
    
    .flow{
      .step {
        position: relative;
        padding: 15px 15px;
        margin-bottom: 40px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      }
      .step h3 {
        margin: 0 0 5px;
        font-size: clamp(1.4rem,1.6vw,1.6rem);
        font-weight: var(--SemiBold);
      }
      
      .step p {
        margin: 0;
        padding-left: 0;
        font-size: clamp(1.4rem,1.6vw,1.6rem);
      }
      
      /* 下矢印 */
      .step::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -1.5em; /* 縦線下端に矢印先端 */
        transform: translateX(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
        border-right: 2px solid #3498db;
        border-bottom: 2px solid #3498db;
        background: transparent;
      }

      /* 最後のステップは矢印非表示 */
      .step:last-child::after,
      .step:last-child::before {
        display: none;
      }
    }
    .flow_img{
      width: min(100%,400px);
      margin: 0 auto;
      
      li{
        padding: 0 0 var(--px20) 0;
        
        img{
          border-radius: 6px;
        }
      }
    }
  }



}
/*---------パラボラ工法 sp---------*/
.parabolic{

  .parabolic_inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0 var(--px140);
  }
  .parabolic_inner p{
    font-size: var(--font-size18);
    padding-left: 1em;
  }
  .card{
    background:#fff;
    padding:var(--px50) var(--px30);
    box-shadow:var(--shadow);
    margin-top: var(--px20);
  }

  /* グリッド */
  .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--px20);
  justify-items:center;
  }


  figure.step{
    margin:0;position:relative;background:#fff;
    border-top-left-radius: var(--px10);
    border-top-right-radius: var(--px10);
    overflow:hidden;
    max-width:300px;
  }
  .step img{display:block;width:100%;height:auto;max-width:300px;object-fit:cover}

  .badge{
    position:absolute;top:6px;left:6px;
    background:var(--sub-color);color:#fff;
    font-weight:var(--SemiBold);
    font-size:1.2rem;
    padding:3px 7px;border-radius:999px;
    line-height: 1;
  }
  figcaption{
    padding:var(--px10) 0;
    font-size:1.5rem;
  }
  .cap-title{
    display:block;
    font-weight:var(--SemiBold);
    margin-bottom:2px;
  }
  .cap-desc{
  display:block;
  color:var(--font-color);
  font-size:1.4rem;
  line-height: 1.4;
}
}
/*---------採用情報 sp---------*/
.recruit{
  background-color: #f4f4f4;
  
  .inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0 var(--px80);


    table{
      width: 100%;
      margin-top: var(--px20);
      border-collapse: collapse;
      border-spacing: 0;

      caption{
        font-weight: var(--SemiBold);
        font-size: var(--font-size18);
        text-align: left;
        border-bottom: 2px solid #707070;
        padding-bottom: clamp(6px,1vw,10px);
      }
      tr{
        border-bottom: 1px solid #cccccc;
        vertical-align: top;
        line-height: 1.4;
      }

      th{
        text-align: left;
        padding: 1em 0 .5em;
        width: 5em;
        text-align-last: justify;
        font-weight: var(--Bold);
        display: block;
      }
      td{
        padding: .5em 0 1em;
        font-weight: var(--Medium);
        display: block;
        
        img{
          width: 290px;
        }
      }
    }
  }  
  
}



/*---------アクセスsp---------*/
.access{
  
  .access_inner{
    width: 87.5%;
    margin: 0 auto;
    padding: var(--px100) 0;
    
    h2{
      width: 100%;
    }

    .wrap{
      padding-bottom: var(--px40);
      
      p{
        margin: var(--px20) 0 var(--px10);
      }
      .map{
        width: 100%;
        height: 200px;
      }
    }
  }
}

@media (min-width:768px){
.slid {
  height: 500px;
  background-size: cover;
}
.slide_tx{
	bottom: 15% ;
  line-height: 1.4;
}
/*---------ご挨拶 tab---------*/
.news_inner{
	width: min(85%,1100px);
	position: relative;
}	



/*---------会社案内 tab---------*/
.profile{
  background-size: auto 110px;
  
  .inner{
    width: min(85%,1100px);

    table{

      th{
        padding: 1em 0;
        width: 5em;
        text-align-last: justify;
        display: table-cell;
        font-weight: var(--Medium);
      }
      td{
        padding: 1em 0 1em 5em;
        display: table-cell;
      }
    }
  }	
}	

/*---------沿革 tab---------*/
.history{
  background-size: auto 120px;
  
  .inner{
    width: min(85%,1100px);

    table{

      th{
        padding: 1em 0;
        width: 6em;
        text-align-last: justify;
        display: table-cell;
        font-weight: var(--Medium);
      }
      td{
        padding: 1em 0 1em 5em;
        display: table-cell;
      }
    }
  }	
}
/*---------路面切削工事 tab---------*/
.pavement{

  .pavement_inner{
    width: min(85%,1100px);
  }
   .flow-wrap {
    display: flex;
     justify-content: space-between;
    
    .flow{
      width: 54%;
    }
    .flow_img{
      width: 40%;
      margin: 0;

    }
  }
  
}	
/*---------パラボラ工法 tab---------*/
.parabolic{

  .parabolic_inner{
    width: min(85%,1100px);
  }
}
/*---------採用情報 tab---------*/
.recruit{
  
  .inner{
    width: min(85%,1100px);

    table{

      th{
        padding: 1em 0;
        width: 5em;
        text-align-last: justify;
        display: table-cell;
        font-weight: var(--Medium);
      }
      td{
        padding: 1em 0 1em 5em;
        display: table-cell;
      }
    }
  }	
}	
/*---------アクセス tab---------*/
.access{
  
  .access_inner{
	  width: min(85%,1100px); 
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    .wrap{
      width: 48%;
    }    
  }
  
}



@media (min-width:1024px){
.slid {
  height: 600px;
}
/*---------ご挨拶 pc---------*/
.news_wrap{  
  display: flex;
  justify-content: flex-start;
  align-items: center;

    .text{
      margin: 0;
      width: 60%;  
      padding-right: 50px;
      
      p{
        width: min(100%,540px);
      }
    }
    .photo {
      margin: 0;
      width: min(40%,400px);
      order: 2;
    }
}

	


@media (min-width:1280px){
.slid {
    height: calc(100vh);
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    }
.slid_01 {
	background-position:  center center;
    }
.slide_tx{
	width: 80%;
  bottom: 12%;
	left: 10%;
	text-align: left;
  letter-spacing: .07em;
}

/*---------アクセス1280---------*/
.access{
  
  .access_inner{    
    
    .wrap{
      .map{
        height: 300px;
      }
    }    
  }
  
}


}