@charset "utf-8";
/* CSS Document - CAREER PAGE */

/*================================
下層コンテンツ幅
================================*/
main .container {
  max-width: 1024px;
}

/*================================
MV
================================*/
.car_mv {
  margin-top: 100px;
  position: relative;
  height: 650px;
  overflow: hidden;
  z-index: 1;
}
.car_mv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.car_mv_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 白キャッチボックス：コンテナ左端に揃える */
.car_mv_catch {
  position: absolute;
  top: 50%;
  left: max(20px, calc(50% - 600px));
  transform: translateY(-50%);
  background-color: var(--white);
  padding: 50px 60px;
  z-index: 2;
}
.car_mv_catch p {
  color: var(--navy);
  font-size: 46px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -1px;
  margin-bottom: 0;
}

/* ページ中央を起点に右寄せタイトルエリア */
.car_mv_ttl_area {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 3;
  color: var(--white);
}
.car_mv_ttl {
  font-size: 58px;
  font-weight: 500;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  margin-bottom: 15px;
}
.car_mv_ttl em {
  font-style: italic;
}
.car_mv_sub {
  font-size: 25px;
  letter-spacing: 4px;
}

/*================================
共通：白色バリアント（青背景セクション内）
================================*/
.sect_en_ttl.white {
  color: var(--white);
}
.sect_line.white {
  background-color: var(--white);
}
.sect_ja_ttl.white {
  color: var(--white);
}

/*================================
ABOUT TRAINING（青背景）
================================*/
.car_training {
  background-color: var(--blue);
  color: var(--white);
  padding: 120px 0;
}

.car_training_lead {
  padding: 60px 0 80px;
}
.car_training_lead p {
  font-size: 16px;
  line-height: 2.2;
  color: var(--white);
  margin-bottom: 20px;
}
.car_training_lead p:last-child {
  margin-bottom: 0;
}

/* 研修テーブル（画像）
--------------------------------*/
.car_table_wrap {
  overflow-x: auto;
  margin-bottom: 30px;
  -webkit-overflow-scrolling: touch;
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 30px;
}
.car_table_wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* テーブル注釈 */
.car_table_note {
  padding: 30px 0 0;
  text-align: center;
}
.car_table_note p {
  font-size: 15px;
  color: var(--white);
  line-height: 1.8;
  margin-bottom: 4px;
}
.car_table_note p:last-child {
  margin-bottom: 0;
}

/*================================
CAREER STEPS（白背景）
================================*/
.car_steps_section {
  background-color: var(--white);
  padding: 120px 0;
}

.car_steps_lead {
  padding: 60px 0 80px;
}
.car_steps_lead p {
  font-size: 16px;
  line-height: 2.2;
  color: var(--text);
  margin-bottom: 0;
}

/* キャリアステップチャート（画像）
--------------------------------*/
.car_chart {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}
.car_chart img {
  width: 100%;
  height: auto;
  display: block;
}

/* キャリアステップ注釈 */
.car_steps_note {
  padding: 30px 0 0;
}
.car_steps_note p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 0;
}

/*================================
MESSAGE（青背景）
================================*/
.car_message {
  background-color: var(--blue);
  color: var(--white);
  padding: 200px 0;
}

.car_message_lead {
  text-align: center;
  padding: 100px 0 80px;
}
.car_message_lead p {
  font-size: 22px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 3px;
  line-height: 1.9;
  margin-bottom: 0;
}

.car_message_body {
  padding: 0 0 40px;
}
.car_message_body p {
  font-size: 16px;
  line-height: 2;
  color: var(--white);
  margin-bottom: 20px;
}
.car_message_body p:last-child {
  margin-bottom: 0;
}

.car_message_sign {
  text-align: right;
}
.car_message_sign p {
  font-size: 16px;
  color: var(--white);
  letter-spacing: 2px;
  margin-bottom: 0;
}

/*================================
RECRUITMENT INFORMATION（白背景）
================================*/
.car_recruit {
  background-color: var(--white);
  padding: 220px 0;
}

/* 採用情報テーブル
--------------------------------*/
.car_recruit_table_wrap {
  margin-top: 180px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.car_recruit_table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--white);
  border-top: 2px solid var(--text);
}
.car_recruit_table th {
  width: 180px;
  padding: 8px 20px;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid #ccc;
  vertical-align: top;
  white-space: nowrap;
}
.car_recruit_table td {
  padding: 8px 90px;
  font-size: 22px;
  line-height: 1.3;
  color: var(--text);
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

/* 募集学科の定義リスト */
.car_recruit_dl {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0;
}
.car_recruit_dl dt {
  font-weight: inherit;
  white-space: nowrap;
}
.car_recruit_dl dd {
  margin: 0;
}

/*================================
ブルーバンドセパレーター
================================*/
.car_blue_band {
  background-color: var(--blue);
  height: 20px;
}

/*================================
RESPONSIVE (max-width: 767px)
================================*/
@media (max-width: 767px) {
  /* ABOUT TRAINING 注釈 */
  .car_table_note {
    text-align: left;
  }
  .car_table_note p {
    font-size: 14px;
  }

  /* MV */
  .car_mv {
    margin-top: 56px;
    height: 350px;
  }
  .car_mv_catch {
    padding: 15px 20px;
    left: 3%;
  }
  .car_mv_catch p {
    font-size: 22px;
  }
  .car_mv_ttl_area {
    left: auto;
    right: 5%;
    bottom: 8%;
    text-align: right;
  }
  .car_mv_ttl {
    font-size: 28px;
    margin-bottom: 8px;
  }
  .car_mv_sub {
    font-size: 16px;
    letter-spacing: 2px;
  }

  /* ABOUT TRAINING */
  .car_training {
    padding: 80px 0;
  }
  .car_training_lead {
    padding: 40px 0 50px;
  }

  /* 研修テーブル画像 */
  .car_table_wrap img {
    min-width: 700px;
  }

  /* CAREER STEPS */
  .car_steps_section {
    padding: 80px 0 80px;
  }
  .car_steps_lead {
    padding: 40px 0 50px;
  }

  /* チャート画像（モバイル横スクロール） */
  .car_chart img {
    min-width: 700px;
  }

  /* MESSAGE */
  .car_message {
    padding: 80px 0;
  }
  .car_message_lead {
    padding: 40px 0;
  }
  .car_message_lead p {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .car_message_body {
    padding: 0 0 40px;
  }
  .car_message_body p {
    font-size: 15px;
  }
  .car_message_sign p {
    font-size: 14px;
  }

  /* RECRUITMENT INFORMATION */
  .car_recruit {
    padding: 80px 0;
  }
  .car_recruit_table_wrap {
    margin-top: 50px;
  }
  .car_recruit_table th {
    width: 120px;
    padding: 14px 12px;
    font-size: 14px;
  }
  .car_recruit_table td {
    padding: 14px 12px;
    font-size: 14px;
  }
}