/* ===== 共通の見た目（ヘッダー/フッター/本文） ===== */

:root{
  --font: 'Hiragino Sans','Noto Sans JP',system-ui,sans-serif;
  --bg: #f9fafb;
  --card-bg:#fff;
  --accent:#8cc8ea;
  --accent-soft:#cce5f6;
  --section-bg:#e6f4fa;
  --border:#e5e7eb;
}

html,body{ margin:0; padding:0; }
body{
  font-family: var(--font);
  line-height:1.9;
  background:var(--bg);
  color:#111827;
}

/* ヘッダー */
.site-header{
  background:var(--accent-soft);
  border-bottom:3px solid var(--accent);
  text-align:center;
  padding:1.5rem;
}
.site-header .site-nav{
  margin: .5rem 0 0;
}
.site-header a{
  color:#0b3a52; text-decoration:none;
}
.site-header a:hover{ text-decoration:underline; }

/* 本文ラッパー */
.site-main{
  max-width:980px; margin:auto;
  background:var(--card-bg);
  padding:2rem;
  border-radius:14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* 見出しや装飾 */
h1{ font-size:1.7rem; margin:0 0 1rem; }
h2{
  background:var(--section-bg);
  border-left:6px solid var(--accent);
  padding: .55rem .9rem;
  margin:1.5rem 0 .8rem;
}
h3{ margin-top:1.2rem; }

code, pre{ background:#0f172a; color:#e5e7eb; border-radius:6px; }
code{ padding:.2rem .4rem; }
pre{ padding: .8rem; overflow:auto; }

/* 便利クラス */
.tip{
  background:#f3f4f6; border-left:4px solid var(--accent);
  padding:.6rem .8rem; border-radius:8px;
}
.checkpoint{
  background:#fff7ed; border-left:4px solid #f59e0b;
  padding:.6rem .8rem; border-radius:8px;
}
.proj{
  background:#eef2ff; border:1px solid #c7d2fe;
  padding:12px; border-radius:10px;
}

/* フッター（必要なら） */
.site-footer{
  max-width:980px; margin: 16px auto 32px;
  color:#6b7280; font-size:.95rem; text-align:center;
}