/* 案件郵便 — 2004年ごろの作法（docs/ui-spec.md の4章）。
   なつかしさは強めに、使いにくさは持ち込まない。文字と地の明暗比は 4.5:1 以上。
   外の書体・画像は読まない（nginx の CSP が自サイトだけを許す） */

:root {
  --blue: #2a56b0;        /* 白文字と 6.6:1 */
  --blue-dark: #1b3a7a;
  --sky: #e8f0ff;
  --sky-deep: #c9dafa;
  --orange: #ff9900;
  --orange-ink: #8a4b00;  /* 白地と 6.2:1 */
  --red: #cc0000;
  --ink: #222222;
  --gray: #5a5a5a;        /* 白地と 6.9:1 */
  --line: #8fa8d8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 12px 0 24px;
  background: #b8cdf0;
  background-image: repeating-linear-gradient(45deg, #b8cdf0 0 6px, #c4d6f4 6px 12px);
  color: var(--ink);
  font-family: "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 13px;
  line-height: 1.6;
}

a { color: #0033cc; }
a:visited { color: #663399; }
a:hover { color: var(--red); background: #ffffcc; }

#wrap {
  width: 760px;
  flex: none;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--blue-dark);
  box-shadow: 3px 3px 0 #7d97c9;
}

/* ── 看板 ── */
#banner {
  background: linear-gradient(to bottom, #3a68c8 0%, var(--blue) 55%, var(--blue-dark) 100%);
  color: #ffffff;
  padding: 10px 14px 8px;
  border-bottom: 3px solid var(--orange);
  position: relative;
}
#banner .logo {
  display: inline-block;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 2px 2px 0 #0f2550;
}
#banner .logo:hover { background: none; color: #ffffcc; }
#banner .logo .stamp {
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
  margin-left: 6px;
  padding: 0 4px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  transform: rotate(-8deg);
  letter-spacing: 0;
}
#banner .catch { margin: 2px 0 0; font-size: 12px; color: #ffffff; }
#banner .catch b { color: #ffe08a; }
#banner .who { position: absolute; right: 12px; top: 10px; font-size: 12px; text-align: right; }
#banner .who a { color: #ffffff; }

/* ── 電光掲示板 ── */
#ticker {
  background: #000000;
  color: #ffd84a;
  font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka-等幅", monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 1px solid var(--blue-dark);
  padding: 2px 0;
}
#ticker span { display: inline-block; padding-left: 100%; animation: ticker 18s linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ── 2段組 ── */
#cols { display: flex; align-items: flex-start; }
#menu {
  width: 170px;
  flex: none;
  background: var(--sky);
  border-right: 1px dotted var(--line);
  padding: 10px 8px 16px;
  font-size: 12px;
}
#menu .box { margin-bottom: 12px; border: 1px solid var(--line); background: #ffffff; }
#menu .box h2 {
  margin: 0;
  padding: 2px 6px;
  font-size: 12px;
  color: #ffffff;
  background: linear-gradient(to bottom, #3d6bc6, var(--blue));
}
#menu ul { list-style: none; margin: 0; padding: 4px 6px; }
#menu li { padding: 2px 0; border-bottom: 1px dotted #c8d6f0; }
#menu li:last-child { border-bottom: none; }
#menu li::before { content: "▼"; color: var(--orange-ink); font-size: 10px; margin-right: 3px; display: inline-block; transform: rotate(-90deg); }
#menu li.here a { font-weight: bold; color: var(--ink); text-decoration: none; }
#menu .counter { text-align: center; padding: 6px; }

#main { flex: 1; min-width: 0; padding: 12px 16px 16px; }

/* ── 見出し ── */
h1 {
  font-size: 16px;
  margin: 0 0 12px;
  padding: 4px 8px;
  border-left: 8px solid var(--blue);
  border-bottom: 1px solid var(--blue);
  background: linear-gradient(to right, var(--sky-deep), #ffffff);
}
h1::before { content: "■ "; color: var(--orange-ink); }
h2 {
  font-size: 14px;
  margin: 18px 0 8px;
  padding: 2px 6px;
  border-bottom: 2px dotted var(--blue);
  color: var(--blue-dark);
}
h2::before { content: "◆ "; color: var(--orange-ink); }
h3 { font-size: 13px; margin: 12px 0 6px; color: var(--blue-dark); }
h3::before { content: "● "; color: var(--orange-ink); }

/* ── 部品 ── */
.btn, button, input[type="submit"] {
  font: inherit;
  font-size: 12px;
  padding: 3px 12px;
  min-height: 28px;
  color: #000000;
  background: linear-gradient(to bottom, #ffffff, #d4d0c8);
  border: 2px outset #e8e8e8;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:active, button:active { border-style: inset; }
.btn-go {
  font-size: 14px;
  font-weight: bold;
  padding: 6px 18px;
  color: #ffffff;
  background: linear-gradient(to bottom, #a65a00, #6e3c00);
  border-color: #ffd28a;
  text-shadow: 1px 1px 0 #5a3000;
}
.btn-go:visited, .btn-go:hover { color: #ffffff; background: linear-gradient(to bottom, #b36200, #7a4200); }
.btn-small { font-size: 11px; padding: 1px 6px; min-height: 24px; }
.btn-on { border-style: inset; background: #ffe9a8; font-weight: bold; }
.btn-danger { color: #ffffff; background: linear-gradient(to bottom, #c41e1e, #880000); border-color: #ff9999; }

input[type="text"], input:not([type]), input[type="file"], textarea, select {
  font: inherit;
  font-size: 13px;
  border: 2px inset #e0e0e0;
  padding: 2px 4px;
  background: #ffffff;
  max-width: 100%;
}
input:focus, textarea:focus, select:focus, button:focus, a:focus { outline: 2px solid var(--orange); outline-offset: 1px; }

table.list { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
table.list th, table.list td { border: 1px solid #999999; padding: 4px 5px; vertical-align: top; }
table.list th { background: linear-gradient(to bottom, #f4f4f4, #d8d8d8); text-align: left; white-space: nowrap; }
table.list tr:nth-child(even) td { background: #f3f7ff; }
table.list td.num { text-align: right; white-space: nowrap; }

table.form { border-collapse: collapse; width: 100%; }
table.form th { width: 9em; text-align: left; vertical-align: top; padding: 6px; background: var(--sky); border: 1px solid var(--line); font-weight: normal; }
table.form td { padding: 6px; border: 1px solid var(--line); }

.box-note { border: 1px dashed var(--orange-ink); background: #fffbe8; padding: 8px 10px; margin: 10px 0; }
.box-ok { border: 1px solid #3a8a3a; background: #eefbe8; padding: 6px 10px; margin: 10px 0; color: #1e5a1e; }
.box-ng { border: 1px solid var(--red); background: #fff0f0; padding: 6px 10px; margin: 10px 0; color: #8a0000; }
.small { font-size: 11px; color: var(--gray); }
.new { color: var(--red); font-weight: bold; font-size: 11px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.star { color: #995800; font-weight: bold; }
.tag { display: inline-block; font-size: 11px; padding: 0 4px; margin: 1px 2px 1px 0; border: 1px solid var(--line); background: var(--sky); }
.mark { font-size: 11px; font-weight: bold; padding: 0 4px; border: 1px solid; }
.mark-applied { color: #1e5a1e; border-color: #3a8a3a; background: #eefbe8; }
.mark-considering { color: var(--orange-ink); border-color: var(--orange-ink); background: #fffbe8; }
.mark-skipped { color: var(--gray); border-color: #999999; background: #eeeeee; }

/* 7セグ風の実数 */
.seg {
  display: inline-block;
  font-family: "ＭＳ ゴシック", "MS Gothic", monospace;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ff3b3b;
  background: #111111;
  padding: 0 6px;
  border: 2px inset #666666;
}

/* 初回の5段 */
ol.steps { display: flex; list-style: none; padding: 0; margin: 0 0 12px; gap: 2px; font-size: 11px; }
ol.steps li { flex: 1; text-align: center; padding: 3px 2px; background: #e4e4e4; border: 1px solid #aaaaaa; color: var(--gray); }
ol.steps li.done { background: var(--sky-deep); color: var(--blue-dark); }
ol.steps li.now { background: var(--orange); color: #000000; font-weight: bold; border-color: var(--orange-ink); }

hr { border: none; border-top: 1px dashed var(--line); margin: 14px 0; }
.totop { text-align: right; font-size: 11px; margin: 10px 0 0; }

#foot {
  border-top: 3px double var(--blue);
  background: var(--sky);
  text-align: center;
  font-size: 11px;
  padding: 8px;
  color: var(--gray);
}
#foot a { margin: 0 4px; }

.pager { margin: 8px 0; text-align: center; }
.pager a, .pager b { display: inline-block; min-width: 24px; padding: 0 4px; margin: 0 1px; border: 1px solid var(--line); }
.pager b { background: var(--blue); color: #ffffff; }

.inline { display: inline; }
.modern-only { display: none; }
.right { text-align: right; }

/* 寄付のお願い（全ページ） */
.donate { border: 2px dashed var(--orange-ink); background: #fffbe8; padding: 6px 8px; font-size: 12px; }
.donate-title { margin: 0 0 4px; font-weight: bold; color: var(--orange-ink); }
.donate-text { margin: 0 0 6px; }
.btn-donate { color: #ffffff; background: linear-gradient(to bottom, #a65a00, #6e3c00); border-color: #ffd28a; font-weight: bold; }
.btn-donate:visited, .btn-donate:hover { color: #ffffff; background: linear-gradient(to bottom, #b36200, #7a4200); }

/* 幅が狭い端末では1段に落とす（中身は読める） */
@media (max-width: 780px) {
  body { padding: 0; }
  #wrap { width: auto; flex: 1; min-width: 0; border: none; box-shadow: none; }
  #cols { flex-direction: column; align-items: stretch; }
  /* 狭い画面では本文を先に。メニューは本文の下へ回す */
  #menu { width: auto; border-right: none; border-top: 1px dotted var(--line); order: 2; }
  #banner .who { position: static; text-align: left; margin-top: 4px; }
  table.list { font-size: 12px; }
  table.list .wide-only { display: none; }
}

/* 動きを減らす設定の端末では、点滅も流れる文字も止める */
@media (prefers-reduced-motion: reduce) {
  .new, #ticker span { animation: none; }
  #ticker span { padding-left: 8px; }
}

/* 問い合わせ先のメールアドレスの画像（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; }