html {
    background-color: #fff;
}

body {
    background-color: #ccc;
}

main {
    max-width: 800px;
    padding: 10px;
    margin: auto;
    background-color: #eee;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 10px 0 10px 0;
    padding-left: 6px;
    background-color: #ddd;
}

h1 {
    border-left: 10px solid #f22;
    border-bottom: 2px solid #f11;
}

h2 {
    border-left: 8px solid #2f2;
    border-bottom: 1px solid #1f1;
}

h3 {
    border-left: 6px solid #22f;
    border-bottom: 1px solid #11f;
}

h4 {
    border-left: 4px solid #2ff;
    border-bottom: 1px solid #1ff;
}

h5 {
    border-left: 3px solid #f2f;
    border-bottom: 1px solid #f1f;
}

h6 {
    border-left: 2px solid #ff2;
    border-bottom: 1px solid #ff1;
}

p {
    margin: 0;
    padding: 4px 0;
}

.spacer {
    height: 10px;
}

.notice {
    background-color: #0f02;
    border-left: 4px solid #4a4;
    padding: 10px;
    margin: 10px 0;
}

.notice-head {
    font-weight: bold;
    color: #4a4;
}
.caution {
    background-color: #ff02;
    border-left: 4px solid #aa4;
    padding: 10px;
    margin: 10px 0;
}

.caution-head {
    font-weight: bold;
    color: #aa4;
}

.warning {
    background-color: #f002;
    border-left: 4px solid #a44;
    padding: 10px;
    margin: 10px 0;
}

.warning-head {
    font-weight: bold;
    color: #a44;
}

code {
    padding: 0 4px;
    background-color: #aaa;
    border-radius: 4px;
}

del {
    padding: 0 4px;
    border-radius: 4px;
}

ins {
    padding: 0 4px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

del.fill {
    background-color: #f448;
    padding: 0 4px;
    border-radius: 4px;
}

ins.fill {
    background-color: #4f48;
    padding: 0 4px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

.ref {
    padding: 10px;
    background-color: #bbb;
    border-radius: 8px;
}

summary {
    font-size: 1.6rem;
}

.font-mincho {
    font-family: serif;
}

h3 > a {
    text-decoration: none;
}

h3 > a:hover {
    text-decoration: underline;
}