/* ===========================================================
   求人検索サイト（地域の求人ポータル）デモ
   reset.css の後に読み込むこと
   デザイン方針：角丸は一切使わない（すべて直角）／1pxの罫線と面で構成する
   =========================================================== */

:root{
  --navy:#123a63;
  --navy-dark:#0a2542;
  --teal:#2277b0;
  --teal-pale:#e9f1f8;
  --accent:#e2620d;
  --accent-dark:#bd4f08;
  --accent-pale:#fbeee3;
  --sand:#f5f3ee;
  --bg-muted:#f1f4f6;
  --line:#d9dde1;
  --line-strong:#aab2b9;
  --text:#16222c;
  --muted:#63717c;
  --ok:#1c7a58;
  --ok-pale:#e6f2ed;
  --ship:#1f5f9e;
  --ship-pale:#e8f0f8;
  --danger:#b3261e;
  --danger-pale:#fbeceb;
  --max:1180px;
  --max-narrow:860px;
  --font-jp:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body{
  font-family:var(--font-jp);
  color:var(--text);
  background:#fff;
  line-height:1.85;
  font-size:15px;
  font-weight:400;
}

a{transition:.15s opacity}
a:hover{opacity:.75}

/* display を持つ要素にも hidden 属性を効かせる（絞り込みの開閉・メール本文の開閉で使用） */
[hidden]{display:none !important}

.container{width:min(var(--max), 92vw); margin-inline:auto}
.container--narrow{width:min(var(--max-narrow), 92vw); margin-inline:auto}

/* グリッドの子は既定で「中身より小さくならない」。表など横に長い中身を入れると
   画面からはみ出すので、はみ出しは中身の側（.tablewrap）で受けるようにする */
.searchlayout>*, .detail2>*, .layout2>*, .cols2>*, .detail>*, .app>*{min-width:0}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--navy-dark); color:#fff; padding:.6rem 1rem; z-index:100}
.skip-link:focus{left:1rem; top:1rem}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.6rem;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  line-height:1.4;
  text-align:center;
  transition:.15s background, .15s color, .15s border-color;
}
.btn:hover{background:var(--navy-dark); border-color:var(--navy-dark); opacity:1}
.btn--accent{background:var(--accent); border-color:var(--accent)}
.btn--accent:hover{background:var(--accent-dark); border-color:var(--accent-dark)}
.btn--tel{background:var(--ok); border-color:var(--ok)}
.btn--tel:hover{background:#155f43; border-color:#155f43}
.btn--line{background:#fff; color:var(--navy); border-color:var(--line-strong)}
.btn--line:hover{background:var(--bg-muted); color:var(--navy); border-color:var(--navy)}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.btn--ghost:hover{background:rgba(255,255,255,.14); border-color:#fff}
.btn--sm{padding:.5rem .9rem; font-size:.84rem}
.btn--lg{padding:1.05rem 2rem; font-size:1.02rem}
.btn--block{width:100%}
.btn--danger{background:#fff; color:var(--danger); border-color:var(--danger)}
.btn--danger:hover{background:var(--danger); color:#fff}
.btn:disabled,
.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}

/* ========== Text parts ========== */
.eyebrow{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--accent);
  margin-bottom:.7rem;
}
.sec{padding:4.4rem 0}
.sec--muted{background:var(--bg-muted)}
.sec--sand{background:var(--sand)}
.sec--tight{padding:3rem 0}
.sec-head{margin-bottom:2.4rem; max-width:760px}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-ttl{
  font-size:clamp(1.45rem, 3vw, 2rem);
  font-weight:700;
  line-height:1.5;
  color:var(--navy);
  letter-spacing:.02em;
}
.sec-lead{margin-top:1rem; color:var(--muted); font-size:.95rem}
.h-bar{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:1.15rem;
  font-weight:700;
  color:var(--navy);
  padding-bottom:.7rem;
  margin-bottom:1.4rem;
  border-bottom:2px solid var(--navy);
}
.h-bar::before{content:""; width:5px; height:1.1rem; background:var(--accent); flex-shrink:0}
.txt-muted{color:var(--muted)}
.txt-sm{font-size:.86rem}
.txt-danger{color:var(--danger); font-weight:700}
.txt-ok{color:var(--ok); font-weight:700}
.num-cell{font-variant-numeric:tabular-nums}
.mt-1{margin-top:.6rem}
.mt-2{margin-top:1.2rem}
.mt-3{margin-top:2rem}
.nowrap{white-space:nowrap}

.crumb{font-size:.84rem; color:var(--muted); display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.6rem}
.crumb a{color:var(--navy); font-weight:700}

/* ========== デモ告知バー ========== */
.demobar{
  background:var(--navy-dark);
  color:rgba(255,255,255,.82);
  font-size:.78rem;
  letter-spacing:.02em;
}
.demobar__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:.5rem 0;
}
.demobar__tag{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  padding:.1rem .55rem;
  margin-right:.6rem;
  letter-spacing:.12em;
}
.demobar a{border-bottom:1px solid rgba(255,255,255,.45); font-weight:700; color:#fff}

/* ===========================================================
   説明ページ（guide.html）
   =========================================================== */
.lp-head{border-bottom:1px solid var(--line); background:#fff}
.lp-head__in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.1rem 0}
.lp-logo{font-weight:700; color:var(--navy); font-size:1.02rem; letter-spacing:.02em; line-height:1.4}
.lp-logo span{display:block; font-size:.68rem; letter-spacing:.2em; color:var(--accent)}
.lp-head__nav{display:flex; align-items:center; gap:1.6rem; font-size:.9rem; font-weight:500}

.lp-hero{position:relative; overflow:hidden; color:#fff}
.lp-hero__bg{position:absolute; inset:0; background:url("../images/hero-work.webp") center/cover no-repeat}
.lp-hero__dim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,37,66,.95) 0%, rgba(10,37,66,.82) 55%, rgba(10,37,66,.5) 100%)}
.lp-hero__in{position:relative; z-index:1; padding:5rem 0}
.lp-hero__ttl{font-size:clamp(1.75rem, 4vw, 2.8rem); font-weight:700; line-height:1.45; letter-spacing:.02em}
.lp-hero__txt{margin-top:1.6rem; max-width:660px; color:rgba(255,255,255,.9)}
.lp-hero__btns{margin-top:2.4rem; display:flex; gap:.9rem; flex-wrap:wrap}
.lp-hero__meta{
  margin-top:2.6rem;
  display:flex;
  gap:2.4rem;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.25);
  padding-top:1.4rem;
  font-size:.85rem;
  color:rgba(255,255,255,.82);
}
.lp-hero__meta b{display:block; color:#fff; font-size:1.02rem}

.fgrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.fcard{background:#fff; padding:2rem 1.7rem}
.fcard__num{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  color:#fff;
  background:var(--teal);
  padding:.15rem .6rem;
  margin-bottom:.9rem;
}
.fcard__ttl{font-size:1.12rem; font-weight:700; color:var(--navy); margin-bottom:.7rem}
.fcard__txt{font-size:.88rem; color:var(--muted); margin-bottom:1.1rem}
.fcard__list{display:grid; gap:.45rem; font-size:.88rem}
.fcard__list li{display:flex; gap:.6rem; align-items:flex-start}
.fcard__list li::before{content:""; width:7px; height:7px; background:var(--accent); margin-top:.62rem; flex-shrink:0}

.screens{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem}
.scard{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column}
.scard__img{aspect-ratio:16/9; object-fit:cover; width:100%; border-bottom:1px solid var(--line)}
.scard__body{padding:1.5rem; display:flex; flex-direction:column; flex:1}
.scard__label{font-size:.72rem; font-weight:700; letter-spacing:.16em; color:var(--accent); margin-bottom:.5rem}
.scard__ttl{font-size:1.08rem; font-weight:700; color:var(--navy); margin-bottom:.6rem}
.scard__txt{font-size:.87rem; color:var(--muted); flex:1}
.scard__btn{margin-top:1.3rem}
.scard__login{margin-top:1rem; font-size:.8rem; color:var(--muted); border-top:1px dashed var(--line-strong); padding-top:.8rem}
.scard__login code{background:var(--bg-muted); border:1px solid var(--line); padding:.05rem .35rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--navy)}

.pipe{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.pipe__step{background:#fff; padding:1.6rem 1.4rem}
.pipe__no{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.14em; color:#fff; background:var(--navy); padding:.12rem .6rem; margin-bottom:.8rem}
.pipe__ttl{font-weight:700; color:var(--navy); margin-bottom:.5rem}
.pipe__txt{font-size:.85rem; color:var(--muted)}

.plus{display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.plus__item{background:#fff; padding:1.5rem 1.6rem; display:flex; gap:1.1rem; align-items:flex-start}
.plus__no{
  flex-shrink:0;
  width:2.2rem; height:2.2rem;
  display:grid; place-items:center;
  background:var(--navy);
  color:#fff;
  font-size:.8rem;
  font-weight:700;
}
.plus__ttl{font-weight:700; color:var(--navy); margin-bottom:.3rem}
.plus__txt{font-size:.86rem; color:var(--muted)}
.tagline{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem}
.tagline li{border:1px solid var(--line-strong); padding:.35rem .8rem; font-size:.82rem; color:var(--navy); background:#fff}

/* 構造の図（アカウント → 事業所 → 求人） */
.tree{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.tree__row{background:#fff; display:grid; grid-template-columns:13rem 1fr; gap:1.2rem; padding:1.3rem 1.5rem; align-items:center}
.tree__label{font-weight:700; color:var(--navy); display:flex; align-items:center; gap:.6rem}
.tree__label i{color:var(--accent)}
.tree__label span{display:block; font-size:.72rem; letter-spacing:.14em; color:var(--muted); font-weight:500}
.tree__items{display:flex; flex-wrap:wrap; gap:.5rem}
.tree__chip{border:1px solid var(--line-strong); background:var(--bg-muted); padding:.35rem .8rem; font-size:.84rem}
.tree__chip b{color:var(--navy)}

.cta-band{background:var(--navy); color:#fff; padding:3.4rem 0}
.cta-band__in{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.cta-band__ttl{font-size:1.35rem; font-weight:700}
.cta-band__txt{margin-top:.6rem; color:rgba(255,255,255,.82); font-size:.9rem}

/* ===========================================================
   求職者が見る画面：ヘッダーとヒーロー
   =========================================================== */
.site-head{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--line)}
.site-head__in{display:flex; align-items:center; gap:1.5rem; padding:.9rem 0}
.site-logo{font-weight:700; color:var(--navy); font-size:1.05rem; letter-spacing:.04em; line-height:1.35}
.site-logo span{display:block; font-size:.62rem; letter-spacing:.2em; color:var(--teal)}
.site-nav{margin-left:auto}
.site-nav ul{display:flex; gap:1.4rem; font-size:.9rem; font-weight:500}
.site-head__cta{display:flex; align-items:center; gap:.7rem; margin-left:1rem}

.hamburger{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--line-strong);
  background:#fff;
  align-items:center; justify-content:center;
  flex-shrink:0;
}
.hamburger span{width:18px; height:2px; background:var(--navy); display:block; position:relative}
.hamburger span::before,
.hamburger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--navy)}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
.mobile-nav{display:none; border-top:1px solid var(--line); background:#fff; padding:.6rem 0 1rem}
.mobile-nav.is-open{display:block}
.mobile-nav ul{width:min(var(--max), 92vw); margin-inline:auto; display:grid; gap:.4rem; font-weight:700}
.mobile-nav a{display:block; padding:.75rem .9rem; border:1px solid var(--line)}

.hero{position:relative; overflow:hidden; color:#fff}
.hero__bg{position:absolute; inset:0; background:url("../images/hero-work.webp") center/cover no-repeat}
.hero__dim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,37,66,.86) 0%, rgba(10,37,66,.72) 100%)}
.hero__in{position:relative; z-index:1; padding:3.6rem 0 3rem}
.hero__ttl{font-size:clamp(1.5rem, 3.4vw, 2.3rem); font-weight:700; line-height:1.5; text-align:center}
.hero__txt{margin-top:1rem; color:rgba(255,255,255,.9); font-size:.95rem; text-align:center}

/* 検索ボックス（トップページ） */
.searchbox{background:#fff; border:1px solid var(--line); margin-top:2.2rem; color:var(--text)}
.searchbox__head{background:var(--navy); color:#fff; padding:.8rem 1.3rem; font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:.6rem}
.searchbox__body{padding:1.5rem 1.4rem}
.searchbox__grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.1rem}
.searchbox__foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.2rem}
.searchbox__hint{font-size:.82rem; color:var(--muted)}

.keywordrow{display:flex; gap:.6rem; margin-bottom:1.1rem}
.keywordrow input{flex:1; padding:.85rem 1rem; border:1px solid var(--line-strong); background:#fff; font-size:1rem}
.keywordrow input:focus{outline:2px solid var(--accent); outline-offset:-1px}

/* 人気の条件・職種から探す */
.linkgrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.linkgrid a{
  display:flex; align-items:center; gap:.8rem;
  background:#fff; padding:1rem 1.2rem;
  font-size:.9rem; font-weight:700; color:var(--navy);
}
.linkgrid a:hover{background:var(--teal-pale); opacity:1}
.linkgrid i{color:var(--teal); width:1.4rem; text-align:center}
.linkgrid .n{margin-left:auto; font-size:.82rem; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums}
.linkgrid a.is-empty{color:var(--muted)}
.linkgrid a.is-empty i{color:var(--line-strong)}

.pilllist{display:flex; flex-wrap:wrap; gap:.6rem}
.pilllist a{
  border:1px solid var(--line-strong);
  background:#fff;
  padding:.5rem 1rem;
  font-size:.88rem;
  color:var(--navy);
  font-weight:700;
}
.pilllist a:hover{background:var(--navy); color:#fff; border-color:var(--navy); opacity:1}
.pilllist .n{color:var(--muted); font-weight:500; font-size:.82rem; margin-left:.3rem}
.pilllist a:hover .n{color:rgba(255,255,255,.75)}

/* ===========================================================
   求人一覧（検索結果）
   =========================================================== */
.searchlayout{display:grid; grid-template-columns:270px 1fr; gap:2rem; align-items:start}

.filter{border:1px solid var(--line); background:#fff; position:sticky; top:78px}
/* 見出しと「条件をすべて外す」は横に並べるが、幅が足りなければ2行に折り返す */
.filter__head{background:var(--navy); color:#fff; padding:.85rem 1.1rem; font-weight:700; font-size:.92rem; display:flex; align-items:center; justify-content:space-between; gap:.2rem .6rem; flex-wrap:wrap}
.filter__head>span{white-space:nowrap}
.filter__head a{color:rgba(255,255,255,.85); font-size:.78rem; font-weight:500; border-bottom:1px solid rgba(255,255,255,.5)}
.filter__body{max-height:calc(100vh - 140px); overflow-y:auto}
.filter__block{border-bottom:1px solid var(--line); padding:1rem 1.1rem}
.filter__block:last-child{border-bottom:none}
.filter__ttl{font-size:.86rem; font-weight:700; color:var(--navy); margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem}
.filter__ttl i{color:var(--accent); font-size:.8rem}
.filter__sub{font-size:.74rem; font-weight:700; color:var(--muted); margin:.7rem 0 .3rem; letter-spacing:.04em}
.filter__foot{padding:1rem 1.1rem; border-top:1px solid var(--line); background:var(--bg-muted); position:sticky; bottom:0}

.facet{display:grid; gap:.15rem}
.facet label{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.86rem; line-height:1.6;
  padding:.2rem .1rem;
  cursor:pointer;
}
.facet label:hover{color:var(--teal)}
.facet input{margin-top:.42rem; flex-shrink:0}
.facet .n{margin-left:auto; color:var(--muted); font-size:.78rem; font-variant-numeric:tabular-nums}
.facet label.is-zero{color:var(--line-strong)}
.facet label.is-zero .n{color:var(--line-strong)}
.facet--radio label{font-weight:500}

.filter__more{
  margin-top:.4rem;
  font-size:.8rem;
  color:var(--teal);
  font-weight:700;
  border-bottom:1px solid var(--teal);
  padding:0;
  background:none;
}

/* 検索結果のヘッダー */
.result-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-bottom:2px solid var(--navy);
  padding-bottom:.8rem;
  margin-bottom:1.2rem;
}
.result-head__ttl{font-size:1.15rem; font-weight:700; color:var(--navy)}
.result-head__ttl b{font-size:1.5rem; color:var(--accent); font-variant-numeric:tabular-nums; margin:0 .2rem}
.sortnav{display:flex; gap:1px; background:var(--line); border:1px solid var(--line)}
.sortnav a{display:block; padding:.4rem .9rem; background:#fff; font-size:.82rem; font-weight:700; color:var(--navy)}
.sortnav a.is-active{background:var(--navy); color:#fff}
.sortnav a:hover{opacity:1; background:var(--teal-pale)}
.sortnav a.is-active:hover{background:var(--navy)}

.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem}
.chips__item{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--navy);
  background:var(--teal-pale);
  color:var(--navy);
  font-size:.83rem;
  font-weight:700;
  padding:.3rem .7rem;
}
.chips__item i{font-size:.72rem; color:var(--muted)}
.chips__item:hover i{color:var(--danger)}
.chips__clear{font-size:.82rem; color:var(--muted); border-bottom:1px solid var(--line-strong); align-self:center}

/* 求人カード */
.joblist{display:grid; gap:1.2rem}
.jobcard{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column}
.jobcard__head{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.7rem 1.3rem;
  background:var(--bg-muted);
  border-bottom:1px solid var(--line);
  font-size:.83rem;
}
.jobcard__biz{font-weight:700; color:var(--navy)}
.jobcard__area{color:var(--muted)}
.jobcard__ago{margin-left:auto; color:var(--muted); font-size:.8rem}
.jobcard__body{padding:1.3rem; display:flex; gap:1.4rem; align-items:flex-start}
.jobcard__thumb{width:180px; flex-shrink:0; border:1px solid var(--line)}
.jobcard__thumb img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.jobcard__main{flex:1; min-width:0}
.jobcard__ttl{font-size:1.14rem; font-weight:700; line-height:1.55; color:var(--navy); margin-bottom:.6rem}
.jobcard__ttl a:hover{color:var(--teal); opacity:1}
.jobcard__tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem}
.jobcard__meta{display:grid; gap:0; border-top:1px solid var(--line)}
.jobcard__meta div{display:grid; grid-template-columns:6.5rem 1fr; gap:.8rem; padding:.5rem 0; border-bottom:1px solid var(--line); font-size:.87rem}
.jobcard__meta dt{color:var(--muted); font-size:.82rem}
.jobcard__meta dd{min-width:0}
.jobcard__salary{color:var(--accent-dark); font-weight:700; font-variant-numeric:tabular-nums}
.jobcard__features{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.8rem}
.jobcard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.9rem 1.3rem;
  border-top:1px solid var(--line);
  background:#fff;
}
.jobcard__stat{font-size:.78rem; color:var(--muted); display:flex; gap:1rem; flex-wrap:wrap}
.jobcard__btns{display:flex; gap:.6rem; flex-wrap:wrap; margin-left:auto}

.ftag{
  display:inline-block;
  border:1px solid var(--teal);
  color:var(--teal);
  background:#fff;
  font-size:.76rem;
  font-weight:700;
  padding:.15rem .5rem;
}
.ftag--more{border-color:var(--line-strong); color:var(--muted)}

.badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:.25rem .6rem;
  border:1px solid transparent;
}
.badge--emp{background:var(--navy); color:#fff}
.badge--occ{background:var(--teal-pale); color:var(--navy); border-color:var(--line-strong)}
.badge--new{background:var(--accent); color:#fff}
.badge--advance{background:var(--teal); color:#fff}
.badge--ok{background:var(--ok-pale); color:var(--ok); border-color:var(--ok)}
.badge--ship{background:var(--ship-pale); color:var(--ship); border-color:var(--ship)}
.badge--wait{background:var(--accent-pale); color:var(--accent-dark); border-color:var(--accent)}
.badge--few{background:#fff; color:var(--danger); border-color:var(--danger)}
.badge--muted{background:var(--bg-muted); color:var(--muted); border-color:var(--line-strong)}
.badge--phone{background:var(--ok-pale); color:var(--ok); border-color:var(--ok)}
.badge--form{background:var(--ship-pale); color:var(--ship); border-color:var(--ship)}

.empty{border:1px solid var(--line); background:#fff; text-align:center; padding:3.4rem 1.5rem}
.empty__mark{font-size:2.6rem; color:var(--line-strong); margin-bottom:1rem}
.empty__ttl{font-size:1.2rem; font-weight:700; color:var(--navy)}
.empty__txt{margin-top:.7rem; color:var(--muted); font-size:.9rem}

.pager{display:flex; gap:.4rem; justify-content:center; padding:1.6rem 0; flex-wrap:wrap}
.pager a, .pager span{border:1px solid var(--line-strong); padding:.45rem .8rem; font-size:.85rem; background:#fff}
.pager .is-current{background:var(--navy); color:#fff; border-color:var(--navy); font-weight:700}

/* ===========================================================
   求人詳細
   =========================================================== */
.jobhead{background:var(--navy); color:#fff; padding:2rem 0}
.jobhead__biz{font-size:.86rem; color:rgba(255,255,255,.8)}
.jobhead__biz a{color:#fff; font-weight:700; border-bottom:1px solid rgba(255,255,255,.5)}
.jobhead__ttl{font-size:clamp(1.3rem, 2.8vw, 1.9rem); font-weight:700; line-height:1.5; margin:.6rem 0 1rem}
.jobhead__tags{display:flex; flex-wrap:wrap; gap:.4rem}
.jobhead__tags .badge--occ{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4)}
.jobhead__tags .badge--emp{background:var(--accent); border-color:var(--accent)}

.detail2{display:grid; grid-template-columns:1fr 330px; gap:2rem; align-items:start}

.dl{border-top:2px solid var(--navy)}
.dl__row{display:grid; grid-template-columns:9rem 1fr; gap:1.2rem; padding:1rem .2rem; border-bottom:1px solid var(--line); font-size:.93rem}
.dl__row dt{font-weight:700; color:var(--navy); font-size:.88rem}
.dl__row dd{min-width:0}
.dl__row .big{font-size:1.25rem; font-weight:700; color:var(--accent-dark); font-variant-numeric:tabular-nums; line-height:1.5}
.dl__note{font-size:.83rem; color:var(--muted); margin-top:.2rem}

/* 応募ボックス（電話・フォーム） */
.applybox{border:2px solid var(--navy); background:#fff; position:sticky; top:78px}
.applybox__head{background:var(--navy); color:#fff; padding:.9rem 1.2rem; font-weight:700; font-size:.95rem; text-align:center}
.applybox__body{padding:1.3rem 1.2rem}
.applybox__label{font-size:.78rem; font-weight:700; letter-spacing:.1em; color:var(--muted); margin-bottom:.4rem}
.applybox__tel{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-size:1.6rem; font-weight:700; color:var(--navy);
  font-variant-numeric:tabular-nums;
  line-height:1.3;
  letter-spacing:.02em;
}
.applybox__tel i{font-size:1.1rem; color:var(--ok)}
.applybox__hours{font-size:.82rem; color:var(--muted); text-align:center; margin-top:.2rem}
.applybox__or{
  display:flex; align-items:center; gap:.8rem;
  margin:1.2rem 0;
  font-size:.8rem; color:var(--muted);
}
.applybox__or::before, .applybox__or::after{content:""; height:1px; background:var(--line); flex:1}
.applybox__note{font-size:.78rem; color:var(--muted); margin-top:1rem; border-top:1px dashed var(--line-strong); padding-top:.8rem}
.applybox__foot{background:var(--bg-muted); border-top:1px solid var(--line); padding:.8rem 1.2rem; font-size:.78rem; color:var(--muted); display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap}

/* 事業所の紹介 */
.bizcard{border:1px solid var(--line); background:#fff}
.bizcard__img{width:100%; aspect-ratio:16/7; object-fit:cover; border-bottom:1px solid var(--line)}
.bizcard__body{padding:1.4rem}
.bizcard__name{font-size:1.1rem; font-weight:700; color:var(--navy)}
.bizcard__catch{font-size:.88rem; color:var(--muted); margin-top:.4rem}

.infolist{display:grid; gap:0; border-top:1px solid var(--line)}
.infolist__row{display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); font-size:.89rem}
.infolist__row dt{font-weight:700; color:var(--navy)}
.infolist__row dd{color:var(--muted)}

/* 関連する求人 */
.minilist{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.minicard{background:#fff; padding:1rem 1.2rem}
.minicard__biz{font-size:.78rem; color:var(--muted)}
.minicard__ttl{font-weight:700; color:var(--navy); font-size:.95rem; line-height:1.5; margin:.2rem 0 .4rem}
.minicard__meta{font-size:.83rem; color:var(--accent-dark); font-weight:700; font-variant-numeric:tabular-nums}

/* ===========================================================
   応募フォーム
   =========================================================== */
.flow-head{background:var(--navy); color:#fff; padding:1.6rem 0}
.flow-head__ttl{font-size:1.15rem; font-weight:700}
.flow-head__sub{font-size:.85rem; color:rgba(255,255,255,.8); margin-top:.3rem}
.steps{display:flex; margin:2rem 0; border:1px solid var(--line); background:#fff}
.steps li{
  flex:1;
  text-align:center;
  padding:.85rem .5rem;
  font-size:.85rem;
  font-weight:700;
  color:var(--muted);
  border-right:1px solid var(--line);
}
.steps li:last-child{border-right:none}
.steps li.is-current{background:var(--navy); color:#fff}
.steps li.is-done{color:var(--navy)}
.steps li.is-done::after{content:"✓"; margin-left:.4rem; color:var(--ok)}

.layout2{display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start}
.panel{border:1px solid var(--line); background:#fff; margin-bottom:1.6rem}
.panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--line);
  background:var(--bg-muted);
  font-weight:700;
  color:var(--navy);
  font-size:.98rem;
}
.panel__body{padding:1.6rem 1.4rem}
.panel__foot{padding:1.2rem 1.4rem; border-top:1px solid var(--line); background:var(--bg-muted)}

.sidejob{border:1px solid var(--navy); background:#fff; position:sticky; top:78px}
.sidejob__head{background:var(--navy); color:#fff; padding:.8rem 1.1rem; font-weight:700; font-size:.9rem}
.sidejob__body{padding:1.1rem}
.sidejob__biz{font-size:.82rem; color:var(--muted)}
.sidejob__ttl{font-weight:700; color:var(--navy); line-height:1.5; margin:.3rem 0 .6rem}
.sidejob__salary{color:var(--accent-dark); font-weight:700; font-variant-numeric:tabular-nums; font-size:.92rem}

/* フォーム */
.field{display:grid; align-content:start; gap:.4rem; margin-bottom:1.3rem}
.field label{font-weight:700; font-size:.88rem; color:var(--navy)}
.field input, .field select, .field textarea{
  width:100%;
  padding:.75rem .9rem;
  border:1px solid var(--line-strong);
  background:#fff;
  font-family:inherit;
  font-size:1rem;
}
.field input[type="checkbox"], .field input[type="radio"]{width:auto; flex-shrink:0; margin-top:.35rem}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:-1px}
.field__note{font-size:.8rem; color:var(--muted)}
.req{display:inline-block; background:var(--accent); color:#fff; font-size:.68rem; font-weight:700; padding:.05rem .4rem; margin-left:.5rem; vertical-align:middle}
.req--any{background:var(--muted)}
.field-2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.field-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem}
.checkline{display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem}
.radios{display:flex; gap:1.2rem; flex-wrap:wrap}
.radios label{display:flex; align-items:center; gap:.4rem; font-weight:500; font-size:.92rem}
.radios input{margin:0}

/* 選択式のカード（連絡方法など） */
.pick{display:grid; gap:.9rem}
.pick--2{grid-template-columns:1fr 1fr}
.pick__item{display:block; border:1px solid var(--line-strong); background:#fff; padding:1rem 1.1rem; cursor:pointer; position:relative}
.pick__item:hover{background:var(--bg-muted)}
.pick__item input{position:absolute; opacity:0; width:0; height:0}
.pick__item:has(input:checked){border-color:var(--navy); background:var(--teal-pale); outline:2px solid var(--navy); outline-offset:-2px}
.pick__ttl{display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--navy)}
.pick__ttl i{color:var(--teal); width:1.1rem; text-align:center}
.pick__txt{font-size:.84rem; color:var(--muted); margin-top:.35rem}

.recap{border-top:1px solid var(--line)}
.recap__row{display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:.85rem 1.4rem; border-bottom:1px solid var(--line); font-size:.9rem}
.recap__row dt{font-weight:700; color:var(--navy)}

/* 完了画面 */
.done{border:2px solid var(--navy); background:#fff; text-align:center; padding:3rem 1.5rem}
.done__mark{width:64px; height:64px; margin:0 auto 1.4rem; background:var(--ok); color:#fff; display:grid; place-items:center; font-size:1.8rem}
.done__ttl{font-size:1.4rem; font-weight:700; color:var(--navy)}
.done__txt{margin-top:.9rem; color:var(--muted); font-size:.92rem}
.code{
  display:inline-block;
  margin:1.8rem auto 0;
  border:1px solid var(--line-strong);
  background:var(--bg-muted);
  padding:1.1rem 2.2rem;
}
.code__label{display:block; font-size:.75rem; letter-spacing:.16em; color:var(--muted); margin-bottom:.3rem}
.code__value{font-size:1.5rem; font-weight:700; letter-spacing:.08em; color:var(--navy); font-variant-numeric:tabular-nums}
.done__btns{margin-top:2.2rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

.mailcard{border:1px solid var(--line); background:#fff; margin-top:2.4rem; text-align:left}
.mailcard__head{background:var(--bg-muted); border-bottom:1px solid var(--line); padding:.8rem 1.2rem; font-size:.85rem; font-weight:700; color:var(--navy)}
.mailcard__body{padding:1.3rem 1.2rem; font-size:.85rem; color:var(--muted); white-space:pre-wrap; line-height:1.9; overflow-x:auto}

/* ===========================================================
   管理画面（事業者マイページ・運営）
   =========================================================== */
.app{display:grid; grid-template-columns:238px 1fr; min-height:100vh}
.app-side{background:var(--navy-dark); color:#fff; padding:1.4rem 0}
.app-side__logo{padding:0 1.3rem 1.3rem; border-bottom:1px solid rgba(255,255,255,.15); font-weight:700; line-height:1.4}
.app-side__logo span{display:block; font-size:.66rem; letter-spacing:.2em; color:var(--accent)}
.app-nav{padding:1rem 0; display:grid}
.app-nav a{padding:.8rem 1.3rem; font-size:.9rem; color:rgba(255,255,255,.78); border-left:3px solid transparent}
.app-nav a:hover{background:rgba(255,255,255,.06); color:#fff; opacity:1}
.app-nav a.is-active{background:rgba(255,255,255,.1); color:#fff; border-left-color:var(--accent); font-weight:700}
.app-nav__badge{display:inline-block; background:var(--accent); color:#fff; font-size:.7rem; font-weight:700; padding:0 .4rem; margin-left:.3rem}
.app-side__foot{padding:1.2rem 1.3rem; border-top:1px solid rgba(255,255,255,.15); font-size:.76rem; color:rgba(255,255,255,.5)}
.app-main{background:var(--bg-muted); min-width:0}
.app-head{background:#fff; border-bottom:1px solid var(--line); padding:1.1rem 1.8rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.app-head__ttl{font-size:1.15rem; font-weight:700; color:var(--navy)}
.app-head__sub{font-size:.82rem; color:var(--muted)}
.app-body{padding:1.8rem}

.stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem; margin-bottom:1.8rem}
.stat{background:#fff; border:1px solid var(--line); padding:1.3rem 1.4rem; border-top:3px solid var(--navy)}
.stat--accent{border-top-color:var(--accent)}
.stat--ok{border-top-color:var(--ok)}
.stat--teal{border-top-color:var(--teal)}
.stat--danger{border-top-color:var(--danger)}
.stat__label{font-size:.8rem; color:var(--muted)}
.stat__num{font-size:1.75rem; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.3}
.stat__num small{font-size:.9rem; margin-left:.2rem}
.stat__sub{font-size:.78rem; color:var(--muted)}

.card{background:#fff; border:1px solid var(--line); margin-bottom:1.8rem}
.card__head{padding:1rem 1.4rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.card__ttl{font-weight:700; color:var(--navy); font-size:1rem}
.card__body{padding:1.4rem}
.card__body--flush{padding:0}

.cols2{display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; align-items:start}
.cols2--wide{grid-template-columns:1.6fr 1fr}

.tabnav{display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:1.8rem}
.tabnav a{display:block; padding:.7rem 1.2rem; background:#fff; font-size:.88rem; font-weight:700; color:var(--navy)}
.tabnav a:hover{background:var(--bg-muted); opacity:1}
.tabnav a.is-active{background:var(--navy); color:#fff}
.tabnav .n{font-weight:500; color:var(--muted); margin-left:.2rem}
.tabnav a.is-active .n{color:rgba(255,255,255,.7)}

.toolbar{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center}
/* 表の「操作」列。ボタンが縦に積まれて行が高くならないよう、詰めて1行に収める */
.toolbar--tight{gap:.35rem; flex-wrap:nowrap}
.toolbar input, .toolbar select{padding:.55rem .8rem; border:1px solid var(--line-strong); background:#fff; font-size:.88rem; font-family:inherit}

.tablewrap{overflow-x:auto}
.table{font-size:.88rem; min-width:760px; width:100%}
.table th, .table td{padding:.8rem .95rem; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:top; text-align:left}
.table thead th{background:var(--bg-muted); color:var(--navy); font-size:.8rem; letter-spacing:.04em; border-bottom:2px solid var(--line-strong)}
.table tbody tr:hover{background:var(--teal-pale)}
.table .num{text-align:right; font-variant-numeric:tabular-nums}
.table .wrap{white-space:normal; min-width:16rem}
.table__link{color:var(--teal); font-weight:700; border-bottom:1px solid var(--teal)}
.table__sub{display:block; font-size:.78rem; color:var(--muted); font-weight:400}
.table--slim{min-width:0}

/* 事業所カード（事業者マイページ） */
.bizgrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; margin-bottom:1.8rem}
.bizitem{background:#fff; border:1px solid var(--line); display:flex; flex-direction:column}
.bizitem__img{width:100%; aspect-ratio:16/8; object-fit:cover; border-bottom:1px solid var(--line)}
.bizitem__body{padding:1.1rem 1.2rem; flex:1; display:flex; flex-direction:column}
.bizitem__name{font-weight:700; color:var(--navy); line-height:1.5}
.bizitem__area{font-size:.8rem; color:var(--muted); margin-top:.2rem}
.bizitem__nums{display:flex; gap:1.2rem; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line); font-size:.8rem; color:var(--muted)}
.bizitem__nums b{display:block; font-size:1.2rem; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.3}
.bizitem__foot{padding:.9rem 1.2rem; border-top:1px solid var(--line); background:var(--bg-muted); display:flex; gap:.5rem; flex-wrap:wrap}

/* 棒グラフ */
.chart{display:flex; align-items:flex-end; gap:.5rem; height:170px; padding-top:.5rem}
.chart__col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%}
.chart__bar{display:block; width:100%; background:var(--teal); min-height:2px}
.chart__col:hover .chart__bar{background:var(--accent)}
.chart__label{font-size:.72rem; color:var(--muted); margin-top:.4rem; font-variant-numeric:tabular-nums}
.chart__value{font-size:.75rem; color:var(--navy); font-weight:700; font-variant-numeric:tabular-nums}

.detail{display:grid; grid-template-columns:1fr 330px; gap:1.6rem; align-items:start}
.deflist__row{display:grid; grid-template-columns:7rem 1fr; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); font-size:.9rem}
.deflist__row:last-child{border-bottom:none}
.deflist__row dt{color:var(--muted)}
.deflist__row dd{font-weight:500}
.actionlist{display:grid; gap:.9rem}
.alert{border:1px solid var(--line-strong); background:var(--bg-muted); padding:1rem 1.2rem; font-size:.86rem; color:var(--muted)}
.alert--danger{background:var(--danger-pale); border-color:var(--danger); color:var(--danger)}
.alert--ok{background:var(--ok-pale); border-color:var(--ok); color:var(--ok)}
.alert--accent{background:var(--accent-pale); border-color:var(--accent); color:var(--accent-dark)}
.alert a{font-weight:700; border-bottom:1px solid currentColor}

.runbox{border:1px solid var(--navy); background:#fff; margin-bottom:1.8rem}
.runbox__head{background:var(--navy); color:#fff; padding:1rem 1.4rem; font-weight:700; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* 応募のやりとり（履歴） */
.timeline{border-left:2px solid var(--line); padding-left:1.2rem; display:grid; gap:1.1rem}
.timeline__item{position:relative; font-size:.87rem}
.timeline__item::before{content:""; position:absolute; left:-1.63rem; top:.55rem; width:9px; height:9px; background:var(--teal)}
.timeline__meta{color:var(--muted); font-size:.78rem}

.msgbox{border:1px solid var(--line); background:var(--bg-muted); padding:1.1rem 1.3rem; font-size:.9rem; white-space:pre-wrap; line-height:1.9}

/* ===========================================================
   フッター
   =========================================================== */
.foot{background:var(--navy-dark); color:rgba(255,255,255,.7); padding:2.6rem 0 1.6rem; font-size:.85rem}
.foot__grid{display:flex; gap:2rem; justify-content:space-between; flex-wrap:wrap}
.foot__nav{display:flex; gap:1.4rem; flex-wrap:wrap}
.foot__bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:1.8rem; padding-top:1.2rem; font-size:.76rem; color:rgba(255,255,255,.5); line-height:1.9}

/* ===========================================================
   ログイン画面
   =========================================================== */
.login{
  min-height:calc(100vh - 40px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 1rem;
  background:var(--bg-muted);
}
.login__box{width:min(440px, 100%)}
.login__head{
  background:var(--navy);
  color:#fff;
  padding:1.8rem 1.6rem 1.6rem;
  text-align:center;
  border:1px solid var(--navy);
  border-bottom:none;
}
.login__eyebrow{font-size:.7rem; font-weight:700; letter-spacing:.22em; color:var(--accent)}
.login__site{font-size:.85rem; color:rgba(255,255,255,.75); margin-top:.35rem}
.login__ttl{font-size:1.2rem; font-weight:700; margin-top:.5rem}
.login__body{
  background:#fff;
  border:1px solid var(--line);
  border-top:none;
  padding:1.8rem 1.6rem;
}
.login__demo{
  margin-top:1.6rem;
  padding:1rem 1.1rem;
  border:1px dashed var(--line-strong);
  background:var(--bg-muted);
  font-size:.85rem;
  color:var(--muted);
}
.login__demo code{
  background:#fff;
  border:1px solid var(--line);
  padding:.05rem .35rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--navy);
}
.login__accounts{display:grid; gap:.4rem; margin-top:.8rem}
.login__accounts button{
  text-align:left;
  border:1px solid var(--line);
  background:#fff;
  padding:.5rem .7rem;
  font-size:.82rem;
  font-family:inherit;
  color:var(--text);
  cursor:pointer;
}
.login__accounts button:hover{border-color:var(--navy); background:var(--teal-pale)}
.login__accounts b{color:var(--navy)}
.login__back{margin-top:1.2rem; text-align:center; font-size:.85rem}
.login__back a{color:var(--navy); font-weight:700}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:1080px){
  .searchlayout{grid-template-columns:240px 1fr; gap:1.4rem}
  .jobcard__thumb{width:140px}
}

@media (max-width:980px){
  .fgrid{grid-template-columns:repeat(2, 1fr)}
  .screens{grid-template-columns:1fr 1fr}
  .pipe{grid-template-columns:repeat(2, 1fr)}
  .linkgrid{grid-template-columns:repeat(2, 1fr)}
  .site-nav{display:none}
  .hamburger{display:inline-flex}
  .site-head__cta{margin-left:auto; flex-shrink:0}
  /* ロゴとボタンは1行に収める（幅が足りないと1文字ずつ折り返してしまう） */
  .site-logo{white-space:nowrap}
  .site-head__cta .btn{white-space:nowrap}
  /* 説明ページのヘッダー。横並びのままだと文字が縦に潰れるので、幅が足りなければ2段にする */
  .lp-head__in{flex-wrap:wrap; gap:.7rem 1.2rem}
  .lp-head__nav{flex-wrap:wrap; gap:.7rem 1.2rem; font-size:.85rem}
  .lp-head__nav a{white-space:nowrap}
  .searchbox__grid{grid-template-columns:1fr 1fr}
  .searchlayout{grid-template-columns:1fr}
  .filter{position:static}
  .filter__body{max-height:none}
  /* 絞り込みが1カラムになると本体が縦に長くなり、sticky の検索ボタンが中身に重なる */
  .filter__foot{position:static}
  .layout2{grid-template-columns:1fr}
  .detail2{grid-template-columns:1fr}
  .applybox, .sidejob{position:static}
  .stats{grid-template-columns:repeat(2, 1fr)}
  .detail{grid-template-columns:1fr}
  .cols2, .cols2--wide{grid-template-columns:1fr}
  .bizgrid{grid-template-columns:repeat(2, 1fr)}
  .tree__row{grid-template-columns:1fr; gap:.6rem}
  .app{grid-template-columns:1fr}
  .app-side{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.9rem 1rem}
  .app-side__logo{padding:0 1rem 0 0; border-bottom:none}
  .app-nav{display:flex; flex-wrap:wrap; padding:0}
  .app-nav a{padding:.45rem .8rem; border-left:none; border-bottom:3px solid transparent}
  .app-nav a.is-active{border-left:none; border-bottom-color:var(--accent)}
  .app-side__foot{display:none}
  .app-body{padding:1.2rem}
}

@media (max-width:640px){
  body{font-size:14.5px}
  .sec{padding:3rem 0}
  .sec--tight{padding:2.4rem 0}
  .sec-head{margin-bottom:1.6rem}
  .fgrid{grid-template-columns:1fr}
  .screens{grid-template-columns:1fr}
  .pipe{grid-template-columns:1fr}
  .plus{grid-template-columns:1fr}
  .linkgrid{grid-template-columns:1fr}
  .searchbox__grid{grid-template-columns:1fr}
  .pick--2{grid-template-columns:1fr}
  .field-2, .field-3{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .bizgrid{grid-template-columns:1fr}
  .steps{flex-direction:column}
  .steps li{border-right:none; border-bottom:1px solid var(--line); text-align:left; padding-left:1rem}
  .steps li:last-child{border-bottom:none}
  .dl__row, .infolist__row, .recap__row, .deflist__row{grid-template-columns:1fr; gap:.2rem}
  .lp-hero__in{padding:3.4rem 0}
  .lp-hero__meta{gap:1.4rem}
  .code__value{font-size:1.2rem; letter-spacing:.04em}
  .chart{height:130px; gap:.25rem}

  /* iOSは16px未満の入力欄にふれると画面を勝手に拡大する。拡大されたままになると
     レイアウトが崩れて見えるので、SPでは入力欄だけ16pxにする */
  .field input, .field select, .field textarea,
  .keywordrow input, .filter input, .toolbar input, .toolbar select{font-size:16px}

  /* 横幅が狭いぶん、箱の左右の余白を詰める */
  .searchbox__head, .filter__head, .filter__foot, .applybox__foot{padding-left:1rem; padding-right:1rem}
  .searchbox__body{padding:1.2rem 1rem}
  .filter__block{padding:.9rem 1rem}
  .applybox__body, .bizcard__body, .minicard, .msgbox, .mailcard__body{padding:1.1rem 1rem}
  .panel__head, .panel__foot, .card__head{padding:.9rem 1rem}
  .panel__body, .card__body:not(.card__body--flush){padding:1.2rem 1rem}
  .recap__row{padding:.8rem 1rem}
  .app-head, .app-body{padding:1rem}
  .fcard{padding:1.5rem 1.2rem}
  .pipe__step{padding:1.3rem 1.1rem}
  .plus__item{padding:1.2rem 1.1rem}
  .login__head, .login__body{padding:1.5rem 1.2rem}
  .empty{padding:2.6rem 1.2rem}
  .done{padding:2.4rem 1.2rem}
  .code{padding:1rem 1.3rem}

  /* ボタンは縦に積んで幅いっぱいにする（横並びのままだと文字が途中で折り返す） */
  .searchbox__foot .btn, .done__btns .btn, .lp-hero__btns .btn{width:100%}
  .done__btns, .lp-hero__btns{flex-direction:column}
  .searchbox__foot{margin-top:1rem}
  .btn--lg{padding:.95rem 1.2rem; font-size:.98rem}

  /* 求人カード */
  .jobcard__head{padding:.7rem 1rem; gap:.35rem .6rem}
  .jobcard__biz{flex:1 0 100%}          /* 事業所名は1行使い、エリア・新着・掲載日を次の行にそろえる */
  .jobcard__body{flex-direction:column; gap:1rem; padding:1.1rem 1rem}
  .jobcard__thumb{width:100%}
  .jobcard__meta div{grid-template-columns:4.6rem 1fr; gap:.5rem}
  .jobcard__foot{padding:.9rem 1rem}
  .jobcard__btns{width:100%; margin-left:0; flex-direction:column; gap:.5rem}
  .jobcard__btns .btn{width:100%}

  /* 並び替え。3つを等分し、ラベルは折り返さない */
  .result-head{gap:.7rem}
  .sortnav{width:100%}
  .sortnav a{flex:1 1 0; text-align:center; white-space:nowrap; padding:.45rem .35rem; font-size:.78rem}

  /* タブ。1pxのすきまで罫線を見せる作りは、折り返すと行末に灰色の余りが出る */
  .tabnav{background:none; border:none; gap:.4rem; margin-bottom:1.2rem}
  .tabnav a{border:1px solid var(--line)}
  .tabnav a.is-active{border-color:var(--navy)}

  .jobhead{padding:1.6rem 0}
  .applybox__tel{font-size:1.35rem; white-space:nowrap}
  .cta-band{padding:2.6rem 0}
  .cta-band__in{gap:1.4rem}
}

@media (max-width:380px){
  .applybox__tel{font-size:1.2rem}
  .btn{padding:.8rem 1rem}
  .btn--sm{padding:.5rem .7rem}
}