/* footer-editorial — 大きな出口 2 つ ＋ 索引 ＋ 規約、to-top 48 角
   出典: Cuolega C案 footer.site-foot（CONTACT US 74.63 ＋ 矢印 ＋ 下線 / RECRUIT 47.76 / ナビ 13.6 / to-top 48 角 白 → 灰）。
   このサイト用に: 出口 56 / 32（Manrope 300、字送り −0.02em）、下線は 1px、ナビは小文字 13px / 0.06em、to-top は文字色 → 文字色 72% のグラデ（モノトーン） */
/* 反転: .fed で入れ替え先を読み（--fed-bg ＝ 文字色、--fed-fg ＝ 地の色）、内側の .fed__in でトークンを書き換える。同じ要素で両方書くと var() が循環して無効になる */
.fed { padding: clamp(80px, 8.3333vw, 120px) 0 40px; background: var(--cds-bg); color: var(--cds-text-body); }
.fed--invert { --fed-bg: var(--cds-text); --fed-fg: var(--cds-bg); background: var(--fed-bg); }
.fed--invert .fed__in { --cds-bg: var(--fed-bg); --cds-text: var(--fed-fg); --cds-text-body: color-mix(in srgb, var(--fed-fg) 82%, transparent); --cds-text-secondary: color-mix(in srgb, var(--fed-fg) 62%, transparent); --cds-rule: color-mix(in srgb, var(--fed-fg) 16%, transparent); --cds-ink: var(--fed-fg); --cds-on-ink: var(--fed-bg); --cds-accent: var(--fed-fg); color: var(--cds-text-body); }
.fed__in > * { max-width: var(--cds-content); }
.fed__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px var(--cds-col-gap); align-items: start; padding-bottom: 56px; border-bottom: 1px solid var(--cds-rule); }
/* 出口（Cuolega: CONTACT US ＋ 矢印 ＋ 下線、RECRUIT は小さく下線なし） */
.fed__exits { display: grid; gap: 32px; justify-items: start; }
.fed__cta { display: inline-flex; align-items: center; gap: 24px; color: var(--cds-text); font-family: var(--cds-font-display, var(--cds-font-en)); font-weight: 300; letter-spacing: -0.02em; line-height: 1; transition: color 0.9s var(--cds-ease), border-color 0.9s var(--cds-ease); }
.fed__cta--1 { font-size: clamp(36px, 3.8889vw, 56px); padding-bottom: 20px; border-bottom: 1px solid var(--cds-text); }
.fed__cta--2 { font-size: clamp(24px, 2.2222vw, 32px); }
.fed__cta-a { width: 28px; height: 24px; }
.fed__cta-a svg { width: 28px; height: 24px; }
.fed__cta--2 .fed__cta-a, .fed__cta--2 .fed__cta-a svg { width: 20px; height: 17px; }
.fed__cta-a svg + svg { transform: translateX(-36px); opacity: 0; }
@media (hover: hover) {
  .fed__cta:hover { color: var(--cds-text-secondary); }
  .fed__cta--1:hover { border-color: var(--cds-text-secondary); }
  .fed__cta:hover .fed__cta-a svg { transform: translateX(36px); opacity: 0; transition-duration: 0.6s, 0.6s; }
  .fed__cta:hover .fed__cta-a svg + svg { transform: translateX(0); opacity: 1; transition-duration: 0.6s, 0.6s; }
}
/* 右: 索引（上）とブランド名（下） */
.fed__side { display: grid; gap: 56px; justify-items: end; align-content: space-between; height: 100%; }
.fed__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 28px; }
.fed__nav a, .fed__legal a { position: relative; padding: 6px 0; font-size: 13px; line-height: 1; letter-spacing: 0.06em; color: var(--cds-text-body); transition: color 0.5s var(--cds-ease); }
.fed__nav a::after, .fed__legal a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.9s var(--cds-ease); }
@media (hover: hover) {
  .fed__nav a:hover, .fed__legal a:hover { color: var(--cds-text); }
  .fed__nav a:hover::after, .fed__legal a:hover::after { transform: scaleX(1); transition-duration: 0.6s; }
}
.fed__brand { font-family: var(--cds-font-display, var(--cds-font-en)); font-weight: 500; font-size: 20px; line-height: 1; letter-spacing: 0.02em; color: var(--cds-text); white-space: nowrap; }
/* 下段: 規約（左）と ©（右）。右は to-top の 48 ＋ 間を空ける */
.fed__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; padding-right: 88px; }
.fed__copy { font-size: 12px; letter-spacing: 0.04em; color: var(--cds-text-secondary); }
.fed__legal { display: flex; gap: 28px; }
/* to-top（Cuolega: 48 角、↑。hover で矢印が上へ抜けて下から戻る。暗面の上の反転は runtime の on-dark）。地は文字色のベタ塗り（Cuolega のグラデは WF では使わない: 依頼側 2026-10-17） */
.to-top {
  position: fixed; z-index: 40; right: max(24px, calc(50vw - 680px)); bottom: 40px; width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 0; background: var(--cds-text); color: var(--cds-bg); cursor: pointer;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.6s var(--cds-ease), transform 0.6s var(--cds-ease), background 0.6s var(--cds-ease), color 0.6s var(--cds-ease);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
/* 反転したフッターの上では地の色のグラデに（runtime が [data-invert] の上で .on-dark を付ける） */
.to-top.on-dark { background: var(--cds-bg); color: var(--cds-text); }
.to-top__win { position: relative; display: block; width: 20px; height: 20px; overflow: hidden; }
.to-top__win svg { position: absolute; inset: 0; width: 20px; height: 20px; transition: transform 0.9s var(--cds-ease), opacity 0.9s var(--cds-ease); }
.to-top__win svg + svg { transform: translateY(24px); opacity: 0; }
@media (hover: hover) {
  .to-top:hover .to-top__win svg { transform: translateY(-24px); opacity: 0; transition-duration: 0.6s, 0.6s; }
  .to-top:hover .to-top__win svg + svg { transform: translateY(0); opacity: 1; transition-duration: 0.6s, 0.6s; }
}
@media (max-width: 960px) {
  .fed__grid { grid-template-columns: 1fr; gap: 48px; }
  .fed__side { justify-items: start; gap: 32px; height: auto; }
  .fed__nav { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .fed { padding: 64px 0 32px; }
  .fed__grid { padding-bottom: 40px; }
  .fed__exits { gap: 24px; }
  .fed__nav { gap: 4px 24px; }
  .fed__nav a, .fed__legal a { padding: 10px 0; }
  .fed__bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 0; }
  .to-top { display: none; }
}