:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #6b7280;
  --link: #174ea6;
  --maxw: 72ch;
  --radius: 12px;
  --line: rgba(107, 114, 128, 0.35); /* ボーダー用の薄色 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e14;
    --fg: #e5e7eb;
    --muted: #9ca3af;
    --link: #8ab4f8;
    --line: rgba(156, 163, 175, 0.35);
  }
}
/* 追加：モバイルのダークモードを無効化して常にライト配色に */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --fg: #111111;
    --muted: #6b7280;
    --link: #174ea6;
    --line: rgba(107,114,128,.35);
  }
}
/* ===== 基本 ===== */
html { font-size: 16px; scroll-behavior: smooth; }
body {
  margin: 0; padding: 2rem 1rem 4rem;
  background: var(--bg); color: var(--fg);
  font: 1rem/1.75 system-ui, -apple-system, Segoe UI, Roboto,
    "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Noto Sans Thai", "Th Sarabun New",
    "Noto Sans CJK JP", "Yu Gothic UI", "YuGothic", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--maxw); margin: 0 auto; }
header { margin-bottom: 2rem; }
nav {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  font-size: .95rem;
}
nav a { color: var(--link); text-decoration: none; padding: .25rem .5rem; border-radius: var(--radius); }
nav a:focus, nav a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.3; margin: 2rem 0 1rem; }
h1 { font-size: clamp(1.6rem, 2.5vw + 1rem, 2.2rem); }
h2 { font-size: clamp(1.25rem, 1.5vw + .9rem, 1.5rem); }

p { margin: 1rem 0; }
ul { padding-left: 1.2rem; margin: .5rem 0 0; }
.note { color: var(--muted); font-size: .95rem; text-indent: 1em; }
.notet { color: var(--muted); font-size: .99rem; text-indent: 5em; }
.badge {
  display: inline-block;
  font-size: .75rem;
  padding: .1rem .5rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  margin-right: .5rem; /* ← ここで右に1文字分のスペースを追加 */
} 
.badge-c {
  display: inline-block;
  font-size: .75rem;
  background-color: navy; /* 緑色の背景 */
  color: white;           /* 白い文字 */
  padding: .1rem .5rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  margin-right: .5rem; /* ← ここで右に1文字分のスペースを追加 */
}   
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 1rem; top: 1rem; width: auto; height: auto;
  padding: .5rem .75rem; background: var(--fg); color: var(--bg); border-radius: var(--radius);
}

main { max-width: 70ch; margin: 2rem auto; padding: 0 1rem; }

/* トップへ戻る */
.back-to-top {
  position: fixed; bottom: 2rem; right: 2rem;
  display: inline-block; background: #174ea6; color: #fff;
  padding: 0.6rem 1rem; border-radius: 9999px; text-decoration: none;
  font-size: 0.9rem; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  opacity: .8; transition: opacity .2s, transform .2s;
}
.back-to-top:hover { opacity: 1; transform: translateY(-2px); }
@media (max-height: 600px) { .back-to-top { display: none; } }

.toc {
  background: color-mix(in oklab, var(--muted) 10%, transparent);
  padding: .72rem 1rem; border-radius: var(--radius);
}
.toc h2 { margin-top: .5rem; }

blockquote {
  margin: 1rem 0; padding: .75rem 1rem;
  border-left: 3px solid var(--muted); color: var(--muted);
  background: color-mix(in oklab, var(--muted) 10%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Code", monospace; font-size: .95em; }
pre {
  background: color-mix(in oklab, var(--muted) 12%, transparent);
  padding: .75rem 1rem; border-radius: var(--radius); overflow-x: auto;
}
.prewaku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Code", monospace;
  font-size: .9em;
  background: color-mix(in oklab, var(--muted) 12%, transparent);
  padding: .75rem 1rem; border-radius: var(--radius);
  white-space: normal; word-break: break-word; overflow-x: visible;
}
hr { border: 0; height: 1px; background: color-mix(in oklab, var(--muted) 30%, transparent); margin: 2rem 0; }
.spaceh { height: 50px; }

.map-wrap { margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.logo { height: 42px; width: auto; display: block; }
.brand { display: flex; align-items: center; margin-right: .5rem; font-weight: 700; }

/* ボタン */
form .button { text-align:center; margin-top:1.5rem; }
form .button button {
  font-size: 1.1rem; padding: .75rem 2rem; border-radius: 8px; border: none;
  background: var(--link); color: #fff; cursor: pointer;
}
form .button button:hover { background: #0f3b82; }

/* ===== テーブル（共通） ===== */
.table-wrap { width: 100%; overflow-x: auto; }
.minitable {
  width: 100%; border-collapse: collapse; border: 1px solid var(--line); font-size: .98rem;
}
.minitable th, .minitable td {
  padding: .5rem .6rem; border: 1px solid var(--line); vertical-align: top;
}
.minitable thead th {
  text-align: left; font-weight: 700; background: transparent; position: sticky; top: 0; backdrop-filter: blur(2px);
}
.minitable tbody tr:hover { background: rgba(0,0,0,.02); }
/* 見出し行：中央ぞろえ＋背景色（ライト/ダーク対応） */
:root {
  --table-head-bg: rgba(17, 17, 17, 0.06);  /* ライト */
}
@media (prefers-color-scheme: dark) {
  :root {
    --table-head-bg: rgba(229, 231, 235, 0.08); /* ダーク */
  }
}

.minitable thead th {
  text-align: center;                 /* 中央ぞろえ */
  background: var(--table-head-bg);   /* 背景色 */
  position: sticky; top: 0;           /* スクロール時に固定（既存と整合） */
  backdrop-filter: blur(2px);         /* 既存の視認性補助 */
}

/* ===== フッター周辺 ===== */
.social-text { margin-top: .5rem; font-size: .95rem; text-align: center; }
.social-text a { color: var(--link); text-decoration: none; margin: 0 .25rem; }
.social-text a:hover, .social-text a:focus { text-decoration: underline; }

/* ===== お問合せ表 ===== */
.contact .required { color: #b91c1c; font-size: .9rem; }
.contact .button { margin-top: .75rem; }
.inline-error { color:#b91c1c; font-size:.9rem; margin-left:.5rem; }
.contact .minitable { width: 100%; border-collapse: collapse; border: 1px solid var(--line); font-size: .95rem; table-layout: auto; }
.contact .minitable th, .contact .minitable td { border: 1px solid var(--line); padding: .5rem .6rem; vertical-align: top; }
.contact .minitable th:first-child { width: 3rem; }
.contact .minitable th:nth-child(2), .contact .minitable th:nth-child(3) { width: auto; }
.contact .checks label { display: inline-block; margin: .25rem .75rem .25rem 0; }

.contact-list { display: table; border-spacing: .5rem .4rem; }
.contact-list div { display: table-row; }
.contact-list .label, .contact-list .value { display: table-cell; vertical-align: top; }
.contact-list .label { white-space: nowrap; padding-right: .5rem; text-align: right; }
.contact-list .value a { color: var(--link); text-decoration: none; }
.contact-list .value a:hover { text-decoration: underline; }

.contact input[type="text"], .contact input[type="email"], .contact textarea, .contact input[type="file"] {
  width: 100%; box-sizing: border-box; padding: .5rem; margin: .25rem 0;
}

/* ===== 画像枠 ===== */
.waku, .waku-chu, .waku-chu-small {
  max-width: 100%; height: auto; display: block; padding: 5px; border: 1px solid var(--line); border-radius: 8px;
}
.waku { margin: 10px 0; }
.waku-chu { max-width: 80%; margin: 10px auto; }
.waku-chu-small { max-width: 75%; margin: 10px auto; }

/* ===== 印刷 ===== */
@media print { nav, footer { display: none; } body { padding: 0; } }

/* ===== 小画面の余白 ===== */
@media (max-width: 480px) {
  body { padding: 1rem .875rem 2rem; }
  nav a { padding: .5rem .6rem; }
  h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.1rem, 4.5vw, 1.3rem); }
}

/* ===== 番号付きカスタムリスト ===== */
.problems { margin: 1.2em 0; padding-left: 1.6em; line-height: 1.5; font-size: 1rem; counter-reset: problem; list-style: none; }
.problems li { margin-bottom: .5em; position: relative; padding-left: 1.8em; }
.problems li::before { counter-increment: problem; content: counter(problem) "."; position: absolute; left: 0; top: 0; font-weight: bold; }
@media (max-width: 600px) { .problems { padding-left: 1.2em; font-size: .95rem; line-height: 1.6; } }

/* ===== 価格表（dl.p-list） ===== */
.p-list dt { font-weight: normal !important; }
dl.p-list {
  display: grid !important; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: .25rem;
  margin: 1.2em 0; padding: 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;
}
dl.p-list > dt, dl.p-list > dd { margin: 0; padding: .6em 0; line-height: 1.6; border-bottom: 1px dotted #eee; }
dl.p-list > dt { font-weight: 700; text-align: left; }
dl.p-list > dd { text-align: right; white-space: nowrap; color: #333; }
dl.p-list > dt:last-of-type, dl.p-list > dd:last-of-type { border-bottom: none; }
@media (max-width: 600px) {
  dl.p-list { grid-template-columns: 1fr; }
  dl.p-list > dd { text-align: right; white-space: normal; margin-bottom: .6em; }
  dl.p-list { row-gap: .15rem; }
  dl.p-list > dt, dl.p-list > dd { line-height: 1.5; padding: .35em 0; border-bottom: none; }
  dl.p-list > dt { margin-bottom: .1em; }
}

/* 2カラム（任意） */
@media (min-width: 720px){ .fancy-list.cols-2 { grid-template-columns: 1fr 1fr; } }

/* ===== dl/定義リスト ===== */
dl, dl.ind, dl.ind dt, dl.ind dd, dl.ind ul, dl.ind li { line-height: 1.5; font-size: 1rem; }
dl.ind li { margin-bottom: .5em; }
dl { display: grid; grid-template-columns: 150px auto; gap: 8px 12px; }
dl.ind { display: block; gap: 8px 12px; }
dt { font-weight: bold; }
dd { margin: 0; }
dd.ind { margin-left: 2em; }

/* ===== Policy ===== */
.policy { background: #fff; padding: 1.5rem; border-radius: 8px; line-height: 1.8; }
.policy h2 { font-size: 1.6rem; border-bottom: 2px solid var(--line); padding-bottom: .5rem; margin-bottom: 1.5rem; }
.policy h3 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; color: var(--link); border-left: 4px solid var(--link); padding-left: .5rem; }
.policy p { margin: .5rem 0 1rem; }
.policy ul { margin: .5rem 0 1rem 1.5rem; padding: 0; list-style: disc; }
.policy li { margin: .25rem 0; line-height: 1.6; }

p.last-update { text-align: right; margin-top: 1.5rem; margin-bottom: 2.5rem; }
p.migiyose { text-align: right; margin-top: 1.5rem; margin-left: 1.5rem; margin-bottom: 2.5rem; }

/* ===== ヘッダー/ナビ ===== */
.site-nav{ display:flex; align-items:center; gap:.75rem 1rem; }
.brand{ margin-right:auto; display:flex; align-items:center; }
.logo{ height:42px; width:auto; display:block; }
.nav-links{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.nav-links a{ padding:.25rem .5rem; }
.navcheck{ position:absolute; left:-9999px; }
.hamburger{ display:none; position:relative; width:40px; height:40px; cursor:pointer; }
.hamburger span, .hamburger::before, .hamburger::after{
  content:""; position:absolute; left:8px; right:8px; height:2px; background:var(--fg);
  transition: transform .2s ease, opacity .2s ease;
}
.hamburger span{ top:50%; transform:translateY(-50%); }
.hamburger::before{ top:12px; }
.hamburger::after{ bottom:12px; }
.navcheck:checked + .hamburger::before{ transform:translateY(10px) rotate(45deg); }
.navcheck:checked + .hamburger::after{ transform:translateY(-10px) rotate(-45deg); }
.navcheck:checked + .hamburger span{ opacity:0; }
@media (max-width: 720px){
  .logo{ height:36px; }
  .hamburger{ display:block; margin-left:auto; }
  .nav-links{
    display:none; flex-direction:column; width:100%;
    border:1px solid var(--line); border-radius:8px; background:var(--bg);
    padding:.5rem; margin-top:.5rem;
  }
  .navcheck:checked ~ .nav-links{ display:flex; }
  .nav-links a{ padding:.6rem .75rem; }
}

/* ===== パンくず ===== */
.breadcrumb { font-size: .9rem; color: #555; margin: 1rem 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; padding: 0; margin: 0; }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li + li::before { content: "›"; color: #999; margin: 0 .4em; }
.breadcrumb a { text-decoration: none; color: #174ea6; transition: color .2s ease; }
.breadcrumb a:hover { color: #0d3c91; text-decoration: underline; }
.breadcrumb li[aria-current="page"] { color: #333; font-weight: 500; }

/* ===== 記事本文 ===== */
p.kiji { text-indent: 1em; line-height: 1.8; margin: 1em 0; }


/* ===== 次のページ ===== */
.button-container {
  text-align: center; /* 中央ぞろえ */
  margin: 2rem 0;
}
.next-button {
  display: inline-block;
  padding: 10px 25px;
  background-color: #fff;          /* 白背景 */
  color: #000;                     /* 黒文字 */
  border: 1px solid #000;          /* 黒い枠線 */
  border-radius: 6px;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.next-button:hover {
  background-color: #f2f2f2;       /* ホバー時に少し濃く */
}

.next-button:active {
  background-color: #ccc;          /* クリック時にさらに濃いグレー */
}
.pagination {
  text-align: center;     /* 中央ぞろえ */
  margin: 2rem 0;
}
.page {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 34px;
  margin: 0 4px;
  border: 1px solid #000; /* 黒枠 */
  border-radius: 4px;     /* 少し角丸（□に近い） */
  background-color: #fff; /* 白背景 */
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.page:hover {
  background-color: #f2f2f2; /* ホバー時にやや濃く */
}

.page:active {
  background-color: #ccc;   /* クリック時にさらに濃く */
}

.page.active {
  background-color: #000;   /* 現在のページ */
  color: #fff;
}

/* ========== 労働法比較表（.minitable-work） ========== */
/* PC/タブレット：20% / 40% / 40% 固定 */
.minitable-work {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem; line-height: 1.6;
  border: 1px solid #333; background: #fff;
  table-layout: fixed; /* 比率を優先 */
}
.minitable-work th, .minitable-work td {
  border: 1px solid #555; padding: .7em 1em; vertical-align: top; background: #fff;
  overflow-wrap: anywhere; word-break: break-word;
}
.minitable-work thead th { text-align: center; font-weight: 700; }
.minitable-work .section {
  font-weight: 700; text-align: left; padding: .8em 1em; border-left: 3px solid #000; background: #fff;
}

/* 列幅（ヘッダ/本文両方に適用） */
.minitable-work thead th:nth-child(1),
.minitable-work tbody td:nth-child(1){ width:20%; }
.minitable-work thead th:nth-child(2),
.minitable-work tbody td:nth-child(2){ width:40%; }
.minitable-work thead th:nth-child(3),
.minitable-work tbody td:nth-child(3){ width:40%; }

/* モバイル：カード化せず横スクロール維持（data-label不要） */
@media screen and (max-width: 800px){
  .minitable-work { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
  .minitable-work thead{ display: table-header-group; }
  .minitable-work tbody{ display: table-row-group; }
  .minitable-work tr   { display: table-row; }
  .minitable-work th, .minitable-work td { display: table-cell; }
  .minitable-work td::before { content: none !important; } /* 名残を無効化 */
}

/* ========== もう一種類の表（minitable-work-s）必要なら使用 ========== */
.minitable-work-s {
  width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.6;
  border: 1px solid #333; background: #fff; table-layout: auto;
}
.minitable-work-s th, .minitable-work-s td {
  border: 1px solid #555; padding: .7em 1em; vertical-align: top; background: #fff;
}
.minitable-work-s thead th { text-align: center; font-weight: 700; }
.minitable-work-s .section { font-weight: 700; text-align: left; padding: .8em 1em; border-left: 3px solid #000; background: #fff; }
/* minitable-work-s は列比率指定なし（用途に応じて追加） */

/* ===== Q&A（dl.qa） ===== */
dl.qa { display: block; }
dl.qa dt, dl.qa dd { display: block; margin: 0; }
.qa { margin: 2rem 0; padding: 0; line-height: 1.8; }
.qa .q, .qa .a { display: flex; align-items: flex-start; gap: .5em; }
.qa .q { margin: 1rem 0 .4rem; font-weight: 700; }
.qa .a { margin: 0 0 .6rem 0; font-weight: 400; }
.qa .q::before, .qa .a::before { flex: 0 0 auto; white-space: nowrap; font-weight: 700; }
.qa .q::before { content: "Q:"; color: var(--link); }
.qa .a::before { content: "A:"; color: var(--muted); }

/* ===== レスポンシブ微調整（問い合わせ表など） ===== */
@media (max-width: 600px) {
  .contact { padding-right: 1rem; }
  .contact .minitable th, .contact .minitable td { display: block; }
  .notet { text-indent: 1.5em; }
}
/* ===== Sabaijai Column Simple Style ===== */
.sj-column {
  background-color: #f9fafb; /* 優しい塗りつぶし（ライトグレー） */
  border: 1px solid #d1d5db; /* 枠線1本だけ */
  border-radius: 10px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  color: #222;
  line-height: 1.8;
}

/* タイトル部分 */
.sj-column h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0e7490; /* アクセント色（Sabaijaiブルー系） */
  text-align: center;
  letter-spacing: 0.03em;
}

/* 本文部分 */
.sj-column p {
  margin: 0 0 1em;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .sj-column {
    background-color: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
  }
  .sj-column h3 {
    color: #38bdf8;
  }
}

.benefit-checklist {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
/* チェックリスト */
.benefit-checklist li {
  position: relative;
  margin: 1rem 0;
  padding: 1rem 1rem 1rem 3.2rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: color-mix(in oklab, var(--fg) 3%, var(--bg));
  line-height: 1.6;
  transition: background 0.3s ease;
}

.benefit-checklist li::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  width: 24px;
  height: 24px;
  background: url("../img/check-mark.png") no-repeat center/contain;
  opacity: 0.95;
}

.benefit-checklist li strong {
  display: block;
  font-size: 1.05em;
  margin-bottom: 0.3rem;
  color: var(--accent, #2a9d8f);
}

@media (prefers-color-scheme: dark) {
  .benefit-checklist li {
    background: color-mix(in oklab, var(--bg) 90%, black);
    border-color: color-mix(in oklab, var(--line) 80%, #444);
  }
  .benefit-checklist li::before {
    filter: brightness(1.2);
  }
}
/* 端末がダークを要求しても、サイトは“常にライト”で表示させる */
@media (prefers-color-scheme: dark) {
  :root, html, body {
    color-scheme: light !important;
    --bg: #ffffff !important;
    --fg: #111111 !important;
    --muted: #6b7280 !important;
    --link: #174ea6 !important;
    --line: rgba(107,114,128,.35) !important;
    background: #ffffff !important;
    color: #111111 !important;
  }
  /* ダーク時に個別で白/黒を固定していた要素もトークンに寄せて白基調に */
  .policy,
  .minitable-work, .minitable-work th, .minitable-work td,
  .minitable-work-s, .minitable-work-s th, .minitable-work-s td,
  .next-button, .page, .contact-btn, .cb__box {
    background-color: var(--bg) !important;
    color: var(--fg) !important;
    border-color: var(--line) !important;
  }
  .hamburger span, .hamburger::before, .hamburger::after {
    background: var(--fg) !important;
  }
}
/* ===== フッターお問合せボタン（文字前後に全角スペース） ===== */
.footer-contact {
  text-align: center;
  margin-top: 1.5em;
}

.contact-btn {
  display: inline-block;
  padding: 0.6em 2.4em;
  border: 1.5px solid #000;
  border-radius: 8px;         /* ← 丸すぎない自然な角丸 */
  background-color: #fff;
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;     /* ← 全角スペース風の余裕 */
  transition: all 0.25s ease;
}

/* 文字の前後に全角スペース（見た目の空き）を追加 */
.contact-btn {
  word-spacing: 2.8em;
  padding: 0.6em 6.5em;
}

/* ホバー時の反転 */
.contact-btn:hover,
.contact-btn:focus {
  background-color: #000;
  color: #fff;
  text-decoration: 
  none;
}
/* チェックリストベース（見た目リセット） */

/* 見た目用のボックス */
.cb__box {
  box-sizing: border-box;
  width: 26px;               /* 画像の見た目に合わせて調整可 */
  height: 26px;
  border: 1px solid #000;    /* 外枠 */
  border-radius: 3px;        /* 必要なら角丸 */
  display: inline-block;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto; /* チェックの大きさ */
  transition: box-shadow .15s ease;
}

/* チェック状態でアイコンを出す（画像ファイルを使用） */
.cb__input:checked + .cb__box {
  background-image: url("img/checkmark-saba.svg"); /* 画像ファイルを同じフォルダに置く場合 */
/* キーボード操作のフォーカス可視化 */
.cb__input:focus + .cb__box {
  box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}
/* チェックリストベース↑*/