@charset "utf-8";

   #index_title{
    position: relative;
    width: 100%;
    height:calc(100vw * 0.39);
    max-height: 410px;
    background: url("../img/index_main.jpg") center top no-repeat;
    background-size: contain;
   }
   #index_title img{
    position: absolute;
    width: 30%;
    top:50%;
    transform: translate(0,-50%);
    margin: 0 0 0 8%;
   }
     
     
   #index_intro{
    margin: 2em 0 0 0;
    font-size: 0.7em;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-align: center;
   }
   #index_intro p{margin: 0.8em 0;}

   @media screen and (min-width:769px) {
    #index_intro{font-size: 1em;}
   }
     
     
     .pickup{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 3em 5% 1.5em;
     }
     .pickup div{
      width:48%; 
      width : -webkit-calc((100% - 4%) / 2) ;
      width : calc((100% - 4%) / 2) ;
      margin: 0 0 3em 0;
     }
    .pickup h3{
     width: 100%;
    height: 3rem;
    margin: 0 0 0.5em 0;
    padding: 0;
    font-family: 'Patrick Hand', cursive;
    text-align: center;
    font-size: 2em;
    letter-spacing: 0.2em;
   }
     .pickup_item{
     }
     .pickup_txt{
      margin: 0.5em 0 1em;
      font-size: 0.8em;
      border-bottom: #ccc 1px solid;
     }
     .pickup_txt span{
      display: block;
      margin: 0.5em 0 0 0;
      font-size: 0.7em;
      color: #333;
     }
     .pickup_link{
      display: flex;
      justify-content: space-between;
      padding: 0 0.5em;
     }
     .pickup_link a{ 
     display: block;
      font-size: 0.7em;
      line-height: 1.1;
      text-decoration: none;
      text-align: center;
      color: inherit;
     }
     .pickup_link a img{
      height: 1.5em;
      margin: 0 auto 0.2em auto;
      vertical-align: middle;
     }
   @media screen and (min-width:769px) {
     .pickup{margin: 3em auto;}
     .pickup div{width:23%; 
      width : -webkit-calc((100% - 8%) / 4) ;
      width : calc((100% - 8%) / 4) ;
      }
     .pickup_item{margin: 0;}
     .pickup_link{padding: 0 2em;}
     .pickup_link a{font-size: 1em;}
     }
     
    .index_navi a{
    text-decoration: none;
    color: inherit;
   }
   .index_hutte{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto 1em;
    padding: 0 0 0 1em;
    align-items: center;
    background: #fff;
   }
   .index_hutte p{
    vertical-align: middle;
    text-align: center;
    font-size: 0.8em;
    line-height: 1.1;
   }
   .index_hutte_img{
    margin: 0 0 0 1em;
    width: 100%;
   }
   @media screen and (min-width:769px) {
    .index_hutte{width: 70%;margin: 0 auto 3em;padding: 1em 1em 1em 3.5em;}
    .index_hutte p{font-size: 1em;}
    .index_hutte_img{margin: 0 0 0 1.5em;width: 30%;}
   }
   .index_navi_inner{
    width: 100%;
   }
   .index_navi_inner a{
    display: block;
    width: 90%;
    margin: 0 auto 1em;
    padding: 0.5em 0;
    border:1px solid #333;
    border-radius: 0.5em;
    background: rgba(255,255,255,0.5);
    text-align: center;
    font-size: 0.8em;
   }
   @media screen and (min-width:769px) {
   .index_navi_inner{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0 auto 3em;
    }
    .index_navi_inner a{
    width: 32%;padding: 2em 0;border-radius: 1em;font-size: 1em;
    }
    
   }