/* =========================
   色設定
========================= */

:root{
    --bg:#f8f3e0;
    --text:#241f1a;
    --line:#332d26;
    --paper-line:#cec8b3;
    --brown:#4b3b05;
    --green:#17403d;
}

/* =========================
   サイト全体
========================= */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Zen Old Mincho","Yu Mincho",serif;
    font-weight:700;
}

body.modal-open{
    overflow:hidden;
}

/* =========================
   レイアウト
========================= */

.container{
    display:flex;
    min-height:100vh;
}

/* =========================
   左メニュー
========================= */

nav{
    width:280px;
    padding:80px 20px 40px;
    box-sizing:border-box;
    text-align:center;

    border-right:6px double var(--line);
}

.logo{
    display:block;
    width:160px;
    height:auto;
    margin:0 auto 50px;
}

nav ul{
    margin:0;
    padding:0;
    list-style:none;
}

nav li{
    margin-bottom:50px;
}

nav a{
    display:block;
    color:var(--line);
    font-family:"Cormorant Garamond",serif;
    font-size:20px;
    text-decoration:none;
}

/* =========================
   コンテンツ
========================= */

.content{
    position:relative;

    flex:1;

    display:flex;
    flex-direction:column;

    padding:60px;
    box-sizing:border-box;

    border-left:2px solid #3b3b3b;
}

/* =========================
   トップページ
========================= */

.home-header{
    margin-top:100px;
    text-align:center;
    width:100%;
}

.bell{
    display:block;
    width:220px;
    height:auto;
    margin:0 auto;
}

.home-header h1{
    margin:25px 0;
    font-family:"Cormorant Garamond",serif;
    font-size:54px;
}

.description{
    margin-top:50px;
    font-family:"Zen Antique Soft","Yu Mincho",serif;
    font-size:18px;
    font-weight:400;
    letter-spacing:0.02em;
}

.home-main{
    margin-top:55px;
}

/* =========================
   更新履歴
========================= */

.news{
    max-width:700px;
    margin:0 auto;
    font-family:"Zen Antique Soft","Yu Mincho",serif;
    font-weight:400;
}

.news h2{
    margin:0;
    padding:0 0 10px 40px;
    text-align:left;
    font-weight:400;

    border-bottom:2px solid var(--line);
}

.news ul{
    margin-top:25px;
    padding-left:50px;

    text-align:left;
    font-size:15px;
    font-weight:400;
    line-height:1.8;
}

/* =========================
   フッター
========================= */

footer{
    margin-top:auto;
    padding:30px 0;
    text-align:center;
}

/* =========================
   Textページ
========================= */

.text-content{
    padding:0;
    overflow:hidden;
}

.text-header{
    padding:32px 42px 0;
    text-align:center;
}

.text-header h1{
    margin:0;
    padding-bottom:8px;
    border-bottom:2px solid var(--line);
    font-family:"Cormorant Garamond",serif;
    font-size:70px;
    font-weight:600;
    line-height:1;
}

.text-main{
    margin-top:43px;
}

.text-desk{
    box-sizing:border-box;
    background:#261a17 url("../images/text/wood-texture-wide.webp") center/cover no-repeat;
    box-shadow:inset 0 10px 22px rgba(0,0,0,0.22),inset 0 -8px 18px rgba(0,0,0,0.2);
}

.text-desk-layout{
    position:relative;
    width:min(100%,1900px);
    margin:0 auto;
    aspect-ratio:1075 / 470;
}

.text-book{
    position:absolute;
    z-index:3;
    width:29%;
}

.text-book-novel{
    top:13.4%;
    left:5.5%;
    transform:rotate(-5deg);
}

.text-book-references{
    top:0.9%;
    left:39.5%;
    width:30%;
    transform:rotate(7deg);
}

.text-book-image{
    display:block;
    width:100%;
    height:auto;
}

.text-book-link{
    display:block;
    color:inherit;
    text-decoration:none;
}

.text-book-copy{
    position:absolute;
    inset:0;
    text-align:center;
}

.text-book-copy h2{
    position:absolute;
    top:27%;
    right:13%;
    left:13%;
    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(24px,2.1vw,42px);
    font-weight:500;
    line-height:1;
}

.text-book-copy ul{
    position:absolute;
    top:39%;
    right:11%;
    left:11%;
    margin:0;
    padding:0;
    list-style:none;
    font-size:clamp(8px,0.72vw,15px);
    font-weight:500;
    line-height:2;
}

.text-book-publisher{
    position:absolute;
    right:12%;
    bottom:10.5%;
    left:12%;
    margin:0;
    font-size:clamp(8px,0.66vw,13px);
    font-weight:600;
}

.text-book-novel .text-book-copy{
    color:#0f2b28;
    transform:rotate(-1.7deg);
    transform-origin:center;
}

.text-book-references .text-book-copy{
    color:#6e2f10;
    transform:rotate(0deg);
    transform-origin:center;
}

.text-book-references .text-book-copy h2{
    top:29%;
    right:auto;
    left:25%;
    width:46%;
    padding:7px 10px;
    border-top:1px solid currentColor;
    border-bottom:1px solid currentColor;
}

.text-book-subtitle{
    position:absolute;
    top:42.5%;
    right:18%;
    left:18%;
    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(8px,0.68vw,13px);
    font-weight:600;
    line-height:1.35;
    letter-spacing:0.03em;
}

.text-book-references .text-book-publisher{
    bottom:14%;
}

.text-book-novel .text-book-publisher{
    bottom:13.5%;
}

.text-updates{
    position:absolute;
    z-index:2;
    top:1%;
    right:0;
    width:28%;
    height:99%;
}

.text-updates-label,
.text-updates-paper{
    position:absolute;
    box-sizing:border-box;
    color:#17130f;
    box-shadow:5px 7px 10px rgba(0,0,0,0.22);
}

.text-updates-label{
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    top:12px;
    left:-2%;
    width:75%;
    height:27%;
    padding:0 6%;
    background:#d7ccb6;
    text-align:center;
    transform:rotate(-8deg);
}

.text-updates-label h2{
    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(19px,1.35vw,30px);
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.text-updates-paper{
    z-index:2;
    top:26%;
    right:0;
    width:86%;
    height:68%;
    padding:16% 8%;
    background:#e9e4d8;
    transform:rotate(7deg);
}

.text-updates-paper ul{
    margin:0;
    padding:0;
    list-style:none;
    font-size:clamp(10px,0.82vw,16px);
    line-height:1.75;
}

.text-updates-paper time{
    margin-right:5px;
    font-family:"Cormorant Garamond",serif;
    font-size:1.08em;
}

.text-pen{
    position:absolute;
    z-index:4;
    right:-12%;
    bottom:27.4%;
    width:138%;
    height:auto;
    filter:drop-shadow(3px 5px 4px rgba(0,0,0,0.38));
    transform:rotate(48deg);
    transform-origin:center;
}

.text-content footer{
    position:relative;
    z-index:2;
    width:100%;
    min-height:71px;
    padding:15px 0 20px;
    box-sizing:border-box;
}

/* =========================
   Novelページ
========================= */

.novel-content{
    padding:0;
    overflow:hidden;
}

.novel-header{
    width:86%;
    margin:0 auto;
    padding:38px 0 0;
    box-sizing:border-box;
    text-align:center;
}

.novel-header h1{
    margin:0;
    padding-bottom:12px;
    border-bottom:2px solid var(--line);
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(63px,4.5vw,86px);
    font-weight:600;
    line-height:1;
}

.novel-main{
    margin-top:62px;
}

.novel-bookcase{
    position:relative;
    container-type:inline-size;
    width:min(86%,1710px);
    margin:0 auto;
    aspect-ratio:1456 / 1027;
    background-color:#3f2b19;
    background-image:
        repeating-linear-gradient(0deg,rgba(231,192,127,0.07) 0 1px,transparent 1px 5px,rgba(24,15,8,0.11) 5px 6px,transparent 6px 10px),
        linear-gradient(90deg,#3a2919,#46311e 25%,#3e2b1a 52%,#44301c 76%,#372516 100%),
        repeating-linear-gradient(0deg,rgba(231,192,127,0.07) 0 1px,transparent 1px 5px,rgba(24,15,8,0.11) 5px 6px,transparent 6px 10px),
        linear-gradient(90deg,#3a2919,#46311e 25%,#3e2b1a 52%,#44301c 76%,#372516 100%),
        repeating-linear-gradient(90deg,rgba(231,192,127,0.07) 0 1px,transparent 1px 5px,rgba(24,15,8,0.11) 5px 6px,transparent 6px 10px),
        linear-gradient(0deg,#3a2919,#46311e 25%,#3e2b1a 52%,#44301c 76%,#372516 100%),
        repeating-linear-gradient(90deg,rgba(231,192,127,0.07) 0 1px,transparent 1px 5px,rgba(24,15,8,0.11) 5px 6px,transparent 6px 10px),
        linear-gradient(0deg,#3a2919,#46311e 25%,#3e2b1a 52%,#44301c 76%,#372516 100%);
    background-position:left top,left top,left bottom,left bottom,left center,left center,right center,right center;
    background-size:100% 4.5%,100% 4.5%,100% 4.5%,100% 4.5%,2.4% 91%,2.4% 91%,2.4% 91%,2.4% 91%;
    background-repeat:no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(235,204,151,0.13),
        inset 0 0 22px rgba(19,12,7,0.42);
    overflow:hidden;
}

.novel-bookcase::before{
    content:"";
    position:absolute;
    z-index:0;
    top:4.5%;
    right:2.4%;
    bottom:4.5%;
    left:2.4%;
    background:
        linear-gradient(90deg,rgba(255,255,255,0.018),transparent 20%,rgba(0,0,0,0.1) 78%,transparent),
        #261e13;
    box-shadow:inset 0 0 28px rgba(7,4,2,0.52);
}

.novel-bookcase::after{
    content:"";
    position:absolute;
    z-index:1;
    top:49.1%;
    right:2.4%;
    left:2.4%;
    height:4.5%;
    background-color:#3f2b19;
    background-image:
        repeating-linear-gradient(0deg,rgba(231,192,127,0.07) 0 1px,transparent 1px 5px,rgba(24,15,8,0.11) 5px 6px,transparent 6px 10px),
        linear-gradient(90deg,#3a2919,#46311e 25%,#3e2b1a 52%,#44301c 76%,#372516 100%);
    background-size:100% 100%,100% 100%;
    box-shadow:
        0 -3px 5px rgba(18,11,6,0.38),
        0 4px 7px rgba(8,5,3,0.58),
        inset 0 1px rgba(238,203,145,0.12),
        inset 0 -1px rgba(18,11,6,0.45);
}

.novel-note{
    position:absolute;
    z-index:4;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(9px,0.9vw,18px) clamp(12px,0.8vw,16px);
    box-sizing:border-box;
    background:#d8d5cc;
    color:#161411;
    font-family:"Zen Kurenaido","Yu Mincho",serif;
    font-weight:400;
    -webkit-text-stroke:0.2px currentColor;
    overflow:hidden;
}

.novel-note h2{
    margin:0;
    font-size:clamp(12px,0.95vw,20px);
    font-weight:400;
    line-height:1.4;
    text-align:center;
}

.novel-note-status{
    margin:clamp(6px,0.52vw,10px) 0 clamp(7px,0.55vw,11px);
    font-size:clamp(9px,0.68vw,14px);
    text-align:center;
}

.novel-note p:last-of-type{
    margin:0;
    /* cqwに未対応のブラウザ向けフォールバック */
    font-size:clamp(10px,0.72vw,16px);
    font-size:clamp(10px,0.985cqw,16px);
    font-weight:400;
    line-height:1.32;
    letter-spacing:0.01em;
    text-align:center;
}

/* ---------- Novel一覧ページ：PC ---------- */

@media (min-width:761px){
    .novel-note p:last-of-type{
        width:93%;
        margin:0 auto;
    }
}

@media (min-width:761px) and (max-width:2100px){
    .novel-note p:last-of-type{
        width:98%;
    }
}

.novel-note-more{
    display:none;
}

.novel-note-watashi{
    top:23.9%;
    left:8.2%;
    width:28.8%;
    height:25.2%;
}

.novel-note-sprout{
    top:68.7%;
    left:43.5%;
    width:28%;
    height:26.8%;
}

.novel-cover{
    position:absolute;
    z-index:3;
    display:block;
    color:inherit;
    text-decoration:none;
}

.novel-cover img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.novel-cover:focus-visible,
.novel-spines a:focus-visible{
    outline:3px solid #f8f3e0;
    outline-offset:3px;
}

.novel-cover-watashi{
    top:4.5%;
    left:45.7%;
    width:23.3%;
    height:44.6%;
}

.novel-cover-sprout{
    top:54.6%;
    left:73.4%;
    width:21.8%;
    height:40.9%;
}

.novel-spines{
    position:absolute;
    z-index:3;
    display:flex;
    align-items:stretch;
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:novel-episode;
}

.novel-spines li{
    position:relative;
    min-width:0;
    height:100%;
    counter-increment:novel-episode;
}

.novel-spines a{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    height:100%;
    box-sizing:border-box;
    color:inherit;
    text-decoration:none;
}

.novel-spine-cap{
    position:relative;
    display:flex;
    flex:0 0 11.5%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    box-sizing:border-box;
    background:#c7bd98;
    color:#17130f;
    font-size:clamp(5px,0.46vw,9px);
    line-height:1.05;
    white-space:normal;
    text-align:center;
}

.novel-spine-cap::before{
    content:"さ";
    position:absolute;
    z-index:2;
    top:16.667%;
    left:50%;
    line-height:1;
    transform:translate(-50%,calc(-50% + var(--cap-top-shift,0px)));
}

.novel-spine-cap::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(#978a72,#978a72) 0 33.333% / 100% 1px no-repeat,
        linear-gradient(#978a72,#978a72) 0 66.666% / 100% 1px no-repeat;
    pointer-events:none;
}

.novel-spines a::before,
.novel-spines a::after{
    position:absolute;
    z-index:4;
    left:50%;
    color:#17130f;
    font-size:clamp(5px,0.46vw,9px);
    line-height:1;
    pointer-events:none;
}

.novel-spines a::before{
    content:"１";
    top:5.75%;
    transform:translate(-50%,calc(-50% + var(--cap-middle-shift,0px)));
}

.novel-spines a::after{
    top:9.583%;
    transform:translate(-50%,calc(-50% + var(--cap-bottom-shift,0px)));
}

.novel-spine-number::before{
    content:counter(novel-episode);
}

.novel-spine-title{
    display:flex;
    flex:1;
    align-items:center;
    justify-content:center;
    writing-mode:vertical-rl;
    text-orientation:upright;
    line-height:1;
}

.novel-spine-number{
    display:flex;
    flex:0 0 7%;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.novel-spine-publisher{
    display:flex;
    flex:0 0 13%;
    align-items:center;
    justify-content:center;
    writing-mode:vertical-rl;
    text-orientation:upright;
    line-height:1;
}

.novel-spine-publisher::before{
    content:"穀物庫文庫";
}

.novel-spines-watashi{
    top:4.6%;
    left:71.5%;
    width:26.1%;
    height:44.5%;
}

.novel-spines-watashi li{
    flex:1;
}

.novel-spines-watashi li:first-child{
    transform:none;
}

.novel-spines-watashi a::after{
    content:"２";
}

.novel-spines-watashi a{
    border-right:clamp(1px,0.1vw,2px) solid #332a18;
    background:#080807;
    color:#f3f0e8;
}

.novel-spines-watashi .novel-spine-title{
    font-size:clamp(12px,1.02vw,21px);
}

.novel-spines-watashi .novel-spine-title::before{
    content:"私は連続する魂の1個体です";
}

.novel-spines-watashi .novel-spine-number{
    font-size:clamp(10px,0.85vw,17px);
}

.novel-spines-watashi .novel-spine-publisher{
    font-size:clamp(6px,0.43vw,9px);
}

.novel-spines-sprout{
    top:54.7%;
    left:2.5%;
    display:grid;
    grid-template-columns:repeat(30,minmax(0,1fr));
    width:51.5%;
    height:40.8%;
}

.novel-spines-sprout a{
    border-right:clamp(1px,0.08vw,2px) solid #4b4f22;
    background:#94a44d;
    color:#fff;
}

.novel-spines-sprout .novel-spine-title{
    font-size:clamp(8px,0.65vw,13px);
}

.novel-spines-sprout a::after{
    content:"１";
}

.novel-spines-sprout .novel-spine-title::before{
    content:"スプラウトヴァージュの交差点";
}

.novel-spines-sprout .novel-spine-number{
    flex-basis:8%;
    font-size:clamp(6px,0.48vw,10px);
}

.novel-spines-sprout .novel-spine-number::before{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:1.5em;
    height:1.5em;
    padding:0 0.12em;
    box-sizing:border-box;
    border:1px solid currentColor;
    border-radius:999px;
}

.novel-spines-sprout .novel-spine-publisher{
    flex-basis:15%;
    font-size:clamp(4px,0.34vw,7px);
}

.novel-content footer{
    min-height:104px;
    padding:34px 0 22px;
    box-sizing:border-box;
}

@media (min-width:761px) and (max-width:2200px){
    .novel-spines-watashi a{
        --cap-top-shift:2px;
        --cap-middle-shift:2px;
        --cap-bottom-shift:0px;
    }

    .novel-spines-sprout a{
        --cap-top-shift:3px;
        --cap-middle-shift:1px;
        --cap-bottom-shift:0px;
    }
}

/* ---------- Novel一覧ページ：スマホ ---------- */

@media (max-width:760px){
    .novel-header{
        width:calc(100% - 40px);
        padding-top:28px;
    }

    .novel-header h1{
        font-size:54px;
    }

    .novel-main{
        margin-top:36px;
    }

    .novel-bookcase{
        display:grid;
        grid-template-columns:92px minmax(0,1fr);
        grid-template-rows:none;
        grid-template-areas:
            "cover-watashi note-watashi"
            "cover-sprout note-sprout";
        gap:0;
        width:calc(100% - 40px);
        max-width:520px;
        aspect-ratio:auto;
        padding:0;
        border:0;
        background:transparent;
        box-shadow:none;
        overflow:visible;
    }

    .novel-bookcase::before,
    .novel-bookcase::after{
        display:none;
    }

    .novel-note,
    .novel-cover{
        position:static;
        width:auto;
        height:auto;
        min-width:0;
        box-sizing:border-box;
    }

    .novel-note{
        justify-content:flex-start;
        min-height:0;
        padding:16px 0 16px 14px;
        border:0;
        border-bottom:1px solid #d6d0c2;
        background:transparent;
        text-align:left;
        overflow:visible;
    }

    .novel-note h2{
        font-size:15px;
        line-height:1.4;
        text-align:left;
    }

    .novel-note-status{
        margin:5px 0 8px;
        font-size:10px;
        text-align:left;
    }

    .novel-note p:last-of-type{
        display:-webkit-box;
        overflow:hidden;
        font-size:11px;
        line-height:1.55;
        text-align:left;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;
    }

    .novel-note p:last-of-type br{
        display:none;
    }

    .novel-note.is-expanded p:last-of-type{
        display:block;
        overflow:visible;
        -webkit-line-clamp:initial;
    }

    .novel-note-more{
        display:inline-block;
        margin-top:5px;
        padding:2px 0;
        border:0;
        background:transparent;
        color:#5b4932;
        font:inherit;
        font-size:11px;
        text-decoration:underline;
        text-underline-offset:3px;
        cursor:pointer;
    }

    .novel-note-watashi{
        grid-area:note-watashi;
    }

    .novel-note-sprout{
        grid-area:note-sprout;
    }

    .novel-cover{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        min-height:0;
        padding:16px 12px 16px 0;
        border:0;
        border-bottom:1px solid #d6d0c2;
        background:transparent;
        overflow:visible;
    }

    .novel-cover img{
        width:100%;
        height:auto;
    }

    .novel-cover-watashi{
        grid-area:cover-watashi;
    }

    .novel-cover-sprout{
        grid-area:cover-sprout;
    }

    .novel-cover-watashi,
    .novel-note-watashi{
        border-top:1px solid #d6d0c2;
    }

    .novel-spines{
        display:none;
    }

    .novel-content footer{
        min-height:88px;
        padding-top:28px;
    }
}

/* ---------- Novel作品目次ページ ---------- */

.novel-work-content{
    min-width:0;
}

.novel-work-header{
    text-align:center;
}

.novel-work-header h1{
    margin:0;
    padding-bottom:14px;
    border-bottom:2px solid var(--line);
    font-size:clamp(30px,3.2vw,54px);
    line-height:1.35;
}

.novel-work-main{
    width:min(100%,900px);
    margin:52px auto 70px;
}

.novel-work-back{
    margin:0 0 24px;
}

.novel-work-back a{
    color:var(--text);
}

.novel-work-introduction{
    margin-bottom:42px;
    padding:28px 32px;
    background:#e6e1d5;
    font-family:"Zen Kurenaido","Yu Mincho",serif;
    font-size:15px;
    font-weight:400;
    line-height:1.9;
    -webkit-text-stroke:0.2px currentColor;
}

.novel-work-introduction p{
    margin:0;
}

.novel-episode-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:column;
    gap:14px 22px;
    margin:0;
    padding:0;
    list-style:none;
}

.novel-episode-list-6{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(6,auto);
    width:min(100%,280px);
    margin-right:auto;
    margin-left:auto;
}

.novel-episode-list-6 a{
    padding:12px 16px;
    text-align:center;
}

.novel-episode-list-30{
    grid-template-rows:repeat(15,auto);
}

.novel-episode-list li{
    scroll-margin-top:24px;
}

.novel-episode-list a{
    display:block;
    padding:14px 18px;
    border:1px solid var(--paper-line);
    background:rgba(255,255,255,0.28);
    color:var(--text);
    text-decoration:none;
}

.novel-episode-list a:hover,
.novel-episode-list a:focus-visible{
    background:#e6e1d5;
}

@media (max-width:760px){
    .novel-work-introduction{
        font-size:13px;
        line-height:1.8;
    }

    .novel-episode-list-30,
    .novel-episode-list-6{
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:none;
        grid-auto-flow:row;
        gap:8px;
        width:min(100%,320px);
        margin-right:auto;
        margin-left:auto;
    }

    .novel-episode-list-30 a,
    .novel-episode-list-6 a{
        padding:10px 14px;
        font-size:13px;
        line-height:1.45;
    }
}

/* ---------- Novel本文ページ ---------- */

.novel-reading-content{
    min-width:0;
}

.novel-reading-header{
    text-align:center;
}

.novel-reading-series{
    margin:0 0 12px;
    font-family:"Zen Kurenaido","Yu Mincho",serif;
    font-size:clamp(15px,1.15vw,20px);
    font-weight:400;
}

.novel-reading-series a{
    color:var(--text);
    text-decoration:none;
}

.novel-reading-header h1{
    margin:0;
    padding-bottom:16px;
    border-bottom:2px solid var(--line);
    font-size:clamp(28px,2.7vw,46px);
    line-height:1.4;
}

.novel-reading-main{
    width:min(100%,820px);
    margin:42px auto 72px;
}

.novel-reading-navigation{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:0;
}

.novel-reading-navigation a{
    display:inline-block;
    min-width:170px;
    padding:10px 18px;
    border:1px solid var(--paper-line);
    background:rgba(255,255,255,0.28);
    color:var(--text);
    text-align:center;
    text-decoration:none;
}

.novel-reading-navigation a:hover,
.novel-reading-navigation a:focus-visible{
    background:#e6e1d5;
}

.novel-wavebox{
    display:flex;
    justify-content:center;
    margin-top:22px;
}

.novel-wavebox-button{
    display:inline-flex;
    min-width:230px;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:12px 22px;
    border:1px solid #b9a88a;
    background:#eadfc9;
    color:var(--text);
    text-align:center;
    text-decoration:none;
    transition:background-color 0.2s ease, transform 0.2s ease;
}

.novel-wavebox-button span{
    font-family:serif;
    font-size:1.25em;
    line-height:1;
}

.novel-wavebox-button:hover,
.novel-wavebox-button:focus-visible{
    background:#dfcfb5;
    transform:translateY(-1px);
}

.novel-wavebox-button:focus-visible{
    outline:2px solid var(--brown);
    outline-offset:3px;
}

.novel-reading-article{
    margin:28px 0;
    padding:clamp(34px,4vw,58px) clamp(28px,5vw,68px);
    border-top:1px solid var(--paper-line);
    border-bottom:1px solid var(--paper-line);
    background:rgba(255,255,255,0.24);
    font-size:17.5px;
    font-weight:400;
    line-height:1.8;
    letter-spacing:normal;
}

.novel-reading-article p{
    margin:0;
}

.novel-reading-article .novel-reading-blank{
    min-height:1.8em;
}

.novel-reading-article .novel-reading-divider{
    margin:2.8em 0;
    text-align:center;
}

@media (max-width:760px){
    .novel-reading-series{
        padding-right:52px;
        padding-left:52px;
        font-size:14px;
        line-height:1.6;
    }

    .novel-reading-header h1{
        padding:0 48px 12px;
        font-size:26px;
    }

    .novel-reading-main{
        margin:32px auto 52px;
    }

    .novel-reading-navigation{
        flex-wrap:nowrap;
        gap:6px;
    }

    .novel-reading-navigation a{
        min-width:0;
        padding:7px 10px;
        font-size:12px;
        line-height:1.4;
    }

    .novel-wavebox{
        margin-top:16px;
    }

    .novel-wavebox-button{
        min-width:0;
        gap:6px;
        padding:7px 12px;
        font-size:12px;
        line-height:1.4;
    }

    .novel-wavebox-button span{
        font-size:1em;
    }

    .novel-reading-article{
        margin:22px 0;
        padding:28px 16px;
        font-size:14px;
        line-height:1.8;
        letter-spacing:normal;
    }
}

/* =========================
   Linkページ
========================= */

.link-content{
    padding-top:0;
}

.link-header{
    margin-top:0;
    padding-top:45px;
    text-align:center;
}

.link-header h1{
    margin:0;
    padding-bottom:12px;
    border-bottom:2px solid #4f4b40;
    font-family:"Cormorant Garamond",serif;
    font-size:64px;
    font-weight:700;
}

.link-main{
    width:100%;
    max-width:800px;
    min-height:472px;
    margin:84px auto 70px;
}

.link-board{
    position:relative;
    width:958px;
    min-height:590px;
    margin-left:22px;
    padding:42px 70px 48px 48px;
    box-sizing:border-box;
    border:2px solid var(--paper-line);
    background-image:
        radial-gradient(circle at center 18px, var(--bg) 0 5px, #c9bea0 5.5px 7px, transparent 7.5px);
    background-position:left top;
    background-size:48px 40px;
    background-repeat:round no-repeat;
    font-family:"Zen Kurenaido","Yu Mincho",serif;
    font-weight:400;
    -webkit-text-stroke:0.2px currentColor;
    transform:scale(.8);
    transform-origin:top left;
}

.link-card,
.link-group,
.link-commission{
    box-sizing:border-box;
}

.link-card{
    border:2px solid #c8b995;
    background:#e6dcc2;
}

.link-sns{
    position:absolute;
    z-index:2;
    top:-42px;
    left:-22px;
    width:46%;
    min-width:0;
    min-height:368px;
    padding:62px 28px 32px;
    background-color:#e6dcc2;
    background-image:
        radial-gradient(circle at center 24px, var(--bg) 0 5px, #c9bea0 5.5px 7px, transparent 7.5px);
    background-position:left top;
    background-size:48px 48px;
    background-repeat:round no-repeat;
}

.link-sns h2,
.link-group h2,
.link-commission h2{
    font-family:"Caveat",cursive;
    font-weight:400;
    -webkit-text-stroke:0;
}

.link-sns h2{
    margin:0 0 20px;
    padding-bottom:5px;
    border-bottom:1px solid #756c43;
    font-size:35px;
    text-align:center;
}

.link-list{
    margin:0;
    padding:0;
    list-style:none;
}

.link-list li{
    display:grid;
    grid-template-columns:130px minmax(0,1fr);
    align-items:start;
    column-gap:18px;
    margin-bottom:25px;
}

.link-list li:last-child{
    margin-bottom:0;
}

.link-list a{
    color:var(--text);
    text-decoration:none;
}

.link-name{
    position:relative;
    display:inline-block;
    width:max-content;
    max-width:100%;
    font-size:22px;
    line-height:1.2;
    white-space:nowrap;
}

.link-name::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-4px;
    left:0;
    height:3px;
    opacity:.8;
}

.link-name:hover,
.link-name:focus-visible{
    opacity:.62;
}

.link-name-script{
    font-family:"Caveat",cursive;
    font-weight:400;
}

.link-name-large{
    font-size:24px;
}

.accent-green::after{ background:#88a47c; }
.accent-pink::after{ background:#bd8981; }
.accent-blue::after{ background:#86a9b8; }
.accent-cyan::after{ background:#70b0b3; }
.accent-gold::after{ background:#b99b5c; }
.accent-yellow::after{ background:#c8b757; }

.link-sns-list li{
    grid-template-columns:112px minmax(0,1fr);
    column-gap:10px;
    margin-bottom:15px;
}

.link-sns-list .link-name{
    font-size:17px;
}

.link-sns-list .link-name-script{
    font-size:22px;
}

.link-sns-list .link-sns-misskey{
    display:block;
    margin-bottom:22px;
}

.link-sns-details{
    margin-top:14px;
}

.link-sns-details p{
    display:grid;
    grid-template-columns:108px minmax(0,1fr);
    align-items:start;
    column-gap:10px;
    margin:0 0 8px;
}

.link-sns-details p:last-child{
    margin-bottom:0;
}

.link-sns-details a{
    padding-top:3px;
    font-size:14px;
}

.link-sns-list span{
    padding-top:3px;
    font-size:11px;
    line-height:1.55;
}

.link-sns-list .link-description-emphasis{
    font-size:12.5px;
    white-space:nowrap;
}

.link-group{
    position:absolute;
}

.link-group h2{
    display:inline-block;
    margin:0 0 28px;
    padding:6px 18px 8px;
    background:#4c3d26;
    color:#f8f3e0;
    font-family:"Cormorant Garamond",serif;
    font-size:36px;
    font-weight:700;
    line-height:1.1;
}

.link-shop{
    top:34px;
    right:88px;
    width:45%;
}

.link-shop::after,
.link-homepage::after{
    content:"";
    display:block;
    position:absolute;
    top:64px;
    right:0;
    left:0;
    border-top:1px solid #756c43;
}

.link-shop .link-list,
.link-homepage .link-list{
    position:relative;
    z-index:1;
    padding:0 12px;
}

.link-shop .link-list{
    padding-top:10px;
}

.link-shop .link-name{
    margin-left:6px;
}

.link-homepage{
    bottom:84px;
    left:40px;
    width:39%;
}

.link-url{
    display:block;
    overflow-wrap:anywhere;
}

.link-shop-description{
    font-size:12.5px;
}

.link-commission{
    position:absolute;
    z-index:3;
    right:25px;
    bottom:20px;
    width:46%;
    min-height:260px;
    padding:48px 42px 30px;
    border:1px solid #c8b995;
    background:rgba(248,243,224,.97);
    transform:rotate(9deg);
}

.link-commission h2{
    margin:0 0 30px;
    padding-bottom:5px;
    border-bottom:1px solid #756c43;
    font-size:40px;
    text-align:center;
}

.link-commission .link-list li{
    grid-template-columns:78px minmax(0,1fr);
    column-gap:12px;
    margin-bottom:20px;
}

.link-commission .link-name-script{
    font-size:25px;
}

.link-commission .link-url{
    padding-top:5px;
    font-size:13px;
}

.link-commission .link-name-tsunagu{
    font-size:20px;
    font-weight:500;
    -webkit-text-stroke:0;
    text-shadow:
        0.4px 0 0 currentColor,
        -0.4px 0 0 currentColor;
}

.link-name-kakuyomu{
    top:3px;
    font-weight:500;
    -webkit-text-stroke:0;
    text-shadow:
        0.4px 0 0 currentColor,
        -0.4px 0 0 currentColor;
}

.link-description-kakuyomu{
    position:relative;
    top:3px;
}

.commission-tape{
    position:absolute;
    top:-27px;
    left:55%;
    width:42px;
    height:74px;
    background:#c7af7cef;
    opacity:.9;
    transform:translateX(-50%) rotate(-1deg);
    clip-path:polygon(
        0 4%,
        5% 0,
        10% 4%,
        15% 0,
        20% 4%,
        25% 0,
        30% 4%,
        35% 0,
        40% 4%,
        45% 0,
        50% 4%,
        55% 0,
        60% 4%,
        65% 0,
        70% 4%,
        75% 0,
        80% 4%,
        85% 0,
        90% 4%,
        95% 0,
        100% 4%,
        100% 100%,
        0 100%
    );
}

/* Linkページ：画面幅に合わせてボード全体の比率を保つ */

@media (min-width:1500px){
    .link-main{
        max-width:880px;
        min-height:531px;
    }

    .link-board{
        transform:scale(.9);
    }
}

@media (min-width:1800px) and (min-height:800px){
    .link-main{
        max-width:1075px;
        min-height:649px;
        margin-top:100px;
    }

    .link-board{
        transform:scale(1.1);
    }
}

@media (min-width:2200px) and (min-height:900px){
    .link-main{
        max-width:1220px;
        min-height:738px;
    }

    .link-board{
        transform:scale(1.25);
    }
}

@media (min-width:2450px) and (min-height:1000px){
    .link-main{
        max-width:1320px;
        min-height:797px;
    }

    .link-board{
        transform:scale(1.35);
    }
}

/* Linkページ：小型PC・タブレットではカードを縦に並べる */

@media (max-width:1200px){
    .link-main{
        max-width:720px;
        min-height:0;
        margin:60px auto 55px;
    }

    .link-board{
        display:flex;
        flex-direction:column;
        gap:42px;
        width:auto;
        min-height:0;
        margin:0;
        padding:52px 44px 42px 34px;
        transform:none;
    }

    .link-sns,
    .link-group,
    .link-commission{
        position:relative;
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
        width:100%;
        min-width:0;
    }

    .link-sns{
        order:1;
        min-height:0;
        background-image:none;
    }

    .link-shop{
        order:2;
    }

    .link-homepage{
        order:3;
    }

    .link-commission{
        order:4;
        min-height:0;
        margin-top:8px;
        transform:rotate(2deg);
    }
}

/* =========================
   Aboutページ
========================= */

.about-content{
    padding-top:0;
}

.about-header{
    margin-top:0;
    padding-top:45px;
    text-align:center;
}

.about-header h1{
    margin:0;
    padding-bottom:12px;

    font-family:"Cormorant Garamond",serif;
    font-size:64px;
    font-weight:700;

    border-bottom:2px solid #4f4b40;
}

.about-introduction{
    padding:38px 20px;

    border-bottom:2px solid #4f4b40;
}

.about-introduction p{
    margin:0;

    font-family:"Zen Antique Soft","Yu Mincho",serif;
    font-size:16px;
    font-weight:400;
    line-height:1.6;
    letter-spacing:0.02em;
}

.about-main{
    margin-top:55px;
}

/* ---------- About共通カード ---------- */

.site-data,
.prohibited-matters,
.contact,
.bookmark{
    position:relative;
    max-width:850px;
    box-sizing:border-box;
    border:2px solid var(--paper-line);
    font-family:"Zen Kurenaido","Yu Mincho",serif;
    font-weight:400;
    -webkit-text-stroke:0.25px currentColor;
}

.site-data,
.contact{
    background:rgba(236,224,184,0.185);
}

.prohibited-matters,
.bookmark{
    background:rgba(236,219,174,0.329);
}

.site-data::before,
.prohibited-matters::before,
.contact::before,
.bookmark::before{
    content:"";
    position:absolute;
    top:22px;
    bottom:22px;
    width:22px;
    background:
        radial-gradient(
            circle,
            var(--bg) 0 5px,
            var(--paper-line) 5.5px 7px,
            transparent 7.5px
        )
        center top / 22px 40px repeat-y;
}

.site-data::before,
.contact::before,
.bookmark::before{
    right:20px;
}

.prohibited-matters::before{
    left:20px;
}

.site-data h2,
.prohibited-matters h2,
.contact h2,
.bookmark h2{
    position:absolute;
    margin:0;
    color:var(--bg);
    font-family:"Caveat",cursive;
    font-size:28px;
    font-weight:400;
    -webkit-text-stroke:0;
}

.site-data h2,
.contact h2,
.bookmark h2{
    top:14px;
    left:-23px;
    padding:10px 24px;
}

/* =========================
   Site Date
========================= */

.site-data{
    margin:20px auto 55px;
    padding:95px 55px 45px;
}

.site-data h2{
    background:var(--brown);
}

.site-data-inner{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:45px;
}

.site-data-list{
    display:grid;
    gap:18px;
    flex:1;
    margin:0;
}

.site-data-list > div{
    display:grid;
    grid-template-columns:6em minmax(0,1fr);
    align-items:start;
    column-gap:20px;
}

.site-data-list dt,
.site-data-list dd{
    margin:0;
    text-align:left;
}

.site-banner{
    display:block;
    width:200px;
    max-width:100%;
    height:auto;
}

.link-note{
    position:relative;

    top:-10px;
    left:-30px;

    width:300px;

    padding:30px 28px;

    box-sizing:border-box;

    background:#ddd1ad;

    transform:rotate(13deg);
}

/* ---------- リンク説明メモ ---------- */

.link-note p{
    margin:0;

    font-size:14px;

    line-height:1.6;

    text-align:left;

    word-break:normal;

    overflow-wrap:anywhere;
}

/* ---------- 黄緑マスキングテープ ---------- */

.link-note::before{
    content:"";

    position:absolute;

    top:-27px;

    left:53%;

    width:64px;

    height:34px;

    background:rgba(205, 178, 105, 0.8);

    transform:
        translateX(-50%)
        rotate(-80deg);

    clip-path:polygon(
        0 0,

        96% 0,
        100% 5%,
        96% 10%,
        100% 15%,
        96% 20%,
        100% 25%,
        96% 30%,
        100% 35%,
        96% 40%,
        100% 45%,
        96% 50%,
        100% 55%,
        96% 60%,
        100% 65%,
        96% 70%,
        100% 75%,
        96% 80%,
        100% 85%,
        96% 90%,
        100% 95%,
        96% 100%,

        0 100%
    );
}

/* =========================
   prohibited matters
========================= */

.prohibited-matters{
    margin:85px auto 55px;
    padding:70px 70px 45px;
}

.prohibited-matters h2{
    top:-24px;
    left:50%;
    padding:10px 28px;
    background:var(--green);
    transform:translateX(-50%);
}

.prohibited-list{
    margin:0;

    padding:0;

    list-style:none;
}

.prohibited-list li{
    margin-bottom:28px;
}

.prohibited-list li:last-child{
    margin-bottom:0;
}

.prohibited-ja{
    margin:0;

    font-size:16px;

    line-height:1.7;
}

.prohibited-en{
    margin:4px 0 0;

    font-family:"Zen Kurenaido","Yu Mincho",serif;

    font-size:15px;

    font-weight:400;

    line-height:1.5;

    white-space:normal;
    overflow-wrap:anywhere;
}

/* =========================
   Contact
========================= */

.contact{
    margin:85px auto 55px;
    padding:95px 65px 55px;
}

.contact h2{
    background:var(--brown);
}

.contact-list{
    max-width:650px;

    margin:0 auto;

    padding:0;

    list-style:none;
}

.contact-list li{
    display:grid;

    grid-template-columns:125px 1fr;

    align-items:baseline;

    font-size:16px;

    line-height:1.7;
}

.contact-list .contact-mail{
    margin-top:22px;
}

.contact-name{
    white-space:nowrap;
}

.contact-list a{
    color:var(--text);

    text-decoration:none;

    white-space:nowrap;
}

.contact-list a:hover{
    text-decoration:underline;
}

/* =========================
   Bookmark
========================= */

.bookmark{
    margin:85px auto 55px;
    min-height:370px;
    padding:92px 65px 34px;
}

.bookmark h2{
    background:var(--green);
}

/* ---------- Bookmark内部 ---------- */

.bookmark-inner{
    display:grid;

    grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);

    align-items:center;

    min-height:230px;
}

/* ---------- バナー一覧 ---------- */

.bookmark-links{
    text-align:center;
}

.bookmark-item{
    margin-bottom:35px;
}

.bookmark-item:last-child{
    margin-bottom:0;
}

.bookmark-banner-image{
    display:block;

    width:200px;

    height:auto;

    margin:0 auto 12px;
}

.bookmark-item p{
    margin:0;

    font-size:16px;
}

/* ---------- 中央線 ---------- */

.bookmark-divider{
    width:2px;

    height:230px;

    background:#4f4b40;
}

/* ---------- Search site ---------- */

.bookmark-search{
    text-align:center;
}

.bookmark-search h3{
    margin:0 0 35px;

    font-family:"Cormorant Garamond",serif;

    font-size:24px;
}

.search-image{
    width:180px;

    height:auto;

    display:block;

    margin:0 auto 20px;
}

/* =========================
   ページ上部へ戻る
========================= */

.page-top{
    position:fixed;

    z-index:20;

    right:40px;

    bottom:40px;

    width:60px;

    height:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:var(--bg);

    text-decoration:none;

    background:var(--brown);

    font-family:"Cormorant Garamond","Yu Mincho",serif;

    font-size:19px;

    box-sizing:border-box;

    border:2px solid var(--paper-line);
}

.page-top:hover{
    opacity:0.8;
}

/* =========================
   Gallery
========================= */

.gallery-content{
    padding-top:0;
}

.gallery-header{
    padding-top:45px;
    text-align:center;
}

.gallery-header h1{
    margin:0;
    padding-bottom:12px;

    font-family:"Cormorant Garamond",serif;
    font-size:64px;
    font-weight:700;

    border-bottom:2px solid #4f4b40;
}

.gallery-header h1 a{
    color:inherit;
    text-decoration:none;
}

.gallery-header h1 a:hover{
    opacity:0.72;
}

.gallery-main{
    margin-top:68px;
}

.gallery-entrances{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,clamp(280px,23.5vw,600px)));
    justify-content:center;
    align-items:start;
    gap:clamp(40px,4vw,90px);
}

.gallery-entrance{
    position:relative;
    display:block;
    color:var(--text);
    text-decoration:none;
}

.gallery-entrance-image{
    display:block;
    width:100%;
    height:auto;
}

.gallery-label{
    position:absolute;
    z-index:1;

    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 14px;

    color:#120f0b;
    background:#ead3a3;
    border:1px solid #b59a67;

    font-family:"Caveat",cursive;
    font-size:32px;
    font-weight:600;
    line-height:1;
    white-space:normal;
    overflow-wrap:anywhere;
}

.gallery-label-original{
    top:21px;
    left:-34px;
    padding-inline:10px;
    transform:rotate(-8deg);
}

.gallery-label-arrow{
    position:relative;
    top:2px;
    font-size:20px;
    line-height:1;
}

.gallery-label-photo{
    top:176px;
    right:-20px;
    transform:rotate(7deg);
}

.camera-icon{
    position:relative;
    display:block;
    width:22px;
    height:14px;
    box-sizing:border-box;
    border:2px solid currentColor;
    border-radius:2px;
}

.camera-icon::before{
    content:"";
    position:absolute;
    top:2px;
    left:6px;
    width:6px;
    height:6px;
    border:2px solid currentColor;
    border-radius:50%;
}

.camera-icon::after{
    content:"";
    position:absolute;
    top:-5px;
    left:3px;
    width:7px;
    height:4px;
    border:2px solid currentColor;
    border-bottom:0;
}

/* =========================
   Gallery一覧（Original Works・Photo共通）
========================= */

.original-gallery-main{
    margin-top:30px;
}

.gallery-filters{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    max-width:960px;
    margin:0 auto 39px;
}

.gallery-filter{
    padding:4px 12px;
    color:var(--text);
    background:transparent;
    border:1px solid #4f4b40;
    font:inherit;
    font-size:85%;
    cursor:pointer;
}

.gallery-filter:hover,
.gallery-filter.is-active{
    color:var(--bg);
    background:var(--brown);
}

.original-gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    max-width:960px;
    min-height:300px;
    margin:0 auto;
}

.original-gallery-column{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
}

.original-gallery-item{
    margin:0;
}

.original-gallery-item img{
    display:block;
    width:100%;
    height:auto;
}

.gallery-work-open{
    display:block;
    width:100%;
    padding:0;
    background:transparent;
    border:0;
    cursor:zoom-in;
}

.gallery-work-open:hover img{
    opacity:0.85;
}

.gallery-empty{
    margin:90px 0;
    text-align:center;
}

.gallery-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:55px auto 20px;
}

.gallery-pagination[hidden]{
    display:none;
}

.gallery-pagination button{
    padding:4px;
    color:var(--text);
    background:transparent;
    border:0;
    font:inherit;
    cursor:pointer;
}

.gallery-pagination button:hover,
.gallery-pagination button.is-active{
    text-decoration:underline;
}

.gallery-pagination button:disabled{
    opacity:0.3;
    cursor:default;
}

/* ---------- 作品の拡大表示 ---------- */

.work-modal{
    width:min(1100px,calc(100% - 80px));
    max-height:calc(100vh - 80px);
    padding:0;
    color:var(--text);
    background:var(--bg);
    border:2px solid var(--paper-line);
}

.work-modal.is-landscape{
    width:min(1400px,calc(100% - 40px));
}

.work-modal::backdrop{
    background:rgba(20,17,13,0.78);
}

.work-modal-inner{
    position:relative;
    padding:42px;
}

.work-modal-close{
    position:absolute;
    z-index:1;
    top:10px;
    right:24px;
    padding:0;
    color:var(--text);
    background:transparent;
    border:0;
    font-family:"Cormorant Garamond",serif;
    font-size:36px;
    line-height:1;
    cursor:pointer;
}

.work-modal-figure{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(220px,1fr);
    align-items:center;
    gap:38px;
    margin:0;
}

.work-modal-figure img{
    display:block;
    max-width:100%;
    max-height:calc(100vh - 166px);
    margin:auto;
    object-fit:contain;
}

.work-modal-caption{
    padding:24px;
    border-left:1px solid var(--line);
}

.work-modal-caption p{
    margin:0;
    font-family:"Kiwi Maru","Yu Mincho",serif;
    font-size:15px;
    font-weight:400;
    line-height:1.8;
    white-space:pre-wrap;
}

.work-modal.is-landscape .work-modal-figure,
.work-modal.has-no-caption .work-modal-figure{
    display:block;
}

.work-modal.is-landscape .work-modal-caption{
    margin-top:28px;
    border-top:1px solid var(--line);
    border-left:0;
}

.work-modal.is-landscape:not(.has-no-caption) .work-modal-figure img{
    max-height:calc(100vh - 300px);
}

.work-modal.has-no-caption .work-modal-caption{
    display:none;
}

/* =========================
   共通メニュー・フッターロゴ
========================= */

.site-menu-toggle,
.site-menu-overlay{
    display:none;
}

.mobile-only{
    display:none;
}

@media (min-width:761px){
    .text-main{
        margin-top:63px;
    }

    .text-book-subtitle{
        font-size:clamp(10px,0.78vw,15px);
    }
}

@media (min-width:1500px) and (max-width:2200px){
    .text-desk-layout{
        width:min(calc(100% - 120px),1900px);
    }
}

@media (max-width:1150px) and (min-width:761px){
    .text-book{
        width:min(28%,270px);
    }

    .text-updates{
        width:min(28%,270px);
    }

    .text-updates-paper{
        width:88%;
    }

    .text-pen{
        right:-15%;
        width:108%;
    }
}

@media (max-width:1000px){
    .gallery-entrances{
        grid-template-columns:minmax(260px,500px);
        gap:55px;
    }

    .gallery-label-photo{
        top:22%;
    }

    .original-gallery{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .work-modal-figure{
        display:block;
    }

    .work-modal-figure img{
        max-height:65vh;
    }

    .work-modal-caption{
        margin-top:28px;
        border-top:1px solid var(--line);
        border-left:0;
    }
}

/* =========================
   スマートフォン表示
========================= */

@media (max-width:760px){
    body{
        overflow-x:hidden;
        background:#302412;
    }

    body.menu-open{
        overflow:hidden;
    }

    .container{
        display:block;
        min-height:calc(100vh - 107px);
        margin:52px 0 55px;
        background:var(--bg);
    }

    .link-content{
        padding:0 18px 20px;
    }

    .link-header{
        padding-top:28px;
    }

    .link-header h1{
        padding-bottom:8px;
        font-size:48px;
    }

    .link-main{
        margin:38px auto 35px;
    }

    .link-board{
        display:flex;
        flex-direction:column;
        gap:38px;
        min-height:0;
        margin:0;
        padding:50px 28px 38px 20px;
        background-image:
            radial-gradient(circle at center 18px, var(--bg) 0 5px, #c9bea0 5.5px 7px, transparent 7.5px);
        background-size:40px 40px;
    }

    .link-sns,
    .link-group,
    .link-commission{
        position:relative;
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
        width:100%;
        min-width:0;
    }

    .link-sns{
        order:1;
        min-height:0;
        padding:18px 18px 30px;
        background-image:none;
    }

    .link-shop{ order:2; }
    .link-homepage{ order:3; }

    .link-commission{
        order:4;
        min-height:0;
        margin-top:8px;
        padding:42px 18px 24px;
        transform:rotate(2deg);
    }

    .link-group h2{
        margin-bottom:25px;
        font-size:29px;
    }

    .link-shop::after,
    .link-homepage::after{
        top:54px;
    }

    .link-list li,
    .link-sns-list li{
        display:block;
        margin-bottom:22px;
    }

    .link-list li > span{
        display:block;
        margin-top:8px;
        font-size:11.5px;
        line-height:1.55;
    }

    .link-shop .link-list li > span{
        margin-left:6px;
    }

    .link-sns-list .link-name{
        font-size:18px;
    }

    .link-sns-list .link-name-script{
        font-size:22px;
    }

    .link-sns-list span{
        padding-top:0;
    }

    .link-sns-details p{
        display:block;
    }

    .link-sns-details a,
    .link-sns-details .link-description-emphasis{
        display:block;
    }

    .link-sns-details .link-description-emphasis{
        margin-top:4px;
    }

    .link-commission h2{
        font-size:34px;
    }

    .link-commission .link-list li{
        display:block;
        margin-bottom:22px;
    }

    .link-commission .link-url{
        padding-top:0;
        font-size:11.5px;
    }

    .commission-tape{
        width:34px;
        height:62px;
    }

    nav{
        display:flex;
        flex-direction:column;
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        z-index:1000;
        width:min(250px,62vw);
        padding:72px 30px 30px;
        border:0;
        background:rgba(51,45,38,0.86);
        box-shadow:none;
        overflow-y:auto;
        visibility:hidden;
        transform:translateX(100%);
        transition:transform 0.35s ease,visibility 0s linear 0.35s;
    }

    nav.is-open{
        visibility:visible;
        transform:translateX(0);
        transition:transform 0.35s ease;
    }

    nav .logo{
        display:block;
        order:2;
        width:120px;
        height:auto;
        margin:auto auto 0;
        filter:brightness(0) invert(1);
        opacity:0.9;
        transform:translateX(-20px);
    }

    nav > a{
        display:block;
        order:2;
        margin:auto auto 0;
        pointer-events:none;
    }

    nav > a .logo{
        margin:0;
    }

    nav ul{
        display:block;
        order:1;
        max-width:none;
        margin:0;
        text-align:left;
    }

    nav li{
        margin:0 0 13px;
        color:var(--bg);
        white-space:nowrap;
    }

    nav li::before{
        content:"•";
        margin-right:3px;
        font-size:24px;
    }

    nav a{
        display:inline;
        color:var(--bg);
        font-size:27px;
        line-height:1.15;
    }

    .mobile-only{
        display:inline;
    }

    .site-menu-overlay{
        position:fixed;
        inset:0;
        z-index:999;
        display:block;
        background:rgba(36,31,26,0.38);
        opacity:0;
        pointer-events:none;
        transition:opacity 0.35s ease;
    }

    .site-menu-overlay[hidden]{
        display:block;
    }

    .site-menu-overlay.is-open{
        opacity:1;
        pointer-events:auto;
    }

    .site-menu-toggle{
        position:fixed;
        top:65px;
        right:10px;
        z-index:1001;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        width:48px;
        height:48px;
        padding:10px;
        border:2px solid var(--line);
        background:var(--bg);
        color:var(--line);
        cursor:pointer;
    }

    .site-menu-toggle span{
        display:block;
        width:100%;
        height:2px;
        background:currentColor;
        transform-origin:center;
        transition:transform 0.2s ease,opacity 0.2s ease;
    }

    .site-menu-toggle.is-open span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .site-menu-toggle.is-open span:nth-child(2){
        opacity:0;
    }

    .site-menu-toggle.is-open span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .content{
        width:100%;
        min-width:0;
        padding:28px 12px 0;
        border-left:0;
    }

    .text-content{
        padding:0;
    }

    .text-page nav{
        width:min(250px,62vw);
        padding:72px 30px 30px;
        border:0;
    }

    .text-page nav .logo{
        width:120px;
        margin:0;
    }

    .text-page nav li{
        margin:0 0 13px;
    }

    .text-page nav a{
        font-size:27px;
    }

    .text-header{
        padding:24px 18px 0;
    }

    .text-header h1{
        padding-bottom:7px;
        font-size:50px;
    }

    .text-main{
        margin-top:30px;
    }

    .text-desk{
        padding:48px 24px 62px;
    }

    .text-desk-layout{
        display:flex;
        flex-direction:column;
        gap:48px;
        width:100%;
        aspect-ratio:auto;
    }

    .text-book{
        position:relative;
        top:auto;
        left:auto;
        width:min(82vw,330px);
        margin:0 auto;
    }

    .text-book-novel{
        transform:rotate(-4deg);
    }

    .text-book-references{
        transform:rotate(3deg);
    }

    .text-book-references .text-book-copy h2{
        right:auto;
        left:22%;
        width:56%;
        box-sizing:border-box;
    }

    .text-book-copy h2{
        font-size:29px;
    }

    .text-book-copy ul{
        font-size:10px;
    }

    .text-book-publisher{
        font-size:9px;
    }

    .text-updates{
        position:relative;
        top:auto;
        right:auto;
        height:350px;
        width:min(84vw,350px);
        min-height:350px;
        margin:3px auto 0;
    }

    .text-updates-label{
        left:1%;
        width:80%;
        min-height:108px;
        padding:0 18px;
    }

    .text-updates-label h2{
        font-size:22px;
    }

    .text-updates-paper{
        top:94px;
        width:86%;
        min-height:230px;
        padding:42px 24px;
    }

    .text-updates-paper ul{
        font-size:12px;
    }

    .text-pen{
        right:-5%;
        bottom:58px;
        width:110%;
    }

    .text-content footer{
        min-height:96px;
        padding:30px 0 20px;
    }

    footer{
        position:relative;
        min-height:126px;
        padding:28px 0 18px;
        box-sizing:border-box;
    }

    .page-top{
        right:14px;
        bottom:14px;
        width:48px;
        height:48px;
        font-size:17px;
    }

    /* ---------- Home ---------- */

    .home-header{
        margin-top:68px;
    }

    .bell{
        width:105px;
    }

    .home-header h1{
        margin:24px 0 0;
        font-size:41px;
    }

    .description{
        margin:34px auto 0;
        font-size:13px;
        line-height:1.75;
    }

    .home-main{
        margin-top:72px;
    }

    .news{
        width:100%;
    }

    .news h2{
        padding:0 0 9px 10px;
        font-size:18px;
    }

    .news ul{
        margin-top:20px;
        padding-left:24px;
        font-size:11.5px;
    }

    .home-main .news{
        padding-bottom:20px;
        border-bottom:2px solid var(--line);
    }

    .home-main + footer{
        min-height:100px;
        padding-top:58px;
    }

    .home-main + footer small{
        font-size:12.5px;
    }

    /* ---------- About ---------- */

    .about-content,
    .gallery-content{
        padding:0 18px 28px;
    }

    .about-header,
    .gallery-header{
        padding-top:27px;
    }

    .about-header h1,
    .gallery-header h1{
        padding-bottom:9px;
        font-size:48px;
    }

    .about-header h1{
        font-size:41px;
    }

    .about-introduction{
        padding:24px 2px;
    }

    .about-introduction p{
        font-size:13px;
        line-height:1.75;
    }

    .about-main{
        margin-top:45px;
    }

    .site-data,
    .prohibited-matters,
    .contact,
    .bookmark{
        width:92%;
        max-width:none;
        margin:53px auto 36px;
        padding:98px 26px 32px;
        font-size:13px;
        line-height:1.65;
        letter-spacing:0;
    }

    .site-data{
        margin-top:12px;
    }

    .bookmark{
        min-height:0;
    }

    .site-data::before,
    .prohibited-matters::before,
    .contact::before,
    .bookmark::before{
        top:8px;
        right:16px;
        bottom:auto;
        left:16px;
        width:auto;
        height:22px;
        background-position:left center;
        background-size:40px 22px;
        background-repeat:round no-repeat;
    }

    .site-data h2,
    .contact h2,
    .bookmark h2{
        top:42px;
        left:9px;
        padding:6px 14px;
        font-size:18px;
        text-align:center;
    }

    .prohibited-matters h2{
        top:42px;
        width:max-content;
        max-width:calc(100% - 20px);
        padding:7px 14px;
        box-sizing:border-box;
        font-size:18px;
        text-align:center;
        white-space:nowrap;
    }

    .site-data-inner{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:48px;
    }

    .site-data-list{
        gap:14px;
        width:100%;
    }

    .site-data-list > div{
        grid-template-columns:5em minmax(0,1fr);
        column-gap:10px;
    }

    .site-data-list dd{
        overflow-wrap:normal;
        word-break:normal;
    }

    .link-note{
        top:0;
        left:0;
        width:min(230px,100%);
        margin:3px auto 10px;
        padding:22px 15px 22px 25px;
        transform:rotate(4deg);
    }

    .link-note p{
        font-size:11px;
    }

    .link-note::before{
        width:50px;
    }

    .prohibited-matters{
        padding-right:24px;
        padding-left:32px;
    }

    .prohibited-list li{
        margin-bottom:24px;
    }

    .prohibited-ja,
    .prohibited-en{
        overflow-wrap:break-word;
        text-wrap:pretty;
    }

    .prohibited-ja{
        font-size:13px;
        letter-spacing:.035em;
        word-break:auto-phrase;
    }

    .prohibited-en{
        font-size:12px;
        line-height:1.7;
        letter-spacing:.015em;
        word-break:normal;
    }

    .contact-list li{
        display:block;
        margin-bottom:17px;
        font-size:13px;
    }

    .contact-list .contact-mail{
        margin-top:0;
    }

    .contact-name{
        display:block;
        margin-bottom:3px;
    }

    .contact-list a,
    .contact-list li > span:last-child{
        white-space:normal;
        overflow-wrap:normal;
        word-break:normal;
    }

    .bookmark-inner{
        display:grid;
        grid-template-columns:1fr;
        gap:29px;
        min-height:0;
    }

    .bookmark-divider{
        width:100%;
        height:1px;
    }

    .bookmark-banner-image,
    .search-image{
        max-width:100%;
    }

    .bookmark-banner-image{
        width:170px;
    }

    .search-image{
        width:153px;
    }

    .bookmark-item{
        margin-bottom:30px;
    }

    .bookmark-item p{
        font-size:inherit;
        white-space:nowrap;
    }

    .bookmark-search h3{
        margin-bottom:20px;
        font-size:18px;
    }

    /* ---------- Gallery入口 ---------- */

    .gallery-main{
        margin-top:42px;
    }

    .gallery-entrances{
        grid-template-columns:minmax(0,420px);
        gap:50px;
    }

    .gallery-label{
        gap:6px;
        padding:7px 10px;
        font-size:23px;
    }

    .gallery-label-original{
        top:13px;
        left:-4px;
        padding-inline:9px;
    }

    .gallery-label-arrow{
        top:1px;
        font-size:15px;
    }

    .gallery-label-photo{
        top:24%;
        right:-3px;
    }

    .camera-icon{
        width:18px;
        height:12px;
    }

    .camera-icon::before{
        top:2px;
        left:5px;
        width:4px;
        height:4px;
    }

    /* ---------- Gallery一覧 ---------- */

    .original-gallery-main{
        margin-top:22px;
    }

    .gallery-filters{
        gap:8px;
        margin-bottom:25px;
    }

    .gallery-filter{
        padding:4px 8px;
        font-size:12px;
    }

    .original-gallery{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        width:100%;
    }

    .original-gallery-column{
        gap:10px;
    }

    .gallery-pagination{
        flex-wrap:wrap;
        gap:9px;
        margin-top:38px;
    }

    /* ---------- 作品の拡大表示 ---------- */

    .work-modal,
    .work-modal.is-landscape{
        width:calc(100% - 24px);
        max-width:none;
        max-height:calc(100dvh - 24px);
        box-sizing:border-box;
        overflow-y:auto;
        overscroll-behavior:contain;
    }

    .work-modal::backdrop{
        position:fixed;
        inset:0;
    }

    .work-modal-inner{
        padding:44px 14px 18px;
    }

    .work-modal-close{
        top:9px;
        right:12px;
        font-size:32px;
    }

    .work-modal-figure,
    .work-modal.is-landscape .work-modal-figure,
    .work-modal.has-no-caption .work-modal-figure{
        display:flex;
        flex-direction:column;
        gap:0;
        width:100%;
    }

    .work-modal-figure img,
    .work-modal.is-landscape:not(.has-no-caption) .work-modal-figure img{
        width:auto;
        max-width:100%;
        max-height:55dvh;
        object-fit:contain;
    }

    .work-modal-caption,
    .work-modal.is-landscape .work-modal-caption{
        width:100%;
        margin:16px 0 0;
        padding:15px 2px 0;
        box-sizing:border-box;
        border-top:1px solid var(--line);
        border-left:0;
    }

    .work-modal-caption p{
        font-size:13px;
        line-height:1.7;
    }

    .work-modal.has-no-caption .work-modal-figure img{
        max-height:calc(100dvh - 92px);
    }
}