/**
 * 扶桑鋼管テーマ 補完CSS
 * 旧Next.jsはSwiper等のJSでレイアウトしていた箇所を、純PHP/独自JS向けに補う。
 * グローバルバンドル(ba4589)の後に読み込むため、必要箇所のみ上書きする。
 */

/* ===== 在庫表の横スクロール =====
   旧サイトでは表のはみ出しをJSでスワイプ可能にしていた。純PHP化でそのJSを外したため、
   表ラッパー(StockListPageN_tableWrapper__xxxx)に overflow-x:auto を付与し、
   コンテナ幅に収めて はみ出し分は横スクロール/スワイプで参照できるようにする。
   tableInner 側の min-width はバンドルCSSが保持しているのでそのまま効く。 */
[class*="tableWrapper"],
[class*="TableWrapper"],
.tableScrollArea,
#tableScrollArea {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ===== WP管理バー対応 =====
   ログイン中は html に margin-top:32px(モバイルは46px) が入り、通常フローの本文だけ
   下がるため、position:fixed のヘッダーとの間に隙間ができる。ヘッダーを管理バー分だけ
   下げて本文と整合させる（未ログインの公開サイトには影響しない）。 */
@media screen and (min-width: 783px) {
  body.admin-bar .Header_header__64TC1 { top: 32px; }
}
@media screen and (max-width: 782px) {
  body.admin-bar .Header_header__64TC1 { top: 46px; }
}

/* ===== ヒーロースライダー（フェード化） =====
   元はSwiperが transform で横スライド。独自JSのフェード方式に合わせて上書き。
   先頭スライドを relative にして高さを確保し、他は重ねてopacityで切替える。 */
.Slider_swiper__NKZBu .swiper-wrapper {
  display: block !important;
  transform: none !important;
}
.Slider_swiper__NKZBu .swiper-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.Slider_swiper__NKZBu .swiper-slide:first-child {
  position: relative;
}
.Slider_swiper__NKZBu .swiper-slide.fusoh-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* ページネーション（bulletは独自JSで生成） */
.Slider_swiper__NKZBu .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.Slider_swiper__NKZBu .swiper-pagination-bullet {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #ffffff;
  opacity: 1;
  cursor: pointer;
}
.Slider_swiper__NKZBu .swiper-pagination-bullet-active {
  background: #666666;
}

/* ===== SPメニュー（ハンバーガー開閉） =====
   ドロワー本体(.Header_spMenuWrapper__CP001)と開閉クラス(.Header_Active__2LvOv)は
   バンドルCSS(ba4589)の本番実装をそのまま使う（閉:translateX(100%)→開:translateX(0)）。
   ここではバンドルに無い2点だけ補完する。 */

/* 開いている間は背面をスクロールさせない */
body.fusoh-nav-open {
  overflow: hidden;
}

/* アコーディオン展開。バンドルは span.Active ~ childMenu に height:auto しか持たず
   （本番はReactがインラインstyleで max-height を制御していた）、
   基底の max-height:0 が勝って開かないため max-height を上書きする。 */
.Header_spMenuWrapper__CP001 .Header_headNav__sOLoA > ul > li > span.Header_Active__2LvOv ~ .Header_childMenu__YBPtX {
  max-height: 100vh;
}

/* ===== アンケートフォームのバリデーションエラー表示 ===== */
.fusoh-form-errors {
  max-width: 76rem;
  margin: 0 auto 2em;
  padding: 1em 1.5em;
  border: 1px solid #c0392b;
  background: #fdf0ef;
  color: #c0392b;
  font-size: 1.4rem;
}
.fusoh-form-errors p {
  font-weight: bold;
  margin: 0 0 0.5em;
}
.fusoh-form-errors ul {
  margin: 0;
  padding-left: 1.5em;
}
.fusoh-form-errors li {
  list-style: disc;
}

/* 確認画面の「入力画面へ戻る」ボタンは送信ボタンと区別する
   （抽出CSSの .buttonWrapper.jsx .buttonInner.jsx button.jsx より高い詳細度にする） */
.buttonWrapper.jsx-1888509738 .buttonInner.jsx-1888509738 button.back.jsx-1888509738 {
  background: #ffffff;
  color: #333333;
  border: 1px solid #999999;
}

/* 確認画面はボタン2つを横並び中央に */
.jsx-2929855479.submitButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ===== 会社概要「役員・執行役員」の整列 =====
   元データの全角スペース桁揃えをやめ、役職とお名前をflexで左右に配置。
   スマホ幅ではお名前が単位ごと次行に落ち、氏名の途中で折り返さない。 */
.officerLine {
  /* バンドルCSSの dd { display:block } より優先させる */
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 1em;
}
.officerLine .officerName {
  white-space: nowrap;
  margin-left: auto;
  text-align: right;
}

/* PC幅は本番（Next.js版）と同じく、氏名を固定列に揃えて左寄せにする。
   本番は元データの全角スペース桁揃え（最長の役職＝約13.5字幅）をそのまま描画しているため、
   右端寄せ（margin-left:auto）だと役職と氏名の間隔が本番より近く/遠く見える。 */
@media only screen and (min-width: 768px) {
  .officerLine {
    justify-content: flex-start;
  }
  .officerLine .officerTitle {
    min-width: 19.5em; /* 本番実測: 氏名は役職先頭から約20.5字目に揃う（gap 1emと合わせて同位置）。
                          最長役職(扶桑チューブパーツ（株）常務取締役=約19字)もこの中に収まる */
  }
  .officerLine .officerName {
    margin-left: 0;
    text-align: left;
  }
}

/* スマホ幅は本番（Next.js版）と同じ「役職1行目・氏名2行目（字下げ）」の縦積みにする。
   flexの右寄せだと役職が長い行で氏名との間が間延びし、本番と見え方が変わるため。 */
@media only screen and (max-width: 767px) {
  .officerLine {
    display: block !important;
  }
  .officerLine .officerName {
    display: block;
    margin-left: 0;
    text-align: left;
    padding-left: 4em; /* 本番の全角スペース字下げ相当 */
    white-space: normal;
  }
}