body{
    overflow-x:hidden;
    margin:0;
    font-family: "cardo", serif;
    height: 100%;
   padding:0;
}



  

*{
    box-sizing:border-box;
      margin:auto;
     color: white;
    
}

    @keyframes textanime{
      0% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }

html {
  padding:1px;
  overflow-x:hidden;
  min-height:100%;
  line-height:1.5;
  font-size:0.9rem;
  background-size:cover;
  background-repeat: no-repeat;
  font-size:20px;
  margin:0;
  padding:0;
}
 
p{
padding:0.8em;
color:black;
}

.top-logo{
    top: -50px;
    left:-50px;
    width:280px;
    position:absolute;
    }

    
header{ 
width:100%;
height:200px;
background:maroon;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
top:0;
margin-top:-50px;
margin-bottom:10px;
}

.header2{
 width:100%;
height:240px;
background:maroon;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;  
top:0;
}

.header2 p{
padding-top:50px;    
}
header p{
color:white;
text-align:right;
margin-top:10px;
}

footer{
background:maroon;
height:auto;
width:100%;   
padding:0px;
background-repeat:no-repeat;
background-size: cover;
margin:0;
font-size:0;
margin-top:-250px;
}

.footer2{
background:maroon;
height:auto;
width:100%;
background-repeat:no-repeat;
background-size: cover;
margin:0;
padding:0;
font-size:0;
position:absolute;
margin-top:-500px;
}


.topcontainer{
width:100%;
height:auto;
background:#eae1cf;
padding:0.8em;
margin-top:-850px;
margin-bottom:200px;
padding-bottom:400px;    
}

.topcontainer p{
padding:24px;
color:black;
}

.topcontainer h1{
text-align:center;
font-size:40px;
margin-top:100px;
margin-bottom:30px;
color:black;
opacity:0%;
transition:2s;
}

.topcontainer h1.is-active{
opacity:100%;    
}



.topcontainer img{
border-radius:50px;
width:600px;
height:600px;
margin-top:30px;
margin-left:440px;
}


.footer-logo{
width:300px;
height:auto;  
margin-left:500px;
}

h1{
text-align:center;  
font-family:"Permanent Marker", cursive;
font-size:50px;
}    

.footer2 p{
text-align:justify;   
font-size:20px;
margin-top:3px;
margin-left:500px;
    
}

footer p{
color:white;  
text-align:justify;
font-size:20px;  
padding-right:5px;
margin-top:3px;
margin-left:500px;
}
.sushi{
width:100%;
height:auto;    
}

.menusushi{
width:70px;
margin-left:750px;  
margin-bottom:-50px; 
animation:sushi 4s linear infinite;
animation-direction: alternate;
}

@keyframes sushi{
0%{transform:rotate(20deg)}
100%{transform:rotate(-20deg)}   
}

.menulist{
display:flex;  
margin-left:780px;
font-weight:900;
margin-top:-10px;
}

.menulist a{
text-decoration: none;    
font-size:23px;    
padding:2px;
gap:20px;
margin:0;
padding:0;
color:white;
transition:1s;
font-family:"Permanent Marker", cursive;
}

.menulist a:hover{
border-bottom:1px white solid;  
color:#edde7b
}

.menulist li{
list-style: none; 
gap:0;margin:0;
padding:10px;
}

.ukiyoe{
width:500px;
border-radius:100%; 
margin-left:800px;
position:relative;
opacity:80%;
top:-1100px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
animation: ukiyo 2s ease 1;
animation-direction:alternate;
}

@keyframes ukiyo{
0%{opacity:40%; filter:sepia(9); transform:rotate(360deg)};
100%{opacity:0%};
}

.menubg{
background:#eae1cf;
background-repeat:no-repeat;
background-size:cover;

}

.chatbot{
 width:500px;
 height:50px;
 background:#d4dcda;
 color:black;
 border:transparent solid 2px; 
 border-radius:50px;
 font-size:18px;
 padding:1em;
 padding-bottom:40px;
 position:relative;
 margin-bottom:20px;
 opacity:80%;
 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 animation-name:"textanime";
 animation-fill-mode:backwards;
 animation-iteration-count:1;
 animation-timing-function:ease;
 animation-delay: 1s;
 animation-duration:3s;
 animation-direction:alternate;
}

.chatbot::after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(0, 153, 255, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-top: -10px;
    border-right-color:#d4dcda;
    right:100%;
    top:50%;
}


.chatbot:nth-child(1){
background:#0095d9;
color:white;
margin-bottom:20px;
left:-50px;
animation-delay:1s;
}
.chatbot:nth-child(1)::after{
 border-right-color:#0095d9;
 border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(0, 153, 255, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-top: -10px;
    border-left-color:#0095d9;
    left:100%;
    top:50%;
}

.chatbot:nth-child(2){
animation-delay:3s;    
left:-80px;
}


.chatbot:nth-child(3){
background:#0095d9;
color:white; 
margin-bottom:20px;   
left:-50px;
padding-top:5px;
animation-delay:5s;
padding-bottom:60px;

}
.chatbot:nth-child(3)::after{
    border-right-color:#0095d9;
    border: solid transparent;
       content:'';
       height:0;
       width:0;
       pointer-events:none;
       position:absolute;
       border-color: rgba(0, 153, 255, 0);
       border-top-width:10px;
       border-bottom-width:10px;
       border-left-width:10px;
       border-right-width:10px;
       margin-top: -10px;
       border-left-color:#0095d9;
       left:100%;
       top:50%;
       animation-delay:6s;
}
.chatbot:nth-child(4){
    background:#d4dcda;
    color:black;
    margin-bottom:20px;   
    left:-80px;
    animation-delay:7s;
    }



.chatcontainer{
top:-700px;
position:relative;    
z-index:5;
margin-right:700px;
margin-bottom:20px;
}

#slider {
    width: 100%;
    height:100vh;    
    margin-top: -270px;
    position:relative;
    top:0;
    font-size:0;
}

.nigiri{
font-size:20px; 
text-align:justify; 
padding:1.1em;
width:300px;
height:300px;
transition:1s;
position:relative;
z-index:5;
margin:10px;
margin-top:50px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
flex-shrink: 0;
opacity:90%;
}


.nigiri:nth-child(1){
border:  #6b6f59 solid 2px;
background:#6b6f59;
position:relative;
}

.nigiri:nth-child(1):after{
top:256px;
right:-35px;;  
content:'No.1';
position:absolute;
width:50px;
height:30px;
font-weight:900;
background:red;
font-size:15px;
padding:0.4em;
padding-top:10px;
padding-left:25px;
color:yellow;
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
animation:arrow 2s linear infinite;
z-index:50;
opacity:98%;


}

@keyframes arrow{
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.0, 1.0) translate(10%, 0%) skew(-10deg, 0deg); }
  60%  { transform: scale(1.0, 1.0) translate(20%, 0%) skew(-20deg, 0deg); }
  70%  { transform: scale(1.0, 1.0) translate(-15%, 0%) skew(15deg, 0deg); }
  80%  { transform: scale(1.0, 1.0) translate(15%, 0%) skew(-15deg, 0deg); }
  80%  { transform: scale(1.0, 1.0) translate(5%, 0%) skew(-5deg, 0deg); }
  90%  { transform: scale(1.0, 1.0) translate(-5%, 0%) skew(5deg, 0deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}  


.nigiri:nth-child(2){
background:#426579;
border:#426579;
padding:0.4em;
width:350px;
z-index:2;
position:relative;
}

.nigiri:nth-child(3){
  background:#6b6f59;
  border:#6b6f59;
  padding:1em;
  }
  


.nigiri:nth-child(4){
  background:#426579;
  border:#426579;
  }
  


.nigiri td{
padding-left:80px; 
font-weight:900; 
color:#fff1cf;
}

.nigiri th{
font-weight:normal;  
color:#fff1cf;
}


.nigiri span{
font-size:30px;  
font-family:"Permanent Marker", cursive;
animation:h1anime 2s ease forwards;

}



.sushimenu-container{
width:100%;
height:500px;;  
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content: space-between; 
align-items: flex-start;
justify-content: flex-start;
margin-bottom:300px;
margin-top:100px;
}

.sushimenu{
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
width:100%;
height:180px;
border:transparent 1px solid;
background-image:url('downloads/sushi3.png');
background-repeat:no-repeat;
background-size:cover;
padding-top:30px;
margin-top:-10px;
}

.sushimenu span{
color:white;  
animation:h1anime 3s ease-in forwards;
}

@keyframes h1anime{
0%{opacity:0%;}
100%{opacity:100%;}
}

.sushipic{
width:300px;
height:300px;
opacity:60%;
margin:0;
}

.sushipiccon{
width:100%;
height:auto;  
display:flex;  
margin:0;
gap:30px;
flex-grow:1;
padding:0;
margin-left:400px;
margin-top:-300px;
margin-bottom:50px;
}

.topneko{
  width:500px;  
  margin-top:-600px;
   }
 
 
 /*gallery*/

 /*並び替えボタンチェックマークのCSS*/
 .btn{
   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
   background:#44617b;
   padding: 20px;
   margin:50px 0;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   background-repeat:no-repeat;
   margin-bottom:50px;
 }
 
 .btn dt{
   font-weight: bold;
   margin:0 0 10px 0;
   color:white;
 }
 
 .btn dd{
   margin:0 0 10px 0;
 }
 
 .btn ul{
   display: flex;
   flex-wrap: wrap;
 }
 
 .btn li{
   margin:0 10px;
 list-style:none;
 }
 
 .btn ul li{
   position: relative;
   cursor: pointer;
   padding:0 0 0 30px;
   margin:0 10px 0 0;
   color:white;
 }
 
 /*横幅が810px以下になった際の指定*/
 @media only screen and (max-width: 810px) {
 .btn li{
   width:100%;
   margin:0;
 }
   
 .btn ul li{
   width:auto;
 }
   
 }
 
 /*チェックマークの設定*/
 .btn ul li::before{
   content:'';
   position: absolute;
   left:0;
   width:20px;
   height:20px;
   border:2px solid #d6c6af;
 }
 
 .btn ul li.active::after{/*現在地=sctiveというクラス名がついたらチェックマークを出現*/
   content:'';
   position: absolute;
   left:5px;	
   top:0;
     /*チェックマークの色や形*/
   border-left:2px solid maroon;
   border-bottom:2px solid maroon ;
   width:16px;
   height:9px;
   transform:rotate(-45deg);
 }
 
 
 
 /*Muuriのレイアウトのための調整 */
 .grid {
   position: relative;/*並び替えの基準点を指定*/
 }
 
 /*各画像の横幅などの設定*/
 .item {
   display: block;
   position: absolute;
   width: 33%;/*横並びで3つ表示*/
   padding:0 10px 10px 10px;
   z-index: 1;

 list-style:none;
 }
 
 .item:hover{
 opacity:80%;  
 }
 
 /*内側のボックスの高さが崩れないように維持*/
 .item-content {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
 .grid img{
   width:100%;
   height:auto;
   vertical-align: bottom;/*画像の下にできる余白を削除*/
 }
 
 /*横幅が768px以下になった際の指定*/
 @media only screen and (max-width: 768px) {
 .item {
   width: 49.5%;/*横並びで2つ表示*/
   padding: 0 5px 10px 5px;
 }
 }
 
 
 /*fancyboxサムネイル背景と画像選択時の枠線の指定*/
 .fancybox-thumbs {
     background: transparent!important;
     color:white;
 }
 
 .fancybox-thumbs__list a:before {
     border: 6px solid #FA999B;
 }

 .menucon{
 margin-bottom:300px; 
 }
 
 .animation{
width:300px;
height:300px;
background:#6c848d;
animation-direction:alternate;
opacity:80%;

}

@keyframes anime{
0%{border-radius:5px;} 
40%{border-radius:30px;}
80%{border-radius:50px; }
100%{border-radius:100px; opacity:100%}
}

.testimonial{
background:#eae1cf;    
width:100%;
height:auto;
background-size:cover;
opacity:80%;
animation-direction:alternate;
z-index:1;
position:relative;
}



.testimonial p{
text-align:center;
width:100%;
height:auto;
background:#6c848d;
border-radius:50px;
padding:2em;
}



.testimonial h2{
margin-top:-100px;
margin-left:200px;
transform:rotate(20deg);
}



.testimonial h2 span{
color:maroon;
font-size:150px;
margin-left:500px;
font-weight:bold;
animation:shine 2.5s ease-in-out ;
animation-direction:alternate;
	-webkit-text-stroke: 0.02em rgba(60,60,60);
opacity:0%;
transition:2s;
}

.testimonial h3 span{
font-size:150px;
margin-left:200px;
font-weight:bold;
color:#f8e58c;
animation:shine 2.5s ease-in-out ;
animation-direction:alternate;
	-webkit-text-stroke: 0.02em rgba(60,60,60);
opacity:0%;
transition:2s;
}

.testimonial h2 span.is-active{
opacity:100%;    
}

.testimonial h3 span.is-active{
opacity:100%;    
}


.testimonial h3{
margin-top:50px;    
}
.testimonial img{
width:600px;
height:600px;
margin-left:1px;
transform:rotate(30deg);
animation:maneki 2s linear;
animation-direction:alternate;
margin-top:200px;
}

.testimonial img:nth-child(2){
width:300px;
height:auto;  
left:-80px;
position:relative;
animation:sushi 2s linear infinite;
animation-direction:alternate;
}

.testimonial img:nth-child(1).is-active{
  animation:maneki linear 2s forwards;
  animation-direction:alternate;
}


.testimonial:before{
content:"“";
top:100px;
left:5px;
position:relative;
font-size:100px;
color:#203744;
animation:sushi 5s linear;
}

.testimonial:after{
content:"”";
top:-310px;
right:800px;
position:relative;
font-size:100px;
}

.ilovesushi{
width:100%;
height:auto;
background:transparent;
color:black;
margin-top:120px;
font-size:100px;
animation:osushi 10s linear infinite;

}

@keyframes osushi{
0%{transform:translate(100%);}
100%{transform:translate(-100%);
}
}



@keyframes maneki{
0%{opacity:10%;}  
50%{opacity:50%;}
100%{transform:rotateX(1turn) rotateZ(1turn) rotate(20deg)}
}

.speciaslbox{
background-image:url("downloads/Untitled design-39.png");
width:100px;
height:auto;
position:fixed;
}

.hamburger{
    width:40px;
    height:25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
 right:20px;
  z-index: 100;
  cursor: pointer;
  margin-top:50px;
  margin-right:20px;
}

.hamburger2 {
    width:40px;
    height:25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
 right:20px;
  z-index: 100;
  cursor: pointer;
  margin-top:50px;
  margin-right:20px;
}

.hamburger span{
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  z-index:101;

}
.hamburger span:first-of-type{/* humburger menu 1st border */
  top: 0;
}
.hamburger span:nth-of-type(2){/* second border */
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:last-of-type{/* third border */
  top: auto;
  bottom:0;
}

.hamburger2 span{
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: white;
  z-index:101;

}
.hamburger2 span:first-of-type{/* humburger menu 1st border */
  top: 0;
}
.hamburger2 span:nth-of-type(2){/* second border */
  top: 50%;
  transform: translateY(-50%);
}
.hamburger2 span:last-of-type{/* third border */
  top: auto;
  bottom:0;
}


.slide-menu{

  width: 100%;
  height:auto;
  right:0;
  top:65px;
  color:black;
  transform: translateX(100%); 
  transition: .5s;
  display:block;
  position:relative;
  z-index:110;
  background-size:cover;
  background-repeat:no-repeat;
  background-image:url("downloads/Untitled design-39.png");
  opacity:90%;
}
  
  
 
.slide-menu li{
  color:black;
  line-height: 300%;
  text-align:justify;
  font-weight:bold;
  padding-left:10px;
  list-style:none;
}

.slide-menu a{
    font-size:30px;
 color:black;
 font-family:"Permanent Marker", cursive;
 text-decoration:none;
 color:black;
}

.slider-menu a:hover{
color:  #e29676; 
}

.slide-menu.active{
  transform: translateX(0); 


}