/* ページネーションのindex図を装飾する */
.block-row {
display: relative;
justify-content: flex-start;
margin-top: 50px;
user-select: none;
position: relative;
width: fit-content;
margin-inline: auto;
}

.block {
width: 33px;
height: 33px;
align-items: center;
justify-content: center;
font-size: 16px;
color: #333333;
position: relative;
}

.current {
opacity: 0.3;
}

.active {
background-color: rgb(62, 162, 62);
border: none;
opacity: 0.3;
color: white;
cursor: grab;
position: absolute;
top: 0;
left: 0;
z-index: 10;
transition: left 0.05s linear;
}

/* ページネーションのイラストはパターンを作ってランダムで表示するようにする */
/***** パターン1 *****/
.bookshelf1 {
width: 34px;
height: 34px;
position: relative;
background: transparent;
display: inline-block;
}
.bookshelf1::before {
content: "";
position: absolute;
left: 2px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
box-shadow:
8px 0 #a1a1a1;
}


.bookshelf1::after {
content: "";
position: absolute;
left: 25px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(-15deg);
transform-origin: bottom left;
}

/***** パターン2 *****/
.bookshelf2 {
width: 34px;
height: 34px;
position: relative;
background: transparent;
display: inline-block;
}

/* 左の本 */
.bookshelf2::before {
content: "";
position: absolute;
left: 2px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
box-shadow:
20px 0 #a1a1a1;
}


.bookshelf2::after {
content: "";
position: absolute;
left: 15px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(-15deg);
transform-origin: bottom left;
}

/***** パターン3 *****/
.bookshelf3 {
width: 34px;
height: 34px;
position: relative;
background: transparent;
display: inline-block;
}

/* 左の本 */
.bookshelf3::before {
content: "";
position: absolute;
left: 2px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(10deg);
box-shadow:
8px -1px #a1a1a1;
}


.bookshelf3::after {
content: "";
position: absolute;
left: 20px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(0deg);
transform-origin: bottom left;
}

/***** パターン4 *****/
.bookshelf4 {
width: 34px;
height: 34px;
position: relative;
background: transparent;
display: inline-block;
}

/* 左の本 */
.bookshelf4::before {
content: "";
position: absolute;
left: 2px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(13deg);
box-shadow:
20px -5px #a1a1a1;
}


.bookshelf4::after {
content: "";
position: absolute;
left: 13px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(0deg);
transform-origin: bottom left;
}

/***** パターン5 *****/
.bookshelf5 {
width: 34px;
height: 34px;
position: relative;
background: transparent;
display: inline-block;
}

/* 左の本 */
.bookshelf5::before {
content: "";
position: absolute;
left: 12px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(-13deg);
box-shadow:

    8px 1px #a1a1a1;
}


.bookshelf5::after {
content: "";
position: absolute;
left: 2px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(0deg);
transform-origin: bottom left;
}

/***** パターン6 *****/
.bookshelf6 {
width: 34px;
height: 34px;
position: relative;
background: transparent;
display: inline-block;
}

/* 左の本 */
.bookshelf6::before {
content: "";
position: absolute;
left: 2px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
box-shadow:
20px 0 #a1a1a1;
}


.bookshelf6::after {
content: "";
position: absolute;
left: 9px;
top: 3px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(15deg);
transform-origin: bottom left;
}

/***** パターン7 *****/
.bookshelf7 {
width: 34px;
height: 34px;
position: relative;
background: transparent;
display: inline-block;
}

/* 左の本 */
.bookshelf7::before {
content: "";
position: absolute;
left: 2px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
box-shadow:
9px 0 #a1a1a1;
}


.bookshelf7::after {
content: "";
position: absolute;
left: 20px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform-origin: bottom left;
}


/***** パターン8 *****/
.bookshelf8 {
width: 34px;
height: 34px;
position: relative;
background: transparent;
display: inline-block;
}

/* 左の本 */
.bookshelf8::before {
content: "";
position: absolute;
left: 2px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(-13deg);
box-shadow:
    9px 2px #a1a1a1;
}


.bookshelf8::after {
content: "";
position: absolute;
left: 25px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(-22deg);
transform-origin: bottom left;
}

/***** パターン9 *****/
.bookshelf9 {
width: 34px;
height: 34px;
position: relative;
background: transparent;
display: inline-block;
}

/* 左の本 */
.bookshelf9::before {
content: "";
position: absolute;
left: 12px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(13deg);
box-shadow:
    9px -1px #a1a1a1;
}


.bookshelf9::after {
content: "";
position: absolute;
left: 2px;
top: 4px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform-origin: bottom left;
}

/***** パターン10 *****/
.bookshelf10 {
width: 34px;
height: 34px;
position: relative;
background: transparent;
display: inline-block;
}

/* 左の本 */
.bookshelf10::before {
content: "";
position: absolute;
left: 16px;
top: 5px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(13deg);
box-shadow:
    9px -1px #a1a1a1;
}
.bookshelf10::after {
content: "";
position: absolute;
left: 2px;
top: 3px;
width: 7px;
height: 26px;
background: #a1a1a1;
border-radius: 1px;
transform: rotate(22deg);
transform-origin: bottom left;
}

div[class^="bookshelf"] span {
    font-size:18px; color: #333333;
    position: absolute;
    top: 3px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    text-align: center;
}