@charset "UTF-8";
.pagetitle {
  padding: 160px 0 160px 0;
  text-align: center;
  width: 94%;
  max-width: 1000px;
  margin: 0 auto;
}

.pagetitle .komidashi {
  font-size: 16px;
  color: #004e85;
  line-height: 125%;
  padding-bottom: 10px;
}

.pagetitle h1 {
  font-size: 30px;
}

/*****幅レイアウト調整*****/
.w900 {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.w1000 {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

.w1000 .w900 {
  width: 100%;
  max-width: 900px;
}

.last_spacer {
  padding-bottom: 230px;
}

/**************基本フォントサイズ_PC***************/
body {
  font-size: 16px;
}

/**************基本フォントサイズ***************/
#sec01 {
  padding-top: 1000px;
}

#sec02 {
  text-align: center;
  padding-bottom: 50px;
}

#sec02 h2 {
  padding-top: 150px;
  padding-bottom: 140px;
  font-size: 18px;
  color: #004e85;
}

#sec02 h2 img {
  width: 100px;
  padding-bottom: 20px;
}

#sec02 h2 p {
  display: block;
  width: 100%;
}

#sec02 h3 {
  font-size: 20px;
}

#sec02 .h3text {
  display: inline-block;
  text-align: left;
  padding-top: 25px;
  padding-bottom: 40px;
}

#sec02 .h3text span {
  display: inline-block;
  width: 6em;
}

#sec02 .h3text2 {
  display: inline-block;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 30px;
  line-height: 180%;
}

#sec02 .h3text2 span {
  display: inline-block;
  width: 6em;
}

/***新卒採用ボタン**/
#sec02 .botan_sinsotu {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 150px auto;
  position: relative;
  overflow: hidden;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
  background-color: #004E80;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

#sec02 .botan_sinsotu .leftbeta {
  width: 42.5%;
  position: relative;
  z-index: 5;
}

#sec02 .botan_sinsotu:hover {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  opacity: 0.8;
}

#sec02 .slider {
  position: absolute;
  width: 71.8%;
  top: 0;
  left: 28.2%;
  height: 100%;
}

#sec02 .slider .slider_01 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0%;
  background-image: url(../images/recruit/slider_p01.png);
  background-size: cover;
}

#sec02 .slider .slider_03 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0%;
  background-image: url(../images/recruit/slider_p03.png);
  background-size: cover;
}

#sec02 .slider .slider_04 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0%;
  background-image: url(../images/recruit/slider_p01.png);
  background-size: cover;
}

#sec02 .slider .slider_on {
  left: 100%;
  -webkit-transition: all 1s ease-in;
  transition: all 1s ease-in;
}

#sec02 .botan_saiyo {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  padding-top: 21%;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

#sec02 .botan_saiyo .botan_saiyo__in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/recruit/bt_saiyou.jpg);
  background-size: cover;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

#sec02 .botan_saiyo:hover {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}

#sec02 .botan_saiyo:hover > a .botan_saiyo__in {
  -webkit-transform: scale(1.05) !important;
  transform: scale(1.05) !important;
}

#sec02 .botan_saiyo:hover > a .obi_yaji {
  -webkit-transform: translate(8px, 0%);
  transform: translate(8px, 0%);
}

#sec02 .obi {
  width: 65.2%;
  position: absolute;
  left: 0;
  bottom: 10%;
}

#sec02 .obi_yaji {
  width: 65.2%;
  position: absolute;
  left: 0;
  bottom: 10%;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

#sec03 {
  text-align: center;
  padding-bottom: 250px;
}

#sec03 h2 {
  padding-top: 150px;
  padding-bottom: 50px;
  font-size: 18px;
  color: #006430;
}

#sec03 h2 img {
  width: 100px;
  padding-bottom: 20px;
}

#sec03 h2 p {
  display: block;
  width: 100%;
}

#sec03 h3 {
  font-size: 20px;
}

#sec03 .h3text {
  display: inline-block;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 40px;
}

#sec03 .morebotan {
  margin-top: 15px;
  font-size: 14px;
}

#sec03 .morebotan span {
  display: inline-block;
  margin-left: 8px;
  width: 1em;
  vertical-align: 4px;
}

#sec04 {
  text-align: center;
}

#sec04 .map01 {
  width: 510px;
  text-align: center;
  margin: 150px auto 0 auto;
}

#sec04 .map01 span {
  display: block;
  text-align: left;
}

#sec04 .map01 img.map {
  border: 1px solid #ccc;
  width: 507px;
  margin: 10px auto 50px;
}

#sec04 img.btn {
  width: 220px;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
}

#sec04 div.text02 {
  display: inline-block;
  text-align: left;
  padding-bottom: 0px;
  line-height: 180%;
  margin: 80px auto 40px auto;
}

#sec04 div.text02 .textll {
  display: inline-block;
  padding-bottom: 25px;
}

#sec04 div.text02 li {
  padding-left: 1em;
  text-indent: -1em;
  line-height: 140%;
  padding-bottom: 8px;
}

.pc_only_inline {
  display: inline-block;
}

@media screen and (max-width: 680px) {
  .pc_only_inline {
    display: none;
  }
  .pagetitle {
    padding: 100px 0 120px 0;
  }
  .pagetitle .komidashi {
    font-size: 13px;
    padding-bottom: 5px;
  }
  .pagetitle h1 {
    font-size: 24px;
  }
  /*****幅レイアウト調整*****/
  .w900 {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
  }
  .w1000 {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
  }
  .w1000 .w900 {
    width: 100%;
    max-width: 900px;
  }
  .last_spacer {
    padding-bottom: 200px;
  }
  /**************基本フォントサイズ_PC***************/
  body {
    font-size: 14px;
  }
  /**************基本フォントサイズ***************/
  #sec02 {
    text-align: center;
    padding-bottom: 75px;
  }
  #sec02 h2 {
    padding-top: 75px;
    padding-bottom: 75px;
    font-size: 16px;
    color: #004e85;
  }
  #sec02 h2 img {
    width: 100px;
    padding-bottom: 20px;
  }
  #sec02 h2 p {
    display: block;
    width: 100%;
  }
  #sec02 h3 {
    font-size: 16px;
  }
  #sec02 .h3text {
    display: inline-block;
    text-align: left;
    padding-top: 20px;
    padding-bottom: 40px;
  }
  #sec02 .h3text span {
    display: inline-block;
    width: 6em;
  }
  #sec02 .h3text2 {
    display: inline-block;
    text-align: left;
    padding-top: 15px;
    padding-bottom: 20px;
  }
  #sec02 .h3text2 span {
    display: inline-block;
    width: 6em;
  }
  /***新卒採用ボタン**/
  #sec02 .botan_sinsotu {
    width: 100%;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
    background-color: #004E80;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
  }
  #sec02 .botan_sinsotu .leftbeta {
    width: 100%;
    position: relative;
    z-index: 5;
  }
  #sec02 .botan_sinsotu:hover {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    opacity: 0.8;
  }
  #sec02 .slider {
    position: relative;
    width: 100%;
    top: auto;
    left: 0%;
    height: 34vw;
  }
  #sec02 .slider .slider_01 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0%;
    background-image: url(../images/recruit/slider_p01_sp.png);
    background-size: cover;
  }
  #sec02 .slider .slider_03 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0%;
    background-image: url(../images/recruit/slider_p03_sp.png);
    background-size: cover;
  }
  #sec02 .slider .slider_04 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0%;
    background-image: url(../images/recruit/slider_p01_sp.png);
    background-size: cover;
  }
  #sec02 .slider .slider_on {
    left: 100%;
    -webkit-transition: all 1s ease-in;
    transition: all 1s ease-in;
  }
  #sec02 .botan_saiyo {
    width: 100%;
    position: relative;
    padding-top: 64%;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }
  #sec02 .botan_saiyo .botan_saiyo__in {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/recruit/bt_saiyou_sp.jpg);
    background-size: cover;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
  }
  #sec02 .botan_saiyo:hover {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  }
  #sec02 .botan_saiyo:hover > a .botan_saiyo__in {
    -webkit-transform: scale(1.05) !important;
    transform: scale(1.05) !important;
  }
  #sec02 .botan_saiyo:hover > a .obi_yaji {
    -webkit-transform: translate(8px, 0%);
    transform: translate(8px, 0%);
  }
  #sec02 .obi {
    width: 75%;
    position: absolute;
    left: 0;
    top: 10%;
    bottom: auto;
  }
  #sec02 .obi_yaji {
    width: 65.2%;
    position: absolute;
    left: 0;
    bottom: 10%;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
  }
  #sec03 {
    text-align: center;
    padding-bottom: 100px;
  }
  #sec03 h2 {
    padding-top: 75px;
    padding-bottom: 50px;
    font-size: 16px;
    color: #006430;
  }
  #sec03 h2 img {
    width: 100px;
    padding-bottom: 20px;
  }
  #sec03 h2 p {
    display: block;
    width: 100%;
  }
  #sec03 h3 {
    font-size: 16px;
  }
  #sec03 .h3text {
    display: inline-block;
    text-align: left;
    padding-top: 15px;
    padding-bottom: 20px;
  }
  #sec03 .morebotan {
    margin-top: 15px;
    font-size: 14px;
  }
  #sec03 .morebotan span {
    display: inline-block;
    margin-left: 8px;
    width: 1em;
    vertical-align: 4px;
  }
  #sec04 {
    text-align: center;
  }
  #sec04 .map01 {
    width: 100%;
    text-align: center;
    margin: 75px auto 0 auto;
  }
  #sec04 .map01 span {
    display: block;
    text-align: left;
  }
  #sec04 .map01 img.map {
    border: 1px solid #ccc;
    width: 100%;
    margin: 10px auto 50px;
  }
  #sec04 img.btn {
    width: 220px;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
  }
  #sec04 div.text02 {
    display: inline-block;
    text-align: left;
    padding-bottom: 0px;
    line-height: 180%;
    margin: 80px auto 40px auto;
  }
  #sec04 div.text02 .textll {
    display: inline-block;
    padding-bottom: 25px;
  }
  #sec04 div.text02 li {
    padding-left: 1em;
    text-indent: -1em;
    line-height: 140%;
    padding-bottom: 8px;
  }
}
