/* === recruit.css === */

/* === 採用ページ全体のコンテナ
     最大幅1000pxで中央寄せ、
     横に少しパディングを入れて白背景にする === */
.recruit-container {
  max-width: 1100px;                     /* 最大幅を1000pxに制限 */
  margin: 0 auto;                        /* 横中央揃え */
  padding: 60px 40px 80px;               /* 上40px、左右20px、下60pxの余白 */
  background-color: #fff;                /* 背景は白 */
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* 日本語フォント指定 */
}

/* === ページタイトル（h2タグ）
     中央寄せで大きめの文字サイズ === */
.recruit-container h2 {
  text-align: center;                   /* 中央寄せ */
  font-size: 2rem;                     /* フォントサイズ大きめ */
  margin-bottom: 40px;                 /* 下に余白 */
  color: #2d5936;                      /* 落ち着いたグリーン */
}

/* === 冒頭の説明文エリア（段落） === */
.intro {
  width: 80%;
  margin: 0 auto;
}

.intro p {
  font-size: 1rem;                    /* 標準的な文字サイズ */
  color: #444;                       /* 濃すぎない黒系 */
  line-height: 1.8;                  /* 読みやすい行間 */
  margin-bottom: 1em;                /* 段落間の余白 */
}

/* === 応募資格セクション
     薄いグレー背景のボックス、
     角丸と余白で見やすく === */
.qualification {
  width: 80%;
  margin: 25px auto;                  /* 上に余白 */
  background: #f3f3f3;              /* 薄いグレー背景 */
  padding: 24px;                    /* 内側の余白 */
  border-radius: 10px;              /* 角丸 */
}

/* 応募資格の見出し */
.qualification h3 {
  font-size: 1.3rem;                /* 少し大きめ */
  color: #1a3d2f;                  /* 濃いグリーン */
  margin-bottom: 12px;             /* 下余白 */
  border-left: 5px solid #4caf50;  /* 左に緑の強調線 */
  padding-left: 10px;              /* 線とテキストの間 */
}

/* 応募資格リスト */
.qualification ul {
  padding-left: 1.2em;             /* リストのインデント */
}

.qualification li {
  margin-bottom: 8px;              /* リストアイテム間の余白 */
  color: #333;                    /* 文字色 */
  line-height: 1.6;               /* 行間 */
  list-style-type: disc;          /* 黒丸リスト */
}

/* === お問い合わせセクション
     薄いグリーン背景のボックスで区切る === */
.contact-box {
  width: 80%;
  margin: auto;
  background: #e9f5e9;             /* 薄い緑背景 */
  padding: 24px;                   /* 内側余白 */
  border-radius: 10px;             /* 角丸 */
  border: 1px solid #c5e3c5;      /* 薄い緑の境界線 */
}

/* お問い合わせの見出し */
.contact-box h3 {
  font-size: 1.3rem;               /* 見出しの大きさ */
  color: #1a3d2f;                 /* 濃い緑 */
  margin-bottom: 12px;            /* 下余白 */
  border-left: 5px solid #4caf50; /* 左強調線 */
  padding-left: 10px;             /* 線とテキストの間 */
}

/* お問い合わせ本文 */
.contact-box p {
  margin-bottom: 10px;            /* 下余白 */
  font-size: 1rem;                /* 標準フォントサイズ */
  color: #333;                   /* 文字色 */
}

/* === 入力欄などのプレースホルダー文字風のスタイル === */
.placeholder {
  color: #777;                   /* 薄いグレー */
  font-style: italic;            /* イタリック体 */
}

/* === スマホ対応：画面幅640px以下のとき === */
@media screen and (max-width: 640px) {
  .recruit-container {
    padding: 20px 16px 40px;     /* 上下余白控えめに */
  }

  .recruit-container h2 {
    font-size: 1.6rem;            /* タイトル文字を小さく */
  }

  .qualification,
  .contact-box {
    padding: 16px;                /* ボックスの余白を狭く */
    margin-top: 30px;            /* ボックスの上余白を少し減らす */
  }

  .qualification h3,
  .contact-box h3 {
    font-size: 1.1rem;            /* 見出しを少し小さく */
  }
}