:root{
    --orange: var(--wp--preset--color--vk-color-primary-vivid);
    --olive: var(--wp--preset--color--vk-color-custom-1);
    --teal: var(--wp--preset--color--vk-color-custom-2);
    --gold: var(--wp--preset--color--vk-color-custom-3);
    --red: var(--wp--preset--color--vk-color-custom-4);
    --ivory: #f6f4f2;
    --gray: #656565;
    --logo_gray: var(--wp--preset--color--vk-color-custom-5);
    --awesome: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Free"));
    --no_image_src: url("/wp-content/themes/omoikanau/imgs/common/no_image.webp");
    --site_header_height: 100px;
    --wpadminbar_height: 0;
}
@media screen and (max-width: 1200px) {
    :root{
        --site_header_height: 7dvw;
    }
}
@media(max-width: 767px){
    :root{
        --site_header_height: 12dvw;
    }
}
html, body {
    /* hidden はスクロールコンテナ化してしまうが、clip はコンテナ化しない */
    overflow-x: clip !important;
}
.container{
    container-name: container;
    container-type: inline-size;
}
.site-header{
    box-shadow: none !important;
    height: var(--site_header_height);
    & p{
        margin-top: 0;
        margin-bottom: 0;
    }
}
.site-header-container{
    max-width: none !important;
    padding-right: var(--site_header_height)!important;
}
@media (max-width: 991.98px){
    .site-header-container{
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 8dvw;
        padding-right: calc(var(--site_header_height) * 1.42) !important;
    }
}
.vk-mobile-nav-menu-btn{
    display: block !important;
    width: var(--site_header_height) !important;
    height: var(--site_header_height) !important;
    right: 0 !important;
    border: none !important;
    top: var(--wpadminbar_height) !important;
    background: url("../../imgs/common/navbutton.svg?v2") center/100% 100% no-repeat !important;
    &.menu-open{
        background-image: url("../../imgs/common/navbutton-close.svg") !important;
        background-size: 50% !important;
        border: none !important;
    }
}
@media (max-width: 991.98px){
    .vk-mobile-nav-menu-btn{
        width: calc(var(--site_header_height) * 1.42) !important;
        background-color: #fff;
        background-position: right center !important;
        background-size: 100% 100% !important;
        &.menu-open{
            background-position: center center !important;
        }
    }
}
.site-header-logo{
    padding-left: 40px !important;
    width: auto !important;
    margin-right: auto !important;
    & img{
        width: 292px;
    }
}
@media (max-width: 991.98px){
    .site-header-logo {
        text-align: left !important;
        padding-left: 0 !important;
        & img {
            /*width: 40.8dvw !important;*/
            margin-left: 0 !important;
            max-height: var(--site_header_height) * .8 !important;
            max-width: inherit !important;
        }
    }
}
@media(max-width: 767px){
    .site-header-logo{
        & img{
            max-width: 40dvw !important;
        }
    }
}
#menu-header_buttons{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    height: var(--site_header_height);
    & li{
        margin: 0;
        font-size: calc(var(--site_header_height) * .14);
        width: calc(var(--site_header_height) * 1.2);
        @media(max-width: 767px){
            font-size: 1.04dvw;
        }
    }
    & a{
        display: grid;
        gap: .5em;
        grid-template-rows: repeat(2, 1fr);
        text-decoration: none;
        height: 100%;
        color: #fff;
        letter-spacing: .1em;
        line-height: 1.2;
        /*
        padding: 1em .5em;
        */
        text-align: center;
        &:before{
            content: "";
            display: flex;
            align-self: flex-end;
            height: 1.9em;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    }
    & span{
        align-self: flex-start;
        display: grid;
        place-items: center;
        white-space: nowrap;
        min-height: 2.4em;
        @media(max-width: 767px){
            align-self: center;
        }
    }
    & .event{
        & a{
            background: var(--orange);
            &:before{
                background-image: url("../../imgs/common/icon_sale.svg");
            }
        }
    }
    & .reserve{
        & a{
            background: var(--teal);
            &:before{
                background-image: url("../../imgs/common/icon_calendar.svg");
            }
        }
    }
    & .consul{
        & a{
            background: var(--gold);
            &:before{
                background-image: url("../../imgs/common/icon_talk.svg");
            }
        }
    }
    & .line{
        & a{
            background: var(--olive);
            &:before{
                background-image: url("../../imgs/common/icon_line.svg");
            }
        }
    }
}
@media (max-width: 991.98px) {
    #menu-header_buttons{
        display: flex;
        justify-content: flex-end;
        background: #fff;
        & img{
            width: var(--site_header_height);
        }
        & li{
            font-size: 2.6dvw;
            width: 29.33dvw;
        }
        & li:not(.event){
            display: none;
        }
        & a{
            grid-template-columns: 2em 1fr;
            grid-template-rows: auto;
            gap: .2em;
            width: auto;
            padding: 0 1em;
            align-items: center;
            justify-content: center;
            border-radius: 0 0 1em 1em;
            &:before{
                height: 100%;
            }
        }
    }
    .site-header{
        top: 0;
    }
}
.site-header-tel{
    width: 228px;
    height: var(--site_header_height);
    display: grid;
    align-content: center;
    margin-right: 26px;
    margin-left: 26px;
    & img{
        display: block;
        width: 100%;
    }
}
@media (max-width: 991.98px){
    .site-header-tel{
        display: none;
    }
}

.page-header{
    background: #fff9e7 url("../../imgs/common/pageheader_image.webp?v3") center/auto 7rem repeat-x;
    min-height: 10rem;
    @media(max-width: 767px){
        background-image: url("../../imgs/common/pageheader_image.webp"), url("../../imgs/common/pageheader_image.webp");
        background-repeat: repeat-x,repeat-x;
        background-size: 120dvw,120dvw;
        background-position: top left,bottom right;
    }
}
.page-header-title{
    -webkit-text-stroke: 10px #fff;
    paint-order: stroke;
}