@charset "utf-8";
html{
    scroll-behavior: smooth;
}
@media only screen and (max-width: 576px) {
    html{
        scroll-padding-top: 67px;
    }
}
div#breadcrumb_container {
    border-bottom: none;
}
main#stripeBg{
    background: #FAF7F0;
}
li{
    list-style:none;
}
a:hover{
    text-decoration: none;
}
h1,h2,a,div{
    font-family: "Noto Sans JP", sans-serif;
}
.sp{
    display: none;
}
#menu{
    background-color: #FAF7F0;
    .title{
        text-align: center;
        margin-bottom: 30px;
        h1{
            margin-top: 0;
            color: #232323;
            font-size: 2.2em;
            letter-spacing: 3px;
            text-indent: 3px;
        }
        h1::after{
            content: '';
            border-bottom: 2px solid #E60012;
            display: block;
            width: 95px;
            margin: 2px auto;
        }
    }
    .grid{
        display: grid;
        grid-template-columns	:45px 2fr;
        grid-template-rows	:100px;
        align-items: center;
        gap: 15px;
    }

    #special_menu{
        text-align: center;
        padding-bottom: 60px;
        /* max-width: 960px; */
        margin: auto;
        overflow: hidden;

        h2{
            font-size: 28px;
            text-align: center;
            letter-spacing: 5px;
            padding-left: 5px;
            color: #E60012;
            font-weight: 600;
            margin: 20px auto 10px;
            width: fit-content;
        }
        h2::before,h2::after{
            position: relative;
            content: "";
            display: block;
            width: 16px;
            height: 17px;
            background: url("../img/kira.svg") no-repeat ;

        }
        h2::before{
            left: -23px;
            top: 20px;
        }
        h2::after{
            left: 101%;
            top: -20px;
        }
        /* .bx-viewport{
            height: 555px !important;
        } */
        .wrap{
            max-width: 960px;
            margin: auto;

        }
        .bxslider img{
            margin: auto;
            border-radius: 15px 15px 0 0;
            object-fit: cover;
            width: 100%;
        }
        .special_menu_title{
            text-align: center;
            background: #ffffff;
            max-width: 816px;
            margin: auto;
            padding: 15px 0;
            border-radius: 0 0 15px 15px;
            box-shadow: 2px 2px 6px rgb(100 100 100 / 20%);
        }
        .special_menu_title span{
            font-size: 18px;
            font-weight: 600;
            color: #232323;
        }
        .bx-wrapper .bx-pager.bx-default-pager a {
            background: #D9D9D9;
            text-indent: -9999px;
            display: block;
            width: 13px;
            height: 13px;
            margin: 0 5px;
            outline: 0;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 9px;
        }
        .bx-wrapper .bx-pager.bx-default-pager a.active {
            background: #E60012;
        }
        .bx-controls-direction a {
            /* border-radius: 50%; */
            text-indent: -100%;
            overflow: hidden;
        }
        .bx-pager{
            bottom: -20px;
        }
        .bx-wrapper .bx-controls-direction a {
            position: absolute;
            top: 50%;
            /* margin-top: -16px; */
            outline: 0;
            width: 22px;
            height: 43px;
            text-indent: -9999px;
            z-index: 9999;
            background-color: #a7a7a700;
        }
        .bx-wrapper .bx-controls-direction a.bx-prev{
            left: 20px;
        }

        .bx-wrapper .bx-controls-direction a.bx-next{
            right: 20px;
        }
        a.bx-prev {
            background: url("../img/prev.png") no-repeat ;
        }
        a.bx-next {
            background: url("../img/next.png") no-repeat ;
        }
        .special_menu_title{
            text-align: center;
        }
        .bxslider li {
            display: none; /*読み込み時は非表示*/
            width: 960px;
        }
        .bx-viewport .bxslider li {
            display: block !important; /*JSが読み込まれたら表示*/
        }
        .bx-viewport{
            height: 570px !important;
            overflow: visible !important;
        }
        .menu_name h3{
            font-size: 17px;
            margin: 0;
            padding: 0;
            line-height: inherit;
        }
        
        .special_menu{
            /* max-width: 960px; */
            margin: 0 20px;
            display: block;
            height: auto;
            box-shadow: 2px 2px 4px rgb(100 100 100 / 20%);
            border-radius: 15px;
            color: #000000;
            cursor: pointer;
        }
        .menu_card_text {
            padding: 10px;
            background-color: #ffffff;
            border-radius: 0 0 10px 10px;
        }
    }
    .tab{
        padding: 1% 0;
        margin: auto;
        max-width: 960px;
        /* border-top: 1px solid #A0A0A0; */
        .flex{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(147px, 1fr));
            grid-gap: 16px;
        }
        a{
            min-width: 152px;
            padding: 5px 0 8px;
            color: #e40012;
            font-weight: bold;
            border-radius: 10px;
            border: 1px solid #ffffff;
            display: flex;
            flex-flow: column;
            align-items: center;
            background-color: #ffffff;
            box-shadow: 2px 2px 2px rgb(100 100 100 / 20%);
        }
        a:hover,a:focus{
            background-color: #E60012;
            border: 1px solid #E60012;
            /* box-shadow: 2px 2px 4px rgb(80 60 60 / 20%); */
            color: #ffffff;
            .tab_arrow::before, .tab_arrow::after{
               background-color: #ffffff; 
            }
        }
        a:last-child{
            width: 208px;
        }
        .tab_arrow {
        position: relative;
        display: inline-block;
        width: 13.3px;
        height: 5.7px;
        margin-top: 5px;
        }

        .tab_arrow::before,
        .tab_arrow::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: calc(50% - 1px);
        width: 2px;
        height: 10px;
        border-radius: 9999px;
        background-color: #e40012;
        transform-origin: 50% calc(100% - 1px);
        }

        .tab_arrow::before {
        transform: rotate(45deg);
        }

        .tab_arrow::after {
        transform: rotate(-45deg);
        }

    }
    #recommend_dinner_menu,#recommend_lunch_menu{
        display: none;
    }
    .menu_section{
        /* padding-bottom: 7%; */
        max-width: 960px;
        margin: auto;
        border-top: 1px solid #4E4E4E8c;
        padding-top: 3%;

        h2{
            color: #232323;
            margin-top: 3px;
            margin-bottom: 0;
            font-size: 28px;
        }
        .flex{
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }
        .copy_text{
            color: #4E4E4E;
            font-weight: 600;
            letter-spacing: 3px;
            text-indent: 3px;
        }
        .more_btn a{
            font-size: 18px;
            color: #4E4E4E;
            font-weight: 600;
            padding-right: 10px;
        }
        .more_arrow {
            position: relative;
            display: inline-block;
            padding-left: 10px;
            vertical-align: top;
        }

        .more_arrow::before
        {
            content: '';
            width: 10px;
            height: 10px;
            border-top: solid 2px #4E4E4E;
            border-right: solid 2px #4E4E4E;
            position: absolute;
            left: 10px;
            top: 6px;
        }

        .more_arrow::before {
        transform: rotate(45deg);
        }

        .more_btn img{
            width: 12px;
            margin-left: 10px;
        }
        .more_btn a:hover{
            color: #E60012;
            .more_arrow::before{
                border-top: solid 2px #E60012;
                border-right: solid 2px #E60012;
            }
        }
        .bxslider li {
            display: none; /*読み込み時は非表示*/
        }
        .bx-viewport .bxslider li {
            display: block !important; /*JSが読み込まれたら表示*/
        }
        .bx-viewport{
            height: 355px !important;
        }
        .bx-controls-direction a{
            width: 61px;
            height: 55px;
            top: 37%;
        }
        
        .bx-wrapper .bx-controls-direction a.bx-prev{
            left: -35px;
        }

        .bx-wrapper .bx-controls-direction a.bx-next{
            right: -44px;
        }

        a.bx-prev {
            display: block;
            background: url("/menu/img/prev.svg") no-repeat ;
        }
        a.bx-next {
            display: block;
            background: url("/menu/img/next.svg") no-repeat ;
        }

        li{
            width: 253px !important;
            margin-right: 10px !important;
        }
        .menu_card{
            max-width: 251px;
            display: block;
            /* height: auto; */
            min-height: 292px;
            background-color: #ffffff;
            box-shadow: 2px 2px 4px rgb(100 100 100 / 20%);
            border-radius: 10px;
            color: #000000;
            /* cursor: pointer; */
            transition:box-shadow 0.3s, transform 0.3s;
        }
        /* .menu_card:hover{
            box-shadow:2px 2px 15px rgb(100 100 100 / 20%);
            transform:translate(0, 2px);
        } */
        .classic::before,.popular::before,.recommend::before,.sjk_classic::before,.sjk_popular::before,.sjk_recommend::before{
            content: "";
            position: absolute;
            background-size: contain;
            width: 63px;
            height: 62px;
            display: block;
            left: 3px;
            top: 3px;        
        }
        .classic::before{
            background: url("/menu/img/classic.svg") no-repeat ;
        }
        .popular::before{
            background: url("/menu/img/popular.svg") no-repeat ;
        }
        .recommend::before{
            background: url("/menu/img/recommend_.svg") no-repeat ;
        }
        .sjk_classic::before{
            background: url("/menu/img/sjk_classic.svg") no-repeat ;
        }
        .sjk_popular::before{
            background: url("/menu/img/sjk_popular.svg") no-repeat ;
        }
        .sjk_recommend::before{
            background: url("/menu/img/sjk_recommend.svg") no-repeat ;
        }

        .menu_card_img img{
            border-radius: 10px 10px 0 0;
            object-fit: cover;
        }
        .menu_card_text{
            padding: 15px;
            background-color: #ffffff;
            border-radius: 0 0 10px 10px;
        }
        .menu_name{
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
        }

    }
    #bn{
        max-width: 960px;
        margin: auto;
        border-top: 1px solid #4E4E4E8c;
        padding: 4% 0;
        div{
            text-align: center;
        }
        div:last-child{
            margin-top: 15%;
        }
        img{
            border-radius: 10px;
            width: 80%;
            box-shadow: 4px 4px 4px rgb(100 100 100 / 20%);
            transition:box-shadow 0.3s, transform 0.3s;
        }
        img:hover{
            box-shadow:2px 2px 15px rgb(100 100 100 / 20%);
            transform:translate(0, 2px);
        }

    }
    @media only screen and (max-width: 1536px) {


    }
    @media only screen and (max-width: 1069px) {
        .tab,#special_menu{
            padding-left: 15px;
            padding-right: 15px;
        }
        .menu_section{
            padding: 0 15px;
            .bx-wrapper .bx-controls-direction a.bx-prev{
            left: 7px;
            }
           .bx-wrapper .bx-controls-direction a.bx-next{
            right: 0;
           }
        }

     }

    @media only screen and (max-width: 898px) {
        html{
            scroll-padding-top: 67px;
        }
        .flex::-webkit-scrollbar{
            background: #00000000;
            border-radius: 10px;
            height: 10px;
        }
        .flex::-webkit-scrollbar-thumb{
            background-color: #e6001376;
            border-radius: 10px;
        }
        .tab .flex{
            display: flex;
            justify-content: space-around;
            grid-gap:0;
        }
        .tab a{
            min-width: 150px;
            height: 46px;
            font-size: 15px;
            padding-top: 5px;
            margin-right: 10px;  
        }
        .tab a:last-child{
            min-width: 208px;
        }
        .tab .tab_arrow{
            margin-top: 0;
        }
        .tab .tab_arrow::after,.tab .tab_arrow::before{
            bottom: -4px;
            width: 2px;
            height: 8px;
        }
        .tab .flex{
            overflow-x: scroll;
            padding-bottom: 10px;
        }
        /* .tab .flex::-webkit-scrollbar{
            display: none;
        } */


    }
    @media only screen and (max-width: 576px) {
        .pc{
            display: none;
        }
        .sp{
            display: block;
        }
        .title{
            margin-bottom: 20px;
        }
        .title h1{
            font-size: 20px;
            margin-top: 0;
        }
        .title h1::after{
            width: 70px;
            margin-top: 3px;
        }
        .tab{
            padding-left: 0;
            padding-bottom: 0;
            padding-right: 0;
        }
        .tab .flex{
            overflow-x: scroll;
            -ms-overflow-style: none;
            justify-content: space-between;
        }
        .tab .flex::-webkit-scrollbar{
            display: none;
        }
        .tab a{
            min-width: 100px;
            font-size: 14px;
            margin-right: 4px;
            margin-left: 4px;
        }
        #special_menu{
            padding:10px 15px 35px;
            h2{
                font-size: 22px;
                margin-top: 0;
                margin-bottom: 0;
            }
            .bxslider img{
                max-width: 100%;
                padding: 0 5px;
            }
            .bx-wrapper .bx-pager.bx-default-pager a{
                width: 10px;
                height: 10px;
            }
            .special_menu{
                /* max-width: 350px; */
                margin: 0 auto;
                position: relative;
                box-shadow: inherit;
            }
            .special_menu::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 5px;
                bottom: 0;
                box-shadow: 2px 2px 4px rgb(100 100 100 / 20%);
                border-radius: 15px;
                z-index: -1;
            }
            .special_menu_title{
                padding: 10px 0;
            }
            .special_menu_title span{
                font-size: 15px;
            }
            .bx-viewport{
                height: 230px !important;
            }
            .menu_card_text{
                padding: 4px;
                margin: 0 5px;
            }
            .bx-pager{
                bottom: -17px;
            }
            .menu_name h3{
                font-size: 14px;
                font-weight: 500;
            }
        }
        #recommend_dinner_menu,#recommend_lunch_menu{
            padding-bottom: 30px;
        }
        #sjk_menu{
        .bx-viewport{
            height: 258px !important;
        }
        }

        .menu_section{
           padding-left: 15px;
           padding-right: 0;
           h2{
            font-size: 19px;
            margin-top: 0;
           }
            .grid{
                grid-template-columns	:30px 2fr;
                grid-template-rows	:90px;
                gap: 10px;
            }
            li{
                width: 165px !important;
            }

           .copy_text{
            font-size: 12px;
            letter-spacing: 0;
           }
           
           .bx-viewport{
            height: 245px !important;
           }
           .menu_card{
            max-width: 165px;
            min-height: 225px;
            .classic::before,.popular::before,.recommend::before,.sjk_classic::before,.sjk_popular::before,.sjk_recommend::before{
                width: 57px;
                height: 56px;
                background-size: contain;
                left: 0;
                top: 0;
            }
            .menu_card_img img{
                height: 130px;
            }
            .menu_card_text{
                padding: 6px 12px 12px;
            }
            .menu_name{
                font-size: 13px;
                margin-bottom: 5px;
            }
            .menu_ex{
                font-size: 11px;
                line-height: 16px;
            }
           }

           .more_btn.sp{
            text-align: end;
            margin-bottom: 30px;
           }
           .more_btn.sp a{
            font-size: 15px;
            padding-right: 25px;
            /* vertical-align: baseline; */
           }
           .more_btn.sp a img{
            width: 8px;
            margin-right: 15px;
            margin-left: 6px;
            vertical-align: baseline;
           }
        }
        #bn{
            padding-top: 50px;
            padding-bottom: 0;
            .app_order_bn{
                width: 90%;
            }
            .app_bn{
                margin-top: 30px;
                width: 100%;
            }
            .app_bn_sp{
                width: 100%;
                border-radius: 0;
            }
        }
    }
    @media only screen and (max-width: 431px) {
        #special_menu .bx-pager{
            bottom: -36px;
        }
    }
    @media only screen and (max-width: 391px) {
        #special_menu .bx-pager{
            bottom: -25px;
        }
    }

}