@charset "UTF-8";

/*///////////////////// font-face 読み込み例 ///////////////////////////*/

@font-face {
    font-family: "Noto Serif JP", serif;
    src: url(/fonts/NotoSerifJP-ExtraLight.ttf);
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP", serif;
    src: url(/fonts/NotoSerifJP-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP", serif;
    src: url(/fonts/NotoSerifJP-Medium.ttf);
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP", serif;
    src: url(/fonts/NotoSerifJP-SemiBold.ttf);
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP", serif;
    src: url(/fonts/NotoSerifJP-Bold.ttf);
    font-weight: 700;
    font-display: swap;
}
/*///////////////////// font-face 読み込み例 ///////////////////////////*/

.l-header * {
    font-family: "Noto Serif JP", serif;
    color: #FFFFFF;
}

.l-header {
    width: 100%;
    height: 100px;
    background: #1A1819;
    z-index: 9;
    position: relative;
    top: 0;
}
    .header__inner {
        width: 100%;
        background: #1A1819;
        margin: auto;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
    }
        .header__left {
            display: flex;
            gap: 25px;
            align-items: center;
        }
        .header__right {
            display: block;
            padding-right: 23px;
        }
            .header__logo {
                width: 100px;
                height: 100px;
            }
            .header__logo a:hover {
                opacity: 1;
            }
                .header__logo  img {
                    max-width: 100%;
                    max-height: 100%;
                    object-fit: cover;
                }
            .header__sns-list {
                display: flex;
                align-items: center;
                gap: 0;
            }
                .header__sns-link--instagram {
                    width: 30px;
                    height: 30px;
                }
                .header__sns-link--x {
                    width: 29px;
                    height: 30px;
                    margin-left: 25px;
                }
                .header__sns-link--tiktok {
                    width: 53px;
                    height: 31px;
                    margin-left: 19px;
                }
                    [class*="header__sns-link"] img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
            .header__right-top {
                display: flex;
                gap: 29px;
                width: fit-content;
                padding-top: 14px;
                margin-left: auto;
                margin-bottom: 6px;
            }
                .header__shop-infolist {
                    display: flex;
                    align-items: center;
                    gap: 14px;
                    padding-top: 6px;
                }
                    .header__shop-infoitem {
                        display: flex;
                        font-size: 14px;
                        font-weight: 400;
                    }
                        .header__shop-infoitem span {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: fit-content;
                            height: 23px;
                            padding: 0 5px;
                            margin-right: 5px;
                            background: #3C3A3B;
                        }
                .header__tel-num {
                    font-size: 26px;
                    font-weight: 600;
                    padding-left: 22px;
                    position: relative;
                }
                .header__tel-num::before {
                    content: "";
                    width: 17px;
                    height: 17px;
                    background: url(/images/top/tel_icn.png) no-repeat center / cover;
                    position: absolute;
                    top: 14px;
                    left: 0;
                }
                .header__nav-list {
                    display: flex;
                    gap: 20px;
                    width: fit-content;
                    margin: 0 0 0 auto;
                }
                .header__nav-item a {
                    font-size: 14px;
                    position: relative;
                    transition: .3s;
                }
                .header__nav-item a:hover {
                    opacity: 1;
                }
                .header__nav-item a::after{
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    content: '';
                    width: 0;
                    height: 1px;
                    background-color: #CFBC7C;
                    transition: .3s;
                }
                .header__nav-item a:hover::after{
                    width: 100%;
                }

.float__reservation-bt {
    width: 71px;
    height: 206px;
    position: fixed;
    top: 400px;
    right: 0;
    z-index: 4;
}
    .float__reservation-bt img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ui-overlay {
    z-index: 9;
}