/* 新着求人ウォッチ /jobs/ 共通スタイル。県ページ・インデックスが <link> で読む。
   トークンは food 既存ページ（trends/index.html）と同一。docs/jobs-page-template.html の <style> を外出ししたもの。
   さらに /jobs/ インデックス用の .pref-list を末尾に追加。 */
/* 本サイトのデザイントークン（index.html・trends/index.html と共通）。hoiku の緑系は持ち込まない */
  :root{
    --base:#FBF6EE; --surface:#FFFFFF; --ink:#2A211A; --ink-soft:#6E6255;
    --action:#D85B12; --action-press:#B0470A; --peach:#FCE9D6; --peach-line:#F0D4B4;
    --green:#1E7A4B; --line:#ECE0D0; --blue:#2E6FB0; --char:#3A2E24; --warn:#A9611B; --gold:#E7C98F;
    --shadow:0 6px 22px rgba(74,40,12,.10); --radius:14px; --maxw:720px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--base);color:var(--ink);
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP","Meiryo",sans-serif;
    line-height:1.95;font-size:16px;letter-spacing:.01em}
  .pr-bar{background:var(--char);color:#F2ECE2;font-size:11.5px;text-align:center;padding:6px 14px;line-height:1.5}
  .pr-bar b{color:#FFD9A8;font-weight:700}
  .site-head{max-width:var(--maxw);margin:0 auto;padding:14px 20px 0;display:flex;align-items:center;justify-content:space-between}
  .site-head .logo{font-weight:800;font-size:15px;color:var(--ink);text-decoration:none}
  .site-head .home{font-size:12.5px;color:var(--action-press);text-decoration:underline}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
  .crumb{font-size:12px;color:var(--ink-soft);padding:16px 0 0;line-height:1.6}
  .crumb a{color:var(--action-press);text-decoration:none}
  .crumb a:hover{text-decoration:underline}
  .crumb .sep{margin:0 6px;color:var(--ink-soft)}
  .crumb .cur{color:var(--ink-soft)}
  article{background:transparent;padding:22px 0 8px}
  .cat{display:inline-block;font-size:11.5px;font-weight:800;color:#fff;background:var(--action);
    padding:3px 11px;border-radius:999px;letter-spacing:.04em}
  h1{font-size:26px;line-height:1.5;font-weight:800;margin:14px 0 12px}
  @media(min-width:600px){h1{font-size:30px}}
  .byline{display:flex;align-items:center;gap:10px;margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid var(--line)}
  .byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
  .byline .who{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
  .byline .who b{color:var(--ink);font-weight:800;font-size:13px}
  article h2{font-size:20px;font-weight:800;margin:36px 0 12px;padding-left:12px;border-left:4px solid var(--action);line-height:1.55}
  article h3{font-size:16.5px;font-weight:800;margin:26px 0 10px;line-height:1.6;color:var(--char)}
  article p{margin:0 0 16px}
  article strong{color:var(--action-press);font-weight:800}
  article p a{color:var(--action-press);text-decoration:underline;font-weight:700}
  .lead{background:var(--surface);border:1px solid var(--peach-line);border-radius:var(--radius);
    padding:16px 18px;box-shadow:var(--shadow);font-size:14.5px;line-height:1.9;margin:0 0 8px}
  .lead b{color:var(--ink)}
  .note-neutral{background:#F4F0E9;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px;color:#4a443c;line-height:1.85;margin:16px 0}
  .note-neutral b{color:var(--char)}

  /* 求人表：全ブレークポイントで表だけを横スクロール（ページ全体は横スクロールしない）。
     外枠は本文カラム幅(720px)に揃える。右端の内側フェードで横スクロール可能を示す。 */
  .jobs-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 10px;
    border:1px solid var(--peach-line);border-radius:12px;background:var(--surface);
    box-shadow:var(--shadow),inset -18px 0 14px -13px rgba(74,40,12,.24)}
  table.jobs{border-collapse:collapse;width:100%;min-width:1160px;font-size:13.5px;line-height:1.7}
  table.jobs th,table.jobs td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
  table.jobs thead th{background:var(--peach);color:var(--char);font-weight:800;font-size:12.5px;white-space:nowrap;border-bottom:1px solid var(--peach-line)}
  table.jobs tbody tr:last-child td{border-bottom:none}
  /* 折返し可の列。つぶれて縦積みにならないよう下限幅を確保 */
  table.jobs td.store,table.jobs td.genre-col,table.jobs td.occ,table.jobs td.loc,table.jobs td.holiday,table.jobs td.cond{white-space:normal;overflow-wrap:anywhere;word-break:normal}
  table.jobs td.genre-col{min-width:6.5em;max-width:11em;color:var(--ink-soft)}
  table.jobs td.occ{min-width:11em;max-width:17em}
  /* 給与は幅を絞る。連結セルは「／」で折返し、単一レンジ「月収24〜36万円」は keep-all で1行のまま */
  table.jobs td.pay{white-space:normal;word-break:keep-all;overflow-wrap:normal;max-width:11em}
  table.jobs td.loc{min-width:8em;max-width:14em}
  table.jobs td.ot{min-width:8em}
  table.jobs td.holiday{min-width:9em;max-width:15em}
  table.jobs td.cond{min-width:9.5em;max-width:15em}
  /* 2行目（勤務地の access・休日の所定労働時間）を親セルの下に控えめに */
  table.jobs .sub{display:block;margin-top:3px;font-size:11px;font-weight:400;color:var(--ink-soft);text-decoration:none}
  /* 条件バッジ（許可リストのみ・最大3・煽り系は出さない） */
  table.jobs td.cond .badge{display:inline-block;font-size:11px;font-weight:700;color:var(--char);
    background:var(--peach);border:1px solid var(--peach-line);border-radius:999px;padding:1px 8px;margin:0 4px 4px 0;white-space:nowrap;line-height:1.6}
  /* 1列目「店舗」を左固定（横スクロール中も見える）。固定セルは背景必須・右端に境界＋影 */
  table.jobs th:first-child,table.jobs td.store{position:sticky;left:0;min-width:9em;
    background:var(--surface);box-shadow:1px 0 0 var(--peach-line),4px 0 7px -4px rgba(74,40,12,.16)}
  table.jobs td.store{font-weight:700;z-index:1}
  table.jobs thead th:first-child{background:var(--peach);z-index:2} /* ヘッダー左上角は1段上 */
  table.jobs td.store a{color:var(--action-press);text-decoration:underline}
  /* PC(≥860px)では店舗・職種列を広げる。右側の列は縁で見切れさせ、横スクロールで条件まで届くことを示す */
  @media(min-width:860px){
    table.jobs th:first-child,table.jobs td.store{min-width:11em}
    table.jobs td.occ{min-width:11em}
  }
  table.jobs tr.ended td{color:var(--ink-soft)}
  table.jobs tr.ended td.store{text-decoration:line-through;font-weight:400}
  table.jobs .ended-mark{display:inline-block;font-size:11.5px;font-weight:700;color:var(--ink-soft);
    background:#EFE9E0;border-radius:999px;padding:1px 9px;margin-left:6px;text-decoration:none}
  .table-note{font-size:12.5px;color:var(--ink-soft);line-height:1.8;margin:0 0 6px}

  /* ことこのメモ（H2 の脇にアイコン。記事側の .kotoko-comment 吹き出しとは別レイアウト） */
  .memo-head{display:flex;gap:12px;align-items:center;margin:36px 0 4px}
  .memo-head img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--action)}
  .memo-head h2{margin:0;border-left:none;padding-left:0}
  .memo{background:#FFF9F1;border:1px solid var(--gold);border-radius:14px;padding:6px 18px 14px;margin:0 0 10px}
  .memo h3:first-of-type{margin-top:18px}

  .neighbors{font-size:13px;color:var(--ink-soft);line-height:1.9;margin:22px 0 0}
  .neighbors a{color:var(--action-press);text-decoration:underline;font-weight:700}
  .related-service{background:var(--surface);border:1px solid var(--peach-line);border-radius:12px;
    padding:15px 17px;margin:30px 0 10px;line-height:1.8}
  .related-service a{font-weight:800;font-size:15px;color:var(--action-press);text-decoration:underline}
  .related-service a:hover{color:var(--action)}
  .related-service .rs-note{margin:8px 0 0;font-size:11.5px;color:var(--ink-soft)}
  .sources{font-size:12px;color:var(--ink-soft);line-height:1.8;border-top:1px solid var(--line);margin-top:26px;padding-top:16px}
  .sources b{color:var(--ink)}
  .market-src{font-size:12px;color:var(--ink-soft);line-height:1.8;margin:6px 0 0}
  .market-src a{color:var(--action-press);text-decoration:underline}

/* ===== /jobs/ インデックス ===== */
ul.pref-list{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
ul.pref-list li{display:flex;align-items:baseline;justify-content:space-between;gap:8px;background:var(--surface);border:1px solid var(--peach-line);border-radius:10px;padding:9px 13px;font-size:14px;line-height:1.5}
ul.pref-list li.none{color:var(--ink-soft);background:#F6F1E9;border-style:dashed}
ul.pref-list li a{color:var(--action-press);text-decoration:underline;font-weight:800}
ul.pref-list li .cnt{font-size:11.5px;color:var(--ink-soft);font-weight:700;white-space:nowrap}
ul.pref-list li.none .cnt{color:#B7AC9C}
article h2{font-size:18px}

/* ===== スマホ(≤640px)：求人表を1店舗1カードに切替。PC(≥641px)の8列テーブルは不変 =====
   マークアップ・生成ロジックは変えず、既存の td クラスに対して CSS だけでカード化する。
   このブロックはメディアクエリ内の追加のみ（既存ルールへの差分なし）。 */
@media (max-width:640px){
  /* 横スクロール枠を解除（カードなので不要）。sticky も後段で解除 */
  .jobs-table-wrap{overflow-x:visible;border:none;background:transparent;box-shadow:none;border-radius:0;margin:16px 0 10px}
  table.jobs{display:block;width:100%;min-width:0;font-size:14px;line-height:1.7}
  table.jobs thead{display:none}
  table.jobs tbody{display:block}
  /* 1行＝1カード。薄い枠＋影で区切る */
  table.jobs tr{display:block;background:var(--surface);border:1px solid var(--peach-line);
    border-radius:12px;box-shadow:var(--shadow);padding:13px 15px;margin:0 0 12px}
  table.jobs td{display:block;padding:0;margin:0;border-bottom:none;min-width:0;max-width:none;white-space:normal}

  /* 1行目：店舗名（見出し）。sticky・固定影を解除 */
  table.jobs td.store{position:static;box-shadow:none;background:transparent;z-index:auto;
    font-size:15px;font-weight:700;line-height:1.5}
  table.jobs td.store a{color:var(--action-press);text-decoration:underline}
  /* 1行目：ジャンル（店舗名のすぐ下に小さく） */
  table.jobs td.genre-col{font-size:11.5px;color:var(--ink-soft);margin-top:1px;line-height:1.5}

  /* 2行目：職種 */
  table.jobs td.occ{margin-top:6px;line-height:1.6}
  /* 3行目：勤務地（access は .sub が下に続く） */
  table.jobs td.loc{margin-top:6px;line-height:1.6;color:var(--ink)}
  /* 4行目：給与（強調） */
  table.jobs td.pay{margin-top:8px;font-size:15px;font-weight:800;color:var(--action-press)}

  /* 5行目：固定残業／休日・時間をラベル付きで1行に（長ければ休日側が折返し・改行） */
  table.jobs td.ot,table.jobs td.holiday{display:inline-block;vertical-align:top;margin-top:8px;font-size:13px;line-height:1.6}
  table.jobs td.ot{margin-right:12px}
  table.jobs td.ot::before,table.jobs td.holiday::before{
    display:inline-block;margin-right:5px;font-size:10.5px;font-weight:700;
    color:var(--ink-soft);background:var(--peach);border:1px solid var(--peach-line);
    border-radius:4px;padding:0 5px;line-height:1.5;vertical-align:1px}
  table.jobs td.ot::before{content:"固定残業"}
  table.jobs td.holiday::before{content:"休日"}

  /* 6行目：条件バッジ */
  table.jobs td.cond{margin-top:8px}

  /* 空セル（ジャンル・条件が空）は行ごと出さない＝プレースホルダは置かない */
  table.jobs td.genre-col:empty,table.jobs td.cond:empty{display:none}

  /* 掲載終了：カード全体を破線＋淡色にして判別可能に（打消し線は見出しでは外す） */
  table.jobs tr.ended{border-style:dashed;opacity:.8}
  table.jobs tr.ended td.store{text-decoration:none}
}