/* ------------------------------
 Base
------------------------------ */
:root {
--bg: #ffffff;
--fg: #222;
--muted: #6b7280; /* gray-500 */
--accent: #0ea5e9; /* sky-500 */
--accent-2: #22c55e; /* green-500 */
--border: #e5e7eb; /* gray-200 */
--shadow: rgba(0,0,0,.06);
--maxw: 600px; /* Main column max width */
}
html, body {
height: 100%;
}
body {
margin: 0;
color: var(--fg);
background: var(--bg);
font-family: "Meiryo", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Layout */
.wrap {
min-height: 100dvh;
display: flex;
flex-direction: column;
}
header {
padding: 32px 16px 16px;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%);
}
header h1 {
margin: 0;
font-size: clamp(22px, 4vw, 28px);
font-weight: 700;
letter-spacing: .02em;
text-align: center;
color: #0f172a; /* slate-900 */
}
main {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 24px 16px 48px;
}
/* Content area defaults (no custom classes required on tags) */
main p { margin: 0; }
main p + p { margin-top: 1em; } /* 段落間の行間を適度に */
main img {
display: block; /* 中央寄せのため */
margin: 16px auto; /* デフォルト中央寄せ */
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 10px var(--shadow);
}
/* Headings (H2?H4 の装飾) */
main h2, main h3, main h4 { color: #0f172a; }
main h2 {
position: relative;
margin: 32px 0 16px;
padding: 12px 14px 12px 14px;
font-size: clamp(18px, 3.6vw, 22px);
font-weight: 800;
background: #f1f5f9; /* slate-100 */
border-left: 6px solid var(--accent);
border-radius: 8px;
}
main h3 {
position: relative;
margin: 28px 0 12px;
padding-bottom: 8px;
font-size: clamp(16px, 3.2vw, 20px);
font-weight: 700;
border-bottom: 2px solid #e2e8f0; /* slate-200 */
}
main h4 {
margin: 20px 0 8px;
font-size: clamp(15px, 3vw, 18px);
font-weight: 700;
}
/* Lists */
main ul, main ol {
padding-left: 1.4em;
margin: 0.8em 0 1.2em;
}
main li { margin: .4em 0; }
/* Table (no class on table required) */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 16px 0 24px;
}
main table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
min-width: 480px; /* 小画面で横スクロール可能に */
border: 1px solid var(--border);
box-shadow: 0 1px 8px var(--shadow);
}
main th, main td {
border: 1px solid var(--border);
padding: 10px 12px;
vertical-align: top;
background: #fff;
}
main thead th {
background: #f8fafc;
font-weight: 700;
text-align: left;
}
main tbody tr:nth-child(odd) td { background: #fcfdff; }
/* Callouts (optional) */
.note {
margin: 16px 0;
padding: 12px 14px;
border: 1px solid #c7e7ff;
background: #f0f9ff;
border-radius: 8px;
color: #0c4a6e;
}
/* Footer menu */
footer {
margin-top: auto;
border-top: 1px solid var(--border);
background: #ffffff;
}
.footer-inner {
max-width: var(--maxw);
padding: 20px 16px 28px;
margin: 0 auto;
}
.footer-menu {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
justify-content: center;
list-style: none;
padding: 0;
margin: 0 0 10px;
}
.footer-menu a {
color: var(--fg);
text-decoration: none;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid transparent;
}
.footer-menu a:hover {
border-color: var(--border);
background: #fafafa;
text-decoration: none;
}
.copyright {
text-align: center;
color: var(--muted);
font-size: 13px;
}
/* Responsive tweaks */
@media (max-width: 640px) {
.footer-menu {
flex-direction: column; /* SPでは縦並び */
align-items: stretch;
}
.footer-menu li a { text-align: center; }
}