body{
    background-color: rgb(253, 247, 247);
    font-family: serif;
   
}

.contents{
    max-width: 1080px;
    margin:0 auto;
}
.logo{
    font-size:8vw;
    /* text-align: center; */
    color: rgb(41, 37, 37);
    height:600px;
    background-image: url('./img/top2.jpg');
    background-size: cover;
    margin-top: 0px;
    padding-left:10vw;
    transition:all 1s 0.2s ease forwards;
    animation:topimage 3s 0.2s ease forwards;
}
@keyframes topimage{
    0%{
        opacity:0;
        transform:translateZ(100px);
    }
    100%{
        opacity:1;
        transform: translateZ(0);
    }
}
.lang p{
    text-align: left;
    font-size:8px;
    display: inline-block;
}
.lang a{
    font-size:10px;
    text-decoration: none;
    color:black;
}
.lang a:hover{
    color:brown;
    cursor:pointer;
}
.top{
    text-align: center;
    font-size:30px;
    font-weight: bold;
}
.header{
    width:100vw;
    margin-bottom: 0px;
}
.navwrapper li{
display:inline-block;
text-align: center;
margin:0 15px;
opacity: 0.9;
}
.navwrapper li:hover{
    background-color: darkgrey;
    cursor: pointer;
    opacity: 1;
}
.about{
    text-align: center;
 

}

.nav{
    width:100vw;
    background-color: pink;
    margin-bottom: 0px;
    text-align: center;
}
main{
    width:100%;
}
.goods{
    width:24%;
    display: inline-block;
    border:1px solid lightgrey;
    text-align: center;
    background-color: white;
    margin-bottom: 10px;
}
.good_img{
    width:90%;
}
.goods a,
.category a{
    text-decoration: none;
    color:lightgrey;
    background-color: gray;
    border-radius: 5px;
    transition:all 1s 0.2s ease;
}
.category:hover{
    opacity: 0.8;
    cursor: pointer;
    transform:scale(1.1);
}
h2{
    text-align: center;
}
.gallery,
.categories{
    text-align: center;
}
.category{
    width:15%;
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    transition:all 0.3s 0.1s ease;
}

.regist_form{
    text-align: center;
    
}
.contact{
    margin:0 auto;
}
.contact_wrapper{
    text-align: center;
    width:100%;
}
.form{
    margin: 0 auto;
}
.bold{
    font-weight: bold;
}
.good_dis{
    font-size:1.5vw;
}
/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}
 
/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
 
/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}

footer{
    text-align: center;
    background-color: pink;
    width:100vw;
}
.nav_icon{
    color:black;
    
}
#humberger {
    float:right;
    z-index: 4;
    position: relative;
    height: 40px;
    width: 56px;
    display: inline-block;
    box-sizing: border-box;
    transition:all 0.2s 0.1s ease;
  }
  #humberger div {
    position: absolute;
    left: 0;
    height: 4px;
    width: 56px;
    background-color: #444;
    border-radius: 2px;
    display: inline-block;
    box-sizing: border-box;
  }
  #humberger div:nth-of-type(1) {
    bottom: 40px;
  }
  #humberger div:nth-of-type(2) {
    bottom: 20px;
  }
  #humberger div:nth-of-type(3) {
    bottom: 0;
  }
  #humberger:hover{
      opacity:0.8;
      transform:scale(1.5) translateY(1vw);
      transition:all 0.3s 0.1s ease;
  }
  .menu_haikei{
      background-color: black;
      z-index: 2;
      display:none;
      position:fixed;
      top:0px;
      left:0px;
      width:100vw;
      height:200vw;
      animation:menu_open 0.5s 0.1s ease forwards ;

  }
  @keyframes menu_open{
      0%{
          transform: translateY(1vw);
      }
      100%{
          transform:translateY(0);
      }
  }
  .menu_btn{
      padding-top: 150px;
      color:white;
      font-size:16px;
      text-align: center;
      transform:scale(1);
      transition:all 0.2s 0.1s ease;
      
      
  }
  .menu_btn li{
      transition: all 0.2s 0.1s ease;
      color:white;
      transform: scale(1);
  }
  .menu_btn ul{
      list-style: none;
  }
  .menu_btn li:hover{
    color:violet;
    cursor: pointer;
    transform: scale(1.3);
    transition:all 0.5s 0.1s ease;
  }
  a{
      text-decoration: none;
      color:white;
  }
  a:hover{
      color:violet;
  }
  #Stones{
      display:none;
  }

  .takako{
      text-align: center;
  }
  .takako img{
      margin:0 auto;
      width:20vw;
  }
  .title{
      text-align: center;
      font-weight: bold;
      font-size: 20px;
  }
  .takako_dis{
      text-align: center;
  }
  .takako_dis img{
      margin:0 auto;
      width:50vw;
  }

  /* ここからショップのｃｓｓ */
  .shop_bres h3{
      text-align: center;
      background-color: lightpink;

  }
  .shop_bres{
      text-align: center;
  }
  .shop_item{
      border:1px solid grey;
      border-radius: 4px;
      width:20vw;
      height:20vw;
      display:inline-block;
      
  }
  .syou{
      font-size:smaller;
  }
#minne{
    color:red;
}
#info ul li{
    list-style: none;
    border-bottom:1px lightgray double;
}
#info{
    display:none;
}