/* ===== lower.css ｜ 下層共通（Figma「Component 14」下層FV・パンくず・下層ヘッダー/フッター差分・共通見出し）=====
   デザイン言語: 色/書体トークンは base.css。英大見出し＋和ラベルのペア、共通ボタン(.btn)、コンテンツ幅1200中央（--pad-side）を全ページで使い回す。 */

/* --- 下層ヘッダー差分: ナビ6項目（導入事例あり）幅は内容任せ --- */
.header--lower .gnav{width:auto;justify-content:flex-start}

/* --- 下層FV（Component 14）: pt110 px30 pb120 / gap8 / 背景=base3＋テクスチャ(luminosity 30%)＋2重グラデ --- */
.lfv{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;padding:110px var(--sp-side-l) 120px;overflow:hidden;background:var(--c-base3)}
.lfv--s{padding-bottom:80px}                      /* フォーム・完了・確認などタイトル小のページ */
.lfv__bg{position:absolute;inset:0;pointer-events:none}
.lfv__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;mix-blend-mode:luminosity;opacity:.3;max-width:none}
.lfv--s .lfv__bg img{opacity:.4}
.lfv__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(143.75deg,#fff 10.142%,rgba(255,255,255,0) 47.161%),linear-gradient(180deg,rgba(255,255,255,.15) 48.187%,#f0faff 100%)}
.lfv--s .lfv__bg::after{background:linear-gradient(161.53deg,#fff 7.9012%,rgba(255,255,255,0) 46.577%),linear-gradient(180deg,rgba(255,255,255,.15) 18.806%,#f0faff 100%)}
.lfv__inner{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:3px;width:100%}
.lfv--s .lfv__inner{gap:64px}
/* パンくず: 右寄せ 12px medium / 区切り線12px #cdcdcd / 現在地は青 */
.breadcrumb{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0;padding:0;list-style:none}
.breadcrumb li{display:flex;align-items:center;gap:12px;padding:4px 0;font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.12px;white-space:nowrap}
.breadcrumb li+li::before{content:"";flex:none;width:12px;height:1px;background:#cdcdcd}
.breadcrumb a{position:relative;color:inherit;text-decoration:none}
/* A-7 パンくず: リンク（#1C222B）ホバーで下線が左から右へ引かれ、離すと右へ抜ける。現在地（#1549A0）は span のままリンクにしない */
.breadcrumb a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .4s var(--ease-out-quint,ease)}
@media (hover:hover){
  .breadcrumb a:hover::after{transform:scaleX(1);transform-origin:left center}
}
.breadcrumb a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.breadcrumb li:last-child{color:var(--c-text-sub)}
/* タイトル行: 1380px内 px90 / 左720px（Title gap6 → リード gap56） */
.lfv__row{display:flex;align-items:flex-start;justify-content:space-between;width:100%;max-width:1380px;margin-inline:auto;padding:0 90px}
.lfv__main{display:flex;flex-direction:column;align-items:flex-start;gap:56px;width:720px}
.lfv__title{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lfv__label{display:flex;align-items:center;gap:8px;font-size:var(--fs-h4);font-weight:500;line-height:1.6;letter-spacing:.24px;white-space:nowrap}
.lfv__label img{width:17px;height:10px;flex:none}
.lfv__en{font-family:var(--font-en);font-weight:700;font-size:100px;line-height:1;white-space:nowrap;font-feature-settings:normal}
.lfv__lead{width:100%;font-size:var(--fs-body-m);font-weight:400;line-height:2;letter-spacing:.16px}
/* タイトル小（フォーム系）: 英ラベル Lato SemiBold 20px ＋ 36px見出し */
.lfv__row--s{justify-content:flex-end;gap:64px}
.lfv__main--s{flex:1 0 0;min-width:1px;width:auto;gap:24px;padding-right:90px}
.lfv__title--s{gap:2px;width:100%}
.lfv__label--en{font-family:var(--font-en);font-weight:600;font-size:20px;letter-spacing:.2px;font-feature-settings:normal}
.lfv__h1{width:100%;font-size:var(--fs-concept);font-weight:500;line-height:1.6;letter-spacing:1.44px}

/* --- A-7 下層タイトル出現: 和ラベル→英大見出し→リード文の順に、左から右へグラデーション（#1C222B→#01A0EA→透明）が流れて
   最後は #1C222B の単色で止まる。JS不要のCSSアニメでロード直後に自動再生（LCPを待たせない）。
   仕組み: 文字を background-clip:text で塗り、幅250%のグラデ画像を background-position 100%→0% へ動かす。
   タイトル小（.lfv__h1 / .lfv__label--en）も同じ扱い。reduced-motion では animation.css §6 で単色に固定 --- */
@keyframes lfv-text-in{from{background-position:100% 0}to{background-position:0 0}}
.lfv__label,.lfv__en,.lfv__lead,.lfv__h1{
  color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(90deg,var(--c-text) 0%,var(--c-text) 40%,var(--c-main2) 48%,rgba(1,160,234,0) 56%,rgba(1,160,234,0) 100%);
  background-size:250% 100%;background-repeat:no-repeat;background-position:0 0;
  animation:lfv-text-in 1.1s var(--ease-out-quint,ease) both
}
.lfv__label{animation-delay:.1s}
.lfv__en,.lfv__h1{animation-delay:.25s}
.lfv__lead{animation-delay:.5s}

/* ===== 下層共通（company / recruit で共用。2026-09-15 に page-company.css から移動） ===== */
/* --- 下層FV 写真ありバリアント（Component 14「写真あり」 14294:11451）: h1000 / 2重グラデ＋テクスチャ(luminosity 30%) / 写真1440×628を下端に --- */
.lfv--photo{height:1000px;padding-bottom:0;background:linear-gradient(176.04deg,#fff 4.5265%,#f0faff 50%)}
.lfv--photo .lfv__bg img{object-position:center;opacity:.3}
.lfv--photo .lfv__bg::after{background:linear-gradient(157.3deg,#fff 16.393%,rgba(240,250,255,0) 52.653%)}
/* 写真: 元画像(2000×872)は左上に黒い斜めカット（(0,208)→(2000,0)＝高さの23.85%）が焼き込まれている。
   箱を画像と同じ比率(1440:628)で幅に追従させ、斜めの clip-path も同じ比率(24.2%)で切る＝どの幅でも図形と画像が一体で可変し、黒が出ない。
   1441px以上は高さ628固定＋cover（幅に合わせて拡大され上端が切れる＝黒い部分は箱の外）。img は常に下端基準で配置する */
.lfv__photo{position:absolute;left:0;bottom:0;width:100%;height:auto;aspect-ratio:1440/628;clip-path:polygon(0 24.2%,100% 0,100% 100%,0 100%);pointer-events:none}
.lfv__photo img{width:100%;height:100%;object-fit:cover;object-position:center bottom;max-width:none}
@media (min-width:1441px){.lfv__photo{height:628px;aspect-ratio:auto}}
/* ページ内ナビ（白カード px32 pt20 pb28 / 装飾16px角 左下・右上） */
.lfv__side{display:flex;align-items:center;flex:none;padding-top:117px}
.pnav{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:20px 32px 28px;background:var(--c-base)}
.pnav::before,.pnav::after{content:"";position:absolute;width:16px;height:16px;background:var(--c-main2)}
.pnav::before{left:-16px;bottom:0}
.pnav::after{right:-16px;top:-16px}
.pnav li{width:100%}
.pnav__text{min-width:100px}
/* リンク幅は Figma 固定162（文字100＋gap50＋矢印12）。文字が100を超えるページ（recruit「福利厚生・働き方」105）でも幅を変えず space-between で詰める */
.pnav__link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:162px;padding:12px 0;border-bottom:1px solid var(--c-border2);font-size:14px;font-weight:500;line-height:1.2;letter-spacing:.14px;white-space:nowrap}
.pnav__arrow{width:12px;height:12px;flex:none;transform:rotate(90deg)}
.pnav__arrow .ic-bar{fill:var(--c-main2)}
.pnav__arrow .ic-chev{fill:none;stroke:var(--c-main);stroke-width:1.3}

/* --- 共通小見出し「Title」（Figma 14310:12059/12060）: 英 Lato SemiBold 16px lh1 sub色 ＋ 和 36px medium lh1.6 ls1.44 / gap8 --- */
.ttl{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ttl__en{font-family:var(--font-en);font-weight:600;font-size:var(--fs-h2-en2);line-height:1;color:var(--c-text-sub);white-space:nowrap;font-feature-settings:normal}
.ttl__jp{font-size:var(--fs-concept);font-weight:500;line-height:1.6;letter-spacing:1.44px;white-space:nowrap}

/* --- 下層フッター差分: Recruitの重なりが無いので pt100 --- */
.contact-footer--lower{padding-top:var(--sp-under-btn2)}
.contact-footer--lower .footer__top{padding-top:0;border-top:0}   /* 下層はContactとフッターの間に罫線なし（Figma 14486:42322） */

/* --- 下層共通: セクション見出し（英大見出し85px＋和ラベル）は base の .sec-title を流用。本文コンテナ --- */
.l-section{width:100%;padding:0 var(--pad-side)}
.l-inner{width:100%;max-width:1200px;margin-inline:auto}

/* ===== SP（768px以下）: 下層共通。SPカンプ無し → TOP-SP のルール（左右24px・SPトークン・1カラム）から導出 ===== */
@media (max-width:768px){
  .lfv{padding:89px var(--sp-side-m) 48px;gap:8px}            /* ヘッダー65px＋24px */
  .lfv--s{padding-bottom:40px}
  .lfv__inner{gap:8px}
  .lfv--s .lfv__inner{gap:32px}
  .breadcrumb{flex-wrap:wrap;justify-content:flex-start;gap:8px 10px}
  .breadcrumb li{gap:10px;padding:2px 0;font-size:11px}
  .breadcrumb li+li::before{width:10px}
  .lfv__row{flex-direction:column;align-items:flex-start;gap:32px;max-width:none;padding:0}
  .lfv__main{width:100%;gap:32px}
  .lfv__label{font-size:var(--fs-h4);letter-spacing:.2px}
  .lfv__en{font-size:var(--fs-h2-en)}
  .lfv__lead{line-height:1.8}
  .lfv__row--s{gap:32px}
  .lfv__main--s{padding-right:0;gap:16px}
  .lfv__label--en{font-size:16px}
  .lfv__h1{letter-spacing:1.12px}
  .l-section{padding:0 var(--sp-side-m)}
  /* 下層共通（FV写真あり・ページ内ナビ・小見出し）の SP */
  /* --- FV写真あり: 高さ固定を解除し、写真は本文の下に全幅で流し込む（TOP-SP Company の「文→写真」構図） --- */
  .lfv--photo{height:auto;padding-bottom:0}
  /* 写真は画像比率のまま全幅（最小504.46px＝375幅で高さ220）。横に余る分は中央基準で .lfv の overflow:hidden に切らせる＝黒い斜めカットが出ない */
  .lfv__photo{position:relative;order:2;left:auto;bottom:auto;width:max(calc(100% + var(--sp-side-m) * 2),504.46px);height:auto;aspect-ratio:1440/628;margin:24px 0 0 calc(50% - max(calc(100% + var(--sp-side-m) * 2),504.46px) / 2);clip-path:polygon(0 24.2%,100% 0,100% 100%,0 100%)}
  .lfv__photo img{object-position:center bottom}
  /* ページ内ナビ: 右カラム→本文の下に全幅の白カード（縦リスト） */
  .lfv__side{width:100%;padding-top:0}
  .pnav{width:100%;padding:8px 20px 12px}
  .pnav__link{gap:24px;width:100%;padding:12px 0}
  .pnav li:last-child .pnav__link{border-bottom:0}
  .ttl__jp{white-space:normal;letter-spacing:1.12px}
}