div{
    border:0px red solid;
}

span{
    display:inline-block;
}


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


#title{
    text-align: center;
    margin:10px auto 30px auto;
    font-family: 'Merriweather', serif;
    font-size: 1.8rem;
}

#main-footer{
    width:100%;
    height:50px;
}

#frame{
    border:0px green solid;
    width:90%;
    /* height:100%; */
    margin:50px auto 10px auto;
    display:grid;
    grid-template-columns: repeat(auto-fill,240px);
    grid-template-rows: repeat(auto-fill,160px);
    gap:5px 5px;
    justify-content:center;
    grid-auto-flow: row;
}

div[id^="box"]{
    margin:0px;
    padding:0px;
    width:240px;
    height:160px;
    border:0px rgb(119, 7, 22) solid;
    border-radius: 0px;
    overflow:hidden;
    cursor: pointer;
}

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

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

#pop-window{
    z-index: 20;
    width:100vw;
    height:100vh;
    top:0px;
    left:0px;
    position:fixed;
    display:none;
    /* display:flex; */
    flex-direction: row;
    justify-content: space-between;
    background-color:rgba(0, 0, 0, 0.9);
}

#pop-window-left{
    width:10%;
    height:100%;
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#back_arrow-box{
    color: white;
    width:100%;
    height:50px;
    padding:0px 30px 0px 10px;
    text-align:right;
}

.hover-pointer{
    cursor: pointer;
}

#back_arrow{
    height:50px;
    fill:white;
}


#pop-window-right{
    width:10%;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#pop-window-right-close-button-box{
    position:absolute;
    right:40px;
    top:5px;
    width:50px;
    height:60px;
    color: white;
    fill:white;
    cursor: pointer;
}

#pop-window-right-close-button{
    fill:none;
    stroke:white;
}

#forward_arrow-box{
    color: white;
    width:100%;
    height:50px;
    padding:0px 10px 0px 30px;
    text-align:left;
}

#forward_arrow{
    height:50px;
    fill:white;
}


#pop-window-center{
    width:80%;
    height:100%;
    pointer-events: none;
    user-select: none;
    display:flex;
    flex-direction: column;
    justify-content: center;
    position:relative;
}

#pop-window-center img{
    width:100%;
    height:100%;
    object-fit: contain;
    background-color:transparent; 
}

#mask{
    border:0px pink solid;   
    z-index: 40;    
    width:100%;
    display: none;
    text-align: center;
    position: absolute;
    top:50%;
    transform: translate(-0%, -50%);
    /* flex-direction: column;
    justify-content: center; */
}

#mask-text{
    /* border-radius: 50%; */
    border:0px blue solid;
    padding:5px;
    font-size: 1rem;
    text-align: center;
    color: white;
    animation: blinking 1s ease-in-out infinite alternate;
}

#loading_icon_svg{
    width:50px;
    height:50px;
    animation-name: rotation_a;
    animation-fill-mode:backwards;
    animation-delay: 0.5s;
    animation-duration: 3s;
    animation-iteration-count:infinite;
}

@keyframes rotation_a{
    0%{ transform:rotate(0);
        opacity:0;}

    50%{ opacity:1;}

    85%{ opacity:1;}

    100%{ opacity:0; transform:rotate(360deg); }
}

/* @keyframes fadein_a{
    0%{ opacity:0;}
    50%{ opacity:0;}
    100%{ opacity:1; }
} */

.loading_1{
    fill:white;
}

.loading_2{
    fill:white;
}

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


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


/* sidebar_stle.cssの属性に追加（svgタグが修正済のため） */
#close_button{
    fill:none;
    stroke:black;
}

.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);
}


/* スマートフォン*/

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

    #title{
        font-size: 1.2rem;
    } 

    #back_arrow-box{
        display:none;
    }

    
    #forward_arrow-box{
        display:none;
    }

    #pop-window-center{
        width:90%;
    }

    #pop-window-left{
        width:5%;
    }
    
    #pop-window-right{
        width:5%;
    }

    #pop-window-right-close-button-box{
        right:10px;
        width:40px;
        height:40px;
    }

} 

/* スマートフォン縦位置 追加*/
@media screen and (max-width: 500px) {

   

}