/* ==============================
 Theme variables
============================== */
:root{
--bg-main: #fafafa;
--bg-sub: #f1f4f2;
--text-main: #1f2a24;
--text-sub: #55625b;
--border-main: #d6ded9;
--accent-main: #4f6f64;
--link-main: #2f6d5a;
--content-max: 760px;
--radius-main: 10px;
--shadow-soft: 0 1px 6px rgba(0,0,0,.06);
}
*{ box-sizing: border-box; }
body{
margin: 0;
background: var(--bg-main);
color: var(--text-main);
font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
line-height: 1.8;
}
a{
color: var(--link-main);
text-decoration: underline;
text-underline-offset: .18em;
}
img{
max-width: 100%;
height: auto;
}
/* ==============================
 Layout
============================== */
.site-shell{
min-height: 100svh;
display: flex;
flex-direction: column;
}
.site-header,
.site-main,
.site-footer{
width: 100%;
}
.site-inner{
max-width: var(--content-max);
margin: 0 auto;
padding: 0 18px;
}
/* ==============================
 Header
============================== */
.site-header{
background: var(--bg-main);
border-bottom: 1px solid var(--border-main);
}
.site-header .site-inner{
padding: 20px 18px 14px;
}
.site-title{
margin: 0;
font-size: clamp(22px, 3vw, 30px);
letter-spacing: .02em;
line-height: 1.35;
}
/* ==============================
 Main content
============================== */
.site-main{
flex: 1;
padding: 22px 0 30px;
}
.article-body p{
margin: 0 0 1em;
}
.article-body p + p{
margin-top: .9em;
}
/* Headings */
.article-body h2,
.article-body h3,
.article-body h4{
margin: 1.5em 0 .6em;
line-height: 1.35;
}
.article-body h2{
font-size: 1.4rem;
padding: .55em .8em;
background: var(--bg-sub);
border: 1px solid var(--border-main);
border-left: 4px solid var(--accent-main);
border-radius: var(--radius-main);
}
.article-body h3{
font-size: 1.2rem;
padding-bottom: .25em;
border-bottom: 1px solid var(--border-main);
}
.article-body h4{
font-size: 1.05rem;
color: var(--text-sub);
}
/* Lists */
.article-body ul,
.article-body ol{
padding-left: 1.4em;
margin: .6em 0 1.2em;
}
.article-body li{
margin: .35em 0;
}
/* Tables */
.article-body table{
width: 100%;
border-collapse: collapse;
margin: 1.1em 0 1.4em;
background: #ffffff;
border: 1px solid var(--border-main);
border-radius: var(--radius-main);
overflow: hidden;
}
.article-body thead th{
background: var(--bg-sub);
text-align: left;
font-weight: 600;
}
.article-body th,
.article-body td{
padding: 11px 12px;
border-bottom: 1px solid var(--border-main);
vertical-align: top;
}
.article-body tr:last-child td{
border-bottom: none;
}
/* Images center aligned */
.article-body img{
display: block;
margin: 16px auto;
}
/* Blockquote */
.article-body blockquote{
margin: 1.2em 0;
padding: .9em 1em;
background: var(--bg-sub);
border-left: 4px solid var(--accent-main);
border-radius: var(--radius-main);
color: var(--text-sub);
}
/* ==============================
 Footer
============================== */
.site-footer{
background: var(--bg-sub);
border-top: 1px solid var(--border-main);
padding: 18px 0;
}
.footer-nav-list{
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 16px;
}
.footer-nav-list a{
display: inline-block;
padding: 8px 14px;
border: 1px solid var(--border-main);
border-radius: 999px;
background: #ffffff;
text-decoration: none;
color: var(--text-main);
}
.footer-nav-list a:hover{
box-shadow: var(--shadow-soft);
}
.footer-copy{
margin-top: 12px;
text-align: center;
font-size: .92rem;
color: var(--text-sub);
}
/* ==============================
 Responsive
============================== */
@media (max-width: 480px){
.site-header .site-inner{
padding-top: 16px;
}
.site-main{
padding-top: 16px;
}
.article-body th,
.article-body td{
padding: 9px 10px;
}
}