/* ===== Theme ===== */
:root{
/* 周囲の背景：やさしいオレンジ */
--edge-bg: #fff3e3;
/* メインカラム内のアクセント（オレンジに馴染むトーン） */
--accent: #b45f2a;
--accent-weak: #fde9da;
--ink: #2b2b2b;
--muted: #6c6c6c;
--line: #e7e2dc;
--panel: #ffffff;
}
/* ===== Reset-ish base ===== */
html, body { height: 100%; }
body{
margin:0;
background: var(--edge-bg); /* 周囲はオレンジ系 */
color: var(--ink);
font-family: "Meiryo", system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
font-size:16px;
line-height:1.8;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a{ color: var(--accent); text-decoration: underline; }
a:hover{ text-decoration: none; }
/* ===== Layout ===== */
.page{
min-height:100%;
display:flex;
flex-direction:column;
}
.shell{
width:100%;
max-width:800px;/* 指定の最大幅 */
margin:0 auto;
box-sizing:border-box;
padding:0 18px;
}
.panel{
background: var(--panel);
box-shadow: 0 2px 10px rgba(180,95,42,0.08);
border-left: 1px solid var(--line);
border-right: 1px solid var(--line);
}
/* ===== Header with menu ===== */
.masthead{
border-bottom:1px solid var(--line);
background: linear-gradient(0deg, #fff, #fff 60%, var(--accent-weak));
}
.masthead .shell{ padding: 22px 18px 10px; }
.brand{
margin:0 0 12px;
font-size: clamp(20px, 3.6vw, 28px);
line-height:1.3;
color:#3a2a1d;
letter-spacing: .02em;
}
nav.primary{
margin: 0 0 8px;
}
.menu{
display:flex;
flex-wrap: wrap;/* 横に並びきらない場合は折り返す */
gap:10px 12px;
list-style:none;
padding:0;
margin:0;
}
.menu > li{ margin:0; }
.menu > li > a{
display:inline-block;
text-decoration:none;
color:#3a2a1d;
padding:8px 12px;
border:1px solid var(--line);
border-radius:8px;
background:#fff;
transition: transform .02s ease-in;
}
.menu > li > a:active{ transform: translateY(1px); }
/* ===== Main ===== */
main .shell{ padding: 26px 18px 40px; }
.content{ }
.content p{ margin:0 0 1.1em; }
.content p + p{ margin-top:1.1em; }
/* 見出し（本文側のタグに class は付けない） */
.content h2, .content h3, .content h4{
color:#3a2a1d;
line-height:1.5;
margin: 2.0em 0 .8em;
}
.content h2{
font-size: clamp(20px, 3.5vw, 24px);
padding: 8px 10px;
background: var(--accent-weak);
border-left: 4px solid var(--accent);
border-radius: 6px;
}
.content h3{
font-size: clamp(18px, 3.2vw, 21px);
padding-bottom: 6px;
border-bottom: 2px solid var(--accent);
}
.content h4{
font-size: clamp(16px, 2.9vw, 18px);
color: var(--accent);
}
/* 画像（本文はデフォルト中央寄せ） */
.content img{
display:block;
max-width:100%;
height:auto;
margin:16px auto;
}
/* リスト */
.content ul, .content ol{
margin:1.1em 0;
padding-left:1.4em;
}
.content li{ margin:.35em 0; }
.content li::marker{ color: var(--accent); }
/* テーブル */
.content table{
width:100%;
border-collapse: collapse;
margin: 1.2em 0;
font-size:15px;
}
.content th, .content td{
border:1px solid var(--line);
padding:10px 12px;
text-align:left;
vertical-align:top;
background:#fff;
}
.content thead th{
background:#fff8f1;
color:#3a2a1d;
font-weight:700;
}
.content tbody tr:nth-child(even){ background:#faf7f3; }
/* ===== Footer ===== */
footer.sitefoot{
margin-top:auto;
border-top:1px solid var(--line);
background: #fff;
}
footer.sitefoot .shell{ padding: 18px; }
.foot-links{
display:flex;
flex-wrap:wrap;
gap:10px 16px;
margin:0 0 10px;
}
.foot-links a{
text-decoration:none;
color:#3a2a1d;
padding:6px 8px;
border-bottom:1px dotted var(--line);
}
.copyright{
font-size:12px;
color: var(--muted);
}
/* ===== Small tweaks ===== */
@media (max-width: 520px){
.menu > li > a{ padding:8px 10px; }
.content table{ font-size:14px; }
}