@charset "UTF-8";
/*  career/assets/career.css
    求人・採用情報ページ。スマートフォンファースト。
    配色とフォントは career/entry/（応募フォーム）と揃えてある。 */

:root{
  --accent:#40659B;
  --accent-dark:#2f4c76;
  --text:#333;
  --text-mid:#5a6570;
  --muted:#7c8794;
  --line:#ddd;
  --line-soft:#ebeef2;
  --bg:#f5f5f5;
  --surface:#fff;
  --surface-sunk:#f3f5f8;
  --closed:#8a8f96;
  --hot:#c1272d;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size:16px;line-height:1.9;color:var(--text);background:var(--bg);
  /* 日本語の読みやすさ。わずかな字間で字の詰まりをほどく */
  letter-spacing:.02em;
  /* 長音符や小さい「っ」が行頭に落ちないようにする */
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word;
}
/* 見出しは意味の切れ目で折り返す（対応ブラウザのみ。未対応でも実害なし） */
h1,h2,h3,.c-job-name,.c-link-name{word-break:auto-phrase}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ---------- ヘッダー ---------- */
.c-head{background:#fff;border-bottom:1px solid var(--line)}
.c-head-in{max-width:900px;margin:0 auto;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.c-logo img{width:230px}
.c-nav{margin-left:auto;font-size:13px}
.c-nav a{margin-left:14px;color:var(--text);text-decoration:none}
.c-nav a:hover{color:var(--accent);text-decoration:underline}

.c-crumb{background:#fff;border-bottom:1px solid var(--line)}
.c-crumb-in{max-width:900px;margin:0 auto;padding:7px 16px;font-size:12px;color:var(--muted)}
.c-crumb-in a{color:var(--muted)}

/* ---------- 本文 ---------- */
.c-main{max-width:900px;margin:0 auto;padding:24px 16px 0}
.c-title{font-size:clamp(21px,4.4vw,28px);line-height:1.4;margin:0 0 6px;padding-bottom:12px;border-bottom:2px solid var(--accent)}
.c-lead{font-size:15px;color:var(--text-mid);margin:0 0 22px}
/* 代表者名。狭い画面で「本 英幸」だけ次行に落ちないよう、まとまりを保つ */
.c-sign{
  margin:0 0 20px;text-align:right;font-size:13.5px;color:var(--muted);line-height:1.8;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 .8em;
}
.c-sign span{white-space:nowrap}

.c-panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px 18px;margin-bottom:18px}
.c-panel > h2{
  font-size:18px;margin:0 0 18px;padding:0 0 12px 14px;
  color:var(--accent-dark);position:relative;line-height:1.5;
  border-bottom:2px solid var(--accent);
}
/* 見出しの左に太いアクセント。目が最初に止まる場所を作る */
.c-panel > h2::before{
  content:"";position:absolute;left:0;top:.15em;bottom:.75em;
  width:5px;border-radius:3px;background:var(--accent);
}
.c-panel > h2:first-child{margin-top:0}

/* ---------- 募集要項の定義リスト ---------- */
.c-spec{margin:0;border-top:1px solid var(--line)}
.c-spec > div{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
/* 小見出し。薄いグレーをやめ、濃い色＋太字＋左の縦バーで確実に目立たせる */
.c-spec dt{
  flex:0 0 170px;margin:0;padding:2px 16px 2px 13px;
  font-size:14.5px;font-weight:bold;color:var(--accent-dark);
  letter-spacing:.08em;line-height:1.7;position:relative;
}
.c-spec dt::before{
  content:"";position:absolute;left:0;top:.42em;bottom:.42em;
  width:4px;border-radius:2px;background:var(--accent);
}
.c-spec dd{flex:1 1 320px;margin:0;font-size:15.5px;line-height:1.9}

/* 値の中の段落。項目同士が地続きに見えないよう間をあける */
.c-spec dd > p{margin:0 0 .7em}
.c-spec dd > p:last-child{margin-bottom:0}

/* 箇条書き。折り返した行が「・」の下に潜り込まないようぶら下げる */
.c-list{list-style:none;margin:0 0 .7em;padding:0}
.c-list:last-child{margin-bottom:0}
.c-list li{
  position:relative;padding-left:1.15em;margin-bottom:.5em;
}
.c-list li:last-child{margin-bottom:0}
.c-list li::before{
  content:"";position:absolute;left:.25em;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}

/* 応募者が最初に見る項目は、背景を敷いて探しやすくする */
.c-spec > div[data-key="給与"]{
  background:#f2f6fc;border-radius:6px;
  padding-left:14px;padding-right:14px;
  margin:6px 0;border-bottom-color:transparent;
}
.c-spec > div[data-key="給与"] dd{font-size:16.5px;font-weight:bold;line-height:1.85}
.c-spec > div[data-key="給与"] .c-sub{font-weight:normal}

/* ※ではじまる補足。本文より一段おさえる */
.c-sub{
  margin:.55em 0 0;font-size:13.5px;color:var(--text-mid);line-height:1.8;
  padding-left:1.1em;text-indent:-1.1em;
}
.c-sub:last-child{margin-bottom:0}

/* ---------- 求人一覧 ---------- */
.c-jobs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.c-job{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:15px 16px;text-decoration:none;color:var(--text);
  transition:border-color .12s, background-color .12s;
}
.c-job:hover{border-color:var(--accent);background:#f7faff}
.c-job-name{flex:1;font-size:15.5px;font-weight:bold;line-height:1.55}
.c-job-arrow{flex:none;color:var(--accent);font-size:14px}
.c-badge{
  display:inline-block;font-size:11px;font-weight:bold;line-height:1.6;
  padding:1px 8px;border-radius:3px;margin-right:8px;vertical-align:2px;white-space:nowrap;
}
.c-badge-hot{background:var(--hot);color:#fff}
.c-badge-num{background:#eaf0f8;color:var(--accent);border:1px solid #cfdcef}

.c-group{margin:0 0 10px;font-size:13px;color:var(--muted);letter-spacing:.04em}
.c-group:not(:first-child){margin-top:26px}

/* ---------- 応募への導線 ---------- */
.c-apply{
  background:#eaf0f8;border:1px solid #cfdcef;border-radius:6px;
  padding:22px 20px;margin:22px 0;text-align:center;
}
.c-apply h2{margin:0 0 6px;font-size:18px;color:var(--accent-dark)}
.c-apply p{margin:0 0 16px;font-size:14px;color:var(--text-mid)}
.c-btn{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-size:16px;font-weight:bold;padding:15px 40px;border-radius:5px;line-height:1.5;
}
.c-btn:hover{background:var(--accent-dark)}
.c-note{font-size:12.5px;color:var(--muted);margin:14px 0 0}

/* ---------- 会社からの案内 ---------- */
.c-info{font-size:14px;color:var(--text-mid)}
.c-info dt{font-weight:bold;color:var(--text);margin-top:14px}
.c-info dt:first-child{margin-top:0}
.c-info dd{margin:2px 0 0}
.c-cautions{margin:0;padding-left:1.2em;font-size:13.5px;color:var(--text-mid)}
.c-cautions li{margin-bottom:5px}

/* ---------- 募集終了 ---------- */
.c-closed{
  background:var(--surface-sunk);border:1px solid var(--line);border-radius:6px;
  padding:16px 18px;margin-bottom:18px;font-size:14.5px;color:var(--closed);
}
.c-closed strong{color:var(--text)}

/* ---------- フッター ---------- */
.c-foot{background:#fff;border-top:1px solid var(--line);margin-top:44px}
.c-foot-in{max-width:900px;margin:0 auto;padding:22px 16px;font-size:12px;color:var(--muted);text-align:center}
.c-foot-links a{display:inline-block;margin:0 8px 4px;color:var(--muted)}
.c-foot-cat{margin:14px 0 0;line-height:2}
.c-foot-cat a{display:inline-block;margin:0 6px;color:var(--muted)}
.c-copy{margin:12px 0 0;font-size:11px}

/* ---------- PC ---------- */
@media (min-width:700px){
  .c-main{padding-top:30px}
  .c-panel{padding:26px 28px}
  .c-jobs{grid-template-columns:1fr 1fr}
  .c-logo img{width:280px}
}
@media (max-width:560px){
  /* 画面が狭いほど1行が短くなるので、行間をすこし広げて塊に見えないようにする */
  body{line-height:2.0}
  .c-panel > p, .c-lead{line-height:2.0}
  .c-spec > div{padding:16px 0 18px}
  /* 縦積みになるので、小見出しは帯にして「ここから次の項目」を明示する */
  .c-spec dt{
    flex:0 0 100%;margin:0 0 10px;padding:5px 12px 5px 11px;
    font-size:14px;letter-spacing:.1em;
    background:var(--surface-sunk);border-radius:0 4px 4px 0;
  }
  .c-spec dt::before{top:0;bottom:0;border-radius:0}
  .c-spec dd{flex:0 0 100%;font-size:16px;line-height:1.95;padding-left:2px}
  .c-spec > div[data-key="給与"]{padding-left:10px;padding-right:10px}
  .c-spec > div[data-key="給与"] dt{background:#e3ecf9}
  .c-list li{margin-bottom:.7em}
  .c-btn{display:block;padding:16px 20px}
  .c-nav{margin-left:0;width:100%;font-size:12.5px}
  .c-nav a{margin:0 14px 0 0}
}

/* ---------- 応募以外の入口（会社案内・見学・マイナビ） ---------- */
.c-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.c-link{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:15px 16px;text-decoration:none;color:var(--text);
  transition:border-color .12s, background-color .12s;
}
.c-link:hover{border-color:var(--accent);background:#f7faff}
.c-link-body{flex:1;min-width:0}
.c-link-name{display:block;font-size:15.5px;font-weight:bold;line-height:1.5}
.c-link-desc{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.6}
.c-link-arrow{flex:none;color:var(--accent);font-size:14px}
.c-link-ext::after{
  content:"外部サイト";font-size:10.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:3px;padding:1px 6px;margin-left:8px;
  white-space:nowrap;font-weight:normal;vertical-align:2px;
}
@media (min-width:700px){ .c-links{grid-template-columns:1fr 1fr} }

/* ---------- 会社イメージ ---------- */
.c-hero{
  margin:0 0 20px;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
}
.c-hero img{display:block;width:100%;height:auto}
@media (max-width:560px){
  /* 横長すぎて1枚1枚が潰れるため、左半分（本社ビルと現場）を大きめに見せる */
  .c-hero img{
    height:210px;object-fit:cover;object-position:32% center;
  }
}
.c-hero figcaption{
  font-size:12.5px;color:var(--muted);padding:10px 14px;
  border-top:1px solid var(--line-soft);line-height:1.7;
}

/* ---------- 一覧ページの本文 ---------- */
.c-panel > p{margin:0 0 1em;font-size:15.5px}
.c-panel > p:last-child{margin-bottom:0}
.c-message{
  font-size:17px;font-weight:bold;line-height:1.8;margin:0 0 4px;
  color:var(--accent-dark);
}
.c-panel > .c-list{margin:0 0 1em}
.c-panel > .c-list li{font-size:15.5px}