@charset "UTF-8";
/* =========================================================
   recruit.css
   採用情報ページ（page-recruit.php / is_page('recruit')）専用の追加スタイル。
   functions.php で common.css → page.css の後に読み込む。
   現状は「よくある質問」セクション（.recruit-faq）用。
   ========================================================= */

/* --- よくある質問（FAQ） --- */
.recruit-faq {
  margin: 70px auto 50px;
}

.recruit-faq > h2 {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  color: #005aaa;
  letter-spacing: 0.08em;
  margin-bottom: 40px;
}

.recruit-faq__item {
  border-top: 1px solid #e0e4ec;
  padding: 28px 8px;
}

.recruit-faq__item:last-child {
  border-bottom: 1px solid #e0e4ec;
}

.recruit-faq__item dt {
  position: relative;
  padding-left: 40px;
  font-size: 1.9rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
}

.recruit-faq__item dd {
  position: relative;
  padding-left: 40px;
  margin-top: 14px;
  line-height: 1.9;
  color: #444;
}

/* Q/A マーク：塗りつぶしだと主張が強いので、細い枠線＋同色文字の控えめな丸に */
.recruit-faq__item dt::before,
.recruit-faq__item dd::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  line-height: 23px;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
}

.recruit-faq__item dt::before {
  content: "Q";
  border: 1.5px solid #005ad2;
  color: #005ad2;
}

.recruit-faq__item dd::before {
  content: "A";
  border: 1.5px solid #8fd4ee;
  color: #5bb7dd;
}

@media screen and (max-width: 420px) {
  .recruit-faq {
    margin: 50px auto 40px;
  }
  .recruit-faq > h2 {
    font-size: 2.2rem;
    margin-bottom: 24px;
  }
  .recruit-faq__item {
    padding: 20px 4px;
  }
  .recruit-faq__item dt {
    font-size: 1.6rem;
    padding-left: 34px;
  }
  .recruit-faq__item dd {
    font-size: 1.4rem;
    padding-left: 34px;
  }
  .recruit-faq__item dt::before,
  .recruit-faq__item dd::before {
    width: 22px;
    height: 22px;
    line-height: 19px;
    font-size: 1.2rem;
  }
}