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

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

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

/* 白キャッチボックス：コンテナ左端に揃える */
.env_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;
}
.env_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;
}

/* ページ中央を起点に右寄せタイトルエリア */
.env_mv_ttl_area {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 3;
  color: var(--white);
}
.env_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;
}
.env_mv_ttl em {
  font-style: italic;
}
.env_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);
}

/* 青背景内の em（2行タイトル向け） */
.sect_en_ttl em {
  font-style: italic;
}

/*================================
RENEWAL EQUIPMENT（青背景）
================================*/
.env_renewal {
  background-color: var(--blue);
  color: var(--white);
  padding: 150px 0 120px;
}

/* メイン大画像 */
.env_renewal_main {
  margin: 130px auto 60px;
  max-width: 100%;
}
.env_renewal_main img {
  width: 100%;
  height: auto;
  display: block;
}

/* 下段：サムネイル2枚＋テキスト */
.env_renewal_lower {
  margin-bottom: 80px;
}
.env_renewal_lower .row {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 3rem;
}
.env_renewal_thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.env_renewal_thumbs img {
  width: 100%;
  height: auto;
  display: block;
}
.env_renewal_text {
  padding-left: 0px;
}
.env_renewal_text p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--white);
  margin-bottom: 0;
}

/* 健康経営ボックス */
.env_kenko_box {
  background-color: #8caec1;
  padding: 55px 60px;
  text-align: center;
  margin-bottom: 0;
}
.env_kenko_box p {
  font-size: 24px;
  line-height: 2.2;
  color: var(--white);
  margin-bottom: 0;
}

/* 健康経営：本文＋ロゴ 2カラム */
.env_kenko_body {
  background-color: var(--white);
  padding: 40px 50px;
}
.env_kenko_body p {
  font-size: 16px;
  line-height: 2.2;
  color: var(--text);
  margin-bottom: 0;
}
.env_kenko_logo {
  text-align: center;
}
.env_kenko_logo img {
  max-width: 420px;
  width: 100%;
  height: auto;
}

/*================================
PROMOTING DIVERSITY（白背景）
================================*/
.env_diversity {
  background-color: var(--white);
  padding: 120px 0 200px;
}

/* メイン画像 */
.env_diversity_main {
  margin: 160px auto 0;
}
.env_diversity_main img {
  width: 100%;
  height: auto;
  display: block;
}

/* リード文 */
.env_diversity_lead {
  margin: 40px auto 110px;
}
.env_diversity_lead p {
  font-size: 17px;
  line-height: 2.2;
  color: var(--text);
  margin-bottom: 0;
}

/* 4カード（2×2）*/
.env_div_cards {
  max-width: 810px;
  margin: 0 auto 80px;
}
.env_div_cards .row {
  --bs-gutter-x: 80px;
  --bs-gutter-y: 50px;
}
.env_div_card {
  padding: 0;
}
.env_div_card h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--blue);
  letter-spacing: 1px;
  border-top: 1px solid var(--blue);
  border-bottom: 1px solid var(--blue);
  padding: 10px 0 10px 14px;
  margin-bottom: 16px;
  min-height: calc(1.5em * 2 + 20px);
  display: flex;
  align-items: center;
}
.env_div_card p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 0;
}

/* 青帯（セクション区切り） */
.env_blue_band {
  background-color: var(--blue);
  height: 20px;
}

/* ワークライフバランス青ブロック */
.env_work_balance {
  background-color: var(--blue);
  padding: 60px 60px 70px;
  text-align: center;
  margin: 0 auto;
}
.env_work_balance p {
  font-size: 23px;
  line-height: 2.2;
  color: var(--white);
  margin: 0 auto 50px;
  max-width: 760px;
  letter-spacing: 2.5px;
}

/* 有給休暇取得率（白ボックス内の画像） */
.env_paidleave {
  background-color: var(--white);
  padding: 30px 60px;
  max-width: 620px;
  margin: 0 auto;
}
.env_paidleave img {
  width: 100%;
  height: auto;
  display: block;
}

/*================================
Coexistence with the Local Community（青背景）
================================*/
.env_local {
  background-color: var(--blue);
  color: var(--white);
  padding: 160px 0 140px;
}

/* リード文 */
.env_local_lead {
  margin: 120px 0 80px;
  text-align: left;
}
.env_local_lead p {
  font-size: 15px;
  line-height: 2.2;
  color: var(--white);
  margin-bottom: 0;
}

/* 3カラムカード */
.env_local_cards {
  margin-top: 20px;
}
.env_local_cards .row {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 3rem;
}
.env_local_card_img {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.env_local_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.env_local_card_text {
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  text-align: left;
  margin-top: 24px;
  margin-bottom: 0;
}

/*================================
As an Urban Steelworks（白背景）
================================*/
.env_urban {
  background-color: var(--white);
  padding: 150px 0 260px;
  border-top: 4px solid var(--blue);
}

/* リード文 */
.env_urban_lead {
  margin: 120px 0 80px;
  text-align: left;
}
.env_urban_lead p {
  font-size: 16px;
  line-height: 2.2;
  color: var(--text);
  margin-bottom: 0;
}

/* 3画像ギャラリー */
.env_urban_gallery {
  margin-top: 20px;
}
.env_urban_gallery .row {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 3rem;
}
.env_urban_img {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.env_urban_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*================================
RESPONSIVE (max-width: 767px)
================================*/
@media (max-width: 767px) {
  /* MV */
  .env_mv {
    margin-top: 56px;
    height: 350px;
  }
  .env_mv_catch {
    padding: 15px 20px;
    left: 3%;
  }
  .env_mv_catch p {
    font-size: 22px;
  }
  .env_mv_ttl_area {
    left: auto;
    right: 5%;
    bottom: 8%;
    text-align: right;
  }
  .env_mv_ttl {
    font-size: 28px;
    margin-bottom: 8px;
  }
  .env_mv_sub {
    font-size: 16px;
    letter-spacing: 2px;
  }

  /* RENEWAL EQUIPMENT */
  .env_renewal {
    padding: 60px 0 60px;
  }
  .env_renewal_main {
    margin: 40px auto 30px;
  }
  .env_renewal_lower {
    margin-bottom: 40px;
  }
  .env_renewal_lower .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
  }
  .env_renewal_text {
    padding-left: 0;
    margin-top: 20px;
  }
  .env_kenko_box {
    padding: 30px 20px;
  }
  .env_kenko_body {
    padding: 30px 20px;
  }
  .env_kenko_logo {
    margin-top: 20px;
  }

  /* PROMOTING DIVERSITY */
  .env_diversity {
    padding: 60px 0;
  }
  .env_diversity_main {
    margin: 40px auto 0;
  }
  .env_diversity_lead {
    margin: 30px 0 40px;
  }
  .env_div_cards {
    margin-bottom: 40px;
  }
  .env_div_cards .row {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 30px;
  }
  .env_div_card h3 {
    font-size: 17px;
  }
  .env_work_balance {
    padding: 40px 20px 50px;
  }
  .env_work_balance p {
    margin-bottom: 30px;
    font-size: 14px;
  }
  .env_paidleave {
    padding: 20px;
  }

  /* Coexistence with the Local Community */
  .env_local {
    padding: 60px 0;
  }
  .env_local_lead {
    margin: 40px auto 30px;
  }
  .env_local_card {
    width: 90%;
    margin: 0 auto;
  }

  /* As an Urban Steelworks */
  .env_urban {
    padding: 60px 0 60px;
  }
  .env_urban_lead {
    margin: 40px 0;
  }
  .env_urban_img {
    width: 90%;
    margin: 0 auto;
  }
}