@charset "utf-8";
/* ==========================================================================
style_recruit_sp.css — 採用LP（スマホ・839px以下）
==========================================================================
【編集はこのファイルを直接行う】
PC版（style_recruit_pc.css）と同じ全セレクタ構成。値はスマホ向け。
採用LPのスタイルは pc / sp の2ファイルで完結する。
========================================================================== */
/* --------------------------------------------------------------------------
1. 土台（セクション / コンテナ / 見出し）
-------------------------------------------------------------------------- */
/* 幅計算をpadding込みに統一（テーマ側のリセットに依存しないため） */
.rc_sec, .rc_sec *, .rc_sec *::before, .rc_sec *::after, [class*="rc_"], [class*="rc_"]::before, [class*="rc_"]::after { box-sizing: border-box; }
.rc_sec { padding: var(--rc-sec-pad) 0; color: var(--rc-text); font-family: var(--rc-font); line-height: var(--rc-lh); }
.rc_sec--alt { background: var(--rc-bg-alt); }
.rc_sec--dark { background: var(--rc-bg-dark); color: var(--rc-text-inv); }
.rc_sec--dark .rc_sec-title, .rc_sec--dark .rc_card-title { color: var(--rc-text-inv); }
.rc_sec--dark .rc_sec-lead, .rc_sec--dark .rc_card-text { color: rgba(255, 255, 255, .72); }
.rc_sec--tight { --rc-sec-pad: 72px; }
.rc_wrap { width: 88%; max-width: var(--rc-wrap); margin-inline: auto; }
.rc_wrap--narrow { max-width: 760px; }
.rc_wrap--wide { max-width: 1440px; }
.rc_wrap--full { width: 100%; max-width: none; }
/* セクションヘッダー */
.rc_sec-head { margin-bottom: 36px; }
.rc_sec-head--center { text-align: center; }
.rc_sec-head--center .rc_sec-lead { margin-inline: auto; }
.rc_sec-label { margin: 0 0 0px; font-family: var(--rc-font-en); font-size: var(--rc-fs-13); font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--rc-accent); }
.rc_sec-title { margin: 0; font-size: var(--rc-fs-22); font-weight: 600; line-height: 1.5; letter-spacing: .04em; color: #222; }
/* セクション内の小見出し（日本語見出し向け） */
.rc_sec-subtitle { margin: 0 0 12px; font-size: var(--rc-fs-17); font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: #222; }
.rc_sec-lead { margin: 20px 0 0; max-width: 760px; font-size: var(--rc-fs-15); color: var(--rc-text-sub); line-height: 2;}
/* 汎用パーツ */
.rc_btn { display: inline-block; padding: 14px 32px; border: 1px solid var(--rc-accent); border-radius: var(--rc-radius); background: var(--rc-accent); color: var(--rc-text-inv); font-size: var(--rc-fs-15); letter-spacing: .06em; text-decoration: none; transition: opacity var(--rc-ease), background var(--rc-ease), color var(--rc-ease); }
.rc_btn:hover { opacity: .82; color: var(--rc-text-inv); }
.rc_btn--ghost { background: transparent; color: var(--rc-accent); }
.rc_btn--ghost:hover { background: var(--rc-accent); color: var(--rc-text-inv); }
.rc_btn--full { display: block; width: 100%; text-align: center; }
.rc_fig { margin: 0; overflow: hidden; border-radius: var(--rc-radius); background: var(--rc-bg-alt); }
.rc_fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rc-ease); }
.rc_fig--3x2 { aspect-ratio: 3 / 2; }
.rc_fig--16x9 { aspect-ratio: 16 / 9; }
.rc_fig--1x1 { aspect-ratio: 1 / 1; }
a:hover > .rc_fig img, .rc_card:hover .rc_fig img { transform: scale(1.05); }
/* --------------------------------------------------------------------------
2. グリッド・カード系
-------------------------------------------------------------------------- */
.rc_grid { display: grid; gap: var(--rc-gap); margin: 0; padding: 0; list-style: none; }
.rc_grid--2 { grid-template-columns: 1fr; }
.rc_grid--3 { grid-template-columns: 1fr; }
.rc_grid--4 { grid-template-columns: 1fr; --rc-gap: 32px; }
/* 画像4枚横並び（間隔狭め・画像メイン用） */
.rc_grid--photo-4 { grid-template-columns: repeat(2, 1fr); gap: 2vw; --rc-gap: 2vw; }
.rc_grid--photo-4 .rc_card { padding: 0; margin: 0; }
.rc_grid--photo-4 .rc_fig { margin: 0; }
/* カード本体 */
.rc_card { display: flex; flex-direction: column; background: var(--rc-bg); border: 1px solid var(--rc-line); border-radius: var(--rc-radius); overflow: hidden; transition: box-shadow var(--rc-ease), transform var(--rc-ease); }
.rc_card:hover { box-shadow: var(--rc-shadow); transform: translateY(-3px); }
/* グリッドごと枠線を消す（シンプル2/3/4カラム）
.rc_grid--3.rc_grid--plain のように併用。中のカードを個別に .rc_card--plain にしなくてOK */
.rc_grid--plain .rc_card { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.rc_grid--plain .rc_card:hover { box-shadow: none; transform: none; }
.rc_grid--plain .rc_card-body { padding: 22px 0 0; }
.rc_grid--plain .rc_fig { border-radius: var(--rc-radius); }
/* さらに画像の角丸も消したいとき */
.rc_grid--plain.rc_grid--square .rc_fig { border-radius: 0; }
/* 区切り線だけ引きたいとき（縦罫） */
.rc_grid--ruled .rc_card { border: 0; border-left: 0; border-radius: 0; background: transparent; padding-left: 0; border-top: 1px solid var(--rc-line); padding-top: 24px; }
.rc_grid--ruled .rc_card:hover { box-shadow: none; transform: none; }
.rc_grid--ruled .rc_card-body { padding: 0; }
/* 枠線なし・余白重視（アイコン / ミニマル） */
.rc_card--plain { border: 0; background: transparent; padding: 8px 0; }
.rc_card--plain:hover { box-shadow: none; transform: none; }
.rc_card--plain .rc_card-body { padding: 0; }
/* 大型カード（2カラム用） */
.rc_card--lg .rc_card-body { padding: 36px 40px 44px; }
.rc_card--lg .rc_card-title { font-size: var(--rc-fs-20); }
.rc_card--lg .rc_card-text { font-size: var(--rc-fs-15); }
/* コンパクト（4カラム用・数字つき） */
.rc_card--compact .rc_card-body { padding: 0; }
.rc_card--compact .rc_card-title { font-size: var(--rc-fs-16); }
.rc_card--compact .rc_card-text { font-size: var(--rc-fs-14); }
/* 1カラム・センターフォーカス */
.rc_focus .rc_sec-lead { margin: 20px auto 48px; }
/* --------------------------------------------------------------------------
3. スプリット・メディア系（左右対向）
-------------------------------------------------------------------------- */
.rc_split { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.rc_split + .rc_split { margin-top: 56px; }
/* 左右入れ替え（ジグザグ用）：DOM順は「画像 → テキスト」で固定 */
.rc_split--rev .rc_split-media { order: 0; }
.rc_split--rev .rc_split-body { order: 0; }
/* 非対称 */
.rc_split--64 { grid-template-columns: 1fr; }
.rc_split--73 { grid-template-columns: 1fr; }
.rc_split--top { align-items: start; }
.rc_split-media { margin: 0; }
.rc_split-media img { display: block; width: 98%; height: 60vw; border-radius: var(--rc-radius); }
.rc_split-title { margin: 0 0 16px; font-size: var(--rc-fs-20); font-weight: 700; line-height: 1.55; white-space: nowrap;}
.rc_split-text { margin: 0 0 16px; font-size: var(--rc-fs-14); color: var(--rc-text-sub); line-height: 2;}
.rc_split-text:last-child { margin-bottom: 0; }
/* 補足カラム（6:4 / 7:3 の狭い側） */
/* 粘着型スプリット（左固定 / 右スクロール） */
.rc_sticky { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.rc_sticky--right .rc_sticky-head { order: 0; }
.rc_sticky--right .rc_sticky-body { order: 0; }
.rc_sticky-head { position: static; top: 100px; }
.rc_sticky-body { display: grid; gap: clamp(35px, 5vw, 50px); }
.rc_sticky-item { margin: 0; }
.rc_sticky-item img { display: block; width: 100%; height: auto; border-radius: var(--rc-radius); }
.rc_sticky-item-title { margin: 24px 0 10px; font-size: var(--rc-fs-19); font-weight: 700; text-align: center;line-height: 1.6;}
.rc_sticky-item-text { margin: 0; font-size: var(--rc-fs-14); color: var(--rc-text-sub); line-height: 2;}
.rc_summary-merits { margin: 20px 0 0; padding: 0; list-style: none; }
.rc_summary-merits li { position: relative; padding: 11px 0 11px 26px; font-size: var(--rc-fs-15); font-weight: 500; line-height: 1.7; border-bottom: 1px solid var(--rc-warm-line); }
.rc_summary-merits li:last-child { border-bottom: 0; }
.rc_summary-merits li::before { content: "✓"; position: absolute; left: 0; top: 11px; color: var(--rc-accent); font-weight: 700; }
/* --------------------------------------------------------------------------
4. Bento Grid（弁当箱）
-------------------------------------------------------------------------- */
/* A: 上に横長1枚 + 下に小2枚 */
/* B: 左に縦長1枚 + 右に2枚積み */
/* --------------------------------------------------------------------------
5. リスト・ステップ・タイムライン系
-------------------------------------------------------------------------- */
/* ナンバリング・ステップ */
.rc_steps { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: rcstep; }
.rc_steps--4 { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
.rc_step { position: relative; padding-top: 24px; border-top: 2px solid var(--rc-line); counter-increment: rcstep; }
.rc_step::before { content: "0" counter(rcstep); display: block; margin-bottom: 14px; font-family: var(--rc-font-en); font-size: var(--rc-fs-36); font-weight: 300; line-height: 1; color: var(--rc-accent); }
.rc_step-title { margin: 0 0 10px; font-size: var(--rc-fs-18); font-weight: 700; }
.rc_step-text { margin: 0; font-size: var(--rc-fs-15); color: var(--rc-text-sub); }
/* 垂直タイムライン */
.rc_timeline { position: relative; margin: 0; padding: 0 0 0 40px; list-style: none; }
.rc_timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 2px; background: var(--rc-line); }
.rc_tl-item { position: relative; padding-bottom: 30px; }
.rc_tl-item:last-child { padding-bottom: 0; }
.rc_tl-item::before { content: ""; position: absolute; top: 12px; left: -40px; width: 16px; height: 16px; border: 3px solid var(--rc-bg); border-radius: 50%; background: var(--rc-accent); box-shadow: 0 0 0 2px var(--rc-accent); }
.rc_tl-date { margin: 0 0 6px; font-family: var(--rc-font-en); font-size: var(--rc-fs-14); letter-spacing: .08em; color: var(--rc-accent); }
.rc_tl-title { margin: 0 0 8px; font-size: var(--rc-fs-17); font-weight: 700; }
.rc_tl-text { margin: 0; font-size: var(--rc-fs-14); color: var(--rc-text-sub); line-height: 2;}
/* チェックリスト・グリッド */
/* --------------------------------------------------------------------------
6. データ・インタラクティブ系
-------------------------------------------------------------------------- */
/* アコーディオン（details / summary・JS不要） */
.rc_acc { border-top: 1px solid var(--rc-line); }
.rc_acc-item { border-bottom: 1px solid var(--rc-line); }
.rc_acc-q { position: relative; padding: 24px 56px 24px 0; font-size: var(--rc-fs-16); font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; transition: color var(--rc-ease); padding-right: 40px; }
.rc_acc-q::-webkit-details-marker { display: none; }
.rc_acc-q:hover { color: var(--rc-accent); }
.rc_acc-q::before, .rc_acc-q::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; background: var(--rc-accent); transition: transform var(--rc-ease); }
.rc_acc-q::after { transform: rotate(90deg); }
.rc_acc-item[open] .rc_acc-q::after { transform: rotate(0deg); }
.rc_acc-a { margin: 0; padding: 0 56px 28px 0; font-size: var(--rc-fs-15); color: var(--rc-text-sub); padding-right: 0; }
/* プライシング・対比カード */
/* 「要相談」など日本語を価格欄に入れる場合 */
.rc_price-card .rc_btn { margin-top: auto; }
/* メトリクス / スタッツ */
.rc_sec--dark .rc_metric-num { color: #7fb3e0; }
.rc_sec--dark .rc_metric-text { color: rgba(255, 255, 255, .6); }
/* --------------------------------------------------------------------------
7. 幅ユーティリティ（.rc_w30 〜 .rc_w100／5%刻み・自動センタリング）
--------------------------------------------------------------------------
画面幅に対する％で表示幅を決め、中央寄せします。
.rc_wrap の代わりに、または .rc_wrap に併用して使います（併用時は幅指定が優先）。
…
→ 画面幅の70%
max-width の上限も外れるので、w90 は 1120px を超えて広がります。
上限を残したい場合は .rc_wXX--cap を併用（--rc-wrap の値で頭打ち）。
-------------------------------------------------------------------------- */
/* 最大幅（--rc-wrap = 1120px）で頭打ちにしたいとき */
/* --------------------------------------------------------------------------
8. フル幅（画面横いっぱい）ブロック
-------------------------------------------------------------------------- */
/* 8-0. 中央寄せコンテナの内側から画面幅いっぱいに突き抜けさせるユーティリティ */
/* 8-1. フル幅バンド（背景画像 or 背景色 + 中央テキスト。CTA・章扉に） */
/* 8-2. フル幅タイル（隙間ゼロで敷き詰める。実績・ギャラリー向け） */
/* 8-3. フル幅スプリット（片側の画像が画面端まで届く50/50） */
.rc_splitfull--dark .rc_split-text { color: rgba(255, 255, 255, .72); }
/* 8-4. フル幅の1枚画像（帯状のビジュアル） */
/* 8-5. フル幅セクション（左右パディングを持たせた全幅コンテナ） */
.rc_sec--full > .rc_wrap, .rc_full-in { width: 100%; max-width: none; padding-inline: clamp(20px, 4vw, 64px); }
.rc_sec--flush { padding: 0; }
/* 上下パディングも消す（バンド直結用） */
/* --------------------------------------------------------------------------
9. レスポンシブ
-------------------------------------------------------------------------- */
/* ==========================================================================
11. ユーティリティ（ブロックに掛け合わせて使う微調整クラス）
--------------------------------------------------------------------------
ブロック＝構造、ユーティリティ＝見た目の微調整、という役割分担です。
ブロック側の指定に確実に勝たせるため !important を付けています。
※ファイル末尾に置くこと（後勝ちの原則を壊さないため）
========================================================================== */
/* ── 11-1. 文字サイズ（親に対する相対値。上下限は clamp で保護）──
例: /
*/
/* 既定に戻したいとき */
/* ── 11-2. 文字寄せ ──
中央寄せは、中のリード文やボタンのセンタリングまで面倒を見ます */
.rc_ta-c .rc_sec-lead, .rc_ta-c .rc_card-text, .rc_ta-c .rc_split-text { margin-inline: auto !important; }
/* ── 11-3. 太さ / 行間 / 字間 ── */
/* ウエイトは数値そのままのクラス名（100〜900）
※実際に出る太さはフォント側の対応ウエイト次第。
游ゴシックは 400/700 のみ、Noto Sans JP は 100〜900 に対応。 */
/* ── 11-4. 文字色 ── */
/* ── 11-5. 余白（--rc-gap 基準の4段階）── */
/* ── 11-6. 表示制御 ── */
/* ── 11-7. SP専用の上書き（クラス名の @ は HTML 側ではそのまま書く）──
例:
→ PCは左寄せ、SPだけ中央寄せ */
/* ==========================================================================
採用LP オーバーライド（page-recruit.php テンプレート順）
========================================================================== */
/* --------------------------------------------------------------------------
0. ブランド・共通
-------------------------------------------------------------------------- */
:root {
--rc-text: #1a1a1a;
--rc-text-sub: #555;
--rc-text-inv: #ffffff;
--rc-bg: #ffffff;
--rc-bg-dark: #16181d;
--rc-accent: #4754B1;
--rc-accent-mid: #5B57B5;
--rc-accent-light: #0065cb;
--rc-accent-dark: #0013a7;
--rc-gold: #E9A210;
--rc-warm-bg: #f4f6ff;
--rc-warm-line: #c8d4f0;
--rc-page-bg: #ffffff;
--rc-body-bg: var(--rc-page-bg);
--rc-font-ja: "Noto Sans JP", sans-serif;
--rc-font-en: "Montserrat", sans-serif;
--rc-back-pattern-size: 120vh auto;
--rc-section-tint: rgba(224, 242, 252, 0.7);
--rc-accent-weak: rgba(0, 101, 203, 0.1);
--rc-bg-alt: var(--rc-section-tint);
--rc-line: #c8d4f0;
--rc-font: var(--rc-font-ja);
--rc-lh: 1.9;
--rc-sec-pad: 40px;
--rc-gap: 20px;
--rc-radius: 10px;
--rc-wrap: 1200px;
--rc-shadow: 0 2px 24px rgba(0, 0, 0, .07);
--rc-shadow-lg: 0 8px 40px rgba(0, 0, 0, .12);
--rc-ease: .4s cubic-bezier(.22, 1, .36, 1);
--rc-back-green1-position: left 1.5vw top;
--rc-back-green2-position: left 1.5vw top;
--rc-fs-10: 2.67vw;
--rc-fs-12: 3.2vw;
--rc-fs-13: 3.47vw;
--rc-fs-14: 3.73vw;
--rc-fs-15: 4vw;
--rc-fs-16: 4.27vw;
--rc-fs-17: 4.53vw;
--rc-fs-18: 4.8vw;
--rc-fs-19: 5.07vw;
--rc-fs-20: 5.33vw;
--rc-fs-22: 5.87vw;
--rc-fs-24: 6.4vw;
--rc-fs-26: 6.93vw;
--rc-fs-28: 7.47vw;
--rc-fs-36: 9.6vw;
--rc-fs-icon: 6.67vw;
}
.spno {display: none;}
.rc_recruit-head-label, .rc_tl-time, .rc_cta-label, .rc_job-type { font-family: var(--rc-font-en); }
.rc_cta-label {color:#fff;}
.back_yellow,
.back_green1,
.back_green2,
.rc_spacer.back_green1 { background-color: var(--rc-section-tint) !important; background-image: none !important; }
.rc_wrap, .rc_nav-in { width: 88%; max-width: var(--rc-wrap); }
.rc_wrap--wide { width: 90%; max-width: 1200px; }
.rc_sec-head { margin-bottom: 36px; }
.rc_split + .rc_split { margin-top: 56px; }
.rc_merit-section + .rc_merit-section { margin-top: clamp(32px, 4vw, 48px); }
.rc_sec--tight { --rc-sec-pad: 56px; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--rc-font-ja); font-size: var(--rc-fs-16); color: #1a1a1a; line-height: 1.85; }
body.rc_recruit-page { background: #fff !important; font-family: var(--rc-font-ja); }
.rc_recruit-main {
margin-top: 0;
width: 100%;
max-width: none;
float: none;
min-height: 100vh;
background-color: var(--rc-page-bg) !important;
background-image: url(/images/recruit/back.svg) !important;
background-position: center top !important;
background-size: var(--rc-back-pattern-size) !important;
background-repeat: repeat !important;
}
body.rc_recruit-page .rc_recruit-main > .rc_sec:not(.back_green1):not(.back_yellow):not(.back_green2):not(.rc_hero):not(.rc_cta) {
background-color: transparent !important;
}
body.rc_recruit-page .rc_hero,
body.rc_recruit-page .rc_sec,
body.rc_recruit-page .rc_cta { scroll-margin-top: 24px; }
.header_top .header_nav--recruit ul { display: flex; flex-wrap: nowrap; gap: 0 12px; justify-content: flex-end; align-items: center; max-width: none; }
.header_top .header_nav--recruit li { flex-shrink: 0; }
.header_top .header_nav--recruit a { font-size: var(--rc-fs-13); line-height: 1.4; white-space: nowrap; }
.header_top .header_nav--recruit .header_recruit_cta a { display: inline-block; padding: 8px 16px; background: var(--rc-accent); border-radius: 999px; color: #fff !important; font-size: var(--rc-fs-14); font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.header_top .header_nav--recruit .header_recruit_cta a:hover { background: var(--rc-accent-dark); opacity: 1; }
.rc_sec-label { font-size: var(--rc-fs-13); color: var(--rc-accent-light); }
.rc_sec-title { font-size: var(--rc-fs-22); }
.rc_sec-lead { font-size: var(--rc-fs-15); }
.rc_split-title { font-size: var(--rc-fs-20); }
.rc_split-text { font-size: var(--rc-fs-15); }
.rc_btn, .rc_link { font-size: var(--rc-fs-15); }
.rc_sticky-item-title { font-size: var(--rc-fs-19); }
.rc_sticky-item-text { font-size: var(--rc-fs-15); }
.rc_tl-date { font-size: var(--rc-fs-14); }
.rc_tl-title { font-size: var(--rc-fs-17); }
.rc_tl-text { font-size: var(--rc-fs-14); }
.rc_sec-subtitle { font-size: var(--rc-fs-17); margin-bottom: 10px; }
.rc_step-title { font-size: var(--rc-fs-18); }
.rc_step-text { font-size: var(--rc-fs-15); }
.rc_steps--4 .rc_step { padding-top: 16px; }
.rc_steps--4 .rc_step::before { font-size: 9.6vw; margin-bottom: 8px; }
.rc_steps--4 .rc_step-title { font-size: var(--rc-fs-16); line-height: 1.45; }
.rc_steps--4 .rc_step-text { font-size: var(--rc-fs-14); line-height: 1.7; }
.rc_acc-q { font-size: var(--rc-fs-16); padding-right: 40px; }
.rc_acc-a { font-size: var(--rc-fs-15); padding-right: 0; }
#faq .rc_wrap { max-width: 900px; }
/* --------------------------------------------------------------------------
1. ヒーロー (#top)
-------------------------------------------------------------------------- */
.rc_hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; }
.rc_hero-bg { position: absolute; inset: 0; margin: 0; z-index: 0; }
.rc_hero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); z-index: 1; pointer-events: none; }
/* 下端を半透明→白へフェードアウト */
.rc_hero-bg::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 38%;
z-index: 2;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.35) 40%,
rgba(255, 255, 255, 0.85) 75%,
#fff 100%
);
}
.rc_hero-bg .rc_hero-swiper, .rc_hero-bg .swiper-wrapper, .rc_hero-bg .swiper-slide { width: 100%; height: 100%; }
.rc_hero-bg .swiper-slide { overflow: hidden; }
.rc_hero-bg .rc_hero-zoom { width: 100%; height: 100%; transform: scale(1); transform-origin: center center; will-change: transform; }
.rc_hero-bg .rc_hero-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc_hero-content { position: relative; z-index: 1; width: 90%; text-align: center; padding: 20vw 0 14vw; font-feature-settings: "palt";}
.rc_hero-title { margin: 0 0 2vw 0; font-size: 4.5vw; font-weight: 600; line-height: 1.3; letter-spacing: .03em; color: #fff; text-shadow: #000 0 0 10px; }
.rc_hero-title2 { margin: 0 0 4vw 0; font-size: 6.6vw; font-weight: 700; line-height: 1.4; letter-spacing: .03em; color: #fff; text-shadow: #000 0 0 10px; }
.rc_hero-merits { display: flex; gap: 2vw; justify-content: center; margin: 2vw 0 4vw; opacity: 0.95; flex-direction: column; align-items: center; }
.rc_hero-merit { flex: 1; max-width: 100%; padding: 2vw 0 2.4vw 0; background-color: rgba(71, 84, 177, 0.92); border-radius: 16px; text-align: center; width: 82%; line-height: 1.4!important;}
.rc_hero-merit-num { display: inline-block; font-size: var(--rc-fs-18); font-weight: 600; color: #fff082; letter-spacing: .04em; margin-right: 1vw; }
.rc_hero-merit-txt { display: inline-block; font-size: var(--rc-fs-13); color: rgba(255, 255, 255, .82); letter-spacing: .04em; }
.rc_hero-badges { display: flex; flex-wrap: wrap; gap: 2vw; justify-content: center; margin: 0 0 20px; }
.rc_badge { background-color: rgba(255, 255, 255, 0.8); display: inline-flex; align-items: center; gap: 6px; padding: 1vw 2vw; border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; font-size: var(--rc-fs-13); font-weight: 600; letter-spacing: .01em; color: #058; }
.rc_badge-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rc-gold); flex-shrink: 0; }
/* 製品画像ループ（ヒーロー下端に少し被せる） */
.rc_hero-items {
position: relative;
z-index: 3;
margin-top: -24vw;
margin-bottom: 0vw;
overflow: hidden;
pointer-events: none;
}
.rc_hero-items-track {
display: flex;
align-items: center;
gap: 22px;
width: max-content;
animation: rc-hero-items-marquee 45s linear infinite;
will-change: transform;
}
.rc_hero-items-item {
flex: 0 0 auto;
margin: 0;
height: 30vw;
}
.rc_hero-items-item img {
display: block;
height: 100%;
width: auto;
max-width: none;
object-fit: contain;
}
@keyframes rc-hero-items-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.rc_hero-items-track { animation: none; }
}
/* --------------------------------------------------------------------------
3. こんな方に (#persona-target)
-------------------------------------------------------------------------- */
.rc_persona-sec { overflow: visible; padding-bottom: calc(var(--rc-sec-pad) - 16px); }
.rc_persona-sec .rc_wrap { margin-bottom: 0; }
.rc_persona-sec .rc_sec-head { margin-bottom: 24px; }
.rc_persona-carousel { width: 100%; }
.rc_persona-viewport { --rc-persona-card-gap: clamp(12px, 1.5vw, 18px); --rc-persona-card-w: 280px; --rc-persona-center-pad: 140px; container-type: inline-size; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; touch-action: pan-x; overscroll-behavior-x: contain; padding-top: 32px; }
.rc_persona-viewport::-webkit-scrollbar { display: none; }
.rc_persona-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.rc_persona-viewport.is-auto-scrolling { scroll-snap-type: none; scroll-behavior: auto; }
.rc_persona-track { display: flex; gap: 14px; width: max-content; margin: 0; padding: 0 var(--rc-persona-center-pad) 16px 0; list-style: none; }
.rc_persona-card { position: relative; flex: 0 0 var(--rc-persona-card-w); width: var(--rc-persona-card-w); max-width: var(--rc-persona-card-w); min-width: var(--rc-persona-card-w); scroll-snap-align: center; padding: 8vw 3vw 5vw 3vw; background: #fff; border: 1px solid rgba(42, 92, 63, .1); border-radius: 10px; box-shadow: 0 2px 12px rgba(25, 58, 40, .08); text-align: center; }
.rc_persona-icon { position: absolute; top: 0; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: 3px solid #fff; border-radius: 50%; background: var(--rc-accent); color: #fff; font-size: var(--rc-fs-icon); line-height: 1; transform: translate(-50%, -50%); box-shadow: 0 4px 14px rgba(25, 58, 40, .18); }
.rc_persona-card-text { margin: 4px 0; font-size: var(--rc-fs-16); font-weight: 600; line-height: 1.7; color: #3a5a8a; }
/* --------------------------------------------------------------------------
4. メリット (#merits) — SPは1枚＋右に次が見える横フリック
-------------------------------------------------------------------------- */
#merits { margin-bottom: 0; }
#merits .rc_wrap--wide { width: 100%; max-width: none; }
.rc_merit-section { margin: 0 0 50px; width: 100%; }
.rc_merit-section:last-child { margin-bottom: 0; }
.rc_merit-cat {
display: flex;
align-items: center;
gap: 14px;
width: auto;
max-width: none;
margin: 0 0 20px;
/* 当初の5vwとカード左端の中間くらい */
padding-left: 8vw;
padding-right: 8vw;
box-sizing: border-box;
font-size: 5.5vw;
font-weight: 700;
color: #1a1a1a;
font-feature-settings: "palt";
white-space: nowrap;
}
.rc_merit-cat::before { content: ""; display: block; flex-shrink: 0; width: 6px; height: 24px; background: var(--rc-gold); border-radius: 4px; margin-top: 2px; }
.rc_merit-grid {
--rc-merit-card-w: 84vw;
display: flex;
gap: 3.5vw;
width: 100%;
margin: 0;
/* 左右パディングで先頭・末尾カードも中央に寄せられるようにする */
padding: 0 calc((100vw - var(--rc-merit-card-w)) / 2) 6px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* pan-x のみだと縦スクロールが奪われるため両方向を許可 */
touch-action: pan-x pan-y;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.rc_merit-grid::-webkit-scrollbar { display: none; }
.rc_merit-item {
flex: 0 0 var(--rc-merit-card-w);
width: var(--rc-merit-card-w);
max-width: var(--rc-merit-card-w);
min-width: 0;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.rc_merit-fig { margin: 0 0 14px; overflow: hidden; border-radius: var(--rc-radius); aspect-ratio: 4 / 2.5; }
.rc_merit-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc_merit-title {
margin: 0 0 1.5vw;
font-size: 4.3vw;
font-weight: 700;
line-height: 1.45;
color: var(--rc-accent);
text-align: center;
letter-spacing: 1px;
white-space: normal;
}
.rc_merit-text { margin: 0; font-size: var(--rc-fs-14); line-height: 1.82; color: #4a4a4a; }
/* --------------------------------------------------------------------------
5. 会社について (back_yellow / sticky)
-------------------------------------------------------------------------- */
/* .rc_sticky 系は blocks.css を使用 */
/* --------------------------------------------------------------------------
6. 仕事の方針 (#work-policy)
-------------------------------------------------------------------------- */
#work-policy .rc_policy-row { display: flex; flex-direction: column; align-items: stretch; gap: 7vw; width: 100%; margin-inline: auto; }
#work-policy .rc_policy-row--rev { flex-direction: column; }
#work-policy .rc_policy-row + .rc_policy-row { margin-top: 12vw; }
#work-policy .rc_policy-media { order: 1; width: 100%; margin-inline: auto; min-height: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rc-radius, 4px); }
#work-policy .rc_policy-body { order: 2; width: 100%; display: flex; flex-direction: column; gap: 6vw; justify-content: center; text-align: left; }
.rc_policy-item-title { margin: 0 0 10px; font-size: var(--rc-fs-17); font-weight: 700; line-height: 1.65; color: var(--rc-accent); }
.rc_policy-media img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; border-radius: var(--rc-radius, 4px); }
.rc_policy-row .rc_split-text {font-size: var(--rc-fs-14)!important;}
/* --------------------------------------------------------------------------
7. 仕事内容 (#jobs)
-------------------------------------------------------------------------- */
.rc_job-card { display: flex; flex-direction: column; gap: 0; align-items: stretch; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, .1); }
.rc_job-card + .rc_job-card { margin-top: 48px; }
.rc_job-card .rc_job-media { order: 1 !important; }
.rc_job-card .rc_job-body { order: 2 !important; }
.rc_job-media { display: flex; flex-direction: column; gap: clamp(6px, 0.8vw, 10px); align-self: stretch; min-height: 0; }
.rc_job-media-main { flex: 1 1 auto; display: flex; margin: 0; min-height: 220px; overflow: hidden; }
.rc_job-media-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc_job-media-sub { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 0.8vw, 10px); flex: 0 0 auto; }
.rc_job-media-sub-item { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.rc_job-media-sub-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc_job-body { padding: 7vw; background: #fff; display: flex; flex-direction: column; justify-content: center; }
.rc_job-type { display: inline-block; padding: 4px 12px; margin: 0 0 16px; background: var(--rc-accent-light); color: #fff; font-size: var(--rc-fs-12); font-weight: 700; letter-spacing: .1em; border-radius: 2px; }
.rc_job-title { margin: 0 0 20px; font-size: var(--rc-fs-20); font-weight: 700; line-height: 1.5; }
.rc_job-title span {line-height: 1.6!important;display: block;}
.rc_job-text { margin: 0; font-size: var(--rc-fs-14); line-height: 1.85; color: #4a4a4a; }
.rc_job-points { margin: 20px 0 0; padding: 0; list-style: none; }
.rc_job-points li { position: relative; padding: 3.2vw 0 3.2vw 20px; font-size: var(--rc-fs-14); color: #4a4a4a; border-bottom: 1px dotted var(--rc-warm-line); }
.rc_job-points li:last-child { border-bottom: 0; }
.rc_job-points li::before { content: ""; position: absolute; left: 0; top: 4.8vw; width: 8px; height: 8px; border-radius: 50%; background: var(--rc-accent); opacity: .6; }
/* --------------------------------------------------------------------------
鋳造ワーカーの現場（フリック可・自動スライドなし）
-------------------------------------------------------------------------- */
.rc_flow-sec { overflow: hidden; padding-bottom: 20px; }
.rc_flow-viewport { width: 100%; overflow: hidden; cursor: grab; touch-action: pan-y; }
.rc_flow-viewport.is-dragging { cursor: grabbing; }
.rc_flow-track { position: relative; display: flex; align-items: flex-start; gap: 22px; width: max-content; }
.rc_flow-card { width: min(72vw, 270px); flex: 0 0 auto; }
.rc_flow-video { pointer-events: none; }
.rc_flow-media { position: relative; width: 100%; max-width: 270px; }
.rc_flow-video { display: block; width: 100%; max-width: 270px; max-height: 480px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 5vw; background: #111; }
.rc_flow-badge { position: absolute; left: 0; bottom: 3vw; z-index: 2; margin: 0; background-color: #5B57B5; color: #fff; font-weight: 700; font-size: 3.5vw; line-height: 1.2; padding: 1vw 3.75vw; }
.rc_flow-card h3 { margin: 3vw 0 2vw; padding: 0; text-align: center; font-size: 5.25vw; font-weight: 700; line-height: 1; letter-spacing: .2vw; color: #222; }
.rc_flow-text { margin: 0; font-size: 3.5vw; font-weight: 400; line-height: 1.9; letter-spacing: .1vw; color: #333; }
.rc_flow-pagination { display: flex; justify-content: center; gap: 2.4vw; margin-top: 3vw; }
.rc_flow-bullet { width: 3vw; height: 3vw; padding: 0; border: 2px solid #3366cc; border-radius: 50%; background: #fff; cursor: pointer; }
.rc_flow-bullet.is-active { background: #3366cc; }
/* --------------------------------------------------------------------------
8. 1日の働き方 (#daily)
-------------------------------------------------------------------------- */
.rc_daily-sticky { grid-template-columns: 1fr; gap: 32px; }
.rc_daily-sticky .rc_sticky-head { top: clamp(88px, 10vh, 120px); position: static; }
.rc_daily-head { text-align: center; overflow: visible; }
.rc_daily-head .rc_sec-label { margin-bottom: 10px; }
.rc_daily-head .rc_sec-title { margin-bottom: 12px; font-size: var(--rc-fs-20); line-height: 1.45; }
.rc_nobr { white-space: nowrap; }
.rc_daily-head .rc_sec-lead { margin: 0; font-size: var(--rc-fs-14); line-height: 1.75; }
.rc_daily-photo { width: 50vw; margin: 0 auto 20px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.rc_daily-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc_daily-body { display: block; min-width: 0; }
.rc_tl-time { font-size: var(--rc-fs-15); font-weight: 500; color: var(--rc-accent); }
/* --------------------------------------------------------------------------
9. 職場の雰囲気 + 先輩の声 (#voices)
-------------------------------------------------------------------------- */
.rc_atmo-photos { --rc-gap: 2px; margin-bottom: clamp(22px, 3vw, 28px); }
.rc_atmo-photos .rc_fig { aspect-ratio: 4 / 2.8; }
.rc_atmo-intro { margin: 0 auto clamp(30px, 5vw, 54px); }
.rc_atmo-intro p { margin: 0; font-size: var(--rc-fs-14); color: #333; line-height: 2;}
.rc_voice-cards { display: grid; gap: clamp(20px, 3vw, 28px); }
.rc_voice-card { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; padding: 28px 20px; background: #fff; border-radius: 8px; box-shadow: 0 4px 24px rgba(0, 0, 0, .08); }
.rc_voice-card-profile { text-align: center; }
.rc_voice-card-photo { width: 50vw; margin: 0 auto 6px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.rc_voice-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc_voice-card-name { margin: 0 0 0; font-size: var(--rc-fs-17); font-weight: 700; color: #1a1a1a; }
.rc_voice-card-role { margin: 0; font-size: var(--rc-fs-13); line-height: 1; color: var(--rc-accent); font-weight: 500; }
.rc_voice-card-body { width: 96%;margin: 0 auto 0 auto;}
.rc_voice-card-title { margin: 10px 0 16px; font-size: var(--rc-fs-17); font-weight: 700; line-height: 1.65; color: var(--rc-accent); }
.rc_voice-card-text { margin: 0; font-size: var(--rc-fs-14); line-height: 2; color: #4a4a4a; }
/* --------------------------------------------------------------------------
10. 募集要項 (#recruit)
-------------------------------------------------------------------------- */
.rc_recruit-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.rc_recruit-card { overflow: hidden; }
.rc_recruit-head { padding: 24px 28px; background: var(--rc-accent); color: #fff; border-radius: 0; }
.rc_recruit-head-label { margin: 0 0 6px; font-size: var(--rc-fs-12); letter-spacing: .18em; opacity: .75; }
.rc_recruit-head-title { margin: 0; font-size: var(--rc-fs-20); font-weight: 700; }
.rc_recruit-card .basic_table { border-collapse: collapse; border-spacing: 0; line-height: 1.6; width: 100%; margin: 0; table-layout: fixed; border-top: 1px solid #ccc; border-left: 1px solid #ccc; }
.rc_recruit-card .basic_table tbody { display: table-row-group !important; }
.rc_recruit-card .basic_table tr { display: table-row !important; }
.rc_recruit-card .basic_table th,
.rc_recruit-card .basic_table td { display: table-cell !important; border-bottom: 1px solid #ccc !important; border-right: 1px solid #ccc !important; padding: 2vw 3vw !important; vertical-align: top; background-image: none !important; filter: none !important; font-size: var(--rc-fs-14); }
.rc_recruit-card .basic_table th { background-color: #f0f3ff !important; font-weight: 600 !important; width: 32%; text-align: left; color: #1a1a1a; white-space: normal; }
.rc_recruit-card .basic_table td { background-color: #fff !important; line-height: 1.7 !important; font-weight: normal; }
.rc_recruit-card .basic_table td small { color: #888; font-size: var(--rc-fs-12); }
.rc_recruit-card .basic_table a { color: var(--rc-accent-light); text-decoration: underline; }
.rc_model-salary { margin-top: 12vw; }
.rc_model-salary .basic_table th { width: 36%; }
.rc_model-salary-note { margin: 3vw 0 0; font-size: .88em; color: #555; }
/* --------------------------------------------------------------------------
11. 選考フロー (#flow) / FAQ (#faq)
-------------------------------------------------------------------------- */
/* .rc_steps / .rc_acc 系は blocks.css を使用 */
/* --------------------------------------------------------------------------
12. CTA (#cta)
-------------------------------------------------------------------------- */
.rc_cta { padding: clamp(60px, 8vw, 100px) 5%; background: var(--rc-accent); text-align: center; }
.rc_cta-title { margin: 0 0 16px; font-size: var(--rc-fs-22); font-weight: 700; line-height: 1.5; color: #fff; }
.rc_cta-text { margin: 0 0 32px; font-size: var(--rc-fs-14); color: rgba(255, 255, 255, .72); line-height: 2;}
/* /recruit/ と同じ見学フォーム（style_recruit_sp.css 準拠） */
.rc_cta .factory_form {
width: 90vw;
max-width: 100%;
margin: 0 auto 5vw;
text-align: center;
border-radius: 5vw;
padding: 4vw 0 5vw;
background-color: rgba(255, 255, 240, 0.95);
border: #999 1px solid;
color: #333;
box-sizing: border-box;
}
.rc_cta .factory_form fieldset {
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0;
}
.rc_cta .factory_form .screen-reader-response {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.rc_cta .factory_form h3 {
float: none !important;
position: static !important;
width: auto !important;
height: auto !important;
margin: 3vw 0 2.5vw;
padding: 0;
font-size: 5vw;
letter-spacing: 0.3vw;
color: #36b;
background: none !important;
text-align: center;
}
.rc_cta .factory_form p {
margin: 0 0 3vw;
color: #333;
line-height: 1.7;
font-size: 3.5vw;
}
.rc_cta .factory_form table.mailform {
width: 94%;
margin: 0 auto 3vw;
border: 0 !important;
border-collapse: collapse;
background: transparent !important;
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
}
.rc_cta .factory_form table.mailform th,
.rc_cta .factory_form table.mailform td {
display: block !important;
width: 100% !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
filter: none !important;
vertical-align: middle;
font-weight: normal;
color: #333;
box-sizing: border-box;
}
.rc_cta .factory_form table.mailform th {
padding: 2vw 0 1vw !important;
text-align: center;
font-size: 3.5vw;
white-space: normal;
}
.rc_cta .factory_form table.mailform td {
padding: 1vw 0 3vw !important;
text-align: center;
}
.rc_cta .factory_form table.mailform td label {
display: inline-block;
margin: 0 1vw 3vw;
color: #333;
font-size: 3.5vw;
}
/* チェック／ラジオ：項目は横並び＋折返し（左揃え）、まとまり全体は中央 */
.rc_cta .factory_form .wpcf7-checkbox,
.rc_cta .factory_form .wpcf7-radio {
display: inline-block;
max-width: 86%;
margin: 0 auto;
text-align: left;
vertical-align: top;
line-height: 1.2!important;font-feature-settings: "palt";
}
.rc_cta .factory_form .wpcf7-list-item {
display: inline-block;
margin: 0 3vw .4vw 0;
vertical-align: top;
}
.rc_cta .factory_form .wpcf7-list-item label {
display: inline-flex;
align-items: center;
gap: 1vw;
margin: 0;
text-align: left;
font-size: 3.5vw;
color: #333;
white-space: nowrap;
}
.rc_cta .factory_form table.mailform input[type="text"],
.rc_cta .factory_form table.mailform input[type="email"],
.rc_cta .factory_form table.mailform input[type="tel"] {
padding: 2vw;
font-size: 100%;
width: 80%;
max-width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
background: #fff;
}
.rc_cta .factory_form table.mailform textarea {
padding: 14px;
font-size: 110%;
width: 80%;
box-sizing: border-box;
border: 1px solid #ccc;
background: #fff;
}
.rc_cta .factory_form .mailform_must {
display: inline-block;
background-color: #c00;
padding: 4px 5px;
font-size: 10px;
color: #fff;
border-radius: 4px;
line-height: 100%;
margin: 0 6px 0 0;
}
.rc_cta .factory_form .mailform_submit input[type="submit"] {
-webkit-box-sizing: content-box;
-webkit-appearance: button;
display: block;
width: 70%;
margin: 0 auto 2vw;
padding: 4vw 0 !important;
border: #eee 1px solid;
border-radius: 3vw;
background-color: #c68446;
color: #fff;
font-size: 110%;
font-weight: bold;
line-height: 160%;
cursor: pointer;
}
.rc_cta-tel { margin-top: clamp(40px, 5vw, 56px); text-align: center; }
.rc_cta-tel-label { margin: 0 0 12px; font-size: var(--rc-fs-17); font-weight: 700; color: #fff; letter-spacing: .06em; line-height: 1.6;}
.rc_cta-tel-number { margin: 0 0 8px; font-size: var(--rc-fs-28); font-weight: 700; line-height: 1.15; }
.rc_cta-tel-number a { color: var(--rc-gold); text-decoration: none; }
.rc_cta-tel-hours { margin: 0; font-size: var(--rc-fs-14); color: rgba(255, 255, 255, .65); }
.rc_spacer { height: 60px; }
/* --------------------------------------------------------------------------
13. レスポンシブ（採用LP固有）
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
SP追加（PC単独セレクタに無い複合指定）
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
14. 採用LPハンバーガーメニュー（footer_nav--recruit）
-------------------------------------------------------------------------- */
.footer_nav--recruit .footer_nav_recruit { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.footer_nav--recruit .footer_nav_recruit-title { margin: 0 0 5vw; font-size: 4vw; font-weight: 700; letter-spacing: .08em; text-align: center; color: var(--rc-accent, #4754B1); }
.footer_nav--recruit .footer_nav_recruit-list { margin: 0 auto; padding: 0; list-style: none; width: auto; min-width: 52vw; display: flex; flex-direction: column; align-items: center; }
.footer_nav--recruit .footer_nav_recruit-list li { width: 100%; margin-bottom: 4vw; text-align: center; }
.footer_nav--recruit .footer_nav_recruit-list a { display: inline-block; font-size: 4.3vw; line-height: 1.5; color: #1a1a1a !important; text-decoration: none !important; font-weight: 500; }
.footer_nav--recruit .footer_nav_recruit-cta { margin-top: 2vw; margin-bottom: 0; }
.footer_nav--recruit .footer_nav_recruit-cta a { display: inline-block !important; padding: 2.8vw 8vw !important; background: var(--rc-accent, #4754B1) !important; border-radius: 999px !important; color: #fff !important; font-size: 4vw !important; font-weight: 700 !important; letter-spacing: .06em; line-height: 1.4 !important; }
.footer_nav.fullscreen.footer_nav--recruit { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2vh 6vw 4vh 6vw!
; box-sizing: border-box;}
.footer_nav.fullscreen.footer_nav--recruit .footer_nav_flex { width: 100%; max-width: 100%; margin: 0 auto; padding: 0; justify-content: center; align-items: center; min-height: auto; flex: 1; }
.footer_nav.fullscreen.footer_nav--recruit .footer_nav_right { width: 100%; padding: 0; display: flex; justify-content: center; align-items: center; }
.footer_nav.fullscreen.footer_nav--recruit .footer_nav_recruit-title { font-size: 4.8vw; margin-bottom: 5vw; }
.footer_nav.fullscreen.footer_nav--recruit .footer_nav_recruit-list a { font-size: 4.8vw; }
.footer_nav.fullscreen.footer_nav--recruit .footer_nav_recruit-cta a { font-size: 4.3vw !important; padding: 3.2vw 10vw !important; }
.footer_nav.fullscreen.footer_nav--recruit .footer_logo { display: block !important; width: 100%; margin: 0 auto 4vw; text-align: center; }
.footer_nav.fullscreen.footer_nav--recruit .footer_logo a { display: block; width: 34vw; max-width: 180px; margin: 0 auto; }
.footer_nav.fullscreen.footer_nav--recruit .footer_logo a img { width: 100%; height: auto; margin-bottom: 0; }
.footer_nav.fullscreen.footer_nav--recruit .footer_logo h2,
.footer_nav.fullscreen.footer_nav--recruit .footer_logo p { display: none !important; }
.footer_nav.fullscreen.footer_nav--recruit .footer_bottom { display: none !important; }
/* --------------------------------------------------------------------------
14. シオノテーマ干渉リセット / 表スタイル
-------------------------------------------------------------------------- */
body.rc_recruit-page .rc_recruit-main h1,
body.rc_recruit-page .rc_recruit-main h2,
body.rc_recruit-page .rc_recruit-main h3,
body.rc_recruit-page .rc_recruit-main h4,
body.rc_recruit-page .rc_recruit-main p.rc_hero-title2 {
float: none !important;
position: static !important;
width: auto !important;
height: auto !important;
z-index: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.rc_recruit-page .rc_recruit-main .rc_hero-content,
body.rc_recruit-page .rc_recruit-main p.rc_hero-title2,
body.rc_recruit-page .rc_recruit-main .rc_hero-title {
text-align: center !important;
}
body.rc_recruit-page .rc_recruit-main p { line-height: inherit; }
body.rc_recruit-page .rc_recruit-main ul { line-height: normal; margin-bottom: 0; }
body.rc_recruit-page .rc_recruit-main ul li { background: none; padding-left: 0; }
body.rc_recruit-page .rc_recruit-main .rc_summary-merits li,
body.rc_recruit-page .rc_recruit-main .rc_job-points li {
padding-left: 1.2em;
position: relative;
}
body.rc_recruit-page .rc_recruit-main .rc_summary-merits li::before,
body.rc_recruit-page .rc_recruit-main .rc_job-points li::before {
content: "・";
position: absolute;
left: 0;
}
body.rc_recruit-page .rc_recruit-main .basic_table {
border-collapse: collapse;
line-height: 1.6;
width: 100%;
margin: 0;
border-top: #ccc 1px solid;
border-left: #ccc 1px solid;
}
body.rc_recruit-page .rc_recruit-main .basic_table th,
body.rc_recruit-page .rc_recruit-main .basic_table td {
border: 0 !important;
border-bottom: #ccc 1px solid !important;
border-right: #ccc 1px solid !important;
padding: 2vw 3vw !important;
vertical-align: top;
background-image: none !important;
filter: none !important;
font-size: 3.2vw;
}
body.rc_recruit-page .rc_recruit-main .basic_table th {
background: #f0f3ff !important;
font-weight: 600 !important;
width: 32%;
text-align: left;
color: #1a1a1a;
white-space: normal;
}
body.rc_recruit-page .rc_recruit-main .basic_table td {
background: #fff !important;
line-height: 1.7 !important;
font-weight: normal;
}
body.rc_recruit-page .rc_recruit-main .list_h3 {
background: url(/images/recruit/heading.svg) left center / 12px auto no-repeat;
font-size: 5.87vw;
font-weight: 500;
line-height: 1.4;
letter-spacing: 2px;
margin-bottom: 15px;
padding: 0 0 4px 24px;
color: #0013a7;
}
body.rc_recruit-page .spno { display: none !important; }
/* ── CTA：Instagramリンク ───────────────────────── */
.rc_cta-sns { margin-top: 32px; text-align: center; }
.rc_cta-sns a { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; color: #fff !important; border: 2px solid rgba(255, 255, 255, .7); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: var(--rc-fs-20); letter-spacing: .04em; }
.rc_cta-sns a i { font-size: 1.8em; }
/* ── みんな、こんな理由で入社しました（カルーセル） ───── */
.rc_persona-icon--photo { padding: 0; overflow: hidden; background: #fff; }
.rc_persona-icon--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* 顔写真がカードの上にはみ出す分、ビューポートの上余白を確保して見切れを防ぐ */
.rc_persona-viewport { padding-top: 58px; }
.rc_persona-icon--photo { width: 92px; height: 92px; border-width: 4px; }
.rc_reason-card { padding: 62px 4vw 5vw 4vw; text-align: center; }
.rc_reason-card-lead { margin: 4px 0 2px; font-size: var(--rc-fs-16); font-weight: 700; line-height: 1.6; color: #3a5a8a; }
.rc_reason-card-name { margin: 0 0 10px; font-size: var(--rc-fs-12); color: #888; }
.rc_reason-card-text { margin: 0; font-size: var(--rc-fs-14); line-height: 1.9; color: #444; text-align: left; }
/* ── こんな方におすすめ（「こんな理由で入社」内のサブコンテンツ） ── */
.rc_target-block { margin-top: 40px; padding: 32px 0 0; border-top: 1px solid rgba(42, 92, 63, .16); }
.rc_target-head { text-align: left; margin-bottom: 20px; }
.rc_target-title { margin: 6px 0 10px; font-size: var(--rc-fs-20); font-weight: 700; line-height: 1.55; }
.rc_target-lead { margin: 0; font-size: var(--rc-fs-14); line-height: 1.8; color: #666; }
.rc_target-photo { margin: 16px 0 0; }
.rc_target-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.rc_target-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
.rc_target-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px dashed rgba(42, 92, 63, .18); font-size: var(--rc-fs-15); line-height: 1.6; }
.rc_target-icon { flex: 0 0 28px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rc-accent); color: #fff; font-size: var(--rc-fs-12); }
.rc_target-text { flex: 1 1 auto; padding-top: 2px; font-weight: 600; color: #3a5a8a; }
/* ── 先輩が活躍しています（出身高校） ── */
.rc_alumni-block { margin-top: 40px; padding: 0; border-top: 0; }
.rc_alumni-head { text-align: left; margin-bottom: 16px; }
.rc_alumni-title { margin: 6px 0 10px; font-size: var(--rc-fs-20); font-weight: 700; line-height: 1.55; }
.rc_alumni-lead { margin: 0; font-size: var(--rc-fs-14); line-height: 1.8; color: #666; }
.rc_alumni-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rc_alumni-item { display: flex; align-items: flex-start; gap: 8px; min-height: 48px; padding: 10px 8px; border: 1px solid rgba(42, 92, 63, .14); border-radius: 8px; background: rgba(255, 255, 255, .55); box-sizing: border-box; }
.rc_alumni-icon { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--rc-accent); color: #fff; font-size: var(--rc-fs-12); }
.rc_alumni-text { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.rc_alumni-name { display: block; font-size: var(--rc-fs-15); font-weight: 700; color: #3a5a8a; }
.rc_alumni-campus { display: block; margin-top: 3px; font-size: var(--rc-fs-12); font-weight: 400; line-height: 1.35; color: #666; font-feature-settings: "palt";white-space: nowrap; }
/* ── スマホ用ページ内メニュー（スクロール後・右上） ── */
.rc_recruit-page section[id],
.rc_recruit-page .rc_cta[id],
.rc_recruit-page .rc_hero[id] { scroll-margin-top: 12px; }
html.rc_spnav-lock,
html.rc_spnav-lock body { overflow: hidden; }
.rc_spnav {
position: fixed;
top: 14px;
right: 14px;
z-index: 1200;
display: flex;
flex-direction: column;
align-items: flex-end;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}
.rc_spnav.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.rc_spnav.is-visible .rc_spnav-toggle,
.rc_spnav.is-visible.is-open .rc_spnav-panel,
.rc_spnav.is-visible.is-open .rc_spnav-backdrop { pointer-events: auto; }
.rc_spnav-toggle {
pointer-events: none;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 10px 14px;
border: 0;
border-radius: 10px;
background: var(--rc-accent);
color: #fff;
font-family: var(--rc-font-en);
font-size: var(--rc-fs-13);
font-weight: 700;
letter-spacing: .12em;
line-height: 1;
box-shadow: 0 4px 16px rgba(25, 40, 90, .22);
cursor: pointer;
}
.rc_spnav-toggle-bars,
.rc_spnav-toggle-x { display: inline-flex; font-size: 15px; }
.rc_spnav-toggle-x { display: none; }
.rc_spnav.is-open .rc_spnav-toggle-bars { display: none; }
.rc_spnav.is-open .rc_spnav-toggle-x { display: inline-flex; }
.rc_spnav.is-open .rc_spnav-toggle-label { display: none; }
.rc_spnav-backdrop {
display: none !important;
}
.rc_spnav-panel {
pointer-events: none;
width: min(78vw, 280px);
max-height: none;
margin-top: 10px;
padding: 12px 0 16px;
overflow: visible;
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 32px rgba(25, 40, 90, .2);
text-align: left;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .28s ease, visibility .28s ease, transform .28s ease;
}
.rc_spnav.is-open .rc_spnav-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.rc_spnav-panel-scroll {
overflow: visible;
}
.rc_spnav-panel-title {
margin: 0 16px 6px;
font-size: var(--rc-fs-12);
font-weight: 700;
letter-spacing: .12em;
color: var(--rc-accent);
}
.rc_spnav-list {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
.rc_spnav-list a {
display: block;
padding: 9px 16px;
border-top: 1px solid rgba(71, 84, 177, .1);
color: #222;
font-size: var(--rc-fs-14);
font-weight: 600;
line-height: 1.35;
text-decoration: none;
}
.rc_spnav-list li:first-child a { border-top: 0; }
.rc_spnav-list a:active { background: rgba(71, 84, 177, .08); color: var(--rc-accent); }