/* ホフィット業務ツール研究所 専用テーマ
   2026-08-23新設。class接頭辞 hj- で統一し、他サイト(ルクシア/ラーニーズ/既存媒体)と
   クラス名・構造を共有しない(作りの指紋の分散)。 */

:root {
  --hj-ink: #1b1f24;
  --hj-sub: #5b646e;
  --hj-line: #dfe4e9;
  --hj-bg: #ffffff;
  --hj-soft: #f5f7f9;
  --hj-accent: #0f5b6e;
  --hj-accent-soft: #e6f1f4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hj-bg);
  color: var(--hj-ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.9;
}

img { max-width: 100%; height: auto; }

.hj-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ヘッダーは最小限。共通ブロック比率を本文の3割以下に抑える設計 */
.hj-head {
  border-bottom: 1px solid var(--hj-line);
  padding: 14px 0;
}
.hj-head a { color: var(--hj-ink); text-decoration: none; }
.hj-head .hj-logo { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.hj-head .hj-tag { font-size: 12px; color: var(--hj-sub); margin-top: 2px; }

.hj-main { padding: 28px 0 40px; }

.hj-title {
  font-size: 27px;
  line-height: 1.5;
  margin: 0 0 10px;
  letter-spacing: .01em;
}
.hj-meta { font-size: 13px; color: var(--hj-sub); margin-bottom: 26px; }
.hj-meta span + span::before { content: "／"; margin: 0 6px; color: var(--hj-line); }

.hj-lead {
  background: var(--hj-soft);
  border-left: 3px solid var(--hj-accent);
  padding: 14px 16px;
  margin: 0 0 30px;
  font-size: 15px;
}

.hj-body h2 {
  font-size: 21px;
  line-height: 1.55;
  margin: 42px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--hj-accent);
}
.hj-body h3 {
  font-size: 17px;
  margin: 30px 0 10px;
  color: var(--hj-accent);
}
.hj-body p { margin: 0 0 18px; }
.hj-body ul { margin: 0 0 20px; padding-left: 1.3em; }
.hj-body li { margin-bottom: 8px; }

.hj-tablewrap { overflow-x: auto; margin: 0 0 10px; }
.hj-body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 14px;
}
.hj-body th, .hj-body td {
  border: 1px solid var(--hj-line);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}
.hj-body th { background: var(--hj-accent-soft); font-weight: 600; white-space: nowrap; }
.hj-tablenote { font-size: 13px; color: var(--hj-sub); margin: 0 0 24px; }

.hj-src {
  font-size: 13px;
  color: var(--hj-sub);
  border-top: 1px solid var(--hj-line);
  margin-top: 40px;
  padding-top: 16px;
}
.hj-src ul { padding-left: 1.2em; }
.hj-src a { color: var(--hj-accent); }

.hj-cta {
  border: 1px solid var(--hj-line);
  border-radius: 6px;
  padding: 16px 18px;
  margin: 38px 0 0;
  font-size: 14px;
  color: var(--hj-sub);
}
.hj-cta a { color: var(--hj-accent); }

.hj-foot {
  border-top: 1px solid var(--hj-line);
  margin-top: 46px;
  padding: 18px 0 34px;
  font-size: 13px;
  color: var(--hj-sub);
}
.hj-foot a { color: var(--hj-sub); }

/* トップの記事一覧 */
.hj-list { list-style: none; padding: 0; margin: 0; }
.hj-list li { border-bottom: 1px solid var(--hj-line); padding: 16px 0; }
.hj-list a { color: var(--hj-ink); text-decoration: none; font-size: 17px; font-weight: 600; line-height: 1.6; }
.hj-list a:hover { color: var(--hj-accent); }
.hj-list .hj-date { display: block; font-size: 12px; color: var(--hj-sub); margin-top: 5px; }

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .hj-title { font-size: 23px; }
  .hj-body h2 { font-size: 19px; }
}