@charset "UTF-8";

/* ==========================================================================
   いろのわ訪問看護ステーション　採用情報ページ（/houkan/recruit/）
   - 共通トークン・ヘッダー・フッターは ../css/style.css を使用（style.css は変更しない）
   - 募集要項ブロックは、かない内科の採用ページ（.entry 系）の作りに合わせている
     ・帯見出し／ゼブラ行／ラベル固定幅／角丸なし
     ・実測元：https://kanainaika.com/wp-content/themes/kanai/styles/main.css
   ========================================================================== */

.rec-body {
  --rec-job-bg:  #465362;   /* 職種名の帯（既定。職種ごとに下で上書き） */
  --rec-h2-bg:   #1A1A1A;   /* 「募集要項」の帯 */
  --rec-row-alt: #E4EEFA;   /* ゼブラの色つき行 */
  --rec-row-base:#FFFFFF;   /* ゼブラの白い行 */
  --rec-row-ink: #1A1A1A;   /* 行の文字色 */
}

/* ── 職種ごとの配色 ────────────────────────
   かない内科のテーマが職種別に持っている配色をそのまま使う
   （main.css の .entry-item h3 ＋ .entry-row:nth-child(even) の組み合わせ）
     スレートブルー #465362 ＋ #E4EEFA
     緑            #406858 ＋ #F0FFF9
     茶            #6C4A43 ＋ #FDEBE7
     黄土          #8B7E46 ＋ #FAF6E9
   ────────────────────────────────────── */

/* 訪問看護師＝茶 */
.rec-entry__item--nurse {
  --rec-job-bg:  #6C4A43;
  --rec-row-alt: #FDEBE7;
}

/* 理学療法士・作業療法士＝スレートブルー */
.rec-entry__item--therapist {
  --rec-job-bg:  #465362;
  --rec-row-alt: #E4EEFA;
}

/* ── Page head ─────────────────────────────── */
.rec-head {
  background: var(--cream);
  padding: 64px 0 60px;
}
.rec-head__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
}
.rec-head__label {
  margin-bottom: 10px;
}
.rec-head__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
}

/* ── Breadcrumb ────────────────────────────── */
.rec-breadcrumb {
  border-bottom: 1px solid var(--cream-2);
}
.rec-breadcrumb__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 40px;
}
.rec-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 13px;
  color: var(--gray);
}
.rec-breadcrumb li + li::before {
  content: "＞";
  margin-right: 8px;
  color: var(--green-line);
}
.rec-breadcrumb a {
  color: var(--gray);
  text-decoration: none;
}
.rec-breadcrumb a:hover {
  text-decoration: underline;
}

/* ── 募集要項（かない内科の作りに合わせる） ── */
.rec-entry {
  background: #fff;
  padding: 0;
}
.rec-entry__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
}

/* h2「募集要項」＝帯見出し（かない内科 .entry h2 と同じ作り） */
.rec-entry__heading {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  background: var(--rec-h2-bg);
  width: 100%;
  padding: 10px 0;
}

.rec-entry__wrap {
  padding-top: 100px;
}

.rec-entry__item + .rec-entry__item {
  margin-top: 80px;
}

/* h3 職種名＝帯見出し（かない内科 .entry-item h3 と同じ作り） */
.rec-entry__job {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  background: var(--rec-job-bg);
  width: 100%;
  padding: 10px 0;
}

/* 行（かない内科 .entry-row と同じ作り） */
.rec-entry__row {
  display: flex;
  align-items: center;
  color: var(--rec-row-ink);
  padding: 20px;
  background: var(--rec-row-base);
}
/* h3 が1番目の子なので、最初の行は nth-child(2)=even＝色つきになる */
.rec-entry__row:nth-child(even) {
  background: var(--rec-row-alt);
}

.rec-entry__label {
  width: 300px;
  flex-shrink: 0;
  font-weight: 500;
}
.rec-entry__text {
  width: calc(100% - 300px);
}

/* ── ご応募について ────────────────────────── */
.rec-apply {
  background: var(--beige-deep);
  padding: 56px 0 64px;
  text-align: center;
}
.rec-apply__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}
.rec-apply__title {
  margin-bottom: 24px;
}
.rec-apply__body {
  margin-bottom: 40px;
}
.rec-apply__btn {
  width: 320px;
  height: 62px;
}
.rec-apply__tel {
  margin-top: 0;
  font-size: 14px;
  color: var(--gray);
  line-height: 2;
}
.rec-apply__telnum {
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--green-deep);
  letter-spacing: .04em;
  text-decoration: none;
}
.rec-apply__telnote {
  display: block;
  font-size: 13px;
}

/* ── レスポンシブ（かない内科のブレイクポイントに合わせる） ── */
@media (min-width: 1001px) and (max-width: 1500px) {
  .rec-entry__heading,
  .rec-entry__job { font-size: 26px; }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .rec-entry__heading,
  .rec-entry__job { font-size: 22px; }
  .rec-entry__label { width: 200px; }
  .rec-entry__text { width: calc(100% - 200px); }
  .rec-head { padding: 52px 0 48px; }
  .rec-head__title { font-size: 30px; }
  .rec-entry__wrap { padding-top: 80px; }
  .rec-entry__item + .rec-entry__item { margin-top: 64px; }
  .rec-apply { padding: 48px 0 56px; }
}

@media (max-width: 767px) {
  .rec-entry__heading,
  .rec-entry__job { font-size: 18px; padding: 8px 0; }

  /* SPもかない内科と同じ横並び（.entry-row padding:10px ／ .entry-label width:120px） */
  .rec-entry__row { padding: 10px; }
  .rec-entry__label { width: 120px; }
  .rec-entry__text { width: calc(100% - 120px); }

  .rec-head { padding: 40px 0 36px; }
  .rec-head__inner,
  .rec-breadcrumb__inner,
  .rec-entry__inner,
  .rec-apply__inner { padding-left: 24px; padding-right: 24px; }
  .rec-head__title { font-size: 25px; }
  .rec-entry__wrap { padding-top: 60px; }
  .rec-entry__item + .rec-entry__item { margin-top: 48px; }
  .rec-apply { padding: 40px 0 48px; }
  .rec-apply__btn { width: 100%; max-width: 320px; }
  .rec-apply__telnum { font-size: 26px; }
}

/* ==========================================================================
   求人採用エントリーフォーム
   かない内科の採用ページと同じ見た目。値はすべて
   https://kanainaika.com/wp-content/themes/kanai/styles/main.css の
   .form 系ブロックから実測してそのまま移してある（改変なし）
   ========================================================================== */

.form { padding: 150px 0; background: #fff; }
.form-inner { width: 1000px; margin: 0 auto; }

.form-title {
  position: relative;
  background-color: #1A1A1A;
  color: #ffffff;
  padding: 10px 0;
}
.form-title h2 { text-align: center; font-size: 30px; font-weight: 700; letter-spacing: .06em; }
.form-title span { position: absolute; top: 10px; right: 150px; }

.form-item { padding: 10px 0; }

.form-label { color: #1A1A1A; padding-bottom: 5px; }
.form-label .required { position: relative; }
.form-label .required::after {
  content: "＊";
  position: absolute;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3";
  color: #1A1A1A;
  top: -10px;
  right: -15px;
  font-weight: 700;
}

.form-input { width: 100%; }
.form-input [type=text],
.form-input [type=email] {
  width: 100%;
  height: 35px;
  border: 1px solid #1A1A1A;
  padding-left: 10px;
  font-size: 16px;
}
.form-input span { margin: 0 5px; }

.form-tel { width: 100%; }
.form-tel [type=text] {
  width: 15%;
  height: 35px;
  border: 1px solid #1A1A1A;
  margin-left: 5px;
  padding-left: 10px;
  font-size: 16px;
}

/* CF7 本体（contact-form-7/includes/css/styles.css）の指定を再現
   .wpcf7-list-item { display:inline-block; margin:0 0 0 1em }
   .wpcf7-list-item-label::before/::after { content:" " } */
.rec-radio,
.rec-check { display: inline-block; margin: 0 0 0 1em; }
.rec-radio:first-child,
.rec-check:first-child { margin-left: 0; }
.rec-radio label span::before,
.rec-radio label span::after,
.rec-check label span::before,
.rec-check label span::after { content: " "; }

.form-input-radio--1 label { color: #1A1A1A; }
.form-input-radio--1 label [type=radio] { transform: scale(1.5); margin-right: 10px; }
.form-input-radio .rec-radio { display: block; margin-left: 0; }
.form-input-radio label { display: block; color: #1A1A1A; }
.form-input-radio label [type=radio] { transform: scale(1.5); margin-right: 10px; }

.form-textarea textarea {
  width: 100%;
  height: 90px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #1A1A1A;
}

.form-file { padding-bottom: 20px; }
.form-file span { font-size: 10px; }
.form-file-text { font-size: 12px; color: #1A1A1A; padding: 5px 0; }

.form-check { padding-top: 30px; color: #1A1A1A; }
.form-check li { font-size: 12px; padding-bottom: 5px; list-style: none; }
.form-check p { font-size: 14px; }
.form-check-title { padding-bottom: 10px; }
.form-check-box {
  background-color: #F4F3EF;
  margin-top: 5px;
  margin-bottom: 25px;
  padding: 20px;
}
.form-check-box [type=checkbox] { transform: scale(1.5); margin-right: 10px; }
.form-check-box p { text-align: center; }
.form-check-box .rec-check { padding-left: 10px; position: relative; margin-left: 0; }
.form-check-box .rec-check::after {
  content: "必須";
  width: 40px;
  position: absolute;
  color: #ffffff;
  background-color: #BBCBCB;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  right: -80px;
}

.form-confirm { margin-top: 60px; text-align: center; }
.form-confirm [type=submit] {
  width: 220px;
  height: 45px;
  text-align: center;
  background-color: #1A1A1A;
  color: #ffffff;
  border: none;
  font-size: 15px;
  cursor: pointer;
}
.form-confirm [type=submit]:hover { opacity: .7; }
.form-confirm [type=submit][disabled] { opacity: .4; cursor: default; }

/* 送信結果の表示（CF7の .wpcf7-response-output に相当） */
.rec-form__output {
  display: none;
  margin: 24px auto 0;
  padding: 16px 20px;
  border: 2px solid #1A1A1A;
  font-size: 14px;
  text-align: center;
}
.rec-form__output.is-shown { display: block; }
.rec-form__output.is-error { border-color: #D96323; color: #D96323; }
.rec-form__output.is-ok { border-color: #406858; color: #406858; }

/* 入力エラーの印（CF7の wpcf7-not-valid に相当） */
.rec-form .is-invalid { border-color: #D96323 !important; }
.rec-form__err { display: block; color: #D96323; font-size: 12px; padding-top: 4px; }

@media (min-width: 1001px) and (max-width: 1500px) {
  .form-inner { width: 800px; }
  .form-title span { right: 100px; }
  .form-title h2 { font-size: 26px; }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .form { padding: 100px 40px; }
  .form-inner { width: 100%; }
  .form-title h2 { font-size: 22px; }
}

@media (max-width: 767px) {
  .form { padding: 80px 20px; }
  .form-inner { width: 100%; }
  .form-title h2 { font-size: 18px; padding: 0; }
  .form-title span { position: static; text-align: right; display: block; font-size: 12px; }
  .form-check-box { padding-top: 40px; }
  .form-check-box p { text-align: left; }
  .form-check-box .rec-check { padding-left: 0; }
  .form-check-box .rec-check::after { top: -20px; left: 0; right: auto; }
  .form-confirm { margin-top: 40px; }
}