/* ==============================
 Theme
============================== */
:root{
--c-bg: #f6f7f6;
--c-panel: #ffffff;
--c-ink: #1b2420;
--c-ink-sub: #55615b;
--c-line: #d9e0dc;
--c-accent: #2f6d5a;
--c-accent-soft: #e6f1ed;
--w-max: 780px;
--r: 12px;
--shadow: 0 1px 10px rgba(0,0,0,.06);
}
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
margin: 0;
background: var(--c-bg);
color: var(--c-ink);
font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
line-height: 1.85;
}
a{
color: var(--c-accent);
text-decoration: underline;
text-underline-offset: .18em;
}
a:hover{ text-decoration-thickness: 2px; }
img{ max-width: 100%; height: auto; }
/* ==============================
 Structure (changed)
============================== */
.frame{
min-height: 100svh;
display: flex;
flex-direction: column;
}
.bar-top{
background: var(--c-panel);
border-bottom: 1px solid var(--c-line);
}
.bar-top__in{
max-width: var(--w-max);
margin: 0 auto;
padding: 18px 18px 14px;
}
.brandline{
display: flex;
flex-direction: column;
gap: 4px;
}
.brandline__name{
margin: 0;
font-size: clamp(22px, 3.2vw, 32px);
line-height: 1.25;
letter-spacing: .02em;
}
.brandline__desc{
margin: 0;
color: var(--c-ink-sub);
font-size: .95rem;
}
.stage{
flex: 1;
padding: 22px 0 30px;
}
.stage__in{
max-width: var(--w-max);
margin: 0 auto;
padding: 0 18px;
}
/* article wrapper (panel) */
.sheet{
background: var(--c-panel);
border: 1px solid var(--c-line);
border-radius: var(--r);
box-shadow: var(--shadow);
padding: 18px 18px 10px;
}
/* ==============================
 Content styling (no classes on tags)
============================== */
.sheet p{
margin: 0 0 1em;
}
.sheet p + p{
margin-top: .9em;
}
.sheet h2, .sheet h3, .sheet h4{
margin: 1.55em 0 .65em;
line-height: 1.35;
letter-spacing: .02em;
}
.sheet h2{
font-size: 1.42rem;
padding: .55em .8em;
background: var(--c-accent-soft);
border: 1px solid var(--c-line);
border-left: 5px solid var(--c-accent);
border-radius: calc(var(--r) - 2px);
}
.sheet h3{
font-size: 1.2rem;
padding-bottom: .25em;
border-bottom: 1px solid var(--c-line);
}
.sheet h4{
font-size: 1.05rem;
color: var(--c-ink-sub);
}
.sheet ul, .sheet ol{
padding-left: 1.4em;
margin: .65em 0 1.2em;
}
.sheet li{
margin: .35em 0;
}
.sheet table{
width: 100%;
border-collapse: collapse;
margin: 1.15em 0 1.35em;
border: 1px solid var(--c-line);
border-radius: var(--r);
overflow: hidden;
background: var(--c-panel);
}
.sheet thead th{
background: #f0f5f2;
text-align: left;
font-weight: 600;
}
.sheet th, .sheet td{
padding: 11px 12px;
border-bottom: 1px solid var(--c-line);
vertical-align: top;
}
.sheet tr:last-child td{
border-bottom: none;
}
/* images center aligned by default */
.sheet img{
display: block;
margin: 16px auto;
}
.sheet blockquote{
margin: 1.2em 0;
padding: .95em 1em;
background: #f3f7f5;
border-left: 5px solid var(--c-accent);
border-radius: var(--r);
color: var(--c-ink-sub);
}
.sheet code{
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: .95em;
background: #f3f7f5;
padding: .15em .35em;
border: 1px solid var(--c-line);
border-radius: 6px;
}
.sheet pre{
margin: 1.15em 0;
padding: 12px 14px;
background: #f3f7f5;
border: 1px solid var(--c-line);
border-radius: var(--r);
overflow: auto;
}
.sheet pre code{
background: transparent;
border: none;
padding: 0;
}
/* ==============================
 Footer (menu inline)
============================== */
.bar-bottom{
background: #eef2f0;
border-top: 1px solid var(--c-line);
padding: 18px 0;
}
.bar-bottom__in{
max-width: var(--w-max);
margin: 0 auto;
padding: 0 18px;
}
.footgrid{
display: grid;
gap: 12px;
justify-items: center;
}
.footnav{
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
justify-content: center;
}
.footnav a{
display: inline-block;
padding: 8px 14px;
background: var(--c-panel);
border: 1px solid var(--c-line);
border-radius: 999px;
text-decoration: none;
color: var(--c-ink);
}
.footnav a:hover{
box-shadow: var(--shadow);
}
.footcopy{
margin: 0;
color: var(--c-ink-sub);
font-size: .92rem;
text-align: center;
}
/* ==============================
 Small screens
============================== */
@media (max-width: 480px){
.bar-top__in{ padding-top: 16px; }
.stage{ padding-top: 16px; }
.sheet{ padding: 16px 14px 8px; }
.sheet th, .sheet td{ padding: 9px 10px; }
.footnav a{ padding: 8px 12px; }
}