@charset "UTF-8";

@media screen and (max-width: 700px){


.sp_none{ display: none; }
.pc_none{ display: block; }


.page{
    padding: 100px 0;
}
.title h2{
    font-size: 4rem;
}
.title p{
    font-size: 1.4rem;
    margin-bottom: 0;
}
.page .title{
    padding: 0 5%;
    margin-bottom: 40px;
}

/*--------------------------------
/   Hamburger menu
/-------------------------------*/
.pc_header{ display: none; }
.sp_header{ display: block; }

.openbtn{
    position: fixed;
    z-index: 9999;
    top: 20px;
    right: 10px;
    width: 60px;
    height: 50px;
    cursor: pointer;
    mix-blend-mode: difference;
    filter: invert(1);
}
.openbtn span{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    border-radius: 20px;
    background-color: #000;
    transition: all .4s;
}
.openbtn span:nth-of-type(1){
    top: 10px;
}
.openbtn span:nth-of-type(2){
    top: 20px;
}
.openbtn.active span:nth-of-type(1){
    top: 18px;
    left: 15px;
    transform: translateY(6px)rotate(-45deg);
}
.openbtn.active span:nth-of-type(2){
    top: 30px;
    left: 15px;
    transform: translateY(-6px)rotate(45deg);
}
#g-nav{
    position: fixed;
    z-index: -1;
    opacity: 0;
    width: 86%;
    height: 100vh;
    background-color: #FFF;
    top: 0;
    right: -100%;
    left: initial;
    transition: all .4s;
    overflow: scroll;
}
#g-nav.panelactive{
    display: block;
    opacity: 1;
    right: 0;
    z-index: 999;
}

.header_contents ul{
    padding: 90px 10%;
}
.header_contents ul li{
    margin-bottom: 10px;
}
/*--------------------------------
/   TOP
/-------------------------------*/
/*main view*/
.main_view{
    padding: 90px 3% 40px;
}
.main_view .slider{
    width: 100%;
}
.main_viewT_wrap{
    left: 6%;
}
.main_viewT01{
    font-size: 4.2rem;
}
.main_viewT02{
    font-size: 1.4rem;
}
/*what's somewhere*/
.top_what{
    padding: 90px 6%;
}
.top_what .what_title{
    width: 100%;
    margin-right: 0;
}
.what_title h2{
    font-size: 3.2rem;
}
.top_what section{
    width: 95%;
    margin-top: 40px;
}
.top_img_btn a{
    margin-right: 0;
}
.top_img_btn a p{
    padding: 5px 0;
    font-size: 1.4rem;
}

/*News*/
.top_news{
    padding: 60px 6% 120px;
    flex-wrap: wrap;
}
.top_news_wrap{
    width: 100%;
}
.news_list{
    width: 100%;
    margin-bottom: 40px;
}
.news_list dl dt{
    font-size: 1.25rem;
}
.news_list dl dd{
    font-size: 1.4rem;
}
.top_news .sp_more{
    display: inline-grid!important;
}

/*Restaurant*/
.top_restaurant .title{
    padding: 40px 6%;
}
.slider02 li p{
    font-size: 1.4rem;
}
.slider02 li span{
    font-size: 1.25rem;
    letter-spacing: 0;
}
/*restaurant rogo*/
.Ritem a:hover::after{
    top: 35%;
    transform: translate(-50% , -35%);
}
.restaurant_marche a:hover::after{
    width: 60px;
    height: 22px;
}
.restaurant_xato a:hover::after{
    width: 40px;
    height: 40px;
}
.restaurant_yuno a:hover::after{
    width: 36px;
    height: 60px;
}
.restaurant_tsubame a:hover::after{
    width: 80px;
    height: 30px;
}
.restaurant_mabo a:hover::after{
    width: 30px;
    height: 70px;
}
.restaurant_alan a:hover::after{
    width: 46px;
    height: 25px;
}
.restaurant_eureka a:hover::after{
    width: 60px;
    height: 16px;
}
.restaurant_lamian a:hover::after{
    width: 60px;
    height: 28px;
}
.restaurant_ien a:hover::after{
    width: 36px;
    height: 30px;
}

/*column*/
.column_wrap{
    flex-wrap: wrap;
}
.column{
    padding: 120px 10%;
}
.column_title h2{
    font-size: 2.2rem;
}
.column_recruit{
    margin-right: 0;
    margin-bottom: 20px;
}
/*--------------------------------
/   Footer
/-------------------------------*/
.footer_wrap .wrap{
    width: 80%;
    margin-bottom: 20px;
}
.footer_wrap li{
    font-size: 1.5rem;
}
.footer_wrap span{
    font-size: 1.25rem;
}
/*--------------------------------
/   Company
/-------------------------------*/
.page_view{
    padding: 0 5%;
}
.page_item{
    padding: 6px;
    margin: 10px 12px 0 0;
    font-size: 1.35rem;
    width: 90px;
}
.company_overview{
    padding: 0 5%;
    margin-bottom: 100px;
}
.sub_title h3{
    font-size: 2.5rem;
    line-height: 1.2;
}
.sub_title p{
    font-size: 1.4rem;
}
.company_overview dl dt{
    font-size: 1.4rem;
}
.company_overview dl dd{
    width: 60%;
}
.next_btn{
    height: 140px;
}
.next_btn .nextT div{
    width: 70%;
}
.next_btn .nextT h3{
    font-size: 1.8rem;
    flex-wrap: wrap;
    justify-content: left;
    justify-content: flex-start;
}
.next_btn .nextT p{
    font-size: 1.4rem;
}
.next_btn .nextT h3::after{
    width: 18px;
    height: 5px;
}
/*Message*/
.message_wrap{
    flex-wrap: wrap;
    justify-content: center;
}
.message_wrap img{
    width: 90%;
}
.message_wrap section{
    width: 90%;
    margin-top: 40px;
    line-height: 2;
}
.message_philosophy{
    margin: 120px 0;
}
.message_vision h5{
    font-size: 2.6rem;
}
/*History*/
.history_overview{
    overflow: hidden;
}
.history_wrap{
    width: 100%;
    padding: 120px 5%;
}
.overview_wrap{
    display: none;
}
.arrow{
    padding-right: 10%;
}
.slider03 section{
    padding-right: 20px;
}

/*--------------------------------
/   Restaurant page
/-------------------------------*/
.category{
    padding: 0 5%;
}
.category_item{
    font-size: 1.35rem;
    padding: 6px 14px;
    margin: 8px 4px 0 0;
}
.shop_list{
    grid-template-columns: repeat(2,1fr);
}
.shop_item{
    margin-bottom: 50px;
}
.shop_item span{
    font-size: 1.25rem;
}
.shop_item p{
    font-size: 1.5rem;
}
.shop_item span{
    padding: 10px 5px 6px;
    margin-bottom: 6px;
}

/*--------------------------------
/   Contact page
/-------------------------------*/
.contact_page{
    flex-wrap: wrap;
    justify-content: left;
    justify-content: flex-start;
}
.contact_text{
    margin: 0;
    padding: 0 5%;
}
.formTable dt{
    width: 100%;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
}
.formTable dd{
    width: 100%;
}
.is_requisite{
    padding: 0;
}
.formTable .Ctext_area input{
    width: 90%;
}
.contact_btn input{
    width: 100%;
    margin: 1.6%;
}

/*--------------------------------
/   YUNO page
/-------------------------------*/
.yuno_list{
    flex-wrap: wrap;
    justify-content: center;
}
.yuno_item{
    width: 80%;
    max-width: 350px;
}
.yuno_item a:last-of-type{
    margin-bottom: 40px;
}


}




@media screen and (min-width: 701px) and (max-width: 900px){

    .title h2{
        font-size: 4.5rem;
    }
    .title p{
        font-size: 1.5rem;
    }
    
    /*header*/
    .pc_header .header_logo{
        width: 120px;
    }
    .pc_header nav a, .header_contents a{
        font-size: 1.5rem;
        margin-right: 0.4%;
    }
    .pc_header nav a:last-of-type{
        font-size: 1.4rem;
        padding: 4px 12px;
    }
    /*main view*/
    .main_viewT01{
        font-size: 4.4rem;
    }
    .main_viewT02{
        font-size: 1.6rem;
    }
    /*what's somewhere*/
    .top_what{
        padding: 60px 5% 150px;
    }
    .what_title h2{
        font-size: 3.2rem;
    }
    .top_img_btn a{
        margin-right: 10px;
    }
    /*News*/
    .top_news{
        padding: 150px 5%;
    }
    .news_list{
        width: 66%;
    }
    .sp_more{
        display: none;
    }
    /*Restaurant*/
    .slider02 li p{
        font-size: 1.5rem;
    }
    .slider02 li span{
        font-size: 1.3rem;
    }
    .Ritem a:hover::after{
        top: 40%;
    }
    .restaurant_marche a:hover::after{
        width: 90px;
        height: 33px;
    }
    .restaurant_xato a:hover::after{
        width: 60px;
        height: 60px;
    }
    .restaurant_yuno a:hover::after{
        width: 54px;
        height: 80px;
    }
    .restaurant_tsubame a:hover::after{
        width: 110px;
        height: 35px;
    }
    .restaurant_mabo a:hover::after{
        width: 48px;
        height: 100px;
    }
    .restaurant_alan a:hover::after{
        width: 60px;
        height: 50px;
    }
    .restaurant_eureka a:hover::after{
        width: 90px;
        height: 20px;
    }
    .restaurant_lamian a:hover::after{
        width: 70px;
        height: 30px;
    }
    .restaurant_ien a:hover::after{
        width: 50px;
        height: 40px;
    }

    /*Company*/
    .next_btn{
        height: 180px;
    }
    .next_btn .nextT h3{
        font-size: 3rem;
    }
    .overview_wrap .sub_title h3{
        font-size: 1.8rem;
        line-height: 1.2;
    }
    .overview_wrap .sub_title p{
        font-size: 1.5rem;
    }

}



@media screen and (min-width: 465px) and (max-width: 640px){
    /*restaurant rogo*/
    .restaurant_marche a:hover::after{
        width: 90px;
        height: 30px;
    }
    .restaurant_xato a:hover::after{
        width: 70px;
        height: 70px;
    }
    .restaurant_yuno a:hover::after{
        width: 56px;
        height: 80px;
    }
    .restaurant_tsubame a:hover::after{
        width: 100px;
        height: 30px;
    }
    .restaurant_mabo a:hover::after{
        width: 40px;
        height: 90px;
    }
    .restaurant_alan a:hover::after{
        width: 66px;
        height: 36px;
    }
    .restaurant_eureka a:hover::after{
        width: 90px;
        height: 20px;
    }
    .restaurant_lamian a:hover::after{
        width: 70px;
        height: 30px;
    }
    .restaurant_ien a:hover::after{
        width: 56px;
        height: 40px;
    }
}

@media screen and (min-width: 641px) and (max-width: 699px){
    /*restaurant rogo*/
    .restaurant_marche a:hover::after{
        width: 120px;
        height: 40px;
    }
    .restaurant_xato a:hover::after{
        width: 80px;
        height: 80px;
    }
    .restaurant_yuno a:hover::after{
        width: 66px;
        height: 100px;
    }
    .restaurant_tsubame a:hover::after{
        width: 130px;
        height: 40px;
    }
    .restaurant_mabo a:hover::after{
        width: 50px;
        height: 100px;
    }
    .restaurant_alan a:hover::after{
        width: 76px;
        height: 46px;
    }
    .restaurant_eureka a:hover::after{
        width: 110px;
        height: 26px;
    }
    .restaurant_lamian a:hover::after{
        width: 80px;
        height: 40px;
    }
    .restaurant_ien a:hover::after{
        width: 68px;
        height: 50px;
    }
    /*Restaurant*/
    .shop_list{
        grid-template-columns: repeat(3,1fr);
    }
}