/* ==========================================================
   jobs-site.css — 案件固有のUI追加分
   共通は data/ui/html/css/design-system.css を使う。
   ここには求人サイト特有の部品だけを置く。
   ========================================================== */

/* ── 公開ヘッダー ── */
.site-header{position:sticky;top:0;z-index:30;background:var(--color-white);border-bottom:1px solid var(--color-border)}
.site-header__inner{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px}
.site-header__logo{font-weight:800;font-size:18px;color:var(--color-primary);text-decoration:none;letter-spacing:.02em}
.site-header__logo span{color:var(--color-info)}
.site-header__nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.site-header__link{font-size:13px;color:var(--color-text);text-decoration:none;padding:8px 10px;border-radius:6px}
.site-header__link:hover{background:var(--color-primary-tint)}

.site-footer{background:var(--color-primary);color:#fff;margin-top:56px;padding:32px 20px}
.site-footer__inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;font-size:13px}
.site-footer a{color:rgba(255,255,255,.85);text-decoration:none;display:block;padding:3px 0}
.site-footer h3{font-size:13px;margin:0 0 8px}

.site-main{max-width:1180px;margin:0 auto;padding:24px 20px}

/* ── 検索バー ── */
.jobsearch{background:var(--color-white);border:1px solid var(--color-border);border-radius:10px;padding:16px}
.jobsearch__row{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:10px}
.jobsearch__btn{min-width:120px}

/* ── 検索結果レイアウト ── */
.jl-layout{display:grid;grid-template-columns:264px 1fr;gap:24px;align-items:start}
.jl-facets{background:var(--color-white);border:1px solid var(--color-border);border-radius:10px;padding:16px;position:sticky;top:76px}
.jl-facets__group + .jl-facets__group{margin-top:18px;padding-top:18px;border-top:1px solid var(--color-border)}
.jl-facets__title{font-size:13px;font-weight:700;margin:0 0 8px}
/* 開閉ボタンはスマホ専用。PCでは常に条件を開いたまま見せる */
.jl-facets__toggle{display:none}
.jl-check{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 0;cursor:pointer}
.jl-check input{width:16px;height:16px;accent-color:var(--color-primary)}

.jl-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.jl-toolbar__count{font-size:14px}
.jl-toolbar__count strong{font-size:20px;color:var(--color-primary)}
.jl-toolbar__sort{margin-left:auto;display:flex;gap:6px}

/* ── 求人カード ── */
.job-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:10px;padding:18px;margin-bottom:12px;transition:box-shadow .15s}
.job-card:hover{box-shadow:0 4px 16px rgba(16,42,67,.10)}
.job-card__top{display:flex;gap:14px;align-items:flex-start}
.job-card__logo{width:52px;height:52px;border-radius:8px;background:var(--color-bg-beige);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--color-text-light);flex:0 0 auto}
.job-card__title{font-size:17px;font-weight:700;line-height:1.4;margin:0 0 4px}
.job-card__title a{color:var(--color-primary);text-decoration:none}
.job-card__title a:hover{text-decoration:underline}
.job-card__company{font-size:13px;color:var(--color-text-light)}
.job-card__meta{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px;margin:12px 0 0;font-size:13px}
.job-card__meta dt{color:var(--color-text-light);font-size:12px}
.job-card__meta dd{margin:0 0 8px}
.job-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.job-tag{font-size:11px;padding:3px 9px;border-radius:999px;background:var(--color-primary-tint);color:var(--color-primary);border:1px solid rgba(16,42,67,.14)}
.job-card__foot{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--color-border)}
.job-card__date{font-size:12px;color:var(--color-text-light);margin-right:auto}

/* ── 求人詳細 ── */
.jd-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.jd-head{background:var(--color-white);border:1px solid var(--color-border);border-radius:10px;padding:24px}
.jd-head__title{font-size:24px;font-weight:800;line-height:1.35;margin:0 0 8px}
.jd-section{background:var(--color-white);border:1px solid var(--color-border);border-radius:10px;padding:24px;margin-top:16px}
.jd-section__title{font-size:16px;font-weight:700;margin:0 0 14px;padding-left:11px;border-left:4px solid var(--color-primary)}
.jd-table{width:100%;border-collapse:collapse;font-size:14px}
.jd-table th,.jd-table td{border-top:1px solid var(--color-border);padding:12px 4px;text-align:left;vertical-align:top}
.jd-table th{width:150px;color:var(--color-text-light);font-weight:500;font-size:13px}
.jd-table tr:first-child th,.jd-table tr:first-child td{border-top:0}
.jd-legal{background:rgba(37,99,235,.05);border:1px solid rgba(37,99,235,.2);border-radius:8px;padding:14px 16px;font-size:13px;margin-top:12px}
.jd-legal__label{font-weight:700;color:var(--color-info);font-size:12px;display:block;margin-bottom:6px}

.jd-side{position:sticky;top:76px}
.jd-apply{background:var(--color-white);border:1px solid var(--color-border);border-radius:10px;padding:20px;text-align:center}
.jd-apply__salary{font-size:20px;font-weight:800;color:var(--color-primary);margin-bottom:4px}
.jd-apply__note{font-size:12px;color:var(--color-text-light);margin-top:10px;line-height:1.6;text-align:left}

.jd-mobile-cta{display:none}
@media (max-width:900px){
  .jl-layout,.jd-layout{grid-template-columns:1fr}
  .jl-facets,.jd-side{position:static}
  .jobsearch__row{grid-template-columns:1fr}
  .job-card__meta{grid-template-columns:1fr}
  .jd-mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--color-white);border-top:1px solid var(--color-border);padding:10px 14px;gap:10px;align-items:center;box-shadow:0 -2px 10px rgba(0,0,0,.08);padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .jd-mobile-cta .btn{flex:1}
  /* 固定CTAがある求人詳細だけ下部に逃げを作る。全ページに余白を付けない */
  body:has(.jd-mobile-cta){padding-bottom:78px}
}

/* ── 掲載終了バナー ── */
.jd-closed{background:rgba(120,120,120,.08);border:1px solid rgba(120,120,120,.25);border-radius:8px;padding:16px;margin-bottom:16px;font-size:14px}

/* ── 求人作成フォーム: 法令必須項目の強調 ── */
.legal-block{border:2px solid var(--color-info);border-radius:10px;padding:18px;background:rgba(37,99,235,.04);margin:20px 0}
.legal-block__head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.legal-block__badge{font-size:11px;font-weight:700;color:#fff;background:var(--color-info);padding:3px 9px;border-radius:4px}
.legal-block__title{font-size:15px;font-weight:700}
.legal-block__desc{font-size:12.5px;color:var(--color-text-light);line-height:1.7;margin:0 0 14px}

/* ── 原稿チェックパネル ── */
.quality{background:var(--color-white);border:1px solid var(--color-border);border-radius:10px;padding:18px}
.quality__score{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.quality__score b{font-size:32px;color:var(--color-primary);line-height:1}
.quality__list{list-style:none;padding:0;margin:0;font-size:13px}
.quality__item{display:flex;gap:8px;padding:8px 0;border-top:1px solid var(--color-border);align-items:flex-start}
.quality__mark{flex:0 0 auto;font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;margin-top:1px}
.quality__mark--ng{background:rgba(180,35,24,.1);color:var(--color-error)}
.quality__mark--warn{background:rgba(181,71,8,.1);color:var(--color-warning)}
.quality__mark--ok{background:rgba(21,128,61,.1);color:var(--color-success)}

/* ── 応募者カンバン ── */
.kb{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.kb__col{background:var(--color-bg-beige);border-radius:10px;padding:12px;min-width:210px}
.kb__head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:700}
.kb__count{margin-left:auto;background:var(--color-white);border-radius:999px;padding:1px 9px;font-size:12px;border:1px solid var(--color-border)}
.kb__card{background:var(--color-white);border:1px solid var(--color-border);border-radius:8px;padding:12px;margin-bottom:8px;font-size:13px}
.kb__name{font-weight:700;margin-bottom:3px}
.kb__job{font-size:12px;color:var(--color-text-light);margin-bottom:8px}
.kb__foot{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--color-text-light)}
.kb__stale{color:var(--color-warning);font-weight:700}

/* ── ステータスバッジ（色だけに頼らずテキストを必ず持つ） ── */
.st{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.st--new{background:rgba(37,99,235,.1);color:#1d4ed8;border-color:rgba(37,99,235,.25)}
.st--screening{background:rgba(181,71,8,.1);color:#a15207;border-color:rgba(181,71,8,.25)}
.st--interview{background:rgba(138,111,61,.12);color:#7a6030;border-color:rgba(138,111,61,.28)}
.st--offer{background:rgba(21,128,61,.1);color:#15803d;border-color:rgba(21,128,61,.25)}
.st--hired{background:#15803d;color:#fff}
.st--rejected{background:rgba(120,120,120,.12);color:#555;border-color:rgba(120,120,120,.25)}
.st--published{background:rgba(21,128,61,.1);color:#15803d;border-color:rgba(21,128,61,.25)}
.st--draft{background:rgba(120,120,120,.12);color:#555;border-color:rgba(120,120,120,.25)}
.st--pending{background:rgba(181,71,8,.1);color:#a15207;border-color:rgba(181,71,8,.25)}
.st--closed{background:rgba(120,120,120,.12);color:#555;border-color:rgba(120,120,120,.25)}

/* ── 企業管理レイアウト（design-system の admin-* を補う） ── */
.emp-main{padding:24px}
.emp-h1{font-size:20px;font-weight:800;margin:0 0 4px}
.emp-lead{font-size:13px;color:var(--color-text-light);margin:0 0 20px}

/* ==========================================================
   PUBLIC PORTAL POLISH — 公開ポータル「洗練・上質」レイヤー
   紙のような温かいオフホワイト地／深いインク／抑えた真鍮アクセント／
   見出しは明朝、罫線はヘアライン、影は控えめ。
   （管理画面 design-system.css には非干渉。.site-* に限定）
   ========================================================== */
:root{
  --lux-paper:#F8F7F3; --lux-ink:#18202E; --lux-ink-2:#212B3D;
  --lux-navy:#1F2D45; --lux-brass:#A98850; --lux-brass-2:#C4A56B;
  --lux-slate:#39587B; --lux-muted:#6A7180;
  --lux-line:rgba(24,32,46,.11); --lux-line-soft:rgba(24,32,46,.06);
  --lux-card:#FFFFFF; --lux-cream:#FBFAF6;
  --lux-shadow-sm:0 1px 2px rgba(24,32,46,.04);
  --lux-shadow:0 18px 44px -28px rgba(24,32,46,.34);
}
.site-header,.site-main,.site-footer{
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:.01em;
}
body{background:
  radial-gradient(1200px 620px at 50% -12%, rgba(169,136,80,.05), transparent 60%),
  var(--lux-paper);}
.site-main{padding-top:32px;padding-bottom:16px}

/* 見出しは明朝で品格を出す（本文はゴシックのまま） */
.site-main .jd-head__title,.hero__title,.lux-serif{
  font-family:"Noto Serif JP","Hiragino Mincho ProN",serif;font-weight:600;letter-spacing:.02em}

/* ── ヘッダー（静かなすりガラス＋ヘアライン） ── */
.site-header{background:rgba(248,247,243,.86);backdrop-filter:saturate(120%) blur(10px);-webkit-backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--lux-line)}
.site-header__inner{padding-top:16px;padding-bottom:16px}
.site-header__logo{font-size:19px;font-weight:800;color:var(--lux-ink);letter-spacing:.02em}
.site-header__logo span{color:var(--lux-brass);-webkit-text-fill-color:var(--lux-brass)}
.site-header__link{font-weight:500;color:var(--lux-muted);transition:color .15s}
.site-header__link:hover{background:transparent;color:var(--lux-ink)}

/* ── ヒーロー（深いインクの額装・明朝見出し・真鍮の細線） ── */
.hero{position:relative;overflow:hidden;border-radius:18px;padding:78px 60px 60px;margin-bottom:32px;color:#F4F1E9;
  background:linear-gradient(160deg,#141C2B 0%,#1B2536 60%,#232F44 100%)}
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--lux-brass) 30%,var(--lux-brass-2) 50%,var(--lux-brass) 70%,transparent)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(680px 340px at 92% 8%, rgba(169,136,80,.14), transparent 60%)}
.hero__inner{position:relative;z-index:1;max-width:720px}
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lux-brass-2);background:transparent;border:0;padding:0;margin-bottom:22px}
.hero__eyebrow::before{content:"";width:26px;height:1px;background:var(--lux-brass)}
.hero__title{font-size:clamp(30px,4.3vw,44px);line-height:1.42;margin:0 0 18px;color:#F6F3EB;text-wrap:balance}
.hero__title em{font-style:normal;color:var(--lux-brass-2)}
.hero__lead{font-size:15.5px;line-height:2.1;color:rgba(244,241,233,.78);margin:0;max-width:58ch;font-weight:300}
.hero__stats{display:flex;gap:0;flex-wrap:wrap;margin-top:34px}
.hero__stat{padding:0 30px;border-left:1px solid rgba(244,241,233,.16)}
.hero__stat:first-child{padding-left:0;border-left:0}
.hero__stat b{display:block;font-family:"Noto Serif JP",serif;font-size:26px;font-weight:600;line-height:1;color:var(--lux-brass-2);font-variant-numeric:tabular-nums}
.hero__stat span{font-size:11px;letter-spacing:.08em;color:rgba(244,241,233,.6)}

/* ── 検索カード（白・ヘアライン・控えめな影） ── */
.hero-search{position:relative;z-index:1;background:var(--lux-card);border:1px solid rgba(244,241,233,.12);border-radius:12px;padding:16px;margin-top:36px;box-shadow:0 26px 60px -34px rgba(0,0,0,.7)}
.hero-search .form-label{color:var(--lux-muted);font-weight:500;font-size:11px;letter-spacing:.04em}
.hero-search .form-input,.hero-search .form-select{border-color:var(--lux-line)}
.hero-search .jobsearch__btn{width:100%;font-weight:600;letter-spacing:.04em}

/* ── ボタン（無地・上質・微細なホバー） ── */
.site-main .btn--primary,.site-header .btn--primary,.hero-search .btn--primary{
  background:var(--lux-navy);border:1px solid var(--lux-navy);color:#F7F5EF;border-radius:9px;letter-spacing:.03em;font-weight:600;
  box-shadow:none;transition:background .2s,transform .12s,box-shadow .2s}
.site-main .btn--primary:hover,.site-header .btn--primary:hover,.hero-search .btn--primary:hover{background:var(--lux-ink);transform:translateY(-1px);box-shadow:var(--lux-shadow)}
.site-main .btn--outline,.site-header .btn--outline{border-radius:9px;border-color:var(--lux-line);color:var(--lux-ink);font-weight:500}
.site-main .btn--outline:hover,.site-header .btn--outline:hover{border-color:var(--lux-brass);color:var(--lux-brass)}
.site-main .btn{border-radius:9px}

/* ── カード類（ヘアライン主体・控えめな影・上品なホバー） ── */
.site-main .job-card,.site-main .jd-head,.site-main .jd-section,.site-main .card,.site-main .jd-apply,.site-main .quality{
  border-radius:14px;border:1px solid var(--lux-line);background:var(--lux-card);box-shadow:var(--lux-shadow-sm)}
.site-main .job-card{padding:22px;transition:box-shadow .25s,transform .12s,border-color .25s}
.site-main .job-card:hover{box-shadow:var(--lux-shadow);transform:translateY(-2px);border-color:var(--lux-brass-soft,rgba(169,136,80,.45))}
.site-main .job-card__title a{color:var(--lux-navy)}
.site-main .job-card__title a:hover{color:var(--lux-brass);text-decoration:none}

/* ── セクション見出し（明朝寄り・真鍮の細い罫） ── */
.site-main .jd-section__title{border-left:0;padding-left:16px;position:relative;font-weight:700;letter-spacing:.02em}
.site-main .jd-section__title::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;background:var(--lux-brass)}

/* ── タグ（無彩色寄り・ヘアライン） ── */
.site-main .job-tag{background:var(--lux-cream);color:var(--lux-navy);border:1px solid var(--lux-line);font-weight:500;letter-spacing:.02em;transition:border-color .15s,color .15s}
a.job-tag:hover{border-color:var(--lux-brass);color:var(--lux-brass)}

/* ── KPI/数値カード ── */
.site-main .kpi-card{border-radius:12px;border:1px solid var(--lux-line);background:var(--lux-card);box-shadow:var(--lux-shadow-sm)}
.site-main .kpi-card--primary{background:var(--lux-cream);border-color:var(--lux-line)}
.site-main .kpi-card__value{color:var(--lux-navy);font-family:"Noto Serif JP",serif;font-weight:600}

/* ── フッター（深いインク・真鍮の細線） ── */
.site-footer{background:var(--lux-ink);margin-top:80px;padding:52px 20px 40px;position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--lux-brass),transparent)}
.site-footer h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,233,.5)}
.site-footer a{color:rgba(244,241,233,.82);transition:color .15s}
.site-footer a:hover{color:var(--lux-brass-2)}

@media (max-width:900px){
  .hero{padding:44px 24px 34px;border-radius:14px}
  .hero__stats{gap:0}
  .hero__stat{padding:6px 18px}
  .hero__stat:first-child{padding-left:0}
  .hero-search{grid-template-columns:1fr}
}

/* ==========================================================
   MOBILE LAYER — スマートフォン対応
   参照: data/ui/responsive/breakpoints.md（768px を主ブレークポイントとする）
   方針:
   - 横スクロールを絶対に発生させない（縮まない要素を作らない）
   - タッチターゲットは44px以上、フォームは16px以上（iOSズーム防止）
   - ナビはドロワーに退避し、指の届く位置に置く
   共通部品（.table / .btn / .form-*）のモバイル化は design-system.css が担う。
   ここは公開ポータル固有（.site-* / .hero* / .jl-* / .jd-* / .kb / マイページ）だけを扱う。
   ========================================================== */

/* ── スキップリンク（キーボード操作の先頭導線） ── */
.site-skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--lux-ink);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0;font-size:14px;text-decoration:none}
.site-skip:focus{left:0}

/* ── 横あふれの防止 ── */
.site-header__inner,.site-main,.site-footer__inner{width:100%;box-sizing:border-box}
.site-main img,.site-main video,.site-main iframe{max-width:100%;height:auto}
.site-main table{max-width:100%}
/* 長いURL・英数字の連続で親を押し広げない */
.site-main .job-card__title,.site-main .jd-head__title,.site-main .jd-table td,
.site-main .site-drawer__link{overflow-wrap:anywhere}

/* ── ハンバーガー（768px以下でのみ表示） ── */
.site-header__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;margin-left:auto;flex:0 0 auto;
  background:transparent;border:1px solid var(--lux-line);border-radius:9px;cursor:pointer}
.site-header__toggle span{display:block;height:2px;width:100%;background:var(--lux-ink);border-radius:1px;
  transition:transform .2s,opacity .2s}
.site-header__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.site-header__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-header__toggle:focus-visible{outline:2px solid var(--lux-brass);outline-offset:2px}

/* ── ドロワー ── */
.site-drawer{position:fixed;inset:0;z-index:50}
.site-drawer__overlay{position:absolute;inset:0;background:rgba(24,32,46,.45);
  opacity:0;transition:opacity .2s}
.site-drawer.is-open .site-drawer__overlay{opacity:1}
.site-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);
  background:var(--lux-paper);border-left:1px solid var(--lux-line);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .22s ease;
  box-shadow:-18px 0 44px -28px rgba(24,32,46,.5);overflow-y:auto;overscroll-behavior:contain}
.site-drawer.is-open .site-drawer__panel{transform:translateX(0)}
.site-drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--lux-line);position:sticky;top:0;background:var(--lux-paper);z-index:1}
.site-drawer__title{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--lux-muted)}
.site-drawer__close{width:44px;height:44px;position:relative;background:transparent;border:0;cursor:pointer;
  border-radius:9px;flex:0 0 auto}
.site-drawer__close span{position:absolute;left:12px;right:12px;top:50%;height:2px;background:var(--lux-ink);border-radius:1px}
.site-drawer__close span:nth-child(1){transform:rotate(45deg)}
.site-drawer__close span:nth-child(2){transform:rotate(-45deg)}
.site-drawer__close:focus-visible{outline:2px solid var(--lux-brass);outline-offset:2px}
.site-drawer__body{padding:8px 18px 28px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.site-drawer__label{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--lux-muted);
  margin:26px 0 6px}
.site-drawer__body > .site-drawer__label:first-child{margin-top:10px}
.site-drawer__link{display:block;padding:13px 4px;font-size:15px;color:var(--lux-ink);text-decoration:none;
  border-bottom:1px solid var(--lux-line-soft);min-height:48px;box-sizing:border-box}
.site-drawer__link:active{background:var(--lux-cream)}
.site-drawer__actions{display:grid;gap:10px;margin-top:22px}
.site-drawer__actions .btn,.site-drawer__actions button{width:100%;justify-content:center;min-height:48px}
body.is-drawer-open{overflow:hidden}

/* ==========================================================
   768px 以下 — 主ブレークポイント
   ========================================================== */
@media (max-width:768px){
  /* ── ヘッダー ── */
  .site-header__inner{padding:10px 16px;gap:10px}
  .site-header__nav{display:none}
  .site-header__toggle{display:flex}
  .site-header__logo{font-size:17px;white-space:nowrap;min-width:0;
    overflow:hidden;text-overflow:ellipsis}

  /* ── 本文の余白 ── */
  .site-main{padding:16px 16px 8px}

  /* ── ヒーロー ── */
  .hero{padding:32px 20px 26px;border-radius:12px;margin-bottom:20px}
  .hero__inner{max-width:100%}
  .hero__eyebrow{font-size:10px;letter-spacing:.16em;margin-bottom:14px}
  .hero__title{font-size:clamp(23px,6.4vw,30px);line-height:1.5;margin-bottom:14px}
  .hero__lead{font-size:14px;line-height:1.95}
  /* 4指標を横一列に押し込むと必ずあふれる。2列グリッドで折り返す */
  .hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 0;margin-top:26px}
  .hero__stat{padding:0 0 0 16px;border-left:1px solid rgba(244,241,233,.16)}
  .hero__stat:first-child,.hero__stat:nth-child(3){padding-left:0;border-left:0}
  .hero__stat b{font-size:23px}
  .hero__stat span{font-size:10.5px}
  .hero-search{margin-top:24px;padding:14px}

  /* ── 検索フォーム ── */
  .jobsearch{padding:14px}
  .jobsearch__row{grid-template-columns:1fr;gap:12px}
  .jobsearch__btn{width:100%;min-width:0}

  /* ── 検索結果ツールバー ── */
  .jl-toolbar{gap:8px}
  .jl-toolbar__count{font-size:13px;width:100%}
  .jl-toolbar__sort{margin-left:0;width:100%;overflow-x:auto;
    padding-bottom:2px}
  .jl-toolbar__sort .btn{flex:0 0 auto;white-space:nowrap}

  /* ── 絞り込み（既定は閉じ、ボタンで開く） ── */
  .jl-facets{padding:0;border-radius:12px;overflow:hidden}
  .jl-facets__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
    min-height:48px;padding:12px 16px;background:var(--lux-card);border:0;
    font-size:14px;font-weight:600;color:var(--lux-ink);cursor:pointer;text-align:left}
  .jl-facets__toggle::after{content:"";width:9px;height:9px;border-right:2px solid var(--lux-muted);
    border-bottom:2px solid var(--lux-muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
  .jl-facets.is-open .jl-facets__toggle::after{transform:rotate(-135deg) translateY(-2px)}
  .jl-facets__body{display:none;padding:0 16px 16px;border-top:1px solid var(--lux-line)}
  .jl-facets.is-open .jl-facets__body{display:block}
  .jl-facets__group + .jl-facets__group{margin-top:16px;padding-top:16px}
  /* チェックボックスは指で押せる高さを確保する */
  .jl-check{padding:11px 0;font-size:14px;min-height:44px}
  .jl-check input{width:20px;height:20px;flex:0 0 auto}

  /* ── 求人カード ── */
  .site-main .job-card{padding:16px;border-radius:12px}
  .job-card__top{gap:12px}
  .job-card__logo{width:44px;height:44px;font-size:10px}
  .job-card__title{font-size:16px}
  .job-card__meta{grid-template-columns:1fr;gap:0}
  .job-card__foot{flex-wrap:wrap;gap:8px}
  .job-card__date{width:100%;margin-right:0;font-size:11.5px}
  .job-card__foot form,.job-card__foot .btn{flex:1 1 auto}
  .job-card__foot .btn{justify-content:center;width:100%}

  /* ── 求人詳細 ── */
  .jd-head{padding:18px}
  .jd-head__title{font-size:20px}
  .jd-section{padding:18px;border-radius:12px}
  .jd-section__title{font-size:15px}
  /* 定義表は th/td 横並びだと値が潰れるので縦積みにする */
  .jd-table,.jd-table tbody,.jd-table tr,.jd-table th,.jd-table td{display:block;width:auto}
  .jd-table tr{border-top:1px solid var(--lux-line);padding:10px 0}
  .jd-table tr:first-child{border-top:0;padding-top:0}
  .jd-table th{width:auto;border-top:0;padding:0 0 3px;font-size:12px}
  .jd-table td{border-top:0;padding:0;font-size:14.5px;line-height:1.8}
  .jd-apply{padding:16px}

  /* ── フッター ── */
  .site-footer{padding:36px 16px 28px;margin-top:48px}
  .site-footer__inner{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
  .site-footer__col:first-child{grid-column:1 / -1}
  .site-footer a{padding:7px 0;font-size:13.5px;min-height:32px}

  /* ── 応募者カンバン（横スクロール＋スナップ） ── */
  .kb{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82vw;
    scroll-snap-type:x mandatory;gap:10px}
  .kb__col{scroll-snap-align:start;min-width:0}

  /* ── 管理画面の内側余白 ── */
  .emp-main{padding:16px}
  .emp-h1{font-size:18px}
}

/* ==========================================================
   480px 以下 — 小型スマートフォン
   ========================================================== */
@media (max-width:480px){
  .hero{padding:26px 16px 22px}
  .hero__title{line-height:1.55}
  .hero__stat b{font-size:21px}
  .site-main{padding:14px 12px 8px}
  .site-header__inner{padding:10px 12px}
  .site-footer__inner{grid-template-columns:1fr;gap:20px}
  .site-footer__col:first-child{grid-column:auto}
  .kb{grid-auto-columns:88vw}
}

/* ==========================================================
   マイページ（求職者）
   ========================================================== */
.mypage-layout{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}
.mypage-nav{position:sticky;top:76px}
.mypage-nav__list{display:block}
.mypage-nav__link{display:block;padding:10px;border-radius:6px;font-size:13px;text-decoration:none;color:var(--color-text)}
.mypage-nav__link.is-active{background:var(--color-primary);color:#fff;font-weight:700}

@media (max-width:900px){
  .mypage-layout{grid-template-columns:1fr;gap:16px}
  .mypage-nav{position:static}
  .mypage-nav .card__body{padding:8px}
  /* 8項目を縦に積むと本文が画面外へ落ちるため、横スクロールのピル型にする */
  .mypage-nav__list{display:flex;gap:6px;overflow-x:auto;
    scrollbar-width:none;padding-bottom:2px}
  .mypage-nav__list::-webkit-scrollbar{display:none}
  .mypage-nav__link{flex:0 0 auto;white-space:nowrap;padding:11px 14px;border-radius:999px;
    border:1px solid var(--lux-line,rgba(24,32,46,.11));font-size:13.5px;min-height:44px;
    display:flex;align-items:center}
  .mypage-nav__link.is-active{border-color:var(--color-primary)}
}

/* ==========================================================
   企業管理・運営管理の2カラム編集レイアウト
   ========================================================== */
.emp-edit{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.emp-edit__side{position:sticky;top:20px}
@media (max-width:900px){
  .emp-edit{grid-template-columns:1fr;gap:16px}
  .emp-edit__side{position:static}
  /* 補助パネルは本体の下に置く（先に読むべきは入力欄本体） */
  .emp-edit__side{order:2}
}

/* ==========================================================
   モーション低減設定の尊重
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  .site-drawer__panel,.site-drawer__overlay,.site-header__toggle span,
  .site-main .job-card,.jl-facets__toggle::after{transition:none !important}
  .site-main .job-card:hover{transform:none}
}

/* ==========================================================
   管理画面（企業・運営）のモバイル対応
   design-system.css が 768px以下でサイドバーを画面外へ退避させるため、
   開くための導線（ハンバーガー＋オーバーレイ）をここで足す。
   ========================================================== */
.admin-nav-overlay{display:none;position:fixed;inset:0;z-index:250;
  background:rgba(24,32,46,.45);opacity:0;transition:opacity .2s}
.admin-nav-overlay.is-open{opacity:1}
/* flexの子は既定で内容幅より縮まない。広い表があると画面ごと横に伸びるため明示する */
.admin-main{min-width:0}
.admin-content{max-width:100%;overflow-x:hidden}
.admin-header__user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}

@media (max-width:768px){
  .admin-nav-overlay{display:block;pointer-events:none}
  .admin-nav-overlay.is-open{pointer-events:auto}
  /* design-system は .admin-header__user span をまとめて隠すが、
     頭文字アイコンは残したいので個別に戻す */
  .admin-header__user .admin-header__user-icon{display:flex}
  .admin-header__user-name{display:none}
  .admin-header__logout{min-height:44px;padding:8px 12px}
  .admin-sidebar{width:min(82vw,280px)}
  /* カード化された表の中でボタンが潰れないようにする */
  .table__actions{display:flex;flex-wrap:wrap;gap:8px}
  .table__actions .btn{flex:1 1 auto;justify-content:center}
}

/* ── 年・月・内容のような細い定型表はカード化しない ──
   design-system.css は 768px以下で .table を縦積みのカードに変えるが、
   履歴書の学歴・職歴のように列が狭く見出しも不要な表は、表のままの方が読める。 */
@media (max-width:768px){
  .table.table--plain{display:table;width:100%}
  .table.table--plain tbody{display:table-row-group}
  .table.table--plain tr{display:table-row;border:0;margin:0;padding:0;background:transparent !important}
  .table.table--plain td{display:table-cell;padding:8px 6px;font-size:13px;
    border-bottom:1px solid var(--color-border);vertical-align:top}
  .table.table--plain td::before{content:none}
}

/* ── レイアウト・ユーティリティ ──
   ビューにインラインで固定カラム数を書くとモバイルで潰れるため、クラスに寄せる。 */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
@media (max-width:900px){
  .grid-checks{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .grid-2{grid-template-columns:1fr;gap:12px}
  .grid-checks{grid-template-columns:1fr;gap:0}
}

/* ── 企業別採用サイトのヘッダー ──
   リンクが2本だけなのでドロワーは作らず、ロゴの下に折り返して常時表示する。
   ポータル用の「768px以下でナビを隠す」規則をここだけ打ち消す。 */
@media (max-width:768px){
  .site-header--simple .site-header__inner{flex-wrap:wrap;gap:6px 12px;padding-bottom:6px}
  .site-header--simple .site-header__logo{width:100%;white-space:normal;line-height:1.4}
  .site-header--simple .site-header__nav{display:flex;width:100%;margin-left:0;gap:4px}
  .site-header--simple .site-header__link{display:flex;align-items:center;min-height:44px;
    padding:10px 12px;font-size:14px}
}

/* ==========================================================
   タッチターゲット
   data/ui/responsive/breakpoints.md の基準に合わせ、
   スマホでは押せる要素の高さを44px以上にする。
   ========================================================== */
.link-chip{display:inline-block;margin:0 10px 8px 0;font-size:13px}
.card__more{font-size:12px}

@media (max-width:768px){
  /* ロゴ・スキップリンク */
  .site-header__logo{display:flex;align-items:center;min-height:44px}
  .site-skip{min-height:44px;display:flex;align-items:center}

  /* 求人カードやツールバーの小ボタン。design-system の 40px では指に対して低い */
  .site-main .btn--sm,.site-header .btn--sm,.site-drawer .btn--sm{min-height:44px;padding:10px 16px}

  /* 「一覧を見る →」のような補助リンク */
  .card__more{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-size:13px}

  /* 職種・都道府県のリンク一覧はチップにして押し分けられるようにする */
  .link-chip{display:inline-flex;align-items:center;min-height:44px;margin:0 8px 8px 0;
    padding:0 14px;font-size:14px;border:1px solid var(--lux-line);border-radius:999px;
    background:var(--lux-cream);color:var(--lux-navy);text-decoration:none}

  /* パンくず */
  .breadcrumb__link,.breadcrumb__current{display:inline-flex;align-items:center;min-height:44px}

  /* フッター */
  .site-footer a{min-height:44px;display:flex;align-items:center;padding:2px 0}
}

/* ── 求人カードはカード全体を求人詳細へのタップ領域にする ──
   見出しリンク単体だと1行のとき24px程度にしかならず、指では狙いにくい。
   カード内の他のボタン（気になる／詳細を見る／条件タグ）は上に重ねて残す。 */
@media (max-width:768px){
  .site-main .job-card{position:relative}
  .job-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
  .job-card__tags,.job-card__foot{position:relative;z-index:2}
  .job-card__foot form,.job-card__foot .btn{position:relative;z-index:2}
}

/* ── タグがリンクのとき（コラム・用語集のカテゴリ）は押せる大きさにする ──
   求人カードの条件タグは span なので表示のまま変えない。 */
@media (max-width:768px){
  a.job-tag{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:13px}
  .job-card__tags:has(a.job-tag){gap:8px}
}