@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400..600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');




/*========================================================
    変数
==========================================================*/
/* フォント */
:root {
    --font-ja-gothic01: "Yu Gothic", "游ゴシック", "YuGothic", "Noto Sans JP", sans-serif;
    --fon-ja-mincho01: "Yu Mincho", "游明朝", "YuMincho", serif;
    --font-en-gothic01: "M PLUS 1p", "Yu Mincho", "游明朝", "YuMincho", "Noto Serif JP", sans-serif;
    --font-en-gothic02: "Jost", "Yu Mincho", "游明朝", "YuMincho", sans-serif;
    --font-en-gothic03: "Outfit", sans-serif;
    --font-en-mincho01: "Times New Roman", "STIX Two Text", serif;
}

/* カラー */
:root {
    --color-main: #f4541f;
    --color-design01: #2f2825;
    --color-design02: #aeadad;
}

/* 背景 */
:root {
    --texture-image: image-set(url("../img/texture.webp") type("image/webp"),
            url("../img/texture.jpg") type("image/jpeg"));
}

/*========================================================
    表示・非表示
==========================================================*/
/* PC */
@media (min-width: 960px) {
    .is_tab {
        display: none !important;
    }

    .is_sp {
        display: none !important;
    }

    .is_tab-sp {
        display: none !important;
    }
}

/* TAB */
@media (min-width: 768px) and (max-width: 959px) {
    .is_pc {
        display: none !important
    }

    .is_sp {
        display: none !important;
    }
}

/* SP */
@media (max-width: 767px) {
    .is_pc {
        display: none !important;
    }

    .is_tab {
        display: none !important;
    }

    .is_pc-tab {
        display: none !important;
    }
}





/*========================================================
    基本設定
==========================================================*/
* {
    font-family: var(--fon-ja-mincho01);
    letter-spacing: 0.08em;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

html {

    @media (min-width: 768px) {
        scroll-padding-top: 145px;
    }

    @media (max-width: 767px) {
        scroll-padding-top: 0;
    }
}
body {
    overflow-x: hidden;
}

main {
    position: relative;
}

a {
    display: block;
    transition: all 0.3s;
    font-family: inherit;
    color: inherit;
    text-decoration: none;

    &:hover {
        opacity: .65;
        cursor: pointer;
        transition: all 0.1s;
    }
}

button {
    padding: 0;
    border: none;
    outline: none;
    background-color: transparent;
    color: #000;

    &:hover {
        cursor: pointer;
    }
}

li {
    list-style-type: none;
}

img,
picture,
svg {
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: cover;
    object-position: center center;
}

span {
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
}


/*========================================================
    共通
==========================================================*/

.page__container {
    position: relative;
}

.ly__texture {
    background-image: var(--texture-image);
    background-size: 1920px 2495px;
    background-repeat: repeat;

    >* {
        position: relative;
    }
}

.subPage__top {
    display: flex;
    align-items: center;
    padding-top: 145px;

    @media (max-width: 767px) {
        display: block;
        padding-top: 0;
    }

    .img {
        width: 50%;
        height: 600px;

        @media (max-width: 767px) {
            width: 100%;
            height: 270px;
        }
    }

    .pageTitle {
        width: 50%;
        text-align: center;
        font-family: var(--font-en-mincho01);
        font-size: 46px;
        line-height: 1;

        @media (max-width: 767px) {
            width: 100%;
            margin-top: 35px;
            font-size: 32px;
            line-height: 1.1;
        }

        .ja {
            display: block;
            font-family: var(--fon-ja-mincho01);
            font-size: 16px;
            margin-top: 15px;
            letter-spacing: 0.3em;

            @media (max-width: 767px) {
                font-size: 14px;
            }
        }
    }
}

h2.tagLine {
    font-size: clamp(1.688rem, 1.521rem + 0.35vw, 1.938rem);
    color: var(--color-design01);
    letter-spacing: 0.18em;
    line-height: 1.729em;
    white-space: nowrap;

    @media (max-width: 767px) {
        font-size: 24px;
    }
}

h3.sectionTitle {
    font-family: var(--font-en-mincho01);
    font-size: 57px;
    color: #b0afaf;
    letter-spacing: 0.04em;

    @media (max-width: 767px) {
        font-size: 39px;
    }

    .ja {
        display: block;
        font-family: var(--fon-ja-mincho01);
        font-size: 17px;
        margin-left: 0.5em;

        @media (max-width: 767px) {
            font-size: 14px;
            margin-left: 0;
        }
    }
}

.sectionTitle.type02 {
    display: flex;
    align-items: flex-end;

    .ja {
        margin-left: 1.2em;
        padding-bottom: 0.7em;

        @media (max-width: 767px) {
            margin-left: 0;
        }
    }
}


p.txt {
    text-align: justify;
}

.img {
    overflow: hidden;
}

.btn01 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 250px;
    height: 72px;
    border-radius: 3px;
    border: 2px solid var(--color-design01);
    padding: 0 20px 0 30px;
    background-color: var(--color-design01);
    font-family: var(--font-ja-gothic01);
    font-size: 18px;
    font-weight: 300;
    color: #e9e6de;

    &::after {
        display: block;
        content: "";
        width: 42px;
        height: 15px;
        background-image: url(../img/assets/arrow01.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        transition: transform .3s;
    }

    &:hover {
        opacity: 1;
        background-color: transparent;
        color: var(--color-design01);

        &:after {
            transform: translateX(10px);
            filter: brightness(0) saturate(100%) invert(8%) sepia(12%) saturate(1247%) hue-rotate(333deg) brightness(93%) contrast(80%);
        }
    }

    @media (max-width: 767px) {
        width: min(53.538vw, 250px);
        height: 65px;
        font-size: 14px;

        &::after {
            width: 32px;
        }
    }

    @media (max-width: 360px) {
        /* width: 196px; */
        height: 53px;
        padding: 0 20px 0 37px;
        font-size: 15px;

    }
}

#footer .intro__r,
#keyImg-contents .block01 .text-box,
#biz-hours .inner .text-box,
#floor-map .inner .text-box {
    >* {
        white-space: nowrap;
    }

    .headLine {
        font-size: 17px;
        color: var(--color-design01);
        margin-bottom: 1.2em;

        @media (max-width: 767px) {
            margin-bottom: 0.7em;
        }
    }

    .item {
        font-size: 15px;
        color: var(--color-design01);
        line-height: 1em;
        display: flex;
        align-items: flex-start;

        @media (max-width: 360px) {
            font-size: 14px;
        }

        dt {
            font-size: 17px;
            width: 20%;

            @media (max-width: 360px) {
                font-size: 16px;
            }
        }

        dd {
            width: 80%;
        }
    }

    .item+.item {
        margin-top: 0.6em;

        &.lunch {
            margin-top: 2em;
        }

        @media (max-width: 767px) {
            margin-top: 1.1em;
        }
    }

    .note {
        display: block;
        width: 100%;
        margin-top: 3px;
        font-size: 13px;
        color: var(--color-design01);
        line-height: 1.5em;
    }
}


/*========================================================
    出現
==========================================================*/
.fadeIn,
.child {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.5s, opacity 0.5s;

    &.wood-grain {
        transition-delay: .3s;
        transform: none;
    }

    &.on {
        opacity: 1;
        transform: translateY(0);
    }
}

.wood-parent .child01,
.wood-parent .child02,
.wood-parent .child03 {
    opacity: 0;
    transition: opacity 0.6s;

    &.on {
        opacity: 1;
    }
}

.fadeInblur {
    opacity: 0;
    filter: blur(20px);
    will-change: filter;
    transition: opacity 1.5s ease, filter 1.5s ease 0.2s, transform 1.5s ease 0.2s;

    &.on {
        opacity: 1;
        filter: blur(0);
    }
}


.wine_parent .wine {
    opacity: 0;

    &.on {
        animation: blurText 2s ease forwards;
    }
}

.zoom,
.zoom_parent .zoom_child {
    opacity: 0;
    transition: opacity 1s;

    img {
        transition: transform 1s;
        transform: scale(1.2);
        transform-origin: center center;
    }

    &.on {
        opacity: 1;

        img {
            transform: scale(1);
        }
    }
}


/*  大きいテキスト
==========================================================*/
.char-anime {
    opacity: 0;

    &.displayed {
        animation: blurText-parent 1.2s ease-out forwards;

        span {
            display: inline-block;
            animation: blurText 1.2s ease-out forwards;
            opacity: 0;
            font-weight: inherit;
        }
    }
}

@keyframes blurText-parent {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blurText {
    0% {
        filter: blur(10px);
        opacity: 0;
        transform: rotate(5deg);
    }

    30% {
        opacity: 0.8;
        filter: blur(20px);
    }

    50% {
        filter: blur(0);
        transform: scale(1.1, 1.1) skew(8deg, 5deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/*========================================================
    ポップアップ
==========================================================*/
#popup {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.8s ease;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    max-height: 95svh;
    padding: 55px 90px 33px;
    background-color: color-mix(in srgb, #ebe9e1 95%, transparent 5%);
    z-index: 999;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }


    &.is-show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    @media (max-width: 1400px) {
        padding: 40px 60px 20px;
    }
    @media (max-width: 767px) {
        width: 90vw;
        padding: 48px 30px 22px;
    }

    .close__btn {
        position: absolute;
        top: 34px;
        right: 30px;
        width: 63px;
        height: 63px;
        border-radius: 50%;
        background-color: var(--color-design01);
        cursor: pointer;

        &::before,
        &::after {
            position: absolute;
            content: "";
            top: 50%;
            left: 50%;
            transform-origin: center;
            width: 22px;
            height: 2px;
            background-color: #fff;
        }
        &::before {
            transform: translate(-50%, -50%) rotate(45deg);
        }
        &::after {
            transform: translate(-50%, -50%) rotate(135deg);
        }

        @media (max-width: 767px) {
            top: 14px;
            right: 10px;
            width: 35px;
            height: 35px;

            &::before,
            &::after {
                width: 12px;
            }
        }
    }

    .popup__wrap {
        position: relative;
    }
    .popup__title {
        font-family: var(--fon-ja-mincho01);
        font-size: 34px;
        text-align: center;

        @media (max-width: 1400px) {
            font-size: 30px;
        }
        @media (max-width: 767px) {
            font-size: 17px;
        }
    }
    .txt {
        font-family: var(--font-ja-gothic01);
        font-size: 18px;
        line-height: 2;
        text-align: center;
        margin-top: 66px;
        color: #2a2a2a;

        @media (max-width: 1400px) {
            font-size: 16px;
            margin-top: 40px;
            line-height: 1.8;
        }
        @media (max-width: 767px) {
            font-size: 14px;
            line-height: 1.8;
            text-align: justify;
            margin-top: 27px;
        }
    }
    .logo {
        width: 73px;
        margin-top: 30px;
        margin-inline: auto;

        @media (max-width: 1400px) {
            margin-top: 40px;
            width: 60px;
        }
        @media (max-width: 767px) {
            width: 40px;
            margin-top: 20px;
            transform: translateX(px);
        }
    }
    .chef-wrap {
        margin-top: 30px;
        text-align: center;

        @media (max-width: 1400px) {
            margin-top: 20px;
        }
        @media (max-width: 767px) {
            position: absolute;
            bottom: 0;
            right: 0;
            width: max-content;
            text-align: left;
        }

        .en {
            font-size: 12px;
            color: #707070;

            @media (max-width: 767px) {
                font-size: 10px;
            }
        }
        .name {
            font-size: 19px;
            color: #707070;

            @media (max-width: 767px) {
                font-size: 16px;
                line-height: 1;
            }
        }
    }
}

/*========================================================
    Reservation
==========================================================*/
.reservation__banner {

    .bg {
        padding: 70px 0 107px;
        position: relative;
        background-image: url(../img/jpg_png/reservation_Bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        @media (max-width: 767px) {
            padding: 40px 0 65px;
            background-image: url(../img/jpg_png/reservation_Bg_sp.jpg);
        }
    }

    .wood-grain05 {
        position: absolute;
        top: -42px;
        left: -81px;
        width: 153px;
    }

    .title {
        width: fit-content;
        margin: 0 auto;
        font-family: var(--font-en-gothic01);
        font-size: 24px;
        color: var(--color-main);
        padding-bottom: 5px;
        border-bottom: 1px solid var(--color-main);
    }

    .bg>.txt {
        margin-top: 1em;
        text-align: center;
        font-size: 14px;
        color: #fff;
    }

    .inner {
        margin-top: 63px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 64px;

        @media (max-width: 767px) {
            flex-direction: column;
            gap: 10px;
        }

        .reservation-btn {
            display: flex;
            align-items: center;
            gap: 22px;
            width: 300px;
            aspect-ratio: 300 / 70;
            background-color: #fff;
            border-radius: 3px;
            overflow: hidden;
            padding-left: 45px;
            font-family: var(--font-ja-gothic01);
            line-height: 1;
            transition: none;

            &:hover {
                opacity: 1;
                color: var(--color-main);

                .icon {
                    filter: brightness(0) saturate(100%) invert(51%) sepia(32%) saturate(7491%) hue-rotate(348deg) brightness(94%) contrast(76%);
                }
            }

            @media (max-width: 767px) {
                font-size: 21px;
            }

            @media (max-width: 360px) {
                width: 246px;
                height: 58px;
                padding: 0 20px 0 37px;
                font-size: 17px;

                &::after {
                    width: 32px;
                }
            }

            .icon {
                transition: none;
            }
        }

        .reservation-btn.tel,
        .reservation-btn.map {
            padding-left: 45px;
            font-family: var(--font-en-gothic02);
            font-weight: 400;
            font-size: 21px;

            @media (max-width: 360px) {
                padding-left: 25px;
                font-size: 19px;
            }

            .icon {
                width: 25px;
                height: 25px;

                img {
                    object-fit: contain;
                }
            }
        }

        .reservation-btn.map {
            font-family: var(--font-en-mincho01);

            .icon {
                width: 21px;
                height: 21px;
            }
        }

        .reservation-btn.ig {
            padding-left: 48px;
            font-size: 18px;

            @media (max-width: 360px) {
                padding-left: 28px;
                font-size: 17px;
            }

            .icon {
                width: 24px;
                height: 24px;

                @media (max-width: 360px) {
                    width: 26px;
                    height: 26px;
                }

                img {
                    object-fit: contain;
                }
            }
        }
    }
}

/*========================================================
    ヘッダー
==========================================================*/
#header {
    position: fixed;
    width: 100vw;
    height: 145px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;

    &:has(.subPage__top) {
        position: sticky;
    }

    @media (max-width: 767px) {
        transform: none;
        background-color: transparent;

        &::before {
            position: absolute;
            content: "";
            top: 0;
            right: 0;
            width: 160px;
            height: 70px;
            background: url(../img/menu__Bg.svg);
            background-position: top right;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 999;
        }
    }
}

/* トップページ */
.page__container:has(#mainVisual) #header {
    transform: translateY(-145px);
    transition: opacity .8s ease, transform .8s ease;
    pointer-events: none;
    opacity: 0;

    &.show {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition: opacity .5s ease, transform .5s ease;
    }
}

#header .logo {
    width: 135px;
    margin-right: 6.77vw;

    @media (max-width: 1500px) {
        margin-right: 2vw;
    }

    @media (max-width: 767px) {
        margin: 0;
    }
}

#header .menu-content {
    display: flex;
    align-items: center;

    @media (max-width: 767px) {
        position: fixed;
        inset: 0;
        width: 100%;
        /* height: 100vh; */
        overflow: scroll;
        padding-top: 90px;
        padding-bottom: 30px;
        flex-direction: column;
        background-color: color-mix(in sRGB, var(--color-main) 10%, white);
        /* background-color: #fff; */
        transform: translateY(-100vh);
        /* opacity: 0; */
        visibility: hidden;
        transition: transform .6s ease, opacity .6s ease, visibility .6s ease;
        z-index: 998;
    }
}

#header .gnavi {
    display: flex;
    margin-right: 70px;

    @media (max-width: 1500px) {
        margin-right: 50px;
    }

    @media (max-width: 767px) {
        margin: 0;
    }

    .gnavi__list {
        display: flex;
        align-items: center;
        gap: 3.4375vw;

        @media (max-width: 1500px) {
            gap: 15px;
        }

        @media (max-width: 767px) {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }

        .gnavi__item a {
            font-family: var(--font-en-mincho01);
            font-size: clamp(0.875rem, 0.313rem + 0.94vw, 1.438rem);
            color: #b0afaf;
            letter-spacing: 0.06em;
            text-align: center;
            position: relative;

            @media (max-width: 767px) {
                font-size: 21px;
                color: var(--color-design01);
                text-align: left;
                display: flex;
                align-items: flex-end;
                padding-left: 5px;
                transform: translateY(100%);
                transition: transform 0.8s ease;
                transition-delay: .3s;

                &.menu {
                    transition-delay: .38s;
                }

                &.about {
                    transition-delay: .46s;
                }

                &.information {
                    transition-delay: .54s;
                }

                &.qa {
                    transition-delay: .62s;
                }

                &::before {
                    position: absolute;
                    content: "";
                    top: 37%;
                    right: 5px;
                    transform: translateY(-50%);
                    width: 25px;
                    height: 25px;
                    border-radius: 2px;
                    background-color: var(--color-design01);
                }

                &::after {
                    position: absolute;
                    content: "";
                    top: 37%;
                    right: 10px;
                    transform: translateY(-50%);
                    width: 17px;
                    height: 7px;
                    background: url(../img/assets/arrow01.svg) no-repeat center center / contain;
                }
            }

            .en {
                /* display: block; */
                display: none;
                font-size: 12px;
                font-weight: 600;

                @media (max-width: 1500px) {
                    font-size: 10px;
                }

                @media (max-width: 767px) {
                    margin-bottom: 7px;
                    margin-left: 22px;
                    font-weight: 700;
                }
            }
        }

        .gnavi__item.reservation a {
            color: var(--color-main);
            padding-bottom: 7px;
            position: relative;

            &::after {
                position: absolute;
                content: "";
                left: 0;
                top: 1.35em;
                width: 100%;
                height: 1px;
                background-color: var(--color-main);
                transform-origin: left top;
            }

            .en {
                display: block;
            }
        }
    }

    .gnavi__list.navi {
        @media (max-width: 767px) {
            width: 81vw;
            margin: 0 auto;

            .gnavi__item:not(.reservation) {
                width: 100%;
                overflow: hidden;
                border-bottom: 1px solid #dfc6bc;
            }
        }
    }
}


#header .btn-wrap {
    display: flex;
    margin-right: 23px;

    @media (max-width: 767px) {
        justify-content: center;
        margin: 56px auto 45px;
        gap: 40px;
    }

    .btn__item {
        &.ig {
            margin-left: 23px;

            @media (max-width: 767px) {
                margin-left: 0;

                svg {
                    width: 39px;
                }
            }
        }

        &.map {
            margin-left: 18px;

            @media (max-width: 767px) {
                margin-left: 0;
            }
        }

        a {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        svg,
        img {
            width: 23px;
            height: 23px;
            margin: 0 auto;
            object-fit: contain;

            @media (max-width: 767px) {
                width: 30px;
                height: 30px;
            }
        }

        .name {
            /* display: flex; */
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            top: 100%;
            white-space: nowrap;
            position: relative;

            @media (max-width: 767px) {
                margin-top: 9px;
            }

            .arrow {
                position: absolute;
                left: calc(100% + 2px);
                top: 50%;
                transform: translateY(-50%);
                width: 6px;

                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
}

#header .info-wrap {
    display: contents;

    @media (max-width: 767px) {
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 20px;
        padding-left: 10px;
    }

    .logo {
        width: 25%;
    }
}

#header .info {
    margin-top: 13px;

    @media (max-width: 767px) {
        margin: 0;
        width: 60%;
    }

    .item {
        display: flex;

        &+& {
            margin-top: 10px;
        }

        .time {
            width: 23%;
            font-size: 12px;

            @media (max-width: 767px) {
                font-size: 11px;
                width: 20%;
            }
        }

        .txt {
            font-size: 12px;
            width: 77%;
            position: relative;

            @media (max-width: 767px) {
                width: 80%;
            }

            .sub {
                font-size: 10px;
            }

            .note {
                display: block;
                white-space: nowrap;

                @media (max-width: 767px) {
                    white-space: normal;
                }
            }
        }
    }
}

#header .modal_btn {
    position: fixed;
    top: 12px;
    right: 15px;
    width: 39px;
    z-index: 1001;

    span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transition: opacity 0.5s;
    }

    >.close {
        opacity: 0;
        visibility: hidden;
    }
}

body:has(header.active) {
    overflow: hidden;
}

#header.active .modal_btn .open {
    opacity: 0;
    visibility: hidden;
}

#header.active .modal_btn .close {
    opacity: 1;
    visibility: visible;
}

#header.active .menu-content {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;

    .gnavi__list .gnavi__item a {
        transform: none;
    }
}

/*========================================================
    フッター
==========================================================*/
#footer {
    position: relative;

    @media (max-width: 767px) {
        padding-top: 60px;
    }

    .inner {
        display: flex;
        align-items: stretch;
        justify-content: center;
        height: 432px;

        @media (max-width: 767px) {
            display: block;
            height: auto;
        }

        .logo {
            width: 150px;
            height: fit-content;
            margin: auto 0;
            transform: translateX(-70px);

            @media (max-width: 767px) {
                width: 41.282vw;
                margin: 0 auto;
                transform: translateX(14px);
            }
        }
    }
}

#footer .inner .intro {
    width: 41vw;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    padding: 0 63px 0 70px;
    margin: auto 0;

    @media (max-width: 767px) {
        width: min-content;
        margin: 0 auto;
        display: block;
        padding: 100px 0 70px 0;
    }

    >* {
        white-space: nowrap;
    }

    .shop-name {
        width: 100%;
        margin-bottom: 36px;
        font-size: 19px;
        color: var(--color-design01);

        .sub {
            display: block;
            font-size: 12px;
        }
    }

    .intro__l {
        width: 55%;

        @media (max-width: 1400px) {
            width: 100%;
            margin-bottom: 20px;
        }

        @media (max-width: 767px) {
            margin-bottom: 78px;
        }

        * {
            font-size: 14px;
            color: var(--color-design01);
            line-height: 1.6875em;

            &+& {
                margin-top: 10px;
            }

            @media (max-width: 767px) {
                font-size: 14px;
            }

            @media (max-width: 360px) {
                font-size: 13px;
            }
        }

        .ig a {
            display: flex;
            align-items: center;
            width: fit-content;

            .icon {
                display: block;
                width: 24px;
                height: 15px;

                img {
                    object-fit: contain;
                }
            }
        }
    }

    .intro__r {
        width: 45%;

        @media (max-width: 1400px) {
            width: 100%;
        }

        >* {
            font-size: 14px;
        }
    }
}

#footer .inner .gnavi {
    width: 265px;
    border-left: 1px solid var(--color-design02);
    padding-left: 52px;

    @media (max-width: 1400px) {
        width: auto;
    }

    .gnavi__list {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 27px;

        .gnavi__item a {
            display: flex;
            align-items: center;
            gap: 20px;
            font-family: var(--font-en-mincho01);
            font-size: 19px;
            letter-spacing: 0.06em;
            color: var(--color-design01);

            .arrow {
                width: 23px;
                height: 20px;
                position: relative;
                overflow: hidden;

                &::after {
                    position: absolute;
                    content: "";
                    width: 100%;
                    height: 100%;
                    background-color: var(--color-design01);
                    -webkit-mask-image: url(../img/assets/arrow01.svg);
                    -webkit-mask-position: center;
                    -webkit-mask-size: contain;
                    -webkit-mask-repeat: no-repeat;
                    mask-image: url(../img/assets/arrow01.svg);
                    mask-position: center;
                    mask-size: contain;
                    mask-repeat: no-repeat;
                    transform: translateX(-100%);
                    opacity: 0;
                }
            }


            &:hover {
                opacity: 1;

                .arrow::after {
                    animation: arrowIn .35s forwards;
                    animation-delay: 0s;
                }
            }

            &:not(:hover) {
                .arrow::after {
                    animation: arrowOut .35s forwards;
                }
            }
        }
    }
}

@keyframes arrowIn {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes arrowOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

#footer .inner .btn-wrap {
    width: 270px;
    border-left: 1px solid var(--color-design02);
    border-right: 1px solid var(--color-design02);

    @media (max-width: 767px) {
        width: 100vw;
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--color-design02);
        display: flex;
        align-items: stretch;
    }

    .btn-item {
        height: 50%;

        @media (max-width: 767px) {
            flex-shrink: 0;
            width: 50%;
            height: auto;
            /* aspect-ratio: 20 / 18; */
        }

        &+& {
            border-top: 1px solid var(--color-design02);

            @media (max-width: 767px) {
                border-top: none;
                border-left: 1px solid var(--color-design02);
            }
        }
    }

    .btn-item a {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        @media (max-width: 767px) {
            justify-content: flex-start;
            padding-top: 37px;
            padding-bottom: 37px;
        }

        .btn-icon {
            width: 30px;
            height: 30px;
            margin-bottom: 7px;
            object-fit: contain;
        }

        span {
            display: block;
            color: var(--color-design01);
        }

        .number {
            font-family: var(--font-en-gothic02);
            font-size: 26px;
            font-weight: 400;
            letter-spacing: 0.06em;

            @media (max-width: 767px) {
                font-size: 20px;
            }
        }

        .ja {
            font-size: 12px;
            font-weight: 600;

            @media (max-width: 767px) {
                font-size: 11px;
            }
        }

        .en {
            font-family: var(--font-ja-gothic01);
            font-size: 21px;

            @media (max-width: 767px) {
                font-size: 19px;
            }
        }
    }
}



/*========================================================
    トップページ
==========================================================*/
/*  オープニング
==========================================================*/
.opening {
    position: relative;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    pointer-events: none;
    transition: transform 0.3s;
}

.ly__opening {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    transition: transform 0.3s;
}

.opening__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease-in;
    z-index: 20;
    opacity: 0;

    &.__logo01 {
        width: 167px;

        @media (max-width: 767px) {
            width: 130px;
        }
    }

    &.__logo02 {
        width: 236px;

        @media (max-width: 767px) {
            width: 166px;
            margin-left: 7px;
        }
    }
}

.opening__logo.show {
    opacity: 1;
}

.opening__logo.hide {
    opacity: 0;
    transition: opacity 1.2s ease-in;
}

/*  MainVisual
==========================================================*/
.mainVisual {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    opacity: 0;
    transition: opacity 2s ease, transform 2s ease, filter 2s ease;
    filter: blur(8px);
    z-index: -2;
    overflow: hidden;

    >* {
        height: 100%;
    }
}

.mainVisual.load {
    opacity: 1;
    filter: none;
}

#mainVisual .swiper-slide-active picture img,
.swiper-slide-duplicate-active picture img,
.swiper-slide-prev picture img,
#biz-hours .swiper-slide-active picture img,
#biz-hours .swiper-slide-duplicate-active picture img,
#biz-hours .swiper-slide-prev picture img {
    animation: zoom 10s linear 0s 1 normal both;

    img {
        display: block;
    }
}

@keyframes zoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}


/*  TOP Concept
==========================================================*/
#concept-section {
    padding: 258px 0 273px;
    position: relative;

    @media (max-width: 767px) {
        padding: 75px 0 135px;
    }

    .line01 {
        position: absolute;
        top: 335px;
        left: -73px;
        width: 33.697vw;
        aspect-ratio: 647 / 230;

        @media (max-width: 767px) {
            top: -47px;
            left: auto;
            right: 55px;
            width: 122.82vw;
        }
    }

    .sketch {
        position: absolute;
        top: 11.3958vw;
        right: 13.3645vw;
        width: 117px;

        @media (max-width: 767px) {
            top: 160px;
            left: 36px;
            right: auto;
            width: 20vw;
        }

        @media (max-width: 450px) {
            top: 65.923vw;
        }
    }

    .inner {
        width: min(90%, 1486px);
        margin: 0 auto;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        @media (max-width: 767px) {
            width: 100vw;
            flex-direction: column;
        }
    }

    .inner__left {
        width: min(50%, 710px);
        padding-bottom: 17px;

        @media (max-width: 767px) {
            width: 100vw;
        }

        .tagLine {
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            margin: 0 16px 0 auto;
            transform: scaleX(0.9);
            line-height: 1.8;

            @media (max-width: 767px) {
                margin: 0 52px 0 auto;
            }
        }

        .img-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-top: 130px;

            @media (max-width: 767px) {
                margin-top: 100px;
                gap: 5.24px;
                padding: 0 6.8px;
            }

            .img {
                border-radius: 10px;
            }
        }
    }

    .inner__right {
        width: min(45%, 594px);

        @media (max-width: 767px) {
            width: min(90%, 332px);
            margin: 90px auto 0;
        }

        .txt {
            margin-top: 75px;
            font-size: 16px;
            line-height: 2.235em;
            text-align: justify;

            @media (max-width: 767px) {
                margin-top: 30px;
                font-size: 14px;
                line-height: 2.0625em;
            }
        }

        .btn01 {
            margin-top: 55px;
            padding-left: 40px;
            display: none;

            @media (max-width: 767px) {
                margin-inline: auto;
            }

            @media (max-width: 360px) {
                padding-left: 26px;
            }
        }
    }
}

/* .line01 SVG */
.bLSKFHyZ_0 {
    fill: none;
    stroke: var(--color-main);
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-dasharray: 800 802;
    stroke-dashoffset: 801;
}

.js-lineDraw.is-active .bLSKFHyZ_0 {
    animation: bLSKFHyZ_draw 1s linear forwards;
}

@keyframes bLSKFHyZ_draw {
    to {
        stroke-dashoffset: 0;
    }
}


/*  TOP keyImg
==========================================================*/
#keyImg-contents .keyImg-block {
    display: flex;

    @media (max-width: 767px) {
        display: block;
    }

    .img {
        border-radius: 50px;

        @media (max-width: 767px) {
            border-radius: 30px;
        }
    }
}

#keyImg-contents .block01 {
    align-items: flex-end;
    justify-content: right;

    .img01-wrap {
        width: 23vw;
        margin-bottom: 416px;
        position: relative;

        &::after {
            position: absolute;
            content: "";
            left: 72px;
            bottom: -55px;
            width: 126px;
            height: 77px;
            background-image: url(../img/assets/line02.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }

        @media (max-width: 1400px) {
            margin-bottom: 200px;
        }

        @media (max-width: 767px) {
            width: 82.051vw;
            margin: 0 auto;

            &::after {
                left: 30px;
                bottom: -48px;
                width: 103px;
                height: 63px;
            }
        }

        @media (max-width: 360px) {
            &::after {
                width: 90px;
                bottom: -40px;
            }
        }
    }

    .text-box {
        width: 300px;
        margin-left: 63px;
        margin-right: 165px;
        margin-bottom: 416px;

        @media (max-width: 1400px) {
            width: 260px;
            margin: auto 60px 200px;
        }

        @media (max-width: 767px) {
            padding: 87px 0 107px;
            width: min-content;
            margin: 0 auto;
        }
    }

    .img02 {
        width: 760px;
        border-radius: 0 0 0 195px;

        @media (max-width: 1400px) {
            width: 400px;
        }

        @media (max-width: 767px) {
            width: 91.282vw;
            border-radius: 0 0 0 90px;
            margin: 0 0 0 auto;
        }
    }
}

#keyImg-contents .block02 {
    align-items: flex-start;
    gap: 20vw;
    margin-top: -150px;

    @media (max-width: 1400px) {
        gap: 10vw;
        margin-top: 0;
    }

    .img03-wrap {
        width: 507px;

        @media (max-width: 767px) {
            width: 77.948vw;
            margin-top: 180px;
        }

        .img03 {
            border-radius: 0 50px 50px 0;

            @media (max-width: 767px) {
                border-radius: 0 30px 30px 0;
            }
        }

        .txt {
            margin-left: 60px;

            @media (max-width: 767px) {
                margin-left: 16px;
                white-space: nowrap;
            }
        }
    }

    .img04-wrap {
        width: 290px;
        margin-top: 190px;

        @media (max-width: 767px) {
            width: 44.358vw;
            margin: 35px 42px 0 auto;
        }

        .txt {
            @media (max-width: 767px) {
                margin-left: 14px;
            }

            @media (max-width: 360px) {
                margin-left: 0;
            }
        }
    }
}

#keyImg-contents .block03 {
    align-items: center;
    justify-content: center;
    gap: 13vw;
    margin-top: 98px;

    @media (max-width: 1400px) {}

    @media (max-width: 767px) {
        margin-top: 0;
    }

    .img05-wrap {
        width: 41.45vw;

        @media (max-width: 767px) {
            width: 100vw;
            margin-top: 70px;
        }

        .txt {
            text-align: right;

            @media (max-width: 767px) {
                text-align: left;
                margin-left: 16px;
            }
        }
    }

    .img06-wrap {
        width: 26.4vw;

        @media (max-width: 767px) {
            width: 77.948vw;
            margin: 58px 18px 0 auto;
        }
    }
}

#keyImg-contents .keyImg-block .img-wrap,
#menu-section .inner .img-wrap {
    .txt.en {
        font-family: var(--font-en-mincho01);
        font-size: 10px;
        color: var(--color-design02);
        margin-top: 20px;

        @media (max-width: 767px) {
            font-size: 10px;
            margin-top: 10px;
        }
    }

    .txt.ja {
        font-size: 12px;
        color: var(--color-design02);
        margin-top: 5px;
        text-align-last: auto;

        @media (max-width: 767px) {
            font-size: 12px;
            margin-top: 3px;
        }
    }
}


/*  TOP Menu
==========================================================*/
#menu-section {
    padding-top: 98px;

    @media (max-width: 767px) {
        padding-top: 92px;
        padding-bottom: 130px;
    }

    .inner {
        display: flex;
        align-items: flex-end;

        @media (max-width: 767px) {
            flex-direction: column;
        }
    }

    .inner .menuImg01-wrap {
        width: 15.28vw;
        margin-bottom: 73px;

        @media (max-width: 1400px) {
            width: 20vw;
        }

        @media (max-width: 767px) {
            order: 3;
            width: 100vw;
            margin-top: 70px;
            margin-bottom: 0;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .img {
            border-radius: 0 50px 50px 0;

            @media (max-width: 767px) {
                border-radius: 0 30px 30px 0;
                width: 46.41%;
                margin: 0 auto 0 0;
            }
        }

        .txt-wrap {
            @media (max-width: 767px) {
                width: 48%;
            }
        }

        .txt {
            text-align: right;

            @media (max-width: 767px) {
                text-align: left;

                &.ja {
                    margin-bottom: 15px;
                }
            }
        }
    }

    .inner .text-box {
        padding: 0 182px 0 130px;

        @media (max-width: 1500px) {
            padding: 0 80px;
        }

        @media (max-width: 767px) {
            order: 1;
            width: 100vw;
            padding: 0;
        }

        .sectionTitle {
            @media (max-width: 767px) {
                display: block;
                text-align: center;
            }
        }

        .tagLine {
            margin-top: 60px;

            @media (max-width: 767px) {
                margin: 55px auto 0;
                width: fit-content;
                font-size: 21px;
            }

            .is_1400 {
                display: none;

                @media (min-width: 768px) and (max-width: 1400px) {
                    display: block;
                }
            }
        }

        .btn01 {
            margin-top: 70px;

            @media (max-width: 767px) {
                margin: 65px auto 0;
            }
        }
    }

    .inner .menuImg02-wrap {
        width: 30.26vw;

        @media (max-width: 767px) {
            order: 2;
            width: 89.23vw;
            margin: 106px auto 0;
        }

        .menuImg02 {
            border-radius: 50px;

            @media (max-width: 767px) {
                border-radius: 30px;
            }
        }
    }
}


/*  TOP Instagram
==========================================================*/
#instagram-section {
    padding: 237px 0;

    @media (max-width: 767px) {
        padding: 0 0 254px;
    }

    .sectionTitle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        font-family: var(--font-en-gothic03);
        font-size: 31px;
        font-weight: 400;
        padding-bottom: 40px;

        @media (max-width: 767px) {
            padding-bottom: 30px;
        }

        .icon {
            width: 27px;
            height: 27px;
            fill: var(--color-design02);
        }
    }

    .inner {
        width: 578px;
        margin: 0 auto;

        @media (max-width: 767px) {
            width: 73.589vw;
        }

        .ig-wrap {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;

            @media (max-width: 767px) {
                display: block;
            }

            .ig-post {
                aspect-ratio: 280 / 374;

                a {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .ig-id {
            font-family: var(--font-en-gothic01);
            font-size: 18px;
            margin-top: 20px;

            @media (max-width: 767px) {
                font-size: 13px;
            }
        }
    }
}

/*  TOP outSide
==========================================================*/
#outSide {
    position: relative;

    >.img {
        position: absolute;
        z-index: 2;
    }

    .wood-grain01 {
        top: -238px;
        left: -190px;
        width: 28vw;

        @media (max-width: 1400px) {
            top: -170px;
            left: -80px;
        }

        @media (max-width: 767px) {
            top: 50px;
            left: -67px;
            width: 224px;
        }
    }

    .wood-grain02 {
        top: -145px;
        right: 70px;
        width: 14.58vw;

        @media (max-width: 767px) {
            top: -8px;
            right: 1px;
            width: 121px;
        }
    }

    .shop-name01 {
        top: -62px;
        left: 50%;
        transform: translateX(-50%);
        width: 430px;

        @media (max-width: 767px) {
            top: -43px;
            width: 212px;
        }
    }

    .shop-name02 {
        bottom: -38px;
        left: 50%;
        transform: translateX(-50%);
        width: 82.8vw;

        @media (max-width: 767px) {
            width: 97vw;
            bottom: -5px;
        }
    }

    .outSide-img {
        width: 100vw;
        position: relative;
        aspect-ratio: 1920 / 898;

        @media (max-width: 767px) {
            aspect-ratio: 390 / 710;
        }

        .img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;

            &.img01 {
                animation: fade01 10s infinite;
            }

            &.img02 {
                animation: fade02 10s infinite;
            }
        }

        .txt {
            position: absolute;
            left: 9.375vw;
            bottom: 7.29vw;
            font-family: var(--font-en-mincho01);
            font-size: 13px;
            color: #fff;
            letter-spacing: 0.04em;
            line-height: 1.615em;

            @media (max-width: 767px) {
                left: 20px;
                bottom: 95px;
                font-size: 9px;
            }
        }
    }
}

@keyframes fade01 {

    0%,
    40% {
        opacity: 1;
    }

    52%,
    92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade02 {

    0%,
    40% {
        opacity: 0;
    }

    52%,
    92% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*  TOP Service
==========================================================*/
#servise-section {
    padding: 188px 0 0;
    position: relative;
    overflow: hidden;

    @media (max-width: 767px) {
        padding: 70px 0 220px 0;
    }

    .wood-grain03 {
        position: absolute;
        top: -32px;
        right: -84px;
        width: 610px;
        z-index: -1;

        @media (max-width: 767px) {
            top: auto;
            right: -16px;
            bottom: 0;
            width: 205px;
        }
    }

    .sectionTitle {
        text-align: center;
    }

    .inner {
        width: min(85%, 1426px);
        margin: 0 auto;
        padding-top: 52px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 66px;

        @media (max-width: 1400px) {
            gap: 30px;
        }

        @media (max-width: 767px) {
            gap: 0;
            width: 100%;
            padding-top: 35px;
        }
    }

    .inner .service-content {
        width: calc(100% / 3);
        flex-shrink: 1;

        @media (max-width: 767px) {
            width: 80% !important;
            flex-shrink: 0;
        }

        .img {
            border-radius: 130px;
            outline: 2px solid #656464;
            outline-offset: -1px;

            @media (max-width: 1400px) {
                border-radius: 100px;
            }

            @media (max-width: 767px) {
                border-radius: 90px;
            }
        }

        .txt {
            width: fit-content;
            margin: 60px auto 0;
            font-size: clamp(1rem, 0.5rem + 0.83vw, 1.5rem);
            color: var(--color-main);
            line-height: 1.8em;
            text-align: center;
            padding-bottom: 10px;
            border-bottom: 2px solid color-mix(in sRGB, var(--color-main) 70%, white 30%);

            @media (max-width: 1400px) {
                margin-top: 30px;
            }

            @media (max-width: 767px) {
                font-size: 16px;
                white-space: nowrap;
                margin-top: 40px;
                padding-bottom: 2px;
                border-bottom: 1px solid color-mix(in sRGB, var(--color-main) 70%, white 30%);
            }
        }
    }

    .swiper-button-prev,
    .swiper-button-next {
        top: 40%;

        &::after {
            position: absolute;
            content: "";
            bottom: 0;
            top: 0;
            width: 15px;
            height: 15px;
            margin: auto;
            border-top: 3px solid var(--color-main);
            border-left: 3px solid var(--color-main);
        }
    }

    .swiper-button-prev {
        left: 10px;

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

    .swiper-button-next {
        right: 10px;

        &::after {
            transform: rotate(135deg);
        }
    }
}


/*  TOP AboutUs
==========================================================*/
#aboutUs-section {
    padding: 264px 0 190px;
    position: relative;

    @media (max-width: 767px) {
        padding: 0 0 163px;
    }

    .wood-grain04 {
        position: absolute;
        bottom: 8.5vw;
        right: -38px;
        width: 188px;

        @media (max-width: 767px) {
            right: 0;
        }
    }

    .sectionTitle {
        position: absolute;
        top: 13.75vw;
        left: 10vw;
        transform: rotate(90deg);
        transform-origin: left top;
        line-height: 1;

        @media (max-width: 767px) {
            top: 0;
            left: -2px;
            transform-origin: left bottom;
        }

        .ja {
            margin-left: 60px;
        }
    }

    .inner {
        width: min(65%, 785px);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        @media (max-width: 1400px) {}

        @media (max-width: 767px) {
            flex-direction: column;
            gap: 70px;
        }
    }

    .inner .about__Link {
        padding: 225px 0 120px;
        font-size: 21px;
        color: #b7b5b4;
        position: relative;
        transition: color .3s;

        &::before {
            position: absolute;
            content: "";
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 108px;
            height: 100%;
            /* background-color: #fff; */
            background-image: url(../img/assets/wine.svg);
            background-repeat: no-repeat;
            background-size: contain;
            /* mask-image: url(../img/assets/wine.svg); */
            mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
            /* -webkit-mask-image: url(../img/assets/wine.svg); */
            -webkit-mask-position: center;
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            transition: background-color .3s;
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7497%) hue-rotate(146deg) brightness(110%) contrast(93%);
        }

        @media (max-width: 767px) {
            padding: 198px 0 107px;
            transition: color .5s;

            &::before {
                width: 70px;
                transition: background-color .5s;
            }

            &.origin::before,
            &.commit::before {
                filter: brightness(0) saturate(100%) invert(47%) sepia(45%) saturate(5228%) hue-rotate(348deg) brightness(96%) contrast(40%);
            }
        }

        @media (max-width: 360px) {
            padding: 188px 0 97px;
        }

        .btn {
            display: block;
            margin: 15px auto 0;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #fff;
            position: relative;

            &:before {
                position: absolute;
                content: '';
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 5px 0 5px 10px;
                border-color: transparent transparent transparent #b7b5b4;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: border-color .3s;
            }

            @media (max-width: 767px) {
                width: 22px;
                height: 22px;

                &::before {
                    border-width: 4px 0 4px 8px;
                    margin-left: 1px;
                    transition: border-color .5s;
                }
            }
        }

        @media (min-width: 768px) {
            &:hover {
                opacity: 1;
                color: var(--color-design01);
                transition: color .1s;

                &::before {
                    /* background-color: var(--color-main); */
                    transition: background-color .1s;
                    filter: brightness(0) saturate(100%) invert(47%) sepia(45%) saturate(5228%) hue-rotate(348deg) brightness(96%) contrast(98%);
                }

                .btn::before {
                    border-color: transparent transparent transparent var(--color-design01);
                    transition: border-color .1s;
                }
            }
        }

        &.is-active {
            opacity: 1;
            color: var(--color-design01);

            .btn::before {
                border-color: transparent transparent transparent var(--color-design01);
            }

            &::before {
                background-color: var(--color-main);
            }
        }
    }
}


/*========================================================
    info-page
==========================================================*/
#biz-hours {
    position: relative;
    padding-right: 81px;
    margin: 180px 0 110px 13vw;

    @media (max-width: 767px) {
        width: 90vw;
        margin: 0 auto;
        padding: 37px 0 111px;
        display: flex;
        flex-direction: column;
    }

    .shop-name {
        position: absolute;
        top: 4vw;
        left: 0;
        z-index: 2;

        @media (max-width: 1500px) {
            top: 2vw;
        }

        @media (max-width: 767px) {
            position: static;
            order: 2;
            padding: 60px 0 45px 16px;
        }

        .shop-name01 {
            width: 14vw;

            @media (max-width: 767px) {
                width: 28.974vw;
                filter: brightness(0) saturate(100%) invert(0%) sepia(8%) saturate(7469%) hue-rotate(300deg) brightness(103%) contrast(110%);
            }
        }

        .shop-name02 {
            width: 38vw;
            margin-top: 25px;

            @media (max-width: 767px) {
                width: 78vw;
                margin-top: 16px;
                filter: brightness(0) saturate(100%) invert(0%) sepia(8%) saturate(7469%) hue-rotate(300deg) brightness(103%) contrast(110%);
            }
        }
    }
}

#biz-hours .inner {
    width: 68%;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    @media (max-width: 767px) {
        width: 100%;
    }

    .img-wrap {
        width: 71%;

        @media (max-width: 767px) {
            width: 100%;
            order: 1;
        }

        .swiper-slide {
            display: flex;
            align-items: flex-end;

            @media (max-width: 767px) {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        .img {
            height: 600px;
            border-radius: 50px;

            @media (max-width: 767px) {
                border-radius: 18px;
                height: auto;
            }
        }

        .text-box {
            width: 29%;
            margin-left: 20px;

            @media (max-width: 767px) {
                margin-left: 0;
                margin-top: 20px;
            }

            .txt {
                color: var(--color-design02);

                @media (max-width: 767px) {
                    font-size: 12px;
                }
            }
        }
    }
}

#floor-map {
    margin-bottom: 75px;

    @media (max-width: 767px) {
        position: relative;

        &::after {
            position: absolute;
            content: "";
            top: -90px;
            left: 44px;
            width: 33px;
            height: 140px;
            background-image: url(../img/assets/line03.svg);
            background-position: top left;
            background-size: contain;
            background-repeat: no-repeat;
        }
    }

    .inner {
        display: flex;
        align-items: center;

        @media (max-width: 767px) {
            display: block;
        }

        .img-wrap {
            width: 35%;
            aspect-ratio: 686 / 837;
            position: relative;

            @media (max-width: 767px) {
                width: 100%;
            }

            .img {
                position: absolute;
                inset: 0;
                border-radius: 0 0 195px 0;
                opacity: 0;

                @media (max-width: 767px) {
                    width: 100%;
                    height: 100vh;
                    height: 100svh;
                    position: relative;
                    border-radius: 0;
                    opacity: 1;

                    &+& {
                        margin-top: -1px;
                    }

                    .floor-title {
                        position: absolute;
                        top: 53px;
                        right: 26px;
                        writing-mode: vertical-rl;
                        font-size: 34px;
                        color: #fff;
                        letter-spacing: 0.1em;

                        .en {
                            font-size: 22px;
                            padding-top: 1em;
                            letter-spacing: 0.1em;
                        }
                    }
                }
            }
        }

        .seat-info {
            width: 65%;

            @media (max-width: 767px) {
                width: 100%;
            }

            .floor {
                width: 51%;
                margin: 0 auto;
                position: relative;

                @media (max-width: 767px) {
                    padding-top: 90px;
                    width: 88.2vw;
                }

                .pin {
                    position: absolute;
                    width: 6.25vw;
                    height: 6.25vw;
                    border-radius: 50%;
                    background-color: rgba(227, 96, 52, 0.3);
                    transition: all .8s ease;
                }
            }

            .floor01 .pin {
                top: 42.688%;
                right: 22.79%;
            }

            .floor02 .pin {
                top: 35.377%;
                right: -2.48%;
            }

            .floor03 .pin {
                top: -4.716%;
                right: 10px;
            }
        }

        .seat-info .text-box {
            padding-left: 164px;
            width: fit-content;

            @media (max-width: 767px) {
                padding: 80px 0 0 0;
                width: 88vw;
                margin: 0 auto;
            }

            .headLine {
                font-size: 21px;
                margin-bottom: 30px;
                display: flex;
                gap: 1em;

                @media (max-width: 767px) {
                    font-size: 17px;
                    text-align: center;
                    display: block;

                    .sub {
                        font-size: 21px;
                        display: block;
                        margin-top: 30px;
                        padding-bottom: 8px;
                        border-bottom: 1px solid #302825;
                    }
                }
            }

            .item+.item {
                margin-top: 16px;
            }

            .item {
                @media (max-width: 767px) {
                    width: 178px;
                    margin: 0 auto;
                }
            }

            .item dt {
                width: 30%;
                font-size: 18px;

                &::before {
                    content: '・';
                }

                @media (max-width: 767px) {
                    width: 80%;
                }
            }

            .item dd {
                width: 70%;
                font-size: 18px;

                @media (max-width: 767px) {
                    width: 20%;
                    text-align: right;
                }
            }

            .note {
                margin-top: 52px;
                font-size: 14px;
                line-height: 1.928em;
                color: var(--color-main);
                border-bottom: 1px solid var(--color-main);

                @media (max-width: 767px) {
                    text-align: center;
                    margin-top: 50px;
                    border-bottom: none;
                }

                .is_1500 {
                    display: none;

                    @media (max-width: 1500px) {
                        display: block;
                    }
                }

                span {
                    @media (max-width: 767px) {
                        line-height: 2.3em;
                        border-bottom: 1px solid var(--color-main);
                        padding-bottom: 3px;
                    }
                }
            }
        }
    }
}


#floor-map .img-wrap {
    position: relative;

    .img {
        position: absolute;
        transition: opacity .8s ease;
    }

    .img.is-active {
        opacity: 1;
    }

}

.img.lamp {
    width: 450px;
    border-radius: 50px;
    margin: 0 178px 0 auto;

    @media (max-width: 767px) {
        width: 275px;
        border-radius: 27px;
        margin-right: 20px;
    }
}

#g-map {
    padding: 110px 0 226px;

    @media (max-width: 767px) {
        padding: 106px 0 78px;
    }

    .shop-name {
        font-size: 21px;
        text-align: center;

        .sub {
            display: block;
            font-size: 16px;
        }
    }

    .add {
        padding: 41px 0 26px;
        font-size: 16px;
        line-height: 1.6875em;
        text-align: center;
    }

    .tel {
        font-size: 16px;
        text-align: center;
    }

    .ig {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        padding-left: 5px;
        font-size: 16px;

        .icon {
            display: inline-block;
            width: 20px;
            height: 15px;

            img {
                object-fit: contain;
            }
        }
    }

    .g-map-wrap {
        width: min(85%, 1545px);
        height: 616px;
        margin-top: 57px;
        margin-inline: auto;

        @media (max-width: 767px) {
            width: 100%;
            margin: 78px auto 0;
            height: 455px;
        }
    }
}

#faq {
    padding-bottom: 348px;

    @media (max-width: 767px) {
        padding-bottom: 144px;
    }

    .sectionTitle {
        text-align: center;
    }

    .inner {
        width: min(85%, 888px);
        margin: 78px auto 0;
        border-top: 1px solid #c5c4c4;

        .faq__item {
            border-bottom: 1px solid #c5c4c4;
        }

        .faq__item .faq__q {
            padding: 36px 54px 36px 28px;
            display: flex;
            gap: 9px;
            cursor: pointer;
            font-size: 18px;
            font-weight: 400;
            line-height: 1.723em;
            position: relative;

            &::before {
                content: "Q.";
                font-family: var(--font-en-gothic03);
                font-weight: 300;
                font-size: 28px;
                margin-top: -5px;
            }

            @media (max-width: 767px) {
                font-size: 14px;
                padding: 24px 33px 24px 14px;
                gap: 5px;

                &::before {
                    font-size: 19px;
                    margin-top: -4px;
                }
            }
        }

        .faq__toggle {
            position: absolute;
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            width: 19px;
            height: 19px;

            &::before,
            &::after {
                position: absolute;
                content: "";
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 19px;
                height: 3px;
                background-color: var(--color-main);
                transition: transform 0.5s ease;
            }

            &::after {
                transform: translate(-50%, -50%) rotate(-90deg);
            }

            @media (max-width: 767px) {
                right: 9px;
            }
        }

        .faq__q.active .faq__toggle::after {
            transform: translate(-50%, -50%)
        }

        .faq__item .faq__a {
            display: none;
            padding: 30px 50px;
            border-radius: 20px;
            background-color: rgba(255, 255, 255, .5);
            margin-inline: 14px;
            margin-bottom: 25px;
            font-family: var(--font-ja-gothic01);
            font-size: 15px;
            font-weight: 300;
            line-height: 1.785em;
            text-align: justify;

            @media (max-width: 767px) {
                padding: 20px 25px;
                margin-inline: 0px;
            }

            .map-link {
                width: 200px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #d5d2c3;
                border-radius: 100vh;
                margin-top: 20px;
                font-weight: 300;
            }
        }
    }
}


/*========================================================
    メニュー
==========================================================*/
#month-menu {
    padding: 334px 0 265px;

    @media (max-width: 767px) {
        padding: 70px 0 85px;
    }

    .title {
        font-size: 21px;
        text-align: center;

        @media (max-width: 767px) {
            font-size: 18px;
        }
    }

    .inner {
        padding-top: 65px;
        width: min(65%, 1156px);
        margin: 0 auto;

        @media (max-width: 767px) {
            padding-top: 20px;
        }
    }
}

.sectionTitle.small {
    font-size: 47px;
    display: flex;
    align-items: center;

    @media (max-width: 767px) {
        flex-direction: column;
    }

    .ja {
        font-size: 14px;
        margin-left: 1.2em;
        margin-top: 10px;

        @media (max-width: 767px) {
            margin: 0;
        }
    }
}

#lunch-menu .inner,
#dinner-menu .inner {
    width: min(85%, 1400px);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;

    @media (max-width: 767px) {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .text-box {
        width: 35%;

        @media (max-width: 767px) {
            width: 100%;
            margin: 0 auto;
        }

        .txt {
            width: 80%;
            margin-top: 56px;
            margin-bottom: 76px;
            font-size: 17px;
            line-height: 2.2em;

            @media (max-width: 767px) {
                width: 85%;
                margin: 45px auto 50px;
                font-size: 16px;
            }
        }

        .item {
            display: flex;

            @media (max-width: 767px) {
                padding-left: 25px;
            }

            dt {
                width: 25%;
                font-size: 17px;

                @media (max-width: 767px) {
                    width: 25%;
                }
            }

            dd {
                width: 75%;
                font-size: 15px;
                line-height: 2em;

                @media (max-width: 767px) {
                    width: 75%;

                    .row {
                        display: block;
                        margin-top: 5px;
                    }
                }
            }

            .note {
                display: block;
                font-size: 14px;
                line-height: 1em;

                @media (max-width: 767px) {
                    margin-top: -5px;
                }
            }
        }
    }

    .menu-contents {
        width: 65%;

        @media (max-width: 767px) {
            width: 100%;
        }
    }
}

#lunch-menu {
    padding: 265px 0 300px;

    @media (max-width: 767px) {
        padding: 0 0 165px;
    }

    .inner {
        @media (max-width: 767px) {
            flex-direction: column-reverse;
            gap: 40px;
        }

        .img {
            width: 88%;
            margin: 0 auto;
            border-radius: 50px;

            @media (max-width: 767px) {
                width: 85%;
                margin: 0 auto 0 0;
                border-radius: 0 20px 20px 0;
            }
        }
    }
}

.food-img.is_sp {
    width: 76%;
    margin: 0 0 0 auto;
    border-radius: 20px 0 0 20px;
}

#dinner-menu {
    padding: 100px 0 470px;

    @media (max-width: 767px) {
        padding: 40px 0 127px;
    }

    .inner {
        gap: 76px;
    }

    .inner .text-box {
        position: sticky;
        top: 200px;

        @media (max-width: 767px) {
            position: static;
        }
    }

    .inner .menu-contents>.txt {
        text-align: center;
        font-size: 17px;
        padding-bottom: 60px;

        @media (max-width: 767px) {
            font-size: 15px;
            padding-bottom: 17px;
        }
    }

    .inner .dinner__gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 102px 110px;

        @media (max-width: 767px) {
            width: 92%;
            margin: 0 auto;
            gap: 40px 20px;
        }

        @media (max-width: 360px) {
            gap: 30px 10px;
        }

        .menu__item {
            .img {
                border-radius: 20px;

                @media (max-width: 767px) {
                    border-radius: 8.5px;
                }
            }

            .menu__name {
                margin-top: 20px;
                font-size: 19px;

                @media (max-width: 767px) {
                    margin-top: 8px;
                    font-size: 12px;

                    &.scale {
                        transform: scaleX(0.8);
                        transform-origin: top left;
                        width: 125%;
                    }
                }
            }

            .txt {
                font-size: 14px;

                @media (max-width: 767px) {
                    font-size: 10px;
                }
            }
        }
    }
}

#wine {
    position: relative;
    aspect-ratio: 2 / 1;
    background-image: url(../img/menu/jpg_png/wine__Bg.jpg);
    background-image: url(../img/menu/wine__Bg.webp);
    background-position: center;
    background-size: cover;

    @media (max-width: 767px) {
        background-image: url(../img/menu/jpg_png/wine__Bg_sp.jpg);
        background-image: url(../img/menu/wine__Bg_sp.webp);
        aspect-ratio: 1 / 2;
    }

    .text-box {
        position: absolute;
        top: 50%;
        left: 14.0625vw;
        transform: translateY(-50%);
        width: 630px;

        @media (max-width: 767px) {
            top: 140px;
            left: 50%;
            transform: translateX(-50%);
            width: 72%;
        }

        .sectionTitle {
            color: #fff;

            @media (max-width: 767px) {
                flex-direction: row;
                align-items: flex-end;

                .ja {
                    padding-left: 13px;
                    padding-bottom: 12px;
                }
            }
        }

        .txt {
            margin-top: 110px;
            font-size: 17px;
            color: #fff;
            line-height: 2.352em;

            @media (max-width: 767px) {
                margin-top: 50px;
                font-size: 14px;
            }
        }
    }
}


/*========================================================
    私たちについて
==========================================================*/
.sectionTitle.sub {
    color: var(--color-design01);
    text-align: center;
    font-size: 21px;
    padding-bottom: 12px;
    display: flex;
    justify-content: center;
    position: relative;

    &::after {
        position: absolute;
        content: "";
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 24px;
        height: 1px;
        background-color: var(--color-design01);
    }

    @media (max-width: 767px) {
        font-size: 16px;

        &::after {
            width: 32px;
        }
    }
}

.subPage__top.about {
    @media (min-width: 768px) {
        padding-bottom: 180px;
    }
}

#origin {
    padding: 100px 0 186px;

    @media (max-width: 767px) {
        padding: 46px 0 68px;
    }

    .sectionTitle {
        transform: translate(40px, -50px);

        @media (max-width: 767px) {
            transform: none;
            margin-top: 45px;
        }
    }

    .block {
        display: flex;
        align-items: center;
        padding-left: 14.0625vw;
        padding-right: 155px;
        overflow: hidden;

        @media (max-width: 1500px) {
            padding-left: 70px;
            padding-right: 50px;
        }

        @media (max-width: 767px) {
            padding: 0;
            margin: 0 auto;
            flex-direction: column;
        }

        .img {
            border-radius: 50px;

            @media (max-width: 767px) {
                border-radius: 18px;
            }
        }
    }

    .block01 {
        .img {
            width: 53%;

            @media (max-width: 767px) {
                width: 90%;
                margin: 0 auto;
            }
        }

        .text-box {
            width: 47%;
            margin-top: 65px;
        }
    }

    .block02 {
        margin-top: 70px;

        @media (max-width: 767px) {
            margin-top: 45px;
        }

        .text-box {
            width: 61%;

            @media (max-width: 767px) {
                width: 85%;
            }

            .txt {
                width: max(380px, 26.208vw);
                margin: 0 auto;
                font-size: 16px;
                line-height: 2.5;
                letter-spacing: 0;

                @media (max-width: 767px) {
                    width: 100%;
                    font-size: 14px;
                }
            }
        }

        .img {
            width: 35%;

            @media (max-width: 767px) {
                width: 78%;
                margin: 80px -16px 0 auto;
            }
        }
    }

    .sign {
        width: 374px;
        margin: 65px auto 0 9.73vw;
        position: relative;

        &::after {
            position: absolute;
            content: "";
            top: 26px;
            right: -102px;
            width: 126px;
            height: 77px;
            background: url(../img/assets/line02.svg);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: left top;
        }

        @media (max-width: 767px) {
            width: 50vw;
            margin: 40px auto 0 7.6vw;

            &::after {
                width: 66px;
                top: 14px;
                right: -54px;
            }
        }

        .img {
            border-radius: 40px;

            @media (max-width: 767px) {
                border-radius: 20px;
            }
        }
    }
}

#commit {
    position: relative;

    @media (max-width: 767px) {
        padding: 68px 0 180px;
        overflow: hidden;
    }

    .inner {
        width: min(90%, 1410px);
        margin: 110px auto 0;

        @media (max-width: 767px) {
            width: 83vw;
            margin: 76px auto 0;
        }
    }

    .content {
        width: 100%;
        min-height: 730px;
        height: calc(100vh - 145px - 30px);
        position: sticky;
        top: 160px;
        z-index: 2;

        &+& {
            margin-top: 500px;

            @media (max-width: 767px) {
                margin-top: 75px;
            }
        }

        @media (min-width: 768px) {
            &:nth-last-of-type(2n) .inr {
                flex-direction: row-reverse;
            }
        }

        @media (max-width: 767px) {
            height: auto;
            position: static;
        }

        .inr {
            display: flex;
            height: 100%;
            align-items: stretch;
            background-color: #fff;
            position: relative;

            &::before,
            &::after {
                position: absolute;
                content: "";
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }

            @media (max-width: 767px) {
                flex-direction: column-reverse;
            }
        }

        .-mask {
            width: 50%;

            mask-image: linear-gradient(-25deg, transparent, transparent 41.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
            mask-size: 100% max(300%, 100vh);
            mask-position: center 100%;
            mask-repeat: none;
            transform: translateZ(0);
            transition: mask-position 1s linear;

            @media (min-width: 768px) {
                transition: mask-position 1.4s linear;
            }

            @media (max-width: 767px) {
                width: 100%;
            }

            &.on {
                mask-position: center 0;
            }
        }

        .text-box {
            padding: 7.29vw 8.33vw 0 7.968vw;

            @media (max-width: 767px) {
                width: 100%;
                aspect-ratio: auto;
                padding: 45px 30px 45px;
            }

            .num {
                font-size: 17px;
                position: relative;
                padding-bottom: 5px;
                border-bottom: 1px solid #000;
            }

            .headline {
                font-size: clamp(1.125rem, 0.813rem + 0.52vw, 1.438rem);
                line-height: 1.913em;
                letter-spacing: 0.1em;
                padding-top: 34px;
                color: var(--color-design01);

                @media (max-width: 767px) {
                    font-size: 17px;
                }
            }

            .txt {
                font-size: clamp(0.875rem, 0.75rem + 0.21vw, 1rem);
                letter-spacing: 0;
                line-height: 2.5;
                padding-top: 2vw;
                color: var(--color-design01);

                @media (max-width: 1500px) {
                    line-height: 1.75;
                }

                @media (max-width: 767px) {
                    font-size: 14px;
                    padding-top: 30px;
                }
            }
        }

        .img {
            width: 50%;

            @media (max-width: 767px) {
                width: 100%;
            }
        }
    }
}

#commit .wood-grain {
    position: absolute;
    z-index: 3;

    @media (max-width: 767px) {
        margin-top: 86px;
    }

    &.wood-grain01 {
        top: 40px;
        right: 158px;
        width: 14.6354vw;

        @media (max-width: 767px) {
            top: 371px;
            right: 0;
            width: 31vw;
        }
    }

    &.wood-grain02 {
        top: 34.63vw;
        left: -183px;
        width: 28.645vw;

        @media (max-width: 767px) {
            top: 1850px;
            left: -65px;
            width: min(57.4vw, 250px);
        }
    }

    &.wood-grain03 {
        top: 92.7vw;
        right: -203px;
        width: 31.77vw;

        @media (max-width: 767px) {
            top: auto;
            right: -30px;
            bottom: 0;
            width: min(43vw, 200px);
        }
    }

    &.wood-grain04 {
        bottom: 31.92vw;
        left: 435px;
        width: 10.625vw;
        transform: rotate(-90deg);

        @media (max-width: 1500px) {
            bottom: 44.92vw;
        }

        @media (max-width: 767px) {
            left: auto;
            right: 15px;
            bottom: 1562px;
            width: 27vw;
            transform: rotate(-120deg);
        }
    }
}

#profile {
    padding: 368px 0 310px;

    @media (max-width: 767px) {
        padding: 0 0 180px;
    }

    .sectionTitle {
        text-align: center;
        margin-left: 10px;

        @media (max-width: 767px) {
            margin: 0;
        }
    }

    .chef-wrap {
        .position {
            display: block;
            font-family: var(--font-en-mincho01);
            font-size: 14px;
            color: var(--color-design01);
            text-align: center;
        }

        .name {
            font-size: 31px;
            color: var(--color-design01);
            letter-spacing: 0.1em;
            text-align: center;

            @media (max-width: 767px) {
                font-size: 30px;
            }
        }
    }

    .inner {
        padding-top: 60px;
        width: min(80%, 1005px);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        @media (max-width: 1500px) {
            align-items: center;
        }

        @media (max-width: 767px) {
            padding-top: 58px;
            width: 83vw;
            flex-direction: column-reverse;
        }

        .text-box {
            width: 48%;

            @media (max-width: 767px) {
                width: 100%;
                padding: 0;
                margin-top: 40px;
            }

            .txt {
                font-size: 15px;
                color: var(--color-design01);
                letter-spacing: 0;
                line-height: 2;

                @media (max-width: 767px) {
                    font-size: 14px;
                }
            }
        }

        .img {
            width: 42.9%;
            border-radius: 130px;
            border: 2px solid var(--color-design01);

            @media (max-width: 767px) {
                width: 77vw;
                border-radius: 90px;
            }
        }
    }
}


.copyright {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 5px 0;
    font-size: 10px;
}


/*========================================================
    パターン02
==========================================================*/
.footer02 {
    @media (max-width: 767px) {
        padding: 80px 0;
    }
}

#keyImg-contents.keyImg-contents02 {
    padding: 153px 0 125px;

    @media (max-width: 767px) {
        padding: 86px 0 0 0;
    }

    .block01 {
        align-items: flex-start;
        justify-content: left;

        .img01-wrap {
            width: 26.4vw;
            margin: 0;

            &::after {
                display: none;
            }

            @media (max-width: 1400px) {
                width: 28.4vw;
            }
            @media (max-width: 767px) {
                width: 82.051vw;
            }

            .img01 {
                border-radius: 0 50px 50px 0;

                @media (max-width: 767px) {
                    border-radius: 0 30px 30px 0;
                }
            }

            .txt {
                margin-left: 230px;

                @media (max-width: 1400px) {
                    margin-left: 0;
                }

                @media (max-width: 767px) {
                    margin-left: 20px;
                }
            }
        }

        .img02-wrap {
            width: 19.895vw;
            margin: 230px 0 0 72px;

            @media (max-width: 1400px) {
                width: 21.895vw;
                margin: 150px 0 0 42px;
            }
            @media (max-width: 767px) {
                width: 60vw;
                margin: 32px 0 0 auto;
                overflow: hidden;
            }

            .img02 {
                width: 100%;
                border-radius: 50px;

                @media (max-width: 767px) {
                    border-radius: 30px 0 0 30px;
                }
            }

            .txt {
                @media (max-width: 767px) {
                    white-space: nowrap;
                    margin-left: 20px;
                }
            }
        }

        .img03-wrap {
            width: 30vw;
            margin: 0 0 0 190px;

            @media (max-width: 1400px) {
                margin: 0 0 0 130px;
            }
            @media (max-width: 767px) {
                width: 100vw;
                margin: 84px 0 0 0;
            }

            .txt {
                @media (max-width: 767px) {
                    margin-left: 20px;
                }
            }
        }
    }

    .block02 {
        margin-top: 130px;
        justify-content: center;
        gap: 0;

        .img04-wrap {
            margin: 0;
            width: 41vw;

            @media (max-width: 767px) {
                width: 78.9vw;
                margin: 84px auto 0;
            }

            .txt {
                @media (max-width: 767px) {
                    margin-left: 20px;
                }
            }
        }

        .img05-wrap {
            margin: 382px 0 0 112px;
            width: 16.71vw;

            @media (max-width: 767px) {
                width: 42vw;
                margin: 94px 0 0 auto;
            }

            .img05 {
                aspect-ratio: 321 / 426;

                @media (max-width: 767px) {
                    aspect-ratio: auto;
                    border-radius: 30px 0 0 30px;
                }
            }
        }

        .img06-wrap {
            margin: 98px 0 0 30px;
            width: 15.1vw;

            @media (max-width: 767px) {
                width: 46vw;
                margin: -84px auto 0 0;
            }

            .img06 {
                @media (max-width: 767px) {
                    aspect-ratio: 321 / 426;
                    border-radius: 0 30px 30px 0;
                }
            }

            .txt {
                @media (max-width: 767px) {
                    margin-left: 10px;
                }
            }
        }
    }
}

#menu-section.menu-section02 {
    position: relative;

    &::before {
        position: absolute;
        content: "";
        top: 245px;
        right: -35px;
        background: url(../img/assets/wood-grain03.svg) no-repeat top right / contain;
        width: 23.958vw;
        aspect-ratio: 460 / 666;
    }

    @media (max-width: 767px) {
        padding-top: 174px;
        margin-top: -82px;
        overflow: hidden;

        &::before {
            top: 0;
            right: -16px;
            width: 31vw;
        }
    }

    .sectionTitle.is_sp {
        text-align: center;
        display: none;
    }

    .inner {
        justify-content: center;
        display: none;

        @media (max-width: 767px) {
            flex-direction: column;
            align-items: center;
            margin-top: 26px;
        }

        .menuImg01-wrap {
            width: 24vw;
            position: relative;
            margin: 0;

            &::after {
                position: absolute;
                content: "";
                bottom: -55px;
                left: 71px;
                background: url(../img/assets/line02.svg) no-repeat top left / contain;
                width: 126px;
                height: 77px;
            }

            @media (max-width: 767px) {
                width: 82vw;
                margin: 0 auto;
                order: 1;
                display: block;

                &::after {
                    bottom: -45px;
                    left: 30px;
                    width: 103px;
                    height: 63px;
                }
            }

            .menuImg01 {
                border-radius: 50px;

                @media (max-width: 767px) {
                    border-radius: 30px;
                    margin: 0;
                    width: 100%;
                }
            }
        }

        .text-box {
            padding: 0 0 0 117px;

            @media (max-width: 767px) {
                order: 2;
                padding: 0;
                margin-top: 86px;
            }

            .tagLine {
                margin-top: 40px;

                @media (max-width: 767px) {
                    margin: 0 auto;
                }
            }

            .btn01 {
                margin-top: 40px;

                @media (max-width: 360px) {
                    padding: 0 14px 0 16px;
                }
            }
        }
    }
}

#aboutUs-section.aboutUs-section02 {
    padding: 137px 0 200px;

    @media (max-width: 767px) {
        padding: 0 0 130px;
    }

    .sectionTitle {
        @media (max-width: 767px) {
            position: static;
            transform: none;
            display: block;
            width: 79.4vw;
            margin: 0 auto;

            .ja {
                margin: 10px 0 0 0;
            }
        }
    }

    .inner {
        @media (max-width: 767px) {
            width: 79.4vw;
            margin: 60px auto 0;
            flex-direction: row;
            gap: 0;

            .about__Link {
                padding: 135px 0 68px;
                font-size: 14px;
                white-space: nowrap;
                color: var(--color-design01);

                .btn {
                    margin-top: 8px;
                    width: 15px;
                    height: 15px;

                    &::before {
                        border-width: 3.5px 0 3.5px 6px;
                        border-color: transparent transparent transparent var(--color-design01);
                    }
                }
            }

            .commit {
                order: 1;
            }

            .month {
                order: 2;
                margin-left: 30px;
            }

            .origin {
                order: 3;
                margin-left: 33px;
            }

        }

        @media (max-width: 360px) {
            width: 90.4vw;
        }
    }
}

#instagram-section.instagram-section02 {
    padding: 240px 0 200px;
    display: none;

    @media (max-width: 767px) {
        padding: 0 0 200px;
    }
}

#month-menu.month02 {
    .inner {
        width: min(90%, 1600px);
        display: flex;
        gap: 60px;

        @media (max-width: 767px) {
            flex-direction: column;
            gap: 30px;
            width: 65%;
        }

        .menu-img {
            position: relative;
            width: 50%;

            @media (max-width: 767px) {
                width: 100%;
            }

            .zoom {
                bottom: 5px;
                right: 5px;
                position: absolute;
                width: 20px;
                pointer-events: none;
            }

            .img {
                aspect-ratio: 850 / 655;
                cursor: zoom-in;

                img {
                    object-fit: contain;
                }

                iframe {
                    display: block;
                    width: 100%;
                    height: 100%;
                    border: none;
                }
            }
        }

        .title {
            margin-bottom: 20px;

            @media (max-width: 767px) {
                margin-bottom: 10px;
            }
        }
    }

    .note {
        margin-top: 40px;
        text-align: center;
        color: var(--color-design01);

        @media (max-width: 767px) {
            font-size: 12px;
        }
    }
}

#dinner-menu.dinner02 {
    padding: 0 0 300px;

    @media (max-width: 767px) {
        padding: 0 0 165px;
    }
}

#lunch-menu.lunch02 {
    padding: 100px 0 470px;

    @media (max-width: 767px) {
        padding: 40px 0 127px;
    }
}

.food-img.food02 {
    display: none;
}

.image-preview {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transition: .3s;

    .zoomout {
        display: block;
        width: 20px;
        margin-top: 20px;
        pointer-events: none;
    }
}

.image-preview.is-active {
    opacity: 1;
    visibility: visible;
    cursor: zoom-out;
}

.image-preview img {
    width: auto;
    max-height: 95%;
    object-fit: contain;
    cursor: zoom-out;

    @media (max-width: 767px) {
        max-width: 100%;
        height: auto;
    }
}

#biz-hours.biz02 {
    padding: 0;
    margin: 150px auto 110px;

    @media (max-width: 767px) {
        margin: 80px auto 160px;
    }

    .inner {
        /* justify-content: center; */
    }

    .swiper-slide .text-box {
        @media (max-width: 767px) {
            width: 100%;
        }
    }

    p.txt {
        white-space: wrap;
    }
}


/*========================================================
    インスタ
==========================================================*/
#instagram {
    padding-top: 130px;

    @media (max-width: 767px) {
        padding-top: 60px;
        padding-bottom: 50px;
    }

    .inner {
        width: 500px;
        margin: 0 auto;

        @media (max-width: 767px) {
            width: min(80%, 500px);
        }

        iframe {
            width: 100%;
        }
    }
}



/*========================================================
    お知らせ
==========================================================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');

:root {
    --font-ja-gothic02: "FOT-ロダン Pro DB", "Noto Sans JP", sans-serif;
}

#news__info {
    padding: 130px 0;

    .sectionTitle {
        text-align: center;
        margin-bottom: 60px;
    }

    .inner {
        width: min(90%, 1100px);
        margin: 0 auto;
        display: flex;
        justify-content: center;
        gap: 50px;

        @media (max-width: 1400px) {
            gap: 20px;
        }
        @media (max-width: 767px) {
            flex-direction: column;
        }

        .news__item {
            width: calc(100% / 3);
            padding: 30px 20px;
            background-color: #fff;
            position: relative;
            z-index: 2;

            &::before {
                display: block;
                content: "";
                position: absolute;
                top: -2px;
                left: -2px;
                box-sizing: border-box;
                border-color: var(--color-main);
                background-image: repeating-linear-gradient(90deg, var(--color-main), var(--color-main) 15px, transparent 15px, transparent 30px),
                    repeating-linear-gradient(180deg, var(--color-main), var(--color-main) 15px, transparent 15px, transparent 30px),
                    repeating-linear-gradient(90deg, var(--color-main), var(--color-main) 15px, transparent 15px, transparent 30px),
                    repeating-linear-gradient(180deg, var(--color-main), var(--color-main) 15px, transparent 15px, transparent 30px);
                background-position: left top, right top, left bottom, left top;
                background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
                background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
                width: calc(100% + 2px);
                height: calc(100% + 2px);
                opacity: 0;
                transition: .15s ease-out;
            }

            /* &::before {
                display: block;
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                box-sizing: border-box;
                border-color: var(--color-main);
                border-image: url(../img/assets/news__line.svg) 20 round;
                border-style: solid;
                border-width: 10px;
                width: 100%;
                height: 100%;
                opacity: 0;
                transition: .15s ease-out;
            } */
            &::after {
                position: absolute;
                content: "";
                top: 50px;
                left: -35px;
                width: 77px;
                height: 56px;
                background: url(../img/assets/line02.svg) no-repeat right center / contain;
                opacity: 0;
                transform: translateY(-12px);
                transition: .3s ease;
            }

            @media (max-width: 1400px) {
                padding: 20px 10px 15px;
            }
            @media (min-width: 768px) {
                &:hover {
                    opacity: 1;
    
                    .line {
                        opacity: 0;
                        transform: translateY(-6px);
                    }
    
                    &::before {
                        opacity: 1;
                    }
    
                    &::after {
                        opacity: 1;
                        transform: none;
                    }
                }
            }
            @media (max-width: 767px) {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 15px;
                padding: 10px;

                &::after {
                    top: 12px;
                    left: auto;
                    right: -10px;
                    width: 50px;
                    height: 30px;
                }
                &::before {
                    background-image: repeating-linear-gradient(90deg, var(--color-main), var(--color-main) 9px, transparent 9px, transparent 18px),
                        repeating-linear-gradient(180deg, var(--color-main), var(--color-main) 9px, transparent 9px, transparent 18px),
                        repeating-linear-gradient(90deg, var(--color-main), var(--color-main) 9px, transparent 9px, transparent 18px),
                        repeating-linear-gradient(180deg, var(--color-main), var(--color-main) 9px, transparent 9px, transparent 18px);
                    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
                }

                &.on {
                    opacity: 1;
    
                    .line {
                        opacity: 0;
                        transform: translateY(-6px);
                    }
    
                    &::before {
                        opacity: 1;
                    }
    
                    &::after {
                        opacity: 1;
                        transform: none;
                    }
                }
            }

            .line {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 6px;
                background-color: var(--color-main);
                transition: .15s ease-out;

                @media (max-width: 767px) {
                    display: none;
                }
            }
            .glass {
                position: absolute;
                bottom: 20px;
                right: -30px;
                width: 40px;
                transform: rotate(20deg);
                z-index: 1;
            }

            .img {
                aspect-ratio: 320 / 225;

                @media (max-width: 767px) {
                    width: 30%;
                    aspect-ratio: 1 / 0.8;
                }

                img {
                    height: 100%;
                }
            }
            .text-box {
                width: 98%;
                margin-inline: auto;
                margin-top: 24px;

                @media (max-width: 1400px) {
                    margin-top: 15px;
                    width: 90%;
                }
                @media (max-width: 767px) {
                    margin-top: 0;
                }

                .date {
                    font-family: var(--font-ja-gothic02);
                    font-size: 12px;
                    color: var(--color-main);

                    @media (max-width: 1400px) {
                        font-size: 10px;
                    }
                }
                .news__title {
                    font-family: var(--font-ja-gothic02);
                    font-size: 18px;
                    margin-top: 8px;
                    margin-bottom: 16px;

                    @media (max-width: 1400px) {
                        font-size: 16px;
                    }
                    @media (max-width: 767px) {
                        margin-top: 0;
                        margin-bottom: 0;
                        font-size: 14px;
                    }
                }
                .news__txt {
                    font-family: var(--font-ja-gothic02);
                    font-size: 14px;
                    color: #606060;
                    text-align: justify;

                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }
                .news__btn {
                    margin-top: 24px;
                    height: 50px;
                    border-top: 2px solid #c8c8c8;
                    border-bottom: 2px solid #c8c8c8;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;

                    &::after {
                        position: absolute;
                        content: "";
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%);
                        width: 37px;
                        height: 13px;
                        background: url(../img/assets/arrow03.svg) no-repeat center center / contain;
                    }

                    .txt {
                        font-family: var(--font-ja-gothic02);
                        font-size: 15px;
                    }
                }
            }
        }
    }
}

.news__single__container {
    padding-top: 300px;

    @media (max-width: 767px) {
        padding-top: 100px;
    }

    .sectionTitle {
        text-align: center;
        margin-bottom: 70px;
        color: var(--color-design01);
    }
}
#news__single {
    padding-bottom: 270px;

    @media (max-width: 767px) {
        padding-bottom: 200px;
    }

    .news__title-wrap {
        width: min(85%, 1178px);
        margin: 0 auto;
        padding: 0 0 20px 32px;
        border-bottom: 1px solid var(--color-design02);

        @media (max-width: 767px) {
            width: 90%;
            padding: 0 0 20px 20px;
        }

        .date {
            color: var(--color-main);
        }
        .news__title {
            font-size: 21px;
            color: #606060;
            letter-spacing: 0.12em;

            @media (max-width: 767px) {
                font-size: 18px;
            }
        }
    }

    .inner {
        width: min(80%, 1025px);
        margin: 0 auto;
        padding-top: 93px;

        @media (max-width: 767px) {
            padding-top: 65px;
            width: 85%;
        }

        .img {
            width: min(90%, 930px);
            margin: 0 auto 90px;

            @media (max-width: 767px) {
                margin: 0 auto 40px;
            }
        }
        .txt {
            color: #606060;
            font-size: clamp(1rem, 0.92rem + 0.33vw, 1.313rem);
            letter-spacing: 0.12em;
            line-height: 1.7;
        }
        
        .link-wrap {
            width: fit-content;
            border-bottom: 2px solid #658697;
            margin: 30px auto 0;

            .link {
                padding: 15px 10px 5px;
                font-weight: 600;
                font-size: 18px;
                color: var(--blue);

                /* &::after {
                    display: inline-block;
                    content: "";
                    width: 10px;
                    height: 10px;
                    background: url(../img/assets/arrow03.png) no-repeat center center / contain;
                    margin: 0 0 2px 14px;
                } */

                @media (max-width: 767px) {
                    font-size: 15px;
                }
            }
        }
    }

    .news__btn {
        margin-top: 240px;

        @media (max-width: 959px) {
            margin-top: 140px;
        }
        @media (max-width: 767px) {
            margin-top: 90px;
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 390px;
            height: 86px;
            border-top: 1px solid #606060;
            border-bottom: 1px solid #606060;
            font-size: 21px;
            margin: 0 auto;
            position: relative;

            &::after {
                position: absolute;
                content: "";
                top: 50%;
                right: 30px;
                transform: translateY(-50%);
                width: 48px;
                height: 48px;
                background: url(../img/assets/arrow03.svg) no-repeat center center / contain;
                transition: right .3s;
            }

            &:hover {
                opacity: 1;
                /* background-color: color-mix(in srgb, #fff, transparent 55%); */

                &::after {
                    right: 15px;
                    transition: right .15s;
                }
            }

            @media (max-width: 767px) {
                width: 200px;
                height: 60px;
                font-size: 16px;

                &::after {
                    right: 15px;
                    width: 25px;
                    height: 25px;
                }
            }
        }
    }
}