@charset "utf-8";

@media screen and (max-width:1200px) {
    #sub nav ul li a {
        margin: 0 3.5%;
    }
}

/* ここからハンバーガー */
@media screen and (max-width:981px) {
    html {
        font-size: 60%;
    }

    #top div.main.box {
        width: 100%;
        height: 85vh;
        margin-top: 60px;
    }

    div.top_news {
        width: 100%;
        position: absolute;
        bottom: 10vh;
        left: 0;
    }

    .news-list {
        width: 95%;
    }

    #top div.side {
        width: 100%;
    }

    #top div.side img.logo {
        position: fixed;
        width: 20%;
        margin: 0 0 0 10px;
        top: 8px;
        left: 5px;
    }

    #top footer {
        position: static;
        font-size: 1.3rem;
        line-height: 120%;
        text-align: center;
        width: 100%;
        margin-top: 5vh;
    }

    #top div.side_in,
    div.side_in {
        width: 100%;
    }

    .NavMenuul {
        display: none;
    }

    .NavMenuul.active {
        display: block;
        position: fixed;
        z-index: 10000;
        top: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.8);
    }

    #top nav ul,
    nav ul {
        margin-top: 60px;
        height: 100vh;
        padding-top: 10vh;
    }

    .Toggle {
        display: block;
        position: fixed;
        /* bodyに対しての絶対位置指定 */
        right: 13px;
        top: 12px;
        width: 42px;
        height: 42px;
        cursor: pointer;
        z-index: 3;
    }

    .Toggle span {
        display: block;
        position: absolute;
        width: 30px;
        border-bottom: solid 3px #000;
        -webkit-transition: .35s ease-in-out;
        /*変化の速度を指定*/
        -moz-transition: .35s ease-in-out;
        /*変化の速度を指定*/
        transition: .35s ease-in-out;
        /*変化の速度を指定*/
        left: 6px;
    }

    .Toggle span:nth-child(1) {
        top: 9px;
    }

    .Toggle span:nth-child(2) {
        top: 18px;
    }

    .Toggle span:nth-child(3) {
        top: 27px;
    }

    /* 最初のspanをマイナス45度に */
    .Toggle.active span:nth-child(1) {
        top: 18px;
        left: 6px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    /* 2番目と3番目のspanを45度に */
    .Toggle.active span:nth-child(2),
    .Toggle.active span:nth-child(3) {
        top: 18px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #sub div.side {
        left: -25%;
    }

    #sub div.main {
        width: 100%;
        margin: 0;
    }

    div.logo_area {
        position: static;
        width: 100%;
    }

    #sub section {
        margin-top: 5rem;
    }

    #sub div.main img.logo {
        width: 50%;
    }

    img.about_img {
        width: 65%;
        display: block;
        margin: auto;
    }

    .NavMenuul.active li {
        width: 15%;
    }

    /* グローバルメニューの色変え */
    #sub .about nav ul li.about a,
    #sub .menu nav ul li.menu a,
    #sub .reserve nav ul li.reserve a,
    #sub .access nav ul li.access a,
    #sub .info nav ul li.info a {
        background-color: rgba(255, 255, 255, 100);
        color: black;
    }

    table.form_table td,
    table.form_table th {
        display: block;
        width: 100%;
        border-bottom: none;
        padding: 10px;
    }
    table.form_table td.last {
        border-bottom: 1px solid var(--text);
    }
    table.form_table input,
    table.form_table select {
        height: 30px;
    }

    div.reserve_step {
        display: block;
        width: 95%;
        line-height: 1.6;
    }

    div.reserve_step div {
        width: 100%;
        margin-bottom: 2rem;
        padding: 1rem 1.5rem;
        font-size: 1.6rem;
    }

    /* slick responsive */
    .slick-slide img {
        width: 100vw !important;
        height: 85vh !important;
    }

    div.wapper {
        display: block;
    }

    #top div.main.box {
        width: 100%;
    }

    .wapper div.banner {
        top: 60px;
    }

    .wapper div.banner img {
        width: 70%;
    }

    /* スタッフ募集と肉の感謝祭バナー */
    div.banner_two {
        width: 90%;
        margin: 30px auto;
    }
}

/**/
@media screen and (max-width:960px) {
    /* スタッフ募集と肉の感謝祭バナー */
    div.banner_two {
        margin: 20px auto;
    }
}

/* タブレットサイズ */
@media screen and (max-width:768px) {
    .wapper {
        background-color: #fff;
    }

    .wapper div.banner img {
        width: 55%;
    }

    h1 .small {
        font-size: 12px;
    }

    .side_in .text {
        position: absolute;
        top: 60px;
        width: 100%;
        z-index: 10;
    }

    .wapper div.banner_two img {
        padding: 5px 0;
    }

    footer .copyright {
        padding-top: 10px;
    }

    p.basic .pc,
    p.about_right .pc {
        display: none;
    }

    .sister-store .flex div.image {
        width: 65%;
        margin: 0 auto;
    }

    .sister-store .flex div {
        width: 100%;
        margin: 0 auto;
    }

    section.course-menu .flex .flex-box {
        width: 100%;
        margin: 0 auto 5rem;
        padding: 15px;
    }

    /* メニューページ */
    .menu_box {
        width: 100%;
        padding: 15px;
    }

    .menu_box dt {
        width: 65%;
    }

    .menu_box dd {
        width: 30%;
    }

    .menu_box .t-beef .first {
        width: 100%;
    }

    .menu_box .t-beef .item-left.first {
        margin: 1rem 0;
    }

    /* メニューページ内リンク */
    .menu_btn-area.flex {
        display: flex;
    }

    .menu_btn-area .menu_btn {
        font-size: 1.4rem;
        padding: 1.5rem 0;
    }

    .menu_btn-area div span.arrow {
        bottom: -40%;
    }

    .menu_btn-area .sp {
        display: inline;
    }

}

/* スマホサイズ */
@media screen and (max-width:599px) {

    /* slick responsive */
    .slick-prev,
    .slick-next {
        top: 35%;
    }

    .slick-prev {
        left: 5px;
    }

    .slick-next {
        right: 15px;
    }

    #formWrap {
        width: 95%;
    }

    textarea {
        width: 90%;
    }

    div.reserve_box {
        font-size: 1.25rem;
        width: 95%;
    }

    .newyear-detail {
        width: 95%;
    }

    #top div.side img.logo {
        width: 50%;
    }

    .wapper div.banner img {
        width: 60%;
    }

    p.about_right {
        text-align: left;
    }

    /* Aboutページ */
    .main .main_in h2.al-r {
        text-align: center;
    }

    /* フッター */
    #top footer {
        background-color: #fff;
    }

    /* 年末年始 */
    .main .s_link.newyear {
        left: 0;
    }

    .main .s_link.newyear a {
        text-align: center;
    }

    .main .s_link.newyear a img {
        width: 90%;
        margin: 0 auto;
    }

    .main .s_link.newyear {
        bottom: 33%;
    }

    /* NEWOPENバナー */
    .wapper div.banner {
        top: 60px;
    }

    /* Menuページ */
    .flex.menu-pdf {
        justify-content: space-between;
    }

    .flex.menu-pdf div {
        width: 47%;
    }

    a.menu_data {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    section.course-menu {
        margin-top: 5px !important;
    }

    section.course-menu h1 {
        margin-top: 10px;
    }

    /* メニュー・コース・ランチ */
    section.course-menu .flex .flex-box .flex {
        display: block;
    }

    section.course-menu .flex .flex-box ul {
        width: 100%;
    }

    section.course-menu .flex .flex-box ul li {
        padding: 10px;
    }
    .red-belt {
        margin: 10px 0px;
    }
    .black-belt {
        margin: 10px 5px;
    }
    section.lunch dl {
        display: flex;
        flex-direction: column;
    }
    .menu_box dl {
        display: flex;
        flex-direction: column;
    }
    .menu_box dt {
        width: 100%;
    }
    .menu_box dd {
        width: 100%;
    }
}