/* =====================================================================
   process-quality.css — 05-Process-quality「一貫生産マネジメント」固有
   固定青背景(.site-bg)が透ける透明セクション。本文は白系。
   共通(common.css/tokens.css)は上書きせず、ここで固有分のみ定義。
   ===================================================================== */

/* ---- 下層FV背景写真（Figma 05-Process-quality bg-image 2414:8467）：
   common.css .fv-photo（ページ先頭900px・下端マスクで光アニメへ溶かす）に画像のみ指定。
   旧 .pq-fv::before 方式（追いグラデで写真が沈む）は撤去。 ---- */
body[data-page="process-quality"] .fv-photo{ background-image:url("../pages/process-quality/images/fv-bg.webp") }
.pq-fv{ position:relative; min-height:900px; }
.pq-fv__lead{ color:var(--c-white); margin-top:65px; /* Figma: リード(2414:8473)上端 y568 に合わせ調整 */ }
@media (max-width:767px){ .pq-fv__lead{ margin-top:32px } } /* FV縦余白半減（SP 2026-07-13） */
.pq-fv__catch{ font-size:40px; font-weight:700; line-height:1.3; letter-spacing:.4px; margin-bottom:32px; } /* Figma H2 40/1.3・title→txt gap48 */
.pq-fv__desc{ font-size:var(--fz-body); line-height:var(--lh-body); color:var(--c-white); }
@media (max-width:1023px){
  .pq-fv{ min-height:auto; padding-bottom:64px; }
  .pq-fv__catch{ font-size:28px; margin-bottom:20px; }
  .pq-fv__desc br{ display:none; } /* 明示改行はPCカンプのみ */
}
@media (max-width:767px){
  .pq-fv__catch{ font-size:22px; margin-bottom:16px; }
}

/* ---- 共通: 透明セクション上の白文字（青背景を見せる） ---- */
.pq-intro, .pq-lineup, .pq-system, .pq-amateras{ background:transparent; color:var(--c-white); }

/* セクション見出し（左寄せ・白）
   Figma 2414:8483/8627: 幅580・title(32)→txt gap32(視覚)・見出し塊→本体 gap38 */
.pq-block-head{ max-width:580px; margin-bottom:34px; }
.pq-block-head__title{ font-size:var(--fz-h3); line-height:var(--lh-h3); font-weight:700; letter-spacing:1px; }
.pq-block-head__text{ margin-top:14px; font-size:var(--fz-body); line-height:var(--lh-body); color:var(--c-white); }
@media (max-width:767px){
  .pq-block-head{ margin-bottom:32px; }
  .pq-block-head__title{ font-size:26px; }
}

/* ---- 生産体制と工程管理（リード）
   Figma 2414:8479: JP48/1.25 + gap24 + EN24 + (pb64+gap48)=112 + 本文16/1.8（2行明示改行） ---- */
.pq-intro{ padding-top:0; padding-bottom:0; }
.pq-intro__inner{ max-width:none; }
.pq-intro__title{ font-size:48px; line-height:1.25; font-weight:700; letter-spacing:.48px; }
.pq-intro__en{ margin-top:9px; font-family:var(--ff-en); font-size:24px; line-height:1.25; font-weight:500; letter-spacing:.24px; color:var(--c-white); }
.pq-intro__text{ margin-top:100px; font-size:var(--fz-body); line-height:var(--lh-body); color:var(--c-white); }
@media (max-width:1023px){
  .pq-intro__title{ font-size:34px; }
  .pq-intro__en{ margin-top:8px; font-size:18px; }
  .pq-intro__text{ margin-top:28px; }
  .pq-intro__text br{ display:none; } /* 明示改行はPCカンプのみ */
}
@media (max-width:767px){ .pq-intro__title{ font-size:26px; } }

/* ---- PC実寸のセクション間隔（Figma: ブロック間120 / footer手前144。SP/TBは共通.section準拠）
   HP-v2指示[row26/36/44]でセクション順を①統合生産体制②AMATERAS③多彩な加工ラインナップに変更したため、
   footer手前の余白(144px)は現在最終セクションの .pq-lineup に付与（元は最終だった .pq-amateras から移設）。 ---- */
@media (min-width:1024px){
  .pq-system, .pq-amateras{ padding:120px 0 0; }
  .pq-lineup{ padding:120px 0 144px; }
}

/* ---- 多彩な加工ラインナップ：白アイコン 5列×2
   Figma 2414:8486: セル241.6×5=1208（列gap0）・行gap32・アイコン110→ラベル gap24・ラベル16/1.8 ---- */
.pq-icons{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:32px 0; }
.pq-icons__item{ display:flex; flex-direction:column; align-items:center; gap:24px; min-width:0; text-align:center; }
.pq-icons__fig{ height:110px; display:flex; align-items:flex-end; justify-content:center; }
.pq-icons__fig img{ height:100%; width:auto; max-width:100%; object-fit:contain; }
.pq-icons__name{ font-size:var(--fz-body); font-weight:500; line-height:1.8; letter-spacing:1px; color:var(--c-white); }
@media (max-width:1023px){
  .pq-icons{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 20px; }
}
@media (max-width:767px){
  .pq-icons{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 16px; }
  .pq-icons__fig{ height:84px; }
  .pq-icons__name{ font-size:13px; }
}

/* ---- 2カラム split（テキスト＋図版）
   Figma 2414:8626/8632: テキスト・図版とも上端揃え（center にしない） ---- */
/* 1024-1439px: 図版列も比例縮小するfr比（1440時 580+580 は従来と同一。2026-07-29 流体化） */
.pq-split{ display:grid; grid-template-columns:580fr 580fr; gap:48px; align-items:flex-start; }
.pq-split__text{ min-width:0; }
.pq-split__media{ min-width:0; }
.pq-split__media img{ width:100%; height:auto; display:block; }
@media (max-width:1023px){
  .pq-split{ grid-template-columns:1fr; gap:32px; }
  .pq-split--reverse{ display:flex; flex-direction:column; }
}

/* 統合生産体制の図は薄グレー地のため白枠で見やすく */
.pq-system .pq-split__media img{ background:#fff; }

/* ---- AMATERAS
   Figma 2414:8633: H3 32/1.4 → gap32 → リード24/1.5 Bold → gap32 → 本文16/1.8（空行=段落間28.8）→ gap32 → ボタン
   ボタンは共通 .btn--grad（Figma Button Primary 青グラデ）を使用 ---- */
.pq-amateras__h2{ font-size:var(--fz-h3); line-height:1.4; font-weight:700; letter-spacing:.32px; }
.pq-amateras__lead{ margin-top:12px; font-size:24px; line-height:1.5; font-weight:700; letter-spacing:.24px; color:var(--c-white); }
.pq-amateras__body{ margin-top:16px; display:flex; flex-direction:column; gap:28px; }
.pq-amateras__body p{ font-size:var(--fz-body); line-height:var(--lh-body); color:var(--c-white); }
.pq-amateras__btn{ margin-top:26px; width:541px; max-width:100%; }
.pq-amateras__exticon{ width:18px; height:18px; flex:0 0 18px; }
@media (max-width:767px){
  .pq-amateras__h2{ font-size:24px; }
  .pq-amateras__h2 br{ display:none; }
  .pq-amateras__btn{ width:100%; }
}

/* reduced-motion は common 側で reveal 無効化済み */