/* 案件郵便 現代版（2004年版が見づらい人のための切り替え）。同じ HTML を、今どきの落ち着いた見た目で出す。
   2004年版の飾り（点滅・電光掲示板・架空の広告・記号の見出し）は出さない。文字と地の明暗比は 4.5:1 以上 */

:root {
  --ink: #1a1a1c;
  --sub: #555560;      /* 白地と 7.4:1 */
  --line: #d9d9e0;
  --bg: #f6f7f9;
  --primary: #1f4fd1;  /* 白地と 6.6:1 */
  --primary-dark: #163a9c;
  --ok: #1d6b3a;
  --ng: #a31b1b;
  --warn-bg: #fff8e6;
  --radius: 10px;
}
* { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Noto Sans JP。読み込めない環境では、端末の標準の和文書体（ヒラギノ角ゴ・游ゴシック）に落ちる */
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-dark); }
:focus-visible { outline: 3px solid #ffb000; outline-offset: 2px; }

.shell { display: block; }
#wrap { max-width: 1040px; margin: 0 auto; }
#top { display: block; }

/* ヘッダー（現代版は _modern_header.html。2004年版の #banner は出さない） */
.retro-only { display: none; }
.mh { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line); }
.mh-in { max-width: 1040px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; gap: 24px; }
.mh-logo { font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.mh-nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mh-nav a { padding: 6px 12px; border-radius: 8px; color: var(--sub); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.mh-nav a:hover { background: var(--bg); color: var(--ink); }
.mh-nav a[aria-current="page"] { color: var(--primary-dark); background: #e8eefc; font-weight: 600; }
.mh-acct { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mh-retro { font-size: 13px; color: var(--sub); }
.mh-user { font-size: 13px; color: var(--sub); max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
#banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 14px 20px; background: #ffffff; border-bottom: 1px solid var(--line); }
#banner .logo { font-size: 20px; font-weight: 700; color: var(--ink); text-decoration: none; }
#banner .logo .stamp { display: none; }
#banner .catch { margin: 0; flex-basis: 100%; order: 3; font-size: 14px; color: var(--sub); }
#banner .catch b { color: inherit; font-weight: 600; }
#banner .who { font-size: 14px; color: var(--sub); text-align: right; }
#banner .who a { color: var(--primary); }
#ticker { display: none; }

/* 2段組 */
#cols { display: flex; flex-direction: column; gap: 24px; padding: 24px 20px; }
#menu { order: 2; }
#menu .box { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
#menu .box h2 { margin: 0; padding: 10px 14px; font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--sub); border-bottom: 1px solid var(--line); }
#menu ul { list-style: none; margin: 0; padding: 6px; }
#menu li a { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 14px; }
#menu li a:hover { background: var(--bg); }
#menu li.here a { background: #e8eefc; color: var(--primary-dark); font-weight: 600; }
#main { flex: 1; min-width: 0; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; }

h1 { font-size: 26px; line-height: 1.4; margin: 0 0 20px; }
h2 { font-size: 19px; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
h3 { font-size: 16px; margin: 20px 0 8px; }

/* 部品 */
button, .btn, input[type="submit"] {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
  min-height: 40px; padding: 7px 16px; border-radius: 8px; border: 1px solid var(--line); background: #ffffff; color: var(--ink);
}
button:hover, .btn:hover { background: var(--bg); }
.btn-go { background: var(--primary); border-color: var(--primary); color: #ffffff; }
.btn-go:hover, .btn-go:visited { background: var(--primary-dark); color: #ffffff; }
.btn-small { min-height: 32px; padding: 3px 10px; font-size: 13px; }
.btn-on { background: #e8eefc; border-color: var(--primary); color: var(--primary-dark); }
.btn-danger { background: var(--ng); border-color: var(--ng); color: #ffffff; }
.btn-donate { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.btn-donate:hover, .btn-donate:visited { background: #000000; color: #ffffff; }

input[type="text"], input:not([type]), input[type="file"], textarea, select {
  font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #b9b9c4; border-radius: 8px; background: #ffffff; max-width: 100%;
}

table.list { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; }
table.list th, table.list td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.list th { font-size: 13px; color: var(--sub); font-weight: 600; white-space: nowrap; }
table.list td.num { white-space: nowrap; text-align: right; }
table.form { width: 100%; border-collapse: collapse; }
table.form th { width: 10em; text-align: left; vertical-align: top; padding: 12px 12px 12px 0; font-weight: 600; font-size: 14px; color: var(--sub); border-bottom: 1px solid var(--line); }
table.form td { padding: 10px 0; border-bottom: 1px solid var(--line); }

.box-note, .box-ok, .box-ng { border-radius: 8px; padding: 12px 16px; margin: 14px 0; border: 1px solid; }
.box-note { background: var(--warn-bg); border-color: #f0d48a; }
.box-ok { background: #eaf6ee; border-color: #a7d7b6; color: var(--ok); }
.box-ng { background: #fdeeee; border-color: #f1b3b3; color: var(--ng); }
.small { font-size: 13px; color: var(--sub); }
.new { font-size: 11px; font-weight: 700; color: #ffffff; background: var(--ng); padding: 1px 6px; border-radius: 4px; }
.star { color: #8a5a00; }
.tag { display: inline-block; font-size: 12px; padding: 1px 8px; margin: 2px 4px 2px 0; border-radius: 999px; background: #eef1f6; }
.mark { font-size: 12px; padding: 1px 6px; border-radius: 4px; background: #eeeeee; }
.seg { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

ol.steps { display: flex; list-style: none; gap: 6px; padding: 0; margin: 0 0 20px; font-size: 13px; }
ol.steps li { flex: 1; text-align: center; padding: 6px 4px; border-radius: 6px; background: #eef1f6; color: var(--sub); }
ol.steps li.done { background: #e8eefc; color: var(--primary-dark); }
ol.steps li.now { background: var(--primary); color: #ffffff; font-weight: 600; }

.donate { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; font-size: 13px; }
.donate-title { margin: 0 0 6px; font-weight: 700; }
.donate-text { margin: 0 0 8px; color: var(--sub); }

.pager { margin: 16px 0; text-align: center; }
.pager a, .pager b { display: inline-block; min-width: 36px; padding: 4px 8px; margin: 0 2px; border-radius: 6px; border: 1px solid var(--line); text-decoration: none; }
.pager b { background: var(--primary); color: #ffffff; border-color: var(--primary); }

hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }
.totop { text-align: right; font-size: 13px; }
.right { text-align: right; }
.inline { display: inline; }
details summary { cursor: pointer; padding: 8px 0; }

#foot { max-width: 1040px; margin: 0 auto 24px; padding: 16px 20px; text-align: center; font-size: 13px; color: var(--sub); }
.modern-only { display: inline; }
#foot a { margin: 0 6px; }
.theme-switch a { font-size: 13px; }

@media (max-width: 860px) {
  #cols { padding: 12px; }
  .mh-in { height: auto; flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; }
  .mh-nav { order: 3; flex-basis: 100%; }
  .mh-acct { margin-left: auto; }
  #main { padding: 20px 16px; }
  table.list .wide-only { display: none; }
}

/* 問い合わせ先のメールアドレスの画像（templates/_contact.html） */
.contact-img { vertical-align: middle; max-width: 100%; height: auto; }

/* 希望条件の勤務地 */
fieldset.prefs { border: 1px solid #c8c8d0; margin: 6px 0; padding: 2px 8px 6px; }
fieldset.prefs legend { font-size: 12px; font-weight: bold; }
fieldset.prefs label { display: inline-block; margin-right: 10px; white-space: nowrap; }