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;
}
article p {
    caret-color: transparent;
}
section {
    caret-color: transparent;
}
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;
}
body.vertical h1 { letter-spacing: 0; }

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_number {
    text-indent: 3em;
    font-family: 'Zen Antique Soft', 'MS PMincho', serif;
}
p.chapter_number.level2 {
    text-indent: 6em;
}
body:not(.vertical) p.chapter_number {
    margin-top: 2em;
}
body.vertical p.chapter_number {
    margin-right: 2em;
}
p.chapter_number + p.chapter_number {
    margin: 0;
}
span.chapter-size {
    color: gray;
    font: 60% Consolas;
    text-combine-upright: all;
}
span.chapter-size::before {
    content: ' ';
}
p.emptyline {
    white-space: pre;
}
p.emptyline::after {
    content: ' ';
}
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, #wrotedate, .updatedate {
    text-align: right;
}
body:not(.vertical) :not(#wrotedate) + #wrotedate {
    margin-top: 1em;
}
body.vertical :not(#wrotedate) + #wrotedate {
    margin-right: 1em;
}

nav {
    font-size: 0.8em;
}

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

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: '横書きへ';
}

section.navigation-bar {
    position: fixed;
    padding: 0;
    margin: 0;
}
body:not(.vertical) section.navigation-bar{
    right: 0;
    top: 0;
    width: 5px;
    height: 100svh;
}
body.vertical section.navigation-bar {
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 5px;
}
section.navigation-bar:not(:has(div)) {
    display: none;
}

section.navigation-bar div:is(.sec-point, .cur-point) {
    position: absolute;
    width: 5px;
    height: 5px;
    margin: 0;
    cursor: pointer;
}
body:not(.vertical) section.navigation-bar div:is(.sec-point, .cur-point) {
    left: 0;
}
body.vertical section.navigation-bar div:is(.sec-point, .cur-point) {
    top: 0;
}

div.prevChap, div.nextChap {
    background-color: rgba(255, 192, 0, .5);
    text-align: center;
    font-size: 1.5em;
}
body:not(.vertical) div.prevChap, body:not(.vertical) div.nextChap {
    width: 100vt;
}
body.vertical div.prevChap, body.vertical div.nextChap {
    height: 100vt;
}
body:not(.vertical) div.prevChap::after {
    content: '▲';
}
body:not(.vertical) div.nextChap::after {
    content: '▼';
}
body.vertical div.prevChap::after {
    content: '▶';
}
body.vertical div.nextChap::after {
    content: '◀';
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 20px;
    font-size: 14px;
    display: none;
    z-index: 1000;
    writing-mode: horizontal-tb;
}
.cookie-banner div.flex {
    display: flex;
    justify-content: center;
}
.cookie-banner div.flex .message {
    text-align: left;
}
.cookie-buttons button {
    margin: 0 10px;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#close-button {
    position: absolute;
    right: 1em;
    top: 1em;
    padding: 2px;
    border: white 1px solid;
    border-radius: 4px;
    cursor: pointer;
}
#accept {
    text-align: center;
    background-color: #bdb;
    color: #040;
}

@media screen and (min-width: 900px) {
    body.vertical {
        writing-mode: vertical-rl;
    }
    body:not(.vertical) > article {
        padding: 1em 3em;
    }
    body.vertical > article {
        padding: 2em 1em;
    }
    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 5px 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 5px 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 5px 0;
    }
    body.vertical > article {
        margin: 3px 3em 5px 0;
    }
    p.reading::before {
        opacity: 0.5;
    }
    body:not(.vertical) p.reading::before {
        left: -1em;
    }
    body.vertical p.reading::before {
        top: -1em;
    }
    nav {
        display: flex;
        justify-content: flex-start;
        position: fixed;
        right: 0;
        top: 0;
    }
    body:not(.vertical) > nav {
        flex-direction: row;
    }
    body.vertical > nav {
        flex-direction: column;
    }
    body:not(.vertical) section.navigation-menu > div {
        flex-direction: row;
    }
    body.vertical section.navigation-menu > div {
        flex-direction: column;
    }
    nav:not(.view) section.navigation-menu div.menu {
        text-shadow: 3px 3px 0;
    }
    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 5px 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.menu { order: 9; }
    div.prevChap, div.nextChap { display: none; }
}