@charset "UTF-8";
/* Reset */
*,*::before,*::after{box-sizing:border-box}
ul,ul[class],ol[class]{padding:0}
body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}
html{scroll-behavior:smooth}
body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}
ul,ul[class],ol[class]{list-style:none}
a:not([class]){text-decoration-skip-ink:auto}
img,picture{max-width:100%;display:block}
article>*+*{margin-top:1em}
input,button,textarea,select{font:inherit}
/*img:not([alt]){filter:blur(10px)}*/
/*
@media(prefers-reduced-motion:reduce){
 *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
*/
/* Reset_end */

  html{
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 100;
   font-size: 100%;
   overflow-x: hidden;
  }

   body{background: url("../img/main_bg.jpg") repeat #f8eedd;overflow-x: hidden;}
   #main{
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
   }
   .pc_only{display: none;}

   @media screen and (min-width:769px) {
    .sp_only{display: none;}
    .pc_only{display: inline;}
   }

.arrow{font-size: 0.5em;}

/***** header *****/
  #header{
   width: 100%;
   margin: 0 0 1em 0;
   padding: 0;
   background: #521a00;
  }
  header{
   position: relative;
   width: 100%;
   max-width: 1050px;
   height: 2em;
   margin: 0 auto;
   padding:0 1em;
   color:#fff;
  }
  header a{
   color: inherit;
   text-decoration: none;
  }
  
  .header_home{
   padding: 0.5em 0;
  }
  .header_home img{
   height: 1em;
   max-width: 50vw;
  }
  
  .menu_btn {
   display: inline-block;
   height: 2em;
   margin: 0;
   padding: 0 0.3em;
  }
  .menu_btn span{
   display: inline-block;
   width: 0.25em;
   height: 0.25em;
   margin: 0 0.15em;
   border-radius: 0.25em;
   background: #fff;
  }
  @media screen and (min-width:769px) {
   .menu_btn {display: none;}
  }
  
  
  .header_menu{
   position:absolute;
   right: 0;
   top: 0;
   text-align: right;
   z-index: 999;
  }  
  .header_menu svg{
   height: 1em;
   vertical-align: middle;
   fill: #333;
  }

  .open{display: block;}

  .header_menu ul{
   margin: 0;
   padding: 0;
   background: rgba(255,255,255,0.8);
   font-size: 0.8em;
   color: #333;
   text-align: left;
   white-space: nowrap;
   display: none;
  }   
  
  .header_menu ul a{
   display: block;
   margin: 0 0.5em;
   padding: 0.5em;
  }
   @media screen and (min-width:769px) {
  .header_menu svg{fill: #fff;}
  .header_menu ul{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   background: none;
   font-size: 0.7em;
   color: #fff;
  }
  .header_menu ul a{ padding: 0.7em 0.5em 0.6em 0.5em;}    
  }

/***** header_end *****/

/***** footer *****/
  footer{
   margin: 1em 0 0 0;
   padding: 2em 0 0 0;
   width: 100%;
   background: #fff;
   font-size: 0.8em;
   color: #666;
  }
  footer section{
   display: flex;
   flex-wrap: wrap;
   width:100%;
   max-width: 1150px;
   margin: 0 auto;
   justify-content: space-between;
  }
  footer div{
   width:100%;
   max-width: 1150px;
   margin: 0 auto 3.5em;
   text-align: center;
  }
  footer p{
   width:90%;
   margin: 0 auto 0.5em;
   padding: 0 0 0.2em;
   border-bottom:1px solid #ccc;
   font-size: 1.2em;
  }
  footer a{color: inherit;text-decoration: none;}
  footer .arrow{font-size:60%;vertical-align: middle;}  
  
  .footer_logo{
   margin: 0 auto 2em;
  }
  .footer_logo img{
   width: 60vw;
   max-width: 430px;
   margin: 0 auto;
  }
  
  .footer_onlineshop {
   display: flex;
   flex-wrap: wrap;
			/*justify-content: space-between;*/
			justify-content: center;
   width: 90%;
  }
  .footer_onlineshop  p{width: 100%;}
  .footer_onlineshop a{
   display: block;
   padding: 0 1.5em;
  }
  .footer_onlineshop svg{
   vertical-align: middle;
   display: inline;
   height: 1.4em;
   width: auto;
  }
.footer_hutteorder img{
   height: 2em;
   width: auto;
   margin: 0 auto 0.2em;
}

  .footer_hutte img{
   height: 2em;
   width: auto;
   margin: 0 auto 0.2em;
  }
  @media screen and (min-width:769px) {
    footer{padding: 3em 0 0 0;font-size: 1em;}
   .footer_logo img{width:40vw;}
   div.footer_onlineshop{width: 28%;margin: 0 1% 3.5em 5%;}
   div.footer_hutteorder{width: 28%;margin: 0 1% 3.5em 1%;}
   div.footer_hutte{width: 28%;margin: 0 5% 3.5em 1%;}
   div.footer_onlineshop p,div.footer_hutteorder p,div.footer_hutte p{height:2em;}
   .footer_onlineshop a{padding: 0 1em;}
  }  
  footer div#credit{
   max-width: 100%;
   margin: 0 0 0 0;
   padding: 0.2rem 0;
   background: #521a00;
   color:#fff;
   text-align: center;
   font-size: 0.7em;
  }

/***** footer_end *****/


/***** cafe.html *****/

   #cafe_intro{
    padding: 5%;
    font-size: 0.7em;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-align: center;
   }
    #cafe_intro img{
     margin: 0 0 3rem 0;
   }
    #cafe_intro span{
     display: block;
     margin: 2em 0 0 0;
     font-size: 0.7em;
     letter-spacing: 0;
     color: #666;
   }
   @media screen and (min-width:769px) {
    #cafe_intro{font-size: 1em;}
   }

   .info{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1050px;
   }
   .info > div{
    margin: 0 0 2em 0;
    padding: 0 5%;
    font-size: 0.8em;
   }
   .info h3{
    height: 3rem;
    margin: 0;
    padding: 0;
    font-family: 'Patrick Hand', cursive;
    text-align: center;
    font-size: 2em;
    letter-spacing: 0.2em;
   }
   #cal_hutte,#map,#tw_hutte{width:100%;}
   #map{height: 30rem;}
   #tw_hutte{height: auto;}
   @media screen and (min-width:481px) and (max-width:768px){
    #cal_hutte img{width: 80%;margin-left:auto;margin-right: auto;}
   }

   
   #map dl{
    width: 100%;
    height: 8rem;
    margin: 0 ;
    padding: 0 0 0.5em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
   }
   #map dl > *{height: auto; margin: 1em 0 0 0; padding:0;  border-bottom: 1px solid #ccc;}
   #map dt{width: 25%;}
   #map dd{width: 75%;}
   #map iframe{height: 19rem; }
   
@media screen and (min-width:769px) {
 #map,#tw_hutte{width: 48%;height: 25rem;margin-left:auto;margin-right:auto;}
 #tw_hutte{height: auto;}
 .info > div{padding: 0;}
 #map iframe{height: 14rem; }
}


/***** cafe.html_end *****/