/* TOP reference: shell-top-reference/assets/top-expr.css. Common header/footer only. */
.site-header, .site-footer { color:var(--c-ink); }
/* ---------- ヘッダー：入口を「HBCで働く／仕事と育成／求人を探す」と「応募・相談」に整理 ----------
   中身は開くメニュー（details/summary）。クリック・タップ・Enter/Space で開き、JS で Esc・外側のクリック・フォーカスが外れた時に閉じる。
   指を乗せただけでは開かない（hover に頼らない）。960px以下は既存のスマホのメニュー（site.js）の中で同じまとまりを開閉する */
.tx-gnav { gap: 4px; }
.tx-menu { position: relative; }
.tx-menu > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 700; color: var(--yh-ink); white-space: nowrap; cursor: pointer; list-style: none; }
.tx-menu > summary::-webkit-details-marker { display: none; }
.tx-menu > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s var(--ease); }
.tx-menu[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.tx-menu > summary:hover, .tx-menu[open] > summary { background: var(--c-tint); color: var(--c-deeper); }
.tx-menu > summary:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }
.tx-menu__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; display: grid; gap: 2px; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--yh-line); border-radius: 12px; box-shadow: 0 12px 28px rgba(16, 41, 44, 0.14); }
.tx-menu__panel a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--yh-ink); white-space: nowrap; text-decoration: none; transition: background-color 0.15s var(--ease); }
.tx-menu__panel a:hover, .tx-menu__panel a:focus-visible { background: var(--c-tint); color: var(--c-deeper); }
.tx-menu__panel a:focus-visible { outline: 3px solid var(--c-orange); outline-offset: -3px; }
.tx-gnav > .btn--apply { margin-left: 8px; }

/* ---------- フッター：意味別の4つのまとまり（会社を知る／働き方・待遇／仕事・育成／応募）。PC 4列・スマホ 2列 ---------- */
.site-footer.tx-footer { padding-top: 44px; }
.tx-footer__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; padding-bottom: 26px; border-bottom: 1px solid var(--c-line); }
.tx-footer__top .footer-tel { margin: 0; }
.tx-footer__top .v5-sns { margin: 0; }
.tx-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; padding-top: 26px; }
.tx-footer__h { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--c-main); font-size: 14px; font-weight: 800; line-height: 1.4; letter-spacing: 0.04em; color: var(--c-deeper); }
.tx-footer__grp ul { display: grid; gap: 0; margin: 0; padding: 0 0 0 13px; list-style: none; }
.tx-footer__grp a { display: inline-block; padding: 6px 0; font-size: 14px; line-height: 1.5; color: var(--c-ink2); }
.tx-footer__grp a:hover, .tx-footer__grp a:focus-visible { color: var(--c-deeper); }

@media (max-width: 960px) {
  .tx-menu { border-bottom: 1px solid var(--c-line); }
  .tx-menu > summary { display: flex; justify-content: space-between; width: 100%; min-height: 52px; padding: 14px 4px; border-radius: 0; font-size: 16px; }
  .tx-menu > summary:hover, .tx-menu[open] > summary { background: transparent; }
  .tx-menu__panel { position: static; min-width: 0; padding: 0 0 10px 10px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .tx-menu__panel a { padding: 12px 8px; font-size: 15px; white-space: normal; }
  .tx-gnav > .btn--apply { margin-left: 0; }
}
@media (max-width: 760px) {
  .tx-footer__top { grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; }
  .tx-footer__top .v5-sns { grid-column: 1 / -1; }
  .tx-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}


.site-footer .footer-tel b { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tx-menu > summary::after, .tx-menu__panel a { transition: none !important; } }

/* footer-links-fix-20261015 */
.tx-footer__grp a.tx-footer__ext { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tx-footer__ext-icon { flex: none; font-size: 12px; line-height: 1; }