.bg {
  background: url(/recruit/lib/cmn_img/ptn_bg01.jpg) left repeat;
}

.mv h1 {
  width: 100%;
  margin: 0 auto;
  padding: 70px 0;
  background: url(/recruit/lib/cmn_img/sub_mv_bg.jpg) left repeat;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  overflow: hidden;
  color: #0c1941;
}

.mainTxt {
  padding: 50px 0 30px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 2;
  overflow: hidden;
  color: #0c1941;
}

#section01 {
  overflow: hidden;
  padding: 50px 0;
}

#section01 .title h2 {
  margin: 0 auto;
  text-align: center;
  width: 19%;
}

#section02 {
  overflow: hidden;
  padding: 100px 0;
}

#section02 .title h2 {
  margin: 0 auto;
  text-align: center;
  width: 19%;
}

#section03 {
  overflow: hidden;
  padding: 100px 0;
}

#section03 .title h2 {
  margin: 0 auto;
  text-align: center;
  width: 19%;
}

.title h2 img {
  width: 100%;
}


#modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}

#modal_content {
  width: 500px;
  background: #fff;
  margin: 15% auto;
  padding: 10px;
  position: relative;
  animation: animatetop 0.4s
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }

  to {
    top: 0;
    opacity: 1
  }
}

.remodal-close {
  top: -15px !important;
  right: -15px !important;
  background: #51a6dd !important;
  border-radius: 100% !important;
  color: #fff !important;
}

.remodal {
  border-radius: 10px;
  border: 3px solid #51a6dd;
}



/*style変更*/


.modal.left {
  float: left;
  width: 49%;
  margin-top: 30px;
}

.modal.right {
  float: right;
  width: 49%;
  margin-top: 30px;
}

h4.modalTitle {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #51a6dd;
  border-bottom: 1px dashed #51a6dd;
  margin-bottom: 10px;
}

.modalMain {
  text-align: left;
  font-size: 14px;
}

.modal_txt {
  width: 50%;
  float: left;
}

.popup_img {
  float: right;
  width: 47%;
}




@media screen and (max-width: 800px) {

  #section01,
  #section02,
  #section03 {
    padding: 50px 20px;
  }

  #section01 .title h2 {
    width: 40%;
    margin-bottom: 30px;
  }

  #section02 .title h2 {
    width: 40%;
    margin-bottom: 30px;
  }

  #section03 .title h2 {
    width: 40%;
    margin-bottom: 30px;
  }

  .mv h1 {
    padding: 40px 0;
    font-size: 24px;
  }

  .modal.left,
  .modal.right {
    float: none;
    width: 100%;
    margin: 0 auto 30px;
  }

  .modal.last {
    margin-bottom: 0;
  }

  .modal_txt {
    width: 100%;
    float: none;
    margin-bottom: 20px;
  }

  .popup_img {
    float: none;
    width: 100%;
  }

  .remodal-wrapper {
    padding: 20px !important;
  }

  .remodal {
    padding: 20px !important;
    margin-top: 50px !important;
  }

}