@charset "utf-8";
@media screen and (min-width: 1021px) {
 
/**************************************************PC メイン画像**************************************************/
  #main {
    position: relative;
  }
  #main .news {
    width: 50%;
    position: absolute;
    /*bottom: -80px;*/
    left: 0;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    background-color: #f2efef;
    border-top-right-radius: 29px;
    border-bottom-right-radius: 29px;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
  }
  #main .news ul {
    width: 550px;
    float: right;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #main .news ul li {
    float: left;
    color: #323232;
    line-height: 26px;
  }
   #main .news ul li img {
    margin-top: 16px;
  }
   #main .news .line {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #888686;
    padding-top: 5px;
  }
  #main .wrap {
    max-width: 1240px;
    width: 100%;
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    margin: auto;
  }
  #main .wrap .right {
    text-align: right;
  }
   #main .wrap .right img {
    width: 472px;
  }
  .top_txt {
    max-width: 1240px;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
  }
  .top_txt.cf span {
    display: block;
    float: right;
    width: 472px;
    margin-top: 100px;
    line-height: 26px;
    color: #000000;
  }
  @media screen and (max-width:1140px){ 
 #main .news ul {
    width: 500px;
    font-size: 14px;
  }
}
@media screen and (max-width:1290px){ 
#main .wrap .right img {
    width: 452px;
    margin-right: 20px;
  }
}


  /**************************************************PC Company**************************************************/
  #company {
    width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;
  }
#company h2 {
    color: #f73b09;
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    margin-bottom: 20px;
}
#company .btn{
    margin-top: 120px;
}
#company p a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 44px;
    color: #ff3800;
    text-align: center;
    line-height: 250%;
    border: 1px solid #ff3800;
}
#company p a:hover {
    color: #ffffff;
    text-align: center;
    background-color: #ff3800;
    opacity: 1 ;
}

 /**************************************************PC service**************************************************/
  #service {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    max-width: 1440px;
    text-align: center;
    position: relative;
  }
#service h2 {
    color: #f73b09;
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    background-image: url(../images/top/pc/service.png);
    width: 100px;
    height: 190px;
    text-align: center;
    background-position: center top;
    padding-top: 40px;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    right: 0px;
    left: 0px;
    top: 0px;
}


/* コンテナ要素 */
.box,.box2,.box3 {
    position: relative;
    width: 80%; /* 任意の横幅を指定 */
    margin-top: 10%;
    margin-right: 10%;
    margin-bottom: 10%;
    margin-left: 10%;
    background-color: #fff;opacity: 0.8;
}

/* コンテナ要素の擬似要素(ここで比率を調整) */
.box,.box2,.box3::before {
  content: "";
  display: block;
  padding-top: 80%; /* 比率を指定 */
}

/* 中の要素 */
.box_content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#service ul {
    padding-top: 170px;
}

#service ul li {
    background-size: cover;
    float: left;
}
#service ul .bg1 {
   background-image: url(https://www.nichiei-kogyo.co.jp/wordpress/wp-content/uploads/2023/03/top_jigyonaiyo-02.png);
    width: 32%;
    margin-right: 2%;
    background-color: #f0f0f0;
}
#service ul .bg2 {
    background-image: url(https://www.nichiei-kogyo.co.jp/wordpress/wp-content/uploads/2023/03/top_jigyonaiyo-03.png);
    width: 32%;
    margin-right:2%; 
    background-color: #f0f0f0;
}
#service ul .bg3 {
    background-image: url(https://www.nichiei-kogyo.co.jp/wordpress/wp-content/uploads/2023/03/top_jigyonaiyo-04.png);
    width: 32%;
    background-color: #f0f0f0;
}
.box_content .icon1 img {
    width: 18%;
    margin-top: 20%;
}
.box_content .icon2 img {
    width: 22%;
    margin-top: 22%;
}
.box_content .icon3 img {
    width: 25%;
    margin-top: 22%;
}
#service h3 {
    font-size: 21px;
    font-weight: normal;
    margin-top: 3%;
}
#service .txt {
    text-align: left;
    padding-left: 20%;
    padding-right: 20%;
    margin-top: 5%;
}
@media screen and (max-width:1440px){ 
#service h3 {
    font-size: 1.5vw;
    font-weight: normal;
    margin-top: 4%;
}
#service .txt {
    text-align: left;
    font-size: 1.2vw;
    padding-left: 15%;
    padding-right: 15%;
    margin-top: 5%;
    line-height: 2.5vw;
}
}


  /**************************************************PC recruit**************************************************/
#recruit {
    background-color: #464646;
    background-image: url(../images/top/pc/recruit_bg.jpg);
    background-position: center bottom;
    height: 550px;
    margin-top: 150px;
    color: #ffffff;
    overflow: hidden;
  }
#recruit .wrap {
    width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;
}

#recruit h2 {
    color: #ffffff;
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    margin-bottom: 20px;
    margin-top: 120px;
}
#recruit h2 img {
    margin-bottom: 10px;
}
#recruit p a {
    display: block;
    width: 170px;
    height: 44px;
    color: #000000;
    text-align: center;
/*    line-height: 44px;*/
    line-height: 250%;
    border: 1px solid #a3a3a3;
    margin-top: 40px;
    background-color: #ffffff;
}
#recruit p a:hover {
    color: #ffffff;
    text-align: center;
    background-color: #a3a3a3;
    opacity: 1 ;
}



 /**************************************************PC contact**************************************************/
  #contact {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    max-width: 1440px;
    text-align: center;
    position: relative;
  }
#contact h2 {
    color: #f73b09;
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    background-image: url(../images/top/pc/contact.png);
    width: 110px;
    height: 190px;
    text-align: center;
    background-position: center top;
    padding-top: 40px;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    left: 0px;
    right: 0px;
}
#contact .c_wrap{
    padding-top: 170px;
}
#contact .contact {
    background-image: url(../images/top/pc/contact_bg.jpg);
    height: 243px;
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    background-position: center top;
    overflow: hidden;
}
#contact .btn{
    margin-top: 110px;
}
#contact p a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 270px;
    height: 44px;
    color: #ffffff;
    text-align: center;
/*    line-height: 44px;*/
    line-height: 250%;
    border: 1px solid #ff3800;
    background-color: #ff3800;
}
#contact p a:hover {
    color: #ff3800;
    text-align: center;
    background-color: #ffffff;
    opacity: 1 ;
}
}

@media screen and (max-width:1020px) {
  /**************************************************SP メイン画像**************************************************/
  #main .wrap .right img {
    width: 260px
  }
  #main {
    position: relative;
  }
  #main .wrap {
    margin-left: 7.7%;
    margin-right: 7.7%;
    position: absolute;
    bottom: -60px;
  }
  .top_txt.cf span {
    display: block;
    margin-top: 60px;
    line-height: 26px;
    margin-left: 7.7%;
    margin-right: 7.7%;
    color: #000000;
  }
  /**************************************************SP news**************************************************/
#news {
    width: 92.3%;
    left: 0;
    margin-top: 75px;
    margin-right: 7.7%;
    margin-bottom: auto;
    background-color: #f2efef;
    border-top-right-radius: 29px;
    border-bottom-right-radius: 29px;
    /*box-shadow: 6px 6px 15px -14px #606060;*/
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #news ul {
    margin-left: 7.7%;
  }
  #news ul li {
    float: left;
    color: #323232;
    line-height: 18px;
    font-size: 12px;
  }
   #news ul li img {
    margin-top: 8px;
  }
   #news .line {
    margin-left: 10px;
  }
  /**************************************************SP company**************************************************/
  #company {
    margin-left: 7.7%;
    margin-right: 7.7%;
    margin-top: 50px;
  }
  #company p {
    margin-top: 50px;
  }
  #company p a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 36px;
    color: #ff3800;
    text-align: center;
/*    line-height: 36px;*/
    line-height: 250%;
    border: 1px solid #ff3800;
  }
  #company p a:hover {
    color: #ffffff;
    text-align: center;
    background-color: #ff3800;
    opacity: 1;
  }
  /**************************************************SP service**************************************************/
  #service {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 85px;
    text-align: center;
    position: relative;
  }
  #service h2 {
    color: #f73b09;
    font-size: 13px;
    line-height: 26px;
    font-weight: 300;
    background-image: url(../images/top/sp/service.png);
    width: 75px;
    height: 109px;
    text-align: center;
    background-position: center top;
    padding-top: 20px;
    margin-right: auto;
    margin-left: auto;
    background-size: 100%;
    position: absolute;
    right: 0px;
    left: 0px;
  }
  /* コンテナ要素 */
  .box {
    position: relative;
    width: 88%; /* 任意の横幅を指定 */
    margin-top: 6%;
    margin-right: 6%;
    margin-bottom: 6%;
    margin-left: 6%;
    background-color: #fff; opacity: 0.8;
  }
  /* コンテナ要素の擬似要素(ここで比率を調整) */
  .box::before {
    content: "";
    display: block;
    padding-top: 79.48%; /* 比率を指定 */
  }
    /* コンテナ要素 */
  .box2 {
    position: relative;
    width: 88%; /* 任意の横幅を指定 */
    margin-right: 6%;
    margin-left: 6%;
    background-color: #fff; opacity: 0.8;
  }
  /* コンテナ要素の擬似要素(ここで比率を調整) */
  .box2::before {
    content: "";
    display: block;
    padding-top: 76.41%; /* 比率を指定 */
  }
   .box3 {
    position: relative;
    width: 100%; /* 任意の横幅を指定 */
  }
  /* コンテナ要素の擬似要素(ここで比率を調整) */
  .box3::before {
    content: "";
    display: block;
    padding-top: 77.56%; /* 比率を指定 */
  }
  /* 中の要素 */
  .box_content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  #service ul {
    padding-top: 95px;
  }
  #service ul li {
    background-size: cover;
  }
  #service ul .bg1 {
    background-image: url(https://www.nichiei-kogyo.co.jp/wordpress/wp-content/uploads/2023/03/top_jigyonaiyo-02.png);
    width: 100%;
    background-color: #f0f0f0;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
  }
  #service ul .bg2 {
    background-image: url(https://www.nichiei-kogyo.co.jp/wordpress/wp-content/uploads/2023/03/top_jigyonaiyo-03.png);
    width: 100%;
    background-color: #f0f0f0;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
  }
  #service ul .bg3 {
    background-image: url(https://www.nichiei-kogyo.co.jp/wordpress/wp-content/uploads/2023/03/top_jigyonaiyo-04.png);
    width: 100%;
    background-color: #f0f0f0;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
  }
  .box_content .icon1 img {
    width: 18%;
    margin-top: 15%;
  }
  .box_content .icon2 img {
    width: 22%;
    margin-top: 16%;
  }
    .box_content .icon3 img {
    width: 25%;
    margin-top: 16%;
  }
  #service h3 {
    font-size: 4vw;
    font-weight: normal;
    margin-top: 2.5%;
  }
  #service .txt {
    text-align: left;
    font-size: 3.vw;
    padding-left: 13%;
    padding-right: 13%;
    margin-top: 3%;
    line-height: 6vw;
  }
  /**************************************************SP recruit**************************************************/
  #recruit {
    background-color: #464646;
    background-position: center bottom;
    color: #ffffff;
    overflow: hidden;
    padding-bottom: 30px;
  }
  #recruit .wrap {}
  #recruit h2 {
    color: #ffffff;
    font-size: 13px;
    line-height: 26px;
    font-weight: 300;
    margin-bottom: 50px;
    margin-top: 30px;
    width: 100%;
  }
  #recruit h2 span {
    margin-left: 55px;
    display: block;
  }
  #recruit h2 img {
    width: 130px;
  }
  #recruit .txt {
    padding-left: 7.7%;
    padding-right: 7.7%;
  }
  #recruit p a {
    display: block;
    width: 170px;
    height: 44px;
    color: #000000;
    text-align: center;
/*    line-height: 44px;*/
    line-height: 300%;
    border: 1px solid #a3a3a3;
    margin-top: 50px;
    background-color: #ffffff;
    margin-left: 7.7%;
  }
  #recruit p a:hover {
    color: #ffffff;
    text-align: center;
    background-color: #a3a3a3;
    opacity: 1;
  }
  /**************************************************SP contact**************************************************/
  #contact {
    margin-top: 50px;
    position: relative;
  }
  #contact h2 {
    color: #f73b09;
    font-size: 13px;
    line-height: 26px;
    font-weight: 300;
    background-image: url(../images/top/sp/contact.png);
    background-size: 82px 131px;
    width: 200px;
    height: 131px;
    text-align: center;
    background-position: center top;
    padding-top: 20px;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    left: 0px;
    right: 0px;
  }
  #contact .c_wrap {
    padding-top: 95px;
  }
  #contact .contact {
    background-image: url(../images/top/sp/contact_bg.jpg);
    height: 195px;
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    background-position: center top;
    overflow: hidden;
    background-size: cover;
  }
  #contact p {
    margin-top: 80px;
  }
  #contact p a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    max-width: 200px;
    height: 36px;
    color: #ffffff;
    text-align: center;
/*    line-height: 36px;*/
    line-height: 250%;

    border: 1px solid #ff3800;
    background-color: #ff3800;
  }
  #contact p a:hover {
    color: #ff3800;
    text-align: center;
    background-color: #ffffff;
    opacity: 1;
  }
}