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

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

    /*width: 1440px;
    /* figmaの横幅と同じ。デザインを守るため */

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

    /*height: 100vh;
    /* 画面ぴったりにするため */

    height: 71vw;
    /* 1440:1024 */

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

    min-width: 1000px;
    min-height: 710px;

    background-color: #fff6be;

    /*transform: translateY(-120px); */
}

/* figmaのキャンバスをブラウザに再現する */

.icon1,
.icon2,
.icon3,
.icon4,
.icon5,
.icon6,
.icon7 {
    position: absolute;
    z-index: 1;
}

/* 自由配置モードをオンにする */
/* relativeは額縁のような枠。これの左上を基準とする */
/* absoluteは画鋲。relativeの中に配置する */

.icon1 {
    left: calc(295/1440*100vw);
    top: calc(151/1024*100vh);
}
.icon1 img {
    width: calc(80/1440*100vw);
    height: auto;
}
.hover1 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.icon1:hover .hover1 {
    display: block;
}

.icon2 {
    left: calc(488/1440*100vw);
    top: calc(306/1024*100vh);
}
.icon2 img {
    width: calc(124/1440*100vw);
    height: auto;
}
.hover2 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.icon2:hover .hover2 {
    display: block;
}

.icon3 {
    left: calc(341/1440*100vw);
    top: calc(498/1024*100vh);
}
.icon3 img {
    width: calc(77/1440*100vw);
    height: auto;
}
.hover3 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.icon3:hover .hover3 {
    display: block;
}

.icon4 {
    left: calc(1078/1440*100vw);
    top: calc(581/1024*100vh);
}
.icon4 img {
    width: calc(118/1440*100vw);
    height: auto;
}
.hover4 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.icon4:hover .hover4 {
    display: block;
}

.icon5 {
    left: calc(1002/1440*100vw);
    top: calc(186/1024*100vh);
}
.icon5 img {
    width: calc(120/1440*100vw);
    height: auto;
}
.hover5 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.icon5:hover .hover5 {
    display: block;
}

.icon6 {
    left: calc(829/1440*100vw);
    top: calc(465/1024*100vh);
}
.icon6 img {
    width: calc(150/1440*100vw);
    height: auto;
}
.hover6 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.icon6:hover .hover6 {
    display: block;
}

.icon7 {
    left: calc(701/1440*100vw);
    top: calc(790/1024*100vh);
}
.icon7 img {
    width: calc(130/1440*100vw);
    height: auto;
}
.hover7 {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.icon7:hover .hover7 {
    display: block;
}

.moji1,
.moji2,
.moji3,
.moji4,
.moji5,
.moji6,
.moji7,
.moji8,
.moji9,
.moji10,
.moji11 {
    position: absolute;
    font-family: "Dokdo", sans-serif;
    font-size: calc(150/1440*100vw);
  
  
    -webkit-text-stroke: clamp(0.5px,calc(1/1440*100vw), 1px) black;
    /* webkitは現在ほとんどのブラウザで共通の決まり文句なのでこのままセットで書く */
}

.moji1 {
    left: calc(73/1440*100vw);
    top: calc(236/1024*100vh);
    color: #FAED58;
}

.moji2 {
    left: calc(230/1440*100vw);
    top: calc(241/1024*100vh);
    color: #97B1F0;
}

.moji3 {
    left: calc(754/1440*100vw);
    top: calc(278/1024*100vh);
    color: #FAA0E3;
}

.moji4 {
    left: calc(480/1440*100vw);
    top: calc(557/1024*100vh);
    color: #8F6153;
}

.moji5 {
    left: calc(550/1440*100vw);
    top: calc(581/1024*100vh);
    color: #81D958;
}

.moji6 {
    left: calc(679/1440*100vw);
    top: calc(578/1024*100vh);
   color: #FAED58;
}

.moji7 {
    left: calc(897/1440*100vw);
    top: calc(718/1024*100vh);
    color: #97B1F0;
}

.moji8 {
    left: calc(979/1440*100vw);
    top: calc(715/1024*100vh);
    color:#8F6153;
}

.moji9 {
    left: calc(1039/1440*100vw);
    top: calc(716/1024*100vh);
    color: #FAA0E3;
}

.moji10 {
    left: calc(1145/1440*100vw);
    top: calc(702/1024*100vh);
   color: #81D958;
}

.moji11 {
    left: calc(1258/1440*100vw);
    top: calc(730/1024*100vh);
    color:  #FAED58;
}




.icon1,
.icon2,
.icon3,
.icon4,
.icon5,
.icon6,
.icon7 {
    display: inline-block;

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

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

.tap{
    position: absolute;
    left: calc(670/1440*100vw);
    top: calc(160/1024*100vh);
    width:  calc(300/1440*100vw);
    height: auto;
}

.bun{
    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;

    font-size: calc(15/1440*100vw);
    left: calc(70/1440*100vw); 
    top: calc(820/1024*100vh);
}


.haikei{
    position: absolute;
    left: calc(220/1440*100vw);
    top: calc(5/1024*100vh);
    width:  calc(1000/1440*100vw);
    height: auto;
    z-index: 0;
}