/* =====================================================================
   foundation.css — 03-Foundation「技術と信頼の基盤」固有
   固定青背景の対象ページ。背景色を持たないセクションは透明にして
   .site-bg を見せ、テキストは白系。共通クラスは上書きしない（差分のみ）。
   ===================================================================== */

/* ---- 下層FV背景写真（Figma 03-Foundation bg-image 2439:5689）：
   common.css .fv-photo（ページ先頭900px・下端マスクで光アニメへ溶かす）に画像のみ指定。 ---- */
body[data-page="foundation"] .fv-photo{ background-image:url("../pages/foundation/images/fv-bg.webp") }

/* ---- FV：共通 .subfv を踏襲。リード文ブロックを追加 ---- */
.subfv--foundation{ min-height:900px; display:block; padding-top:121px; padding-bottom:0 }

/* FVタイトル：濃紺地用に淡ラベンダー→accent のテキストグラデ（Figma準拠）。
   共通 .tgrad（白地用 accent単色スイープ）を on-dark バリアントで差し替え。
   Figma正（I2439:5694;2365:4228）の最終状態＝対角グラデ 129.72deg #c1c9ea 10.87%→#2b5eb4 96.76%。
   スイープ中は従来の分割グラデ、終端でFigmaグラデへ切替（forwards保持）。 */
.js .tgrad--on-dark{
  background-image:linear-gradient(90deg,#c1c9ea 0%,#c1c9ea 50%,rgba(193,201,234,0) 50%,rgba(193,201,234,0) 100%);
}
/* 他ページと同じ duration(1.25s)・イージング(var(--motion-ease)) に統一（以前は 1.1s cubic-bezier(.22,.61,.36,1) で挙動が違っていた） */
.js .tgrad--on-dark.is-in{ animation:tgradSweepDark 1.25s var(--motion-ease) forwards }
/* to段階＝Figma正の対角グラデ静止状態。かつては text-box-trim で詰めた箱の外に出る文字下端の
   透明化を防ぐため縦を+48px過剰めに広げていたが、subfv__title の trim 撤廃（common.css）で
   箱がglyphを内包するようになったため縦拡張は不要＝通常の 100% 100% に簡素化（母艦-LOG 2026-07-12）。 */
@keyframes tgradSweepDark{
  from{ background-position-x:100%; background-position-y:0% }
  90%{ background-position-x:0%; background-position-y:0% }
  to{ background-image:linear-gradient(129.72deg,#c1c9ea 10.87%,var(--c-accent) 96.76%);
      background-size:100% 100%; background-position-x:0%; background-position-y:0% }
}
@media (prefers-reduced-motion:reduce){
  /* 共通 .js .subfv .tgrad の background:none を上書きし、静的にFigmaグラデを表示。縦拡張は不要（上記と同理由）。 */
  .js .subfv .tgrad--on-dark{
    background-image:linear-gradient(129.72deg,#c1c9ea 10.87%,var(--c-accent) 96.76%);
    background-size:100% 100%; background-position:0% 0%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}

/* FVリード（タグライン濃紺帯のニュアンス＝白文字本文） */
.fv-lead{ display:flex; flex-direction:column; gap:24px; color:var(--c-white); margin-top:77px /* Figma: リードy568 */ }
@media (max-width:767px){ .fv-lead{ margin-top:38px } } /* FV縦余白半減（SP 2026-07-13） */
.fv-lead__title{ font-size:40px; line-height:1.3; font-weight:700; letter-spacing:.4px /* Figma tracking 0.4 */ }
/* Figma 2439:5698: 2段落は行送り連続（段落gap無し）・幅は全幅1208（旧960上限を撤廃） */
.fv-lead__text{ display:flex; flex-direction:column; gap:0 }
.fv-lead__text p{ font-size:var(--fz-body); line-height:1.8; letter-spacing:1px }
@media (max-width:1023px){
  .subfv--foundation{ padding-bottom:80px }
  .fv-lead__title{ font-size:30px }
}
@media (max-width:767px){
  .subfv--foundation{ min-height:auto; padding-top:var(--header-h); padding-bottom:48px }
  .fv-lead__title{ font-size:24px; line-height:1.4 }
  .fv-lead__title br{ display:none }
}

/* =====================================================================
   3つの力（透明セクション・白文字）
   ===================================================================== */
.powers{ padding:88px 0 0 }
.power{ padding-bottom:120px; color:var(--c-white) }
.power:last-child{ padding-bottom:144px }
/* Figma Section: title(cap-trim済h35)+24+eyebrow(trim済h17)+pb64+セクションgap10 → Content Row上端=+150。
   実装はcap-trim無し：タイトルcapが行箱内で+12下がるため、eyebrowも同じ+12に揃うよう gap8、
   Row上端150は pb58 で確保（60+8+24+58=150）。 */
.power__head{ display:flex; flex-direction:column; gap:8px; padding-bottom:58px }
.power__title{ font-size:48px; line-height:1.25; font-weight:700; letter-spacing:.48px /* Figma tracking 0.48 */ }
.power__eyebrow{ font-family:var(--ff-en); font-size:24px; line-height:1; font-weight:500; letter-spacing:.24px; opacity:.95 }

.power__row{ display:grid; grid-template-columns:580fr 580fr; gap:48px; align-items:start /* Figma: items-start（旧centerは縦ズレの主因） */ }
.power__block{ display:flex; flex-direction:column; gap:32px; align-items:flex-start; min-width:0 }
.power__lead{ font-size:var(--fz-h3); line-height:1.4; font-weight:700; letter-spacing:.32px /* Figma tracking 0.32 */ }
.power__text{ font-size:var(--fz-body); line-height:1.8; letter-spacing:1px;
  white-space:pre-wrap /* Figma正: 行頭スペース込みのpre-wrap（折返し位置がFigmaと一致する） */ }
/* Figmaはリード行をcap-trim（h23）計測：実装行箱44.8pxとの差をPCのみ相殺（txt上端=リード上端+55） */
@media (min-width:1024px){ .power__text{ margin-top:-22px } }
.power__media{ min-width:0; overflow:hidden; aspect-ratio:580/387 }
.power__media img{ width:100%; height:100%; object-fit:cover }

/* power 用ボタン（青グラデ・横長・矢印右寄せ：Figma準拠） */
.btn-power{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:541px; max-width:100%; padding:18px 28px 18px 32px; border-radius:8px;
  background:linear-gradient(180deg,#2b5eb4 0%,#0851a2 100%);
  color:var(--c-white); font-size:var(--fz-lead); font-weight:700; letter-spacing:1px;
  transition:transform .2s ease, box-shadow .2s ease }
.btn-power:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(8,81,162,.4) }
.btn-power__arrow{ width:7px; height:14px; flex:0 0 7px /* Figma: シェブロン7×14（旧: 長矢印14×8） */ }
@media (prefers-reduced-motion:reduce){ .btn-power{ transition:none } }

@media (max-width:1023px){
  .powers{ padding-top:64px }
  .power{ padding-bottom:88px }
  .power:last-child{ padding-bottom:96px }
  .power__head{ padding-bottom:40px; gap:16px }
  .power__title{ font-size:36px }
  .power__eyebrow{ font-size:20px }
  .power__row{ gap:32px }
}
@media (max-width:767px){
  .power__row{ grid-template-columns:1fr; gap:24px }
  .power__title{ font-size:24px }
  .power__lead{ font-size:22px }
  .btn-power{ width:100%; font-size:var(--fz-body) }
  .power__media{ order:-1 }   /* SPは画像を先頭に */
}

/* =====================================================================
   受賞実績（薄グレー帯：背景色ありなので site-bg を隠す）
   ===================================================================== */
.awards{ position:relative; z-index:1;
  background:var(--c-grad-end); /* Figma正: フラット#eef0f6（旧: 青みグラデ#c3cfeb） */
  padding:120px 0 144px }
/* Figma 2439:5729: head=title(trim)+24+eyebrow(trim)+pb64 → 一覧上端=+140。
   実装はcap-trim無し：eyebrowをタイトルと同じ+12に揃える gap8、一覧上端140は pb48（60+8+24+48=140）。 */
.awards__head{ display:flex; flex-direction:column; gap:8px; padding-bottom:48px; color:var(--c-main) }
.awards__title{ font-size:48px; line-height:1.25; font-weight:700; letter-spacing:.48px }
/* Figma 2439:5731 はブロック全体 color-main（accent青ではない） */
.awards__eyebrow{ font-family:var(--ff-en); font-size:24px; line-height:1; font-weight:500; letter-spacing:.24px; color:var(--c-main) }

.awards__list{ display:flex; flex-direction:column; gap:80px }
.award{ display:grid; grid-template-columns:580fr 580fr; gap:48px; align-items:start /* Figma: items-start */; color:var(--c-main) }
.award__body{ display:flex; flex-direction:column; gap:32px; min-width:0 }
.award__title{ font-size:var(--fz-h3); line-height:1.4; font-weight:700; letter-spacing:.32px /* Figma 0.32（1pxだと「〜300社」が3行に折れる） */ }
.award__text{ font-size:var(--fz-body); line-height:1.8; letter-spacing:1px }
/* Figmaはタイトル2行をcap-trim（h68）計測：実装行箱89.6pxとの差をPCのみ相殺（txt上端=+100） */
@media (min-width:1024px){ .award__text{ margin-top:-22px } }
.award__media{ min-width:0; overflow:hidden; aspect-ratio:580/387 }
.award__media img{ width:100%; height:100%; object-fit:cover; display:block }
/* ロゴ枠は白カードに中央配置（写真ではない） */
.award__media--logo{ background:var(--c-white); display:flex; align-items:center; justify-content:center }
.award__media--logo img{ width:auto; height:auto; max-width:min(260px,100%); max-height:260px; object-fit:contain }

@media (max-width:1023px){
  .awards{ padding:88px 0 96px }
  .awards__head{ padding-bottom:40px; gap:16px }
  .awards__title{ font-size:36px }
  .awards__eyebrow{ font-size:20px }
  .awards__list{ gap:56px }
  .award{ gap:32px }
  .award__title{ font-size:26px }
}
@media (max-width:767px){
  .award{ grid-template-columns:1fr; gap:20px }
  .awards__title{ font-size:24px }
  .award__title{ font-size:22px }
}