/* 用途別の小さなページ（/hayami/○○/・/keisan/○○/）の共通の見た目。/inc/subpage.php から読み込む。
   色は各ページの :root の --brand / --brand-dark / --tint で決まる。 */
:root{ --line:#e4e6f0; --hl:#fff4c2; --red:#b4232a; --orange:#c2410c; }
.btn.primary{ background:var(--brand); border-color:var(--brand); }
.btn.primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn:not(.primary):hover{ background:var(--tint); border-color:var(--brand); color:var(--brand-dark); }

.crumb{ font-size:12.5px; color:var(--muted); margin:6px 0 0; }
.crumb a{ color:var(--brand); }
.page-head{ text-align:center; margin:10px 0 18px; }
.page-head h1{ font-size:24px; }
.page-head .nb{ display:inline-block; }
.page-head p{ font-size:14px; }
@media (max-width:640px){ .page-head h1{ font-size:20px; } }

/* 仲間のページへのリンク */
.spmenu{ display:flex; flex-wrap:wrap; gap:6px 4px; align-items:center; justify-content:center; margin:0 0 20px; font-size:13.5px; }
.spmenu .lb{ color:var(--muted); font-weight:700; margin-right:6px; font-size:12.5px; }
.spmenu a, .spmenu .on{ padding:5px 11px; border:1px solid var(--line); background:#fff; color:#33405a; text-decoration:none; font-weight:700; }
.spmenu a:hover{ border-color:var(--brand); color:var(--brand-dark); background:var(--tint); }
.spmenu .on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.spmenu.bottom{ margin:26px 0 0; }

/* 本体の白い1枚 */
.stage{ background:#fff; box-shadow:0 10px 30px rgba(40,40,110,.08); padding:30px 34px 34px; }
.stage + .stage{ margin-top:22px; }
@media (max-width:640px){ .stage{ padding:20px 14px 24px; } }
.stage h2{ font-size:20px; font-weight:900; margin:0 0 6px; }
.stage h2 small{ display:inline-block; font-size:13px; color:var(--muted); font-weight:700; margin-left:6px; }
.lead{ font-size:14px; margin:0 0 16px; color:#46566a; }

/* 入力 */
.form{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end; }
.form label.f{ display:block; font-size:13px; font-weight:700; color:#46566a; }
.form select, .form input[type=date], .form input[type=number], .form input[type=search], .form input[type=text]{
  display:block; margin-top:5px; font:inherit; font-size:16px; min-height:44px; width:auto; }
.form input[type=number]{ width:7em; }
/* 長い選択肢（収入印紙の文書の種類など）でも画面からはみ出さない */
.form label.f{ max-width:100%; min-width:0; }
.form select{ max-width:100%; }
.form .row{ display:flex; gap:6px; align-items:center; margin-top:5px; font-size:15px; flex-wrap:wrap; }
.form .row select, .form .row input{ margin-top:0; }
.opts{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:14px 0 0; font-size:14px; align-items:center; }
.opts .lb{ font-weight:700; color:#46566a; }
.opts label{ display:inline-flex; gap:6px; align-items:center; cursor:pointer; font-weight:700; }
.opts input{ width:18px; height:18px; accent-color:var(--brand); }
.quick{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }
.quick button{ font:inherit; font-size:13px; padding:5px 11px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:700; color:#33405a; }
.quick button:hover{ border-color:var(--brand); background:var(--tint); color:var(--brand-dark); }
.err{ color:var(--red); font-weight:700; font-size:14px; }

/* 答え */
.answer{ margin-top:22px; border-top:1px solid var(--line); padding-top:20px; }
.answer:empty{ display:none; }
.answer .big{ font-size:19px; font-weight:800; margin:0 0 6px; line-height:1.6; }
.answer .big b{ font-size:30px; color:var(--brand); margin:0 2px; }
.answer .sub{ font-size:14px; color:#46566a; margin:0 0 12px; }
table.kv{ width:100%; border-collapse:collapse; font-size:15px; margin-top:10px; }
table.kv th, table.kv td{ border-bottom:1px solid var(--line); padding:9px 8px; text-align:left; }
table.kv th{ color:#46566a; font-weight:700; width:45%; }
table.kv td{ font-weight:700; }
table.kv td small{ color:var(--muted); font-weight:500; margin-left:6px; }

/* 一覧の表 */
.tblwrap{ overflow:auto; max-height:70vh; border:1px solid var(--line); }
table.lt{ border-collapse:separate; border-spacing:0; width:100%; font-size:14px; background:#fff; }
table.lt th, table.lt td{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:7px 10px; white-space:nowrap; text-align:left; }
table.lt thead th{ position:sticky; top:0; z-index:2; background:var(--tint); color:var(--brand-dark); font-size:12.5px; font-weight:800; }
table.lt td small, table.lt th small{ display:block; font-size:11px; color:var(--muted); font-weight:500; }
table.lt td.n{ text-align:right; }
table.lt tbody tr:nth-child(even) td{ background:#fafbfe; }
table.lt tbody tr.hit td{ background:var(--hl) !important; }
table.lt tbody tr.now td{ font-weight:800; }

.more{ margin-top:14px; font-size:14px; }
.more a{ color:var(--brand); font-weight:700; }
.notes{ margin:14px 0 0; padding-left:1.2em; font-size:12.5px; color:var(--muted); line-height:1.8; }

/* 解説：既存ツールと同じ白い枠 */
.article{max-width:860px;margin:36px auto 0;background:rgba(255,255,255,.90);
  border:1px solid var(--border,#dde3ee);padding:30px 34px 34px;line-height:1.95;color:#26303f;}
.article h2{font-size:20px;font-weight:800;color:#1e2837;margin:38px 0 14px;
  padding-bottom:9px;border-bottom:2px solid var(--brand);letter-spacing:.01em;}
.article h2:first-child{margin-top:0;}
.article p{margin:0 0 14px;font-size:14.5px;}
table.ref{ width:100%; border-collapse:collapse; font-size:14px; margin:0 0 14px; background:#fff; }
table.ref th, table.ref td{ border:1px solid #dfe3ee; padding:8px 11px; text-align:left; vertical-align:top; }
table.ref th{ background:var(--tint); color:var(--brand-dark); font-weight:800; white-space:nowrap; }
@media (max-width:640px){
  .article{padding:20px 16px 24px;margin-top:24px;}
  .article h2{font-size:17px;}
  .article p{font-size:14px;}
}
@media print{ .crumb, .spmenu, .form, .opts, .quick, .article, .more, .noprint{ display:none !important; } .stage{ box-shadow:none; padding:0; } }