h2{
  font-size:2.6rem;
  color: #555;
  line-height: 1.8;
  margin: 0px auto 20px auto;
}
.sp{
  display: none;
}
.slider li p{
  font-size: 3.6rem;
  position: relative;
}
.slider li.mv01 p{
  width: 50%;
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);  
}
.slider li.mv02 p{
  width:100%;
  text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
}
.slider li.mv03 p{
  width:100%;
  color: #fff;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);  
}
.slider li.mv04 p{
  width:100%;
  text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
}

.about{
  width: 90%;
  margin:-700px auto 80px auto;
  display: flex;
  align-items: center;
}
.about .photo_box .img{
  background-image: url(../image/photo01.png);
  width: 941px;
  height: 793px;
}
.about .txt{
  position: absolute;
  background: rgba(255, 255, 255, .8);
  border-radius: 20px;
  width: 500px;
  right: 10%;
  padding:80px 60px;
}
.about .txt .btn a{
  margin-top: 20px;
}
.about .txt .btn a:after{
  font-family: "Font Awesome 6 Free";
  content:'\f105';
  font-weight: 900;
  padding-left: 8px;
}


.business{
  background-image: url(../image/bg04.png),url(../image/bg05.png),url(../image/bg06.png);
  background-repeat: no-repeat;
  background-position: -80px 150px,1200px 100px,500px 500px;
  padding-bottom: 100px;
}
.business .width{
  width: 90%;
  margin: auto 0;
  display: flex;
  align-items: center;
}

.business .photo_box{
  width: 100%;  
  display: flex;
  justify-content: flex-end;
}
.business .photo_box .img{
  display: block;
  background-image: url(../image/photo03.png);
  width: 1040px;
  height: 861px;
  margin-right: 0;
  margin-left: auto;
  right: 0;

}
.business .txt{
  position: absolute;
  background: rgba(233, 244, 255, .8);
  border-radius: 20px;
  width: 500px;
  left: 5%;
  padding:80px 60px;
}
.business .txt .btn a{
  margin-top: 20px;
}

.business .txt .btn a:after{
  font-family: "Font Awesome 6 Free";
  content:'\f105';
  font-weight: 900;
  padding-left: 8px;
}

.company{
  background-image: url(../image/bg04.png),url(../image/bg05.png),url(../image/bg06.png);
  background-repeat: no-repeat;
  background-position: -80px 150px,1200px 100px,500px 500px;  
  width: 90%;
  margin:0px auto 80px auto;
  display: flex;
  align-items: center;
}
.company .photo_box .img{
  background-image: url(../image/photo02.png);
  width: 1040px;
  height: 861px;
}
.company .txt{
  position: absolute;
  background: rgba(255, 255, 255, .8);
  border-radius: 20px;
  width: 500px;
  right: 10%;
  padding:80px 60px;
}
.company .txt .btn a{
  margin-top: 20px;
}
.company .txt .btn a:after{
  font-family: "Font Awesome 6 Free";
  content:'\f105';
  font-weight: 900;
  padding-left: 8px;
}


.schedule{
  background-image: url(../image/back01.jpg);
  height: 750px;
  background-position: center;
  background-size: cover;
}
.schedule{
  position: relative;
  width: 90%;
  margin: 0 auto;
  border-radius: 30px;
}
.schedule .txt{
  position: absolute;
  background: rgba(255, 255, 255, .8);
  border-radius: 20px;
  width: 500px;
  right: 10%;
  padding:80px 60px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);  
}
.schedule .txt .btn a{
  margin-top: 20px;
}
.schedule .txt .btn a:after{
  font-family: "Font Awesome 6 Free";
  content:'\f105';
  font-weight: 900;
  padding-left: 8px;
}


.environmental{
  background-image: url(../image/back02.jpg);
  height: 750px;
  background-position: center;
  background-size: cover;
}
.environmental{
  position: relative;
  width: 100%;
  margin: 160px 0 0 0;
}
.environmental .txt{
  position: absolute;
  background: rgba(255, 255, 255, .8);
  border-radius: 20px;
  width: 600px;
  height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  border-radius: 50%;
}
.environmental .txt .txt_in{
  width: 80%;
  position: absolute;  
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  border-radius: 50%;  
}
.environmental .txt .txt_in h2{
  text-align: center;
}

.environmental .txt .btn a{
  margin-top: 50px;
}

.environmental .txt .btn a:after{
  font-family: "Font Awesome 6 Free";
  content:'\f105';
  font-weight: 900;
  padding-left: 8px;
}

.environmental.environmental2{
  width: 90%;
  margin: 80px auto;
  border-radius: 30px;
}
.environmental.environmental3{
  width: 100%;
  margin: 80px auto;
  border-radius: 30px;
}

.news{
  padding: 80px 0 ;
  background: #f0f7ff;
}
.news h2{
  margin: 10px 0;
}
.news .ttl{

}
.news ul {
  padding: 10px 0;
}
.news ul li a span{
  display: block;
  font-size: 1.6rem;
  margin-right: 20px;
  color: #7c7c7c;
}
.news ul li a{
  display: flex;
  margin-bottom: 15px;
  background: #fff;
  padding: 10px;
}
.news ul li:last-child a{
  margin-bottom: 0;
}

.news ul li a span.icon{
  display: block;
  width: 100px;
  text-align: center;
  padding: 3px 5px;
  color: #fff;
  border-radius: 10px;
  font-size: 1.2rem;
}
.news ul li a span.icon.new{
  background: #0cbce2;
}
.news ul li a span.icon.update{
  background: #34c23e;
}
.news p{
  text-align: right;
  margin-top: 20px;
}
.news p a{
  display: inline-block;
  border-bottom: 1px solid #555;
}

.news.news2{
  width: 90%;
  margin: 80px auto;
  border-radius: 30px;
}

.img img{
  display: block;
  border-radius: 50px;
  width: 95%;
  margin: 0 auto ;
}

  @media screen and (max-width: 1300px){
      .about .photo_box .img{
        background-size: cover;
        width: 60vw;
        height: 50vw;
      }
      .about .txt{
          width: 40vw;
      }
      .business .photo_box .img{
        background-size: cover;
        width: 60vw;
        height: 50vw;
      }
      .business .txt{
          width: 40vw;
      }
      .company .photo_box .img{
        background-size: cover;
        width: 60vw;
        height: 50vw;
      }
      .company .txt{
          width: 40vw;
      }
    }


  @media screen and (max-width: 900px){
    header{
      padding-bottom: 800px;
    }

    header ul.slider{
      margin-bottom: 30px;
    }
    .slider li p{
      font-size: 2.2rem;
    }
    h2{
      font-size:2.0rem;
    }
    .news{
      padding: 80px 0 30px 0;
    }    
    .news .flex{
      display: block;
    }
    .news .ttl{
      display: flex;
      margin-right: 0;
      border-right: none;
      width: 100%;
      align-items: center;
    }
    .news p{
      margin-bottom: 30px;
    }
    .img img{
      border-radius: 30px;
    }
    .about{
      display: block;
    }
  
    .about .photo_box .img{
      background-size: cover;
      margin: 0 auto;
      width: 60vw;
      height: 50vw;
    }
    .about .txt{
      width: 100%;
      left: 0;
      right: 0;
      position: static;
      padding: 50px;
      box-sizing: border-box;
      margin: -150px auto 50px auto;
    }
    .business .width{
      margin: 0 auto;
      flex-wrap: wrap;
      flex-direction: column-reverse;
    }
    .business .photo_box .img{
      background-size: cover;
      margin: 0 auto;
      width: 60vw;
      height: 50vw;
    }
    .business .txt{
      width: 100%;
      left: 0;
      right: 0;
      position: static;
      padding: 50px;
      box-sizing: border-box;
      margin: -150px auto 50px auto;
    }
    .company{
      display: block;
    }
  
    .company .photo_box .img{
      background-size: cover;
      margin: 0 auto;
      width: 60vw;
      height: 50vw;
    }
    .company .txt{
      width: 100%;
      left: 0;
      right: 0;
      position: static;
      padding: 50px;
      box-sizing: border-box;
      margin: -150px auto 50px auto;
    }    
    .schedule{
      height: 500px;
    }
    .schedule .txt{
      width: 50vw;
    }
    .environmental{
      height: 650px;
    }
    .environmental .txt{
      width: 70vw;
      height: 70vw;
    }
  }

  @media screen and (max-width: 600px){
    .slider li p{
      font-size: 1.6rem;
    }
    .sp{
       display: block;
    }
    header{
      padding-bottom: 550px;
    }
    p{
      font-size: 1.4rem;
    }
    .environmental .txt{
      height: 110vw;
      width: 110vw;
    }
    .about{
      margin: -550px auto 30px auto;
    }
    .about .txt{
      padding: 30px;
      margin:30px auto 30px auto;
    }
    .about .photo_box .img{
      width: 80vw;
      height: 65vw;
    }
    .business{
      padding-bottom: 0px;
    }
    .business .txt{
      padding: 30px;
      margin:30px auto 50px auto;
    }
    .business .photo_box .img{
      width: 80vw;
      height: 65vw;
    }    
    .company{
      padding-bottom: 0px;
    }
    .company .txt{
      padding: 30px;
      margin:30px auto 50px auto;
    }
    .company .photo_box .img{
      width: 80vw;
      height: 65vw;
    }      
    .btn a{
      padding: 10px 20px;
      font-size: 1.4rem;
    }
    .schedule{
      height: 400px;
    }
    .schedule .txt{
      padding: 30px;
      width: 70%;
      left:auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%); 
    }
    .environmental{
      margin: 30px 0 0 0;
    }
    .news ul li a{
      display: block;
    }
    .news ul li a span.icon{
      font-size: 1.1rem;
      padding: 2px 3px;
    }
  }