body { background-color: #dedac8; color: #111111; font-family: "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif; font-size: 14px; line-height: 1.55; margin: 0; }
a:link { color: #0000cc; } a:visited { color: #663399; }
.page { background-color: #fffbea; border: 1px solid #285b35; box-sizing: border-box; margin: 8px; width: calc(100% - 16px); }
.layout { width: 100%; }
.mast { background-color: #e9e3c8; border: 3px double #285b35; padding: 8px 12px; vertical-align: middle; }
.mast img { vertical-align: middle; }
.site-title { color: #285b35; font-family: serif; font-size: 27px; font-weight: bold; margin: 0 0 0 12px; }
.subtitle { color: #7a2f24; font-size: 13px; margin: 0 0 0 84px; }
.sidebar { background-color: #eee9d5; border: 1px solid #8b8b72; box-sizing: border-box; padding: 10px; width: 180px; }
.menu { border: 1px solid #6d785f; font-size: 13px; width: 100%; }
.menu-item { background-color: #fffbea; border: 1px solid #bdb9a7; }
.main { box-sizing: border-box; padding: 12px 18px 24px 18px; width: auto; }
h1 { border: 2px solid #285b35; color: #285b35; font-family: serif; font-size: 21px; margin: 0 0 14px 0; padding: 2px 4px; }
h2 { background-color: #eee8cb; border: 1px solid #285b35; color: #285b35; font-size: 16px; margin: 18px 0 8px 0; padding: 3px 7px; }
h3 { color: #7a2f24; font-size: 14px; margin: 0 0 3px 0; }
p { margin: 7px 0 11px 0; } .small { font-size: 11px; line-height: 1.4; }
.date { color: #7a2f24; font-weight: bold; } .right { text-align: right; }
.latest { border: 1px solid #7a2f24; padding: 8px 12px; }
.rule { border: 1px solid #aaa58f; margin: 14px 0; }
.record { border: 1px dotted #8f8a79; padding: 5px 4px 12px 4px; }
.old-record { font-size: 13px; line-height: 1.45; }
.ledger { border: 1px solid #596b54; width: 100%; } .ledger th { background-color: #dfe4cf; border: 1px solid #8b8b72; padding: 3px; }
.ledger td { border: 1px solid #aaa58f; padding: 4px; vertical-align: top; }
.brown { border: 1px solid #7a2f24; color: #7a2f24; }
.counter { background-color: #111111; color: #eeeecc; font-family: monospace; font-size: 18px; padding: 2px 6px; }
.center { text-align: center; } .notice { border: 2px dotted #7a2f24; padding: 10px; }
.archive-page { background-color: #fffbea; border: 2px solid #7a2f24; box-sizing: border-box; margin: 8px; width: calc(100% - 16px); }
.archive-layout { width: 100%; } .era-mast { background-color: #eee8cb; border: 1px solid #7a2f24; color: #285b35; font-family: serif; font-size: 20px; padding: 6px; }
.era-mast img { vertical-align: middle; } .archive-side { background-color: #e8e3d1; border: 1px solid #9d9480; font-size: 12px; padding: 7px; width: 115px; }
.archive-main { box-sizing: border-box; padding: 8px 18px 18px 18px; width: auto; } .archive-main h2 { background-color: #fffbea; border: 0; color: #7a2f24; font-size: 14px; padding: 0; }
.memo-table { border: 1px solid #8b8b72; margin: 8px 0 14px 0; width: 100%; } .memo-table td { border: 1px solid #c3beaa; padding: 5px; }
.later-page { border: 2px solid #596b54; } .later-page .mast { background-color: #ddd9c9; }
.dormant-page { background-color: #f8f5e6; border: 1px solid #8b8b72; box-sizing: border-box; margin: 8px; padding: 10px; width: calc(100% - 16px); }
.dormant-main { border: 1px solid #b3ad99; padding: 12px 20px 22px 20px; } .dormant-main h1 { border: 0; color: #7a2f24; }
.moved-page { border: 3px double #285b35; } .migration-strip { background-color: #e7e2ce; border: 1px solid #8b8b72; font-size: 11px; padding: 3px 6px; }
.diary-photo img { height: auto; max-width: 100%; }

@media screen and (max-width: 700px) {
body { font-size: 15px; overflow-wrap: anywhere; }
.page, .archive-page, .dormant-page { margin: 4px; width: calc(100% - 8px); }
.layout, .layout > tbody, .layout > tbody > tr, .layout > tbody > tr > td,
.archive-layout, .archive-layout > tbody, .archive-layout > tbody > tr, .archive-layout > tbody > tr > td { box-sizing: border-box; display: block; width: 100%; }
.mast, .era-mast { padding: 7px; }
.mast img, .era-mast img { height: 36px; width: 48px; }
.site-title { font-size: 22px; margin-left: 6px; }
.subtitle { display: block; font-size: 12px; margin: 4px 0 0 0; }
.sidebar, .archive-side { padding: 7px; width: 100%; }
.menu { table-layout: fixed; width: 100%; }
.menu-item { padding: 7px; }
.main, .archive-main { padding: 10px 9px 20px 9px; width: 100%; }
.dormant-main { padding: 10px 9px 18px 9px; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
.ledger { display: block; max-width: 100%; overflow-x: auto; }
.wide-ledger > tbody { display: table; min-width: 640px; width: 100%; }
}