@charset "utf-8";
/* =====================================================================
   採用サイト ヘッダー・ドロワー 共通スタイル（2026-10-09）
   部品 template-parts/recruit/header.php の唯一の CSS。採用 TOP（rc-top-wp.css の後）と下層（rc-common.css の直後）の両方で読む（10/08 の rc-bottom.css と同じ作り）。
   rc-common.css の §4（固定ヘッダー・PC のドロワー）・§12 のヘッダーのホバー・§13 の SP のヘッダー／ドロワー／短い画面の補正から、値を変えずに移した（2026-10-09）。
   変数は --rch-*（自前）。TOP は rc-common.css を読まないので、部品の中だけの最小の土台（下の 3）も持つ。下層では rc-common と同じ値・同じ詳細度なので何も変わらない。
   ===================================================================== */

/* ---------- 2. トークン ---------- */
.rc-site{--rch-serif:'Noto Serif JP',serif;--rch-sans:'Noto Sans JP',sans-serif;--rch-gold:#caaa6e;--rch-gold-btn:#dbc08c;--rch-gold-line:#c8a96e;--rch-ink:#1a1a1a;--rch-t-body:max(1.4rem, 13px);--rch-bar:7.2rem;--rch-safe:env(safe-area-inset-bottom, 0px)}

/* ---------- 3. 部品の中だけの土台（TOP のため） ---------- */
.rc-site :is(.site-header,.sp-drawer){font:500 var(--rch-t-body)/2.1 var(--rch-serif)}   /* 下層は body から継ぐ値と同じ（rc-common §3）。TOP の body は別の値なので、部品が自分で持って形をそろえる */
.rc-site :is(.site-header,.sp-drawer),.rc-site :is(.site-header,.sp-drawer) :where(*,*::before,*::after){box-sizing:border-box}
.rc-site :is(.site-header,.sp-drawer) :where(a){color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.rc-site .site-header :where(button){font:inherit;color:inherit;cursor:pointer;border-radius:0;-webkit-tap-highlight-color:transparent}
.rc-site :is(.site-header,.sp-drawer) :where(img){display:block;max-width:100%}
.rc-site .site-header :where(.p){position:absolute;width:calc(var(--w) * .1rem);height:calc(var(--h) * .1rem);margin:0}   /* 詳細度 0,2,0＝rc-common の .rc-site .p と同じ。left/top は下の 58〜59 行が持つ */
.rc-site .sp-drawer[hidden]{display:none!important}
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){.rc-site .sp-drawer .sp-only{display:none!important}}

/* ---------- 4. 固定ヘッダー（TOP の .site-header の写し・p12 の高さ 8.4rem 版） ---------- */
.rc-site .site-header{position:fixed;left:6rem;top:2rem;width:180rem;height:8.4rem;z-index:100;
  background:rgba(8,8,8,.96);border:.08rem solid #b99944;transition:background-color .3s ease,box-shadow .3s ease}
.rc-site.admin-bar .site-header{top:calc(2rem + 32px)}
.rc-site .site-header.is-scrolled{box-shadow:0 .8rem 2.4rem rgba(0,0,0,.25)}
.rc-site .site-header .p{left:calc(var(--x) * .1rem - .08rem);top:calc(var(--y) * .1rem - .08rem - 1.52rem)}
.rc-site .site-header .p .p{left:calc(var(--x) * .1rem);top:calc(var(--y) * .1rem)}
.rc-site .hd-brand__mark{object-fit:contain;object-position:0 50%}   /* L-037: 管理画面で別のロゴを入れたときも左に寄せる */
.rc-site .hd-name{font:400 3.225rem/4.9rem var(--rch-serif);color:#f5f3ef;white-space:nowrap}
.rc-site .hd-sub{font:700 1.8rem/1 var(--rch-sans);letter-spacing:.2rem;color:#a89666;white-space:nowrap}
.rc-site .site-header .hd-sub{top:0;width:auto;height:100%;padding-top:1.2rem;display:flex;align-items:center}   /* 2026-10-15（本人「RECRUIT の文字バランスが悪い。もう少し大きく・中央に」→「まだ直ってない」）: 字 10px→18px。箱をヘッダーいっぱいの高さにして、中心を「社名の文字」に合わせる（ロゴ画像の社名は画像の中心より 6/52 下＝.6rem。padding-top はその 2 倍）。左の位置は変えない */
.rc-site .hd-nav a{font:900 1.951rem/3rem var(--rch-serif);letter-spacing:.312rem;color:#f5f3ef;white-space:nowrap;transition:color .3s ease}
.rc-site .hd-nav a:hover,.rc-site .hd-nav a[aria-current="page"]{color:var(--rch-gold-line)}
/* HD-CORP-NAV（2026-11-06・本人「上のメニューにコーポレートサイトに戻るメニューを追加」「メニューの文字を全体的に小さくして「コーポレート」」「↗ はいらん」）:
   最後に「コーポレート」を足して 7 つ。項目ごとの x の絶対配置をやめ、箱（「RECRUIT SITE」の右から 35・ENTRY の左まで 35）の中に両端そろえで並べる（字の幅が変わっても重ならない）。
   字 1.951rem → 1.756rem（1 割小さく）・字間 .312rem → .281rem。1281px 以上は下限 13px（1024〜1280 は 4b）。SP はナビを出さない（下の display:none が勝つ） */
.rc-site .hd-nav{position:absolute;left:55.36rem;right:36.28rem;top:calc(4.18rem - .08rem - 1.52rem);height:3rem;display:flex;justify-content:space-between;align-items:center}
.rc-site .hd-nav a.p{position:static;width:auto;height:auto}
.rc-site .hd-nav a{font-size:max(1.756rem, 13px);letter-spacing:.281rem}
.rc-site .hd-btn{border:1px solid rgba(255,255,255,.55)}
.rc-site .hd-btn--entry{background:var(--rch-gold-btn)}
.rc-site .hd-btn--visit{background:rgba(255,255,255,.12)}
.rc-site .hd-btn-t{font-weight:900;text-align:center;white-space:nowrap}
.rc-site .hd-btn--entry .hd-btn-t{font-size:2.361rem;line-height:1.854rem;letter-spacing:.118rem;color:#000}
.rc-site .hd-btn--visit .hd-btn-t{font-size:1.783rem;line-height:1.4rem;letter-spacing:.089rem;color:#fff;filter:drop-shadow(0 0 .357rem #af9158)}
.rc-site .hd-menu{padding:0;border:0;background:none;cursor:pointer}
.rc-site .hd-menu img{width:100%;height:100%}
@media (min-width:1024px) and (orientation:landscape), (min-width:1367px){.rc-site .site-header .hd-menu{display:none}}   /* F03（2026-10-08・本人「PC版のヘッダーにはハンバーガーは必要ない」）: PC だけ隠す。HTML は残す（SP＝1023px 以下では同じボタンがメニュー） */
.rc-site .hdc{display:block;pointer-events:none;background-color:var(--fbc,#fff);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;transition:transform .3s ease-out,background-color .3s ease-out}
.rc-site .hdc-l{clip-path:inset(-1rem 50% -1rem -1rem)}
.rc-site .hdc-r{clip-path:inset(-1rem -1rem -1rem 50%)}
/* ハンバーガーのドロワー（PC。SP は末尾） */
.rc-site .sp-drawer{position:fixed;top:12rem;right:6rem;width:36rem;max-height:calc(100vh - 14rem);overflow:auto;z-index:99;padding:2rem 2.4rem;background:rgba(8,8,8,.97);border:.08rem solid #b99944}
.rc-site.admin-bar .sp-drawer{top:calc(12rem + 32px)}
.rc-site .sp-drawer a{display:block;padding:1.2rem 0;color:#f5f3ef;font:700 1.6rem/1.5 var(--rch-serif);border-bottom:1px solid rgba(185,153,68,.35)}
.rc-site .sp-drawer a[aria-current="page"]{color:var(--rch-gold-line)}

/* ---------- 4b. 1024〜1280px の字の下限（PC だけ。SP と 1281px 以上は今のまま） ---------- */
/* FB-04（2026-10-09・実装FBシート No.4「1024〜1280px で文字が比例して小さくなり読めない」）: 字だけに下限（ナビ・ボタン 13px／「RECRUIT SITE」11px）。箱の位置・大きさは rem のまま。
   ナビの字間は 1024 で 0・1280 で今の .312rem（2.08px）になる直線（1.56rem − 8.32px）＝1280 と 1281 の境で見た目が跳ばない。1024 で項目の間 10〜12px・お知らせ→ENTRY 32px（実測） */
@media (min-width:1024px) and (max-width:1280px) and (orientation:landscape){
  .rc-site .hd-nav a{font-size:calc(1.5rem + 3px);letter-spacing:max(0px, calc(1.405rem - 7.49px))}   /* HD-CORP-NAV（2026-11-06）: 7 つ入るよう 1024 で 11px・字間 0 → 1280 で 13px・.281rem の直線（元 font-size:max(1.951rem, 13px);letter-spacing:max(0px, calc(1.56rem - 8.32px))） */
  .rc-site .hd-nav{left:calc(37.256rem + 118px);right:calc(32.78rem + 16px)}   /* HD-CORP-NAV: 「RECRUIT SITE」（13px で幅 約 102px）の右から 16px・ENTRY の左まで 16px */
  .rc-site .hd-sub{font-size:max(1.8rem, 13px)}
  .rc-site .hd-btn--entry .hd-btn-t{font-size:max(2.361rem, 13px)}
  .rc-site .hd-btn--visit .hd-btn-t{font-size:max(1.783rem, 13px)}
}

/* ---------- 5. ホバー（rc-common §12 の写し。TOP は html.mo・下層は html.motion） ---------- */
@media (hover:hover){
  /* ヘッダーの ENTRY／見学予約（TOP の L と同じ） */
  html:is(.motion,.mo) .rc-site .hd-btn--entry:hover~.hdc-entry,html:is(.motion,.mo) .rc-site .hd-btn--visit:hover~.hdc-visit{--fbc:#d4b87a}
  html:is(.motion,.mo) .rc-site .hd-btn--entry:hover~.hdc-entry.hdc-top.hdc-l,html:is(.motion,.mo) .rc-site .hd-btn--visit:hover~.hdc-visit.hdc-top.hdc-l{transform:translate(-7px,-7px)}
  html:is(.motion,.mo) .rc-site .hd-btn--entry:hover~.hdc-entry.hdc-top.hdc-r,html:is(.motion,.mo) .rc-site .hd-btn--visit:hover~.hdc-visit.hdc-top.hdc-r{transform:translate(7px,-7px)}
  html:is(.motion,.mo) .rc-site .hd-btn--entry:hover~.hdc-entry.hdc-bot.hdc-r,html:is(.motion,.mo) .rc-site .hd-btn--visit:hover~.hdc-visit.hdc-bot.hdc-r{transform:translate(7px,7px)}
  html:is(.motion,.mo) .rc-site .hd-btn--entry:hover~.hdc-entry.hdc-bot.hdc-l,html:is(.motion,.mo) .rc-site .hd-btn--visit:hover~.hdc-visit.hdc-bot.hdc-l{transform:translate(-7px,7px)}
  html:is(.motion,.mo) .rc-site .hd-btn{transition:transform .12s ease}
  html:is(.motion,.mo) .rc-site .hd-btn:active{transform:scale(.985)}
}

/* ---------- 6. SP（rc-common §13 の写し） ---------- */
@media (max-width:1023px), (max-width:1366px) and (orientation:portrait){
  .rc-site{--rch-gut:max(2rem, calc((100% - 60rem) / 2))}
  /* 上の帯（下層だけ・流れる）＋下の固定バー（ENTRY／見学予約／メニュー） */
  .rc-site .site-header{position:relative;left:auto;top:auto!important;width:auto;height:6.4rem;border:0;border-bottom:max(.1rem,1px) solid #b99944;background:#080808;box-shadow:none!important;z-index:100;
    --bw:min(100%, 60rem);--bx:calc((100% - var(--bw)) / 2);--mb:calc(var(--rch-bar) - 1.8rem);--bb:calc(var(--bw) - 3.6rem - var(--mb))}
  .rc-site .site-header .p{position:absolute}
  .rc-site .site-header :is(.hd-nav,.hdc){display:none}
  .rc-site .hd-brand{position:absolute;left:var(--rch-gut);top:1.2rem;display:block;width:29rem;height:4rem}
  .rc-site .site-header .hd-brand img{left:0;top:.5rem;width:18.09rem;height:3rem}   /* L-037: 正式ロゴ 1200×199 を高さ 3rem（390 で 30px）。帯 6.4rem の上下の真ん中 */
  .rc-site .site-header .hd-name{left:4.5rem;top:-.4rem;width:auto;height:auto;font-size:2.2rem;line-height:2.6rem;letter-spacing:.01em}
  .rc-site .site-header .hd-sub{left:19.3rem;top:1.45rem;width:auto;height:auto;padding-top:0;display:block;font-size:1.4rem;line-height:1.8rem;letter-spacing:.2em;color:#f5f3ef}   /* 2026-10-15: 1rem→1.4rem。行の中心を社名の文字の中心（brand 内 2.35rem）に合わせる */
  .rc-site .site-header::before{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(var(--rch-bar) + var(--rch-safe));z-index:100;background:#1a1a1a;box-shadow:0 -.1rem 0 rgba(185,153,68,.55),0 -.8rem 2.4rem rgba(0,0,0,.25)}
  .rc-site .site-header .hd-btn{position:fixed;top:auto;bottom:calc(.9rem + var(--rch-safe));height:var(--mb);z-index:101;border:1px solid #fff}
  .rc-site .site-header .hd-btn--entry{left:calc(var(--bx) + .9rem);width:calc(var(--bb) * .475);background:#dbbf8c}
  .rc-site .site-header .hd-btn--visit{left:calc(var(--bx) + 1.8rem + var(--bb) * .475);width:calc(var(--bb) * .525);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)}
  .rc-site .site-header .hd-btn .hd-btn-t{left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;filter:none}
  .rc-site .site-header .hd-btn--entry .hd-btn-t{padding-left:.13rem;font-size:2.6rem;line-height:1;letter-spacing:.13rem;color:#000}
  .rc-site .site-header .hd-btn--visit .hd-btn-t{padding-left:.1rem;font-size:2rem;line-height:1;letter-spacing:.1rem;color:#fff}
  .rc-site .site-header .hd-btn::after{content:"";position:absolute;inset:-.1rem;pointer-events:none;--c:#947742;--l:.6rem;--t:.2rem;
    background:
      linear-gradient(var(--c),var(--c)) left top/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) left top/var(--t) .7rem no-repeat,
      linear-gradient(var(--c),var(--c)) right top/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) right top/var(--t) .7rem no-repeat,
      linear-gradient(var(--c),var(--c)) left bottom/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) left bottom/var(--t) .7rem no-repeat,
      linear-gradient(var(--c),var(--c)) right bottom/var(--l) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) right bottom/var(--t) .7rem no-repeat}
  .rc-site .site-header .hd-menu{position:fixed;left:auto;right:calc(var(--bx) + .9rem);top:auto;bottom:calc(.9rem + var(--rch-safe));width:var(--mb);height:var(--mb);z-index:101;border:1px solid #fff}
  .rc-site .site-header .hd-menu img{position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width:2.7rem;height:2.1rem}
  .rc-site .site-header .hd-menu::before,.rc-site .site-header .hd-menu::after{content:"";position:absolute;left:50%;top:50%;width:2.8rem;height:.2rem;margin:-.1rem 0 0 -1.4rem;background:#fff;opacity:0}
  .rc-site .site-header .hd-menu[aria-expanded="true"] img{opacity:0}
  .rc-site .site-header .hd-menu[aria-expanded="true"]::before{opacity:1;transform:rotate(45deg)}
  .rc-site .site-header .hd-menu[aria-expanded="true"]::after{opacity:1;transform:rotate(-45deg)}
  /* メニュー（全画面。下の固定バーはその上に残る） */
  .rc-site .sp-drawer{position:fixed;left:0;right:0;top:0;bottom:calc(var(--rch-bar) + var(--rch-safe));width:auto;max-height:none;overflow:auto;overscroll-behavior:contain;z-index:99;border:0;
    padding:8.4rem var(--rch-gut) 3.2rem;display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:1.6rem;
    background:radial-gradient(120% 60% at 100% 0,rgba(202,170,110,.22),transparent 60%),linear-gradient(180deg,#14110d,#0b0a08)}
  .rc-site.admin-bar .sp-drawer{top:32px}
  .rc-site .sp-drawer[hidden]{display:none}
  .rc-site .sp-drawer a{padding:1.5rem 0;font-size:1.5rem;border-bottom:1px solid rgba(185,153,68,.3)}
  .rc-site .sp-tabs{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:2.4rem}
  .rc-site .sp-drawer .sp-tabs a{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.1rem 0 .9rem;background:#fff;border:1px solid var(--rch-gold);color:var(--rch-ink);font:900 1.25rem/1.2 var(--rch-serif);letter-spacing:-.03em;white-space:nowrap}
  .rc-site .sp-tabs img{width:auto;height:2.2rem}
  body.rc-site{padding-bottom:calc(var(--rch-bar) + var(--rch-safe))}   /* 下の固定バーの分の余白（無いと © がバーの下に隠れる） */
}

/* ---------- 7. 低い画面（横向きのスマホ）・WP の管理バー ---------- */
@media (max-width:1023px) and (max-height:500px), (max-width:1366px) and (orientation:portrait) and (max-height:500px){
  .rc-site{--rch-bar:5.2rem}
  .rc-site .site-header .hd-btn--entry .hd-btn-t{font-size:2rem}
  .rc-site .site-header .hd-btn--visit .hd-btn-t{font-size:1.6rem}
}
@media (max-width:782px){.rc-site.admin-bar .sp-drawer{top:46px}}
@media (max-width:600px){.rc-site.admin-bar .sp-drawer{top:0}}

/* ---------- 8. 動きを止める・印刷 ---------- */
html.no-motion .rc-site :is(.site-header,.sp-drawer) :where(*,*::before,*::after){transition:none!important}
@media print{.rc-site .site-header,.rc-site .sp-drawer{display:none!important}}

/* ---------- 9. Safari の text-wrap: pretty を止める（SAFARI-NO-PRETTY） ---------- */
/* 2026-11-06（本人「特定のスマホ（iPhone）で見ると文字の右側が不自然に開いている」）: iOS 26／macOS 26 の Safari は text-wrap: pretty に対応したが、
   Chrome（最後の数行だけ直す）と違い段落の全部の行を短くそろえるので、どの行も右が空く（WebKit 26 で再現。コーポレートは main.css の同じ名前の所）。
   採用の各 CSS で pretty にしている所を、pretty の無い（auto-phrase に未対応＝Safari）ブラウザだけ普通の折り返しに戻す。balance の所は触らない。
   wk-flow__desc は 1024〜1280 の横向きで balance なので、pretty にしている SP の幅だけ */
@supports not (word-break: auto-phrase) {
  .rc-site :is(.vc-body,.ab-p,.ab-d,.tb-p,.env-p,.mi-prose,.mi-value-r,.wk-lead),
  .rc-page-privacy :is(.pp-art__body p,.pp-intro),
  .rc-page-entry .ef-card__txt,
  .rc-page-news .nws-item__text,
  .rc-page-environment :is(.env-head__lead,.env-head__catch,.env-step__desc,.env-step__catch,.env-growth__note),
  .rc-page-news-single .nwa-title,
  .rc-page-crosstalk .ct-tintro__lead,
  .rc-page-requirements :is(.rq-who__text,.rq-step__text),
  .rc-page-work .wk-flow__ctl-t,
  .rc-page-page .pg-content p{text-wrap-style:auto!important}
  @media (max-width:1023px), (max-width:1366px) and (orientation:portrait){
    .rc-page-work .wk-flow__desc{text-wrap-style:auto!important}
  }
}