:root{
  --bg:#ffffff;
  --text:#1f2328;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#ffffff;

  /* Link colors (指定) */
  --accent:#d65151;
  --accent-hover:#d69951;
  --accent-visited:#a75a5a;

  /* Left nav highlight (index側で使用) */
  --nav-active-bg:#fcece3;
  --nav-hover-bg:#fdf4ef;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  padding:24px;
  background:var(--bg);
  color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 0.9rem;   /* 本文だけ少し小さく */
  line-height:1.65;
}

a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-hover); text-decoration:underline;}
a:visited{color:var(--accent-visited);}

.container{max-width:980px; margin:0 auto;}
.header{margin-bottom:18px;}
.header h1{font-size:28px; letter-spacing:.02em; margin:0 0 6px;}
.header .sub{color:var(--muted); font-size:14px;}

h2{margin:28px 0 10px; font-size:20px;}
h3{margin:18px 0 8px; font-size:16px;}
p{margin:10px 0;}
ul{margin:10px 0 10px 1.2em;}
li{margin:6px 0;}

.hr{height:1px; background:var(--border); margin:24px 0;}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

.grid{display:grid; gap:12px;}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:860px){.grid.two{grid-template-columns:1fr;}}

.kv{
  padding:18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(180deg, #fff 0%, #fff7f7 100%);
}

.figure{margin:18px 0; text-align:center;}
.figure img{max-width:100%; height:auto; border:1px solid var(--border); border-radius:12px; background:#fff;}
.figure figcaption{margin-top:8px; font-size:13px; color:var(--muted);}

.note{
  display:block;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fafafa;
  margin:12px 0;
}

/* 見出し行（アイコン＋項目） */
.note .label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  color:var(--text);
  margin:0 0 6px 0;
  min-width:auto;
}

.note .label img{
  width:18px;
  height:18px;
}

/* 本文（見出しの下に表示） */
.note .body{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.note.tip{background:#fffaf2;}
.note.warn{background:#fff5f5;}

.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.table th,.table td{
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
  font-size:14px;
}
.table th{background:#fafafa; width:220px;}
.table tr:last-child th,.table tr:last-child td{border-bottom:none;}

.footer{
  margin-top:28px;
  padding-top:14px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
/* === Online manual tweaks (index側でフッターを持つ運用) === */
.footer{ display:none; }

/* 末尾が画面下に貼り付かないよう、本文末尾に余白を追加 */
:where(main.container, div.container){ padding-bottom:24px; }

/* spacing between stacked cards */
.card + .card{ margin-top:16px; }
/* avoid double-spacing inside grid layouts */
.grid .card + .card{ margin-top:0; }
/* avoid double-spacing inside cards3 grid */
.cards3 .card + .card{ margin-top:0; }

/* カード内：先頭/末尾の余白を整える（カード上部の空きが広すぎる対策） */
.card > :first-child{ margin-top:0; }
.card > :last-child{ margin-bottom:0; }

/* ---- Top page spacing tweaks ---- */
/* top.html の <style> にある .hero-figure{margin:0;} を上書きして、画像と次ブロックの間に余白を作る */
main.container .hero-figure{ margin: 0 0 16px; }

/* 明示的な空きが欲しい場合のユーティリティ */
.spacer{ height: 16px; }


/* ---- Buttons (Top / CTA) ---- */
.btn-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  line-height:1;
  border:1px solid transparent;
}

.btn.primary{
  background: var(--accent);
  color:#fff;
}
.btn.primary:hover{ background: var(--accent-hover); }
.btn.primary:visited{ color:#fff; }

.btn.secondary{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn.secondary:hover{ background: var(--nav-hover-bg); }
.btn.secondary:visited{ color: var(--text); }

/* Optional: visually mark placeholder links if needed */
.btn.is-dummy{
  opacity:.85;
}

.card .muted{
  font-size: 0.85em;
  margin-top: .5rem;
}

.card .card-foot{
  font-size: 0.9rem;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid #eee;
}

/* 汎用情報カード（意味なし）：.note の形状に合わせて色だけ変える */
.note.plain{
  background:#f5f5f5;
  /* 枠・角丸・padding・margin は .note を継承する */
}

/* plain の中だけ本文の色を少し濃くしたい場合（任意） */
/*
.note.plain .body{
  color: var(--text);
}
*/
}

.note .note-title{
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}