body {
    font-size: 14pt;
    font-family: 'BIZ UDPMincho', 'MS PMincho', serif;
}
body:not(.vertical) { 
    touch-action: pan-y;
}
body.vertical { 
    touch-action: pan-x;
}
article {
    line-height: 1.7em;
}
body:not(.vertical) article {
    margin-top: 2em;
}
footer {
    text-align: center;
}

h1 {
    text-align: center;
    margin: 0 auto 0.5em;
    letter-spacing: 0.5em;
    font-family: 'M PLUS 1p', 'MSGothic', sans-serif;
}
p {
    text-indent: 1em;
    margin: 0;
}
p.auther {
    text-align: right;
    margin-bottom: 1em;
}
body:not(.vertical) p.auther {
    margin-right: 1em;
}
body.vertical p.auther {
    margin-left: 1em;
}
p.chapter_title {
    text-indent: 3em;
    font-family: 'Zen Antique Soft', 'MS PMincho', serif;
}
p.chapter_number {
    text-indent: 5em;
    font-family: 'Zen Antique Soft', 'MS PMincho', serif;
}
body:not(.vertical) p.chapter_title {
    margin-top: 2em;
}
body.vertical p.chapter_title {
    margin-right: 2em;
}
body:not(.vertical) p.chapter_number {
    margin-top: 1em;
    margin-bottom: 1em;
}
body.vertical p.chapter_number {
    margin-right: 1em;
    margin-left: 1em;
}
p.reading {
    position: relative;
}
p.reading::before {
    position: absolute;
    content: '\01f516';
}
body:not(.vertical) p.reading::before {
    left: -3em;
}
body.vertical p.reading::before {
    top: -3em;
}

#endmark {
    text-align: right;
}
#wrotedate
{
    text-align: right;
    margin-right: 1em;
}
footer a {
    text-decoration: none;
}
div.buttons {
    display: flex;
    flex: 0 0;
    margin: 0.5em;
    justify-content: center;
    width: auto;
}
div.buttons div {
    border: outset 3px;
    border-radius: 5px;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
body:not(.vertical) div.buttons div {
    margin: 0 1em;
    padding: 0 0 5px;
    width: 5em;
}
body.vertical div.buttons div {
    margin: 1em 0;
    padding: 5px 5px 5px 0;
    height: 5em;
}
body:not(.vertical) div.buttons div.b_back::after {
    content: 'BACK';
}
body.vertical div.buttons div.b_back::after {
    content: '戻る';
}
body:not(.vertical) div.buttons div.b_email::after {
    content: 'E-MAIL';
}
body.vertical div.buttons div.b_email::after {
    content: '便り';
}

nav {
    font-size: 0.8em;
    user-select: none;
}

nav#content-list {
    writing-mode: horizontal-tb;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
nav#content-list > div, nav#content-list > div > div, nav#content-list > div > div > div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
nav#content-list > div {
    margin: 0 auto;
}
body.vertical nav#content-list > div {
    margin: 0 auto 0 18.5em;
}
nav#content-list > div > div a {
    margin-left: .5em;
    padding: 0 3px;
    border: outset 2px;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    text-wrap: nowrap;
}
nav#content-list > div > div > div:first-child {
    margin-left: 2em;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: 0.8em;
    text-wrap: nowrap;
}
nav#content-list .current {
    font-weight: bold;
}

section.navigation-menu > div {
    writing-mode: horizontal-tb;
    display: flex;
    justify-content: flex-start;
}
nav.menu:not(.view) a:not(.menu), nav#content-list:not(.view) {
    display: none;
}
nav.menu.view a {
    display: block;
}
nav#content-list.view  {
    display: flex;
}

section.navigation-menu div div {
    border: outset 3px;
    border-radius: 5px;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    text-align: center;
    margin: 2px;
    cursor: pointer;
}
section.navigation-menu div.menu {
    padding: 0 5px 5px 0;
    width: 1.5em;
}
section.navigation-menu div.menu::after {
    content: '≡';
}

section.fontsize > div {
    writing-mode: horizontal-tb;
    display: flex;
    justify-content: flex-start;
}
section.fontsize > div div {
    border: outset 3px;
    border-radius: 5px;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    text-align: center;
    margin: 2px;
    padding: 0 5px 5px 0;
    width: 1.5em;
    cursor: pointer;
}

section.fontsize > div div.up::after {
    content: '＋';
}
section.fontsize > div div.down::after {
    content: '－';
}
section.fontsize > div div.brightness::after {
    content: '　';
}

section.direction-toggle div {
    border: outset 3px;
    border-radius: 5px;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    text-align: center;
    margin: 2px;
    cursor: pointer;
}
body:not(.vertical) section.direction-toggle div::after {
    content: '縦書きへ';
}
body.vertical section.direction-toggle div::after {
    content: '横書きへ';
}

img:last-of-type { display: none; }

@media screen and (min-width: 900px) {
    body.vertical {
        writing-mode: vertical-rl;
    }
    body:not(.vertical) > article {
        padding: 0 3em;
    }
    body.vertical > article {
        padding: 2em 0;
    }
    section.navigation-menu > div {
        position: fixed;
        left: 0;
        top: 0;
    }
    body:not(.vertical) section.navigation-menu > div {
        flex-direction: column;
    }
    body.vertical section.navigation-menu > div {
        flex-direction: row;
    }
    body:not(.vertical) section.navigation-menu div.back, body:not(.vertical) section.navigation-menu div.prev, body:not(.vertical) section.navigation-menu div.next {
        writing-mode: vertical-rl;
        padding: 5px 5px 5px 0;
        height: 5em;
    }
    body.vertical section.navigation-menu div.back, body.vertical section.navigation-menu div.prev, body.vertical section.navigation-menu div.next {
        writing-mode: horizontal-tb;
        padding: 0 0 5px;
        width: 5em;
    }
    body:not(.vertical) section.navigation-menu div.prev::after {
        content: '手前';
    }
    body.vertical section.navigation-menu div.prev::after {
        content: 'PREV';
    }
    body:not(.vertical) section.navigation-menu div.next::after {
        content: '続き';
    }
    body.vertical section.navigation-menu div.next::after {
        content: 'NEXT';
    }
    body:not(.vertical) section.navigation-menu div.back::after {
        content: '戻る';
    }
    body.vertical section.navigation-menu div.back::after {
        content: 'BACK';
    }
    section.fontsize > div {
        position: fixed;
        right: 0;
        top: 0;
    }
    body:not(.vertical) section.fontsize > div {
        flex-direction: column;
    }
    body.vertical section.fontsize > div {
        flex-direction: row;
    }
    section.direction-toggle div {
        position: fixed;
        right: 0;
        bottom: 0;
    }
    body:not(.vertical) section.direction-toggle div {
        writing-mode: vertical-rl;
        padding: 5px 5px 5px 0;
        height: 5em;
    }
    body.vertical section.direction-toggle div {
        writing-mode: horizontal-tb;
        padding: 0 5px 5px;
        width: 5em;
    }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
    body.vertical {
        writing-mode: vertical-rl;
    }
    body:not(.vertical) > article {
        padding: 0 2em;
    }
    body.vertical > article {
        padding: 1.5em 0;
    }
    section.navigation-menu > div {
        position: fixed;
        left: 0;
        top: 0;
    }
    body:not(.vertical) section.navigation-menu > div {
        flex-direction: column;
    }
    body.vertical section.navigation-menu > div {
        flex-direction: row;
    }
    body:not(.vertical) section.navigation-menu div.back, body:not(.vertical) section.navigation-menu div.prev, body:not(.vertical) section.navigation-menu div.next {
        writing-mode: vertical-rl;
        padding: 5px 5px 5px 0;
        height: 5em;
    }
    body.vertical section.navigation-menu div.back, body.vertical section.navigation-menu div.prev, body.vertical section.navigation-menu div.next {
        writing-mode: horizontal-tb;
        padding: 0 0 5px;
        width: 5em;
    }
    body:not(.vertical) section.navigation-menu div.prev::after {
        content: '手前';
    }
    body.vertical section.navigation-menu div.prev::after {
        content: 'PREV';
    }
    body:not(.vertical) section.navigation-menu div.next::after {
        content: '続き';
    }
    body.vertical section.navigation-menu div.next::after {
        content: 'NEXT';
    }
    body:not(.vertical) section.navigation-menu div.back::after {
        content: '戻る';
    }
    body.vertical section.navigation-menu div.back::after {
        content: 'BACK';
    }
    section.fontsize > div {
        position: fixed;
        right: 0;
        top: 0;
    }
    body:not(.vertical) section.fontsize > div {
        flex-direction: column;
    }
    body.vertical section.fontsize > div {
        flex-direction: row;
    }
    section.direction-toggle div {
        position: fixed;
        right: 0;
        bottom: 0;
    }
    body:not(.vertical) section.direction-toggle div {
        writing-mode: vertical-rl;
        padding: 5px 5px 5px 0;
        height: 5em;
    }
    body.vertical section.direction-toggle div {
        writing-mode: horizontal-tb;
        padding: 0 5px 5px;
        width: 5em;
    }
}
@media screen and (max-width: 599px) {
    h1 { letter-spacing: 0; }
    body.vertical > article {
        writing-mode: vertical-rl;
    }
    html:has(body.vertical) {
        overflow-y: hidden;
    }
    body.vertical {
        overflow-y: hidden;
    }
    body:not(.vertical) > article {
        margin: 3em 3px 0;
    }
    body.vertical > article {
        margin: 3px 3em 3px 0;
    }
    p.reading::before {
        opacity: 0.5;
    }
    body:not(.vertical) p.reading::before {
        left: -1em;
    }
    body.vertical p.reading::before {
        top: -1em;
    }
    nav.menu {
        display: flex;
        justify-content: flex-start;
        position: fixed;
        right: 0;
        top: 0;
    }
    body:not(.vertical) > nav.menu {
        flex-direction: row;
    }
    body.vertical > nav.menu {
        flex-direction: column;
    }
    nav#content-list {
        width: auto;
    }
    body:not(.vertical) nav#content-list {
        top: 3em;
        right: 0;
        overflow-x: auto;
    }
    body.vertical nav#content-list {
        top: 0;
        right: 3em;
        overflow-y: auto;
    }
    nav#content-list > div {
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0 0 0 auto;
        padding: 5px;
    }
    body:not(.vertical) nav#content-list > div {
        flex-direction: column;
        width: 80%;
    }
    body.vertical nav#content-list > div {
        flex-direction: row;
        height: 80%;
    }
    body:not(.vertical) nav#content-list > div > div, body:not(.vertical) nav#content-list > div > div > div {
        flex-direction: row;
    }
    body.vertical nav#content-list > div > div, body.vertical nav#content-list > div > div > div {
        flex-direction: column;
    }
    body:not(.vertical) nav#content-list a {
        margin-bottom: 0.5em;
    }
    body.vertical nav#content-list a {
        margin-top: 0.5em;
        writing-mode: vertical-rl;
        padding: 3px 0;
    }
    body:not(.vertical) nav#content-list div.sec {
        writing-mode: horizontal-tb;
    }
    body.vertical nav#content-list div.sec {
        writing-mode: vertical-rl;
        padding-left: 0.7em;
    }
    body.vertical nav#content-list > div > div > div:first-child {
        margin-left: 0;
        margin-top: 2em;
    }
    body:not(.vertical) nav#content-list div#prologue {
        margin-left: 4em;
    }
    body.vertical nav#content-list div#prologue {
        margin-top: 4em;
        order: 3;
    }
    body.vertical nav#content-list div#juniorHighSchool {
        order: 2;
    }
    body.vertical nav#content-list div#highSchool {
        order: 1;
    }
    nav#content-list > div > div {
        align-items: flex-start;
    }
    nav#content-list > div > div > div {
        flex-wrap: wrap;
    }
    body:not(.vertical) section.navigation-menu > div {
        flex-direction: row;
    }
    body.vertical section.navigation-menu > div {
        flex-direction: column;
    }
    body section.navigation-menu div.back, body:not(.vertical) section.navigation-menu div.prev, body:not(.vertical) section.navigation-menu div.next {
        writing-mode: horizontal-tb;
        padding: 0 0 5px;
    }
    body section.navigation-menu div.prev::after {
        content: '<<';
    }
    body section.navigation-menu div.next::after {
        content: '>>';
    }
    body section.navigation-menu div.back::after {
        content: '←';
    }
    body:not(.vertical) section.fontsize > div {
        flex-direction: row;
    }
    body.vertical section.fontsize > div {
        flex-direction: column;
    }
    body:not(.vertical) section.direction-toggle div {
        writing-mode: horizontal-tb;
        padding: 0 5px 5px;
        width: 2em;
    }
    body.vertical section.direction-toggle div {
        writing-mode: vertical-rl;
        padding: 5px 5px 5px 0;
        height: 2em;
    }
    body:not(.vertical) section.direction-toggle div::after {
        content: '縦へ';
    }
    body.vertical section.direction-toggle div::after {
        content: '横へ';
    }
    body:not(.vertical) section.direction-toggle { order: 1; }
    body:not(.vertical) section.fontsize { order: 2; }
    body:not(.vertical) section.navigation-menu { order: 9; }
    body:not(.vertical) section.navigation-menu a.prev { order: 1; }
    body:not(.vertical) section.navigation-menu a.next { order: 2; }
    body:not(.vertical) section.navigation-menu a.back { order: 3; }
    body:not(.vertical) section.navigation-menu a.menu { order: 9; }
    body section.navigation-menu a.menu { order: 1; }
    body section.navigation-menu a.back { order: 2; }
    body section.navigation-menu a.prev { order: 3; }
    body section.navigation-menu a.next { order: 4; }
}