/* ============================================================
   top.css — 01-pc-top2（トップ）固有
   Figma実値(node 2414:11025・1440×5052):
     sec-fv 0–960 / (gap160) concept 1120–2080(960) / (gap160)
     middle[3つの柱+3カード] 2240–3586(1346) / (gap160) NEWS 3746–4099(353) /
     (gap160) Footer 4259–5052(793)
     ・本文領域=全面 濃紺#10203b・白文字 ・コンテンツ幅≈1376(左右32)
   共通は common.css / 変数は tokens.css。共通クラスは上書きしない。
   ============================================================ */

body[data-page="top"]{ background:var(--c-main); color:var(--c-white) }
/* TOPはコンテンツ幅をカンプ準拠の広め(≈1376)に（共通116pxコンテナでなく32px） */
body[data-page="top"] .container{ max-width:1440px; padding-inline:32px }
@media (max-width:767px){ body[data-page="top"] .container{ padding-inline:20px } }

/* ===== FV（sec-fv 高さ960・KV y80原寸880・中央コピー） ===== */
/* ヘッダーはfixed（フロー高0）なので打ち消しマージン不要。付けると先頭要素のマージン相殺で
   ページ全体が-96pxシフトし、全セクションYがFigmaとズレる（2026-07-07 parity突合で検出） */
.hero{ position:relative; background:var(--c-main);
  color:var(--c-white); overflow:hidden; min-height:960px; display:flex }
/* Figma sec-fv(0–960)実体を焼いた背景（機械線画+ワールド線画+アーク+楕円合成）。ヘッダー/中央コピー域はnavy消し込み済 */
.hero__kv{ position:absolute; inset:0; z-index:0;
  background:url("../pages/top/images/hero-fv-bg.webp") top center / cover no-repeat;
  transform:translate3d(0,var(--motion-y,0px),0) scale(1.04); will-change:transform }
.hero__inner{ position:relative; z-index:2; width:100%; min-height:960px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding-top:var(--header-h); padding-bottom:200px; gap:18px;
  transform:translate3d(0,var(--motion-y,0px),0); will-change:transform }
.hero__title{ font-family:var(--ff-display); font-size:40px; line-height:1.6; font-weight:700;
  letter-spacing:1px; color:var(--c-white); text-shadow:0 2px 18px rgba(0,0,0,.35) }
.hero__en{ font-family:var(--ff-en); font-size:18px; font-weight:500; letter-spacing:3px; color:var(--c-white); opacity:.95 }
@media (max-width:1023px){ .hero{ min-height:680px } .hero__inner{ min-height:680px; padding-bottom:80px } .hero__title{ font-size:32px } .hero__kv{ top:0; height:100% } }
@media (max-width:767px){ .hero{ min-height:540px } .hero__inner{ min-height:540px; padding-bottom:56px } .hero__title{ font-size:24px; line-height:1.7 } .hero__en{ font-size:14px; letter-spacing:1.5px } }

/* ===== コンセプト（sec-02 1120–2080 h960：写真左フルブリード700＋右に縦書き72px＋About文） ===== */
/* 1024-1439px: 写真列も比例縮小するfr比（1440時 700+740 は従来と同一。2026-07-29 流体化） */
.concept{ position:relative; display:grid; grid-template-columns:700fr 740fr;
  align-items:stretch; min-height:960px; margin-top:160px }   /* gap160 above */
.concept__photo{ position:relative; min-width:0; overflow:hidden }
.concept__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 62%; /* 人物（顔=元画像の40-45%）が縦中央に来る切り出し。PC(1024-)は縦トリム無し＝横トリムのみで実質SP/タブレット向け（2026-07-29） */
  transform:translate3d(0, var(--motion-y, 0px), 0) scale(1.0); transform-origin:center; will-change:transform }
.concept__body{ position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:120px; padding:120px 48px; overflow:hidden; isolation:isolate }
.concept__body::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("../pages/top/images/sec02-group4-ellipse.webp") center top / 100% 100% no-repeat }
.concept__vtitle{ position:relative; z-index:1; display:flex; gap:12px; align-items:center; justify-content:center; color:var(--c-white) }
/* Figma node2414:11172/11174 = Zen Kaku Gothic New Bold・列幅60px。実効サイズはカンプ実測で60px（72pxは過大）。
   vertical-rlでletter-spacingは字間に効くためカンプ準拠で0に。 */
.concept__v{ writing-mode:vertical-rl; text-orientation:upright; font-family:var(--ff-display);
  font-size:60px; font-weight:700; line-height:1.24; letter-spacing:0 }
.concept__x{ font-size:48px; font-weight:700; color:var(--c-white); align-self:center }
.concept__about{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:40px; max-width:520px }
.concept__lead{ font-size:var(--fz-meta); line-height:1.8; letter-spacing:1px; color:#f2f2f2; text-align:center }
@media (max-width:1023px){
  .concept{ grid-template-columns:1fr; min-height:0; margin-top:120px }
  .concept__photo{ height:420px } .concept__photo img{ position:static; height:420px }
  .concept__body{ gap:56px; padding:64px 32px }
  .concept__body::before{ opacity:.42; background-size:cover }
  .concept__v{ font-size:52px }
}
@media (max-width:767px){
  .concept{ margin-top:80px } .concept__photo{ height:300px } .concept__photo img{ height:300px }
  .concept__v{ font-size:36px } .concept__x{ font-size:32px } .concept__body{ padding:48px 20px; gap:40px }
  .concept__body::before{ display:none }
}

/* ===== 3つの柱（middle上段 2240–2820 h580：左テキスト＋右インフォグラフィック568×580） ===== */
.pillars{ margin-top:160px }   /* gap160 above middle block */
/* 1024-1439px: 図版列も比例縮小するfr比（1440時 724+568 は従来と同一。2026-07-29 流体化） */
.pillars__row{ display:grid; grid-template-columns:724fr 568fr; gap:84px; align-items:start; min-height:580px }  /* Figmaは左列上揃え（title y=セクション先頭） */
.pillars__lead{ display:flex; flex-direction:column; gap:24px; min-width:0; padding-left:84px }  /* Figma: Article x32 + Article Container x84 = 116（container pad32 + 84） */
.pillars__head{ display:flex; flex-direction:column; gap:24px; line-height:1.25 }
/* 1024-1439px間でタイトル「三益工業の3つの柱」(9文字)が1行に収まるようfluid化。
   左列幅 = 100vw - 783px（container余白131 + 図版568 + gap84）に基づく（1288px切れ対策）。
   .pillars__head は display:flex(column) の子＝既定 align-items:stretch でタイトルが
   1fr列いっぱいに幅ストレッチされる。tgrad(-webkit-background-clip:text) はこの箱の
   寸法までしか背景（文字色）を塗らないため、fluidフォーミュラの誤差で実測文字幅が
   箱をわずかに超えると、超過分のグリフが「背景無し＝透明」になり見た目上ちぎれる
   （1024px実測：文字幅237pxに対し箱幅224px→末尾「柱」が透明化）。
   width:fit-content で箱を実際の文字幅に一致させ、透明化を恒久的に防止
   （subfv__title と同じ対策パターン）。 */
.pillars__title{ font-size:min(72px, calc((100vw - 790px) / 9.15)); font-weight:700; letter-spacing:.72px; line-height:1.25; white-space:nowrap; width:fit-content }
.pillars__en{ font-family:var(--ff-en); font-size:var(--fz-display-en-s); font-weight:500; color:var(--c-white); letter-spacing:.32px }
.pillars__catch{ font-size:var(--fz-body); font-weight:700; letter-spacing:.5px; color:var(--c-white) }  /* Figma: Article Introduction 724×18（太字1行） */
.pillars__desc{ font-size:var(--fz-body); line-height:1.8; letter-spacing:1px; color:var(--c-white) }
.pillars__btn{ width:541px; max-width:100%; margin-top:24px }  /* Figma: 説明→ボタン gap48（lead gap24 + 24） */
.pillars__chart{ min-width:0 }
/* 図版は画像1枚（高画質版はユーザー手作業差し替え予定。HTML/CSS再構築版.pfigは2026-07-03廃止） */
.pillars__chart img{ width:100%; max-width:568px; height:auto; margin-inline:auto;
  transform:translate3d(0,var(--motion-y,0px),0); will-change:transform }
@media (max-width:1023px){
  .pillars__row{ grid-template-columns:1fr; gap:40px; min-height:0 } .pillars__lead{ padding-left:0 }
  .pillars__title{ font-size:48px; white-space:normal } .pillars__chart img{ max-width:480px }
}
@media (max-width:767px){ .pillars{ margin-top:24px } .pillars__title{ font-size:24px } .pillars__btn{ width:100% } }

/* ===== 3カード（middle下段 2900–3586 h686：技術力/一貫生産/品質） ===== */
.section.features{ margin-top:80px; padding:0 }   /* gap80 between services and cards。Figmaに内部paddingは無い（.section既定96を打消し） */
.features__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px }
.features__item{ display:flex; flex-direction:column; gap:32px; min-width:0 }  /* Figma: title51→img→text→btn 各gap32 */
.features__title{ font-size:var(--fz-h4); line-height:1; font-weight:700; color:var(--c-white); display:flex; flex-direction:column; gap:16px }  /* Figma: Column Title h23 + gap16 + subtitle h12 = 51 */
.features__en{ font-family:var(--ff-en); font-size:var(--fz-caption); line-height:1; color:#9fb4dd; font-weight:500; letter-spacing:1px }
.features__media{ overflow:hidden; aspect-ratio:432/289 }
.features__media img{ width:100%; height:100%; object-fit:cover;
  transform:translate3d(0,var(--motion-y,0px),0) scale(1.035); transform-origin:center; will-change:transform }
.features__text{ font-size:18px; font-weight:700; line-height:1.5; color:var(--c-white); flex:1 1 auto }  /* Figma: Column Text 432×54＝太字キャッチ2行（18px lh1.5） */
.features__item .btn{ margin-top:0 }
@media (max-width:1023px){ .features__grid{ grid-template-columns:1fr; gap:40px; max-width:560px; margin-inline:auto } }

/* ===== NEWS（sec-04 3746–4099 h353：左見出し＋リスト＋ボタン） ===== */
.news-band{ background:var(--c-main); color:var(--c-white); margin-top:160px; padding:0 }  /* gap160 above */
.news-band__grid{ display:grid; grid-template-columns:306px minmax(0,1fr); gap:48px; align-items:start }  /* list start≈386(Figma) */
/* EN見出し：Figma node2414:11216 = Manrope Bold 56px / 静的グラデ #c1c9ea→#2b5eb4（暗地でも視認可） */
.news-band__en{ font-family:"Manrope",var(--ff-en); font-size:56px; font-weight:700; line-height:1.24; display:block;
  text-transform:uppercase; letter-spacing:0;
  background:linear-gradient(98.5deg,#c1c9ea 11%,#2b5eb4 97%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
.news-band__jp{ font-size:var(--fz-h4); font-weight:700; margin-top:10px; letter-spacing:.24px }
.news-band__list{ display:flex; flex-direction:column }
.news-band__list a{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:36px; align-items:center;
  grid-template-areas:"title arrow" "date arrow"; padding:16px 0; border-top:1px dashed rgba(255,255,255,.25) }
.news-band__list li:last-child a{ border-bottom:1px dashed rgba(255,255,255,.25) }
.news-band__list a{ transition:opacity .25s ease }
/* 見出し：Figma node2414:11223 = Zen Kaku Gothic New Bold 18px / 白 */
.news-band__title{ grid-area:title; font-family:"Zen Kaku Gothic New",var(--ff-jp); font-size:18px; font-weight:700;
  line-height:1.4; color:var(--c-white); min-width:0; transition:color .25s ease }
/* 日付：Figma node2414:11224 = Manrope Regular 12px / #f2f2f2 */
.news-band__date{ grid-area:date; font-family:"Manrope",var(--ff-en); font-size:12px; color:#f2f2f2; margin-top:12px }
.news-band__arrow{ grid-area:arrow; align-self:center; width:24px; height:24px; border:1px solid #7d8eac;
  border-radius:0; font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  transition:background .25s ease, border-color .25s ease, color .25s ease }
/* ホバー：ボタン同様のフェード（タイトル淡色・矢印アクセント・行わずかに発光） */
.news-band__list a:hover{ opacity:.92 }
.news-band__list a:hover .news-band__title{ color:#cdd9f4 }
.news-band__list a:hover .news-band__arrow{ background:var(--c-accent); border-color:var(--c-accent); color:#fff }
@media (prefers-reduced-motion:reduce){ .news-band__list a,.news-band__title,.news-band__arrow{ transition:none } }
.news-band__more{ display:flex; justify-content:flex-end; margin-top:32px }
@media (max-width:1023px){ .news-band__grid{ grid-template-columns:1fr; gap:32px } }
@media (max-width:767px){ .news-band{ margin-top:80px } .news-band__en{ font-size:48px } .news-band__more{ justify-content:stretch } .news-band__title{ font-size:15px } }

/* ===== sec-02 装飾（Figma Group 4 / 透過WebP） ===== */
.concept > *{ position:relative; z-index:1 }
@media (prefers-reduced-motion:reduce){
  .hero__kv,.hero__inner,.concept__photo img,.pillars__chart img,.features__media img{ transform:none }
}

/* ===== Footer 上の gap160 ===== */
.site-footer{ margin-top:160px }
@media (max-width:767px){ .site-footer{ margin-top:80px } }