@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Shippori+Mincho&display=swap');



body{
    position: relative;
}

a:link{
    text-decoration: none;
    color: black;
}
a:visited{
    color: black;
}

/*最初の画面*/
#atFirst{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100vh;

    position: absolute;
    top: 0;
    left: 0%;
    z-index: 15;
    pointer-events: none;

    background-color: rgb(234, 225, 224);
   
}


    #title{
        position: relative;
        margin: auto;

        font-size: 5em;
        font-family: "Shadows Into Light", cursive;
        
    }

    .fadeout {
        animation: fadeOut 3s;
        animation-fill-mode: forwards;
      }
      @keyframes fadeOut {
        0% {
          opacity: 1;
        }
        30% {
            opacity: 1;
        }
        100% {
          opacity: 0;
          display: none;
        }
      }



/*メニュー*/
#menu{
    display: flex;

    width: 100%;
    height: 50vh;

    position: absolute;
    top: -500px;
    left: 0%;

    background-color: rgb(185, 178, 176);
    box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.8);
    font-size: 3em;

    z-index: 10;
    

}

    #menu > div{
        margin: auto;

        flex: 1;
        text-align: center;

        font-family: "Shadows Into Light", cursive;
    }

    .menuList > ul{
        list-style-type: none;
        
        font-size: 0.35em;
        font-family: 'Shippori Mincho', serif;


        text-align: left;
    }

        #menu.SlideOut {

            animation: SlideOut 0.5s forwards;
        }
        @keyframes SlideOut{
            from {
            transform: translateY(0);
            }
            to {
            transform: translateY(700px);
            }
        }
      
        #menu.SlideIN {
         
            animation: SlideIN 0.5s forwards;
        }
        @keyframes SlideIN{
            from {
            transform: translateY(700px);
            }
            to {
            transform: translateY(0);
            }
        }


    #menu_btn{
        text-align: center;

        padding: auto;

        position: absolute;
        top: 52px;
        right: 30px;

        width: 135px;
        height: 75px;

        z-index: 12;
        

        font-family: "Shadows Into Light", cursive;
        color: rgb(255, 255, 255);
        font-size: 4em;
        
    }
        #menu_btn :hover{
            text-shadow: 0px 0px 5px rgb(255, 255, 255);
        }



    #kanban{
        position: absolute;
        top: -10px;
        right: 0;
/*
        z-index: 12;
        */
    }

/*メイン*/
.main{
    background: linear-gradient(25deg, rgba(255,255,255,0), rgb(132, 77, 63, 0.3)50%, rgba(20,20,20,1)), 
                url("./image/room.png");
    background-repeat:  no-repeat;
    background-position: center center;  

    background-size: cover;
    width: 100%;
    height: 100vh;

    position: absolute;
    top: 0%;
    left: 0%;

    margin: auto;
    
    z-index: 5;
    
}


.interia{
    position: relative;
    width: 100%;
    height: 100%;

}

.interia > div{
    height: 150px;
    width: 15%;
}

    #interia1{
        position: absolute;
        top: 75%;
        left: 65%;
        text-align: right;
    }
    #interia2{
        position: absolute;
        top: 45%;
        left: 20%;
    }
    #interia3{
        position: absolute;
        top: 10%;
        left: 50%;
        text-align: right;
    }


.remote{
    opacity: 0;
}
.remote:hover{
    opacity: 1;
}




/*リンクウィンドウ*/


.bookShelf{

    width: 100%;
    height: auto;

    margin: 0 auto;
    margin-top: 15%;

    display: flex;

}

@media(min-width: 1000px){
    .bookShelf{
        display: flex;
      }
    .Link{
        width: 30%;
    }
}
@media (max-width: 999px) {
    .bookShelf{
        display: block
      }
    .Link{
        width: 50%;
    }
    .Link > ul > li {
        font-size: 0.8em;
    }
}

    .Link{
       
        z-index: 25;

        margin: auto;
        font-size: 1.5em;
        text-align: left;
    }

    .Link > ul{
        list-style-type: none;
        
        font-family: 'Shippori Mincho', serif;
       

    }
    
    .Link > ul > li > a:link{
        color: white;
    }
    .Link > ul > li > a:hover{
        color: white;
        text-shadow: 0px 0px 5px rgb(255, 255, 255);
    }
    .Link > ul > li > a:visited{
        color: white;
    }


    .bookShelf > img{
        height: 30%;
        max-width: 65%;
        padding: 25px;

        position: relative;

    }

  



#books > .hiddenLink{
    display: none;
}

.openLink{
        text-align: center;
        font-family: 'Shippori Mincho', serif;

        display: block;
        margin: auto;
        padding: auto;
       

        position: absolute;
        top: 0;
        left: 5%;

        width: 90%;
        height: 100%;

        background:linear-gradient(to bottom, rgba(61, 44, 44, 0.9), rgba(39, 38, 38, 0.9)50%, rgba(0, 0, 0, 0.9));
    

    animation: fadeIn 1s;
    animation-fill-mode: forwards;
}

    @keyframes fadeIn {
        0% {
        opacity: 0;
        display: none;
        }
        30% {
            opacity: 0;
        }
        100% {
        opacity: 1;
        }
    }


    @media(min-width: 1000px){
        .openLink img{
            max-width: 80%;
            height: 75%;
    
            margin: 2.5% auto;
        }
    }
    @media (max-width: 999px) {
        .openLink img{
            width: 100%;
            margin: 7% auto;
        }
    }



.closebtn{

    width: 100%;
    height: 30px;

    font-size: 1.2em;
    color:  rgb(237, 237, 237);
    font-family: "Shadows Into Light", cursive;

    margin: 20px  auto;
    margin-bottom: 2.5%;

}

 .closebtn:hover{
    text-decoration: underline;
 }