@charset "UTF-8";
/********** #aboutMessage **********/
@media screen and (max-width: 800px) {
  #aboutMessage {
    display: block; } }
@media screen and (max-width: 800px) {
  #aboutMessage .modTtl h2 {
    text-align: center; }
    #aboutMessage .modTtl h2::after {
      margin: 10px auto; } }
@media screen and (max-width: 800px) {
  #aboutMessage .modTtl p {
    text-align: center; } }
#aboutMessage .flexWrap {
  justify-content: space-between;
  flex-direction: row-reverse; }
  @media screen and (max-width: 800px) {
    #aboutMessage .flexWrap {
      display: block; } }
#aboutMessage .aboutMessageImg {
  width: 40%; }
  @media screen and (max-width: 1050px) {
    #aboutMessage .aboutMessageImg {
      width: 35%; } }
  @media screen and (max-width: 800px) {
    #aboutMessage .aboutMessageImg {
      width: 80%;
      margin: 0 auto 40px; } }
  #aboutMessage .aboutMessageImg img {
    width: 100%;
    max-width: 640px;
    height: auto; }
    @media screen and (max-width: 800px) {
      #aboutMessage .aboutMessageImg img {
        margin: 0 auto 20px;
        max-width: 480px; } }
#aboutMessage .aboutMessageTxt {
  width: 50%; }
  @media screen and (max-width: 1050px) {
    #aboutMessage .aboutMessageTxt {
      width: 60%; } }
  @media screen and (max-width: 800px) {
    #aboutMessage .aboutMessageTxt {
      width: 100%; } }
  #aboutMessage .aboutMessageTxt p {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 200%; }
    #aboutMessage .aboutMessageTxt p:nth-last-of-type(1) {
      margin-bottom: 40px; }
  #aboutMessage .aboutMessageTxt h3 {
    text-align: right;
    font-size: 1.4rem;
    font-family: "Noto Serif JP", serif; }
    #aboutMessage .aboutMessageTxt h3 span {
      margin-right: 10px;
      font-weight: normal;
      font-size: 1rem; }

/* ===== ABOUT：OFFICE / STEEL CENTER ===== */
#aboutOffice01 {
  padding-bottom: 0; }

#aboutOffice01,
#aboutOffice02 {
  background: #f2f3f3;
  position: relative;
  overflow: hidden; }
  #aboutOffice01 .contents,
  #aboutOffice02 .contents {
    position: relative;
    z-index: 1; }
  #aboutOffice01 .flexWrap,
  #aboutOffice02 .flexWrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 2.6vw, 40px);
    align-items: start; }
  #aboutOffice01 .officeBox,
  #aboutOffice02 .officeBox {
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    overflow: hidden; }
    #aboutOffice01 .officeBox img,
    #aboutOffice02 .officeBox img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover; }
    #aboutOffice01 .officeBox .officeBoxTxt,
    #aboutOffice02 .officeBox .officeBoxTxt {
      padding: clamp(14px, 2vw, 22px); }
  @media (max-width: 800px) {
    #aboutOffice01::before,
    #aboutOffice02::before {
      width: 100%; }
    #aboutOffice01::after,
    #aboutOffice02::after {
      width: 100%;
      height: clamp(200px, 40vw, 320px); }
    #aboutOffice01 .flexWrap,
    #aboutOffice02 .flexWrap {
      grid-template-columns: 1fr; }
    #aboutOffice01 .officeBox,
    #aboutOffice02 .officeBox {
      margin-top: 0 !important; } }

/* ===== 会社概要／沿革 ===== */
#aboutOverview .modBloc,
#aboutHistory .modBloc {
  max-width: 800px; }
  #aboutOverview .modBloc table,
  #aboutHistory .modBloc table {
    width: 100%; }
    #aboutOverview .modBloc table th,
    #aboutHistory .modBloc table th {
      width: 20%;
      padding: 20px;
      border-bottom: 1px solid #133b7a; }
      @media screen and (max-width: 800px) {
        #aboutOverview .modBloc table th,
        #aboutHistory .modBloc table th {
          width: 25%;
          padding: 20px 10px; } }
      @media screen and (max-width: 640px) {
        #aboutOverview .modBloc table th,
        #aboutHistory .modBloc table th {
          width: 100%;
          display: block;
          padding: 10px; } }
    #aboutOverview .modBloc table th:nth-of-type(1),
    #aboutHistory .modBloc table th:nth-of-type(1) {
      border-top: 1px solid #133b7a; }
    #aboutOverview .modBloc table td,
    #aboutHistory .modBloc table td {
      width: 70%;
      padding: 20px;
      border-bottom: 1px solid #ccc; }
      @media screen and (max-width: 800px) {
        #aboutOverview .modBloc table td,
        #aboutHistory .modBloc table td {
          width: 75%;
          padding: 20px 10px; } }
      @media screen and (max-width: 640px) {
        #aboutOverview .modBloc table td,
        #aboutHistory .modBloc table td {
          width: 100%;
          display: block; } }
    #aboutOverview .modBloc table td:nth-of-type(1),
    #aboutHistory .modBloc table td:nth-of-type(1) {
      border-top: 1px solid #ccc; }
    #aboutOverview .modBloc table td ul li,
    #aboutHistory .modBloc table td ul li {
      margin-left: 20px;
      list-style: disc outside; }

/* ===== グループ会社革 ===== */
#aboutGroup::before {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 0;
  left: 40%;
  width: 60%;
  background: #EDF5F9; }
@media screen and (max-width: 800px) {
  #aboutGroup .flexWrap {
    display: block; } }
#aboutGroup .flexWrap img {
  width: 60%;
  height: 480px;
  object-fit: cover; }
  @media screen and (max-width: 1200px) {
    #aboutGroup .flexWrap img {
      width: 55%; } }
  @media screen and (max-width: 1050px) {
    #aboutGroup .flexWrap img {
      width: 50%; } }
  @media screen and (max-width: 800px) {
    #aboutGroup .flexWrap img {
      width: 100%;
      height: auto; } }
#aboutGroup .flexWrap .groupBox {
  width: 40%;
  background: #fff;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center; }
  @media screen and (max-width: 1200px) {
    #aboutGroup .flexWrap .groupBox {
      width: 45%; } }
  @media screen and (max-width: 1050px) {
    #aboutGroup .flexWrap .groupBox {
      width: 50%; } }
  @media screen and (max-width: 800px) {
    #aboutGroup .flexWrap .groupBox {
      width: 100%;
      padding: 40px; } }
  #aboutGroup .flexWrap .groupBox .subTtl h2 {
    color: #164088; }
  #aboutGroup .flexWrap .groupBox p {
    margin-bottom: 40px; }