div{
    border:0px black solid;
}

span{
    display:inline-block;
}

#fullscreen-window{
    display:none;
    z-index: 50;
    position: fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    background-color: black;
}

#fs-photo{
    margin:0px auto 0px auto;
    height:100%;
    width:100%;
    object-fit: contain;
    background-color:transparent; 
}

#fullscreen-mask{
    z-index: 60;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display: none;
    flex-direction: column;
    justify-content: center;
}

#fullscreen-mask-text{
    margin: 0px auto 0px auto;
    border:1px black solid;
    padding:15px;
    font-size: 2rem;
    animation: blinking 1s ease-in-out infinite alternate;
}

#main{
    z-index: 10;
    margin:20px auto 10px auto;
    width:80vw;
    height:90vh;
}

#title{
    text-align: center;
    margin:20px auto 30px auto;
    font-family: 'Shippori Mincho', serif;
    font-size: 2rem;
}

#title-header{
    font-size: 1.2rem;
}

#title2{
    text-align: center;
    margin:10px auto 50px auto;
    font-family: 'Shippori Mincho', serif;
    font-size: 1.2rem;
}


#frame{
    width:90%;
    /* height:100%; */
    margin:10px auto 10px auto;
    display:grid;
    grid-template-columns: repeat(auto-fill,300px);
    grid-template-rows: repeat(auto-fill,300px);
    gap:30px 30px;
    justify-content: space-evenly;
    grid-auto-flow: row;
}

div[id^="photo"]{
    margin:0px;
    padding:0px;
    width:300px;
    height:300px;
    border:0px black solid;
    border-radius: 0px;
    overflow:hidden;
    cursor: pointer;
}

div[id^="photo"] > img{
    width:302px;
    height:302px;
    object-fit: cover;
}

div[id^="photo"] :hover{
    opacity: 0.6;
    transition:0.3s;
}

#pop-window{
    z-index: 20;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    position:fixed;
    display:none;
    background-color:rgba(255, 255, 255, 0.9);
}

#pw-frame{
    width:75%;
    height:100%;
    margin:0px auto 0px auto;
    display: flex;
    flex-direction: row;
    background-color:transparent;
}

#back-button-frame{
    width:10%;
    min-width:100px;
    height:100%;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;  
}

#back-top{
    height:40%;
}

#back-middle{
    padding:0px 10px 0px 10px;
    height:20%;
    min-height:50px;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    justify-content: center;  

}

#back-button{
    margin:0px 0px 0px auto;
    padding:5px 5px 5px 5px;
    width: 50px;
    height: 50px;
    background-color: rgb(255, 255, 255);
    clip-path: polygon(100% 60%, 100% 10%, 70% 35%);
}

#back-bottom{
    height:40%; 
}

#pw-photo-frame{
    width:80%;
    height:100vh;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;    
}

#pw-photo-frame-top{
    height:20%;
    flex-grow: 1;
    flex-shrink: 1;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
}

#pw-photo-frame-top2{
    min-height: 30px;
}

#pw-photo-frame-middle{
    position: relative;
    padding:0px;
    flex-grow:1;
    flex-shrink:1;
    aspect-ratio: 297/210;
}

#pw-photo{
    border:1px black solid;
    margin:0px auto 0px auto;
    height:100%;
    width:100%;
    object-fit: contain;
    background-color:transparent; 
}

#mask{   
    z-index: 40;    
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display: none;
    flex-direction: column;
    justify-content: center;
}

#mask-text{

    margin: 0px auto 0px auto;
    border:1px black solid;
    padding:5px;
    font-size: 1rem;
    animation: blinking 1s ease-in-out infinite alternate;
}

@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

#pw-photo-frame-bottom{
    border:0px red solid;
    height:10%;
    flex-grow: 1;  
    flex-shrink: 1;      
}

#close-and-fullscreen-buttons-frame{
    height:60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#close-button{
    border:2px black solid;
    margin:0px 0px 0px 0px;
    padding:5px;
    position: relative;
    top:0px;
    left:0px;
    width:50px;
    height:45px;
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Noto Sans', sans-serif;
    background-color:white;
    cursor: pointer;
}

.square_btn {
    margin:0px auto 0px auto;
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    border: 0px solid #333; 
    background:transparent; 
  }
   
.square_btn::before, .square_btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 3px; 
height: 26px; 
background: #333; 
}

.square_btn::before {
transform: translate(-50%,-50%) rotate(45deg);
}

.square_btn::after {
transform: translate(-50%,-50%) rotate(-45deg);
}


#fullscreen-button{
    width:30px;
    height:30px;
}

#fullscreen-button-box{
    border:2px black solid;
    margin:0px 0px 0px 0px;
    padding:5px;
    width:50px;
    height:45px;
    text-align: center;
    background-color:white;
}

#forward-button-frame{
    width:10%;
    min-width:100px;
    height:100%;
    background-color:transparent;
    display: flex;
    flex-direction: column;
    justify-content: stretch;         
}

#forward-top{
    height:40%;
}

#forward-middle{
    padding:0px 10px 0px 10px;
    height:20%;
    min-height:50px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center; 
} 

#forward-button{
    margin:0px auto 0px 0px;
    padding:5px 5px 5px 5px;
    width: 50px;
    height: 50px;
    background-color: rgb(0, 0, 0);
    clip-path: polygon(0% 60%, 0% 10%, 30% 35%);
}


#forward-bottom{
    height:40%; 
}


#info-button{
    margin:0px;
    padding:0px;

    width:300px;
    height:300px;

    display: flex;
    justify-content: center;
    align-items: center;

    border:0px black solid;
    background-color: rgb(66, 116, 103);
    border-radius: 50%;
    
    overflow:hidden;
    cursor: pointer;
    pointer-events: auto;

    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    vertical-align: middle;
    color:white;
}

#info-window{
    z-index: 30;
    width:100vw;
    height:100vh;
    top:0px;
    left:0px;
    position:fixed;
    display:none;
    background-color:rgba(255, 255, 255, 0.8);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#info-window-top{
    height:10%;
    width:40%;

    display: flex;
    flex-direction: column;
    justify-content:end;
    align-items: left;
    position:relative;
}

#info-close-button{
    margin:0px 0px 0px 0px;
    padding:5px;

    position:absolute;
    left:0px;
    bottom:5px;

    border: 2px black solid;

    width:50px;
    height:45px;
    text-align: center;
    font-size: 1rem;
    font-family: 'Noto Sans', sans-serif;
    background-color:white;
    cursor: pointer;

}

#info-window-middle{
    width:40%;
    padding: 40px;
    overflow:scroll;
    background-color: white;
    border:3px black solid;
    font-size: 1rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    -ms-overflow-style: none;
    scrollbar-width: none;    
}

#info-window-middle::-webkit-scrollbar{
    display: none;
}

#info-window-middle div{
    margin:15px 0px 15px 0px;
    }

#info-window-middle div div{
    text-indent: 2em;
    margin:10px;
    }
    
#space{
    height:10px;
}

#mini-arrows-frame{
    display:none;
}




@media screen and (max-width: 950px) {

    #title{
        text-align: center;
        margin:10px auto 30px auto;
        font-size: 1.2rem;
    }
    
    #title2{
        text-align: center;
        margin:10px auto 35px auto;
        font-size: 1rem;
    }

    #title-header{
        font-size: 0.8rem;
    }


    #frame{
        width:90%;
        margin:10px auto 10px auto;
        display:grid;
        grid-template-columns: 180px;
        grid-template-rows: repeat(auto-fill,180px);
        gap:20px 20px;
        justify-content: space-evenly;
        grid-auto-flow: row;
    }
    

    div[id^="photo"]{
        margin:0px;
        padding:0px;
        width:180px;
        height:180px;
        border:0px rgb(119, 7, 22) solid;
        border-radius: 0px;
        overflow:hidden;
        cursor: pointer;
    }
    
    div[id^="photo"] > img{
        width:182px;
        height:182px;
        object-fit: cover;
    }

    #info-button{
        margin:0px;
        padding:0px;
    
        width:180px;
        height:180px;
    
        display: flex;
        justify-content: center;
        align-items: center;
    
        border:0px black solid;
        background-color: rgb(66, 116, 103);
        border-radius: 50%;
        
        overflow:hidden;
        cursor: pointer;
        pointer-events: auto;
    
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1rem;
        vertical-align: middle;
        color:white;
    }
    
    
    #pop-window{
        z-index: 20;
        width:100%;
        height:100%;
        top:0px;
        left:0px;
        position:fixed;
        display:none;
        background-color:rgba(105, 104, 104, 0.9);
    }

    #pw-frame{
        width:100%;
        height:100%;
        margin:0px auto 0px auto;
        display: flex;
        flex-direction: row;
        background-color:transparent;
        justify-content: center; 
    }

        
    #back-button-frame{
        width:10%;
        /* min-width:30px; */
        height:100%;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: stretch;  
    }
    
    #back-top{
        height:47.5%;
    }
    
    #back-middle{
        padding:0px 10px 0px 10px;
        /* width:100%; */
        height:5%;
        min-height:50px;
        cursor: pointer;
    }
    
    #back-button{
        padding:0px 0px 0px 0px;
        width: 50px;
        height: 50px;
        background-color: white;
        clip-path: polygon(60% 75%, 60% 25%, 30% 50%);
    }
    
    #back-bottom{
        height:47.5%; 
    }

    #pw-photo-frame{
        width:80%;
        height:100%;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: stretch;    
    }
    
    #pw-photo-frame-top{
        height:5%;
        flex-grow: 1;
        flex-shrink: 1;
        display:flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    
    #pw-photo-frame-top2{
        min-height: 30px;
    }
    
    #fullscreen-button-box{
        display:none;
    }

    #close-and-fullscreen-buttons-frame{
        justify-content: start;
    }

    #pw-photo-frame-middle{
        width:100%;
        height:90%;
        padding:0px;
        flex-grow:1;
        flex-shrink:1;
        aspect-ratio: 297/210;
    }
    
    #pw-photo-frame-bottom{
        height:5%;
        flex-grow: 1;  
        flex-shrink: 1;      
    }
    
    #close-button{
        border:0px white solid;
        margin:0px 0px 0px 0px;
        padding:0px;
        position: relative;
        top:25px;
        left:-60px;
        width:40px;
        height:40px;
        text-align: center;
        font-size: 1rem;
        font-family: 'Noto Sans', sans-serif;
        background-color:white;
        cursor: pointer;
    }

    .square_btn {
        margin:5px 5px 5px 5px;
        display: block;
        position: relative;
        width: 30px;
        height: 30px;
        border: 0px solid #333; 
        background:transparent; 
      }
    
    
    #forward-button-frame{
        width:10%;
        /* min-width:30px; */
        height:100%;
        background-color:transparent;
        display: flex;
        flex-direction: column;
        justify-content: stretch;         
    }
    
    #forward-top{
        height:47.5%;
    }
    
    #forward-middle{
        padding:0px 10px 0px 10px;
        /* width:100%; */
        height:5%;
        min-height:50px;
        cursor: pointer;
    }
    
    #forward-button{
        padding:0px 0px 0px 0px;
        width: 50px;
        height: 50px;
        background-color: white;
        clip-path: polygon(25% 75%, 25% 25%, 55% 50%);
    }
    
    
    #forward-bottom{
        height:47.5%; 
    }
    
    #pw-photo{
        border:0px black solid;
        margin:0px auto 0px auto;
        width:100%;
        height:100%;
        object-fit: contain;
        background-color:transparent;
    }

    #info-window{
        z-index: 30;
        width:100vw;
        height:100vh;
        top:0px;
        left:0px;
        position:fixed;
        overflow:auto;
        display:none;
        background-color:rgba(255, 255, 255, 0.8);
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    #info-window-top{
        height:5%;
        width:40%;
    
        display: flex;
        flex-direction: column;
        justify-content:end;
        align-items: left;
    
        position:relative;
    }
    
    #info-close-button{
        margin:0px 0px 0px 0px;
        padding:0px;
    
        position:fixed;
        left:15px;
        top:15px;
    
        border: 2px black solid;
    
        width:45px;
        height:45px;
        text-align: center;
        font-size: 0.6rem;
        font-family: 'Noto Sans', sans-serif;
        background-color:white;
        cursor: pointer;
    
    }
    
    #info-window-middle{
        padding:3%;
        width:75%;
        overflow:scroll;
        padding: 10px;
        background-color: white;
        border:2px black solid;
        border-radius: 0px;
        font-size: 0.8rem;
        
    }
    
    #info-window-bottom{
        height:5%;
    }
    

} 


@media screen and (max-width: 500px) {


    #pw-photo-frame{
        width:80%;
        height:100%;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;    
    }

    #pw-photo-frame-top{
        /* height:10%; */
        flex-grow: 1;
        flex-shrink: 1;
        display:flex;
        flex-direction: column;
        justify-content: start;
    }
    
    #pw-photo-frame-top2{
        min-height: 15px;
    }
    
    #pw-photo-frame-middle{
        width:100%;
        height:30%;
        padding:0px;
        flex-grow:1;
        flex-shrink:1;
        aspect-ratio: 297/210;
    }
    
    #pw-photo-frame-bottom{
        flex-grow: 1;  
        flex-shrink: 1;      
    }

    #back-button-frame{
        width:40%;
        display: none;
    }

    #forward-button-frame{
        width:40%;
        display: none;
    }


    #mini-arrows-frame{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #mini-back-button{
        margin:0px auto 0px 0px;
        padding:0px 0px 0px 0px;
        width: 50px;
        height: 50px;
        background-color: white;
        clip-path: polygon(60% 75%, 60% 25%, 30% 50%);
    }

    #mini-forward-button{
        margin:0px 0px 0px auto;
        padding:0px 0px 0px 0px;
        width: 50px;
        height: 50px;
        background-color: white;
        clip-path: polygon(25% 75%, 25% 25%, 55% 50%);
    }

    #mini-back-button-frame{
        width:40%;
    }

    #mini-forward-button-frame{
        width:40%;
    }


    #pw-photo-frame{
        width:100%;
    }

    #info-window-top{
        height:80px;
    }

    #info-window-middle{
        width:85%;       
    }

    #info-close-button{
        left:10px;
        top:10px;
    }

    #close-button{
        margin:5px 0px 0px 0px;
        left:5px;
    }


}