/* ライフジャパン 専用テーマ(2026-09-28新設)。class接頭辞 lj-。
   hfj(hj-)/luxia/learnie/旧ジブカク(mr-)とクラス名・配色・構造を共有しない。 */

:root {
  --lj-ink: #22262a;
  --lj-mute: #6a7178;
  --lj-rule: #e3e6e8;
  --lj-paper: #fbfbf9;
  --lj-card: #ffffff;
  --lj-key: #2f6f4e;
  --lj-key-soft: #e9f3ee;
  --lj-warn: #b8641f;
}

html { background: var(--lj-paper); }
body {
  margin: 0;
  color: var(--lj-ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

.lj-wrap { width: min(100% - 32px, 720px); margin-inline: auto; }

.lj-head { background: var(--lj-card); border-bottom: 3px solid var(--lj-key); }
.lj-head .lj-wrap { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; flex-wrap: wrap; }
.lj-head a { color: inherit; text-decoration: none; display: contents; }
.lj-logo { font-size: 20px; font-weight: 800; letter-spacing: .06em; color: var(--lj-key); }
.lj-tag { font-size: 12px; color: var(--lj-mute); }

.lj-main { padding: 32px 0 56px; }

.lj-title { font-size: 25px; line-height: 1.55; margin: 0 0 12px; font-weight: 700; }
.lj-meta { display: flex; gap: 12px; font-size: 13px; color: var(--lj-mute); margin: 0 0 22px; }
.lj-meta span::before { content: "■"; font-size: 8px; margin-right: 6px; color: var(--lj-key); vertical-align: middle; }

.lj-lead {
  background: var(--lj-key-soft);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 30px;
}

.lj-body h2 {
  font-size: 20px;
  line-height: 1.5;
  margin: 40px 0 12px;
  padding: 10px 0 10px 14px;
  border-left: 5px solid var(--lj-key);
  background: var(--lj-card);
}
.lj-body h3 { font-size: 17px; margin: 28px 0 8px; color: var(--lj-key); }
.lj-body p { margin: 0 0 16px; }
.lj-body ul { padding-left: 1.3em; margin: 0 0 18px; }
.lj-body li { margin: 4px 0; }
.lj-body strong { font-weight: 700; background: linear-gradient(transparent 62%, #f4e6a8 62%); }
.lj-body a { color: var(--lj-key); }

.lj-tablewrap { overflow-x: auto; margin: 12px 0 8px; border: 1px solid var(--lj-rule); border-radius: 8px; background: var(--lj-card); }
.lj-tablewrap table { border-collapse: collapse; width: 100%; font-size: 14px; }
.lj-tablewrap th, .lj-tablewrap td { padding: 9px 12px; border-bottom: 1px solid var(--lj-rule); text-align: left; vertical-align: top; white-space: nowrap; }
.lj-tablewrap th { background: var(--lj-key); color: #fff; font-weight: 600; }
.lj-tablewrap tr:last-child td { border-bottom: 0; }
.lj-tablenote { font-size: 13px; color: var(--lj-mute); margin: 0 0 18px; }

.lj-src { margin-top: 44px; padding-top: 18px; border-top: 1px dashed var(--lj-rule); font-size: 13px; color: var(--lj-mute); }
.lj-src p { margin: 0 0 6px; font-weight: 700; }
.lj-src ul { padding-left: 1.2em; margin: 0; }
.lj-src a { color: var(--lj-key); word-break: break-all; }

.lj-list { list-style: none; padding: 0; margin: 0; }
.lj-list li { padding: 14px 0; border-bottom: 1px solid var(--lj-rule); display: grid; gap: 4px; }
.lj-list a { color: var(--lj-ink); text-decoration: none; font-weight: 600; line-height: 1.6; }
.lj-list a:hover { color: var(--lj-key); }
.lj-date { font-size: 12px; color: var(--lj-mute); }

.lj-foot { border-top: 1px solid var(--lj-rule); background: var(--lj-card); padding: 22px 0 30px; font-size: 12px; color: var(--lj-mute); }
.lj-foot a { color: var(--lj-key); }

@media (max-width: 600px) {
  .lj-title { font-size: 21px; }
  .lj-body h2 { font-size: 18px; }
}