@charset "UTF-8";
/* ============================================================
   nang.jp Jobs — ミッドナイト＆サンド
   掲載求人はホテル・宿泊が最多のため、落ち着いた紺を基調に、
   金額や応募など「決める場所」だけを真鍮色で示す。
   ============================================================ */

:root{
  /* 基調 */
  --navy:        #1B2B4A;
  --navy-dark:   #111D33;
  --navy-soft:   #2C3E62;
  --navy-tint:   #ECEFF5;
  /* アクセント（金額・応募） */
  --sand:        #C99A5B;
  --sand-dark:   #9A7038;
  --sand-tint:   #FBF3E7;
  /* 地と文字 */
  --bg:          #F4F6F9;
  --surface:     #FFFFFF;
  --ink:         #131A26;
  --ink-2:       #3B4657;
  --muted:       #6C7787;
  --line:        #E2E7ED;
  --line-2:      #CBD3DD;
  /* 状態 */
  --ok:          #1F7A4D;
  --ok-tint:     #E7F3EC;

  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 1px 2px rgba(19,26,38,.04), 0 6px 20px rgba(19,26,38,.06);
  --shadow-lift: 0 2px 4px rgba(19,26,38,.06), 0 12px 28px rgba(19,26,38,.10);

  --font: "Hiragino Sans", "HiraginoSans-W3", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", YuGothic, "Noto Sans JP", "Meiryo", system-ui, sans-serif;
  --font-num: "Helvetica Neue", Arial, "Hiragino Sans", sans-serif;

  --wrap: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }
a{ color:var(--navy); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--sand-dark); outline-offset:2px; border-radius:3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 20px; }
@media (max-width:600px){ .wrap{ padding:0 14px; } }

/* 画面には出さず、読み上げソフトにだけ伝えるテキスト。
   WordPress 標準のCSSを読み込んでいないため、テーマ側で定義する。 */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%); border:0;
}
.screen-reader-text:focus{
  position:static !important; width:auto; height:auto; margin:0;
  clip:auto; clip-path:none; white-space:normal;
}

/* ビルマ文字は記号が上下に積み重なるため、行高を広めに確保する */
:lang(my), .my{ line-height:2.1; }

/* ============================================================
   ヘッダー
   ============================================================ */
/* ハンバーガーメニューを置く以上、ヘッダーは常に手の届く位置に置く。
   どこまでスクロールしてもメニューと「求人をさがす」に戻れるようにする。 */
.site-header{
  background:var(--navy);
  color:#fff;
  border-bottom:3px solid var(--sand);
  position:sticky; top:0; z-index:100;
}
.site-header__inner{
  display:flex; align-items:center; gap:20px;
  min-height:62px; padding-top:8px; padding-bottom:8px;
}
.site-logo{
  font-size:19px; font-weight:700; letter-spacing:.01em;
  color:#fff; text-decoration:none; display:inline-flex; align-items:baseline; gap:7px;
}
.site-logo:hover{ text-decoration:none; opacity:.9; }
.site-logo .sub{ font-size:13px; font-weight:400; color:var(--sand); letter-spacing:.06em; }

.site-nav{ margin-left:auto; }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:22px; }
.site-nav a{ color:rgba(255,255,255,.88); font-size:13.5px; text-decoration:none; }
.site-nav a:hover{ color:#fff; text-decoration:none; }

.nav-toggle{
  display:none; margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.35);
  color:#fff; border-radius:var(--radius-sm); width:38px; height:38px; font-size:17px;
  cursor:pointer; line-height:1;
}
@media (max-width:760px){
  .nav-toggle{ display:block; }
  .site-nav{
    display:none; width:100%; margin:0;
    border-top:1px solid rgba(255,255,255,.16); padding:10px 0 4px;
  }
  .site-nav.is-open{ display:block; }
  .site-nav ul{ flex-direction:column; align-items:flex-start; gap:2px; }
  .site-nav a{ display:block; padding:9px 2px; }
  .site-header__inner{ flex-wrap:wrap; }
}

/* ============================================================
   検索バー
   ============================================================ */
.searchbar{ background:var(--navy-dark); padding:18px 0 20px; }
.searchbar form{ display:flex; gap:9px; }
.searchbar input[type="search"],
.searchbar input[type="text"]{
  flex:1; min-width:0; font-family:inherit; font-size:15px;
  padding:12px 15px; border:1px solid transparent; border-radius:var(--radius-sm);
  background:#fff; color:var(--ink);
}
.searchbar input::placeholder{ color:#96A0AE; }
.searchbar button{
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  padding:12px 28px; border:none; border-radius:var(--radius-sm);
  background:var(--sand); color:#2A1B06;
}
.searchbar button:hover{ background:#D6A868; }
.searchbar .hint{ margin:9px 0 0; font-size:12.5px; color:rgba(255,255,255,.62); }

/* ============================================================
   本体レイアウト
   ============================================================ */
/* グリッドの子は既定で「中身より小さくならない」ため、
   長い住所やミャンマー語の連続文字が幅を押し広げて横スクロールが出る。
   minmax(0,1fr) と min-width:0 で、必ず親の幅に収まるようにする。 */
/* ⚠️ .wrap と同じ要素に付けるクラスでは padding ショートハンドを使わないこと。
   .wrap の左右余白（0 14px）を上書きして 0 にしてしまい、
   スマホでコンテンツが画面端に張り付く。上下だけ指定する。 */
.layout{
  display:grid; grid-template-columns:232px minmax(0,1fr); gap:26px;
  padding-top:26px; padding-bottom:48px; align-items:start;
}
.layout > *{ min-width:0; }
@media (max-width:900px){
  .layout{
    grid-template-columns:minmax(0,1fr); gap:14px;
    padding-top:16px; padding-bottom:40px;
  }
}

/* --- 絞り込み --- */
/* PCではサイドバーも追従させる。ヘッダーが固定なので、その下に来るよう余白を取る */
.filter{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:6px 16px 14px;
  position:sticky; top:82px; z-index:10;
}

/* 絞り込みの開閉
   チェックボックスとラベルで開閉する。JavaScript が無効でも動く。
   PC：常に開いた状態にし、開閉の見出しは出さない
   スマホ：既定は閉じた状態にして、求人がすぐ目に入るようにする */
.filter__toggle{
  position:absolute; width:1px; height:1px; opacity:0; margin:0;
}
.filter__summary{
  display:none; cursor:pointer; user-select:none;
  align-items:center; gap:9px; padding:13px 2px; font-size:14px; font-weight:700;
}
.filter__summary::before{
  content:""; width:8px; height:8px; flex:none; margin-left:2px;
  border-right:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
}
.filter__toggle:checked ~ .filter__summary::before,
.filter-open .filter__toggle:not(:checked) ~ .filter__summary::before{ transform:rotate(-135deg) translate(-1px,-1px); }
.filter__toggle:focus-visible ~ .filter__summary{ outline:2px solid var(--sand-dark); outline-offset:2px; }
.filter__summary-on{
  font-size:11.5px; font-weight:700; color:var(--sand-dark);
  background:var(--sand-tint); border-radius:999px; padding:2px 10px;
}

@media (max-width:900px){
  .filter{ position:static; padding:0 16px 4px; }
  .filter__summary{ display:flex; min-height:48px; }
  .filter__body{ display:none; }
  .filter__toggle:checked ~ .filter__body{ display:block; padding-bottom:12px; }
  /* 前回開いたままにしていた場合は、読み込み直後から開いた状態で見せる。
     直後に JavaScript がチェックボックス側を合わせるので、
     この指定は最初の一瞬だけ効く（ちらつき防止） */
  .filter-open .filter__toggle:not(:checked) ~ .filter__body{ display:block; padding-bottom:12px; }
  .filter__clear{ display:inline-block; min-height:44px; line-height:44px; }
}

.filter__group{ padding:12px 0; border-bottom:1px solid var(--line); }
.filter__group:last-child{ border-bottom:none; }
.filter__title{
  margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  color:var(--muted);
}
/* --- 在留資格：選択肢が2つなので横並びのボタンにする --------------------
   1つしか選べないので、チェックボックスの見た目は使わない（複数選択に見えるため）。
   選択中は塗りつぶしで示す。 */
.segmented{
  display:flex; flex-wrap:wrap; gap:6px;
}
/* 基本値はスマホ向け（指で押せる 44px）。PCだけ少し小さくする。
   逆にすると、あとから書いた基本値がスマホ用の指定を打ち消してしまう。 */
.segmented__item{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  padding:8px 16px; border:1px solid var(--line-2); border-radius:999px;
  font-size:14px; color:var(--ink-2); text-decoration:none; background:var(--surface);
  transition:border-color .14s, background .14s, color .14s;
}
@media (min-width:901px){
  .segmented__item{ min-height:38px; padding:6px 14px; font-size:13.5px; }
}
.segmented__item:hover{ border-color:var(--navy); text-decoration:none; }
.segmented__item.is-active{
  background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700;
}
.segmented__count{
  font-family:var(--font-num); font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.segmented__item.is-active .segmented__count{ color:rgba(255,255,255,.78); }

/* --- 勤務地：14都府県あるのでプルダウン（iOSでは標準のホイール） ------- */
.filter__form{ display:flex; gap:8px; align-items:center; }
.filter__select{
  flex:1; min-width:0; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--radius-sm); padding:10px 34px 10px 12px; min-height:44px;
  appearance:none;
  /* 右端の下向き三角。画像を読み込まずに済むよう背景で描く */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.filter__select:focus-visible{ outline:2px solid var(--sand-dark); outline-offset:1px; }
.filter__go{
  flex:none; font-family:inherit; font-size:14px; cursor:pointer;
  min-height:44px; padding:0 16px; border:1px solid var(--navy);
  background:var(--navy); color:#fff; border-radius:var(--radius-sm);
}
/* JavaScript が使えるときは、選んだ瞬間に切り替わるのでボタンは隠す */
.js .filter__go{ display:none; }

.filter__clear{
  display:inline-block; margin-top:12px; font-size:12.5px; color:var(--muted);
}

/* --- 結果ヘッダ --- */
.results__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  margin-bottom:12px; min-width:0;
}
.results__count{ font-size:14px; color:var(--ink-2); }
.results__count b{ font-family:var(--font-num); font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums; }
.results__order{ margin-left:auto; font-size:12.5px; color:var(--muted); flex:none; }

.active-filters{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.active-filters .pill{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
  background:var(--navy-tint); color:var(--navy); border-radius:999px; padding:4px 12px;
}
.active-filters .pill a{ color:var(--navy-soft); font-weight:700; text-decoration:none; }

/* ============================================================
   求人カード
   ============================================================ */
/* まずスマホの並び（上から：バッジ → 求人名 → 年収 → 職種 → 勤務地）。
   年収が最も知りたい情報なので、求人名のすぐ下に置く。 */
.job-card{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--navy); border-radius:var(--radius);
  padding:15px 16px; margin-bottom:11px; box-shadow:var(--shadow);
  min-width:0; overflow-wrap:anywhere;
}

.job-card__badges{ display:flex; flex-wrap:wrap; gap:5px; }
.badge{ margin-right:0; }

.job-card__title{
  margin:9px 0 0; font-size:16px; font-weight:700; line-height:1.55; color:var(--ink);
  overflow-wrap:anywhere;
}
.job-card__title a{ color:inherit; text-decoration:none; }
.job-card__title a:hover{ color:var(--navy-soft); text-decoration:underline; }
/* 指で押しやすいよう、カード全体をタップ領域にする。
   カード内に他のリンクは置かないこと（置くとこの overlay に隠れる）。 */
.job-card{ position:relative; }
.job-card__title a::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
}
.job-card:focus-within{ box-shadow:0 0 0 2px var(--sand-dark); }

.job-card__pay{ margin-top:10px; }
.job-card__occ{ margin:9px 0 0; font-size:13px; color:var(--ink-2); overflow-wrap:anywhere; }
.job-card__meta{
  display:flex; flex-wrap:wrap; gap:3px 14px; margin-top:7px;
  font-size:12.5px; color:var(--muted); line-height:1.7;
}
.job-card__meta span{ overflow-wrap:anywhere; }

.salary{
  font-family:var(--font-num); font-size:19px; font-weight:700; color:var(--sand-dark);
  font-variant-numeric:tabular-nums; line-height:1.35; overflow-wrap:anywhere;
}
.salary--none{ font-size:13px; font-weight:400; color:var(--muted); }
.job-card__sub{ font-size:11.5px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }

/* PC：年収を右列へ。求人名と条件は左列にまとめる */
@media (min-width:641px){
  .job-card{
    display:grid; column-gap:20px; padding:17px 20px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "badges pay"
      "title  pay"
      "occ    pay"
      "meta   pay";
    transition:box-shadow .16s ease, transform .16s ease;
  }
  .job-card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-1px); }
  .job-card__badges{ grid-area:badges; }
  .job-card__title{ grid-area:title; }
  .job-card__pay{ grid-area:pay; text-align:right; margin-top:0; max-width:210px; }
  .job-card__occ{ grid-area:occ; }
  .job-card__meta{ grid-area:meta; }
  .salary{ font-size:18px; }
}

/* --- バッジ --- */
.badge{
  display:inline-block; font-size:11.5px; font-weight:700; line-height:1.7;
  padding:1px 9px; border-radius:4px; margin-right:5px;
  background:var(--navy-tint); color:var(--navy);
}
.badge--status{ background:var(--ok-tint); color:var(--ok); }
/* 職種。在留資格（濃い青）と区別できるよう、枠線だけの控えめな見た目にする */
.badge--job{ background:transparent; border:1px solid var(--line-2); color:var(--ink-2); }
.badge--pref{ background:var(--sand-tint); color:var(--sand-dark); }

/* --- 結果なし --- */
.no-results{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:40px 24px; text-align:center; color:var(--ink-2);
}
.no-results p{ margin:0 0 6px; }

/* ============================================================
   ページネーション
   ============================================================ */
.pagination{ margin-top:22px; }
.pagination .page-numbers{
  display:inline-block; min-width:38px; padding:8px 11px; margin:0 3px 6px 0;
  text-align:center; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink-2); font-size:13.5px; text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.pagination .page-numbers:hover{ border-color:var(--navy); text-decoration:none; }
.pagination .page-numbers.current{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700; }
.pagination .dots{ border:none; background:transparent; }

/* ============================================================
   求人詳細
   ============================================================ */
/* .wrap と同じ要素に付くため、上下だけ指定する（上のコメント参照） */
.job-detail{ padding-top:22px; padding-bottom:48px; }
/* パンくず。リンクは指で押されるので、文字は小さいままタップ領域だけ広げる */
.breadcrumb{
  font-size:12.5px; color:var(--muted); margin-bottom:8px;
  display:flex; align-items:center; flex-wrap:wrap; gap:0 2px; min-height:44px;
}
.breadcrumb a{
  color:var(--muted); display:inline-flex; align-items:center;
  min-height:44px; padding-right:4px;
}

/* 見出し部（基本値はスマホ向け） */
.job-head{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px 20px; box-shadow:var(--shadow);
}
.job-head .badge{ margin-right:5px; }
.job-head__title{
  margin:10px 0 0; font-size:20px; font-weight:700; line-height:1.55; color:var(--ink);
  overflow-wrap:anywhere; text-wrap:balance;
}
.job-head__occ{ margin:9px 0 0; font-size:14px; color:var(--ink-2); line-height:1.7; overflow-wrap:anywhere; }
.job-head__dates{ margin:9px 0 0; font-size:12px; color:var(--muted); line-height:1.7; }
@media (min-width:641px){
  .job-head{ padding:24px 26px; }
  .job-head__title{ font-size:22px; line-height:1.5; }
}

/* 要約
   年収を主役にし、他の条件は小さなタグにまとめる。
   フィールドには130文字を超える値（休日・休暇など）が入っており、
   表形式で並べると1項目だけ極端に高くなって崩れる。
   タグには短く整形できた値だけを載せ、全文は下の項目一覧で読ませる。 */
.job-summary{
  margin-top:16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px 15px;
}
.job-summary__pay{ display:flex; flex-direction:column; }
.job-summary__k{ font-size:11.5px; color:var(--muted); letter-spacing:.04em; }
.job-summary__v{
  font-family:var(--font-num); font-size:26px; font-weight:700; color:var(--sand-dark);
  line-height:1.3; margin-top:2px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
/* ミャンマー語などで長くなる求人は、大きすぎると何行にもなるため文字を落とす */
.job-summary__v.is-long{ font-family:var(--font); font-size:17px; line-height:1.65; }
.job-summary__v.is-none{ font-family:var(--font); font-size:14px; font-weight:400; color:var(--muted); }

.job-chips{
  list-style:none; margin:12px 0 0; padding:12px 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:7px;
}
.job-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  line-height:1.6;
}
.job-chip__k{ color:var(--muted); font-size:11.5px; }
.job-chip b{ font-weight:700; }
.icon-pin{ width:12px; height:12px; flex:none; opacity:.5; }

/* PCは年収とタグを横に並べる */
@media (min-width:641px){
  .job-summary{
    margin-top:18px; padding:16px 20px;
    display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  }
  .job-summary__pay{ flex:none; }
  .job-chips{ margin:0; padding:0; border-top:none; flex:1; min-width:240px; }
}

/* 応募
   スマホでは縦積みにして、ボタンを画面幅いっぱいにする。
   横並びのままだと説明文が語の途中で折り返され、ボタンも押しづらい。 */
.apply{
  display:flex; flex-direction:column; align-items:stretch; gap:13px;
  margin-top:18px; padding:18px 18px 20px;
  background:var(--navy); border-radius:var(--radius); color:#fff;
}
.apply__text{ min-width:0; }
.apply__text strong{ display:block; font-size:15.5px; line-height:1.6; }
.apply__text span{ display:block; font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.7; margin-top:2px; }
.apply__btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--sand); color:#2A1B06; font-weight:700; font-size:16px;
  padding:14px 22px; border-radius:var(--radius-sm); text-decoration:none;
  min-height:52px; width:100%;
}
.apply__btn:hover{ background:#D6A868; text-decoration:none; }
.apply__btn:active{ background:#B98D4E; }

@media (min-width:641px){
  .apply{ flex-direction:row; align-items:center; gap:16px; padding:18px 20px; }
  .apply__text{ flex:1; }
  .apply__btn{ width:auto; flex:none; font-size:15px; min-height:48px; padding:13px 26px; }
}
/* ボタン内のアイコン。文字サイズに追随させ、色は文字色を継承する */
.icon-fb{ width:1.25em; height:1.25em; flex:none; display:block; }

/* 項目一覧
   スマホでは項目ごとに独立したカードにして間隔を空ける。
   ひと続きの表にすると「業務内容」と「応募資格」の切れ目が分からなくなるため。
   さらに見出しを sticky にして、長い項目を読んでいる間も
   「いま何の情報を読んでいるか」が画面上に残るようにする。

   ⚠️ 祖先に overflow:hidden があると position:sticky が効かなくなる。
      角丸は overflow ではなく border-radius の個別指定で作ること。 */
.job-body{ margin-top:18px; }
.job-body__lead{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 18px; margin-bottom:12px;
  font-size:14px; color:var(--ink-2); line-height:1.95;
}
/* 1項目 = 1カード（基本値はスマホ向け） */
.job-row{
  display:block; margin-bottom:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.job-row:last-child{ margin-bottom:0; }

.job-row__label{
  position:sticky; top:65px; z-index:5;         /* 65px = 固定ヘッダーの高さ */
  padding:11px 16px 11px 18px;
  background:var(--navy-tint); color:var(--navy);
  font-size:12.5px; font-weight:700; line-height:1.6; letter-spacing:.04em;
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  /* 左の真鍮色の線で見出しだと分かるようにし、下辺の影で本文と切り分ける */
  box-shadow: inset 3px 0 0 var(--sand), 0 1px 0 var(--line);
}
.job-row__value{
  padding:15px 16px 17px; font-size:14px; color:var(--ink-2);
  line-height:1.95; overflow-wrap:anywhere;
}
.job-row__value p{ margin:0 0 .9em; }
.job-row__value p:last-child{ margin-bottom:0; }

/* PCは見出しを左列に置く。列そのものが本文と同じ高さで残るため sticky は不要 */
@media (min-width:641px){
  .job-body{ margin-top:20px; }
  .job-body__lead{ padding:18px 22px; margin-bottom:14px; line-height:1.85; }
  .job-row{ display:grid; grid-template-columns:172px minmax(0,1fr); margin-bottom:10px; }
  .job-row__label{
    position:static; padding:15px 18px; font-size:13px;
    border-radius:calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px);
    box-shadow: inset 3px 0 0 var(--sand);
  }
  .job-row__value{ padding:15px 20px; line-height:1.85; }
}

.job-back{ margin-top:26px; }
.job-back a{
  display:inline-flex; align-items:center; gap:8px; font-size:14px;
  color:var(--navy); border:1px solid var(--line-2); background:var(--surface);
  border-radius:var(--radius-sm); padding:10px 18px; text-decoration:none;
}
.job-back a:hover{ border-color:var(--navy); text-decoration:none; }

/* ============================================================
   固定ページ
   ============================================================ */
.page-content{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 34px; margin:26px 0 48px; box-shadow:var(--shadow);
}
.page-content h1{ margin:0 0 18px; font-size:24px; line-height:1.5; }
.page-content h2{ margin:32px 0 12px; font-size:19px; }
.page-content p{ margin:0 0 1.1em; color:var(--ink-2); }
@media (max-width:600px){ .page-content{ padding:22px 18px; } }

/* ============================================================
   フッター
   ============================================================ */
.site-footer{
  background:var(--navy-dark); color:rgba(255,255,255,.72);
  padding:30px 0; font-size:13px; margin-top:auto;
}
.site-footer__inner{ display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; }
.site-footer a{ color:rgba(255,255,255,.86); }
.site-footer .copy{ margin-left:auto; font-size:12.5px; color:rgba(255,255,255,.5); }
@media (max-width:600px){ .site-footer .copy{ margin-left:0; } }

body{ display:flex; flex-direction:column; min-height:100vh; }
.site-main{ flex:1; }

/* ============================================================
   スマホでのタップ領域
   訪問者の半数以上がスマホのため、押せるものは 44px 以上を確保する
   ============================================================ */
@media (max-width:760px){
  .site-nav a{ padding:12px 2px; min-height:44px; display:flex; align-items:center; }
  .nav-toggle{ width:44px; height:44px; font-size:19px; }
  .site-logo{ min-height:44px; align-items:center; }
  .pagination .page-numbers{
    min-width:44px; min-height:44px; padding:0 12px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .searchbar input[type="search"]{ min-height:48px; font-size:16px; } /* 16px 未満だと iOS が拡大する */
  .searchbar button{ min-height:48px; padding:0 20px; }
  .active-filters .pill{ min-height:36px; padding:6px 14px; }
  .active-filters .pill a{ padding:0 4px; }
  .job-back a{ min-height:48px; }
  .site-footer a{ display:inline-flex; align-items:center; min-height:44px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}