.gallery {
   display: flex;
   flex-direction: row;
   gap:1rem
}
.gallery-image {
    width: 80%; /* 例: 70%の幅に調整 */
    margin: 0;
    height:auto;
    max-height: 90vh;
    overflow: auto;
    position: relative;
    border: 3px solid green;
}
.gallery-image::after {
    display: block;
    content: '';
    width: calc(100% - 2rem);
    height: calc(100% - 2.5rem);
    z-index: 3;
    border: 3px solid var(--white);
    top: 1rem;
    left: 1rem;
    position: absolute;
}
.gallery-image img {
    
    object-fit: cover;
    width: 100%;
}
.gallery-thumbnails {
   display: grid;
   gap: 0;
   grid-template-columns: repeat(1, 100px);
   grid-template-rows: repeat(9, 30px);
   row-gap:1rem ;
   list-style: none;
   margin: 1rem ;
}
.gallery-thumbnails img{
   aspect-ratio:10/2;
   object-fit: cover;
   cursor: pointer;
}
.gallery-pictures {
    display: none; /* 画像を非表示にする */
}

@media(max-width: 700px){
.gallery{
    display: flex;
    flex-direction: column-reverse;
}
.gallery-image{
    width: 90vw;
    margin: 0;
}
.gallery-image img{
    height: 100vh;
}
.gallery-content{
    width: 100vw;
}
.gallery-thumbnails {
   gap: 7vw;
   grid-template-columns: repeat(1,100px);
}
.gallery-thumbnails img:hover {
   box-shadow: 0,0 1rem rgba(0,0,0,.4);
   transition: .4s;
}
}