@charset "UTF-8";

/*----------------------------------------
変数
-----------------------------------------*/
:root {
  --inner-padding-Top-LR: 2vw;
}

#contents {
  padding-top: 0;
}


/*----------------------------------------
MV
-----------------------------------------*/
#mv_wrap {
  position: relative;
  width: 100%;
  min-height: 58vw;
  background: url(../files/img/top_background.png) no-repeat center center;
  background-size: cover;
}

#mv_wrap .txt_content {
  position: absolute;
  top: 15vw;
  left: var(--inner-padding-Top-LR);
  width: 36vw;
  z-index: 2;
}

#mv_wrap .txt_content {
  position: absolute;
  top: 19vw;
  left: var(--inner-padding-Top-LR);
  width: 41vw;
  z-index: 2;
}

#mv_wrap .txt_box {
  width: 83%;
  margin-top: 1.85vw;
}

#mv_wrap .txt_box p {
  font-size: 1.05vw;
}

#mv_wrap .scroll_wrap {
  position: absolute;
  width: 5vw;
  height: 9vw;
  left: var(--inner-padding-Top-LR);
  bottom: 1vw;
}

#mv_wrap .scroll_wrap {
  animation: mvLoad_01 2s ease-in-out forwards;
}


/*----------------------------------------
トップ共通
-----------------------------------------*/
.contents_list {
  display: flex;
  justify-content: space-between;
}

.contents_list.column2>li {
  padding: calc(var(--inner-padding-LR) * 1.5);
  background: #fff;
  text-align: center;
  width: 49%;
}


.contents_list>li .tit {
  font-size: 1.45rem;
  margin-bottom: .55em;
}

.contents_list>li .tit .fsL {
  color: var(--col-green01);
}

.contents_list .flex.column2 .boxL {
  width: 65%;
}

.contents_list .flex.column2 .boxR {
  width: 35%;
}

.contents_list .flex>* {
  position: relative;
}

.contents_list .flex .boxR::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(0%, -50%);
  background: url(../img/labor-cost-standard/search/icon_map.svg) no-repeat center center;
  background-size: contain;
}


.contents_list.column2 .btn_wrap .btnA {
  background: linear-gradient(90deg, var(--grade-green01));
}

.contents_list.column2 .btn_wrap li+li {
  margin-top: 10px;
}



/*----------------------------------------
新着情報
-----------------------------------------*/
.contents_wrap {
  padding-top: 0;
}

#news {
  margin-bottom: 100px;
  background: #fff;
  padding-top: 70px;
  padding-bottom: 70px;
}

.news_list_wrap {
  display: flex;
  justify-content: space-between;
}

.news_list_wrap>li {
  margin-bottom: 1em;
}

.news_list_wrap>li:nth-last-child(2),
.news_list_wrap>li:last-child {
  margin-bottom: 0;
}

.news_list_wrap .btnR {
  width: 100%;
  color: var(--col-black01);
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--col-gray02);
}


.news_list_wrap .btnR::before {
  width: 1em;
  height: 1em;
}

.news_list_wrap .btnR span {
  display: block;
}

.news_list_wrap .btnR .date {
  color: #808080;
  font-size: 85%;
}


/*----------------------------------------
労務費の基準とは
-----------------------------------------*/
#about .flex {
  flex-wrap: wrap;
  text-align: center;
  height: 100%;
  padding: calc(var(--inner-padding-LR) * 1.5);
  background: #fff;
}

#about .contents_list>* {
  flex-direction: column;
}

#about .contents_list>li .tit {
  font-size: 1.1rem;
}

#about .contents_list .flex>* {
  width: 100%;
}

#about .contents_list .flex .boxR {
  height: 6em;
  margin-top: .5em;
}

.contents_list .aboutA .flex .boxR::before {
  background: url(../img/labor-cost-standard/about/icon_document.svg) no-repeat center center;
  background-size: contain;
}

.contents_list .aboutB .flex .boxR::before {
  background: url(../img/labor-cost-standard/about/icon_movie.svg) no-repeat center center;
  background-size: contain;
}

.contents_list .aboutC .flex .boxR::before {
  background: url(../img/labor-cost-standard/about/icon_gmen.svg) no-repeat center center;
  background-size: contain;
}

.contents_list .aboutD .flex .boxR::before {
  background: url(../img/labor-cost-standard/about/icon_faq.svg) no-repeat center center;
  background-size: contain;
}


/*----------------------------------------
労務費の基準値
-----------------------------------------*/
.contents_list .searchB .flex .boxR::before {
  background: url(../img/labor-cost-standard/search/icon_job.svg) no-repeat center center;
  background-size: contain;
}

/*----------------------------------------
標準見積書
-----------------------------------------*/
.contents_list .seA .flex .boxR::before {
  background: url(../img/standard-estimate/icon_prime.svg) no-repeat center center;
  background-size: contain;
}

.contents_list .seB .flex .boxR::before {
  background: url(../img/standard-estimate/icon_professional.svg) no-repeat center center;
  background-size: contain;
}



@media only screen and (min-width: 1900px) {}

@media only screen and (max-width: 1630px) {

  :root {
    --inner-padding-Top-LR: 4vw;
  }

}



@media only screen and (max-width: 1350px) {
  html {
    font-size: 1.35vw;
  }

}

@media only screen and (max-width: 1200px) {
  :root {
    --inner-padding-Top-LR: 20px;
  }

  html {
    font-size: 1.425vw;
  }

  #mv_wrap .mainCopy {
    left: calc(2.45 * var(--inner-padding-Top-LR));
  }

}

@media only screen and (max-width: 1150px) {}

@media only screen and (max-width: 959px) {

  /*----------------------------------------
  新着情報
  -----------------------------------------*/
  #news {
    margin-bottom: 100px;
    background: #fff;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .news_list_wrap {
    flex-wrap: wrap;
  }

  .news_list_wrap>li {
    width: 100%;
  }
}


@media only screen and (max-width: 767px) {
  :root {
    --inner-padding-Top-LR: 4vw;
  }

  html {
    font-size: 3.5vw;
  }



  /*----------------------------------------
  MV
  -----------------------------------------*/
  #mv_wrap {
    min-height: calc(100vh - var(--header-height));
    background: url(../img/index/mv_img_sp.webp) no-repeat center center;
    background-size: cover;
  }

  #mv_wrap .txt_content {
    top: 31vw;
    width: 90%;
  }

  #mv_wrap .txt_box {
    width: 100%;
  }

  #mv_wrap .txt_box p {
    font-size: 1rem;
  }

  #mv_wrap .mainCopy {
    top: 35vw;
    left: var(--inner-padding-LR);
    width: 85vw;
  }

  #mv_wrap .shape_wrap {
    position: absolute;
    top: 130vw;
    right: 0;
    width: 80%;
  }

  #mv_wrap .shape_wrap .shape_bg {
    width: 142%;
  }

  #mv_wrap .scroll_wrap {
    width: 15vw;
    height: 26vw;
    bottom: 6vw;
  }


  /*----------------------------------------
  トップ共通
  -----------------------------------------*/
  .contents_list {
    flex-wrap: wrap;
  }

  .contents_list.column2>li {
    width: 100%;
    padding: calc(var(--inner-padding-LR) * 1);
  }

  .contents_list .flex.column2 .boxR {
    width: 30%;
  }



  /*----------------------------------------
  新着情報
  -----------------------------------------*/
  #news {
    margin-bottom: 12vw;
    padding-top: 12vw;
    padding-bottom: 10vw;
  }


  /*----------------------------------------
  労務費の基準とは
  -----------------------------------------*/
  #about .flex {
    flex-wrap: wrap;
    padding: calc(var(--inner-padding-LR) * 1);
  }

  #about .contents_list>* {
    width: 49%;
    margin-bottom: 2%;
    margin-top: 0;
  }

  #about .contents_list>li .tit {
    font-size: 1rem;
  }

  #about .contents_list .flex .boxR {
    height: 5em;
    margin-top: .15em;
  }
}