body{
    overflow-x:hidden;
    margin:0;
}


  

*{
    box-sizing:border-box;
      margin:auto;
font-family:"Raleway", sans-serif;
     color: #4e454a;
    
}



html {
  padding:1px;
  overflow-x:hidden;
  min-height:100%;
  line-height:1.5;
  font-size:0.9rem;
  background-image:#fff;
  background-size:cover;
  background-repeat: no-repeat;
  font-family:"Times New Roman", san-serif;
}

p{
font-size:20px;    
}

.purr{
  padding: 15px 30px;
  margin-bottom:50px;
  margin-top:50px;
   z-index:200;;
  position:relative;
 
}

header{
width:100%;
height:auto;
text-align:center;
font-size:20px;
margin-top:-24px;
color:white;
padding-top:5px;
background:pink;
top:0;
background-image: linear-gradient(90deg, rgba(253, 177, 170, 0.78), rgba(240, 226, 226, 0.78));
}

header p{
font-size:15px;
animation:nagareru 20s linear infinite
}

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

h1{
font-size:40px;    
}

a{
text-decoration:none;    
}

.top-logo{
top: -40px;
left:-50px;
position:absolute;
width:300px;
z-index:100;
}

.menu-list{
display:flex; 
justify-content:center;
margin:0;
padding:0;
font-size:0;
}

.menu-list li{
list-style: none;  
gap:0;
margin:0;
padding:10px;
font-size:30px;
font-family:"Spicy Rice", sans-serif;
}

.menu-list a{
text-decoration: none;
font-family:"Spicy Rice", sans-serif;  
color:white;
transition:2s;
}

.menu-list a:hover{
color:rgb(255, 179, 37);
}
.orderbtn{
width:200px;
height:50px;
background-image: linear-gradient(90deg, rgba(243, 170, 196, 1), rgba(246, 190, 232, 1) 33%, rgba(255, 247, 216, 1) 76%, rgba(183, 187, 255, 1));
border-radius:50px;
padding:1em;
padding-left:3.8em;
margin-top:-300px;
margin-bottom:300px;
margin-left:600px;
color:grey;
transition:1s;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
font-weight:900;
}

.orderbtn:hover{
border-bottom:none;
position: relative;
 top: 6px;
}

.pagetopcontainer{
width:100%;
height:auto;
z-index:0;
position:relative;
padding:1em;
margin-top:-200px;
background-image:url("downloads/barpic.png");
margin-bottom:200px;
}

.topboba{
  position:absolute;
margin-left:800px;  
margin-top:-400px;
animation:bobatea 5s linear infinite; 
animation-direction: alternate;
}
@keyframes bobatea{
 0%{transform:rotate(10deg)}

 100%{transform:rotate(-10deg);}

}
.movingbg{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    margin-top:-100px;
    transform: translate(-50%,-50%);
    margin-left:-300px;
  }
  
#photo{
position:absolute; 
}
  .movingbg h1{
  color:rgba(171,134,78,0.1);
    font-size: 100px;
    font-weight: 900;
    background-image: url(downloads/bobavid-2.mp4);
    background-size:1000px;
    -webkit-background-clip: text;
  }

footer{
  width:100%; 
  height:auto;
text-align:center;
color:white;
margin-top:2px;
margin-bottom:0;
background-image: linear-gradient(90deg, rgba(253, 177, 170, 0.78), rgba(240, 226, 226, 0.78));
}
  

  .topmilk{
  margin-left:700px;  
  }

  .buyone{
  font-family:"Spicy Rice", serif;
  font-size:60px;
  font-weight:900;  
  z-index:0;
 
position:relative;  
margin-top:-620px;
margin-left:800px;
margin-bottom:500px;
color: #FDF5E6;
	text-shadow:
		1px -1px 1px #BDBDBD,
		-1px 2px 1px #737272,
		-2px 4px 1px #767474,
		-3px 6px 1px #787777,
		-4px 8px 1px #424242,
		-5px 10px 1px #616161,
		-6px 12px 1px #757575,
		-7px 14px 1px #9E9E9E,
		-8px 16px 1px #BDBDBD,
		-9px 18px 1px #E0E0E0;
}

  .buyone::before{
left:0;
top:-10px; 
content:"$8 for two drinks " ;
font-size:15px;
position:absolute;
padding-bottom:10px;
text-shadow:none;
color:black;

  }

  .topneko{
 width:500px;  
 margin-top:-400px;
  }


/*==================================================
ギャラリーcss
===================================*/
/*並び替えボタンチェックマークのCSS*/
.btn{
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background:rgb(195, 246, 195);
	padding: 20px;
	margin:50px 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
  border-radius:50px;
  background-repeat:no-repeat;
  margin-bottom:50px;
}

.btn dt{
	font-weight: bold;
	margin:0 0 10px 0;
}

.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;
}

/*横幅が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 #8f6552;
}

.btn ul li.active::after{/*現在地＝activeというクラス名がついたらチェックマークを出現*/
	content:'';
	position: absolute;
	left:5px;	
	top:0;
    /*チェックマークの色や形*/
	border-left:2px solid tan;
	border-bottom:2px solid tan;
	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;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}

.menu{
text-align:center;  
font-size:50px;
font-family:"Spicy Rice", sans-serif;
color: transparent;
line-height:0.95em;
	font-weight:bold;
	background: repeating-linear-gradient( 45deg, pink 0 0.4em, orange 0.4em 0.8em);
	-webkit-background-clip: text;
opacity:1%;
transition:2s;
}

.menu.is-active{
opacity:100%;    
}

table{
text-align:justify;  
font-size:20px;
}

.directionbtn{
width:200px;
height:50px;
background:transparent;
border:#de82a7 solid 1px;
padding:0.7em;
color:#de82a7;
padding-left:2em;
padding-top:0.8em;
margin-bottom:10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margin-top:20px;
font-size:15px;
}

.title{
text-align:center;
margin-bottom:30px; 
margin-top:20px; 
}

.storeinfo{
    background: -webkit-linear-gradient(left,   rgb(255, 207, 230) 40%, transparent 60%);
    background: -moz-linear-gradient(left,   rgb(255, 207, 230) 40%, transparent 60%);
    background: linear-gradient(left,  rgb(255, 207, 230) 40%, transparent 60%);
  background-repeat: no-repeat;
  background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;
}
.storeinfo.is-active{
    background-position: 0% .5em;
}

.tapi{
width:150px;
height:auto;  
margin-left:900px;
}

.back-to-top {
  color:white;
  position: fixed;
  right: 20px;
  bottom: 20px;
  height: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 100%;
  line-height: 1.5rem;
  width:80px;
  height:80px;
  border-radius:100px;
  border:cadetblue dotted 1px;
  padding-top:2em;
  padding-left:1.8em;
  background:transparent;
  z-index:100;
}
  
.back-to-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 100px;
  height:100px;
  transform-origin: left top;
  }
  
  
  
    
  @media screen and (max-width: 478px) {
 .back-to-top{
  font-size:20px;   
 }}


.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;
}

.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;
}


.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-image: linear-gradient(90deg, rgba(255, 205, 99, 1), rgba(209, 253, 254, 1));
}
  
  
 
.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:"Spicy Rice", sans-serif;
 text-decoration:none;
 color:white;
}

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

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


}

.frappe{
width:500px;
height:500px;
margin-left:450px;  
margin-top:50px; 
transition:5s;
opacity:0%;
filter: sepia(1);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;
animation:kurukuru 10s linear 1;
z-index:1;
position:relative;
}

@keyframes kurukuru{
0%{transform:rotate(0)} 
100%{transform:rotate(360deg)}
}

 .frappe.is-active{
opacity:100%;
filter:none;
}
.accordion{
    margin-top: 10px;
  }
  
  .accordion__container {
    width: 800px;
    height:auto;
    margin-bottom:300px;
  }
  
  
  .accordion__title {
    border: 1px dotted #25b7c0;
    color: grey;
    font-size: 25px;
    padding: .620em .620em .620em 2em;
    position: relative;
    cursor: pointer;
    user-select: none;
    text-align:left;
    border-radius:30px;
    margin-bottom:30px;
  }
  
  
  .accordion__title::before, .accordion__title::after {
    content: '';
    display: block;
    background-color: orange;
    position: absolute;
    top: 50%;
    width: 15px;
    height: 2px;
    right: 25px;
  }
  
  .accordion__title::after {
    transform: rotate(90deg);
    transition-duration: .3s;
  }
  
  .accordion__title:active,
  .accordion__title.is-active { 
    background-color:transparent;
  }
  
  .accordion__title:hover{
    background:aliceblue;  
  }
  
  
  .accordion__title.is-active::before {
    opacity: 0;
  }
  
  .accordion__title.is-active::after {
    transform: rotate(0);
  }
  
  .accordion__content {
    padding: 0 1.2em;
    line-height: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    font-size:20px;
    color: grey;
    text-align:justify;
  
    transition-duration: .3s;
  }
  
  .accordion__content.is-open {
    padding: 1em;
    padding-top:0em;
    line-height: normal; /* change to number*/
    height: auto;
    opacity: 1;
  }
  
  .storehours li{
list-style:none;
font-size:20px;
  }