:root{
  --navy:#1a3a5c; --teal:#2a7f8e; --line:#d9e2e8; --bg:#f5f7f9; --card:#ffffff;
  --text:#1e2530; --grey:#5b6672; --light:#eef4f7;
  --green:#1e7a46; --greenbg:#e6f4ea;
  --amber:#9c6a0c; --amberbg:#fdf6e7;
  --red:#a93226; --redbg:#fdecea;
  --accent:var(--teal);
}
body.theme-money{ --navy:#1a3a5c; --teal:#2a7f8e; --accent:#2a7f8e; }
body.theme-sozoku{ --navy:#2E5266; --teal:#3E7CB1; --accent:#3E7CB1; }
body.theme-health{ --navy:#1f3a5f; --teal:#2b6cb0; --accent:#2b6cb0; }
body.theme-stock{ --navy:#1f3a5f; --teal:#2b6cb0; --accent:#2b6cb0; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",system-ui,sans-serif;
  line-height:1.85; font-size:clamp(15px,1.1vw + 12px,17px);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--teal);}
a:hover{opacity:.8;}

/* ---------- ヘッダー ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--navy);color:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.15);}
.site-header .inner{max-width:920px;margin:0 auto;padding:.65rem 1rem;
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;white-space:nowrap;}
.brand:hover{opacity:.9;}
.gnav{display:flex;gap:.9rem;flex-wrap:wrap;margin-left:auto;}
.gnav a{color:#dce8ee;text-decoration:none;font-size:.82rem;padding:.25rem 0;border-bottom:2px solid transparent;}
.gnav a:hover,.gnav a.active{color:#fff;border-bottom-color:var(--teal);}

main{max-width:920px;margin:0 auto;padding:1.4rem 1rem 4rem;}

/* ---------- トップページのカード ---------- */
.hero{text-align:center;padding:2.2rem 1rem 1.6rem;}
.hero h1{font-size:clamp(1.5rem,4vw,2.1rem);color:var(--navy);margin:0 0 .5rem;}
.hero p{color:var(--grey);font-size:.95rem;max-width:560px;margin:0 auto;}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.6rem;}
@media(max-width:640px){.card-grid{grid-template-columns:1fr;}}
.card{
  display:block;background:var(--card);border-radius:14px;text-decoration:none;color:var(--text);
  border:1px solid var(--line);padding:1.3rem 1.3rem 1.5rem;
  border-top:5px solid var(--card-accent,var(--teal));
  box-shadow:0 2px 10px rgba(20,40,60,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(20,40,60,.12);}
.card .icon{font-size:1.8rem;margin-bottom:.5rem;display:block;}
.card h2{margin:0 0 .4rem;font-size:1.15rem;color:var(--navy);}
.card p{margin:0;color:var(--grey);font-size:.86rem;line-height:1.65;}
.card .updated{display:block;margin-top:.7rem;font-size:.74rem;color:#9aa5b1;}

/* ---------- 文書ページ共通 ---------- */
.doc-hero{padding:1.6rem 0 1rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem;}
.doc-hero h1{font-size:clamp(1.4rem,3.6vw,2rem);color:var(--navy);margin:0 0 .5rem;}
.doc-hero p.sub{color:var(--grey);font-size:.92rem;margin:0;}

.toc{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.2rem;margin-bottom:1.6rem;}
.toc h2{margin:0 0 .6rem;font-size:1rem;color:var(--navy);}
.toc ol{margin:0;padding-left:1.2rem;columns:1;font-size:.88rem;}
@media(min-width:640px){.toc ol{columns:2;column-gap:1.5rem;}}
.toc li{margin-bottom:.35rem;break-inside:avoid;}
.toc a{color:var(--text);text-decoration:none;}
.toc a:hover{color:var(--teal);text-decoration:underline;}

section.chapter{margin-top:2.2rem;scroll-margin-top:64px;}
.chapter-title{background:var(--navy);color:#fff;padding:.6rem .9rem;border-radius:8px;
  font-size:1.05rem;font-weight:700;margin:0 0 .9rem;}
h3.h2{color:var(--navy);font-size:1.05rem;margin:1.3rem 0 .4rem;border-bottom:2px solid var(--line);padding-bottom:.3rem;}
h4.h3{color:var(--teal);font-size:.98rem;margin:1rem 0 .3rem;}
p{margin:.5rem 0;}
ul.bullets{margin:.4rem 0 .8rem;padding-left:1.3rem;}
ul.bullets li{margin-bottom:.4rem;}
.small{font-size:.82rem;color:var(--grey);}

/* ---------- ボックス ---------- */
.box{border-radius:10px;padding:.9rem 1.1rem;margin:.9rem 0;font-size:.92rem;}
.box p{margin:.3rem 0;}
.box .box-title{font-weight:700;margin-bottom:.4rem;display:block;}
.box.info{background:var(--light);border-left:4px solid var(--teal);}
.box.info .box-title{color:var(--teal);}
.box.good{background:var(--greenbg);border-left:4px solid var(--green);}
.box.good .box-title{color:var(--green);}
.box.warn{background:var(--amberbg);border-left:4px solid var(--amber);}
.box.warn .box-title{color:var(--amber);}
.box.money{background:var(--amberbg);border-left:4px solid var(--amber);}
.box.money .box-title{color:var(--amber);}
.box.bad{background:var(--redbg);border-left:4px solid var(--red);}
.box.bad .box-title{color:var(--red);}

/* ---------- バッジ（健康ガイド用） ---------- */
.badge{display:inline-block;font-size:.74rem;font-weight:700;padding:.15rem .55rem;
  border-radius:999px;border:1px solid; margin:.2rem 0 .4rem;}
.badge-ok{color:var(--green);background:var(--greenbg);border-color:var(--green);}
.badge-cond{color:var(--amber);background:var(--amberbg);border-color:var(--amber);}
.badge-warn{color:var(--red);background:var(--redbg);border-color:var(--red);}

/* ---------- テーブル（スマホでカード表示に自動変形） ---------- */
.table-wrap{margin:.8rem 0;}
table{width:100%;border-collapse:collapse;font-size:.86rem;background:var(--card);}
table caption{caption-side:top;text-align:left;font-weight:700;color:var(--navy);margin-bottom:.4rem;}
thead th{background:var(--navy);color:#fff;font-weight:700;text-align:left;padding:.55rem .7rem;}
tbody td{padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top;}
tbody tr:nth-child(even){background:var(--light);}
tbody tr.hl{background:var(--redbg);}
td.center,th.center{text-align:center;}

@media(max-width:640px){
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap th, .table-wrap td, .table-wrap tr{
    display:block; width:100%;
  }
  .table-wrap thead{position:absolute; top:-9999px; left:-9999px;} /* 見出し行は非表示にしてラベルで代替 */
  .table-wrap tr{margin-bottom:.8rem;border:1px solid var(--line);border-radius:10px;overflow:hidden;
    box-shadow:0 1px 4px rgba(20,40,60,.05);}
  .table-wrap tbody tr:nth-child(even):not(.hl){background:var(--card);}
  .table-wrap td{border-bottom:1px solid var(--line); padding:.55rem .8rem; text-align:left !important;}
  .table-wrap td:last-child{border-bottom:none;}
  .table-wrap td::before{
    content:attr(data-label); display:block; font-weight:700; font-size:.72rem;
    color:var(--teal); margin-bottom:.15rem;
  }
  .table-wrap td:empty{display:none;}
}

/* ---------- グラフ画像（株式投資メモ） ---------- */
figure.chart{margin:1rem 0;text-align:center;}
figure.chart img{border:1px solid var(--line);border-radius:8px;background:#fff;}
figure.chart figcaption{font-size:.8rem;color:var(--grey);margin-top:.4rem;}

/* ---------- フッター ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 1rem 3rem;
  text-align:center;color:var(--grey);font-size:.78rem;}
.site-footer a{color:var(--grey);}

.back-top{display:inline-block;margin-top:2rem;font-size:.85rem;text-decoration:none;color:var(--teal);}

@media print{
  .site-header,.toc,.back-top{display:none;}
}