@charset "UTF-8";

@media screen and (min-width: 751px) {
    .c-menu .close-btn:hover {background-color: #333;}
    .c-menu .accordion-trigger:hover {background-color: #333;}
    .btn a:hover{background-color: #333;}
    header nav ul li a:hover::after{width: 100%;}
    header nav ul li a:hover{color: #a67c52;}
    footer .flex .right ul li a:hover::after{width: 100%;}
    .information dl .item a:hover{color: #a67c52;}
    .faq .accordion-title:hover{background: #998058; color: #fff;}
    .faq .accordion-title:hover::after{color: #fff;}
}

@media screen and (max-width: 1150px) {
    .sp_menu_btn{display: block;}
    .menu {
        width: 400px;
        position: fixed;
        top: 0;
        right: -400px;
        z-index: 101;
        transform: translate(0, 0);
        transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        background: #fff;
        height: 100vh;
        padding: 100px 20px 20px 20px;
        box-sizing: border-box;
    }
    .menu.open {
        right: -1px;
    }
    header nav ul li{
        width: 100%;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: solid 1px #ddd;
    }
    header nav ul li a{
        display: block;
        color: #000;
        font-size: 1.8rem;
        width: 100%;
    }
    .sp_menu_btn {
        position: fixed;
        top: 0px;
        right: 0px;
        z-index: 9997;
    }
    .sp_menu_btn button {
        display: block;
        cursor: pointer;
        width: 50px;
        height: 50px;
        border: none;
        outline: none;
        background-color: #a67c52;
        padding: 0;
        transition: 0.3s;
    }
    .sp_menu_btn button span.bar {
        display: block;
        height: 3px;
        width: 30px;
        background-color: #fff;
        margin: 7px auto;
        transition: all 0.2s;
        transform-origin: 0 0;
    }
    .sp_menu_btn button.active .bar1 {
        transform: rotate(45deg) translate(3px, -5px);
    }
    .sp_menu_btn button.active .bar2 {
        opacity: 0;
    }
    .sp_menu_btn button.active .bar3 {
        transform: rotate(-45deg) translate(3px, 3px);
    }

    .fv{margin-top: 0;}
    header .menu{display: block;}
    header .menu ul{margin-bottom: 10%;}
    header{width: 100%; background: rgba(0, 0, 0, .0); }
    header.is-active{height: 100%; background: rgba(0, 0, 0, .8); }
    header .h-btn{width: 100%; flex-direction: column-reverse; align-items: start;}
    header .h-btn .btn{width: 100%;}
    header .btn a{width: 100%; height: 70px; margin-bottom: 5px;}
    header .time p{color: #000; text-align: center; font-size: 1.8rem;}
    header .time span{color: #000; text-align: center; display: block; font-size: 1.6rem;}
    header .h-btn .time{width: 100%;}
    header .btn a span{font-size: 1.4rem;}
    header .btn a p{font-size: 2.5rem;}
    h2{font-size: 4vw;}
    .course span.ttl-sub{font-size: 2.5vw;}

    .message .flex .copy h1{font-size: 3.3vw;}

    .course ul li h3{font-size: 3.2vw;}
    .course ul li p{font-size: 3.2vw;}
    .course ul li p span{font-size: 2vw;}
    .drink-btn h4{font-size: 3.5vw;}
    .drink-btn p{font-size: 2vw;}

    .concept p{font-size: 1.8vw;}

    .c-menu .c-menu-box .flex .txt h3{font-size: 2.8vw;}
    .c-menu .c-menu-box .flex .txt h3 span{font-size: 1.8vw;}
    .c-menu .c-menu-box .flex .txt span.hosoku{font-size: 1.6vw;}
    .c-menu .menu-name{font-size: 2.4vw; line-height: 1.4;}
    .c-menu .menu-location{font-size: 1.6vw;}
    .menu .toast h4{font-size: 5vw;}
    .menu .toast h4 span{font-size: 3vw;}
    .menu .toast h5{font-size: 3vw;}
    .menu .toast .txt p{font-size: 1.4vw;}
    .menu .toast .txt p.price{font-size: 2.6vw;}
    .menu .toast .txt p.price span{font-size: 1.8vw;}

    .course .modal-content h4{font-size: 3.2vw;}
    .course .modal-content .price{font-size: 2.8vw;}
    .course .modal-content .price span{font-size: 2vw;}
    .course .modal-content .txt-area{font-size: 1.8vw;}
    .course .modal-content .oshinagaki h5{font-size: 2vw;}
    .course .modal-content .oshinagaki p{font-size: 1.6vw;}
    .modal-content p.hosoku{font-size: 1.6vw;}
    .modal-content .hosoku span{font-size: 1.4vw;}

    .drink .drink-main.flex .txt h3{font-size: 3.2vw;}
    .drink .drink-main.flex .txt p{font-size: 1.6vw;}

    .scenes .ttl-txt{font-size: 1.6vw;}
    .swiper p{font-size: 1.8vw;}

    .access .txt h3{font-size: 3vw;}
    .access .txt p.add{font-size: 2vw;}
    .access .txt ul li{font-size: 1.6vw;}
}

@media screen and (max-width: 768px) {
    .w-1100{padding: 0 15px;}
    h2{font-size: 10vw;}

    .menu{width: 100%; right: -100%;}
    .menu.open{right: 0;}
    .message{padding: 15% 0;}
    .message .right{width: 25%;}
    .message .left{width: 20%;}

    .course span.ttl-sub{font-size: 4.5vw; margin-bottom: 25px;}

    .course h2 br{display: block;}
    .course ul li h3{font-size: 6vw;}
    .course ul li p{font-size: 5vw;}
    .course ul li p span{font-size: 3vw;}
    .drink-btn h4{font-size: 7.5vw; margin-bottom: 1%;}
    .drink-btn p{font-size: 4.5vw; margin-bottom: 20px;}

    .concept p{font-size: 1.6vw;}

    .c-menu .c-menu-box .flex{margin-bottom: 8%; align-items: start;}
    .c-menu .c-menu-box .flex.r-flex{flex-direction: column-reverse;}
    .c-menu .c-menu-box .flex .img{width: 100%; margin-bottom: 10px;}
    .c-menu .c-menu-box .flex .txt{width: 100%;}
    .c-menu .c-menu-box .flex .txt h3{font-size: 5vw;}
    .c-menu .c-menu-box .flex .txt h3 span{font-size: 3.5vw;}
    .c-menu .c-menu-box .flex .txt span.hosoku{font-size: 1.2rem;}

    .modal-content{padding: 20px;}
    .course .modal-content h4{font-size: 2.5rem;}
    .course .modal-content .price{font-size: 2rem;}
    .course .modal-content .price span{font-size: 1.6rem;}
    .course .modal-content .txt-area{font-size: 1.4rem;}
    .course .modal-content .oshinagaki h5{font-size: 1.6rem;}
    .course .modal-content .oshinagaki p{font-size: 1.2rem;}
    .modal-content p.hosoku{font-size: 1.4rem;}
    .modal-content .hosoku span{font-size: 1.2rem;}

    section{padding-top: 15%; padding-bottom: 15%;}
    h2{margin-bottom: 10px;}
    .btn a{width: 240px;}
    .insta .btn a{width: 280px;}
    .fv{height: 90vh;}

    .message .flex .logo{width: 50%; margin-inline: auto;}
    .message .flex .copy{width: 100%; padding-left: 5%;}
    .message .flex .copy h1{ font-size: 5.5vw;}

    .course ul li{width: 100%; margin-bottom: 12%;}
    .drink-btn{padding: 5%;}

    .concept{width: 100%; height: 65vw; background-position: bottom left;}
    .concept p{font-size: 1.4rem;}

    .scenes .ttl-txt{font-size: 1.4rem; padding: 0 20px; margin-bottom: 20px;}

    .c-menu h2 br.sp-block{display: block;}
    .c-menu .toast .img{width: 100%; margin-bottom: 10px;}
    .c-menu .toast .txt{width: 100%;}
    .c-menu .toast h4{font-size: 9.5vw; line-height: 1.2; margin-bottom: 10px;}
    .c-menu .toast h4 span{font-size: 5.5vw;}
    .c-menu .toast h5{font-size: 5.5vw;}
    .c-menu .toast .txt br{display: none;}
    .c-menu .toast .txt p{font-size: 1.4rem; margin-bottom: 15px;}
    .modal-content{height: 500px; overflow-y: scroll;}
    .modal span.close {top: -50px; right: 0px;}
    .modal-thum{width: 100%;}
    .modal-txt{width: 100%; margin-bottom: 20px;}
    .c-menu .menu-grid{grid-template-columns: 1fr;}
    .c-menu .menu-name{font-size: 4.5vw; line-height: 1.4;}
    .c-menu .menu-location{font-size: 3.5vw; line-height: 1;}
    .c-menu .close-area {
        padding-top: 60%;
        margin-bottom: 15%;}

    .drink-btn p br{display: block;}
    .drink-btn .modal h5{font-size: 3rem;}
    .drink-btn .modal .obi.pc{display: none;}
    .drink-btn .modal .obi.sp{display: block;}
    .drink-btn .modal .image-area .flex li{width: 49%;}
    .drink-btn .modal h6{font-size: 2rem; margin-bottom: 20px;}
    .drink-btn .modal .flex.d-menu p{font-size: 1.6rem;}
    .drink-btn .modal .flex.d-menu .item ul li{font-size: 1.2rem; padding-left: 12px; text-indent: -12px;}
    .drink-btn .modal .hosoku span{margin-bottom: 5px;}

    .drink{padding-top: 0;}
    .drink .drink-main.flex{margin-bottom: 40px;}
    .drink .drink-main.flex .image{width: 100%; margin-bottom: 10px;}
    .drink .drink-main.flex .txt{width: 100%;}
    .drink .drink-main.flex .txt h3{font-size: 6.2vw;}
    .drink .drink-main.flex .txt p{font-size: 1.4rem;}
    .drink .drink-main.flex .txt p br{display: none;}
    .drink .drink-list .flex li{width: 49%; margin-bottom: 10px;}
    
    .scenes {padding-top: 0;}
    .scenes h2{margin-bottom: 10px;}
    .swiper .image{margin-bottom: 5px;}
    .swiper p{font-size: 1.4rem;}
    .swiper-button-next{right: 10%!important;}
    .swiper-button-prev{left: 10%!important;}
    .swiper-button-next, .swiper-button-prev {width: 35px!important; height: 35px!important;}
    .swiper-button-next:after{width: 10px; height: 10px;}
    .swiper-button-prev:after{width: 10px; height: 10px;}

    .information .store-info{flex-direction: column; gap: 0;}
    .information dl .item {flex-direction: column;}
    .information dt {width: auto; margin-bottom: 5px;}

    .access h2{margin-bottom: 5px;}
    .access .map{width: 100%; margin-bottom: 10px;}
    .access .map iframe{height: 45vw;}
    .access .txt{width: 100%;}
    .access .txt h3{font-size: 2rem;}
    .access .txt p.add{font-size: 1.6rem;}
    .access .txt p.add::after{width: 12px; height: 12px;}
    .access .txt ul li{font-size: 1.4rem;}
    .access .btn{justify-content: center;}

    .faq .accordion-title{font-size: 1.6rem; text-indent: -16px;}
    .faq .accordion-content p{font-size: 1.4rem; line-height: 1.4;}

    .fv .fv-logo{width: 40%;}
    .fv{height: 95vh;}

    #sbi_images{flex-wrap: wrap;}
    .sbi_item{width: 48.5%; height: 45vw;}
    #sb_instagram{margin-bottom: 5%;}

}

@media screen and (max-width: 680px) {
    footer .flex .left{width: 100%; margin-bottom: 20px;}
    footer .flex .right{width: 100%;}
    footer .flex .left .address{width: 100%; margin-bottom: 20px;}
    footer .flex .left .f-logo{margin-inline: auto; margin-bottom: 20px;}
    footer .f-btn .btn a{width: 100%;}
    footer .f-btn .time p{text-align: center;}
    footer .f-btn .time p span{display: block;}
    footer .flex .right ul li {
        margin-right: 15%;
        margin-bottom: 4%;}
    }
@media screen and (max-width: 500px) {
    body {
        background-size: contain;
        background-repeat: repeat-y;
    }
    .concept{height: 90vw;}
    .tel{
        pointer-events: all;
    }
    .tel::after{
        content: ""!important;
    }
    .tel .pc{display: none;}
    .tel .sp{
        display: block;
    }
}
@media screen and (min-width: 1200px) {
    .sbi_item{
        width: 265px;
    height: 265px;
    }
}