@charset "UTF-8";

/* ------------------------------------------------------------
   base.css
------------------------------------------------------------ */
/*
* subhead
* layer__contents
*
*/
/* subhead
------------------------------------------------------------ */
.subhead {
  background-color: #f5f57a;
}

.subhead h1 {
  max-width: 188px;
}

/* layer__contents
------------------------------------------------------------ */
.layer__contents .catch {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4%;
}

.layer__contents img {
  width: 100%;
}

.layer__contents .job__list {
  display: flex;
  margin-bottom: 100px;
}
.layer__contents .job__list li {
  margin: 1%;
  text-align: center;
}
.layer__contents .job__list a {
  text-decoration: none;
  transition: all 0.4s ease-in-out;
  display: block;
  font-weight: bold;
}
.layer__contents .job__list .name {
  padding: 10px;
  transition: all 0.4s ease-in-out;
  font-size: 1.4rem;
  border: solid 3px;
  border-radius: 100px;
  margin-bottom: 20px;
  background: url(../../common/img/arrow_wh2_b.png) no-repeat right 15px center /
    16px auto;
}
.layer__contents .job__list .image {
  padding: 10%;
  border-radius: 20px;
  transition: all 0.8s ease-in-out;
}

.layer__contents .job__list a:hover .image {
  background: #f2f2f2;
}
.layer__contents .job__list li:nth-child(1) a:hover .image {
  background: #bcf7e9;
}
.layer__contents .job__list li:nth-child(2) a:hover .image {
  background: #f5f57a;
}
.layer__contents .job__list li:nth-child(3) a:hover .image {
  background: #d8f380;
}
.layer__contents .job__list li:nth-child(4) a:hover .image {
  background: #ffbdc4;
}

.layer__contents .job__list a:hover .name {
  background-color: #023894;
  background-image: url(../../common/img/arrow_wh_b.png);
  color: #fff;
}

.layer__contents h3.subtit__blue {
  margin-bottom: 3%;
}

.layer__contents .archive {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 6%;
}

.layer__contents .archive h4 {
  font-size: 20px;
  margin: 40px 0 30px;
  line-height: 1.8;
  color: #023894;
}

.layer__contents .archive.box__right {
  flex-direction: row-reverse;
}

.layer__contents .archive .pho {
  width: 30%;
}

.layer__contents .archive .text {
  width: 65%;
}

.layer__contents .archive .text p {
  margin-bottom: 20px;
}

.layer__contents .archive .text .more__btn {
  margin: 30px 0 0;
  max-width: 360px;
}

.layer__contents .archive .text .more__btn a {
  font-size: 1.6rem;
}
.tab__joblist {
  display: none;
}

@media screen and (min-width: 1090px) and (max-width: 1300px) {
  /* ▼PC用================================================================== */

  /* ▲PC用================================================================== */
}

@media screen and (min-width: 768px) and (max-width: 1089px) {
  /* ▼Tab用================================================================= */
  /* layer__contents
	------------------------------------------------------------ */

  .layer__contents .job__list .name {
    display: none;
  }
  .tab__joblist {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tab__joblist li {
    margin: 1%;
  }
  .tab__joblist li a {
    display: block;
    font-size: 1.4rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    padding: 5px 15px;
    background: #f2f2f2;
    border-radius: 100px;
  }
  .tab__joblist li a:hover {
    background: #023894;
    color: #fff;
  }

  /* ▲Tab用================================================================= */
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  /* ▼SP用================================================================ */

  /* subhead
	------------------------------------------------------------ */
  .subhead h1 {
    width: 30%;
  }

  /* layer__contents
	------------------------------------------------------------ */

  .layer__contents .job__list {
    display: block;
    margin-bottom: 60px;
  }
  .layer__contents .job__list li {
    margin: 5% 0;
  }
  .layer__contents .job__list li .image {
    display: none;
  }

  .layer__contents .catch {
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 8%;
  }
  .layer__contents .catch br {
    display: none;
  }
  .layer__contents h3.subtit__blue {
    margin-bottom: 6%;
  }
  .layer__contents .archive {
    display: block;
    margin-bottom: 10%;
  }
  .layer__contents .archive h4 {
    font-size: 18px;
  }
  .layer__contents .archive .pho {
    width: 70%;
    margin: 0 auto 3%;
  }
  .layer__contents .archive .text {
    width: auto;
  }
  .layer__contents .archive .text .more__btn {
    width: 80%;
    margin: 30px auto;
  }
  .layer__contents .archive .text .more__btn a {
    font-size: 1.4rem;
  }
  /* ▲SP用================================================================ */
}