/* ============================================================
   セクション固有
   そのセクションでしか使わない見た目。
   汎用の部品は components.css にある。
   ============================================================ */

/* ------------------------------------------------------------
   ファーストビュー（#fv）
   スクロールして最初に来る画面。ここを画面 1 枚ぶん使って、
   極太の大きな文字で「社員を募集しています」を出す。
   ------------------------------------------------------------ */
#fv {
  /* 固定ヘッダーのぶんを内側に取って、画面ちょうど 1 枚に収める */
  min-height: 100svh;
  justify-content: center;   /* .sec は flex column */
  gap: 0;
  padding: var(--header-h) 0 28px;
  background: var(--y);
  /* 最初の画面（写真）との境目に、ほかのセクションと同じ黒線を引く（.sec の border-top） */
}

.fv-body { display: flex; flex-direction: column; gap: 24px; padding: 0 20px; }

/* ------------------------------------------------------------
   募集の告知
   「小さい前置き → 極太の大きな強調語 → 小さい後置き」の落差で読ませる。
   いちばん大きい「社員」「募集」だけ、白抜き＋黒の縁取りで立たせる。
   ------------------------------------------------------------ */
.fv-shout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.fv-shout-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 900;
  line-height: 1.15;
}
.fv-shout-title > span { display: block; }
/* 「は」も「久慈重機」の 0.7 倍にそろえる */
.fv-shout-lead { font-size: clamp(24px, 7vw, 28px); }
.fv-shout-lead strong { font-weight: 900; font-size: 1.4286em; letter-spacing: .04em; }
/* 「を」は「社員」「募集」の 0.7 倍（最初の画面のキャッチと同じ比率） */
.fv-shout-main { font-size: clamp(36px, 12.4vw, 53px); }
.fv-shout-main strong {
  font-weight: 900;
  font-size: 1.4286em;
  letter-spacing: .02em;
  color: var(--paper);
  /* 縁取り。text-stroke は角が尖るので、影を円周上に 16 方向ずらして重ね、角を丸くする */
  text-shadow:
    3px 0px 0 var(--ink),
    2.77px 1.15px 0 var(--ink),
    2.12px 2.12px 0 var(--ink),
    1.15px 2.77px 0 var(--ink),
    0px 3px 0 var(--ink),
    -1.15px 2.77px 0 var(--ink),
    -2.12px 2.12px 0 var(--ink),
    -2.77px 1.15px 0 var(--ink),
    -3px 0px 0 var(--ink),
    -2.77px -1.15px 0 var(--ink),
    -2.12px -2.12px 0 var(--ink),
    -1.15px -2.77px 0 var(--ink),
    0px -3px 0 var(--ink),
    1.15px -2.77px 0 var(--ink),
    2.12px -2.12px 0 var(--ink),
    2.77px -1.15px 0 var(--ink);
}
.fv-shout-tail { margin-top: .3em; font-size: clamp(22px, 6vw, 26px); }

.fv-shout-sub {
  /* 上の「しています。」との間を広めに取る（.fv-shout の gap 22px に足す） */
  margin: 14px 0 0;
  /* 2 行目（異業種からのチャレンジャーも）が 320px 幅でも 1 行に収まる大きさ */
  font-size: clamp(16px, 5vw, 21px);
  font-weight: 900;
  line-height: 1.5;
}
.fv-shout-sub > span { display: block; }
/* 強調語：ひと回り大きく */
.fv-shout-sub em {
  font-style: normal;
  font-size: 1.3em;
}
.fv-shout-sub .fv-welcome {
  margin-top: 8px;
  padding: 1px 14px 5px;   /* 字形が下寄りなので上を詰める */
  font-size: 1.9em;
  letter-spacing: .06em;
}

/* ------------------------------------------------------------
   事業内容（#company）
   「久慈重機は／（事業の箇条書き）／を行う会社です。」を 1 文として大きく見せる
   ------------------------------------------------------------ */
.biz {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 大きさ・太さは .lead（キャッチ風の大きい文字）と同じ */
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 23px;
  line-height: 1.5;
  /* 狭い画面で折り返すときも、言葉の途中で切らない（対応ブラウザのみ） */
  word-break: auto-phrase;
}
/* 前後の「久慈重機は」「を行う会社です。」は本文の大きさに戻す */
.biz > p { font-family: var(--f-body); font-size: 16px; font-weight: 700; }
/* 事業は 1 つずつ枠で囲んで、区切りを見えやすくする */
.biz-list { gap: 8px; }
.biz-list li {
  padding: 10px 14px 11px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
/* 重要な単語に黄色のマーカー（最初の画面のキャッチと同じ引き方） */
.biz-list em {
  font-style: normal;
  background: linear-gradient(transparent 72%, var(--y) 72%, var(--y) 94%, transparent 94%);
}
.biz-list li::before { content: none; }

/* ------------------------------------------------------------
   未経験の方でも大丈夫（#work）
   ファーストビューの「経験者はもちろん、〜大歓迎！」と同じ組み方
   （強調語はひと回り大きく、締めのひと言は黒地に黄色の札）
   ------------------------------------------------------------ */
.support-msg {
  /* 上下を大きめにあけて、ひと言を際立たせる（上は見出しの margin 16px と合わせて 56px ぶん） */
  margin: 40px 0 56px;
  font-size: clamp(16px, 5vw, 21px);
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
}
.support-msg > span { display: block; }
.support-msg em { font-style: normal; font-size: 1.3em; }
.support-msg-badge {
  margin-top: 8px;
  padding: 1.5px 14px 4.5px;   /* 字形が下寄りなので上を詰める */
  font-size: 1.5em;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------
   身体的な負担を減らす取り組み（#work）
   キャッチは本文と同じ大きさで、黒地に黄色の札にする
   ------------------------------------------------------------ */
.burden-catch {
  align-self: center;   /* 札ごと左右中央に置く */
  margin: 0;
  padding: 5px 12px 7px;   /* 字形が下寄りなので上を詰める */
  line-height: 1.6;
  /* 改行せず 1 行で出す。基本は本文と同じ 16px で、画面幅が足りないときだけ
     21 文字が収まる大きさまで小さくする（100vw − 本文の左右余白 40px − 札の左右余白 24px） */
  white-space: nowrap;
  font-size: min(16px, calc((100vw - 64px) / 21));
}