@charset "utf-8";
:root {
    --font-jp: 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    --col-wht: #fff;
    --col-blk: #000;
    --col-org: #eb613b;
    --col-blu: #0074bb;
    --content-inner: 90.67vw;
    --content-width: 1400;
    --content-side: min(4vw,20px);
}
body,p,td,th,ol,ul,h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}
ol,ul{
    list-style: none
}
button {
    all: unset;
}
img {
    width: 100%;
    vertical-align: middle;
}
a {
    border: 0;
    color: var(--col-blk);
    text-decoration: none;
}
html {
    font-size: medium;
    line-height: 1;
    font-family: var(--font-jp);
}
p {
    line-height: 1.75;
    font-size: min(3.47vw,14px);
    font-feature-settings: "palt";
}
.pc {
    display: none;
}
header {
    position: relative;
    z-index: 10;
    background-color: var(--col-wht);
}
header .logo_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(20px,5vw);
    padding: min(10px,2vw) var(--content-side);
    margin: 0 auto;
}
header .logo_wrap .savvy {
    width: min(74%,100px);
}
header .logo_wrap .meets {
    width: min(80%,110px);
}
header .logo_wrap .ggo {
    width: min(90%,120px);
}
header .logo_wrap p {
    font-size: min(4vw,18px);
}
#wrapper .layout {
    transition: background-image 0.6s ease-in-out;
    position: relative;
}
#wrapper .head {
    padding: min(90px,21vw) 0 min(80px,1vw);
}
#wrapper .head_inner {
    padding: 0 var(--content-side);
    max-width: 450px;
    margin: 0 auto;
}
#wrapper .head .titel_sub {
    padding: 0 0 min(2.67vw,10px);
}
#wrapper .head .lead {
    margin-top: min(6.67vw,20px);
}
#wrapper .head .lead p {
    text-align: center;
    color: var(--col-wht);
    font-weight: 800;
    font-size: min(4vw,16px);
}
#wrapper .head .lead p.credit {
    font-weight: normal;
    font-size: min(3.2vw,12px);
    padding-top: min(2vw,20px);
}
#wrapper .head .nav_content .hamburger_wrap {
    width: min(90px, 22vw);
    height: min(90px, 22vw);
    overflow: hidden;
    position: relative;
}
#wrapper .head .nav_content .hamburger {
    position: fixed;
    top: min(-1vw,-20px);
    right: min(-1vw,-20px);
    background: url(../images/bg-btn.svg) center center / contain no-repeat;
    z-index: 200;
    width: min(90px, 22vw);
    height: min(90px, 22vw);
    opacity: 0;
}
#wrapper .head .nav_content .hamburger span {
    display: block;
    width: 34%;
    height: min(0.8vw,3px); 
    background: var(--col-org);
    border-radius: 3px;
    margin: 0 auto;
    transition: background 0.3s ease;
    position: absolute;
    left: 45%;
    transform: translate(-50%, -50%);
}
#wrapper .head .nav_content .hamburger span.bar_01 { 
    top: 38%; 
}
#wrapper .head .nav_content .hamburger span.bar_02 { 
    top: 50%; 
}
#wrapper .head .nav_content .hamburger span.bar_03 { 
    bottom: 34%; 
}
#wrapper .head .nav_menu {
    position: fixed;
    top: 0;
    right: 0;
    background: url(../images/bg-nav-inner.jpg) center center / cover no-repeat;
    display: none;
    z-index: 10;
    width: calc( 100% - calc(min(60px,6vw) * 2 ));
    height: 40vh;
    padding: 0 min(60px,6vw);
    align-items: center;
    justify-content: center;
    gap: min(10px,3vw);
}
#wrapper .head .nav_menu .nav_illust {
    width: min(130px,30vw);
}
#wrapper .head .nav_inner .btn_img {
    width: min(260px,58vw);
    margin-left: min(30px,6vw);
}
#wrapper .head .nav_inner li {
    opacity: 0;
    transform: translateY(20px);
}
#wrapper .head .nav_inner li + li {
    margin-top: min(20px,4vw);
}
#wrapper .head .nav_inner .accent {
    height: min(34px,7vw);
    display: block;
    width: auto;
    padding-bottom: min(5px,2vw);
}
#wrapper .content {
    position: relative;
    z-index: 2;
}
#wrapper .content_wrap {
    position: relative;
    max-width: 450px;
    margin: 0 auto;
}
#wrapper .splide.morning {
    background-color: var(--col-org);
    padding: min(15vw,60px) 0 min(2vw,20px);
}
#wrapper .splide.dinner {
    background-color: var(--col-blu);
    padding: min(12vw,50px) 0 min(10vw,40px);
}
#wrapper .splide__slide img {
    height: auto;
    width: 100%;
}
#wrapper .splide.dinner .splide__slide img {
    border-radius: 5px;
}
#wrapper .content_inner {
    background-color: var(--col-wht);
    overflow: hidden;
}
#wrapper #morning .content_inner {
    padding: 0 var(--content-side) min(10vw,100px); 
}
#wrapper #dinner .content_inner {
    padding: min(20vw,70px) var(--content-side) min(4vw,60px);
}
#wrapper #morning .content_balloon {
    width: min(32.53vw,140px);
    margin-bottom: min(10vw,30px);
}
#wrapper #dinner .content_balloon {
    width: min(60.8vw,272px);
    margin-top: min(20vw,0px);
    margin-bottom: min(10vw,40px);
}
#wrapper .shop_name {
    position: relative;
    padding-bottom: min(5vw,30px);
    padding-left: min(3vw,20px);
    padding-top: min(2vw,10px);
    background: url(../images/line-vertical.png) left top / 0.5% repeat-y,
    url(../images/line-horizontal.png) left bottom / 60% repeat-x;
}
#wrapper .shop_name img {
    height: min(20px,5vw);
    width: auto;
}
#wrapper .shop_name.large img {
    height: min(28px,6vw);
}
#wrapper .shop_name.long img {
    height: min(50px,11.6vw);
}
#wrapper .shop_name > span {
    display: block;
    font-weight: normal;
    font-size: min(3.2vw,12px);
    padding-top: min(5vw,14px);
    line-height: 1.5;
}
#wrapper .shop_name::after {
    content: "";
    width: min(50px,10.53vw);
    height: min(50px,10.53vw);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}
#wrapper .floor_s_b1::after {
    background: url(../images/badge-sb1f.svg) center center / contain no-repeat;
}
#wrapper .floor_s_1f::after {
    background: url(../images/badge-s1f.svg) center center / contain no-repeat;
}
#wrapper .floor_s_2f::after {
    background: url(../images/badge-s2f.svg) center center / contain no-repeat;
}
#wrapper .floor_n_1f::after {
    background: url(../images/badge-n1f.svg) center center / contain no-repeat;
}
#wrapper .floor_n_2f::after {
    background: url(../images/badge-n2f.svg) center center / contain no-repeat;
}
#wrapper .floor_n_park::after {
    background: url(../images/badge-park.svg) center center / contain no-repeat;
    width: min(90px,24.53vw);
}
#wrapper .shop_detail {
    display: flex;
    gap: min(8vw,15px);
    margin: min(20px,4vw) 0;
}
#wrapper .shop_detail .description {
    flex: 1.8;
    text-align: justify;
}
#wrapper .shop_detail .shop_img {
    flex: 1;
}
#wrapper .shop_info {
    background: url(../images/shop-line.png) top  center / contain no-repeat;
    display: flex;
    flex-wrap: wrap;
    padding: min(5vw,20px) 0;
    row-gap: min(5px,1vw);
}
#wrapper .shop_info > p {
    display: flex;
    gap: min(5px,1vw);
    padding-right: min(20px,3vw);
    line-height: 1.4;
}
#wrapper .shop_info > p {
    display: flex;
    gap: min(5px,1vw);
    padding-right: min(20px,3vw);
    line-height: 1.4;
}
#wrapper .shop_info > p::before {
    content: "";
    display: block;
    width: min(15px, 4vw);
    height: min(18.5px, 5vw);
}
#wrapper .shop_info > p.tel::before {
    background: url(../images/ico-tel.svg) center center / contain no-repeat;
}
#wrapper .shop_info > p.time::before {
    background: url(../images/ico-time.svg) center center / contain no-repeat;
}
#wrapper .shop_info > p.hp::before {
    background: url(../images/ico-hp.svg) center center / contain no-repeat;
}
#wrapper .shop_info > p.ig::before {
    background: url(../images/ico-ig.svg) center center / contain no-repeat;
}
#wrapper .shop_info > p.holiday::before {
    background: url(../images/ico-holiday.svg) center center / contain no-repeat;
}
#wrapper .shop_info .nospace {
    padding-right: 0;
}
#wrapper .shop_info a {
    border-bottom: 1px solid var(--col-blk);
}
#wrapper .shop_food {
    position: relative;
    margin-top: min(30px,2vw);
}
#wrapper .shop_food img {
    will-change: opacity, transform;
}
#wrapper .shop_list + .shop_list {
    margin-top: min(100px,30vw);
}
#wrapper #morning .shop_list:nth-of-type(even) .shop_food {
    padding-left: min(30px,4vw);
}
#wrapper #morning .shop_list:nth-of-type(odd) .shop_food {
    padding-right: min(30px,4vw);
}
#wrapper #morning .shop_food {
    padding: min(40px,10vw) 0;
}
#wrapper .shop_food .food_label  {
    position: absolute;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.5s ease;
}
#wrapper .food01-1 .food_label {
    top: 0;
    right: 0;
    width: min(220px,50vw);
}
#wrapper .food01-2 .food_label {
    top: 0;
    left: 0;
    width: min(50px,13vw);
}
#wrapper .food01-3 .food_label {
    top: min(-4vw,-40px);
    right: 0;
    width: min(51px,13vw);
}
#wrapper .food01-4 .food_label {
    top: 0;
    left: 0;
    width: min(51px,13vw);
}
#wrapper .food01-5 .food_label {
    top: 0;
    right: 0;
    width: min(200px,45vw);
}
#wrapper .food01-6 .food_label {
    top: 0;
    left: 0;
    width: min(54px,13vw);
}
#wrapper .food02-1 .food_label {
    top: 20px;
    left: 20px;
    width: min(220px,45vw);
}
#wrapper .food02-2 .food_label {
    top: -10px;
    left: -8px;
    width: min(60px,13vw);
}
#wrapper .food02-3 .food_label {
    top: 50px;
    right: -10px;
    width: min(60px,13vw);
}
#wrapper .food02-4 .food_label {
    top: -10px;
    right: 10px;
    width: min(220px,45vw);
}
#wrapper .food02-5 .food_label {
    top: 20px;
    right: 20px;
    width: min(60px,13vw);
}
#wrapper .food02-6 .food_label {
    top: 20px;
    right: 20px;
    width: min(220px,45vw);
}
#wrapper .food01-1 {
    padding-top: min(12vw,50px);
}

#wrapper .shop_food .caption {
    font-size: min(3.2vw,12px);
    padding-top: min(10px,3vw);
}
#wrapper .column_wrap {
    background: url(../images/bg-column.jpg) top left / cover no-repeat;
    border-radius: 30px 0 0 0;
    display: grid;
    gap: min(20px,8vw);
    padding: min(8vw,40px) var(--content-side);
    margin: min(70px,18vw) 0;
}
#wrapper .column_wrap .column_info {
    background: url(../images/shop-line.png) top  center / contain no-repeat;
    padding: min(5vw,20px) 0 0;
}
#wrapper .column_wrap .column_info a {
    border-bottom: 1px solid var(--col-blk);
}
#wrapper .c_morning {
    grid-template-columns: min(4.53vw,20px) 1fr 1fr;
}
#wrapper .c_morning .column_text {
    grid-column: 1 / 4;
    text-align: justify;
}
#wrapper .c_morning .column_info {
    grid-column: 1 / 4;
}
#wrapper .c_dinner {
    grid-template-columns: min(4.53vw,20px) 1fr;
}
#wrapper .c_dinner .column_text,
#wrapper .c_dinner .shop_info,
#wrapper .c_dinner .column_img {
    grid-column: 1 / 3;
}
#wrapper .c_dinner .sub_title {
    display: block;
    width: 100%;
    font-weight: 600;
    line-height: 1.4;
    padding-bottom: min(10px,1vw);
}
#wrapper .c_dinner .column_img {
    position: relative;
}
#wrapper .c_dinner .column_img::after {
    content: "";
    width: min(60px,12.53vw);
    height: min(60px,12.53vw);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/badge-sb1f.svg) center center / contain no-repeat;
}
#wrapper .mng_illust {
    position: absolute;
    bottom: 0;
    right: 0;
    width: min(90px,21.33vw);
    padding-right: var(--content-side);
    padding-bottom: var(--content-side);
}
#wrapper .dnr_illust {
    position: absolute;
    top: min(40vw,140px);
    right: 0;
    width: min(71px,20.33vw);
    padding-right: var(--content-side);
}

#footer {
    padding: min(30px,10vw) 0 0;
    text-align: center;
    background-color: var(--col-wht);
    position: relative;
    z-index: 5;
}
#footer .share {
    width: min(60px,15vw);
    margin: 0 auto;
    padding: min(3vw,10px) 0;
}
#footer ul {
    display: flex;
    gap: min(20px,3vw);
    width: min(220px,51vw);
    margin: 0 auto;
}
#footer ul li.share_item {
    flex: 1;
}
#footer ul li.share_item:nth-child(4) button {
    width: 100%;
    cursor: pointer;
}
#footer .note {
    text-align: center;
    padding: min(40px,10vw);
    font-size: min(3.2vw,12px);
    line-height: 1.6;
}
#footer .copyright {
    font-size: min(2.8vw,10px);
    border-top: 1px solid var(--col-blk);
    padding: min(20px,4vw) 0;
}
#pageTopBtn {
    position: fixed;
    bottom: min(20px,3vw);
    right: min(20px,3vw);
    width: min(50px,10vw);
    height: min(50px,10vw);
    background: var(--col-wht);
    font-size: min(18px,4vw);
    text-align: center;
    border: 1px solid var(--col-org);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}
#pageTopBtn.show {
    opacity: 1;
    visibility: visible;
}
#pageTopBtn.hide {
    opacity: 0 !important;
    visibility: hidden !important;
}
#pageTopBtn:hover {
    opacity: 0.7;
}


@media screen and (min-width: 400px)  {
    .bg_loop,
    .bg_loop_02 {
        position: fixed;
        left: 0;
        width: 100%;
        height: min(10vw,90px);
        background-repeat: repeat-x;
        background-size: cover;
        z-index: 1;
        pointer-events: none;
        opacity: 0.5;
    }
    .bg_loop {
        bottom: min(200px,20vw);
        background-image: url('../images/bg-text.svg');
        animation: bgScroll1 60s linear infinite;
    }
    .bg_loop_02 {
        bottom: min(80px,6vw);
        background-image: url('../images/bg-text.svg');
        animation: bgScroll2 60s linear infinite;
    }
    @keyframes bgScroll1 {
        from {
            background-position: 0 0;
        }
        to {
            background-position: -2000px 0;
        }
    }
    @keyframes bgScroll2 {
        from {
            background-position: -1000px 0;
        }
        to {
            background-position: -3000px 0;
        }
    }
}
@media screen and (min-width: 830px)  {
    #wrapper .layout {
        display: grid;
        grid-template-columns: 1fr;
    }
    #wrapper .content_wrap {
        max-width: 450px;
        background-color: var(--col-wht);
        margin: 0 auto;
    }
    #wrapper .head_inner {
        width: min(700px,54vw);
        padding: 0;
        margin: 0 auto;
    }
    

}

@media screen and (min-width: 1024px) {

    .pc {
        display: inline-block;
    }
    .sp {
        display: none;
    }
    header {
        display: grid;
        grid-template-columns: 1fr calc(( 450 / 1140 ) * 100vw);
    }
    header .logo_wrap {
        width: min(700px, 54vw);
        justify-content: flex-start;
    }
    #wrapper .bg_loop {
        bottom: min(200px,20vw);
    }
    #wrapper .bg_loop_02 {
        bottom: min(80px,6vw);
    }
    #wrapper .layout {
        grid-template-columns: 1fr calc(( 450 / 1140 ) * 100vw);
    }
    #wrapper .content {
        margin: 0 auto 0 0;
    }
    #wrapper .content {
        margin: 0 auto 0 0;
    }
    #wrapper .head {
        padding: 0;
    }
    #wrapper .head_inner {
        position: sticky;
        top: 0;
        height: 100vh;
        max-width: 54vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #wrapper .head .nav_content .hamburger {
        display: none;
    }
    #wrapper .head .nav_menu {
        display: block;
        position: relative;
        background: none;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #wrapper .head .lead {
        width: 94%;
        margin: min(6.67vw,20px) auto 0;
    }
    #wrapper .head .nav_menu .nav_illust {
        position: absolute;
        left: 0;
        bottom: 0;
        width: min(180px,12vw);
    }
    #wrapper .head .nav_wrap {
        width: 90%;
        margin: min(3vw,250px) auto 0;
    }
    #wrapper .head .nav_inner {
        background-color: var(--col-wht);
        margin: 0 0 0 auto;
        width: 70%;
        padding: min(2vw,40px);
    }
    #wrapper .head .nav_inner li {
        opacity: 1!important;
        transform: none!important;
        width: min(280px,40vw);
        margin: 0 auto;
    }
    #wrapper .head .nav_inner li .btn_img {
        margin-left: min(20px,3vw);
        width: min(240px,36vw);
    }
    
}