#header{
 background-color: #00AAFF;
 background-image: url(../img/top/bg.png);
 background-position-y: 7px;
 background-position-x: -2px;
}
#header .inner{
 position: relative;
}
#header .inner h1 img{
 width: 100%;
}
#header .home{
 position: absolute;
 top: 4%;
 right: 0px;
 width: 20%;
 transition: .5s;
}
#header .home:hover{
 transform: scale(1.1);
}
#header .sunpark{
 position: absolute;
 top: 5%;
 left: 3%;
 width: 12%;
 transition: .5s;
}
#header .sunpark:hover{
 transform: scale(1.1);
}
#nav{
 background: #000;
}
#nav ul{
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}
#nav a{
 color: #fff;
 display: block;
 padding: 15px 20px;
 font-weight: bold;
 transition: .5s;
 min-width: 150px;
 box-sizing: border-box;
}
#nav a:hover{
 background: #333;
}
#sec_gp,
#sec_recruit,
#sec_bnr{
 background: url(../img/top/bg.png);
}
#sec_gp{
 background-color: #81DA00;
 border-bottom: solid 4px #000;
}
#sec_gp .point5{
 margin-top: -10px;
}
#sec_gp .point6{
 margin-top: -40px;
}
#sec_recruit{
 background-color: #FF9500;
 border-bottom: solid 4px #000;
}
#sec_recruit .btn{
 background: #000;
 color: #fff;
 border-radius: 2em;
 padding: 10px 2em;
 font-weight: bold;
 font-size: 200%;
}
#sec_recruit .btn:after{
 content: "";
 display: inline-block;
 border-left:18px #fff solid;
 border-top:12px transparent solid;
 border-bottom:12px transparent solid;
 margin-left: 5px;
}
#sec_recruit .list{
 text-align: center;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
#sec_recruit .list li{
 width: 300px;
 display: inline-block;
 margin: 5px;
 border:solid 3px #000;
 font-weight: bold;
 font-size: 180%;
 background: #fff;
 transition: .5s;
 box-shadow:8px 5px 0px #000;
}
#sec_recruit .list li a{
 padding: 20px 0px;
 display: block;
 color: #000;
 transition: .5s;
}
#sec_recruit .list li:hover{
 background: #444;
}
#sec_recruit .list li:hover a{
 color: #fff;
}
#sec_bnr{
 background-color: #1C1D80;
 position: relative;
 padding-top: 50px;
}
#sec_bnr:after{
 display: block;
 content: "";
 width: 100%;
 height: 341px;
 background: url(../img/top/bg_bottom.png) repeat-x;
 background-position-x: 14px;
}

#sec_gp .point1234{
 position: relative;
 text-align: center;
 padding: 0px 15px;

}
#sec_gp .point1234 .btn{
 position: absolute;
 top: 31%;
 left: 4%;
 width: 92%;
}

#contact{
 position: relative;
 max-width: 994px;
 margin-left: auto;
 margin-right: auto;
}
#contact .msg{
 text-align: center;
 position: relative;
 margin-bottom: -4%;
}
#contact .border{
 border:solid 10px #000;
 margin-left: 15px;
 margin-right: 15px;
}
#contact .img{
 text-align: center;
 background-color: #FFB000;
 padding: 20px 20px 0px;
}
#contact .text{
 background-color: #fff;
 padding: 15px;
 text-align: center;
}
#contact .text .tel{
 margin-right: 20px;
 display: inline-block;
 vertical-align: top;
}
#contact .text .bgRed{
 background: #FF0000;
 color: #fff;
 font-weight: bold;
 display: block;
 padding: 5px 15px;
}
#contact .text .numberMsg{
 display: flex;
 align-items: center;
}
#contact .text .numberArea{
 margin-top: 20px;
 font-size: 380%;
 font-weight: bold;
 display: flex;
 align-items: center;
}
#contact .text .numberArea a{
 color: #000;
 text-shadow: 0px -1px 0px #000,0px 1px 0px #000;
}
#contact .text .mail{
 align-self: flex-end;
 font-weight: bold;
 font-size: 110%;
 display: inline-block;
 vertical-align: bottom;
 margin-top: 15px;
 text-align: left;
}
#contact .text .mail a{
 color: #333;
}

/*
===================================================
        sp
===================================================
*/
@media screen and (max-width: 960px) {
 #header .home{
  position: absolute;
  top: 1%;
  right: 5px;
  width: 22%;
  transition: .5s;
 }
 #header .sunpark{
  position: absolute;
  top: 2%;
  left: 1%;
  width: 17%;
  transition: .5s;
 }
 #sec_gp .point1234 .btn{
  position: absolute;
  top: 31%;
  left: 7%;
  width: 86%;
 }
 #sec_gp .point5{
  margin-top: 0px;
 }
 #sec_gp .point6{
  margin-top: -10px;
 }
 #contact{
  position: relative;
  max-width: 994px;
  margin-left: auto;
  margin-right: auto;
 }
 #contact .msg{
  text-align: center;
  position: relative;
  margin-bottom: -4%;
 }
 #contact .border{
  border:solid 10px #000;
 }
 #contact .img{
  text-align: center;
  background-color: #FFB000;
  padding: 10px 5px 0px;
 }
 #contact .text{
  background-color: #fff;
  padding: 15px;
  text-align: center;
 }
 #contact .text .tel{
  margin-right: 0px;
  display: inline-block;
  vertical-align: top;
 }
 #contact .text .bgRed{
  background: #FF0000;
  color: #fff;
  font-weight: bold;
  display: block;
  padding: 5px 15px;
 }
 #contact .text .numberMsg{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
 }
 #contact .text .numberArea{
  margin-top: 20px;
  font-size: 190%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 #contact .text .numberArea a{
  color: #000;
  text-shadow: none;
 }
 #contact .text .numberArea .icon{
  width: 35px;
 }
 #sec_recruit .btn{
  font-size: 150%;
 }
 #sec_recruit .btn:after{
  content: "";
  display: inline-block;
  border-left:15px #fff solid;
  border-top:9px transparent solid;
  border-bottom:9px transparent solid;
  margin-left: 5px;
 }
}

/*
===================================================
        sp small
===================================================
*/
@media screen and (max-width: 480px) {

 #sec_recruit .list li{
  font-size: 150%;
 }

 #contact .text {
  font-size: 70%;
 }

}