/* =========================================
 Root variables & Base
========================================= */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #222;
  --muted: #555;
  --border: #c9ddff;
  --brand: #0a3a7a;
  --brand-ink: #ffffff;
  --accent: #126bcd;
  --accent-dark: #0f56a4;
  --divider: #6699ff;
  --page-width: 750px;
  --link-blue: #1160c9;
  --header-link-blue: #0056b3;
}
html,
body { height: 100%; }
body {
  margin: 0;
  background: #ffffff;
  color: var(--text);
  font-family:
  system-ui, -apple-system, "Segoe UI", Roboto,
  "Hiragino Kaku Gothic ProN", "Meiryo", "Noto Sans JP", sans-serif;
  line-height: 1.6;
}
.page {
  width: var(--page-width);
  min-width: var(--page-width);
  margin: 0 auto;
  background: #ffffff;
}
/* ========================================= 
 Header (band / links / breadcrumbs)
========================================= */
.header-wrap { width: var(--page-width); margin: 0 auto; } /* from calendar.css */
.header-top-table { width: var(--page-width); border-collapse: collapse; }
.header-top-table td { padding: 0; }
.bg-left {
  width: 375px; height: 65px;
  background: url("../../../common/had_bak_r.gif") no-repeat left top;
  vertical-align: middle; text-align: left;
}
.bg-right {
  width: 375px; height: 65px;
  background: url("../../../common/hed_bar_r.gif") no-repeat right top;
  vertical-align: middle; text-align: right;
}
.header-bar { display: block; width: var(--page-width); height: 5px; }
.header-links {
  width: var(--page-width);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 0;
  font-size: 14px; line-height: 1.2;
}
.header-links .left, .header-links .right {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
}
.header-links a {
  color: var(--header-link-blue);
  text-decoration: underline dotted rgba(0, 86, 179, .45);
}
.header-links .sep { color: var(--header-link-blue); margin: 0 .3em; }
.breadcrumbs {
  width: var(--page-width);
  padding: 4px 0 0;
  font-size: 13px; color: #333;
}
.breadcrumbs a { color: #0056b3; text-decoration: underline dotted rgba(0,86,179,.45); }
/* ========================================= 
 Page head (title / description / advisory)
========================================= */
.page-head { width: var(--page-width); margin: 12px auto 8px; }
.page-head h1 {
  margin: 0 0 4px;
  line-height: 1.25;
  font-size: 20px; /* 22px → 20px */
  font-weight: 700; letter-spacing: .02em; color: #000;
}
.page-head p.desc {
  margin: 0 0 4px;
  line-height: 1.4;
  font-size: 14px; /* 18px → 14px */
  color: #333;
}
.page-head p.advisory {
  margin: 0 0 2px;
  line-height: 1.35;
  font-size: 14px; /* 18px → 14px */
  color: #c00;
}
/* ========================================= 
 Main content
========================================= */
main.container {
  width: var(--page-width);
  margin: 12px auto 28px;
  padding: 0;
  background: #ffffff;
}
/* 外枠（＝各県各港・年・月・決定ボタンを囲む一番外の枠） */
.panel {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  /* 上余白を 0px、左右16pxは“左端の基準線”、下は 8px で軽く */
  padding: 0 16px 8px;
  box-shadow: 0 2px 8px rgba(10,58,122,.06);
}
/* すべての fieldset は左右マージン 0（左端を .panel の 16px に揃える） */
fieldset {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0; /* 左右0 / 上下のみ */
}
legend { font-weight: 700; color: #333; padding: 0 6px; }
/* ========================================= 
 Ports grid (6 columns)
========================================= */
.ports {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px 12px;
  font-size: 14px; /* 18px → 14px （港名） */
  margin: 0; padding: 0; /* 左端は親(.panel)の16pxに依存 */
  box-sizing: border-box;
}
/* ── 各県の枠（.ports 内）— 強めに詰める ───────────────── */
.ports fieldset {
  position: relative; /* legend/直後要素の微調整を有効化 */
  padding: 0 2px; /* 上下0 / 左右2px */
  margin: 2px 0; /* 外側も最小限 */
  line-height: 1.1; /* ボックス内の基準行間をタイトに */
}
/* 県名（legend）— 直下の余白を“押し上げて”消す */
.ports fieldset legend {
  position: relative;
  top: -2px; /* 県名を 2px 上へ（視覚的に密着） */
  margin: 0; /* 上下とも 0 に固定 */
  padding: 0 4px; /* 左右だけ薄く確保 */
  line-height: 1.08;
}
/* legend 直後の要素を引き上げ、県名との隙間を確実に除去 */
.ports fieldset legend + * {
  margin-top: -2px !important;
}
/* 念のため：fieldset 内の最初の要素が legend でなくても上マージンを打消し */
.ports fieldset > :not(legend):first-child {
  margin-top: 0 !important;
}
/* 港名（label）— 行間と上下マージンを極小化 */
.ports label {
  display: block;
  line-height: 1.08; /* 詰め気味 */
  margin: 0; /* 余白の積み上がりを防止 */
  vertical-align: middle;
}
/* ラベル群の行間／隙間もゼロに固定（gridで安定化） */
.ports .field {
  display: grid;
  row-gap: 0;
  column-gap: 0;
  gap: 0;
  margin: 0;
  padding: 0;
}
/* もし p / ul を使っていれば、デフォルトの余白を打ち消す（保険） */
.ports fieldset p { margin: 0; }
.ports fieldset ul { margin: 0; padding-left: 0; }
/* Compact selects（選択UIのフォントは16pxのまま） */
.select-compact {
  width: auto; min-width: 90px; max-width: 140px;
  padding: 6px 10px; /* 高さは控えめ */
  background: #ffffff;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 16px; /* ← 維持 */
}
.select-compact.year { min-width: 110px; }
.select-compact.month { min-width: 90px; }
.ports .select-compact {
  font-size: 16px; padding: 6px 10px; line-height: 1.2;
}
/* Year/Month row（年・月・決定） */
.ym-row {
  display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap;
  gap: 10px; margin: 12px 0; /* 左右0：左端は .panel と一致 */
}
.field { display: flex; flex-direction: column; gap: 6px; }
/* Screen reader only */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; border: 0 !important;
}
/* Button（selectと高さを揃える） */
button {
  appearance: none; display: inline-block;
  /* height: 38px;  ← 削除 */
  padding: 6px 14px; /* select と合わせる → 高さが揃う */
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent); color: #fff; font-weight: 700;
  white-space: nowrap; cursor: pointer;
}
button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button:focus {
  outline: none; border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(18,107,205,.18);
}
/* ========================================= 
 Tables (used on destination pages)
========================================= */
table { width: 100%; border-collapse: collapse; background: #ffffff; }
table, th, td { border: 1.5px solid var(--accent); }
th {
  background: #e8f2ff;
  color: #0a2e63;
  font-weight: 700;
  text-align: center;
  padding: 6px 8px;
}
td { padding: 6px 8px; vertical-align: top; }
/* ========================================= 
 Footer
========================================= */
footer { width: var(--page-width); margin: 0 auto; text-align: center; background: #ffffff; padding: 0; }
.footer-links { background: #fff; padding: 8px 0 6px; }
.footer-links nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1;
}
.footer-links a { color: var(--link-blue); text-decoration: underline dotted rgba(17,96,201,.45); }
.footer-links .dot { color: #6699ff; margin-right: 4px; }
.footer-links .separator { color: #6699ff; margin: 0 6px; user-select: none; }
.footer-core {
  background: #ffffff;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 10px 0 12px;
}
.footer-addr { font-size: 14px; line-height: 1.5; margin: 0; }
.footer-tel { font-size: 14px; line-height: 1.5; margin: 2px 0 0; }
.footer-copy {
  background: #ffffff;
  font-size: 11px;
  color: #555;
  line-height: 1.45;
  padding: 8px 0 10px;
}