/* =====================================================================
   technology.css — 04-Technology（技術力）固有
   共通(common/tokens)は上書きしない。固定青背景の上に透明セクションを重ね、
   設備と環境のみ薄グレーグラデ背景＋濃紺文字にする。
   ===================================================================== */

/* ===== 下層FV背景写真（Figma 04-Technology bg-image 2414:7274）：
   common.css .fv-photo（ページ先頭900px・下端マスクで光アニメへ溶かす）に画像のみ指定。
   旧 .subfv::before 方式（追いグラデで写真が沈む／FV高さ不足）は撤去。 ===== */
body[data-page="technology"] .fv-photo{ background-image:url("../pages/technology/images/fv-bg.webp") }

/* 見出しは共通 .section-head__title/__eyebrow を使用（text-box-trim込み＝Figmaキャップ詰めと一致）。
   旧ローカルクラス .tech-fields__h/__en は2026-07-07 parity突合で撤去（trim無しで全体が約40px下方ドリフトしていた） */

/* =====================================================================
   リード（透明・白文字）
   ===================================================================== */
.tech-lead{ color:var(--c-white); padding-top:85px; padding-bottom:79px /* Figma: リードtitleキャップ上端y568(=subfv483+85)・本文下端y813・次見出しy988(=813+79+section pt96) */ }
@media (max-width:767px){ .tech-lead{ padding-top:42px; padding-bottom:40px } } /* FV縦余白半減（SP 2026-07-13） */
.tech-lead__title{ font-size:40px; line-height:1.3; font-weight:700; letter-spacing:.4px; margin-bottom:48px;
  text-box-trim:trim-both; text-box-edge:cap alphabetic /* Figma 2414:7282: 40px/1.3/tracking0.4px/cap詰め */ }
.tech-lead__text{ font-size:var(--fz-body); line-height:var(--lh-body); letter-spacing:1px }
@media (max-width:1023px){ .tech-lead__title{ font-size:32px } }
@media (max-width:767px){
  .tech-lead__title{ font-size:26px; margin-bottom:32px }
  .tech-lead__title br{ display:none }
}

/* =====================================================================
   技術領域（透明・白文字）：テキスト＋写真の横並びを縦に4本
   ===================================================================== */
.tech-fields{ color:var(--c-white); padding-bottom:144px /* Figma: 最終row下端y3243→設備と環境バンド開始y3387 */ }
.tech-fields .section-head{ gap:24px; margin-bottom:64px }
.tech-fields__lead{ font-size:var(--fz-body); line-height:var(--lh-body); letter-spacing:1px; margin-bottom:120px }

.tech-rows{ display:flex; flex-direction:column; gap:120px }
.tech-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:flex-start }
.tech-row__title{ font-size:var(--fz-h3); line-height:var(--lh-h3); font-weight:700; letter-spacing:.32px; margin-bottom:32px;
  text-box-trim:trim-both; text-box-edge:cap alphabetic /* Figma 2414:7291 */ }
.tech-row__text{ font-size:var(--fz-body); line-height:var(--lh-body); letter-spacing:1px }
.tech-row__media{ overflow:hidden; aspect-ratio:4096/2733 }
.tech-row__media img{ width:100%; height:100%; object-fit:cover }

@media (max-width:1023px){
  .tech-fields{ padding-bottom:96px } /* PC144の縮約（.sectionのTB72より広めを維持） */
  .tech-fields__lead{ margin-bottom:72px }
  .tech-rows{ gap:72px }
  .tech-row{ gap:32px }
  .tech-row__title{ font-size:26px; margin-bottom:20px }
}
@media (max-width:767px){
  .tech-fields{ padding-bottom:72px }
  .tech-fields .section-head{ gap:8px; margin-bottom:40px }
  .tech-rows{ gap:56px }
  .tech-row{ grid-template-columns:1fr; gap:24px }
  .tech-row__title{ font-size:24px }
}

/* =====================================================================
   設備と環境（薄グレーグラデ・濃紺文字）
   ===================================================================== */
.tech-facility{ color:var(--c-main);
  background:var(--c-grad-end); /* Figma正: フラット#eef0f6（旧: 青みグラデ#c3cfeb） */
  padding:120px 0 144px }
.tech-facility .section-head{ gap:24px; margin-bottom:64px }
.tech-facility__head{ margin-bottom:80px }
.tech-facility__lead{ font-size:var(--fz-body); line-height:var(--lh-body); letter-spacing:1px }

.tech-facility__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:80px 48px; /* Figma: 行間80/列間48（x=0/628, w=580） */
  margin-bottom:80px }
.facility-card{ display:flex; flex-direction:column; gap:32px; min-width:0 }
.facility-card__media{ overflow:hidden; aspect-ratio:900/600;
  margin-bottom:8px /* Figma 2414:7319: 画像→テキスト群gap40（=32+8） */ }
.facility-card__media img{ width:100%; height:100%; object-fit:cover }
.facility-card__title{ font-size:var(--fz-h3); line-height:var(--lh-h3); font-weight:700; letter-spacing:.32px;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.facility-card__text{ font-size:var(--fz-body); line-height:var(--lh-body); letter-spacing:1px }
.facility-card__subtitle{ margin-top:auto }
@media (min-width:1024px){
  .facility-card{ min-height:0 }
  .facility-card__text{ min-height:202px }
}
.facility-card__subtitle{ font-size:var(--fz-h4); line-height:var(--lh-h4); font-weight:700; letter-spacing:.24px;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.facility-card__list{ list-style:disc; padding-left:24px; display:flex; flex-direction:column; gap:0 }
.facility-card__list li{ font-size:var(--fz-body); line-height:var(--lh-body); letter-spacing:1px }
/* gap指定をリスト内ではmargin相殺で詰める（listのgapは効くがdiscマーカー位置維持のためpadding-left運用） */
.facility-card__list{ gap:0 }

/* HP-v2指示[row68][row70][row85][row86]反映：設備最大能力／使用ソフトウェア＝項目名+値のラベル表。
   about.css .company-table（会社概要dl）と同構造の軽量dl（画像化禁止のため表組はHTML+CSSで実装）。 */
.facility-card__specs{ display:flex; flex-direction:column }
.facility-card__spec{ display:flex; gap:20px; padding:14px 0; border-top:1px solid var(--c-line) }
.facility-card__spec:last-child{ border-bottom:1px solid var(--c-line) }
.facility-card__spec dt{ flex:0 0 168px; min-width:0; font-size:var(--fz-body); line-height:var(--lh-body); letter-spacing:1px; font-weight:700; color:var(--c-main); overflow-wrap:anywhere }
.facility-card__spec dd{ flex:1 1 auto; min-width:0; font-size:var(--fz-body); line-height:var(--lh-body); letter-spacing:1px; overflow-wrap:anywhere }

@media (max-width:1023px){
  .tech-facility{ padding:72px 0 96px }
  .tech-facility__head{ margin-bottom:56px }
  .tech-facility__grid{ gap:56px; margin-bottom:56px }
  .facility-card{ gap:24px }
  .facility-card__title{ font-size:26px }
  .facility-card__spec{ gap:12px }
  .facility-card__spec dt{ flex-basis:120px }
}
@media (max-width:767px){
  .tech-facility{ padding:56px 0 72px }
  .tech-facility .section-head{ gap:8px; margin-bottom:40px }
  .tech-facility__head{ margin-bottom:40px }
  .tech-facility__grid{ grid-template-columns:1fr; gap:48px }
  .facility-card__title{ font-size:24px }
  .facility-card__spec{ display:block; padding:12px 0 }
  .facility-card__spec dt{ margin-bottom:4px }
  .facility-card__spec dd{ font-size:12px }
}

/* =====================================================================
   保有設備一覧 PDF DLカード（白カード・中央寄せ）
   ===================================================================== */
/* 白カードは Figma(2359:3922) では角丸/影なし（bg-white p-80 のみ）。装飾を足さない。 */
.tech-pdf{ background:var(--c-white); padding:80px;
  display:flex; flex-direction:column; gap:48px; align-items:center }
.tech-pdf__head{ display:flex; flex-direction:column; gap:32px; text-align:center; width:100% }
.tech-pdf__title{ font-size:var(--fz-h3); line-height:var(--lh-h3); font-weight:700; letter-spacing:.32px; color:var(--c-accent);
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.tech-pdf__text{ font-size:var(--fz-body); line-height:var(--lh-body); letter-spacing:1px; color:var(--c-main) }

.tech-pdf__btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:24px;
  padding:32px; border-radius:8px; color:var(--c-white);
  background:linear-gradient(to top, #0851a2 0%, var(--c-accent) 100%);
  transition:filter .2s ease, transform .2s ease }
.tech-pdf__btn:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.tech-pdf__btn-text{ display:flex; flex-direction:column; gap:24px; align-items:center; text-align:center /* Figma: cap詰めテキスト間gap24 */ }
.tech-pdf__btn-main{ font-size:var(--fz-h4); line-height:var(--lh-h4); font-weight:700; letter-spacing:.24px;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.tech-pdf__btn-sub{ font-size:var(--fz-meta); line-height:var(--lh-body); letter-spacing:1px; font-weight:400;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.tech-pdf__btn-icon{ width:33px; height:32px; flex:0 0 33px }

@media (max-width:1023px){
  .tech-pdf{ padding:56px 48px }
}
@media (max-width:767px){
  .tech-pdf{ padding:40px 24px; gap:32px }
  .tech-pdf__head{ gap:20px }
  .tech-pdf__title{ font-size:26px }
  .tech-pdf__btn{ padding:24px }
  .tech-pdf__btn-main{ font-size:16px }
}