@charset "UTF-8";
.green {
  color: #00a040;
}

.red {
  color: #ed232a;
}

.page-hero-wrap {
  position: relative;
}
.page-hero-wrap h1.recruitment {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 37%;
  transform: translate(-50%, -50%);
  color: #fff;
}
@media screen and (min-width: 768px) {
  .page-hero-wrap h1.recruitment {
    top: 40%;
  }
}
.page-hero-wrap h1.recruitment span {
  display: block;
  text-align: center;
  line-height: 1;
}
.page-hero-wrap h1.recruitment span.title-en {
  font-size: 2em;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .page-hero-wrap h1.recruitment span.title-en {
    font-size: 4.25em;
  }
}
@media screen and (min-width: 1280px) {
  .page-hero-wrap h1.recruitment span.title-en {
    font-size: 80px;
  }
}
.page-hero-wrap h1.recruitment span.title-ja {
  font-size: 1.25em;
  margin-top: 3%;
}
@media screen and (min-width: 768px) {
  .page-hero-wrap h1.recruitment span.title-ja {
    font-size: 1.315em;
  }
}
@media screen and (min-width: 1280px) {
  .page-hero-wrap h1.recruitment span.title-ja {
    font-size: 25px;
  }
}
.page-hero-wrap p.recruitment-head-txt {
  width: 100%;
  position: absolute;
  left: 50%;
  bottom: 12%;
  text-align: center;
  line-height: 1.4em;
  color: #fff;
  transform: translate(-50%, 0);
}
@media screen and (min-width: 768px) {
  .page-hero-wrap p.recruitment-head-txt {
    bottom: 20%;
  }
}

/*.page-hero-wrap{*/
.sec-recruitment h2 span {
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .sec-recruitment h2 {
    padding: 115px 0 90px 0;
  }
}

div.tab-btn-wrap {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 15%;
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  div.tab-btn-wrap {
    max-width: 620px;
  }
}
@media screen and (min-width: 768px) {
  div.tab-btn-wrap {
    margin-bottom: 90px;
  }
}
div.tab-btn-wrap a.tab-btn {
  width: 48%;
  border: none;
  background: #F0EFED;
  line-height: 1;
  text-align: left;
  padding: 5% 4%;
  position: relative;
  transition: all 0.4s ease;
}
@media screen and (min-width: 768px) {
  div.tab-btn-wrap a.tab-btn {
    width: 49%;
    font-size: 20px;
    padding: 15px 0;
    text-align: center;
  }
}
div.tab-btn-wrap a.tab-btn:hover {
  background: #00A040;
  color: #FFF;
  transition: all 0.4s ease;
}
div.tab-btn-wrap a.tab-btn:hover span {
  background: #FFF;
}
div.tab-btn-wrap a.tab-btn:hover span::before, div.tab-btn-wrap a.tab-btn:hover span::after {
  background: #FFF;
}
div.tab-btn-wrap a.tab-btn span {
  display: block;
  width: 0.6em;
  height: 1px;
  background: #333;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translate(0, -50%) rotate(90deg);
}
div.tab-btn-wrap a.tab-btn span::before, div.tab-btn-wrap a.tab-btn span::after {
  content: " ";
  display: block;
  width: 0.3em;
  height: 1px;
  background: #333;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
  transform: rotate(40deg);
}
div.tab-btn-wrap a.tab-btn span::after {
  transform-origin: right bottom;
  transform: rotate(-40deg);
}

.recruitment-info-wrap {
  width: 90%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .recruitment-info-wrap {
    max-width: 870px;
  }
}
.recruitment-info-wrap h3 {
  line-height: 1;
}
.recruitment-info-wrap h3:last-of-type {
  margin-top: 25%;
}
.recruitment-info-wrap h3 span {
  display: inline-block;
  font-size: 1.125em;
  position: relative;
  padding-left: 2.4em;
}
@media screen and (min-width: 1020px) {
  .recruitment-info-wrap h3 span {
    font-size: 25px;
    padding-left: 25px;
  }
}
.recruitment-info-wrap h3 span::before {
  content: " ";
  display: block;
  width: 1.6em;
  height: 5px;
  background: #00a040;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}
@media screen and (min-width: 1020px) {
  .recruitment-info-wrap h3 span::before {
    width: 20px;
  }
}
.recruitment-info-wrap table {
  width: 100%;
}
.recruitment-info-wrap table tr {
  border-bottom: solid 1px #333;
}
.recruitment-info-wrap table th {
  width: 25%;
  padding: 5% 0;
  text-align: left;
  font-size: 0.8em;
}
@media screen and (min-width: 768px) {
  .recruitment-info-wrap table th {
    width: 18%;
    font-size: 14px;
    padding: 25px 0 25px 30px;
  }
}
@media screen and (min-width: 1020px) {
  .recruitment-info-wrap table th {
    width: 16%;
  }
}
.recruitment-info-wrap table td {
  width: 75%;
  font-size: 0.8em;
  line-height: 1.6em;
  padding: 5% 0;
}
@media screen and (min-width: 768px) {
  .recruitment-info-wrap table td {
    font-size: 14px;
    padding: 25px 0;
  }
}
@media screen and (min-width: 1020px) {
  .recruitment-info-wrap table td {
    width: 86%;
  }
}
.recruitment-info-wrap table td p {
  margin-bottom: 4%;
}
.recruitment-info-wrap table td p:last-of-type {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .recruitment-info-wrap table td p {
    width: 90%;
  }
}
.recruitment-info-wrap table td p span.small-txt {
  font-size: 0.9em;
  display: inline-block;
  margin-top: 3%;
}

/*recruitment-info-wrap*/
div.to-mynavi-link {
  width: 90%;
  margin: 0 auto;
  margin-top: 20%;
  padding-bottom: 15%;
}
@media screen and (min-width: 768px) {
  div.to-mynavi-link {
    margin-top: 120px;
  }
}
div.to-mynavi-link p {
  font-size: 1.2em;
  text-align: center;
}
@media screen and (min-width: 1020px) {
  div.to-mynavi-link p {
    font-size: 25px;
  }
}
div.to-mynavi-link a {
  display: block;
  background: #62c5d8;
  border-radius: 60px;
  text-align: center;
  position: relative;
  margin-top: 2%;
  padding: 9% 0;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  div.to-mynavi-link a {
    max-width: 450px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 30px 0;
  }
}
div.to-mynavi-link a span.txt {
  color: #fff;
  display: inline-block;
  line-height: 1;
  transform: translate(-1em, 0);
}
@media screen and (min-width: 1020px) {
  div.to-mynavi-link a span.txt {
    font-size: 20px;
  }
}
div.to-mynavi-link a span.arrow {
  display: block;
  width: 30px;
  height: 1px;
  background: #fff;
  position: absolute;
  right: 10%;
  bottom: 49%;
}
@media screen and (min-width: 768px) {
  div.to-mynavi-link a span.arrow {
    right: 5%;
    bottom: 50%;
  }
}
div.to-mynavi-link a span.arrow::before {
  content: " ";
  display: block;
  width: 10px;
  height: 1px;
  background: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
  transform: rotate(40deg);
}
div.to-mynavi-link a span.arrow::after {
  content: " ";
  display: block;
  width: 10px;
  height: 1px;
  background: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
  transform: rotate(-40deg);
}

div.entry-box {
  margin-bottom: 15%;
}
div.entry-box h2 {
  text-align: center;
}
@media screen and (min-width: 1020px) {
  div.entry-box h2 {
    font-size: 25px;
  }
}
div.entry-box div.form-wrap {
  /*
  @include container(90% , 870px);
  margin-top: 5%;
  padding: 10%;
  text-align: center;
  @include mq(pc) {
  	margin-top: 50px;
  }
  	*/
}

/*========================= 完了画面 =========================*/
div.thanks-box {
  padding-top: 20vw;
  padding-bottom: 10vw;
  /*div.view-more-btn{*/
}
@media screen and (min-width: 768px) {
  div.thanks-box {
    padding-top: 150px;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  div.thanks-box h2 {
    padding-bottom: 50px;
  }
}
div.thanks-box p {
  text-align: center;
  line-height: 2em;
  font-size: 3.6vw;
}
@media screen and (min-width: 768px) {
  div.thanks-box p {
    font-size: 14px;
    line-height: 3em;
  }
}
div.thanks-box div.view-more-btn {
  width: 45%;
  margin: 5vw auto 0;
  margin-top: 10%;
  /*a*/
}
@media screen and (min-width: 768px) {
  div.thanks-box div.view-more-btn {
    width: 168px;
    margin: 50px auto 0;
    overflow: hidden;
  }
}
div.thanks-box div.view-more-btn a {
  display: block;
  position: relative;
  background: #222;
  border-radius: 60px;
  /*span*/
}
@media screen and (min-width: 768px) {
  div.thanks-box div.view-more-btn a {
    transition: all 0.4s;
    overflow: hidden;
    position: relative;
  }
  div.thanks-box div.view-more-btn a::before {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    background: #00a040;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0, 0) scaleX(0);
  }
  div.thanks-box div.view-more-btn a:hover {
    transition: all 0.6s;
    transform-origin: center center;
    transform: scale(0.96);
  }
  div.thanks-box div.view-more-btn a:hover::before {
    animation: hover-bg-ani 0.6s ease-out forwards;
  }
}
div.thanks-box div.view-more-btn a span {
  display: block;
}
div.thanks-box div.view-more-btn a span.txt {
  font-style: italic;
  padding: 0.2em 0 0.2em 2em;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  div.thanks-box div.view-more-btn a span.txt {
    font-size: clamp(14px, 1.18vw, 16px);
    position: relative;
    z-index: 3;
    padding: 0.2em 0 0.2em 2.4em;
  }
}
div.thanks-box div.view-more-btn a span.arrow {
  background: none;
  right: auto;
  bottom: auto;
  right: 10%;
  top: 52%;
  transform: translate(0, -50%);
}
div.thanks-box div.view-more-btn a span.arrow span {
  width: 100%;
  height: 1px;
  background: #FFF;
}
div.thanks-box div.view-more-btn a span.arrow::after, div.thanks-box div.view-more-btn a span.arrow::before {
  background: #FFF;
}
div.thanks-box div.view-more-btn:hover a span.arrow {
  /*				animation: view-more-btn-ani 0.8s ease-in-out forwards;*/
}
div.thanks-box div.view-more-btn:hover a span.arrow span {
  animation: view-more-btn-clip-ani 0.8s ease forwards;
}
div.thanks-box div.view-more-btn:hover a span.arrow::before {
  animation: view-more-btn-clip-ani 0.8s ease-in-out forwards;
}
div.thanks-box div.view-more-btn:hover a span.arrow::after {
  animation: view-more-btn-clip-ani 0.8s ease-in-out forwards;
}

span.arrow {
  display: block;
  width: 30px;
  height: 1px;
  background: #222;
  position: absolute;
  right: 26%;
  bottom: 15%;
}
@media screen and (min-width: 768px) {
  span.arrow {
    right: 5%;
    bottom: 50%;
  }
}
span.arrow::before {
  content: " ";
  display: block;
  width: 10px;
  height: 1px;
  background: #222;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
  transform: rotate(40deg);
}
span.arrow::after {
  content: " ";
  display: block;
  width: 10px;
  height: 1px;
  background: #222;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
  transform: rotate(-40deg);
}

@keyframes view-more-btn-clip-ani {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  40% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  50% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  90% {
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}
@keyframes hover-bg-ani {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  55% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  60% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}/*# sourceMappingURL=recruitment.css.map */