@charset "utf-8";
@font-face {font-family: 'Gabarito';src: url("../../css/font/Gabarito.woff")  format('woff');unicode-range:U+0030-0039,U+0041-005A,U+0061-007A;/* 0-9,A-Z,a-z */}

/* ------------------------------------
ルート指定
------------------------------------ */
:root {
    --font-size-big1  : 2rem;
    --font-size-big2  : 1.5rem;
    --font-size-big3  : 1.25rem;
    --font-size-base  : 1rem;
    --font-size-small : 0.9rem;

    --font-color-base : #223;
    --font-color-sub  : #777;
    --font-anker      : #33c;
    --accent-color    : #f08300;
    --bg-color-base   : #fefefe;
    --bg-color-sub    : #eee7e0;
}
@media (prefers-color-scheme: dark) {
    :root {
        --font-color-base : #bbb;
        --font-color-sub  : #999;
        --font-anker      : #99f;
        --accent-color    : #b36200;
        --bg-color-base   : #222;
        --bg-color-sub    : #333;
}
}

/* ------------------------------------
全体
------------------------------------ */
* {
    box-sizing : border-box;
    outline    : 0;
    text-align : justify;
}
html {
    font-size : var(--font-size-base);
}
body {
    display           : grid;
    gap               : 3em;
    max-width         : 700px;
    min-height        : 100dvh;
    margin-inline     : auto;
    padding-inline    : 20px;
    background        : var(--bg-color-base);
    color             : var(--font-color-base);
    font-family       : Gabarito, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    line-height       : 1.73;
    text-spacing-trim : trim-start;
    text-autospace    : normal;
    text-rendering    : optimizeSpeed;
    scroll-behavior   : smooth;
}
a {
    color : var(--font-anker);
}
a:hover {
    color : var(--accent-color);
}

/* ------------------------------------
ヘッダー
------------------------------------ */
#header-index {

    h1 {
        margin-block : 33px;
        font-family  : serif;
        font-weight  : 500;
        font-size    : var(--font-size-big1);
        font-style   : normal;

        span {
            color : var(--accent-color);
        }
    }
    rt {
        font-size : var(--font-size-small);
    }
    p {
        margin-inline : 3px;
    }
}
#changefont-button {
    list-style  : none;
    width       : fit-content;
    margin-left : auto;

    button {
        cursor        : pointer;
        width         : 9rem;
        padding       : .7em;
        color         : var(--font-color-base);
        border        : solid 1px var(--font-color-sub);
        border-radius : 5px;
        background    : var(--bg-color-base);
        line-height   : 1;
        text-align    : center;
    }
}

/* ------------------------------------
メイン
------------------------------------ */
#main-index {
    h2 {
        font-family : serif;
        font-weight : 500;
        font-size   : var(--font-size-big2);
    }

    /* リスト切り替え */
    #switch {
        margin-block : 30px;
        padding      : 1.4rem 2rem;
        background   : var(--bg-color-sub);

        dl {
            margin : 0;

            dt:last-of-type {
                margin-top : .5rem;
            }
            label {
                display           : inline-block;
                margin-block      : .3rem;
                margin-inline-end : 1rem;
                padding           : .3rem 0;
            }
            button {
                margin-block : .5rem 0;
                padding      : .3rem .5rem
            }
        }
    }

    #switch p {
        margin : 5px 0 5px 20px;
    }
    .switch-none {
        margin-inline-start : 2rem;
        color               :var(--accent-color);
    }
    .novel-filter:has(#check-long:not(:checked)) .item-long {
        display : none;
    }
    .novel-filter:has(#check-longshort:not(:checked)) .item-longshort {
        display : none;
    }
    .novel-filter:has(#check-short:not(:checked)) .item-short {
        display : none;
    }
    .novel-filter:has(#check-flash:not(:checked)) .item-flash {
        display : none;
    }
    .novel-filter:has(#check-long:checked,#check-longshort:checked,#check-short:checked,#check-flash:checked) .switch-none {
        display : none;
    }
    .novel-filter:not(:has(#check-long:checked,#check-longshort:checked,#check-short:checked,#check-flash:checked))  .note {
        display : none;
    }



/* ------------------------------------
拙作一覧
------------------------------------ */
    .novel-list {
        display        : flex;
        flex-direction : column; 
        list-style     : none;
        padding        : 0;
    }

    .sort-asc {
        flex-direction: column;
    }
    .sort-desc {
        flex-direction: column-reverse;
    }
    
    .novel-item {
        margin-top    : -1px;
        border-top    : 1px solid var(--bg-color-sub);
        border-bottom : 1px solid var(--bg-color-sub);
        padding-block : 10px;
    }
    .novel-item dl {
        display : flex;
    }
    .novel-item dt {
        position : absolute;
        overflow : hidden;
        width    : 1px;
        height   : 1px;
        margin   : -1px;
        padding  : 0;
        border   : 0;
        clip     : rect(0, 0, 0, 0);
    }
    .novel-item dd {
        margin : 0;
    }
    .group-id {
        flex-shrink : 0;
        font-weight : bold;
        color       : var(--font-color-sub);
        line-height : 2;
        dd {
            width                 : 3rem;
            padding-inline-end    : 1rem;
            text-align            : right;
            font-feature-settings : "tnum";
        }

    }
    .novel-title {
        font-size   : var(--font-size-big3);
        font-weight : bold;
        color       : var(--font-color-sub);
    }
    .row-meta {
        display   : flex;
        gap       : 10px;
        font-size : var(--font-size-small);
        color     : var(--font-color-sub);
    }
    .row-date {
        font-size : var(--font-size-small);
        color     : var(--font-color-sub);
    }
    .novel-list a {
        text-decoration : none;
        color           : var(--font-color-base);
    }
    .novel-list a:hover {
        color : var(--accent-color);
    }
    .note {
        width     : fit-content;
        margin    : 2rem 0 0 auto;
        font-size : var(--font-size-small);
        color     : var(--font-color-sub);

        p {
            margin-block: 0;
        }
        p::before {
            content      : "※";
            display      : inline-block;
            margin-right : .5rem;
        }
    }

    #author {
        margin-top    : 100px;
        padding       : 1.5rem 2rem;
        background    : var(--bg-color-sub);
        border-radius : 13px;
    
        h2 {
        margin-top : 0;
        font-size  : var(--font-size-big2);
        }
        dt {
            display      : flex;
            align-items  : center;
            margin-block : 2rem;
            font-size    : var(--font-size-big2);
            line-height  : 1;
            
            span {
                display     : inline-block;
                margin-left : .4rem;
                font-size   : var(--font-size-small);
            }
        }
        dd {
            margin : 0;
        }
    }
}

/* ------------------------------------
小説本文
------------------------------------ */
section {
    display : grid;
    gap     : 3em;

    #toc {
        h2 {
            font-size : var(--font-size-big2);
        }
        ol {
            list-style : none;
            font-size  : 1.2rem;
            li {
                margin-block : 10px;
                a {
                    text-decoration : none;
                    padding-block   : 5px;
                    span {
                        display     : inline-block;
                        margin-left : 1em;
                    }
                }
            }
        } 
    }

    h1 {
        font-family : serif;
        font-weight : 500;
        font-size   : var(--font-size-big1);
        font-style  : normal;
    }
    h2 {
        font-family : serif;
        font-weight : 500;
        font-size   : var(--font-size-big2);
        font-style  : normal;
    }
    .sense-break {
        height : 2.5em;
    }
    p {
        margin-block : 3px;
        text-indent  : 1em;
        line-height  : 2;
    }
    p.no-indent {
        text-indent : 0;
    }
    p.right-align {
        text-align : right;
    }
    .is-serif {
        font-family : "Noto Serif JP", "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", serif;
        font-weight : 600;
    }
    blockquote {
        margin-block : 2.5em;
        font-style   : italic;
    }
}

/* ------------------------------------
奥付
------------------------------------ */
.colophon {
    gap        : 0; 
    margin-top : 6em;
    padding    : 1.2em 2.5em;
    background : var(--bg-color-sub);

    
    h2 {
        display : none;
    }
    h3 {
        font-size      : var(--font-size-big3);
        border-bottom  : 1px solid var(--font-color-sub);
        margin         : 8px 0 0 0;
        padding-bottom : .8em;
    }
    dl div {
        display      : flex;
        flex-wrap    : wrap;
    }
    dt {
        flex-basis      : 4em;
        text-align-last : justify;
    }
    dd {
        flex-basis   : calc(100% - 4em);
        margin-left  : 0;
        padding-left : 1.5em;
    }
    .note {
        font-size : var(--font-size-small);
        color     : var(--font-color-base);
    }
}

/* ------------------------------------
パンくずリスト
------------------------------------ */
nav#breadcrumb {
    margin    : 0;
    padding   : 0;
    font-size : var(--font-size-small);
    white-space: nowrap;
    overflow-x: auto;

    ul {
        list-style            : none;
        display               : grid;
        grid-template-columns : repeat(3, auto);
        justify-content       : left;
        margin                : 0;
        padding               : 0;
    }
    ul a {
        display         : inline-block;
        padding-block   : 5px;
        color           : var(--font-color-base);
        text-decoration : none;
    }
    ul a:hover {
        color : var(--accent-color);
    }
    ul li+li::before {
        content : ">";
        margin  : .95em;
        color   : var(--font-color-base);
    }
    ul li:last-of-type {
        display: none;
    }
}

/* ------------------------------------
ページネーション
------------------------------------ */
#pagination {
    display               : grid;
    grid-template-columns : 33% 34% 33%;
    justify-content       : space-between;
    width                 : 100%;
    margin                : 3em 0 0 0;
    padding               : 1em;
    border-top            : 1px solid #eee;
    border-bottom         : 1px solid #eee;
    .toc {
        text-align : center;
    }
    .next {
        text-align : right;
    }
    a {
        text-decoration : none;
        padding         : 10px 15px; /* スマホで押しやすいサイズ */
        color           : var(--font-color-base);
    }
    .arrow-left {
        display      : inline-block;
        width        : 20px;
        height       : 20px;
        margin-bottom: -4px;
        border-top   : 4px solid #ccc;
        border-right : 4px solid #ccc;
        transform    : rotate(225deg);
    }
    .arrow-right {
        display      : inline-block;
        width        : 20px;
        height       : 20px;
        margin-bottom: -4px;
        border-top   : 4px solid #ccc;
        border-right : 4px solid #ccc;
        transform    : rotate(45deg);
    }
}


/* ------------------------------------
フッター
------------------------------------ */
footer {
    padding    : 10px 0;
    text-align : right;

    small {
        font-size  : var(--font-size-base);
        font-style : normal
    }
    a {
        color           : var(--font-color-base);
        text-decoration : none;
    }
}