/* ==========================================================================
   Responsive Styles
   SP対応スタイル（@media max-width）
   基準幅: PC = 1440px / タブレット = 768px / スマホ = 480px
   ※ PC（〜1440px想定）は style.css 側のデフォルトで表現する
   ========================================================================== */

/* --------------------------------------------------------------------------
   タブレット以下（768px以下）
   この境界で「横並び → 縦積み」「端セクションの余白詰め」を適用する
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 表示制御 */
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  .sp-br {
    display: block;
  }

  /* FVフルブリードコンテナの左右余白をSP向けに詰める（8.33vwだと窮屈なため） */
  .container-fluid {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* 横並び → 縦積み（画像が上 → テキストが下）
     .media-row--reverse も column にすることで、常に画像（先頭要素）が上にくる */
  .media-row,
  .media-row--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  /* セクション余白の調整 */
  .section-padding {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .section-padding-sm {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  /* 最初のセクションの上余白・最後のセクションの下余白を 0 にする
     （main 直下の最初/最後の section、または section-padding を持つ要素が対象） */
  main > section:first-child,
  main > .section-padding:first-child,
  main > .section-padding-sm:first-child {
    padding-top: 0;
  }

  /* ヒーロー（ページタイトル帯）は最初のセクションでも上 padding を確保する。
     固定ヘッダー（SP高さ）にテキストが隠れるのを防ぐため上の :first-child を上書き */
  main > section.page-title:first-child {
    padding-top: calc(var(--header-height-sp) + clamp(28px, 8vw, 48px));
  }

  main > section:last-child,
  main > .section-padding:last-child,
  main > .section-padding-sm:last-child {
    padding-bottom: 0;
  }

  /* NEWS は最後のセクションでも下余白を確保する（デザイン要件）
     上の :last-child ルールを上書きするため詳細度を上げる */
  main > section.news:last-child {
    padding-bottom: clamp(60px, 11vw, 80px);
  }

  /* 関連ページリンクは最後のセクションでも SP で下余白 56px を確保する */
  main > section.page-links:last-child {
    padding-bottom: 56px;
  }

  /* FAQ は最後のセクションでも SP で下余白 56px を確保する */
  main > section.faq:last-child {
    padding-bottom: 56px;
  }

  /* 会社案内（detail が最後のセクション）は SP で下余白 56px を確保する */
  main > section.detail:last-child {
    padding-bottom: 56px;
  }

  /* お問い合わせ（フォームが最後のセクション）は SP で下余白 56px を確保する。
     そのままだと送信ボタンの直後にフッターが接してしまう */
  main > section.contact:last-child {
    padding-bottom: 56px;
  }

  /* 送信ボタンは SP では左揃え */
  .contact-form__submit {
    text-align: left;
  }

  /* 主なめっき工程：SP は縦積み（番号+見出し→説明→写真の順） */
  .process-step {
    grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 24px);
  }

  /* 技術・設備紹介の写真は SP で極端に薄くならないよう縦を確保 */
  .tech-item__media img {
    aspect-ratio: 16 / 9;
  }

  /* 主な生産部品：部品リストは SP で1カラム */
  .detail-body .parts-list {
    grid-template-columns: 1fr;
  }

  /* ご挨拶（代表メッセージ）：SP は縦積み（メッセージ→写真→カード。絶対配置・重なり・ブリード解除） */
  .greeting__stage {
    display: flex;
    flex-direction: column;
  }
  .greeting__lead {
    max-width: none;
    padding: clamp(28px, 6vw, 40px) clamp(20px, 5vw, 28px) clamp(16px, 4vw, 24px);
  }
  /* SP は画面幅が狭いため、メインコピーの折り返しを許可 */
  .greeting__catch {
    white-space: normal;
  }
  .greeting__photo {
    position: static;
    height: auto;
    justify-content: center;
  }
  .greeting__photo img {
    height: auto;
    max-height: clamp(300px, 70vw, 420px);
    max-width: 100%;
  }
  .greeting__profile {
    width: auto;
    margin: clamp(20px, 5vw, 32px) 0 0;
  }

  /* 会社概要一覧・福利厚生一覧：SP はラベルを上に積む（罫線のアクセント部分は固定長に） */
  .company-list__row,
  .benefits__row {
    grid-template-columns: 1fr;
    gap: clamp(4px, 1.5vw, 8px);
    background-size: 72px 2px, 100% 1px;
  }

  /* 沿革：SP は年号を上に積む。縦線・ドットは非表示、中央寄せ用の余白も解除 */
  .history__row {
    grid-template-columns: 1fr;
    gap: clamp(4px, 1.5vw, 8px);
  }
  .history__year {
    padding-right: 0;
    text-align: left;
  }
  .history__desc {
    padding-left: 0;
  }
  .history__row::before,
  .history__row::after {
    display: none;
  }

  /* 設備：部屋・施設リストは SP で1カラム */
  .equip-list {
    grid-template-columns: 1fr;
  }

  /* アクセス情報：SP は縦積み（状況ラベル → 説明） */
  .access__info {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .access__info-label {
    margin-top: clamp(14px, 3.5vw, 18px);
    white-space: normal;
  }
  .access__info-label:first-child {
    margin-top: 0;
  }
  .access__info-desc {
    margin-top: 4px;
  }

  /* 設備の表：SP は横スクロールさせず画面内に収める。
     ベージュの区分列を縦書きにして最小幅にし、他の列も余白を詰める。
     ※ base.css の .table-wrap > table { min-width:600px } を打ち消すため
       同じ詳細度(0,1,1)の子セレクタで指定する */
  .table-wrap > .spec-table {
    min-width: 0;
  }

  .spec-table th,
  .spec-table td {
    padding: 8px 6px;
  }

  /* 区分列（銅・ニッケル・クロム／前処理・乾燥・水処理）を縦書きに */
  .spec-table tbody th {
    padding: 10px 3px;
    writing-mode: vertical-rl;
    text-align: center;
    letter-spacing: 0.05em;
  }

  /* 小ブロック内の並び写真：SP は横幅が足りないので縦積みにする */
  .equip-photos {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 動画：PC では幅半分だが、SP では小さくなりすぎるため幅いっぱいに戻す */
  .equip-video {
    max-width: 100%;
  }

  /* 容量・基数・台数は内容が短いので左右の余白を最小限に */
  .spec-table .spec-table__num {
    padding-left: 4px;
    padding-right: 6px;
  }

  /* 募集要項の表：SP は横並びだと内容の幅が足りないので、
     ベージュの項目名を白い内容の上に積む（配色・罫線は PC と同じ） */
  .spec-table--req,
  .spec-table--req tbody,
  .spec-table--req tr,
  .spec-table--req th,
  .spec-table--req td {
    display: block;
  }

  /* display:block で border-collapse が効かなくなるため、
     枠線は行（tr）側で持ち、行同士で二重にならないよう上罫線を落とす */
  .spec-table--req tr {
    border: 1px solid var(--color-border);
  }

  .spec-table--req tr + tr {
    border-top: 0;
  }

  /* セル個別の罫線は解除（.spec-table th/td に勝つよう詳細度を上げる） */
  .spec-table.spec-table--req th,
  .spec-table.spec-table--req td {
    border: 0;
  }

  /* 項目名：横書き・全幅のベージュ帯にして、下に区切り線を引く */
  .spec-table.spec-table--req tbody th {
    width: auto;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    writing-mode: horizontal-tb;
    letter-spacing: 0.02em;
    text-align: left;
    white-space: normal;
  }

  .spec-table.spec-table--req td {
    padding: 12px 10px;
  }

  /* 職種 ／ 内容 は横並びだと内容の幅が足りないので縦積みにする */
  .req-def__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  /* PDF資料への導線：SP は1カラムに積む */
  .doc-links__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 資料バナー：SP もテキスト横に矢印を置く。
     その分の幅を確保するため、見出しと余白・矢印を一段小さくする */
  /* 矢印はテキストの高さいっぱいに伸ばして縦長にする */
  .doc-feature {
    align-items: stretch;
    gap: 12px;
    padding: 18px 16px;
  }

  /* 360px 幅でも見出しと PDF マークが1行に収まるようにする */
  .doc-feature__head {
    gap: 8px;
  }

  .doc-feature__title {
    font-size: var(--fz-lg);
  }

  /* PDF マーク（アクセントカラーの塗り）と近接するため、
     矢印は白地＋グレーの外枠・紺の矢印にして塗りと線で描き分ける */
  .doc-feature__arrow {
    width: 38px;
    height: auto;
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23002060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    background-size: 16px 16px;
  }

  /* 強みの3カラムは SP で1カラムに積む */
  .strength-points {
    grid-template-columns: 1fr;
  }

  /* 募集要項・福利厚生：SP は1カラム。
     サイドナビは他ページと同じく非表示にするが、同じ左カラムにある健康企業宣言は
     残したいので、カラムごとは消さずに本文の下へ回す */
  .req-layout {
    grid-template-columns: 1fr;
  }
  .req-main {
    order: 1;
  }
  .req-side {
    order: 2;
    position: static;
  }
  .req-side .side-nav {
    display: none;
  }

  /* 採用インタビュー：SP は重ねずに縦積み（HTML 順どおり写真が上・プロフィールが下）
     PC 用の重ね配置（絶対配置・右側の余白）を解除する */
  /* SP は写真を下げていない（position: static）ので、番号のずらしも解除する */
  .interview__number {
    transform: none;
  }
  .interview__media {
    position: static;
    width: auto;
    margin-bottom: clamp(16px, 4vw, 24px);
  }
  .interview__profile {
    width: auto;
    padding-right: clamp(24px, 3vw, 40px);
  }

  /* 1日のスケジュール：SP は「12:00～13:00」のような時間帯が列幅を取りすぎて
     説明文が極端に細くなるため、「～」の後（HTML の wbr）で折り返せるようにする。
     列幅が auto のままだと余白がある限り1行分の幅まで広がって折り返されないので、
     時刻列は折り返したときの最小幅（min-content）に固定する */
  .interview__schedule {
    --schedule-rail: 18px;
    grid-template-columns: min-content minmax(0, 1fr);
    max-width: none;
    padding: 20px 16px;
  }

  .interview__schedule-time {
    white-space: normal;
  }

  /* 品質保証体制カード：SP は縦積み（HTML 順どおり写真が上・本文が下） */
  .quality-card {
    grid-template-columns: 1fr;
  }
  .quality-card__body,
  .quality-card__media {
    grid-column: auto;
    grid-row: auto;
  }

  /* ページ固有のレスポンシブスタイルをここに追記 */
}

/* --------------------------------------------------------------------------
   スマートフォン（480px以下）
   主に余白の微調整。文字サイズは variables.css の clamp() が追従するため
   原則ここでは指定しない（必要な場合のみ追記）
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .section-padding {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  /* ページ固有のレスポンシブスタイルをここに追記 */
}