@charset "UTF-8";

.wrapper{
    width: 95%;
    margin: 0 auto;
    h1{
        font-size: 2rem;
        text-align: center;
    }
    h2{
        text-align: center;
    }
    .menu-list{
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 1200px;
        margin-bottom: 80px;
        align-items: center;
        .menuphot{
            width: 40%;
            height: 100%;
            img{
                aspect-ratio: 4/5;
            }
        }
        .menu-box{
            width: 50%;
            h2{
                margin-top: 0;
            }
                table{
                    width: 100%;
                    table-layout: fixed;
                    th{
                        width: 80%;
                    }
                }
            
        }
    }
}

.drink{
    width: 95%;
    margin: 0 auto;
    max-width: 1200px;
    margin-bottom: 100px;
    h1{
        margin-bottom: 3rem;
    }
        .row{
            text-align: left;
            align-self: start;
            h3{
                font-size: 1.5rem;
                margin-top: 0;
            }
        }
        .wine{
            width: 100%;
            text-orientation: upright;
            .wine-table{
                width: 70%;
                margin: 0 auto 4rem auto;
                max-width: 900px;
                th{
                    text-align: center;
                    padding-bottom: 1rem;
                    img{
                        width: 70%;
                    }
                }
                td{
                    writing-mode: vertical-lr;
                    padding-bottom: 2rem;
                }
            }
            .text-start{
                text-align: start;
            }
            .text-end{
                text-align: end;
            }
        }
    .textwrapper{
        display: grid;
        margin-top: 50px;
        grid-template-rows: 40% 1fr;
        grid-template-columns: 33% 33% 33%;
        table{
            width: 90%;
            margin: 0 auto;
            th{
                font-weight: normal;
            }
        }
    }
}

@media(max-width:780px){
.wrapper{
    .menu-list{
        flex-direction: column;
        width: 100%;
        .menuphot{
            width: 100%;
            height: 100%;
            img{
                aspect-ratio: 3 / 2;
            }
        }
        .menu-box{
            width: 90%;
            h2{
                margin-top: 0;
            }
                table{
                    width: 100%;
                    table-layout: fixed;
                    th{
                        width: 80%;
                    }
                }
            
        }
    }
}
}


.drink{
    width: 95%;
    margin: 0 auto;
    max-width: 1200px;
    margin-bottom: 100px;
    h1{
        margin-bottom: 3rem;
    }
        .row{
            text-align: left;
            align-self: start;
            h3{
                font-size: 1.5rem;
                margin-top: 0;
                margin-bottom: -0.2rem;
            }
            td{
                text-align: end;
            }
        }
        .wine{
            width: 100%;
            text-orientation: upright;
            .wine-table{
                width: 95%;
                margin: 0 auto 4rem auto;
                max-width: 900px;
                th{
                    text-align: center;
                    padding-bottom: 1rem;
                    img{
                        width: 70%;
                    }
                }
                td{
                    writing-mode: vertical-lr;
                    padding-bottom: 2rem;
                }
            }
            .text-start{
                text-align: start;
            }
            .text-end{
                text-align: end;
            }
            #swiper8{
                height: auto;
                .swiper-wrapper{
                    .swiper-slide{
                        text-align: center;
                        height: 550px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;
                        img{
                            width: 100%;
                            height: 300px;
                            object-fit: contain;
                            padding-top: 2rem;
                        }
                    }
                    .swiper-slide-active img{
                        transform: scale(1.2);
                        transition-duration:0.3s;
                    }
                }
            }
        }
    #swiper9{
        height: auto;
        .swiper-wrapper{
            .swiper-slide{
                text-align: center;
                height: 550px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                img{
                    width: 100%;
                    height: 300px;
                    object-fit: contain;
                    padding-top: 2rem;
                }
            }
            .swiper-slide-active img{
                transform: scale(1.2);
                transition-duration:0.3s;
            }
        }
    }
}
@media(max-width:786px){
    .drink {
        .textwrapper{
            display: block;
        }
    }
}