@charset 'utf-8';

/* お料理・お飲み物 */
.food {
    display: flex;
    flex-direction: column;
    text-align: center;

    h1 {
        margin-bottom: 3%;
    }

    img {
        object-fit: cover;
        height: 85vh;
    }
}

.food-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: clamp(3.125rem, 2.5rem + 3.13vw, 5.625rem) auto;

    .food-items {
        flex-basis: 40%;

        img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }

        .food-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            h2 {
                font-size: clamp(1rem, 0.852rem + 0.73vw, 1.5rem);
                /* font-size: clamp(0.9rem, 0.722rem + 0.89vw, 1.5rem); */
                margin: 3% 0;
            }

            dl {
                display: grid;
                grid-template: repeat(2, 1fr)/auto 1fr;
                width: 100%;

                dt {
                    grid-column: 1;
                    grid-row: 1;
                }

                dt:nth-of-type(2) {
                    grid-row: 2;
                    margin-top: 3%;
                }

                dd {
                    justify-self: end;
                }

                :nth-of-type(2) {
                    grid-row: 2;
                    margin-top: 3%;
                }
            }
        }
    }

    .food-items:nth-of-type(3),
    .food-items:nth-of-type(4) {
        margin-top: 10%;
    }
}

@media screen and (max-width: 768px) {
    .food-container {
        flex-direction: column;
        flex-wrap: nowrap;
        margin: clamp(3.125rem, 2.5rem + 3.13vw, 5.625rem) 1rem;


        .food-items {
            margin-top: 20%;
        }

        .food-items:nth-of-type(3),
        .food-items:nth-of-type(4) {
            margin-top: 20%;
        }
    }
}

/* ********************** */
/* コース */
.course {
    display: flex;
    flex-direction: column;
    text-align: center;

    h1 {
        margin-bottom: 3%;
    }

    img {
        object-fit: cover;
        height: 85vh;
    }
}

.course-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: clamp(3.125rem, 2.5rem + 3.13vw, 5.625rem) auto;

    .course-items {
        flex-basis: 40%;

        img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }

        .course-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .headings {
                display: grid;
                grid-template: 1fr 1fr /auto auto;
                margin: 3% 0;
                width: 100%;
                place-items: center;

                h2 {
                    font-size: clamp(1rem, 0.852rem + 0.73vw, 1.5rem);
                }

                h2:nth-of-type(1) {
                    grid-column: 1/3;

                }

                h2:nth-of-type(2) {
                    grid-column: 1;
                    grid-row: 2;
                    justify-self: baseline;
                }

                h2:nth-of-type(3) {
                    grid-column: 2;
                    grid-row: 2;
                    justify-self: end;
                }
            }

            .coursemenu {
                display: flex;
                flex-direction: row;
                width: 100%;

                ul {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    flex-basis: 100%;
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .course-container {
        flex-direction: column;
        margin: clamp(3.125rem, 2.5rem + 3.13vw, 5.625rem) 1rem;

        .course-items .course-text .coursemenu {
            flex-direction: column;
        }

        .course-items:nth-of-type(2) {
            margin-top: 15%;
        }
    }
}

/* ********************** */