/* 変数 */
:root {
    --rect-color: #4ca8ff;
}

#contents {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.booklet_sideArea {
    margin: auto;
    visibility: hidden;
}

.booklet_sideArea > img {
    cursor: pointer;
    margin: calc(1px * var(--v-scale));
    visibility: visible; /*chromeタッチのスクロール対策*/
}

.booklet_sideArea:nth-child(3) > img {
    transform: rotate(180deg);
}

.booklet_pageBox {
    flex-grow: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.booklet_footer {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0px calc(6px * var(--v-scale));
}

.booklet_footer input {
    display: none;
}

.booklet_footer input:checked ~ img:nth-child(2) {
    display: none;
}

.booklet_footer input ~ img:nth-child(3) {
    display: none;
}

.booklet_footer input:checked ~ img:nth-child(3) {
    display: inline;
}

.booklet_footer label {
    display: inline-block;
    margin: 0px calc(5px * var(--v-scale));
    width: fit-content;
    font-size: 0px;
}

.booklet_footer img {
    transform: translateZ(0px);
    filter: drop-shadow(0 0 calc(3px * var(--v-scale)) rgba(0, 0, 0, 0.3));
    cursor: pointer;
}

.booklet_pageImgBox {
    width: 100%;
    flex-grow: 1;
}

.booklet_pageImgBox > div {
    width: 100%;
    height: 100%;
    overflow: var(--zoom-overflow);
}

.booklet_pageImgBox > div > div {
    position: relative;
    width: calc(100% * var(--zoom-scale));
    height: calc(100% * var(--zoom-scale));
}

.booklet_pageImgBox > div > div > div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#pageImgArea > svg {
    pointer-events: auto;
}

#pageImgArea > svg {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
}

/*紙面部分*/
.cls-3 {
    fill: transparent !important;
    stroke: transparent !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 3px !important;
    cursor: pointer;
}

.clickAreaShow .cls-3 {
    stroke: var(--rect-color) !important;
}