:root {
    --help-primary: #ef7d1a;
    --help-primary-hover: #d96a12;
    --help-page: #fdf6ee;
    --help-surface: #ffffff;
    --help-text: #2e231a;
    --help-text-secondary: #5c5248;
    --help-text-muted: #8a7d6e;
    --help-border: #f8e3cd;
    --help-border-strong: #e8dbcf;
    --help-success-bg: #f2f9f4;
    --help-success-border: #cfe7d8;
    --help-success-text: #1d6f42;
    --help-warning-bg: #fff7ed;
    --help-warning-border: #d97706;
    --help-warning-text: #7c3f0b;
}

html {
    min-height: 100%;
    background: var(--help-page);
}

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans',
        'Hiragino Kaku Gothic ProN', 'Segoe UI', Roboto, Meiryo, sans-serif;
    background: var(--help-surface);
    color: var(--help-text);
    border: 1px solid var(--help-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(46, 35, 26, 0.08);
    padding: 36px 40px;
}

h1 {
    margin: 0 0 28px;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 4px solid var(--help-primary);
    color: var(--help-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
}

h2 {
    margin-top: 32px;
    padding-left: 10px;
    border-left: 3px solid var(--help-primary);
    color: var(--help-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

h3 {
    color: var(--help-text);
    font-size: 16px;
    font-weight: 700;
}

p, li, td, th, blockquote { color: var(--help-text-secondary); }
strong { color: var(--help-text); }
a { color: var(--help-primary-hover); }
a:hover { color: #a94f0c; }
a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 125, 26, 0.18);
    border-radius: 3px;
}

.tab-section,
.step,
.help-link-list li {
    background: #fffaf5;
    border: 1px solid var(--help-border);
    border-radius: 10px;
    padding: 18px 20px;
}

.tip {
    background: var(--help-success-bg);
    border-left-color: var(--help-success-border);
    color: var(--help-success-text);
}

.warn,
.note,
blockquote {
    background: var(--help-warning-bg);
    border-left-color: var(--help-warning-border);
    color: var(--help-warning-text);
}

table { border-color: var(--help-border-strong); }
th, td { border-color: var(--help-border-strong); }
th {
    background: #faf3ea;
    color: var(--help-text-secondary);
    font-weight: 600;
}

code, pre {
    background: #f7f2ed;
    color: var(--help-text);
}

hr { border-top-color: var(--help-border-strong); }
img { max-width: 100%; height: auto; }

@media (max-width: 640px) {
    body {
        margin: 12px;
        padding: 24px 18px;
        border-radius: 12px;
    }
    h1 { margin-bottom: 22px; font-size: 22px; }
    h2 { font-size: 17px; }
    .tab-section, .step, .help-link-list li { padding: 15px 14px; }
    table { display: block; overflow-x: auto; }
}