/* Gallery */
.image-contents{
    padding:1px;
    height:200px;
}

.image {
    width: 100%;
    height:200px;
    object-fit: cover;
    padding:0;
}

.thumbnail-wrapper{
    display:flex;
    flex-direction: column;
}
.tab-wrapper{
    display:flex;
    flex-direction: row;
    margin-top:50px;
}

.group-wrapper{
    background-color: #990000;
    padding-top:12px;
    padding-bottom:12px;
    padding-left:0px;
    padding-right:0px;
}

.tab{
    background-color: #990000;
    padding-left:20px;
    padding-right:20px;
    padding-top:15px;
    padding-bottom:2px;
    color:azure;
    height:100%;
    border-radius:14px 14px 0 0;
    display:flex;
    align-items:center;
    font-size:1rem;

}

.tab2{
    display:none;
}



@media (max-width:576px){
    .image-contents,
    .image{
        height:75px;
    }

    .tab{
        font-size:0.8rem;
    }
}

/* Menu */

.menu-wrapper {
    background-color: rgb(253, 242, 212);
    border: solid 1px;

}

.menu-contents {
    width: 100%;
}

/* .menu-cell{
    border: solid 1px;
} */

/* 画像を強制的に同じサイズに固定 */
.carousel-inner img {
    width: 100%;
    /* 画像をカルーセルの幅に合わせる */
    height: 600px;
    /* 高さを400pxに固定 */
    object-fit: cover;
    /* 画像を枠に収めつつ、アスペクト比を維持 */
}

@media (max-width: 576px) {
    .carousel-item {
        object-fit: contain;
        object-position: top !important;
        height: 400px !important;
    }

    .img-thumbnail {
        width: 100%;
        height: 50px;
    }
}

.img-thumbnail {
    /* height: 300px; */
    object-fit: contain;
}

.img-carousel {
    object-fit: contain !important;
    object-position: top;
}

/* .img-carousel, .carousel-item {
    object-fit: contain !important;
    margin-top: 0;
    padding-top: 0;
    height: 650px!important;
} */

.gallery-title {
    background-color: rgb(253, 242, 212);
}


.img-thumbnail {
    border: 1px solid #ccc;
    /* ボーダーを薄く設定 */
    margin: 2px;
    /* 画像間に少しだけ隙間 */
}

.modal-body img {
    width: 100%;
    /* モーダル内で画像をいっぱいに表示 */
}

/* サムネイルのスタイル */
.img-thumbnail {
    border: 1px solid #ccc;
    /* 画像の周りに薄いボーダー */
    margin: 2px;
    /* 画像同士の間隔を少し取る */
}

/* 576px以下のスクリーンサイズに対応するメディアクエリ */
@media (max-width: 576px) {
    .img-thumbnail {
        width: 100%;
        /* 幅をデバイスのサイズに合わせて100%に */
        margin: 0;
        /* 余白を取り除く */
    }
}

/* モーダル画像のスタイル */
.modal-body img {
    width: 100%;
    /* モーダル内で画像をいっぱいに表示 */
}