/* bxSlider.min.css */
    .bxslider{margin:0;padding:0;  }
    ul.bxslider{list-style:none; }
    .bx-viewport{-webkit-transform:translatez(0);}
    .bx-wrapper .bx-loading{min-height:50px;background:url(images/bx_loader.gif) center center no-repeat #fff; height:100%; width:100%; position:absolute;top:0;left:0;z-index:2000}
    .bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666; }
    .bx-wrapper .bx-pager.bx-default-pager a{background:#999;text-indent:-9999px;display:block;width:10px;height:10px;margin:0 5px;outline:0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
    .bx-wrapper .bx-pager.bx-default-pager a.active,.bx-wrapper .bx-pager.bx-default-pager a:focus,
    .bx-wrapper .bx-pager.bx-default-pager a:hover{background:#d3c89c}
    .bx-wrapper .bx-controls-auto .bx-controls-auto-item,.bx-wrapper .bx-pager-item{display:inline-block;vertical-align:bottom}
    .bx-wrapper .bx-pager-item{font-size:0;line-height:0}
    .bx-wrapper .bx-prev{left:10px;background:url(images/controls.png) 0 -32px no-repeat}
    .bx-wrapper .bx-prev:focus,
    .bx-wrapper .bx-prev:hover{background-position:0 0}
    .bx-wrapper .bx-next{right:10px;background:url(images/controls.png) -43px -32px no-repeat}
    .bx-wrapper .bx-next:focus,
    .bx-wrapper .bx-next:hover{background-position:-43px 0}
    .bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999}
    .bx-wrapper .bx-controls-direction a.disabled{display:none}
    .bx-wrapper .bx-controls-auto{text-align:center}
    .bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;background:url(images/controls.png) -86px -11px no-repeat;margin:0 3px}
    .bx-wrapper .bx-controls-auto .bx-start.active,.bx-wrapper .bx-controls-auto .bx-start:focus,
    .bx-wrapper .bx-controls-auto .bx-start:hover{background-position:-86px 0}
    .bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;background:url(images/controls.png) -86px -44px no-repeat;margin:0 3px}
    .bx-wrapper .bx-controls-auto .bx-stop.active,.bx-wrapper .bx-controls-auto .bx-stop:focus,.bx-wrapper .bx-controls-auto .bx-stop:hover{background-position:-86px -33px}
    .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}
    .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}




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

    #page{ position: fixed; top: 40vh; right: 10vw; margin: auto; z-index: 35; display: none; }
    #page ul{ width: 10vw; height: 300px; }
    #page li{ float: right; width: 80%; height: 50px; transition: ease .5s; margin-bottom: 10px;  }
    #page a{ display: block; width: 100%; height: 100%;  text-align: right; font-size: 1.1rem; padding-left: 3px; color: #666; line-height: 58px; }
    #page.view{ display: block; }
    #page li.active{ width: 100%; border-bottom: 1px solid #d3c89c; }
    #page li.active a{ color: #d3c89c; text-align: left; font-size: 1.2rem; }
    
    
    #bottom > div{ width: 65vw; height: 80vh; min-height: 70vh; min-width: 700px; margin-left: 10vw; background-color: #efefef; border-radius: 10px; }
    #bottom > div > .title.a{ width: 100%; height: 20%; }
    .title > h4{ float: left; width: 35%; height: 100%; font-size: 2rem; font-weight: 800; color: #022601; padding-top: 3rem; box-sizing: border-box; text-align: center; }
    .title > p{  float: left; width: 65%; height: 100%; font-size: 1.3rem; padding-top: 3rem; box-sizing: border-box; }
    p.mbAve, p.mbCafe, .mbCaro{ display: none; }
    
    
    .bx-wrapper{position:relative; text-align: center; }
    .bx-wrapper img{ max-width: 100%; }
    
    
    #bottom > div > .inner.a{ width: 100%; height: 80%;  }
    .inner > div{ float: left; width: 50%; height: 100%; padding: 2rem; box-sizing: border-box; }
    .inner .txt h6{ font-size: 1.1rem; margin-bottom: 10px; }
    .inner .txt p{ font-size: .9rem; line-height: 1.5rem; margin: 50px 0;  }
    .inner .txt a{ font-size: 1rem; color: #022601; font-weight: 600; background-image: url(/images/cafe_shop/icon_home.png); background-repeat: no-repeat; background-size: 1rem; background-position: left center; padding-left: 1.3rem; }
    .inner .txt ul{ width: 95%; margin: 2vh auto 0; }
    .inner .txt ul > li{ list-style: circle; font-size: .9rem; margin-bottom: .5rem; }

    .bx-wrapper .bx-controls-auto,.bx-wrapper .bx-pager{ margin-top: .5rem;  width:100%; }

    
}



@media screen and (min-width : 768px) and (max-width: 1024px){
   
    #page{ width: 80vw; margin: 8vh auto 6vh; z-index: 35; }
    #page ul{ display: table; width: 100%; height: auto; }
    #page li{ display: table-cell; text-align: center; vertical-align: middle; }
    #page a{ font-size: 1.4rem; color: #555; transition: ease .3s;  }
    #page li.active a{ color: #d3c89c; font-size: 1.4rem; font-weight: 600; }
    
    
        
    #bottom > div{ width: 90vw; min-height: 700px; margin: 0 auto; background-color: #efefef; border-radius: 1rem; }
    #bottom > div > .title.a{ width: 100%; padding: 3rem; margin-bottom: 3rem;  }    
    .title.a > h4{ float: left; width: 35%; font-size: 1.7rem; font-weight: 600; color: #022601; text-align: center; }
    .title > p{  display: none; }
    p.mbAve, p.mbCafe, p.mbCaro{ display: block; float: left; width: 65%; font-size: 1.2rem; }
    p.mbCaro{ padding-top: .3rem; }
    
    .bx-wrapper{position:relative; text-align: center; }
    .bx-wrapper img{ max-width: 100%;  }    
    
    #bottom > div > .inner.a{ width: 100%; }
    .inner.a .txt{ padding: 3rem; }
    .inner .txt h6{ font-size: 1.2rem; margin-bottom: 1vh; padding: 0 5vw; text-align: center; }
    .inner .txt p{ font-size: 1.1rem; line-height: 1.9rem; padding: 2vh 0 5vh; text-align: center; }
    .inner .txt a{ font-size: 1rem; color: #022601; font-weight: 600; background-image: url(/images/cafe_shop/icon_home.png); background-repeat: no-repeat; background-size: 1rem; background-position: 1vw center; padding: 0 5vw;  }
    .inner .txt ul{ width: 90%; margin: 3vh auto 0; }
    .inner .txt ul > li{ list-style: circle; font-size: 1.1rem; margin-bottom: .8rem; }
    .bx-wrapper .bx-controls-auto,.bx-wrapper .bx-pager{ width:100%; margin-top: .5rem;  }
    
}




@media screen and (max-width: 767px){
    
    #page{ width: 80vw; margin: 8vh auto 6vh; z-index: 35; }
    #page ul{ display: flex; width: 100%; height: auto; }
    #page li{ flex: 1; text-align: center; }
    #page a{ font-size: 1.1rem; color: #555; transition: ease .3s;  }
    #page li.active a{ color: #d3c89c; font-size: 1.3rem; font-weight: 600; }
    
    
    #bottom > div{ width: 95vw; min-height: 550px; margin: 0 auto; background-color: #efefef; border-radius: 1rem; padding: 3rem 1rem; box-sizing: border-box; }
    #bottom > div > .title.a{ width: 100%; min-height: 80px;   }    
    .title.a > h4{ float: left; width: 30%; font-size: 1.5rem; font-weight: 600; color: #022601; vertical-align: middle; text-align: center;  }
    .title > p{  display: none; }
    p.mbAve, p.mbCafe, p.mbCaro{ display: block; float: left; width: 70%; font-size: 1.1rem; vertical-align: middle; line-height: 1.4rem; padding-left: 1rem; box-sizing: border-box}
    p.mbCaro{ text-align: center; padding-top: .1rem;  }
    
    .bx-wrapper{position:relative; text-align: center; }
    .bx-wrapper img{ max-width: 100%;  }    
        
    .inner.a .txt{ padding: 5vh 4vw 0; }
    .inner .txt h6{ font-size: 1.2rem; margin-bottom: 1vh; padding: 0 5vw; text-align: center; }
    .inner .txt p{ font-size: 1rem; line-height: 1.5rem; padding: 2vh 0 5vh; text-align: center; }
    .inner .txt a{ font-size: 1rem; color: #022601; font-weight: 600; background-image: url(/images/cafe_shop/icon_home.png); background-repeat: no-repeat; background-size: 1rem; background-position: 1vw center; padding: 0 5vw;  }
    .inner .txt ul{ width: 90%; margin: 3vh auto 0; }
    .inner .txt ul > li{ list-style: circle; font-size: 1rem; margin-bottom: .7rem; }
    .bx-wrapper .bx-controls-auto,.bx-wrapper .bx-pager{ width:100%; margin-top: .7rem; }
    
    
}