@charset "utf-8";
/* CSS Document */

/*------------ JOIN ------------*/
#join {
  padding: 120px 0 170px;
}

.join-box {
  padding: 70px 0 25px 0;
  /* border-bottom: 1px solid #000; */
}

.join-box-top {
  padding: 70px 0 0 0;
}

.join-message {
  font-size: 16px;
  margin: 0px auto;
  padding-left: 4px;
  width: 50%;
}

.join-date {
  font-size: 16px;
}

.join-ttl {
  font-size: 24px;
  margin-top: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.join-jobtype {
  margin: 0px auto;
  width: 50%;
}

.join-body {
  padding: 20px 0;
}

.join-body p {
  font-size: 16px;
  padding-left: 2px;
}

.join-body p+p {
  margin-top: 30px;
}

.join-detail-flow p+p {
  margin-top: 10px;
}

.join-detail-flow-arrow {
  text-align: center;
  font-weight: bold;
}

.join-body em {
  font-weight: 600;
  font-style: normal;
}

.join-body small {
  font-size: 12px;
}

.join-body a {
  text-decoration: underline;
}

.join-body a:hover {
  text-decoration: none;
}

.join-body strong {
  color: #e70000;
  font-weight: normal;
}

.join-body img {
  margin: 0 auto;
  display: block;
}
.join-body p img {
  margin: 0 auto;
  display: block;
}

.join-body p span.fixwidth {
  display: inline-block;
  width: 5em;
}

.join-body ul.fleximg {
  display: flex;
  justify-content: center;
  column-gap: 2em;
}

.pagination-wrap {
  text-align: center;
}

.pagination {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

.pagination li {
  padding: 0 2px;
  width: 30px;
  font-size: 16px;
}

.pagination li a {
  display: block;
  width: 100%;
  padding: 5px;
  text-decoration: underline;
}

.pagination li a:hover,
.pagination li.current a,
.pagination li.page-arrow a {
  text-decoration: none;
}

.join-button {
  text-align: center;
  /* width: 50%; */
}

.join-button-return {
  margin-top: 50px;
  border-top: 1px solid #000;
  padding: 20px 0 0 0;
}

.join-button button {
  margin: 1.333vw auto 0 auto;
  width: 270px;
  padding: 5px 40px 5px 40px;
  text-align: center;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.45);
  color: black;
  font-size: 14px;
  font-weight: 700;
}

.join-button img {
  margin: 1.333vw auto 0 auto;
  width: 270px;
  height: 33.8px;
  border: 1px solid #fff;
}

.join-button-image-text {
  position: absolute;
  left: 50%;
  /* top: 50%; */
  transform: translate(-50%, -115%);
  /* font-family: initial; */
  font-size: 14px;
  font-weight: 700;
}


@media (max-width: 768px) {
  #join {
    padding: 15.789vw 0 22.368vw;
  }

  .join-box {
    padding: 9.211vw 0;
  }

  .join-message {
    font-size: 3.733vw;
    margin: 0px auto;
    /* padding-left: 0px; */
    width: 80%;
  }

  .join-jobtype {
    width: 80%;
  }

  .join-date {
    font-size: 3.733vw;
  }

  .join-ttl {
    font-size: 3.8vw;
    margin-top: 1.974vw;
    padding-bottom: 2.632vw;
  }

  .join-body {
    padding: 2.632vw 0;
  }

  .join-body p {
    font-size: 3.733vw;
    /* padding-left: 0px; */
  }

  .join-body p+p {
    margin-top: 3.947vw;
  }

  .join-body small {
    font-size: 2.133vw;
  }

  .pagination {
    margin-top: 10.526vw;
  }

  .pagination li {
    padding: 0 0.263vw;
    width: 3.947vw;
    font-size: 3.733vw;
  }

  .pagination li a {
    padding: 0.658vw;
  }

  .join-button button {
    font-size: 2.842vw;
  }

  .join-button-image-text {
    font-size: 2.842vw;
    transform: translate(-50%, -130%);
  }
}

.join-body .gridbox {
  display: grid;
  /* グリッド表示 */
  gap: 1px;
  /* 間隔1px */
  grid-template-columns: 1fr 1fr;
  /* 2列等間隔 */
}

.join-body .gridbox div {
  margin: 1px auto 0px;
  /* 外余白上下1px左右自動 */
  text-align: center;
  /* 中央寄せ */
}