.separate-top {
    position: relative;
    width: 100%;
    height: 300px;
}
.separate-top h2 {
    position: absolute;/*重ねたい子要素にabsolute*/
    top:70%;
    left: 50%;
   -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
    -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
    transform: translate(-50%,-50%);/*センター寄せの修正*/
    color: #000000;
    font-size: 5rem;
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
}
.contact-item02 {
  margin: 0 4px; /* マージンを一律に */
  background: rgb(0, 0, 0);
  color: #000;
  width: 75px;
  height: 30px;
  border: #fff solid 4px;
  border-radius: 0 0 20px 0;
  text-align: center;
}
.contact-item02 a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  font-size: 0.8rem; /* フォントサイズを調整 */
  text-align: center;
  color: #fff;
  line-height: 30px;
}
.contact-item02:hover {
  background: rgb(218, 114, 114);
}

main {
    color: #000;
    padding: 100px 0;
}
.main-inner01 {
    background: #3c6690;
    width: 900px;
    margin: 0 auto;
    padding: 10px 30px 10px 30px;
    background-color: rgb(255, 255, 255);
    box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.5), -5px -5px 15px rgb(0, 0, 0, 0.5);
}
.recruit {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #000000;
  border-radius: 5px;
}

.recruit h2 {
  color: #392183;
  margin: 30px 0;
  border: solid #b1b1b1;
  text-align: center;
}

.recruit p {
  line-height: 30px;
  margin: 30px;
}

@media screen and (max-width: 1024px) {
  .main-inner01 {
    width: 95%; /* 幅を100%に設定 */
    max-width: 1024px;
    margin-top: -200px;
  }
  h2 {
    font-size: 1.2rem;
  }
  .recruit p {
    font-size: 0.7rem;
    text-align: left;
  }  
}