#top_ttl{
 background: url(../img/top/bg_ttl.jpg) no-repeat center center;
 background-size: cover;
}
#top_ttl .inner{
 max-width: 1150px;
 margin-left: auto;
 margin-right: auto;
 position: relative;
}
#top_ttl h1{
 width: 40%;
 padding: 50px 0px;
}
#top_ttl .inner .btn{
 position: absolute;
 right: 10px;
 bottom: 25px;
 width: 30%;
}
.topList1{
 display: flex;
 width: 100%;
}
.topList1 li{
 width: 34%;
 box-sizing: border-box;
 padding: 80px 0px 250px
}
.topList1 li.bg1{
 background: url(../img/top/bg1.jpg) no-repeat center center;
 background-size: cover;
}
.topList1 li.bg2{
 background: url(../img/top/bg2.jpg) no-repeat center center;
 background-size: cover;
}
.topList1 li.bg3{
 background: url(../img/top/bg3.jpg) no-repeat center center;
 background-size: cover;
}
.topList1 li .inner{
 background: #fff;
 width: 300px;
 height: 300px;
 border-radius: 50%;
 display: flex;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 position: relative;
 padding-top: 60px;
 box-sizing: border-box;
 transition: .5s;
}
.topList1 li .inner:hover{
 color: #fff;
 background: #071F4F;
}
.topList1 li .inner:hover .icon_right:before{
 border:solid 2px #fff;
 transition: .5s;
}
.topList1 li .inner:hover .icon_right:after,
.topList1 li .inner:hover .icon_down:after{
 border-top: solid 2px #fff;
 border-right: solid 2px #fff;
 transition: .5s;
}
.topList1 li .inner2{
 margin-left: auto;
 margin-right: auto;
}
.topList1 li .inner2 p{
 font-size: 90%;
 margin-top: 20px;
}
.topList1 li .inner .icon_right{
 position: absolute;
 bottom: 25px;
 left: 50%;
 margin-left: -18px;
}
.topList2{
 text-align: center;
}
.topList2 li{
 display: inline-block;
 width: 28%;
 margin: 0px 1% 30px;
 vertical-align: top;
}
.topList2 li h3{
 background: #071F4F;
 color: #fff;
 padding: 10px;
}
.topList2 li p{
 margin-top: 10px;
}
.topList3{
 text-align: center;
}
.topList3 li{
 display: inline-block;
 width: 17%;
 margin: 0px 1% 30px;
 vertical-align: top;
}
.topList3 li .img{
 height: 130px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.topList3 li h3{
 background: #071F4F;
 color: #fff;
 padding: 10px;
}
#info .links{
/* max-width: 1800px;
 margin-left: auto;
 margin-right: auto;*/
}
.btn_staff_req{
 display: flex;
 width: 100%;
}
.btn_staff_req a{
 padding: 100px 10px;
 color: #fff;
 width: 50%;
 text-align: center;
}
.btn_staff_req a .icon_right,
.btn_company a .icon_right{
 margin-top: 30px;
}
.btn_staff_req .bgStaff,
.btn_staff_req .bgReq,
.btn_company{
 overflow: hidden;
 position: relative;
}
.btn_staff_req .bgStaff:before{
 background: url(../img/top/bg4.jpg) no-repeat center center;
 background-size: cover;
}
.btn_staff_req .bgReq:before{
 background: url(../img/top/bg5.jpg) no-repeat center center;
 background-size: cover;
}
.btn_company:before{
 background: url(../img/top/bg6.jpg) no-repeat center center;
 background-size: cover;
}
.btn_staff_req .bgStaff:before,
.btn_staff_req .bgReq:before,
.btn_company:before{
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background-size: cover;
 transition: 1s;
 position: absolute;
 left: 0px;
 top: 0px;
 transform: scale(1.05);
}
.btn_staff_req .bgStaff:hover:before,
.btn_staff_req .bgReq:hover:before,
.btn_company:hover:before{
 transform: scale(1.15);
}
.btn_staff_req .bgStaff .inner,
.btn_staff_req .bgReq .inner,
.btn_company .inner{
 position: relative;
 z-index: 2;
}
.btn_company a{
 display: block;
 padding: 100px 10px;
 color: #fff;
 text-align: center;
}
.newsList li{
 background: #fff;
 margin-bottom: 5px;
}
.newsList li a{
 display: flex;
 width: 100%;
 box-sizing: border-box;
 padding: 20px;
}
.newsList li a>span:first-child{
 margin-right: 30px;
}
#access .map iframe{
 width: 100%;
 height: 380px;
}
#access .flex{
 align-items: center;
}

/*
===================================================
        tb
===================================================
*/
@media screen and (max-width: 1100px) {
 #top_ttl{
  background: url(../img/top/bg_ttl_sp.jpg) no-repeat center center;
  background-size: cover;
  padding-top: 10px;
 }
 #top_ttl .btnArea{
  background: #fff;
  padding: 15px;
 }
 #top_ttl .inner{
  padding: 0px;
 }
 #top_ttl h1{
  width: 100%;
  padding: 0px;
  height: 70vw;
  background: url(../img/top/ttl_sp.png) no-repeat center center;
  background-size: contain;
 }
 #top_ttl h1 img{
  display: none;
 }
 #top_ttl .inner .btn{
  position: static;
  width: 50%;
 }
 .topList1{
  display: block;
  width: 100%;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
 }
 .topList1 li{
  width: auto;
  box-sizing: border-box;
  padding: 80px 0px;
 }
 .topList1 li.bg1{
  background: url(../img/top/bg1.jpg) no-repeat center center;
  background-size: cover;
 }
 .topList1 li.bg2{
  background: url(../img/top/bg2.jpg) no-repeat center center;
  background-size: cover;
 }
 .topList1 li.bg3{
  background: url(../img/top/bg3.jpg) no-repeat center center;
  background-size: cover;
 }
 .topList2 li{
  display: inline-block;
  width: 40%;
  margin: 0px 1% 30px;
  vertical-align: top;
 }
 .topList3 li{
  display: inline-block;
  width: 40%;
  margin: 0px 1% 30px;
  vertical-align: top;
 }
 .topList3 li .img{
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .topList3 li h3{
  background: #071F4F;
  color: #fff;
  padding: 10px;
 }
 .btn_staff_req{
  display: block;
  width: 100%;
 }
 .btn_staff_req a{
  display: block;
  padding: 50px 10px;
  color: #fff;
  width: auto;
  text-align: center;
 }
 .btn_staff_req a .icon_right,
 .btn_company a .icon_right{
  margin-top: 20px;
 }
 .btn_company a{
  display: block;
  padding: 50px 10px;
  color: #fff;
  text-align: center;
 }


}

/*
===================================================
        sp
===================================================
*/
@media screen and (max-width: 768px) {
 #option .styleTtl{
  font-size: 120%;
 }
 .topList2 li{
  display: inline-block;
  width: auto;
  margin: 0px 0px 30px;
  vertical-align: top;
 }
 .topList3 li{
  margin: 0px 1% 20px;
 }
 .topList3 li h3{
  background: #071F4F;
  color: #fff;
  padding: 5px;
  font-size: 110%;
 }
 #access .flex{
  flex-wrap: wrap;
  flex-direction: column-reverse;
 }
 #access .flex .text,
 #access .flex .map{
  width: 100%;
 }
 #access .flex .text{
  margin-top: 20px;
  display: flex;
  justify-content: center;
 }
}