@charset "UTF-8";

/*共通部分
-------------------------*/
html *,
::before,
::after {
  box-sizing: border-box;
}



html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
      font-size: 16px;
    }
  }

img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;

}


body{
	
font-family: source-han-sans-japanese, sans-serif;
font-family: 'Croissant One', cursive;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;

}

h1, h2, h3, h4, h5, h6, th, strong {
  font-weight: 700;
}


/**
 * ***************************************
 * ヘッダー
 * ***************************************/

.page-header{
  background-color:#d5d5d5 ;
  border-bottom: 1px solid #000 ;
  position: relative;

}

@media(min-width:768px){
  .header-container{
    margin: 0 auto;
    padding: 0 30px;
    
  }
}

.sitetitle{
  display: flex;
  justify-content: space-between;
  align-items: center;
}


@media (min-width:768px){
  .sitetitle{
    justify-content: center;
    padding: 0;
    margin:0 ;
    background-color: #cfcfcf;
    align-items: center;
   
  }
}


.navbtn{
  display: block;
  width: 60px;
  height: 60px;
  background-image: url(images/n-m-open.svg);
  background-position: center center;
}

.navbtn.close {
  background-image: url(images/n-m-close.svg);
}

.header-logo{
  font-size: 1.5rem;
  font-weight: 400;
  font-family: source-han-sans-japanese, sans-serif;
  padding: 0 0 0 20px;

}

@media (min-width:768px){
  .header-logo{

position: absolute;
top:30px;
left:30px;
  }
}

@media (min-width:768px){
  .navbtn{
    display:none ;
  }
}

.header-nav{
  display: flex;
  flex-direction: column;
  margin: 0 ;
  padding: 0;
  list-style: none;
}

.header-nav.collapse {
  display: none;
}

.header-nav li a{
display:block;
padding: 20px 30px;
border-top: 1px solid #000;
background: #FFF;
}

.header-nav li a:hover {
  background: #b8e5ea;
}
@media(min-width:768px){
    .header-nav{
      display:flex !important;
      flex-direction: row;
      justify-content: center;
      
      margin: 30px 0 30px 40px;
      
    }
    .header-nav li a{
      padding: 0 0 0 20px;
      border-top: none;
      font-size: 1.075rem;
      background: none;
    }
    .header-nav li:not(:last-child){
      margin-right: 30px;    }
}



/* スマホ */
/* .hero{ */
  /* background-image:url('images/built.jpg'); */
  /* background-color: rgb(183, 125, 125); */
  

  /* filter: sepia(100%); */

  /* background-blend-mode:hard-light; */
  /* background-size: cover;
  height: 65vh;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 1; */
  /* } */

  .hero strong{
    color: rgb(12, 4, 235);
  }


.hero-container{
    padding: 0;
    position: relative;
    
    
}

.hero-container p{
  line-height: 1.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-210%);
  text-align: center;
  font-size: 1.125rem;
  z-index: 100x;
  color: #000;
  width: 100%;
}


@media(min-width:768px){

  /* .hero{ */
    /* background-image:url('images/built.jpg'); */
    /* background-color: rgb(183, 125, 125); */
    /* background-blend-mode:hard-light; */
    /* background-size: cover;
    height: 100vh;
    background-position: center bottom;
    z-index: 1; */
    /* } */
.hero-image img{
  width: 100%;
  height:650px;
  object-fit:cover;
}

  .hero-container p{
    line-height: 1.7;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-250%);
    text-align: center;
    font-size: 1.675rem;
    z-index: 10;
  }





}

/*メインスマホ*/

.home-lead {
  max-width: 600px;
  margin: 0 auto 80px auto;
  text-align: rigth;
}

.home-lead p:last-child{
  text-align: justify;
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.home-lead p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 2;
  text-align: center;
}


.main-container{
  padding: 60px 4% 0 4%;


}


/*メインPC*/
@media (min-width: 768px) {
  .main-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 80px 20px 0 20px;
  }
  .home-lead {
    text-align: right;

  }
  


  
  .home-lead p:first-child {
    font-size: 1.125rem;
    padding-bottom: 2rem;
    position: relative;
    

  }

  .home-lead p:first-child::before,
  .home-lead p:first-child::after {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
  }

  .home-lead p:first-child::before{
    border-top: 2px solid #CCC;
    border-left: 2px solid #CCC;
    top:-15px;
    left: 200px;

  }


  .home-lead p:first-child::after{
    border-bottom: 2px solid #CCC;
    border-right: 2px solid #CCC;
    bottom: 20px;
    right:200px;

  }



  .home-lead p:last-child{
    text-align: justify;
    margin-bottom: 10px;
    font-size: 1rem;
  }

}

.mi-ti{
  font-size: 3.75rem;
  }
  
  .mi-ti2{
  line-height: 1.75;
  font-size: 1rem;
  margin-bottom: 20px;
  }

/*SERVICE スマホ*/
.home-latest{
  margin:0 0 60px 0;
  display: grid;
  grid-template-columns: 1fr;
}


.latest-item{
  text-align: center;
  margin-bottom: 20px;
}




.latest-item2{
  margin-bottom: 20px;
  border:1px solid #cfcfcf;
  
    
}






  

  .latest-text p:first-child{
    padding-top:10px ;
  }

  .latest-text h3{
    font-size:1.75rem;
    padding: 10% 5% 0  0;
   
  }

  .latest-text p:last-child{
    clear: both;
    font-size: 1.25rem;
    padding: 10px 10px 10px 10px;
    line-height: 1.5;
    text-align: justify;
  }


 
   








/*SERVICE PC*/
@media (min-width:768px){
  .home-latest{
  grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }


.home-latest .latest-item2:nth-child(3){
  margin-top: -134px;
  height: 283px;
}
 

.home-latest .latest-item2:nth-child(4){
  margin-top: 30px;

}
  



   /* .latest-image  {
 width: 100%;
 
 
    
  } */
  
  .latest-item{
    text-align: center;
    margin-bottom: 100px;
  }


  
  

}

/*about スマホ*/



.about-container{
  padding: 40px 4% 20px 4%;
  text-align: justify;
}

.mi-ti3{
  margin-top: 20px;
    line-height: 1.75;
    font-size: 1.25rem;
    margin-bottom: 20px;
    
    
 
}


/*about PC*/


@media (min-width:768px){
  .about-container{
    max-width: 1040px;
    margin: 0 auto 90px auto;
    padding: 0 20px 0 20px;
    display:flex;
    align-items:flex-start;
 
  
}

.sub-title{
  font-size: 0.75rem;
  margin-bottom: 20px;
}




.mi-ti3{
  margin-top: 20px;
 
    line-height: 1.75;
    font-size: 1rem;
    width: 95%;
    
    
 
}


.about-image{
  width: 350%;
 
  


}


}





/*recruit スマホ*/
.recruit-container{
  position: relative;
padding: 60px 4% 0 4%;
margin-bottom:60px;
}

.recruit-image{
  padding: 0 4% 20px 4%;
}


.recruit-image img:nth-child(2){
  display: none;

}
.sub-title{
  font-size: 0.975rem;
  margin-bottom: 20px;
}

.mi-ti2{
  font-size: 1.25rem;
}






/*recruit PC*/



@media (min-width:768px){
  .recruit{ 
    position: relative;
    background-color: #FFF;
    z-index: -100;
    }


  .recruit-container{
  margin: 0 auto 80px auto;
  padding:  0 20px;
  max-width: 400px;
 
}

.recruit-image img{
  z-index: -10;
}


.recruit-image img:nth-child(1){
  position: absolute;
  top:0;
  left:0;
  transform: translate(0px,10px);
  width:500px;
  clip-path: polygon(0 0, 47% 0, 30% 99%, 0% 100%);
}

.recruit-image img:nth-child(2){
  display: block;
  position: absolute;
  top:35%;
  right:0;
  transform: translate(0px,0px);
  width: 500px;
  clip-path: polygon(51% 0, 100% 1%, 100% 100%, 34% 100%);

}
.mi-ti2{
  font-size: 1rem;
}
}

/*recruit PC 900px*/
@media (min-width:1200px){
  .recruit-image img:nth-child(1){
    position: absolute;
    top:0;
    left:0;
    transform: translate(0px,10px);
    width:500px;
    clip-path: polygon(0 0, 100% 1%, 100% 100%, 0% 100%);
  }
    .recruit-image img:nth-child(2){
      display: block;
      position: absolute;
      top:35%;
      right:0;
      transform: translate(0px,0px);
      width: 500px;
      clip-path: polygon(0 0, 100% 1%, 100% 100%, 0% 100%);
    
   


  }

  .recruit-container{
    margin-top: 60px;
    margin-bottom: 80px;
  }

}





/*footerスマホ*/
.footer-container{
  padding: 30px 4% 30px 4%;
  
  
  
}

.page-footer {
  background: #d5d5d5;
  
}







.footer-container div{
  font-size: 0.75rem;
  color:#000;
}



@media (min-width:768px){

  .page-footer{
    background-color: #d5d5d5;
  }


 .footer-container{

  max-width: 1040px;
  margin:0 auto;
  padding: 0 20px;
}


.page-footer h2{
  text-align: center;
  padding: 60px 0 60px 0;
  font-size: 1.5rem;
  font-weight: 10;
}



.footer-item{
  display: grid;
  grid-template-columns: 60% 40%;
  column-gap: 20px;
}

.footer-item2 p, .footer-item3 p{
  font-size: 1.375rem;
  border-bottom: 1px solid #000;
  padding: 0 0 10px 0;
  margin: 0 0 10px 0;
}


.footer-left{
  display: flex;
  flex-direction: row;
}

.footer-left div:first-child{
  margin-right: 100px;
}

.footer-left li{
  margin-bottom: 10px;
  font-size: 1rem;
}

.footer-item li::before{

font-family: "Font Awesome 5 Free";
content:"\f105";
font-weight: 900;
padding-right: 5px;
}


.footer-item3 li{
  margin-bottom: 10px;
  font-size: 1rem;

}










}