@charset "utf-8";
/* CSS Document */

/*-------------
menu.htmlの設定
-------------*/
#menu .top_img {
    position: relative;
    background-image: url(../images/menu-top.jpg);
    background-position: center;
    background-size: cover;
    width: 100dvw;
    height: 300px;
    margin-bottom: 150px;
    & h1 {
        font-size: 4.8rem;
        color: #fff;
        -webkit-text-stroke: 1px #888;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
} /* .hero_img */

#menu .grid {
    display: grid;
    grid-template-columns: 330px 330px 330px;
    place-content: center;
    gap: 10px;
    & figure {
        position: relative;
        & h2 {
            position: absolute;
            top: 37%;
            left: 50%;
            color: #fff;
            font-size: 4.8rem;
            font-weight: 700;
            transform: translate(-50%, 0) rotate(90deg);
        }
        .zoom {
            transition: all .5s;
        }
        .zoom:hover {
            filter: brightness(50%);
            transform: scale(1.05, 1.05) !important;
            & figcaption {
                opacity: 1;
            }
        }
        & figcaption {
            opacity: 0;
            white-space: nowrap;
            font-size: 1.6rem;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    } /* figure */
    .menu-list {
        width: 330px;
        height: 330px;
        background-color: #000;
        color: #fff;
        text-align: left;
        padding-left: 1rem;
        & h3 {
            font-size: 2.4rem;
            margin-bottom: 20px;
        }
        & ul {
            list-style-type: disc;
            padding-left: 2rem;
            & li {
                margin-bottom: 10px;
            }
        } /* ul */
    } /* .menu-list */
    .item {
        cursor: pointer;
        transition: all 1s;
    }
    .item:hover {
        & figcaption {
            opacity: 1;
        }
    }
} /* #menu .wrap */

/* popover の設定 */
#menu1 {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
}
.inner {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 0;
    background: #fcfcfc;
    text-align: left;
    & img {
        width: 100%;
        height: auto;
        margin: auto;
    }
    .m_discription {
        & h3 {
            font-size: 2.4rem;
            margin-bottom: 30px;
            position: relative;
        }
        & h3::after {
            content: "";
            width: 100%;
            height: 5px;
            position: absolute;
            top: 45px;
            left: 0;
            border-bottom: 1px dashed #000;
        }
        & p:nth-of-type(1) {
            font-weight: 700;
            padding-bottom: 1rem;
        }
    }
}

/*------------------
スマートフォンの設定//
------------------*/
@media(max-width:1356px) {
    #menu .wrap {
        grid-template-columns: 330px 330px;
    } /* #menu .wrap */
}

@media(max-width:1020px) {
    #menu .wrap {
        grid-template-columns: 330px;
    } /* #menu .wrap */
}

@media(max-width:768px) {
    #menu .top_img {
        position: relative;
        background-image: url(../images/menu-top.jpg);
        background-position: center;
        background-size: cover;
        width: 100dvw;
        height: 300px;
        margin-bottom: 150px;
        & h1 {
            font-size: 4.8rem;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    } /* .hero_img */
}

/*------------------
アニメーションの設定//
------------------*/
/* 下方向に回転して出現 */
.flip_down {
    opacity: 0;
}

.flip_down.on {
    animation: flipDown 1s ease forwards;
}

@keyframes flipDown {
    from {
        transform: perspective(2500px) rotateX(100deg);
        opacity: 0;
    }

    to {
        transform: perspective(2500px) rotateX(0);
        opacity: 1;
    }
}

.delay01 {
    animation-delay: 0.3S !important;
}

.delay02 {
    animation-delay: 0.2S !important;
}

.delay03 {
    animation-delay: 0.5S !important;
}

/*----- menu.htmlの設定 ここまで -----*/