h2{
  font-size:2.6rem;
  color: #555;
  line-height: 1.8;
  margin: 0px auto 20px auto;
}
header{
  position: relative;
}
header .top_copy{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); 
  width: 100%; 
}
header .top_copy h1{
  color: #fff;
  font-size:3.6rem;
  font-weight: bold;
  line-height: 1.8;
}
header .top_copy h1 span{
  font-size: 20.0rem;
  font-weight: bold;
  color: #ffc020;
  line-height: 1.5;
  opacity: 0.8;
}
.sp{
  display: none;
}

.about{
  margin: 80px auto;
}
.about .text{
  margin: 80px auto;
}
.about .flex{
  display: flex;
  justify-content: space-between;
}
.about .flex .img{
  text-align: center;
}

.title_box h2 span{
  color: #907d4d;
  font-size: 1.4rem;
  display: block;
  font-weight: bold;
}
.techonology .photo .flex{
  display: flex;
  justify-content: flex-end;


}
.techonology .photo ul{
  display: flex;
  justify-content: flex-end;
  box-shadow: -17px 53px 0px 17px  #ffc020;
  background-color:  transparent;
}
.techonology .photo ul li{
  margin-left: 20px;
  font-size: 2.0rem;
}
.techonology .photo ul li span{
  font-size: 3.0rem;
  display: block;
}
.techonology .copy{
  margin-top: 180px;
}
.techonology .copy p{
  font-size: 3.0rem;
}
.techonology .btn{
  margin-top: 80px;
}
.works{
  margin: 160px auto;
}
.works ul{
  display: flex;
  flex-wrap: wrap;
  margin: 60px 0;
}
.works ul li{
  width: 18%;
  margin: 0 5px;
}
.world{
  background: #000;
  background-image: url(../image/world_bg01.png),url(../image/world_bg02.png);
  background-repeat: no-repeat;
  background-position: top left,bottom right;
  padding: 80px 0;
}
.world h2{
  margin-bottom: 80px;
  color: #fff;
}
.world ul{
  display: flex;
}
.world ul li{
  width: 25%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  text-align: center;
}
.world ul li span{
  display: block;
  font-size: 1.6rem;
}
.world .btn{
  margin-top: 80px;
}
.flow .banner{
  margin: 160px auto;
}
.flow .banner a{ 
  display: flex;
  background-image: url(../image/flow_banner.jpg);
  width: 1200px;
  height: 468px;
  max-width: 100%;
  background-position: center top;
  justify-content: flex-end;
  align-items: center;
}
.flow h2{
  background-color: #000;
  margin: auto 80px auto auto;
  padding: 20px 60px;
  color: #fff;
  font-size: 3.6rem;
}
.faq{
  background-color: #000;
  padding: 80px 0;
}
.faq h2{
  color: #fff;
}
.faq dl{
  background: #fff;
  margin-bottom: 30px;
  padding: 16px 30px 30px 30px;
  border-radius: 20px;
}
.faq dl dt{
  color: #907d4d;
  font-size: 2.6rem;
  display: flex;
  align-items: center; 
  line-height: 1.3; 
}
.faq dl dt span{
  font-size: 6.0rem;
  margin-right: 20px;
}
.faq dl dd{
  margin-left: 20px;
  display: flex;
  align-items: center;
  line-height: 1.3;
}
.faq dl dd span{
  font-size: 4.6rem;
  margin-right: 10px;
}

.news{
  padding: 160px 0;
  position: relative;
}
.news .flex{
  display: flex;
}
.news .title_box{
  width: 40%;
}
.news .bg{
  position:absolute;
  left: -400px;
  top: -250px;
    background: #ffc020;
    height: 1000px;
    width: 1000px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    z-index: -1;
}

.news .list{
  width: 60%;
}
.news ul{
  width: 100%;
}
.news ul li{
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}
.news ul li a{
  display: block;
}
.news .btn{
  margin-top: 80px;
}
.company{
  background-image: url(../image/mv01.jpg);
  padding: 50px 0 260px 0;
  background-position: center;
}
.company h2{
  color: #fff;
}
.company .text{
  width: 50%;
  background-color:rgba(0, 0, 0, .8);
  padding: 80px;
  border-radius: 20px;
  color: #fff;
}
.company .text .btn{
  margin-top: 60px;
}

  @media screen and (max-width: 1300px){
      header{
        width: 100%;
        background-position: top center;
        height: 100vw;
        background-size: cover;
      }


    }


  @media screen and (max-width: 1100px){
    header .top_copy h1{
      font-size:2.6rem;
    }
    header .top_copy h1 span{
      font-size:10.0rem;
    }
    .world ul li{
      font-size: 1.8rem;
    }
    .world ul li p{
      padding: 10px;
      box-sizing: border-box;
    }
    .world ul li span{
      font-size: 1.4rem;
    }
    .company .text{
      width: 75%;
    }

  }

  @media screen and (max-width: 600px){
    header .top_copy h1{
      font-size:2.0rem;
    }
    header .top_copy h1 span{
      font-size:5.0rem;
    }
    h2{
      font-size: 2.0rem;
    }
    .about .text{
      margin: 40px auto;
    }
    .about .flex .img{
      margin-right: 5%;
    }
    .techonology .photo ul li{
      font-size: 1.6rem;
    }
    .techonology .copy{
      margin-top: 100px;
    }
    .title_box h2 span{
      font-size: 1.2rem;
    }
    .techonology .photo ul li span{
      font-size: 2.0rem;
    }
    .techonology .copy p{
      font-size: 2.4rem;
    }
    .world ul{
      flex-wrap: wrap;
    }
    .world ul li{
      width: 50%;
      margin-bottom: 10px;
    }
    .flow .banner{
      margin: 80px auto;
    }
    .flow .banner a{ 
      display: flex;
      height: 468px;
      max-width: 100%;
    }
    .flow h2{
      background-color: #000;
      margin: auto 20px;
      padding:20px 40px;
      color: #fff;
      font-size: 2.0rem;
    }
    .faq dl{
      padding: 20px 40px 40px 20px;
    }
    .faq dl dt{
      font-size: 2.0rem;
      margin-bottom: 10px;
    }
    .faq dl dd{
      font-size: 1.4rem;
    }
    .faq dl dt span{
      font-size: 3.0rem;
    }
    .faq dl dd span{
      font-size: 1.8rem;
    }
    .news .flex{
      display: block;
    }
    .news .title_box{
      width: 100%;
    }
    .news .list{
      width: 100%;
    }
    .company .text{
      width: 95%;
      padding: 20px;
    }
    .works{
      margin: 80px auto;
    }
    .works .txt_ctr{
      text-align: left;
    }
    .works ul li{
      width: 30%;
      margin: 0 1%;
    }
    .sp{
       display: block;
    }

  } 
  @media screen and (max-width: 400px){
    header .top_copy h1{
      font-size:1.6rem;
    }
    header .top_copy h1 span{
      font-size:3.0rem;
    }
  }