/* ==========================================================================
   CHS 採用サイト 共通スタイル
   使い方: 各ページの <helmet> 内で
     <link rel="stylesheet" href="assets/site.css">
   ========================================================================== */

/* ---------- レスポンシブの土台 ---------- */
/* overflow-x:hidden は position:sticky を無効化するため clip を使う */
html { max-width: 100%; overflow-x: clip; }
/* ページ側 inline の height:100% が body をスクロールコンテナにしてしまい
   window の scroll イベントが飛ばなくなるため、明示的に解除する。 */
body { max-width: 100%; overflow-x: clip; height: auto !important; min-height: 100%; overflow-y: visible !important; }
img { max-width: 100%; }

.pc-view { display: block; width: 100%; }
.sp-view { display: none;  width: 100%; }
@media (max-width: 1023px) {
  .pc-view { display: none; }
  .sp-view { display: block; }
}

/* ---------- グローバルナビ（常時表示） ----------
   対象: 各ページのヘッダー <nav> に class="gnav" を付与する。
   初期はヒーロー画像に重なる透明状態。スクロールすると
   site.js が body に .is-scrolled を付け、ネイビー背景に切り替わる。 */
.gnav {
  position: fixed !important;
  /* 各ページのインライン top/left/right（スマホ用ナビの 12px/22px インセット）に
     負けて帯状に浮いてしまうため !important で全幅に固定する。 */
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 100 !important;
  background: rgba(8, 17, 40, .82);
  transition: background .32s ease, box-shadow .32s ease, height .32s ease;
  backdrop-filter: blur(8px);
}
body.is-scrolled .gnav {
  background: rgba(8, 17, 40, .96);
  box-shadow: 0 6px 24px rgba(10, 23, 56, .28);
  backdrop-filter: blur(10px);
}
/* スマホは全幅固定にしたぶん、内側の余白をCSS側で持たせる */
@media (max-width: 1023px) {
  .gnav { padding: 0 22px !important; box-sizing: border-box !important; }
}

/* PC版のヘッダー高さ（スクロール後は少し縮める） */
body.is-scrolled .pc-view .gnav { height: 68px !important; }

/* ヘッダーが fixed になるぶん、直後のヒーローに余白は不要（重ねる前提）。
   ヒーローを持たないページで使う場合は .has-gnav-offset を本文側に付ける。 */
.has-gnav-offset { padding-top: 84px; }
@media (max-width: 1023px) { .has-gnav-offset { padding-top: 64px; } }

/* ---------- ハンバーガーメニュー（スマホ） ---------- */
.gnav-toggle { cursor: pointer; }
.gnav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 15, 40, .97);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 32px 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.gnav-drawer.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.gnav-drawer a {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  color: #fff;
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.gnav-drawer a:last-of-type { border-bottom: none; }
.gnav-drawer .gnav-close {
  position: absolute;
  top: 22px; right: 24px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff; cursor: pointer;
  background: none; border: none;
}
body.is-drawer-open { overflow: hidden; }

/* ---------- 職種詳細の右カラム追従 ----------
   対象: 右カラムのラッパーに class="sticky-aside" を付与する。 */
.sticky-aside {
  position: sticky;
  top: 104px;
  align-self: start;
}
@media (max-width: 1023px) {
  .sticky-aside { position: static; top: auto; }
}

/* ---------- スクロール連動フェードイン ----------
   site.js が [data-reveal] を監視して .is-in を付ける。 */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- 共通ユーティリティ ---------- */
a { color: inherit; }
a:hover { color: #1c74c4; }
.gnav a:hover { color: #8fe0f4; }
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(15, 30, 61, .14); }

/* ---------- VOICES カルーセル（スクロールバー非表示＋UI操作） ---------- */
.voice-scroller{scrollbar-width:none;-ms-overflow-style:none}
.voice-scroller::-webkit-scrollbar{display:none;width:0;height:0}
.voice-ctl{margin-top:26px;display:flex;align-items:center;gap:24px}
.voice-track{position:relative;flex:1;height:3px;border-radius:999px;background:rgba(15,30,61,.12);overflow:hidden}
.voice-fill{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#1c74c4,#57c9eb 55%,#f5ac35);width:30%;transition:left .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.voice-btns{display:flex;gap:12px;flex:none}
.voice-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(15,30,61,.22);background:#fff;color:#0f1e3d;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s ease,background .28s ease,box-shadow .28s ease}
.voice-btn:hover:not(:disabled){transform:translateY(-2px);border-color:#f07f13;background:#f07f13;color:#fff;box-shadow:0 12px 24px rgba(240,127,19,.28)}
.voice-btn:active:not(:disabled){transform:translateY(0) scale(.96)}
.voice-btn:disabled{opacity:.32;cursor:default}
.voice-btn svg{width:19px;height:19px}
@media (prefers-reduced-motion: reduce){ .voice-fill,.voice-btn{transition:none} }

/* ---------- SPヘッダー：社名ロゴと採用TOP／ハンバーガーの重なり回避 ---------- */
@media (max-width:1400px){
  .sp-view .gnav a span{display:none !important}
  .sp-view .gnav a img{max-width:62vw;height:auto}
  .sp-view .gnav [data-gnav-toggle]{flex:none}
}

/* ---------- 共通フォント指定 ----------
   各ページの <style> 直書きで重複していたものを集約（値は元のまま）。 */
.hb { font-family: 'Noto Sans JP', sans-serif; }
.pp { font-family: 'Poppins', sans-serif; }

/* ---------- スムーススクロール（各ページ共通のJSロジックが参照） ---------- */
#scroll-content.smooth-fixed { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; }