/* 採用サイト専用ヘッダー（2026-11-03 担当者が案H1を選択）。
   企業サイトのメニューや「採用情報」ボタンは置かない（採用サイトは企業サイトから別タブで開く別サイト扱い）。
   構成: 企業ロゴ＋「RECRUITING SITE」/ 採用サイトのメニュー6項目 / ENTRY（押すと応募先3つ）。
   スマホ・タブレット幅（1100px 未満）はメニューをハンバーガーにまとめる。 */
:root{ --rh-h: 84px; }
.rh{ position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--corp-line, #d9e5e9); }
.rh-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--rh-h); padding: 0 var(--gutter, 40px); }
.rh-logo{ display: flex; align-items: center; gap: 14px; color: var(--corp-ink, #273038); text-decoration: none; flex-shrink: 0; }
.rh-logo img{ display: block; width: 150px; height: auto; }
.rh-logo span{ display: flex; flex-direction: column; line-height: 1.15; padding-left: 14px; border-left: 1px solid var(--corp-line, #d9e5e9); }
.rh-logo span i{ font-style: normal; font-family: var(--corp-display); font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--corp-cyan-ink, #0a7a96); }
.rh-logo span small{ margin-top: 2px; font-size: 10.5px; color: var(--corp-slate, #304857); }
.rh-nav{ display: flex; align-items: center; gap: 4px; margin-left: auto; }
.rh-nav a{ padding: 10px 12px; border-radius: 8px; color: var(--corp-ink, #273038); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.rh-nav a:hover{ background: var(--corp-mist, #f4f8f9); color: var(--corp-blue, #0069aa); }
.rh-nav a[aria-current="page"]{ color: var(--corp-blue, #0069aa); box-shadow: inset 0 -2px 0 var(--corp-cyan, #2ab7d9); border-radius: 0; }
/* ENTRY */
.rh-entry{ position: relative; flex-shrink: 0; }
.rh-entry > summary{ display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 24px; border-radius: 999px; background: var(--corp-recruit, #ff6b43); color: #fff; font-family: var(--corp-display); font-size: 15px; font-weight: 500; letter-spacing: .08em; list-style: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.rh-entry > summary::-webkit-details-marker{ display: none; }
.rh-entry > summary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,107,67,.35); }
.rh-entry > summary:focus-visible{ outline: 3px solid var(--corp-cyan, #2ab7d9); outline-offset: 2px; }
.rh-entry-list{ position: absolute; right: 0; top: calc(100% + 12px); width: min(360px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--corp-line, #d9e5e9); border-radius: 14px; background: #fff; box-shadow: 0 20px 50px rgba(15,59,88,.18); }
.rh-entry-list::before{ content: ""; position: absolute; right: 28px; top: -7px; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--corp-line, #d9e5e9); border-top: 1px solid var(--corp-line, #d9e5e9); transform: rotate(45deg); }
.rh-entry-list a{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 12px 14px; border-radius: 10px; color: var(--corp-ink, #273038); text-decoration: none; }
.rh-entry-list a:hover{ background: #fff1ec; }
.rh-entry-list a small{ font-family: var(--corp-display); font-size: 11px; letter-spacing: .12em; color: var(--corp-cyan-ink, #0a7a96); }
.rh-entry-list a span{ grid-column: 1; font-size: 14px; font-weight: 700; }
.rh-entry-list a i{ grid-column: 2; grid-row: 1 / 3; font-style: normal; color: var(--corp-recruit, #ff6b43); }
/* ハンバーガー */
.rh-toggle{ display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--corp-ink, #273038); border-radius: 50%; background: #fff; cursor: pointer; padding: 0; }
.rh-toggle i{ position: relative; display: block; width: 18px; height: 2px; background: var(--corp-ink, #273038); transition: background .2s ease; }
.rh-toggle i::before, .rh-toggle i::after{ content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--corp-ink, #273038); transition: transform .25s ease, top .25s ease; }
.rh-toggle i::before{ top: -6px; } .rh-toggle i::after{ top: 6px; }
.rh-toggle[aria-expanded="true"] i{ background: transparent; }
.rh-toggle[aria-expanded="true"] i::before{ top: 0; transform: rotate(45deg); }
.rh-toggle[aria-expanded="true"] i::after{ top: 0; transform: rotate(-45deg); }
.rh-drawer{ display: none; }
/* 1141〜1400px は項目が入りきらず ENTRY が画面外にはみ出していたので、ロゴ横の「採用サイト」表記を外し、メニューの間隔を詰める */
@media (max-width: 1400px){ .rh-logo span{ display: none; } .rh-nav a{ padding: 10px 8px; font-size: 13px; } }
@media (max-width: 1140px){
  .rh-nav{ display: none; }
  .rh-toggle{ display: inline-flex; }
  .rh-entry > summary{ height: 42px; padding: 0 18px; font-size: 14px; }
  .rh-drawer[hidden]{ display: none; }
  .rh-drawer{ display: block; border-top: 1px solid var(--corp-line, #d9e5e9); background: #fff; }
  .rh-drawer nav{ display: flex; flex-direction: column; padding: 8px var(--gutter, 20px) 20px; }
  .rh-drawer nav a{ display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--corp-line, #d9e5e9); color: var(--corp-ink, #273038); font-size: 15px; font-weight: 700; text-decoration: none; }
  .rh-drawer nav a::after{ content: "→"; color: var(--corp-cyan-ink, #0a7a96); }
  .rh-drawer nav a[aria-current="page"]{ color: var(--corp-blue, #0069aa); }
}
@media (max-width: 620px){
  :root{ --rh-h: 68px; }
  .rh-inner{ gap: 8px; }
  .rh-entry{ margin-left: auto; }
  .rh-logo img{ width: 118px; }
  .rh-logo span{ padding-left: 10px; }
  .rh-logo span{ display: none; }  /* 狭い幅はロゴだけ（RECRUITING SITE の文字は省く） */
  .rh-entry > summary{ height: 40px; padding: 0 14px; font-size: 13px; }
  .rh-toggle{ width: 40px; height: 40px; }
}