/**
 * njc-hero.css — JAトップのメイン画像（文字なし画像＋HTMLテキスト重ね）
 *
 * 正本＝docs/参考/heroimage/モックアップ_トップページ.html（2026-08-06 AD確定値）の移植。
 * 数値（コピー位置 left12.5%/top49%・光彩7層・枠モード63px等）はモックと同一に保つこと。
 * JAトップ（is_main_site && is_front_page）でのみ enqueue（inc/enqueue.php）。en は従来の vegas。
 *
 * 旧 uniq.css の .mainVisual（vegas 前提の高さ・-86px 重なり・背景）を打ち消すため、
 * 競合箇所は !important で上書きする（元 CSS は無改変の原則）。
 */

.njc-hero { position:relative; overflow:hidden; width:100% !important;
            margin-top:0 !important; height:auto !important; min-height:0 !important;
            background:none !important; }
.njc-hero img.mv { width:100% !important; max-width:none; height:auto; display:block; }
.njc-copy { position:absolute; left:12.5%; top:49%; transform:translateY(-50%); z-index:5;
            font-family:"Noto Sans JP",sans-serif; text-align:left; }
.njc-copy h2, .njc-copy p { text-align:left; }
.njc-hero.mv3 .njc-copy { left:9.5%; top:39%; }
.njc-eyebrow { display:flex; align-items:center; gap:14px;
               font-size:clamp(11px,1.05vw,21px); letter-spacing:.32em; color:#0a8247;
               font-family:'Goldman',sans-serif; font-weight:500; margin-bottom:2.2em; }
.njc-eyebrow::before { content:""; width:3.2em; height:2px; background:#0a8247; }
.njc-copy h2 { text-shadow:0 0 2px rgba(255,255,255,1), 0 0 6px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.85), 0 0 48px rgba(255,255,255,.7), 0 0 90px rgba(255,255,255,.6), 0 0 140px rgba(255,255,255,.45), 0 0 200px rgba(255,255,255,.3);
               font-size:clamp(28px,4.6vw,94px); font-weight:700; color:#1a1a1a;
               letter-spacing:.05em; line-height:1.5; margin:0; }
.njc-copy p  { margin-top:1.6em; font-size:clamp(12px,1.35vw,27px); color:#333;
               line-height:2.1; letter-spacing:.06em; font-weight:500; }

/* ナビを画像に重ねない構成＝旧「スライダー上の白文字ナビ」を通常の濃色に戻す */
.menu > ul > li a { color:#333 !important; }

/* 1400px枠モード（信越型・初期表示） */
.njc-hero.boxed { max-width:1400px; margin-left:auto !important; margin-right:auto !important;
                  height:538px !important; }
.njc-hero.boxed img.mv { height:100% !important; object-fit:cover; }
.njc-hero.boxed .njc-eyebrow { font-size:13px; }
.njc-hero.boxed .njc-copy h2 { font-size:63px; line-height:1.45; letter-spacing:.1em; }
.njc-hero.boxed .njc-copy p { font-size:18px; line-height:2; margin-top:1.4em;
  text-shadow:0 0 14px rgba(255,255,255,.7), 0 0 36px rgba(255,255,255,.55), 0 0 70px rgba(255,255,255,.4), 0 0 120px rgba(255,255,255,.28); }

/* ヒーローの既定表示＝グレーplaceholder＋モックアップ誘導リンク（QA台帳 Q1・2026-08-07 指示）。
   .njc-hero の background:none !important より後に書いて上書きする。 */
.njc-hero-pending { background: #d9d9d9 !important;
  display: flex; align-items: center; justify-content: center; }
.njc-hero-pending .njc-hero-link { color: #555; font-size: 20px; letter-spacing: .05em;
  text-decoration: underline; }
.njc-hero-pending .njc-hero-link:hover { color: #078247; }

/* クライアント支給メイン画像（2026-08-26・mv_main.jpg）＝完成イメージ「01. メインビジュアルイメージ.png」の再現。
   コピーは右側・白文字・光彩なし（背景が緑で明るいため薄い影で可読性を確保）。SINCE 1920 の eyebrow は無し。 */
.njc-hero.mv-main img.mv { object-position: center 40%; }
.njc-hero.mv-main .njc-copy { left: 57.5%; top: 47%; }
.njc-hero.mv-main .njc-copy h2 { font-family: "Noto Serif JP", serif; color: #fff; font-size: 42px; font-weight: 500; letter-spacing: .08em;
  line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 18px rgba(0,0,0,.25); }
.njc-hero.mv-main .njc-copy p { color: #fff; font-size: 18px; font-weight: 500; line-height: 1.9;
  margin-top: 1em; letter-spacing: .06em; text-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 14px rgba(0,0,0,.25); }
@media screen and (max-width:960px) {
  .njc-hero.mv-main .njc-copy { left: 50%; top: 50%; }
  .njc-hero.mv-main .njc-copy h2 { font-size: clamp(22px,4.2vw,40px); }
  .njc-hero.mv-main .njc-copy p { font-size: clamp(12px,1.8vw,18px); }
}


/* 採用バナー（area04・2026-09-30 顧客提案の再現＋案 1d の緑帯）
   出典＝顧客提案 docs/顧客からのデータ/画像データ/01. TOPページ/10. 採用リンクのイメージ.png（617x184）
       ＋ docs/from-claude-design/採用バナー20260930/README.md の案 1d（右端 72px の緑の縦帯）。
   全体＝.inner02 の幅いっぱい・縦横比 1239:370（顧客案と同じ）。左＝写真を全面に敷き、白い文字＝キャッチ 2 行＋本文 4 行。
   文字の後ろ（左 52%）だけ写真を 2.5px ぼかし 10% 暗くする＝::after に同じ写真を重ねて mask で左だけ出す（文字はぼかさない）。
   右＝緑帯（サイト既存の緑 #078247）に縦書き「採用サイト」・「RECRUIT」・矢印の円。バナー全体が 1 つのリンク。
   書体＝採用サイト /recruit/ と同じ Zen Maru Gothic（enqueue.php で読む）。文字の大きさは cqw＝バナーの幅に比例。
   TB・SP（960px 以下）＝写真を上・文字を青い地に積み、緑帯は下の横帯（高さ 48px・横書き）。
   直す前の CSS と各版の画像＝docs/仕様/検収/採用バナー_20260930/。 */
body.home main section.area04 { padding: 60px 0; }
.njc-recruit-bnr { --bnr-bg-1: #2a5f9e; --bnr-bg-2: #3872b4; --bnr-green: #078247; --bnr-green-hover: #0a9a55;
  position: relative; display: flex; box-sizing: border-box; width: 100%; aspect-ratio: 1239 / 370; margin: 0 auto; overflow: hidden;
  container-type: inline-size; border-radius: 2px; background: #cfd4da;
  color: #fff; text-decoration: none; font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  box-shadow: 0 6px 24px rgba(0,0,0,.18); transition: box-shadow .2s; }
.njc-recruit-bnr:hover { box-shadow: 0 10px 32px rgba(0,0,0,.3); text-decoration: none; color: #fff; }
.njc-recruit-bnr:focus-visible { outline: 2px solid var(--bnr-green); outline-offset: 2px; }
.njc-recruit-bnr__main { position: relative; display: block; flex: 1 1 0; min-width: 0; }
.njc-recruit-bnr__photo { position: absolute; inset: 0; overflow: hidden; }
.njc-recruit-bnr__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.njc-recruit-bnr__photo::after { content: ""; position: absolute; inset: -6px; z-index: 1;
  background: url(../../static/img/recruit_bnr_full.jpg) center / cover no-repeat; filter: blur(2.5px) brightness(.9);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 59%); mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 59%); }
.njc-recruit-bnr__photo::before { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(58,70,92,.42) 0%, rgba(58,70,92,.30) 38%, rgba(58,70,92,0) 62%); }
.njc-recruit-bnr__body { position: absolute; z-index: 3; left: 7.3%; top: 10%; display: flex; flex-direction: column; gap: 7%; height: 74%; }
.njc-recruit-bnr__catch { display: block; font-size: 3.6cqw; font-weight: 500; line-height: 1.5; letter-spacing: .08em; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.18); white-space: nowrap; }
.njc-recruit-bnr__text { display: block; font-size: 1.45cqw; font-weight: 500; line-height: 2; letter-spacing: .06em; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 10px rgba(0,0,0,.2); white-space: nowrap; }
.njc-recruit-bnr__tab { flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  box-sizing: border-box; padding: 18px 0; background: var(--bnr-green); color: #fff; transition: background .2s; }
.njc-recruit-bnr:hover .njc-recruit-bnr__tab { background: var(--bnr-green-hover); }
.njc-recruit-bnr__tab-ja { writing-mode: vertical-rl; font-size: 15px; font-weight: 700; letter-spacing: .2em; }
.njc-recruit-bnr__tab-sub { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.njc-recruit-bnr__tab-en { writing-mode: vertical-rl; font-size: 10px; letter-spacing: .2em; opacity: .85; font-family: 'Lato', sans-serif; }
.njc-recruit-bnr__arrow { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #fff; border-radius: 50%; font-size: 15px; font-style: normal; overflow: hidden; }
.njc-recruit-bnr__arrow span { display: block; }
/* ホバー＝矢印が右へ抜けて、左から入り直す（1 回だけ・0.5 秒） */
.njc-recruit-bnr:hover .njc-recruit-bnr__arrow span { animation: njc-arrow-through .5s ease-in-out forwards; }
@keyframes njc-arrow-through { 0% { transform: translateX(0); } 49% { transform: translateX(180%); } 50% { transform: translateX(-180%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .njc-recruit-bnr:hover .njc-recruit-bnr__arrow span { animation: none; } }
@media screen and (max-width:960px) {
  body.home main section.area04 { padding: 30px 0; }
}
/* 縦に積むのはスマホ幅だけ（2026-10-01）。iPad（mini の 744px〜）は PC と同じ横並び＝右端に緑の縦帯。
   それまでは 960px 以下の全部で縦に積んでいた。
   横並びのままバナーが低くなる幅（700〜960px）では、緑の帯の中身を小さくして 1 列に収める
   （PC の大きさのままだと「採用サイト」が 2 列に折り返す）。 */
@media screen and (min-width:700px) and (max-width:960px) {
  .njc-recruit-bnr__tab { flex-basis: 56px; padding: 12px 0; }
  .njc-recruit-bnr__tab-ja { font-size: 12px; letter-spacing: .12em; white-space: nowrap; }
  .njc-recruit-bnr__tab-sub { gap: 8px; }
  .njc-recruit-bnr__tab-en { font-size: 8px; letter-spacing: .12em; }
  .njc-recruit-bnr__arrow { width: 26px; height: 26px; font-size: 12px; }
}
@media screen and (max-width:699px) {
  .njc-recruit-bnr { flex-direction: column; aspect-ratio: auto; background: linear-gradient(120deg, var(--bnr-bg-1), var(--bnr-bg-2)); }
  .njc-recruit-bnr__main { flex: none; }
  .njc-recruit-bnr__photo { position: relative; aspect-ratio: 1239 / 370; }
  .njc-recruit-bnr__photo::before, .njc-recruit-bnr__photo::after { content: none; }
  .njc-recruit-bnr__body { position: static; height: auto; padding: 18px 18px 16px; gap: 10px; }
  .njc-recruit-bnr__catch { font-size: min(23px, 4.2cqw); font-weight: 700; letter-spacing: .06em; text-shadow: none; }
  .njc-recruit-bnr__text { font-size: min(14px, 2.2cqw); line-height: 1.9; letter-spacing: .04em; text-shadow: none; }
  .njc-recruit-bnr__tab { flex: 0 0 48px; flex-direction: row; justify-content: center; gap: 14px; padding: 0 16px; }
  .njc-recruit-bnr__tab-ja, .njc-recruit-bnr__tab-en { writing-mode: horizontal-tb; }
  .njc-recruit-bnr__tab-sub { flex-direction: row; gap: 14px; }
}
@media screen and (max-width:550px) {
  .njc-recruit-bnr__photo { aspect-ratio: 16 / 9; }
  .njc-recruit-bnr__photo img { object-position: 62% center; }
  .njc-recruit-bnr__catch { font-size: min(23px, 5.6cqw); }
  .njc-recruit-bnr__text { font-size: 12px; white-space: normal; }
  .njc-recruit-bnr__text br { display: none; }
}

/* 早わかり！新日本理化バナー（area05 左列・QA台帳B）：支給PNGが原寸1794px＝列幅に収める。
   旧CSSは .bnr img に幅制限が無い（既存バナーは実寸450pxで作られている前提）ため上書きで補う。 */
body.home main section.area05 .boxL .bnr img { max-width: 100%; height: auto; }
/* 画像が白背景のため境界が消える＝薄グレー1pxの枠で輪郭を出す */
img.njc-bnr-glance { border: 1px solid #ddd; box-sizing: border-box; }

/* SP（〜960px）＝暫定：枠モードを解除し全幅の clamp() に戻す（PC画像を縮小表示）。
   SP専用画像・文字サイズの本設計はクライアントQAと合わせて確定する。 */
@media screen and (max-width:960px) {
  .njc-hero.boxed { max-width:none; height:auto !important; }
  .njc-hero.boxed img.mv { height:auto !important; object-fit:fill; }
  .njc-hero.boxed .njc-eyebrow { font-size:clamp(11px,1.05vw,21px); }
  .njc-hero.boxed .njc-copy h2 { font-size:clamp(28px,4.6vw,94px); line-height:1.5; letter-spacing:.05em; }
  .njc-hero.boxed .njc-copy p { font-size:clamp(12px,1.35vw,27px); line-height:2.1; margin-top:1.6em; }
}

/* J2 テスト指摘（2026-09-25）：SP/TB でヒーロー画像の上 50px が固定ヘッダーの下に隠れ、
   SP では見出しが 2 行になって上端が切れる。旧サイトも SP ではヘッダーの高さ分（50px）下げていた
   （static/css/uniq.css .mainVisual .inner .inner02 { margin-top:50px }）。 */
@media screen and (max-width:960px) {
  .njc-hero.boxed.mv-main { margin-top: 50px !important; }
}
/* TB（551〜960px）：説明文を大きくする（2026-09-27）。2 行のまま収めるため文字の置き場を少し左へ */
@media screen and (min-width:551px) and (max-width:960px) {
  .njc-hero.boxed.mv-main .njc-copy { left: 48%; }
  .njc-hero.boxed.mv-main .njc-copy p { font-size: clamp(12px,2.1vw,18px); }
}
/* SP だけで効く改行（説明文を 3 行に分ける） */
.njc-br-sp { display: none; }
@media screen and (max-width:550px) {
  .njc-hero.boxed.mv-main .njc-copy { left: 36%; right: 2%; top: 50%; }
  .njc-hero.boxed.mv-main .njc-copy h2 { font-size: 5.8vw; line-height: 1.4; letter-spacing: .04em; white-space: nowrap; }
  /* 説明文は SP では 3 行（グループは、／通して／貢献します。）。文字を大きくした分、行を分けて収める（2026-09-27） */
  .njc-br-sp { display: inline; }
  .njc-hero.boxed.mv-main .njc-copy p { font-size: 3.6vw; line-height: 1.7; letter-spacing: .02em; margin-top: .6em; white-space: nowrap; }
}

/* キャッチコピーは折り返さない（2026-09-27）：見出しと説明文を、どの画面幅でも決めた行数（見出し 1 行・
   説明文は <br> の位置だけ）で出す。文字の大きさは「文字の置き場の幅 ÷ 文字数」を超えないようにする。
   - 基準の幅はヒーロー自身（cqw）。スクロールバーの幅に左右されない。cqw が使えない古いブラウザは直前の vw の指定で出る。
   - 見出し 10 文字＝字間こみ 10.8em（PC）／10.5em（TB）／10.4em（SP）。説明文のいちばん長い行＝22 文字・23.32em（PC・TB）／14 文字・14.28em（SP）。
   - 置き場の幅＝PC 42.5%（左 57.5%）／TB 52%（左 48%）／SP 62%（左 36%・右 2%）。右に 2% 以上の余白が残る値にしている。
   これまでの不具合＝961〜1066px で見出しの最後の 1 文字が 2 行目に落ちる／961〜990px・551〜590px でも折り返す。 */
.njc-hero.mv-main { container-type: inline-size; }
.njc-hero.boxed.mv-main .njc-copy h2,
.njc-hero.boxed.mv-main .njc-copy p { white-space: nowrap; }
@media screen and (min-width:961px) {
  .njc-hero.boxed.mv-main .njc-copy h2 { font-size: min(42px, 3.7vw); font-size: min(42px, 3.7cqw); }
  .njc-hero.boxed.mv-main .njc-copy p  { font-size: min(18px, 1.72vw); font-size: min(18px, 1.72cqw); }
}
@media screen and (min-width:551px) and (max-width:960px) {
  .njc-hero.boxed.mv-main .njc-copy h2 { font-size: 4.6vw; font-size: 4.6cqw; }
  .njc-hero.boxed.mv-main .njc-copy p  { font-size: min(18px, 2.1vw); font-size: min(18px, 2.1cqw); }
}
@media screen and (max-width:550px) {
  .njc-hero.boxed.mv-main .njc-copy h2 { font-size: 5.8vw; font-size: 5.8cqw; }
  .njc-hero.boxed.mv-main .njc-copy p  { font-size: 3.6vw; font-size: 3.6cqw; }
}