/* =====================================================================
   /technologies/ 用フッター（/technologies/recruit/ の .d-ft を移植）

   出自: technologies/recruit/css/plan-d.css の 947-956 / 1037 / 1369 行
   方針: plan-d.css は :root と `*` / `a` / `img` へのグローバルリセットを持つため
         **丸ごと読み込まない**。フッターに必要な変数と規則だけを `.d-ft` に
         スコープして複製する。common/css/main.css（サイト共通）には手を入れない。

   ── main.css 環境との差分を埋める補正（recruit 側では .d-body が担っていた分） ──
   (a) main.css:303 `body { letter-spacing:.05em; font-weight:500; font-feature-settings:"palt" }`
       が継承で入る。recruit の .d-body には無いので打ち消す。
   (b) main.css にグローバルな `a{text-decoration:none}` が無く、既定の下線が出る。
       （既存フッターは `footer .section--footer-nav .footer-nav li a` 側で消していた）
   (c) main.css:466 `a:hover { color:#a960e8 }`（min-width:960px）が .d-ft のリンクにも
       当たる。元の .d-ft は hover で色を変えず opacity だけなので打ち消す。
   (d) main.css:10657 の `* { transition: transform .5s, opacity .25s }` が入る。
       `[data-emergence]` 属性が無ければ描画は変わらないが、余計な遷移は切る。
   (e) recruit の .d-body は -webkit-font-smoothing:antialiased。main.css には無い。
   ===================================================================== */

.d-ft {
  /* 変数は :root ではなく .d-ft に閉じる。他ページ・他要素へ漏らさない */
  --d-core-black: #0E0B12;
  --d-off-white: #EDE9F4;
  --d-fg2: #9B93AD;              /* plan-d.css:1037 で .d-ft 用に上書きされていた値 */
  --d-g1: 8px;
  --d-g2: 24px;
  --d-g3: 32px;
  --d-g4: 40px;
  --d-g5: 100px;
  --d-side: 40px;
  --d-w: 1360px;
  --d-d1: .3s;
  --d-ease: cubic-bezier(.62, .16, .13, 1.01);
  --d-mono: "Azeret Mono", ui-monospace, SFMono-Regular, "Noto Sans JP", "Hiragino Sans", monospace;

  position: relative;
  z-index: 1;
  background: var(--d-core-black);
  color: var(--d-off-white);
  padding: var(--d-g5) var(--d-side) 72px;

  /* (a) body 継承の打ち消し */
  letter-spacing: normal;
  font-weight: 400;
  font-feature-settings: normal;
  /* (f) main.css:303 `body { word-wrap: break-word }` の継承。recruit 側は normal。
     法務行の hr-assistant@vacancorp.com が 390px で違う位置で折れる原因だった */
  overflow-wrap: normal;
  word-wrap: normal;
  /* (e) */
  -webkit-font-smoothing: antialiased;
}

/* (b) plan-d.css の `a { color: inherit; text-decoration: none; }` の代替 */
.d-ft a { color: inherit; text-decoration: none; }
.d-ft ul { list-style: none; }
/* (h) plan-d.css:1301 の `.d-body :where(h1,h2,h3,p,li,dd,dt,summary,figcaption,.d-focus a)`
   による和文の折り返し制御。これが無いと 390px でタグラインが
   「生成AI×データ活用で、企画か／ら実装…」と文節を無視して折れる */
.d-ft :where(h3, p, li) {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* (d) 余計な transform/opacity 遷移を切る。`none` ではなく `all 0s` にしておくと
   recruit 側（宣言なし＝ブラウザ既定）と computed 値が完全一致する */
.d-ft h3, .d-ft p, .d-ft li, .d-ft div, .d-ft span, .d-ft svg, .d-ft svg *,
.d-ft a { transition: all 0s; }

.d-ft__in {
  max-width: var(--d-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--d-g4);
}
/* (g) ロゴは元は inline SVG で、行ボックスの高さ（= 継承 line-height と欧文フォントの
   metrics）に位置が依存していた。main.css は body に line-height:1.8 を敷くため、
   そのままだと SVG が 1px 下がり、直後の p が 7.8px 下がる。
   ここでは `normal` を再現するのではなく **行ボックスから切り離して**
   フォント metrics 非依存にする。recruit の実測値（SVG上端=コンテンツ上端 /
   SVG下端から p まで 11px）をそのまま固定するので描画は完全に一致し、
   かつ Archivo の読み込み有無や OS のフォント差に影響されない */
.d-ft__brand svg { display: block; }
.d-ft__brand p {
  margin-top: 11px;   /* recruit 実測: SVG下端 118 → p上端 129（= var(--d-g1) 8px + 行ボックス残り 3px） */
  font-family: var(--d-mono);
  font-size: 11px;
  line-height: 18px;
  color: var(--d-fg2);
}
.d-ft h3 {
  font-family: var(--d-mono);
  font-size: 11px;
  line-height: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--d-fg2);
  font-weight: 400;
}
.d-ft ul { margin-top: var(--d-g1); }
.d-ft li a {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--d-mono);
  font-size: 12px;
  line-height: 20px;
  transition: opacity var(--d-d1) var(--d-ease);
}
/* (c) hover は opacity のみ。色は .d-ft から継承した off-white を維持する */
.d-ft li a:hover { opacity: .62; color: inherit; }

.d-ft__legal {
  max-width: var(--d-w);
  margin: var(--d-g3) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--d-g2);
  padding-top: var(--d-g2);
  border-top: 1px solid rgba(237, 233, 244, .14);
  font-family: var(--d-mono);
  font-size: 11px;
  line-height: 16px;
  color: var(--d-fg2);
}
.d-ft__legal a { border-bottom: 1px solid currentColor; }
/* (c) 同上。法務リンクは元デザインどおり hover で変化させない */
.d-ft__legal a:hover { color: inherit; }

@media (max-width: 1023px) {
  /* plan-d.css:1146 の `:root { --d-side: 20px }` 相当。:root ではなく .d-ft に閉じる */
  .d-ft { --d-side: 20px; }
  .d-ft__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* plan-d.css:1369 — 法務リンクのタップ領域 44px（WCAG 2.5.8） */
  .d-ft__legal a { display: inline-flex; align-items: center; min-height: 44px; }
}