html,
body {
    margin: 0;
    padding: 0;
    /* ブラウザのデフォルトの余白を消す */
    overflow: hidden;
}

.book1,
.book2,
.book3,
.book4,
.book5,
.book6,
.book7 {
    position: relative;
    /* ピン留めするようにアイコンを置く。画面全体の左上基準ではなくする */

    width: 100vw;
    /* 比率を保つかつ画面に応じて変わる */
    height: 71vw;
    /* 1440:1024 */

    /*width: 1400px;
    height: 1240px;*/

    margin: 0 auto;
    /* 画面中央に箱を配置。上下の余白を0。左右の余白を自動。 */

    min-width: 1000px;
    min-height: 710px;
    position: relative;
}

.book1 {
    background-color: #81D958;
}

.book2 {
    background-color: #FAA0E3;
}

.book3 {
    background-color: #8F6153;
}

.book4 {
    background-color: #8F6153;
}

.book5 {
    background-color: #FAED58;
}

.book6 {
    background-color: #97B1F0;
}

.book7 {
    background-color: #fff6be;
}



.hover1 {
    position: absolute;

    left: calc(295/1440*100vw);
    top: calc(151/1024*100vh);
    width: calc(80/1440*100vw);
    height: auto;
}

.hover2 {
    position: absolute;
    left: calc(488/1440*100vw);
    top: calc(306/1024*100vh);
    width: calc(124/1440*100vw);
    height: auto;
}

.hover3 {
    position: absolute;
    left: calc(341/1440*100vw);
    top: calc(498/1024*100vh);
    width: calc(77/1440*100vw);
    height: auto;
}

.hover4 {
    position: absolute;
    left: calc(1078/1440*100vw);
    top: calc(581/1024*100vh);
    width: calc(118/1440*100vw);
    height: auto;
}

.hover5 {
    position: absolute;
    left: calc(1002/1440*100vw);
    top: calc(186/1024*100vh);
    width: calc(120/1440*100vw);
    height: auto;
}

.hover6 {
    position: absolute;
    left: calc(829/1440*100vw);
    top: calc(465/1024*100vh);
    width: calc(150/1440*100vw);
    height: auto;
}

.hover7 {
    position: absolute;
    left: calc(701/1440*100vw);
    top: calc(790/1024*100vh);
    width: calc(130/1440*100vw);
    height: auto;
}

.book-title,
.book-author,
.book-publisher,
.book-year,
.book-isbn {
    /*position: absolute;*/

    background-color: white;
    border: 1px solid rgb(0, 0, 0);
    padding: 6px 13px;
    display: inline-block;
    font-family: 'IBM Plex Sans JP';
    font-weight: 300;
    z-index: 1;

}

.link1,
.link2,
.link3,
.link4,
.link5,
.link6,
.link7 {
    position: absolute;

    background-color: white;
    border: 1px solid rgb(0, 0, 0);
    padding: 3px 10px;
    display: inline-block;
    font-family: 'IBM Plex Sans JP';

}

.comment1,
.word1,
.comment2,
.word2,
.comment3,
.word3,
.comment4,
.word4,
.comment5,
.word5,
.comment6,
.word6,
.comment7,
.word7 {
    position: absolute;

    background-color: white;
    border: 1px solid rgb(0, 0, 0);
    padding: 15px 20px;
    display: inline-block;
    font-family: 'IBM Plex Sans JP';
    z-index: 1;
}


.book-title {
    font-size: calc(30/1440*100vw);
}

.book-author,
.book-publisher,
.book-year,
.book-isbn {
    font-size: calc(20/1440*100vw);
}

.comment1,
.word1,
.comment2,
.word2,
.comment3,
.word3,
.comment4,
.word4,
.comment5,
.word5,
.comment6,
.word6,
.comment7,
.word7,
.link1,
.link2,
.link3,
.link4,
.link5,
.link6,
.link7 {
    font-size: calc(15/1440*100vw);
}


.bookgroup {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(20/1024*100vh);

    writing-mode: horizontal-tb !important;
}

.book1 .bookgroup {
    left: calc(875/1440*100vw);
    top: calc(174/1024*100vh);
}

.book2 .bookgroup {
    left: calc(200/1440*100vw);
    top: calc(550/1024*100vh);
}

.book3 .bookgroup {
    left: calc(800/1440*100vw);
    top: calc(200/1024*100vh);
}

.book4 .bookgroup {
    left: calc(200/1440*100vw);
    top: calc(150/1024*100vh);
}

.book5 .bookgroup {
    left: calc(350/1440*100vw);
    top: calc(250/1024*100vh);
}

.book6 .bookgroup {
    left: calc(200/1440*100vw);
    top: calc(240/1024*100vh);
}

.book7 .bookgroup {
    left: calc(990/1440*100vw);
    top: calc(190/1024*100vh);
}



.comment1 {
    left: calc(205/1440*100vw);
    top: calc(624/1024*100vh);
}

.word1 {
    left: calc(135/1440*100vw);
    top: calc(474/1024*100vh);
}

.comment2 {
    left: calc(908/1440*100vw);
    top: calc(358/1024*100vh);
}

.word2 {
    left: calc(833/1440*100vw);
    top: calc(182/1024*100vh);
}

.comment3 {
    left: calc(505/1440*100vw);
    top: calc(664/1024*100vh);
}

.word3 {
    left: calc(135/1440*100vw);
    top: calc(154/1024*100vh);
}

.comment4 {
    left: calc(365/1440*100vw);
    top: calc(654/1024*100vh);
}

.word4 {
    left: calc(875/1440*100vw);
    top: calc(344/1024*100vh);
}

.comment5 {
    left: calc(805/1440*100vw);
    top: calc(654/1024*100vh);
}

.word5 {
    left: calc(705/1440*100vw);
    top: calc(444/1024*100vh);
}

.comment6 {
    left: calc(455/1440*100vw);
    top: calc(694/1024*100vh);
}

.word6 {
    left: calc(975/1440*100vw);
    top: calc(654/1024*100vh);

}

.comment7 {
    left: calc(100/1440*100vw);
    top: calc(450/1024*100vh);

}

.word7 {
    left: calc(105/1440*100vw);
    top: calc(724/1024*100vh);

}




.link1 {
    left: calc(1000/1440*100vw);
    top: calc(600/1024*100vh);
    z-index: 1;
}

.link2 {
    left: calc(160/1440*100vw);
    top: calc(460/1024*100vh);
    z-index: 1;
}

.link3 {
    left: calc(1050/1440*100vw);
    top: calc(620/1024*100vh);
    z-index: 1;
}

.link4 {
    left: calc(150/1440*100vw);
    top: calc(580/1024*100vh);
    z-index: 1;
}

.link5 {
    left: calc(1100/1440*100vw);
    top: calc(520/1024*100vh);
    z-index: 1;
}

.link6 {
    left: calc(1070/1440*100vw);
    top: calc(400/1024*100vh);
    z-index: 1;
}

.link7 {
    left: calc(1100/1440*100vw);
    top: calc(600/1024*100vh);
    z-index: 1;
}

#rain {
    position: absolute;
    width: calc(540/1440*100vw);
    height: auto;
    left: calc(20/1440*100vw);
    top: calc(40/1024*100vh);
    z-index: 0;
}

#kusa {
    position: absolute;
    width: calc(680/1440*100vw);
    height: auto;
    left: calc(696/1440*100vw);
    top: calc(536/1024*100vh);
    z-index: 0;
}

#oto {
    position: absolute;
    width: calc(300/1440*100vw);
    height: auto;
    left: calc(590/1440*100vw);
    top: calc(260/1024*100vh);
    z-index: 0;
}
#magic {
    position: absolute;
    width: calc(300/1440*100vw);
    height: auto;
    left: calc(1100/1440*100vw);
    top: calc(360/1024*100vh);
    z-index: 0;
}

.hover1,
.hover2,
.hover3,.hover4,
.hover5,.hover6,
.hover7 {
    display: inline-block;

    animation: bookMove 1.6s steps(1) infinite;
}

@keyframes bookMove{
    0% {
        transform: rotate(0deg);    
    }
    50%{
        transform: rotate(-10deg);
    }
}