@charset "utf-8";


.c-both{
	clear:both;
	}

/**************************
/*ローディング*
**************************/	

    /* ブラウザのスクロールバーを常に表示させることでカクカクッとなるのを防ぐ */
    html{
      overflow-y:scroll;
    }
     
    /* ローディング関係ない部分のCSS */
    .button{
      background:#FFF;
      border:1px solid #222;
      border-radius:5px;
      color:#fff;
      display:block;
      height:60px;
      line-height:60px;
      margin:30px auto;
      text-align:center;
      width:600px;
    }
    .button:hover{
      background:#fff;
      color:#222;
    }
    img{
      max-width:100%;
    }
     
    /* ローディングの背景部分のCSS */
    .loader{
      background:#000000;
      height:100%;
      left:0;
      position:fixed;
      top:0;
      width:100%;
      z-index:10;
    }
     
    /* ローディングのアニメーション部分のCSS (https://projects.lukehaas.me/css-loaders/) */
    .loader-animation,
    .loader-animation:before,
    .loader-animation:after {
      background:#ffffff;
      -webkit-animation:load1 1s infinite ease-in-out;
      animation:load1 1s infinite ease-in-out;
      width:1em;
      height:4em;
    }
    .loader-animation {
      height:10px;
      left:50%;
      margin:-5px 0 0 -5px;
      position:absolute;
      top:50%;
      width:10px;
      color:#ffffff;
      text-indent:-9999em;
      font-size:10px;
      -webkit-transform:translateZ(0);
      -ms-transform:translateZ(0);
      transform:translateZ(0);
      -webkit-animation-delay:-0.16s;
      animation-delay:-0.16s;
    }
    .loader-animation:before,
    .loader-animation:after {
      position:absolute;
      top:0;
      content:'';
    }
    .loader-animation:before {
      left:-1.5em;
      -webkit-animation-delay:-0.32s;
      animation-delay:-0.32s;
    }
    .loader-animation:after {
      left:1.5em;
    }
    @-webkit-keyframes load1 {
      0%,
      80%,
      100% {
        box-shadow:0 0;
        height:4em;
      }
      40% {
        box-shadow:0 -2em;
        height:5em;
      }
    }
    @keyframes load1 {
      0%,
      80%,
      100% {
        box-shadow:0 0;
        height:4em;
      }
      40% {
        box-shadow:0 -2em;
        height:5em;
      }
    }

/**************************
/*トップへ戻るボタン*
**************************/	


.topBtn {
  position:fixed; /*固定*/
  bottom:20px; /*場所を右下に移動*/
  right:20px; /*場所を右下に移動*/
  display:block; /*aタグをblock要素に変更*/
  background-color:#FFF; /*以下、デザイン*/
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:11px;
  width:60px;
  height:60px;
  text-align:center;
  line-height:22px;
  border-radius:30px;
  padding-top:30px;
  box-sizing:border-box;
  opacity: 0.7;
}
.topBtn:before {
  content:'\25B2';
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}
.topBtn:hover {
  opacity:0.5;
}




/**************************
/*ふわっと表示*
**************************/	



.fade-up {
  transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  -webkit-transition: opacity 0.7s;
  -o-transition: opacity 0.7s;
  transition: transform 0.7s;
  -moz-transition: transform 0.7s;
  -webkit-transition: transform 0.7s;
  -o-transition: transform 0.7s;
}


/**************************
/*全体*
**************************/	



#mainkyotobgw {
background-image:url("../../images/bg_yl.png");	
margin:0px;
padding:0px;
text-align:center;
	}


/* mainContent */
#mainContentky {
	margin:0px;
	padding:0px;
	}

#mainkyotobgfoot {
background-image:url("../../images/bg_gr.png");
margin:0px;
padding:0px;
text-align:center;
	}



.gentei{
	color:#336600;
}


.kikan{
	color:#d03030;
}

.kikan02{
	color:#cc9933;
}


/* 	スマホ             
---------------------------------------------------------- */
@media screen and (max-width: 736px) {
	


/* スマホを非表示
------------------------------------------------------------------------*/

.namepc{
	display:none;
	}	

#mainContentkyy .pcContentsArea {
		display: none;
	}

#mainContentky .pcContentsArea {
		display: none;
	}
/* テキスト
-----------------------------------*/	
.smallb{
	font-size:13px;
	}	

.redb{
	font-size:16px;
	color:#993333;
	}	
	

/* 予約
-----------------------------------*/	
	
.yoyaku{
	position:relative;
	margin: 0 auto;
	width:100%;
	max-width: 750px;
	margin-top:10px;
	text-align:center;
	}	
	
	
	
.yoyaku h3{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
	color:#333333;
	width:95%;
	max-width: 730px;
	margin-bottom: 10px;
	margin-left:10px;
	text-align:center;
	font-weight: 600;
	
	}

.yoyaku h5{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:13px;
	color:#333333;
	width:95%;
	max-width: 730px;
	margin-bottom: 30px;
	text-align:center;
	font-weight: 300;
	}			
	

.yoyakucmnt{
	position:relative;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
	color:#333333;
	width:95%;
	max-width: 730px;
	text-align:left;
	margin-left:10px;
	margin-top:10px;
	margin-bottom:10px;
}


/* インフォメーション
-----------------------------------*/	
	
.info{
	position:relative;
	margin: 0 auto;
	width:100%;
	max-width: 750px;
	margin-top:0px;
	text-align:center;
	}	

.infocmnt{
	position:relative;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
	line-height:23px;
	margin: 0 auto;
	width:95%;
	max-width: 730px;
	margin-top:0px;
	text-align:left;
	}	
	

	
	
/* メニュー
-----------------------------------*/		
.bmenuarea{
	position:relative;
	margin: 0 auto;
	width:100%;
	max-width: 750px;
	margin-top:0px;
	margin-bottom: 30px;
	text-align:left;
	}	
	


.bmenuarea .beer{
	position:relative;
	color: #FFFFFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
	line-height: 30px;
	margin: 0 auto;
	width:90%;
	max-width: 730px;
	margin-top:0px;
	margin-bottom: 30px;
	margin-left: 20px;
	text-align:left;
	}	
		

.bmenuarea  .beer .prod img{
	width: 270px;
	margin-top: 20px;
	margin-bottom: 5px;
	}
	
.bmenuarea  .beer .cmnt{
	margin-top:5px;
	margin-left: 3px;
	margin-bottom: 0px;
	}		
			
		
	
.bmenuarea .craft{
	position:relative;
	color: #FFFFFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
	line-height: 30px;
	margin: 0 auto;
	width:90%;
	max-width: 730px;
	margin-top:0px;
	margin-bottom: 30px;
	margin-left: 20px;
	text-align:left;
	}	
			

.bmenuarea  .craft .prod img{
	width: 270px;
	margin-top: 20px;
	margin-bottom: 5px;
	}
	
.bmenuarea  .craft .cmnt{
	margin-top:5px;
	margin-left: 3px;
	margin-bottom: 0px;
	}		
	
	
.bmenuarea .food{
	position:relative;
	color: #FFFFFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
	line-height: 30px;
	margin: 0 auto;
	width:90%;
	max-width: 730px;
	margin-top:0px;
	margin-bottom: 5px;
	text-align:left;
	4}
		

.bmenuarea  .food .cmnt{
	margin-top:10px;
	margin-left: 3px;
	margin-bottom: 0px;
	}		
			
	
	
	

}



/* 	PC            
---------------------------------------------------------- */

@media screen and (min-width: 737px) {
	


/* PCを非表示
------------------------------------------------------------------------*/

.namesf{
	display:none;
	}	

#mainContentkyy .contentsArea {
		display: none;
	}

#mainContentky .contentsArea {
		display: none;
	}


/* テキスト
-----------------------------------*/	
.smallb{
	font-size:16px;
	}	
	
.redb{
	font-size:23px;
	color:#993333;
	line-height:40px;
	}	
	
/* 予約
-----------------------------------*/	
	
	
.yoyaku{
	position:relative;
	margin: 0 auto;
	width:100%;
	max-width: 1000px;
	margin-top:10px;
	margin-bottom: 10px;
	text-align:center;
	}	

	
	
.yoyaku h3{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:23px;
	color:#333333;
	width:100%;
	max-width: 1000px;
	margin-bottom: 10px;
	text-align:center;
	font-weight: 600;
	
	}

.yoyaku h5{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:18px;
	color:#333333;
	width:100%;
	max-width: 1000px;
	margin-bottom: 30px;
	text-align:center;
	font-weight: 300;
	}		
	
	
.yoyakucmnt{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	color:#333333;
	width:100%;
	max-width: 1000px;
	margin-bottom: 10px;
	text-align:center;
}

/* インフォメーション
-----------------------------------*/	

.info{
	position:relative;
	margin: 0 auto;
	width:100%;
	max-width: 1000px;
	margin-top:0px;
	margin-bottom: 30px;
	text-align:center;
	}	
	
.infocmnt{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:21px;
	line-height:35px;
	color:#333333;
	width:90%;
	max-width: 890px;
	margin-left: 50px;
	text-align:left;
}

	
/* メニュー
-----------------------------------*/		
.bmenuarea{
	position:relative;
	margin: 0 auto;
	width:100%;
	max-width: 980px;
	margin-top:0px;
	margin-bottom: 30px;
	text-align:left;
	}	
	


.bmenuarea .beer{
	position:relative;
	color: #FFFFFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	line-height: 30px;
	margin: 0 auto;
	max-width: 980px;
	margin-top:0px;
	margin-bottom: 30px;
	text-align:left;
	float: left;
	}	
		

.bmenuarea  .beer .prod img{
	width: 280px;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
	}			

.bmenuarea  .beer .cmnt{
	margin-left: 15px;
	margin-bottom: 10px;
	}	
	
	
.bmenuarea .craft{
	position:relative;
	color: #FFFFFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	line-height: 30px;
	margin: 0 auto;
	max-width: 980px;
	margin-top:0px;
	margin-bottom: 30px;
	text-align:left;
	float: left;
	}	

	
.bmenuarea  .craft .prod img{
	width: 280px;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
	}			

.bmenuarea  .craft .cmnt{
	margin-left: 15px;
	margin-bottom: 10px;
	}	
	
	
.bmenuarea .food{
	position:relative;
	color: #FFFFFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	line-height: 30px;
	margin: 0 auto;
	max-width: 980px;
	margin-top:0px;
	margin-bottom: 30px;
	text-align:left;
	float: left;
	}
		

.bmenuarea  .food .cmnt{
	margin-left: 15px;
	margin-bottom: 50px;
	}		
		
	
}