@charset "UTF-8";
/* CSS Document */
/* =========================== */
/* 募集要項 ヘッダー */
.education-header {
  width: 100%;
  margin-top: 120px; /* ヘッダーの高さ分を確保 */
}

.education-header-img {
  width: 100%;
  height: auto; /* アスペクト比を保持 */
  display: block;
}

.education-header-sp {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================== */
/* 研修・キャリア支援制度 ヘッダー */
/* =========================== */
.section-header {
  position: relative;
  text-align: center;
  padding: 40px 0;
}
.section-header img {
  width: 100%;
  height: auto;
}

/* =========================== */
/* 新入社員研修セクション */
/* =========================== */
.new-employee-training {
  padding: 60px 0;
}

/* セクションのタイトル画像 */
.new-employee-section-header {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.new-employee-section-header .title-img {
  max-width: 100%;
  height: auto;
}

/* タイムライン全体 */
.training-timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 50px;
}

/* 月ブロック */
.month-block {
  margin-bottom: 30px;
}

/* 月ラベルとコンテンツを含むコンテナ */
.month-content-container {
  display: flex;
  align-items: center;
}

/* 月ラベル：PC版 */
.month-label {
  flex: 0 0 auto;
  margin-right: 20px;
  position: relative;
  width: 100px;
}

.month-label img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* PC用の矢印（月ラベルの上） */
.arrow-pc-top {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.arrow-pc-top img {
  width: 22px;
  height: auto;
}

/* PC用の矢印（月ラベルの下） */
.arrow-pc-bottom {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.arrow-pc-bottom img {
  width: 22px;
  height: auto;
}

/* 月ラベル：スマホ版 */
.month-label-sp {
  margin-bottom: 15px;
  text-align: center;
  position: relative;
  max-width: 350px;
  height: auto;
}

.month-label-sp img {
  width: 100%;
  height: auto;
}

/* スマホ用の矢印（下） */
.arrow-sp-bottom {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.arrow-sp-bottom img {
  width: 22px;
  height: auto;
}

/* スマホ用の矢印（上） */
.arrow-sp-top {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.arrow-sp-top img {
  width: 22px;
  height: auto;
}

/* 研修コンテンツ */
.training-content {
  flex: 1;
  padding: 20px 20px 20px 0; /* 左のパディングを削除 */
}

.training-content .training-title {
  font-size: 20px;
  font-weight: bold;
}

.training-content .training-subtitle {
  font-size: 18px;
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 20px;
}

.training-content .training-text {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 0;
}

/* 画像コンテナ */
.training-image-container {
  flex: 0 0 auto;
  width: 260px;
}

/* 研修画像：PC版 */
.training-image {
  width: 100%;
}

.training-image img {
  max-width: 100%;
  height: auto;
}

/* 研修画像：スマホ版 */
.training-image-sp {
  text-align: center;
  margin-top: 15px;
}

.training-image-sp img {
  max-width: 100%;
  height: auto;
}

/* 複数画像のスタック（5月用） */
.image-stack {
  display: flex;
  flex-direction: column;
}

/* スマホ表示調整 */
@media (max-width: 767.98px) {
  .new-employee-training {
    padding: 40px 0;
  }
  
  .month-block {
    margin-bottom: 40px; /* スマホでは余白を増やす */
  }
  
  .month-content-container {
    flex-direction: column;
  }
  
  .training-content {
    padding: 0;
    margin-top: 15px;
    margin-bottom: 10px;
    max-width: 350px;
  }
  
  .training-content .training-title {
    font-size: 18px;
    text-align: left!important;
  }
  
  .training-content .training-subtitle {
    font-size: 18px;
  }
  
  .training-content .training-text {
    font-size: 14px;
  }
  
  .training-image-container {
    width: 100%;
    margin: 15px auto 0;
  }
}

/* タブレット表示調整 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .training-image-container {
    width: 220px;
  }
  
  .month-label {
    width: 100px; /* タブレット用に幅を調整 */
  }
}

/* =========================== */
/* 入社以降の研修 スタイル */
/* =========================== */

/* セクションのコンテナ */
.training-section .container {
  max-width: 1200px;
}

/* 研修項目コンテナ */
.training-items-container {
  padding: 0 15px;
}

/* 研修項目 */
.training-item {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  padding: 0;
}

/* 最後の研修項目の下部マージンとボーダーを削除 */
.training-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* 研修アイコン */
.training-icon-container {
  flex-shrink: 0;
}

.training-icon {
  width: 120px;
  height: 120px;
}

@media (max-width: 767.98px) {
  .training-icon {
    width: 66px;
    height: 66px;
  }
}

/* トレーニングタイトルとサブタイトル */
.training-title-container {
  flex-grow: 1;
}

.training-title-wrapper .training-title {
  font-size: 20px;
  font-weight: bold;
}

.training-title-wrapper .training-subtitle {
  font-size: 18px;
  font-weight: bold;
}

@media (max-width: 767.98px) {
  .training-title-wrapper .training-title {
    font-size: 18px;
  }
  
  .training-title-wrapper .training-subtitle {
    font-size: 18px;
  }
}

/* 研修リスト */
.training-list {
  margin-bottom: 0;
}

.training-list li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.training-list li:last-child {
  margin-bottom: 0;
}

/* 補足テキスト */
.note-text {
  font-size: 0.85rem;
  color: #666;
  font-weight: normal;
  line-height: 1.5;
}

/* 区切り線 */
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

/* 注意書きテキスト */
.training-caution {
  font-size: 12px;
  color: #666;
  font-weight: normal;
  line-height: 1.5;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .training-caution {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem; /* スマホ表示時に少し左にパディングを入れて字下げ効果 */
  }
}

/* =========================== */
/* 等級制度セクション共通スタイル */
/* =========================== */
.grade-system {
  padding: 60px 0;
}

.grade-system .container {
  max-width: 1200px;
}

/* コンテンツブロック - 共通スタイル */
.grade-content-block,
.human-resource-block,
.grade-system-about-block {
  max-width: 980px;
  margin: 0 auto;
}

/* 区切り線 */
.human-resource-block {
  position: relative;
  padding-top: 40px;
  margin-top: 40px;
}

.human-resource-block:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: 1px;
  background-color: #e0e0e0;
}

/* セクションタイトル */
.section-title {
  font-size: 1.6rem;
  font-weight: normal;
  color: #333;
  text-align: center;
  display: block;
  width: 700px;
  height: 54px;
  line-height: 54px;
  padding: 0;
  margin: 0 auto 30px;
  background-color: #C9E9DC;
  border-radius: 0; /* 丸みを取り除く */
}

/* 説明文 */
.grade-description,
.hr-description p {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 40px;
}

/* 等級制度の画像エリア */
.grade-image {
  margin-top: 30px;
  text-align: center;
}

.grade-image img {
  max-width: 100%;
  height: auto;
}

/* =========================== */
/* 人財育成セクション */
/* =========================== */

/* 人財育成コンテンツ */
.hr-content {
  background-color: #fff;
  padding: 70px 40px 20px 20px;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
}

/* 人財育成の図 */
.hr-image {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.hr-image img.d-none.d-md-inline-block {
  width: 366px;
  height: auto; /* 高さは自動計算でアスペクト比を保持 */
  max-width: 100%;
  object-fit: contain; /* アスペクト比を保持 */
}

.hr-image img.d-inline-block.d-md-none {
  width: 330px;
  height: auto; /* 高さは自動計算でアスペクト比を保持 */
  max-width: 100%;
  object-fit: contain; /* アスペクト比を保持 */
}
/* 人財育成リスト */
.hr-list {
  display: flex;
  flex-direction: column;
}

/* 各項目 */
.hr-item {
  margin-bottom: 10px;
}

.hr-item-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #008E44;
  margin-bottom: 5px;
}

.hr-item-text {
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  margin: 0;
}

/* 補足説明 */
.hr-note {
  font-size: 14px;
  line-height: 1.2;
  color: #000;
  margin-top: 20px;
}

/* =========================== */
/* スマホ表示調整 */
/* =========================== */
@media (max-width: 767.98px) {
  .grade-system {
    padding: 40px 0;
  }
  
  .section-title {
    font-size: 1.3rem;
    width: 350px;
    height: 47px;
    line-height: 47px;
    margin-bottom: 20px;
  }
  
  .grade-description,
  .hr-description p {
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0 15px;
    margin-bottom: 30px;
  }
  
  .hr-content {
    padding: 20px;
    height: auto;
  }
  
  .hr-image {
    margin-bottom: 20px;
  }
  
  .hr-item-title {
    font-size: 1rem;
  }
  
  .hr-item-text {
    font-size: 0.9rem;
  }
  
  .hr-note {
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 0 10px;
  }
  
  .human-resource-block {
    padding-top: 30px;
    margin-top: 30px;
  }
  
  .human-resource-block:before {
    max-width: 80%;
  }
}
/* 等級制度の図のエリア */
.grade-image {
  margin: 30px auto 0;
  text-align: center;
  max-width: 730px; /* 図の最大幅を設定 */
}

.grade-image img {
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* 中央揃え */
  display: block; /* ブロック要素化して中央揃えを有効に */
}

/* PCとスマホでのサイズ調整 */
@media (min-width: 768px) {
  .grade-image img.d-none.d-md-block {
    width: 100%;
    max-width: 730px; /* PC版の最大幅 */
  }
}

@media (max-width: 767.98px) {
  .grade-image img.d-md-none {
    width: 100%;
    max-width: 350px; /* スマホ版の最大幅 */
  }
}