@charset "UTF-8";
/* 労務の計算ツール（roumu-keisan.com）共通スタイル */

:root{
  --bg:#ffffff; --fg:#1a1a1a; --sub:#555; --line:#dfe3e8; --accent:#1769aa;
  --accent-bg:#eaf4fb; --warn-bg:#fff6e5; --warn-line:#e8c37a; --card:#f7f9fb;
  --shadow:0 1px 3px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16191d; --fg:#e8eaed; --sub:#a8adb4; --line:#31363c; --accent:#6bb7e8;
    --accent-bg:#1b2a36; --warn-bg:#2e2718; --warn-line:#6b5a2e; --card:#1d2126;
    --shadow:0 1px 3px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#16191d; --fg:#e8eaed; --sub:#a8adb4; --line:#31363c; --accent:#6bb7e8;
  --accent-bg:#1b2a36; --warn-bg:#2e2718; --warn-line:#6b5a2e; --card:#1d2126;
  --shadow:0 1px 3px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  line-height:1.8; font-size:16px;
}
.wrap{max-width:760px; margin:0 auto; padding:0 16px}

/* ヘッダー・フッター */
.site-header{border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:baseline; gap:12px; padding-top:16px; padding-bottom:14px}
.site-name{font-size:17px; font-weight:700; color:var(--fg); text-decoration:none; white-space:nowrap}
.site-tag{font-size:13px; color:var(--sub)}
.site-footer{border-top:1px solid var(--line); margin-top:56px; padding:24px 0 40px; font-size:13px; color:var(--sub)}
.site-footer nav{margin-bottom:10px}
.site-footer nav a{color:var(--sub); margin-right:14px}

/* 見出し・本文 */
main{padding-bottom:24px}
h1{font-size:25px; line-height:1.5; margin:28px 0 8px}
h2{font-size:20px; margin:40px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--line)}
h3{font-size:17px; margin:28px 0 10px}
.lead{color:var(--sub); font-size:15px; margin:0 0 28px}
a{color:var(--accent)}
ul{padding-left:1.3em}
li{margin-bottom:8px}

/* パンくず */
.crumb{font-size:13px; color:var(--sub); margin:14px 0 0}
.crumb a{color:var(--sub)}

/* ツールUI */
.tool{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; margin:0 0 28px}
.row{margin-bottom:18px}
.row:last-of-type{margin-bottom:0}
label{display:block; font-weight:700; font-size:15px; margin-bottom:6px}
.hint{font-size:13px; color:var(--sub); font-weight:400; margin-top:4px}
input[type="date"],input[type="number"],input[type="text"],select{
  width:100%; padding:11px 12px; font-size:16px; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--fg);
}
.btn{
  width:100%; padding:14px; font-size:17px; font-weight:700; color:#fff;
  background:var(--accent); border:0; border-radius:6px; cursor:pointer; margin-top:6px;
}
.btn:hover{opacity:.9}
.err{color:#c0392b; font-size:14px; margin-top:10px; display:none}
.err.on{display:block}

/* 計算結果 */
.result{display:none; margin-top:24px; padding:20px; background:var(--accent-bg); border-radius:10px}
.result.on{display:block}
.result .big{font-size:15px; margin:0 0 6px; color:var(--sub)}
.days{font-size:40px; font-weight:700; color:var(--accent); line-height:1.2; margin:0}
.days small{font-size:17px; margin-left:4px}
.meta{margin:14px 0 0; font-size:15px}
.meta div{margin-bottom:6px}

/* 注意書き・引用・表 */
.note{background:var(--warn-bg); border-left:4px solid var(--warn-line); padding:12px 14px; border-radius:0 6px 6px 0; margin:16px 0; font-size:14px}
blockquote{
  margin:18px 0; padding:14px 16px; background:var(--card);
  border-left:4px solid var(--accent); border-radius:0 6px 6px 0; font-size:15px;
}
blockquote p{margin:0 0 8px}
cite{display:block; font-style:normal; font-size:13px; color:var(--sub); text-align:right; padding-top:8px; border-top:1px dashed var(--line)}
table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14px}
th,td{border:1px solid var(--line); padding:8px 10px; text-align:center}
th{background:var(--card); font-weight:700}
td.l,th.l{text-align:left}
tr.hit td{background:var(--accent-bg); font-weight:700}

.mail{font-size:18px; font-weight:700; word-break:break-all; margin:10px 0}
.mail a{text-decoration:none}

/* トップのツール一覧 */
.cards{display:grid; gap:14px; margin:8px 0 8px; padding:0; list-style:none}
@media(min-width:620px){ .cards{grid-template-columns:1fr 1fr} }
.card{
  display:block; padding:18px; background:var(--card); border:1px solid var(--line);
  border-radius:10px; text-decoration:none; color:var(--fg); box-shadow:var(--shadow);
}
.card:hover{border-color:var(--accent)}
.card .t{display:block; font-size:17px; font-weight:700; color:var(--accent); margin-bottom:6px}
.card .d{display:block; font-size:14px; color:var(--fg); line-height:1.7}
.card .s{display:block; font-size:12px; color:var(--sub); margin-top:8px}
.card.soon{opacity:.55; cursor:default}
.card.soon .t{color:var(--sub)}

@media(max-width:480px){
  h1{font-size:21px} .days{font-size:34px}
  table{font-size:13px} th,td{padding:6px 5px}
}