@charset "UTF-8";
/* ===================================================================
CSS information

file name  : environment_workstyle.css
author     : Abilive
style info : JFEエンジニアリングの働き方
=================================================================== */
/* ===================================================================
CSS information

file name  : _settings.scss
author     : Abilive
style info : 汎用設定
=================================================================== */
@property --1vw {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
:root {
  --1vw: 1vw;
  --vw-to-px: calc(tan(atan2(var(--1vw), 1px)));
}

@media only screen and (min-width: 1200px) {
  #environment_workstyle .p-page-title.u-style-text-vertical .p-page-title__text .p-page-title__lead-wrap,
  #environment_workstyle .p-page-title.u-style-text-vertical .p-page-title__text .p-page-title__lead {
    width: 63.6rem;
  }
}
@media print {
  #environment_workstyle .p-page-title.u-style-text-vertical .p-page-title__text .p-page-title__lead-wrap,
  #environment_workstyle .p-page-title.u-style-text-vertical .p-page-title__text .p-page-title__lead {
    width: 63.6rem;
  }
}

.p-page-title {
  padding-bottom: 6.4rem;
}
@media only screen and (max-width: 767px) {
  .p-page-title {
    padding-bottom: 4rem;
  }
}

.c-link-group {
  margin-top: 0;
}

.p-video {
  margin-top: 8.7rem;
}
@media only screen and (max-width: 767px) {
  .p-video {
    margin-top: 5.3rem;
  }
}
.p-video__inner {
  aspect-ratio: 1000/562;
  width: var(--content-width);
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-video__inner {
    max-width: 1000px;
  }
}
.p-video__inner iframe {
  width: 100%;
  height: 100%;
}

.p-style-wrapper > *:first-child {
  margin-top: 10.6rem;
}
@media only screen and (max-width: 767px) {
  .p-style-wrapper > *:first-child {
    margin-top: 6.6rem;
  }
}
.p-style-wrapper > *:last-child {
  padding-bottom: 13.3rem;
}
@media only screen and (max-width: 767px) {
  .p-style-wrapper > *:last-child {
    padding-bottom: 8rem;
  }
}
.p-style-wrapper > *:nth-child(odd) {
  background: var(--color-bg9);
}

.p-style {
  padding-block: 8rem 11.1rem;
}
@media only screen and (max-width: 767px) {
  .p-style {
    padding-block: 4rem 5.3rem;
  }
}
.p-style__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-column-gap: 4%;
  -moz-column-gap: 4%;
  column-gap: 4%;
  width: var(--content-width);
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-style__inner {
    max-width: 1280px;
  }
}
@media only screen and (min-width: 768px) {
  .p-style__inner {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-style__inner {
    -webkit-column-gap: 2%;
    -moz-column-gap: 2%;
    column-gap: 2%;
  }
}
@media only screen and (max-width: 767px) {
  .p-style__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 4rem;
  }
}
.p-style__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3rem;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .p-style__head {
    width: 23%;
    position: sticky;
    top: 8rem;
    padding-bottom: 8rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-style__head {
    width: 28%;
  }
}
.p-style__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 6%;
  -moz-column-gap: 6%;
  column-gap: 6%;
  letter-spacing: 0em;
  line-height: 1.4;
}
@media only screen and (min-width: 768px) {
  .p-style__heading {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-style__heading {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-style__heading {
    -webkit-column-gap: 5%;
    -moz-column-gap: 5%;
    column-gap: 5%;
  }
}
.p-style__heading-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 35%;
  aspect-ratio: 1;
  border-radius: 100%;
  background: var(--color-bg10);
}
@media only screen and (max-width: 767px) {
  .p-style__heading-icon {
    width: 26%;
  }
}
.p-style__heading-icon img {
  display: block;
  width: 45%;
  margin-inline: auto;
}
.p-style__heading-icon.u-icon-2 img {
  width: 42%;
}
.p-style__heading-icon.u-icon-3 img {
  width: 48%;
}
.p-style__heading-icon.u-icon-4 img {
  padding-left: 6%;
  width: 53%;
}
.p-style__heading-text {
  display: block;
  width: 51%;
}
@media only screen and (min-width: 768px) {
  .p-style__description {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-style__description {
    font-size: 1.1rem;
  }
}
.p-style__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 4rem;
}
@media only screen and (min-width: 768px) {
  .p-style__main {
    width: 68%;
  }
}
@media only screen and (min-width: 1200px) {
  .p-style__main {
    margin-top: 2rem;
  }
}
@media print {
  .p-style__main {
    margin-top: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-style__main {
    row-gap: 2.6rem;
  }
}
.p-style__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3rem;
}
@media only screen and (min-width: 1200px) {
  .p-style__item {
    width: 95%;
  }
}
@media print {
  .p-style__item {
    width: 95%;
  }
}
@media only screen and (max-width: 767px) {
  .p-style__item {
    row-gap: 0.9rem;
  }
}
.p-style__item-heading {
  letter-spacing: 0em;
  line-height: 1.6;
}
@media only screen and (min-width: 1200px) {
  .p-style__item-heading {
    font-size: 2rem;
  }
}
@media print {
  .p-style__item-heading {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-style__item-heading {
    font-size: 1.7rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-style__item-heading {
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-style__item-description {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-style__item-description {
    font-size: 1.1rem;
  }
}
.p-style__item-description + .p-style__item-note {
  margin-top: -0.8rem;
}
@media only screen and (max-width: 767px) {
  .p-style__item-description + .p-style__item-note {
    margin-top: -0.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-style__item-note {
    font-size: 0.8rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-style__item-note {
    font-size: 0.9rem;
  }
}
.p-style__item-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.6rem 1%;
}
@media only screen and (min-width: 768px) {
  .p-style__item-image {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
@media only screen and (max-width: 767px) {
  .p-style__item-image {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1.7rem;
  }
}
.p-style__item-image img {
  display: block;
  aspect-ratio: 409/229;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
@media only screen and (min-width: 768px) {
  .p-style__item-image img {
    width: 47%;
  }
}