/* kaikei.cc 無料計算ツール tools/2/ 系デザイン刷新オーバーライド (260728)
   kyuyo.htm / kyuyo_sisan.htm / gensen_2001.htm の
   PHP計算ロジック・name/id属性(POST処理と結びついている)は一切変更せず、
   見た目だけを共通トークン(/tools/_toolkit.css)に合わせて上書きする。
   vw単位のフォントサイズは極端な画面幅で暴走するため clamp() の rem に置換。 */

body {
	background: var(--bg);
	color: var(--ink);
	font-size: clamp(14px, 1.6vw, 16px);
}

a:hover { background-color: var(--accent-soft); }

input, select {
	font-size: clamp(14px, 1.8vw, 16px);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 6px 8px;
}
input:focus-visible, select:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
}
input[type="submit"], input[type="button"] {
	background: var(--accent);
	color: var(--on-accent);
	border: none;
	border-radius: var(--r-full);
	padding: 8px 20px;
	font-weight: 700;
	cursor: pointer;
}
input[type="submit"]:hover, input[type="button"]:hover { background: var(--accent-ink); }

h1 { font-size: clamp(20px, 3.2vw, 28px); }
h2 { font-size: clamp(18px, 2.8vw, 24px); }
h3 { font-size: clamp(16px, 2.4vw, 20px); }
h4 { font-size: clamp(15px, 2.1vw, 18px); }
h5 { font-size: clamp(13px, 1.8vw, 15px); color: var(--ink-soft); }
h6 { font-size: clamp(12px, 1.6vw, 14px); color: var(--ink-faint); font-weight: 400; }

table.type1, table.type2 {
	border: 1px solid var(--line);
	border-top: none;
	border-left: none;
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	background: var(--surface);
}
table.type1 th, table.type2 th {
	font-family: inherit;
	font-size: clamp(13px, 1.8vw, 15px);
	background: var(--surface-dim);
	color: var(--ink-soft);
	border-color: var(--line);
	border-top: none;
	border-left: none;
}
table.type1 td, table.type2 td {
	font-family: inherit;
	font-size: clamp(13px, 1.8vw, 15px);
	border-color: var(--line);
	font-variant-numeric: tabular-nums;
}

.button, .button2 {
	background-color: var(--accent);
	color: var(--on-accent);
	border-radius: var(--r-full);
}
.button:hover, .button2:hover { background-color: var(--accent-ink); }
.button_mini { background-color: var(--surface-dim); color: var(--ink); }

/* 260804 上部の固定バー(.tk-topbar)と中身がくっついて重なって見えたので、
   他の計算ツール(/tools/_toolkit.css の .tk-page)と同じだけ間を開ける。
   ★間隔の値は `--tk-topgap`(_toolkit.css)の1か所で決める。ここに数字を書かない。
   ★_common.css の `.main{padding:0}` を打ち消すため、こちらを後に読み込むこと
   (_html_top.php の <link> の並び順に依存している)。
   左右は入れない。表(table.type1/type2)の幅が変わるため。 */
.main { background: var(--bg); padding-top: var(--tk-topgap); }

/* ★260805 帯からの間隔が画面幅によって変わっていたのを止めた。
   `table.type2 { margin: 0.5vw }`(_table.css)の上マージンが、
   div#2note と form を**すり抜けて**(margin collapsing) .main の padding の外へ出るため、
   給与計算・給与試算だけ「20px + 0.5vw」空いていた(1000px幅で25px、1440px幅で27px)。
   間隔は .main の padding だけで決めたいので、いちばん上の表の上マージンだけ外す。
   ★表そのものの余白(左右・下)は変えない。 */
.main > div:first-of-type > table:first-of-type,
.main > div:first-of-type > form:first-of-type > table:first-of-type { margin-top: 0; }

/* 261028 14:2x スマホ(OPPO Reno7 A の Chrome)で給与計算・給与試算・源泉の入力欄が
   画面の右へはみ出し、html/body が overflow-x:hidden のため横スクロールもできなかった。
   表(table.type2)が中身の最大幅まで広がるのが原因。入力欄(.tk-field)を持つ表だけ、
   画面幅いっぱいに収めて中身を縮める。 */
table.type2:has(.tk-field) { width: 100%; max-width: 100%; box-sizing: border-box; table-layout: fixed; margin-left: 0; margin-right: 0; }
table.type2:has(.tk-field) > tbody > tr > td { box-sizing: border-box; max-width: 100%; padding: 10px; overflow-wrap: anywhere; }
table.type2:has(.tk-field) .tk-select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
table.type2:has(.tk-field) .tk-step-btn { min-width: 0; }