/* =========================================================
   共通CSS（全ページ共通）
   デザイントークン＝色・余白・角丸などの「基準値」をここで定義。
   数値はモック画面から取得（求職者/医院＝ピンク×グレー）。
   運営側（青）は admin.css で上書きします。
   ========================================================= */
:root{
  /* 配色（トンマナ） */
  --bg:#F4F1F2; --card:#ffffff; --soft:#F5F1F3; --line:#E8E2E5;
  --tx:#2B2529; --tx2:#6E666B; --tx3:#A49CA0;
  --pink:#993556; --pinkTint:#FBEAF0; --pinkMid:#D4537E; --pinkBorder:#ED93B1;
  --sBg:#E6F5EC; --sTx:#1F8A54;   /* 成功（緑） */
  --wBg:#FDECEC; --wTx:#C0392B;   /* 警告（赤） */

  /* 余白スケール（これ以外の余白は使わない） */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;

  /* 角丸・フォント */
  --radius:14px; --radius-lg:24px;
  --fz:14px; --fz-sm:12.5px; --fz-lg:17px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:var(--fz); line-height:1.6;
}
a{color:var(--pink)}

/* 番号付きページャー（探す系・運営・コラム 共通。--pink は運営テーマで青に自動置換） */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:26px 0 4px}
.pager .pg{min-width:36px;height:36px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--tx);
  font-size:14px;font-weight:500;text-decoration:none}
.pager a.pg:hover{border-color:var(--pink);color:var(--pink)}
.pager .pg.cur{background:var(--pink);border-color:var(--pink);color:#fff}
.pager .pg.nav{padding:0 12px;color:var(--pink)}
.pager .pg.nav.off{color:var(--tx2);pointer-events:none}
.pager .pg.gap{border:none;background:none;color:var(--tx2);min-width:20px;font-weight:400}
.pager-total{text-align:center;margin:2px 0 0}
@media (max-width:520px){
  .pager.pager-lg .pg:not(.cur):not(.gap):not(.nav):not(.pg-edge){display:none}
  .pager .pg.nav .lbl{display:none}
  .pager .pg.nav{padding:0 10px}
}

.wrap{max-width:520px; margin:0 auto; padding:var(--sp5) var(--sp4) 60px}
.site-hd{padding:var(--sp3) 0}
.logo-txt{font-size:var(--fz-lg); font-weight:800; margin:0; color:var(--tx)}
.logo-txt .for{font-size:11px; font-weight:700; color:var(--pink); margin-left:4px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp5)}
.card h1{font-size:19px; margin:var(--sp3) 0 var(--sp2)}
.center{text-align:center}

.muted{color:var(--tx2)}
.small{font-size:var(--fz-sm)}

.pill{display:inline-block; font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px}
.pill.ok{background:var(--sBg); color:var(--sTx)}
.pill.warn{background:var(--wBg); color:var(--wTx)}
/* 入力中の連絡先警告（contact-warn.js が表示） */
.contact-warn{font-size:12px; color:var(--wTx); background:var(--wBg); border-radius:8px; padding:8px 10px; margin:8px 0 0; line-height:1.5}

.status{list-style:none; padding:0; margin:var(--sp4) 0 0; border-top:1px solid var(--line)}
.status li{display:flex; justify-content:space-between; gap:var(--sp3); padding:var(--sp3) 0; border-bottom:1px solid var(--line)}
.status li span{color:var(--tx2)}
.status li b{font-weight:600}

.btn{display:inline-block; background:var(--pink); color:#fff; text-decoration:none; padding:10px 18px; border-radius:20px; font-weight:600; margin-top:var(--sp3)}
/* 枠線ボタン（塗り .btn と同じ縦幅で並べる用。border分だけ縦paddingを1px減らす） */
.btn.line{background:none; border:1px solid var(--pink); color:var(--pink); padding:9px 16px}
/* 見出し行に並ぶボタンは上マージンを消して高さを揃える */
.ctitlerow .btn{margin-top:0}

.site-ft{text-align:center; margin-top:var(--sp5)}
code{background:var(--soft); padding:2px 6px; border-radius:6px; font-size:0.9em}

/* =========================================================
   共通UI部品（全画面で使う。個別CSSに置かないこと）
   ここに無いと「あの画面だけ装飾が当たらない」不具合になる。
   ========================================================= */

/* 通知バー（保存しました／エラー） */
.pmsg{border-radius:10px; padding:11px 14px; font-size:13px; font-weight:600; margin-bottom:var(--sp4)}
.pmsg.ok{background:var(--sBg); color:var(--sTx)}
.pmsg.err{background:var(--wBg); color:var(--wTx)}

/* 主ボタン（保存・送信） */
.psave{width:100%; background:var(--pink); color:#fff; border:none; border-radius:26px;
  font-size:15px; font-weight:700; padding:14px; cursor:pointer; margin-top:var(--sp4);
  box-shadow:0 8px 20px rgba(0,0,0,.14)}

/* 副ボタン（枠線） */
.btn-outline{display:inline-block; text-align:center; text-decoration:none; background:none;
  border:1px solid var(--pink); color:var(--pink); border-radius:22px; font-weight:700;
  font-size:14px; padding:11px 16px; cursor:pointer}
.btn-outline.sm{font-size:12px; padding:7px 14px}
.link.sm{font-size:12px; color:var(--pink); text-decoration:none}
/* <button> をテキストリンク風に見せる（枠・背景を消す） */
button.link{font-family:inherit; background:none; border:0; padding:0; cursor:pointer;
  color:var(--pink); text-decoration:none}
button.link:hover{text-decoration:underline}
button.link.danger{color:var(--wTx)}

/* カード内の見出し */
.jd-h2{font-size:14px; margin:0 0 10px}

/* ===== 全画面共通のヘッダー帯（ユーティリティバー） ===== */
.chrome-bar{background:var(--card); border-bottom:1px solid var(--line)}
.theme-admin .chrome-bar{background:var(--card)}
.chrome-in{max-width:1000px; margin:0 auto; padding:7px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.chrome-logo{display:inline-flex; align-items:flex-end; gap:4px; font-size:14px; font-weight:800; color:var(--tx); text-decoration:none; letter-spacing:-.01em; line-height:1}
.chrome-logo-img{height:19px; width:auto; display:block}
.theme-admin .chrome-logo-img{filter:none}
.chrome-logo .for{font-size:9.5px; font-weight:700; color:var(--pink); line-height:1; display:block}
.chrome-r{display:flex; align-items:center; gap:12px}
.chrome-seeker{font-size:11px; font-weight:700; color:var(--pink); text-decoration:none; white-space:nowrap}
.chrome-bell{font-size:14px; text-decoration:none; line-height:1}
.chrome-acct{font-size:11.5px; font-weight:700; color:var(--tx2); text-decoration:none; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chrome-ico{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; text-decoration:none; color:var(--tx2); white-space:nowrap; line-height:1; padding:6px 2px}
.chrome-ico-l{font-size:11.5px; font-weight:700}
.chrome-signup{font-size:11.5px; font-weight:800; color:#fff; background:var(--pink); text-decoration:none; padding:5px 12px; border-radius:20px; white-space:nowrap}
.chrome-signup:hover{background:var(--pinkDark,#7A2A45)}
.chrome-acct:hover,.chrome-seeker:hover,.chrome-ico:hover{color:var(--pink)}
/* 狭い画面ではアイコンのラベルを隠す（アイコンは残す） */
@media (max-width:560px){ .chrome-ico-l{display:none} .chrome-seeker{display:none} }

/* ===== 全画面共通フッター ===== */
.sitefoot{border-top:1px solid var(--line); background:var(--soft); margin-top:40px}
.sitefoot .in{max-width:1000px; margin:0 auto; padding:24px 20px}
.sitefoot .cta{display:inline-block; background:var(--pink); color:#fff; font-size:12.5px; font-weight:700; padding:10px 18px; border-radius:22px; text-decoration:none; margin-bottom:16px}
.sitefoot .logo{font-size:15px; font-weight:800; margin:0 0 12px; color:var(--tx)}
.sitefoot .logo .for{color:var(--pink); font-size:11px; margin-left:4px}
.sitefoot .links{display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:14px}
.sitefoot .links a{color:var(--tx2); font-size:12.5px; text-decoration:none; display:inline-block; padding:6px 2px}
.sitefoot .links a:hover{color:var(--pink)}
.sitefoot .seeker{display:inline-block; color:var(--pink); font-size:12px; text-decoration:none; font-weight:700; margin-bottom:14px}
.sitefoot .copy{font-size:11px; color:var(--tx2); margin:0; border-top:1px solid var(--line); padding-top:12px}