@charset "utf-8";

* { margin:0; padding:0; -webkit-box-sizing: border-box;	-moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; }

body {
	display:none;
	color:#413f39; 
	font-family: tbudgothic-std,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size:14px;
	line-height:1.8;
	-webkit-text-size-adjust:100%; overflow-x:hidden; 
}

	@media only screen and (min-width: 768px) {
		.onlySp {
			display: none!important;
		}
	}
	@media only screen and (max-width: 767px) {
		.onlyPc {
			display: none!important;
		}
	}

	@font-face {
	  font-family: 'myFont';
	  src: url('../font/coffee_tea.eot'); /* IE9 Compat Modes */
	  src: url('../font/coffee_tea.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	       url('../font/coffee_tea.woff2') format('woff2'), /* Super Modern Browsers */
	       url('../font/coffee_tea.woff') format('woff'), /* Pretty Modern Browsers */
	       url('../font/coffee_tea.ttf')  format('truetype');
	}
	.coffee_tea {
		font-family: "myFont";
	}
	
	@font-face {
	  font-family: "myFont2";
	  src: url("../font/PotatoesAndPeas.eot?") format('eot');
	   src: url('../font/PotatoesAndPeas.eot?#iefix') format('embedded-opentype'),
	       url("../font/PotatoesAndPeas.woff2") format('woff2'),
	       url("../font/PotatoesAndPeas.woff") format('woff'),
	       url('../font/PotatoesAndPeas.ttf')  format('truetype');
	}
	.potatoes_peas {
		font-family: "myFont2";
	}
	
	
	tbudgothic_r { font-family:tbudgothic-std, sans-serif; font-weight:400; font-style:normal; }
	tbudgothic_b { font-family:tbudgothic-std, sans-serif; font-weight:700; font-style:normal; }


		img { max-width:100%; }
		ul { list-style:none outside; }
		.clr:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
		.clr { min-height:1px; clear:both; }
		* html .clr { height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }
		
		#drawerMenu button { position:fixed; top:30px; z-index:10; }
		
		#mainVisual { height:100vh; background:#ccc; position:relative; display: flex;  justify-content: center;  align-items: center; }
		#mainVisual h1 { position:absolute; top:40px; left:5%; z-index:10;mix-blend-mode: multiply; }

		#mainVisual .main_content { display: flex;  justify-content: center;  align-items: center; }
		#mainVisual .instagram_link { position:absolute; bottom:20px; left:5%; z-index:10; font-size:21px; }
		#mainVisual .instagram_link a { text-decoration:none; color:#413f39; letter-spacing:0.1em; position:relative; padding-left:37px; line-height:24px; display:inline-block; }
		#mainVisual .instagram_link a:before{ content:""; position:absolute; left:0; top:0; width:24px; height:24px; background:url(../img/ico_instagram.png) no-repeat center left / cover; }
		
		
			
			.itemList { width:100%; }
			.item{ opacity: 0; }
			.item:nth-child(1) { position:absolute; bottom:0; left:5%; width:90%; }
			.item:nth-child(3) { font-size:30px; color:#666; position:absolute; top:50%; left:calc(50% - 20%); }
			.item:nth-child(4) { font-size:30px; color:#666; position:absolute; top:50%; right:calc(50% - 20%); }
			
			@keyframes bg-slider {
				from { background-position: 0 0; }
			    to { background-position: -1560px 0; }
			}
			
			.item:nth-child(1) { -webkit-animation: example 1s ease 1s 1 forwards; animation: example 1s ease 1s 1 forwards; }
			.item:nth-child(2) { -webkit-animation: example 1s ease 2s 1 forwards; animation: example 1s ease 2s 1 forwards;}
			.item:nth-child(3) { -webkit-animation: example 1s ease 3s 1 forwards; animation: example 1s ease 3s 1 forwards; }
			.item:nth-child(4) { -webkit-animation: example 1s ease 4s 1 forwards; animation: example 1s ease 4s 1 forwards; }

			@-webkit-keyframes example {
			  100% { opacity: 1; }
			}
			@keyframes example {
			  100% { opacity: 1; }
			}
			
			/**/
			
			#slide { max-width:100%; margin:0 auto; /*position:relative;*/ }
			#slide ul { max-width:100%; margin:0 auto; /*position:absolute;*/  }
			#slide li {  text-align:center; position:absolute; overflow:hidden; width:100%; height:100vh; display: flex;  justify-content: center;  align-items: center; }
				#slide li:nth-child(1) { background:#c0948b; }
				#slide li:nth-child(2) { background:#b5e8d5; }
				#slide li:nth-child(3) { background:#fed9d3; }
			#slide li.hide { /*position:relative;*/ opacity:0!important; width:100%; height:100vh; }
			#slide img { margin:0 auto; position:relative; /*position:absolute; left:0; top:0;*/ }
			



		.container { /*position: relative ;height: 0 ;	padding: 0 0 56.25% ;*/	}
		/*.container iframe {	position: absolute!important; width: 100%!important; height: 100%!important; margin: 0!important; padding: 0!important; }*/

/*
.fadein { opacity:0; transform:translate(0, 50px); transition:all 0.5s; }
.fadein.scrollin { opacity:1; transform:translate(0, 0); }*/

		
		#enjoyDrink h2 { margin-top:-90px; font-size:51px; letter-spacing:0.05em; padding-top:70px; margin-bottom:50px; text-align:center; background:url(../img/bg_enjoy.png?ver=20190212) no-repeat top center; position:relative; z-index:2; }
		#enjoyDrink { background:#f0ece9; padding:50px 0 80px; }
		.enjoyDrink_inner { /*max-width:1100px;*/ max-width: 950px; padding:100px 0 200px 500px; margin:0 auto 50px; text-align:left; background:url(../img/img_enjoy.png) no-repeat center left / 65% auto; }
		.enjoyDrink_txt { /*display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center;*/ }
		.enjoyDrink_txt li:last-child { /*width:27em;*/ }
		.enjoyDrink_txt h3 { font-size:19px; padding-left:20px; display:block; }
		.enjoyDrink_txt p { margin:0 0 30px; line-height:2; }
		.enjoyDrink_txt li:first-child { margin-bottom:30px; }
		
		#menuList { padding:0 0 50px 0; text-align:center; font-size:24px; margin-bottom:30px; }
		#menuList h3 { margin-top:-48px; font-size:51px; letter-spacing:0.05em; padding-top:50px; text-align:center; background:url(../img/bg_menu.png) no-repeat top center; position:relative; z-index:2; }
		/*#menuList h3 { margin-top:-40px; }*/
		.menu_content { padding:30px 0 0 0; }
		#menuList h4 { text-align:center; margin:30px 0; font-size:36px; }
		#menuList ul { display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction: row; max-width:1300px; padding:0 20px; margin:0 auto; }
			#menuList ul::before{ content:""; display: block; width:19%; order:1; margin: 0 3% 0; }
			#menuList ul::after{ content:""; display: block; width:19%; margin: 0 3% 0; }
		
		#menuList li { width:18.5%; position: relative; margin: 0 3% 150px; }
		#menuList li:before{ content: ""; display: block; padding-top: 100%; }
		#menuList li img { border-radius:5px; position:absolute; width:100%; height:100%; top:0; right:0; bottom:0; left: 0;margin:auto; object-fit: cover; }
			.image { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; }
			.middle { transition: .5s ease; opacity: 0; position: absolute; top: 50%;  left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);  text-align: center; }
			.text { background-color: #666; color: white; font-size: 12px; padding:5px 10px; letter-spacing:0.15em; }
		/*#menuList li:hover .middle { opacity: 1; }*/
		#menuList a:hover img { opacity: 0.5; }
		#menuList .menuLabel { position:absolute; bottom:-100px; bottom:-30%; text-align:center; line-height:1.1; width: 100%; font-size:26px; color:#665656; }
			.shotens { letter-spacing:-0.065em; margin-left:-5px; margin-right:-5px; }
		#menuList .menuLabel .price { display:block; margin:5px 0; font-size:28px; font-weight:bold;  }
		#menuList .menuLabel .price span { font-size:18px; padding-left:5px; }
		
		
		#areaMap { width:100%; padding:30px 0; }
		h3.mapTitle { text-align:center; font-size:52px; letter-spacing:0.025em; margin:30px 0; padding-top:80px; position:relative; background:url(../img/ico_access.png) no-repeat top center; }
		
		.ChangeElem_Btn_Content { max-width:1280px; margin:0 auto; }
		.ChangeElem_Btn_Content button { border:none; background:#fff; cursor:pointer; }
		.ChangeElem_Btn.is-active { background:pink; }
		.ChangeElem_Panel{ display:none; margin:10px 0 0; }
		
		#mapList, .ChangeElem_Btn_Content { display:flex; justify-content:center; flex-wrap:wrap; max-width:1080px; margin:0 auto 30px; }
		#mapList li, .ChangeElem_Btn_Content button { margin-right:10px; font-size:21px; letter-spacing:0.05em; position:relative; cursor:pointer; padding:0 10px; }
			#mapList li:after, .ChangeElem_Btn_Content button:after { content:" / "; width:1em; height:1em; position:absolute; top:0; right:-20px; }
			#mapList li:last-child:after, .ChangeElem_Btn_Content button:last-child:after { content:"";  }
		#mapList li.active, .ChangeElem_Btn_Content button.is-active { background:url(../img/img_bar.png) no-repeat bottom left; }
		.areaMap_inner { width:100%; min-height:690px; }
		
			.ChangeElem_Btn_Content button { border:none; outline:none; line-height:1.5; }
			
			.gmap-info-window { background:#dfc200; width:230px!important; height:130px; color:#fff; padding:10px; position:relative; }
				.gmap-info-window:after { content:""; position:absolute; top:100%; left:50%; margin-left:-10px; border:10px solid transparent;	border-top:10px solid #dfc200; }
			.gmap-info-window img { position:absolute!important; top:22px; right:25px; }
			.gmap-info-window-title { font-size:16px; margin-bottom:5px; }
			.gmap-info-window a { color:#fff; text-decoration:underline; }
			.gmap-info-window a:hover { color:#fff; text-decoration:none; }
		
 		 /*style the box*/
         .gm-style .gm-style-iw { background-color:#dfc200!important; top:0!important; left:0!important; width:230px!important; width:196px!important; height:auto!important; padding:5px 10px 15px 10px!important; display:block!important; text-align:left!important; border-radius:0;  }
         
         .gm-style .gm-style-iw > * { overflow:hidden!important; }
         
         .gm-style .gm-style-iw-t::after { content: ""; position: absolute; top: 0; left: 0; transform: translate(-50%,0); width: 0; height: 0; /*border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 11px solid #dfc200;*/ background:url(../img/ico_arrow_down.png) no-repeat top center; width:18px; height:11px; box-shadow: none; }
    	.gm-style-iw-t::before {content: ""; position: absolute; top: 0; left: 0; transform: translate(-50%,0); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid rgba(0,0,0,0.1); }
    	
    	
    	
    	
    	
		
         /*style the p tag*/
         .gm-style .gm-style-iw h3 { margin:10px 0; font-size:16px; border-bottom:1px dotted #fff; }
         .gm-style .gm-style-iw p { padding:0px; font-size:14px; }
		
        /*style the arrow*/
        .gm-style div div div div div div div div { padding: 0; margin: 0; padding: 0; top: 0; color: #fff; font-size:14px;  }
        
        /*style the link*/
        .gm-style div div div div div div div div a { color: #fff; }
        
        .gm-ui-hover-effect:after { content:"×"; position:absolute; top:5px; right:10px; color: #fff; font-size:20px; font-weight:bold; }
        .gm-ui-hover-effect img { display:none!important; }

		.gm-style div:nth-child(3) > div:nth-child(1) > div:nth-child(1),
		.gm-style div:nth-child(3) > div:nth-child(2) > div:nth-child(1) { background-color: #dfc200 !important; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px!important;}
		


.buruburu {
    -webkit-animation:buruburu 0.1s infinite linear alternate;
    animation:buruburu 0.1s infinite linear alternate;
}

@-webkit-keyframes buruburu {
    0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
    50% {-webkit-transform:translate(0, -1px) rotate(0deg);}
    100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}

@keyframes buruburu {
    0% {transform:translate(0, 0) rotate(-3deg);}
    50% {transform:translate(0, -1px) rotate(0deg);}
    100% {transform:translate(0, 0)rotate(3deg);}
}



		
		
		#footer { padding:50px 0; text-align:center; }
		#footer p { font-size:86px; line-height:1.0; }
		#footer .copyright { font-size:13px; margin-top:20px; letter-spacing:0.025em; }
		#footer a { font-size:18px; color:#413f39; letter-spacing:0.025em; }
		
		
		
		@media print, screen and (max-width:1024px) {
			#menuList .menuLabel { font-size:2.5vw; /*bottom:-110px; bottom:-80px;*/ }
			#menuList li { margin: 0 3% 100px; }
		}
		
		
		@media print, screen and (max-width:900px) {
			.enjoyDrink_inner { padding:100px 0 200px 50%; background: url(../img/img_enjoy.png) no-repeat center left / 65% auto; }
		}
		
		
		@media print, screen and (max-width:767px) {
		
			#mainVisual h1 { top:20px; left:5%; width:35%; }
			#mainVisual .instagram_link { bottom:5%; }
			#drawerMenu button { top:10px; }
			
			#enjoyDrink { padding:30px 0 80px; }
			#enjoyDrink h2 { margin-top:-68px; font-size:8vw; padding-top:10%; margin-bottom:30px; background:url(../img/bg_enjoy.png) no-repeat top center / 30% auto; }
			.enjoyDrink_inner { text-align:center; padding:0 0 110%; margin:0 auto 0; background: url(../img/img_enjoy.png) no-repeat center bottom/ contain; }
			.enjoyDrink_inner .enjoyDrink_txt { padding:0 20px; font-size:12px; }
			.enjoyDrink_inner .enjoyDrink_txt h2 { font-size:11vw; margin-bottom:10px; letter-spacing: 0.1em; padding:0; }
			.enjoyDrink_inner .enjoyDrink_txt h3 { padding:0; font-size:16px; margin-bottom:30px; }
			.enjoyDrink_inner .enjoyDrink_txt li:first-child,
			.enjoyDrink_inner .enjoyDrink_txt li:last-child { width:100%; }
			.enjoyDrink_inner .enjoyDrink_txt p { margin-bottom:15px; }
			.enjoyDrink_inner .enjoyDrink_txt p:first-child { margin-left:0px; }
			
			
			#menuList { margin-bottom:0px; padding-bottom:0; }
			#menuList h3 { margin-top:-40px; font-size:8vw; padding-top:10%; background:url(../img/bg_menu.png) no-repeat top center / 30% auto; }
			/*#menuList h3 { margin-top:-8%; }
			#menuList h3 img { width:35%; }*/
			#menuList h4 { margin:15px 0; font-size:7vw; }
			#menuList li { width:44%; }
			#menuList .menuLabel { font-size:5.5vw; /*bottom:-120px; bottom:-70px;*/ }
			
			#areaMap { padding:40px 0 0 0; }
			h3.mapTitle { font-size: 10vw; margin:0 0 15px 0; line-height:1; padding-top: 60px; }
			h3.mapTitle { background:url(../img/ico_access.png) no-repeat top center / 20% auto; }
			.areaMap_inner { min-height:500px; background:url(../img/bg_map.png) no-repeat top center / cover; }
			#mapList { padding:0 20px; }
			#mapList li { font-size:16px; }
			.gm-style .gm-style-iw h3 { margin:5px 0; font-size:14px; }
        	.gm-style .gm-style-iw p { padding:5px; font-size:11px; }
			
			#footer { padding:10% 0 5%; }
			#footer p { font-size:15vw; }
			
		}
		@media print, screen and (max-width:600px) {
			#enjoyDrink h2 { margin-top:-50px; }
			#menuList h3 { margin-top:-23px;  }
		}
		
		@media print, screen and (max-width:450px) {
			#menuList .menuLabel { /*bottom:-100px; bottom:-60px;*/ }
		}

/* MAIN VISUAL cross fade */
.rslides_wrapper { width:100%; height:100%; }
.rslides { position:relative; list-style:none; overflow:hidden; width:100%; padding:0; margin:0; }
.rslides li { -webkit-backface-visibility:hidden; position: absolute; display:none; width:100%; left:0; top:0; }
.rslides li:first-child { position:relative; display:block; float:left; background:#fdd9d3; height: 100vh; display: flex;  justify-content: center;  align-items: center; }
	.rslides li:nth-child(1) { background:url(../img/bg_slide01.jpg) no-repeat top center / cover; /*#fdd9d3*/; height:100vh; display:flex; justify-content:center; align-items:center; }
	.rslides li:nth-child(2) { background:url(../img/bg_slide02.jpg) no-repeat top center / cover;/*#b5e8d5*/; height:100vh; display:flex; justify-content:center; align-items:center; }
	.rslides li:nth-child(3) { background:url(../img/bg_slide03.jpg) no-repeat top center / cover;/*#c0948b*/; height:100vh; display:flex; justify-content:center; align-items:center; }
.rslides img { display:block; height:auto; /*float:left;*/ width:auto; border:0; text-align:center; margin:0 auto; }



	@media print, screen and (max-width:767px) {
		.rslides img { margin:-50px auto 0; }
		.rslides li:nth-child(1) { background:url(../img/bg_slide01_sp.jpg) no-repeat top center / cover; }
		.rslides li:nth-child(2) { background:url(../img/bg_slide02_sp.jpg) no-repeat top center / cover; }
		.rslides li:nth-child(3) { background:url(../img/bg_slide03_sp.jpg) no-repeat top center / cover; }
		.rslides img.ex { margin-top:20px; }
	}



/*
#main-contents { opacity: 0;}
.loading { width:100%; height:100%; left:0%; top:0%; position: fixed;  display: flex;  justify-content: center;  align-items: center; }
.loading img { width:50px; height:50px; }*/




/*ACCCESS*/
#access{
	width: 100%;
	padding: 30px 0px 50px;
	font-family: "myFont";
	font-size: 16px;
}
#access h3.access-title{
	text-align: center;
    font-size: 52px;
    letter-spacing: 0.025em;
    margin: 30px 0;
    padding-top: 80px;
    position: relative;
    background: url(../img/ico_access.png) no-repeat top center;
}
#access .access-inner{
	display: flex;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto 30px;
	padding: 0 25px;
}
#access .access-area{
	min-height: 280px;
	position: relative;
}
#access .area-title{
	line-height: 2;	
	font-size: 36px;
	color: #665656;
}
#access .area-name{
	font-size: 1.0em;
	font-weight: bold;
}
#access span{
	display: block;
}
#access a{	
	display: inline-block;
	margin-top: 7px;
	color: #413f39;
	text-decoration: none;
	transform: all 0.3s;
}
#access a:hover{
	opacity: 0.85;	
}
#access a.lnk-map{
	background-color: #f0ece9;
	width: 189px;
	line-height: 45px;
	font-size: 20px;
	text-align: center;
	border-radius: 5px;
	position: absolute;
	left: 0px;
	bottom: 0px;
}
#access a.lnk-map:hover{

}
@media(max-width: 480px){
	#access h3.access-title{
		background: url(../img/ico_access.png) no-repeat top center / 20% auto;
		margin: 0 0 15px 0;
		line-height: 1;
		padding-top: 60px;
	}
	#access .access-inner{
		flex-wrap: wrap;
		justify-content: center;
	}
	#access .access-area{
		flex-basis: 270px;
		min-height: unset;
		padding-bottom: 50px;
	}
	#access .access-area:nth-of-type(2){
		margin-top: 50px;
		margin-bottom: 50px;
	}
}