/* ========= Theme Tokens ========= */
:root{
/* くすみグリーン系（落ち着いた彩度） */
--accent: #6f8f6a;
--accent-strong: #5e7c59;
--accent-weak: #e9f0ea;
--fg: #2b2b2b;
--muted: #6b6b6b;
--bg: #ffffff;
--line: #e6e6e6;
}
/* ========= Base ========= */
html,body{height:100%}
body{
margin:0;
color:var(--fg);
background:var(--bg);
font-family: "Meiryo", system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
line-height:1.8;
font-size:16px;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a{color:var(--accent-strong); text-decoration:underline;}
a:hover{text-decoration:none;}
/* ========= Layout ========= */
.site{
min-height:100%;
display:flex;
flex-direction:column;
}
.wrap{
width:100%;
max-width:600px; /* 指定の最大幅 */
padding:0 16px;
margin:0 auto;
box-sizing:border-box;
}
/* ========= Header ========= */
header{
border-bottom:1px solid var(--line);
background:linear-gradient(0deg, #f8faf8 0%, #ffffff 100%);
}
header .wrap{padding:28px 16px;}
header h1{
margin:0;
font-size: clamp(20px, 3.8vw, 28px);
letter-spacing:.02em;
color:#223322;
font-weight:700;
}
/* ========= Main / Typography ========= */
main .wrap{padding:28px 16px 40px;}
article{word-break:normal;}
/* 段落の間隔（行間ではなく段落間を広げる） */
article p{margin:0 0 1.1em;}
article p + p{margin-top:1.1em;}
/* 見出し（classなしのタグを装飾） */
article h2, article h3, article h4{
color:#1f2d1f;
line-height:1.5;
margin:2.0em 0 .8em;
}
article h2{
font-size: clamp(20px, 3.6vw, 24px);
padding-left:12px;
border-left:4px solid var(--accent);
background: linear-gradient(90deg, var(--accent-weak), transparent 60%);
}
article h3{
font-size: clamp(18px, 3.2vw, 21px);
border-bottom:2px solid var(--accent);
padding-bottom:6px;
}
article h4{
font-size: clamp(16px, 2.9vw, 18px);
color: var(--accent-strong);
}
/* 画像（本文はデフォルト中央寄せ） */
article img{
display:block;
max-width:100%;
height:auto;
margin:16px auto;/* 中央寄せ */
}
/* リスト（ul/ol） */
article ul, article ol{
padding-left:1.4em;
margin:1.1em 0;
}
article li{margin:.35em 0;}
article li::marker{color:var(--accent-strong);}
/* テーブル（classなし） */
article table{
width:100%;
border-collapse:collapse;
margin:1.2em 0;
font-size:15px;
}
article th, article td{
border:1px solid var(--line);
padding:10px 12px;
text-align:left;
vertical-align:top;
}
article thead th{
background:var(--accent-weak);
color:#243224;
font-weight:700;
}
article tbody tr:nth-child(even){background:#fafafa}
/* ========= Footer ========= */
footer{
margin-top:auto;
border-top:1px solid var(--line);
background:#f9fbf9;
}
.footer-inner{
padding:16px 0 24px;
}
.footer-brand{
font-size:14px;
color:var(--muted);
margin:0 0 10px;
}
.footer-nav{
display:flex;
flex-wrap:wrap;
gap:10px 16px;
}
.footer-nav a{
text-decoration:none;
color:inherit;/* リンクでも色を変えない */
padding:6px 10px;
border:1px solid var(--line);
border-radius:6px;
background:#fff;
}
.footer-copy{
margin-top:14px;
font-size:12px;
color:var(--muted);
}
/* ========= Responsive tweaks ========= */
@media (max-width: 480px){
.footer-nav{
flex-direction:column;/* スマホは縦並び */
gap:8px;
}
.footer-nav a{padding:8px 10px;}
article table{font-size:14px;}
}