```css
@charset "utf-8";


/* =========================================================
   BASE
========================================================= */

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

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

body {
    background-color: #727272;

    font-family:
        Verdana,
        Arial,
        sans-serif;

    overflow: hidden;
}

img {
    border: none;
    backface-visibility: hidden;
}


/* =========================================================
   SLICK ICON FONT
========================================================= */

@font-face {

    font-family: 'g_icon';

    src:
        url('../font/g_icon.ttf') format('truetype'),
        url('../font/g_icon.woff') format('woff'),
        url('../font/g_icon.svg#g_icon') format('svg');

    font-weight: normal;

    font-style: normal;

    font-display: block;
}


/* =========================================================
   READER / ZOOM WRAPPER
========================================================= */

.zoomwrap {

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    overflow: auto;

    -webkit-overflow-scrolling: touch;

    background-color: #727272;
}


/* =========================================================
   SLIDER
========================================================= */

.slider {

    width: 100%;

    height: 100%;

    padding-top: 30px;

    box-sizing: border-box;

    background-color: #727272;

    display: none;
}

.slider.slick-initialized {

    display: block;
}


/* =========================================================
   SLICK STRUCTURE
========================================================= */

.slider .slick-list,
.slider .slick-track {

    height: 100%;
}

.slider .slick-slide {

    height: 100%;
}

.slick-slide {

    outline: none;
}


/* =========================================================
   PAGES
========================================================= */

.slider > div {

    height: 100%;
}

.slick-slide .c_i > div {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


/*
   Desktop spreads.

   Same alternating alignment as the
   original Slick reader.
*/

@media (min-width: 769px) {

    .slick-slide:nth-child(odd) .c_i > div {

        justify-content: flex-end;
    }

    .slick-slide:nth-child(even) .c_i > div {

        justify-content: flex-start;
    }

}


.slick-slide .c_i img {

    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

    display: inline-block;

    flex-shrink: 0;

    user-select: none;

    -webkit-user-drag: none;

    pointer-events: none;
}


/* =========================================================
   END SCREEN
========================================================= */

.slider .last_page_in {

    height: 100%;

    margin: 0 10%;

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    line-height: 1;
}

.slider .last_page_in h1 {

    color: #fff;

    margin-bottom: 10px;
}

.slider .last_page_in small {

    color: #ddd;

    font-size: .8em;

    display: block;

    margin-bottom: 25px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.chapter-navigation,
.chapter-menu-navigation,
.reader-navigation {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 12px;
}


/*
   Main menu buttons.
*/

.reader-navigation {

    flex-direction: row;

    align-items: center;
}

.reader-navigation .button {

    display: inline-block;

    margin: 0;
}


/*
   Previous / Next Chapter.
*/

.chapter-menu-navigation {

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: center;

    gap: 6px;
}

.chapter-menu-navigation .button {

    margin: 0;
}


/* =========================================================
   PAGE SCROLLER
========================================================= */

.dots {

    display: block;

    width: 96%;

    height: 14px;

    margin: 8px auto 14px;

    padding: 0;

    box-sizing: border-box;

    overflow: visible;
}

.dots > .slick-dots {

    position: relative !important;

    top: auto !important;

    right: auto !important;

    bottom: auto !important;

    left: auto !important;

    transform: none !important;

    float: none !important;

    display: flex !important;

    padding: 0 !important;

    margin: 0 auto !important;

    width: 100% !important;

    height: 14px !important;

    list-style: none;

    border-radius: 25px;

    overflow: hidden;

    box-sizing: border-box;

    opacity: 1 !important;

    visibility: visible !important;
}

.dots > .slick-dots li {

    position: relative;

    display: block;

    width: 100%;

    height: 14px;

    margin: 0;

    padding: 0;

    cursor: pointer;
}

.dots > .slick-dots li button {

    font-size: 0;

    line-height: 0;

    display: block;

    width: 100%;

    height: 14px;

    padding: 0;

    margin: 0;

    cursor: pointer;

    color: transparent;

    border: 0;

    outline: none;

    background: #555;

    border-radius: 0;

    box-shadow: none;

    opacity: 1;

    transition: .1s;
}

.dots > .slick-dots li button:hover,
.dots > .slick-dots li button:focus {

    outline: none;

    background: #fff;
}

.dots > .slick-dots li.slick-active button {

    background: #ccc;
}


/* =========================================================
   ARROWS
   SLICK-STYLE CSS CHEVRONS
========================================================= */

.slide-arrow {

    opacity: 0;

    z-index: 5;

    height: 100%;

    width: 25%;

    position: absolute;

    top: 0;

    cursor: pointer;

    box-sizing: border-box;

    transition: opacity .15s ease;
}


/*
   LEFT = PREVIOUS
*/

.prev-arrow {

    left: 0;

    right: auto;
}

.prev-arrow span {

    position: absolute;

    top: 50%;

    left: 30px;

    width: 22px;

    height: 22px;

    border-left: 4px solid #fff;

    border-bottom: 4px solid #fff;

    transform:
        translateY(-50%)
        rotate(45deg);

    filter:
        drop-shadow(
            0 0 5px rgba(0,0,0,.7)
        );
}


/*
   RIGHT = NEXT
*/

.next-arrow {

    right: 0;

    left: auto;
}

.next-arrow span {

    position: absolute;

    top: 50%;

    right: 30px;

    width: 22px;

    height: 22px;

    border-top: 4px solid #fff;

    border-right: 4px solid #fff;

    transform:
        translateY(-50%)
        rotate(45deg);

    filter:
        drop-shadow(
            0 0 5px rgba(0,0,0,.7)
        );
}


/*
   Arrows appear when hovered.
*/

.slide-arrow:hover {

    opacity: 1;
}


/*
   Slick automatically disables
   the arrow at the beginning/end.
*/

.slide-arrow.slick-disabled {

    display: none;
}


/* =========================================================
   BUTTONS
========================================================= */

.button {

    -webkit-appearance: none;

    margin: 0 2px;

    min-width: 120px;

    background-color: #000;

    border: 2px solid #888;

    color: #ccc;

    font-size: .875em;

    line-height: 1.5;

    display: inline-block;

    text-align: center;

    text-decoration: none;

    outline: none;

    cursor: pointer;

    border-radius: 20px;

    box-sizing: border-box;

    padding: 5px 12px;

    transition: all .3s;
}

.button:hover {

    background-color: #fff;

    border-color: #59b1eb;

    color: #59b1eb;
}

.button.orange:hover {

    border-color: #eb9359;

    color: #eb9359;
}


/* =========================================================
   MENU
========================================================= */

.menu_box {

    color: #ccc;

    background-color:
        rgba(0,0,0,.9);

    z-index: 30;

    width: 100%;

    position: fixed;

    top: 0;

    left: 0;

    text-align: center;
}


/*
   Menu bar.
*/

.menu_button {

    display: block;

    width: 100%;

    height: 30px;

    line-height: 28px;

    font-weight: bold;

    cursor: pointer;

    transition: .1s;

    color: #ccc;

    user-select: none;
}

.menu_button::before {

    vertical-align: middle;

    display: inline-block;

    content: "▼";

    font-weight: normal;

    font-size: .8em;

    padding: 0 5px;
}

.menu_button.open::before {

    content: "▲";
}


/*
   Menu contents.
*/

.menu_show {

    display: none;

    margin-bottom: 4px;
}

.menu_box h1 {

    color: #f0f0f0;

    font-size: 1.9em;

    font-weight: bold;

    line-height: 1.2em;
}

.slick-counter {

    margin: 18px 0 8px;

    color: #ccc;

    font-size: .9em;
}


/* =========================================================
   MOBILE MENU TAP AREA
========================================================= */

.menu_sizeup {

    display: none;

    width: 100%;

    height: 50px;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 29;
}


/* =========================================================
   HELP
========================================================= */

.help {

    display: none;

    background-color:
        rgba(0,0,0,.9);

    z-index: 100;

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    text-align: center;

    cursor: pointer;

    color: #fff;
}

.help_in {

    width: 80%;

    max-width: 700px;

    padding: 25px;

    border: 3px solid #be0000;

    color: #fff;

    position: absolute;

    top: 50%;

    left: 50%;

    transform:
        translate(-50%, -50%);

    box-sizing: border-box;
}

.help_in h2 {

    margin-top: 0;
}

.help_in p {

    line-height: 1.5;
}


/* =========================================================
   GUIDE
========================================================= */

.guide {

    z-index: 100;

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    text-align: center;

    cursor: pointer;

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

    color: #fff;

    text-shadow:
        0 0 10px rgba(0,0,0,.6);
}

.guide_operation {

    font-weight: bold;

    text-align: center;

    width: 70%;

    overflow: hidden;

    position: absolute;

    top: 50%;

    left: 50%;

    transform:
        translate(-50%,-50%);
}

.guide-arrows {

    margin: 25px 0;

    font-size: 2em;
}


/* =========================================================
   CHAPTERS
========================================================= */

.chapter-list {

    text-align: center;
}

.chapter {

    text-align: center;
}


/* =========================================================
   ZOOM
========================================================= */

.slider.zoom {

    width: 100vw;

    transform:
        scale(1.5);

    transform-origin:
        0 0;
}


/*
   Zoom exit bar.
*/

.zoom_reset {

    display: none;

    width: 100%;

    cursor: pointer;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 50;
}

.zoom_reset .zr_in {

    background-color: #be0000;

    height: 30px;

    line-height: 30px;

    color: #fff;

    font-weight: bold;

    text-align: center;

    box-sizing: border-box;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {


    /* -----------------------------------------------------
       MOBILE ARROWS
    ----------------------------------------------------- */

    .slide-arrow {

        width: 15%;

        height: 100%;

        opacity: 1;
    }

    .prev-arrow,
    .next-arrow {

        padding: 0;

    }


    .prev-arrow span {

        left: 50%;

        width: 16px;

        height: 16px;

        border-width: 3px;

        transform:
            translate(-35%, -50%)
            rotate(45deg);
    }


    .next-arrow span {

        right: 50%;

        width: 16px;

        height: 16px;

        border-width: 3px;

        transform:
            translate(35%, -50%)
            rotate(45deg);
    }


    /* -----------------------------------------------------
       MOBILE END SCREEN
    ----------------------------------------------------- */

    .slider .last_page_in {

        margin: 0 2%;
    }


    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .menu_box .reader-navigation .button {

        display: inline-block;

        margin: 8px 2px;
    }

    .menu_box .chapter-menu-navigation .button {

        display: inline-block;

        margin: 8px 2px;
    }

    .menu_box .dots {

        width: 92%;

        margin-top: 8px;

        margin-bottom: 12px;
    }


    /* -----------------------------------------------------
       MOBILE HELP
    ----------------------------------------------------- */

    .guide_operation {

        font-size: 1.2em;
    }

    .help_in {

        width: 90%;

        max-height: 85vh;

        overflow-y: auto;
    }


    /* -----------------------------------------------------
       MOBILE MENU TAP AREA
    ----------------------------------------------------- */

    .menu_sizeup {

        display: block;
    }


    /* -----------------------------------------------------
       MOBILE ZOOM BAR
    ----------------------------------------------------- */

    .zoom_reset {

        height: 50px;
    }

    .zoom_reset .zr_in {

        height: 50px;

        line-height: 50px;
    }


    /* -----------------------------------------------------
       MOBILE PAGE ALIGNMENT
    ----------------------------------------------------- */

    .slick-slide .c_i > div,
    .slick-slide:nth-child(odd) .c_i > div {

        justify-content: center;
    }


    /* -----------------------------------------------------
       MOBILE MENU TITLE
    ----------------------------------------------------- */

    .menu_box h1 {

        font-size: 1.6em;
    }


    /* -----------------------------------------------------
       DEVICE HELP
    ----------------------------------------------------- */

    .pc_none {

        display: block;
    }

    .sp_none {

        display: none !important;
    }

}
```