/* style.css — zeikin5.com/calc 風デザイン（白地・紺色ベース・黄色入力セル・計算表） */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  background: #fff;
  color: #333;
  font-size: 13px;
  line-height: 1.7;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 14px 16px 40px; }

/* ヘッダー */
.site-header h1 { margin: 6px 0 4px; font-size: 24px; color: #1a2f5a; }
.lead { margin: 0 0 10px; font-size: 12.5px; color: #555; }
.topnav {
  display: flex;
  background: #1a2f5a;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.topnav span {
  flex: 1;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 4px;
  border-right: 1px solid rgba(255,255,255,.4);
}
.topnav span:last-child { border-right: none; }

/* 見出し */
.sec-title {
  margin: 30px 0 8px;
  padding: 6px 10px;
  font-size: 16px;
  color: #1a2f5a;
  background: #eef2f9;
  border-left: 6px solid #1a2f5a;
  border-bottom: 1px solid #b9c6de;
}
.sec-lead { margin: 6px 0 8px; font-size: 12.5px; color: #555; }

/* お知らせ枠 */
.notice {
  border: 2px solid #1a2f5a;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0 12px;
  font-size: 12.5px;
}
.notice p { margin: 4px 0; }
.input-sample {
  display: inline-block;
  width: 56px;
  background: #ffffcc;
  border: 1px solid #aaa;
  height: 1.1em;
  vertical-align: middle;
}

/* チェック行 */
.pre-checks { margin: 8px 0; }
.pre-checks.cols { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 2px 0; }

/* 計算表 */
table.calc {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 10px;
}
table.calc th, table.calc td { padding: 5px 8px; vertical-align: middle; }
table.calc th {
  width: 168px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
table.calc th.indent { padding-left: 22px; font-weight: 400; }
table.calc td.op { width: 22px; text-align: center; color: #888; font-weight: 700; padding: 5px 0; }
table.calc td.val { width: 150px; }
table.calc td.note { font-size: 11.5px; color: #666; line-height: 1.5; }
table.calc td.note a { color: #1a53a8; }

table.calc input[type="text"], table.calc select {
  width: 100%;
  padding: 4px 6px;
  font-size: 14px;
  text-align: right;
  background: #ffffcc;               /* 入力セル＝黄色（zeikin5方式） */
  border: 1px solid #999;
  border-radius: 2px;
}
table.calc select { text-align: left; background: #ffffcc; }
table.calc select.count { text-align: right; }
table.calc input:disabled { background: #eee; color: #999; }

table.calc output {
  display: block;
  width: 100%;
  padding: 4px 6px;
  font-size: 14px;
  text-align: right;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 2px;
  min-height: 1.5em;
  font-variant-numeric: tabular-nums;
}
tr.subtotal output { font-weight: 700; background: #f4f8ff; }
tr.total th { color: #1a2f5a; }
tr.total output { font-weight: 700; font-size: 16px; background: #eef2f9; border-color: #7d92bd; color: #1a2f5a; }
tr.furusato th { color: #b8860b; }
tr.furusato output { font-weight: 700; font-size: 16px; background: #fff8e6; border-color: #e0b84d; color: #a86b00; }
tr.spacer td { padding: 6px 0; border-bottom: 1px dashed #ddd; }

.alert { color: #c0392b; font-weight: 700; display: block; }
.fine { font-size: 11px; color: #777; margin: 6px 0 0; }

/* フッター */
.site-footer { margin-top: 34px; border-top: 1px solid #ddd; padding-top: 10px; font-size: 11px; color: #777; }

/* モバイル */
@media (max-width: 640px) {
  table.calc, table.calc tbody, table.calc tr { display: block; width: 100%; }
  table.calc tr { display: grid; grid-template-columns: 20px 1fr 130px; align-items: center; padding: 5px 0; border-bottom: 1px solid #eee; }
  table.calc th { grid-column: 2; width: auto; white-space: normal; padding: 2px 4px; }
  table.calc td.op { grid-column: 1; grid-row: 1; }
  table.calc td.val { grid-column: 3; grid-row: 1; width: auto; }
  table.calc td.note { grid-column: 1 / -1; padding: 0 4px 4px 24px; }
  tr.spacer { display: none !important; }
}