@charset "UTF-8";
/* ========== 動画（メインビジュアル） ========== */
.headMovie {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 50vw, 720px); }
  @media screen and (max-width: 640px) {
    .headMovie {
      height: 100vh; } }

#moviePC {
  display: block; }
  @media screen and (max-width: 640px) {
    #moviePC {
      display: none; } }

#movieSP {
  display: none; }
  @media screen and (max-width: 640px) {
    #movieSP {
      display: block; } }

/* 動画を領域いっぱいに敷く */
.headMovie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

/* 文字を乗せるレイヤー */
.headMovie .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* 右寄せ */
  text-align: right;
  z-index: 2;
  justify-content: flex-end;
  padding: clamp(18px, 4vw, 72px);
  padding-bottom: clamp(40px, 6vw, 120px);
  background: url("../img/index/overlay.png") repeat; }
  @media screen and (max-width: 800px) {
    .headMovie .overlay {
      align-items: center;
      text-align: center;
      padding: 24px 18px 60px; } }

/* 文字が読みにくい時の薄い暗幕（必要なら） */
.headMovie .overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 35%, rgba(0, 0, 0, 0) 70%); }
  @media screen and (max-width: 800px) {
    .headMovie .overlay::before {
      background: rgba(0, 0, 0, 0.35); } }

/* コピーの見た目 */
.headMovie .overlay h2 {
  margin: 0;
  color: #fff;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.05em;
  font-size: clamp(34px, 6vw, 86px);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  font-family: "Noto Serif JP", serif; }

.headMovie .overlay h3 {
  margin: 14px 0 0;
  color: #fff;
  line-height: 1.3;
  letter-spacing: 0.05em;
  font-size: clamp(18px, 2.7vw, 30px);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  font-family: "Noto Serif JP", serif; }

/* ========== 企業理念 ========== */
.bgWrap {
  background-color: #fff;
  background-image: url("../img/index/bg_top_message.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  padding-top: clamp(60px, 7vw, 150px);
  padding-bottom: 0; }
  @media screen and (max-width: 800px) {
    .bgWrap {
      padding-top: 34px;
      padding-bottom: 0; } }

/* 中身の横幅（サイトの基本幅に合わせて調整） */
#topMessage .contents {
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px); }

#topMessage .modBloc {
  text-align: center; }

#topMessage .modBloc h2 {
  margin: 0;
  color: #133b7a;
  line-height: 2.1;
  letter-spacing: 0.05em;
  font-size: clamp(18px, 2.2vw, 28px);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.65);
  font-family: "Noto Serif JP", serif; }
  @media screen and (max-width: 800px) {
    #topMessage .modBloc h2 {
      line-height: 1.9;
      letter-spacing: 0.06em; } }

@media screen and (max-width: 800px) {
  #topMessage .modBloc h2 br {
    display: none; } }

/* ========== 主力商品 ========== */
#topProducts:before {
  content: '';
  display: block;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 100%;
  height: 70%;
  background: #F1F3F2; }

#topProducts ul {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  z-index: 10; }
  @media screen and (max-width: 800px) {
    #topProducts ul {
      display: block; } }

#topProducts ul li {
  width: 33.33333%;
  max-width: 500px;
  padding: 0 40px 40px;
  background: linear-gradient(to bottom, rgba(241, 243, 242, 0) 0%, rgba(241, 243, 242, 0) 30%, #164088 30%, #164088 100%);
  z-index: 10; }
  @media screen and (max-width: 800px) {
    #topProducts ul li {
      width: 100%;
      max-width: none;
      padding: 0;
      background: #164088; } }

#topProducts ul li:nth-of-type(2) {
  background: linear-gradient(to bottom, rgba(241, 243, 242, 0) 0%, rgba(241, 243, 242, 0) 30%, #325794 30%, #325794 100%); }
  @media screen and (max-width: 800px) {
    #topProducts ul li:nth-of-type(2) {
      background: #325794; } }

#topProducts ul li a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%; }
  @media screen and (max-width: 800px) {
    #topProducts ul li a {
      display: flex;
      justify-content: center;
      align-items: center; } }

#topProducts ul li a:hover img {
  -khtml-opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
  opacity: 1; }

#topProducts ul li img {
  margin: 0 auto 40px; }
  @media screen and (max-width: 800px) {
    #topProducts ul li img {
      width: 40%;
      margin: 0;
      object-fit: cover; } }

@media screen and (max-width: 800px) {
  #topProducts ul li .topProTxt {
    padding: 20px 30px; } }

#topProducts ul li .topProTxt h3 {
  width: 100%;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-size: clamp(1rem, 2.8vw, 1.6rem);
  color: #fff;
  letter-spacing: 0.05em; }
  @media screen and (max-width: 800px) {
    #topProducts ul li .topProTxt h3 {
      margin-bottom: 10px;
      padding-bottom: 10px; } }

#topProducts ul li .topProTxt p {
  color: #fff;
  line-height: 160%; }
  @media screen and (max-width: 1050px) {
    #topProducts ul li .topProTxt p {
      font-size: 0.85rem; } }

#topProducts .modBtn {
  z-index: 10; }

/* ========== 斎藤鋼材について ========== */
#topAbout:before {
  content: '';
  display: block;
  position: absolute;
  top: 20%;
  left: 0;
  width: 70%;
  height: 75%;
  background: #EDF5F9; }

#topAbout .topAboutWrap {
  margin-bottom: 100px; }

#topAbout .flexWrap {
  max-width: 1400px;
  margin: 0 auto 20px;
  z-index: 10;
  align-items: center;
  position: relative; }
  @media screen and (max-width: 800px) {
    #topAbout .flexWrap {
      display: block; } }

@media screen and (max-width: 800px) {
  #topAbout .topAboutWrap:nth-of-type(1) .flexWrap::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -80px;
    width: 60%;
    height: 1px;
    background: #133b7a;
    transform: translateX(-50%); } }

#topAbout .topAboutWrap:nth-of-type(2) .flexWrap {
  flex-direction: row-reverse; }

#topAbout .topAboutWrap:nth-of-type(2) {
  margin-bottom: 0; }

#topAbout .flexWrap img {
  width: 55%;
  height: auto; }
  @media screen and (max-width: 1200px) {
    #topAbout .flexWrap img {
      width: 50%;
      border-radius: 12px !important; } }
  @media screen and (max-width: 1050px) {
    #topAbout .flexWrap img {
      width: 45%; } }
  @media screen and (max-width: 800px) {
    #topAbout .flexWrap img {
      width: 80%;
      margin: 0 auto 20px; } }
  @media screen and (max-width: 640px) {
    #topAbout .flexWrap img {
      width: 90%; } }

#topAbout .flexWrap img {
  border-radius: 12px 12px 12px 12px; }

#topAbout .topAboutTxt {
  width: 45%;
  padding: 0 100px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center; }
  @media screen and (max-width: 1200px) {
    #topAbout .topAboutTxt {
      padding: 0 60px; } }
  @media screen and (max-width: 1050px) {
    #topAbout .topAboutTxt {
      width: 50%;
      padding: 0 40px; } }
  @media screen and (max-width: 800px) {
    #topAbout .topAboutTxt {
      width: 100%;
      margin: 0 auto; } }

#topAbout .topAboutTxt p.mB40 {
  line-height: 160%; }
  @media screen and (max-width: 1050px) {
    #topAbout .topAboutTxt p.mB40 {
      font-size: 0.85rem; } }

#topAbout .topCardTtl {
  margin-bottom: 40px;
  text-align: center; }
  @media screen and (max-width: 1200px) {
    #topAbout .topCardTtl {
      margin-bottom: 20px; } }

#topAbout .topCardTtl h3 {
  margin-bottom: 0;
  font-size: clamp(1rem, 2.8vw, 1.6rem);
  line-height: 140%;
  letter-spacing: 0.05em; }

#topAbout .topCardTtl p {
  font-size: 1rem;
  font-weight: 600;
  color: #164088;
  letter-spacing: 0.05em; }
  @media screen and (max-width: 800px) {
    #topAbout .topCardTtl p {
      font-size: 0.85rem; } }

/* ========== 採用情報 ========== */
/* .contents が幅制限している場合は解除（全幅で見せる） */
#topRecruit .contents {
  max-width: none;
  padding: 0; }

#topRecruit .contents a {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  min-height: clamp(400px, 27vw, 420px);
  background-image: url("../img/index/bg_rectxt.png"), url("../img/index/bg_recruit_pc.png");
  background-repeat: no-repeat, no-repeat;
  /* 青レイヤーは右寄せ、写真は中央 */
  background-position: right center, center;
  /* 青レイヤーは高さ100%で比率維持、写真は全面 */
  background-size: auto 100%, cover; }
  @media screen and (max-width: 800px) {
    #topRecruit .contents a {
      min-height: 400px;
      background-position: center, center;
      background-image: url("../img/index/bg_recruit_sp.png"); } }

/* 右側テキスト領域（位置調整の本体） */
#topRecruit .recTxt {
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: clamp(300px, 34vw, 520px);
  margin-left: auto;
  margin-right: 40px;
  text-align: center;
  color: #fff; }
  @media screen and (max-width: 800px) {
    #topRecruit .recTxt {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      align-items: center; } }

/* タイトルブロック */
#topRecruit .topRecruitTtl {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end; }
  @media screen and (max-width: 800px) {
    #topRecruit .topRecruitTtl {
      align-items: center; } }

/* 採用情報 */
#topRecruit .topRecruitTtl h2 {
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 1.2;
  font-size: clamp(2rem, 2.8vw, 2.4rem); }
  @media screen and (max-width: 800px) {
    #topRecruit .topRecruitTtl h2 {
      margin-bottom: 10px; } }

/* RECRUITMENT：線＋文字を1セットとして表現 */
#topRecruit .topRecruitTtl p {
  margin: 0;
  /* 線の長さ（元デザイン寄せ） */
  width: clamp(220px, 18vw, 320px);
  /* セット全体は中央だが、中身は左起点 */
  text-align: right;
  margin-top: 20px;
  padding-top: 20px;
  position: relative;
  letter-spacing: 0.05em;
  font-size: clamp(0.85rem, 2.8vw, 1.6rem);
  font-weight: 700; }
  @media screen and (max-width: 800px) {
    #topRecruit .topRecruitTtl p {
      margin-top: 0;
      padding-top: 0;
      text-align: center; } }

/* 右寄せの短い線（ヘッドと接する位置を基準にする） */
#topRecruit .topRecruitTtl p::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  height: 1px;
  background: rgba(255, 255, 255, 0.85); }
  @media screen and (max-width: 800px) {
    #topRecruit .topRecruitTtl p::before {
      display: none; } }

/* ヘッド：上側だけ（水平線の左端＝接点に合わせる） */
#topRecruit .topRecruitTtl p::after {
  content: "";
  position: absolute;
  top: 0;
  right: 190px;
  width: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: right center;
  transform: rotate(135deg); }
  @media screen and (max-width: 800px) {
    #topRecruit .topRecruitTtl p::after {
      display: none; } }

/* キャッチ */
#topRecruit .recTxt h3 {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  letter-spacing: 0.05em;
  line-height: 160%;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem); }

/* hover */
#topRecruit .contents a:hover {
  filter: brightness(1.03); }

/* ========== 新着情報 ========== */
#topNews {
  padding: 40px 0; }

@media screen and (max-width: 800px) {
  #topNews .modTtl h2 {
    text-align: center; } }

@media screen and (max-width: 800px) {
  #topNews .modTtl p {
    text-align: center; } }

@media screen and (max-width: 800px) {
  #topNews .flexWrap {
    display: block; } }

#topNews .newsTtl {
  width: 25%; }
  @media screen and (max-width: 1250px) {
    #topNews .newsTtl {
      width: 22%; } }
  @media screen and (max-width: 1050px) {
    #topNews .newsTtl {
      width: 30%; } }
  @media screen and (max-width: 800px) {
    #topNews .newsTtl {
      width: 100%; } }

#topNews .modNews {
  width: 70%; }
  @media screen and (max-width: 1250px) {
    #topNews .modNews {
      width: 78%; } }
  @media screen and (max-width: 1050px) {
    #topNews .modNews {
      width: 70%; } }
  @media screen and (max-width: 800px) {
    #topNews .modNews {
      width: 100%; } }

.dispTopNewsPC {
  display: block; }
  @media screen and (max-width: 800px) {
    .dispTopNewsPC {
      display: none; } }

.dispTopNewsTB {
  display: none; }
  @media screen and (max-width: 800px) {
    .dispTopNewsTB {
      display: block; } }

/* ========== マップ ========== */
#topMap {
  padding: 100px 0 40px; }

#topMap:before {
  content: '';
  display: block;
  position: absolute;
  top: 10%;
  left: 40%;
  width: 70%;
  height: 100%;
  background: #F1F3F2; }

.mapWrap {
  width: 100%;
  padding: 5px 5px 0;
  border: 1px solid #ccc; }