/* header-recruit — 本体サイト C案のヘッダーを踏襲（2026-10-18）
   出典: Cuolega-Site css/base.css .site-header（fixed、80、.header-inner 1440 / padding 136、ナビ gap 32、14 / 500 / 1.4px、headerDrop −14px → 0 を 0.9s expo、項目 0.05s ずつ）、
         css/c.css .site-header--b（紙 rgba(251,250,248,.92) → .85 ＋ blur 14）、.ts-mask（縦ロール ±105%、0.5s expo）。
   退避 0.6 / 復帰 0.45 は runtime の [data-header-hide]。左右は本文の内側（1440 で 120）に揃える */
/* 最上部は地なし（layerx: 文字とピルだけが画面に乗る）。スクロールで紙 85% ＋ blur 14（C案） */
.rch { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 80px; color: var(--cds-text); background: transparent; transform: translateY(0);
  transition: background-color 0.4s ease, transform 0.45s var(--cds-ease-out); }
/* ヘッダー上端の 3px の線: hover した項目の位置と幅へ滑る（layerx 実測: left / width .6s cubic-bezier(.47,.16,.24,1)、外すと幅 0）。runtime が --x / --w を書く */
.rch__line { position: absolute; top: 0; left: var(--x, 0px); width: var(--w, 0px); height: 3px; background: var(--cds-accent-bright, var(--cds-accent)); transition: left 0.6s cubic-bezier(0.47, 0.16, 0.24, 1), width 0.6s cubic-bezier(0.47, 0.16, 0.24, 1); pointer-events: none; }
.rch.is-scrolled { background: color-mix(in srgb, var(--cds-bg) 85%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.rch.is-hidden { transform: translateY(-100%); transition-duration: 0.4s, 0.6s; }
/* 左右の余白は「画面幅 − 本文 1200」の半分（ガターより狭くしない）。以前は max-width 1440 の箱の中で % を画面幅から取っていたため、1440 より広い画面でロゴとナビが中央に寄って詰まった（依頼側 2026-10-18「ロゴとナビが近すぎる」） */
/* 並び（layerx）: ロゴ → 48 → ナビ（項目の間 28）、導線は右端 */
.rch__in { display: flex; align-items: center; gap: 48px; height: 100%; margin: 0; padding-inline: max(var(--cds-gutter), calc((100vw - var(--cds-content)) / 2)); }
/* ロゴ: C案のロゴタイプ SVG（108.614×14.021）。文字のときは英字 700 / 0.18em */
.rch__brand { display: block; flex: none; line-height: 0; color: var(--cds-text); }
.rch__brand img { display: block; width: 108.614px; height: 14.021px; }
.rch__brand-t { display: block; font-family: var(--cds-font-en); font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: 0.18em; white-space: nowrap; }
/* 読込: ロゴとナビが −14px から降りる（C案 headerDrop 0.9s、項目 0.05s ずつ）。FV の見出しのあと（1.0s）に始める */
.is-js .rch__brand, .is-js .rch__nav a, .is-js .rch__cta > * { opacity: 0; transform: translateY(-14px); animation: rchDrop 0.9s var(--cds-ease-out) both; animation-delay: calc(1s + var(--i, 0) * 0.05s); }
.is-js .rch__brand { animation-delay: 1s; }
.is-js .rch__cta > .btn { animation-delay: calc(1s + 0.45s); }
@keyframes rchDrop { to { opacity: 1; transform: none; } }
.is-static .rch__brand, .is-static .rch__nav a, .is-static .rch__cta > * { animation: none; opacity: 1; transform: none; }
/* ナビ: 14 / 500 / 0.1em（C案 1.4px）、gap 32。hover は文字の縦ロール（上の 1 枚が −105% へ、下から同じ文字が 0.5s expo で入る）。現在地は透明度 */
.rch__nav { display: flex; gap: 28px; }
/* ナビは英字（依頼側 2026-10-18）。C案と同じ表示語の書体（Chillax）14 / 500 / 0.1em、uppercase */
.rch__nav a, .rch__link { position: relative; display: block; padding: 4px 0; font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cds-text); white-space: nowrap; }
/* 導線のピル: 枠（ghost）と明るい差し色の塗り（bright）。bright の文字は白、hover で墨に */
.rch__cta .btn { font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.rch__cta .btn--ghost { font-family: var(--cds-font); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: none; }
/* ENTRY の塗りは濃いエメラルド --cds-accent（#00A9AD、FROM DAY ONE と同じ）。明るい #00EDD4 は白い文字と相性が悪い（依頼側 2026-10-18「新しく色は作らない」） */
.rch__btn--bright { color: #fff; }
.rch__btn--bright::after { background: var(--cds-accent); border-color: var(--cds-accent); }
@media (hover: hover) { .rch__btn--bright:hover::after { background: var(--cds-ink); border-color: var(--cds-ink); } }
.rch__nav a { opacity: 0.78; transition: opacity 0.7s var(--cds-ease-out); }
.rch__nav a.is-active { opacity: 1; }
.rch__roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.2; }
.rch__ts-a, .rch__ts-b { display: block; transition: transform 0.5s var(--cds-ease-out); }
.rch__ts-b { position: absolute; top: 0; left: 0; transform: translateY(105%); }
@media (hover: hover) {
  .rch__nav a:hover { opacity: 1; }
  .rch__nav a:hover .rch__ts-a, .rch__link:hover .rch__ts-a { transform: translateY(-105%); }
  .rch__nav a:hover .rch__ts-b, .rch__link:hover .rch__ts-b { transform: translateY(0); }
}
/* 導線: 文字のリンク ＋ 塗りのピル（base .btn--s 40px） */
.rch__cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.rch__cta .btn--s { min-height: 40px; padding: 0 24px; }
.rch__menu, .rch-menu { display: none; }
@media (prefers-reduced-motion: reduce) { .is-js .rch__brand, .is-js .rch__nav a, .is-js .rch__cta > * { animation: none; opacity: 1; transform: none; } .rch__ts-a, .rch__ts-b { transition: none; } }
@media (max-width: 1100px) {
  .rch__nav { display: none; }
  .rch__cta { margin-left: auto; }
  .rch__cta .rch__link, .rch__cta .btn--ghost { display: none; }
  .rch__menu { position: relative; display: block; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: none; cursor: pointer; }
  .rch__bar { position: absolute; right: 12px; width: 20px; height: 1.5px; background: var(--cds-text); transition: transform 0.45s var(--cds-ease-out), opacity 0.3s; }
  .rch__bar:nth-child(1) { top: 15.25px; } .rch__bar:nth-child(2) { top: 21.25px; } .rch__bar:nth-child(3) { top: 27.25px; }
  .rch__menu[aria-expanded="true"] .rch__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .rch__menu[aria-expanded="true"] .rch__bar:nth-child(2) { opacity: 0; }
  .rch__menu[aria-expanded="true"] .rch__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  /* 全面の地に大きなリンク（和文 ＋ 小さな英字）、項目は .05s ずつ。下に導線 2 つ */
  .rch-menu { display: flex; flex-direction: column; justify-content: flex-end; gap: 40px; position: fixed; inset: 0; z-index: 45; padding: 96px var(--cds-gutter) 40px; background: var(--cds-bg); color: var(--cds-text); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--cds-ease-out); }
  .rch-menu.is-open { opacity: 1; pointer-events: auto; }
  .rch-menu__nav { display: grid; gap: 4px; }
  .rch-menu__nav a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--cds-rule); font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cds-text); transform: translateY(12px); opacity: 0; transition: transform 0.6s var(--cds-ease-out) calc(var(--i, 0) * 0.05s), opacity 0.6s var(--cds-ease-out) calc(var(--i, 0) * 0.05s); }
  .rch-menu__nav a small { font-family: var(--cds-font); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--cds-text-secondary); }
  .rch-menu__cta .btn--ghost { display: inline-flex; }
  .rch-menu.is-open .rch-menu__nav a { transform: none; opacity: 1; }
  .rch-menu__cta { display: grid; gap: 12px; }
  .rch-menu__cta .rch__link { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--cds-ink); border-radius: var(--cds-r-btn); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; opacity: 1; animation: none; transform: none; }
  .rch-menu__cta .btn { width: 100%; min-height: 52px; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 767px) {
  .rch { height: 64px; }
  .rch__in { gap: 16px; }
  .rch__brand img { width: 96px; height: auto; }
  .rch__cta .btn--s { min-height: 36px; padding: 0 16px; font-size: 12px; }
  .rch-menu { padding: 80px var(--cds-gutter) 32px; gap: 32px; }
}