/* ============================================================
   JCSC RECRUIT — 共通スタイル
   ・コーポレートサイトと同じ書体方針（見出し=明朝／本文=ゴシック）
   ・緑＝基調色（新卒）／橙＝中途・強調のみに限定
   ・OSテーマ（ライト／ダーク）に自動追従
   ============================================================ */
:root{color-scheme:light dark;
 --bg:#FFFFFF; --ink:#1F2933; --sub:#5D6873; --mut:#9AA4AE;
 --card:#FFFFFF; --bd:rgba(35,44,54,.09); --bd2:rgba(35,44,54,.12);
 --hd:rgba(255,255,255,.88); --btn:#232C36; --btnt:#FFFFFF;
 --accg:#3F6B29; --acco:#C9722A; --sh:rgba(35,44,54,.05);
 --veil:rgba(255,255,255,.74);
 --veil-soft:rgba(255,255,255,.6)}
@media (prefers-color-scheme: dark){:root{
 --bg:#141821; --ink:#EAEEF4; --sub:#ADB8C6; --mut:#8791A2;
 --card:#1C2332; --bd:rgba(234,238,244,.12); --bd2:rgba(234,238,244,.16);
 --hd:rgba(20,24,33,.86); --btn:#EAEEF4; --btnt:#141821;
 --accg:#9CC66E; --acco:#E8A24C; --sh:rgba(0,0,0,.35);
 --veil:rgba(20,24,33,.74);
 --veil-soft:rgba(20,24,33,.62)}}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;overflow-x:hidden}
.mono{font-family:inherit}
.serif{font-family:inherit}  /* 見出しもゴシックに統一 */
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
a{text-decoration:none;color:inherit}
img{max-width:100%}

/* ===== 開幕演出（トップのみ） ===== */
.intro{position:fixed;inset:0;z-index:90;pointer-events:none}
.pane{position:absolute;top:0;bottom:0;width:50.05%;background:var(--bg)}
.pane--g{left:0}.pane--o{right:0}
.pane::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.pane--g::after{background:linear-gradient(160deg,#7DB05C 0%,#3F6B29 100%)}
.pane--o::after{background:linear-gradient(200deg,#E8A868 0%,#B76420 100%)}
.intro.p2 .pane::after{opacity:1}
.intro.p3 .pane--g{animation:og 1.05s cubic-bezier(.8,0,.18,1) forwards}
.intro.p3 .pane--o{animation:oo 1.05s cubic-bezier(.8,0,.18,1) forwards}
@keyframes og{to{transform:translateX(-101%)}}
@keyframes oo{to{transform:translateX(101%)}}
.vline{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
 background:var(--ink);transform:scaleY(0);transform-origin:50% 50%}
.intro.p1 .vline{animation:vl .85s cubic-bezier(.55,0,.25,1) forwards}
@keyframes vl{to{transform:scaleY(1)}}
.intro.p2 .vline{background:#fff;width:3px;margin-left:-1.5px;transition:background .8s,width .8s}
.intro.p3 .vline{opacity:0;transition:opacity .25s}
.intro .wd{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 color:#fff;font-size:.72rem;letter-spacing:.6em;white-space:nowrap;opacity:0;transition:opacity .7s .25s}
.intro.p2 .wd{opacity:1}
.intro.p3 .wd{opacity:0;transition:opacity .2s}

#dots{position:fixed;inset:0;z-index:0;pointer-events:none}

/* トップpage: ふたつの入口以降を包み、背景の粒子に段階的な薄いフィルターを敷く。
   上端(入口付近)は透明→下へ向かってやわらかく濃くなり、本文を読みやすくする。 */
.veilwrap{position:relative;z-index:1}
.veilwrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%, var(--veil-soft) 44%, var(--veil-soft) 100%);}

/* サブページ（body.sub）: 中央のコンテンツ帯に薄いフィルターを敷き、
   背景の粒子を沈めて本文を読みやすくする。左右はグラデーションで
   ふわっと消し、粒子の雰囲気は画面端に残す。トップページは対象外。 */
body.sub::before{
  content:"";position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(1200px,96vw);z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%, var(--veil) 9%, var(--veil) 91%, transparent 100%);
}

/* ===== ヘッダー ===== */
.hd{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:16px 22px;
 background:var(--hd);backdrop-filter:blur(8px);border-bottom:1px solid var(--bd)}
.hd .lg{font-size:1.02rem;font-weight:900;letter-spacing:.05em}
.hd .lg small{margin-left:8px;font-size:.6rem;letter-spacing:.26em;color:var(--mut);font-weight:600}
.hd nav{margin-left:auto;display:flex;gap:20px;font-size:.8rem;color:var(--sub)}
.hd nav a:hover{color:var(--ink)}
.hd .e{background:var(--btn);color:var(--btnt);padding:9px 20px;border-radius:8px;font-weight:700;font-size:.78rem}
@media(max-width:720px){.hd nav{display:none}.hd .e{margin-left:auto}}

/* ===== トップ：ヒーロー ===== */
.hero{position:relative;min-height:64vh;display:grid;place-items:center;text-align:center;padding:80px 22px 64px}
.hero .k{font-size:.74rem;letter-spacing:.18em;color:var(--mut)}
.hero h1{margin-top:18px;font-size:clamp(2.1rem,6.4vw,4rem);font-weight:600;line-height:1.6;letter-spacing:.04em}
.hero h1 b{color:inherit;font-weight:600}.hero h1 i{font-style:normal;color:inherit}
.hero p{margin-top:16px;font-size:.9rem;line-height:2;color:var(--sub)}
.boot{opacity:0;transform:translateY(12px);transition:opacity .7s,transform .7s}
body.ready .boot{opacity:1;transform:none}

/* ===== トップ：セクション索引ナビ（6項目へのアンカー） ===== */
.secnav{position:relative;z-index:1;max-width:1060px;margin:-24px auto 0;padding:0 22px;
 display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.secnav a{border:1px solid var(--bd2);border-radius:8px;padding:9px 18px;font-size:.78rem;
 font-weight:700;color:var(--sub);background:var(--card);transition:.2s}
.secnav a:hover{color:var(--ink);border-color:var(--accg)}

/* ===== 準備中プレースホルダ ===== */
.tbd{margin-top:18px;font-size:.9rem;line-height:2;color:var(--mut);
 border:1px dashed var(--bd2);border-radius:14px;padding:22px;background:var(--card)}

/* ===== サブページ：ページヘッダー ===== */
.ph{position:relative;z-index:1;padding:96px 0 54px;text-align:center}
.ph .bc{font-size:.72rem;letter-spacing:.12em;color:var(--mut)}
.ph .bc a:hover{color:var(--ink)}
.ph h1{margin-top:16px;font-size:clamp(1.9rem,5vw,2.7rem);font-weight:600;letter-spacing:.06em}
.ph h1 b{font-weight:600}
.ph.g h1 b{color:var(--accg)}
.ph.o h1 b{color:var(--acco)}
.ph p{margin-top:14px;font-size:.9rem;line-height:2;color:var(--sub)}

/* ===== セクション共通 ===== */
.sec{position:relative;z-index:1;padding:74px 0}
.sec h2{margin-top:12px;font-size:1.55rem;font-weight:800}
.sec .txt{margin-top:18px;font-size:.9rem;line-height:2.15;color:var(--sub);max-width:44em}
.rv{opacity:0;transform:translateY(22px);transition:.7s}
.rv.in{opacity:1;transform:none}
.note{margin-top:18px;font-size:.72rem;color:var(--mut)}

/* カードグリッド */
.cards3{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards2{margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:720px}
@media(max-width:720px){.cards3{grid-template-columns:1fr}.cards2{grid-template-columns:1fr}}
.cd{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:24px 22px;box-shadow:0 4px 18px var(--sh)}
.cd .t{font-size:.6rem;letter-spacing:.3em;color:var(--mut)}
.cd h3{margin-top:10px;font-size:1.06rem;font-weight:800}
.cd h3 b{font-weight:800}

.cd p{margin-top:8px;font-size:.82rem;line-height:1.95;color:var(--sub)}

/* 入口（トップ） */
.gg{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.gg{grid-template-columns:1fr}}
.gate{position:relative;border-radius:16px;padding:30px 26px;color:#fff;overflow:hidden;
 transition:transform .3s,box-shadow .3s;display:block}
.gate:hover{transform:translateY(-2px);box-shadow:0 14px 30px var(--sh)}
.gate--g{background:#3F6B29}
.gate--o{background:#B76420}
.gate small{font-size:.58rem;letter-spacing:.32em;opacity:.9;font-weight:700}
.gate h3{margin-top:10px;font-size:1.5rem;font-weight:900}
.gate p{margin-top:8px;font-size:.82rem;line-height:1.9;opacity:.94}
.gate .go{display:inline-block;margin-top:16px;background:#fff;border-radius:8px;padding:9px 22px;font-weight:800;font-size:.76rem}
.gate--g .go{color:#3F6B29}.gate--o .go{color:#B76420}

/* 数字 */
.ns{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:720px){.ns{grid-template-columns:1fr 1fr}}
.n{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:20px 16px;text-align:center;box-shadow:0 4px 18px var(--sh)}
.n .v{font-size:1.7rem;font-weight:900;font-variant-numeric:tabular-nums}
.n .v em{font-style:normal;font-size:.85rem;color:var(--sub);margin-left:2px}
.n .l{margin-top:4px;font-size:.66rem;letter-spacing:.12em;color:var(--mut)}
.n .v{color:var(--accg)}

/* タグ */
.tags{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.tags span{background:var(--card);border:1px solid var(--bd2);border-radius:8px;
 padding:10px 18px;font-size:.8rem;font-weight:600}


/* フロー */
.fl{margin-top:28px;display:grid;gap:10px}
.fl.c5{grid-template-columns:repeat(5,1fr)}
.fl.c4{grid-template-columns:repeat(4,1fr)}
.fl.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.fl.c5,.fl.c4,.fl.c3{grid-template-columns:1fr;max-width:340px}}
.f{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:18px 14px;text-align:center;box-shadow:0 4px 14px var(--sh)}
.f .c{width:34px;height:34px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
 font-weight:900;font-size:.82rem;color:#fff;background:#3F6B29}

.f h4{margin-top:10px;font-size:.84rem;font-weight:800}
.f p{margin-top:4px;font-size:.66rem;color:var(--mut)}

/* 一日の流れ */
.day{margin-top:26px;border-top:1px solid var(--bd)}
.day div{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:16px 6px;border-bottom:1px solid var(--bd)}
.day b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accg)}
.day span{font-size:.86rem;color:var(--sub)}

/* 社員の声 */
.voices{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.voices--single{grid-template-columns:1fr;max-width:700px}
@media(max-width:720px){.voices{grid-template-columns:1fr}}
.vc{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:24px 22px;box-shadow:0 4px 18px var(--sh)}
.vc q{display:block;font-size:.94rem;line-height:2.05;font-weight:600;quotes:"「" "」"}
.vc q b{border-bottom:2px solid var(--accg);font-weight:600}
.vc .who{margin-top:14px;display:flex;align-items:center;gap:12px;font-size:.74rem;color:var(--mut)}
.vc .who i{width:38px;height:38px;border-radius:50%;font-style:normal;display:grid;place-items:center;
 color:#fff;font-weight:800;background:var(--accg);flex:0 0 auto}


/* 募集要項テーブル */
.spec{margin-top:26px;border-top:1px solid var(--bd)}
.spec>div{display:grid;grid-template-columns:170px 1fr;padding:16px 6px;border-bottom:1px solid var(--bd)}
@media(max-width:720px){.spec>div{grid-template-columns:1fr;gap:4px}}
.spec dt{font-size:.78rem;letter-spacing:.08em;color:var(--mut);font-weight:700}
.spec dd{font-size:.88rem;line-height:1.9;color:var(--ink)}
.spec dd small{display:block;color:var(--mut);font-size:.72rem}

/* ===== 社員寮：写真プレースホルダ枠 ＆ レイアウト ===== */
.dorm{margin-top:30px;border:1px solid var(--bd);border-radius:18px;padding:22px;
 background:var(--card);box-shadow:0 4px 18px var(--sh)}
.dorm+.dorm{margin-top:22px}
.dorm h3{font-size:1.2rem;font-weight:800;margin-bottom:14px}
.dorm h3 small{margin-left:10px;font-size:.68rem;letter-spacing:.16em;color:var(--mut);font-weight:700}
.ph-frame{position:relative;border:1px solid var(--bd);border-radius:12px;overflow:hidden;
 display:grid;place-items:center;background:var(--card)}
.ph-frame img{width:100%;height:100%;object-fit:cover}
.ph-frame span{font-size:.72rem;color:var(--mut);font-weight:700;letter-spacing:.05em;text-align:center;padding:6px}
.ph-ext{aspect-ratio:16/9}

/* 写真（左）＋説明（右）を1行として縦に積むレイアウト
   1行目：外観＋説明／2行目：写真1・2＋説明／3行目：写真3・4＋説明 */
.dorm__row{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:center;margin-top:20px}
.dorm__row:first-of-type{margin-top:14px}
@media(max-width:760px){.dorm__row{grid-template-columns:1fr;gap:14px}}
.dorm__ph{display:grid;gap:12px}
.dorm__ph--2{grid-template-columns:1fr 1fr}
@media(max-width:420px){.dorm__ph--2{grid-template-columns:1fr}}
.dorm__ph .ph-frame{aspect-ratio:4/3}
.dorm__ph .ph-ext{aspect-ratio:16/9}
.dorm__desc h4{font-size:1rem;font-weight:800;margin-bottom:8px}
.dorm__desc h4 small{margin-left:8px;font-size:.66rem;letter-spacing:.14em;color:var(--mut);font-weight:700}
.dorm__desc p{font-size:.86rem;line-height:2.05;color:var(--sub)}

/* 募集ポジション */
.pos{margin-top:26px;display:grid;gap:12px}
.po{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:22px;box-shadow:0 4px 18px var(--sh);
 display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.po h3{font-size:1.02rem;font-weight:800;margin-right:auto}
.po .st{font-size:.62rem;letter-spacing:.2em;font-weight:800;color:#fff;background:var(--accg);
 border-radius:6px;padding:5px 12px}
.po .tg{font-size:.7rem;color:var(--sub);background:transparent;border:1px solid var(--bd2);border-radius:6px;padding:5px 12px}
.po p{width:100%;font-size:.8rem;line-height:1.9;color:var(--sub)}

/* ボタン */
.btn{display:inline-block;border-radius:8px;padding:13px 36px;font-weight:700;font-size:.88rem;transition:opacity .25s}
.btn:hover{opacity:.88}
.btn--ink{background:var(--btn);color:var(--btnt)}
.btn--g{background:#3F6B29;color:#fff}
.btn--o{background:#B76420;color:#fff}

/* CTA */
.cta{position:relative;z-index:1;margin:20px 22px 26px;border-radius:14px;padding:56px 26px;text-align:center;color:#fff;
 background:#3F6B29}
.cta h2{color:#fff;margin-top:12px;font-size:1.8rem;font-weight:900}
.cta .btn{margin-top:22px;background:#fff;color:#232C36}

/* エントリーフォーム（仮） */
.form{position:relative;z-index:1;max-width:640px;margin:0 auto;background:var(--card);
 border:1px solid var(--bd);border-radius:20px;padding:34px 28px;box-shadow:0 8px 30px var(--sh)}
.form .row{margin-bottom:18px}
.form label{display:block;font-size:.76rem;font-weight:800;margin-bottom:7px}
.form label i{font-style:normal;color:var(--acco);margin-left:6px;font-size:.66rem}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--bd2);
 border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:.88rem}
.form textarea{min-height:110px;resize:vertical}
.form .agree{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;color:var(--sub)}
.form .agree input{width:auto;margin-top:3px}
.form .btn{width:100%;text-align:center;margin-top:8px}

/* フッター */
.ft{position:relative;z-index:1;border-top:1px solid var(--bd);margin-top:40px;padding:30px 22px 34px}
.ft .in{max-width:1060px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.ft b{font-size:.96rem}
.ft nav{display:flex;flex-wrap:wrap;gap:16px;font-size:.76rem;color:var(--sub)}
.ft nav a:hover{color:var(--ink)}
.ft .cp{margin-left:auto;font-size:.68rem;color:var(--mut)}
@media(max-width:720px){.ft .cp{margin-left:0}}

@media (prefers-reduced-motion:reduce){
 .boot,.rv{transition:none;opacity:1;transform:none}
}

/* ============================================================
   余白・文字サイズの底上げ（全体的にゆったりした印象へ）
   ・各要素が小さく詰まって見える点を解消するための調整
   ・後段に置くことで既存の同名セレクタを上書きする
   ============================================================ */
/* セクション見出し・リード */
.sec{padding:88px 0}
.sec h2{font-size:1.9rem;line-height:1.5}
.sec .txt{font-size:1.02rem;line-height:2.1;max-width:46em}
.ph{padding:104px 0 60px}
.ph h1{font-size:clamp(2.2rem,5.6vw,3.1rem)}
.ph p{font-size:1rem}
.note{font-size:.8rem}

/* ヒーロー（トップ） */
.hero h1{line-height:1.7}
.hero p{font-size:1rem}
.hero .k{font-size:.8rem}

/* 入口カード */
.gg{gap:20px}
.gate{padding:34px 30px}
.gate h3{font-size:1.65rem}
.gate p{font-size:.95rem;line-height:2}
.gate .go{font-size:.82rem;padding:11px 24px}

/* カード（3列・2列） */
.cards3,.cards2{gap:18px;margin-top:30px}
.cd{padding:28px 26px}
.cd h3{font-size:1.2rem}
.cd p{font-size:.95rem;line-height:2}

/* 数字 */
.n{padding:24px 18px}
.n .v{font-size:2rem}
.n .l{font-size:.72rem}

/* タグ */
.tags{gap:12px}
.tags span{font-size:.9rem;padding:12px 20px}

/* フロー（選考の流れ・研修） */
.fl{gap:14px}
.f{padding:22px 16px}
.f .c{width:38px;height:38px;font-size:.9rem}
.f h4{font-size:.96rem;margin-top:12px}
.f p{font-size:.8rem}

/* 募集要項・共通条件テーブル */
.spec>div{grid-template-columns:190px 1fr;padding:18px 6px}
.spec dt{font-size:.86rem}
.spec dd{font-size:.98rem;line-height:2}
.spec dd small{font-size:.78rem}
@media(max-width:720px){.spec>div{grid-template-columns:1fr}}

/* 社員の声 */
.voices{gap:18px;margin-top:30px}
.vc{padding:28px 26px}
.vc q{font-size:1.05rem;line-height:2.1}
.vc .who{font-size:.82rem;margin-top:16px}
.vc .who i{width:42px;height:42px}

/* ポジション（募集ポジション・応募方法） */
.po{padding:24px 22px}
.po h3{font-size:1.15rem}
.po p{font-size:.95rem;line-height:2}

/* 社員寮 */
.dorm{padding:26px}
.dorm h3{font-size:1.4rem;margin-bottom:16px}
.dorm__desc h4{font-size:1.1rem}
.dorm__desc p{font-size:.98rem;line-height:2.1}

/* 応募フォーム風ブロック（応募方法） */
.form .row label{font-size:.86rem}
.form .row p{font-size:.98rem}

/* CTA */
.cta{padding:64px 26px}
.cta h2{font-size:2rem}
.btn{font-size:.95rem;padding:14px 38px}

/* ===== 先輩の声：プロフィール形式（現在の業務／大変だったこと／今後の目標） ===== */
.profiles{margin-top:32px;display:grid;gap:22px}
.profile{background:var(--card);border:1px solid var(--bd);border-radius:18px;
 padding:32px 34px;box-shadow:0 4px 18px var(--sh)}
@media(max-width:720px){.profile{padding:26px 22px}}
.profile__head{display:flex;align-items:center;gap:16px;
 padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--bd)}
.profile__ava{width:58px;height:58px;border-radius:50%;flex:0 0 auto;
 display:grid;place-items:center;font-weight:800;font-size:1.25rem;color:#fff;background:var(--accg)}
.profile__name{font-size:1.25rem;font-weight:800}
.profile__meta{margin-top:5px;font-size:.86rem;color:var(--mut)}
.profile__block+.profile__block{margin-top:22px}
.profile__label{display:inline-block;margin-bottom:8px;font-size:.86rem;font-weight:800;
 letter-spacing:.02em;color:var(--accg)}
.profile__block p{font-size:.98rem;line-height:2.1;color:var(--sub)}

/* 募集要項：職種区分の見出し（技術職／事務職） */
.spec-cat{margin-top:40px;font-size:1.25rem;font-weight:800}
.spec-cat:first-of-type{margin-top:22px}

/* 社員寮：説明テキスト（最寄り駅・設備・近隣施設） */
.dorm__desc .kv{margin-top:14px;font-size:.95rem;line-height:1.95;color:var(--ink)}
.dorm__desc .kv b{color:var(--accg);font-weight:800}