*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
}

.swiper{
    width:100%;
    height:100vh;
}

.swiper-slide{

    display:flex;

    justify-content:center;

    align-items:center;

    background:#efefef;

    border-radius:8px;

    overflow:hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

}

.swiper-slide img {

    display: block;

    margin: auto;

}

.swiper-button-next,
.swiper-button-prev{
    color:#2f855a;
}

.swiper-pagination-bullet-active{
    background:#2f855a;
}
/* 表紙ガイド */

.guide{
    position:absolute;
    bottom:70px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.55);
    color:#fff;
    padding:10px 18px;
    border-radius:30px;
    font-size:18px;
    z-index:100;
    animation:guideMove 1.6s infinite;
    pointer-events:none;
}

@keyframes guideMove{

    0%{
        transform:translateX(-35%);
        opacity:0;
    }

    30%{
        opacity:1;
    }

    100%{
        transform:translateX(-65%);
        opacity:0;
    }

}
/* ----------------------
   スワイプガイド
---------------------- */

#swipeGuide{

    position:fixed;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:9999;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    pointer-events:none;

}

.hand{

    font-size:48px;

    animation:swipeHand 1.8s infinite;

}

.guideText{

    background:rgba(0,0,0,.6);

    color:#fff;

    padding:10px 22px;

    border-radius:50px;

    font-size:17px;

    font-weight:bold;

    letter-spacing:.05em;

}

@keyframes swipeHand{

    0%{

        transform:translateX(40px);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    50%{

        transform:translateX(0);

        opacity:1;

    }

    100%{

        transform:translateX(-40px);

        opacity:0;

    }

}
/* ----------------------
   ページ番号
---------------------- */

#pageNumber{

    position:fixed;

    right:20px;

    bottom:20px;

    z-index:999;

    background:rgba(0,0,0,.6);

    color:#fff;

    padding:8px 16px;

    border-radius:20px;

    font-size:14px;

    font-weight:bold;

    letter-spacing:.05em;

}
/* ----------------------
   Zoom
---------------------- */

.swiper-zoom-container {

    width: 100%;
    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}

.swiper-zoom-container img{

    width:auto;

    height:95vh;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

    box-shadow:
        0 15px 45px rgba(0,0,0,.22);

    border-radius:6px;
    content-visibility:auto;

contain:layout paint style;

}
/* ==========================
   サムネイル一覧
========================== */

#thumbnailPanel{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:#ffffff;

    z-index:99999;

    display:none;

    overflow-y:auto;

}

#thumbnailHeader{

    position:sticky;

    top:0;

    background:#2f855a;

    color:#fff;

    padding:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:20px;

}

#closeThumbnail{

    border:none;

    background:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}

#thumbnailGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;

    padding:20px;

    /* サムネイルは左から右へ並べる */
    direction:ltr !important;

}

.thumbnail{

    cursor:pointer;

}

.thumbnail img{

    width:100%;

    border-radius:8px;

    box-shadow:0 2px 8px rgba(0,0,0,.2);

}

.thumbnail p{

    margin-top:8px;

    text-align:center;

    font-weight:bold;

}
/* ----------------------
   メニューボタン
---------------------- */

#menuButton{

    position: fixed;

    top: 15px;

    left: 15px;

    width: 60px;

    height: 60px;

    font-size: 24px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgba(255,255,255,.95);

    border: none;

    border-radius: 12px;

    cursor: pointer;

    z-index: 9999;

    box-shadow: 0 2px 10px rgba(0,0,0,.25);

    transition: .2s;

}

#menuButton:hover{

    transform: scale(1.08);

}
/* ----------------------
   現在ページ
---------------------- */

.thumbnail.active{

    border:4px solid #22c55e;

    border-radius:10px;

    box-shadow:0 0 12px rgba(34,197,94,.5);

}
/* ----------------------
   全画面ボタン
---------------------- */

#fullscreenButton{

    position:fixed;

    top:20px;

    right:20px;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:#2f855a;

    color:#fff;

    font-size:28px;

    cursor:pointer;

    z-index:9999;

    box-shadow:0 4px 12px rgba(0,0,0,.25);

    transition:.2s;

}

#fullscreenButton:hover{

    transform:scale(1.08);

}
#pageNumber {
    direction: ltr;
    unicode-bidi: isolate;
}
/* サムネイル一覧は必ず左→右 */
#thumbnailPanel,
#thumbnailGrid,
.thumbnail {
    direction: ltr !important;
}