/* =========================
 基本設定（配色はFP向けに落ち着いたネイビー×ティール）
 ========================= */
:root{
--bg: #ffffff;
--fg: #18222d; /* 文字（やや濃紺寄りのダーク） */
--muted:#6a7786; /* 補助テキスト */
--brand:#137a6a; /* ティール（アクセント） */
--brand-weak:#e6f2ef;/* ティール淡色 */
--border:#e7ecf1;/* 枠線 */
--navy:#0f334d;/* ヘッダー見出し用の濃紺 */
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
margin:0;
color:var(--fg);
background:var(--bg);
font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
line-height:1.8;
font-size:16px;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* =========================
 レイアウト
 ========================= */
.wrap{
max-width:1200px;
margin:0 auto;
padding:0 20px;
}
.site-header{
padding:28px 0 18px;
border-bottom:1px solid var(--border);
}
.site-header h1{
margin:0 0 14px;
font-size:28px;
letter-spacing:.02em;
color:var(--navy);
}
.site-header h1 a{
margin:0 0 14px;
font-size:28px;
letter-spacing:.02em;
color:var(--navy);
text-decoration: none;
}
.header-hero{/* ヘッダー画像（任意） */
margin:0 0 18px;
border-radius:12px;
overflow:hidden;
background:#f5f7fa;
}
.header-hero img{
display:block;
width:100%;
height:auto;
}
/* 2カラム（PC） */
.main{
display:grid;
grid-template-columns: 260px 1fr;
gap:28px;
padding:28px 0 40px;
}
/* 左メニュー（サイドバー） */
.sidebar{
border:1px solid var(--border);
border-radius:14px;
padding:14px;
background:#fff;
position:sticky;
top:18px; /* スクロール追尾は不要＝固定化はしない。stickyは表示上の配慮が不要なら外してOK */
}
.sidebar h2{
margin:4px 0 10px;
font-size:16px;
color:var(--navy);
}
.side-nav{
list-style:none;
margin:0;
padding:0;
}
.side-nav li{
margin:0;
border-top:1px solid var(--border);
}
.side-nav li:first-child{ border-top:none; }
.side-nav a{
display:block;
padding:12px 8px;
text-decoration:none;
color:var(--fg);
}
.side-nav a:hover{
background:var(--brand-weak);
}
/* 本文エリア */
.content{
border:1px solid var(--border);
border-radius:14px;
padding:24px 20px;
background:#fff;
}
/* =========================
 本文の要素（見出し・リスト・表）
 ※ 見出しやul/ol/tableにはクラスを付与しない前提
 ========================= */
.content h2{
margin:8px 0 14px;
padding:12px 14px;
font-size:22px;
line-height:1.5;
color:#fff;
background:linear-gradient(135deg, var(--navy) 0%, #184e74 100%);
border-radius:10px;
}
.content h3{
margin:26px 0 10px;
padding-left:12px;
font-size:18px;
border-left:4px solid var(--brand);
color:var(--navy);
}
.content h4{
margin:18px 0 8px;
font-size:16px;
color:var(--fg);
padding-bottom:6px;
border-bottom:2px solid var(--border);
}
/* 段落：段落間の行間（間隔）を適度に */
.content p{ margin:0; }
.content p + p{ margin-top:1em; }/* 段落と段落の間 */
.content a{ color:var(--brand); }
/* 画像：デフォルトで中央寄せ */
.content img{
display:block;
max-width:100%;
height:auto;
margin:1.2em auto;
border-radius:8px;
}
/* リスト */
.content ul,
.content ol{
padding-left:1.4em;
margin:0.6em 0 1.2em;
}
.content li{ margin:0.2em 0; }
/* テーブル */
.content table{
width:100%;
border-collapse:collapse;
margin:1em 0;
font-size:15px;
}
.content th,
.content td{
border:1px solid var(--border);
padding:10px 12px;
vertical-align:top;
}
.content th{
background:#f8fbfd;
color:var(--navy);
text-align:left;
white-space:nowrap;
}
/* 補足ボックス（任意で使える汎用） */
.note{
margin:1.2em 0;
padding:12px 14px;
border:1px solid var(--border);
background:#fcfefe;
border-radius:10px;
color:var(--muted);
}
/* =========================
 フッター
 - PC: サイドバーにメニュー、フッターは法定系リンク中心
 - SP: メニューはフッターへ表示
 ========================= */
.site-footer{
border-top:1px solid var(--border);
background:#fff;
margin-top:20px;
}
.footer-inner{
padding:18px 20px 26px;
}
.footer-links{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.footer-links a{
text-decoration:none;
color:var(--fg);
}
.footer-links a:hover{ text-decoration:underline; }
/* スマホ専用メニュー（SP時のみ表示） */
.sp-menu{
margin:12px 0 0;
border-top:1px dashed var(--border);
padding-top:12px;
}
.sp-menu h2{
margin:0 0 8px;
font-size:15px;
color:var(--navy);
}
.sp-menu ul{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:1fr 1fr;
gap:6px 12px;
}
.sp-menu a{
text-decoration:none;
color:var(--fg);
padding:6px 0;
}
/* =========================
 レスポンシブ
 ========================= */
@media (max-width: 960px){
.main{
grid-template-columns: 1fr;
gap:18px;
padding:20px 0 28px;
}
.sidebar{ display:none; }/* SPでは左メニューを隠す */
.footer-inner{ padding-bottom:32px; }
.sp-menu{ display:block; } /* SPではフッターにメニュー表示 */
}
@media (min-width: 961px){
.sp-menu{ display:none; }/* PCではSPメニューを隠す */
}